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

5 files changed, 143 insertions, 31 deletions

diff --git a/admin.php b/admin.php
index bc69f7321..d2ed70747 100644
--- a/admin.php
+++ b/admin.php
@@ -34,6 +34,31 @@ include_once(PHPWG_ROOT_PATH.'admin/include/functions_plugins.inc.php');
 // +-----------------------------------------------------------------------+
 check_status(ACCESS_ADMINISTRATOR);
 
+// tags
+if (isset($_GET['fckb_tags']))
+{
+  $query = '
+SELECT
+    id,
+    name
+  FROM '.TAGS_TABLE.'
+;';
+  $result = pwg_query($query);
+  $taglist = array();
+  while ($row = pwg_db_fetch_assoc($result))
+  {
+    array_push(
+      $taglist,
+      array(
+        'caption' => $row['name'],
+        'value' => '~~'.$row['id'].'~~',
+        )
+      );
+  }
+  echo json_encode($taglist);
+  exit();
+}
+
 // +-----------------------------------------------------------------------+
 // |                    synchronize user informations                      |
 // +-----------------------------------------------------------------------+
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 =
-    '<p>'.
-    l10n('No tag defined. Use Administration>Pictures>Tags').
-    '</p>';
-}
-
 $template->assign(
   array(
+    'tags' => $tags,
     'U_SYNC' =>
         get_root_url().'admin.php?page=picture_modify'.
         '&amp;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
--- /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>