Skip to content

Commit

Permalink
feature 3077 : use Selectize with AJAX load/cache on picture_modify
Browse files Browse the repository at this point in the history 
git-svn-id: http://piwigo.org/svn/trunk@28494 68402e56-0260-453c-a942-63ccdbb3a9ee
  • Loading branch information
@mistic100
mistic100 committed May 17, 2014
1 parent 8296fb3 commit f932ee7
Show file tree
Hide file tree
Showing 6 changed files with 542 additions and 51 deletions.
25 changes: 10 additions & 15 deletions admin/picture_modify.php
View file
Expand Up @@ -42,7 +42,7 @@
FROM '.CATEGORIES_TABLE.'
WHERE representative_picture_id = '.$_GET['image_id'].'
;';
$represent_options_selected = array_from_query($query, 'id');
$represent_options_selected = query2array($query, null, 'id');

// +-----------------------------------------------------------------------+
// | delete photo |
Expand Down Expand Up @@ -127,31 +127,31 @@
if (isset($_POST['submit']) and count($page['errors']) == 0)
{
$data = array();
$data{'id'} = $_GET['image_id'];
$data{'name'} = $_POST['name'];
$data{'author'} = $_POST['author'];
$data['id'] = $_GET['image_id'];
$data['name'] = $_POST['name'];
$data['author'] = $_POST['author'];
$data['level'] = $_POST['level'];

if ($conf['allow_html_descriptions'])
{
$data{'comment'} = @$_POST['description'];
$data['comment'] = @$_POST['description'];
}
else
{
$data{'comment'} = strip_tags(@$_POST['description']);
$data['comment'] = strip_tags(@$_POST['description']);
}

if (!empty($_POST['date_creation_year']))
{
$data{'date_creation'} =
$data['date_creation'] =
$_POST['date_creation_year']
.'-'.$_POST['date_creation_month']
.'-'.$_POST['date_creation_day']
.' '.$_POST['date_creation_time'];
}
else
{
$data{'date_creation'} = null;
$data['date_creation'] = null;
}

$data = trigger_change('picture_modify_before_update', $data);
Expand Down Expand Up @@ -469,14 +469,9 @@
INNER JOIN '.IMAGE_CATEGORY_TABLE.' ON id = category_id
WHERE image_id = '.$_GET['image_id'].'
;';
$associate_options_selected = array_from_query($query, 'id');
$associate_options_selected = query2array($query, null, 'id');

$query = '
SELECT id,name,uppercats,global_rank
FROM '.CATEGORIES_TABLE.'
;';
display_select_cat_wrapper($query, $associate_options_selected, 'associate_options');
display_select_cat_wrapper($query, $represent_options_selected, 'represent_options');
$template->assign(compact('associate_options_selected', 'represent_options_selected'));

trigger_action('loc_end_picture_modify');

Expand Down
48 changes: 48 additions & 0 deletions admin/themes/default/js/LocalStorageCache.js
View file
@@ -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);
}
};
123 changes: 88 additions & 35 deletions admin/themes/default/template/picture_modify.tpl
View file
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
8 changes: 7 additions & 1 deletion include/ws_functions/pwg.categories.php
View file
Expand Up @@ -486,7 +486,7 @@ function ws_categories_getAdminList($params, &$service)
FROM '. IMAGE_CATEGORY_TABLE .'
GROUP BY category_id
;';
$nb_images_of = simple_hash_from_query($query, 'category_id', 'counter');
$nb_images_of = query2array($query, 'category_id', 'counter');

$query = '
SELECT id, name, comment, uppercats, global_rank
Expand All @@ -507,6 +507,12 @@ function ws_categories_getAdminList($params, &$service)
'ws_categories_getAdminList'
)
);
$row['fullname'] = strip_tags(
get_cat_display_name_cache(
$row['uppercats'],
null
)
);
$row['comment'] = strip_tags(
trigger_event(
'render_category_description',
Expand Down

0 comments on commit f932ee7

Please sign in to comment.