Dispatch client side JS event after modifying layouts or components

Created on 7 March 2023, over 1 year ago
Updated 18 April 2024, 2 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.

  • πŸ‡ΊπŸ‡Έ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.

Production build 0.69.0 2024