issues/27: cabinet owl.carousel Stimulus fix

.gitignore

@@ -25,6 +25,6 @@ yarn-error.log
 ###< symfony/webpack-encore-bundle ###
 /*.md
 /*.lock
+!/yarn.lock
 /symfony.lock
-/yarn.lock
 /service.sh

assets/controllers/slideshow_controller.js

@@ -1,16 +1,13 @@
 import { Controller } from 'stimulus';
 import 'owl.carousel2/dist/assets/owl.carousel.css';
 import 'owl.carousel2/dist/assets/owl.theme.default.css';
-import 'owl.carousel2';
 
 /*
- * This is an example Stimulus controller!
+ * owl.carousel2 is a legacy jQuery plugin that reads `window.jQuery` at module
- *
+ * evaluation time. When statically imported it lands in the eager shared chunk,
- * Any element with a data-controller="hello" attribute will cause
+ * and depending on webpack chunk ordering it can evaluate before jQuery is ready,
- * this controller to be executed. The name "hello" comes from the filename:
+ * throwing and breaking the whole Stimulus bootstrap. Load it lazily inside
- * hello_controller.js -> "hello"
+ * connect() so it can never break unrelated controllers (e.g. registration).
- *
- * Delete this file or adapt it for your use!
  */
 export default class extends Controller {
     static targets = ["showid"];
@@ -18,31 +15,36 @@ export default class extends Controller {
     connect() {
         var slideshow = this.element;
 
-        $(slideshow).owlCarousel({
+        import('owl.carousel2').then(function() {
-            nav: true,
+            $(slideshow).owlCarousel({
-            margin: 15,
+                nav: true,
-            autoplay: false,
+                margin: 15,
-            autoplayTimeout: 7000,
+                autoplay: false,
-            autoplayHoverPause: true,
+                autoplayTimeout: 7000,
-            navText : ['<span class="swiper-button-prev">&nbsp;</span>','<span class="swiper-button-next">&nbsp;</span>'],
+                autoplayHoverPause: true,
-                responsive: {
+                navText : ['<span class="swiper-button-prev">&nbsp;</span>','<span class="swiper-button-next">&nbsp;</span>'],
-                0: {
+                    responsive: {
-                    items: 1,
+                    0: {
-                    dots: false,
+                        items: 1,
-                },
+                        dots: false,
-                600: {
+                    },
-                    items: 2,
+                    600: {
-                    dots: false,
+                        items: 2,
-                },
+                        dots: false,
-                1000: {
+                    },
-                    items: 2,
+                    1000: {
-                    dots: false,
+                        items: 2,
+                        dots: false,
+                    }
                 }
-            }
+            });
+
+            slideshow.classList.remove('hide');
+        }).catch(function(e) {
+            console.warn('owl.carousel failed to load', e);
+            slideshow.classList.remove('hide');
         });
 
-        slideshow.classList.remove('hide');
-    
         slideshow.querySelectorAll('.show-msg').forEach(function (el) {
             el.addEventListener('click', function (evn) {
                 var showId = evn.target.dataset.showId;

package.json

@@ -21,6 +21,7 @@
     },
     "license": "UNLICENSED",
     "private": true,
+    "packageManager": "yarn@1.22.22",
     "scripts": {
         "dev-server": "encore dev-server",
         "dev": "encore dev",