diff --git a/css/paragraphs.collapse.css b/css/paragraphs.collapse.css new file mode 100644 index 0000000..f180e82 --- /dev/null +++ b/css/paragraphs.collapse.css @@ -0,0 +1,59 @@ +.paragraphs-collapse { + background: url("../icons/collapse_icon.svg") no-repeat center; + cursor: pointer; + height: 20px; + transition: all 0.1s; + width: 30px; + -webkit-font-smoothing: antialiased; + background-size: contain; +} + +.paragraphs-collapse-items { + display: none; + background: #f5f5f2; + position: relative; + margin-top: 20px; +} + +.paragraphs-collapse-items.open { + display: block; +} + +.paragraphs-collapse-items ul { + list-style: none; + padding: 0; + margin: 0; + position: absolute; + right: 0; + top: 3px; + border: 1px solid #a6a6a6; + background-color: #f5f5f2; + z-index: 100; + border-radius: 5px 0 5px 5px; + box-shadow: 0 2px 6px 0 #AAA; +} + +.paragraphs-collapse-items li { + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +.paragraphs-collapse-items .button { + border: 0; + clear: both; + color: #555555; + display: block; + font-weight: 600; + line-height: 18px; + white-space: nowrap; + width: 100%; + text-align: left; + background: transparent; + border-radius: 5px; +} + +.paragraphs-collapse-item-icon { + height: 20px; + padding: 0 10px; +} diff --git a/css/paragraphs.collapse.scss b/css/paragraphs.collapse.scss new file mode 100644 index 0000000..6115f4e --- /dev/null +++ b/css/paragraphs.collapse.scss @@ -0,0 +1,53 @@ +.paragraphs-collapse { + background: url('../icons/collapse_icon.svg') no-repeat center; + cursor: pointer; + height: 20px; + transition: all 0.1s; + width: 30px; + -webkit-font-smoothing: antialiased; + background-size: contain; +} + +.paragraphs-collapse-items { + display: none; + background: #f5f5f2; + position: relative; + margin-top: 20px; + &.open { + display: block; + } + ul { + list-style: none; + padding: 0; + margin: 0; + position: absolute; + right: 0; + top: 3px; + border: 1px solid #a6a6a6; + background-color: #f5f5f2; + z-index: 100; + border-radius: 5px 0 5px 5px; + box-shadow: 0 2px 6px 0 #AAA; + } + li { + display: flex; + } + .button { + border: 0; + clear: both; + color: #555555; + display: block; + font-weight: 600; + line-height: 18px; + white-space: nowrap; + width: 100%; + text-align: left; + background: transparent; + border-radius: 5px; + } +} + +.paragraphs-collapse-item-icon { + height: 20px; + padding: 0 10px; +} diff --git a/css/paragraphs.widget.css b/css/paragraphs.widget.css index 4670cfa..5f0e54f 100644 --- a/css/paragraphs.widget.css +++ b/css/paragraphs.widget.css @@ -91,6 +91,7 @@ white-space: nowrap; overflow: hidden; } + @media screen and (min-width: 600px) { .js .paragraph-type-add-modal { width: 100%; diff --git a/icons/collapse_icon.svg b/icons/collapse_icon.svg new file mode 100644 index 0000000..b7ded3f --- /dev/null +++ b/icons/collapse_icon.svg @@ -0,0 +1,29 @@ + + + Layer 1 + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/js/paragraphs.collapse.js b/js/paragraphs.collapse.js new file mode 100644 index 0000000..0682931 --- /dev/null +++ b/js/paragraphs.collapse.js @@ -0,0 +1,24 @@ +(function ($, Drupal) { + + 'use strict'; + + + /** + * Process elements with the .paragraphscollapse class on page load. + * + * @type {Drupal~behavior} + * + * @prop {Drupal~behaviorAttach} attach + * Attaches dropButton behaviors. + */ + Drupal.behaviors.paragraphscollapse = { + attach: function (context, settings) { + var $dropbutton = $(context).find('.paragraphs-collapse'); + // Adds the delegated handler that will toggle dropdowns on click. + $dropbutton.unbind('click').on('click', function () { + // Show action buttons. + $(this).parent().find('.paragraphs-collapse-items').toggleClass('open'); + }); + } + }; +})(jQuery, Drupal); diff --git a/paragraphs.libraries.yml b/paragraphs.libraries.yml index 3e197b2..7e60445 100644 --- a/paragraphs.libraries.yml +++ b/paragraphs.libraries.yml @@ -26,6 +26,20 @@ drupal.paragraphs.widget: js: js/paragraphs.admin.js: {} +drupal.paragraphs.collapse: + css: + theme: + css/paragraphs.collapse.css: {} + js: + js/paragraphs.collapse.js: {} + dependencies: + - core/drupalSettings + - core/jquery.once + - core/jquery + - core/jquery.form + - core/drupal.ajax + - core/drupal + drupal.paragraphs.list_builder: version: VERSION css: diff --git a/src/Element/ParagraphsCollapse.php b/src/Element/ParagraphsCollapse.php new file mode 100644 index 0000000..c614245 --- /dev/null +++ b/src/Element/ParagraphsCollapse.php @@ -0,0 +1,80 @@ + 'paragraphs_collapse', + * '#buttons' => $buttons + * ); + * $buttons['button'] = array( + * '#type' => 'submit', + * ); + * @endcode + * + * @FormElement("paragraphs_collapse") + */ +class ParagraphsCollapse extends RenderElement { + + /** + * {@inheritdoc} + */ + public function getInfo() { + $class = get_class($this); + + return [ + '#pre_render' => [ + [$class, 'preRenderParagraphsCollapse'], + ], + ]; + } + + /** + * #pre_render callback for #type 'paragraphs_collapse'. + * + * @param array $element + * An associative array containing the properties and children of the table + * element. + * + * @return array + * The processed element. + */ + public static function preRenderParagraphsCollapse($element) { + $element['#attached']['library'][] = 'paragraphs/drupal.paragraphs.collapse'; + $element['buttons'] = [ + '#type' => 'container', + '#attributes' => [ + 'class' => ['paragraphs-collapse-items'], + ], + ]; + $element['buttons']['prefix'] = [ + '#markup' => '', + '#weight' => 999, + ]; + foreach ($element['#buttons'] as $key => &$value) { + if (isset($value['title']['#ajax'])) { + $value['title'] = RenderElement::preRenderAjaxForm($value['title']); + } + $element['#buttons'][$key]['#attributes']['class'][] = 'paragraphs-collapse-item'; + $element['#buttons'][$key]['#prefix'] = '
  • '; + $element['#buttons'][$key]['#suffix'] = '
    • '; + $element['buttons'][$key] = $element['#buttons'][$key]; + } + $element['#prefix'] = '
    '; + $element['#suffix'] = '
    '; + unset($element['#buttons']); + return $element; + } + +} diff --git a/src/Plugin/Field/FieldWidget/ParagraphsWidget.php b/src/Plugin/Field/FieldWidget/ParagraphsWidget.php index 831988d..979f01b 100644 --- a/src/Plugin/Field/FieldWidget/ParagraphsWidget.php +++ b/src/Plugin/Field/FieldWidget/ParagraphsWidget.php @@ -1093,10 +1093,10 @@ class ParagraphsWidget extends WidgetBase { } $build['operations'] = [ - '#type' => 'paragraph_operations', + '#type' => 'paragraphs_collapse', // Even though operations are run through the "links" element type, the // theme system will render any render array passed as a link "title". - '#links' => $operations, + '#buttons' => $operations, ]; return $build + $elements;