archive/piwigo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feature 3077 : use selectize on batch_manager_global, cat_modify and photos_add_direct

Browse source 
+ rewrite "add album" popup (more flexible and working with selectize)

git-svn-id: http://piwigo.org/svn/trunk@28533 68402e56-0260-453c-a942-63ccdbb3a9ee
This commit is contained in:
mistic100 2014-05-24 16:24:52 +00:00
commit ad10a97f4a
11 changed files with 345 additions and 162 deletions
Download patch file Download diff file Expand all files Collapse all files

19
admin/batch_manager_global.php
View file

@ -474,6 +474,8 @@ $template->assign(
);
// tags
$filter_tags = array();
if (!empty($_SESSION['bulk_manager_filter']['tags']))
{
$query = '
@ -483,20 +485,11 @@ SELECT
FROM '.TAGS_TABLE.'
WHERE id IN ('.implode(',', $_SESSION['bulk_manager_filter']['tags']).')
;';
$template->assign('filter_tags', get_taglist($query));
$filter_tags = get_taglist($query);
}
// Virtualy associate a picture to a category
$query = '
SELECT id,name,uppercats,global_rank
FROM '.CATEGORIES_TABLE.'
;';
$categories = array_from_query($query);
usort($categories, 'global_rank_compare');
display_select_categories($categories, array(), 'category_full_name_options', true);
$template->assign('category_parent_options', $template->get_template_vars('category_full_name_options'));
$template->assign('category_parent_options_selected', array());
$template->assign('filter_tags', $filter_tags);
// in the filter box, which category to select by default
$selected_category = array();
@ -704,7 +697,7 @@ SELECT id,path,representative_ext,file,filesize,level,name,width,height,rotation
$template->assign(array(
'nb_thumbs_page' => $nb_thumbs_page,
'nb_thumbs_set' => count($page['cat_elements_id']),
'CACHE_KEYS' => get_admin_client_cache_keys(array('tags'))
'CACHE_KEYS' => get_admin_client_cache_keys(array('tags', 'categories')),
));
trigger_action('loc_end_element_set_global');

27
admin/cat_modify.php
View file

@ -288,12 +288,11 @@ else
$intro.= '<br>'.l10n('Numeric identifier : %d', $category['id']);
$template->assign('INTRO', $intro);
$template->assign(
'U_MANAGE_RANKS',
$base_url.'element_set_ranks&amp;cat_id='.$category['id']
);
$template->assign(array(
'INTRO' => $intro,
'U_MANAGE_RANKS' => $base_url.'element_set_ranks&amp;cat_id='.$category['id'],
'CACHE_KEYS' => get_admin_client_cache_keys(array('categories')),
));
if ($category['is_virtual'])
{
@ -366,21 +365,7 @@ SELECT id,representative_ext,path
if ($category['is_virtual'])
{
// the category can be moved in any category but in itself, in any
// sub-category
$unmovables = get_subcat_ids(array($category['id']));
$query = '
SELECT id,name,uppercats,global_rank
FROM '.CATEGORIES_TABLE.'
WHERE id NOT IN ('.implode(',', $unmovables).')
;';
display_select_cat_wrapper(
$query,
empty($category['id_uppercat']) ? array() : array($category['id_uppercat']),
'move_cat_options'
);
$template->assign('parent_category', empty($category['id_uppercat']) ? array() : array($category['id_uppercat']));
}
trigger_action('loc_end_cat_modify');

18
admin/include/photos_add_direct_prepare.inc.php
View file

@ -217,16 +217,7 @@ SELECT category_id
}
// existing album
$query = '
SELECT id,name,uppercats,global_rank
FROM '.CATEGORIES_TABLE.'
;';
display_select_cat_wrapper(
$query,
$selected_category,
'category_options'
);
$template->assign('selected_category', $selected_category);
// image level options
@ -256,11 +247,10 @@ if (!function_exists('gd_info'))
$setup_errors[] = l10n('GD library is missing');
}
$template->assign(
array(
$template->assign(array(
'setup_errors'=> $setup_errors,
)
);
'CACHE_KEYS' => get_admin_client_cache_keys(array('categories')),
));
// Warnings
if (isset($_GET['hide_warnings']))

123
admin/themes/default/js/addAlbum.js Normal file
View file

@ -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('<option/>')
.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;
};

81
admin/themes/default/template/batch_manager_global.tpl
View file

@ -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>

73
admin/themes/default/template/cat_modify.tpl
View file

@ -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}

83
admin/themes/default/template/include/add_album.inc.tpl
View file

@ -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();
{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"}
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");
}
});
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>

2
admin/themes/default/template/include/colorbox.inc.tpl
View file

@ -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"}

71
admin/themes/default/template/photos_add_direct.tpl
View file

@ -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>

1
admin/themes/default/template/picture_modify.tpl
View file

@ -25,6 +25,7 @@ var categoriesCache = new LocalStorageCache({
jQuery('[data-selectize=categories]').selectize({
valueField: 'id',
labelField: 'fullname',
sortField: 'fullname',
searchField: ['fullname'],
plugins: ['remove_button']
});

7
admin/themes/default/theme.css
View file

@ -1043,6 +1043,13 @@ p#uploadModeInfos {text-align:left;margin-top:1em;font-size:90%;color:#999;}
}
/* Album Manager */
#addAlbumForm {
text-align:left;
padding:1em;
}
#addAlbumForm .selectize-dropdown-content {
max-height:170px;
}
#addAlbumForm input[name="category_name"], #formCreateAlbum input[name="virtual_name"] {
width:300px;
}