Contrib.social

Dispatch client side JS event after modifying layouts or components

Open on Drupal.org →
Created on 7 March 2023, about 2 years ago
Updated 18 April 2024, 12 months ago

Problem/Motivation

There are some visually appealing layouts that require the help of client side JS libraries. Examples are masonry layout or sliders. As long as those JS libs do change only styles and do not change the HTML structure of the page, they are compatible with Layout paragraphs, even in admin mode.

But those libs need to update their layout information when their children components or their parent container are changed. Basically all those libs offer a function to trigger a reflow, but they need the info when to trigger the reflow.

(Note: Do not use jQuery "slick" lib or sliders in carousel-mode in admin, these libs modify the HTML source on clienbt side and would break any Drupal admin functionality.)

Proposed resolution

Add a Drupal behavior to the all Ajax responses, firing a custom JS event. A developer then can react in his own JS assets to the fired event.

Remaining tasks

Find out which events to fire. I suggest 2 custom events:

  • layout_paragraphs_window_updated - fired after any CRUD action on the window object
  • layout_paragraphs_component_updated - fired after any CRUD action on container level (<div> of the layout or content paragraph entity)
✨ Feature request
Status

Active

Version

2.0

Component

Code

Created by

🇦🇹Austria hudri Austria

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • Comment 12 months ago →
    🇺🇸United States xpersonas

    This would be extremely useful. I was hoping these events already existed, but I guess they do not. I'm currently debating how to handle a slider. Without an event, I may just have to add the text "Please save this page to see updated component." which isn't the bet UX for the admin.

  • Status changed to Closed: works as designed 28 days ago
  • Comment 28 days ago →
    🇺🇸United States pixelwhip

    I think this behavior belongs in the JS of the layout itself.

    Rather than listening for a custom event provided by Layout Paragraphs, I'd recommend writing a MutationObservor and calling the reflow, rerender, refresh etc. whenever attributes or the subtree change. This approach would not require extra API surface in Layout Paragraphs, use existing browser functionality and will work with whatever conceivable thing that might dynamically alter the layout client side – not just Layout Paragraphs.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024