From 27895143ee4860028050f5c80e767fe1fe836fb0 Mon Sep 17 00:00:00 2001
From: Justin Toupin <justin@atendesigngroup.com>
Date: Wed, 26 Feb 2025 12:31:16 -0700
Subject: [PATCH] Improve styles and performance. Add setting for showing
layout plugin name.
---
config/install/layout_paragraphs.settings.yml | 1 +
config/schema/layout_paragraphs.schema.yml | 4 +++
css/builder.css | 6 ++--
js/builder.js | 33 ++++++++++++++++---
layout_paragraphs.module | 12 +++++++
src/Form/LayoutParagraphsSettingsForm.php | 8 +++++
6 files changed, 57 insertions(+), 7 deletions(-)
diff --git a/config/install/layout_paragraphs.settings.yml b/config/install/layout_paragraphs.settings.yml
index 0a35868..dc847c0 100644
--- a/config/install/layout_paragraphs.settings.yml
+++ b/config/install/layout_paragraphs.settings.yml
@@ -1,5 +1,6 @@
show_paragraph_labels: 0
show_layout_labels: 0
+show_layout_plugin_labels: 1
paragraph_behaviors_label: 'Behaviors'
paragraph_behaviors_position: -99
empty_message: 'No components to add.'
diff --git a/config/schema/layout_paragraphs.schema.yml b/config/schema/layout_paragraphs.schema.yml
index 9bdcf25..374a9f2 100644
--- a/config/schema/layout_paragraphs.schema.yml
+++ b/config/schema/layout_paragraphs.schema.yml
@@ -10,6 +10,10 @@ layout_paragraphs.settings:
type: integer
label: 'Show Layout Labels'
description: 'This option allows to show the Paragraphs Layout Label of each Item added in LP widget Sections/Layouts'
+ show_layout_plugin_labels:
+ type: integer
+ label: 'Show Layout Plugin Labels'
+ description: 'Show the Layout Plugin Label in the component controls interface'
paragraph_behaviors_label:
type: string
label: 'Paragraph behaviors label'
diff --git a/css/builder.css b/css/builder.css
index db25b39..8719660 100644
--- a/css/builder.css
+++ b/css/builder.css
@@ -1,8 +1,8 @@
:root {
--lp-hover-outline-color: #0550E6;
- --lp-hover-outline-width: 1px;
+ --lp-hover-outline-width: 2px;
--lp-focus-outline-color: #0550E6;
- --lp-focus-outline-width: 2px;
+ --lp-focus-outline-width: 4px;
--lp-controls-bg-color: #0550E6;
--lp-controls-fg-color: #fff;
@@ -54,6 +54,7 @@
border-radius: 2px;
padding: 2px 6px 2px 7px;
z-index: 1000;
+ white-space: nowrap;
}
/**
@@ -132,6 +133,7 @@
font-size: .7em;
letter-spacing: 2px;
font-weight: bold;
+ white-space: nowrap;
}
&.is-fixed {
position: fixed;
diff --git a/js/builder.js b/js/builder.js
index 9a9c0ac..82d21ae 100644
--- a/js/builder.js
+++ b/js/builder.js
@@ -78,7 +78,7 @@
/**
* Sets position for the active component's controls.
*/
- const setControlsPosition = debounce(() => {
+ const setControlsPosition = () => {
if (!activeComponent) {
return;
}
@@ -117,7 +117,7 @@
} else {
controls.classList.remove('is-scrolled-past');
}
- }, 25);
+ };
/**
* Removes focus data attributes from all components.
@@ -766,7 +766,9 @@
});
listen(document, 'focusin', (event) => {
- const component = event.target.closest('.js-lpb-component');
+ const component = event.target.closest('.js-lpb-ui')
+ ? event.target.closest('.js-lpb-component')
+ : null;
if (component) {
unselectComponents();
selectComponent(component);
@@ -887,6 +889,15 @@
* Click handler for various UI elements.
*/
listen(document, 'click', (event) => {
+ // Nothing is "clickable" in components except for .js-lpb-ui elements.
+ if (
+ !event.target.closest('.js-lpb-ui') &&
+ event.target.closest('.js-lpb-component')
+ ) {
+ event.preventDefault();
+ event.stopPropagation();
+ return false;
+ }
// Move up / down buttons.
if (event.target.matches('.lpb-up')) {
return nav(event.target.closest('.js-lpb-component'), -1);
@@ -907,11 +918,23 @@
});
/**
- * Removes hover state and tooltip when scrolling.
+ * Scroll handler, throttled with requestAnimationFrame().
+ * - Removes hover state and tooltip when scrolling.
+ * - Sets position for the active component's controls.
*/
- listen(window, 'scroll', () => {
+ let ticking = false;
+ function scrollHandler() {
document.querySelector('.lpb-hover-label')?.remove();
setControlsPosition();
+ }
+ listen(window, 'scroll', () => {
+ if (!ticking) {
+ window.requestAnimationFrame(() => {
+ scrollHandler();
+ ticking = false;
+ });
+ }
+ ticking = true;
});
listen(window, 'resize', () => {
diff --git a/layout_paragraphs.module b/layout_paragraphs.module
index f1a18c6..9981d86 100644
--- a/layout_paragraphs.module
+++ b/layout_paragraphs.module
@@ -142,6 +142,12 @@ function layout_paragraphs_preprocess_radios(&$variables) {
* @todo Consider adding an alter/info hook for altering this output.
*/
function layout_paragraphs_preprocess_layout_paragraphs_builder_controls(&$variables) {
+ static $show_layout_plugin_labels = NULL;
+ if ($show_layout_plugin_labels === NULL) {
+ $settings = \Drupal::config('layout_paragraphs.settings');
+ $show_layout_plugin_labels = \Drupal::config('layout_paragraphs.settings')
+ ->get('show_layout_plugin_labels');
+ }
/** @var \Drupal\layout_paragraphs\LayoutParagraphsLayout $layout */
$layout = $variables['layout_paragraphs_layout'];
$uuid = $variables['uuid'];
@@ -253,6 +259,12 @@ function layout_paragraphs_preprocess_layout_paragraphs_builder_controls(&$varia
],
];
if ($component->isLayout()) {
+ if ($show_layout_plugin_labels) {
+ $section = $layout->getLayoutSection($entity);
+ $layout_plugin_id = $section->getLayoutId();
+ $definition = \Drupal::service('plugin.manager.core.layout')->getDefinition($layout_plugin_id);
+ $variables['controls']['label']['#value'] .= ' - ' . $definition->getLabel();
+ }
$variables['attributes']['class'][] = 'is-layout';
}
}
diff --git a/src/Form/LayoutParagraphsSettingsForm.php b/src/Form/LayoutParagraphsSettingsForm.php
index 547e41e..89f7f78 100644
--- a/src/Form/LayoutParagraphsSettingsForm.php
+++ b/src/Form/LayoutParagraphsSettingsForm.php
@@ -77,6 +77,13 @@ class LayoutParagraphsSettingsForm extends ConfigFormBase {
'#default_value' => $lp_config->get('show_layout_labels'),
];
+ $form['show_layout_plugin_labels'] = [
+ '#type' => 'checkbox',
+ '#title' => $lp_config_schema['show_layout_plugin_labels']['label'],
+ '#description' => $lp_config_schema['show_layout_plugin_labels']['description'],
+ '#default_value' => $lp_config->get('show_layout_plugin_labels'),
+ ];
+
$form['paragraph_behaviors_label'] = [
'#type' => 'textfield',
'#title' => $this->t('Paragraph Behaviors Fieldset Label'),
@@ -110,6 +117,7 @@ class LayoutParagraphsSettingsForm extends ConfigFormBase {
$lp_config = $this->configFactory()->getEditable('layout_paragraphs.settings');
$lp_config->set('show_paragraph_labels', $form_state->getValue('show_paragraph_labels'));
$lp_config->set('show_layout_labels', $form_state->getValue('show_layout_labels'));
+ $lp_config->set('show_layout_plugin_labels', $form_state->getValue('show_layout_plugin_labels'));
$lp_config->set('paragraph_behaviors_label', $form_state->getValue('paragraph_behaviors_label'));
$lp_config->set('paragraph_behaviors_position', $form_state->getValue('paragraph_behaviors_position'));
$lp_config->set('empty_message', $form_state->getValue('empty_message'));
--
GitLab