Correctly sets tabindex to 0 on move up / down buttons that are inactive....

Correctly sets tabindex to 0 on move up / down buttons that are inactive. Includes a number of other related javascript optimizations.

Closes #3423427

js/builder.es6.js

@@ -17,7 +17,6 @@
       const { element, method } = uiElement;
       $container[method]($(element).addClass('js-lpb-ui'));
     });
-    Drupal.attachBehaviors($container[0], drupalSettings);
   }
 
   /**
@@ -106,12 +105,20 @@
    * @param {jQuery} $element The builder element.
    */
   function updateMoveButtons($element) {
-    $element.find('.lpb-up, .lpb-down').attr('tabindex', '0');
-    $element
-      .find(
-        '.js-lpb-component:first-of-type .lpb-up, .js-lpb-component:last-of-type .lpb-down',
-      )
-      .attr('tabindex', '-1');
+    [...$element[0].querySelectorAll('.lpb-up, .lpb-down')].forEach((el) => {
+      el.setAttribute('tabindex', '0');
+    });
+    [...$element[0].querySelectorAll('.js-lpb-component-list:has(.js-lpb-component), .js-lpb-region:has(.js-lpb-component)')].forEach((el) => {
+      const components = [...el.childNodes].filter(n => n.classList && n.classList.contains('js-lpb-component'));
+      const upBtn = components[0].querySelector('.lpb-up');
+      if (upBtn) {
+        upBtn.setAttribute('tabindex', '-1');
+      }
+      const downBtn = components[components.length - 1].querySelector('.lpb-down');
+      if (downBtn) {
+        downBtn.setAttribute('tabindex', '-1');
+      }
+    });
   }
 
   /**
@@ -150,38 +157,53 @@
       direction === 1
         ? $moveItem.nextAll('.js-lpb-component').first()
         : $moveItem.prevAll('.js-lpb-component').first();
+
     const method = direction === 1 ? 'after' : 'before';
     const { scrollY } = window;
     const destScroll = scrollY + $sibling.outerHeight() * direction;
-    const distance = Math.abs(destScroll - scrollY);
 
     if ($sibling.length === 0) {
       return false;
     }
 
-    $({ translateY: 0 }).animate(
-      { translateY: 100 * direction },
-      {
-        duration: Math.max(100, Math.min(distance, 500)),
-        easing: 'swing',
-        step() {
-          const a = $sibling.outerHeight() * (this.translateY / 100);
-          const b = -$moveItem.outerHeight() * (this.translateY / 100);
-          $moveItem.css({ transform: `translateY(${a}px)` });
-          $sibling.css({ transform: `translateY(${b}px)` });
-        },
-        complete() {
-          $moveItem.css({ transform: 'none' });
-          $sibling.css({ transform: 'none' });
-          $sibling[method]($moveItem);
-          $moveItem
-            .closest(`[${idAttr}]`)
-            .trigger('lpb-component:move', [$moveItem.attr('data-uuid')]);
-        },
-      },
-    );
-    if (distance > 50) {
-      $('html, body').animate({ scrollTop: destScroll });
+    // Determine if the move should be animated horizontally or vertically.
+    const animateProp = $sibling[0].getBoundingClientRect().top == $moveItem[0].getBoundingClientRect().top
+      ? 'translateX'
+      : 'translateY';
+    // Determine the dimension property to use for the animation.
+    const dimmensionProp = animateProp === 'translateX' ? 'offsetWidth' : 'offsetHeight';
+    // Determine the distance to move the sibling and the item.
+    const siblingDest = $moveItem[0][dimmensionProp] * direction * -1;
+    const itemDest = $sibling[0][dimmensionProp] * direction;
+    const distance = Math.abs(Math.max(siblingDest, itemDest));
+    const duration  = distance * .25;
+    const siblingKeyframes = [
+      { transform: `${animateProp}(0)` },
+      { transform: `${animateProp}(${siblingDest}px)` },
+    ];
+    const itemKeyframes = [
+      { transform: `${animateProp}(0)` },
+      { transform: `${animateProp}(${itemDest}px)` },
+    ];
+    const timing = {
+      duration,
+      iterations: 1
+    }
+    const anim1 = $moveItem[0].animate(itemKeyframes, timing);
+    anim1.onfinish = () => {
+      $moveItem.css({ transform: 'none' });
+      $sibling.css({ transform: 'none' });
+      $sibling[method]($moveItem);
+      $moveItem
+        .closest(`[${idAttr}]`)
+        .trigger('lpb-component:move', [$moveItem.attr('data-uuid')]);
+    };
+    $sibling[0].animate(siblingKeyframes, timing);
+    if (animateProp === 'translateY') {
+      window.scrollTo({
+        top: destScroll,
+        behavior: 'smooth',
+      });
     }
   }
 
@@ -361,11 +383,9 @@
   }
 
   function initDragAndDrop($element, settings) {
+    const containers = once('is-dragula-enabled', '.js-lpb-component-list, .js-lpb-region', $element[0]);
     const drake = dragula(
-      $element
-        .find('.js-lpb-component-list, .js-lpb-region')
-        .not('.is-dragula-enabled')
-        .get(),
+      containers,
       {
         accepts: (el, target, source, sibling) =>
           moveErrors(settings, el, target, source, sibling).length === 0,
@@ -501,42 +521,43 @@
   Drupal.behaviors.layoutParagraphsBuilder = {
     attach: function attach(context, settings) {
       // Add UI elements to the builder, each component, and each region.
-      $(once('lpb-ui-elements', '[data-has-js-ui-element]')).each((i, el) => {
+      const jsUiElements = once('lpb-ui-elements', '[data-has-js-ui-element]');
+      jsUiElements.forEach((el) => {
         attachUiElements($(el), settings);
       });
+
       // Listen to relevant events and update UI.
-      const events = [
-        'lpb-builder:init.lpb',
-        'lpb-component:insert.lpb',
-        'lpb-component:update.lpb',
-        'lpb-component:move.lpb',
-        'lpb-component:drop.lpb',
-        'lpb-component:delete.lpb',
-      ].join(' ');
-      $(once('lpb-events', '[data-lpb-id]')).on(events, (e) => {
-        const $element = $(e.currentTarget);
-        updateUi($element);
+      once('lpb-events', '[data-lpb-id]').forEach((el) => {
+        $(el).on('lpb-builder:init.lpb lpb-component:insert.lpb lpb-component:update.lpb lpb-component:move.lpb lpb-component:drop.lpb lpb-component:delete.lpb', (e) => {
+          const $element = $(e.currentTarget);
+          updateUi($element);
+        });
       });
+
       // Initialize the editor drag and drop ui.
-      $(`.has-components[${idAttr}]`).each((index, element) => {
-        const $element = $(once('lpb-enabled', element));
+      once('lpb-enabled', '[data-lpb-id].has-components').forEach((el) => {
+        const $element = $(el);
         const id = $element.attr(idAttr);
         const lpbSettings = settings.lpBuilder[id];
         // Attach event listeners and init dragula just once.
-        $element.each(() => {
-          $element.data('drake', initDragAndDrop($element, lpbSettings));
-          attachEventListeners($element, lpbSettings);
-          $element.trigger('lpb-builder:init');
-        });
-        // Add new containers to the dragula instance.
-        $('.js-lpb-region:not(.is-dragula-enabled)', element)
-          .addClass('is-dragula-enabled')
-          .get()
-          .forEach((c) => {
-            const drake = $(element).data('drake');
-            drake.containers.push(c);
-          });
+        $element.data('drake', initDragAndDrop($element, lpbSettings));
+        attachEventListeners($element, lpbSettings);
+        $element.trigger('lpb-builder:init');
       });
+
+      // Add new containers to the dragula instance.
+      once('is-dragula-enabled', '.js-lpb-region').forEach((c) => {
+        const builderElement = c.closest('[data-lpb-id]');
+        const drake = $(builderElement).data('drake');
+        drake.containers.push(c);
+      });
+
+      // If UI elements have been attached to the DOM, we need to attach behaviors.
+      if (jsUiElements.length) {
+        Drupal.attachBehaviors(context, settings);
+      }
+
+      // Moves dialog buttons into the jQuery modal button pane.
       updateDialogButtons(context);
     },
   };

[Justin Toupin]

This was previously running every time a UI element was attached to the dom (i.e. for each Layout Paragraphs "add component" button, controls UI, etc.) causing behaviors to be rerun dozens of times on a single page.

[Justin Toupin]

Uses vanilla JS and targets the first and last components in any list of components in a builder instance.

[Justin Toupin]

Moved to native JS animation API for smoother animation effects.

[Justin Toupin]

We can't narrow this to context because if the context IS a [data-has-js-ui-element], it won't be returned.

[Justin Toupin]

Use once instead of checking for a class.