Merge branch 'jstree-improvements' into develop

omeka · Mar 29, 2024 · 99a36e5 · 99a36e5
2 parents 413a611 + 715e8f6
commit 99a36e5
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 7 deletions.
diff --git a/application/asset/css/jstree.css b/application/asset/css/jstree.css
diff --git a/application/asset/js/jstree-plugins.js b/application/asset/js/jstree-plugins.js
@@ -4,12 +4,24 @@
 $.jstree.plugins.removenode = function(options, parent) {
     var removeIcon = $('<i>', {
         class: 'jstree-icon jstree-removenode-remove',
-        attr:{role:'presentation'}
+        attr:{
+            role:'presentation',
+            'title':Omeka.jsTranslate('Remove link'),
+            'aria-label':Omeka.jsTranslate('Remove link')
+        },
     });
     var undoIcon = $('<i>', {
         class: 'jstree-icon jstree-removenode-undo',
-        attr:{role:'presentation'}
+        attr:{
+            role:'presentation',
+            'title':Omeka.jsTranslate('Restore link'),
+            'aria-label':Omeka.jsTranslate('Restore link')
+        }
     });
+    var toBeRemovedSpan = $('<span>', {
+        class: 'jstree-removenode-toberemoved',
+        style: 'display: none;'
+    }).text(Omeka.jsTranslate('link to be removed'));
     this.bind = function() {
         parent.bind.call(this);
         this.element.on(
@@ -22,6 +34,8 @@ $.jstree.plugins.removenode = function(options, parent) {
                 icon.hide();
                 if (icon.hasClass('jstree-removenode-remove')) {
                     // Handle node removal.
+                    node.find('.jstree-anchor').children().hide();
+                    node.find('.jstree-anchor').children('.jstree-removenode-toberemoved').show();
                     icon.siblings('.jstree-removenode-undo').show();
                     node.addClass('jstree-removenode-removed');
                     nodeObj.data.remove = true;
@@ -31,6 +45,8 @@ $.jstree.plugins.removenode = function(options, parent) {
                     required.prop('required', false);
                 } else {
                     // Handle undo node removal.
+                    node.find('.jstree-anchor').children(':not(.jstree-removenode-undo)').show();
+                    node.find('.jstree-anchor').children('.jstree-removenode-toberemoved').hide();
                     icon.siblings('.jstree-removenode-remove').show();
                     node.removeClass('jstree-removenode-removed');
                     nodeObj.data.remove = false;
@@ -52,6 +68,7 @@ $.jstree.plugins.removenode = function(options, parent) {
             var undoIconClone = undoIcon.clone();
             anchor.append(removeIconClone);
             anchor.append(undoIconClone);
+            anchor.append(toBeRemovedSpan.clone());
 
             // Carry over the removed/not-removed state
             var data = this.get_node(node).data;
@@ -103,7 +120,11 @@ $.jstree.plugins.editlink = function(options, parent) {
     });
     var editIcon = $('<i>', {
         class: 'jstree-icon jstree-editlink-edit',
-        attr:{role:'presentation'},
+        attr:{
+            role:'presentation',
+            'title':Omeka.jsTranslate('Edit link'),
+            'aria-label':Omeka.jsTranslate('Edit link')
+        },
     });
     // Toggle edit link container.
     this.toggleLinkEdit = function(node) {
@@ -225,7 +246,11 @@ $.jstree.plugins.editlink = function(options, parent) {
 $.jstree.plugins.display = function(options, parent) {
     var displayIcon = $('<i>', {
         class: 'jstree-icon jstree-displaylink',
-        attr:{role: 'presentation'}
+        attr:{
+            role: 'presentation',
+            'title':Omeka.jsTranslate('View public page'),
+            'aria-label':Omeka.jsTranslate('View public page')
+        }
     });
     this.bind = function() {
         parent.bind.call(this);

diff --git a/application/asset/sass/jstree.scss b/application/asset/sass/jstree.scss
@@ -229,11 +229,19 @@ i.jstree-displaylink {
     background-color: #ffcccc;
 }
 
-.jstree-removenode-removed .jstree-children .jstree-removenode-remove,
-.jstree-removenode-removed .jstree-children .jstree-removenode-undo {
+.jstree-removenode-removed .jstree-icon:not(.jstree-removenode-undo), 
+.jstree-removenode-removed .jstree-children .jstree-icon {
     display: none;
 }
 
+.jstree-removenode-removed > .jstree-anchor .jstree-removenode-undo, {
+    right: $spacing-medium;
+}
+
+.jstree-removenode-toberemoved {
+    margin-left: .5 * $spacing-small;
+}
+
 .jstree-removenode-removed.jstree-open > .jstree-ocl,
 .jstree-removenode-removed.jstree-closed > .jstree-ocl {
     background-color: rgba(255, 0, 0, .24);