feature 3077 : use Selectize with AJAX load/cache on picture_modify

git-svn-id: http://piwigo.org/svn/trunk@28494 68402e56-0260-453c-a942-63ccdbb3a9ee

3 files changed, 146 insertions, 50 deletions

diff --git a/admin/picture_modify.php b/admin/picture_modify.php
index 8e8e1c081..0eccae136 100644
--- a/admin/picture_modify.php
+++ b/admin/picture_modify.php
@@ -42,7 +42,7 @@ SELECT id
   FROM '.CATEGORIES_TABLE.'
   WHERE representative_picture_id = '.$_GET['image_id'].'
 ;';
-$represent_options_selected = array_from_query($query, 'id');
+$represent_options_selected = query2array($query, null, 'id');
 
 // +-----------------------------------------------------------------------+
 // |                             delete photo                              |
@@ -127,23 +127,23 @@ if (isset($_POST['date_creation_action'])
 if (isset($_POST['submit']) and count($page['errors']) == 0)
 {
   $data = array();
-  $data{'id'} = $_GET['image_id'];
-  $data{'name'} = $_POST['name'];
-  $data{'author'} = $_POST['author'];
+  $data['id'] = $_GET['image_id'];
+  $data['name'] = $_POST['name'];
+  $data['author'] = $_POST['author'];
   $data['level'] = $_POST['level'];
 
   if ($conf['allow_html_descriptions'])
   {
-    $data{'comment'} = @$_POST['description'];
+    $data['comment'] = @$_POST['description'];
   }
   else
   {
-    $data{'comment'} = strip_tags(@$_POST['description']);
+    $data['comment'] = strip_tags(@$_POST['description']);
   }
 
   if (!empty($_POST['date_creation_year']))
   {
-    $data{'date_creation'} =
+    $data['date_creation'] =
       $_POST['date_creation_year']
       .'-'.$_POST['date_creation_month']
       .'-'.$_POST['date_creation_day']
@@ -151,7 +151,7 @@ if (isset($_POST['submit']) and count($page['errors']) == 0)
   }
   else
   {
-    $data{'date_creation'} = null;
+    $data['date_creation'] = null;
   }
 
   $data = trigger_change('picture_modify_before_update', $data);
@@ -469,14 +469,9 @@ SELECT id
     INNER JOIN '.IMAGE_CATEGORY_TABLE.' ON id = category_id
   WHERE image_id = '.$_GET['image_id'].'
 ;';
-$associate_options_selected = array_from_query($query, 'id');
+$associate_options_selected = query2array($query, null, 'id');
 
-$query = '
-SELECT id,name,uppercats,global_rank
-  FROM '.CATEGORIES_TABLE.'
-;';
-display_select_cat_wrapper($query, $associate_options_selected, 'associate_options');
-display_select_cat_wrapper($query, $represent_options_selected, 'represent_options');
+$template->assign(compact('associate_options_selected', 'represent_options_selected'));
 
 trigger_action('loc_end_picture_modify');
 
diff --git a/admin/themes/default/js/LocalStorageCache.js b/admin/themes/default/js/LocalStorageCache.js
new file mode 100644
index 000000000..49a4fa98d
--- /dev/null
+++ b/admin/themes/default/js/LocalStorageCache.js
@@ -0,0 +1,48 @@
+var LocalStorageCache = function(key, lifetime, loader) {
+  this.key = key;
+  this.lifetime = lifetime*1000;
+  this.loader = loader;
+  
+  this.storage = window.localStorage;
+  this.ready = !!this.storage;
+};
+
+LocalStorageCache.prototype.get = function(callback) {
+  var now = new Date().getTime(),
+      that = this;
+  
+  if (this.ready && this.storage[this.key] != undefined) {
+    var cache = JSON.parse(this.storage[this.key]);
+    
+    if (now - cache.timestamp <= this.lifetime) {
+      callback(cache.data);
+      return;
+    }
+  }
+  
+  this.loader(function(data) {
+    if (that.ready) {
+      that.storage[that.key] = JSON.stringify({
+        timestamp: now,
+        data: data
+      });
+    }
+    
+    callback(data);
+  });
+};
+
+LocalStorageCache.prototype.set = function(data) {
+  if (this.ready) {
+    that.storage[that.key] = JSON.stringify({
+      timestamp: new Date().getTime(),
+      data: data
+    });
+  }
+};
+
+LocalStorageCache.prototype.clear = function() {
+  if (this.ready) {
+    this.storage.removeItem(this.key);
+  }
+};
\ No newline at end of file
diff --git a/admin/themes/default/template/picture_modify.tpl b/admin/themes/default/template/picture_modify.tpl
index 9fbd81daf..dd49fbd86 100644
--- a/admin/themes/default/template/picture_modify.tpl
+++ b/admin/themes/default/template/picture_modify.tpl
@@ -2,36 +2,94 @@
 {include file='include/dbselect.inc.tpl'}
 {include file='include/datepicker.inc.tpl'}
 
-{combine_script id='jquery.chosen' load='footer' path='themes/default/js/plugins/chosen.jquery.min.js'}
-{combine_css path="themes/default/js/plugins/chosen.css"}
+{combine_script id='LocalStorageCache' load='footer' path='admin/themes/default/js/LocalStorageCache.js'}
 
-{footer_script}{literal}
-jQuery(document).ready(function() {
-  jQuery(".chzn-select").chosen();
+{combine_script id='jquery.selectize' load='footer' path='themes/default/js/plugins/selectize.min.js'}
+{combine_css id='jquery.selectize' path="themes/default/js/plugins/selectize.default.css"}
+
+{footer_script}
+(function(){
+{* <!-- CATEGORIES --> *}
+var categoriesCache = new LocalStorageCache('categoriesAdminList', 60, function(callback) {
+  jQuery.getJSON('{$ROOT_URL}ws.php?format=json&method=pwg.categories.getAdminList', function(data) {
+    callback(data.result.categories);
+  });
+});
+
+jQuery('[data-selectize=categories]').selectize({
+  valueField: 'id',
+  labelField: 'fullname',
+  searchField: ['fullname'],
+  plugins: ['remove_button']
 });
-{/literal}{/footer_script}
-
-{combine_css path='themes/default/js/plugins/jquery.tokeninput.css'}
-{combine_script id='jquery.tokeninput' load='async' require='jquery' path='themes/default/js/plugins/jquery.tokeninput.js'}
-{footer_script require='jquery.tokeninput'}
-jQuery(document).ready(function() {ldelim}
-  jQuery("#tags").tokenInput(
-    [{foreach from=$tags item=tag name=tags}{ldelim}"name":"{$tag.name|@escape:'javascript'}","id":"{$tag.id}"{rdelim}{if !$smarty.foreach.tags.last},{/if}{/foreach}],
-    {ldelim}
-      hintText: '{'Type in a search term'|@translate}',
-      noResultsText: '{'No results'|@translate}',
-      searchingText: '{'Searching...'|@translate}',
-      newText: ' ({'new'|@translate})',
-      animateDropdown: false,
-      preventDuplicates: true,
-      allowFreeTagging: true
+
+categoriesCache.get(function(categories) {
+  var selects = jQuery('[data-selectize=categories]');
+
+  jQuery.each(categories, function(i, category) {
+    selects.each(function() {
+      this.selectize.addOption(category);
+    });
+  });
+  
+  selects.each(function() {
+    var that = this;
+
+    jQuery.each(jQuery(this).data('value'), function(i, id) {
+      that.selectize.addItem(id);
+    });
+  });
+});
+
+{* <!-- TAGS --> *}
+var tagsCache = new LocalStorageCache('tagsAdminList', 60, function(callback) {
+  jQuery.getJSON('{$ROOT_URL}ws.php?format=json&method=pwg.tags.getAdminList', function(data) {
+    var tags = data.result.tags;
+    
+    for (var i=0, l=tags.length; i<l; i++) {
+      tags[i].id = '~~' + tags[i].id + '~~';
     }
-  );
+    
+    callback(tags);
+  });
 });
-{/footer_script}
 
-{footer_script}
+jQuery('[data-selectize=tags]').selectize({
+  valueField: 'id',
+  labelField: 'name',
+  searchField: ['name'],
+  plugins: ['remove_button'],
+  create: function(input, callback) {
+    tagsCache.clear();
+    
+    callback({
+      id: input,
+      name: input
+    });
+  }
+});
+
+tagsCache.get(function(tags) {
+  var selects = jQuery('[data-selectize=tags]');
+
+  jQuery.each(tags, function(i, tag) {
+    selects.each(function() {
+      this.selectize.addOption(tag);
+    });
+  });
+  
+  selects.each(function() {
+    var that = this;
+
+    jQuery.each(jQuery(this).data('value'), function(i, tag) {
+      that.selectize.addItem(tag.id);
+    });
+  });
+});
+
+{* <!-- DATEPICKER --> *}
 pwg_initialization_datepicker("#date_creation_day", "#date_creation_month", "#date_creation_year", "#date_creation_linked_date", "#date_creation_action_set");
+}());
 {/footer_script}
 
 <h2>{$TITLE} &#8250; {'Edit photo'|@translate} {$TABSHEET_TITLE}</h2>
@@ -112,27 +170,22 @@ pwg_initialization_datepicker("#date_creation_day", "#date_creation_month", "#da
     <p>
       <strong>{'Linked albums'|@translate}</strong>
       <br>
-      <select data-placeholder="Select albums..." class="chzn-select" multiple style="width:700px;" name="associate[]">
-        {html_options options=$associate_options selected=$associate_options_selected}
-      </select>
+      <select data-selectize="categories" data-value="{$associate_options_selected|@json_encode|escape:html}"
+        name="associate[]" multiple style="width:600px;" ></select>
     </p>
 
     <p>
       <strong>{'Representation of albums'|@translate}</strong>
       <br>
-      <select data-placeholder="Select albums..." class="chzn-select" multiple style="width:700px;" name="represent[]">
-        {html_options options=$represent_options selected=$represent_options_selected}
-      </select>
+      <select data-selectize="categories" data-value="{$represent_options_selected|@json_encode|escape:html}"
+        name="represent[]" multiple style="width:600px;" ></select>
     </p>
 
     <p>
       <strong>{'Tags'|@translate}</strong>
       <br>
-<select id="tags" name="tags">
-{foreach from=$tag_selection item=tag}
-  <option value="{$tag.id}" class="selected">{$tag.name}</option>
-{/foreach}
-</select>
+      <select data-selectize="tags" data-value="{$tag_selection|@json_encode|escape:html}"
+        name="tags[]" multiple style="width:600px;" ></select>
     </p>
 
     <p>