From 81d7e192db7218e7f0af118bedbc62e5b0226816 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B6rn=20Fromme?= Date: Mon, 16 Aug 2021 14:08:15 +0200 Subject: [PATCH] WIP Migrate to stimulus.js --- .../Resources/Private/Assets/js/_app.js | 4 - .../Private/Assets/js/components/search.js | 126 ------------------ .../Private/Assets/js/components/watchlist.js | 22 --- .../slider_controller.js} | 14 +- .../js/controllers/watchlist_controller.js | 36 +++++ .../Private/Partials/HeaderSlider.html | 4 +- .../Private/Partials/Hotel/Details.html | 4 +- .../Partials/News/Detail/MediaContainer.html | 4 +- .../Partials/Product/HeaderDetail.html | 4 +- .../Private/Partials/Region/Details.html | 4 +- .../Private/Templates/City/Teasergroup.html | 4 +- .../Private/Templates/Concept/Detail.html | 4 +- .../Templates/Concept/Teasergroup.html | 4 +- .../Private/Templates/Country/Detail.html | 4 +- .../Hotel/DateIndependentTeasergroup.html | 4 +- .../Private/Templates/Hotel/Teasergroup.html | 4 +- .../Templates/Product/Teasergroup.html | 4 +- .../Private/Templates/Region/Teasergroup.html | 4 +- .../Private/Templates/Watchlist/List.html | 8 +- 19 files changed, 89 insertions(+), 173 deletions(-) delete mode 100644 public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/search.js delete mode 100644 public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/watchlist.js rename public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/{components/sliders.js => controllers/slider_controller.js} (89%) create mode 100644 public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/watchlist_controller.js diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_app.js b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_app.js index 22868565..be22dc92 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_app.js +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_app.js @@ -12,9 +12,7 @@ smoothscroll.polyfill() // Alpine stuff import Alpine from 'alpinejs' import parseAppConfig from './components/appconfig' -import initSliders from './components/sliders' import appendPaCode from './components/pacode' -import watchlist from './components/watchlist' import productDetail from './components/product-detail' import daytripDateSelect from './components/daytrip-date-select' import searchBar from './components/search-bar' @@ -23,9 +21,7 @@ import contactForm from './components/contact-form' const appConfig = parseAppConfig() appendPaCode(appConfig) -initSliders() Alpine.store('appconfig', appConfig) -Alpine.data('watchlist', watchlist) Alpine.data('productDetail', productDetail) Alpine.data('daytripDateSelect', daytripDateSelect) Alpine.data('searchBar', searchBar) diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/search.js b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/search.js deleted file mode 100644 index f12d2ce6..00000000 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/search.js +++ /dev/null @@ -1,126 +0,0 @@ -import axios from 'axios' -import flatpickr from 'flatpickr'; -import { German } from 'flatpickr/dist/l10n/de'; -import defaultFilterSettings from '../_filtersettings' - -export default props => ({ - loading: false, - show: null, - picker: null, - uri: props.uri, - datePresets: props.datePresets, - filterSettings: props.initialFilterSettings, - defaultFilterSettings, - filterCount: 0, - dateRangeSelected: { from: null, to: null }, - dateRangeLabel: null, - contentWrapper: null, - init() { - this.$watch('dateRangeSelected', () => { - this.updateDateRangeLabel() - }) - this.contentWrapper = this.$refs.container - this.updateFilterCount() - this.load() - }, - refresh() { - this.updateFilterCount() - this.load() - }, - load() { - this.loading = true - let data = new URLSearchParams({ - 'tx_epproducts_ajax[filterSettings]': JSON.stringify(this.filterSettings) - }) - axios.post(this.uri, data) - .then(response => { - this.contentWrapper.innerHTML = response.data - }) - .finally(() => { - this.loading = false - if (null !== this.filterSettings.dateFrom && null !== this.filterSettings.dateTo) { - this.picker.setDate([ this.filterSettings.dateFrom, this.filterSettings.dateTo ]) - this.dateRangeSelected = { from: new Date(this.filterSettings.dateFrom), to: new Date(this.filterSettings.dateTo) } - } - this.$el.scrollIntoView({behavior: 'smooth'}) - }) - }, - reset() { - this.filterSettings = {...this.defaultFilterSettings} - this.dateRangeSelected = { from: null, to: null } - this.dateRangeLabel = null - this.refresh() - }, - initDatePicker(minDate, maxDate) { - this.picker = flatpickr(this.$refs.picker, { - mode: 'range', - locale: German, - inline: true, - minDate: minDate, - maxDate: maxDate, - onChange: selectedDates => { - if (selectedDates.length === 2) { - this.dateRangeSelected = { from: selectedDates[0], to: selectedDates[1] } - this.updateFilterSettings({ - dateFrom: flatpickr.formatDate(selectedDates[0], 'Y-m-d'), - dateTo: flatpickr.formatDate(selectedDates[1], 'Y-m-d'), - }) - this.show = null - this.refresh() - } - } - }) - }, - updateFilterSettings(values) { - let filterSettings = {...this.filterSettings} - this.filterSettings = {...filterSettings, ...values} - }, - selectDateRangePreset(preset) { - let dateFrom = new Date(preset.dateFrom) - let dateTo = new Date(preset.dateTo) - this.picker.setDate([ dateFrom, dateTo ]) - this.dateRangeSelected = { from: dateFrom, to: dateTo } - this.updateFilterSettings({ - dateFrom: flatpickr.formatDate(dateFrom, 'Y-m-d'), - dateTo: flatpickr.formatDate(dateTo, 'Y-m-d'), - }) - this.show = null - this.refresh() - }, - resetDateRange() { - this.dateRangeSelected = { from: null, to: null } - this.updateFilterSettings({ - dateFrom: null, - dateTo: null, - }) - this.picker.clear() - this.picker.jumpToDate() - this.show = null - this.refresh() - }, - updateDateRangeLabel() { - let dateRangeLabel = '' - if (null !== this.dateRangeSelected.from && null !== this.dateRangeSelected.to) { - let dateFrom = this.dateRangeSelected.from - let dateTo = this.dateRangeSelected.to - dateRangeLabel = `${flatpickr.formatDate(dateFrom, 'd.m.Y')} - ${flatpickr.formatDate(dateTo, 'd.m.Y')}` - } - this.dateRangeLabel = dateRangeLabel - }, - updateFilterCount() { - let count = 0 - if (this.filterSettings.dateFrom !== null) count++ - if (this.filterSettings.dateTo !== null) count++ - if (this.filterSettings.countryUids.length > 0) count++ - if (this.filterSettings.regionUids.length > 0) count++ - if (this.filterSettings.cityUids.length > 0) count++ - if (this.filterSettings.conceptUids.length > 0) count++ - if (this.filterSettings.hotelTypes.length > 0) count++ - if (this.filterSettings.boardTypes.length > 0) count++ - if (this.filterSettings.roomTypes.length > 0) count++ - if (this.filterSettings.priceRanges.length > 0) count++ - if (this.filterSettings.bus) count++ - if (this.filterSettings.pax > 2) count++ - this.filterCount = count - }, -}) diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/watchlist.js b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/watchlist.js deleted file mode 100644 index 392e75bc..00000000 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/watchlist.js +++ /dev/null @@ -1,22 +0,0 @@ -import axios from 'axios' - -export default uri => ({ - loading: false, - uri, - init() { - this.load() - }, - load() { - this.loading = true - let data = new URLSearchParams({ - 'tx_epproducts_ajax[watchlistUids]': JSON.stringify(this.$store.watchlist), - }) - axios.post(this.uri, data) - .then(response => { - this.$refs.watchlist.innerHTML = response.data - }) - .finally(() => { - this.loading = false - }) - } -}) diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/sliders.js b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/slider_controller.js similarity index 89% rename from public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/sliders.js rename to public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/slider_controller.js index 064be4b2..b18c3bf5 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/sliders.js +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/slider_controller.js @@ -1,3 +1,4 @@ +import { Controller } from 'stimulus' import Splide from '@splidejs/splide' const defaultOptions = { @@ -90,13 +91,16 @@ const presets = { }, } -export default () => { - document.querySelectorAll( '[data-slider]').forEach(element => { +export default class extends Controller { + + static values = { preset: String } + + connect() { let options = {} - const preset = element.dataset.slider + let preset = this.presetValue if (preset in presets) { options = presets[preset] } - new Splide(element, options).mount() - }) + new Splide(this.element, options).mount() + } } diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/watchlist_controller.js b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/watchlist_controller.js new file mode 100644 index 00000000..4932f15c --- /dev/null +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/watchlist_controller.js @@ -0,0 +1,36 @@ +import { Controller } from 'stimulus' +import { useFetch } from '../mixins/use_fetch' + +export default class extends Controller { + + static targets = [ 'container', 'loadingIndicator' ] + + static values = { + uri: String, + loading: Boolean, + } + + initialize() { + useFetch(this) + } + + connect() { + this.load() + } + + load() { + this.loadingValue = true + let data = new URLSearchParams({ + 'tx_epproducts_ajax[watchlistUids]': sessionStorage.getItem('myep-watchlist'), + }) + fetch(this.uriValue, { method: 'POST', body: data }) + .then(this.checkStatus) + .then(this.parseHTML) + .then(html => { + this.containerTarget.innerHTML = html + }) + .finally(() => { + this.loadingValue = false + }) + } +} diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/HeaderSlider.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/HeaderSlider.html index 3f964a94..294ef084 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/HeaderSlider.html +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/HeaderSlider.html @@ -3,7 +3,9 @@ xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
-
+
    diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Hotel/Details.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Hotel/Details.html index 6ea6850a..f930a213 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Hotel/Details.html +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Hotel/Details.html @@ -17,7 +17,9 @@ -
    +
      diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/News/Detail/MediaContainer.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/News/Detail/MediaContainer.html index 34095d04..f566e4f9 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/News/Detail/MediaContainer.html +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/News/Detail/MediaContainer.html @@ -4,7 +4,9 @@ -
      +
        diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/HeaderDetail.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/HeaderDetail.html index 5d94839b..81705c13 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/HeaderDetail.html +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/HeaderDetail.html @@ -6,7 +6,9 @@
        -
        +
          diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Region/Details.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Region/Details.html index c98261f7..b3d478e0 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Region/Details.html +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Region/Details.html @@ -22,7 +22,9 @@ {region.skiArea -> f:format.html()} -
          +
            diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/City/Teasergroup.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/City/Teasergroup.html index bb7b0e0b..9715ebc2 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/City/Teasergroup.html +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/City/Teasergroup.html @@ -9,7 +9,9 @@
            -
            +
              diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Concept/Detail.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Concept/Detail.html index 540b7c80..9b59b60c 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Concept/Detail.html +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Concept/Detail.html @@ -24,7 +24,9 @@
              {concept.description -> f:format.html()} -
              +
                diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Concept/Teasergroup.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Concept/Teasergroup.html index 7b4a6e05..0da4e48a 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Concept/Teasergroup.html +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Concept/Teasergroup.html @@ -8,7 +8,9 @@
                -
                +
                  diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Country/Detail.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Country/Detail.html index 28673bbd..52dc0f45 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Country/Detail.html +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Country/Detail.html @@ -24,7 +24,9 @@
                  {country.description -> f:format.html()} -
                  +
                    diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Hotel/DateIndependentTeasergroup.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Hotel/DateIndependentTeasergroup.html index 26a6c3c7..ce123413 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Hotel/DateIndependentTeasergroup.html +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Hotel/DateIndependentTeasergroup.html @@ -7,7 +7,9 @@
                    -
                    +
                      diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Hotel/Teasergroup.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Hotel/Teasergroup.html index 48a73541..72f4f444 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Hotel/Teasergroup.html +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Hotel/Teasergroup.html @@ -7,7 +7,9 @@
                      -
                      +
                        diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Teasergroup.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Teasergroup.html index b7848dd6..d72fa418 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Teasergroup.html +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Teasergroup.html @@ -12,7 +12,9 @@ -
                        +
                          diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Region/Teasergroup.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Region/Teasergroup.html index d31ecbd8..18cb4337 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Region/Teasergroup.html +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Region/Teasergroup.html @@ -8,7 +8,9 @@
                          -
                          +
                            diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Watchlist/List.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Watchlist/List.html index e1acda6c..75faefa1 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Watchlist/List.html +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Watchlist/List.html @@ -7,9 +7,11 @@
                            -
                            -
                            + data-controller="watchlist" + data-watchlist-uri-value="{ep:uri.ajax(action: 'list', controller: 'AjaxWatchlist', pageUid: '{settings.defaultAjaxUid}')}"> +
                            +