Changeset 28496

Timestamp:

May 17, 2014, 5:33:37 PM (11 years ago)

Author:

mistic100

Message:

feature 3077 : use Selectize with AJAX load/cache on cat_perm and batch_manager_unit

Location:

trunk/admin

Files:

• picture_modify.php (modified) (2 diffs)
• themes/default/template/batch_manager_unit.tpl (modified) (2 diffs)
• themes/default/template/cat_perm.tpl (modified) (3 diffs)
• themes/default/template/picture_modify.tpl (modified) (3 diffs)

trunk/admin/picture_modify.php

@@ -219 +219 @@
 $tag_selection = get_taglist($query);
 
-$query = '
-SELECT
-    id,
-    name
-  FROM '.TAGS_TABLE.'
-;';
-$tags = get_taglist($query, false);
-
 // retrieving direct information about picture
 $query = '
@@ -259 +251 @@
   array(
     'tag_selection' => $tag_selection,
-    'tags' => $tags,
     'U_SYNC' => $admin_url_start.'&sync_metadata=1',
     'U_DELETE' => $admin_url_start.'&delete=1&pwg_token='.get_pwg_token(),

trunk/admin/themes/default/template/batch_manager_unit.tpl

@@ -3 +3 @@
 {include file='include/colorbox.inc.tpl'}
 
-{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('select[name|="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
+{combine_script id='LocalStorageCache' load='footer' path='admin/themes/default/js/LocalStorageCache.js'}
+
+{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(){
+{* <!-- TAGS --> *}
+var tagsCache = new LocalStorageCache('tagsAdminList', 5*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);
+  });
+});
 
-  jQuery("a.preview-box").colorbox();
+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) {
+  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));
+  });
+});
+}());
 {/footer_script}
 
@@ -103 +131 @@
       <td><strong>{'Tags'|@translate}</strong></td>
       <td>
-
-<select name="tags-{$element.id}">
-{foreach from=$element.TAGS item=tag}
-  <option value="{$tag.id}" class="selected">{$tag.name}</option>
-{/foreach}
-</select>
-
+        <select data-selectize="tags" data-value="{$element.TAGS|@json_encode|escape:html}"
+          name="tags-{$element.id}[]" multiple style="width:500px;" ></select>
       </td>
     </tr>

trunk/admin/themes/default/template/cat_perm.tpl

@@ -1 @@
-{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"}
 
-  function checkStatusOptions() {
-    if (jQuery("input[name=status]:checked").val() == "private") {
-      jQuery("#privateOptions, #applytoSubAction").show();
-    }
-    else {
-      jQuery("#privateOptions, #applytoSubAction").hide();
-    }
-  }
-
-  checkStatusOptions();
-  jQuery("#selectStatus").change(function() {
-    checkStatusOptions();
-  });
-
-  jQuery("#indirectPermissionsDetailsShow").click(function(){
-    jQuery("#indirectPermissionsDetailsShow").hide();
-    jQuery("#indirectPermissionsDetailsHide").show();
-    jQuery("#indirectPermissionsDetails").show();
-    return false;
-  });
-
-  jQuery("#indirectPermissionsDetailsHide").click(function(){
-    jQuery("#indirectPermissionsDetailsShow").show();
-    jQuery("#indirectPermissionsDetailsHide").hide();
-    jQuery("#indirectPermissionsDetails").hide();
-    return false;
+{footer_script}
+(function(){
+{* <!-- GROUPS --> *}
+var groupsCache = new LocalStorageCache('groupsAdminList', 5*60, function(callback) {
+  jQuery.getJSON('{$ROOT_URL}ws.php?format=json&method=pwg.groups.getList&per_page=99999', function(data) {
+    callback(data.result.groups);
   });
 });
-{/literal}{/footer_script}
+
+jQuery('[data-selectize=groups]').selectize({
+  valueField: 'id',
+  labelField: 'name',
+  searchField: ['name'],
+  plugins: ['remove_button']
+});
+
+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));
+  });
+});
+
+{* <!-- USERS --> *}
+var usersCache = new LocalStorageCache('usersAdminList', 5*60, function(callback) {
+  var page = 0,
+      users = [];
+   
+  (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);
+      }
+    });
+  }(page));
+});
+
+jQuery('[data-selectize=users]').selectize({
+  valueField: 'id',
+  labelField: 'username',
+  searchField: ['username'],
+  plugins: ['remove_button']
+});
+
+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));
+  });
+});
+}());
+{/footer_script}
 
 <div class="titrePage">
@@ -59 +95 @@
     <strong>{'Permission granted for groups'|@translate}</strong>
     <br>
-    <select data-placeholder="{'Select groups...'|@translate}" class="chzn-select" multiple style="width:700px;" name="groups[]">
-      {html_options options=$groups selected=$groups_selected}
-    </select>
+    <select data-selectize="groups" data-value="{$groups_selected|@json_encode|escape:html}"
+        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>
@@ -70 +105 @@
     <strong>{'Permission granted for users'|@translate}</strong>
     <br>
-    <select data-placeholder="{'Select users...'|@translate}" class="chzn-select" multiple style="width:700px;" name="users[]">
-      {html_options options=$users selected=$users_selected}
-    </select>
+    <select data-selectize="users" data-value="{$users_selected|@json_encode|escape:html}"
+        name="users[]" multiple style="width:600px;" ></select>
   </p>
 
-{if isset($nb_users_granted_indirect)}
+{if isset($nb_users_granted_indirect) && $nb_users_granted_indirect>0}
   <p>
     {'%u users have automatic permission because they belong to a granted group.'|@translate:$nb_users_granted_indirect}

trunk/admin/themes/default/template/picture_modify.tpl

@@ -11 +11 @@
 (function(){
 {* <!-- CATEGORIES --> *}
-var categoriesCache = new LocalStorageCache('categoriesAdminList', 60, function(callback) {
+var categoriesCache = new LocalStorageCache('categoriesAdminList', 5*60, function(callback) {
   jQuery.getJSON('{$ROOT_URL}ws.php?format=json&method=pwg.categories.getAdminList', function(data) {
     callback(data.result.categories);
@@ -25 +25 @@
 
 categoriesCache.get(function(categories) {
-  var selects = jQuery('[data-selectize=categories]');
+  jQuery('[data-selectize=categories]').each(function() {
+    this.selectize.load(function(callback) {
+      callback(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);
-    });
+    jQuery.each(jQuery(this).data('value'), jQuery.proxy(function(i, id) {
+      this.selectize.addItem(id);
+    }, this));
   });
 });
 
 {* <!-- TAGS --> *}
-var tagsCache = new LocalStorageCache('tagsAdminList', 60, function(callback) {
+var tagsCache = new LocalStorageCache('tagsAdminList', 5*60, function(callback) {
   jQuery.getJSON('{$ROOT_URL}ws.php?format=json&method=pwg.tags.getAdminList', function(data) {
     var tags = data.result.tags;
@@ -71 +65 @@
 
 tagsCache.get(function(tags) {
-  var selects = jQuery('[data-selectize=tags]');
+  jQuery('[data-selectize=tags]').each(function() {
+    this.selectize.load(function(callback) {
+      callback(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);
-    });
+    jQuery.each(jQuery(this).data('value'), jQuery.proxy(function(i, tag) {
+      this.selectize.addItem(tag.id);
+    }, this));
   });
 });