feature 3077 : use selectize on batch_manager_global, cat_modify and photos_add_direct

+ rewrite "add album" popup (more flexible and working with selectize)

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

8 files changed, 328 insertions, 113 deletions

diff --git a/admin/themes/default/js/addAlbum.js b/admin/themes/default/js/addAlbum.js
new file mode 100644
index 000000000..60942d8a7
--- /dev/null
+++ b/admin/themes/default/js/addAlbum.js
@@ -0,0 +1,123 @@
+jQuery.fn.pwgAddAlbum = function(options) {
+  if (!options.cache) {
+    jQuery.error('pwgAddAlbum: missing categories cache');
+  }
+  
+  var $popup = jQuery('#addAlbumForm');
+  if (!$popup.data('init')) {
+    $popup.find('[name="category_parent"]').selectize({
+      valueField: 'id',
+      labelField: 'fullname',
+      sortField: 'fullname',
+      searchField: ['fullname'],
+      plugins: ['remove_button'],
+      onInitialize: function() {
+        this.on('dropdown_close', function() {
+          if (this.getValue() == '') {
+            this.setValue(0);
+          }
+        });
+      }
+    });
+    
+    $popup.find('form').on('submit', function(e) {
+      e.preventDefault();
+      
+      jQuery('#categoryNameError').text('');
+      
+      var albumParent = $popup.find('[name="category_parent"]'),
+          parent_id = albumParent.val(),
+          name = $popup.find('[name=category_name]').val(),
+          target = $popup.data('target');
+
+      jQuery.ajax({
+        url: 'ws.php?format=json',
+        type: 'POST',
+        dataType: 'json',
+        data: {
+          method: 'pwg.categories.add',
+          parent: parent_id,
+          name: name
+        },
+        beforeSend: function() {
+          jQuery('#albumCreationLoading').show();
+        },
+        success: function(data) {
+          jQuery('#albumCreationLoading').hide();
+          jQuery('[data-add-album="'+ target +'"]').colorbox.close();
+
+          var newAlbum = data.result.id,
+              newAlbum_name = '';
+              
+          if (parent_id != 0) {
+            newAlbum_name = albumParent[0].selectize.options[parent_id].fullname +' / ';
+          }
+          newAlbum_name+= name;
+          
+          var $albumSelect = jQuery('[name="'+ target +'"]');
+          
+          // target is a normal select
+          if (!$albumSelect[0].selectize) {
+            var new_option = jQuery('<option/>')
+                .attr('value', newAlbum)
+                .attr('selected', 'selected')
+                .text(newAlbum_name);
+
+            $albumSelect.find('option').removeAttr('selected');
+            
+            if (parent_id==0) {
+              $albumSelect.prepend(new_option);
+            }
+            else {
+              $albumSelect.find('option[value='+ parent_id +']').after(new_option);
+            }
+          }
+          // target is selectize
+          else {
+            $albumSelect[0].selectize.addOption({
+              id: newAlbum,
+              fullname: newAlbum_name
+            });
+            
+            $albumSelect[0].selectize.setValue(newAlbum);
+          }
+
+          albumParent.val('');
+          jQuery('#albumSelection').show();
+        },
+        error: function(XMLHttpRequest, textStatus, errorThrows) {
+            jQuery('#albumCreationLoading').hide();
+            jQuery('#categoryNameError').text(errorThrows).css('color', 'red');
+        }
+      });
+    });
+  }
+  
+  this.colorbox({
+    inline: true,
+    href: '#addAlbumForm',
+    width: 350, height: 300,
+    onComplete: function() {
+      var albumParent = $popup.find('[name="category_parent"]')[0];
+      
+      $popup.data('target', jQuery(this).data('addAlbum'));
+
+      albumParent.selectize.clearOptions();
+      
+      options.cache.get(function(categories) {
+        categories.push({
+          id: 0,
+          fullname: '------------'
+        });
+        
+        albumParent.selectize.load(function(callback) {
+          callback(categories);
+        });
+        
+        albumParent.selectize.setValue(0);
+      });
+    }
+  });
+  
+  return this;
+};
\ 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 087f9916a..4fdad75d3 100644
--- a/admin/themes/default/template/batch_manager_global.tpl
+++ b/admin/themes/default/template/batch_manager_global.tpl
@@ -117,6 +117,55 @@ jQuery(document).ready(function() {ldelim}
       }
     });
   });
+  
+  {* <!-- CATEGORIES --> *}
+  var categoriesCache = new LocalStorageCache({
+    key: 'categoriesAdminList',
+    serverKey: '{$CACHE_KEYS.categories}',
+    serverId: '{$CACHE_KEYS._hash}',
+
+    loader: 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',
+    sortField: 'fullname',
+    searchField: ['fullname'],
+    plugins: ['remove_button']
+  });
+  
+  categoriesCache.get(function(categories) {
+    categories.sort(function(a, b) {
+      return a.fullname.localeCompare(b.fullname);
+    });
+    
+    jQuery('[data-selectize=categories]').each(function() {
+      this.selectize.load(function(callback) {
+        callback(categories);
+      });
+
+      if (jQuery(this).data('value')) {
+        this.selectize.setValue(jQuery(this).data('value')[0]);
+      }
+      
+      // prevent empty value
+      if (this.selectize.getValue() == '') {
+        this.selectize.setValue(categories[0].id);
+      }
+      this.selectize.on('dropdown_close', function() {
+        if (this.getValue() == '') {
+          this.setValue(categories[0].id);
+        }
+      });
+    });
+  });
+  
+  jQuery('[data-add-album]').pwgAddAlbum({ cache: categoriesCache });
 });
 
 var nb_thumbs_page = {$nb_thumbs_page};
@@ -228,13 +277,6 @@ $(document).ready(function() {
     $("[id^=action_]").hide();
     $("#action_"+$(this).prop("value")).show();
 
-    /* make sure the #albumSelect is on the right select box so that the */
-    /* "add new album" popup fills the right select box                  */
-    if ("associate" == $(this).prop("value") || "move" == $(this).prop("value")) {
-      jQuery("#albumSelect").removeAttr("id");
-      jQuery("#action_"+$(this).prop("value")+" select").attr("id", "albumSelect");
-    }
-
     if ($(this).val() != -1) {
       $("#applyActionBlock").show();
     }
@@ -621,9 +663,8 @@ $(document).ready(function() {
         <a href="#" class="removeFilter" title="remove this filter"><span>[x]</span></a>
         <input type="checkbox" name="filter_category_use" class="useFilterCheckbox" {if isset($filter.category)}checked="checked"{/if}>
         {'Album'|@translate}
-        <select style="width:400px" name="filter_category" size="1">
-          {html_options options=$category_full_name_options selected=$filter_category_selected}
-        </select>
+        <select data-selectize="categories" data-value="{$filter_category_selected|@json_encode|escape:html}"
+          name="filter_category" style="width:400px"></select>
         <label><input type="checkbox" name="filter_category_recursive" {if isset($filter.category_recursive)}checked="checked"{/if}> {'include child albums'|@translate}</label>
       </li>
       
@@ -631,7 +672,7 @@ $(document).ready(function() {
         <a href="#" class="removeFilter" title="remove this filter"><span>[x]</span></a>
         <input type="checkbox" name="filter_tags_use" class="useFilterCheckbox" {if isset($filter.tags)}checked="checked"{/if}>
         {'Tags'|@translate}
-        <select data-selectize="tags" data-value="{if isset($filter_tags)}{$filter_tags|@json_encode|escape:html}{else}[]{/if}"
+        <select data-selectize="tags" data-value="{$filter_tags|@json_encode|escape:html}"
           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>
@@ -833,26 +874,22 @@ UL.thumbnails SPAN.wrap2 {ldelim}
 
     <!-- associate -->
     <div id="action_associate" class="bulkAction">
-          <select style="width:400px" name="associate" size="1">
-            {html_options options=$category_full_name_options}
-         </select>
-<br>{'... or '|@translate} <a href="#" class="addAlbumOpen" title="{'create a new album'|@translate}">{'create a new album'|@translate}</a>
+      <select data-selectize="categories" name="associate" style="width:400px"></select>
+      <br>{'... or '|@translate}
+      <a href="#" data-add-album="associate" title="{'create a new album'|@translate}">{'create a new album'|@translate}</a>
     </div>
 
     <!-- move -->
     <div id="action_move" class="bulkAction">
-          <select style="width:400px" name="move" size="1">
-            {html_options options=$category_full_name_options}
-         </select>
-<br>{'... or '|@translate} <a href="#" class="addAlbumOpen" title="{'create a new album'|@translate}">{'create a new album'|@translate}</a>
+      <select data-selectize="categories" name="move" style="width:400px"></select>
+      <br>{'... or '|@translate}
+      <a href="#" data-add-album="move" title="{'create a new album'|@translate}">{'create a new album'|@translate}</a>
     </div>
 
 
     <!-- dissociate -->
     <div id="action_dissociate" class="bulkAction">
-          <select style="width:400px" name="dissociate" size="1">
-            {if !empty($dissociate_options)}{html_options options=$dissociate_options }{/if}
-          </select>
+      <select data-selectize="categories" name="dissociate" style="width:400px"></select>
     </div>
 
 
diff --git a/admin/themes/default/template/cat_modify.tpl b/admin/themes/default/template/cat_modify.tpl
index 52632ae92..4010aec38 100644
--- a/admin/themes/default/template/cat_modify.tpl
+++ b/admin/themes/default/template/cat_modify.tpl
@@ -1,3 +1,68 @@
+{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}
+{* <!-- CATEGORIES --> *}
+var categoriesCache = new LocalStorageCache({
+  key: 'categoriesAdminList',
+  serverKey: '{$CACHE_KEYS.categories}',
+  serverId: '{$CACHE_KEYS._hash}',
+
+  loader: 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',
+  sortField: 'fullname',
+  searchField: ['fullname'],
+  plugins: ['remove_button']
+});
+
+categoriesCache.get(function(categories) {
+  categories.push({
+    id: 0,
+    fullname: '------------'
+  });
+  
+  // remove itself and children
+  categories = jQuery.grep(categories, function(cat) {
+    return !(/\b{$CAT_ID}\b/.test(cat.uppercats));
+  });
+  
+  categories.sort(function(a, b) {
+    return a.fullname.localeCompare(b.fullname);
+  });
+  
+  jQuery('[data-selectize=categories]').each(function() {
+    this.selectize.load(function(callback) {
+      callback(categories);
+    });
+
+    if (jQuery(this).data('value')) {
+      this.selectize.setValue(jQuery(this).data('value')[0]);
+    }
+    
+    // prevent empty value
+    if (this.selectize.getValue() == '') {
+      this.selectize.setValue(categories[0].id);
+    }
+    this.selectize.on('dropdown_close', function() {
+      if (this.getValue() == '') {
+        this.setValue(categories[0].id);
+      }
+    });
+  });
+});
+{/footer_script}
+
+
 <div class="titrePage">
   <h2><span style="letter-spacing:0">{$CATEGORIES_NAV}</span> &#8250; {'Edit album'|@translate} {$TABSHEET_TITLE}</h2>
 </div>
@@ -71,14 +136,12 @@
     <textarea cols="50" rows="5" name="comment" id="comment" class="description">{$CAT_COMMENT}</textarea>
   </p>
 
-{if isset($move_cat_options) }
+{if isset($parent_category) }
   <p>
     <strong>{'Parent album'|@translate}</strong>
     <br>
-    <select class="categoryDropDown" name="parent">
-      <option value="0">------------</option>
-      {html_options options=$move_cat_options selected=$move_cat_options_selected }
-    </select>
+    <select data-selectize="categories" data-value="{$parent_category|@json_encode|escape:html}"
+        name="parent" style="width:400px"></select>
   </p>
 {/if}
 
diff --git a/admin/themes/default/template/include/add_album.inc.tpl b/admin/themes/default/template/include/add_album.inc.tpl
index 08ada07a4..f2d87146f 100644
--- a/admin/themes/default/template/include/add_album.inc.tpl
+++ b/admin/themes/default/template/include/add_album.inc.tpl
@@ -1,86 +1,15 @@
-{footer_script}{literal}
-jQuery(document).ready(function(){
-  jQuery(".addAlbumOpen").colorbox({
-    inline: true,
-    href: "#addAlbumForm",
-    onComplete: function() {
-      var $albumSelect = jQuery("#albumSelect");
+{include file='include/colorbox.inc.tpl'}
 
-      jQuery("input[name=category_name]").focus();
-      
-      jQuery("#category_parent").html('<option value="0">------------</option>')
-        .append($albumSelect.html())
-        .val($albumSelect.val() || 0);
-    }
-  });
-
-  jQuery("#addAlbumForm form").submit(function() {
-      jQuery("#categoryNameError").text("");
-      
-      var parent_id = jQuery("select[name=category_parent] option:selected").val(),
-          name = jQuery("input[name=category_name]").val();
-
-      jQuery.ajax({
-        url: "ws.php",
-        dataType: 'json',
-        data: {
-          format: 'json',
-          method: 'pwg.categories.add',
-          parent: parent_id,
-          name: name
-        },
-        beforeSend: function() {
-          jQuery("#albumCreationLoading").show();
-        },
-        success: function(data) {
-          jQuery("#albumCreationLoading").hide();
-          jQuery(".addAlbumOpen").colorbox.close();
-
-          var newAlbum = data.result.id,
-              newAlbum_name = '';
-              
-          if (parent_id!=0) {
-            newAlbum_name = jQuery("#category_parent").find("option[value="+ parent_id +"]").text() +' / ';
-          }
-          newAlbum_name+= name;
-          
-          var new_option = jQuery("<option/>")
-              .attr("value", newAlbum)
-              .attr("selected", "selected")
-              .text(newAlbum_name);
-
-          var $albumSelect = jQuery("#albumSelect");
-          $albumSelect.find("option").removeAttr('selected');
-          
-          if (parent_id==0) {
-            $albumSelect.prepend(new_option);
-          }
-          else {
-            $albumSelect.find("option[value="+ parent_id +"]").after(new_option);
-          }
-
-          jQuery("#addAlbumForm form input[name=category_name]").val('');
-          jQuery("#albumSelection").show();
-
-          return true;
-        },
-        error: function(XMLHttpRequest, textStatus, errorThrows) {
-            jQuery("#albumCreationLoading").hide();
-            jQuery("#categoryNameError").text(errorThrows).css("color", "red");
-        }
-      });
+{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"}
 
-      return false;
-  });
-});
-{/literal}{/footer_script}
+{combine_script id='addAlbum.js' load='footer' require='jquery.colorbox' path='admin/themes/default/js/addAlbum.js'}
 
 <div style="display:none">
-  <div id="addAlbumForm" style="text-align:left;padding:1em;">
+  <div id="addAlbumForm">
     <form>
       {'Parent album'|@translate}<br>
-      <select id="category_parent" name="category_parent">
-      </select>
+      <select name="category_parent"></select>
       <br><br>
       
       {'Album name'|@translate}<br>
diff --git a/admin/themes/default/template/include/colorbox.inc.tpl b/admin/themes/default/template/include/colorbox.inc.tpl
index 76651eafd..01a28a089 100644
--- a/admin/themes/default/template/include/colorbox.inc.tpl
+++ b/admin/themes/default/template/include/colorbox.inc.tpl
@@ -1,2 +1,2 @@
 {combine_script id='jquery.colorbox' load='footer' require='jquery' path='themes/default/js/plugins/jquery.colorbox.min.js'}
-{combine_css path="themes/default/js/plugins/colorbox/style2/colorbox.css"}
+{combine_css id='jquery.colorbox' path="themes/default/js/plugins/colorbox/style2/colorbox.css"}
diff --git a/admin/themes/default/template/photos_add_direct.tpl b/admin/themes/default/template/photos_add_direct.tpl
index c63f9dec7..9dd64d01a 100644
--- a/admin/themes/default/template/photos_add_direct.tpl
+++ b/admin/themes/default/template/photos_add_direct.tpl
@@ -9,14 +9,70 @@
 {include file='include/colorbox.inc.tpl'}
 {include file='include/add_album.inc.tpl'}
 
-{footer_script}{literal}
+{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}
+{* <!-- CATEGORIES --> *}
+var categoriesCache = new LocalStorageCache({
+  key: 'categoriesAdminList',
+  serverKey: '{$CACHE_KEYS.categories}',
+  serverId: '{$CACHE_KEYS._hash}',
+
+  loader: 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',
+  sortField: 'fullname',
+  searchField: ['fullname'],
+  plugins: ['remove_button']
+});
+
+categoriesCache.get(function(categories) {
+  categories.sort(function(a, b) {
+    return a.fullname.localeCompare(b.fullname);
+  });
+  
+  jQuery('[data-selectize=categories]').each(function() {
+    this.selectize.load(function(callback) {
+      callback(categories);
+    });
+
+    if (jQuery(this).data('value')) {
+      this.selectize.setValue(jQuery(this).data('value')[0]);
+    }
+    
+    // prevent empty value
+    if (this.selectize.getValue() == '') {
+      this.selectize.setValue(categories[0].id);
+    }
+    this.selectize.on('dropdown_close', function() {
+      if (this.getValue() == '') {
+        this.setValue(categories[0].id);
+      }
+    });
+  });
+});
+
+jQuery('[data-add-album]').pwgAddAlbum({ cache: categoriesCache });
+
+
+{literal}
 jQuery(document).ready(function(){
   function checkUploadStart() {
     var nbErrors = 0;
     jQuery("#formErrors").hide();
     jQuery("#formErrors li").hide();
 
-    if (jQuery("#albumSelect option:selected").length == 0) {
+    if (jQuery("select[name=category]").val() == '') {
       jQuery("#formErrors #noAlbum").show();
       nbErrors++;
     }
@@ -196,7 +252,7 @@ var sizeLimit = Math.round({$upload_max_filesize} / 1024); /* in KBytes */
     jQuery("#uploadify").uploadifySettings(
       'postData',
       {
-        'category_id' : jQuery("select[name=category] option:selected").val(),
+        'category_id' : jQuery("select[name=category]").val(),
         'level' : jQuery("select[name=level] option:selected").val(),
         'upload_id' : upload_id,
         'session_id' : session_id,
@@ -280,11 +336,10 @@ var sizeLimit = Math.round({$upload_max_filesize} / 1024); /* in KBytes */
       <legend>{'Drop into album'|@translate}</legend>
 
       <span id="albumSelection"{if count($category_options) == 0} style="display:none"{/if}>
-      <select id="albumSelect" name="category">
-        {html_options options=$category_options selected=$category_options_selected}
-      </select>
-      <br>{'... or '|@translate}</span><a href="#" class="addAlbumOpen" title="{'create a new album'|@translate}">{'create a new album'|@translate}</a>
-      
+      <select data-selectize="categories" data-value="{$selected_category|@json_encode|escape:html}"
+        name="category" style="width:400px"></select>
+      <br>{'... or '|@translate}</span>
+      <a href="#" data-add-album="category" title="{'create a new album'|@translate}">{'create a new album'|@translate}</a>
     </fieldset>
 
     <fieldset>
diff --git a/admin/themes/default/template/picture_modify.tpl b/admin/themes/default/template/picture_modify.tpl
index 602b9b126..f173abcce 100644
--- a/admin/themes/default/template/picture_modify.tpl
+++ b/admin/themes/default/template/picture_modify.tpl
@@ -25,6 +25,7 @@ var categoriesCache = new LocalStorageCache({
 jQuery('[data-selectize=categories]').selectize({
   valueField: 'id',
   labelField: 'fullname',
+  sortField: 'fullname',
   searchField: ['fullname'],
   plugins: ['remove_button']
 });
diff --git a/admin/themes/default/theme.css b/admin/themes/default/theme.css
index 654685563..65025eef6 100644
--- a/admin/themes/default/theme.css
+++ b/admin/themes/default/theme.css
@@ -1043,6 +1043,13 @@ p#uploadModeInfos {text-align:left;margin-top:1em;font-size:90%;color:#999;}
 }
 
 /* Album Manager */
+#addAlbumForm {
+  text-align:left;
+  padding:1em;
+}
+#addAlbumForm .selectize-dropdown-content {
+  max-height:170px;
+}
 #addAlbumForm input[name="category_name"], #formCreateAlbum input[name="virtual_name"] {
   width:300px;
 }