feature 3077 : use Selectize on user_list

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

1 files changed, 22 insertions, 8 deletions

diff --git a/admin/themes/default/template/user_list.tpl b/admin/themes/default/template/user_list.tpl
index 4aba9580a..fbbaf873d 100644
--- a/admin/themes/default/template/user_list.tpl
+++ b/admin/themes/default/template/user_list.tpl
@@ -3,8 +3,8 @@
 {combine_script id='jquery.dataTables' load='footer' path='themes/default/js/plugins/jquery.dataTables.js'}
 {combine_css path="themes/default/js/plugins/datatables/css/jquery.dataTables.css"}
 
-{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='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"}
 
 {combine_script id='jquery.underscore' load='footer' path='themes/default/js/plugins/underscore.js'}
 
@@ -274,7 +274,25 @@ jQuery(document).ready(function() {
           
           jQuery("#user"+userId).append(template(user));
 
-          jQuery(".chzn-select").chosen();
+          /* groups select */
+          jQuery('[data-selectize=groups]').selectize({
+            valueField: 'value',
+            labelField: 'label',
+            searchField: ['label'],
+            plugins: ['remove_button']
+          });
+
+          var groupSelectize = jQuery('[data-selectize=groups]')[0].selectize;
+
+          groupSelectize.load(function(callback) {
+            callback(user.groupOptions);
+          });
+
+          jQuery.each(jQuery.grep(user.groupOptions, function(group) {
+            return group.isSelected;
+          }), function(i, group) {
+            groupSelectize.addItem(group.value);
+          });
 
           /* nb_image_page slider */
           var nb_image_page_init = getSliderKeyFromValue(jQuery('#user'+userId+' input[name=nb_image_page]').val(), nb_image_page_values);
@@ -1086,11 +1104,7 @@ span.infos, span.errors {background-image:none; padding:2px 5px; margin:0;border
       <div class="userProperty"><label><input type="checkbox" name="enabled_high"<% if (user.enabled_high == 'true') { %> checked="checked"<% } %>> <strong>{'High definition enabled'|translate}</strong></label></div>
 
       <div class="userProperty"><strong>{'Groups'|translate}</strong><br>
-        <select multiple class="chzn-select" style="width:340px;" name="group_id[]">
-<% _.each( user.groupOptions, function( option ){ %>
-          <option value="<%- option.value%>" <% if (option.isSelected) { %>selected="selected"<% } %>><%- option.label %></option>
-<% }); %>
-        </select>
+        <select data-selectize="groups" name="group_id[]" multiple style="width:340px;"></select>
       </div>
     </div>