[Summary view] [Print] [Text view]

   1  (function () {
   2    'use strict';
   3  
   4    /**
   5     * @copyright  (C) 2019 Open Source Matters, Inc. <https://www.joomla.org>
   6     * @license    GNU General Public License version 2 or later; see LICENSE.txt
   7     */
   8    // The container where the draggable will be enabled
   9    var url;
  10    var direction;
  11    var isNested;
  12    var dragElementIndex;
  13    var dropElementIndex;
  14    var container = document.querySelector('.js-draggable');
  15    var form;
  16    var formData;
  17  
  18    if (container) {
  19      /** The script expects a form with a class js-form
  20       *  A table with the tbody with a class js-draggable
  21       *                         with a data-url with the ajax request end point and
  22       *                         with a data-direction for asc/desc
  23       */
  24      url = container.dataset.url;
  25      direction = container.dataset.direction;
  26      isNested = container.dataset.nested;
  27    } else if (Joomla.getOptions('draggable-list')) {
  28      var options = Joomla.getOptions('draggable-list');
  29      container = document.querySelector(options.id);
  30      /**
  31       * This is here to make the transition to new forms easier.
  32       */
  33  
  34      if (!container.classList.contains('js-draggable')) {
  35        container.classList.add('js-draggable');
  36      }
  37  
  38      url = options.url;
  39      direction = options.direction;
  40      isNested = options.nested;
  41    }
  42  
  43    if (container) {
  44      // Get the form
  45      form = container.closest('form'); // Get the form data
  46  
  47      formData = new FormData(form);
  48      formData.delete('task');
  49      formData.delete('order[]'); // IOS 10 BUG
  50  
  51      document.addEventListener('touchstart', function () {}, false);
  52  
  53      var getOrderData = function getOrderData(rows, inputRows, dragIndex, dropIndex) {
  54        var i;
  55        var result = []; // Element is moved down
  56  
  57        if (dragIndex < dropIndex) {
  58          rows[dropIndex].setAttribute('value', rows[dropIndex - 1].value);
  59  
  60          for (i = dragIndex; i < dropIndex; i += 1) {
  61            if (direction === 'asc') {
  62              rows[i].setAttribute('value', parseInt(rows[i].value, 10) - 1);
  63            } else {
  64              rows[i].setAttribute('value', parseInt(rows[i].value, 10) + 1);
  65            }
  66          }
  67        } else {
  68          // Element is moved up
  69          rows[dropIndex].setAttribute('value', rows[dropIndex + 1].value);
  70          rows[dropIndex].value = rows[dropIndex + 1].value;
  71  
  72          for (i = dropIndex + 1; i <= dragIndex; i += 1) {
  73            if (direction === 'asc') {
  74              rows[i].value = parseInt(rows[i].value, 10) + 1;
  75            } else {
  76              rows[i].value = parseInt(rows[i].value, 10) - 1;
  77            }
  78          }
  79        }
  80  
  81        for (i = 0; i < rows.length - 1; i += 1) {
  82          result.push("order[]=" + encodeURIComponent(rows[i].value));
  83          result.push("cid[]=" + encodeURIComponent(inputRows[i].value));
  84        }
  85  
  86        return result;
  87      };
  88  
  89      var rearrangeChildren = function rearrangeChildren($parent) {
  90        if (!$parent.dataset.itemId) {
  91          return;
  92        }
  93  
  94        var parentId = $parent.dataset.itemId; // Get children list. Each child row should have
  95        // an attribute data-parents=" 1 2 3" where the number is id of parent
  96  
  97        var $children = container.querySelectorAll("tr[data-parents~=\"" + parentId + "\"]");
  98  
  99        if ($children.length) {
 100          $parent.after.apply($parent, $children);
 101        }
 102      };
 103  
 104      var saveTheOrder = function saveTheOrder(el) {
 105        var orderSelector;
 106        var inputSelector;
 107        var rowSelector;
 108        var groupId = el.dataset.draggableGroup;
 109  
 110        if (groupId) {
 111          rowSelector = "tr[data-draggable-group=\"" + groupId + "\"]";
 112          orderSelector = "[data-draggable-group=\"" + groupId + "\"] [name=\"order[]\"]";
 113          inputSelector = "[data-draggable-group=\"" + groupId + "\"] [name=\"cid[]\"]";
 114        } else {
 115          rowSelector = 'tr';
 116          orderSelector = '[name="order[]"]';
 117          inputSelector = '[name="cid[]"]';
 118        }
 119  
 120        var rowElements = [].slice.call(container.querySelectorAll(rowSelector));
 121        var rows = [].slice.call(container.querySelectorAll(orderSelector));
 122        var inputRows = [].slice.call(container.querySelectorAll(inputSelector));
 123        dropElementIndex = rowElements.indexOf(el);
 124  
 125        if (url) {
 126          // Detach task field if exists
 127          var task = document.querySelector('[name="task"]'); // Detach task field if exists
 128  
 129          if (task) {
 130            task.setAttribute('name', 'some__Temporary__Name__');
 131          } // Prepare the options
 132  
 133  
 134          var ajaxOptions = {
 135            url: url,
 136            method: 'POST',
 137            data: new URLSearchParams(formData).toString() + "&" + getOrderData(rows, inputRows, dragElementIndex, dropElementIndex).join('&'),
 138            perform: true
 139          };
 140          Joomla.request(ajaxOptions); // Re-Append original task field
 141  
 142          if (task) {
 143            task.setAttribute('name', 'task');
 144          }
 145        } // Update positions for a children of the moved item
 146  
 147  
 148        rearrangeChildren(el);
 149      }; // eslint-disable-next-line no-undef
 150  
 151  
 152      dragula([container], {
 153        // Y axis is considered when determining where an element would be dropped
 154        direction: 'vertical',
 155        // elements are moved by default, not copied
 156        copy: false,
 157        // elements in copy-source containers can be reordered
 158        // copySortSource: true,
 159        // spilling will put the element back where it was dragged from, if this is true
 160        revertOnSpill: true,
 161        // spilling will `.remove` the element, if this is true
 162        // removeOnSpill: false,
 163        accepts: function accepts(el, target, source, sibling) {
 164          if (isNested) {
 165            if (sibling !== null) {
 166              return sibling.dataset.draggableGroup && sibling.dataset.draggableGroup === el.dataset.draggableGroup;
 167            }
 168  
 169            return sibling === null || sibling && sibling.tagName.toLowerCase() === 'tr';
 170          }
 171  
 172          return sibling === null || sibling && sibling.tagName.toLowerCase() === 'tr';
 173        },
 174        mirrorContainer: container
 175      }).on('drag', function (el) {
 176        var rowSelector;
 177        var groupId = el.dataset.draggableGroup;
 178  
 179        if (groupId) {
 180          rowSelector = "tr[data-draggable-group=\"" + groupId + "\"]";
 181        } else {
 182          rowSelector = 'tr';
 183        }
 184  
 185        var rowElements = [].slice.call(container.querySelectorAll(rowSelector));
 186        dragElementIndex = rowElements.indexOf(el);
 187      }).on('drop', function (el) {
 188        saveTheOrder(el);
 189      });
 190    }
 191  
 192  })();