Issue #3240001: Checkbox sorting as sole sorting mechanism

config/schema/paragraphs_features.schema.yml

@@ -16,15 +16,18 @@ paragraphs_features_third_party:
     delete_confirmation:
       type: boolean
       label: 'Flag for delete confirmation feature'
+    hide_row_weight_sort:
+      type: boolean
+      label: 'Flag for hiding row weight sort'
+    show_drag_and_drop:
+      type: boolean
+      label: 'Flag for showing drag & drop button'
     sorting:
       type: boolean
       label: 'Flag for paragraphs checkbox sorting feature'
     split_text:
       type: boolean
       label: 'Flag for paragraphs split text feature'
-    show_drag_and_drop:
-      type: boolean
-      label: 'Flag for showing drag & drop button'
 
 field.widget.third_party.paragraphs_features:
   type: paragraphs_features_third_party

css/paragraphs-features.sorting.css

@@ -7,10 +7,6 @@
   margin-left: -16px;
 }
 
-.field-multiple-table.tabledrag-checkbox-active > tbody > tr.draggable > .field-multiple-drag .tabledrag-handle {
-  display: none;
-}
-
 .field-multiple-table .tabledrag-toggle-checkbox-wrapper {
   float: right;
 }

js/paragraphs-features.hide-row-weight-sort.js

@@ -0,0 +1,21 @@
+(function ($, Drupal) {
+
+  'use strict';
+
+  Drupal.behaviors.paragraphsFeaturesHideRowWeightSort = {
+    attach: function (context, settings) {
+
+      Object.keys(settings.paragraphs_features.hide_row_weight_sort).forEach(function (paragraphsWidgetId) {
+        var wrapper = document.querySelector('#' + paragraphsWidgetId);
+        if (!wrapper) {
+          return;
+        }
+        var table = wrapper.querySelector('.field-multiple-table');
+        if (table && Drupal.tableDrag[table.id] && !Drupal.tableDrag[table.id].hideRowWeightSort) {
+          Drupal.tableDrag[table.id].$toggleWeightButton.hide();
+          Drupal.tableDrag[table.id].hideRowWeightSort = true;
+        }
+      });
+    }
+  };
+}(jQuery, Drupal));

js/tabledrag.checkbox.js

@@ -8,26 +8,25 @@
    * On click on the sorting button, show/hide the checkboxes and add/remove sorting targets.
    */
   Drupal.tableDrag.prototype.initCkbx = function () {
-    // build toggle button
-    this.toggleCheckboxButtonWrapper = $('<button type="button" class="tabledrag-toggle-checkbox button button--extrasmall"></button>')
-      .on('click', $.proxy(function (e) {
-        e.preventDefault();
+
+    this.sortCheckbox = $('<span class="tabledrag-checkbox-wrapper"><input type="checkbox" class="tabledrag-checkbox" /></span>')
+      .on('change', $.proxy(function (e) {
+        // At least one checkbox is checked.
+        var oneChecked = Array.prototype.slice.call(this.table.querySelectorAll('input.tabledrag-checkbox[type="checkbox"]'))
+          .some(function (input) { return input.checked; });
+
         if (!this.$table.hasClass('tabledrag-checkbox-active')) {
           this.triggerStartEvent();
+          this.$table.addClass('tabledrag-checkbox-active');
+          this.addSortTargets();
         }
-        this.toggleRelatedButtons();
-        this.$table.toggleClass('tabledrag-checkbox-active');
-        this.toggleCheckboxes();
-        this.toggleSortTargets();
-        this.toggleStyleOfCheckboxButton();
-        if (!this.$table.hasClass('tabledrag-checkbox-active')) {
-          this.disableCheckboxes();
+        else if (!oneChecked) {
+          this.removeSortTargets();
+          this.$table.removeClass('tabledrag-checkbox-active');
           this.triggerEndEvent();
         }
-      }, this))
-      .text(Drupal.t('Sort'))
-      .wrap('<div class="tabledrag-toggle-checkbox-wrapper"></div>')
-      .parent();
+
+      }, this));
 
     this.addInBeetween = !(
       typeof Drupal.behaviors.paragraphsFeaturesAddInBetweenInit === 'undefined' &&
@@ -36,24 +35,11 @@
 
     // Add spacer rows.
     this.addSpacer();
-    // add sorting toggle button on top
-    this.$table.find('> thead > tr > th:first').append(this.toggleCheckboxButtonWrapper);
-    // add sorting checkbox to items
-    this.$table.find('> tbody > tr.draggable > .field-multiple-drag .tabledrag-cell-content').prepend(
-      $('<span class="tabledrag-checkbox-wrapper"><input type="checkbox" class="tabledrag-checkbox" /></span>')
-        .hide()
-    );
-  };
 
-  Drupal.tableDrag.prototype.toggleStyleOfCheckboxButton = function () {
-    var button = this.toggleCheckboxButtonWrapper.find('button');
-    button.toggleClass('button--primary');
-
-    var text = Drupal.t('Sort');
-    if (this.$table.hasClass('tabledrag-checkbox-active')) {
-      text = Drupal.t('Finish sort');
-    }
-    button.text(text);
+    // Add sorting checkbox to items.
+    this.$table.find('tbody > tr.draggable > .field-multiple-drag .tabledrag-handle').hide();
+    this.$table.find('> tbody > tr.draggable > .field-multiple-drag .tabledrag-cell-content').prepend(this.sortCheckbox);
+    this.$table.addClass('tabledrag-checkbox-sort');
   };
 
   /**
@@ -151,7 +137,10 @@
 
         this.removeSortTargets();
         this.sort(row, swapAfter);
-        this.addSortTargets();
+        // End sort, clean up.
+        this.disableCheckboxes();
+        this.$table.removeClass('tabledrag-checkbox-active');
+        this.triggerEndEvent();
 
       }, this))
       .wrap('<tr class="tabledrag-sort-target-wrapper"><td class="tabledrag-sort-target-column" colspan="3"></td></tr>')

paragraphs_features.libraries.yml

@@ -51,3 +51,10 @@ drupal.paragraphs_features.scroll_to_element:
     js/paragraphs-features.scroll-to-element.js: {}
   dependencies:
     - core/drupal
+
+hide_row_weight_sort:
+  js:
+    js/paragraphs-features.hide-row-weight-sort.js: {}
+  dependencies:
+    - core/drupal
+    - core/drupal.tabledrag

src/ParagraphsFeatures.php

@@ -24,6 +24,7 @@ class ParagraphsFeatures {
   public static $availableFeatures = [
     'add_in_between',
     'delete_confirmation',
+    'hide_row_weight_sort',
     'sorting',
     'split_text',
   ];
@@ -185,6 +186,12 @@ public static function getThirdPartyForm(WidgetInterface $plugin, $field_name) {
       '#access' => !empty($library),
     ];
 
+    $elements['hide_row_weight_sort'] = [
+      '#type' => 'checkbox',
+      '#title' => t('Hide row weight sorting'),
+      '#default_value' => $plugin->getThirdPartySetting('paragraphs_features', 'hide_row_weight_sort'),
+    ];
+
     return $elements;
   }