diff --git a/build/media_source/vendor/bootstrap/js/carousel.es6.js b/build/media_source/vendor/bootstrap/js/carousel.es6.js index b1b521cb1c6b5..53e7523ee3d48 100644 --- a/build/media_source/vendor/bootstrap/js/carousel.es6.js +++ b/build/media_source/vendor/bootstrap/js/carousel.es6.js @@ -4,21 +4,12 @@ window.bootstrap = window.bootstrap || {}; window.bootstrap.Carousel = Carousel; if (Joomla && Joomla.getOptions) { - // Get the elements/configurations from the PHP + // Get the elements configuration from PHP const carousels = Joomla.getOptions('bootstrap.carousel'); - // Initialise the elements + if (typeof carousels === 'object' && carousels !== null) { Object.keys(carousels).forEach((carousel) => { - const opt = carousels[carousel]; - const options = { - interval: opt.interval ? opt.interval : 5000, - keyboard: opt.keyboard ? opt.keyboard : true, - pause: opt.pause ? opt.pause : 'hover', - slide: opt.slide ? opt.slide : false, - wrap: opt.wrap ? opt.wrap : true, - touch: opt.touch ? opt.touch : true, - }; - + const options = carousels[carousel]; const elements = Array.from(document.querySelectorAll(carousel)); if (elements.length) { elements.map((el) => new window.bootstrap.Carousel(el, options)); diff --git a/libraries/src/HTML/Helpers/Bootstrap.php b/libraries/src/HTML/Helpers/Bootstrap.php index ad295309a45c8..269d465fc8733 100644 --- a/libraries/src/HTML/Helpers/Bootstrap.php +++ b/libraries/src/HTML/Helpers/Bootstrap.php @@ -125,35 +125,66 @@ public static function button($selector = ''): void * * Options for the carousel can be: * - interval number 5000 The amount of time to delay between automatically cycling an item. - * If false, carousel will not automatically cycle. * - keyboard boolean true Whether the carousel should react to keyboard events. - * - pause string| hover Pauses the cycling of the carousel on mouseenter and resumes the cycling - * boolean of the carousel on mouseleave. - * - slide string| false Autoplays the carousel after the user manually cycles the first item. - * boolean If "carousel", autoplays the carousel on load. + * - pause string| hover If set to "hover", pauses the cycling of the carousel on mouseenter and resumes the + * boolean cycling of the carousel on mouseleave. If set to false, hovering over the carousel won’t + * pause it. On touch-enabled devices, when set to "hover", cycling will pause on touchend + * (once the user finished interacting with the carousel) for two intervals, before + * automatically resuming. This is in addition to the mouse behavior. + * - ride string| false If set to true, autoplays the carousel after the user manually cycles the first item. If set + * boolean to "carousel", autoplays the carousel on load. + * - touch boolean true Whether the carousel should support left/right swipe interactions on touchscreen devices. + * - wrap boolean true Whether the carousel should cycle continuously or have hard stops. */ public static function carousel($selector = '', $params = []): void { - // Only load once if (!empty(static::$loaded[__METHOD__][$selector])) { return; } if ($selector !== '') { - // Setup options object - $opt = [ - 'interval' => (int) ($params['interval'] ?? 5000), - 'keyboard' => (bool) ($params['keyboard'] ?? true), - 'pause' => $params['pause'] ?? 'hover', - 'slide' => (bool) ($params['slide'] ?? false), - 'wrap' => (bool) ($params['wrap'] ?? true), - 'touch' => (bool) ($params['touch'] ?? true), - ]; + $opt['interval'] = 5000; + + if (isset($params['interval']) && is_numeric($params['interval'])) { + $opt['interval'] = (int) $params['interval']; + } + + $opt['keyboard'] = true; + + if (isset($params['keyboard']) && \is_bool($params['keyboard'])) { + $opt['keyboard'] = $params['keyboard']; + } + + $opt['pause'] = 'hover'; + + if (isset($params['pause']) && \in_array($params['pause'], ['hover', false], true)) { + $opt['pause'] = $params['pause']; + } + + $opt['ride'] = false; + + if (isset($params['ride']) && \in_array($params['ride'], ['carousel', true, false], true)) { + $opt['ride'] = $params['ride']; + } + + $opt['touch'] = true; - Factory::getDocument()->addScriptOptions('bootstrap.carousel', [$selector => (object) array_filter($opt)]); + if (isset($params['touch']) && \is_bool($params['touch'])) { + $opt['touch'] = $params['touch']; + } + + $opt['wrap'] = true; + + if (isset($params['wrap']) && \is_bool($params['wrap'])) { + $opt['wrap'] = $params['wrap']; + } + + Factory::getApplication()->getDocument()->addScriptOptions( + 'bootstrap.carousel', + [$selector => (object) $opt] + ); } - // Include the Bootstrap component Factory::getApplication() ->getDocument() ->getWebAssetManager()