[JENKINS-64291] Fix drag & drop issues replacing the drag & drop libr…

…ary (#5177) Co-authored-by: Gavin Mogan <[email protected]>
jenkinsci · Jan 22, 2021 · fa1fa7e · fa1fa7e
1 parent 982a0c7
commit fa1fa7e
Show file tree

Hide file tree

Showing 12 changed files with 77 additions and 170 deletions.
diff --git a/core/src/main/resources/lib/form/dragdrop/dragdrop.js b/core/src/main/resources/lib/form/dragdrop/dragdrop.js
diff --git a/core/src/main/resources/lib/form/hetero-list/hetero-list.js b/core/src/main/resources/lib/form/hetero-list/hetero-list.js
@@ -1,5 +1,3 @@
-// @include lib.form.dragdrop.dragdrop
-
 // do the ones that extract innerHTML so that they can get their original HTML before
 // other behavior rules change them (like YUI buttons.)
 Behaviour.specify("DIV.hetero-list-container", 'hetero-list', -100, function(e) {
@@ -37,7 +35,8 @@ Behaviour.specify("DIV.hetero-list-container", 'hetero-list', -100, function(e)
         });
         Element.remove(prototypes);
 
-        var withDragDrop = initContainerDD(e);
+        // Initialize drag & drop for this component
+        var withDragDrop = registerSortableDragDrop(e);
 
         var menuAlign = (btn.getAttribute("menualign")||"tl-bl");
 
@@ -106,7 +105,8 @@ Behaviour.specify("DIV.hetero-list-container", 'hetero-list', -100, function(e)
                 }
                 (e.hasClassName("honor-order") ? findInsertionPoint() : insertionPoint).insert({before:nc});
 
-                if(withDragDrop)    prepareDD(nc);
+                // Initialize drag & drop for this component
+                if(withDragDrop) registerSortableDragDrop(nc);
 
                 new YAHOO.util.Anim(nc, {
                     opacity: { to:1 }

diff --git a/core/src/main/resources/lib/form/repeatable/repeatable.js b/core/src/main/resources/lib/form/repeatable/repeatable.js
@@ -1,5 +1,3 @@
-// @include lib.form.dragdrop.dragdrop
-
 var repeatableSupport = {
     // set by the inherited instance to the insertion point DIV
     insertionPoint: null,
@@ -33,7 +31,8 @@ var repeatableSupport = {
             this.enableTopButton = false;
         }
         this.update();
-        this.withDragDrop = initContainerDD(container);
+        // Initialize drag & drop for this component
+        this.withDragDrop = registerSortableDragDrop(container);
     },
 
     // insert one more block at the insertion position
@@ -57,7 +56,8 @@ var repeatableSupport = {
             });
             this.container.insertBefore(nc, children[0]);
         }
-        if (this.withDragDrop) prepareDD(nc);
+        // Initialize drag & drop for this element
+        if (this.withDragDrop) registerSortableDragDrop(nc);
 
         new YAHOO.util.Anim(nc, {
             opacity: { to:1 }

diff --git a/core/src/main/resources/lib/layout/layout.jelly b/core/src/main/resources/lib/layout/layout.jelly
@@ -182,7 +182,8 @@ THE SOFTWARE.
     <!-- The vendors bundle is generated by webpack. It contains vendor scripts common to all JS modules -->
     <script src="${resURL}/jsbundles/vendors.js" type="text/javascript"/>
     <script src="${resURL}/jsbundles/page-init.js" type="text/javascript"/>
-
+    <!-- Sortable library used in drag & drop -->
+    <script src="${resURL}/jsbundles/sortable-drag-drop.js" type="text/javascript"/>
   </head>
   <body id="jenkins" class="yui-skin-sam ${layoutType} jenkins-${h.version}" data-version="${h.version}" data-model-type="${it.class.name}">
 

diff --git a/war/package.json b/war/package.json
@@ -57,6 +57,7 @@
     "jquery": "3.5.1",
     "lodash": "^4.17.20",
     "raf": "^3.4.1",
+    "sortablejs": "^1.13.0",
     "window-handle": "^1.0.0"
   },
   "browserslist": [

diff --git a/war/src/main/js/sortable-drag-drop.js b/war/src/main/js/sortable-drag-drop.js
@@ -0,0 +1,33 @@
+/**
+ * This module provides drag & drop functionality used by certain components,
+ * such as f:repeatable or f:hetero-list.
+ *
+ * It does so using the SortableJS library.
+ *
+ * NOTE: there is another Sortable class exposed to the window namespace, this
+ * corresponds to the sortable.js file that deals with table sorting.
+ */
+
+import Sortable, { AutoScroll } from 'sortablejs/modular/sortable.core.esm.js';
+
+Sortable.mount(new AutoScroll());
+
+function registerSortableDragDrop(e) {
+  if (!e || !e.classList.contains('with-drag-drop')) return false;
+
+  const sortableElement = new Sortable(e, {
+      draggable: '.repeated-chunk',
+      handle: '.dd-handle',
+      ghostClass: 'repeated-chunk--sortable-ghost',
+      chosenClass: 'repeated-chunk--sortable-chosen',
+      forceFallback: true, // Do not use html5 drag & drop behaviour because it does not work with autoscroll
+      scroll: true,
+      bubbleScroll: true,
+  });
+}
+
+/*
+ * Expose the function to register drag & drop components to the window objects
+ * so that other widgets can use it (repeatable, hetero-list)
+ */
+window.registerSortableDragDrop = registerSortableDragDrop;
diff --git a/war/src/main/js/util/page.js b/war/src/main/js/util/page.js
@@ -52,26 +52,6 @@ function fireBottomStickerAdjustEvent() {
     Event.fire(window, 'jenkins:bottom-sticker-adjust'); // jshint ignore:line
 }
 
-// YUI Drag widget does not like to work on elements with a relative position.
-// This tells the element to switch to static position at the start of the drag, so it can work.
-function fixDragEvent(handle) {
-    var isReady = false;
-    var $handle = $(handle);
-    var $chunk = $handle.closest('.repeated-chunk');
-    $handle.add('#ygddfdiv')
-	.mousedown(function(){
-		isReady = true;
-	})
-	.mousemove(function(){
-		if(isReady && !$chunk.hasClass('dragging')){
-		$chunk.addClass('dragging');
-		}
-	}).mouseup(function(){
-		isReady = false;
-		$chunk.removeClass('dragging');
-	});
-}
-
 function removeTextHighlighting(selector) {
     $('span.highlight-split', selector).each(function() {
         var highlightSplit = $(this);
@@ -91,6 +71,5 @@ export default {
     pageHeaderHeight,
     breadcrumbBarHeight,
     fireBottomStickerAdjustEvent,
-    fixDragEvent,
     removeTextHighlighting
 }
diff --git a/war/src/main/js/widgets/config/tabbar.js b/war/src/main/js/widgets/config/tabbar.js
@@ -2,24 +2,8 @@ import $ from 'jquery';
 import { getWindow } from 'window-handle';
 import page from '../../util/page';
 import tableMetadata from './model/ConfigTableMetaData';
-import behaviorShim from '../../util/behavior-shim';
 import jenkinsLocalStorage from '../../util/jenkinsLocalStorage';
 
-/**
- * Extracting this call from outside of the addPageTabs due to a regression
- * in 2.216/2.217 (see JENKINS-61429)
- *
- * The proxied call to Behaviour.specify needs to be called from outside of the
- * addPageTabs function. Otherwise, it will not apply to existing draggable
- * elements on the form. It would only only apply to new elements.
- *
- * Extracting this Behaviour.specify call to the module level causes it to be executed
- * on script load, and this seems to set up the event listeners properly.
- */
-behaviorShim.specify(".dd-handle", 'config-drag-start', 1000, function(el) {
-    page.fixDragEvent(el);
-});
-
 export var tabBarShowPreferenceKey = 'config:usetabs';
 
 export var addPageTabs = function(configSelector, onEachConfigTable, options) {
@@ -33,8 +17,6 @@ export var addPageTabs = function(configSelector, onEachConfigTable, options) {
             if (configTables.length > 0) {
                 var tabBarShowPreference = jenkinsLocalStorage.getGlobalItem(tabBarShowPreferenceKey, "yes");
 
-                page.fixDragEvent(configTables);
-
                 if (tabBarShowPreference === "yes") {
                     configTables.each(function() {
                         var configTable = $(this);

diff --git a/war/src/main/js/widgets/config/tabbar.less b/war/src/main/js/widgets/config/tabbar.less
@@ -16,7 +16,7 @@
   nav:before, nav:after {
     display: none;
   }
-  
+
   :hover .noTabs{
     color:#bbb;
   }
@@ -25,15 +25,15 @@
     opacity: 0.8;
     background:#bbb;
     color:var(--light-bg-color);
-    text-shadow:none    
+     text-shadow:none;
   }
 
   @find-container-width: 200px;
   .find-container {
     margin:0;
     display:none;
   }
-  
+
   .showTabs,
   .noTabs {
     position: absolute;
@@ -172,14 +172,14 @@
       }
 
       .bottom-sticker,
-      #bottom-sticker{ 
+      #bottom-sticker{
         width: auto;
         margin-left: -10px;
         overflow: hidden;
         padding-bottom: 10px;
         margin: 30px 30px -25px -15px;
         z-index:9;
-        
+
         .cover{
           position:absolute;
           top:0;
@@ -224,15 +224,17 @@
         z-index: 2
       }
 
-      .repeated-chunk.dragging {
-        position: static;
-      }
-
       .repeated-chunk {
         border: 1px solid var(--shade);
         margin: 2px;
         position: relative;
       }
+      // Styling for drag & drop items
+      .repeated-chunk.repeated-chunk--sortable-ghost,
+      .repeated-chunk.repeated-chunk--sortable-chosen {
+        border-width: 2px;
+        border-color: var(--line-blue);
+      }
 
       .repeatable-delete {
         position: absolute;
@@ -297,12 +299,6 @@
   }
 }
 
-#ygddfdiv {
-  background:var(--light-bg-color);
-  border:1px solid var(--line-blue) !important;
-  opacity:.5;
-}
-
 .yui-skin-sam .yuimenu {
   z-index: 9999 !important
 }

diff --git a/war/src/main/less/base/style.less b/war/src/main/less/base/style.less
@@ -1301,6 +1301,22 @@ textarea.rich-editor {
   margin-left: -1.25rem;
 }
 
+// SortableJS drag & drop classes
+.repeated-chunk--sortable-ghost {
+  height: 100px;
+  width: 100%;
+  overflow: hidden;
+}
+.repeated-chunk--sortable-chosen {
+  height: 100px;
+  width: 100%;
+  background-color: transparent;
+  border: 2px solid var(--primary);
+
+  & > * {
+    display: none;
+  }
+}
 
 /* ========================= plugin update center ========================= */
 

diff --git a/war/webpack.config.js b/war/webpack.config.js
@@ -31,6 +31,7 @@ module.exports = (env, argv) => ({
       path.join(__dirname, "src/main/js/config-tabbar.js"),
       path.join(__dirname, "src/main/js/config-tabbar.less"),
     ],
+    "sortable-drag-drop": [path.join(__dirname, "src/main/js/sortable-drag-drop.js")],
 
     // New UI CSS files
     "base-styles-v2": [path.join(__dirname, "src/main/less/base-styles-v2.less")],