Changeset 28533 for trunk/admin/themes


Ignore:
Timestamp:
May 24, 2014, 6:24:52 PM (10 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/themes/default
Files:
1 added
7 edited

Legend:

Unmodified
Added
Removed

  • 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.