Use vue shorthands

This commit is contained in:
Björn Fromme
2018-10-03 16:00:08 +02:00
parent 721f6ff705
commit 5c9363357a
44 changed files with 148 additions and 114 deletions
@@ -1,6 +1,6 @@
<template>
<div>
<input class="date-input" type="text" v-model="date" v-bind:placeholder="placeholder" ref="field" />
<input class="date-input" type="text" v-model="date" :placeholder="placeholder" ref="field" />
</div>
</template>
<script>
@@ -1,12 +1,12 @@
<template>
<div class="step-input">
<a href="#" class="step-input__trigger step-input__trigger--decrease"
v-bind:class="{ disabled: decreaseButtonDisabled }"
v-on:click.prevent="decreaseValue"></a>
:class="{ disabled: decreaseButtonDisabled }"
@click.prevent="decreaseValue"></a>
<div class="step-input__value">{{ displayedValue }}</div>
<a href="#" class="step-input__trigger step-input__trigger--increase"
v-bind:class="{ disabled: increaseButtonDisabled }"
v-on:click.prevent="increaseValue"></a>
:class="{ disabled: increaseButtonDisabled }"
@click.prevent="increaseValue"></a>
</div>
</template>
<script>
@@ -22,7 +22,7 @@
</f:if>
<div class="content__float">
<f:if condition="{traveltype.buttonlabel}">
<a class="badge" href="#examples" v-on:click.prevent="scrollTo('#examples')">
<a class="badge" href="#examples" @click.prevent="scrollTo('#examples')">
<div class="badge__content">{traveltype.buttonlabel -> f:format.nl2br()}</div>
<svg class="badge__background" width="100%" height="100%" viewBox="0 0 160 160">
<g>
@@ -32,7 +32,7 @@
<polygon points="12,0 12,48 0,48" />
</svg>
<a class="button button--herounit" href="#configurator"
v-on:click.prevent="scrollTo('#configurator')">&raquo; Jetzt anfragen</a>
@click.prevent="scrollTo('#configurator')">&raquo; Jetzt anfragen</a>
<svg class="herounit__button__form" preserveAspectRatio="xMinYMid" viewBox="0 0 12 48">
<polygon points="0,0 12,0 0,48" />
</svg>
@@ -18,7 +18,7 @@
<svg class="herounit__button__form" preserveAspectRatio="xMinYMid" viewBox="0 0 12 48">
<polygon points="12,0 12,48 0,48"></polygon>
</svg>
<a class="button button--herounit" href="#configurator" v-on:click.prevent="scrollTo('#configurator')">&raquo; Jetzt anfragen</a>
<a class="button button--herounit" href="#configurator" @click.prevent="scrollTo('#configurator')">&raquo; Jetzt anfragen</a>
<svg class="herounit__button__form" preserveAspectRatio="xMinYMid" viewBox="0 0 12 48">
<polygon points="0,0 12,0 0,48"></polygon>
</svg>
@@ -15,7 +15,7 @@
<svg viewBox="0 0 16 16"><g><path d="M3.468,11.206l0,0.173c0,1.15 -0.001,2.302 0,3.452c0,0.438 0.2,0.637 0.642,0.637c2.593,0 5.186,0 7.78,0c0.442,0 0.642,-0.199 0.642,-0.637l0,-3.452l0,-0.173l-9.064,0Zm9.064,-6.412l0,-0.173l0,-3.453c0,-0.437 -0.2,-0.636 -0.642,-0.636c-2.594,0 -5.187,0 -7.781,0c-0.441,0 -0.641,0.198 -0.641,0.636c-0.001,1.152 0,2.303 0,3.454l0,0.172l9.064,0Zm0.532,7.47c0.377,0 0.731,0.017 1.083,-0.004c0.65,-0.039 1.048,-0.468 1.05,-1.12c0.004,-1.562 0.004,-3.124 -0.001,-4.686c-0.002,-0.673 -0.446,-1.117 -1.118,-1.117c-4.051,-0.003 -8.101,-0.003 -12.152,0.003c-0.176,0.001 -0.368,0.038 -0.526,0.113c-0.429,0.206 -0.601,0.576 -0.6,1.044c0.004,1.4 0.002,2.801 0.002,4.201c0,0.193 -0.003,0.386 0.009,0.578c0.028,0.443 0.315,0.852 0.749,0.928c0.444,0.079 0.906,0.061 1.379,0.087l0,-1.616l10.125,0l0,1.589Zm-0.908,-12.264c0.34,0.09 0.638,0.249 0.781,0.585c0.075,0.177 0.121,0.379 0.122,0.571c0.011,1.146 0.005,2.291 0.005,3.436l0,0.21c0.082,0 0.153,-0.002 0.224,0c0.4,0.012 0.807,-0.017 1.199,0.047c0.698,0.115 1.199,0.724 1.236,1.434c0.013,0.233 0.009,0.468 0.009,0.702c0.001,1.375 -0.003,2.749 0.002,4.124c0.002,0.562 -0.184,1.028 -0.636,1.373c-0.301,0.232 -0.648,0.321 -1.023,0.32c-0.276,-0.001 -0.552,0 -0.828,0l-0.183,0l0,0.187c0,0.62 0.001,1.239 0,1.859c-0.001,0.706 -0.446,1.151 -1.151,1.152c-2.609,0 -5.217,0 -7.825,0c-0.706,-0.001 -1.151,-0.446 -1.153,-1.152c-0.001,-0.62 0,-1.239 0,-1.859l0,-0.187c-0.316,0 -0.616,0.005 -0.916,-0.002c-0.176,-0.005 -0.356,-0.011 -0.527,-0.048c-0.689,-0.15 -1.181,-0.735 -1.215,-1.441c-0.015,-0.28 -0.009,-0.561 -0.009,-0.842c-0.001,-1.328 0.003,-2.656 -0.002,-3.984c-0.002,-0.555 0.182,-1.018 0.628,-1.361c0.246,-0.188 0.524,-0.303 0.834,-0.313c0.338,-0.012 0.677,-0.007 1.015,-0.009c0.056,-0.001 0.113,0 0.192,0l0,-0.194c0,-1.104 0.016,-2.208 -0.006,-3.311c-0.012,-0.588 0.184,-1.104 0.914,-1.297l8.313,0Z"/><path d="M13.063,7.466c0.001,0.296 -0.242,0.537 -0.536,0.533c-0.289,-0.004 -0.525,-0.244 -0.526,-0.532c-0.001,-0.295 0.243,-0.534 0.539,-0.531c0.29,0.004 0.523,0.239 0.523,0.53"/><rect x="4.008" y="12.276" width="7.984" height="0.514"/><rect x="4.008" y="13.877" width="7.985" height="0.514"/></g></svg>
</div>
<div class="iconbar__bar">
<a class="iconbar__link" href="#" v-on:click.prevent="triggerPrintDialog()">Seite drucken</a>
<a class="iconbar__link" href="#" @click.prevent="triggerPrintDialog()">Seite drucken</a>
</div>
</div>
</f:comment>
@@ -45,7 +45,7 @@
</div>
</div>
</footer>
<a v-on:click.prevent="scrollTop()" v-show="scrollTopVisible" v-cloak href="#" class="scrolltop">
<a @click.prevent="scrollTop()" v-show="scrollTopVisible" v-cloak href="#" class="scrolltop">
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 44 24"><path d="M6.372 19.914L22.016 3.627 37.96 19.95" fill="none" stroke-width="6.67" stroke="#fff"/></svg>
</a>
@@ -95,7 +95,7 @@
</div>
</div>
</div>
<a class="navtoggle" href="#" v-on:click.prevent="toggleMobileNavigation()">
<a class="navtoggle" href="#" @click.prevent="toggleMobileNavigation()">
<svg class="navtoggle__icon" preserveAspectRatio="xMinYMid" viewBox="0 0 28 28">
<path d="M2,8L26,8C27.104,8 28,7.104 28,6C28,4.896 27.104,4 26,4L2,4C0.896,4 0,4.896 0,6C0,7.104 0.896,8 2,8ZM26,12L2,12C0.896,12 0,12.896 0,14C0,15.104 0.896,16 2,16L26,16C27.104,16 28,15.104 28,14C28,12.896 27.104,12 26,12ZM26,20L2,20C0.896,20 0,20.896 0,22C0,23.104 0.896,24 2,24L26,24C27.104,24 28,23.104 28,22C28,20.896 27.104,20 26,20Z"/>
</svg>
@@ -11,7 +11,7 @@
<div class="content__main">
<div class="content__background {ep:sectionCssClass(sectionValue: activity.configuratorType)}">
<f:if condition="{offers}">
<a class="badge" href="#" v-on:click.prevent="scrollTo('#examples')">
<a class="badge" href="#" @click.prevent="scrollTo('#examples')">
<div class="badge__content">Beispiel-<br>angebot{f:if(condition: '{offers -> f:count()} > 1', then: 'e')}</div>
<svg class="badge__background" width="100%" height="100%" viewBox="0 0 160 160">
<g>
@@ -78,8 +78,8 @@
v-for="(selectBoxData, selectBoxType) in selectBoxes"
:class="{ active: selectBoxData.active }">
<a href="#" class="config-selectbox__bar"
v-on:click.prevent="toggleSelectBox(selectBoxType)"
v-on:touchend.prevent="toggleSelectBox(selectBoxType)">
@click.prevent="toggleSelectBox(selectBoxType)"
@touchend.prevent="toggleSelectBox(selectBoxType)">
<span class="config-selectbox__title">{{ selectBoxData.name }}:</span>
<div class="config-selectbox__badges">
<span v-for="badge in selectedOptions(selectBoxType)" class="config-selectbox__badge">{{ badge }}</span>
@@ -100,8 +100,8 @@
'has--icon': selectBoxData.hasIcon
}
]"
v-on:click.prevent="toggleSelection(selectBoxType, value)"
v-on:touchend.prevent="toggleSelection(selectBoxType, value)">
@click.prevent="toggleSelection(selectBoxType, value)"
@touchend.prevent="toggleSelection(selectBoxType, value)">
<div class="config-selectbox__item__inner"
:style="{ backgroundImage: 'url(' + selectBoxData.images[value] + ')' }">
<span class="config-selectbox__item-label">{{ label }}</span>
@@ -116,7 +116,7 @@
<span class="configurator-field__label">Ziel:</span>
<step-input class="configurator-field__input" name="distance"
:default-value="formData.distance"
v-on:change="updateData"
@change="updateData"
:options="optionsDistance"
></step-input>
</div>
@@ -124,7 +124,7 @@
<span class="configurator-field__label">Teilnehmerzahl:</span>
<step-input class="configurator-field__input" name="pax"
:default-value="formData.pax"
v-on:change="updateData"
@change="updateData"
:options="optionsPax"
></step-input>
</div>
@@ -132,7 +132,7 @@
<span class="configurator-field__label">Budget pro Person ohne Anreise:</span>
<step-input class="configurator-field__input" name="budget"
:default-value="formData.budget"
v-on:change="updateData"
@change="updateData"
:options="optionsBudget"
></step-input>
</div>
@@ -141,13 +141,13 @@
<div class="configurator-field__input configurator-field__group">
<step-input name="period"
:default-value="formData.period"
v-on:change="updateData"
@change="updateData"
:options="optionsPeriod"
></step-input>
<date-range-input name="dateRange"
:default-date-from="formData.dateFrom"
:default-date-to="formData.dateTo"
v-on:selected="updateDateRange"></date-range-input>
@selected="updateDateRange"></date-range-input>
</div>
</div>
<div class="form__item form__item--tablet">
@@ -159,7 +159,7 @@
</div>
<div class="form__item form__item--button form__item--tablet">
<button class="button button--configurator"
v-on:click.prevent="submitForm">&raquo; jetzt anfragen</button>
@click.prevent="submitForm">&raquo; jetzt anfragen</button>
</div>
<f:if condition="{settings.feedbackPageUid}">
<div class="form__item form__item--link form__item--tablet">
@@ -209,7 +209,7 @@
</div>
<div class="form__item form__item--button form__item--mobile">
<button class="button button--configurator"
v-on:click.prevent="submitForm">&raquo; jetzt anfragen</button>
@click.prevent="submitForm">&raquo; jetzt anfragen</button>
</div>
</div>
</div>
@@ -261,7 +261,7 @@
<img src="{f:uri.resource(path: 'images/spinner_configurator.gif', extensionName: 'ep_events')}"
alt="Processing...">
</div>
<div class="configurator__overlay" v-if="success" v-on:click.prevent="resetForm()">
<div class="configurator__overlay" v-if="success" @click.prevent="resetForm()">
<p class="form__overlay__text"><strong>Vielen Dank für Ihre Anfrage. Wir werden uns
schnellstmöglich mit Ihnen in Verbindung setzen.<br>Klicken für eine weitere Anfrage.</strong></p>
</div>
@@ -58,7 +58,7 @@
<div class="form__item__error" v-show="formErrors.inquiryphone" v-html="formErrors.inquiryphone"></div>
</div>
<div class="form__item form__item--text">
<a class="form__link" href="#" v-on:click.prevent="toggleDetails()">
<a class="form__link" href="#" @click.prevent="toggleDetails()">
<span v-show="!detailsVisible">Weitere</span>
<span v-show="detailsVisible">Weniger</span> Angaben</a>
</div>
@@ -67,7 +67,7 @@
v-show="formErrors.inquiryphone" v-html="formErrors.inquiryphone"></div>
</div>
<div class="form__item form__item--text">
<a class="form__link form__link--indent" href="#" v-on:click.prevent="toggleDetails()">
<a class="form__link form__link--indent" href="#" @click.prevent="toggleDetails()">
<span v-show="!detailsVisible">Weitere</span>
<span v-show="detailsVisible">Weniger</span> Angaben</a>
</div>
@@ -25,7 +25,7 @@
</div>
</div>
<div class="content__background {ep:sectionCssClass(sectionValue: offer.configuratorType)}">
<a class="badge" href="#" v-on:click.prevent="scrollTo('#examples')">
<a class="badge" href="#" @click.prevent="scrollTo('#examples')">
<div class="badge__content">Weitere-<br>Beispiele</div>
<svg class="badge__background" width="100%" height="100%" viewBox="0 0 160 160">
<g>
@@ -56,13 +56,13 @@
<f:then>
<img class="teaser__image"
src="{f:uri.image(image: image, cropVariant: 'default', width: '500')}"
alt="{title} {subtitle}"{f:if(condition: link, then: ' v-on:click.prevent="scrollTo(\'{link}\')"')}>
alt="{title} {subtitle}"{f:if(condition: link, then: ' @click.prevent="scrollTo(\'{link}\')"')}>
</f:then>
<f:else>
<img class="teaser__image" src="https://placehold.it/500x500" alt="">
</f:else>
</f:if>
<div class="teaser__caption"{f:if(condition: link, then: ' v-on:click.prevent="scrollTo(\'{link}\')"')}>
<div class="teaser__caption"{f:if(condition: link, then: ' @click.prevent="scrollTo(\'{link}\')"')}>
<span class="teaser__title">{title}</span>
<span class="teaser__title teaser__title--subline">{subtitle}</span>
</div>