From 1c545c601beeeaafacd367d7af2077742c0fcce6 Mon Sep 17 00:00:00 2001 From: plegall Date: Sat, 6 Mar 2010 22:10:23 +0000 Subject: feature 724: improved "add tags" form. Instead of a big list of checkboxes, displays a dynamic list of tags with jQuery, with suggestions based on existing tags and the ability to create new tags on the fly. The change was applied only on admin/picture_modify.php for test purpose. Note : FCBKcomplete 2.7 had a bug on "remote tag" click, and the bug was fixed on 2.7.1. But the suggestions were not working with 2.7.1. So I took the 2.7 and applied the tiny change to make the "remove tag" click work. git-svn-id: http://piwigo.org/svn/trunk@5067 68402e56-0260-453c-a942-63ccdbb3a9ee --- admin/picture_modify.php | 78 +++++++++++++++--------- admin/template/goto/default-layout.css | 44 +++++++++++++ admin/template/goto/icon/fcbkcomplete_close.gif | Bin 0 -> 90 bytes admin/template/goto/picture_modify.tpl | 27 +++++++- 4 files changed, 118 insertions(+), 31 deletions(-) create mode 100644 admin/template/goto/icon/fcbkcomplete_close.gif (limited to 'admin') diff --git a/admin/picture_modify.php b/admin/picture_modify.php index c7914f3a0..42306fc23 100644 --- a/admin/picture_modify.php +++ b/admin/picture_modify.php @@ -106,8 +106,32 @@ if (isset($_POST['submit']) and count($page['errors']) == 0 and !is_adviser()) array($data) ); + // In $_POST[tags] we receive something like array('~~6~~', '~~59~~', 'New + // tag', 'Another new tag') The ~~34~~ means that it is an existing + // tag. I've added the surrounding ~~ to permit creation of tags like "10" + // or "1234" (numeric characters only) + $tag_ids = array(); + if (isset($_POST['tags'])) + { + foreach ($_POST['tags'] as $raw_tag) + { + if (preg_match('/^~~(\d+)~~$/', $raw_tag, $matches)) + { + array_push($tag_ids, $matches[1]); + } + else + { + // we have to create a new tag + array_push( + $tag_ids, + tag_id_from_tag_name($raw_tag) + ); + } + } + } + set_tags( - isset($_POST['tags']) ? $_POST['tags'] : array(), + $tag_ids, $_GET['image_id'] ); @@ -169,6 +193,29 @@ if (isset($_POST['dismiss']) set_random_representant($_POST['cat_elected']); } +// tags +$tags = array(); + +$query = ' +SELECT + tag_id, + name + FROM '.IMAGE_TAG_TABLE.' AS it + JOIN '.TAGS_TABLE.' AS t ON t.id = it.tag_id + WHERE image_id = '.$_GET['image_id'].' +;'; +$result = pwg_query($query); +while ($row = pwg_db_fetch_assoc($result)) +{ + array_push( + $tags, + array( + 'value' => '~~'.$row['tag_id'].'~~', + 'caption' => $row['name'], + ) + ); +} + // retrieving direct information about picture $query = ' SELECT * @@ -185,14 +232,6 @@ if (!empty($row['storage_category_id'])) $image_file = $row['file']; -// tags -$query = ' -SELECT tag_id - FROM '.IMAGE_TAG_TABLE.' - WHERE image_id = '.$_GET['image_id'].' -;'; -$selected_tags = array_from_query($query, 'tag_id'); - // +-----------------------------------------------------------------------+ // | template init | // +-----------------------------------------------------------------------+ @@ -203,26 +242,9 @@ $template->set_filenames( ) ); -$all_tags = get_all_tags(); - -if (count($all_tags) > 0) -{ - $tag_selection = get_html_tag_selection( - $all_tags, - 'tags', - $selected_tags - ); -} -else -{ - $tag_selection = - '

'. - l10n('No tag defined. Use Administration>Pictures>Tags'). - '

'; -} - $template->assign( array( + 'tags' => $tags, 'U_SYNC' => get_root_url().'admin.php?page=picture_modify'. '&image_id='.$_GET['image_id']. @@ -245,8 +267,6 @@ $template->assign( 'AUTHOR' => isset($_POST['author']) ? $_POST['author'] : @$row['author'], - 'TAG_SELECTION' => $tag_selection, - 'DESCRIPTION' => htmlspecialchars( isset($_POST['description']) ? stripslashes($_POST['description']) : @$row['comment'] ), diff --git a/admin/template/goto/default-layout.css b/admin/template/goto/default-layout.css index 14116e1c2..9f4437d06 100644 --- a/admin/template/goto/default-layout.css +++ b/admin/template/goto/default-layout.css @@ -455,3 +455,47 @@ UL.tagSelection LI { img.ui-datepicker-trigger { cursor : pointer; } + +/* jQuery FCBKcomplete */ +/* TextboxList sample CSS */ +ul.holder { margin: 0; border: 1px solid #999; overflow: hidden; height: auto !important; height: 1%; padding: 4px 5px 0; } +*:first-child+html ul.holder { padding-bottom: 2px; } * html ul.holder { padding-bottom: 2px; } /* ie7 and below */ +ul.holder li { float: left; list-style-type: none; margin: 0 5px 4px 0; white-space:nowrap;} +ul.holder li.bit-box, ul.holder li.bit-input input { font: 11px "Lucida Grande", "Verdana"; } +ul.holder li.bit-box { -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; border: 1px solid #CAD8F3; background: #DEE7F8; padding: 1px 5px 2px; } +ul.holder li.bit-box-focus { border-color: #598BEC; background: #598BEC; color: #fff; } +ul.holder li.bit-input input { width: auto; overflow:visible; margin: 0; border: 0px; outline: 0; padding: 3px 0px 2px; } /* no left/right padding here please */ +ul.holder li.bit-input input.smallinput { width: 20px; } + +/* Facebook demo CSS */ +#add { border: 1px solid #999; width: 550px; margin: 50px; padding: 20px 30px 10px; } +form ol li { list-style-type: none; } +form ol { font: 11px "Lucida Grande", "Verdana"; margin: 0; padding: 0; } +form ol li.input-text { margin-bottom: 10px; list-style-type: none; padding-bottom: 10px; } +form ol li.input-text label { font-weight: bold; cursor: pointer; display: block; font-size: 13px; margin-bottom: 10px; } +form ol li.input-text input { width: 500px; padding: 5px 5px 6px; font: 11px "Lucida Grande", "Verdana"; border: 1px solid #999; } +form ul.holder { width: 500px; } +form ul { margin: 0 !important } +ul.holder li.bit-box, #apple-list ul.holder li.bit-box { padding-right: 15px; position: relative; z-index:1000;} +#apple-list ul.holder li.bit-input { margin: 0; } +#apple-list ul.holder li.bit-input input.smallinput { width: 5px; } +ul.holder li.bit-hover { background: #BBCEF1; border: 1px solid #6D95E0; } +ul.holder li.bit-box-focus { border-color: #598BEC; background: #598BEC; color: #fff; } +ul.holder li.bit-box a.closebutton { position: absolute; right: 4px; top: 5px; display: block; width: 7px; height: 7px; font-size: 1px; background: url(icon/fcbkcomplete_close.gif); } +ul.holder li.bit-box a.closebutton:hover { background-position: 7px; } +ul.holder li.bit-box-focus a.closebutton, ul.holder li.bit-box-focus a.closebutton:hover { background-position: bottom; } + +/* Autocompleter */ + +.facebook-auto { display: none; position: absolute; width: 512px; background: #eee; } +.facebook-auto .default { padding: 5px 7px; border: 1px solid #ccc; border-width: 0 1px 1px;font-family:"Lucida Grande","Verdana"; font-size:11px; } +.facebook-auto ul { display: none; margin: 0; padding: 0; overflow: auto; position:absolute; z-index:9999} +.facebook-auto ul li { padding: 5px 12px; z-index: 1000; cursor: pointer; margin: 0; list-style-type: none; border: 1px solid #ccc; border-width: 0 1px 1px; font: 11px "Lucida Grande", "Verdana"; background-color: #eee } +.facebook-auto ul li em { font-weight: bold; font-style: normal; background: #ccc; } +.facebook-auto ul li.auto-focus { background: #4173CC; color: #fff; } +.facebook-auto ul li.auto-focus em { background: none; } +.deleted { background-color:#4173CC !important; color:#ffffff !important;} +.hidden { display:none;} + +#demo ul.holder li.bit-input input { padding: 2px 0 1px; border: 1px solid #999; } +.ie6fix {height:1px;width:1px; position:absolute;top:0px;left:0px;z-index:1;} \ No newline at end of file diff --git a/admin/template/goto/icon/fcbkcomplete_close.gif b/admin/template/goto/icon/fcbkcomplete_close.gif new file mode 100644 index 000000000..cc2199248 Binary files /dev/null and b/admin/template/goto/icon/fcbkcomplete_close.gif differ diff --git a/admin/template/goto/picture_modify.tpl b/admin/template/goto/picture_modify.tpl index 4c8315d9b..77f1671a6 100644 --- a/admin/template/goto/picture_modify.tpl +++ b/admin/template/goto/picture_modify.tpl @@ -1,8 +1,25 @@ - {include file='include/autosize.inc.tpl'} {include file='include/dbselect.inc.tpl'} {include file='include/datepicker.inc.tpl'} +{known_script id="jquery.fcbkcomplete" src=$ROOT_URL|@cat:"template-common/lib/plugins/jquery.fcbkcomplete.js"} +{literal} + +{/literal} + {literal}