From ed28487565fb907dca57cf7b7bfa809fbe0727e2 Mon Sep 17 00:00:00 2001 From: plegall Date: Wed, 23 Nov 2022 10:47:34 +0100 Subject: [PATCH] (cp 683e113) Issue #1790 album manager performances (#1805) * 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 --- admin/albums.php | 13 +- admin/themes/default/js/albums.js | 275 +++++++++++------------ admin/themes/default/template/albums.tpl | 1 + 3 files changed, 135 insertions(+), 154 deletions(-) diff --git a/admin/albums.php b/admin/albums.php index 94890bdf0..d1654170e 100644 --- a/admin/albums.php +++ b/admin/albums.php @@ -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 | // +-----------------------------------------------------------------------+ @@ -273,6 +261,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, ) ); diff --git a/admin/themes/default/js/albums.js b/admin/themes/default/js/albums.js index e95ffd102..7519099ae 100644 --- a/admin/themes/default/js/albums.js +++ b/admin/themes/default/js/albums.js @@ -1,11 +1,9 @@ $(document).ready(() => { - formatedData = data; $("h1").append(``+nb_albums+``); - 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 = ""; - title = '

%name%

'; - toggler_cont = "
%content%
"; - toggler_close = ""; - toggler_open = ""; - actions = - '
' - +"
" - +'' - +'' - +'' - +'' - +'' - +"
" - +'
'; - action_order = ''; - - 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( - "
" - +"" - +"" - +"" - +""+ node.last_updates +"" - +"
" - ) - - 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 = ""; + title = '

%name%

'; + toggler_cont = "
%content%
"; + toggler_close = ""; + toggler_open = ""; + actions = + '
' + +"
" + +'' + +'' + +'' + +'' + +'' + +'' + +"
" + +'
'; + // action_order = ''; + + 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( + "
" + +""+node.nb_subcats+"" + +""+node.nb_images+"" + +""+node.nb_sub_photos+"" + +"
" + ) + + 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(); } diff --git a/admin/themes/default/template/albums.tpl b/admin/themes/default/template/albums.tpl index e8e82dbb5..51853fdac 100644 --- a/admin/themes/default/template/albums.tpl +++ b/admin/themes/default/template/albums.tpl @@ -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}