Changeset 28533


Ignore:
Timestamp:
05/24/14 18:24:52 (5 years ago)
Author:
mistic100
Message:

feature 3077 : use selectize on batch_manager_global, cat_modify and photos_add_direct
+ rewrite "add album" popup (more flexible and working with selectize)

Location:
trunk/admin
Files:
1 added
10 edited

Legend:

Unmodified
Added
Removed
  • trunk/admin/batch_manager_global.php

    r28532 r28533  
    475475 
    476476// tags 
     477$filter_tags = array(); 
     478 
    477479if (!empty($_SESSION['bulk_manager_filter']['tags'])) 
    478480{ 
     
    484486  WHERE id IN ('.implode(',', $_SESSION['bulk_manager_filter']['tags']).') 
    485487;'; 
    486   $template->assign('filter_tags', get_taglist($query)); 
    487 } 
    488  
    489 // Virtualy associate a picture to a category 
    490 $query = ' 
    491 SELECT id,name,uppercats,global_rank 
    492   FROM '.CATEGORIES_TABLE.' 
    493 ;'; 
    494 $categories = array_from_query($query); 
    495 usort($categories, 'global_rank_compare'); 
    496 display_select_categories($categories, array(), 'category_full_name_options', true); 
    497  
    498 $template->assign('category_parent_options', $template->get_template_vars('category_full_name_options')); 
    499 $template->assign('category_parent_options_selected', array()); 
     488 
     489  $filter_tags = get_taglist($query); 
     490} 
     491 
     492$template->assign('filter_tags', $filter_tags); 
    500493 
    501494// in the filter box, which category to select by default 
     
    705698  'nb_thumbs_page' => $nb_thumbs_page, 
    706699  'nb_thumbs_set' => count($page['cat_elements_id']), 
    707   'CACHE_KEYS' => get_admin_client_cache_keys(array('tags')) 
     700  'CACHE_KEYS' => get_admin_client_cache_keys(array('tags', 'categories')), 
    708701  )); 
    709702 
  • trunk/admin/cat_modify.php

    r26461 r28533  
    289289$intro.= '<br>'.l10n('Numeric identifier : %d', $category['id']); 
    290290 
    291 $template->assign('INTRO', $intro); 
    292  
    293 $template->assign( 
    294   'U_MANAGE_RANKS', 
    295   $base_url.'element_set_ranks&amp;cat_id='.$category['id'] 
    296   ); 
     291$template->assign(array( 
     292  'INTRO' => $intro, 
     293  'U_MANAGE_RANKS' => $base_url.'element_set_ranks&amp;cat_id='.$category['id'], 
     294  'CACHE_KEYS' => get_admin_client_cache_keys(array('categories')), 
     295  )); 
    297296 
    298297if ($category['is_virtual']) 
     
    367366if ($category['is_virtual']) 
    368367{ 
    369   // the category can be moved in any category but in itself, in any 
    370   // sub-category 
    371   $unmovables = get_subcat_ids(array($category['id'])); 
    372  
    373   $query = ' 
    374 SELECT id,name,uppercats,global_rank 
    375   FROM '.CATEGORIES_TABLE.' 
    376   WHERE id NOT IN ('.implode(',', $unmovables).') 
    377 ;'; 
    378  
    379   display_select_cat_wrapper( 
    380     $query, 
    381     empty($category['id_uppercat']) ? array() : array($category['id_uppercat']), 
    382     'move_cat_options' 
    383     ); 
     368  $template->assign('parent_category', empty($category['id_uppercat']) ? array() : array($category['id_uppercat'])); 
    384369} 
    385370 
  • trunk/admin/include/photos_add_direct_prepare.inc.php

    r26461 r28533  
    218218 
    219219// existing album 
    220 $query = ' 
    221 SELECT id,name,uppercats,global_rank 
    222   FROM '.CATEGORIES_TABLE.' 
    223 ;'; 
    224  
    225 display_select_cat_wrapper( 
    226   $query, 
    227   $selected_category, 
    228   'category_options' 
    229   ); 
     220$template->assign('selected_category', $selected_category); 
    230221 
    231222 
     
    257248} 
    258249 
    259 $template->assign( 
    260   array( 
    261     'setup_errors'=> $setup_errors, 
    262     ) 
    263   ); 
     250$template->assign(array( 
     251  'setup_errors'=> $setup_errors, 
     252  'CACHE_KEYS' => get_admin_client_cache_keys(array('categories')), 
     253  )); 
    264254 
    265255// Warnings 
  • trunk/admin/themes/default/template/batch_manager_global.tpl

    r28532 r28533  
    118118    }); 
    119119  }); 
     120   
     121  {* <!-- CATEGORIES --> *} 
     122  var categoriesCache = new LocalStorageCache({ 
     123    key: 'categoriesAdminList', 
     124    serverKey: '{$CACHE_KEYS.categories}', 
     125    serverId: '{$CACHE_KEYS._hash}', 
     126 
     127    loader: function(callback) { 
     128      jQuery.getJSON('{$ROOT_URL}ws.php?format=json&method=pwg.categories.getAdminList', function(data) { 
     129        callback(data.result.categories); 
     130      }); 
     131    } 
     132  }); 
     133   
     134  jQuery('[data-selectize=categories]').selectize({ 
     135    valueField: 'id', 
     136    labelField: 'fullname', 
     137    sortField: 'fullname', 
     138    searchField: ['fullname'], 
     139    plugins: ['remove_button'] 
     140  }); 
     141   
     142  categoriesCache.get(function(categories) { 
     143    categories.sort(function(a, b) { 
     144      return a.fullname.localeCompare(b.fullname); 
     145    }); 
     146     
     147    jQuery('[data-selectize=categories]').each(function() { 
     148      this.selectize.load(function(callback) { 
     149        callback(categories); 
     150      }); 
     151 
     152      if (jQuery(this).data('value')) { 
     153        this.selectize.setValue(jQuery(this).data('value')[0]); 
     154      } 
     155       
     156      // prevent empty value 
     157      if (this.selectize.getValue() == '') { 
     158        this.selectize.setValue(categories[0].id); 
     159      } 
     160      this.selectize.on('dropdown_close', function() { 
     161        if (this.getValue() == '') { 
     162          this.setValue(categories[0].id); 
     163        } 
     164      }); 
     165    }); 
     166  }); 
     167   
     168  jQuery('[data-add-album]').pwgAddAlbum({ cache: categoriesCache }); 
    120169}); 
    121170 
     
    228277    $("[id^=action_]").hide(); 
    229278    $("#action_"+$(this).prop("value")).show(); 
    230  
    231     /* make sure the #albumSelect is on the right select box so that the */ 
    232     /* "add new album" popup fills the right select box                  */ 
    233     if ("associate" == $(this).prop("value") || "move" == $(this).prop("value")) { 
    234       jQuery("#albumSelect").removeAttr("id"); 
    235       jQuery("#action_"+$(this).prop("value")+" select").attr("id", "albumSelect"); 
    236     } 
    237279 
    238280    if ($(this).val() != -1) { 
     
    622664        <input type="checkbox" name="filter_category_use" class="useFilterCheckbox" {if isset($filter.category)}checked="checked"{/if}> 
    623665        {'Album'|@translate} 
    624         <select style="width:400px" name="filter_category" size="1"> 
    625           {html_options options=$category_full_name_options selected=$filter_category_selected} 
    626         </select> 
     666        <select data-selectize="categories" data-value="{$filter_category_selected|@json_encode|escape:html}" 
     667          name="filter_category" style="width:400px"></select> 
    627668        <label><input type="checkbox" name="filter_category_recursive" {if isset($filter.category_recursive)}checked="checked"{/if}> {'include child albums'|@translate}</label> 
    628669      </li> 
     
    632673        <input type="checkbox" name="filter_tags_use" class="useFilterCheckbox" {if isset($filter.tags)}checked="checked"{/if}> 
    633674        {'Tags'|@translate} 
    634         <select data-selectize="tags" data-value="{if isset($filter_tags)}{$filter_tags|@json_encode|escape:html}{else}[]{/if}" 
     675        <select data-selectize="tags" data-value="{$filter_tags|@json_encode|escape:html}" 
    635676          name="filter_tags[]" multiple style="width:400px;" ></select> 
    636677        <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> 
     
    834875    <!-- associate --> 
    835876    <div id="action_associate" class="bulkAction"> 
    836           <select style="width:400px" name="associate" size="1"> 
    837             {html_options options=$category_full_name_options} 
    838          </select> 
    839 <br>{'... or '|@translate} <a href="#" class="addAlbumOpen" title="{'create a new album'|@translate}">{'create a new album'|@translate}</a> 
     877      <select data-selectize="categories" name="associate" style="width:400px"></select> 
     878      <br>{'... or '|@translate} 
     879      <a href="#" data-add-album="associate" title="{'create a new album'|@translate}">{'create a new album'|@translate}</a> 
    840880    </div> 
    841881 
    842882    <!-- move --> 
    843883    <div id="action_move" class="bulkAction"> 
    844           <select style="width:400px" name="move" size="1"> 
    845             {html_options options=$category_full_name_options} 
    846          </select> 
    847 <br>{'... or '|@translate} <a href="#" class="addAlbumOpen" title="{'create a new album'|@translate}">{'create a new album'|@translate}</a> 
     884      <select data-selectize="categories" name="move" style="width:400px"></select> 
     885      <br>{'... or '|@translate} 
     886      <a href="#" data-add-album="move" title="{'create a new album'|@translate}">{'create a new album'|@translate}</a> 
    848887    </div> 
    849888 
     
    851890    <!-- dissociate --> 
    852891    <div id="action_dissociate" class="bulkAction"> 
    853           <select style="width:400px" name="dissociate" size="1"> 
    854             {if !empty($dissociate_options)}{html_options options=$dissociate_options }{/if} 
    855           </select> 
     892      <select data-selectize="categories" name="dissociate" style="width:400px"></select> 
    856893    </div> 
    857894 
  • trunk/admin/themes/default/template/cat_modify.tpl

    r25748 r28533  
     1{combine_script id='LocalStorageCache' load='footer' path='admin/themes/default/js/LocalStorageCache.js'} 
     2 
     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"} 
     5 
     6{footer_script} 
     7{* <!-- CATEGORIES --> *} 
     8var categoriesCache = new LocalStorageCache({ 
     9  key: 'categoriesAdminList', 
     10  serverKey: '{$CACHE_KEYS.categories}', 
     11  serverId: '{$CACHE_KEYS._hash}', 
     12 
     13  loader: function(callback) { 
     14    jQuery.getJSON('{$ROOT_URL}ws.php?format=json&method=pwg.categories.getAdminList', function(data) { 
     15      callback(data.result.categories); 
     16    }); 
     17  } 
     18}); 
     19 
     20jQuery('[data-selectize=categories]').selectize({ 
     21  valueField: 'id', 
     22  labelField: 'fullname', 
     23  sortField: 'fullname', 
     24  searchField: ['fullname'], 
     25  plugins: ['remove_button'] 
     26}); 
     27 
     28categoriesCache.get(function(categories) { 
     29  categories.push({ 
     30    id: 0, 
     31    fullname: '------------' 
     32  }); 
     33   
     34  // remove itself and children 
     35  categories = jQuery.grep(categories, function(cat) { 
     36    return !(/\b{$CAT_ID}\b/.test(cat.uppercats)); 
     37  }); 
     38   
     39  categories.sort(function(a, b) { 
     40    return a.fullname.localeCompare(b.fullname); 
     41  }); 
     42   
     43  jQuery('[data-selectize=categories]').each(function() { 
     44    this.selectize.load(function(callback) { 
     45      callback(categories); 
     46    }); 
     47 
     48    if (jQuery(this).data('value')) { 
     49      this.selectize.setValue(jQuery(this).data('value')[0]); 
     50    } 
     51     
     52    // prevent empty value 
     53    if (this.selectize.getValue() == '') { 
     54      this.selectize.setValue(categories[0].id); 
     55    } 
     56    this.selectize.on('dropdown_close', function() { 
     57      if (this.getValue() == '') { 
     58        this.setValue(categories[0].id); 
     59      } 
     60    }); 
     61  }); 
     62}); 
     63{/footer_script} 
     64 
     65 
    166<div class="titrePage"> 
    267  <h2><span style="letter-spacing:0">{$CATEGORIES_NAV}</span> &#8250; {'Edit album'|@translate} {$TABSHEET_TITLE}</h2> 
     
    72137  </p> 
    73138 
    74 {if isset($move_cat_options) } 
     139{if isset($parent_category) } 
    75140  <p> 
    76141    <strong>{'Parent album'|@translate}</strong> 
    77142    <br> 
    78     <select class="categoryDropDown" name="parent"> 
    79       <option value="0">------------</option> 
    80       {html_options options=$move_cat_options selected=$move_cat_options_selected } 
    81     </select> 
     143    <select data-selectize="categories" data-value="{$parent_category|@json_encode|escape:html}" 
     144        name="parent" style="width:400px"></select> 
    82145  </p> 
    83146{/if} 
  • trunk/admin/themes/default/template/include/add_album.inc.tpl

    r25312 r28533  
    1 {footer_script}{literal} 
    2 jQuery(document).ready(function(){ 
    3   jQuery(".addAlbumOpen").colorbox({ 
    4     inline: true, 
    5     href: "#addAlbumForm", 
    6     onComplete: function() { 
    7       var $albumSelect = jQuery("#albumSelect"); 
     1{include file='include/colorbox.inc.tpl'} 
    82 
    9       jQuery("input[name=category_name]").focus(); 
    10        
    11       jQuery("#category_parent").html('<option value="0">------------</option>') 
    12         .append($albumSelect.html()) 
    13         .val($albumSelect.val() || 0); 
    14     } 
    15   }); 
     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"} 
    165 
    17   jQuery("#addAlbumForm form").submit(function() { 
    18       jQuery("#categoryNameError").text(""); 
    19        
    20       var parent_id = jQuery("select[name=category_parent] option:selected").val(), 
    21           name = jQuery("input[name=category_name]").val(); 
    22  
    23       jQuery.ajax({ 
    24         url: "ws.php", 
    25         dataType: 'json', 
    26         data: { 
    27           format: 'json', 
    28           method: 'pwg.categories.add', 
    29           parent: parent_id, 
    30           name: name 
    31         }, 
    32         beforeSend: function() { 
    33           jQuery("#albumCreationLoading").show(); 
    34         }, 
    35         success: function(data) { 
    36           jQuery("#albumCreationLoading").hide(); 
    37           jQuery(".addAlbumOpen").colorbox.close(); 
    38  
    39           var newAlbum = data.result.id, 
    40               newAlbum_name = ''; 
    41                
    42           if (parent_id!=0) { 
    43             newAlbum_name = jQuery("#category_parent").find("option[value="+ parent_id +"]").text() +' / '; 
    44           } 
    45           newAlbum_name+= name; 
    46            
    47           var new_option = jQuery("<option/>") 
    48               .attr("value", newAlbum) 
    49               .attr("selected", "selected") 
    50               .text(newAlbum_name); 
    51  
    52           var $albumSelect = jQuery("#albumSelect"); 
    53           $albumSelect.find("option").removeAttr('selected'); 
    54            
    55           if (parent_id==0) { 
    56             $albumSelect.prepend(new_option); 
    57           } 
    58           else { 
    59             $albumSelect.find("option[value="+ parent_id +"]").after(new_option); 
    60           } 
    61  
    62           jQuery("#addAlbumForm form input[name=category_name]").val(''); 
    63           jQuery("#albumSelection").show(); 
    64  
    65           return true; 
    66         }, 
    67         error: function(XMLHttpRequest, textStatus, errorThrows) { 
    68             jQuery("#albumCreationLoading").hide(); 
    69             jQuery("#categoryNameError").text(errorThrows).css("color", "red"); 
    70         } 
    71       }); 
    72  
    73       return false; 
    74   }); 
    75 }); 
    76 {/literal}{/footer_script} 
     6{combine_script id='addAlbum.js' load='footer' require='jquery.colorbox' path='admin/themes/default/js/addAlbum.js'} 
    777 
    788<div style="display:none"> 
    79   <div id="addAlbumForm" style="text-align:left;padding:1em;"> 
     9  <div id="addAlbumForm"> 
    8010    <form> 
    8111      {'Parent album'|@translate}<br> 
    82       <select id="category_parent" name="category_parent"> 
    83       </select> 
     12      <select name="category_parent"></select> 
    8413      <br><br> 
    8514       
  • trunk/admin/themes/default/template/include/colorbox.inc.tpl

    r11962 r28533  
    11{combine_script id='jquery.colorbox' load='footer' require='jquery' path='themes/default/js/plugins/jquery.colorbox.min.js'} 
    2 {combine_css path="themes/default/js/plugins/colorbox/style2/colorbox.css"} 
     2{combine_css id='jquery.colorbox' path="themes/default/js/plugins/colorbox/style2/colorbox.css"} 
  • trunk/admin/themes/default/template/photos_add_direct.tpl

    r25929 r28533  
    1010{include file='include/add_album.inc.tpl'} 
    1111 
    12 {footer_script}{literal} 
     12{combine_script id='LocalStorageCache' load='footer' path='admin/themes/default/js/LocalStorageCache.js'} 
     13 
     14{combine_script id='jquery.selectize' load='footer' path='themes/default/js/plugins/selectize.min.js'} 
     15{combine_css id='jquery.selectize' path="themes/default/js/plugins/selectize.default.css"} 
     16 
     17{footer_script} 
     18{* <!-- CATEGORIES --> *} 
     19var categoriesCache = new LocalStorageCache({ 
     20  key: 'categoriesAdminList', 
     21  serverKey: '{$CACHE_KEYS.categories}', 
     22  serverId: '{$CACHE_KEYS._hash}', 
     23 
     24  loader: function(callback) { 
     25    jQuery.getJSON('{$ROOT_URL}ws.php?format=json&method=pwg.categories.getAdminList', function(data) { 
     26      callback(data.result.categories); 
     27    }); 
     28  } 
     29}); 
     30 
     31jQuery('[data-selectize=categories]').selectize({ 
     32  valueField: 'id', 
     33  labelField: 'fullname', 
     34  sortField: 'fullname', 
     35  searchField: ['fullname'], 
     36  plugins: ['remove_button'] 
     37}); 
     38 
     39categoriesCache.get(function(categories) { 
     40  categories.sort(function(a, b) { 
     41    return a.fullname.localeCompare(b.fullname); 
     42  }); 
     43   
     44  jQuery('[data-selectize=categories]').each(function() { 
     45    this.selectize.load(function(callback) { 
     46      callback(categories); 
     47    }); 
     48 
     49    if (jQuery(this).data('value')) { 
     50      this.selectize.setValue(jQuery(this).data('value')[0]); 
     51    } 
     52     
     53    // prevent empty value 
     54    if (this.selectize.getValue() == '') { 
     55      this.selectize.setValue(categories[0].id); 
     56    } 
     57    this.selectize.on('dropdown_close', function() { 
     58      if (this.getValue() == '') { 
     59        this.setValue(categories[0].id); 
     60      } 
     61    }); 
     62  }); 
     63}); 
     64 
     65jQuery('[data-add-album]').pwgAddAlbum({ cache: categoriesCache }); 
     66 
     67 
     68{literal} 
    1369jQuery(document).ready(function(){ 
    1470  function checkUploadStart() { 
     
    1773    jQuery("#formErrors li").hide(); 
    1874 
    19     if (jQuery("#albumSelect option:selected").length == 0) { 
     75    if (jQuery("select[name=category]").val() == '') { 
    2076      jQuery("#formErrors #noAlbum").show(); 
    2177      nbErrors++; 
     
    197253      'postData', 
    198254      { 
    199         'category_id' : jQuery("select[name=category] option:selected").val(), 
     255        'category_id' : jQuery("select[name=category]").val(), 
    200256        'level' : jQuery("select[name=level] option:selected").val(), 
    201257        'upload_id' : upload_id, 
     
    281337 
    282338      <span id="albumSelection"{if count($category_options) == 0} style="display:none"{/if}> 
    283       <select id="albumSelect" name="category"> 
    284         {html_options options=$category_options selected=$category_options_selected} 
    285       </select> 
    286       <br>{'... or '|@translate}</span><a href="#" class="addAlbumOpen" title="{'create a new album'|@translate}">{'create a new album'|@translate}</a> 
    287        
     339      <select data-selectize="categories" data-value="{$selected_category|@json_encode|escape:html}" 
     340        name="category" style="width:400px"></select> 
     341      <br>{'... or '|@translate}</span> 
     342      <a href="#" data-add-album="category" title="{'create a new album'|@translate}">{'create a new album'|@translate}</a> 
    288343    </fieldset> 
    289344 
  • trunk/admin/themes/default/template/picture_modify.tpl

    r28532 r28533  
    2626  valueField: 'id', 
    2727  labelField: 'fullname', 
     28  sortField: 'fullname', 
    2829  searchField: ['fullname'], 
    2930  plugins: ['remove_button'] 
  • trunk/admin/themes/default/theme.css

    r26399 r28533  
    10441044 
    10451045/* Album Manager */ 
     1046#addAlbumForm { 
     1047  text-align:left; 
     1048  padding:1em; 
     1049} 
     1050#addAlbumForm .selectize-dropdown-content { 
     1051  max-height:170px; 
     1052} 
    10461053#addAlbumForm input[name="category_name"], #formCreateAlbum input[name="virtual_name"] { 
    10471054  width:300px; 
Note: See TracChangeset for help on using the changeset viewer.