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

3 files changed, 69 insertions, 2 deletions

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
--- /dev/null
+++ b/admin/template/goto/icon/fcbkcomplete_close.gif
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}
+<script type="text/javascript">
+  $(document).ready(function() {
+    $("#tags").fcbkcomplete({
+      json_url: "admin.php?fckb_tags=1",
+      cache: false,
+      filter_case: true,
+      filter_hide: true,
+      firstselected: true,
+      filter_selected: true,
+      maxitems: 10,
+      newel: true
+    });
+  });
+</script>
+{/literal}
+
 {literal}
 <script type="text/javascript">
   pwg_initialization_datepicker("#date_creation_day", "#date_creation_month", "#date_creation_year", "#date_creation_linked_date", "#date_creation_action_set");
@@ -119,7 +136,13 @@
 
       <tr>
         <td><strong>{'Tags'|@translate}</strong></td>
-        <td>{$TAG_SELECTION}</td>
+        <td>
+<select id="tags" name="tags">
+{foreach from=$tags item=tag}
+  <option value="{$tag.value}" class="selected">{$tag.caption}</option>
+{/foreach}
+</select>
+        </td>
       </tr>