fixed #1781 better UX for the add album popin

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(
+        if (data.stat == "ok") {
-            'appendNode',
+          if (newAlbumPosition == "last") {
-            {
+            $('.tree').tree(
-              id: data.result.id,
+              'appendNode',
-              isEmptyFolder: true,
+              {
-              name: newAlbumName
+                id: data.result.id,
-            },
+                isEmptyFolder: true,
-            parent_node
+                name: newAlbumName
-          );
+              },
-        } else {
+              parent_node
-          $('.tree').tree(
+            );
-            'prependNode',
+          } else {
-            {
+            $('.tree').tree(
-              id: data.result.id,
+              'prependNode',
-              isEmptyFolder: true,
+              {
-              name: newAlbumName
+                id: data.result.id,
-            },
+                isEmptyFolder: true,
-            parent_node
+                name: newAlbumName
-          );
+              },
-        }
+              parent_node
-
+            );
-        if (parent_node) {
+          }
-          setSubcatsBadge(parent_node);
+  
-
+          if (parent_node) {
-          $("#cat-"+parent_node.id).on( 'click', '.move-cat-toogler', function(e) {
+            setSubcatsBadge(parent_node);
-            var node_id = parent_node.id;
+  
-            var node = $('.tree').tree('getNodeById', node_id);
+            $("#cat-"+parent_node.id).on( 'click', '.move-cat-toogler', function(e) {
-            if (node) {
+              var node_id = parent_node.id;
-              open_nodes = $('.tree').tree('getState').open_nodes;
+              var node = $('.tree').tree('getNodeById', node_id);
-              if (!open_nodes.includes(node_id)) {
+              if (node) {
-                $(this).html(toggler_open);
+                open_nodes = $('.tree').tree('getState').open_nodes;
-                $('.tree').tree('openNode', node);
+                if (!open_nodes.includes(node_id)) {
-              } else {
+                  $(this).html(toggler_open);
-                $(this).html(toggler_close);
+                  $('.tree').tree('openNode', node);
-                $('.tree').tree('closeNode', 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();

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}';

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

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

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) {