mirror of
https://github.com/Piwigo/Piwigo.git
synced 2026-03-28 17:42:57 +01:00
* change the meaning of light_album_manager_threshold to load less user interface (instead of redirecting to the old album manager). In the light mode, do not load tiptip. * remove dropdown menu, to reduce DOM size For example, on a 16k albums, load time goes from 18 to 8 seconds on MatthieuLP computer. Co-authored-by: Matthieu Leproux <matthieu.leproux@gmail.com>
This commit is contained in:
Pierrick Le Gall
GitHub
@@ -20,18 +20,6 @@ SELECT
|
||||
;';
|
||||
list($albums_counter) = pwg_db_fetch_row(pwg_query($query));
|
||||
|
||||
if ($albums_counter > $conf['light_album_manager_threshold'])
|
||||
{
|
||||
$url = get_root_url().'admin.php?page=cat_list';
|
||||
|
||||
if (isset($_GET['parent_id']))
|
||||
{
|
||||
$url.= '&parent_id='.$_GET['parent_id'];
|
||||
}
|
||||
|
||||
redirect($url);
|
||||
}
|
||||
|
||||
// +-----------------------------------------------------------------------+
|
||||
// | Check Access and exit when user status is not ok |
|
||||
// +-----------------------------------------------------------------------+
|
||||
@@ -278,6 +266,7 @@ $template->assign(
|
||||
'PWG_TOKEN' => get_pwg_token(),
|
||||
'nb_albums' => count($allAlbum),
|
||||
'ADMIN_PAGE_TITLE' => l10n('Albums'),
|
||||
'light_album_manager' => ($albums_counter > $conf['light_album_manager_threshold']) ? 1 : 0,
|
||||
)
|
||||
);
|
||||
|
||||
|
||||
@@ -1,11 +1,9 @@
|
||||
$(document).ready(() => {
|
||||
|
||||
formatedData = data;
|
||||
|
||||
$("h1").append(`<span class='badge-number'>`+nb_albums+`</span>`);
|
||||
|
||||
console.log(formatedData);
|
||||
|
||||
// console.log(formatedData);
|
||||
$('.tree').tree({
|
||||
data: formatedData,
|
||||
autoOpen : false,
|
||||
@@ -15,118 +13,9 @@ $(document).ready(() => {
|
||||
onCanSelectNode: function(node) {return false}
|
||||
});
|
||||
|
||||
function createAlbumNode(node, li) {
|
||||
icon = "<span class='%icon%'></span>";
|
||||
title = '<span data-id="'+node.id+'" class="move-cat-title-container"><p class="move-cat-title" title="'+node.name+'">%name%</p> <span class="icon-pencil"></span> </span>';
|
||||
toggler_cont = "<div class='move-cat-toogler' data-id=%id%>%content%</div>";
|
||||
toggler_close = "<span class='icon-left-open'></span>";
|
||||
toggler_open = "<span class='icon-down-open'></span>";
|
||||
actions =
|
||||
'<div class="move-cat-action-cont">'
|
||||
+"<div class='move-cat-action'>"
|
||||
+'<a class="move-cat-add icon-plus-circled tiptip" title="'+ str_add_album +'" href="#" data-aid="'+node.id+'"></a>'
|
||||
+'<a class="move-cat-edit icon-pencil tiptip" title="'+ str_edit_album +'" href="admin.php?page=album-'+node.id+'"></a>'
|
||||
+'<a class="move-cat-upload icon-upload tiptip" title="'+ str_add_photo +'" href="admin.php?page=photos_add&album='+node.id+'"></a>'
|
||||
+'<a class="move-cat-see icon-eye tiptip" title="'+ str_visit_gallery +'" href="index.php?/category/'+node.id+'"></a>'
|
||||
+'<a data-id="'+node.id+'" class="move-cat-delete icon-trash tiptip" title="'+ str_delete_album +'" ></a>'
|
||||
+"</div>"
|
||||
+'</div>';
|
||||
action_order = '<a data-id="'+node.id+'" class="move-cat-order icon-sort-name-up tiptip" title="'+ str_sort_order +'"></a>';
|
||||
|
||||
cont = li.find('.jqtree-element');
|
||||
cont.addClass('move-cat-container');
|
||||
cont.attr('id', 'cat-'+node.id)
|
||||
cont.html('');
|
||||
|
||||
cont.append(actions);
|
||||
cont.find('.move-cat-action .move-cat-see').after(action_order);
|
||||
|
||||
cont.find(".toggle-cat-option").on("click", function () {
|
||||
$(".cat-option").hide();
|
||||
$(this).find(".cat-option").toggle();
|
||||
});
|
||||
|
||||
if (node.children.length != 0) {
|
||||
open_nodes = $('.tree').tree('getState').open_nodes;
|
||||
if (open_nodes.includes(node.id)) {
|
||||
toggler = toggler_open;
|
||||
} else {
|
||||
toggler = toggler_close;
|
||||
}
|
||||
cont.append($(toggler_cont
|
||||
.replace(/%content%/g, toggler)
|
||||
.replace(/%id%/g, node.id)));
|
||||
} else {
|
||||
cont.find('.move-cat-order').addClass("notClickable");
|
||||
|
||||
cont.append($(toggler_cont
|
||||
.replace(/%content%/g, toggler_close)
|
||||
.replace(/%id%/g, node.id))).addClass("disabledToggle");
|
||||
}
|
||||
|
||||
cont.append($(icon.replace(/%icon%/g, 'icon-grip-vertical-solid')));
|
||||
|
||||
if (node.children.length != 0) {
|
||||
cont.append($(icon.replace(/%icon%/g, 'icon-sitemap')));
|
||||
} else {
|
||||
cont.append($(icon.replace(/%icon%/g, 'icon-folder-open')));
|
||||
}
|
||||
|
||||
cont.append($(title.replace(/%name%/g, node.name)));
|
||||
|
||||
if (node.status == 'private') {
|
||||
cont.find(".move-cat-title").addClass('icon-lock');
|
||||
}
|
||||
|
||||
var colors = ["icon-red", "icon-blue", "icon-yellow", "icon-purple", "icon-green"];
|
||||
var colorId = Number(node.id)%5;
|
||||
cont.find("span.icon-folder-open, span.icon-sitemap").addClass(colors[colorId]).addClass("node-icon");
|
||||
|
||||
cont.find(".move-cat-title-container").after(
|
||||
"<div class='badge-container'>"
|
||||
+"<i class='icon-blue icon-sitemap nb-subcats'></i>"
|
||||
+"<i class='icon-purple icon-picture nb-images'></i>"
|
||||
+"<i class='icon-green icon-imagefolder-01 nb-sub-photos'></i>"
|
||||
+"<i class='icon-red icon-back-in-time last-update'>"+ node.last_updates +"</i>"
|
||||
+"</div>"
|
||||
)
|
||||
|
||||
if (node.nb_subcats) {
|
||||
cont.find(".nb-subcats").text(node.nb_subcats);
|
||||
} else {
|
||||
cont.find(".nb-subcats").hide();
|
||||
}
|
||||
|
||||
if (node.nb_images != 0 && node.nb_images) {
|
||||
cont.find(".nb-images").text(node.nb_images);
|
||||
} else {
|
||||
cont.find(".nb-images").hide();
|
||||
}
|
||||
|
||||
if (node.last_updates) {
|
||||
cont.find(".last-update").text(node.last_updates);
|
||||
} else {
|
||||
cont.find(".last-update").hide();
|
||||
}
|
||||
|
||||
if (node.nb_sub_photos) {
|
||||
cont.find(".nb-sub-photos").text(node.nb_sub_photos);
|
||||
} else {
|
||||
cont.find(".nb-sub-photos").hide();
|
||||
}
|
||||
|
||||
if (node.has_not_access) {
|
||||
cont.find(".move-cat-see").addClass("notClickable");
|
||||
}
|
||||
}
|
||||
|
||||
var url_split = window.location.href.split("cat_move");
|
||||
var catToOpen = url_split[url_split.length-1].split("-")[1];
|
||||
|
||||
function isNumeric(num){
|
||||
return !isNaN(num)
|
||||
}
|
||||
|
||||
if(catToOpen && isNumeric(catToOpen)) {
|
||||
nodeToGo = $('.tree').tree('getNodeById', catToOpen);
|
||||
|
||||
@@ -229,7 +118,7 @@ $(document).ready(() => {
|
||||
} else if (e.type == "mouseup") {
|
||||
$(".dragging").removeClass("dragging")
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
if (openCat != -1) {
|
||||
var node = $('.tree').tree('getNodeById', openCat);
|
||||
@@ -398,39 +287,137 @@ $(document).ready(() => {
|
||||
triggerDeleteAlbum($(this).data("id"));
|
||||
});
|
||||
|
||||
/*----------------
|
||||
Checkboxes
|
||||
----------------*/
|
||||
|
||||
function checkbox_change() {
|
||||
if ($(this).attr('data-selected') == '1') {
|
||||
$(this).find("i").hide();
|
||||
} else {
|
||||
$(this).find("i").show();
|
||||
}
|
||||
}
|
||||
|
||||
function checkbox_click() {
|
||||
if ($(this).attr('data-selected') == '1') {
|
||||
$(this).attr('data-selected', '0');
|
||||
$(this).find("i").hide();
|
||||
} else {
|
||||
$(this).attr('data-selected', '1');
|
||||
$(this).find("i").show();
|
||||
}
|
||||
}
|
||||
|
||||
$('.user-list-checkbox').unbind("change").change(checkbox_change);
|
||||
$('.user-list-checkbox').unbind("click").click(checkbox_click);
|
||||
|
||||
$('.tiptip').tipTip({
|
||||
delay: 0,
|
||||
fadeIn: 200,
|
||||
fadeOut: 200,
|
||||
edgeOffset: 3
|
||||
});
|
||||
if (!light_album_manager) {
|
||||
$('.tiptip').tipTip({
|
||||
delay: 0,
|
||||
fadeIn: 200,
|
||||
fadeOut: 200,
|
||||
edgeOffset: 3
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
function createAlbumNode(node, li) {
|
||||
icon = "<span class='%icon%'></span>";
|
||||
title = '<span data-id="'+node.id+'" class="move-cat-title-container ';
|
||||
if (node.status == 'private') {
|
||||
title += 'icon-lock';
|
||||
}
|
||||
title += '"><p class="move-cat-title" title="'+node.name+'">%name%</p> <span class="icon-pencil"></span> </span>';
|
||||
toggler_cont = "<div class='move-cat-toogler' data-id=%id%>%content%</div>";
|
||||
toggler_close = "<span class='icon-left-open'></span>";
|
||||
toggler_open = "<span class='icon-down-open'></span>";
|
||||
actions =
|
||||
'<div class="move-cat-action-cont">'
|
||||
+"<div class='move-cat-action'>"
|
||||
+'<a class="move-cat-add icon-plus-circled tiptip" title="'+ str_add_album +'" href="#" data-aid="'+node.id+'"></a>'
|
||||
+'<a class="move-cat-edit icon-pencil tiptip" title="'+ str_edit_album +'" href="admin.php?page=album-'+node.id+'"></a>'
|
||||
+'<a class="move-cat-upload icon-upload tiptip" title="'+ str_add_photo +'" href="admin.php?page=photos_add&album='+node.id+'"></a>'
|
||||
+'<a class="move-cat-see icon-eye tiptip" title="'+ str_visit_gallery +'" href="index.php?/category/'+node.id+'"></a>'
|
||||
+'<a data-id="'+node.id+'" class="move-cat-order icon-sort-name-up tiptip" title="'+ str_sort_order +'"></a>'
|
||||
+'<a data-id="'+node.id+'" class="move-cat-delete icon-trash tiptip" title="'+ str_delete_album +'" ></a>'
|
||||
+"</div>"
|
||||
+'</div>';
|
||||
// action_order = '<a data-id="'+node.id+'" class="move-cat-order icon-sort-name-up tiptip" title="'+ str_sort_order +'"></a>';
|
||||
|
||||
cont = li.find('.jqtree-element');
|
||||
cont.addClass('move-cat-container');
|
||||
cont.attr('id', 'cat-'+node.id)
|
||||
cont.html('');
|
||||
|
||||
cont.append(actions);
|
||||
|
||||
cont.find(".toggle-cat-option").on("click", function () {
|
||||
$(".cat-option").hide();
|
||||
$(this).find(".cat-option").toggle();
|
||||
});
|
||||
|
||||
if (node.children.length != 0) {
|
||||
open_nodes = $('.tree').tree('getState').open_nodes;
|
||||
if (open_nodes.includes(node.id)) {
|
||||
toggler = toggler_open;
|
||||
} else {
|
||||
toggler = toggler_close;
|
||||
}
|
||||
cont.append($(toggler_cont
|
||||
.replace(/%content%/g, toggler)
|
||||
.replace(/%id%/g, node.id)));
|
||||
} else {
|
||||
cont.find('.move-cat-order').addClass("notClickable");
|
||||
|
||||
cont.append($(toggler_cont
|
||||
.replace(/%content%/g, toggler_close)
|
||||
.replace(/%id%/g, node.id))).addClass("disabledToggle");
|
||||
}
|
||||
|
||||
cont.append($(icon.replace(/%icon%/g, 'icon-grip-vertical-solid')));
|
||||
|
||||
if (node.children.length != 0) {
|
||||
cont.append($(icon.replace(/%icon%/g, 'icon-sitemap')));
|
||||
} else {
|
||||
cont.append($(icon.replace(/%icon%/g, 'icon-folder-open')));
|
||||
}
|
||||
|
||||
cont.append($(title.replace(/%name%/g, node.name)));
|
||||
|
||||
var colors = ["icon-red", "icon-blue", "icon-yellow", "icon-purple", "icon-green"];
|
||||
var colorId = Number(node.id)%5;
|
||||
cont.find("span.icon-folder-open, span.icon-sitemap").addClass(colors[colorId]).addClass("node-icon");
|
||||
|
||||
cont.find(".move-cat-title-container").after(
|
||||
"<div class='badge-container'>"
|
||||
+"<i class='icon-blue icon-sitemap nb-subcats'>"+node.nb_subcats+"</i>"
|
||||
+"<i class='icon-purple icon-picture nb-images'>"+node.nb_images+"</i>"
|
||||
+"<i class='icon-green icon-imagefolder-01 nb-sub-photos'>"+node.nb_sub_photos+"</i>"
|
||||
+"</div>"
|
||||
)
|
||||
|
||||
if (!(node.nb_subcats)) {
|
||||
cont.find(".nb-subcats").hide();
|
||||
}
|
||||
|
||||
if (!(node.nb_images != 0 && node.nb_images)) {
|
||||
cont.find(".nb-images").hide();
|
||||
}
|
||||
|
||||
if (!(node.nb_sub_photos)) {
|
||||
cont.find(".nb-sub-photos").hide();
|
||||
}
|
||||
|
||||
if (node.has_not_access) {
|
||||
cont.find(".move-cat-see").addClass("notClickable");
|
||||
}
|
||||
}
|
||||
|
||||
/*----------------
|
||||
Checkboxes
|
||||
----------------*/
|
||||
|
||||
function checkbox_change() {
|
||||
if ($(this).attr('data-selected') == '1') {
|
||||
$(this).find("i").hide();
|
||||
} else {
|
||||
$(this).find("i").show();
|
||||
}
|
||||
}
|
||||
|
||||
function checkbox_click() {
|
||||
if ($(this).attr('data-selected') == '1') {
|
||||
$(this).attr('data-selected', '0');
|
||||
$(this).find("i").hide();
|
||||
} else {
|
||||
$(this).attr('data-selected', '1');
|
||||
$(this).find("i").show();
|
||||
}
|
||||
}
|
||||
|
||||
function isNumeric(num){
|
||||
return !isNaN(num)
|
||||
}
|
||||
|
||||
function openAddAlbumPopIn(parentAlbumId) {
|
||||
if (parentAlbumId != 0) {
|
||||
$("#AddAlbum .AddIconTitle span").html(add_sub_album_of.replace("%s", $(".tree").tree('getNodeById', parentAlbumId).name));
|
||||
@@ -453,6 +440,7 @@ function openAddAlbumPopIn(parentAlbumId) {
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function closeAddAlbumPopIn() {
|
||||
$("#AddAlbum").fadeOut();
|
||||
}
|
||||
@@ -467,8 +455,9 @@ function openRenameAlbumPopIn(replacedAlbumName) {
|
||||
if(e.which == 13) {
|
||||
$(".RenameAlbumSubmit").trigger("click");
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function closeRenameAlbumPopIn() {
|
||||
$("#RenameAlbum").fadeOut();
|
||||
}
|
||||
@@ -507,6 +496,7 @@ function triggerDeleteAlbum(cat_id) {
|
||||
openDeleteAlbumPopIn(cat_id);
|
||||
});
|
||||
}
|
||||
|
||||
function openDeleteAlbumPopIn(cat_to_delete) {
|
||||
$("#DeleteAlbum").fadeIn();
|
||||
node = $(".tree").tree('getNodeById', cat_to_delete);
|
||||
@@ -560,6 +550,7 @@ function openDeleteAlbumPopIn(cat_to_delete) {
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
function closeDeleteAlbumPopIn() {
|
||||
$("#DeleteAlbum").fadeOut();
|
||||
}
|
||||
|
||||
@@ -13,6 +13,7 @@ var str_no_change_parent = "{'No, don\'t move this album here'|@translate}";
|
||||
var str_root = "{'Root'|@translate}";
|
||||
var openCat = {$open_cat};
|
||||
var nb_albums = {$nb_albums};
|
||||
var light_album_manager = {$light_album_manager};
|
||||
|
||||
var delay_autoOpen = {$delay_before_autoOpen}
|
||||
{/footer_script}
|
||||
|
||||
Reference in New Issue
Block a user