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

Merge branch 'flatpickr'

Browse Source
This commit is contained in:
Björn Fromme
2018-09-13 21:12:59 +02:00
parent 3afb5a7fd6 4448aed1f5
commit 3f858bb1b5
12 changed files with 96 additions and 233 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+5
View File
@@ -3176,6 +3176,11 @@
"locate-path": "^2.0.0"
}
},
"flatpickr": {
"version": "4.5.2",
"resolved": "https://registry.npmjs.org/flatpickr/-/flatpickr-4.5.2.tgz",
"integrity": "sha512-jDy4QYGpmiy7+Qk8QvKJ4spjDdxcx9cxMydmq1x427HkKWBw0qizLYeYM2F6tMcvvqGjU5VpJS55j4LnsaBblA=="
},
"flatten": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/flatten/-/flatten-1.0.2.tgz",
package.json
+2 -1
View File
@@ -11,11 +11,12 @@
},
"dependencies": {
"@fancyapps/fancybox": "^3.2.5",
"@fengyuanchen/datepicker": "^0.6.4",
"@fengyuanchen/datepicker": "^0.6.5",
"bootstrap-sass": "^3.3.7",
"bourbon": "^4.3.2",
"cookieconsent": "^3.1.0",
"dayjs": "^1.7.5",
"flatpickr": "^4.5.2",
"font-awesome": "^4.7.0",
"iframe-resizer": "^3.6.1",
"jquery": "^2.2.4",
web/typo3conf/ext/ep_products/Classes/Controller/AjaxSearchController.php
+13 -9
View File
@@ -91,31 +91,35 @@ class AjaxSearchController extends ActionController
{
$dateSelected = false;
$organic = true;
$forcedConceptUid = (int) $this->settings['forcedConceptUid'];
$excludedConceptUids = GeneralUtility::trimExplode(',', $this->settings['excludedConceptUids']);
if ($filterSettings === null) {
$forcedConceptUid = (int) $this->settings['forcedConceptUid'];
$filterSettings = $this->filterService->getDefaultFilterSettings($forcedConceptUid);
} elseif ($filterSettings->getDateFrom() !== null || $filterSettings->getDateTo() !== null) {
}
if ($filterSettings->getDateFrom() !== null || $filterSettings->getDateTo() !== null) {
$dateSelected = true;
}
$excludedConceptUids = GeneralUtility::trimExplode(',', $this->settings['excludedConceptUids']);
$filterOptions = $this->filterService->getFilterOptions($filterSettings, $excludedConceptUids);
if ($filterOptions === null) {
$filterSettings = $this->filterService->getDefaultFilterSettings();
$filterOptions = $this->filterService->getFilterOptions($filterSettings, $excludedConceptUids);
}
$searchResult = $this->searchResultService->getResult($filterSettings, $excludedConceptUids);
if ($searchResult->getTotal() === 0) {
$filterSettings = $this->filterService->getDefaultFilterSettings();
$filterSettings = $this->filterService->getDefaultFilterSettings($forcedConceptUid);
$searchResult = $this->searchResultService->getResult($filterSettings, $excludedConceptUids);
$organic = false;
}
$filterOptions = $this->filterService->getFilterOptions($filterSettings, $excludedConceptUids);
$options = [
'defaultDetailPageUid' => $this->settings['defaultDetailPageUid'],
'referringPageUid' => $referringPageUid,
'filterSettings' => $filterSettings,
];
$this->searchResultUrlService->process($searchResult, $options);
return json_encode([
'data' => $searchResult->getData(),
'filterOptions' => $filterOptions,
web/typo3conf/ext/ep_products/Classes/Service/FilterService.php
+1 -1
View File
@@ -91,7 +91,7 @@ class FilterService implements SingletonInterface
}
$filterOptionsData = static::$cache['filterOptions'][$key];
if (count($filterOptionsData) === 0) {
return null;
return new FilterOptions();
}
$dateRange = $this->constrainDateRange($this->getDateRange());
return $this->preprocessFilterOptions($filterOptionsData, $dateRange);
web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_styles.js
+1
View File
@@ -5,3 +5,4 @@ require('cookieconsent/build/cookieconsent.min.css');
require('@fancyapps/fancybox/dist/jquery.fancybox.min.css');
require('slick-carousel/slick/slick.css');
require('leaflet/dist/leaflet.css');
require('flatpickr/dist/flatpickr.css');
web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/Datepicker.vue
-77
View File
@@ -1,77 +0,0 @@
<template>
<input ref="field" type="text" :value="dateDisplayed" />
</template>
<script>
import Vue from 'vue'
import $ from 'jquery'
import dayjs from 'dayjs'
import 'dayjs/locale/de'
import datepicker from '@fengyuanchen/datepicker'
require('@fengyuanchen/datepicker/dist/datepicker.css');
export default {
props: {
date: {
default: null
},
minDate: {
type: Date,
default () {
return new Date()
}
},
maxDate: {
type: Date,
default () {
return new Date()
}
},
container: {
type: String,
required: true
}
},
computed: {
dateDisplayed () {
if (this.date === null) {
return '';
}
return dayjs(this.date).format('DD.MM.YYYY');
}
},
watch: {
date (value) {
this.date = value;
},
minDate (value) {
$(this.$refs.field).datepicker('setStartDate', value);
},
maxDate (value) {
$(this.$refs.field).datepicker('setEndDate', value);
}
},
mounted () {
const field = this.$refs.field;
Vue.nextTick(() => {
$(field).datepicker({
inline: true,
container: $(field).closest(this.container),
language: 'de-DE',
format: 'dd.mm.yyyy',
weekStart: 1,
days: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
daysShort: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
daysMin: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
months: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September',
'Oktober', 'November', 'Dezember'],
monthsShort: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],
startDate: this.minDate,
endDate: this.maxDate
}).on('pick.datepicker', (event) => {
this.$emit('picked', event.date);
});
});
}
}
</script>
web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/DaterangeSelect.vue
+54 -107
View File
@@ -4,13 +4,13 @@
<ul class="nav navbar-nav">
<li class="dropdown" ref="dropdown">
<input type="text" class="form-control" placeholder="von... bis"
v-bind:value="selectedRange" v-on:click="togglePanel"/>
:value="selectedRange" @click="togglePanel"/>
<ul class="dropdown-menu daterange">
<li v-if="presets">
<div class="daterange__presets">
<template v-for="preset of presets">
<a class="daterange__preset" href="#"
v-on:click.prevent="selectPreset(preset)">
@click.prevent="selectPreset(preset)">
<i class="fa fa-calendar"></i> {{ preset.label }}
</a>
</template>
@@ -18,44 +18,16 @@
</li>
<li>
<div class="daterange__panel">
<div class="daterange__column daterange--from">
<span class="headline headline--4 daterange__headline">Früheste Anreise</span>
<div class="daterange__picker">
<date-picker
class="daterange__input"
container=".daterange--from"
v-on:picked="updateFrom"
v-bind:date="range.from"
v-bind:min-date="dateFromMin"
v-bind:max-date="dateFromMax"
></date-picker>
<button class="daterange__button"
v-on:click.prevent="resetFrom">
<i class="fa fa-trash-o"></i>
</button>
</div>
</div>
<div class="daterange__column daterange--to">
<span class="headline headline--4 daterange__headline">Späteste Abreise</span>
<div class="daterange__picker">
<date-picker
class="daterange__input"
container=".daterange--to"
v-on:picked="updateTo"
v-bind:date="range.to"
v-bind:min-date="dateToMin"
v-bind:max-date="dateToMax"
></date-picker>
<button class="daterange__button"
v-on:click.prevent="resetTo">
<i class="fa fa-trash-o"></i>
</button>
</div>
</div>
<input ref="field" type="hidden">
</div>
</li>
<li class="closebtn">
<a class="btn btn-default btn-xs" href="#" v-on:click.prevent="togglePanel">schließen</a>
<li class="daterange__buttons">
<button class="daterange__button" @click.prevent="togglePanel">
<i class="fa fa-times"></i> schließen
</button>
<button class="daterange__button" @click.prevent="reset()">
<i class="fa fa-trash-o"></i> zurücksetzen
</button>
</li>
</ul>
</li>
@@ -64,25 +36,18 @@
</template>
<script>
import Vue from 'vue'
import $ from 'jquery'
import DatePicker from './Datepicker.vue'
import dayjs from 'dayjs'
import 'dayjs/locale/de'
import flatpickr from 'flatpickr'
import { German } from 'flatpickr/dist/l10n/de'
import EventBus from '../_bus'
export default {
components: {
DatePicker
},
data () {
return {
dateFromMin: null,
dateFromMax: null,
dateToMin: null,
dateToMax: null,
range: {
from: null,
to: null
},
picker: null,
selectedFrom: this.from,
selectedTo: this.to
}
@@ -116,76 +81,58 @@
}
},
created () {
this.range.from = this.selectedFrom !== null ? new Date(this.selectedFrom) : null;
this.range.to = this.selectedTo !== null ? new Date(this.selectedTo) : null;
this.dateFromMin = new Date(this.minDate);
this.dateFromMax = new Date(this.maxDate);
this.dateToMin = new Date(this.minDate);
this.dateToMax = new Date(this.maxDate);
},
watch: {
from (value) {
this.selectedFrom = value;
},
to (value) {
this.selectedTo = value;
},
minDate (date) {
this.dateFromMin = new Date(date);
this.dateToMin = new Date(date);
},
maxDate (date) {
this.dateFromMax = new Date(date);
this.dateToMax = new Date(date);
}
Vue.nextTick(() => {
this.picker = $(this.$refs.field).flatpickr({
mode: 'range',
dateFormat: 'd.m.Y',
locale: German,
inline: true,
minDate: new Date(this.minDate),
maxDate: new Date(this.maxDate),
onChange: (selectedDates) => {
if (selectedDates.length === 2) {
this.selectedFrom = selectedDates[0];
this.selectedTo = selectedDates[1];
this.togglePanel();
this.$emit('selected', { from: this.selectedFrom, to: this.selectedTo });
}
}
});
if (this.from && this.to) {
this.picker.setDate([ new Date(this.from), new Date(this.to) ]);
}
});
EventBus.$on('filterSettingsReset', () => {
this.reset();
});
},
computed: {
selectedRange () {
if (this.range.from == null && this.range.to == null) {
if (this.selectedFrom == null && this.selectedTo == null) {
return '';
}
if (this.range.from !== null && this.range.to === null) {
return 'ab ' + dayjs(this.range.from).format('DD.MM.YYYY');
}
if (this.range.from === null && this.range.to !== null) {
return 'bis ' + dayjs(this.range.to).format('DD.MM.YYYY');
}
return dayjs(this.range.from).format('DD.MM.YYYY') + '-' + dayjs(this.range.to).format('DD.MM.YYYY');
return dayjs(this.selectedFrom).format('DD.MM.YYYY')
+ '-' + dayjs(this.selectedTo).format('DD.MM.YYYY');
}
},
methods: {
updateFrom (date) {
if (this.range.to !== null && dayjs(date).isAfter(this.range.to)) {
this.range.to = dayjs(date).add(1, 'd');
}
this.range.from = date;
this.dateToMin = date;
this.$emit('selected', this.range);
},
updateTo (date) {
if (this.range.from !== null && dayjs(date).isBefore(this.range.from)) {
date = dayjs(this.range.from).add(1, 'd');
}
this.range.to = date;
this.dateFromMax = date;
this.$emit('selected', this.range);
},
togglePanel () {
$(this.$refs.dropdown).toggleClass('open');
},
resetFrom () {
this.range.from = null;
this.$emit('selected', this.range);
},
resetTo () {
this.range.to = null;
this.$emit('selected', this.range);
},
selectPreset (preset) {
this.range.from = new Date(preset.dateFrom);
this.range.to = new Date(preset.dateTo);
this.selectedFrom = new Date(preset.dateFrom);
this.selectedTo = new Date(preset.dateTo);
this.picker.setDate([ this.selectedFrom, this.selectedTo ]);
this.togglePanel();
this.$emit('selected', this.range);
this.$emit('selected', { from: this.selectedFrom, to: this.selectedTo });
},
reset () {
this.selectedFrom = null;
this.selectedTo = null;
this.picker.clear();
this.picker.jumpToDate();
this.togglePanel();
this.$emit('selected', { from: this.selectedFrom, to: this.selectedTo });
}
}
}
web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/SearchBar.vue
-12
View File
@@ -16,13 +16,6 @@
},
data () {
return {
lock: false,
dateRange () {
return {
dateFrom: null,
dateTo: null
}
},
searchParams: this.initialSearchParams,
filterOptions: this.initialFilterOptions
}
@@ -30,15 +23,10 @@
props: [ 'initialFilterOptions', 'initialSearchParams', 'optionsUri', 'resetUri', 'argumentPrefix', 'datePresets' ],
methods: {
loadOptions () {
if (this.lock) {
return;
}
this.lock = true;
const query = {};
query[this.argumentPrefix + '[searchParams]'] = this.searchParams;
$.post(this.optionsUri, query, (json) => {
this.applyOptions(json);
this.lock = false;
}, 'json');
},
applyOptions (json) {
web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/SearchBox.vue
-6
View File
@@ -10,7 +10,6 @@
},
data () {
return {
lock: false,
searchParams: this.initialSearchParams,
filterOptions: this.initialFilterOptions
}
@@ -18,15 +17,10 @@
props: [ 'initialFilterOptions', 'initialSearchParams', 'optionsUri', 'resetUri', 'argumentPrefix', 'datePresets' ],
methods: {
loadOptions () {
if (this.lock) {
return;
}
this.lock = true;
const query = {};
query[this.argumentPrefix + '[searchParams]'] = this.searchParams;
$.post(this.optionsUri, query, (json) => {
this.applyOptions(json);
this.lock = false;
}, 'json');
},
applyOptions (json) {
web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/SearchResult.vue
+1
View File
@@ -142,6 +142,7 @@
},
resetFilterSettings () {
this.filterSettings = this.defaultFilterSettings;
EventBus.$emit('filterSettingsReset');
this.loadResults();
},
updateDestination (destination) {
web/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/remix/_datepicker.scss
+18 -19
View File
@@ -12,16 +12,6 @@
text-align: center;
}
.daterange__column {
flex: 1;
&:first-child {
border-right: 1px solid #c7c7c7;
margin-right: 10px;
}
}
.daterange__presets {
display: flex;
padding: 8px 0;
@@ -32,16 +22,9 @@
color: $color-font-base;
}
.daterange__picker {
.daterange__buttons {
display: flex;
flex-wrap: nowrap;
}
.daterange__input {
text-align: center;
background-color: white;
border: 1px solid $color-grey-light;
color: $color-font-base;
justify-content: space-between;
}
.daterange__button {
@@ -49,4 +32,20 @@
border: none;
background: none;
outline: none;
width: percentage(1/2);
}
.flatpickr-input {
display: none;
}
.flatpickr-calendar {
box-shadow: none;
}
.flatpickr-day.selected {
&.startRange, &.endRange {
background: $color-brand-secondary;
border-color: $color-brand-secondary;
}
}
webpack.config.js
+1 -1
View File
@@ -11,7 +11,7 @@ Encore
.addEntry('unichamp', './web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/unichamp.js')
.addStyleEntry('rte', './web/typo3conf/ext/ep_theme/Resources/Private/Assets/css/rte.css')
.createSharedEntry('vendor', [
'jquery', 'vue', 'vue-session', '@fengyuanchen/datepicker', 'jquery-lazy',
'jquery', 'vue', 'vue-session', 'flatpickr', 'jquery-lazy',
'bootstrap-sass/assets/javascripts/bootstrap', 'slick-carousel',
'dayjs', 'cookieconsent', 'picturefill', '@fancyapps/fancybox', 'leaflet'
])