From 3e30cb3d789fdc207d55c620909686022e76119c Mon Sep 17 00:00:00 2001
From: Florent Torregrosa <florent.torregrosa@gmail.com>
Date: Fri, 29 Nov 2024 23:24:55 +0100
Subject: [PATCH] Issue #3484065 by grimreaper, pdureau: Carousel item: remove
active prop, handle automatically with JS.
---
.../carousel/carousel.ui_patterns.yml | 9 +++++--
templates/patterns/carousel/js/carousel.js | 26 +++++++++++++++++++
.../carousel_item.ui_patterns.yml | 7 -----
.../pattern-carousel-item.html.twig | 1 -
ui_examples/carousel.ui_examples.yml | 2 --
5 files changed, 33 insertions(+), 12 deletions(-)
create mode 100644 templates/patterns/carousel/js/carousel.js
diff --git a/templates/patterns/carousel/carousel.ui_patterns.yml b/templates/patterns/carousel/carousel.ui_patterns.yml
index 5d226243..82966015 100644
--- a/templates/patterns/carousel/carousel.ui_patterns.yml
+++ b/templates/patterns/carousel/carousel.ui_patterns.yml
@@ -56,8 +56,6 @@ carousel:
preview:
- type: "pattern"
id: "carousel_item"
- settings:
- active: true
fields:
image:
theme: "image"
@@ -97,3 +95,10 @@ carousel:
- type: "html_tag"
tag: "p"
value: "Praesent commodo cursus magna, vel scelerisque nisl consectetur."
+ libraries:
+ - carousel:
+ js:
+ js/carousel.js: {}
+ dependencies:
+ - core/drupal
+ - core/once
diff --git a/templates/patterns/carousel/js/carousel.js b/templates/patterns/carousel/js/carousel.js
new file mode 100644
index 00000000..4627689e
--- /dev/null
+++ b/templates/patterns/carousel/js/carousel.js
@@ -0,0 +1,26 @@
+((Drupal, once) => {
+ Drupal.ui_suite_bootstrap_carousel = Drupal.ui_suite_bootstrap_carousel || {};
+
+ /**
+ * Set active class on the first item.
+ *
+ * @type {Drupal~behavior}
+ *
+ * @prop {Drupal~behaviorAttach} attach
+ * Attaches the behaviors for the active class.
+ */
+ Drupal.behaviors.ui_suite_bootstrap_carousel = {
+ attach(context) {
+ once('carousel-active', '.carousel', context).forEach((carousel) => {
+ const items = carousel.querySelectorAll(
+ '.carousel-inner .carousel-item',
+ );
+ if (items.length === 0) {
+ return;
+ }
+
+ items.item(0).classList.add('active');
+ });
+ },
+ };
+})(Drupal, once);
diff --git a/templates/patterns/carousel_item/carousel_item.ui_patterns.yml b/templates/patterns/carousel_item/carousel_item.ui_patterns.yml
index e1364acb..c4322397 100644
--- a/templates/patterns/carousel_item/carousel_item.ui_patterns.yml
+++ b/templates/patterns/carousel_item/carousel_item.ui_patterns.yml
@@ -5,13 +5,6 @@ carousel_item:
- 'https://getbootstrap.com/docs/5.3/components/carousel/'
category: "Carousel"
settings:
- active:
- type: "boolean"
- label: "Active"
- description: "If the carousel item is displayed."
- preview: true
- allow_expose: true
- allow_token: true
interval:
type: "number"
label: "Interval"
diff --git a/templates/patterns/carousel_item/pattern-carousel-item.html.twig b/templates/patterns/carousel_item/pattern-carousel-item.html.twig
index 13b2027f..dcf213e3 100644
--- a/templates/patterns/carousel_item/pattern-carousel-item.html.twig
+++ b/templates/patterns/carousel_item/pattern-carousel-item.html.twig
@@ -1,4 +1,3 @@
-{% set attributes = active ? attributes.addClass('active') : attributes %}
{% set attributes = interval ? attributes.setAttribute('data-bs-interval', interval) : attributes %}
<div{{ attributes.addClass('carousel-item') }}>
diff --git a/ui_examples/carousel.ui_examples.yml b/ui_examples/carousel.ui_examples.yml
index 86a908a4..71d81d96 100644
--- a/ui_examples/carousel.ui_examples.yml
+++ b/ui_examples/carousel.ui_examples.yml
@@ -16,8 +16,6 @@ render:
slides:
- type: "pattern"
id: "carousel_item"
- settings:
- active: true
fields:
image:
theme: "image"
--
GitLab