diff options
Diffstat (limited to '')
| -rw-r--r-- | admin/themes/default/js/addAlbum.js | 123 | ||||
| -rw-r--r-- | admin/themes/default/template/batch_manager_global.tpl | 81 | ||||
| -rw-r--r-- | admin/themes/default/template/cat_modify.tpl | 73 | ||||
| -rw-r--r-- | admin/themes/default/template/include/add_album.inc.tpl | 83 | ||||
| -rw-r--r-- | admin/themes/default/template/include/colorbox.inc.tpl | 2 | ||||
| -rw-r--r-- | admin/themes/default/template/photos_add_direct.tpl | 71 | ||||
| -rw-r--r-- | admin/themes/default/template/picture_modify.tpl | 1 | ||||
| -rw-r--r-- | admin/themes/default/theme.css | 7 |
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> › {'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; } |