aboutsummaryrefslogtreecommitdiffstats
path: root/admin/themes
diff options
context:
space:
mode:
authormistic100 <mistic@piwigo.org>2014-05-17 15:33:37 +0000
committermistic100 <mistic@piwigo.org>2014-05-17 15:33:37 +0000
commitce8a29810abe6f7fdf82043b32ca87ba0f14220c (patch)
tree55ea5b0bd160530ac8b1f9ebc0fe65247a5d138d /admin/themes
parent703a997f6ae9c884b82a11dfc102de65936501c0 (diff)
feature 3077 : use Selectize with AJAX load/cache on cat_perm and batch_manager_unit
git-svn-id: http://piwigo.org/svn/trunk@28496 68402e56-0260-453c-a942-63ccdbb3a9ee
Diffstat (limited to '')
-rw-r--r--admin/themes/default/template/batch_manager_unit.tpl69
-rw-r--r--admin/themes/default/template/cat_perm.tpl108
-rw-r--r--admin/themes/default/template/picture_modify.tpl40
3 files changed, 131 insertions, 86 deletions
diff --git a/admin/themes/default/template/batch_manager_unit.tpl b/admin/themes/default/template/batch_manager_unit.tpl
index 859a9b6a0..c2137bead 100644
--- a/admin/themes/default/template/batch_manager_unit.tpl
+++ b/admin/themes/default/template/batch_manager_unit.tpl
@@ -2,25 +2,53 @@
{include file='include/datepicker.inc.tpl'}
{include file='include/colorbox.inc.tpl'}
-{combine_css path='themes/default/js/plugins/jquery.tokeninput.css'}
-{combine_script id='jquery.tokeninput' load='async' require='jquery' path='themes/default/js/plugins/jquery.tokeninput.js'}
-{footer_script require='jquery.tokeninput'}
-jQuery(document).ready(function() {ldelim}
- jQuery('select[name|="tags"]').tokenInput(
- [{foreach from=$tags item=tag name=tags}{ldelim}name:"{$tag.name|@escape:'javascript'}",id:"{$tag.id}"{rdelim}{if !$smarty.foreach.tags.last},{/if}{/foreach}],
- {ldelim}
- hintText: '{'Type in a search term'|@translate}',
- noResultsText: '{'No results'|@translate}',
- searchingText: '{'Searching...'|@translate}',
- newText: ' ({'new'|@translate})',
- animateDropdown: false,
- preventDuplicates: true,
- allowFreeTagging: true
+{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}
+(function(){
+{* <!-- TAGS --> *}
+var tagsCache = new LocalStorageCache('tagsAdminList', 5*60, function(callback) {
+ jQuery.getJSON('{$ROOT_URL}ws.php?format=json&method=pwg.tags.getAdminList', function(data) {
+ var tags = data.result.tags;
+
+ for (var i=0, l=tags.length; i<l; i++) {
+ tags[i].id = '~~' + tags[i].id + '~~';
}
- );
+
+ callback(tags);
+ });
+});
+
+jQuery('[data-selectize=tags]').selectize({
+ valueField: 'id',
+ labelField: 'name',
+ searchField: ['name'],
+ plugins: ['remove_button'],
+ create: function(input, callback) {
+ tagsCache.clear();
+
+ callback({
+ id: input,
+ name: input
+ });
+ }
+});
+
+tagsCache.get(function(tags) {
+ jQuery('[data-selectize=tags]').each(function() {
+ this.selectize.load(function(callback) {
+ callback(tags);
+ });
- jQuery("a.preview-box").colorbox();
+ jQuery.each(jQuery(this).data('value'), jQuery.proxy(function(i, tag) {
+ this.selectize.addItem(tag.id);
+ }, this));
+ });
});
+}());
{/footer_script}
<h2>{'Batch Manager'|@translate}</h2>
@@ -102,13 +130,8 @@ jQuery(document).ready(function() {ldelim}
<tr>
<td><strong>{'Tags'|@translate}</strong></td>
<td>
-
-<select name="tags-{$element.id}">
-{foreach from=$element.TAGS item=tag}
- <option value="{$tag.id}" class="selected">{$tag.name}</option>
-{/foreach}
-</select>
-
+ <select data-selectize="tags" data-value="{$element.TAGS|@json_encode|escape:html}"
+ name="tags-{$element.id}[]" multiple style="width:500px;" ></select>
</td>
</tr>
diff --git a/admin/themes/default/template/cat_perm.tpl b/admin/themes/default/template/cat_perm.tpl
index 0415c87a4..ba0813014 100644
--- a/admin/themes/default/template/cat_perm.tpl
+++ b/admin/themes/default/template/cat_perm.tpl
@@ -1,39 +1,75 @@
-{combine_script id='jquery.chosen' load='footer' path='themes/default/js/plugins/chosen.jquery.min.js'}
-{combine_css path="themes/default/js/plugins/chosen.css"}
-
-{footer_script}{literal}
-jQuery(document).ready(function() {
- jQuery(".chzn-select").chosen();
-
- function checkStatusOptions() {
- if (jQuery("input[name=status]:checked").val() == "private") {
- jQuery("#privateOptions, #applytoSubAction").show();
- }
- else {
- jQuery("#privateOptions, #applytoSubAction").hide();
- }
- }
-
- checkStatusOptions();
- jQuery("#selectStatus").change(function() {
- checkStatusOptions();
+{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}
+(function(){
+{* <!-- GROUPS --> *}
+var groupsCache = new LocalStorageCache('groupsAdminList', 5*60, function(callback) {
+ jQuery.getJSON('{$ROOT_URL}ws.php?format=json&method=pwg.groups.getList&per_page=99999', function(data) {
+ callback(data.result.groups);
});
+});
+
+jQuery('[data-selectize=groups]').selectize({
+ valueField: 'id',
+ labelField: 'name',
+ searchField: ['name'],
+ plugins: ['remove_button']
+});
+
+groupsCache.get(function(groups) {
+ jQuery('[data-selectize=groups]').each(function() {
+ this.selectize.load(function(callback) {
+ callback(groups);
+ });
- jQuery("#indirectPermissionsDetailsShow").click(function(){
- jQuery("#indirectPermissionsDetailsShow").hide();
- jQuery("#indirectPermissionsDetailsHide").show();
- jQuery("#indirectPermissionsDetails").show();
- return false;
+ jQuery.each(jQuery(this).data('value'), jQuery.proxy(function(i, id) {
+ this.selectize.addItem(id);
+ }, this));
});
+});
+
+{* <!-- USERS --> *}
+var usersCache = new LocalStorageCache('usersAdminList', 5*60, function(callback) {
+ var page = 0,
+ users = [];
+
+ (function load(page){
+ jQuery.getJSON('{$ROOT_URL}ws.php?format=json&method=pwg.users.getList&display=username&per_page=99999&page='+ page, function(data) {
+ users = users.concat(data.result.users);
+
+ if (data.result.paging.count == data.result.paging.per_page) {
+ load(++page);
+ }
+ else {
+ callback(users);
+ }
+ });
+ }(page));
+});
+
+jQuery('[data-selectize=users]').selectize({
+ valueField: 'id',
+ labelField: 'username',
+ searchField: ['username'],
+ plugins: ['remove_button']
+});
+
+usersCache.get(function(users) {
+ jQuery('[data-selectize=users]').each(function() {
+ this.selectize.load(function(callback) {
+ callback(users);
+ });
- jQuery("#indirectPermissionsDetailsHide").click(function(){
- jQuery("#indirectPermissionsDetailsShow").show();
- jQuery("#indirectPermissionsDetailsHide").hide();
- jQuery("#indirectPermissionsDetails").hide();
- return false;
+ jQuery.each(jQuery(this).data('value'), jQuery.proxy(function(i, id) {
+ this.selectize.addItem(id);
+ }, this));
});
});
-{/literal}{/footer_script}
+}());
+{/footer_script}
<div class="titrePage">
<h2><span style="letter-spacing:0">{$CATEGORIES_NAV}</span> &#8250; {'Edit album'|@translate} {$TABSHEET_TITLE}</h2>
@@ -58,9 +94,8 @@ jQuery(document).ready(function() {
{if count($groups) > 0}
<strong>{'Permission granted for groups'|@translate}</strong>
<br>
- <select data-placeholder="{'Select groups...'|@translate}" class="chzn-select" multiple style="width:700px;" name="groups[]">
- {html_options options=$groups selected=$groups_selected}
- </select>
+ <select data-selectize="groups" data-value="{$groups_selected|@json_encode|escape:html}"
+ name="groups[]" multiple style="width:600px;" ></select>
{else}
{'There is no group in this gallery.'|@translate} <a href="admin.php?page=group_list" class="externalLink">{'Group management'|@translate}</a>
{/if}
@@ -69,12 +104,11 @@ jQuery(document).ready(function() {
<p>
<strong>{'Permission granted for users'|@translate}</strong>
<br>
- <select data-placeholder="{'Select users...'|@translate}" class="chzn-select" multiple style="width:700px;" name="users[]">
- {html_options options=$users selected=$users_selected}
- </select>
+ <select data-selectize="users" data-value="{$users_selected|@json_encode|escape:html}"
+ name="users[]" multiple style="width:600px;" ></select>
</p>
-{if isset($nb_users_granted_indirect)}
+{if isset($nb_users_granted_indirect) && $nb_users_granted_indirect>0}
<p>
{'%u users have automatic permission because they belong to a granted group.'|@translate:$nb_users_granted_indirect}
<a href="#" id="indirectPermissionsDetailsHide" style="display:none">{'hide details'|@translate}</a>
diff --git a/admin/themes/default/template/picture_modify.tpl b/admin/themes/default/template/picture_modify.tpl
index dd49fbd86..50392f7ab 100644
--- a/admin/themes/default/template/picture_modify.tpl
+++ b/admin/themes/default/template/picture_modify.tpl
@@ -10,7 +10,7 @@
{footer_script}
(function(){
{* <!-- CATEGORIES --> *}
-var categoriesCache = new LocalStorageCache('categoriesAdminList', 60, function(callback) {
+var categoriesCache = new LocalStorageCache('categoriesAdminList', 5*60, function(callback) {
jQuery.getJSON('{$ROOT_URL}ws.php?format=json&method=pwg.categories.getAdminList', function(data) {
callback(data.result.categories);
});
@@ -24,25 +24,19 @@ jQuery('[data-selectize=categories]').selectize({
});
categoriesCache.get(function(categories) {
- var selects = jQuery('[data-selectize=categories]');
-
- jQuery.each(categories, function(i, category) {
- selects.each(function() {
- this.selectize.addOption(category);
+ jQuery('[data-selectize=categories]').each(function() {
+ this.selectize.load(function(callback) {
+ callback(categories);
});
- });
-
- selects.each(function() {
- var that = this;
- jQuery.each(jQuery(this).data('value'), function(i, id) {
- that.selectize.addItem(id);
- });
+ jQuery.each(jQuery(this).data('value'), jQuery.proxy(function(i, id) {
+ this.selectize.addItem(id);
+ }, this));
});
});
{* <!-- TAGS --> *}
-var tagsCache = new LocalStorageCache('tagsAdminList', 60, function(callback) {
+var tagsCache = new LocalStorageCache('tagsAdminList', 5*60, function(callback) {
jQuery.getJSON('{$ROOT_URL}ws.php?format=json&method=pwg.tags.getAdminList', function(data) {
var tags = data.result.tags;
@@ -70,20 +64,14 @@ jQuery('[data-selectize=tags]').selectize({
});
tagsCache.get(function(tags) {
- var selects = jQuery('[data-selectize=tags]');
-
- jQuery.each(tags, function(i, tag) {
- selects.each(function() {
- this.selectize.addOption(tag);
+ jQuery('[data-selectize=tags]').each(function() {
+ this.selectize.load(function(callback) {
+ callback(tags);
});
- });
-
- selects.each(function() {
- var that = this;
- jQuery.each(jQuery(this).data('value'), function(i, tag) {
- that.selectize.addItem(tag.id);
- });
+ jQuery.each(jQuery(this).data('value'), jQuery.proxy(function(i, tag) {
+ this.selectize.addItem(tag.id);
+ }, this));
});
});