Changeset 28496


Ignore:
Timestamp:
05/17/14 17:33:37 (5 years ago)
Author:
mistic100
Message:

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

Location:
trunk/admin
Files:
4 edited

Legend:

Unmodified
Added
Removed
  • trunk/admin/picture_modify.php

    r28494 r28496  
    219219$tag_selection = get_taglist($query); 
    220220 
    221 $query = ' 
    222 SELECT 
    223     id, 
    224     name 
    225   FROM '.TAGS_TABLE.' 
    226 ;'; 
    227 $tags = get_taglist($query, false); 
    228  
    229221// retrieving direct information about picture 
    230222$query = ' 
     
    259251  array( 
    260252    'tag_selection' => $tag_selection, 
    261     'tags' => $tags, 
    262253    'U_SYNC' => $admin_url_start.'&sync_metadata=1', 
    263254    'U_DELETE' => $admin_url_start.'&delete=1&pwg_token='.get_pwg_token(), 
  • trunk/admin/themes/default/template/batch_manager_unit.tpl

    r23275 r28496  
    33{include file='include/colorbox.inc.tpl'} 
    44 
    5 {combine_css path='themes/default/js/plugins/jquery.tokeninput.css'} 
    6 {combine_script id='jquery.tokeninput' load='async' require='jquery' path='themes/default/js/plugins/jquery.tokeninput.js'} 
    7 {footer_script require='jquery.tokeninput'} 
    8 jQuery(document).ready(function() {ldelim} 
    9         jQuery('select[name|="tags"]').tokenInput( 
    10                 [{foreach from=$tags item=tag name=tags}{ldelim}name:"{$tag.name|@escape:'javascript'}",id:"{$tag.id}"{rdelim}{if !$smarty.foreach.tags.last},{/if}{/foreach}], 
    11     {ldelim} 
    12       hintText: '{'Type in a search term'|@translate}', 
    13       noResultsText: '{'No results'|@translate}', 
    14       searchingText: '{'Searching...'|@translate}', 
    15       newText: ' ({'new'|@translate})', 
    16       animateDropdown: false, 
    17       preventDuplicates: true, 
    18       allowFreeTagging: true 
     5{combine_script id='LocalStorageCache' load='footer' path='admin/themes/default/js/LocalStorageCache.js'} 
     6 
     7{combine_script id='jquery.selectize' load='footer' path='themes/default/js/plugins/selectize.min.js'} 
     8{combine_css id='jquery.selectize' path="themes/default/js/plugins/selectize.default.css"} 
     9 
     10{footer_script} 
     11(function(){ 
     12{* <!-- TAGS --> *} 
     13var tagsCache = new LocalStorageCache('tagsAdminList', 5*60, function(callback) { 
     14  jQuery.getJSON('{$ROOT_URL}ws.php?format=json&method=pwg.tags.getAdminList', function(data) { 
     15    var tags = data.result.tags; 
     16     
     17    for (var i=0, l=tags.length; i<l; i++) { 
     18      tags[i].id = '~~' + tags[i].id + '~~'; 
    1919    } 
    20   ); 
     20     
     21    callback(tags); 
     22  }); 
     23}); 
    2124 
    22   jQuery("a.preview-box").colorbox(); 
     25jQuery('[data-selectize=tags]').selectize({ 
     26  valueField: 'id', 
     27  labelField: 'name', 
     28  searchField: ['name'], 
     29  plugins: ['remove_button'], 
     30  create: function(input, callback) { 
     31    tagsCache.clear(); 
     32     
     33    callback({ 
     34      id: input, 
     35      name: input 
     36    }); 
     37  } 
    2338}); 
     39 
     40tagsCache.get(function(tags) { 
     41  jQuery('[data-selectize=tags]').each(function() { 
     42    this.selectize.load(function(callback) { 
     43      callback(tags); 
     44    }); 
     45 
     46    jQuery.each(jQuery(this).data('value'), jQuery.proxy(function(i, tag) { 
     47      this.selectize.addItem(tag.id); 
     48    }, this)); 
     49  }); 
     50}); 
     51}()); 
    2452{/footer_script} 
    2553 
     
    103131      <td><strong>{'Tags'|@translate}</strong></td> 
    104132      <td> 
    105  
    106 <select name="tags-{$element.id}"> 
    107 {foreach from=$element.TAGS item=tag} 
    108   <option value="{$tag.id}" class="selected">{$tag.name}</option> 
    109 {/foreach} 
    110 </select> 
    111  
     133        <select data-selectize="tags" data-value="{$element.TAGS|@json_encode|escape:html}" 
     134          name="tags-{$element.id}[]" multiple style="width:500px;" ></select> 
    112135      </td> 
    113136    </tr> 
  • trunk/admin/themes/default/template/cat_perm.tpl

    r25005 r28496  
    1 {combine_script id='jquery.chosen' load='footer' path='themes/default/js/plugins/chosen.jquery.min.js'} 
    2 {combine_css path="themes/default/js/plugins/chosen.css"} 
     1{combine_script id='LocalStorageCache' load='footer' path='admin/themes/default/js/LocalStorageCache.js'} 
    32 
    4 {footer_script}{literal} 
    5 jQuery(document).ready(function() { 
    6   jQuery(".chzn-select").chosen(); 
     3{combine_script id='jquery.selectize' load='footer' path='themes/default/js/plugins/selectize.min.js'} 
     4{combine_css id='jquery.selectize' path="themes/default/js/plugins/selectize.default.css"} 
    75 
    8   function checkStatusOptions() { 
    9     if (jQuery("input[name=status]:checked").val() == "private") { 
    10       jQuery("#privateOptions, #applytoSubAction").show(); 
    11     } 
    12     else { 
    13       jQuery("#privateOptions, #applytoSubAction").hide(); 
    14     } 
    15   } 
    16  
    17   checkStatusOptions(); 
    18   jQuery("#selectStatus").change(function() { 
    19     checkStatusOptions(); 
    20   }); 
    21  
    22   jQuery("#indirectPermissionsDetailsShow").click(function(){ 
    23     jQuery("#indirectPermissionsDetailsShow").hide(); 
    24     jQuery("#indirectPermissionsDetailsHide").show(); 
    25     jQuery("#indirectPermissionsDetails").show(); 
    26     return false; 
    27   }); 
    28  
    29   jQuery("#indirectPermissionsDetailsHide").click(function(){ 
    30     jQuery("#indirectPermissionsDetailsShow").show(); 
    31     jQuery("#indirectPermissionsDetailsHide").hide(); 
    32     jQuery("#indirectPermissionsDetails").hide(); 
    33     return false; 
     6{footer_script} 
     7(function(){ 
     8{* <!-- GROUPS --> *} 
     9var groupsCache = new LocalStorageCache('groupsAdminList', 5*60, function(callback) { 
     10  jQuery.getJSON('{$ROOT_URL}ws.php?format=json&method=pwg.groups.getList&per_page=99999', function(data) { 
     11    callback(data.result.groups); 
    3412  }); 
    3513}); 
    36 {/literal}{/footer_script} 
     14 
     15jQuery('[data-selectize=groups]').selectize({ 
     16  valueField: 'id', 
     17  labelField: 'name', 
     18  searchField: ['name'], 
     19  plugins: ['remove_button'] 
     20}); 
     21 
     22groupsCache.get(function(groups) { 
     23  jQuery('[data-selectize=groups]').each(function() { 
     24    this.selectize.load(function(callback) { 
     25      callback(groups); 
     26    }); 
     27 
     28    jQuery.each(jQuery(this).data('value'), jQuery.proxy(function(i, id) { 
     29      this.selectize.addItem(id); 
     30    }, this)); 
     31  }); 
     32}); 
     33 
     34{* <!-- USERS --> *} 
     35var usersCache = new LocalStorageCache('usersAdminList', 5*60, function(callback) { 
     36  var page = 0, 
     37      users = []; 
     38    
     39  (function load(page){ 
     40    jQuery.getJSON('{$ROOT_URL}ws.php?format=json&method=pwg.users.getList&display=username&per_page=99999&page='+ page, function(data) { 
     41      users = users.concat(data.result.users); 
     42       
     43      if (data.result.paging.count == data.result.paging.per_page) { 
     44        load(++page); 
     45      } 
     46      else { 
     47        callback(users); 
     48      } 
     49    }); 
     50  }(page)); 
     51}); 
     52 
     53jQuery('[data-selectize=users]').selectize({ 
     54  valueField: 'id', 
     55  labelField: 'username', 
     56  searchField: ['username'], 
     57  plugins: ['remove_button'] 
     58}); 
     59 
     60usersCache.get(function(users) { 
     61  jQuery('[data-selectize=users]').each(function() { 
     62    this.selectize.load(function(callback) { 
     63      callback(users); 
     64    }); 
     65 
     66    jQuery.each(jQuery(this).data('value'), jQuery.proxy(function(i, id) { 
     67      this.selectize.addItem(id); 
     68    }, this)); 
     69  }); 
     70}); 
     71}()); 
     72{/footer_script} 
    3773 
    3874<div class="titrePage"> 
     
    5995    <strong>{'Permission granted for groups'|@translate}</strong> 
    6096    <br> 
    61     <select data-placeholder="{'Select groups...'|@translate}" class="chzn-select" multiple style="width:700px;" name="groups[]"> 
    62       {html_options options=$groups selected=$groups_selected} 
    63     </select> 
     97    <select data-selectize="groups" data-value="{$groups_selected|@json_encode|escape:html}" 
     98        name="groups[]" multiple style="width:600px;" ></select> 
    6499{else} 
    65100    {'There is no group in this gallery.'|@translate} <a href="admin.php?page=group_list" class="externalLink">{'Group management'|@translate}</a> 
     
    70105    <strong>{'Permission granted for users'|@translate}</strong> 
    71106    <br> 
    72     <select data-placeholder="{'Select users...'|@translate}" class="chzn-select" multiple style="width:700px;" name="users[]"> 
    73       {html_options options=$users selected=$users_selected} 
    74     </select> 
     107    <select data-selectize="users" data-value="{$users_selected|@json_encode|escape:html}" 
     108        name="users[]" multiple style="width:600px;" ></select> 
    75109  </p> 
    76110 
    77 {if isset($nb_users_granted_indirect)} 
     111{if isset($nb_users_granted_indirect) && $nb_users_granted_indirect>0} 
    78112  <p> 
    79113    {'%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

    r28494 r28496  
    1111(function(){ 
    1212{* <!-- CATEGORIES --> *} 
    13 var categoriesCache = new LocalStorageCache('categoriesAdminList', 60, function(callback) { 
     13var categoriesCache = new LocalStorageCache('categoriesAdminList', 5*60, function(callback) { 
    1414  jQuery.getJSON('{$ROOT_URL}ws.php?format=json&method=pwg.categories.getAdminList', function(data) { 
    1515    callback(data.result.categories); 
     
    2525 
    2626categoriesCache.get(function(categories) { 
    27   var selects = jQuery('[data-selectize=categories]'); 
     27  jQuery('[data-selectize=categories]').each(function() { 
     28    this.selectize.load(function(callback) { 
     29      callback(categories); 
     30    }); 
    2831 
    29   jQuery.each(categories, function(i, category) { 
    30     selects.each(function() { 
    31       this.selectize.addOption(category); 
    32     }); 
    33   }); 
    34    
    35   selects.each(function() { 
    36     var that = this; 
    37  
    38     jQuery.each(jQuery(this).data('value'), function(i, id) { 
    39       that.selectize.addItem(id); 
    40     }); 
     32    jQuery.each(jQuery(this).data('value'), jQuery.proxy(function(i, id) { 
     33      this.selectize.addItem(id); 
     34    }, this)); 
    4135  }); 
    4236}); 
    4337 
    4438{* <!-- TAGS --> *} 
    45 var tagsCache = new LocalStorageCache('tagsAdminList', 60, function(callback) { 
     39var tagsCache = new LocalStorageCache('tagsAdminList', 5*60, function(callback) { 
    4640  jQuery.getJSON('{$ROOT_URL}ws.php?format=json&method=pwg.tags.getAdminList', function(data) { 
    4741    var tags = data.result.tags; 
     
    7165 
    7266tagsCache.get(function(tags) { 
    73   var selects = jQuery('[data-selectize=tags]'); 
     67  jQuery('[data-selectize=tags]').each(function() { 
     68    this.selectize.load(function(callback) { 
     69      callback(tags); 
     70    }); 
    7471 
    75   jQuery.each(tags, function(i, tag) { 
    76     selects.each(function() { 
    77       this.selectize.addOption(tag); 
    78     }); 
    79   }); 
    80    
    81   selects.each(function() { 
    82     var that = this; 
    83  
    84     jQuery.each(jQuery(this).data('value'), function(i, tag) { 
    85       that.selectize.addItem(tag.id); 
    86     }); 
     72    jQuery.each(jQuery(this).data('value'), jQuery.proxy(function(i, tag) { 
     73      this.selectize.addItem(tag.id); 
     74    }, this)); 
    8775  }); 
    8876}); 
Note: See TracChangeset for help on using the changeset viewer.