From c99202712e4afdcaae70fce00af831e0ce1ba773 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Fromme?= <fromme@dreipunktnull.com>
Date: Thu, 14 Nov 2024 16:52:36 +0100
Subject: [PATCH] feat: integrate with htmx

---
 .../js/controllers/ajax_content_controller.js | 73 -------------------
 .../Private/Templates/Hotel/DetailEvent.html  |  9 +--
 .../Private/Templates/Pricetable/Event.html   |  9 +--
 3 files changed, 6 insertions(+), 85 deletions(-)
 delete mode 100644 public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/ajax_content_controller.js

diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/ajax_content_controller.js b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/ajax_content_controller.js
deleted file mode 100644
index c3137608..00000000
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/ajax_content_controller.js
+++ /dev/null
@@ -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)
-        )
-    }
-
-}
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Hotel/DetailEvent.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Hotel/DetailEvent.html
index 37c3b9af..1a0b51ce 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Hotel/DetailEvent.html
+++ b/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"
-                     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')}">
-                    <div class="ajax-content" data-ajax-content-target="container"></div>
-                    <div data-ajax-content-target="trigger">
-                        <f:image src="EXT:ep_theme/Resources/Public/images/ajax-loader-white.gif" alt="Loading" title="Loading"/>
-                    </div>
+                     hx-get="{ep:uri.ajax(action: 'pricetableHtml', controller: 'AjaxTable', pageUid: settings.defaultAjaxUid, arguments: '{product: product, hotel: hotel, bookingUrlTemplateCode: settings.bookingUrlTemplateCode}', format: 'html')}"
+                     hx-trigger="revealed">
+                    <f:image src="EXT:ep_theme/Resources/Public/images/ajax-loader-white.gif" alt="Loading" title="Loading"/>
                 </div>
             </f:if>
             <h2>Ausstattung</h2>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Pricetable/Event.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Pricetable/Event.html
index 2b67668f..b7c5d20e 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Pricetable/Event.html
+++ b/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"
-             data-ajax-content-uri-value="{ep:uri.ajax(extensionName: 'epproducts', action: 'eventPricetable', controller: 'AjaxTable', pageUid: settings.defaultAjaxUid, arguments: '{product: productUid}', format: 'html')}">
-            <div class="ajax-content" data-ajax-content-target="container"></div>
-            <div data-ajax-content-target="trigger">
-                <f:image src="EXT:ep_theme/Resources/Public/images/ajax-loader-white.gif" alt="Loading" title="Loading"/>
-            </div>
+             hx-get="{ep:uri.ajax(action: 'pricetableHtml', controller: 'AjaxTable', pageUid: settings.defaultAjaxUid, arguments: '{product: product, hotel: hotel, bookingUrlTemplateCode: settings.bookingUrlTemplateCode}', format: 'html')}"
+             hx-trigger="revealed">
+            <f:image src="EXT:ep_theme/Resources/Public/images/ajax-loader-white.gif" alt="Loading" title="Loading"/>
         </div>
 	</f:section>