aboutsummaryrefslogtreecommitdiffstats
path: root/admin/themes/default/template
diff options
context:
space:
mode:
authormistic100 <mistic@piwigo.org>2014-05-24 16:24:52 +0000
committermistic100 <mistic@piwigo.org>2014-05-24 16:24:52 +0000
commitad10a97f4ac3ffad5508b90da45b5c5a63db95ff (patch)
tree5d31569cbd3784fee3ed7662dd838d281d3910cc /admin/themes/default/template
parentfea2a4efd1ad085def7cf84cc444325d0815b62e (diff)
feature 3077 : use selectize on batch_manager_global, cat_modify and photos_add_direct
+ rewrite "add album" popup (more flexible and working with selectize) git-svn-id: http://piwigo.org/svn/trunk@28533 68402e56-0260-453c-a942-63ccdbb3a9ee
Diffstat (limited to '')
-rw-r--r--admin/themes/default/template/batch_manager_global.tpl81
-rw-r--r--admin/themes/default/template/cat_modify.tpl73
-rw-r--r--admin/themes/default/template/include/add_album.inc.tpl83
-rw-r--r--admin/themes/default/template/include/colorbox.inc.tpl2
-rw-r--r--admin/themes/default/template/photos_add_direct.tpl71
-rw-r--r--admin/themes/default/template/picture_modify.tpl1
6 files changed, 198 insertions, 113 deletions
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> &#8250; {'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']
});