feature 3077 : factorize code for cache/selectize

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

5 files changed, 360 insertions, 334 deletions

diff --git a/admin/themes/default/js/LocalStorageCache.js b/admin/themes/default/js/LocalStorageCache.js
index 747254349..b2712dadf 100644
--- a/admin/themes/default/js/LocalStorageCache.js
+++ b/admin/themes/default/js/LocalStorageCache.js
@@ -1,165 +1,351 @@
-/**
- * Base LocalStorage cache
- *
- * @param options {object}
- *    - key (required) identifier of the collection
- *    - serverId (recommended) identifier of the Piwigo instance
- *    - serverKey (required) state of collection server-side
- *    - lifetime (optional) cache lifetime in seconds
- *    - loader (required) function called to fetch data, takes a callback as first argument
- *        which must be called with the loaded date
- */
-var LocalStorageCache = function(options) {
-  this._init(options);
-};
-
-/*
- * Constructor (deported for easy inheritance)
- */
-LocalStorageCache.prototype._init = function(options) {
-  this.key = options.key + '_' + options.serverId;
-  this.serverKey = options.serverKey;
-  this.lifetime = options.lifetime ? options.lifetime*1000 : 3600*1000;
-  this.loader = options.loader;
+(function($, exports) {
+  "use strict";
   
-  this.storage = window.localStorage;
-  this.ready = !!this.storage;
-};
-
-/*
- * Get the cache content
- * @param callback {function} called with the data as first parameter
- */
-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]);
+  /**
+   * Base LocalStorage cache
+   *
+   * @param options {object}
+   *    - key (required) identifier of the collection
+   *    - serverId (recommended) identifier of the Piwigo instance
+   *    - serverKey (required) state of collection server-side
+   *    - lifetime (optional) cache lifetime in seconds
+   *    - loader (required) function called to fetch data, takes a callback as first argument
+   *        which must be called with the loaded date
+   */
+  var LocalStorageCache = function(options) {
+    this._init(options);
+  };
+
+  /*
+   * Constructor (deported for easy inheritance)
+   */
+  LocalStorageCache.prototype._init = function(options) {
+    this.key = options.key + '_' + options.serverId;
+    this.serverKey = options.serverKey;
+    this.lifetime = options.lifetime ? options.lifetime*1000 : 3600*1000;
+    this.loader = options.loader;
+    
+    this.storage = window.localStorage;
+    this.ready = !!this.storage;
+  };
+
+  /*
+   * Get the cache content
+   * @param callback {function} called with the data as first parameter
+   */
+  LocalStorageCache.prototype.get = function(callback) {
+    var now = new Date().getTime(),
+        that = this;
     
-    if (now - cache.timestamp <= this.lifetime && cache.key == this.serverKey) {
-      callback(cache.data);
-      return;
+    if (this.ready && this.storage[this.key] != undefined) {
+      var cache = JSON.parse(this.storage[this.key]);
+      
+      if (now - cache.timestamp <= this.lifetime && cache.key == this.serverKey) {
+        callback(cache.data);
+        return;
+      }
     }
-  }
-  
-  this.loader(function(data) {
-    that.set.call(that, data);
-    callback(data);
-  });
-};
-
-/*
- * Manually set the cache content
- * @param data {mixed}
- */
-LocalStorageCache.prototype.set = function(data) {
-  if (this.ready) {
-    this.storage[this.key] = JSON.stringify({
-      timestamp: new Date().getTime(),
-      key: this.serverKey,
-      data: data
+    
+    this.loader(function(data) {
+      that.set.call(that, data);
+      callback(data);
     });
-  }
-};
-
-/*
- * Manually clear the cache
- */
-LocalStorageCache.prototype.clear = function() {
-  if (this.ready) {
-    this.storage.removeItem(this.key);
-  }
-};
-
-
-/**
- * Special LocalStorage for admin categories list
- *
- * @param options {object}
- *    - serverId (recommended) identifier of the Piwigo instance
- *    - serverKey (required) state of collection server-side
- *    - rootUrl (required) used for WS call
- */
-var CategoriesCache = function(options) {
-  options.key = 'categoriesAdminList';
+  };
+
+  /*
+   * Manually set the cache content
+   * @param data {mixed}
+   */
+  LocalStorageCache.prototype.set = function(data) {
+    if (this.ready) {
+      this.storage[this.key] = JSON.stringify({
+        timestamp: new Date().getTime(),
+        key: this.serverKey,
+        data: data
+      });
+    }
+  };
+
+  /*
+   * Manually clear the cache
+   */
+  LocalStorageCache.prototype.clear = function() {
+    if (this.ready) {
+      this.storage.removeItem(this.key);
+    }
+  };
+
   
-  options.loader = function(callback) {
-    jQuery.getJSON(options.rootUrl + 'ws.php?format=json&method=pwg.categories.getAdminList', function(data) {
-      callback(data.result.categories);
+  /**
+   * Abstract class containing common initialization code for selectize
+   */
+  var AbstractSelectizer = function(){};
+  AbstractSelectizer.prototype = new LocalStorageCache({});
+
+  /*
+   * Load Selectize with cache content
+   * @param $target {jQuery}
+   * @param options {object}
+   *    - default (optional) default value which will be forced if the select is emptyed
+   *    - filter (optional) function called for each select before applying the data
+   *      takes two parameters: cache data, options
+   *      must return new data
+   */
+  AbstractSelectizer.prototype._selectize = function($target, options) {
+    this.get(function(data) {
+      $target.each(function() {
+        var filtered, value;
+        
+        // apply filter function
+        if (options.filter != undefined) {
+          filtered = options.filter.call(this, data, options);
+        }
+        else {
+          filtered = data;
+        }
+        
+        // active creation mode
+        if (this.hasAttribute('data-selectize-create')) {
+          this.selectize.settings.create = true;
+        }
+        
+        // load options
+        this.selectize.load(function(callback) {
+          if ($.isEmptyObject(this.options)) {
+            callback(filtered);
+          }
+        });
+
+        // load items
+        if ((value = $(this).data('value'))) {
+          $.each(value, $.proxy(function(i, cat) {
+            if ($.isNumeric(cat))
+              this.selectize.addItem(cat);
+            else
+              this.selectize.addItem(cat.id);
+          }, this));
+        }
+        
+        if (options.default != undefined) {
+          // add default item
+          if (this.selectize.getValue() == '') {
+            this.selectize.addItem(options.default);
+          }
+
+          // if multiple: prevent item deletion
+          if (this.multiple) {
+            this.selectize.getItem(options.default).find('.remove').hide();
+            
+            this.selectize.on('item_remove', function(id) {
+              if (id == options.default) {
+                this.addItem(id);
+                this.getItem(id).find('.remove').hide();
+              }
+            });
+          }
+          // if single: restore default on blur
+          else {
+            this.selectize.on('dropdown_close', function() {
+              if (this.getValue() == '') {
+                this.addItem(options.default);
+              }
+            });
+          }
+        }
+      });
     });
   };
+
+
+  /**
+   * Special LocalStorage for admin categories list
+   *
+   * @param options {object}
+   *    - serverId (recommended) identifier of the Piwigo instance
+   *    - serverKey (required) state of collection server-side
+   *    - rootUrl (required) used for WS call
+   */
+  var CategoriesCache = function(options) {
+    options.key = 'categoriesAdminList';
+    
+    options.loader = function(callback) {
+      $.getJSON(options.rootUrl + 'ws.php?format=json&method=pwg.categories.getAdminList', function(data) {
+        callback(data.result.categories);
+      });
+    };
+    
+    this._init(options);
+  };
+
+  CategoriesCache.prototype = new AbstractSelectizer();
+
+  /*
+   * Init Selectize with cache content
+   * @see AbstractSelectizer._selectize
+   */
+  CategoriesCache.prototype.selectize = function($target, options) {
+    options = options || {};
+
+    $target.selectize({
+      valueField: 'id',
+      labelField: 'fullname',
+      sortField: 'global_rank',
+      searchField: ['fullname'],
+      plugins: ['remove_button']
+    });
+    
+    this._selectize($target, options);
+  };
+
+
+  /**
+   * Special LocalStorage for admin tags list
+   *
+   * @param options {object}
+   *    - serverId (recommended) identifier of the Piwigo instance
+   *    - serverKey (required) state of collection server-side
+   *    - rootUrl (required) used for WS call
+   */
+  var TagsCache = function(options) {
+    options.key = 'tagsAdminList';
+    
+    options.loader = function(callback) {
+      $.getJSON(options.rootUrl + '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);
+      });
+    };
+    
+    this._init(options);
+  };
+
+  TagsCache.prototype = new AbstractSelectizer();
+
+  /*
+   * Init Selectize with cache content
+   * @see AbstractSelectizer._selectize
+   */
+  TagsCache.prototype.selectize = function($target, options) {
+    options = options || {};
+
+    $target.selectize({
+      valueField: 'id',
+      labelField: 'name',
+      sortField: 'name',
+      searchField: ['name'],
+      plugins: ['remove_button']
+    });
+    
+    this._selectize($target, options);
+  };
   
-  this._init(options);
-};
-
-CategoriesCache.prototype = new LocalStorageCache({});
-
-/*
- * Init Selectize with cache content
- * @param $target {jQuery}
- * @param options {object}
- *    - default (optional) default value which will be forced if the select is emptyed
- *    - filter (optional) function called for each select before applying the data
- *      takes two parameters: cache data, options
- *      must return new data
- */
-CategoriesCache.prototype.selectize = function($target, options) {
-  options = options || {};
-
-  $target.selectize({
-    valueField: 'id',
-    labelField: 'fullname',
-    sortField: 'global_rank',
-    searchField: ['fullname'],
-    plugins: ['remove_button']
-  });
   
-  this.get(function(categories) {
-    $target.each(function() {
-      var data;
-      if (options.filter != undefined) {
-        data = options.filter.call(this, categories, options);
-      }
-      else {
-        data = categories;
-      }
-      
-      this.selectize.load(function(callback) {
-        callback(data);
+  /**
+   * Special LocalStorage for admin groups list
+   *
+   * @param options {object}
+   *    - serverId (recommended) identifier of the Piwigo instance
+   *    - serverKey (required) state of collection server-side
+   *    - rootUrl (required) used for WS call
+   */
+  var GroupsCache = function(options) {
+    options.key = 'groupsAdminList';
+    
+    options.loader = function(callback) {
+      $.getJSON(options.rootUrl + 'ws.php?format=json&method=pwg.groups.getList&per_page=9999', function(data) {
+        callback(data.result.groups);
       });
+    };
+    
+    this._init(options);
+  };
 
-      if (jQuery(this).data('value')) {
-        jQuery.each(jQuery(this).data('value'), jQuery.proxy(function(i, id) {
-          this.selectize.addItem(id);
-        }, this));
-      }
-      
-      if (options.default != undefined) {
-        if (this.selectize.getValue() == '') {
-          this.selectize.addItem(options.default);
-        }
+  GroupsCache.prototype = new AbstractSelectizer();
+
+  /*
+   * Init Selectize with cache content
+   * @see AbstractSelectizer._selectize
+   */
+  GroupsCache.prototype.selectize = function($target, options) {
+    options = options || {};
 
-        // if multiple: prevent item deletion
-        if (this.multiple) {
-          this.selectize.getItem(options.default).find('.remove').hide();
+    $target.selectize({
+      valueField: 'id',
+      labelField: 'name',
+      sortField: 'name',
+      searchField: ['name'],
+      plugins: ['remove_button']
+    });
+    
+    this._selectize($target, options);
+  };
+  
+  
+  /**
+   * Special LocalStorage for admin users list
+   *
+   * @param options {object}
+   *    - serverId (recommended) identifier of the Piwigo instance
+   *    - serverKey (required) state of collection server-side
+   *    - rootUrl (required) used for WS call
+   */
+  var UsersCache = function(options) {
+    options.key = 'usersAdminList';
+    
+    options.loader = function(callback) {
+      var users = [];
+      
+      // recursive loader
+      (function load(page){
+        jQuery.getJSON(options.rootUrl + 'ws.php?format=json&method=pwg.users.getList&display=username&per_page=9999&page='+ page, function(data) {
+          users = users.concat(data.result.users);
           
-          this.selectize.on('item_remove', function(id) {
-            if (id == options.default) {
-              this.addItem(id);
-              this.getItem(id).find('.remove').hide();
-            }
-          });
-        }
-        // if single: restore default on blur
-        else {
-          this.selectize.on('dropdown_close', function() {
-            if (this.getValue() == '') {
-              this.addItem(options.default);
-            }
-          });
-        }
-      }
+          if (data.result.paging.count == data.result.paging.per_page) {
+            load(++page);
+          }
+          else {
+            callback(users);
+          }
+        });
+      }(0));
+    };
+    
+    this._init(options);
+  };
+
+  UsersCache.prototype = new AbstractSelectizer();
+
+  /*
+   * Init Selectize with cache content
+   * @see AbstractSelectizer._selectize
+   */
+  UsersCache.prototype.selectize = function($target, options) {
+    options = options || {};
+
+    $target.selectize({
+      valueField: 'id',
+      labelField: 'username',
+      sortField: 'username',
+      searchField: ['username'],
+      plugins: ['remove_button']
     });
-  });
-};
\ No newline at end of file
+    
+    this._selectize($target, options);
+  };
+  
+  
+  /**
+   * Expose classes in global scope
+   */
+  exports.LocalStorageCache = LocalStorageCache;
+  exports.CategoriesCache = CategoriesCache;
+  exports.TagsCache = TagsCache;
+  exports.GroupsCache = GroupsCache;
+  exports.UsersCache = UsersCache;
+  
+}(jQuery, window));
\ No newline at end of file
diff --git a/admin/themes/default/template/batch_manager_global.tpl b/admin/themes/default/template/batch_manager_global.tpl
index a5a48e8de..00cdc50f3 100644
--- a/admin/themes/default/template/batch_manager_global.tpl
+++ b/admin/themes/default/template/batch_manager_global.tpl
@@ -68,55 +68,13 @@ jQuery(document).ready(function() {ldelim}
   jQuery("a.preview-box").colorbox();
   
   {* <!-- TAGS --> *}
-  var tagsCache = new LocalStorageCache({
-    key: 'tagsAdminList',
+  var tagsCache = new TagsCache({
     serverKey: '{$CACHE_KEYS.tags}',
     serverId: '{$CACHE_KEYS._hash}',
-
-    loader: 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);
-      });
-    }
-  });
-  
-  jQuery('[data-selectize=tags]').selectize({
-    valueField: 'id',
-    labelField: 'name',
-    searchField: ['name'],
-    plugins: ['remove_button']
-  });
-  
-  jQuery('[data-selectize=tags-create]').selectize({
-    valueField: 'id',
-    labelField: 'name',
-    searchField: ['name'],
-    plugins: ['remove_button'],
-    create: true
+    rootUrl: '{$ROOT_URL}'
   });
-  
-  tagsCache.get(function(tags) {
-    jQuery('[data-selectize^=tags]').each(function() {
-      this.selectize.load(function(callback) {
-        // one select is populated with <option>
-        if (jQuery.isEmptyObject(this.options)) {
-          callback(tags);
-        }
-      });
 
-      if (jQuery(this).data('value')) {
-        jQuery.each(jQuery(this).data('value'), jQuery.proxy(function(i, tag) {
-          this.selectize.addItem(tag.id);
-        }, this));
-      }
-    });
-  });
+  tagsCache.selectize(jQuery('[data-selectize=tags]'));
   
   {* <!-- CATEGORIES --> *}
   var categoriesCache = new CategoriesCache({
@@ -654,7 +612,7 @@ $(document).ready(function() {
         <input type="checkbox" name="filter_tags_use" class="useFilterCheckbox" {if isset($filter.tags)}checked="checked"{/if}>
         {'Tags'|@translate}
         <select data-selectize="tags" data-value="{$filter_tags|@json_encode|escape:html}"
-          name="filter_tags[]" multiple style="width:400px;" ></select>
+          name="filter_tags[]" multiple style="width:400px;"></select>
         <label><span><input type="radio" name="tag_mode" value="AND" {if !isset($filter.tag_mode) or $filter.tag_mode eq 'AND'}checked="checked"{/if}> {'All tags'|@translate}</span></label>
         <label><span><input type="radio" name="tag_mode" value="OR" {if isset($filter.tag_mode) and $filter.tag_mode eq 'OR'}checked="checked"{/if}> {'Any tag'|@translate}</span></label>
       </li>
@@ -874,7 +832,7 @@ UL.thumbnails SPAN.wrap2 {ldelim}
 
     <!-- add_tags -->
     <div id="action_add_tags" class="bulkAction">
-      <select data-selectize="tags-create" name="add_tags[]" multiple style="width:400px;"></select>
+      <select data-selectize="tags" data-selectize-create name="add_tags[]" multiple style="width:400px;"></select>
     </div>
 
     <!-- del_tags -->
diff --git a/admin/themes/default/template/batch_manager_unit.tpl b/admin/themes/default/template/batch_manager_unit.tpl
index 6d5a90ddd..27f8cd721 100644
--- a/admin/themes/default/template/batch_manager_unit.tpl
+++ b/admin/themes/default/template/batch_manager_unit.tpl
@@ -10,43 +10,13 @@
 {footer_script}
 (function(){
 {* <!-- TAGS --> *}
-var tagsCache = new LocalStorageCache({
-  key: 'tagsAdminList',
+var tagsCache = new TagsCache({
   serverKey: '{$CACHE_KEYS.tags}',
   serverId: '{$CACHE_KEYS._hash}',
-
-  loader: 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);
-    });
-  }
-});
-
-jQuery('[data-selectize=tags]').selectize({
-  valueField: 'id',
-  labelField: 'name',
-  searchField: ['name'],
-  plugins: ['remove_button'],
-  create: true
+  rootUrl: '{$ROOT_URL}'
 });
 
-tagsCache.get(function(tags) {
-  jQuery('[data-selectize=tags]').each(function() {
-    this.selectize.load(function(callback) {
-      callback(tags);
-    });
-
-    jQuery.each(jQuery(this).data('value'), jQuery.proxy(function(i, tag) {
-      this.selectize.addItem(tag.id);
-    }, this));
-  });
-});
+tagsCache.selectize(jQuery('[data-selectize=tags]'));
 
 {* <!-- DATEPICKER --> *}
 jQuery(function(){ {* <!-- onLoad needed to wait localization loads --> *}
@@ -128,7 +98,7 @@ $(".elementEdit img")
       <td><strong>{'Tags'|@translate}</strong></td>
       <td>
         <select data-selectize="tags" data-value="{$element.TAGS|@json_encode|escape:html}"
-          name="tags-{$element.id}[]" multiple style="width:500px;" ></select>
+          name="tags-{$element.id}[]" multiple style="width:500px;" data-selectize-create></select>
       </td>
     </tr>
 
diff --git a/admin/themes/default/template/cat_perm.tpl b/admin/themes/default/template/cat_perm.tpl
index d810475b2..edaab262a 100644
--- a/admin/themes/default/template/cat_perm.tpl
+++ b/admin/themes/default/template/cat_perm.tpl
@@ -6,80 +6,22 @@
 {footer_script}
 (function(){
 {* <!-- GROUPS --> *}
-var groupsCache = new LocalStorageCache({
-  key: 'groupsAdminList',
+var groupsCache = new GroupsCache({
   serverKey: '{$CACHE_KEYS.groups}',
   serverId: '{$CACHE_KEYS._hash}',
-
-  loader: function(callback) {
-    jQuery.getJSON('{$ROOT_URL}ws.php?format=json&method=pwg.groups.getList&per_page=99999', function(data) {
-      callback(data.result.groups);
-    });
-  }
-});
-
-jQuery('[data-selectize=groups]').selectize({
-  valueField: 'id',
-  labelField: 'name',
-  searchField: ['name'],
-  plugins: ['remove_button']
+  rootUrl: '{$ROOT_URL}'
 });
 
-groupsCache.get(function(groups) {
-  jQuery('[data-selectize=groups]').each(function() {
-    this.selectize.load(function(callback) {
-      callback(groups);
-    });
-
-    jQuery.each(jQuery(this).data('value'), jQuery.proxy(function(i, id) {
-      this.selectize.addItem(id);
-    }, this));
-  });
-});
+groupsCache.selectize(jQuery('[data-selectize=groups]'));
 
 {* <!-- USERS --> *}
-var usersCache = new LocalStorageCache({
-  key: 'usersAdminList',
+var usersCache = new UsersCache({
   serverKey: '{$CACHE_KEYS.users}',
   serverId: '{$CACHE_KEYS._hash}',
-
-  loader: function(callback) {
-    var users = [];
-    
-    // recursive loader
-    (function load(page){
-      jQuery.getJSON('{$ROOT_URL}ws.php?format=json&method=pwg.users.getList&display=username&per_page=99999&page='+ page, function(data) {
-        users = users.concat(data.result.users);
-        
-        if (data.result.paging.count == data.result.paging.per_page) {
-          load(++page);
-        }
-        else {
-          callback(users);
-        }
-      });
-    }(0));
-  }
-});
-
-jQuery('[data-selectize=users]').selectize({
-  valueField: 'id',
-  labelField: 'username',
-  searchField: ['username'],
-  plugins: ['remove_button']
+  rootUrl: '{$ROOT_URL}'
 });
 
-usersCache.get(function(users) {
-  jQuery('[data-selectize=users]').each(function() {
-    this.selectize.load(function(callback) {
-      callback(users);
-    });
-
-    jQuery.each(jQuery(this).data('value'), jQuery.proxy(function(i, id) {
-      this.selectize.addItem(id);
-    }, this));
-  });
-});
+usersCache.selectize(jQuery('[data-selectize=users]'));
 
 {* <!-- TOGGLES --> *}
 function checkStatusOptions() {
@@ -130,7 +72,7 @@ jQuery("#selectStatus").change(function() {
     <strong>{'Permission granted for groups'|@translate}</strong>
     <br>
     <select data-selectize="groups" data-value="{$groups_selected|@json_encode|escape:html}"
-        name="groups[]" multiple style="width:600px;" ></select>
+        name="groups[]" multiple style="width:600px;"></select>
 {else}
     {'There is no group in this gallery.'|@translate} <a href="admin.php?page=group_list" class="externalLink">{'Group management'|@translate}</a>
 {/if}
@@ -140,7 +82,7 @@ jQuery("#selectStatus").change(function() {
     <strong>{'Permission granted for users'|@translate}</strong>
     <br>
     <select data-selectize="users" data-value="{$users_selected|@json_encode|escape:html}"
-        name="users[]" multiple style="width:600px;" ></select>
+        name="users[]" multiple style="width:600px;"></select>
   </p>
 
 {if isset($nb_users_granted_indirect) && $nb_users_granted_indirect>0}
diff --git a/admin/themes/default/template/picture_modify.tpl b/admin/themes/default/template/picture_modify.tpl
index 454a06428..60c98140d 100644
--- a/admin/themes/default/template/picture_modify.tpl
+++ b/admin/themes/default/template/picture_modify.tpl
@@ -24,43 +24,13 @@ categoriesCache.selectize(jQuery('[data-selectize=categories]'), { {if $STORAGE_
 {/if} });
 
 {* <!-- TAGS --> *}
-var tagsCache = new LocalStorageCache({
-  key: 'tagsAdminList',
+var tagsCache = new TagsCache({
   serverKey: '{$CACHE_KEYS.tags}',
   serverId: '{$CACHE_KEYS._hash}',
-
-  loader: 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);
-    });
-  }
-});
-
-jQuery('[data-selectize=tags]').selectize({
-  valueField: 'id',
-  labelField: 'name',
-  searchField: ['name'],
-  plugins: ['remove_button'],
-  create: true
+  rootUrl: '{$ROOT_URL}'
 });
 
-tagsCache.get(function(tags) {
-  jQuery('[data-selectize=tags]').each(function() {
-    this.selectize.load(function(callback) {
-      callback(tags);
-    });
-
-    jQuery.each(jQuery(this).data('value'), jQuery.proxy(function(i, tag) {
-      this.selectize.addItem(tag.id);
-    }, this));
-  });
-});
+tagsCache.selectize(jQuery('[data-selectize=tags]'));
 
 {* <!-- DATEPICKER --> *}
 jQuery(function(){ {* <!-- onLoad needed to wait localization loads --> *}
@@ -139,21 +109,21 @@ jQuery(function(){ {* <!-- onLoad needed to wait localization loads --> *}
       <strong>{'Linked albums'|@translate}</strong>
       <br>
       <select data-selectize="categories" data-value="{$associated_albums|@json_encode|escape:html}"
-        name="associate[]" multiple style="width:600px;" ></select>
+        name="associate[]" multiple style="width:600px;"></select>
     </p>
 
     <p>
       <strong>{'Representation of albums'|@translate}</strong>
       <br>
       <select data-selectize="categories" data-value="{$represented_albums|@json_encode|escape:html}"
-        name="represent[]" multiple style="width:600px;" ></select>
+        name="represent[]" multiple style="width:600px;"></select>
     </p>
 
     <p>
       <strong>{'Tags'|@translate}</strong>
       <br>
       <select data-selectize="tags" data-value="{$tag_selection|@json_encode|escape:html}"
-        name="tags[]" multiple style="width:600px;" ></select>
+        name="tags[]" multiple style="width:600px;" data-selectize-create></select>
     </p>
 
     <p>