aboutsummaryrefslogtreecommitdiffstats
path: root/admin/themes/default
diff options
context:
space:
mode:
authormistic100 <mistic@piwigo.org>2014-05-17 12:11:47 +0000
committermistic100 <mistic@piwigo.org>2014-05-17 12:11:47 +0000
commitf932ee79df9ad48a16822dc12518b234836ce926 (patch)
tree6953a024ec5a8a629d23223e6cf11dcda637e231 /admin/themes/default
parent8296fb3db493bf34fe8ed2760e2d9f95e8374e1d (diff)
feature 3077 : use Selectize with AJAX load/cache on picture_modify
git-svn-id: http://piwigo.org/svn/trunk@28494 68402e56-0260-453c-a942-63ccdbb3a9ee
Diffstat (limited to 'admin/themes/default')
-rw-r--r--admin/themes/default/js/LocalStorageCache.js48
-rw-r--r--admin/themes/default/template/picture_modify.tpl123
2 files changed, 136 insertions, 35 deletions
diff --git a/admin/themes/default/js/LocalStorageCache.js b/admin/themes/default/js/LocalStorageCache.js
new file mode 100644
index 000000000..49a4fa98d
--- /dev/null
+++ b/admin/themes/default/js/LocalStorageCache.js
@@ -0,0 +1,48 @@
+var LocalStorageCache = function(key, lifetime, loader) {
+ this.key = key;
+ this.lifetime = lifetime*1000;
+ this.loader = loader;
+
+ this.storage = window.localStorage;
+ this.ready = !!this.storage;
+};
+
+LocalStorageCache.prototype.get = function(callback) {
+ var now = new Date().getTime(),
+ that = this;
+
+ if (this.ready && this.storage[this.key] != undefined) {
+ var cache = JSON.parse(this.storage[this.key]);
+
+ if (now - cache.timestamp <= this.lifetime) {
+ callback(cache.data);
+ return;
+ }
+ }
+
+ this.loader(function(data) {
+ if (that.ready) {
+ that.storage[that.key] = JSON.stringify({
+ timestamp: now,
+ data: data
+ });
+ }
+
+ callback(data);
+ });
+};
+
+LocalStorageCache.prototype.set = function(data) {
+ if (this.ready) {
+ that.storage[that.key] = JSON.stringify({
+ timestamp: new Date().getTime(),
+ data: data
+ });
+ }
+};
+
+LocalStorageCache.prototype.clear = function() {
+ if (this.ready) {
+ this.storage.removeItem(this.key);
+ }
+}; \ No newline at end of file
diff --git a/admin/themes/default/template/picture_modify.tpl b/admin/themes/default/template/picture_modify.tpl
index 9fbd81daf..dd49fbd86 100644
--- a/admin/themes/default/template/picture_modify.tpl
+++ b/admin/themes/default/template/picture_modify.tpl
@@ -2,36 +2,94 @@
{include file='include/dbselect.inc.tpl'}
{include file='include/datepicker.inc.tpl'}
-{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"}
+{combine_script id='LocalStorageCache' load='footer' path='admin/themes/default/js/LocalStorageCache.js'}
-{footer_script}{literal}
-jQuery(document).ready(function() {
- jQuery(".chzn-select").chosen();
+{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(){
+{* <!-- CATEGORIES --> *}
+var categoriesCache = new LocalStorageCache('categoriesAdminList', 60, 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',
+ searchField: ['fullname'],
+ plugins: ['remove_button']
});
-{/literal}{/footer_script}
-
-{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("#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
+
+categoriesCache.get(function(categories) {
+ var selects = jQuery('[data-selectize=categories]');
+
+ jQuery.each(categories, function(i, category) {
+ selects.each(function() {
+ this.selectize.addOption(category);
+ });
+ });
+
+ selects.each(function() {
+ var that = this;
+
+ jQuery.each(jQuery(this).data('value'), function(i, id) {
+ that.selectize.addItem(id);
+ });
+ });
+});
+
+{* <!-- TAGS --> *}
+var tagsCache = new LocalStorageCache('tagsAdminList', 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);
+ });
});
-{/footer_script}
-{footer_script}
+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) {
+ var selects = jQuery('[data-selectize=tags]');
+
+ jQuery.each(tags, function(i, tag) {
+ selects.each(function() {
+ this.selectize.addOption(tag);
+ });
+ });
+
+ selects.each(function() {
+ var that = this;
+
+ jQuery.each(jQuery(this).data('value'), function(i, tag) {
+ that.selectize.addItem(tag.id);
+ });
+ });
+});
+
+{* <!-- DATEPICKER --> *}
pwg_initialization_datepicker("#date_creation_day", "#date_creation_month", "#date_creation_year", "#date_creation_linked_date", "#date_creation_action_set");
+}());
{/footer_script}
<h2>{$TITLE} &#8250; {'Edit photo'|@translate} {$TABSHEET_TITLE}</h2>
@@ -112,27 +170,22 @@ pwg_initialization_datepicker("#date_creation_day", "#date_creation_month", "#da
<p>
<strong>{'Linked albums'|@translate}</strong>
<br>
- <select data-placeholder="Select albums..." class="chzn-select" multiple style="width:700px;" name="associate[]">
- {html_options options=$associate_options selected=$associate_options_selected}
- </select>
+ <select data-selectize="categories" data-value="{$associate_options_selected|@json_encode|escape:html}"
+ name="associate[]" multiple style="width:600px;" ></select>
</p>
<p>
<strong>{'Representation of albums'|@translate}</strong>
<br>
- <select data-placeholder="Select albums..." class="chzn-select" multiple style="width:700px;" name="represent[]">
- {html_options options=$represent_options selected=$represent_options_selected}
- </select>
+ <select data-selectize="categories" data-value="{$represent_options_selected|@json_encode|escape:html}"
+ name="represent[]" multiple style="width:600px;" ></select>
</p>
<p>
<strong>{'Tags'|@translate}</strong>
<br>
-<select id="tags" name="tags">
-{foreach from=$tag_selection item=tag}
- <option value="{$tag.id}" class="selected">{$tag.name}</option>
-{/foreach}
-</select>
+ <select data-selectize="tags" data-value="{$tag_selection|@json_encode|escape:html}"
+ name="tags[]" multiple style="width:600px;" ></select>
</p>
<p>