feat: implement screendesign

assets/controllers/booking_controller.js

@@ -1,29 +0,0 @@
-import { Controller } from '@hotwired/stimulus'
-
-export default class extends Controller {
-    static targets = ['field']
-    static values = { availabilities: Object }
-
-    toggle(event) {
-        let field = event.target
-        let id = field.value
-        let availabilities = this.availabilitiesValue
-        if (field.checked) {
-            availabilities[id].available--
-        } else {
-            availabilities[id].available++
-        }
-        field.disabled = 0 >= availabilities[id].available
-        field.classList.toggle('cursor-not-allowed', field.disabled)
-        this.availabilitiesValue = availabilities
-    }
-
-    availabilitiesValueChanged(availabilities) {
-        this.fieldTargets.forEach((field) => {
-            let id = field.value
-            if (false === field.checked && 0 >= availabilities[id].available) {
-                field.disabled = true
-            }
-        })
-    }
-}

assets/controllers/gravatar_controller.js

@@ -1,17 +0,0 @@
-import {Controller} from '@hotwired/stimulus'
-
-export default class extends Controller {
-    static values = {url: String, alt: String}
-    static classes = ['image']
-
-    connect() {
-        const img = new Image()
-        img.onload = () => {
-            img.classList.add(...this.imageClasses)
-            this.element.innerHTML = ''
-            this.element.appendChild(img)
-        }
-        img.alt = this.altValue
-        img.src = this.urlValue
-    }
-}

assets/controllers/iframe_controller.js

@@ -1,14 +0,0 @@
-import { Controller } from '@hotwired/stimulus'
-
-export default class extends Controller {
-    static values = { offsetTop: { type: Number}}
-    connect() {
-        if ('parentIframe' in window) {
-            window.iFrameResizer = {
-                onReady: function () {
-                    window.parentIFrame.scrollTo(0, this.offsetTopValue)
-                }
-            }
-        }
-    }
-}

assets/controllers/loading_controller.js

@@ -13,11 +13,17 @@ export default class extends Controller {
         this.boundHandleBeforeRequest = this.handleBeforeRequest.bind(this)
         this.boundHandleAfterRequest = this.handleAfterRequest.bind(this)
         this.boundHandleTimeout = this.handleTimeout.bind(this)
+        this.boundHandlePageShow = this.handlePageShow.bind(this)
+        this.boundHandleHistoryRestore = this.handleHistoryRestore.bind(this)
 
         // Listen to HTMX events
         document.body.addEventListener('htmx:beforeRequest', this.boundHandleBeforeRequest)
         document.body.addEventListener('htmx:afterRequest', this.boundHandleAfterRequest)
         document.body.addEventListener('htmx:timeout', this.boundHandleTimeout)
+        document.body.addEventListener('htmx:historyRestore', this.boundHandleHistoryRestore)
+
+        // Listen for browser back/forward navigation
+        window.addEventListener('pageshow', this.boundHandlePageShow)
     }
 
     disconnect() {
@@ -25,6 +31,8 @@ export default class extends Controller {
         document.body.removeEventListener('htmx:beforeRequest', this.boundHandleBeforeRequest)
         document.body.removeEventListener('htmx:afterRequest', this.boundHandleAfterRequest)
         document.body.removeEventListener('htmx:timeout', this.boundHandleTimeout)
+        document.body.removeEventListener('htmx:historyRestore', this.boundHandleHistoryRestore)
+        window.removeEventListener('pageshow', this.boundHandlePageShow)
 
         // Clear any pending timeout
         if (this.debounceTimeout) {
@@ -76,6 +84,18 @@ export default class extends Controller {
         alert('Die Anfrage hat zu lange gedauert. Bitte versuchen Sie es erneut. Falls das Problem weiterhin besteht, kontaktieren Sie bitte unseren Support.')
     }
 
+    handlePageShow(event) {
+        // event.persisted is true when page is restored from bfcache (back/forward navigation)
+        if (event.persisted) {
+            this.hide()
+        }
+    }
+
+    handleHistoryRestore(event) {
+        // HTMX history restore - hide loading indicator
+        this.hide()
+    }
+
     show() {
         this.isVisible = true
         this.indicatorTarget.classList.remove(this.hiddenClass)

assets/controllers/toggle_controller.js

@@ -1,8 +1,8 @@
-import { Controller } from '@hotwired/stimulus'
+import {Controller} from '@hotwired/stimulus'
 
 export default class extends Controller {
-    static classes = ['closed']
-    static targets = ['toggle', 'icon']
+    static classes = ['closed', 'open', 'iconOpen']
+    static targets = ['content', 'icon', 'container']
     static values = {
         open: {
             type: Boolean,
@@ -15,7 +15,7 @@ export default class extends Controller {
     }
 
     initialize() {
-        this.target = this.hasToggleTarget ? this.toggleTarget : this.element
+        this.target = this.hasContentTarget ? this.contentTarget : this.element
 
         // Restore state from storage if storageKey is provided
         if (this.hasStorageKey()) {
@@ -39,7 +39,16 @@ export default class extends Controller {
         this.target.classList.toggle(this.closedClass, false === open)
 
         if (this.hasIconTarget) {
-            this.iconTarget.classList.toggle('rotate-90', true === open)
+            let iconClass = this.hasIconOpenClass ? this.iconOpenClass : 'rotate-90'
+            this.iconTarget.classList.toggle(iconClass, true === open)
+        }
+
+        // Toggle class on container element (or controller element) if specified
+        if (this.hasOpenClass) {
+            const container = this.hasContainerTarget ? this.containerTarget : this.element
+            this.openClasses.forEach(cls => {
+                container.classList.toggle(cls, true === open)
+            })
         }
 
         // Save state to storage if storageKey is provided