feat: integrate with htmx

public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/ajax_content_controller.js

@@ -1,73 +0,0 @@
-import { Controller } from '@hotwired/stimulus'
-import { useDebounce } from 'stimulus-use'
-import { useFetch} from '../mixins/use_fetch'
-
-export default class extends Controller {
-
-    static debounces = [ 'load' ]
-
-    static values = {
-        uri: String,
-        loading: Boolean,
-        loaded: Boolean,
-    }
-
-    static targets = [ 'container', 'trigger' ]
-
-    initialize() {
-        useDebounce(this)
-        useFetch(this)
-    }
-
-    connect() {
-        window.addEventListener('scroll', () => {
-            this.load()
-        }, { passive: true })
-    }
-
-    disconnect() {
-        window.removeEventListener('scroll', () => {
-            this.load()
-        })
-    }
-
-    load() {
-        if (true === this.loadedValue) {
-            return
-        }
-        if (false === this.inViewport()) {
-            return
-        }
-        this.loadHtml()
-    }
-
-    loadHtml() {
-        this.loadingValue = true
-        fetch(this.uriValue)
-            .then(this.checkStatus)
-            .then(this.parseHTML)
-            .then(html => {
-                this.loadedValue = true
-                this.containerTarget.innerHTML = html
-                this.triggerTarget.remove()
-                htmx.process(this.containerTarget)
-            })
-            .catch(() => {
-                this.loadedValue = false
-            })
-            .finally(() => {
-                this.loadingValue = false
-            })
-    }
-
-    inViewport() {
-        const rect = this.triggerTarget.getBoundingClientRect()
-        return (
-            rect.top >= 0 &&
-            rect.left >= 0 &&
-            rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
-            rect.right <= (window.innerWidth || document.documentElement.clientWidth)
-        )
-    }
-
-}

public/typo3conf/ext/ep_theme/Resources/Private/Templates/Hotel/DetailEvent.html

@@ -20,12 +20,9 @@
             <f:if condition="{product.bookable}">
                 <h2>Buchungsoptionen</h2>
                 <div class="ajax-content-wrapper"
-                     data-controller="ajax-content"
+                     hx-get="{ep:uri.ajax(action: 'pricetableHtml', controller: 'AjaxTable', pageUid: settings.defaultAjaxUid, arguments: '{product: product, hotel: hotel, bookingUrlTemplateCode: settings.bookingUrlTemplateCode}', format: 'html')}"
-                     data-ajax-content-uri-value="{ep:uri.ajax(action: 'pricetableHtml', controller: 'AjaxTable', pageUid: settings.defaultAjaxUid, arguments: '{product: product, hotel: hotel, bookingUrlTemplateCode: settings.bookingUrlTemplateCode}', format: 'html')}">
+                     hx-trigger="revealed">
-                    <div class="ajax-content" data-ajax-content-target="container"></div>
+                    <f:image src="EXT:ep_theme/Resources/Public/images/ajax-loader-white.gif" alt="Loading" title="Loading"/>
-                    <div data-ajax-content-target="trigger">
-                        <f:image src="EXT:ep_theme/Resources/Public/images/ajax-loader-white.gif" alt="Loading" title="Loading"/>
-                    </div>
                 </div>
             </f:if>
             <h2>Ausstattung</h2>

public/typo3conf/ext/ep_theme/Resources/Private/Templates/Pricetable/Event.html

@@ -6,12 +6,9 @@
 
 	<f:section name="Main">
         <div class="ajax-content-wrapper"
-             data-controller="ajax-content"
+             hx-get="{ep:uri.ajax(action: 'pricetableHtml', controller: 'AjaxTable', pageUid: settings.defaultAjaxUid, arguments: '{product: product, hotel: hotel, bookingUrlTemplateCode: settings.bookingUrlTemplateCode}', format: 'html')}"
-             data-ajax-content-uri-value="{ep:uri.ajax(extensionName: 'epproducts', action: 'eventPricetable', controller: 'AjaxTable', pageUid: settings.defaultAjaxUid, arguments: '{product: productUid}', format: 'html')}">
+             hx-trigger="revealed">
-            <div class="ajax-content" data-ajax-content-target="container"></div>
+            <f:image src="EXT:ep_theme/Resources/Public/images/ajax-loader-white.gif" alt="Loading" title="Loading"/>
-            <div data-ajax-content-target="trigger">
-                <f:image src="EXT:ep_theme/Resources/Public/images/ajax-loader-white.gif" alt="Loading" title="Loading"/>
-            </div>
         </div>
 	</f:section>