Merge pull request #18067 from craftcms/bugfix/18052-drag-sort-and-touch-capable-devices

Bugfix/18052 drag sort and devices without mouse pointer events

Author: brandonkelly

CHANGELOG-WIP.md

@@ -18,9 +18,11 @@
 ### Accessibility
 - Improved the accessibility of the Orientation setting within the Image Editor’s crop tool. ([#17690](https://github.com/craftcms/cms/pull/17690))
 - The Image Editor’s focal point tool is now keyboard accessible. ([#17880](https://github.com/craftcms/cms/pull/17880))
+- All sortable checkbox select options, selected Dashboard widgets, and site listings now have keyboard-accessible “Move up” and “Move down” action items. ([#18067](https://github.com/craftcms/cms/pull/18067))
 
 ### Administration
 - It’s now possible to divide entry sources into multiple index pages, via the Customize Sources modal. ([#17779](https://github.com/craftcms/cms/pull/17779))
+- The Customize Sources modal now supports mobile devices. ([#18067](https://github.com/craftcms/cms/pull/18067))
 - Added the “UI Label Format” entry type setting. ([#18044](https://github.com/craftcms/cms/pull/18044))
 - Added the “View user” GraphQL schema option for Craft Solo. ([#17863](https://github.com/craftcms/cms/pull/17863))
 - Users’ User Groups settings now show a component select input, and support inline group editing/creation on environments that allow administrative changes.
@@ -40,6 +42,7 @@
 - Added the `useIdnaNontransitionalToUnicode` config setting. ([#17946](https://github.com/craftcms/cms/pull/17946))
 - The `maxCachedCloudImageSize` config setting is now set to `0` by default. ([#17997](https://github.com/craftcms/cms/pull/17997))
 - System message emails are now rendered using GitHub-flavored Markdown. ([#18058](https://github.com/craftcms/cms/discussions/18058))
+- Drag-and-drop icons are now longer shown for devices that don’t support pointer events. ([#18067](https://github.com/craftcms/cms/pull/18067))
 
 ### Development
 - Reference tags now support fallback values when no attribute is specified. ([#17688](https://github.com/craftcms/cms/pull/17688))

src/templates/_components/fieldtypes/Matrix/settings.twig

@@ -346,10 +346,8 @@
 
     {% if readOnly %}
       config['disabled'] = true;
-    {% else %}
-      config['sortable'] = true;
     {% endif %}
 
-    Craft.ui.createCheckboxSelect(config).appendTo($defaultColumnsContainer);
+    Craft.ui.createSortableCheckboxSelect(config).appendTo($defaultColumnsContainer);
   })();
 {% endjs %}

src/templates/settings/sites/index.twig

@@ -73,6 +73,7 @@
                     {% endif %}
                     {% if canSort %}
                         <td class="thin"></td>
+                        <td class="thin"></td>
                     {% endif %}
                     {% if multiple %}
                         <td class="thin"></td>
@@ -95,6 +96,7 @@
                             {% endif %}
                             {% if canSort %}
                                 <td class="thin"><a class="move icon" title="{{ 'Reorder'|t('app') }}" aria-label="{{ 'Reorder'|t('app') }}" role="button"></a></td>
+                                <td class="thin actions-container"></td>
                             {% endif %}
                             {% if multiple %}
                                 <td class="thin"><a class="delete icon{% if site.primary %} disabled{% endif %}" title="{{ 'Delete'|t('app') }}" aria-label="{{ 'Delete'|t('app') }}" role="button"></a></td>

src/web/assets/cp/dist/cp.js

@@ -672,7 +672,7 @@ body.rtl [data-icon-after='structure']::after {
 }
 
 .action-btn::before {
-  content: 'ellipsis';
+  content: 'ellipsis' / '';
 }
 
 /* headings */
@@ -4335,6 +4335,11 @@ table {
     box-shadow: none;
     border-radius: var(--border-radius, var(--radius-sm));
 
+    // adjust the margin-block
+    @media only screen and (width <= 767px) {
+      margin-block: calc(var(--s) * -1 + 2px) var(--s);
+    }
+
     &::after {
       content: '';
     }
@@ -8482,7 +8487,7 @@ div.checkbox.checked:not(.indeterminate)::before,
   .elements
   .disabled
   .checkbox::before {
-  content: 'check';
+  content: 'check' / '';
   font-size: calc(var(--checkbox-size) * 0.8);
 }
 

src/web/assets/cp/dist/cp.js.map

@@ -26,7 +26,7 @@ Craft.AdminTable = Garnish.Base.extend(
       this.$tbody = this.$table.children('tbody');
       this.totalItems = this.$tbody.children().length;
 
-      if (this.settings.sortable) {
+      if (this.settings.sortable && Craft.hasMousePointerEvents()) {
         this.sorter = new Craft.DataTableSorter(this.$table, {
           onSortChange: this.reorderItems.bind(this),
         });
@@ -44,9 +44,17 @@ Craft.AdminTable = Garnish.Base.extend(
         }
       });
 
+      this.$tbody.children('tr').each((key, row) => {
+        this.initRow(row);
+      });
+
       this.updateUI();
     },
 
+    initRow: function (row) {
+      return new Craft.AdminTable.Row(this, row);
+    },
+
     addRow: function (row) {
       if (this.settings.maxItems && this.totalItems >= this.settings.maxItems) {
         // Sorry pal.
@@ -56,8 +64,8 @@ Craft.AdminTable = Garnish.Base.extend(
       var $row = $(row).appendTo(this.$tbody),
         $deleteBtn = $row.find('.delete');
 
-      if (this.settings.sortable) {
-        this.sorter.addItems($row);
+      if (this.settings.sortable && Craft.hasMousePointerEvents()) {
+        this.sorter?.addItems($row);
       }
 
       this.$deleteBtns = this.$deleteBtns.add($deleteBtn);
@@ -74,12 +82,7 @@ Craft.AdminTable = Garnish.Base.extend(
       }
 
       // Get the new field order
-      var ids = [];
-
-      for (var i = 0; i < this.sorter.$items.length; i++) {
-        var id = $(this.sorter.$items[i]).attr(this.settings.idAttribute);
-        ids.push(id);
-      }
+      let ids = this.getRowOrder();
 
       // Send it to the server
       var data = {
@@ -100,6 +103,17 @@ Craft.AdminTable = Garnish.Base.extend(
         });
     },
 
+    getRowOrder: function () {
+      var ids = [];
+      // Get the new field order
+      this.$tbody.children('tr').each((key, row) => {
+        let id = $(row).attr(this.settings.idAttribute);
+        ids.push(id);
+      });
+
+      return ids;
+    },
+
     handleDeleteBtnClick: function (event) {
       if (this.settings.minItems && this.totalItems <= this.settings.minItems) {
         // Sorry pal.
@@ -193,12 +207,16 @@ Craft.AdminTable = Garnish.Base.extend(
 
       // Disable the sort buttons if there's only one row
       if (this.settings.sortable) {
-        var $moveButtons = this.$table.find('.move');
-
-        if (this.totalItems === 1) {
-          $moveButtons.addClass('disabled');
+        if (!Craft.hasMousePointerEvents()) {
+          this.$table.find('.move').hide();
         } else {
-          $moveButtons.removeClass('disabled');
+          var $moveButtons = this.$table.find('.move');
+
+          if (this.totalItems === 1) {
+            $moveButtons.addClass('disabled');
+          } else {
+            $moveButtons.removeClass('disabled');
+          }
         }
       }
 
@@ -248,3 +266,107 @@ Craft.AdminTable = Garnish.Base.extend(
     },
   }
 );
+
+Craft.AdminTable.Row = Garnish.Base.extend({
+  table: null,
+  $row: null,
+  $moveHandle: null,
+  $actionMenuBtn: null,
+  $actionMenu: null,
+  actionDisclosure: null,
+  moveUpBtn: null,
+  moveDownBtn: null,
+
+  init: function (table, row) {
+    this.table = table;
+    this.$row = $(row);
+
+    this.initSortActions();
+  },
+
+  initSortActions: function () {
+    if (!this.table.settings.sortable) {
+      return;
+    }
+
+    // find the delete button and add the actions menu before it
+    let $deleteButtonWrapper = this.$row.find('.delete').parent('td');
+
+    const menuId = 'menu-' + Math.floor(Math.random() * 1000000000);
+    let $actionMenuBtnWrapper = this.$row.find('.actions-container');
+
+    if ($actionMenuBtnWrapper.length > 0) {
+      this.$actionMenuBtn = $('<button/>', {
+        class: 'btn action-btn',
+        'aria-controls': menuId,
+        'aria-label': Craft.t('app', 'Actions'),
+        'data-disclosure-trigger': '',
+        'data-icon': 'ellipsis',
+      }).appendTo($actionMenuBtnWrapper);
+      this.$actionMenu = $('<div/>', {
+        id: menuId,
+        class: 'menu menu--disclosure',
+      }).appendTo($actionMenuBtnWrapper);
+
+      this.actionDisclosure = new Garnish.DisclosureMenu(this.$actionMenuBtn);
+      this.moveUpBtn = this.actionDisclosure.addItem({
+        icon: async () => await Craft.ui.icon('arrow-up'),
+        label: Craft.t('app', 'Move up'),
+        onActivate: () => {
+          this.moveUp();
+        },
+      });
+      this.moveDownBtn = this.actionDisclosure.addItem({
+        icon: async () => await Craft.ui.icon('arrow-down'),
+        label: Craft.t('app', 'Move down'),
+        onActivate: () => {
+          this.moveDown();
+        },
+      });
+
+      this.actionDisclosure.on('show', () => {
+        if (this.getPrevItem()) {
+          this.actionDisclosure.showItem(this.moveUpBtn);
+        } else {
+          this.actionDisclosure.hideItem(this.moveUpBtn);
+        }
+        if (this.getNextItem()) {
+          this.actionDisclosure.showItem(this.moveDownBtn);
+        } else {
+          this.actionDisclosure.hideItem(this.moveDownBtn);
+        }
+      });
+    }
+  },
+
+  moveUp: function () {
+    const $prev = this.getPrevItem();
+    if ($prev) {
+      this.$row.insertBefore($prev);
+      this.$row.trigger('movedUp');
+      this.table.reorderItems();
+    }
+  },
+
+  moveDown: function () {
+    const $next = this.getNextItem();
+    if ($next) {
+      this.$row.insertAfter($next);
+      this.$row.trigger('movedDown');
+      this.table.reorderItems();
+    }
+  },
+
+  getPrevItem: function () {
+    //const $row = this.$row.prevAll('tr');
+    const $row = this.$row.prevAll('tr:has(.actions-container):first');
+
+    return $row.length ? $row : null;
+  },
+
+  getNextItem: function () {
+    const $row = this.$row.nextAll('tr:has(.actions-container):first');
+
+    return $row.length ? $row : null;
+  },
+});

src/web/assets/cp/dist/css/cp.css

@@ -1491,11 +1491,7 @@ Craft.BaseElementIndex = Garnish.Base.extend(
     getSourceActions: function () {
       let actions = [];
 
-      if (
-        Craft.userIsAdmin &&
-        Craft.allowAdminChanges &&
-        !Garnish.isMobileBrowser(true)
-      ) {
+      if (Craft.userIsAdmin && Craft.allowAdminChanges) {
         actions.push({
           label: Craft.t('app', 'Customize sources'),
           administrative: true,
@@ -4457,7 +4453,7 @@ const ViewMenu = Garnish.Base.extend({
         `input[value="${attribute}"]`
       );
       if (!$checkbox.prop('checked')) {
-        $checkbox.prop('checked', true);
+        $checkbox.prop('checked', true).trigger('change');
       }
       const $container = $checkbox.parent();
 
@@ -4723,20 +4719,21 @@ const ViewMenu = Garnish.Base.extend({
       return $();
     }
 
-    this.$tableColumnsContainer = Craft.ui.createCheckboxSelect({
+    this.$tableColumnsContainer = Craft.ui.createSortableCheckboxSelect({
       options: columns.map((c) => ({
         label: c.label,
         value: c.attr,
       })),
-      sortable: true,
     });
 
     this.updateTableColumnField();
     this.tidyTableColumnField();
 
-    this.$tableColumnsContainer.data('dragSort').on('sortChange', () => {
-      this._onTableColumnChange();
-    });
+    this.$tableColumnsContainer
+      .data('sortableCheckboxSelect')
+      .on('sortChange', () => {
+        this._onTableColumnChange();
+      });
 
     this._getTableColumnCheckboxes().on('change', (ev) => {
       this._onTableColumnChange();