Issue #62: Organize Paragraphs item action buttons into a dropdown.

Fixes #62. By @herbdool, @laryn, and @irinaz with some JS code modified from the Drupal Paragraphs project.
backdrop-contrib · Jun 25, 2024 · bfb0dfc · bfb0dfc
1 parent 15ab8e9
commit bfb0dfc
Show file tree

Hide file tree

Showing 4 changed files with 238 additions and 59 deletions.
diff --git a/css/paragraphs.css b/css/paragraphs.css
@@ -2,6 +2,84 @@ html.dialog-open {
   position: inherit;
 }
 
+.field-widget-paragraphs-embed table td.paragraph-item .paragraph-bundle-header {
+  display: flex;
+  justify-content: space-between;
+}
+.field-widget-paragraphs-embed table td.paragraph-item .inner-actions {
+  display: flex;
+}
+
+.paragraphs-actions-more {
+  position: relative;
+  border: 0;
+  margin: 0;
+  background-color: transparent;
+  overflow: visible;
+}
+.paragraphs-actions-more summary {
+  border: 0;
+  list-style: none;
+}
+.paragraphs-actions-more>summary::-webkit-details-marker {
+  display: none;
+}
+.paragraphs-actions-more .details-child-wrapper {
+  position: absolute;
+  right: 0;
+  display: block;
+  z-index: 100;
+  background: #fff;
+  border-radius: 4px;
+  border: 2px solid #ccc;
+  margin-top: 5px;
+  box-shadow: 0 0 4px #ddd;
+}
+.paragraphs-actions-more .details-child-wrapper:before {
+  content: "";
+  display: inline-block;
+  position: absolute;
+  left: auto;
+  right: 17px;
+  top: -18px;
+  border: 9px solid transparent;
+  border-bottom: 9px solid #ccc;
+}
+.paragraphs-actions-more .details-child-wrapper:after {
+  content: "";
+  display: inline-block;
+  position: absolute;
+  left: auto;
+  right: 18px;
+  top: -14px;
+  border: 8px solid transparent;
+  border-bottom: 8px solid #fff;
+}
+.paragraphs-actions-more .details-child-wrapper input.form-submit {
+  padding: 0.5em 1em;
+  margin: 0;
+  border: 0;
+  border-radius: unset;
+  box-shadow: none;
+  line-height: normal;
+  transition: none;
+  text-align: left;
+  width: 100%;
+}
+.paragraphs-actions-more .details-child-wrapper input.form-submit:hover {
+  box-shadow: none;
+}
+.paragraphs-actions-more .details-child-wrapper input.form-submit:not(.button-danger):hover {
+  color: #ffffff;
+  background-color: #0074bd;
+}
+.paragraphs-actions-more .details-child-wrapper input:first-child {
+  margin-top: 0.5em;
+}
+.paragraphs-actions-more .details-child-wrapper input:last-child {
+  margin-bottom: 0.5em;
+}
+
 .field-widget-paragraphs-embed {
   .removed {
     padding-left: 1.5rem;

diff --git a/js/paragraphs_actions.js b/js/paragraphs_actions.js
@@ -0,0 +1,46 @@
+/**
+ * @file
+ * Paragraphs actions JS code for paragraphs actions button.
+ */
+
+(function ($, Backdrop) {
+
+  'use strict';
+
+  /**
+   * Process paragraph_actions elements.
+   *
+   * @type {Backdrop~behavior}
+   *
+   * @prop {Backdrop~behaviorAttach} attach
+   *   Attaches paragraphsActions behaviors.
+   */
+  Backdrop.behaviors.paragraphsActions = {
+    attach: function (context, settings) {
+      var $actionsElement = $('.paragraphs-actions-more').once('paragraphs-actions-more', context);
+      // Attach event handlers to toggle button.
+      $actionsElement.each(function () {
+        var $this = $(this);
+
+        $this.on('focusout', function (e) {
+          setTimeout(function () {
+            if ($this.has(document.activeElement).length == 0) {
+              // The focus left the action button group, hide actions.
+              $this.removeAttr('open');
+            }
+          }, 1);
+        });
+      });
+      $(document).on('keydown.paragraphsActions', function (event) {
+        if (event.key === 'Escape') {
+          $('.paragraphs-actions-more').removeAttr('open');
+        }
+      });
+
+    },
+    detach: function (context) {
+      $(document).off('keydown.paragraphsActions');
+    }
+  };
+
+})(jQuery, Backdrop);