homepage, new newsletter section, multilang support

resources/js/stimulus/appear-controller.js

@@ -0,0 +1,20 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+    static classes = ['visible']
+
+    connect() {
+        this.observer = new IntersectionObserver(([entry]) => {
+            if (!entry.isIntersecting) return
+
+            this.element.classList.add(this.visibleClass)
+            this.observer.disconnect()
+        }, { threshold: 0.3 })
+
+        this.observer.observe(this.element)
+    }
+
+    disconnect() {
+        this.observer?.disconnect()
+    }
+}

resources/js/stimulus/carousel-controller.js

@@ -0,0 +1,28 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+    static targets = ['slide']
+    static values = { index: { type: Number, default: 0 } }
+
+    connect() {
+        this.showSlide()
+    }
+
+    next() {
+        this.indexValue = (this.indexValue + 1) % this.slideTargets.length
+    }
+
+    prev() {
+        this.indexValue = (this.indexValue - 1 + this.slideTargets.length) % this.slideTargets.length
+    }
+
+    indexValueChanged() {
+        this.showSlide()
+    }
+
+    showSlide() {
+        this.slideTargets.forEach((slide, i) => {
+            slide.classList.toggle('hidden', i !== this.indexValue)
+        })
+    }
+}

resources/js/stimulus/index.js

@@ -3,7 +3,9 @@
 // import HelloController from './controllers/hello_controller';
 // application.register('hello', HelloController);
 
+import AppearController         from './appear-controller'
 import BackToTopController      from './back-to-top-controller'
+import CarouselController       from './carousel-controller'
 import ProductFormController   from './product-form-controller'
 import ProductGalleryController from './product-gallery-controller'
 import QuantityController      from './quantity-controller'
@@ -11,7 +13,9 @@ import StarRatingController    from './star-rating-controller'
 import TabsController          from './tabs-controller'
 
 export function registerControllers(application) {
+    application.register('appear',           AppearController)
     application.register('back-to-top',      BackToTopController)
+    application.register('carousel',         CarouselController)
     application.register('product-form',     ProductFormController)
     application.register('product-gallery',  ProductGalleryController)
     application.register('quantity',         QuantityController)