From ad10a97f4ac3ffad5508b90da45b5c5a63db95ff Mon Sep 17 00:00:00 2001
From: mistic100
Date: Sat, 24 May 2014 16:24:52 +0000
Subject: 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
---
admin/themes/default/js/addAlbum.js | 123 +++++++++++++++++++++
.../default/template/batch_manager_global.tpl | 81 ++++++++++----
admin/themes/default/template/cat_modify.tpl | 73 +++++++++++-
.../default/template/include/add_album.inc.tpl | 83 +-------------
.../default/template/include/colorbox.inc.tpl | 2 +-
.../themes/default/template/photos_add_direct.tpl | 71 ++++++++++--
admin/themes/default/template/picture_modify.tpl | 1 +
admin/themes/default/theme.css | 7 ++
8 files changed, 328 insertions(+), 113 deletions(-)
create mode 100644 admin/themes/default/js/addAlbum.js
(limited to 'admin/themes/default')
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('')
+ .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}
}
});
});
+
+ {* *}
+ 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() {
[x]
{'Album'|@translate}
-
+
@@ -631,7 +672,7 @@ $(document).ready(function() {
[x]
{'Tags'|@translate}
-
@@ -833,26 +874,22 @@ UL.thumbnails SPAN.wrap2 {ldelim}
-
+
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}
+{* *}
+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}
+
+
{$CATEGORIES_NAV} › {'Edit album'|@translate} {$TABSHEET_TITLE}
@@ -71,14 +136,12 @@
-{if isset($move_cat_options) }
+{if isset($parent_category) }
{'Parent album'|@translate}
-
+
{/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('')
- .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("")
- .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'}