Keyboard movements now seem porformant / stable. Needs a little more testing.

js/layout-paragraphs-widget.js

@@ -428,7 +428,7 @@
    * @param {Array} item The current item.
    * @return {Object} The massaged results.
    */
-  function massagePositionsDown(results, item) {
+  function massagePositions(results, item) {
     const level = $(item).parents(".layout-paragraphs-layout").length;
     if (level < results.level) {
       results.positions.push(results.layouts.pop());
@@ -444,6 +444,11 @@
     results.level = level;
     return results;
   }
+  /**
+   * Return the direction to move based on what key was pressed.
+   * @param {String} keycode The keycode that was pressed.
+   * @return {String} Returns the move direction: up, down, or stop.
+   */
   function getMoveDirection(keycode) {
     switch (keycode) {
       case 37:
@@ -456,6 +461,11 @@
         return "stop";
     }
   }
+  /**
+   * Stops keyboard movement, unbinds the move event and restores UI to main state.
+   * @param {jQuery} $widget The widget object.
+   * @param {function} func The event handler to unbind.
+   */
   function stopMove($widget, func) {
     $(document).unbind("keydown", func);
     $widget
@@ -465,11 +475,16 @@
     $widget.find(".layout-controls, .layout-paragraphs-actions").show();
     updateWidget($widget);
   }
+  /**
+   * Event handler for keyboard movement.
+   * @param {Event} e The keydown event.
+   * @return {Boolean} Returns false to prevent further event propogation.
+   */
   function move(e) {
     const { $moveItem, $widget, widgetSettings } = e.data;
     const spacer =
-      '<div class="layout-paragraphs-item layout-paragraphs-temp js-hide"></div>';
-    $widget.find(".layout-paragraphs-temp").remove();
+      '<div class="layout-paragraphs-item js-layout-paragraphs-temp js-hide"></div>';
+    $widget.find(".js-layout-paragraphs-temp").remove();
     $widget.find(".layout-paragraphs-moving-message").remove();
     const dir = getMoveDirection(e.keyCode);
     if (dir === "stop") {
@@ -488,10 +503,11 @@
     const positions = $(".layout-paragraphs-item", $widget)
       .toArray()
       .filter(i => !$.contains($moveItem[0], i));
-    // If moving down, the positions need to be massaged to adjust the position of layouts.
-    const filteredPositions =
+    // If moving down, the positions need to be reordered
+    // to adjust the position of layouts.
+    const reorderedPositions =
       dir === "down"
-        ? positions.reduce(massagePositionsDown, {
+        ? positions.reduce(massagePositions, {
             positions: [],
             layouts: [],
             level: 0,
@@ -499,16 +515,16 @@
           }).positions
         : positions;
     // Get the position (index) of the current item we are moving.
-    const pos = filteredPositions.findIndex(el => el === $moveItem[0]);
+    const pos = reorderedPositions.findIndex(el => el === $moveItem[0]);
     // Loop through all possible positons, attempting to move to the next in line.
     // If a move if not valid, we continue looping until we reach a valid move.
     // Usually this results in simply bumping one position forward/backward.
     for (
       let i = pos + (dir === "up" ? -1 : 1);
-      filteredPositions[i] !== undefined;
+      reorderedPositions[i] !== undefined;
       i += dir === "up" ? -1 : 1
     ) {
-      const $next = $(filteredPositions[i]);
+      const $next = $(reorderedPositions[i]);
       const method = dir === "up" ? "before" : "after";
       let valid = true;
       // Check for compliance with widget settings.
@@ -540,6 +556,11 @@
       }
     }
   }
+  /**
+   * Event handler for starting keyboard movement.
+   * @param {Event} e The button press event.
+   * @return {Boolean} Returns false to prevent further event propogation. 
+   */
   function startMove(e) {
     const $moveItem = $(e.currentTarget).closest(".layout-paragraphs-item");
     const $widget = $moveItem.closest(".layout-paragraphs-field");