bullet_train-sortable 1.29.0 → 1.30.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a48b2bfe0723fca3a2138945fe8d73fea7764a87d42ce3f86212eadbe7e0f941
-  data.tar.gz: 8373c837042e1ebc571b4cfc8444a1dda5d780b66a347148db1aa351ffde26c9
+  metadata.gz: a042c5807b320f70fa014128ac0e84f4a3e6e3c58bb61d43a7c4a0ef8647bfec
+  data.tar.gz: a7389b72a4490bbd42d11e0ff56b44d1e40c621858a5c9f262fe066beb7b295c
 SHA512:
-  metadata.gz: 68bc7d96cb51d78ef4cf80c1e4fe1dd436651013314f0ca8f656f08eabdb039f28fd34cea494da414839ffe80ebcb508a5cd0c72c28ec5398526eb1a8a21e9d7
-  data.tar.gz: e84e48433cb29b9ccab377a1a27cccedf1205084385b0400c1217c60e2498554b2687339b8182dcfcf2ba39d4c19c2d59583ffa2433e79603f351598b8d998e6
+  metadata.gz: 01131f75504043564573448aa18d84cf7130d64964f754f7f4861ef6fd1d6f1baa635d3775a807ccf8e91bb1068ec875c8207d3ef78b12810e50574bb26f2849
+  data.tar.gz: e70c3d68ec7b2df0c237267eab2a917e13d4e0cd0b9f58ec019a6d5f27b5b747e2fdac73d6e8db4e49b9a2a9289cd9ae08be3f78c7a092f01efe186d5efd4fea

data/app/javascript/controllers/dragula-sortable_controller.js

@@ -0,0 +1,88 @@
+import { Controller } from "@hotwired/stimulus"
+import { post } from '@rails/request.js'
+import jquery from "jquery";
+require("dragula/dist/dragula.min.css")
+
+import dragula from 'dragula';
+
+export default class extends Controller {
+  static values = {
+    reorderPath: String,
+    saveOnReorder: { type: Boolean, default: true }
+  }
+
+  // will be reissued as native dom events name prepended with 'sortable:' e.g. 'sortable:drag', 'sortable:drop', etc
+  static pluginEventsToReissue = [ "drag", "dragend", "drop", "cancel", "remove", "shadow", "over", "out", "cloned" ]
+
+  initialize() {
+    if (window.jQuery === undefined) {
+      window.jQuery = jquery // required for select2 used for time zone select, but we also use global jQuery throughout below
+    }
+  }
+
+  connect() {
+    if (!this.hasReorderPathValue) { return }
+    this.initPluginInstance()
+  }
+
+  disconnect() {
+    this.teardownPluginInstance()
+  }
+
+  initPluginInstance() {
+    const self = this
+    this.plugin = dragula([this.element], {
+      moves: function(el, container, handle) {
+        var $handles = jQuery(el).find('.reorder-handle')
+        if ($handles.length) {
+          return !!jQuery(handle).closest('.reorder-handle').length
+        } else {
+          if (!jQuery(handle).closest('.undraggable').length) {
+            return self.element === container
+          } else {
+            return false
+          }
+        }
+      },
+      accepts: function (el, target, source, sibling) {
+        if (jQuery(sibling).hasClass('undraggable') && jQuery(sibling).prev().hasClass('undraggable')) {
+          return false
+        } else {
+          return true
+        }
+      },
+    }).on('drop', function (el) {
+      // save order here.
+      if (self.saveOnReorderValue) {
+        self.saveSortOrder()
+      }
+    }).on('over', function (el, container) {
+      // deselect any text fields, or else things go slow!
+      jQuery(document.activeElement).blur()
+    })
+
+    this.initReissuePluginEventsAsNativeEvents()
+  }
+
+  initReissuePluginEventsAsNativeEvents() {
+    this.constructor.pluginEventsToReissue.forEach((eventName) => {
+      this.plugin.on(eventName, (...args) => {
+        this.dispatch(eventName, { detail: { plugin: 'dragula', type: eventName, args: args }})
+      })
+    })
+  }
+
+  teardownPluginInstance() {
+    if (this.plugin === undefined) { return }
+
+    // revert to original markup, remove any event listeners
+    this.plugin.destroy()
+  }
+
+  saveSortOrder() {
+    var idsInOrder = Array.from(this.element.childNodes).map((el) => { return parseInt(el.dataset?.id) });
+
+    post(this.reorderPathValue, { body: JSON.stringify({ids_in_order: idsInOrder}) })
+  }
+
+}

data/app/javascript/controllers/index.js

@@ -15,4 +15,4 @@ export const controllerDefinitions = [
 
 export {
   SortableController
-}
+}

data/app/javascript/controllers/sortable_controller.js

@@ -1,88 +1,327 @@
 import { Controller } from "@hotwired/stimulus"
 import { post } from '@rails/request.js'
-import jquery from "jquery";
-require("dragula/dist/dragula.min.css")
-
-import dragula from 'dragula';
 
+// Connects to data-controller="sortable"
 export default class extends Controller {
   static values = {
     reorderPath: String,
     saveOnReorder: { type: Boolean, default: true }
   }
-  
-  // will be reissued as native dom events name prepended with 'sortable:' e.g. 'sortable:drag', 'sortable:drop', etc
-  static pluginEventsToReissue = [ "drag", "dragend", "drop", "cancel", "remove", "shadow", "over", "out", "cloned" ]
+  static classes = ["activeDropzone", "activeItem", "dropTarget"];
+  static targets = [ "handle"];
 
-  initialize() {
-    if (window.jQuery === undefined) {
-      window.jQuery = jquery // required for select2 used for time zone select, but we also use global jQuery throughout below
-    }
+  async saveSortOrder(idsInOrder) {
+    await post(this.reorderPathValue, { body: JSON.stringify({ids_in_order: idsInOrder}) })
   }
 
   connect() {
-    if (!this.hasReorderPathValue) { return }
-    this.initPluginInstance()
+    const saveOrderCallback = this.saveOnReorderValue ? this.saveSortOrder.bind(this) : null;
+    this.sortingPlugin = new SortableTable(
+      this.element,
+      saveOrderCallback,
+      this.handleTargets,
+      {
+        activeDropzoneClasses: this.activeDropzoneClasses,
+        activeItemClasses: this.activeItemClasses,
+        dropTargetClasses: this.dropTargetClasses
+      }
+    );
   }
 
   disconnect() {
-    this.teardownPluginInstance()
-  }
-
-  initPluginInstance() {
-    const self = this
-    this.plugin = dragula([this.element], {
-      moves: function(el, container, handle) {
-        var $handles = jQuery(el).find('.reorder-handle')
-        if ($handles.length) {
-          return !!jQuery(handle).closest('.reorder-handle').length
-        } else {
-          if (!jQuery(handle).closest('.undraggable').length) {
-            return self.element === container
-          } else {
-            return false
-          }
+    this.sortingPlugin.destroy();
+  }
+}
+
+function getDataNode(node) {
+  return node.closest("[data-id]");
+}
+
+function getHandleNode(node) {
+  return node.closest("[data-sortable-target='handle']");
+}
+
+function getMetaValue(name) {
+  const element = document.head.querySelector(`meta[name="${name}"]`);
+  return element.getAttribute("content");
+}
+
+class SortableTable{
+  // We'll emit events using this prefix. `sortable:drag` & `sortable:drop` for instance.
+  static eventPrefix = "sortable";
+  // These are defaults so that we don't have to require people to update their templates.
+  // If the template does contain values for any of these the template values will be used instead.
+  static defaultClasses = {
+    "activeDropzoneClasses": "border-dashed bg-gray-50 border-slate-400",
+    "activeItemClasses": "shadow bg-white bg-white *:bg-white opacity-100 *:opacity-100",
+    "dropTargetClasses": "shadow-inner shadow-gray-500 hover:shadow-inner bg-gray-100 *:opacity-0 *:bg-gray-100"
+  };
+
+  constructor(tbodyElement, saveSortOrder, handleTargets, styles, customEventPrefix){
+    this.element = tbodyElement;
+    this.saveSortOrder = saveSortOrder;
+    this.handleTargets = handleTargets;
+
+    this.activeDropzoneClassesWithDefaults = styles.activeDropzoneClasses.length == 0 ? this.constructor.defaultClasses["activeDropzoneClasses"].split(" ") : styles.activeDropzoneClasses;
+    this.activeItemClassesWithDefaults = styles.activeItemClasses.length == 0 ? this.constructor.defaultClasses["activeItemClasses"].split(" ") : styles.activeItemClasses;
+    this.dropTargetClassesWithDefaults = styles.dropTargetClasses.length == 0 ? this.constructor.defaultClasses["dropTargetClasses"].split(" ") : styles.dropTargetClasses;
+    this.eventPrefixWithDefaults = customEventPrefix ? customEventPrefix : this.constructor.eventPrefix;
+
+    this.element.addEventListener('dragstart', this.dragstart.bind(this));
+    this.element.addEventListener('dragover', this.dragover.bind(this));
+    this.element.addEventListener('dragenter', this.dragenter.bind(this));
+    this.element.addEventListener('dragleave', this.dragleave.bind(this));
+    this.element.addEventListener('dragend', this.dragend.bind(this));
+    this.element.addEventListener('drop', this.drop.bind(this));
+
+    if(this.handleTargets.length == 0){
+      this.addDragHandles();
+    }
+
+    this.element.addEventListener('mousedown', this.dragHandleMouseDown.bind(this));
+    this.element.addEventListener('mouseup', this.dragHandleMouseUp.bind(this));
+
+    // We set this when we've detected `mousedown` in a handle. Then all of the `drag*` handlers
+    // bail out if we don't have a draggable row. This prevents problems and weird behavior if you
+    // drag something other than the handle. Like highlighted text, or a link, for instance.
+    this.aRowIsDraggable = false;
+  }
+
+  destroy(){
+    this.element.removeEventListener('dragstart', this.dragstart.bind(this));
+    this.element.removeEventListener('dragover', this.dragover.bind(this));
+    this.element.removeEventListener('dragenter', this.dragenter.bind(this));
+    this.element.removeEventListener('dragleave', this.dragleave.bind(this));
+    this.element.removeEventListener('dragend', this.dragend.bind(this));
+    this.element.removeEventListener('drop', this.drop.bind(this));
+
+    this.element.removeEventListener('mousedown', this.dragHandleMouseDown.bind(this));
+    this.element.removeEventListener('mouseup', this.dragHandleMouseUp.bind(this));
+  }
+
+  dragHandleMouseDown(event){
+    const handle = getHandleNode(event.target);
+    if(!handle){
+      return;
+    }
+    const draggableItem = getDataNode(event.target);
+    if(draggableItem){
+      draggableItem.setAttribute('draggable', true);
+      this.aRowIsDraggable = true;
+    }
+  }
+
+  dragHandleMouseUp(event){
+    const handle = getHandleNode(event.target);
+    if(!handle){
+      return;
+    }
+    const draggableItem = getDataNode(event.target);
+    if(draggableItem){
+      draggableItem.setAttribute('draggable', false);
+      this.aRowIsDraggable = false;
+    }
+  }
+
+  dragstart(event) {
+    if(!this.aRowIsDraggable){
+      return;
+    }
+    this.element.classList.add(...this.activeDropzoneClassesWithDefaults);
+    const draggableItem = getDataNode(event.target);
+    draggableItem.classList.add(...this.activeItemClassesWithDefaults);
+    event.dataTransfer.setData(
+      "application/drag-key",
+      draggableItem.dataset.id
+    );
+    event.dataTransfer.effectAllowed = "move";
+    // For most browsers we could rely on the dataTransfer.setData call above,
+    // but Safari doesn't seem to allow us access to that data at any time other
+    // than during a drop. But we need it during dragenter to reorder the list
+    // as the drag happens. So, we just stash the value here and then use it later.
+    this.draggingDataId = draggableItem.dataset.id;
+
+    this.dispatch('start', { detail: { type: 'start', args: [draggableItem, this.element] }})
+    // We're dispatching drag here in addition to start to retain backwards compatibility with dragula.js.
+    // It emits a single 'drag' event when an item is first dragged, but not on each movement thereafter.
+    this.dispatch('drag', { detail: { type: 'drag', args: [draggableItem, this.element] }})
+  }
+
+  dragover(event) {
+    if(!this.aRowIsDraggable){
+      return;
+    }
+    event.preventDefault();
+    return true;
+  }
+
+  dragenter(event) {
+    if(!this.aRowIsDraggable){
+      return;
+    }
+    let parent = getDataNode(event.target);
+
+    // We keep a count of the `dragenter` events for the row being dragged to fix jank. When dragging between cells
+    // (or cell content) within a row a dragenter event is fired before the dragleave event from the previous cell.
+    // If we removed the activeItemClasses when the dragleave happens then the UI doesn't match expectations.
+    if(parent.dataset.dragEnterCount){
+      parent.dataset.dragEnterCount = parseInt(parent.dataset.dragEnterCount) + 1;
+    }else{
+      parent.dataset.dragEnterCount = 1;
+    }
+
+    if (parent != null && parent.dataset.id != null) {
+      parent.classList.add(...this.dropTargetClassesWithDefaults);
+      var data = this.draggingDataId;
+      const draggedItem = this.element.querySelector(
+        `[data-id='${data}']`
+      );
+
+      if (draggedItem) {
+        draggedItem.classList.remove(...this.activeItemClassesWithDefaults);
+
+        let dispatchEvent = false;
+
+        if (parent.compareDocumentPosition(draggedItem) & Node.DOCUMENT_POSITION_FOLLOWING) {
+          let result = parent.insertAdjacentElement( "beforebegin", draggedItem);
+          dispatchEvent = true;
+        } else if (parent.compareDocumentPosition(draggedItem) & Node.DOCUMENT_POSITION_PRECEDING) {
+          let result = parent.insertAdjacentElement("afterend", draggedItem);
+          dispatchEvent = true;
         }
-      },
-      accepts: function (el, target, source, sibling) {
-        if (jQuery(sibling).hasClass('undraggable') && jQuery(sibling).prev().hasClass('undraggable')) {
-          return false
-        } else {
-          return true
+
+        if(dispatchEvent){
+          this.dispatch('reordered', { detail: { type: 'shadow', args: [draggedItem, this.element, this.element] }});
+          // We're dispatching 'shadow' here to retain backwards compatibility with dragula.js.
+          // It emits a 'shadow' event when the items in the list are rearranged mid-drag.
+          // TODO: This is firing more often than dragula fires it. Is that a problem?
+          this.dispatch('shadow', { detail: { type: 'shadow', args: [draggedItem, this.element, this.element] }});
         }
-      },
-    }).on('drop', function (el) {
-      // save order here.
-      if (self.saveOnReorderValue) {
-        self.saveSortOrder()
+
       }
-    }).on('over', function (el, container) {
-      // deselect any text fields, or else things go slow!
-      jQuery(document.activeElement).blur()
-    })
-    
-    this.initReissuePluginEventsAsNativeEvents()
+      event.preventDefault();
+    }
   }
-  
-  initReissuePluginEventsAsNativeEvents() {
-    this.constructor.pluginEventsToReissue.forEach((eventName) => {
-      this.plugin.on(eventName, (...args) => {
-        this.dispatch(eventName, { detail: { plugin: 'dragula', type: eventName, args: args }})
-      })
-    })
+
+  dragleave(event) {
+    if(!this.aRowIsDraggable){
+      return;
+    }
+    let parent = getDataNode(event.target);
+
+    if(parent.dataset.dragEnterCount > 0){
+      parent.dataset.dragEnterCount = parseInt(parent.dataset.dragEnterCount) - 1;
+    }
+
+    if (parent != null && parent.dataset.id != null && parent.dataset.dragEnterCount == 0) {
+      parent.classList.remove(...this.dropTargetClassesWithDefaults);
+      event.preventDefault();
+    }
   }
 
-  teardownPluginInstance() {
-    if (this.plugin === undefined) { return }
+  async drop(event) {
+    if(!this.aRowIsDraggable){
+      return;
+    }
+    this.element.classList.remove(...this.activeDropzoneClassesWithDefaults);
+
+    const dropTarget = getDataNode(event.target);
+    dropTarget.classList.remove(...this.dropTargetClassesWithDefaults);
 
-    // revert to original markup, remove any event listeners
-    this.plugin.destroy()
+    var data = this.draggingDataId;
+    const draggedItem = this.element.querySelector(
+      `[data-id='${data}']`
+    );
+
+    if (draggedItem) {
+      draggedItem.classList.remove(...this.activeItemClassesWithDefaults);
+
+      if (
+        dropTarget.compareDocumentPosition(draggedItem) &
+        Node.DOCUMENT_POSITION_FOLLOWING
+      ) {
+        let result = dropTarget.insertAdjacentElement(
+          "beforebegin",
+          draggedItem
+        );
+      } else if (
+        dropTarget.compareDocumentPosition(draggedItem) &
+        Node.DOCUMENT_POSITION_PRECEDING
+      ) {
+        let result = dropTarget.insertAdjacentElement("afterend", draggedItem);
+      }
+
+      if (this.saveSortOrder) {
+        var idsInOrder = Array.from(this.element.childNodes).map((el) => { return el.dataset?.id ? parseInt(el.dataset?.id) : null });
+        idsInOrder = idsInOrder.filter(element => element !== null);
+        await this.saveSortOrder(idsInOrder);
+        this.dispatch('saved', { detail: { type: 'saved', args: [this.element] }})
+      }
+
+      // TODO: This fires more often than dragula fires it. Dragula does not fire this when an item was dragged but not moved/reorded.
+      // Instead dragula fires a `cancel` event. But we're firing a `drop` and no `cancel` in that situation.
+      this.dispatch('drop', { detail: { type: 'drop', args: [draggedItem, this.element, this.element, draggedItem.nextElementSibling] }})
+    }
+    event.preventDefault();
+  }
+
+  dragend(event) {
+    if(!this.aRowIsDraggable){
+      return;
+    }
+    this.element.classList.remove(...this.activeDropzoneClassesWithDefaults);
+
+    const draggableItem = getDataNode(event.target);
+    draggableItem.setAttribute('draggable', false);
+    draggableItem.dataset.dragEnterCount = 0;
+
+    this.dispatch('end', { detail: { type: 'end', args: [draggableItem, this.element] }})
+    // We emit dragend here as well to maintain some backwards compatiblity with the old dragula controller.
+    this.dispatch('dragend', { detail: { type: 'dragend', args: [draggableItem, this.element] }})
+  }
+
+  addDragHandles(){
+    // Here we assume that this controller is connected to a tbody element
+    const table = this.element.parentNode;
+    const thead = table.querySelector('thead');
+    const headRow = thead.querySelector('tr');
+    const newTh = document.createElement('th');
+    newTh.classList.add(...'w-6'.split(' '))
+    headRow.prepend(newTh);
+
+    const draggables = this.element.querySelectorAll('tr');
+    for (const draggable of draggables) {
+      const newCell = document.createElement('td');
+      newCell.dataset.sortableTarget = 'handle';
+      newCell.classList.add(...'cursor-grab active:cursor-grabbing'.split(' '));
+
+      const icon = document.createElement('i');
+      icon.classList.add(...'ti ti-menu opacity-25 group-hover:opacity-100'.split(' '));
+
+      newCell.append(icon);
+      draggable.prepend(newCell);
+      this.handleTargets.push(newCell);
+    }
+  }
+
+  dispatch(eventName,data){
+    const fullEventName = this.eventPrefixWithDefaults + ":" + eventName;
+    const event = new CustomEvent(fullEventName, data);
+    this.element.dispatchEvent(event);
   }
-  
-  saveSortOrder() {
-    var idsInOrder = Array.from(this.element.childNodes).map((el) => { return parseInt(el.dataset?.id) });
-    
-    post(this.reorderPathValue, { body: JSON.stringify({ids_in_order: idsInOrder}) })
+
+  // TODO: I'm not sure this is adequate. I think we may need to "manually" dispatch these from within the
+  // approriate event handles so that we can add more info to `args`. For instance, the "drop" event may
+  // need to include the sibling that the dropped element was dropped in front of. Related, do people actually
+  // use these re-issued events?
+  /*
+  initReissuePluginEventsAsNativeEvents() {
+    this.constructor.pluginEventsToReissue.forEach((eventName) => {
+      this.element.addEventListener(eventName, (...args) => {
+        this.dispatch(eventName, { detail: { type: eventName, args: args }})
+      })
+    })
   }
+  */
 
-}
+}

data/lib/bullet_train/sortable/version.rb

@@ -1,5 +1,5 @@
 module BulletTrain
   module Sortable
-    VERSION = "1.29.0"
+    VERSION = "1.30.0"
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: bullet_train-sortable
 version: !ruby/object:Gem::Version
-  version: 1.29.0
+  version: 1.30.0
 platform: ruby
 authors:
 - Andrew Culver
@@ -62,6 +62,7 @@ files:
 - README.md
 - Rakefile
 - app/controllers/concerns/sortable_actions.rb
+- app/javascript/controllers/dragula-sortable_controller.js
 - app/javascript/controllers/index.js
 - app/javascript/controllers/sortable_controller.js
 - app/javascript/index.js