From 0d5d23b980769111279722cd9ae6479a39d43a20 Mon Sep 17 00:00:00 2001 From: Volker Killesreiter Date: Thu, 30 Sep 2021 15:18:56 +0200 Subject: [PATCH 1/7] 1st throw --- css/paragraphs-features.sorting.css | 2 +- js/tabledrag.checkbox.js | 44 ++++++++++++++--------------- 2 files changed, 22 insertions(+), 24 deletions(-) diff --git a/css/paragraphs-features.sorting.css b/css/paragraphs-features.sorting.css index 2c30d94..5a7ed4c 100644 --- a/css/paragraphs-features.sorting.css +++ b/css/paragraphs-features.sorting.css @@ -7,7 +7,7 @@ margin-left: -16px; } -.field-multiple-table.tabledrag-checkbox-active > tbody > tr.draggable > .field-multiple-drag .tabledrag-handle { +.field-multiple-table.tabledrag-checkbox-sort > tbody > tr.draggable > .field-multiple-drag .tabledrag-handle { display: none; } diff --git a/js/tabledrag.checkbox.js b/js/tabledrag.checkbox.js index d0c5b16..6c114b1 100644 --- a/js/tabledrag.checkbox.js +++ b/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 = $('') - .on('click', $.proxy(function (e) { - e.preventDefault(); + + this.sortCheckbox = $('') + .on('change', $.proxy(function (e) { + // At least one checkbox is checked. + let oneChecked = Array.prototype.slice.call(this.$table.get(0).querySelectorAll('input.tabledrag-checkbox[type="checkbox"]')).some(input => input.checked); + + this.$table.find() 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('
') - .parent(); + + }, this)); this.addInBeetween = !( typeof Drupal.behaviors.paragraphsFeaturesAddInBetweenInit === 'undefined' && @@ -36,13 +35,9 @@ // 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( - $('') - .hide() - ); + // Add sorting checkbox to items. + this.$table.find('> tbody > tr.draggable > .field-multiple-drag .tabledrag-cell-content').prepend(this.sortCheckbox); + this.$table.addClass('tabledrag-checkbox-sort'); }; Drupal.tableDrag.prototype.toggleStyleOfCheckboxButton = function () { @@ -151,7 +146,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('') From e6e6c8110dfd6cc688863e3bd71d80d04feae9b6 Mon Sep 17 00:00:00 2001 From: Volker Killesreiter Date: Thu, 30 Sep 2021 17:27:19 +0200 Subject: [PATCH 2/7] foo --- css/paragraphs-features.sorting.css | 4 ---- js/tabledrag.checkbox.js | 15 +++------------ 2 files changed, 3 insertions(+), 16 deletions(-) diff --git a/css/paragraphs-features.sorting.css b/css/paragraphs-features.sorting.css index 5a7ed4c..38e6cad 100644 --- a/css/paragraphs-features.sorting.css +++ b/css/paragraphs-features.sorting.css @@ -7,10 +7,6 @@ margin-left: -16px; } -.field-multiple-table.tabledrag-checkbox-sort > tbody > tr.draggable > .field-multiple-drag .tabledrag-handle { - display: none; -} - .field-multiple-table .tabledrag-toggle-checkbox-wrapper { float: right; } diff --git a/js/tabledrag.checkbox.js b/js/tabledrag.checkbox.js index 6c114b1..3c601fd 100644 --- a/js/tabledrag.checkbox.js +++ b/js/tabledrag.checkbox.js @@ -12,7 +12,7 @@ this.sortCheckbox = $('') .on('change', $.proxy(function (e) { // At least one checkbox is checked. - let oneChecked = Array.prototype.slice.call(this.$table.get(0).querySelectorAll('input.tabledrag-checkbox[type="checkbox"]')).some(input => input.checked); + var oneChecked = Array.prototype.slice.call(this.table.querySelectorAll('input.tabledrag-checkbox[type="checkbox"]')).some(input => input.checked); this.$table.find() if (!this.$table.hasClass('tabledrag-checkbox-active')) { @@ -35,22 +35,13 @@ // Add spacer rows. this.addSpacer(); + // 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'); }; - 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); - }; - /** * Disable/enable related (parents, children) tabledrag sort buttons. */ From 3c3f806601a66f0d56b5d639dff866e1bf61ad4b Mon Sep 17 00:00:00 2001 From: Volker Killesreiter Date: Fri, 1 Oct 2021 11:12:06 +0200 Subject: [PATCH 3/7] Add hide row weight sort option --- config/schema/paragraphs_features.schema.yml | 9 +++++--- ...aragraphs-features.hide-row-weight-sort.js | 21 +++++++++++++++++++ paragraphs_features.libraries.yml | 7 +++++++ src/ParagraphsFeatures.php | 7 +++++++ 4 files changed, 41 insertions(+), 3 deletions(-) create mode 100644 js/paragraphs-features.hide-row-weight-sort.js diff --git a/config/schema/paragraphs_features.schema.yml b/config/schema/paragraphs_features.schema.yml index 120c126..8f27abc 100644 --- a/config/schema/paragraphs_features.schema.yml +++ b/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 diff --git a/js/paragraphs-features.hide-row-weight-sort.js b/js/paragraphs-features.hide-row-weight-sort.js new file mode 100644 index 0000000..561a8c3 --- /dev/null +++ b/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)); diff --git a/paragraphs_features.libraries.yml b/paragraphs_features.libraries.yml index dd76b0e..bc08c1b 100644 --- a/paragraphs_features.libraries.yml +++ b/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 diff --git a/src/ParagraphsFeatures.php b/src/ParagraphsFeatures.php index f9736ec..7f0144c 100644 --- a/src/ParagraphsFeatures.php +++ b/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; } From c13dd51d72ecabeb2563e7e66520f5d7acc6cdf7 Mon Sep 17 00:00:00 2001 From: Volker Killesreiter Date: Fri, 1 Oct 2021 11:36:03 +0200 Subject: [PATCH 4/7] fix cs --- js/paragraphs-features.hide-row-weight-sort.js | 2 +- js/tabledrag.checkbox.js | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/js/paragraphs-features.hide-row-weight-sort.js b/js/paragraphs-features.hide-row-weight-sort.js index 561a8c3..db35954 100644 --- a/js/paragraphs-features.hide-row-weight-sort.js +++ b/js/paragraphs-features.hide-row-weight-sort.js @@ -5,7 +5,7 @@ Drupal.behaviors.paragraphsFeaturesHideRowWeightSort = { attach: function (context, settings) { - Object.keys(settings.paragraphs_features.hide_row_weight_sort).forEach( function (paragraphsWidgetId) { + Object.keys(settings.paragraphs_features.hide_row_weight_sort).forEach(function (paragraphsWidgetId) { var wrapper = document.querySelector('#' + paragraphsWidgetId); if (!wrapper) { return; diff --git a/js/tabledrag.checkbox.js b/js/tabledrag.checkbox.js index 3c601fd..75f5cdb 100644 --- a/js/tabledrag.checkbox.js +++ b/js/tabledrag.checkbox.js @@ -12,16 +12,16 @@ this.sortCheckbox = $('') .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(input => input.checked); + var oneChecked = Array.prototype.slice.call(this.table.querySelectorAll('input.tabledrag-checkbox[type="checkbox"]')) + .some(function (input) { return input.checked; }); - this.$table.find() if (!this.$table.hasClass('tabledrag-checkbox-active')) { this.triggerStartEvent(); this.$table.addClass('tabledrag-checkbox-active'); this.addSortTargets(); } else if (!oneChecked) { - this.removeSortTargets() + this.removeSortTargets(); this.$table.removeClass('tabledrag-checkbox-active'); this.triggerEndEvent(); } From 42248fa8f9b037f7d5b51c1354e2010d31fbf74b Mon Sep 17 00:00:00 2001 From: Volker Killesreiter Date: Fri, 1 Oct 2021 14:41:09 +0200 Subject: [PATCH 5/7] test test? --- .github/workflows/{foo.yml => test.yml} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename .github/workflows/{foo.yml => test.yml} (100%) diff --git a/.github/workflows/foo.yml b/.github/workflows/test.yml similarity index 100% rename from .github/workflows/foo.yml rename to .github/workflows/test.yml From f138c9c9184267b3c521196a7b7bd93408fdf3dc Mon Sep 17 00:00:00 2001 From: Volker Killesreiter Date: Thu, 14 Oct 2021 13:21:51 +0200 Subject: [PATCH 6/7] hide tabledrag ui on delete confirm --- js/paragraphs-features.delete-confirmation.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/js/paragraphs-features.delete-confirmation.js b/js/paragraphs-features.delete-confirmation.js index 06c5836..17160d0 100644 --- a/js/paragraphs-features.delete-confirmation.js +++ b/js/paragraphs-features.delete-confirmation.js @@ -54,6 +54,7 @@ var $wrapper = $(event.target).parents('div[id*="-item-wrapper"]').first(); // Hide children. $wrapper.children().toggleClass('visually-hidden'); + $wrapper.parents('.draggable').first().find('.js-tabledrag-cell-content').first().toggleClass('visually-hidden'); // Add markup. $wrapper.append(Drupal.theme('paragraphsFeaturesDeleteConfirmationMessage', {message: Drupal.t('Are you sure you want to remove this paragraph?'), remove: Drupal.t('Remove'), cancel: Drupal.t('Cancel')})); // Add handlers for buttons. @@ -89,6 +90,7 @@ var $wrapper = $(event.target).parents('div[id*="-item-wrapper"]').first(); $wrapper.children('.paragraphs-features__delete-confirmation').first().remove(); $wrapper.children().toggleClass('visually-hidden'); + $wrapper.parents('.draggable').first().find('.js-tabledrag-cell-content').first().toggleClass('visually-hidden'); }; }; From 0ffab10faeebaa38128ceb891c50b173699192c1 Mon Sep 17 00:00:00 2001 From: Volker Killesreiter Date: Thu, 14 Oct 2021 13:36:10 +0200 Subject: [PATCH 7/7] use core 9.2 --- .github/workflows/test.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index 9b85840..8f8bc38 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -24,7 +24,7 @@ jobs: strategy: matrix: THEME: ['claro', 'gin'] - DRUPAL_TESTING_DRUPAL_VERSION: ['~9.1.0'] + DRUPAL_TESTING_DRUPAL_VERSION: ['~9.2.0'] PHP: ['7.4'] steps: