EP/website-typo3
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP Migrate to stimulus.js and tailwind

Browse Source
This commit is contained in:
Björn Fromme
2021-08-21 17:02:02 +02:00
parent f207c74dfe
commit c03a14c519
5 changed files with 88 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_app.js
+1 -7
View File
@@ -8,13 +8,7 @@ require('picturefill')
import smoothscroll from 'smoothscroll-polyfill' import smoothscroll from 'smoothscroll-polyfill'
smoothscroll.polyfill() smoothscroll.polyfill()
// Alpine stuff // Add pacode to external links
import Alpine from 'alpinejs'
import contactForm from './components/contact-form'
Alpine.data('contactForm', contactForm)
Alpine.start()
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
const configElement = document.getElementById('appconfig') const configElement = document.getElementById('appconfig')
if (null === configElement) { if (null === configElement) {
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/contact-form.js
-35
View File
@@ -1,35 +0,0 @@
import axios from 'axios'
export default () => ({
formErrors: {},
processing: false,
success: false,
error: false,
submit() {
this.processing = true
const form = this.$refs.form
const data = new FormData(form)
axios.post(form.action, data)
.then(response => {
if (response.data.status === 'validation') {
this.formErrors = response.data.errors
} else {
this.success = true
}
})
.catch(e => {
this.error = true
})
.finally(() => {
this.processing = false
this.$el.scrollIntoView({behavior: 'smooth'})
})
},
reset() {
this.formErrors = {}
this.processing = false
this.success = false
this.error = false
this.$refs.form.reset()
}
})
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/collapse_controller.js
+1
View File
@@ -53,6 +53,7 @@ export default class extends Controller {
collapsedValueChanged() { collapsedValueChanged() {
this.containerTarget.classList.toggle('hidden', this.collapsedValue === true) this.containerTarget.classList.toggle('hidden', this.collapsedValue === true)
this.containerTarget.scrollTop = 0
if (this.hasIconTarget) { if (this.hasIconTarget) {
this.iconTarget.classList.toggle('rotate-180', this.collapsedValue === false) this.iconTarget.classList.toggle('rotate-180', this.collapsedValue === false)
} }
public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_datepicker.scss
+4 -48
View File
@@ -1,5 +1,9 @@
@import "~flatpickr/dist/flatpickr.css"; @import "~flatpickr/dist/flatpickr.css";
.flatpickr-input {
@apply hidden;
}
.flatpickr-calendar { .flatpickr-calendar {
box-shadow: none; box-shadow: none;
@@ -8,54 +12,6 @@
} }
} }
.daterange {
padding-bottom: 16px;
}
.daterange__panel {
padding: 8px 0;
.flatpickr-calendar {
margin: 0 auto;
}
}
.daterange__headline,
.daterange__presets {
text-align: center;
}
.daterange__presets {
display: flex;
justify-content: space-between;
}
.daterange__preset {
display: block;
color: theme('colors.gray.800');
.fa {
display: block;
}
}
.daterange__buttons {
display: flex;
justify-content: space-between;
}
.daterange__button {
color: theme('colors.gray.800');
border: none;
background: none;
outline: none;
width: percentage(1/2);
}
.flatpickr-input:not(.datepicker--visible) {
display: none;
}
.flatpickr-calendar { .flatpickr-calendar {
&.inline { &.inline {
public/typo3conf/ext/ep_theme/Resources/Private/Templates/Searchbar/Index.html
+82 -67
View File
@@ -24,6 +24,8 @@
<f:form.hidden property="priceRange" data="{'searchbar-target': 'priceRange'}"/> <f:form.hidden property="priceRange" data="{'searchbar-target': 'priceRange'}"/>
<div class="sticky:max-w-screen-xl sticky:mx-auto flex flex-col sticky:flex-row sticky:items-center"> <div class="sticky:max-w-screen-xl sticky:mx-auto flex flex-col sticky:flex-row sticky:items-center">
<div class="flex items-start justify-between sticky:flex-1 pt-8 px-8 sticky:py-4 sticky:px-0"> <div class="flex items-start justify-between sticky:flex-1 pt-8 px-8 sticky:py-4 sticky:px-0">
<!-- Date range -->
<div class="flex-1" <div class="flex-1"
data-controller="collapse datepicker" data-controller="collapse datepicker"
<f:if condition="{searchParams.dateFrom} && {searchParams.dateTo}"> <f:if condition="{searchParams.dateFrom} && {searchParams.dateTo}">
@@ -42,41 +44,49 @@
value="{ep:dateRange(dateFrom: searchParams.dateFrom, dateTo: searchParams.dateTo, includeLabel: 0)}" value="{ep:dateRange(dateFrom: searchParams.dateFrom, dateTo: searchParams.dateTo, includeLabel: 0)}"
</f:if> </f:if>
data-searchbar-target="dateRangeLabel"/> data-searchbar-target="dateRangeLabel"/>
<svg class="w-6 h-6 text-white absolute right-0 top-0 mr-2 mt-1" <svg class="w-6 h-6 text-white absolute right-0 top-0 mr-2 mt-1 cursor-pointer"
data-action="click->collapse#toggle"> data-action="click->collapse#toggle">
<use href="#icon-calendar"></use> <use href="#icon-calendar"></use>
</svg> </svg>
<div class="hidden absolute z-20 top-100 mt-2 left-0 bg-white p-4 shadow-md" <div class="hidden absolute z-20 top-100 mt-2 left-0 min-w-full bg-white p-4 shadow-md rounded"
data-collapse-target="container"> data-collapse-target="container">
<f:if condition="{settings.datePickerPresets}"> <div class="flex justify-between divide-x divide-gray-200">
<div class="flex items-center justify-between pb-2"> <div class="pr-2">
<f:for each="{settings.datePickerPresets}" as="preset"> <input type="hidden"
<button class="daterange__preset" data-datepicker-target="field">
data-preset='{preset -> f:format.json()}' </div>
data-action="datepicker#selectPreset"> <div class="flex-1 flex flex-col justify-between pl-2">
<f:if condition="{settings.datePickerPresets}">
<div class="flex flex-col space-y-4">
<f:for each="{settings.datePickerPresets}" as="preset">
<button class="button button--small button--light w-full"
data-preset='{preset -> f:format.json()}'
data-action="datepicker#selectPreset">
<span> <span>
{preset.label} {preset.label}
</span> </span>
</button>
</f:for>
</div>
</f:if>
<div class="flex flex-col space-y-4">
<button class="button button--small button--light w-full"
data-action="collapse#close">
schließen
</button> </button>
</f:for> <button class="button button--small button--light w-full"
data-action="datepicker#reset">
zurücksetzen
</button>
</div>
</div> </div>
</f:if>
<input type="hidden"
data-datepicker-target="field">
<div class="flex items-center justify-between pt-2">
<button class="daterange__button focus:outline-none"
data-action="collapse#close">
schließen
</button>
<button class="daterange__button focus:outline-none"
data-action="datepicker#reset">
zurücksetzen
</button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- /Date range -->
<!-- Pax -->
<div class="w-24" <div class="w-24"
data-controller="collapse" data-controller="collapse"
data-action="collapse:click:outside->collapse#close searchbar:input@window->collapse#close" data-action="collapse:click:outside->collapse#close searchbar:input@window->collapse#close"
@@ -87,10 +97,11 @@
data-searchbar-target="paxLabel" data-searchbar-target="paxLabel"
value="{searchParams.pax}" value="{searchParams.pax}"
class="w-full bg-transparent border-0 ring-0 focus:ring-0 text-white uppercase px-2 py-1 cursor-pointer"/> class="w-full bg-transparent border-0 ring-0 focus:ring-0 text-white uppercase px-2 py-1 cursor-pointer"/>
<svg class="w-6 h-6 text-white absolute right-0 top-0 mr-2 mt-1"> <svg class="w-6 h-6 text-white absolute right-0 top-0 mr-2 mt-1 cursor-pointer"
data-action="click->collapse#toggle">
<use href="#icon-user-group"></use> <use href="#icon-user-group"></use>
</svg> </svg>
<div class="hidden absolute top-100 mt-2 left-0 bg-white p-4 shadow-md w-full h-48 overflow-y-scroll" <div class="hidden absolute z-20 top-100 mt-2 left-0 bg-white p-4 shadow-md rounded w-full h-48 overflow-y-scroll"
data-collapse-target="container"> data-collapse-target="container">
<ul class="m-0 p-0"> <ul class="m-0 p-0">
<f:for each="{filterOptions.pax}" as="option"> <f:for each="{filterOptions.pax}" as="option">
@@ -110,7 +121,9 @@
</div> </div>
</div> </div>
</div> </div>
<!-- /Pax -->
<!-- Destination -->
<div class="flex-1" <div class="flex-1"
data-controller="collapse" data-controller="collapse"
data-action="collapse:click:outside->collapse#close searchbar:input@window->collapse#close" data-action="collapse:click:outside->collapse#close searchbar:input@window->collapse#close"
@@ -120,69 +133,68 @@
data-action="click->collapse#toggle" data-action="click->collapse#toggle"
data-searchbar-target="destinationLabel" data-searchbar-target="destinationLabel"
class="w-full bg-transparent border-0 ring-0 focus:ring-0 text-white uppercase px-2 py-1 cursor-pointer placeholder-white" class="w-full bg-transparent border-0 ring-0 focus:ring-0 text-white uppercase px-2 py-1 cursor-pointer placeholder-white"
placeholder="Reiseziel"/> placeholder="Reiseziel/Konzept"/>
<svg class="w-6 h-6 text-white absolute right-0 top-0 mr-2 mt-1 transform rotate-45"> <svg class="w-6 h-6 text-white absolute right-0 top-0 mr-2 mt-1 transform rotate-45 cursor-pointer"
data-action="click->collapse#toggle">
<use href="#icon-airplane"></use> <use href="#icon-airplane"></use>
</svg> </svg>
<div class="hidden absolute top-100 left-0 bg-white p-4 shadow-md min-w-full h-48 overflow-y-scroll" <div class="hidden absolute z-20 top-100 mt-2 left-0 bg-white p-4 shadow-md rounded min-w-full h-64 overflow-y-scroll"
data-collapse-target="container"> data-collapse-target="container">
<f:for each="{filterOptions.destinations}" as="destination"> <div class="grid grid-cols-5 gap-4">
<div class="flex items-start justify-between"> <f:for each="{filterOptions.destinations}" as="destination">
<div class="w-1/2"> <div class="col-span-3">
<button data-action="searchbar#setDestination" <button class="flex items-center space-x-2"
data-action="searchbar#setDestination"
data-option-uid="{destination.country.uid}" data-option-uid="{destination.country.uid}"
data-option-type="country" data-option-type="country"
data-option-label="{destination.country.label}"> data-option-label="{destination.country.label}">
<svg class="block w-8 h-6"> <svg class="block w-8 h-6">
<use href="#icon-flag-{destination.country.code -> f:format.case(mode: 'lower')}"/> <use href="#icon-flag-{destination.country.code -> f:format.case(mode: 'lower')}"/>
</svg> </svg>
<strong> <span>
{destination.country.label} {destination.country.label}
</strong> </span>
</button> </button>
</div> </div>
<div class="w-1/2"> <div class="col-span-2">
<ul class="plain-list mb-0"> <f:for each="{destination.regions}" as="region">
<f:for each="{destination.regions}" as="region"> <button data-action="searchbar#setDestination"
<li> data-option-uid="{region.uid}"
<button data-action="searchbar#setDestination" data-option-type="region"
data-option-uid="{region.uid}" data-option-label="{region.label}">
data-option-type="region" {region.label}
data-option-label="{region.label}"> </button>
{region.label}
</button>
</li>
</f:for>
</ul>
</div>
</div>
</f:for>
<div class="flex items-start justify-between">
<div class="w-1/2">
<strong>Konzept</strong>
</div>
<div class="w-1/2">
<ul class="plain-list mb-0">
<f:for each="{filterOptions.concepts}" as="concept">
<li>
<button data-action="searchbar#setDestination"
data-option-uid="{concept.uid}"
data-option-type="concept"
data-option-label="{concept.name}">
{concept.name}
</button>
</li>
</f:for> </f:for>
</ul> </div>
</f:for>
</div>
<div class="grid grid-cols-5 gap-4 border-t py-2 my-2">
<div class="col-span-3">
<strong>
Konzept
</strong>
</div>
<div class="col-span-2">
<f:for each="{filterOptions.concepts}" as="concept">
<button data-action="searchbar#setDestination"
data-option-uid="{concept.uid}"
data-option-type="concept"
data-option-label="{concept.name}">
{concept.name}
</button>
</f:for>
</div> </div>
</div> </div>
<button data-action="searchbar#resetDestination"> <button class="button button--small"
data-action="searchbar#resetDestination">
zurücksetzen zurücksetzen
</button> </button>
</div> </div>
</div> </div>
</div> </div>
<!-- /Destination -->
<!-- Price range -->
<div class="w-32" <div class="w-32"
data-controller="collapse" data-controller="collapse"
data-action="collapse:click:outside->collapse#close searchbar:input@window->collapse#close" data-action="collapse:click:outside->collapse#close searchbar:input@window->collapse#close"
@@ -193,10 +205,11 @@
data-searchbar-target="priceRangeLabel" data-searchbar-target="priceRangeLabel"
class="w-full bg-transparent border-0 ring-0 focus:ring-0 text-white uppercase px-2 py-1 cursor-pointer placeholder-white" class="w-full bg-transparent border-0 ring-0 focus:ring-0 text-white uppercase px-2 py-1 cursor-pointer placeholder-white"
placeholder="Preis"/> placeholder="Preis"/>
<svg class="w-6 h-6 text-white absolute right-0 top-0 mr-2 mt-1"> <svg class="w-6 h-6 text-white absolute right-0 top-0 mr-2 mt-1 cursor-pointer"
data-action="click->collapse#toggle">
<use href="#icon-euro"></use> <use href="#icon-euro"></use>
</svg> </svg>
<div class="hidden absolute top-100 left-0 bg-white p-4 shadow-md w-full h-48 overflow-y-scroll" <div class="hidden absolute z-20 top-100 left-0 bg-white p-4 shadow-md w-full h-48 overflow-y-scroll"
data-collapse-target="container"> data-collapse-target="container">
<ul class="m-0 p-0"> <ul class="m-0 p-0">
<li> <li>
@@ -219,6 +232,8 @@
</div> </div>
</div> </div>
</div> </div>
<!-- /Price range -->
</div> </div>
<button type="submit" class="hidden sticky:block sticky:ml-4"> <button type="submit" class="hidden sticky:block sticky:ml-4">
<svg class="w-8 h-8 text-white"> <svg class="w-8 h-8 text-white">