From 532fc743f22df8e85fe10c4cb4ed2d236fc6fa3f Mon Sep 17 00:00:00 2001 From: Matthieu Leproux Date: Tue, 8 Nov 2022 17:22:28 +0100 Subject: [PATCH] fixed #1781 better UX for the add album popin --- admin/themes/default/js/albums.js | 161 +++++++++++++---------- admin/themes/default/template/albums.tpl | 3 +- language/en_UK/admin.lang.php | 1 + language/fr_FR/admin.lang.php | 1 + tools/ws/ws.js | 1 + 5 files changed, 94 insertions(+), 73 deletions(-) diff --git a/admin/themes/default/js/albums.js b/admin/themes/default/js/albums.js index 8bdac0bc3..3383c6b88 100644 --- a/admin/themes/default/js/albums.js +++ b/admin/themes/default/js/albums.js @@ -345,85 +345,91 @@ $(document).ready(() => { success: function (raw_data) { data = jQuery.parseJSON(raw_data); var parent_node = $('.tree').tree('getNodeById', newAlbumParent); - if (newAlbumPosition == "last") { - $('.tree').tree( - 'appendNode', - { - id: data.result.id, - isEmptyFolder: true, - name: newAlbumName - }, - parent_node - ); - } else { - $('.tree').tree( - 'prependNode', - { - id: data.result.id, - isEmptyFolder: true, - name: newAlbumName - }, - parent_node - ); - } - - if (parent_node) { - setSubcatsBadge(parent_node); - - $("#cat-"+parent_node.id).on( 'click', '.move-cat-toogler', function(e) { - var node_id = parent_node.id; - var node = $('.tree').tree('getNodeById', node_id); - if (node) { - open_nodes = $('.tree').tree('getState').open_nodes; - if (!open_nodes.includes(node_id)) { - $(this).html(toggler_open); - $('.tree').tree('openNode', node); - } else { - $(this).html(toggler_close); - $('.tree').tree('closeNode', node); + + if (data.stat == "ok") { + if (newAlbumPosition == "last") { + $('.tree').tree( + 'appendNode', + { + id: data.result.id, + isEmptyFolder: true, + name: newAlbumName + }, + parent_node + ); + } else { + $('.tree').tree( + 'prependNode', + { + id: data.result.id, + isEmptyFolder: true, + name: newAlbumName + }, + parent_node + ); + } + + if (parent_node) { + setSubcatsBadge(parent_node); + + $("#cat-"+parent_node.id).on( 'click', '.move-cat-toogler', function(e) { + var node_id = parent_node.id; + var node = $('.tree').tree('getNodeById', node_id); + if (node) { + open_nodes = $('.tree').tree('getState').open_nodes; + if (!open_nodes.includes(node_id)) { + $(this).html(toggler_open); + $('.tree').tree('openNode', node); + } else { + $(this).html(toggler_close); + $('.tree').tree('closeNode', node); + } } - } + }); + } + + $(".move-cat-add").unbind("click").on("click", function () { + openAddAlbumPopIn($(this).data("aid")); + $(".AddAlbumSubmit").data("a-parent", $(this).data("aid")); }); + $(".move-cat-add-small").unbind("click").on("click", function () { + openAddAlbumPopIn($(this).data("aid")); + $(".AddAlbumSubmit").data("a-parent", $(this).data("aid")); + }); + $(".move-cat-delete").on("click", function () { + triggerDeleteAlbum($(this).data("id")); + }); + $(".move-cat-delete-small").on("click", function () { + triggerDeleteAlbum($(this).data("id")); + }); + $(".move-cat-title-container").unbind("click").on("click", function () { + openRenameAlbumPopIn($(this).find(".move-cat-title").attr("title")); + $(".RenameAlbumSubmit").data("cat_id", $(this).attr('data-id')); + }); + $('.tiptip').tipTip({ + delay: 0, + fadeIn: 200, + fadeOut: 200, + edgeOffset: 3 + }); + + updateTitleBadge(nb_albums+1) + + goToNode($(".tree").tree('getNodeById', data.result.id), $(".tree").tree('getNodeById', data.result.id)); + $('html,body').animate({ + scrollTop: $("#cat-" + data.result.id).offset().top - screen.height / 2}, + 'slow'); + + closeAddAlbumPopIn(); + $(".AddAlbumSubmit").removeClass("notClickable"); + } else { + $(".AddAlbumErrors").text(str_album_name_empty).show(); + $(".AddAlbumSubmit").removeClass("notClickable"); } - - $(".move-cat-add").unbind("click").on("click", function () { - openAddAlbumPopIn($(this).data("aid")); - $(".AddAlbumSubmit").data("a-parent", $(this).data("aid")); - }); - $(".move-cat-add-small").unbind("click").on("click", function () { - openAddAlbumPopIn($(this).data("aid")); - $(".AddAlbumSubmit").data("a-parent", $(this).data("aid")); - }); - $(".move-cat-delete").on("click", function () { - triggerDeleteAlbum($(this).data("id")); - }); - $(".move-cat-delete-small").on("click", function () { - triggerDeleteAlbum($(this).data("id")); - }); - $(".move-cat-title-container").unbind("click").on("click", function () { - openRenameAlbumPopIn($(this).find(".move-cat-title").attr("title")); - $(".RenameAlbumSubmit").data("cat_id", $(this).attr('data-id')); - }); - $('.tiptip').tipTip({ - delay: 0, - fadeIn: 200, - fadeOut: 200, - edgeOffset: 3 - }); - - updateTitleBadge(nb_albums+1) - - goToNode($(".tree").tree('getNodeById', data.result.id), $(".tree").tree('getNodeById', data.result.id)); - $('html,body').animate({ - scrollTop: $("#cat-" + data.result.id).offset().top - screen.height / 2}, - 'slow'); }, error: function(message) { console.log(message); } - }).done(function () { - closeAddAlbumPopIn(); - $(".AddAlbumSubmit").removeClass("notClickable"); }); }) @@ -477,6 +483,17 @@ function openAddAlbumPopIn(parentAlbumId) { $("#AddAlbum").fadeIn(); $(".AddAlbumLabelUsername .user-property-input").val(''); $(".AddAlbumLabelUsername .user-property-input").focus(); + + $("#AddAlbum").on('keyup', function (e) { + // 13 is 'Enter' + if(e.keyCode === 13) { + $(".AddAlbumSubmit").trigger("click"); + } + // 27 is 'Escape' + if(e.keyCode === 27) { + closeAddAlbumPopIn(); + } + }) } function closeAddAlbumPopIn() { $("#AddAlbum").fadeOut(); diff --git a/admin/themes/default/template/albums.tpl b/admin/themes/default/template/albums.tpl index 69977cbd1..44ac7be16 100644 --- a/admin/themes/default/template/albums.tpl +++ b/admin/themes/default/template/albums.tpl @@ -38,7 +38,8 @@ const str_add_photo = '{'Add Photos'|@translate|escape:javascript}'; const str_visit_gallery = '{'Visit Gallery'|@translate|escape:javascript}'; const str_sort_order = '{'Automatic sort order'|@translate|escape:javascript}'; const str_delete_album = '{'Delete album'|@translate|escape:javascript}'; -const str_root_order = '{'Apply to root albums'|@translate|escape:javascript}' +const str_root_order = '{'Apply to root albums'|@translate|escape:javascript}'; +str_album_name_empty = '{'Album name must not be empty'|@translate|escape:javascript}' const add_album_root_title = '{'Create a new album at root'|@translate|escape:javascript}'; const add_sub_album_of = '{'Create a sub-album of "%s"'|@translate|escape:javascript}'; diff --git a/language/en_UK/admin.lang.php b/language/en_UK/admin.lang.php index 85a48d76f..f717e26a7 100644 --- a/language/en_UK/admin.lang.php +++ b/language/en_UK/admin.lang.php @@ -1323,4 +1323,5 @@ $lang['Always have a backup of your database and files.'] = 'Always have a backu $lang['The best is to have them made automatically on a regular basis.'] = 'The best is to have them made automatically on a regular basis.'; $lang['If anything bad happens during the update, you would be able to restore a backup.'] = 'If anything bad happens during the update, you would be able to restore a backup.'; $lang['Apply to root albums'] = 'Apply to root albums'; +$lang['Album name must not be empty'] = 'Album name must not be empty'; // Leave this line empty diff --git a/language/fr_FR/admin.lang.php b/language/fr_FR/admin.lang.php index 52a3bc94f..1e8d7763f 100644 --- a/language/fr_FR/admin.lang.php +++ b/language/fr_FR/admin.lang.php @@ -1323,4 +1323,5 @@ $lang['Always have a backup of your database and files.'] = 'Ayez toujours une s $lang['The best is to have them made automatically on a regular basis.'] = 'Le mieux est de le faire automatiquement et régulièrement'; $lang['If anything bad happens during the update, you would be able to restore a backup.'] = 'Si quelque chose arrive pendant la mise à jour, il sera possible de restaurer la sauvegarde'; $lang['Apply to root albums'] = 'Appliquer aux albums racine'; +$lang['Album name must not be empty'] = 'Le nom de l\'album ne doit pas être vide'; // Leave this line empty diff --git a/tools/ws/ws.js b/tools/ws/ws.js index 38e902edd..73520e450 100644 --- a/tools/ws/ws.js +++ b/tools/ws/ws.js @@ -93,6 +93,7 @@ $(() => { url: ws_url, data: { format: "json", method: "reflection.getMethodList" } }).done(function (result) { + console.log(result); result = parsePwgJSON(result); if (result != null) {