initial commit
This commit is contained in:
@@ -0,0 +1,118 @@
|
||||
<template>
|
||||
<loader :active="isLoading"/>
|
||||
<div v-if="lngLoaded">
|
||||
<details-page v-if="detailsPage"
|
||||
:list="list.results"
|
||||
:details="details"
|
||||
:lang="settings.lang"
|
||||
:settings="settings"
|
||||
:url="url"
|
||||
@backTolist="detailsPage=false"
|
||||
@gotoPrev="gotoPrev"
|
||||
@gotoNext="gotoNext"
|
||||
/>
|
||||
<search-page v-else
|
||||
:data="list"
|
||||
:lang="settings.lang"
|
||||
:settings="settings"
|
||||
@detailClick="detailClick"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
|
||||
import PageSearch from './components/PageSearch.vue'
|
||||
import PageDetail from './components/PageDetail.vue'
|
||||
import {i18n, loadLanguage} from './modules/i18n'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'search-page': PageSearch,
|
||||
'details-page': PageDetail,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
configParams: {
|
||||
clientID: 0,
|
||||
rowID: 0,
|
||||
},
|
||||
listParams: {
|
||||
arts: [],
|
||||
brands: [],
|
||||
categories: [],
|
||||
},
|
||||
list: {},
|
||||
settings: {},
|
||||
// url: 'https://motorradhandel.ch',
|
||||
// url: 'https://staging.motorradhandel.ch',
|
||||
url: 'http://mh3.com',
|
||||
isLoading: false,
|
||||
lngLoaded: false,
|
||||
detailsPage: false,
|
||||
details: {},
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
var t = document.getElementsByClassName('wrapperJSON');
|
||||
if(t.length) {
|
||||
this.configParams.clientID = t[0].dataset.ui;
|
||||
this.configParams.rowID = t[0].dataset.fzl;
|
||||
this.getSettings();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
detailClick(id) {
|
||||
this.isLoading = true;
|
||||
// this.details = {};
|
||||
axios
|
||||
.get(this.url + "/api/ext/getDetails?id=" + id)
|
||||
.then(response => {
|
||||
this.details = response.data;
|
||||
this.detailsPage = true;
|
||||
})
|
||||
.catch(error => {
|
||||
console.log(error)
|
||||
})
|
||||
.finally(() => {
|
||||
this.isLoading = false;
|
||||
})
|
||||
},
|
||||
getSettings() {
|
||||
this.isLoading = true;
|
||||
var configParams = this.configParams;
|
||||
axios
|
||||
.get(this.url + "/api/ext/getSettings?clientID=" + configParams.clientID + '&rowID=' + configParams.rowID)
|
||||
.then(response => {
|
||||
this.settings = response.data.settings;
|
||||
this.settings.srchParObj = JSON.parse(this.settings.srchParams);
|
||||
this.listParams.arts = this.settings.fzart ? this.settings.fzart.split(",") : [];
|
||||
this.listParams.brands = this.settings.marken ? this.settings.marken.split(",") : [];
|
||||
this.listParams.categories = this.settings.kategorie ? this.settings.kategorie.split(",") : [];
|
||||
this.list = response.data.data;
|
||||
loadLanguage(i18n, this.settings.lang, response.data.trans);
|
||||
this.lngLoaded = true;
|
||||
})
|
||||
.catch(error => {
|
||||
console.log(error)
|
||||
})
|
||||
.finally(() => {
|
||||
this.isLoading = false;
|
||||
})
|
||||
},
|
||||
gotoPrev(id) {
|
||||
this.detailClick(id);
|
||||
},
|
||||
gotoNext(id) {
|
||||
this.detailClick(id);
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import "https://motorradhandel.ch/extern/css/custom.css";
|
||||
</style>
|
||||
@@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<img
|
||||
class=""
|
||||
:src="filename"
|
||||
:width="imgW"
|
||||
:height="imgH"
|
||||
@load="loadImage"
|
||||
@error="onImgError()"
|
||||
>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PathMixin from '../mixins/PathMixin.js'
|
||||
import defaultImageMixin from '../mixins/defaultImageMixin.js'
|
||||
|
||||
export default {
|
||||
mixins: [PathMixin, defaultImageMixin],
|
||||
props: ['details', 'imgOffset', 'container'],
|
||||
|
||||
data: function () {
|
||||
return {
|
||||
imgWidth: 1,
|
||||
imgHeight: 1,
|
||||
imgError: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onImgError() {
|
||||
this.imgError = true;
|
||||
},
|
||||
loadImage(img) {
|
||||
var c = this.$parent.$refs[this.container];
|
||||
if(Array.isArray(c)) {
|
||||
c = c[0];
|
||||
}
|
||||
var maxH = c.clientHeight;
|
||||
var maxW = c.clientWidth;
|
||||
var imgW = img.srcElement.naturalWidth;
|
||||
var imgH = img.srcElement.naturalHeight;
|
||||
var t1 = maxW / imgW;
|
||||
var t2 = maxH / imgH;
|
||||
if(t1 > t2) {
|
||||
this.imgWidth = imgW * t2;
|
||||
this.imgHeight = imgH * t2;
|
||||
}else{
|
||||
this.imgWidth = imgW * t1;
|
||||
this.imgHeight = imgH * t1;
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
computed: {
|
||||
imgW: function() {
|
||||
return this.imgWidth;
|
||||
},
|
||||
imgH: function() {
|
||||
return this.imgHeight;
|
||||
},
|
||||
pSize() {
|
||||
},
|
||||
filename() {
|
||||
if(this.details.pictures[this.imgOffset]){
|
||||
return (this.imgError) ? this.getDefaultImage(this.details.modell_kategorie) : this.adCDNPath(this.details.ident_nr_kunde, this.details.ident_nr_standort) + this.details.pictures[this.imgOffset]['datei'];
|
||||
}else{
|
||||
return this.getDefaultImage(this.details.modell_kategorie);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,465 @@
|
||||
<template>
|
||||
<div class="hub hub-detail" id="detailToPrint" style="color: #000000!important; background-color: #FFFFFF!important;">
|
||||
<nav>
|
||||
<ul class="top-links">
|
||||
<li class="list-item">
|
||||
<a @click.prevent="$emit('backTolist')" class="top-link backToListeButton button primary" style="cursor: pointer;" :style="[btnBgColor, btnFgColor]">
|
||||
<span class="padding10">{{ $t('front_extern.detail_zurueck') }}</span>
|
||||
</a>
|
||||
</li>
|
||||
<li v-if="false" class="list-item leftMarg10"><a href="" class="top-link advancedSearchButton button primary" style="cursor: pointer;" :style="[btnBgColor, btnFgColor]"><span class="padding10"> Suche anpassen</span></a></li>
|
||||
<li v-if="getNext" @click.prevent="$emit('gotoNext', getNext)" class="list-item next">
|
||||
<a href="" class="top-link nextInserateButton button primary" data-id="2693330" style="cursor: pointer;" :style="[btnBgColor, btnFgColor]">
|
||||
<span class="padding10">{{ $t('front_extern.detail_naechstes') }} ></span>
|
||||
</a>
|
||||
</li>
|
||||
<li v-if="getPrev" @click.prevent="$emit('gotoPrev', getPrev)" class="list-item prev">
|
||||
<a href="" class="top-link prevInserateButton button primary" data-id="" style="cursor: pointer;" :style="[btnBgColor, btnFgColor]">
|
||||
<span class="padding10">< {{ $t('front_extern.detail_vorher') }}</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<header>
|
||||
<div class="heading-container">
|
||||
<p v-if="false" class="printHeader"><b>{{ details.standort.firma_name }}</b> {{ details.standort.kunde_strasse }} {{ details.standort.kunde_plz }} {{ details.standort.kunde_ort }} Telefon: {{ details.standort.kunde_telefon }} Fax: {{ details.standort.kunde_fax }} </p>
|
||||
<hr style="margin-top: -10px;">
|
||||
<p></p>
|
||||
<h1 v-html="fahrzeug + ' - ' + details.rel_category['bezeichnung_' + lang]" class="title-main" :style="titleColor"></h1>
|
||||
<div v-if="false" class="button-container printPdfContainer exportShowNormal">
|
||||
<a href="javascript:;" class="printDetail" style="color: #000000!important;">
|
||||
<span class="caption" styl="">Drucken | </span>
|
||||
</a>
|
||||
<a href="javascript:;" class="downloadPdfDetail" style="color: #000000!important;">
|
||||
<span class="caption">Download PDF</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="columns" id="divToPrint">
|
||||
<div class="left">
|
||||
<div data-gallery-closetext="Schliessen" class="gallery">
|
||||
<div ref="defaultDContainer" class="image-large-container" style="text-align: center;">
|
||||
<a href="#" @click.prevent="picClicked(0)" rel="group1">
|
||||
<detail-image
|
||||
:details="details"
|
||||
:imgOffset="0"
|
||||
:container="'defaultDContainer'"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="object-list-container">
|
||||
<ul v-if="details.pictures.length > 1" class="object-list thumb-list closed">
|
||||
<template v-for="(pic, ndx) in details.pictures">
|
||||
<li v-if="ndx>0" v-bind:key="ndx" ref="dContainer" style="text-align: center;" class="imageGroup object-list-item">
|
||||
<a href="#" @click.prevent="picClicked(ndx)" class="object-thumb" rel="group1">
|
||||
<detail-image
|
||||
:details="details"
|
||||
:imgOffset="ndx"
|
||||
:container="'dContainer'"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<section>
|
||||
<div class="vehicle-data greyBgAndBorderDetail">
|
||||
<h2 class="title-secondary" :style="titleColor">{{ $t('front_extern.detail_titel') }}</h2>
|
||||
<table :style="fontColor">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th class="data-label">{{ $t('front_extern.detail_kategorie') }}</th>
|
||||
<td class="data">{{ details.rel_category['bezeichnung_' + lang]}}</td>
|
||||
</tr>
|
||||
<tr v-if="details.fzg_1iv">
|
||||
<th class="data-label">{{ $t('front_extern.detail_invsetz') }}</th>
|
||||
<td class="data">{{formatDate(details.fzg_1iv)}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="data-label">{{ $t('front_extern.detail_modell') }}</th>
|
||||
<td class="data">{{ fahrzeug }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="data-label">{{ $t('front_extern.detail_fzg') }}</th>
|
||||
<td class="data">{{ details.rel_art['bezeichnung_' + lang] }}</td>
|
||||
</tr>
|
||||
<tr v-if="details.fzg_farbe">
|
||||
<th class="data-label">{{ $t('front_extern.detail_farbe') }}</th>
|
||||
<td class="data">{{ details.rel_farbe['bezeichnung_' + lang] }}</td>
|
||||
</tr>
|
||||
<tr v-if="details.fzg_rubrik_vermietung == 0">
|
||||
<th class="data-label">{{ $t('front_extern.detail_km') }}</th>
|
||||
<td class="data">{{formatNum(details.fzg_km)}} km</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="data-label">{{ $t('front_extern.detail_hubraum') }}</th>
|
||||
<td class="data">{{ details.modell_ccm!=0 ? formatNum(details.modell_ccm) : '-'}} ccm</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="data-label">{{ $t('front_extern.detail_zustand') }}</th>
|
||||
<td class="data">{{ details.zustand }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="data-label">{{ $t('front_extern.detail_leistung') }}</th>
|
||||
<td class="data">
|
||||
{{details.fzg_leistung ? formatNum(details.fzg_leistung, 1) : '-'}} kW /
|
||||
{{details.fzg_leistung ? formatNum(details.fzg_leistung*1.35962) : '-'}} PS
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="data-label" v-if="details.garantie_typ == 3">
|
||||
{{ $t('front_extern.detail_warranty_manufacturer') }}
|
||||
</th>
|
||||
<th class="data-label" v-else>
|
||||
{{ $t('front_extern.detail_warranty') }}
|
||||
</th>
|
||||
<td v-html="getWarranty()" class="data"></td>
|
||||
</tr>
|
||||
<template v-if="details.fzg_rubrik_vermietung == 1">
|
||||
<tr class="price beschNormal">
|
||||
<th class="data-label">{{ $t('front_extern.detail_preis') }}</th>
|
||||
<td class="data">{{ $t("front_extern.ab") }} {{formatPrice(details.mietkonditionen.miete_tag, 0)}} / {{ $t("front_extern.day") }}</td>
|
||||
</tr>
|
||||
</template>
|
||||
<template v-else>
|
||||
<tr v-if="details.actualprice > 0" class="price beschNormal">
|
||||
<th class="data-label">{{ $t('front_extern.detail_preis') }}</th>
|
||||
<td class="data">{{formatPrice(details.actualprice, 0)}}</td>
|
||||
</tr>
|
||||
</template>
|
||||
<template v-if="details.fzg_text && details.fzg_text.length > 0">
|
||||
<tr class="beschNormal">
|
||||
<th class="data-label "><b>{{ $t('front_extern.detail_bemerkung') }}</b></th>
|
||||
<td class="data"></td>
|
||||
</tr>
|
||||
<tr class="beschNormal">
|
||||
<td v-html="details.fzg_text" colspan="2"></td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
<div class="beschPrint">
|
||||
<h2 class="title-secondary">{{ $t('front_extern.detail_bemerkung') }}</h2>
|
||||
<p v-html="details.fzg_text"></p>
|
||||
</div>
|
||||
<div class="beschPreis">{{ $t('front_extern.detail_preis') }} {{formatPrice(details.actualprice, 0)}} </div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="padding">
|
||||
<div class="chapters">
|
||||
<section>
|
||||
<div class="chapter dealer">
|
||||
<div class="chapter-content greyBgAndBorder">
|
||||
<div style="width: 220px; float: left;">
|
||||
<h2 class="title-secondary" :style="titleColor">{{ $t('front_extern.detail_anbieter') }}</h2>
|
||||
<div class="vcard">
|
||||
<span v-html="details.standort.firma_name" class="org fn"></span>
|
||||
<span class="adr">
|
||||
<span class="street-address">{{ details.standort.kunde_strasse }}</span>
|
||||
<span class="postal-code">{{ details.standort.kunde_plz }}</span>
|
||||
<span class="locality">{{ details.standort.kunde_ort }}</span>
|
||||
</span>
|
||||
</div>
|
||||
<a :href="googleMapsLink" target="_blank" class="geo" style="color: #000000;!important">{{ $t('front_extern.detail_googlemap')}} </a>
|
||||
</div>
|
||||
<div v-if="standortLogo" style="float: right; padding: 0px; padding-top: 25px;"><img :src="standortLogo" :alt="details.standort.firma_name + ' ' + details.standort.kunde_ort" style="max-width: 200px;"></div>
|
||||
<address class="phone-container">
|
||||
<table style="margin-left: -2px;">
|
||||
<tbody>
|
||||
<tr v-if="details.standort.kunde_telefon || details.standort.kunde_mobile" class="primary">
|
||||
<th class="header">{{ $t('front_extern.details_telefon') }}</th>
|
||||
<td class="data">
|
||||
<span class="phone">
|
||||
<a id="lnkPhoneCall_1" :href="'tel:' + (details.standort.kunde_telefon ? details.standort.kunde_telefon.replace(/ /g, '') : details.standort.kunde_mobile.replace(/ /g, ''))" class="tel call-on-me" style="color: #000000!important;">{{ details.standort.kunde_telefon ? details.standort.kunde_telefon : details.standort.kunde_mobile }}</a>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="details.standort.kunde_telefon">
|
||||
<th class="header">{{ $t('front_extern.details_fax') }}</th>
|
||||
<td class="data"><span class="phone"><span class="tel">{{ details.standort.kunde_telefon }}</span></span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</address>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<div class="kontaktDiv">
|
||||
<div class="DetailContact">
|
||||
<div id="kontaktArea">
|
||||
<form v-if="!contactSent" id="kontaktdaten" name="kontaktdaten" method="post" onsubmit="return false;" novalidate="novalidate">
|
||||
<div class="kontaktDiv1">
|
||||
<span class="DCTitle" :style="titleColor">{{ $t('front_extern.form_kontakt') }}</span>
|
||||
<label class="inpLabel">{{ $t('front_extern.form_anrede') }}</label>
|
||||
<input id="anrede0" name="anrede" type="radio" value="1" v-model="form.anrede">
|
||||
<label for="anrede0" class="labelFrau">{{ $t('front_extern.form_frau') }}</label>
|
||||
<input id="anrede1" name="anrede" type="radio" value="2" v-model="form.anrede">
|
||||
<label for="anrede1">{{ $t('front_extern.form_herr') }}</label>
|
||||
<input id="anrede2" name="anrede" type="radio" value="3" v-model="form.anrede">
|
||||
<label for="anrede2">{{ $t('front_extern.form_firma') }}</label>
|
||||
<label ref="vorname" class="inpLabel">{{ $t('front_extern.form_vorname') }} * </label>
|
||||
<input id="vorname" name="vorname" type="text" v-model="form.vorname" class="DetailInputText" :style="errorClass('vorname')" title="">
|
||||
<label ref="name" class="inpLabel">{{ $t('front_extern.form_name') }} *</label>
|
||||
<input id="name" name="name" type="text" v-model="form.name" class="DetailInputText" :style="errorClass('name')" title="">
|
||||
<label ref="telefon" class="inpLabel">{{ $t('front_extern.form_telefon') }} *</label>
|
||||
<input id="telefon" name="telefon" type="text" v-model="form.telefon" class="DetailInputText" :style="errorClass('telefon')" title="">
|
||||
<label ref="email" class="inpLabel">{{ $t('front_extern.form_email') }} *</label>
|
||||
<input id="email" name="email" type="text" v-model="form.email" class="DetailInputText" :style="errorClass('email')" title="">
|
||||
<div class="contactOptions">
|
||||
<input id="chkCopy" type="checkbox" value="1" v-model="form.sendCopy">
|
||||
<label for="chkCopy">{{ $t('front_extern.form_kopie') }}</label>
|
||||
</div>
|
||||
<div class="dieMitInfo">{{ $t('front_extern.form_required') }}<br> </div>
|
||||
<span class="DCTitle" style="color: #DE182E!important;"></span>
|
||||
<label class="inpLabel" style="width:200px;">{{ $t('front_extern.form_interested_in') }}</label>
|
||||
<div class="contactRightOptions">
|
||||
<input id="chkBesichtigung" type="checkbox" v-model="form.chkBesichtigung">
|
||||
<label for="chkBesichtigung">{{ $t('front_extern.form_interested_in_visit') }}</label>
|
||||
<input id="chkProbefahrt" type="checkbox" v-model="form.chkProbefahrt">
|
||||
<label for="chkProbefahrt">{{ $t('front_extern.form_interested_in_testdrive') }}</label>
|
||||
</div>
|
||||
<label class="inpLabel" style0="width:200px;">{{ $t('front_extern.form_bemerkung') }}</label>
|
||||
<textarea id="bemerkungen" v-model="form.bemerkungen" name="bemerkungen" class="contactTextarea"></textarea>
|
||||
<div class="smsSumbitPart">
|
||||
<input type="submit" @click.prevent="sendContact" class="button primary submit advSearchBtn submitKontaktForm" :value="$t('front_extern.form_absenden')" style="cursor: pointer; height: 32px;" :style="[btnBgColor, btnFgColor]">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<div v-else>
|
||||
<span v-html="$t('front_extern.contact_sent')" class="DCTitle" :style="titleColor"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
|
||||
import DetailImage from './DetailImage.vue'
|
||||
|
||||
import PathMixin from '../mixins/PathMixin.js'
|
||||
import Numberformatting from '../mixins/Numberformatting.js'
|
||||
import defaultImageMixin from '../mixins/defaultImageMixin.js'
|
||||
|
||||
export default {
|
||||
props: ['list', 'details', 'lang', 'settings', 'url'],
|
||||
mixins: [PathMixin, Numberformatting, defaultImageMixin],
|
||||
components: {
|
||||
'detail-image': DetailImage
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
contactSent: false,
|
||||
form: {
|
||||
rowID: 0,
|
||||
adID: 0,
|
||||
anrede: 1,
|
||||
vorname: '',
|
||||
name: '',
|
||||
telefon: '',
|
||||
email: '',
|
||||
sendCopy: false,
|
||||
chkBesichtigung: false,
|
||||
chkProbefahrt: false,
|
||||
bemerkungen: '',
|
||||
},
|
||||
formErrors: {
|
||||
name: false,
|
||||
vorname: false,
|
||||
email: false,
|
||||
teleforn: false,
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
picClicked: function() {
|
||||
},
|
||||
defaultPic: function() {
|
||||
if(!this.details.pictures) {
|
||||
return this.getDefaultImage();
|
||||
// return '/front/v30/images/J56420132201.jpg';
|
||||
}
|
||||
if(this.details.pictures.length == 0) {
|
||||
return this.getDefaultImage();
|
||||
// return '/front/v30/images/J56420132201.jpg';
|
||||
}
|
||||
return this.adCDNPath(this.details.ident_nr_kunde, this.details.ident_nr_standort) + this.details.pictures[0].datei;
|
||||
},
|
||||
getPic: function(pic) {
|
||||
return this.adCDNPath(this.details.ident_nr_kunde, this.details.ident_nr_standort) + pic;
|
||||
},
|
||||
getWarranty: function() {
|
||||
var ret = '';
|
||||
switch(this.details.garantie_typ){
|
||||
case 1:
|
||||
return '-';
|
||||
break;
|
||||
case 2:
|
||||
if(this.details.garantie_monate) {
|
||||
ret += this.details.garantie_monate + ' ' + this.$t('front_extern.detail_months');
|
||||
}
|
||||
if(this.details.garantie_km && this.details.garantie_km * 1 != 0 && !isNaN(this.details.garantie_km)) {
|
||||
if(ret != '') {
|
||||
ret += ' ' + this.$t('front_extern.detail_or') + '<br>';
|
||||
}
|
||||
ret += this.formatNum(this.details.garantie_km) + ' ' + this.$t('front_extern.detail_kilometer');
|
||||
}
|
||||
break;
|
||||
case 3:
|
||||
if(this.details.garantie_datum) {
|
||||
ret += this.$t('front_extern.detail_until') + ' ' + this.formatDate(this.details.garantie_datum);
|
||||
}
|
||||
if(this.details.garantie_km && this.details.garantie_km * 1 != 0 && !isNaN(this.details.garantie_km)) {
|
||||
if(ret != '') {
|
||||
ret += ' ' + this.$t('front_extern.detail_or') + '<br>';
|
||||
}
|
||||
ret += this.$t('front_extern.detail_until') + ' ' + this.formatNum(this.details.garantie_km) + ' ' + this.$t('front_extern.detail_kilometer');
|
||||
}
|
||||
break;
|
||||
case 4:
|
||||
if(this.details.garantie_datum) {
|
||||
ret += this.$t('front_extern.detail_until') + ' ' + this.formatDate(this.details.garantie_datum);
|
||||
}
|
||||
if(this.details.garantie_km && this.details.garantie_km * 1 != 0 && !isNaN(this.details.garantie_km)) {
|
||||
if(ret != '') {
|
||||
ret += ' ' + '<br>' + this.$t('front_extern.detail_or') + ' ';
|
||||
}
|
||||
ret += this.$t('front_extern.detail_until') + " 3'000 " + this.$t('front_extern.detail_kilometer');
|
||||
}
|
||||
if(this.details.garantie_vers_anbieter && this.details.garantie_vers_anbieter != 1) {
|
||||
if(ret != '') {
|
||||
ret += '<br/>';
|
||||
}
|
||||
ret += this.$t('front_extern.detail_provider') + ': ' + this.details.garantieAnbieter;
|
||||
}
|
||||
if(this.details.garantie_vers_kosten && this.details.garantie_vers_kosten > 0) {
|
||||
if(ret != '') {
|
||||
ret += '<br>';
|
||||
}
|
||||
ret += this.$t('front_extern.detail_insurance_cost') + ': ' + this.formatPrice(this.details.garantie_vers_kosten, 0);
|
||||
}
|
||||
break;
|
||||
}
|
||||
return ret;
|
||||
},
|
||||
errorClass(name) {
|
||||
if(this.formErrors[name]) {
|
||||
return "border: 2px solid red;"
|
||||
}
|
||||
return '';
|
||||
},
|
||||
resetFormErrors() {
|
||||
this.formErrors = {
|
||||
name: false,
|
||||
vorname: false,
|
||||
email: false,
|
||||
teleforn: false,
|
||||
}
|
||||
},
|
||||
sendContact() {
|
||||
this.isLoading = true;
|
||||
this.form.rowID = this.settings.id;
|
||||
this.form.adID = this.details.id;
|
||||
axios
|
||||
.get(this.url + "/api/ext/sendContact", {
|
||||
params: this.form
|
||||
})
|
||||
.then(response => {
|
||||
this.resetFormErrors();
|
||||
this.contactSent = true;
|
||||
})
|
||||
.catch(error => {
|
||||
this.resetFormErrors();
|
||||
if(error.response.status == 422){
|
||||
var errList = error.response.data.errors;
|
||||
var listKeys = Object.keys(errList);
|
||||
if(listKeys.length > 0) {
|
||||
listKeys.forEach(element => {
|
||||
this.formErrors[element] = true;
|
||||
});
|
||||
}
|
||||
}else{
|
||||
console.log('Error: ', error.response.data)
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
this.isLoading = false;
|
||||
})
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
axiosParams() {
|
||||
const params = new URLSearchParams();
|
||||
params.append('param1', 'value1');
|
||||
params.append('param2', 'value2');
|
||||
return params;
|
||||
},
|
||||
getPrev: function() {
|
||||
var id = this.details.id;
|
||||
var ndx = this.list.findIndex(i => i.id === id);
|
||||
if(ndx > 0) {
|
||||
return this.list[ndx-1].id;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
getNext: function() {
|
||||
var id = this.details.id;
|
||||
var ndx = this.list.findIndex(i => i.id === id);
|
||||
if(ndx < this.list.length-1) {
|
||||
return this.list[ndx+1].id;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
fahrzeug() {
|
||||
if(this.details.modell_zusatz && this.details.modell_zusatz.length > 0) {
|
||||
return this.details.rel_marke.Markenbezeichnung + ' ' + this.details.rel_modelle.Modellbezeichnung + ' ' + this.details.modell_zusatz;
|
||||
}else{
|
||||
return this.details.rel_marke.Markenbezeichnung + ' ' + this.details.rel_modelle.Modellbezeichnung;
|
||||
}
|
||||
},
|
||||
titleColor: function() {
|
||||
return this.settings.titleColor ? 'color: #' + this.settings.titleColor + ' !important;' : '';
|
||||
},
|
||||
bgColor: function() {
|
||||
return this.settings.bgColor ? 'background-color: #' + this.settings.bgColor + ';' : '';
|
||||
},
|
||||
fontColor: function() {
|
||||
return this.settings.fontColor ? 'color: #' + this.settings.fontColor + ' !important;' : '';
|
||||
},
|
||||
btnBgColor: function() {
|
||||
return this.settings.buttonColor ? 'background: #' + this.settings.buttonColor + ' !important' : '';
|
||||
},
|
||||
btnFgColor: function() {
|
||||
return this.settings.buttonTextColor ? 'color: #' + this.settings.buttonTextColor + ' !important;' : '';
|
||||
},
|
||||
googleMapsLink: function() {
|
||||
return '//maps.google.ch/maps?q=' + this.details.standort.kunde_strasse + ',' + this.details.standort.kunde_plz + '+' + this.details.standort.kunde_ort;
|
||||
},
|
||||
standortLogo: function() {
|
||||
var logo = this.details.standort.medien.find(b => b.medientyp_id == 1);
|
||||
if(logo) {
|
||||
return this.clientCDNPath(this.details.ident_nr_kunde, this.details.ident_nr_standort) + '/logos/' + logo.media;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
|
||||
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -0,0 +1,216 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="hub hub-search" id="basicSearchId">
|
||||
<div class="heading-container" style="line-height: 70px; margin-bottom: 0px;">
|
||||
<div class="navButtonsContainer">
|
||||
<h1 class="title-main" :style="fontColor">
|
||||
<span class="counter-container">
|
||||
<span class="count">{{ data.results ? data.results.length : 0 }}</span> {{ $t('front_extern.vehicles')}}
|
||||
</span>
|
||||
</h1>
|
||||
<template v-if="false">
|
||||
<span class="divider advanced-mobile"> | </span><span class="customize-search-container advanced-mobile"><a href="javascript:;" class="top-link customize-search advancedSearchButton"><span style="color: #000000!important">Erweiterte Suche</span></a></span><span class="divider advanced-mobile"> | </span><span class="customize-search-container"><a href="javascript:;" class="top-link customize-search resetButton"><span style="color: #000000!important">Zurücksetzen</span></a></span>
|
||||
</template>
|
||||
</div>
|
||||
<div v-if="false" class="printButtonsContainer"><a href="#" class="printLayerButton" data-modal-id="modalPrint" style="color: #000000!important">Drucken</a><span class="divider"> | </span><a href="#" class="pdfLayerButton" data-modal-id="modalPdf" style="color: #000000!important">Download PDF</a></div>
|
||||
</div>AA
|
||||
<form v-if="true" id="hcifilterform" action="" method="GET">
|
||||
<div class="expander">
|
||||
<div class="expander-content" style="background-color: #fff!important;">
|
||||
<div class="filter-form">
|
||||
<div class="layout--group">
|
||||
<div class="layout--four-fifth full-w-mobile">
|
||||
<div class="layout--group">
|
||||
<div class="layout--one-fourth">
|
||||
<div class="part-line connected"><label for="Make" class="line-label"><span class="label-text" style="color: #d63e2d!important;">Marke</span></label>
|
||||
<div class="ghost-select-container">
|
||||
<div class="ghost-select"><span class="label">Alle</span>
|
||||
<div class="button" style="background: #d63e2d!important;"><span class="icon" style="border-top-color: #FFFFFF!important;"></span></div>
|
||||
<select class="ghost" data-param="make" id="markenID" name="Make">
|
||||
<option value="0">Alle</option>
|
||||
<option value="APRILIA">APRILIA</option>
|
||||
<option value="BMW">BMW</option>
|
||||
<option value="KAWASAKI">KAWASAKI</option>
|
||||
<option value="SUZUKI">SUZUKI</option>
|
||||
<option value="YAMAHA">YAMAHA</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="connector"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout--one-fourth">
|
||||
<div class="part-line"><label for="Model" class="line-label"><span class="label-text" style="color: #d63e2d!important;">Modell</span></label>
|
||||
<div class="ghost-select-container" id="divModel">
|
||||
<div class="ghost-select"><span class="label"> </span>
|
||||
<div class="button" style="background: #d63e2d!important;"><span class="icon" style="border-top-color: #FFFFFF!important;"></span></div><select class="ghost" data-param="model" id="modelID" name="Model">
|
||||
<option value="0">Alle</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="connector"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout--one-fourth">
|
||||
<div class="part-line"><label for="PriceTo" class="line-label"><span class="label-text" style="color: #d63e2d!important;">Preis <span class="label-hint">bis</span></span></label>
|
||||
<div class="ghost-select-container">
|
||||
<div class="ghost-select"><span class="label">Alle</span>
|
||||
<div class="button" style="background: #d63e2d!important;"><span class="icon" style="border-top-color: #FFFFFF!important;"></span></div><select class="ghost" data-param="priceto" id="PriceTo" name="PriceTo">
|
||||
<option value="" selected="selected">Alle</option>
|
||||
<option value="1000">CHF 1000</option>
|
||||
<option value="2000">CHF 2'000</option>
|
||||
<option value="3000">CHF 3'000</option>
|
||||
<option value="4000">CHF 4'000</option>
|
||||
<option value="5000">CHF 5'000</option>
|
||||
<option value="7500">CHF 7'500</option>
|
||||
<option value="10000">CHF 10'000</option>
|
||||
<option value="12500">CHF 12'500</option>
|
||||
<option value="15000">CHF 15'000</option>
|
||||
<option value="17500">CHF 17'500</option>
|
||||
<option value="20000">CHF 20'000</option>
|
||||
<option value="22500">CHF 22'500</option>
|
||||
<option value="25000">CHF 25'000</option>
|
||||
<option value="30000">CHF 30'000</option>
|
||||
<option value="35000">CHF 35'000</option>
|
||||
<option value="40000">CHF 40'000</option>
|
||||
<option value="45000">CHF 45'000</option>
|
||||
<option value="50000">CHF 50'000</option>
|
||||
<option value="60000">CHF 60'000</option>
|
||||
<option value="70000">CHF 70'000</option>
|
||||
<option value="80000">CHF 80'000</option>
|
||||
<option value="90000">CHF 90'000</option>
|
||||
<option value="100000">CHF 100'000</option>
|
||||
<option value="150000">CHF 150'000</option>
|
||||
<option value="200000">CHF 200'000</option>
|
||||
<option value="300000">CHF 300'000</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="connector"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout--one-fourth">
|
||||
<div class="part-line"><label for="KmTo" class="line-label"><span class="label-text" style="color: #d63e2d!important;">km <span class="label-hint">bis</span></span></label>
|
||||
<div class="ghost-select-container">
|
||||
<div class="ghost-select"><span class="label">Alle</span>
|
||||
<div class="button" style="background: #d63e2d!important;"><span class="icon" style="border-top-color: #FFFFFF!important;"> </span></div><select class="ghost" data-param="kmto" id="KmTo" name="KmTo">
|
||||
<option value="">Alle</option>
|
||||
<option value="1000">1'000 Km</option>
|
||||
<option value="5000">5'000 Km</option>
|
||||
<option value="7500">7'500 Km</option>
|
||||
<option value="10000">10'000 Km</option>
|
||||
<option value="25000">25'000 Km</option>
|
||||
<option value="50000">50'000 Km</option>
|
||||
<option value="60000">60'000 Km</option>
|
||||
<option value="70000">70'000 Km</option>
|
||||
<option value="80000">80'000 Km</option>
|
||||
<option value="90000">90'000 Km</option>
|
||||
<option value="100000">100'000 Km</option>
|
||||
<option value="125000">125'000 Km</option>
|
||||
<option value="150000">150'000 Km</option>
|
||||
<option value="175000">175'000 Km</option>
|
||||
<option value="200000">200'000 Km</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="connector"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout--one-fifth showOnMobile">
|
||||
<div class="part-line"><label for="Sort" class="line-label"><span class="label-text" style="color: #d63e2d!important;">Sortieren nach:</span></label>
|
||||
<div class="ghost-select-container">
|
||||
<div class="ghost-select sort"><span class="label sortLabelText">Bitte auswählen</span>
|
||||
<div class="button" style="background: #d63e2d!important;"><span class="icon" style="border-top-color: #FFFFFF!important;"> </span></div><select class="ghost" data-param="sort" id="Sort" name="Sort">
|
||||
<option value="" selected="selected">Bitte auswählen</option>
|
||||
<option value="price_asc">Preis (tiefster zuerst)</option>
|
||||
<option value="price_desc">Preis (höchster zuerst)</option>
|
||||
<option value="km_asc">Km (tiefste zuerst)</option>
|
||||
<option value="km_desc">Km (höchste zuerst)</option>
|
||||
<option value="year_asc">Jahrgang (älteste zuerst)</option>
|
||||
<option value="year_desc">Jahrgang (neuste zuerst)</option>
|
||||
<option value="makemodel_asc">Marke/Modell (A-Z)</option>
|
||||
<option value="makemodel_desc">Marke/Modell (Z-A)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="connector"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout--group">
|
||||
<div class="layout--one-fourth onMobile">
|
||||
<div class="part-line"><label for="Sort" class="line-label"><span class="label-text" style="color: #d63e2d!important;">Sortieren nach:</span></label>
|
||||
<div class="ghost-select-container">
|
||||
<div class="ghost-select sort"><span class="label sortLabelText">Bitte auswählen</span>
|
||||
<div class="button" style="background: #d63e2d!important;"><span class="icon" style="border-top-color: #FFFFFF!important;"> </span></div><select class="ghost" data-param="sort" id="Sort" name="Sort">
|
||||
<option value="">Bitte auswählen</option>
|
||||
<option value="price_asc">Preis (tiefster zuerst)</option>
|
||||
<option value="price_desc">Preis (höchster zuerst)</option>
|
||||
<option value="km_asc">Km (tiefste zuerst)</option>
|
||||
<option value="km_desc">Km (höchste zuerst)</option>
|
||||
<option value="year_asc">Jahrgang (älteste zuerst)</option>
|
||||
<option value="year_desc">Jahrgang (neuste zuerst)</option>
|
||||
<option value="makemodel_asc">Marke/Modell (A-Z)</option>
|
||||
<option value="makemodel_desc">Marke/Modell (Z-A)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="connector"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="hub hub-filter-list">
|
||||
<div class="resultListContainer" style="margin: 0 auto;"></div>
|
||||
<div id="listContainerToPrint" class="object-list-container search-result-container">
|
||||
<p class="printHeader"><b>Keller Motos AG</b> Industriestrasse 17 5301 Siggenthal-Station Telefon: 056 281 13 13 </p>
|
||||
<product-grid
|
||||
:data="data.results"
|
||||
:lang="lang"
|
||||
:settings="settings"
|
||||
@detailClick="$emit('detailClick', $event)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { emit } from 'process';
|
||||
import ProductGrid from './ProductGrid.vue'
|
||||
|
||||
export default {
|
||||
props: ['data', 'lang', 'settings'],
|
||||
components: {
|
||||
'product-grid': ProductGrid,
|
||||
},
|
||||
data() {
|
||||
},
|
||||
computed: {
|
||||
// titleColor: function() {
|
||||
// return this.settings.titleColor ? 'color: #' + this.settings.titleColor + ' !important' : '';
|
||||
// },
|
||||
// bgColor: function() {
|
||||
// return this.settings.divBGColor ? 'color: #' + this.settings.divBGColor + ' !important' : '11';
|
||||
// },
|
||||
fgColor: function() {
|
||||
// console.log(this.settings)
|
||||
console.log('this.settings.divBGColor', this.settings.divBGColor)
|
||||
return this.settings.divBGColor ? 'color: #' + this.settings.divBGColor + ' !important' : '11';
|
||||
},
|
||||
// bgColor: function() {
|
||||
// // console.log('this.settings.divBGColor', this.settings.divBGColor)
|
||||
// return this.settings.divBGColor ? 'background-color: #' + this.settings.divBGColor + ' !important' : '11';
|
||||
// },
|
||||
fontColor: function() {
|
||||
return this.settings.fontColor ? 'color: #' + this.settings.fontColor + ' !important' : '';
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<ul class="listContainerJSON object-list search-result-list">
|
||||
<result-item v-for="result in data"
|
||||
v-bind:key="result.id"
|
||||
:result="result"
|
||||
:lang="lang"
|
||||
:settings="settings"
|
||||
@detailClick="$emit('detailClick', $event)"
|
||||
>
|
||||
</result-item>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ResultItem from './ResultItem.vue'
|
||||
// import Loader from './Loader.vue'
|
||||
|
||||
export default {
|
||||
props: [
|
||||
"data", "lang", "loading", 'settings'
|
||||
],
|
||||
components: {
|
||||
'result-item': ResultItem,
|
||||
// 'loader': Loader,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
computed: {
|
||||
// resultsLoading() {
|
||||
// return this.$store.state.items.resultsLoading;
|
||||
// },
|
||||
},
|
||||
methods: {
|
||||
},
|
||||
watch: {
|
||||
resultsLoading(to, from) {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<img
|
||||
class=""
|
||||
:src="filename"
|
||||
:width="imgW"
|
||||
:height="imgH"
|
||||
@load="loadImage"
|
||||
@error="onImgError()"
|
||||
>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PathMixin from '../mixins/PathMixin.js'
|
||||
import defaultImageMixin from '../mixins/defaultImageMixin.js'
|
||||
|
||||
export default {
|
||||
mixins: [PathMixin, defaultImageMixin],
|
||||
props: ['result'],
|
||||
|
||||
data: function () {
|
||||
return {
|
||||
imgWidth: 1,
|
||||
imgHeight: 1,
|
||||
imgError: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onImgError() {
|
||||
this.imgError = true;
|
||||
},
|
||||
loadImage(img) {
|
||||
if(this.$parent.$refs.rImageContainer) {
|
||||
var maxH = this.$parent.$refs.rImageContainer.clientHeight;
|
||||
var maxW = this.$parent.$refs.rImageContainer.clientWidth;
|
||||
var imgW = img.srcElement.naturalWidth;
|
||||
var imgH = img.srcElement.naturalHeight;
|
||||
var t1 = maxW / imgW;
|
||||
var t2 = maxH / imgH;
|
||||
if(t1 > t2) {
|
||||
this.imgWidth = imgW * t2;
|
||||
this.imgHeight = imgH * t2;
|
||||
}else{
|
||||
this.imgWidth = imgW * t1;
|
||||
this.imgHeight = imgH * t1;
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
computed: {
|
||||
imgW: function() {
|
||||
return this.imgWidth;
|
||||
},
|
||||
imgH: function() {
|
||||
return this.imgHeight;
|
||||
},
|
||||
pSize() {
|
||||
},
|
||||
filename() {
|
||||
if(this.result.media[0]){
|
||||
return (this.imgError) ? this.getDefaultImage(this.result.modell_kategorie) : this.adCDNPath(this.result.ident_nr_kunde, this.result.ident_nr_standort) + this.result.media[0]['datei'];
|
||||
}else{
|
||||
return this.getDefaultImage(this.result.modell_kategorie);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,183 @@
|
||||
<template>
|
||||
<a href="#" @click.prevent="$emit('detailClick', result.id)" class="newListeItem ListeField goToDetail">
|
||||
<div :style="[bgColor]">
|
||||
<div ref="rImageContainer" class="ListeCol newListeImageContainer" style="text-align: center;">
|
||||
<result-image
|
||||
data-src=""
|
||||
:alt="result.rel_marke.Markenbezeichnung + ' ' + result.rel_modelle.Modellbezeichnung + ' ' + result.rel_category['bezeichnung_' + lang] + ' ' + result.rel_art['bezeichnung_' + lang]"
|
||||
:title="result.rel_marke.Markenbezeichnung + ' ' + result.rel_modelle.Modellbezeichnung + ' ' + result.rel_category['bezeichnung_' + lang] + ' ' + result.rel_art['bezeichnung_' + lang]"
|
||||
:result="result"
|
||||
class=""
|
||||
/>
|
||||
</div>
|
||||
<div class="ListeCol newListeTitleDetailsContainer" :style="fontColor">
|
||||
<div class="newListeTitleDetailsFirst" style="width:500px;">
|
||||
<span v-html="fahrzWoZus" :style="titleColor" class="newListeTitletext mobileTruncate"></span>
|
||||
<br>
|
||||
</div>
|
||||
<div class="newListeTitleDetailsSecond">
|
||||
<span class="exportShowMobile"><b>{{formatPrice(result.fzg_preis, 0)}}</b></span>
|
||||
{{result.rel_art['bezeichnung_' + lang]}} <br>
|
||||
<span v-if="result.fzg_art == '1' || result.fzg_art == '2'">
|
||||
<template v-if="result.fzg_rubrik_vermietung == 0">
|
||||
<span v-if="result.fzg_km_distanz == 0">
|
||||
{{ formatNum(result.fzg_km) }} {{ $t("front_extern.km") }}
|
||||
</span>
|
||||
<span v-else>
|
||||
{{ formatNum(result.fzg_km) }} {{ $t("front_extern.h") }}
|
||||
</span>
|
||||
<br />
|
||||
</template>
|
||||
<template v-if="result.fzg_1iv != ''">
|
||||
{{ $t("front_extern.1iv") }} {{ formatDate(result.fzg_1iv) }}<br />
|
||||
</template>
|
||||
{{result.fzg_leistung ? formatNum(result.fzg_leistung, 1) + 'KW' : ''}} {{ $t("front_extern.ausweis") }} {{result.rel_ausweis['bezeichnung_' + lang]}}
|
||||
</span>
|
||||
<span v-else-if="result.fzg_art == '3' || result.fzg_art == '4' || result.fzg_art == '5'">
|
||||
<template v-if="result.garantie_typ == '2'">
|
||||
<template v-if="result.garantie_monate != ''">
|
||||
{{ result.garantie_monate }}
|
||||
{{ $t("front_extern.monate") }}
|
||||
</template>
|
||||
<template v-if="result.garantie_monate != '' && result.garantie_km != ''">
|
||||
{{ $t("front_extern.oder") }}
|
||||
</template>
|
||||
<template v-if="result.garantie_km != ''">
|
||||
{{ result.garantie_km }} {{ $t("front_extern.kilometer") }}
|
||||
</template>
|
||||
</template>
|
||||
<template v-if="result.garantie_typ == '3'">
|
||||
<template v-if="result.garantie_monate != ''">
|
||||
{{ result.garantie_monate }}
|
||||
{{ $t("front_extern.monate") }}
|
||||
</template>
|
||||
<template v-if="result.garantie_monate != '' && result.garantie_km != ''">
|
||||
{{ $t("front_extern.oder") }}
|
||||
</template>
|
||||
<template v-if="result.garantie_km != ''">
|
||||
{{ result.garantie_km }} {{ $t("front_extern.kilometer") }}
|
||||
</template>
|
||||
</template>
|
||||
<template v-if="result.garantie_monate != '' && result.garantie_km == ''">
|
||||
<br />
|
||||
</template>
|
||||
<template v-if="result.fzg_1iv != '' && result.fzg_art == '5'">
|
||||
{{ $t("front_extern.1iv") }} {{ result.fzg_1iv }}<br />
|
||||
</template>
|
||||
{{result.fzg_leistung ? formatNum(result.fzg_leistung, 1) + 'KW' : ''}} {{ $t("front_extern.ausweis") }} {{result.rel_ausweis['bezeichnung_' + lang]}}
|
||||
</span>
|
||||
<span class="hide-mob"> |</span> {{ result.rel_farbe['bezeichnung_' + lang] }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="ListeCol exportShowNormal" style="width: 12px;" :style="fontColor">
|
||||
<span style="border-left: 1px solid #ccc; display: block; height: 85px; margin-top: 10px;"> </span>
|
||||
</div>
|
||||
<div class="ListeCol newListePriceDetailsContainer exportShowNormal" :style="fontColor">
|
||||
<template v-if="result.fzg_rubrik_vermietung == 1">
|
||||
<span v-if="result.mietkonditionen && result.mietkonditionen.miete_tag" class="newListePriceDetailsContainerFirst">
|
||||
{{ $t("front_extern.ab") }} <b>{{formatPrice(result.mietkonditionen.miete_tag, 0)}} / {{ $t("front_extern.day") }}</b>
|
||||
</span>
|
||||
</template>
|
||||
<span v-else-if="result.actualprice > 0" class="newListePriceDetailsContainerFirst">
|
||||
<b>{{formatPrice(result.actualprice, 0)}}</b>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ResultImage from './ResultImage.vue'
|
||||
import PathMixin from '../mixins/PathMixin.js'
|
||||
import Numberformatting from '../mixins/Numberformatting.js'
|
||||
|
||||
export default {
|
||||
mixins: [PathMixin, Numberformatting],
|
||||
props: ['result', 'lang', 'settings'],
|
||||
components: {
|
||||
'result-image': ResultImage
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// formatPrice(price){
|
||||
// if(price == 0) {
|
||||
// return this.$t('front_detail.on_request')
|
||||
// }else{
|
||||
// var options = { style: "currency", currency: "CHF", roundingIncrement: 1, maximumFractionDigits: 0 }
|
||||
// return Intl.NumberFormat("de-CH", options).format(price) + '.-';
|
||||
// }
|
||||
// },
|
||||
formatNum(price, digits = 0){
|
||||
var options = { maximumFractionDigits: digits, minimumFractionDigits: digits }
|
||||
return Intl.NumberFormat("de-CH", options).format(price);
|
||||
},
|
||||
// formatDate(value){
|
||||
// if(!value) {
|
||||
// return '-';
|
||||
// }
|
||||
// const date = new Date(value);
|
||||
// if(!date instanceof Date || isNaN(date)) {
|
||||
// return '-';
|
||||
// }
|
||||
// return new Intl.DateTimeFormat("de-CH", {year: 'numeric', month: '2-digit', day: '2-digit' }).format(date);
|
||||
// },
|
||||
getCategoryText(id) {
|
||||
switch (id) {
|
||||
case 4:
|
||||
case 5:
|
||||
case 6:
|
||||
case 7:
|
||||
case 8:
|
||||
case 11:
|
||||
case 15:
|
||||
case 19:
|
||||
return this.$t('front_extern.result_motorrad');
|
||||
break;
|
||||
default:
|
||||
return '';
|
||||
break;
|
||||
}
|
||||
},
|
||||
getArtClass(result) {
|
||||
switch (result.fzg_art) {
|
||||
case 1:
|
||||
return 'bg-mhsecondary-orange';
|
||||
break;
|
||||
case 2:
|
||||
return 'bg-mhsecondary-cyan';
|
||||
break;
|
||||
case 3:
|
||||
return 'bg-mhsecondary-moss';
|
||||
break;
|
||||
case 4:
|
||||
default:
|
||||
return 'bg-mhsecondary-yellow';
|
||||
break;
|
||||
case 5:
|
||||
return 'bg-mhsecondary-beige';
|
||||
break;
|
||||
}
|
||||
},
|
||||
createUrl(result) {
|
||||
return this.adSlug(this.lang, result.rel_marke.Markenbezeichnung, result.rel_modelle.Modellbezeichnung, result.id);
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
fahrzWoZus() {
|
||||
return this.result.rel_marke.Markenbezeichnung + ' ' + this.result.rel_modelle.Modellbezeichnung;
|
||||
},
|
||||
titleColor: function() {
|
||||
return this.settings.titleColor ? 'color: #' + this.settings.titleColor + ' !important' : '';
|
||||
},
|
||||
bgColor: function() {
|
||||
return this.settings.bgColor ? 'background-color: #' + this.settings.bgColor : '';
|
||||
},
|
||||
fontColor: function() {
|
||||
return this.settings.fontColor ? 'color: #' + this.settings.fontColor + ' !important' : '';
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
Vendored
+26
@@ -0,0 +1,26 @@
|
||||
import { createApp } from 'vue'
|
||||
import { i18n } from './modules/i18n.js';
|
||||
import App from "./App.vue";
|
||||
|
||||
const appEl = document.createElement('div');
|
||||
appEl.setAttribute("id", "app");
|
||||
|
||||
// var src = document.getElementsByClassName('wrapperJSON');
|
||||
// if(src.length) {
|
||||
// src[0].appendChild(appEl);
|
||||
// }else{
|
||||
// const queryString = window.location.search;
|
||||
// const urlParams = new URLSearchParams(queryString);
|
||||
// var ui=urlParams.get('ui');
|
||||
// var fzl=urlParams.get('fzl');
|
||||
// const wrapper = document.createElement('div');
|
||||
// wrapper.setAttribute("class", "wrapperJSON");
|
||||
// wrapper.setAttribute("data-ui", ui);
|
||||
// wrapper.setAttribute("data-fzl", fzl);
|
||||
// wrapper.appendChild(appEl);
|
||||
// document.body.appendChild(wrapper);
|
||||
// }
|
||||
|
||||
document.body.appendChild(appEl);
|
||||
|
||||
createApp(App).use(i18n).mount('#app');
|
||||
@@ -0,0 +1,48 @@
|
||||
export default {
|
||||
methods: {
|
||||
formatPrice(price, prec=2, dots=true, label=true) {
|
||||
price = Number(price);
|
||||
if(price == 0 && label) {
|
||||
return this.$t('front_extern.on_request')
|
||||
}else{
|
||||
if(price != Math.floor(price) && prec > 0) {
|
||||
return 'CHF ' + this.splitAndPad(price.toFixed(prec));
|
||||
}
|
||||
if(dots) {
|
||||
return 'CHF ' + this.splitAndPad(price.toFixed(0)) + '.-';
|
||||
}else{
|
||||
return 'CHF ' + this.splitAndPad(price.toFixed(0));
|
||||
}
|
||||
}
|
||||
},
|
||||
splitAndPad(number) {
|
||||
number = number + '';
|
||||
var x = number.split('.');
|
||||
var x1 = x[0];
|
||||
var x2 = x.length > 1 ? '.' + x[1] : '';
|
||||
var rgx = /(\d+)(\d{3})/;
|
||||
while (rgx.test(x1)) {
|
||||
x1 = x1.replace(rgx, '$1' + '’' + '$2');
|
||||
}
|
||||
return x1 + x2;
|
||||
},
|
||||
isContentHtml(input) {
|
||||
var htmlRegex = new RegExp(/<[a-z/][\s\S]*>/i);
|
||||
return htmlRegex.test(input);
|
||||
},
|
||||
formatDate(value) {
|
||||
if(!value) {
|
||||
return '-';
|
||||
}
|
||||
const date = new Date(value);
|
||||
if(!date instanceof Date || isNaN(date)) {
|
||||
return '-';
|
||||
}
|
||||
return new Intl.DateTimeFormat("de-CH", {year: 'numeric', month: '2-digit', day: '2-digit' }).format(date);
|
||||
},
|
||||
formatNum(price, digits = 0){
|
||||
var options = { maximumFractionDigits: digits, minimumFractionDigits: digits }
|
||||
return Intl.NumberFormat("de-CH", options).format(price);
|
||||
},
|
||||
}
|
||||
};
|
||||
+42
@@ -0,0 +1,42 @@
|
||||
import { slugify } from 'transliteration';
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
// CDN paths
|
||||
clientCDNPath(client, location) {
|
||||
return "https://cdn.motorradhandel.ch/media/clients/" + client + '/' + location;
|
||||
},
|
||||
adCDNPath(client, location) {
|
||||
return this.clientCDNPath(client, location) + '/ads/';
|
||||
},
|
||||
marktplatzCDNPath(client, location) {
|
||||
return this.clientCDNPath(client, location) + '/marktplatz/';
|
||||
},
|
||||
brandLogos(logo) {
|
||||
return "https://cdn.motorradhandel.ch/media/marken/images/" + logo;
|
||||
},
|
||||
|
||||
|
||||
// Slug creations
|
||||
adSlug(locale, brandName, modelName, id) {
|
||||
return '/' + locale + '/d/' + this.safeString(brandName) + '/' + this.safeString(modelName) + '/' + id;
|
||||
},
|
||||
rentalSlug(locale, brandName, modelName, id) {
|
||||
return '/' + locale + '/m/' + this.safeString(brandName) + '/' + this.safeString(modelName) + '/' + id;
|
||||
},
|
||||
clientSlug(locale, clientName, id) {
|
||||
return '/' + locale + '/h/' + this.safeString(clientName) + '/' + id;
|
||||
},
|
||||
marktplatzSlug(locale, art, title, id) {
|
||||
return '/' + locale + '/mp/' + this.safeString(art) + '/' + this.safeString(title) + '/' + id;
|
||||
},
|
||||
bikesorySlug(locale, title, brand, model, id) {
|
||||
return '/' + locale + '/stories/' + this.safeString(title) + '/' + this.safeString(brand) + '/' + this.safeString(model) + '/' + id;
|
||||
},
|
||||
|
||||
|
||||
safeString(str) {
|
||||
return slugify(str).replace(/[-\s]+/g, '-');
|
||||
},
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,10 @@
|
||||
export default {
|
||||
methods: {
|
||||
getDefaultImage(category = 1) {
|
||||
return "https://cdn.motorradhandel.ch/media/categories/def_images/motorradhandel_missing_image_" + category + ".png";
|
||||
},
|
||||
getDefaultMPImage(category = 1) {
|
||||
return "https://cdn.motorradhandel.ch/media/categories/def_images/motorradhandel_mp_missing_image_" + category + ".png";
|
||||
},
|
||||
}
|
||||
};
|
||||
+28
@@ -0,0 +1,28 @@
|
||||
import { useI18n, createI18n } from 'vue-i18n';
|
||||
import axios from 'axios'
|
||||
|
||||
|
||||
export const i18n = createI18n({
|
||||
locale: 'de',
|
||||
fallbackLocale: 'de',
|
||||
allowComposition: true,
|
||||
})
|
||||
|
||||
const loadedLanguages = []
|
||||
|
||||
function setI18nLanguage (i18n, lang) {
|
||||
if (i18n.mode === 'legacy') {
|
||||
i18n.global.locale = lang
|
||||
} else {
|
||||
i18n.global.locale.value = lang
|
||||
}
|
||||
axios.defaults.headers.common['Accept-Language'] = lang
|
||||
document.querySelector('html').setAttribute('lang', lang)
|
||||
return lang
|
||||
}
|
||||
|
||||
export const loadLanguage = function(i18n, lng, texts) {
|
||||
loadedLanguages.push(lng)
|
||||
i18n.global.setLocaleMessage(lng, texts)
|
||||
setI18nLanguage(i18n, lng)
|
||||
}
|
||||
@@ -0,0 +1,133 @@
|
||||
<template>
|
||||
<loader :active="isLoading"/>
|
||||
<!-- 1-{{ $store.state.settings.divBgColor }}-1 -->
|
||||
<div v-if="lngLoaded" :style="bckgrColor('divBgColor')">
|
||||
<details-page v-if="detailsPage"
|
||||
:url="url"
|
||||
:api="api"
|
||||
@backTolist="detailsPage=false"
|
||||
@gotoPrev="gotoPrev"
|
||||
@gotoNext="gotoNext"
|
||||
/>
|
||||
<search-page v-else
|
||||
@detailClick="detailClick"
|
||||
@brandChanged="brandChanged"
|
||||
@reloadData="reloadData"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
|
||||
import PageSearch from './components/PageSearch.vue'
|
||||
import PageDetail from './components/PageDetail.vue'
|
||||
import {i18n, loadLanguage} from './modules/i18n'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'search-page': PageSearch,
|
||||
'details-page': PageDetail,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
configParams: {
|
||||
rowID: 0,
|
||||
},
|
||||
// url: 'https://motorradhandel.ch',
|
||||
url: 'https://staging.motorradhandel.ch',
|
||||
// url: 'http://mh3.com',
|
||||
api: '/api/extMP/',
|
||||
isLoading: false,
|
||||
lngLoaded: false,
|
||||
detailsPage: false,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
var t = document.getElementsByClassName('wrapperJSON');
|
||||
if(t.length) {
|
||||
this.configParams.rowID = t[0].dataset.mpl;
|
||||
this.getSettings();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
brandChanged() {
|
||||
this.isLoading = true;
|
||||
axios
|
||||
.get(this.url + this.api + "getModels?id=" + this.$store.state.settings.id, {params: this.$store.state.selected})
|
||||
.then(response => {
|
||||
this.$store.commit('updateModels', response);
|
||||
this.reloadData();
|
||||
})
|
||||
.catch(error => {
|
||||
console.log(error)
|
||||
})
|
||||
.finally(() => {
|
||||
this.isLoading = false;
|
||||
})
|
||||
},
|
||||
reloadData() {
|
||||
this.isLoading = true;
|
||||
axios
|
||||
.get(this.url + this.api + "loadResults?id=" + this.$store.state.settings.id, {params: this.$store.state.selected})
|
||||
.then(response => {
|
||||
this.$store.commit('updateResults', response);
|
||||
})
|
||||
.catch(error => {
|
||||
console.log(error)
|
||||
})
|
||||
.finally(() => {
|
||||
this.isLoading = false;
|
||||
})
|
||||
},
|
||||
detailClick(id) {
|
||||
this.isLoading = true;
|
||||
// this.details = {};
|
||||
axios
|
||||
.get(this.url + this.api + "getDetails?id=" + id)
|
||||
.then(response => {
|
||||
this.$store.commit('updateDetails', response);
|
||||
this.detailsPage = true;
|
||||
})
|
||||
.catch(error => {
|
||||
console.log(error)
|
||||
})
|
||||
.finally(() => {
|
||||
this.isLoading = false;
|
||||
})
|
||||
},
|
||||
getSettings() {
|
||||
this.isLoading = true;
|
||||
var configParams = this.configParams;
|
||||
axios
|
||||
.get(this.url + this.api + 'getSettings?rowID=' + configParams.rowID)
|
||||
.then(response => {
|
||||
this.$store.commit('updateSettings', response);
|
||||
loadLanguage(i18n, this.$store.state.settings.lang, response.data.trans);
|
||||
this.lngLoaded = true;
|
||||
})
|
||||
.catch(error => {
|
||||
console.log(error)
|
||||
})
|
||||
.finally(() => {
|
||||
this.isLoading = false;
|
||||
})
|
||||
},
|
||||
gotoPrev(id) {
|
||||
this.detailClick(id);
|
||||
},
|
||||
gotoNext(id) {
|
||||
this.detailClick(id);
|
||||
}
|
||||
},
|
||||
// computed: {
|
||||
// bgColor: function() {
|
||||
// return this.$store.state.settings.divBGColor ? 'background: #' + this.$store.state.settings.divBGColor : '';
|
||||
// },
|
||||
// },
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import "https://motorradhandel.ch/extern/css/custom.css";
|
||||
</style>
|
||||
@@ -0,0 +1,108 @@
|
||||
<template>
|
||||
<img
|
||||
:items="items"
|
||||
class="fancy"
|
||||
:src="filename"
|
||||
:width="imgW"
|
||||
:height="imgH"
|
||||
@load="loadImage"
|
||||
@error="onImgError()"
|
||||
@click="$emit('imageClick', $event)"
|
||||
>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PathMixin from '../mixins/PathMixin.js'
|
||||
import defaultImageMixin from '../mixins/defaultImageMixin.js'
|
||||
// import VuePictureSwipe from './vue3-picture-swipe/VuePictureSwipe.vue';
|
||||
// import VuePictureSwipe from './vue3-picture-swipe/main.js';
|
||||
|
||||
export default {
|
||||
mixins: [PathMixin, defaultImageMixin],
|
||||
components: {
|
||||
// 'vue-picture-swipe': VuePictureSwipe,
|
||||
},
|
||||
props: {
|
||||
imgOffset: {
|
||||
type: Number,
|
||||
required: true
|
||||
},
|
||||
container: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
prefix: {
|
||||
type: String,
|
||||
required: true,
|
||||
default: '',
|
||||
}
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
imgWidth: 1,
|
||||
imgHeight: 1,
|
||||
imgError: false,
|
||||
// items: [{
|
||||
// src: 'http://via.placeholder.com/600x400',
|
||||
// thumbnail: 'http://via.placeholder.com/64x64',
|
||||
// w: 600,
|
||||
// h: 400,
|
||||
// alt: 'some numbers on a grey background' // optional alt attribute for thumbnail image
|
||||
// },
|
||||
// {
|
||||
// src: 'http://via.placeholder.com/1200x900',
|
||||
// thumbnail: 'http://via.placeholder.com/64x64',
|
||||
// w: 1200,
|
||||
// h: 900,
|
||||
// htmlAfterThumbnail: '<span class="photos-date">29.12.2021</span>' // optional, insert your html after tag <a> if you need it
|
||||
// }],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onImgError() {
|
||||
this.imgError = true;
|
||||
},
|
||||
loadImage(img) {
|
||||
// img.target.dataset.origw = img.srcElement.naturalWidth;
|
||||
// img.target.dataset.origh = img.srcElement.naturalHeight;
|
||||
img.target.dataset.fullp = this.marktplatzCDNPath(this.$store.state.details.ident_nr_kunde, this.$store.state.details.ident_nr_standort) + this.$store.state.details.rel_pictures[this.imgOffset]['datei'];
|
||||
var c = this.$parent.$refs[this.container];
|
||||
if(Array.isArray(c)) {
|
||||
c = c[0];
|
||||
}
|
||||
var maxH = c.clientHeight;
|
||||
var maxW = c.clientWidth;
|
||||
var imgW = img.srcElement.naturalWidth;
|
||||
var imgH = img.srcElement.naturalHeight;
|
||||
var t1 = maxW / imgW;
|
||||
var t2 = maxH / imgH;
|
||||
if(t1 > t2) {
|
||||
this.imgWidth = imgW * t2;
|
||||
this.imgHeight = imgH * t2;
|
||||
}else{
|
||||
this.imgWidth = imgW * t1;
|
||||
this.imgHeight = imgH * t1;
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
computed: {
|
||||
imgW: function() {
|
||||
return this.imgWidth;
|
||||
},
|
||||
imgH: function() {
|
||||
return this.imgHeight;
|
||||
},
|
||||
pSize() {
|
||||
},
|
||||
filename() {
|
||||
if(this.$store.state.details.rel_pictures[this.imgOffset]){
|
||||
return (this.imgError) ? this.getDefaultImage(this.$store.state.details.modell_kategorie) : this.marktplatzCDNPath(this.$store.state.details.ident_nr_kunde, this.$store.state.details.ident_nr_standort) + this.prefix + this.$store.state.details.rel_pictures[this.imgOffset]['datei'];
|
||||
}else{
|
||||
return this.getDefaultImage(this.$store.state.details.modell_kategorie);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,450 @@
|
||||
<template>
|
||||
<div class="hub hub-detail" id="detailToPrint" :style="[bckgrColor('divBgColor'), color('fontColor')]">
|
||||
<nav>
|
||||
<ul class="top-links">
|
||||
<li class="list-item">
|
||||
<a @click.prevent="$emit('backTolist')" class="top-link backToListeButton button primary" style="cursor: pointer;" :style="[bckgrColor('buttonColor'), color('buttonTextColor')]">
|
||||
<span class="padding10">{{ $t('front_externMP.detail_zurueck') }}</span>
|
||||
</a>
|
||||
</li>
|
||||
<li v-if="false" class="list-item leftMarg10"><a href="" class="top-link advancedSearchButton button primary" style="cursor: pointer;" :style="[bckgrColor('buttonColor'), color('buttonTextColor')]"><span class="padding10"> Suche anpassen</span></a></li>
|
||||
<li v-if="getNext" @click.prevent="$emit('gotoNext', getNext)" class="list-item next">
|
||||
<a href="" class="top-link nextInserateButton button primary" data-id="2693330" style="cursor: pointer;" :style="[bckgrColor('buttonColor'), color('buttonTextColor')]">
|
||||
<span class="padding10">{{ $t('front_externMP.detail_naechstes') }} ></span>
|
||||
</a>
|
||||
</li>
|
||||
<li v-if="getPrev" @click.prevent="$emit('gotoPrev', getPrev)" class="list-item prev">
|
||||
<a href="" class="top-link prevInserateButton button primary" data-id="" style="cursor: pointer;" :style="[bckgrColor('buttonColor'), color('buttonTextColor')]">
|
||||
<span class="padding10">< {{ $t('front_externMP.detail_vorher') }}</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<header>
|
||||
<div class="heading-container">
|
||||
<p v-if="false" class="printHeader"><b>{{ $store.state.details.rel_standort.firma_name }}</b> {{ $store.state.details.rel_standort.kunde_strasse }} {{ $store.state.details.rel_standort.kunde_plz }} {{ $store.state.details.rel_standort.kunde_ort }} Telefon: {{ $store.state.details.rel_standort.kunde_telefon }} Fax: {{ $store.state.details.rel_standort.kunde_fax }} </p>
|
||||
<hr style="margin-top: -10px;">
|
||||
<p></p>
|
||||
<h1 v-html="$store.state.details.rel_kategorie['bezeichnung_' + $store.state.settings.lang] + ' - ' + $store.state.details.rel_art['bezeichnung_' + $store.state.settings.lang]" class="title-main" :style="color('titleColor')"></h1>
|
||||
<div v-if="false" class="button-container printPdfContainer exportShowNormal">
|
||||
<a href="javascript:;" class="printDetail" style="color: #000000!important;">
|
||||
<span class="caption" styl="">Drucken | </span>
|
||||
</a>
|
||||
<a href="javascript:;" class="downloadPdfDetail" style="color: #000000!important;">
|
||||
<span class="caption">Download PDF</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="columns" id="divToPrint">
|
||||
<div class="left">
|
||||
<div data-gallery-closetext="Schliessen" class="my-gallery gallery">
|
||||
<div ref="defaultDContainer" class="image-large-container" style="text-align: center;">
|
||||
<a href="#" @click.prevent="picClicked(0)" rel="group1">
|
||||
<detail-image
|
||||
:details="details"
|
||||
:imgOffset="0"
|
||||
:prefix="''"
|
||||
:container="'defaultDContainer'"
|
||||
@imageClick="imageClick($event)"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="object-list-container">
|
||||
<ul v-if="$store.state.details.rel_pictures.length > 1" class="object-list thumb-list closed">
|
||||
<template v-for="(pic, ndx) in $store.state.details.rel_pictures">
|
||||
<li v-if="ndx>0" v-bind:key="ndx" ref="dContainer" style="text-align: center;" class="imageGroup object-list-item">
|
||||
<a href="#" @click.prevent="picClicked(ndx)" class="object-thumb" rel="group1">
|
||||
<detail-image
|
||||
:details="details"
|
||||
:imgOffset="ndx"
|
||||
:prefix="''"
|
||||
:container="'dContainer'"
|
||||
@imageClick="imageClick($event)"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
</div>
|
||||
<photo-swipe-component
|
||||
:options="options"
|
||||
@open="$emit('open')"
|
||||
@close="$emit('close')"
|
||||
/>
|
||||
|
||||
</div>
|
||||
<section>
|
||||
<div class="vehicle-data greyBgAndBorderDetail">
|
||||
<h2 class="title-secondary" :style="color('titleColor')">{{ $t('front_externMP.detail_titel') }}</h2>
|
||||
<table :style="color('fontColor')">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th class="data-label">{{ $t('front_externMP.detail_kategorie') }}</th>
|
||||
<td class="data">{{ $store.state.details.rel_kategorie['bezeichnung_' + $store.state.settings.lang]}}</td>
|
||||
</tr>
|
||||
<tr v-if="$store.state.details.rel_gruppe && Object.keys($store.state.details.rel_gruppe).length !== 0">
|
||||
<th class="data-label">{{ $t('front_externMP.detail_gruppe') }}</th>
|
||||
<td class="data">{{ $store.state.details.rel_gruppe['bezeichnung_' + $store.state.settings.lang]}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="data-label">{{ $t('front_externMP.art_nummer') }}</th>
|
||||
<td class="data">{{ $store.state.details.ident_nr_artikel }}</td>
|
||||
</tr>
|
||||
<tr v-if="$store.state.details.ident_nr_artikel_alt">
|
||||
<th class="data-label">{{ $t('front_externMP.art_nummer_alt') }}</th>
|
||||
<td class="data">{{ $store.state.details.ident_nr_artikel_alt }}</td>
|
||||
</tr>
|
||||
<tr v-if="$store.state.details.rel_material && Object.keys($store.state.details.rel_material).length !== 0">
|
||||
<th class="data-label">{{ $t('front_externMP.material') }}</th>
|
||||
<td class="data">{{ $store.state.details.rel_material['bezeichnung_' + $store.state.settings.lang] }}</td>
|
||||
</tr>
|
||||
<tr v-if="$store.state.details.rel_zustand && Object.keys($store.state.details.rel_zustand).length !== 0">
|
||||
<th class="data-label">{{ $t('front_externMP.zustand') }}</th>
|
||||
<td class="data">{{ $store.state.details.rel_zustand['bezeichnung_' + $store.state.settings.lang] }}</td>
|
||||
</tr>
|
||||
<tr v-if="$store.state.details.rel_farben.length > 0">
|
||||
<th class="data-label">{{ $t('front_externMP.farbe') }}</th>
|
||||
<td class="data">{{ farbe }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="data-label">{{ $t('front_externMP.gebraucht') }}</th>
|
||||
<td v-if="$store.state.details.rel_farben.inserat_artikel_gebraucht" class="data">{{ $t('front_externMP.ja') }}</td>
|
||||
<td v-else class="data">{{ $t('front_externMP.nein') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="data-label">{{ $t('front_externMP.gepruft') }}</th>
|
||||
<td v-if="$store.state.details.rel_farben.inserat_artikel_geprueft" class="data">{{ $t('front_externMP.ja') }}</td>
|
||||
<td v-else class="data">{{ $t('front_externMP.nein') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="data-label">{{ $t('front_externMP.fahrbereit') }}</th>
|
||||
<td v-if="$store.state.details.rel_farben.inserat_artikel_fahrbereit" class="data">{{ $t('front_externMP.ja') }}</td>
|
||||
<td v-else class="data">{{ $t('front_externMP.nein') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="data-label">{{ $t('front_externMP.unfall') }}</th>
|
||||
<td v-if="$store.state.details.rel_farben.inserat_artikel_unfall" class="data">{{ $t('front_externMP.ja') }}</td>
|
||||
<td v-else class="data">{{ $t('front_externMP.nein') }}</td>
|
||||
</tr>
|
||||
<tr v-if="$store.state.details.ident_nr_chassis && $store.state.details.inserat_art != 2">
|
||||
<th class="data-label">{{ $t('front_externMP.chasis_nr') }}</th>
|
||||
<td class="data">{{ $store.state.details.ident_nr_chassis }}</td>
|
||||
</tr>
|
||||
<tr v-if="$store.state.details.inserat_art == 2 && $store.state.details.rel_gender && Object.keys($store.state.details.rel_gender).length !== 0">
|
||||
<th class="data-label">{{ $t('front_externMP.gender') }}</th>
|
||||
<td class="data">{{ $store.state.details.rel_gender['bezeichnung_' + $store.state.settings.lang] }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="data-label">{{ $t('front_externMP.preis') }}</th>
|
||||
<td class="data">{{ formatPrice($store.state.details.inserat_artikel_preis_verkauf) }}</td>
|
||||
</tr>
|
||||
<tr v-if="$store.state.details.inserat_artikel_preis_katalog">
|
||||
<th class="data-label">{{ $t('front_externMP.katalog_preis') }}</th>
|
||||
<td class="data">{{ formatPrice($store.state.details.inserat_artikel_preis_katalog) }}</td>
|
||||
</tr>
|
||||
<tr v-if="$store.state.details.inserat_artikel_beschreibung">
|
||||
<th class="data-label">{{ $t('front_externMP.beschreibung') }}</th>
|
||||
<td class="data" v-html="$store.state.details.inserat_artikel_beschreibung"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
<section v-if="$store.state.details.rel_models && $store.state.details.rel_models.length">
|
||||
<div class="greyBgAndBorderDetail">
|
||||
<h2 class="title-secondary" :style="color('titleColor')">{{ $t('front_externMP.detail_models') }}</h2>
|
||||
<table :style="[color('fontColor'), 'width:100%']">
|
||||
<tbody>
|
||||
<tr v-for="i in Math.ceil($store.state.details.rel_models.length / 2)">
|
||||
<td>{{ $store.state.details.rel_models[i].rel_brand.Markenbezeichnung + ' ' + $store.state.details.rel_models[i].rel_modell.Modellbezeichnung }}</td>
|
||||
<td v-if="$store.state.details.rel_models[i+1]">{{ $store.state.details.rel_models[i+1].rel_brand.Markenbezeichnung + ' ' + $store.state.details.rel_models[i+1].rel_modell.Modellbezeichnung }}</td>
|
||||
<td v-else></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
<div class="beschPrint">
|
||||
<h2 class="title-secondary">{{ $t('front_externMP.detail_bemerkung') }}</h2>
|
||||
<p v-html="$store.state.details.fzg_text"></p>
|
||||
</div>
|
||||
<div class="beschPreis">{{ $t('front_externMP.detail_preis') }} {{formatPrice($store.state.details.actualprice, 0)}} </div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="padding">
|
||||
<div class="chapters">
|
||||
<section>
|
||||
<div class="chapter dealer">
|
||||
<div class="chapter-content greyBgAndBorder">
|
||||
<div>
|
||||
<h2 class="title-secondary" :style="color('titleColor')">{{ $t('front_externMP.detail_anbieter') }}</h2>
|
||||
<div class="vcard">
|
||||
<span v-html="$store.state.details.rel_standort.firma_name" class="org fn"></span>
|
||||
<span class="adr">
|
||||
<span class="street-address">{{ $store.state.details.rel_standort.kunde_strasse }}</span>
|
||||
<span class="postal-code">{{ $store.state.details.rel_standort.kunde_plz }}</span>
|
||||
<span class="locality">{{ $store.state.details.rel_standort.kunde_ort }}</span>
|
||||
</span>
|
||||
</div>
|
||||
<a :href="googleMapsLink" target="_blank" class="geo" style="color: #000000;!important">{{ $t('front_externMP.detail_googlemap')}} </a>
|
||||
</div>
|
||||
<div v-if="standortLogo" style="float: right; padding: 0px; padding-top: 25px;"><img :src="standortLogo" :alt="$store.state.details.rel_standort.firma_name + ' ' + $store.state.details.rel_standort.kunde_ort" style="max-width: 200px;"></div>
|
||||
<address class="phone-container">
|
||||
<table style="margin-left: -2px;">
|
||||
<tbody>
|
||||
<tr v-if="$store.state.details.rel_standort.kunde_telefon || $store.state.details.rel_standort.kunde_mobile" class="primary">
|
||||
<th class="header">{{ $t('front_externMP.details_telefon') }}</th>
|
||||
<td class="data">
|
||||
<span class="phone">
|
||||
<a :style="color('fontColor')" id="lnkPhoneCall_1" :href="'tel:' + ($store.state.details.rel_standort.kunde_telefon ? $store.state.details.rel_standort.kunde_telefon.replace(/ /g, '') : $store.state.details.rel_standort.kunde_mobile.replace(/ /g, ''))" class="tel call-on-me">{{ $store.state.details.rel_standort.kunde_telefon ? $store.state.details.rel_standort.kunde_telefon : $store.state.details.rel_standort.kunde_mobile }}</a>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="$store.state.details.rel_standort.kunde_telefon">
|
||||
<th class="header">{{ $t('front_externMP.details_fax') }}</th>
|
||||
<td class="data"><span class="phone"><span class="tel">{{ $store.state.details.rel_standort.kunde_telefon }}</span></span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</address>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<div class="kontaktDiv">
|
||||
<div class="DetailContact">
|
||||
<div id="kontaktArea">
|
||||
<form v-if="!contactSent" id="kontaktdaten" name="kontaktdaten" method="post" onsubmit="return false;" novalidate="novalidate">
|
||||
<div class="kontaktDiv1">
|
||||
<span class="DCTitle" :style="color('titleColor')">{{ $t('front_externMP.form_kontakt') }}</span>
|
||||
<label class="inpLabel">{{ $t('front_externMP.form_anrede') }}</label>
|
||||
<input id="anrede0" name="anrede" type="radio" value="1" v-model="form.anrede">
|
||||
<label for="anrede0" class="labelFrau">{{ $t('front_externMP.form_frau') }}</label>
|
||||
<input id="anrede1" name="anrede" type="radio" value="2" v-model="form.anrede">
|
||||
<label for="anrede1">{{ $t('front_externMP.form_herr') }}</label>
|
||||
<input id="anrede2" name="anrede" type="radio" value="3" v-model="form.anrede">
|
||||
<label for="anrede2">{{ $t('front_externMP.form_firma') }}</label>
|
||||
<label ref="vorname" class="inpLabel">{{ $t('front_externMP.form_vorname') }} * </label>
|
||||
<input id="vorname" name="vorname" type="text" v-model="form.vorname" class="DetailInputText" :style="errorClass('vorname')" title="">
|
||||
<label ref="name" class="inpLabel">{{ $t('front_externMP.form_name') }} *</label>
|
||||
<input id="name" name="name" type="text" v-model="form.name" class="DetailInputText" :style="errorClass('name')" title="">
|
||||
<label ref="telefon" class="inpLabel">{{ $t('front_externMP.form_telefon') }} *</label>
|
||||
<input id="telefon" name="telefon" type="text" v-model="form.telefon" class="DetailInputText" :style="errorClass('telefon')" title="">
|
||||
<label ref="email" class="inpLabel">{{ $t('front_externMP.form_email') }} *</label>
|
||||
<input id="email" name="email" type="text" v-model="form.email" class="DetailInputText" :style="errorClass('email')" title="">
|
||||
<div class="contactOptions">
|
||||
<input id="chkCopy" type="checkbox" value="1" v-model="form.sendCopy">
|
||||
<label for="chkCopy">{{ $t('front_externMP.form_kopie') }}</label>
|
||||
</div>
|
||||
<template v-if="false">
|
||||
<div class="dieMitInfo">{{ $t('front_externMP.form_required') }}<br> </div>
|
||||
<span class="DCTitle" style="color: #DE182E!important;"></span>
|
||||
<label class="inpLabel" style="width:200px;">{{ $t('front_externMP.form_interested_in') }}</label>
|
||||
<div class="contactRightOptions">
|
||||
<input id="chkBesichtigung" type="checkbox" v-model="form.chkBesichtigung">
|
||||
<label for="chkBesichtigung">{{ $t('front_externMP.form_interested_in_visit') }}</label>
|
||||
<input id="chkProbefahrt" type="checkbox" v-model="form.chkProbefahrt">
|
||||
<label for="chkProbefahrt">{{ $t('front_externMP.form_interested_in_testdrive') }}</label>
|
||||
</div>
|
||||
</template>
|
||||
<label class="inpLabel" style0="width:200px;">{{ $t('front_externMP.form_bemerkung') }}</label>
|
||||
<textarea id="bemerkungen" v-model="form.bemerkungen" name="bemerkungen" class="contactTextarea"></textarea>
|
||||
<div class="smsSumbitPart">
|
||||
<input type="submit" @click.prevent="sendContact" class="button primary submit advSearchBtn submitKontaktForm" :value="$t('front_externMP.form_absenden')" style="cursor: pointer; height: 32px;" :style="[bckgrColor('buttonColor'), color('buttonTextColor')]">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<div v-else>
|
||||
<span v-html="$t('front_externMP.contact_sent')" class="DCTitle" :style="color('titleColor')"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
|
||||
import DetailImage from './DetailImage.vue'
|
||||
|
||||
import PathMixin from '../mixins/PathMixin.js'
|
||||
import Numberformatting from '../mixins/Numberformatting.js'
|
||||
import defaultImageMixin from '../mixins/defaultImageMixin.js'
|
||||
// import PhotoSwipeLightbox from 'photoswipe';
|
||||
// import 'photoswipe/style.css';
|
||||
import PhotoSwipeComponent from './vue3-picture-swipe/PhotoSwipeComponent.vue';
|
||||
|
||||
export default {
|
||||
// props: ['list', 'details', '$store.state.settings.lang', 'settings', 'url'],
|
||||
props: ['url', 'api'],
|
||||
mixins: [PathMixin, Numberformatting, defaultImageMixin],
|
||||
components: {
|
||||
'detail-image': DetailImage,
|
||||
PhotoSwipeComponent,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
contactSent: false,
|
||||
form: {
|
||||
rowID: 0,
|
||||
mpID: 0,
|
||||
anrede: 1,
|
||||
vorname: '',
|
||||
name: '',
|
||||
telefon: '',
|
||||
email: '',
|
||||
sendCopy: false,
|
||||
chkBesichtigung: false,
|
||||
chkProbefahrt: false,
|
||||
bemerkungen: '',
|
||||
},
|
||||
formErrors: {
|
||||
name: false,
|
||||
vorname: false,
|
||||
email: false,
|
||||
teleforn: false,
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
imageClick: function(e) {
|
||||
// console.log(e);
|
||||
// this.$store.state.details.rel_pictures
|
||||
},
|
||||
picClicked: function() {
|
||||
},
|
||||
defaultPic: function() {
|
||||
if(!this.$store.state.details.rel_pictures) {
|
||||
return this.getDefaultImage();
|
||||
// return '/front/v30/images/J56420132201.jpg';
|
||||
}
|
||||
if(this.$store.state.details.rel_pictures.length == 0) {
|
||||
return this.getDefaultImage();
|
||||
// return '/front/v30/images/J56420132201.jpg';
|
||||
}
|
||||
return this.adCDNPath(this.$store.state.details.ident_nr_kunde, this.$store.state.details.ident_nr_standort) + this.$store.state.details.rel_pictures[0].datei;
|
||||
},
|
||||
getPic: function(pic) {
|
||||
return this.adCDNPath(this.$store.state.details.ident_nr_kunde, this.$store.state.details.ident_nr_standort) + pic;
|
||||
},
|
||||
errorClass(name) {
|
||||
if(this.formErrors[name]) {
|
||||
return "border: 2px solid red;"
|
||||
}
|
||||
return '';
|
||||
},
|
||||
resetFormErrors() {
|
||||
this.formErrors = {
|
||||
name: false,
|
||||
vorname: false,
|
||||
email: false,
|
||||
teleforn: false,
|
||||
}
|
||||
},
|
||||
sendContact() {
|
||||
this.isLoading = true;
|
||||
this.form.rowID = this.$store.state.settings.id;
|
||||
this.form.mpID = this.$store.state.details.id;
|
||||
axios
|
||||
.get(this.url + this.api + "sendContact", {
|
||||
params: this.form
|
||||
})
|
||||
.then(response => {
|
||||
this.resetFormErrors();
|
||||
this.contactSent = true;
|
||||
})
|
||||
.catch(error => {
|
||||
this.resetFormErrors();
|
||||
if(error.response.status == 422){
|
||||
var errList = error.response.data.errors;
|
||||
var listKeys = Object.keys(errList);
|
||||
if(listKeys.length > 0) {
|
||||
listKeys.forEach(element => {
|
||||
this.formErrors[element] = true;
|
||||
});
|
||||
}
|
||||
}else{
|
||||
console.log('Error: ', error.response.data)
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
this.isLoading = false;
|
||||
})
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
axiosParams() {
|
||||
const params = new URLSearchParams();
|
||||
params.append('param1', 'value1');
|
||||
params.append('param2', 'value2');
|
||||
return params;
|
||||
},
|
||||
getPrev: function() {
|
||||
var id = this.$store.state.details.id;
|
||||
var ndx = this.$store.state.list.findIndex(i => i.id === id);
|
||||
if(ndx > 0) {
|
||||
return this.$store.state.list[ndx-1].id;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
getNext: function() {
|
||||
var id = this.$store.state.details.id;
|
||||
var ndx = this.$store.state.list.findIndex(i => i.id === id);
|
||||
if(ndx < this.$store.state.list.length-1) {
|
||||
return this.$store.state.list[ndx+1].id;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
farbe() {
|
||||
var t = '';
|
||||
this.$store.state.details.rel_farben.forEach(element => {
|
||||
if(t != '') {
|
||||
t = t + ' / ';
|
||||
}
|
||||
t = t + element.rel_farbedef['bezeichnung_' + this.$store.state.settings.lang];
|
||||
});
|
||||
return t;
|
||||
// $store.state.details.rel_farben[0].rel_farbedef['bezeichnung_' + $store.state.settings.lang]
|
||||
},
|
||||
googleMapsLink: function() {
|
||||
return '//maps.google.ch/maps?q=' + this.$store.state.details.rel_standort.kunde_strasse + ',' + this.$store.state.details.rel_standort.kunde_plz + '+' + this.$store.state.details.rel_standort.kunde_ort;
|
||||
},
|
||||
standortLogo: function() {
|
||||
var logo = this.$store.state.details.rel_standort.images.find(b => b.medientyp_id == 1);
|
||||
if(logo) {
|
||||
return this.clientCDNPath(this.$store.state.details.ident_nr_kunde, this.$store.state.details.ident_nr_standort) + '/logos/' + logo.media;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.strikethrough {
|
||||
position: relative;
|
||||
}
|
||||
.strikethrough:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
left: 0;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
border-top: 1px solid;
|
||||
border-color: inherit;
|
||||
|
||||
-webkit-transform:rotate(-5deg);
|
||||
-moz-transform:rotate(-5deg);
|
||||
-ms-transform:rotate(-5deg);
|
||||
-o-transform:rotate(-5deg);
|
||||
transform:rotate(-5deg);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,237 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="hub hub-search" id="basicSearchId">
|
||||
<div class="heading-container" style="line-height: 70px; margin-bottom: 0px;">
|
||||
<div class="navButtonsContainer">
|
||||
<h1 class="title-main" :style="fontColor">
|
||||
<span :style="color('titleColor')" class="counter-container">
|
||||
<span class="count">{{ $store.state.list ? $store.state.pagination.numberOfReslults : 0 }}</span> {{ $t('front_externMP.vehicles')}}
|
||||
</span>
|
||||
</h1>
|
||||
<template v-if="false">
|
||||
<span class="divider advanced-mobile"> | </span><span class="customize-search-container advanced-mobile"><a href="javascript:;" class="top-link customize-search advancedSearchButton"><span style="color: #000000!important">Erweiterte Suche</span></a></span><span class="divider advanced-mobile"> | </span><span class="customize-search-container"><a href="javascript:;" class="top-link customize-search resetButton"><span style="color: #000000!important">Zurücksetzen</span></a></span>
|
||||
</template>
|
||||
</div>
|
||||
<div v-if="false" class="printButtonsContainer"><a href="#" class="printLayerButton" data-modal-id="modalPrint" style="color: #000000!important">Drucken</a><span class="divider"> | </span><a href="#" class="pdfLayerButton" data-modal-id="modalPdf" style="color: #000000!important">Download PDF</a></div>
|
||||
</div>
|
||||
<div>
|
||||
<Pagination
|
||||
v-if="$store.state.pagination.numberOfReslults"
|
||||
:total-pages="Math.ceil($store.state.pagination.numberOfReslults/$store.state.settings.perPage)"
|
||||
:per-page="$store.state.settings.perPage"
|
||||
:current-page="$store.state.pagination.page"
|
||||
@pagechanged="$emit('reloadData')"
|
||||
|
||||
/>
|
||||
</div>
|
||||
<form v-if="true" style="padding: 10px;" id="hcifilterform" action="" method="GET" :style="[bckgrColor('searchBgColor')]">
|
||||
<div id="expander">
|
||||
<div class="expander-content">
|
||||
<div class="filter-form">
|
||||
<div class="layout--group">
|
||||
<div class="layout--four-fifth full-w-mobile">
|
||||
<div class="layout--group">
|
||||
<div v-if="$store.state.settings.type == 1 || $store.state.settings.type == 3" class="layout--one-fourth">
|
||||
<div class="part-line connected1">
|
||||
<label for="Make" class="line-label">
|
||||
<span class="label-text" :style="color('titleColor')">{{ $t('front_externMP.label_marke') }}</span>
|
||||
</label>
|
||||
<div class="ghost-select-container">
|
||||
<div class="ghost-select">
|
||||
<brand-selector
|
||||
@reloadData="$emit('reloadData')"
|
||||
/>
|
||||
</div>
|
||||
<div class="connector"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="$store.state.categories.length > 0" class="layout--one-fourth">
|
||||
<div class="part-line">
|
||||
<label for="Model" class="line-label">
|
||||
<span class="label-text" :style="color('titleColor')">{{ $t('front_externMP.label_category') }}</span>
|
||||
</label>
|
||||
<div class="ghost-select-container" id="divModel">
|
||||
<div class="ghost-select">
|
||||
<category-selector
|
||||
@reloadData="$emit('reloadData')"
|
||||
/>
|
||||
</div>
|
||||
<div class="connector"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="$store.state.settings.type == 2 || $store.state.settings.type == 3" class="layout--one-fourth">
|
||||
<div class="part-line">
|
||||
<label for="PriceTo" class="line-label">
|
||||
<span class="label-text" :style="color('titleColor')">{{ $t('front_externMP.label_untergrp') }}</span>
|
||||
</label>
|
||||
<div class="ghost-select-container">
|
||||
<div class="ghost-select">
|
||||
<untergrp-selector
|
||||
@reloadData="$emit('reloadData')"
|
||||
/>
|
||||
</div>
|
||||
<div class="connector"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="$store.state.settings.type == 2" class="layout--one-fourth">
|
||||
<div class="part-line">
|
||||
<label for="PriceTo" class="line-label">
|
||||
<span class="label-text" :style="color('titleColor')">{{ $t('front_externMP.label_mbrand') }}</span>
|
||||
</label>
|
||||
<div class="ghost-select-container">
|
||||
<div class="ghost-select">
|
||||
<mbrand-selector
|
||||
@reloadData="$emit('reloadData')"
|
||||
/>
|
||||
</div>
|
||||
<div class="connector"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="$store.state.settings.type == 1 || $store.state.settings.type == 3" class="layout--one-fourth">
|
||||
<div class="part-line">
|
||||
<label for="PriceTo" class="line-label">
|
||||
<span class="label-text" :style="color('titleColor')">{{ $t('front_externMP.label_artnum') }}</span>
|
||||
</label>
|
||||
<div class="ghost-select-container">
|
||||
<div class="ghost-select">
|
||||
<artnum-selector
|
||||
@reloadData="$emit('reloadData')"
|
||||
/>
|
||||
</div>
|
||||
<div class="connector"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="$store.state.settings.type == 1" class="layout--one-fourth">
|
||||
<div class="part-line">
|
||||
<label for="PriceTo" class="line-label">
|
||||
<span class="label-text" :style="color('titleColor')">{{ $t('front_externMP.label_arttitle') }}</span>
|
||||
</label>
|
||||
<div class="ghost-select-container">
|
||||
<div class="ghost-select">
|
||||
<arttitle-selector
|
||||
@reloadData="$emit('reloadData')"
|
||||
/>
|
||||
</div>
|
||||
<div class="connector"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="$store.state.locations.length > 1" class="layout--one-fourth">
|
||||
<div class="part-line connected">
|
||||
<label for="KmTo" class="line-label">
|
||||
<span class="label-text" :style="color('titleColor')">{{ $t('front_externMP.standort') }}</span>
|
||||
</label>
|
||||
<div class="ghost-select-container">
|
||||
<div class="ghost-select">
|
||||
<standort-selector
|
||||
@reloadData="$emit('reloadData')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout--one-fifth showOnMobile">
|
||||
<div class="part-line">
|
||||
<label for="Sort" class="line-label">
|
||||
<span class="label-text" :style="color('titleColor')">{{ $t('front_externMP.label_sortby') }}</span>
|
||||
</label>
|
||||
<div class="ghost-select-container">
|
||||
<div class="ghost-select sort">
|
||||
<sort-selector
|
||||
@reloadData="$emit('reloadData')"
|
||||
/>
|
||||
</div>
|
||||
<div class="connector"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout--group">
|
||||
<div class="layout--one-fourth onMobile">
|
||||
<div class="part-line">
|
||||
<label for="Sort" class="line-label">
|
||||
<span class="label-text" style="color: #d63e2d!important;">Sortieren nach:</span>
|
||||
</label>
|
||||
<div class="ghost-select-container">
|
||||
<div class="ghost-select sort"><span class="label sortLabelText">Bitte auswählen</span>
|
||||
<div class="button" :style="bckgrColor">
|
||||
<span class="icon" style="border-top-color: #FFFFFF!important;"></span>
|
||||
</div>
|
||||
<sort-selector
|
||||
@reloadData="$emit('reloadData')"
|
||||
/>
|
||||
</div>
|
||||
<div class="connector"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="hub hub-filter-list">
|
||||
<div class="resultListContainer" style="margin: 0 auto;"></div>
|
||||
<div id="listContainerToPrint" class="object-list-container search-result-container">
|
||||
<p class="printHeader"><b>Keller Motos AG</b> Industriestrasse 17 5301 Siggenthal-Station Telefon: 056 281 13 13 </p>
|
||||
<product-grid
|
||||
@detailClick="$emit('detailClick', $event)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import ProductGrid from './ProductGrid.vue'
|
||||
|
||||
import SelectorBrand from './SelectorBrand.vue'
|
||||
import SelectorCategory from './SelectorCategory.vue'
|
||||
import SelectorUntergrp from './SelectorUntergrp.vue'
|
||||
import SelectorMbrand from './SelectorMbrand.vue'
|
||||
import SelectorArtNum from './SelectorArtNum.vue'
|
||||
import SelectorArtTitle from './SelectorArtTitle.vue'
|
||||
import SelectorSort from './SelectorSort.vue'
|
||||
import SelectorStandort from './SelectorStandort.vue'
|
||||
import Pagination from './Pagination.vue'
|
||||
|
||||
export default {
|
||||
// :data="list"
|
||||
// :lang="settings.lang"
|
||||
// :settings="settings"
|
||||
// props: ['data', 'lang', 'settings'],
|
||||
|
||||
components: {
|
||||
'product-grid': ProductGrid,
|
||||
'brand-selector': SelectorBrand,
|
||||
'category-selector': SelectorCategory,
|
||||
'untergrp-selector': SelectorUntergrp,
|
||||
'mbrand-selector': SelectorMbrand,
|
||||
'artnum-selector': SelectorArtNum,
|
||||
'arttitle-selector': SelectorArtTitle,
|
||||
'sort-selector': SelectorSort,
|
||||
'standort-selector': SelectorStandort,
|
||||
'Pagination': Pagination,
|
||||
},
|
||||
data() {
|
||||
},
|
||||
computed: {
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.hub.hub-search, #expander {
|
||||
background-color: v-bind('#' + $store.state.settings.divBgColor + "!important") ;
|
||||
}
|
||||
.hub.hub-filter-list{
|
||||
background-color: v-bind('#' + $store.state.settings.divBgColor + "!important") ;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,153 @@
|
||||
<template>
|
||||
<div class="">
|
||||
<div v-if="totalPages == 1" class="pagination" aria-label="Pagination">
|
||||
<a v-on:click.prevent.stop=""><</a>
|
||||
<a href="#"
|
||||
v-on:click.prevent.stop=""
|
||||
v-bind:class="['bg-mhsecondary-blue', 'text-mhprimary-sand', 'font-extrabold']"
|
||||
class="active"
|
||||
>
|
||||
1
|
||||
</a>
|
||||
<a v-on:click.prevent.stop="">></a>
|
||||
</div>
|
||||
<div v-else class="pagination" aria-label="Pagination">
|
||||
<a v-if="currentPage > 1" v-on:click.prevent.stop="goToPage(currentPage - 1)" href="#" class="">
|
||||
<
|
||||
</a>
|
||||
<a v-else class="">
|
||||
<
|
||||
</a>
|
||||
<a v-if="currentPage > 2" v-on:click.prevent.stop="goToPage(1)" href="#">
|
||||
1
|
||||
</a>
|
||||
<a v-if="currentPage > 3" v-on:click.prevent.stop class="">
|
||||
...
|
||||
</a>
|
||||
<a v-for="index in stepsDif+1" :key="index" href="#"
|
||||
v-on:click.prevent.stop="goToPage(index+stepStart-1)"
|
||||
v-bind:class="[currentPage == index+stepStart-1 ? ['active']: ['']]"
|
||||
class=""
|
||||
>
|
||||
{{getPageNum(index)}}
|
||||
</a>
|
||||
<a v-if="totalPages != stepStop" v-on:click.prevent.stop class="">
|
||||
...
|
||||
</a>
|
||||
<a v-if="totalPages != stepStop" v-on:click.prevent.stop="goToPage(totalPages)" href="#" class="">
|
||||
{{totalPages}}
|
||||
</a>
|
||||
<a
|
||||
v-if="currentPage != totalPages"
|
||||
v-on:click.prevent.stop="goToPage(currentPage + 1)"
|
||||
href="#" class="">
|
||||
>
|
||||
</a>
|
||||
<a v-else v-on:click.prevent.stop="" class="">></a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "pagination",
|
||||
props: {
|
||||
maxVisibleButtons: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: 10
|
||||
},
|
||||
totalPages: {
|
||||
type: Number,
|
||||
required: true
|
||||
},
|
||||
perPage: {
|
||||
type: Number,
|
||||
required: true
|
||||
},
|
||||
currentPage: {
|
||||
type: Number,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
stepsDif: 0,
|
||||
stepStart: 1,
|
||||
stepStop: 1,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.calculate();
|
||||
},
|
||||
computed: {
|
||||
},
|
||||
methods: {
|
||||
calculate() {
|
||||
if(this.currentPage > 2) {
|
||||
this.stepStart = this.currentPage-1;
|
||||
}else{
|
||||
this.stepStart = 1;
|
||||
}
|
||||
this.stepStop = this.totalPages
|
||||
if(this.totalPages - this.currentPage > 2) {
|
||||
this.stepStop = this.currentPage + 1;
|
||||
}
|
||||
this.stepsDif = this.stepStop - this.stepStart;
|
||||
},
|
||||
goToPage(page) {
|
||||
if(page >= 1 && page <= this.totalPages) {
|
||||
this.$store.commit('setPage', page);
|
||||
this.$emit("pagechanged", page);
|
||||
this.calculate();
|
||||
}
|
||||
},
|
||||
getPageNum(ndx) {
|
||||
return ndx + this.stepStart - 1;
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
},
|
||||
watch: {
|
||||
'currentPage'(to, from) {
|
||||
this.calculate();
|
||||
},
|
||||
'totalPages'(to, from) {
|
||||
this.calculate();
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.pagination {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.pagination a {
|
||||
color: black;
|
||||
float: left;
|
||||
padding: 8px 16px;
|
||||
text-decoration: none;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.pagination a.active {
|
||||
background-color: v-bind('#' + $store.state.settings.buttonColor);
|
||||
color: v-bind('#' + $store.state.settings.buttonTextColor);;
|
||||
border: 1px solid v-bind('#' + $store.state.settings.buttonColor);
|
||||
}
|
||||
|
||||
.pagination a:hover:not(.active) {background-color: #ddd;}
|
||||
|
||||
.pagination a:first-child {
|
||||
border-top-left-radius: 5px;
|
||||
border-bottom-left-radius: 5px;
|
||||
color: v-bind('#' + $store.state.settings.titleColor);;
|
||||
}
|
||||
|
||||
.pagination a:last-child {
|
||||
border-top-right-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
color: v-bind('#' + $store.state.settings.titleColor);;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<ul class="listContainerJSON object-list search-result-list">
|
||||
<result-item v-for="result in $store.state.list"
|
||||
v-bind:key="result.id"
|
||||
:result="result"
|
||||
@detailClick="$emit('detailClick', $event)"
|
||||
>
|
||||
</result-item>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ResultItem from './ResultItem.vue'
|
||||
// import Loader from './Loader.vue'
|
||||
|
||||
export default {
|
||||
// props: [
|
||||
// "data", "lang", "loading", 'settings'
|
||||
// ],
|
||||
components: {
|
||||
'result-item': ResultItem,
|
||||
// 'loader': Loader,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
computed: {
|
||||
// resultsLoading() {
|
||||
// return this.$store.state.items.resultsLoading;
|
||||
// },
|
||||
},
|
||||
methods: {
|
||||
},
|
||||
watch: {
|
||||
resultsLoading(to, from) {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<img
|
||||
class=""
|
||||
:src="filename"
|
||||
:width="imgW"
|
||||
:height="imgH"
|
||||
@load="loadImage"
|
||||
@error="onImgError()"
|
||||
>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PathMixin from '../mixins/PathMixin.js'
|
||||
import defaultImageMixin from '../mixins/defaultImageMixin.js'
|
||||
|
||||
export default {
|
||||
mixins: [PathMixin, defaultImageMixin],
|
||||
props: ['result'],
|
||||
|
||||
data: function () {
|
||||
return {
|
||||
imgWidth: 1,
|
||||
imgHeight: 1,
|
||||
imgError: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onImgError() {
|
||||
this.imgError = true;
|
||||
},
|
||||
loadImage(img) {
|
||||
if(this.$parent.$refs.rImageContainer) {
|
||||
var maxH = this.$parent.$refs.rImageContainer.clientHeight;
|
||||
var maxW = this.$parent.$refs.rImageContainer.clientWidth;
|
||||
var imgW = img.srcElement.naturalWidth;
|
||||
var imgH = img.srcElement.naturalHeight;
|
||||
var t1 = maxW / imgW;
|
||||
var t2 = maxH / imgH;
|
||||
if(t1 > t2) {
|
||||
this.imgWidth = imgW * t2;
|
||||
this.imgHeight = imgH * t2;
|
||||
}else{
|
||||
this.imgWidth = imgW * t1;
|
||||
this.imgHeight = imgH * t1;
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
computed: {
|
||||
imgW: function() {
|
||||
return this.imgWidth;
|
||||
},
|
||||
imgH: function() {
|
||||
return this.imgHeight;
|
||||
},
|
||||
pSize() {
|
||||
},
|
||||
filename() {
|
||||
if(this.result.rel_pictures[0]){
|
||||
return (this.imgError) ? this.getDefaultMPImage(this.result.modell_kategorie) : this.marktplatzCDNPath(this.result.ident_nr_kunde, this.result.ident_nr_standort) + this.result.rel_pictures[0]['datei'];
|
||||
}else{
|
||||
return this.getDefaultMPImage(this.result.modell_kategorie);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,149 @@
|
||||
<template>
|
||||
<a href="#" @click.prevent="$emit('detailClick', result.id)" class="newListeItem ListeField goToDetail">
|
||||
<div :style="[bckgrColor('divBgColor')]">
|
||||
<div ref="rImageContainer" class="ListeCol newListeImageContainer" style="text-align: center;">
|
||||
<result-image
|
||||
data-src=""
|
||||
:alt="result.inserat_artikel_titel"
|
||||
:title="result.inserat_artikel_titel"
|
||||
:result="result"
|
||||
class=""
|
||||
/>
|
||||
</div>
|
||||
<div class="ListeCol newListeTitleDetailsContainer" :style="color('fontColor')">
|
||||
<div class="newListeTitleDetailsFirst" style="width:500px;">
|
||||
<span v-html="fahrzWoZus" :style="color('titleColor')" class="newListeTitletext mobileTruncate"></span>
|
||||
<br>
|
||||
</div>
|
||||
<div class="newListeTitleDetailsSecond">
|
||||
<span class="exportShowMobile"><b>0 - {{formatPrice(result.fzg_preis, 0)}}</b></span>
|
||||
{{result.rel_art['bezeichnung_' + $store.state.settings.lang]}} <br>
|
||||
#<span>{{ result.ident_nr_artikel }}</span>
|
||||
<br>
|
||||
<span>{{ result.rel_zustand['bezeichnung_' + $store.state.settings.lang] }}</span>
|
||||
<template v-if="result.rel_models.length > 0">
|
||||
<br>
|
||||
<span>{{ result.rel_models[0].rel_brand.Markenbezeichnung }} {{ result.rel_models[0].rel_modell.Modellbezeichnung }}</span>
|
||||
<span style="text-transform: none;" v-if="result.rel_models.length > 1"> {{ $t("front_externMP.andMore") }}</span>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ListeCol exportShowNormal" style="width: 12px;" :style="color('fontColor')">
|
||||
<span style="border-left: 1px solid #ccc; display: block; height: 100px; margin-right: 10px;"> </span>
|
||||
</div>
|
||||
<div class="ListeCol newListePriceDetailsContainer exportShowNormal" :style="color('fontColor')">
|
||||
<span v-if="result.inserat_artikel_preis_katalog && result.inserat_artikel_preis_katalog > 0" class="newListePriceDetailsContainerFirst">
|
||||
{{ $t("front_externMP.special_price") }}: <b>{{formatPrice(result.inserat_artikel_preis_verkauf, 0)}}</b><br />
|
||||
{{ $t("front_externMP.normal_price") }}: <span class="strikethrough">{{formatPrice(result.inserat_artikel_preis_katalog, 0)}}</span><br />
|
||||
</span>
|
||||
<span v-else-if="result.actualprice > 0" class="newListePriceDetailsContainerFirst">
|
||||
{{ $t("front_externMP.price") }}: <b>{{formatPrice(result.inserat_artikel_preis_verkauf, 0)}}</b>
|
||||
</span>
|
||||
<span v-else class="newListePriceDetailsContainerFirst">
|
||||
{{ $t("front_externMP.price") }}: {{ $t('front_externMP.price_on_request') }}
|
||||
</span>
|
||||
<span v-if="$store.state.locations.length > 1" class="newListePriceDetailsContainerLocation">
|
||||
{{ $t("front_externMP.standort") }}: {{ result.standort.firma_name }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ResultImage from './ResultImage.vue'
|
||||
import PathMixin from '../mixins/PathMixin.js'
|
||||
import Numberformatting from '../mixins/Numberformatting.js'
|
||||
|
||||
export default {
|
||||
mixins: [PathMixin, Numberformatting],
|
||||
props: ['result'],
|
||||
components: {
|
||||
'result-image': ResultImage
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getCategoryText(id) {
|
||||
switch (id) {
|
||||
case 4:
|
||||
case 5:
|
||||
case 6:
|
||||
case 7:
|
||||
case 8:
|
||||
case 11:
|
||||
case 15:
|
||||
case 19:
|
||||
return this.$t('front_externMP.result_motorrad');
|
||||
break;
|
||||
default:
|
||||
return '';
|
||||
break;
|
||||
}
|
||||
},
|
||||
getArtClass(result) {
|
||||
switch (result.fzg_art) {
|
||||
case 1:
|
||||
return 'bg-mhsecondary-orange';
|
||||
break;
|
||||
case 2:
|
||||
return 'bg-mhsecondary-cyan';
|
||||
break;
|
||||
case 3:
|
||||
return 'bg-mhsecondary-moss';
|
||||
break;
|
||||
case 4:
|
||||
default:
|
||||
return 'bg-mhsecondary-yellow';
|
||||
break;
|
||||
case 5:
|
||||
return 'bg-mhsecondary-beige';
|
||||
break;
|
||||
}
|
||||
},
|
||||
createUrl(result) {
|
||||
return this.marktplatzSlug(this.$store.state.settings.lang, result.inserat_art, result.inserat_artikel_titel, result.id);
|
||||
},
|
||||
getFirstModel(obj) {
|
||||
console.log(obj)
|
||||
var t = obj[0];
|
||||
console.log(obj[0]);
|
||||
console.log(t.id);
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
fahrzWoZus() {
|
||||
return this.result.inserat_artikel_titel;
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.strikethrough {
|
||||
position: relative;
|
||||
}
|
||||
.strikethrough:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
left: 0;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
border-top: 1px solid;
|
||||
border-color: inherit;
|
||||
|
||||
-webkit-transform:rotate(-5deg);
|
||||
-moz-transform:rotate(-5deg);
|
||||
-ms-transform:rotate(-5deg);
|
||||
-o-transform:rotate(-5deg);
|
||||
transform:rotate(-5deg);
|
||||
}
|
||||
span.newListePriceDetailsContainerLocation {
|
||||
font-size: 15px;
|
||||
display: inherit;
|
||||
font-weight: 400;
|
||||
padding-top: 20px;
|
||||
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<input style="width:max-content;height: 24px;" id="artnum" name="artnum" v-model="selectedArt" type="text">
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['data', 'lang', 'settings'],
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
selectedArt: {
|
||||
get: function () {
|
||||
return this.$store.state.selected['artnum'];
|
||||
},
|
||||
set: function (state) {
|
||||
this.$store.commit('setSelected', {item: 'artnum', state: state});
|
||||
this.$emit('reloadData')
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<input style="width:max-content;height: 24px;" id="arttitle" name="arttitle" v-model="selectedArtTitle" type="text">
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['data', 'lang', 'settings'],
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
selectedArtTitle: {
|
||||
get: function () {
|
||||
return this.$store.state.selected['arttitle'];
|
||||
},
|
||||
set: function (state) {
|
||||
this.$store.commit('setSelected', {item: 'arttitle', state: state});
|
||||
this.$emit('reloadData')
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<span class="label">{{ getLabel }}</span>
|
||||
<div class="button" :style="[bckgrColor('buttonColor'), color('buttonTextColor')]">
|
||||
<span class="icon" style="border-top-color: #FFFFFF!important;"></span>
|
||||
</div>
|
||||
<select class="ghost" id="markenID" name="marke" v-model="selectedBrand">
|
||||
<option value="0">{{ $t('front_externMP.select_alle') }}</option>
|
||||
<option v-for="(brand, key) in $store.state.brands" v-bind:key="key" :value="brand.id">{{brand.name}}</option>
|
||||
</select>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
selectedBrand: {
|
||||
get: function () {
|
||||
return this.$store.state.selected['brand'];
|
||||
},
|
||||
set: function (state) {
|
||||
this.$store.commit('setSelected', {item: 'brand', state: state});
|
||||
this.$emit('reloadData')
|
||||
}
|
||||
},
|
||||
getLabel() {
|
||||
if(this.$store.state.selected.brand == 0) {
|
||||
return this.$t('front_externMP.select_alle');
|
||||
}
|
||||
var ndx = this.$store.state.brands.findIndex(i => i.id === this.$store.state.selected.brand);
|
||||
return this.$store.state.brands[ndx].name;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<span class="label">{{ getLabel }}</span>
|
||||
<div class="button" :style="bckgrColor('buttonColor')">
|
||||
<span class="icon" style="border-top-color: #FFFFFF!important;"></span>
|
||||
</div>
|
||||
<select class="ghost" id="modelID" name="Model" v-model="selectedCategory">
|
||||
<option value="0">{{ $t('front_externMP.select_alle') }}</option>
|
||||
<option v-for="(model, key) in $store.state.categories" v-bind:key="key" :value="model.id">{{model.name}}</option>
|
||||
</select>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
selectedCategory: {
|
||||
get: function () {
|
||||
return this.$store.state.selected['category'];
|
||||
},
|
||||
set: function (state) {
|
||||
var r = this.$store.state.categories.find(i => i.id === state);
|
||||
this.$store.commit('setSelected', {item: 'category', state: r ? r.id : 0});
|
||||
this.$emit('reloadData')
|
||||
}
|
||||
},
|
||||
getLabel() {
|
||||
if(this.$store.state.selected.category == 0) {
|
||||
return this.$t('front_externMP.select_alle');
|
||||
}
|
||||
var r = this.$store.state.categories.find(i => i.id === this.$store.state.selected.category);
|
||||
return r.name;
|
||||
return this.$store.state.categories[this.$store.state.selected.category].name;
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<span class="label">{{ getLabel }}</span>
|
||||
<div class="button" :style="bckgrColor('buttonColor')">
|
||||
<span class="icon" style="border-top-color: #FFFFFF!important;"></span>
|
||||
</div>
|
||||
<select class="ghost" id="modelID" name="Model" v-model="selectedModel">
|
||||
<option value="0">{{ $t('front_externMP.select_alle') }}</option>
|
||||
<option v-for="(model, key) in $store.state.mbrands" v-bind:key="key" :value="model.id">{{model.name}}</option>
|
||||
</select>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
selectedModel: {
|
||||
get: function () {
|
||||
return this.$store.state.selected['mbrand'];
|
||||
},
|
||||
set: function (state) {
|
||||
var r = this.$store.state.mbrands.find(i => i.id === state);
|
||||
this.$store.commit('setSelected', {item: 'mbrand', state: r ? r.id : 0});
|
||||
this.$emit('reloadData')
|
||||
}
|
||||
},
|
||||
getLabel() {
|
||||
if(this.$store.state.selected.mbrand == 0) {
|
||||
return this.$t('front_externMP.select_alle');
|
||||
}
|
||||
var r = this.$store.state.mbrands.find(i => i.id === this.$store.state.selected.mbrand);
|
||||
return r.name;
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,35 @@
|
||||
<template>
|
||||
<span class="label">{{ getLabel }}</span>
|
||||
<div class="button" :style="bckgrColor('buttonColor')">
|
||||
<span class="icon" style="border-top-color: #FFFFFF!important;"></span>
|
||||
</div>
|
||||
<select class="ghost" id="modelID" name="Model" v-model="selectedModel">
|
||||
<option value="0">{{ $t('front_externMP.select_alle') }}</option>
|
||||
<option v-for="(model, key) in $store.state.models" v-bind:key="key" :value="key">{{model}}</option>
|
||||
</select>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
selectedModel: {
|
||||
get: function () {
|
||||
return this.$store.state.selected['model'];
|
||||
},
|
||||
set: function (state) {
|
||||
this.$store.commit('setSelected', {item: 'model', state: state});
|
||||
this.$emit('reloadData')
|
||||
}
|
||||
},
|
||||
getLabel() {
|
||||
if(this.$store.state.selected.model == 0) {
|
||||
return this.$t('front_externMP.select_alle');
|
||||
}
|
||||
return this.$store.state.models[this.$store.state.selected.model];
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<span class="label">{{ getLabel }}</span>
|
||||
<div class="button" :style="bckgrColor('buttonColor')">
|
||||
<span class="icon" style="border-top-color: #FFFFFF!important;"></span>
|
||||
</div>
|
||||
<select class="ghost" id="PriceTo" name="PriceTo" v-model="selectedPrice">
|
||||
<option value="" selected="selected">{{ $t('front_externMP.select_alle') }}</option>
|
||||
<option v-for="(price, key) in prices" v-bind:key="key" :value="key">{{price}}</option>
|
||||
</select>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
'prices': {
|
||||
1000: "CHF 1'000",
|
||||
2000: "CHF 2'000",
|
||||
3000: "CHF 3'000",
|
||||
4000: "CHF 4'000",
|
||||
5000: "CHF 5'000",
|
||||
7500: "CHF 7'500",
|
||||
10000: "CHF 10'000",
|
||||
12500: "CHF 12'500",
|
||||
15000: "CHF 15'000",
|
||||
17500: "CHF 17'500",
|
||||
20000: "CHF 20'000",
|
||||
22500: "CHF 22'500",
|
||||
30000: "CHF 30'000",
|
||||
35000: "CHF 35'000",
|
||||
40000: "CHF 40'000",
|
||||
45000: "CHF 45'000",
|
||||
50000: "CHF 50'000",
|
||||
60000: "CHF 60'000",
|
||||
70000: "CHF 70'000",
|
||||
80000: "CHF 80'000",
|
||||
90000: "CHF 90'000",
|
||||
100000: "CHF 100'000",
|
||||
150000: "CHF 150'000",
|
||||
200000: "CHF 200'000",
|
||||
300000: "CHF 300'000",
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
selectedPrice: {
|
||||
get: function () {
|
||||
return this.$store.state.selected['price'];
|
||||
},
|
||||
set: function (state) {
|
||||
this.$store.commit('setSelected', {item: 'price', state: state});
|
||||
this.$emit('reloadData')
|
||||
}
|
||||
},
|
||||
getLabel() {
|
||||
if(this.$store.state.selected.price == 0) {
|
||||
return this.$t('front_externMP.select_alle');
|
||||
}
|
||||
return this.prices[this.$store.state.selected.price];
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<span class="label sortLabelText">{{ getLabel }}</span>
|
||||
<div class="button" :style="bckgrColor('buttonColor')">
|
||||
<span class="icon" style="border-top-color: #FFFFFF!important;"></span>
|
||||
</div>
|
||||
<select class="ghost" id="Sort" name="Sort" v-model="selectedSort">
|
||||
<option value="" selected="selected">{{ $t('front_externMP.sort_choose') }}</option>
|
||||
<option v-for="(sort, key) in sorts" v-bind:key="key" :value="key">{{sort}}</option>
|
||||
</select>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
'sorts': {
|
||||
6: this.$t('front_externMP.sort_price_asc'),
|
||||
7: this.$t('front_externMP.sort_price_desc'),
|
||||
4: this.$t('front_externMP.sort_artname_asc'),
|
||||
5: this.$t('front_externMP.sort_artname_desc'),
|
||||
// 7: this.$t('front_externMP.sort_markemodel_asc'),
|
||||
// 6: this.$t('front_externMP.sort_markemodel_desc'),
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
selectedSort: {
|
||||
get: function () {
|
||||
return this.$store.state.selected['sort'];
|
||||
},
|
||||
set: function (state) {
|
||||
this.$store.commit('setSelected', {item: 'sort', state: state});
|
||||
this.$emit('reloadData')
|
||||
}
|
||||
},
|
||||
getLabel() {
|
||||
if(this.$store.state.selected.sort == 0) {
|
||||
return this.$t('front_externMP.sort_choose');
|
||||
}
|
||||
return this.sorts[this.$store.state.selected.sort];
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<span class="label">{{ getLabel }}</span>
|
||||
<div class="button" :style="[bckgrColor('buttonColor'), color('buttonTextColor')]">
|
||||
<span class="icon" style="border-top-color: #FFFFFF!important;"></span>
|
||||
</div>
|
||||
<select class="ghost" id="stadortID" name="standort" v-model="selectedStandort">
|
||||
<option value="0">{{ $t('front_externMP.select_alle') }}</option>
|
||||
<option v-for="(location, key) in $store.state.locations" v-bind:key="key" :value="location.id">{{location.name}}</option>
|
||||
</select>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
selectedStandort: {
|
||||
get: function () {
|
||||
return this.$store.state.selected['location'];
|
||||
},
|
||||
set: function (state) {
|
||||
this.$store.commit('setSelected', {item: 'location', state: state});
|
||||
this.$emit('reloadData')
|
||||
}
|
||||
},
|
||||
getLabel() {
|
||||
if(this.$store.state.selected.location == 0) {
|
||||
return this.$t('front_externMP.select_alle');
|
||||
}
|
||||
var ndx = this.$store.state.locations.findIndex(i => i.id === this.$store.state.selected.location);
|
||||
return this.$store.state.locations[ndx].name;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<span class="label">{{ getLabel }}</span>
|
||||
<div class="button" :style="bckgrColor('buttonColor')">
|
||||
<span class="icon" style="border-top-color: #FFFFFF!important;"></span>
|
||||
</div>
|
||||
<select class="ghost" id="modelID" name="Model" v-model="selectedModel">
|
||||
<option value="0">{{ $t('front_externMP.select_alle') }}</option>
|
||||
<option v-for="(model, key) in $store.state.untergrps" v-bind:key="key" :value="model.id">{{model.name}}</option>
|
||||
</select>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
selectedModel: {
|
||||
get: function () {
|
||||
return this.$store.state.selected['untergrp'];
|
||||
},
|
||||
set: function (state) {
|
||||
var r = this.$store.state.untergrps.find(i => i.id === state);
|
||||
this.$store.commit('setSelected', {item: 'untergrp', state: r ? r.id : 0});
|
||||
this.$emit('reloadData')
|
||||
}
|
||||
},
|
||||
getLabel() {
|
||||
if(this.$store.state.selected.untergrp == 0) {
|
||||
return this.$t('front_externMP.select_alle');
|
||||
}
|
||||
var r = this.$store.state.untergrps.find(i => i.id === this.$store.state.selected.untergrp);
|
||||
return r.name;
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,341 @@
|
||||
<script>
|
||||
import * as Vue from 'vue';
|
||||
import PhotoSwipe from './photoswipe/photoswipe';
|
||||
import PhotoSwipeUI_Default from './photoswipe/photoswipe-ui-default';
|
||||
import './photoswipe/photoswipe.css';
|
||||
import './photoswipe/default-skin/default-skin.css';
|
||||
|
||||
const {h} = Vue;
|
||||
|
||||
export default {
|
||||
props: {
|
||||
options: {
|
||||
default: () => ({}),
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
pswp: null,
|
||||
angle: 0
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
const self = this;
|
||||
const initPhotoSwipeFromDOM = function (gallerySelector) {
|
||||
|
||||
// parse slide data (url, title, size ...) from DOM elements
|
||||
// (children of gallerySelector)
|
||||
const parseThumbnailElements = function (el) {
|
||||
// const thumbElements = el.childNodes;
|
||||
const thumbElements = el.querySelectorAll('a');
|
||||
const numNodes = thumbElements.length;
|
||||
const items = [];
|
||||
|
||||
let figureEl,
|
||||
linkEl,
|
||||
size,
|
||||
item;
|
||||
|
||||
for (let i = 0; i < numNodes; i++) {
|
||||
|
||||
figureEl = thumbElements[i]; // <figure> element
|
||||
// include only element nodes
|
||||
if (figureEl.nodeType !== 1) {
|
||||
continue;
|
||||
}
|
||||
linkEl = figureEl.children[0]; // <a> element
|
||||
// size = linkEl.getAttribute('data-size').split('x');
|
||||
|
||||
// create slide object
|
||||
item = {
|
||||
src: linkEl.dataset.fullp,
|
||||
w: 0,
|
||||
h: 0,
|
||||
title: linkEl.getAttribute('title')
|
||||
};
|
||||
|
||||
|
||||
if (figureEl.children.length > 1) {
|
||||
// <figcaption> content
|
||||
item.title = figureEl.children[1].innerHTML;
|
||||
}
|
||||
|
||||
if (linkEl.children.length > 0) {
|
||||
// <img> thumbnail element, retrieving thumbnail url
|
||||
item.msrc = linkEl.children[0].getAttribute('src');
|
||||
}
|
||||
|
||||
item.el = figureEl; // save link to element for getThumbBoundsFn
|
||||
items.push(item);
|
||||
}
|
||||
return items;
|
||||
};
|
||||
|
||||
// find nearest parent element
|
||||
const closest = function closest(el, fn) {
|
||||
return el && (fn(el) ? el : closest(el.parentNode, fn));
|
||||
};
|
||||
|
||||
// triggers when user clicks on thumbnail
|
||||
const onThumbnailsClick = function (e) {
|
||||
e = e || window.event;
|
||||
e.preventDefault ? e.preventDefault() : e.returnValue = false;
|
||||
|
||||
const eTarget = e.target || e.srcElement;
|
||||
|
||||
// find root element of slide
|
||||
const clickedListItem = closest(eTarget, (el) => {
|
||||
return (el.tagName && el.tagName.toUpperCase() === 'IMG');
|
||||
});
|
||||
|
||||
if (!clickedListItem) {
|
||||
return;
|
||||
}
|
||||
|
||||
// find index of clicked item by looping through all child nodes
|
||||
// alternatively, you may define index via data- attribute
|
||||
// const clickedGallery = clickedListItem.parentNode.parentNode.parentNode;
|
||||
const clickedGallery = document.querySelectorAll('.my-gallery');
|
||||
|
||||
// const childNodes = clickedListItem.parentNode.childNodes;
|
||||
const childNodes = clickedGallery[0].querySelectorAll('img');
|
||||
const numChildNodes = childNodes.length;
|
||||
let nodeIndex = 0,
|
||||
index;
|
||||
|
||||
for (let i = 0; i < numChildNodes; i++) {
|
||||
if (childNodes[i].nodeType !== 1) {
|
||||
continue;
|
||||
}
|
||||
|
||||
if (childNodes[i] === clickedListItem) {
|
||||
index = nodeIndex;
|
||||
break;
|
||||
}
|
||||
nodeIndex++;
|
||||
}
|
||||
|
||||
if (index >= 0) {
|
||||
// open PhotoSwipe if valid index found
|
||||
openPhotoSwipe(index, clickedGallery[0]);
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
// parse picture index and gallery index from URL (#&pid=1&gid=2)
|
||||
const photoswipeParseHash = function () {
|
||||
const hash = window.location.hash.substring(1),
|
||||
params = {};
|
||||
|
||||
if (hash.length < 5) {
|
||||
return params;
|
||||
}
|
||||
|
||||
const vars = hash.split('&');
|
||||
for (let i = 0; i < vars.length; i++) {
|
||||
if (!vars[i]) {
|
||||
continue;
|
||||
}
|
||||
const pair = vars[i].split('=');
|
||||
if (pair.length < 2) {
|
||||
continue;
|
||||
}
|
||||
params[pair[0]] = pair[1];
|
||||
}
|
||||
|
||||
if (params.gid) {
|
||||
params.gid = parseInt(params.gid, 10);
|
||||
}
|
||||
|
||||
return params;
|
||||
};
|
||||
|
||||
const openPhotoSwipe = function (index, galleryElement, disableAnimation, fromURL) {
|
||||
const pswpElement = document.querySelectorAll('.pswp')[0];
|
||||
// console.log('before parse:', galleryElement)
|
||||
const items = parseThumbnailElements(galleryElement);
|
||||
|
||||
// define options (if needed)
|
||||
const options = {
|
||||
// define gallery index (for URL)
|
||||
galleryUID: galleryElement.getAttribute('data-pswp-uid'),
|
||||
|
||||
getThumbBoundsFn(index) {
|
||||
// See Options -> getThumbBoundsFn section of documentation for more info
|
||||
const thumbnail = items[index].el.getElementsByTagName('img')[0], // find thumbnail
|
||||
pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
|
||||
rect = thumbnail.getBoundingClientRect();
|
||||
|
||||
return {x: rect.left, y: rect.top + pageYScroll, w: rect.width};
|
||||
}
|
||||
};
|
||||
|
||||
// PhotoSwipe opened from URL
|
||||
if (fromURL) {
|
||||
if (options.galleryPIDs) {
|
||||
// parse real index when custom PIDs are used
|
||||
// http://photoswipe.com/documentation/faq.html#custom-pid-in-url
|
||||
for (let j = 0; j < items.length; j++) {
|
||||
if (items[j].pid === index) {
|
||||
options.index = j;
|
||||
break;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// in URL indexes start from 1
|
||||
options.index = parseInt(index, 10) - 1;
|
||||
}
|
||||
} else {
|
||||
options.index = parseInt(index, 10);
|
||||
}
|
||||
|
||||
// exit if index not found
|
||||
if (isNaN(options.index)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (disableAnimation) {
|
||||
options.showAnimationDuration = 0;
|
||||
}
|
||||
|
||||
// Pass data to PhotoSwipe and initialize it
|
||||
const gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, Object.assign(options, self.options));
|
||||
gallery.listen('gettingData', (index, item) => {
|
||||
if (item.w < 1 || item.h < 1) { // unknown size
|
||||
const img = new Image();
|
||||
img.onload = function () { // will get size after load
|
||||
item.w = this.width; // set image width
|
||||
item.h = this.height; // set image height
|
||||
gallery.invalidateCurrItems(); // reinit Items
|
||||
gallery.updateSize(true); // reinit Items
|
||||
};
|
||||
img.src = item.src; // let's download image
|
||||
}
|
||||
});
|
||||
gallery.init();
|
||||
self.pswp = gallery;
|
||||
|
||||
// trigger open event after swiper is opened
|
||||
self.$emit('open');
|
||||
|
||||
// trigger close event after swiper is closed
|
||||
gallery.listen('destroy', () => self.$emit('close'));
|
||||
};
|
||||
|
||||
const idTimeout = setTimeout(() => {
|
||||
clearInterval(idInterval);
|
||||
}, 5000);
|
||||
|
||||
const idInterval = setInterval(() => {
|
||||
if (document.querySelectorAll(gallerySelector)) {
|
||||
clearInterval(idInterval);
|
||||
clearTimeout(idTimeout);
|
||||
|
||||
// loop through all gallery elements and bind events
|
||||
const galleryElements = document.querySelectorAll(gallerySelector);
|
||||
for (let i = 0, l = galleryElements.length; i < l; i++) {
|
||||
galleryElements[i].setAttribute('data-pswp-uid', i + 1);
|
||||
galleryElements[i].onclick = onThumbnailsClick;
|
||||
}
|
||||
|
||||
// Parse URL and open gallery if it contains #&pid=3&gid=1
|
||||
const hashData = photoswipeParseHash();
|
||||
if (hashData.pid && hashData.gid) {
|
||||
openPhotoSwipe(hashData.pid, galleryElements[hashData.gid - 1], true, true);
|
||||
}
|
||||
}
|
||||
}, 50);
|
||||
|
||||
|
||||
};
|
||||
|
||||
initPhotoSwipeFromDOM('.my-gallery a');
|
||||
},
|
||||
methods: {
|
||||
rotate(newAngle) {
|
||||
this.angle += newAngle;
|
||||
this.$el.querySelectorAll('.pswp__img').forEach(i => i.style.transform = `rotate(${this.angle}deg)`);
|
||||
},
|
||||
resetAngle() {
|
||||
this.angle = 0;
|
||||
this.$el.querySelectorAll('.pswp__img').forEach(i => i.style.transform = `rotate(${this.angle}deg)`);
|
||||
}
|
||||
},
|
||||
render() {
|
||||
const self = this;
|
||||
return h('div', {class: 'pswp', tabindex: '-1', role: 'dialog', 'aria-hidden': true}, [
|
||||
h('div', {class: 'pswp__bg'}),
|
||||
h('div', {class: 'pswp__scroll-wrap'}, [
|
||||
h('div', {class: 'pswp__container'}, [
|
||||
h('div', {class: 'pswp__item'}),
|
||||
h('div', {class: 'pswp__item'}),
|
||||
h('div', {class: 'pswp__item'})
|
||||
]),
|
||||
h('div', {class: 'pswp__ui pswp__ui--hidden'}, [
|
||||
h('div', {class: 'pswp__top-bar'}, [
|
||||
h('div', {class: 'pswp__counter'}),
|
||||
h('button', {class: 'pswp__button pswp__button--close', title: 'Close (Esc)'}),
|
||||
self.options.rotationOn ? h('button', {
|
||||
class: 'pswp__button pswp__button--rotate pswp__button--rotate--left',
|
||||
title: 'Rotate left',
|
||||
onClick() {
|
||||
self.rotate(-90);
|
||||
}
|
||||
}) : '',
|
||||
self.options.rotationOn ? h('button', {
|
||||
class: 'pswp__button pswp__button--rotate pswp__button--rotate--right',
|
||||
title: 'Rotate left',
|
||||
onClick() {
|
||||
self.rotate(90);
|
||||
}
|
||||
}) : '',
|
||||
h('button', {class: 'pswp__button pswp__button--share', title: 'Share'}),
|
||||
h('button', {class: 'pswp__button pswp__button--fs', title: 'Toggle fullscreen'}),
|
||||
h('button', {class: 'pswp__button pswp__button--zoom', title: 'Zoom in/out'}),
|
||||
h('div', {class: 'pswp__preloader'}, h('div', {class: 'pswp__preloader__icn'}, h('div', {class: 'pswp__preloader__cut'}, h('div', {class: 'pswp__preloader__donut'}))))
|
||||
]),
|
||||
h('div', {class: 'pswp__share-modal pswp__share-modal--hidden pswp__single-tap'}, h('div', {class: 'pswp__share-tooltip'})),
|
||||
h('button', {
|
||||
class: 'pswp__button pswp__button--arrow--left',
|
||||
title: 'Previous (arrow left)',
|
||||
onClick() {
|
||||
self.resetAngle();
|
||||
}
|
||||
}),
|
||||
h('button', {
|
||||
class: 'pswp__button pswp__button--arrow--right',
|
||||
title: 'Next (arrow right)',
|
||||
onClick() {
|
||||
self.resetAngle();
|
||||
}
|
||||
}),
|
||||
h('div', {class: 'pswp__caption'}, h('div', {class: 'pswp__caption__center'}))
|
||||
])
|
||||
])
|
||||
]);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.pswp__top-bar {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.pswp__caption__center {
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.pswp__button--rotate {
|
||||
background: url(./icons/rotate.png) 0 0 no-repeat;
|
||||
background-size: 62px 24px;
|
||||
}
|
||||
|
||||
.pswp__button--rotate--left {
|
||||
background-position: 8px 10px;
|
||||
}
|
||||
|
||||
.pswp__button--rotate--right {
|
||||
background-position: -26px 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,15 @@
|
||||
<script>
|
||||
import {h, compile} from 'vue';
|
||||
|
||||
export default {
|
||||
name: 'RenderHtml',
|
||||
props: ['template'],
|
||||
render() {
|
||||
if (!this.template) {
|
||||
return h('div', 'loading...');
|
||||
} else {
|
||||
return h(compile(`${this.template}`));
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="my-gallery" itemscope itemtype="http://schema.org/ImageGallery">
|
||||
<figure
|
||||
v-for="(item, index) in items"
|
||||
v-show="index === 0 || !singleThumbnail"
|
||||
:key="index"
|
||||
class="gallery-thumbnail"
|
||||
itemprop="associatedMedia"
|
||||
itemscope
|
||||
itemtype="http://schema.org/ImageObject"
|
||||
:src="item.src"
|
||||
>
|
||||
<a
|
||||
v-show="nbThumbnailsDisplayed === -1 || index < nbThumbnailsDisplayed"
|
||||
:href="item.src"
|
||||
itemprop="contentUrl"
|
||||
:data-size="`${item.w}x${item.h}`"
|
||||
:title="item.title"
|
||||
>
|
||||
<img :src="item.thumbnail" :alt="item.alt" itemprop="thumbnail" />
|
||||
</a>
|
||||
<render-html v-if="item.htmlAfterThumbnail" :template="item.htmlAfterThumbnail" />
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
<photo-swipe-component
|
||||
v-if="defaultStructure"
|
||||
:options="options"
|
||||
@open="$emit('open')"
|
||||
@close="$emit('close')"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PhotoSwipeComponent from './PhotoSwipeComponent.vue';
|
||||
// import RenderHtml from './RenderHtml.vue';
|
||||
|
||||
export default {
|
||||
// components: {PhotoSwipeComponent, RenderHtml},
|
||||
components: {PhotoSwipeComponent},
|
||||
props: {
|
||||
items: {
|
||||
default: [
|
||||
{
|
||||
src: 'http://via.placeholder.com/600x400',
|
||||
thumbnail: 'http://via.placeholder.com/64x64',
|
||||
w: 0,
|
||||
h: 0,
|
||||
alt: 'some numbers on a grey background',
|
||||
htmlAfterThumbnail: '<span class="photos-date">29.12.2021</span>'
|
||||
},
|
||||
{
|
||||
src: 'http://via.placeholder.com/1200x900',
|
||||
thumbnail: 'http://via.placeholder.com/64x64',
|
||||
w: 0,
|
||||
h: 0,
|
||||
htmlAfterThumbnail: ''
|
||||
}
|
||||
],
|
||||
type: Array
|
||||
},
|
||||
options: {
|
||||
default: () => ({}),
|
||||
type: Object
|
||||
},
|
||||
singleThumbnail: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
nbThumbnailsDisplayed: {
|
||||
default: -1,
|
||||
type: Number
|
||||
},
|
||||
defaultStructure: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
</script>
|
||||
<style scoped>
|
||||
.gallery-thumbnail {
|
||||
display: inline;
|
||||
margin: 5px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M13,4.07V1L8.45,5.55L13,10V6.09C15.84,6.57 18,9.03 18,12C18,14.97 15.84,17.43 13,17.91V19.93C16.95,19.44 20,16.08 20,12C20,7.92 16.95,4.56 13,4.07M7.1,18.32C8.26,19.22 9.61,19.76 11,19.93V17.9C10.13,17.75 9.29,17.41 8.54,16.87L7.1,18.32M6.09,13H4.07C4.24,14.39 4.79,15.73 5.69,16.89L7.1,15.47C6.58,14.72 6.23,13.88 6.09,13M7.11,8.53L5.7,7.11C4.8,8.27 4.24,9.61 4.07,11H6.09C6.23,10.13 6.58,9.28 7.11,8.53Z" /></svg>
|
||||
|
After Width: | Height: | Size: 700 B |
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M16.89,15.5L18.31,16.89C19.21,15.73 19.76,14.39 19.93,13H17.91C17.77,13.87 17.43,14.72 16.89,15.5M13,17.9V19.92C14.39,19.75 15.74,19.21 16.9,18.31L15.46,16.87C14.71,17.41 13.87,17.76 13,17.9M19.93,11C19.76,9.61 19.21,8.27 18.31,7.11L16.89,8.53C17.43,9.28 17.77,10.13 17.91,11M15.55,5.55L11,1V4.07C7.06,4.56 4,7.92 4,12C4,16.08 7.05,19.44 11,19.93V17.91C8.16,17.43 6,14.97 6,12C6,9.03 8.16,6.57 11,6.09V10L15.55,5.55Z" /></svg>
|
||||
|
After Width: | Height: | Size: 711 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
@@ -0,0 +1,3 @@
|
||||
import VuePictureSwipe from './VuePictureSwipe.vue';
|
||||
|
||||
export default VuePictureSwipe;
|
||||
Vendored
+482
@@ -0,0 +1,482 @@
|
||||
/*! PhotoSwipe Default UI CSS by Dmitry Semenov | photoswipe.com | MIT license */
|
||||
/*
|
||||
|
||||
Contents:
|
||||
|
||||
1. Buttons
|
||||
2. Share modal and links
|
||||
3. Index indicator ("1 of X" counter)
|
||||
4. Caption
|
||||
5. Loading indicator
|
||||
6. Additional styles (root element, top bar, idle state, hidden state, etc.)
|
||||
|
||||
*/
|
||||
/*
|
||||
|
||||
1. Buttons
|
||||
|
||||
*/
|
||||
/* <button> css reset */
|
||||
.pswp__button {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
position: relative;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
overflow: visible;
|
||||
-webkit-appearance: none;
|
||||
display: block;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
float: right;
|
||||
opacity: 0.75;
|
||||
-webkit-transition: opacity 0.2s;
|
||||
transition: opacity 0.2s;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none; }
|
||||
.pswp__button:focus, .pswp__button:hover {
|
||||
opacity: 1; }
|
||||
.pswp__button:active {
|
||||
outline: none;
|
||||
opacity: 0.9; }
|
||||
.pswp__button::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border: 0; }
|
||||
|
||||
/* pswp__ui--over-close class it added when mouse is over element that should close gallery */
|
||||
.pswp__ui--over-close .pswp__button--close {
|
||||
opacity: 1; }
|
||||
|
||||
.pswp__button,
|
||||
.pswp__button--arrow--left:before,
|
||||
.pswp__button--arrow--right:before {
|
||||
background: url('https://motorradhandel.ch/extern/images/default-skin.png') 0 0 no-repeat;
|
||||
background-size: 264px 88px;
|
||||
width: 44px;
|
||||
height: 44px; }
|
||||
|
||||
@media (-webkit-min-device-pixel-ratio: 1.1), (-webkit-min-device-pixel-ratio: 1.09375), (min-resolution: 105dpi), (min-resolution: 1.1dppx) {
|
||||
/* Serve SVG sprite if browser supports SVG and resolution is more than 105dpi */
|
||||
.pswp--svg .pswp__button,
|
||||
.pswp--svg .pswp__button--arrow--left:before,
|
||||
.pswp--svg .pswp__button--arrow--right:before {
|
||||
background-image: url('https://motorradhandel.ch/extern/images/default-skin.svg'); }
|
||||
.pswp--svg .pswp__button--arrow--left,
|
||||
.pswp--svg .pswp__button--arrow--right {
|
||||
background: none; } }
|
||||
|
||||
.pswp__button--close {
|
||||
background-position: 0 -44px; }
|
||||
|
||||
.pswp__button--share {
|
||||
background-position: -44px -44px; }
|
||||
|
||||
.pswp__button--fs {
|
||||
display: none; }
|
||||
|
||||
.pswp--supports-fs .pswp__button--fs {
|
||||
display: block; }
|
||||
|
||||
.pswp--fs .pswp__button--fs {
|
||||
background-position: -44px 0; }
|
||||
|
||||
.pswp__button--zoom {
|
||||
display: none;
|
||||
background-position: -88px 0; }
|
||||
|
||||
.pswp--zoom-allowed .pswp__button--zoom {
|
||||
display: block; }
|
||||
|
||||
.pswp--zoomed-in .pswp__button--zoom {
|
||||
background-position: -132px 0; }
|
||||
|
||||
/* no arrows on touch screens */
|
||||
.pswp--touch .pswp__button--arrow--left,
|
||||
.pswp--touch .pswp__button--arrow--right {
|
||||
visibility: hidden; }
|
||||
|
||||
/*
|
||||
Arrow buttons hit area
|
||||
(icon is added to :before pseudo-element)
|
||||
*/
|
||||
.pswp__button--arrow--left,
|
||||
.pswp__button--arrow--right {
|
||||
background: none;
|
||||
top: 50%;
|
||||
margin-top: -50px;
|
||||
width: 70px;
|
||||
height: 100px;
|
||||
position: absolute; }
|
||||
|
||||
.pswp__button--arrow--left {
|
||||
left: 0; }
|
||||
|
||||
.pswp__button--arrow--right {
|
||||
right: 0; }
|
||||
|
||||
.pswp__button--arrow--left:before,
|
||||
.pswp__button--arrow--right:before {
|
||||
content: '';
|
||||
top: 35px;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
height: 30px;
|
||||
width: 32px;
|
||||
position: absolute; }
|
||||
|
||||
.pswp__button--arrow--left:before {
|
||||
left: 6px;
|
||||
background-position: -138px -44px; }
|
||||
|
||||
.pswp__button--arrow--right:before {
|
||||
right: 6px;
|
||||
background-position: -94px -44px; }
|
||||
|
||||
/*
|
||||
|
||||
2. Share modal/popup and links
|
||||
|
||||
*/
|
||||
.pswp__counter,
|
||||
.pswp__share-modal {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none; }
|
||||
|
||||
.pswp__share-modal {
|
||||
display: block;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 10px;
|
||||
position: absolute;
|
||||
z-index: 1600;
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.25s ease-out;
|
||||
transition: opacity 0.25s ease-out;
|
||||
-webkit-backface-visibility: hidden;
|
||||
will-change: opacity; }
|
||||
|
||||
.pswp__share-modal--hidden {
|
||||
display: none; }
|
||||
|
||||
.pswp__share-tooltip {
|
||||
z-index: 1620;
|
||||
position: absolute;
|
||||
background: #FFF;
|
||||
top: 56px;
|
||||
border-radius: 2px;
|
||||
display: block;
|
||||
width: auto;
|
||||
right: 44px;
|
||||
-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
|
||||
-webkit-transform: translateY(6px);
|
||||
-ms-transform: translateY(6px);
|
||||
transform: translateY(6px);
|
||||
-webkit-transition: -webkit-transform 0.25s;
|
||||
transition: transform 0.25s;
|
||||
-webkit-backface-visibility: hidden;
|
||||
will-change: transform; }
|
||||
.pswp__share-tooltip a {
|
||||
display: block;
|
||||
padding: 8px 12px;
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
line-height: 18px; }
|
||||
.pswp__share-tooltip a:hover {
|
||||
text-decoration: none;
|
||||
color: #000; }
|
||||
.pswp__share-tooltip a:first-child {
|
||||
/* round corners on the first/last list item */
|
||||
border-radius: 2px 2px 0 0; }
|
||||
.pswp__share-tooltip a:last-child {
|
||||
border-radius: 0 0 2px 2px; }
|
||||
|
||||
.pswp__share-modal--fade-in {
|
||||
opacity: 1; }
|
||||
.pswp__share-modal--fade-in .pswp__share-tooltip {
|
||||
-webkit-transform: translateY(0);
|
||||
-ms-transform: translateY(0);
|
||||
transform: translateY(0); }
|
||||
|
||||
/* increase size of share links on touch devices */
|
||||
.pswp--touch .pswp__share-tooltip a {
|
||||
padding: 16px 12px; }
|
||||
|
||||
a.pswp__share--facebook:before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
top: -12px;
|
||||
right: 15px;
|
||||
border: 6px solid transparent;
|
||||
border-bottom-color: #FFF;
|
||||
-webkit-pointer-events: none;
|
||||
-moz-pointer-events: none;
|
||||
pointer-events: none; }
|
||||
|
||||
a.pswp__share--facebook:hover {
|
||||
background: #3E5C9A;
|
||||
color: #FFF; }
|
||||
a.pswp__share--facebook:hover:before {
|
||||
border-bottom-color: #3E5C9A; }
|
||||
|
||||
a.pswp__share--twitter:hover {
|
||||
background: #55ACEE;
|
||||
color: #FFF; }
|
||||
|
||||
a.pswp__share--pinterest:hover {
|
||||
background: #CCC;
|
||||
color: #CE272D; }
|
||||
|
||||
a.pswp__share--download:hover {
|
||||
background: #DDD; }
|
||||
|
||||
/*
|
||||
|
||||
3. Index indicator ("1 of X" counter)
|
||||
|
||||
*/
|
||||
.pswp__counter {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 44px;
|
||||
font-size: 13px;
|
||||
line-height: 44px;
|
||||
color: #FFF;
|
||||
opacity: 0.75;
|
||||
padding: 0 10px; }
|
||||
|
||||
/*
|
||||
|
||||
4. Caption
|
||||
|
||||
*/
|
||||
.pswp__caption {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
min-height: 44px; }
|
||||
.pswp__caption small {
|
||||
font-size: 11px;
|
||||
color: #BBB; }
|
||||
|
||||
.pswp__caption__center {
|
||||
text-align: left;
|
||||
max-width: 420px;
|
||||
margin: 0 auto;
|
||||
font-size: 13px;
|
||||
padding: 10px;
|
||||
line-height: 20px;
|
||||
color: #CCC; }
|
||||
|
||||
.pswp__caption--empty {
|
||||
display: none; }
|
||||
|
||||
/* Fake caption element, used to calculate height of next/prev image */
|
||||
.pswp__caption--fake {
|
||||
visibility: hidden; }
|
||||
|
||||
/*
|
||||
|
||||
5. Loading indicator (preloader)
|
||||
|
||||
You can play with it here - http://codepen.io/dimsemenov/pen/yyBWoR
|
||||
|
||||
*/
|
||||
.pswp__preloader {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
margin-left: -22px;
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.25s ease-out;
|
||||
transition: opacity 0.25s ease-out;
|
||||
will-change: opacity;
|
||||
direction: ltr; }
|
||||
|
||||
.pswp__preloader__icn {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: 12px; }
|
||||
|
||||
.pswp__preloader--active {
|
||||
opacity: 1; }
|
||||
.pswp__preloader--active .pswp__preloader__icn {
|
||||
/* We use .gif in browsers that don't support CSS animation */
|
||||
background: url('https://motorradhandel.ch/extern/images/preloader.gif') 0 0 no-repeat; }
|
||||
|
||||
.pswp--css_animation .pswp__preloader--active {
|
||||
opacity: 1; }
|
||||
.pswp--css_animation .pswp__preloader--active .pswp__preloader__icn {
|
||||
-webkit-animation: clockwise 500ms linear infinite;
|
||||
animation: clockwise 500ms linear infinite; }
|
||||
.pswp--css_animation .pswp__preloader--active .pswp__preloader__donut {
|
||||
-webkit-animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite;
|
||||
animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite; }
|
||||
|
||||
.pswp--css_animation .pswp__preloader__icn {
|
||||
background: none;
|
||||
opacity: 0.75;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
top: 15px;
|
||||
margin: 0; }
|
||||
|
||||
.pswp--css_animation .pswp__preloader__cut {
|
||||
/*
|
||||
The idea of animating inner circle is based on Polymer ("material") loading indicator
|
||||
by Keanu Lee https://blog.keanulee.com/2014/10/20/the-tale-of-three-spinners.html
|
||||
*/
|
||||
position: relative;
|
||||
width: 7px;
|
||||
height: 14px;
|
||||
overflow: hidden; }
|
||||
|
||||
.pswp--css_animation .pswp__preloader__donut {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border: 2px solid #FFF;
|
||||
border-radius: 50%;
|
||||
border-left-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: none;
|
||||
margin: 0; }
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.pswp__preloader {
|
||||
position: relative;
|
||||
left: auto;
|
||||
top: auto;
|
||||
margin: 0;
|
||||
float: right; } }
|
||||
|
||||
@-webkit-keyframes clockwise {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg); }
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg); } }
|
||||
|
||||
@keyframes clockwise {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg); }
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg); } }
|
||||
|
||||
@-webkit-keyframes donut-rotate {
|
||||
0% {
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0); }
|
||||
50% {
|
||||
-webkit-transform: rotate(-140deg);
|
||||
transform: rotate(-140deg); }
|
||||
100% {
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0); } }
|
||||
|
||||
@keyframes donut-rotate {
|
||||
0% {
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0); }
|
||||
50% {
|
||||
-webkit-transform: rotate(-140deg);
|
||||
transform: rotate(-140deg); }
|
||||
100% {
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0); } }
|
||||
|
||||
/*
|
||||
|
||||
6. Additional styles
|
||||
|
||||
*/
|
||||
/* root element of UI */
|
||||
.pswp__ui {
|
||||
-webkit-font-smoothing: auto;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
z-index: 1550; }
|
||||
|
||||
/* top black bar with buttons and "1 of X" indicator */
|
||||
.pswp__top-bar {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 44px;
|
||||
width: 100%; }
|
||||
|
||||
.pswp__caption,
|
||||
.pswp__top-bar,
|
||||
.pswp--has_mouse .pswp__button--arrow--left,
|
||||
.pswp--has_mouse .pswp__button--arrow--right {
|
||||
-webkit-backface-visibility: hidden;
|
||||
will-change: opacity;
|
||||
-webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
|
||||
transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }
|
||||
|
||||
/* pswp--has_mouse class is added only when two subsequent mousemove events occur */
|
||||
.pswp--has_mouse .pswp__button--arrow--left,
|
||||
.pswp--has_mouse .pswp__button--arrow--right {
|
||||
visibility: visible; }
|
||||
|
||||
.pswp__top-bar,
|
||||
.pswp__caption {
|
||||
background-color: rgba(0, 0, 0, 0.5); }
|
||||
|
||||
/* pswp__ui--fit class is added when main image "fits" between top bar and bottom bar (caption) */
|
||||
.pswp__ui--fit .pswp__top-bar,
|
||||
.pswp__ui--fit .pswp__caption {
|
||||
background-color: rgba(0, 0, 0, 0.3); }
|
||||
|
||||
/* pswp__ui--idle class is added when mouse isn't moving for several seconds (JS option timeToIdle) */
|
||||
.pswp__ui--idle .pswp__top-bar {
|
||||
opacity: 0; }
|
||||
|
||||
.pswp__ui--idle .pswp__button--arrow--left,
|
||||
.pswp__ui--idle .pswp__button--arrow--right {
|
||||
opacity: 0; }
|
||||
|
||||
/*
|
||||
pswp__ui--hidden class is added when controls are hidden
|
||||
e.g. when user taps to toggle visibility of controls
|
||||
*/
|
||||
.pswp__ui--hidden .pswp__top-bar,
|
||||
.pswp__ui--hidden .pswp__caption,
|
||||
.pswp__ui--hidden .pswp__button--arrow--left,
|
||||
.pswp__ui--hidden .pswp__button--arrow--right {
|
||||
/* Force paint & create composition layer for controls. */
|
||||
opacity: 0.001; }
|
||||
|
||||
/* pswp__ui--one-slide class is added when there is just one item in gallery */
|
||||
.pswp__ui--one-slide .pswp__button--arrow--left,
|
||||
.pswp__ui--one-slide .pswp__button--arrow--right,
|
||||
.pswp__ui--one-slide .pswp__counter {
|
||||
display: none; }
|
||||
|
||||
.pswp__element--disabled {
|
||||
display: none !important; }
|
||||
|
||||
.pswp--minimal--dark .pswp__top-bar {
|
||||
background: none; }
|
||||
BIN
Binary file not shown.
|
After Width: | Height: | Size: 547 B |
+1
@@ -0,0 +1 @@
|
||||
<svg width="264" height="88" viewBox="0 0 264 88" xmlns="http://www.w3.org/2000/svg"><title>default-skin 2</title><g fill="none" fill-rule="evenodd"><g><path d="M67.002 59.5v3.768c-6.307.84-9.184 5.75-10.002 9.732 2.22-2.83 5.564-5.098 10.002-5.098V71.5L73 65.585 67.002 59.5z" id="Shape" fill="#fff"/><g fill="#fff"><path d="M13 29v-5h2v3h3v2h-5zM13 15h5v2h-3v3h-2v-5zM31 15v5h-2v-3h-3v-2h5zM31 29h-5v-2h3v-3h2v5z" id="Shape"/></g><g fill="#fff"><path d="M62 24v5h-2v-3h-3v-2h5zM62 20h-5v-2h3v-3h2v5zM70 20v-5h2v3h3v2h-5zM70 24h5v2h-3v3h-2v-5z"/></g><path d="M20.586 66l-5.656-5.656 1.414-1.414L22 64.586l5.656-5.656 1.414 1.414L23.414 66l5.656 5.656-1.414 1.414L22 67.414l-5.656 5.656-1.414-1.414L20.586 66z" fill="#fff"/><path d="M111.785 65.03L110 63.5l3-3.5h-10v-2h10l-3-3.5 1.785-1.468L117 59l-5.215 6.03z" fill="#fff"/><path d="M152.215 65.03L154 63.5l-3-3.5h10v-2h-10l3-3.5-1.785-1.468L147 59l5.215 6.03z" fill="#fff"/><g><path id="Rectangle-11" fill="#fff" d="M160.957 28.543l-3.25-3.25-1.413 1.414 3.25 3.25z"/><path d="M152.5 27c3.038 0 5.5-2.462 5.5-5.5s-2.462-5.5-5.5-5.5-5.5 2.462-5.5 5.5 2.462 5.5 5.5 5.5z" id="Oval-1" stroke="#fff" stroke-width="1.5"/><path fill="#fff" d="M150 21h5v1h-5z"/></g><g><path d="M116.957 28.543l-1.414 1.414-3.25-3.25 1.414-1.414 3.25 3.25z" fill="#fff"/><path d="M108.5 27c3.038 0 5.5-2.462 5.5-5.5s-2.462-5.5-5.5-5.5-5.5 2.462-5.5 5.5 2.462 5.5 5.5 5.5z" stroke="#fff" stroke-width="1.5"/><path fill="#fff" d="M106 21h5v1h-5z"/><path fill="#fff" d="M109.043 19.008l-.085 5-1-.017.085-5z"/></g></g></g></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 866 B |
+861
@@ -0,0 +1,861 @@
|
||||
/*! PhotoSwipe Default UI - 4.1.3 - 2019-01-08
|
||||
* http://photoswipe.com
|
||||
* Copyright (c) 2019 Dmitry Semenov; */
|
||||
/**
|
||||
*
|
||||
* UI on top of main sliding area (caption, arrows, close button, etc.).
|
||||
* Built just using public methods/properties of PhotoSwipe.
|
||||
*
|
||||
*/
|
||||
(function (root, factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
define(factory);
|
||||
} else if (typeof exports === 'object') {
|
||||
module.exports = factory();
|
||||
} else {
|
||||
root.PhotoSwipeUI_Default = factory();
|
||||
}
|
||||
})(this, function () {
|
||||
|
||||
'use strict';
|
||||
|
||||
|
||||
|
||||
var PhotoSwipeUI_Default =
|
||||
function(pswp, framework) {
|
||||
|
||||
var ui = this;
|
||||
var _overlayUIUpdated = false,
|
||||
_controlsVisible = true,
|
||||
_fullscrenAPI,
|
||||
_controls,
|
||||
_captionContainer,
|
||||
_fakeCaptionContainer,
|
||||
_indexIndicator,
|
||||
_shareButton,
|
||||
_shareModal,
|
||||
_shareModalHidden = true,
|
||||
_initalCloseOnScrollValue,
|
||||
_isIdle,
|
||||
_listen,
|
||||
|
||||
_loadingIndicator,
|
||||
_loadingIndicatorHidden,
|
||||
_loadingIndicatorTimeout,
|
||||
|
||||
_galleryHasOneSlide,
|
||||
|
||||
_options,
|
||||
_defaultUIOptions = {
|
||||
barsSize: {top:44, bottom:'auto'},
|
||||
closeElClasses: ['item', 'caption', 'zoom-wrap', 'ui', 'top-bar'],
|
||||
timeToIdle: 4000,
|
||||
timeToIdleOutside: 1000,
|
||||
loadingIndicatorDelay: 1000, // 2s
|
||||
|
||||
addCaptionHTMLFn: function(item, captionEl /*, isFake */) {
|
||||
if(!item.title) {
|
||||
captionEl.children[0].innerHTML = '';
|
||||
return false;
|
||||
}
|
||||
captionEl.children[0].innerHTML = item.title;
|
||||
return true;
|
||||
},
|
||||
|
||||
closeEl:true,
|
||||
captionEl: true,
|
||||
fullscreenEl: true,
|
||||
zoomEl: true,
|
||||
shareEl: false,
|
||||
counterEl: true,
|
||||
arrowEl: true,
|
||||
preloaderEl: true,
|
||||
|
||||
tapToClose: false,
|
||||
tapToToggleControls: true,
|
||||
|
||||
clickToCloseNonZoomable: true,
|
||||
|
||||
shareButtons: [
|
||||
{id:'facebook', label:'Share on Facebook', url:'https://www.facebook.com/sharer/sharer.php?u={{url}}'},
|
||||
{id:'twitter', label:'Tweet', url:'https://twitter.com/intent/tweet?text={{text}}&url={{url}}'},
|
||||
{id:'pinterest', label:'Pin it', url:'http://www.pinterest.com/pin/create/button/'+
|
||||
'?url={{url}}&media={{image_url}}&description={{text}}'},
|
||||
{id:'download', label:'Download image', url:'{{raw_image_url}}', download:true}
|
||||
],
|
||||
getImageURLForShare: function( /* shareButtonData */ ) {
|
||||
return pswp.currItem.src || '';
|
||||
},
|
||||
getPageURLForShare: function( /* shareButtonData */ ) {
|
||||
return window.location.href;
|
||||
},
|
||||
getTextForShare: function( /* shareButtonData */ ) {
|
||||
return pswp.currItem.title || '';
|
||||
},
|
||||
|
||||
indexIndicatorSep: ' / ',
|
||||
fitControlsWidth: 1200
|
||||
|
||||
},
|
||||
_blockControlsTap,
|
||||
_blockControlsTapTimeout;
|
||||
|
||||
|
||||
|
||||
var _onControlsTap = function(e) {
|
||||
if(_blockControlsTap) {
|
||||
return true;
|
||||
}
|
||||
|
||||
|
||||
e = e || window.event;
|
||||
|
||||
if(_options.timeToIdle && _options.mouseUsed && !_isIdle) {
|
||||
// reset idle timer
|
||||
_onIdleMouseMove();
|
||||
}
|
||||
|
||||
|
||||
var target = e.target || e.srcElement,
|
||||
uiElement,
|
||||
clickedClass = target.getAttribute('class') || '',
|
||||
found;
|
||||
|
||||
for(var i = 0; i < _uiElements.length; i++) {
|
||||
uiElement = _uiElements[i];
|
||||
if(uiElement.onTap && clickedClass.indexOf('pswp__' + uiElement.name ) > -1 ) {
|
||||
uiElement.onTap();
|
||||
found = true;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
if(found) {
|
||||
if(e.stopPropagation) {
|
||||
e.stopPropagation();
|
||||
}
|
||||
_blockControlsTap = true;
|
||||
|
||||
// Some versions of Android don't prevent ghost click event
|
||||
// when preventDefault() was called on touchstart and/or touchend.
|
||||
//
|
||||
// This happens on v4.3, 4.2, 4.1,
|
||||
// older versions strangely work correctly,
|
||||
// but just in case we add delay on all of them)
|
||||
var tapDelay = framework.features.isOldAndroid ? 600 : 30;
|
||||
_blockControlsTapTimeout = setTimeout(function() {
|
||||
_blockControlsTap = false;
|
||||
}, tapDelay);
|
||||
}
|
||||
|
||||
},
|
||||
_fitControlsInViewport = function() {
|
||||
return !pswp.likelyTouchDevice || _options.mouseUsed || screen.width > _options.fitControlsWidth;
|
||||
},
|
||||
_togglePswpClass = function(el, cName, add) {
|
||||
framework[ (add ? 'add' : 'remove') + 'Class' ](el, 'pswp__' + cName);
|
||||
},
|
||||
|
||||
// add class when there is just one item in the gallery
|
||||
// (by default it hides left/right arrows and 1ofX counter)
|
||||
_countNumItems = function() {
|
||||
var hasOneSlide = (_options.getNumItemsFn() === 1);
|
||||
|
||||
if(hasOneSlide !== _galleryHasOneSlide) {
|
||||
_togglePswpClass(_controls, 'ui--one-slide', hasOneSlide);
|
||||
_galleryHasOneSlide = hasOneSlide;
|
||||
}
|
||||
},
|
||||
_toggleShareModalClass = function() {
|
||||
_togglePswpClass(_shareModal, 'share-modal--hidden', _shareModalHidden);
|
||||
},
|
||||
_toggleShareModal = function() {
|
||||
|
||||
_shareModalHidden = !_shareModalHidden;
|
||||
|
||||
|
||||
if(!_shareModalHidden) {
|
||||
_toggleShareModalClass();
|
||||
setTimeout(function() {
|
||||
if(!_shareModalHidden) {
|
||||
framework.addClass(_shareModal, 'pswp__share-modal--fade-in');
|
||||
}
|
||||
}, 30);
|
||||
} else {
|
||||
framework.removeClass(_shareModal, 'pswp__share-modal--fade-in');
|
||||
setTimeout(function() {
|
||||
if(_shareModalHidden) {
|
||||
_toggleShareModalClass();
|
||||
}
|
||||
}, 300);
|
||||
}
|
||||
|
||||
if(!_shareModalHidden) {
|
||||
_updateShareURLs();
|
||||
}
|
||||
return false;
|
||||
},
|
||||
|
||||
_openWindowPopup = function(e) {
|
||||
e = e || window.event;
|
||||
var target = e.target || e.srcElement;
|
||||
|
||||
pswp.shout('shareLinkClick', e, target);
|
||||
|
||||
if(!target.href) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if( target.hasAttribute('download') ) {
|
||||
return true;
|
||||
}
|
||||
|
||||
window.open(target.href, 'pswp_share', 'scrollbars=yes,resizable=yes,toolbar=no,'+
|
||||
'location=yes,width=550,height=420,top=100,left=' +
|
||||
(window.screen ? Math.round(screen.width / 2 - 275) : 100) );
|
||||
|
||||
if(!_shareModalHidden) {
|
||||
_toggleShareModal();
|
||||
}
|
||||
|
||||
return false;
|
||||
},
|
||||
_updateShareURLs = function() {
|
||||
var shareButtonOut = '',
|
||||
shareButtonData,
|
||||
shareURL,
|
||||
image_url,
|
||||
page_url,
|
||||
share_text;
|
||||
|
||||
for(var i = 0; i < _options.shareButtons.length; i++) {
|
||||
shareButtonData = _options.shareButtons[i];
|
||||
|
||||
image_url = _options.getImageURLForShare(shareButtonData);
|
||||
page_url = _options.getPageURLForShare(shareButtonData);
|
||||
share_text = _options.getTextForShare(shareButtonData);
|
||||
|
||||
shareURL = shareButtonData.url.replace('{{url}}', encodeURIComponent(page_url) )
|
||||
.replace('{{image_url}}', encodeURIComponent(image_url) )
|
||||
.replace('{{raw_image_url}}', image_url )
|
||||
.replace('{{text}}', encodeURIComponent(share_text) );
|
||||
|
||||
shareButtonOut += '<a href="' + shareURL + '" target="_blank" '+
|
||||
'class="pswp__share--' + shareButtonData.id + '"' +
|
||||
(shareButtonData.download ? 'download' : '') + '>' +
|
||||
shareButtonData.label + '</a>';
|
||||
|
||||
if(_options.parseShareButtonOut) {
|
||||
shareButtonOut = _options.parseShareButtonOut(shareButtonData, shareButtonOut);
|
||||
}
|
||||
}
|
||||
_shareModal.children[0].innerHTML = shareButtonOut;
|
||||
_shareModal.children[0].onclick = _openWindowPopup;
|
||||
|
||||
},
|
||||
_hasCloseClass = function(target) {
|
||||
for(var i = 0; i < _options.closeElClasses.length; i++) {
|
||||
if( framework.hasClass(target, 'pswp__' + _options.closeElClasses[i]) ) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
},
|
||||
_idleInterval,
|
||||
_idleTimer,
|
||||
_idleIncrement = 0,
|
||||
_onIdleMouseMove = function() {
|
||||
clearTimeout(_idleTimer);
|
||||
_idleIncrement = 0;
|
||||
if(_isIdle) {
|
||||
ui.setIdle(false);
|
||||
}
|
||||
},
|
||||
_onMouseLeaveWindow = function(e) {
|
||||
e = e ? e : window.event;
|
||||
var from = e.relatedTarget || e.toElement;
|
||||
if (!from || from.nodeName === 'HTML') {
|
||||
clearTimeout(_idleTimer);
|
||||
_idleTimer = setTimeout(function() {
|
||||
ui.setIdle(true);
|
||||
}, _options.timeToIdleOutside);
|
||||
}
|
||||
},
|
||||
_setupFullscreenAPI = function() {
|
||||
if(_options.fullscreenEl && !framework.features.isOldAndroid) {
|
||||
if(!_fullscrenAPI) {
|
||||
_fullscrenAPI = ui.getFullscreenAPI();
|
||||
}
|
||||
if(_fullscrenAPI) {
|
||||
framework.bind(document, _fullscrenAPI.eventK, ui.updateFullscreen);
|
||||
ui.updateFullscreen();
|
||||
framework.addClass(pswp.template, 'pswp--supports-fs');
|
||||
} else {
|
||||
framework.removeClass(pswp.template, 'pswp--supports-fs');
|
||||
}
|
||||
}
|
||||
},
|
||||
_setupLoadingIndicator = function() {
|
||||
// Setup loading indicator
|
||||
if(_options.preloaderEl) {
|
||||
|
||||
_toggleLoadingIndicator(true);
|
||||
|
||||
_listen('beforeChange', function() {
|
||||
|
||||
clearTimeout(_loadingIndicatorTimeout);
|
||||
|
||||
// display loading indicator with delay
|
||||
_loadingIndicatorTimeout = setTimeout(function() {
|
||||
|
||||
if(pswp.currItem && pswp.currItem.loading) {
|
||||
|
||||
if( !pswp.allowProgressiveImg() || (pswp.currItem.img && !pswp.currItem.img.naturalWidth) ) {
|
||||
// show preloader if progressive loading is not enabled,
|
||||
// or image width is not defined yet (because of slow connection)
|
||||
_toggleLoadingIndicator(false);
|
||||
// items-controller.js function allowProgressiveImg
|
||||
}
|
||||
|
||||
} else {
|
||||
_toggleLoadingIndicator(true); // hide preloader
|
||||
}
|
||||
|
||||
}, _options.loadingIndicatorDelay);
|
||||
|
||||
});
|
||||
_listen('imageLoadComplete', function(index, item) {
|
||||
if(pswp.currItem === item) {
|
||||
_toggleLoadingIndicator(true);
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
},
|
||||
_toggleLoadingIndicator = function(hide) {
|
||||
if( _loadingIndicatorHidden !== hide ) {
|
||||
_togglePswpClass(_loadingIndicator, 'preloader--active', !hide);
|
||||
_loadingIndicatorHidden = hide;
|
||||
}
|
||||
},
|
||||
_applyNavBarGaps = function(item) {
|
||||
var gap = item.vGap;
|
||||
|
||||
if( _fitControlsInViewport() ) {
|
||||
|
||||
var bars = _options.barsSize;
|
||||
if(_options.captionEl && bars.bottom === 'auto') {
|
||||
if(!_fakeCaptionContainer) {
|
||||
_fakeCaptionContainer = framework.createEl('pswp__caption pswp__caption--fake');
|
||||
_fakeCaptionContainer.appendChild( framework.createEl('pswp__caption__center') );
|
||||
_controls.insertBefore(_fakeCaptionContainer, _captionContainer);
|
||||
framework.addClass(_controls, 'pswp__ui--fit');
|
||||
}
|
||||
if( _options.addCaptionHTMLFn(item, _fakeCaptionContainer, true) ) {
|
||||
|
||||
var captionSize = _fakeCaptionContainer.clientHeight;
|
||||
gap.bottom = parseInt(captionSize,10) || 44;
|
||||
} else {
|
||||
gap.bottom = bars.top; // if no caption, set size of bottom gap to size of top
|
||||
}
|
||||
} else {
|
||||
gap.bottom = bars.bottom === 'auto' ? 0 : bars.bottom;
|
||||
}
|
||||
|
||||
// height of top bar is static, no need to calculate it
|
||||
gap.top = bars.top;
|
||||
} else {
|
||||
gap.top = gap.bottom = 0;
|
||||
}
|
||||
},
|
||||
_setupIdle = function() {
|
||||
// Hide controls when mouse is used
|
||||
if(_options.timeToIdle) {
|
||||
_listen('mouseUsed', function() {
|
||||
|
||||
framework.bind(document, 'mousemove', _onIdleMouseMove);
|
||||
framework.bind(document, 'mouseout', _onMouseLeaveWindow);
|
||||
|
||||
_idleInterval = setInterval(function() {
|
||||
_idleIncrement++;
|
||||
if(_idleIncrement === 2) {
|
||||
ui.setIdle(true);
|
||||
}
|
||||
}, _options.timeToIdle / 2);
|
||||
});
|
||||
}
|
||||
},
|
||||
_setupHidingControlsDuringGestures = function() {
|
||||
|
||||
// Hide controls on vertical drag
|
||||
_listen('onVerticalDrag', function(now) {
|
||||
if(_controlsVisible && now < 0.95) {
|
||||
ui.hideControls();
|
||||
} else if(!_controlsVisible && now >= 0.95) {
|
||||
ui.showControls();
|
||||
}
|
||||
});
|
||||
|
||||
// Hide controls when pinching to close
|
||||
var pinchControlsHidden;
|
||||
_listen('onPinchClose' , function(now) {
|
||||
if(_controlsVisible && now < 0.9) {
|
||||
ui.hideControls();
|
||||
pinchControlsHidden = true;
|
||||
} else if(pinchControlsHidden && !_controlsVisible && now > 0.9) {
|
||||
ui.showControls();
|
||||
}
|
||||
});
|
||||
|
||||
_listen('zoomGestureEnded', function() {
|
||||
pinchControlsHidden = false;
|
||||
if(pinchControlsHidden && !_controlsVisible) {
|
||||
ui.showControls();
|
||||
}
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
|
||||
|
||||
var _uiElements = [
|
||||
{
|
||||
name: 'caption',
|
||||
option: 'captionEl',
|
||||
onInit: function(el) {
|
||||
_captionContainer = el;
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'share-modal',
|
||||
option: 'shareEl',
|
||||
onInit: function(el) {
|
||||
_shareModal = el;
|
||||
},
|
||||
onTap: function() {
|
||||
_toggleShareModal();
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'button--share',
|
||||
option: 'shareEl',
|
||||
onInit: function(el) {
|
||||
_shareButton = el;
|
||||
},
|
||||
onTap: function() {
|
||||
_toggleShareModal();
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'button--zoom',
|
||||
option: 'zoomEl',
|
||||
onTap: pswp.toggleDesktopZoom
|
||||
},
|
||||
{
|
||||
name: 'counter',
|
||||
option: 'counterEl',
|
||||
onInit: function(el) {
|
||||
_indexIndicator = el;
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'button--close',
|
||||
option: 'closeEl',
|
||||
onTap: pswp.close
|
||||
},
|
||||
{
|
||||
name: 'button--arrow--left',
|
||||
option: 'arrowEl',
|
||||
onTap: pswp.prev
|
||||
},
|
||||
{
|
||||
name: 'button--arrow--right',
|
||||
option: 'arrowEl',
|
||||
onTap: pswp.next
|
||||
},
|
||||
{
|
||||
name: 'button--fs',
|
||||
option: 'fullscreenEl',
|
||||
onTap: function() {
|
||||
if(_fullscrenAPI.isFullscreen()) {
|
||||
_fullscrenAPI.exit();
|
||||
} else {
|
||||
_fullscrenAPI.enter();
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'preloader',
|
||||
option: 'preloaderEl',
|
||||
onInit: function(el) {
|
||||
_loadingIndicator = el;
|
||||
}
|
||||
}
|
||||
|
||||
];
|
||||
|
||||
var _setupUIElements = function() {
|
||||
var item,
|
||||
classAttr,
|
||||
uiElement;
|
||||
|
||||
var loopThroughChildElements = function(sChildren) {
|
||||
if(!sChildren) {
|
||||
return;
|
||||
}
|
||||
|
||||
var l = sChildren.length;
|
||||
for(var i = 0; i < l; i++) {
|
||||
item = sChildren[i];
|
||||
classAttr = item.className;
|
||||
|
||||
for(var a = 0; a < _uiElements.length; a++) {
|
||||
uiElement = _uiElements[a];
|
||||
|
||||
if(classAttr.indexOf('pswp__' + uiElement.name) > -1 ) {
|
||||
|
||||
if( _options[uiElement.option] ) { // if element is not disabled from options
|
||||
|
||||
framework.removeClass(item, 'pswp__element--disabled');
|
||||
if(uiElement.onInit) {
|
||||
uiElement.onInit(item);
|
||||
}
|
||||
|
||||
//item.style.display = 'block';
|
||||
} else {
|
||||
framework.addClass(item, 'pswp__element--disabled');
|
||||
//item.style.display = 'none';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
loopThroughChildElements(_controls.children);
|
||||
|
||||
var topBar = framework.getChildByClass(_controls, 'pswp__top-bar');
|
||||
if(topBar) {
|
||||
loopThroughChildElements( topBar.children );
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
ui.init = function() {
|
||||
|
||||
// extend options
|
||||
framework.extend(pswp.options, _defaultUIOptions, true);
|
||||
|
||||
// create local link for fast access
|
||||
_options = pswp.options;
|
||||
|
||||
// find pswp__ui element
|
||||
_controls = framework.getChildByClass(pswp.scrollWrap, 'pswp__ui');
|
||||
|
||||
// create local link
|
||||
_listen = pswp.listen;
|
||||
|
||||
|
||||
_setupHidingControlsDuringGestures();
|
||||
|
||||
// update controls when slides change
|
||||
_listen('beforeChange', ui.update);
|
||||
|
||||
// toggle zoom on double-tap
|
||||
_listen('doubleTap', function(point) {
|
||||
var initialZoomLevel = pswp.currItem.initialZoomLevel;
|
||||
if(pswp.getZoomLevel() !== initialZoomLevel) {
|
||||
pswp.zoomTo(initialZoomLevel, point, 333);
|
||||
} else {
|
||||
pswp.zoomTo(_options.getDoubleTapZoom(false, pswp.currItem), point, 333);
|
||||
}
|
||||
});
|
||||
|
||||
// Allow text selection in caption
|
||||
_listen('preventDragEvent', function(e, isDown, preventObj) {
|
||||
var t = e.target || e.srcElement;
|
||||
if(
|
||||
t &&
|
||||
t.getAttribute('class') && e.type.indexOf('mouse') > -1 &&
|
||||
( t.getAttribute('class').indexOf('__caption') > 0 || (/(SMALL|STRONG|EM)/i).test(t.tagName) )
|
||||
) {
|
||||
preventObj.prevent = false;
|
||||
}
|
||||
});
|
||||
|
||||
// bind events for UI
|
||||
_listen('bindEvents', function() {
|
||||
framework.bind(_controls, 'pswpTap click', _onControlsTap);
|
||||
framework.bind(pswp.scrollWrap, 'pswpTap', ui.onGlobalTap);
|
||||
|
||||
if(!pswp.likelyTouchDevice) {
|
||||
framework.bind(pswp.scrollWrap, 'mouseover', ui.onMouseOver);
|
||||
}
|
||||
});
|
||||
|
||||
// unbind events for UI
|
||||
_listen('unbindEvents', function() {
|
||||
if(!_shareModalHidden) {
|
||||
_toggleShareModal();
|
||||
}
|
||||
|
||||
if(_idleInterval) {
|
||||
clearInterval(_idleInterval);
|
||||
}
|
||||
framework.unbind(document, 'mouseout', _onMouseLeaveWindow);
|
||||
framework.unbind(document, 'mousemove', _onIdleMouseMove);
|
||||
framework.unbind(_controls, 'pswpTap click', _onControlsTap);
|
||||
framework.unbind(pswp.scrollWrap, 'pswpTap', ui.onGlobalTap);
|
||||
framework.unbind(pswp.scrollWrap, 'mouseover', ui.onMouseOver);
|
||||
|
||||
if(_fullscrenAPI) {
|
||||
framework.unbind(document, _fullscrenAPI.eventK, ui.updateFullscreen);
|
||||
if(_fullscrenAPI.isFullscreen()) {
|
||||
_options.hideAnimationDuration = 0;
|
||||
_fullscrenAPI.exit();
|
||||
}
|
||||
_fullscrenAPI = null;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// clean up things when gallery is destroyed
|
||||
_listen('destroy', function() {
|
||||
if(_options.captionEl) {
|
||||
if(_fakeCaptionContainer) {
|
||||
_controls.removeChild(_fakeCaptionContainer);
|
||||
}
|
||||
framework.removeClass(_captionContainer, 'pswp__caption--empty');
|
||||
}
|
||||
|
||||
if(_shareModal) {
|
||||
_shareModal.children[0].onclick = null;
|
||||
}
|
||||
framework.removeClass(_controls, 'pswp__ui--over-close');
|
||||
framework.addClass( _controls, 'pswp__ui--hidden');
|
||||
ui.setIdle(false);
|
||||
});
|
||||
|
||||
|
||||
if(!_options.showAnimationDuration) {
|
||||
framework.removeClass( _controls, 'pswp__ui--hidden');
|
||||
}
|
||||
_listen('initialZoomIn', function() {
|
||||
if(_options.showAnimationDuration) {
|
||||
framework.removeClass( _controls, 'pswp__ui--hidden');
|
||||
}
|
||||
});
|
||||
_listen('initialZoomOut', function() {
|
||||
framework.addClass( _controls, 'pswp__ui--hidden');
|
||||
});
|
||||
|
||||
_listen('parseVerticalMargin', _applyNavBarGaps);
|
||||
|
||||
_setupUIElements();
|
||||
|
||||
if(_options.shareEl && _shareButton && _shareModal) {
|
||||
_shareModalHidden = true;
|
||||
}
|
||||
|
||||
_countNumItems();
|
||||
|
||||
_setupIdle();
|
||||
|
||||
_setupFullscreenAPI();
|
||||
|
||||
_setupLoadingIndicator();
|
||||
};
|
||||
|
||||
ui.setIdle = function(isIdle) {
|
||||
_isIdle = isIdle;
|
||||
_togglePswpClass(_controls, 'ui--idle', isIdle);
|
||||
};
|
||||
|
||||
ui.update = function() {
|
||||
// Don't update UI if it's hidden
|
||||
if(_controlsVisible && pswp.currItem) {
|
||||
|
||||
ui.updateIndexIndicator();
|
||||
|
||||
if(_options.captionEl) {
|
||||
_options.addCaptionHTMLFn(pswp.currItem, _captionContainer);
|
||||
|
||||
_togglePswpClass(_captionContainer, 'caption--empty', !pswp.currItem.title);
|
||||
}
|
||||
|
||||
_overlayUIUpdated = true;
|
||||
|
||||
} else {
|
||||
_overlayUIUpdated = false;
|
||||
}
|
||||
|
||||
if(!_shareModalHidden) {
|
||||
_toggleShareModal();
|
||||
}
|
||||
|
||||
_countNumItems();
|
||||
};
|
||||
|
||||
ui.updateFullscreen = function(e) {
|
||||
|
||||
if(e) {
|
||||
// some browsers change window scroll position during the fullscreen
|
||||
// so PhotoSwipe updates it just in case
|
||||
setTimeout(function() {
|
||||
pswp.setScrollOffset( 0, framework.getScrollY() );
|
||||
}, 50);
|
||||
}
|
||||
|
||||
// toogle pswp--fs class on root element
|
||||
framework[ (_fullscrenAPI.isFullscreen() ? 'add' : 'remove') + 'Class' ](pswp.template, 'pswp--fs');
|
||||
};
|
||||
|
||||
ui.updateIndexIndicator = function() {
|
||||
if(_options.counterEl) {
|
||||
_indexIndicator.innerHTML = (pswp.getCurrentIndex()+1) +
|
||||
_options.indexIndicatorSep +
|
||||
_options.getNumItemsFn();
|
||||
}
|
||||
};
|
||||
|
||||
ui.onGlobalTap = function(e) {
|
||||
e = e || window.event;
|
||||
var target = e.target || e.srcElement;
|
||||
|
||||
if(_blockControlsTap) {
|
||||
return;
|
||||
}
|
||||
|
||||
if(e.detail && e.detail.pointerType === 'mouse') {
|
||||
|
||||
// close gallery if clicked outside of the image
|
||||
if(_hasCloseClass(target)) {
|
||||
pswp.close();
|
||||
return;
|
||||
}
|
||||
|
||||
if(framework.hasClass(target, 'pswp__img')) {
|
||||
if(pswp.getZoomLevel() === 1 && pswp.getZoomLevel() <= pswp.currItem.fitRatio) {
|
||||
if(_options.clickToCloseNonZoomable) {
|
||||
pswp.close();
|
||||
}
|
||||
} else {
|
||||
pswp.toggleDesktopZoom(e.detail.releasePoint);
|
||||
}
|
||||
}
|
||||
|
||||
} else {
|
||||
|
||||
// tap anywhere (except buttons) to toggle visibility of controls
|
||||
if(_options.tapToToggleControls) {
|
||||
if(_controlsVisible) {
|
||||
ui.hideControls();
|
||||
} else {
|
||||
ui.showControls();
|
||||
}
|
||||
}
|
||||
|
||||
// tap to close gallery
|
||||
if(_options.tapToClose && (framework.hasClass(target, 'pswp__img') || _hasCloseClass(target)) ) {
|
||||
pswp.close();
|
||||
return;
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
ui.onMouseOver = function(e) {
|
||||
e = e || window.event;
|
||||
var target = e.target || e.srcElement;
|
||||
|
||||
// add class when mouse is over an element that should close the gallery
|
||||
_togglePswpClass(_controls, 'ui--over-close', _hasCloseClass(target));
|
||||
};
|
||||
|
||||
ui.hideControls = function() {
|
||||
framework.addClass(_controls,'pswp__ui--hidden');
|
||||
_controlsVisible = false;
|
||||
};
|
||||
|
||||
ui.showControls = function() {
|
||||
_controlsVisible = true;
|
||||
if(!_overlayUIUpdated) {
|
||||
ui.update();
|
||||
}
|
||||
framework.removeClass(_controls,'pswp__ui--hidden');
|
||||
};
|
||||
|
||||
ui.supportsFullscreen = function() {
|
||||
var d = document;
|
||||
return !!(d.exitFullscreen || d.mozCancelFullScreen || d.webkitExitFullscreen || d.msExitFullscreen);
|
||||
};
|
||||
|
||||
ui.getFullscreenAPI = function() {
|
||||
var dE = document.documentElement,
|
||||
api,
|
||||
tF = 'fullscreenchange';
|
||||
|
||||
if (dE.requestFullscreen) {
|
||||
api = {
|
||||
enterK: 'requestFullscreen',
|
||||
exitK: 'exitFullscreen',
|
||||
elementK: 'fullscreenElement',
|
||||
eventK: tF
|
||||
};
|
||||
|
||||
} else if(dE.mozRequestFullScreen ) {
|
||||
api = {
|
||||
enterK: 'mozRequestFullScreen',
|
||||
exitK: 'mozCancelFullScreen',
|
||||
elementK: 'mozFullScreenElement',
|
||||
eventK: 'moz' + tF
|
||||
};
|
||||
|
||||
|
||||
|
||||
} else if(dE.webkitRequestFullscreen) {
|
||||
api = {
|
||||
enterK: 'webkitRequestFullscreen',
|
||||
exitK: 'webkitExitFullscreen',
|
||||
elementK: 'webkitFullscreenElement',
|
||||
eventK: 'webkit' + tF
|
||||
};
|
||||
|
||||
} else if(dE.msRequestFullscreen) {
|
||||
api = {
|
||||
enterK: 'msRequestFullscreen',
|
||||
exitK: 'msExitFullscreen',
|
||||
elementK: 'msFullscreenElement',
|
||||
eventK: 'MSFullscreenChange'
|
||||
};
|
||||
}
|
||||
|
||||
if(api) {
|
||||
api.enter = function() {
|
||||
// disable close-on-scroll in fullscreen
|
||||
_initalCloseOnScrollValue = _options.closeOnScroll;
|
||||
_options.closeOnScroll = false;
|
||||
|
||||
if(this.enterK === 'webkitRequestFullscreen') {
|
||||
pswp.template[this.enterK]( Element.ALLOW_KEYBOARD_INPUT );
|
||||
} else {
|
||||
return pswp.template[this.enterK]();
|
||||
}
|
||||
};
|
||||
api.exit = function() {
|
||||
_options.closeOnScroll = _initalCloseOnScrollValue;
|
||||
|
||||
return document[this.exitK]();
|
||||
|
||||
};
|
||||
api.isFullscreen = function() { return document[this.elementK]; };
|
||||
}
|
||||
|
||||
return api;
|
||||
};
|
||||
|
||||
|
||||
|
||||
};
|
||||
return PhotoSwipeUI_Default;
|
||||
|
||||
|
||||
});
|
||||
+179
@@ -0,0 +1,179 @@
|
||||
/*! PhotoSwipe main CSS by Dmitry Semenov | photoswipe.com | MIT license */
|
||||
/*
|
||||
Styles for basic PhotoSwipe functionality (sliding area, open/close transitions)
|
||||
*/
|
||||
/* pswp = photoswipe */
|
||||
.pswp {
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
overflow: hidden;
|
||||
-ms-touch-action: none;
|
||||
touch-action: none;
|
||||
z-index: 1500;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
/* create separate layer, to avoid paint on window.onscroll in webkit/blink */
|
||||
-webkit-backface-visibility: hidden;
|
||||
outline: none; }
|
||||
.pswp * {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box; }
|
||||
.pswp img {
|
||||
max-width: none; }
|
||||
|
||||
/* style is added when JS option showHideOpacity is set to true */
|
||||
.pswp--animate_opacity {
|
||||
/* 0.001, because opacity:0 doesn't trigger Paint action, which causes lag at start of transition */
|
||||
opacity: 0.001;
|
||||
will-change: opacity;
|
||||
/* for open/close transition */
|
||||
-webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
|
||||
transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }
|
||||
|
||||
.pswp--open {
|
||||
display: block; }
|
||||
|
||||
.pswp--zoom-allowed .pswp__img {
|
||||
/* autoprefixer: off */
|
||||
cursor: -webkit-zoom-in;
|
||||
cursor: -moz-zoom-in;
|
||||
cursor: zoom-in; }
|
||||
|
||||
.pswp--zoomed-in .pswp__img {
|
||||
/* autoprefixer: off */
|
||||
cursor: -webkit-grab;
|
||||
cursor: -moz-grab;
|
||||
cursor: grab; }
|
||||
|
||||
.pswp--dragging .pswp__img {
|
||||
/* autoprefixer: off */
|
||||
cursor: -webkit-grabbing;
|
||||
cursor: -moz-grabbing;
|
||||
cursor: grabbing; }
|
||||
|
||||
/*
|
||||
Background is added as a separate element.
|
||||
As animating opacity is much faster than animating rgba() background-color.
|
||||
*/
|
||||
.pswp__bg {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #000;
|
||||
opacity: 0;
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
-webkit-backface-visibility: hidden;
|
||||
will-change: opacity; }
|
||||
|
||||
.pswp__scroll-wrap {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden; }
|
||||
|
||||
.pswp__container,
|
||||
.pswp__zoom-wrap {
|
||||
-ms-touch-action: none;
|
||||
touch-action: none;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0; }
|
||||
|
||||
/* Prevent selection and tap highlights */
|
||||
.pswp__container,
|
||||
.pswp__img {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-touch-callout: none; }
|
||||
|
||||
.pswp__zoom-wrap {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
-webkit-transform-origin: left top;
|
||||
-ms-transform-origin: left top;
|
||||
transform-origin: left top;
|
||||
/* for open/close transition */
|
||||
-webkit-transition: -webkit-transform 333ms cubic-bezier(0.4, 0, 0.22, 1);
|
||||
transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1); }
|
||||
|
||||
.pswp__bg {
|
||||
will-change: opacity;
|
||||
/* for open/close transition */
|
||||
-webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
|
||||
transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }
|
||||
|
||||
.pswp--animated-in .pswp__bg,
|
||||
.pswp--animated-in .pswp__zoom-wrap {
|
||||
-webkit-transition: none;
|
||||
transition: none; }
|
||||
|
||||
.pswp__container,
|
||||
.pswp__zoom-wrap {
|
||||
-webkit-backface-visibility: hidden; }
|
||||
|
||||
.pswp__item {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
overflow: hidden; }
|
||||
|
||||
.pswp__img {
|
||||
position: absolute;
|
||||
width: auto;
|
||||
height: auto;
|
||||
top: 0;
|
||||
left: 0; }
|
||||
|
||||
/*
|
||||
stretched thumbnail or div placeholder element (see below)
|
||||
style is added to avoid flickering in webkit/blink when layers overlap
|
||||
*/
|
||||
.pswp__img--placeholder {
|
||||
-webkit-backface-visibility: hidden; }
|
||||
|
||||
/*
|
||||
div element that matches size of large image
|
||||
large image loads on top of it
|
||||
*/
|
||||
.pswp__img--placeholder--blank {
|
||||
background: #222; }
|
||||
|
||||
.pswp--ie .pswp__img {
|
||||
width: 100% !important;
|
||||
height: auto !important;
|
||||
left: 0;
|
||||
top: 0; }
|
||||
|
||||
/*
|
||||
Error message appears when image is not loaded
|
||||
(JS option errorMsg controls markup)
|
||||
*/
|
||||
.pswp__error-msg {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
margin-top: -8px;
|
||||
color: #CCC; }
|
||||
|
||||
.pswp__error-msg a {
|
||||
color: #CCC;
|
||||
text-decoration: underline; }
|
||||
+3700
File diff suppressed because it is too large
Load Diff
Vendored
+26
@@ -0,0 +1,26 @@
|
||||
import { createApp } from 'vue'
|
||||
import { i18n } from './modules/i18n.js';
|
||||
import App from "./App.vue";
|
||||
import store from "./modules/store";
|
||||
import colorMixin from './mixins/colorMixin';
|
||||
|
||||
const appEl = document.createElement('div');
|
||||
appEl.setAttribute("id", "app");
|
||||
|
||||
var src = document.getElementsByClassName('wrapperJSON');
|
||||
if(src.length) {
|
||||
src[0].appendChild(appEl);
|
||||
}else{
|
||||
const queryString = window.location.search;
|
||||
const urlParams = new URLSearchParams(queryString);
|
||||
var ui=urlParams.get('ui');
|
||||
var fzl=urlParams.get('fzl');
|
||||
const wrapper = document.createElement('div');
|
||||
wrapper.setAttribute("class", "wrapperJSON");
|
||||
wrapper.setAttribute("data-ui", ui);
|
||||
wrapper.setAttribute("data-fzl", fzl);
|
||||
wrapper.appendChild(appEl);
|
||||
document.body.appendChild(wrapper);
|
||||
}
|
||||
|
||||
createApp(App).mixin(colorMixin).use(i18n).use(store).mount('#app');
|
||||
@@ -0,0 +1,48 @@
|
||||
export default {
|
||||
methods: {
|
||||
formatPrice(price, prec=2, dots=true, label=true) {
|
||||
price = Number(price);
|
||||
if(price == 0 && label) {
|
||||
return this.$t('front_externMP.on_request')
|
||||
}else{
|
||||
if(price != Math.floor(price) && prec > 0) {
|
||||
return 'CHF ' + this.splitAndPad(price.toFixed(prec));
|
||||
}
|
||||
if(dots) {
|
||||
return 'CHF ' + this.splitAndPad(price.toFixed(0)) + '.-';
|
||||
}else{
|
||||
return 'CHF ' + this.splitAndPad(price.toFixed(0));
|
||||
}
|
||||
}
|
||||
},
|
||||
splitAndPad(number) {
|
||||
number = number + '';
|
||||
var x = number.split('.');
|
||||
var x1 = x[0];
|
||||
var x2 = x.length > 1 ? '.' + x[1] : '';
|
||||
var rgx = /(\d+)(\d{3})/;
|
||||
while (rgx.test(x1)) {
|
||||
x1 = x1.replace(rgx, '$1' + '’' + '$2');
|
||||
}
|
||||
return x1 + x2;
|
||||
},
|
||||
isContentHtml(input) {
|
||||
var htmlRegex = new RegExp(/<[a-z/][\s\S]*>/i);
|
||||
return htmlRegex.test(input);
|
||||
},
|
||||
formatDate(value) {
|
||||
if(!value) {
|
||||
return '-';
|
||||
}
|
||||
const date = new Date(value);
|
||||
if(!date instanceof Date || isNaN(date)) {
|
||||
return '-';
|
||||
}
|
||||
return new Intl.DateTimeFormat("de-CH", {year: 'numeric', month: '2-digit', day: '2-digit' }).format(date);
|
||||
},
|
||||
formatNum(price, digits = 0){
|
||||
var options = { maximumFractionDigits: digits, minimumFractionDigits: digits }
|
||||
return Intl.NumberFormat("de-CH", options).format(price);
|
||||
},
|
||||
}
|
||||
};
|
||||
+42
@@ -0,0 +1,42 @@
|
||||
import { slugify } from 'transliteration';
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
// CDN paths
|
||||
clientCDNPath(client, location) {
|
||||
return "https://cdn.motorradhandel.ch/media/clients/" + client + '/' + location;
|
||||
},
|
||||
adCDNPath(client, location) {
|
||||
return this.clientCDNPath(client, location) + '/ads/';
|
||||
},
|
||||
marktplatzCDNPath(client, location) {
|
||||
return this.clientCDNPath(client, location) + '/marktplatz/';
|
||||
},
|
||||
brandLogos(logo) {
|
||||
return "https://cdn.motorradhandel.ch/media/marken/images/" + logo;
|
||||
},
|
||||
|
||||
|
||||
// Slug creations
|
||||
adSlug(locale, brandName, modelName, id) {
|
||||
return '/' + locale + '/d/' + this.safeString(brandName) + '/' + this.safeString(modelName) + '/' + id;
|
||||
},
|
||||
rentalSlug(locale, brandName, modelName, id) {
|
||||
return '/' + locale + '/m/' + this.safeString(brandName) + '/' + this.safeString(modelName) + '/' + id;
|
||||
},
|
||||
clientSlug(locale, clientName, id) {
|
||||
return '/' + locale + '/h/' + this.safeString(clientName) + '/' + id;
|
||||
},
|
||||
marktplatzSlug(locale, art, title, id) {
|
||||
return '/' + locale + '/mp/' + this.safeString(art) + '/' + this.safeString(title) + '/' + id;
|
||||
},
|
||||
bikesorySlug(locale, title, brand, model, id) {
|
||||
return '/' + locale + '/stories/' + this.safeString(title) + '/' + this.safeString(brand) + '/' + this.safeString(model) + '/' + id;
|
||||
},
|
||||
|
||||
|
||||
safeString(str) {
|
||||
return slugify(str).replace(/[-\s]+/g, '-');
|
||||
},
|
||||
}
|
||||
};
|
||||
+12
@@ -0,0 +1,12 @@
|
||||
export default {
|
||||
methods: {
|
||||
// setting values:
|
||||
// titleColor, divBGColor, bgColor, secondColor, fontColor, searchBgColor, buttonColor, buttonTextColor
|
||||
color: function(setting) {
|
||||
return this.$store.state.settings[setting] ? 'color: #' + this.$store.state.settings[setting] + ' !important' : '';
|
||||
},
|
||||
bckgrColor: function(setting) {
|
||||
return this.$store.state.settings[setting] ? 'background: #' + this.$store.state.settings[setting] + ' !important' : '';
|
||||
},
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,10 @@
|
||||
export default {
|
||||
methods: {
|
||||
getDefaultImage(category = 1) {
|
||||
return "https://cdn.motorradhandel.ch/media/categories/def_images/motorradhandel_missing_image_" + category + ".png";
|
||||
},
|
||||
getDefaultMPImage(category = 1) {
|
||||
return "https://cdn.motorradhandel.ch/media/categories/def_images/motorradhandel_mp_missing_image_" + category + ".png";
|
||||
},
|
||||
}
|
||||
};
|
||||
+28
@@ -0,0 +1,28 @@
|
||||
import { useI18n, createI18n } from 'vue-i18n';
|
||||
import axios from 'axios'
|
||||
|
||||
|
||||
export const i18n = createI18n({
|
||||
locale: 'de',
|
||||
fallbackLocale: 'de',
|
||||
allowComposition: true,
|
||||
})
|
||||
|
||||
const loadedLanguages = []
|
||||
|
||||
function setI18nLanguage (i18n, lang) {
|
||||
if (i18n.mode === 'legacy') {
|
||||
i18n.global.locale = lang
|
||||
} else {
|
||||
i18n.global.locale.value = lang
|
||||
}
|
||||
axios.defaults.headers.common['Accept-Language'] = lang
|
||||
document.querySelector('html').setAttribute('lang', lang)
|
||||
return lang
|
||||
}
|
||||
|
||||
export const loadLanguage = function(i18n, lng, texts) {
|
||||
loadedLanguages.push(lng)
|
||||
i18n.global.setLocaleMessage(lng, texts)
|
||||
setI18nLanguage(i18n, lng)
|
||||
}
|
||||
+69
@@ -0,0 +1,69 @@
|
||||
import Vuex from "vuex";
|
||||
|
||||
export default new Vuex.Store({
|
||||
state: () => ({
|
||||
settings: {},
|
||||
listParams: {
|
||||
arts: [],
|
||||
brands: [],
|
||||
categories: [],
|
||||
untergrps: [],
|
||||
},
|
||||
selected: {
|
||||
brand: 0,
|
||||
mbrand: 0,
|
||||
category: 0,
|
||||
untergrp: 0,
|
||||
location: 0,
|
||||
artnum: '',
|
||||
arttitle: '',
|
||||
sort: 0,
|
||||
page: 1,
|
||||
},
|
||||
list: {},
|
||||
brands: {},
|
||||
models: {},
|
||||
pagination: {},
|
||||
locations: [],
|
||||
categories: [],
|
||||
untergrps: [],
|
||||
mbrands: [],
|
||||
}),
|
||||
mutations: {
|
||||
setPage(state, page) {
|
||||
state.selected.page = page;
|
||||
},
|
||||
setSelected(state, payload) {
|
||||
state.selected[payload.item] = payload.state;
|
||||
},
|
||||
updateResults(state, payload) {0
|
||||
state.list = payload.data.data.results;
|
||||
state.pagination = payload.data.data.pagination;
|
||||
state.selected.page = state.pagination.page;
|
||||
// this.commit('setAdditionalParams', payload);
|
||||
},
|
||||
updateModels(state, payload) {
|
||||
state.selected.model = 0;
|
||||
state.models = payload.data.models;
|
||||
},
|
||||
updateDetails(state, payload) {
|
||||
state.details = payload.data;
|
||||
},
|
||||
updateSettings(state, payload) {
|
||||
state.settings = payload.data.settings;
|
||||
state.settings.srchParObj = JSON.parse(state.settings.srchParams);
|
||||
state.listParams.arts = state.settings.fzart ? state.settings.fzart.split(",") : [];
|
||||
state.listParams.brands = state.settings.marken ? state.settings.marken.split(",") : [];
|
||||
state.listParams.categories = state.settings.kategorie ? state.settings.kategorie.split(",") : [];
|
||||
state.list = payload.data.data.results;
|
||||
state.brands = payload.data.brands;
|
||||
state.pagination = payload.data.data.pagination;
|
||||
state.locations = payload.data.locations;
|
||||
state.categories = payload.data.categories ? payload.data.categories : [];
|
||||
state.untergrps = payload.data.untergrp ? payload.data.untergrp : [];
|
||||
state.mbrands = payload.data.mbrands ? payload.data.mbrands : [];
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
});
|
||||
@@ -0,0 +1,133 @@
|
||||
<template>
|
||||
<loader :active="isLoading"/>
|
||||
<!-- 1-{{ $store.state.settings.divBgColor }}-1 -->
|
||||
<div v-if="lngLoaded" :style="bckgrColor('divBgColor')">
|
||||
<details-page v-if="detailsPage"
|
||||
:url="url"
|
||||
@backTolist="detailsPage=false"
|
||||
@gotoPrev="gotoPrev"
|
||||
@gotoNext="gotoNext"
|
||||
/>
|
||||
<search-page v-else
|
||||
@detailClick="detailClick"
|
||||
@brandChanged="brandChanged"
|
||||
@reloadData="reloadData"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
|
||||
import PageSearch from './components/PageSearch.vue'
|
||||
import PageDetail from './components/PageDetail.vue'
|
||||
import {i18n, loadLanguage} from './modules/i18n'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'search-page': PageSearch,
|
||||
'details-page': PageDetail,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
configParams: {
|
||||
clientID: 0,
|
||||
rowID: 0,
|
||||
},
|
||||
url: 'https://motorradhandel.ch',
|
||||
// url: 'https://staging.motorradhandel.ch',
|
||||
// url: 'http://mh3.com',
|
||||
isLoading: false,
|
||||
lngLoaded: false,
|
||||
detailsPage: false,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
var t = document.getElementsByClassName('wrapperJSON');
|
||||
if(t.length) {
|
||||
this.configParams.clientID = t[0].dataset.ui;
|
||||
this.configParams.rowID = t[0].dataset.fzl;
|
||||
this.getSettings();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
brandChanged() {
|
||||
this.isLoading = true;
|
||||
axios
|
||||
.get(this.url + "/api/ext/getModels?id=" + this.$store.state.settings.id, {params: this.$store.state.selected})
|
||||
.then(response => {
|
||||
this.$store.commit('updateModels', response);
|
||||
this.reloadData();
|
||||
})
|
||||
.catch(error => {
|
||||
console.log(error)
|
||||
})
|
||||
.finally(() => {
|
||||
this.isLoading = false;
|
||||
})
|
||||
},
|
||||
reloadData() {
|
||||
this.isLoading = true;
|
||||
axios
|
||||
.get(this.url + "/api/ext/loadResults?id=" + this.$store.state.settings.id, {params: this.$store.state.selected})
|
||||
.then(response => {
|
||||
this.$store.commit('updateResults', response);
|
||||
})
|
||||
.catch(error => {
|
||||
console.log(error)
|
||||
})
|
||||
.finally(() => {
|
||||
this.isLoading = false;
|
||||
})
|
||||
},
|
||||
detailClick(id) {
|
||||
this.isLoading = true;
|
||||
// this.details = {};
|
||||
axios
|
||||
.get(this.url + "/api/ext/getDetails?id=" + id)
|
||||
.then(response => {
|
||||
this.$store.commit('updateDetails', response);
|
||||
this.detailsPage = true;
|
||||
})
|
||||
.catch(error => {
|
||||
console.log(error)
|
||||
})
|
||||
.finally(() => {
|
||||
this.isLoading = false;
|
||||
})
|
||||
},
|
||||
getSettings() {
|
||||
this.isLoading = true;
|
||||
var configParams = this.configParams;
|
||||
axios
|
||||
.get(this.url + "/api/ext/getSettings?clientID=" + configParams.clientID + '&rowID=' + configParams.rowID)
|
||||
.then(response => {
|
||||
this.$store.commit('updateSettings', response);
|
||||
loadLanguage(i18n, this.$store.state.settings.lang, response.data.trans);
|
||||
this.lngLoaded = true;
|
||||
})
|
||||
.catch(error => {
|
||||
console.log(error)
|
||||
})
|
||||
.finally(() => {
|
||||
this.isLoading = false;
|
||||
})
|
||||
},
|
||||
gotoPrev(id) {
|
||||
this.detailClick(id);
|
||||
},
|
||||
gotoNext(id) {
|
||||
this.detailClick(id);
|
||||
}
|
||||
},
|
||||
// computed: {
|
||||
// bgColor: function() {
|
||||
// return this.$store.state.settings.divBGColor ? 'background: #' + this.$store.state.settings.divBGColor : '';
|
||||
// },
|
||||
// },
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import "https://motorradhandel.ch/extern/css/custom.css";
|
||||
</style>
|
||||
@@ -0,0 +1,108 @@
|
||||
<template>
|
||||
<img
|
||||
:items="items"
|
||||
class="fancy"
|
||||
:src="filename"
|
||||
:width="imgW"
|
||||
:height="imgH"
|
||||
@load="loadImage"
|
||||
@error="onImgError()"
|
||||
@click="$emit('imageClick', $event)"
|
||||
>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PathMixin from '../mixins/PathMixin.js'
|
||||
import defaultImageMixin from '../mixins/defaultImageMixin.js'
|
||||
// import VuePictureSwipe from './vue3-picture-swipe/VuePictureSwipe.vue';
|
||||
// import VuePictureSwipe from './vue3-picture-swipe/main.js';
|
||||
|
||||
export default {
|
||||
mixins: [PathMixin, defaultImageMixin],
|
||||
components: {
|
||||
// 'vue-picture-swipe': VuePictureSwipe,
|
||||
},
|
||||
props: {
|
||||
imgOffset: {
|
||||
type: Number,
|
||||
required: true
|
||||
},
|
||||
container: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
prefix: {
|
||||
type: String,
|
||||
required: true,
|
||||
default: '',
|
||||
}
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
imgWidth: 1,
|
||||
imgHeight: 1,
|
||||
imgError: false,
|
||||
// items: [{
|
||||
// src: 'http://via.placeholder.com/600x400',
|
||||
// thumbnail: 'http://via.placeholder.com/64x64',
|
||||
// w: 600,
|
||||
// h: 400,
|
||||
// alt: 'some numbers on a grey background' // optional alt attribute for thumbnail image
|
||||
// },
|
||||
// {
|
||||
// src: 'http://via.placeholder.com/1200x900',
|
||||
// thumbnail: 'http://via.placeholder.com/64x64',
|
||||
// w: 1200,
|
||||
// h: 900,
|
||||
// htmlAfterThumbnail: '<span class="photos-date">29.12.2021</span>' // optional, insert your html after tag <a> if you need it
|
||||
// }],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onImgError() {
|
||||
this.imgError = true;
|
||||
},
|
||||
loadImage(img) {
|
||||
// img.target.dataset.origw = img.srcElement.naturalWidth;
|
||||
// img.target.dataset.origh = img.srcElement.naturalHeight;
|
||||
img.target.dataset.fullp = this.adCDNPath(this.$store.state.details.ident_nr_kunde, this.$store.state.details.ident_nr_standort) + 'J' + this.$store.state.details.pictures[this.imgOffset]['datei'];
|
||||
var c = this.$parent.$refs[this.container];
|
||||
if(Array.isArray(c)) {
|
||||
c = c[0];
|
||||
}
|
||||
var maxH = c.clientHeight;
|
||||
var maxW = c.clientWidth;
|
||||
var imgW = img.srcElement.naturalWidth;
|
||||
var imgH = img.srcElement.naturalHeight;
|
||||
var t1 = maxW / imgW;
|
||||
var t2 = maxH / imgH;
|
||||
if(t1 > t2) {
|
||||
this.imgWidth = imgW * t2;
|
||||
this.imgHeight = imgH * t2;
|
||||
}else{
|
||||
this.imgWidth = imgW * t1;
|
||||
this.imgHeight = imgH * t1;
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
computed: {
|
||||
imgW: function() {
|
||||
return this.imgWidth;
|
||||
},
|
||||
imgH: function() {
|
||||
return this.imgHeight;
|
||||
},
|
||||
pSize() {
|
||||
},
|
||||
filename() {
|
||||
if(this.$store.state.details.pictures[this.imgOffset]){
|
||||
return (this.imgError) ? this.getDefaultImage(this.$store.state.details.modell_kategorie) : this.adCDNPath(this.$store.state.details.ident_nr_kunde, this.$store.state.details.ident_nr_standort) + this.prefix + this.$store.state.details.pictures[this.imgOffset]['datei'];
|
||||
}else{
|
||||
return this.getDefaultImage(this.$store.state.details.modell_kategorie);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,588 @@
|
||||
<template>
|
||||
<div class="hub hub-detail" id="detailToPrint" :style="[bckgrColor('divBgColor'), color('fontColor')]">
|
||||
<nav>
|
||||
<ul class="top-links">
|
||||
<li class="list-item">
|
||||
<a @click.prevent="$emit('backTolist')" class="top-link backToListeButton button primary" style="cursor: pointer;" :style="[bckgrColor('buttonColor'), color('buttonTextColor')]">
|
||||
<span class="padding10">{{ $t('front_extern.detail_zurueck') }}</span>
|
||||
</a>
|
||||
</li>
|
||||
<li v-if="false" class="list-item leftMarg10"><a href="" class="top-link advancedSearchButton button primary" style="cursor: pointer;" :style="[bckgrColor('buttonColor'), color('buttonTextColor')]"><span class="padding10"> Suche anpassen</span></a></li>
|
||||
<li v-if="getNext" @click.prevent="$emit('gotoNext', getNext)" class="list-item next">
|
||||
<a href="" class="top-link nextInserateButton button primary" data-id="2693330" style="cursor: pointer;" :style="[bckgrColor('buttonColor'), color('buttonTextColor')]">
|
||||
<span class="padding10">{{ $t('front_extern.detail_naechstes') }} ></span>
|
||||
</a>
|
||||
</li>
|
||||
<li v-if="getPrev" @click.prevent="$emit('gotoPrev', getPrev)" class="list-item prev">
|
||||
<a href="" class="top-link prevInserateButton button primary" data-id="" style="cursor: pointer;" :style="[bckgrColor('buttonColor'), color('buttonTextColor')]">
|
||||
<span class="padding10">< {{ $t('front_extern.detail_vorher') }}</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<header>
|
||||
<div class="heading-container">
|
||||
<p v-if="false" class="printHeader"><b>{{ $store.state.details.standort.firma_name }}</b> {{ $store.state.details.standort.kunde_strasse }} {{ $store.state.details.standort.kunde_plz }} {{ $store.state.details.standort.kunde_ort }} Telefon: {{ $store.state.details.standort.kunde_telefon }} Fax: {{ $store.state.details.standort.kunde_fax }} </p>
|
||||
<hr style="margin-top: -10px;">
|
||||
<p></p>
|
||||
<h1 v-html="fahrzeug + ' - ' + $store.state.details.rel_category['bezeichnung_' + $store.state.settings.lang]" class="title-main" :style="color('titleColor')"></h1>
|
||||
<div v-if="false" class="button-container printPdfContainer exportShowNormal">
|
||||
<a href="javascript:;" class="printDetail" style="color: #000000!important;">
|
||||
<span class="caption" styl="">Drucken | </span>
|
||||
</a>
|
||||
<a href="javascript:;" class="downloadPdfDetail" style="color: #000000!important;">
|
||||
<span class="caption">Download PDF</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="columns" id="divToPrint">
|
||||
<div class="left">
|
||||
<div data-gallery-closetext="Schliessen" class="my-gallery gallery">
|
||||
<div ref="defaultDContainer" class="image-large-container" style="text-align: center;">
|
||||
<a href="#" @click.prevent="picClicked(0)" rel="group1">
|
||||
<detail-image
|
||||
:details="details"
|
||||
:imgOffset="0"
|
||||
:prefix="''"
|
||||
:container="'defaultDContainer'"
|
||||
@imageClick="imageClick($event)"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="object-list-container">
|
||||
<ul v-if="$store.state.details.pictures.length > 1" class="object-list thumb-list closed">
|
||||
<template v-for="(pic, ndx) in $store.state.details.pictures">
|
||||
<li v-if="ndx>0" v-bind:key="ndx" ref="dContainer" style="text-align: center;" class="imageGroup object-list-item">
|
||||
<a href="#" @click.prevent="picClicked(ndx)" class="object-thumb" rel="group1">
|
||||
<detail-image
|
||||
:details="details"
|
||||
:imgOffset="ndx"
|
||||
:prefix="''"
|
||||
:container="'dContainer'"
|
||||
@imageClick="imageClick($event)"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
</div>
|
||||
<photo-swipe-component
|
||||
:options="options"
|
||||
@open="$emit('open')"
|
||||
@close="$emit('close')"
|
||||
/>
|
||||
|
||||
</div>
|
||||
<section>
|
||||
<div class="vehicle-data greyBgAndBorderDetail">
|
||||
<h2 class="title-secondary" :style="color('titleColor')">{{ $t('front_extern.detail_titel') }}</h2>
|
||||
<table :style="color('fontColor')">
|
||||
<tbody>
|
||||
<tr v-if="$store.state.details.ident_nr_intern">
|
||||
<th class="data-label">{{ $t('front_extern.inseratNr') }}</th>
|
||||
<td class="data">{{ $store.state.details.ident_nr_intern}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="data-label">{{ $t('front_extern.detail_kategorie') }}</th>
|
||||
<td class="data">{{ $store.state.details.rel_category['bezeichnung_' + $store.state.settings.lang]}}</td>
|
||||
</tr>
|
||||
<tr v-if="$store.state.details.fzg_1iv">
|
||||
<th class="data-label">{{ $t('front_extern.detail_invsetz') }}</th>
|
||||
<td class="data">{{formatDate($store.state.details.fzg_1iv)}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="data-label">{{ $t('front_extern.detail_modell') }}</th>
|
||||
<td class="data">{{ fahrzeug }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="data-label">{{ $t('front_extern.detail_fzg') }}</th>
|
||||
<td class="data">{{ $store.state.details.rel_art['bezeichnung_' + $store.state.settings.lang] }}</td>
|
||||
</tr>
|
||||
<tr v-if="$store.state.details.fzg_farbe">
|
||||
<th class="data-label">{{ $t('front_extern.detail_farbe') }}</th>
|
||||
<td class="data">{{ $store.state.details.rel_farbe['bezeichnung_' + $store.state.settings.lang] }}</td>
|
||||
</tr>
|
||||
<tr v-if="$store.state.details.fzg_rubrik_vermietung == 0">
|
||||
<th class="data-label">{{ $t('front_extern.detail_km') }}</th>
|
||||
<td class="data">{{formatNum($store.state.details.fzg_km)}} km</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="data-label">{{ $t('front_extern.detail_hubraum') }}</th>
|
||||
<td class="data">{{ $store.state.details.modell_ccm!=0 ? formatNum($store.state.details.modell_ccm) : '-'}} ccm</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="data-label">{{ $t('front_extern.detail_zustand') }}</th>
|
||||
<td class="data">{{ $store.state.details.zustand }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="data-label">{{ $t('front_extern.detail_leistung') }}</th>
|
||||
<td class="data">
|
||||
{{$store.state.details.fzg_leistung ? formatNum($store.state.details.fzg_leistung, 1) : '-'}} kW /
|
||||
{{$store.state.details.fzg_leistung ? formatNum($store.state.details.fzg_leistung*1.35962) : '-'}} PS
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="data-label" v-if="$store.state.details.garantie_typ == 3">
|
||||
{{ $t('front_extern.detail_warranty_manufacturer') }}
|
||||
</th>
|
||||
<th class="data-label" v-else>
|
||||
{{ $t('front_extern.detail_warranty') }}
|
||||
</th>
|
||||
<td v-html="getWarranty()" class="data"></td>
|
||||
</tr>
|
||||
<template v-if="$store.state.details.fzg_rubrik_vermietung == 0 || ($store.state.details.fzg_rubrik_vermietung == 1 && $store.state.details.inserat_status_vermietet_anzeigen == 1)" class="price beschNormal">
|
||||
<template v-if="$store.state.details.actualprice != $store.state.details.fzg_preis">
|
||||
<tr>
|
||||
<th class="data-label"><b>{{ $t('front_extern.detail_preis_special') }}</b></th>
|
||||
<td class="data"><b>{{formatPrice($store.state.details.actualprice, 0)}}</b></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="data-label">{{ $t('front_extern.detail_preis_normal') }}</th>
|
||||
<td class="data"><span class="strikethrough">{{formatPrice($store.state.details.fzg_preis, 0)}}</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="data-label">{{ $t('front_extern.detail_aktion_bis') }}</th>
|
||||
<td class="data">{{formatDate($store.state.details.fzg_preis_aktion_bis)}}</td>
|
||||
</tr>
|
||||
</template>
|
||||
<template v-else>
|
||||
<tr>
|
||||
<th class="data-label">{{ $t('front_extern.detail_preis') }}</th>
|
||||
<td v-if="$store.state.details.actualprice == 0" class="data">{{ $t('front_extern.price_on_request') }}</td>
|
||||
<td v-else class="data">{{formatPrice($store.state.details.actualprice, 0)}}</td>
|
||||
</tr>
|
||||
</template>
|
||||
</template>
|
||||
<tr v-if="$store.state.details.inserat_status_verfuegbar_ab">
|
||||
<th class="data-label">
|
||||
{{ $t('front_extern.detail_verfuegbar_ab') }}
|
||||
</th>
|
||||
<td class="data">{{ formatDate($store.state.details.inserat_status_verfuegbar_ab) }}</td>
|
||||
</tr>
|
||||
<template v-if="$store.state.details.fzg_text && $store.state.details.fzg_text.length > 0">
|
||||
<tr class="beschNormal">
|
||||
<th class="data-label "><b>{{ $t('front_extern.detail_bemerkung') }}</b></th>
|
||||
<td class="data"></td>
|
||||
</tr>
|
||||
<tr class="beschNormal">
|
||||
<td v-html="$store.state.details.fzg_text" colspan="2"></td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div v-if="$store.state.details.fzg_rubrik_vermietung == 1" :style="color('fontColor')" class="vehicle-data greyBgAndBorderDetail">
|
||||
<h2 class="title-secondary" :style="color('titleColor')">{{ $t('front_extern.rental_titel') }}</h2>
|
||||
<table style="border-collapse: collapse;">
|
||||
<template v-if="$store.state.details.mietkonditionen.miete_tag_1 > 0">
|
||||
<tr :style="[bckgrColor('buttonColor'), color('buttonTextColor')]">
|
||||
<th colspan="2" class="data-label">{{ $t('front_extern.detail_miet_tage1') }}</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="data-label">{{ $t('front_extern.detail_miet_price') }}</th>
|
||||
<td class="data">{{formatPrice($store.state.details.mietkonditionen.miete_tag_1, 0)}}</td>
|
||||
</tr>
|
||||
</template>
|
||||
<tr :style="[bckgrColor('buttonColor'), color('buttonTextColor')]">
|
||||
<th colspan="2" class="data-label">{{ $t('front_extern.detail_miet_pro_tag_title') }}</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="data-label">{{ $t('front_extern.detail_miet_price') }}</th>
|
||||
<td class="data">{{formatPrice($store.state.details.mietkonditionen.miete_tag, 0)}} {{ $t('front_extern.detail_miet_pro_tag') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="data-label">{{ $t('front_extern.detail_miet_free_km') }}</th>
|
||||
<td class="data">{{formatNum($store.state.details.mietkonditionen.km_tag, 0)}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="data-label">{{ $t('front_extern.detail_miet_add_km') }}</th>
|
||||
<td class="data">{{formatPrice($store.state.details.mietkonditionen.km_zuschlag_tag, 2)}} {{ $t('front_extern.detail_miet_pro_km') }}</td>
|
||||
</tr>
|
||||
<tr :style="[bckgrColor('buttonColor'), color('buttonTextColor')]">
|
||||
<th colspan="2" class="data-label">{{ $t('front_extern.detail_miet_pro_weekend_title') }}</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="data-label">{{ $t('front_extern.detail_miet_price') }}</th>
|
||||
<td class="data">{{formatPrice($store.state.details.mietkonditionen.miete_we, 0)}} {{ $t('front_extern.detail_miet_pro_weekend') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="data-label">{{ $t('front_extern.detail_miet_free_km') }}</th>
|
||||
<td class="data">{{formatNum($store.state.details.mietkonditionen.km_we, 0)}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="data-label">{{ $t('front_extern.detail_miet_add_km') }}</th>
|
||||
<td class="data">{{formatPrice($store.state.details.mietkonditionen.km_zuschlag_we, 2)}} {{ $t('front_extern.detail_miet_pro_km') }}</td>
|
||||
</tr>
|
||||
<tr :style="[bckgrColor('buttonColor'), color('buttonTextColor')]">
|
||||
<th colspan="2" class="data-label">{{ $t('front_extern.detail_miet_pro_woche_title') }}</th>
|
||||
</tr>
|
||||
<template v-if="$store.state.details.mietkonditionen.miete_woche > 0">
|
||||
<tr>
|
||||
<th class="data-label">{{ $t('front_extern.detail_miet_price') }}</th>
|
||||
<td class="data">{{formatPrice($store.state.details.mietkonditionen.miete_woche, 0)}} {{ $t('front_extern.detail_miet_pro_woche') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="data-label">{{ $t('front_extern.detail_miet_free_km') }}</th>
|
||||
<td class="data">{{formatNum($store.state.details.mietkonditionen.km_woche, 0)}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="data-label">{{ $t('front_extern.detail_miet_add_km') }}</th>
|
||||
<td class="data">{{formatPrice($store.state.details.mietkonditionen.km_zuschlag_woche, 2)}} {{ $t('front_extern.detail_miet_pro_km') }}</td>
|
||||
</tr>
|
||||
</template>
|
||||
<tr>
|
||||
<th class="data-label">{{ $t('front_extern.detail_miet_kaution') }}</th>
|
||||
<td class="data">{{formatPrice($store.state.details.mietkonditionen.kaution, 0)}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="data-label">{{ $t('front_extern.detail_miet_selbst') }}</th>
|
||||
<td class="data">{{formatPrice($store.state.details.mietkonditionen.selbsbehalt, 0)}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="data-label">{{ $t('front_extern.detail_miet_versicherung') }}</th>
|
||||
<td class="data">{{ $store.state.details.mietkonditionen.versicherung['bezeichnung_' + $store.state.settings.lang] }}</td>
|
||||
</tr>
|
||||
<template v-if="$store.state.details.mietkonditionen.bemerkung && $store.state.details.mietkonditionen.bemerkung.length > 0">
|
||||
<tr class="beschNormal">
|
||||
<th class="data-label "><b>{{ $t('front_extern.detail_bemerkung') }}</b></th>
|
||||
<td class="data"></td>
|
||||
</tr>
|
||||
<tr class="beschNormal">
|
||||
<td v-html="$store.state.details.mietkonditionen.bemerkung" colspan="2"></td>
|
||||
</tr>
|
||||
</template>
|
||||
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<div class="beschPrint">
|
||||
<h2 class="title-secondary">{{ $t('front_extern.detail_bemerkung') }}</h2>
|
||||
<p v-html="$store.state.details.fzg_text"></p>
|
||||
</div>
|
||||
<div class="beschPreis">{{ $t('front_extern.detail_preis') }} {{formatPrice($store.state.details.actualprice, 0)}} </div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="padding">
|
||||
<div class="chapters">
|
||||
<section>
|
||||
<div class="chapter dealer">
|
||||
<div class="chapter-content greyBgAndBorder">
|
||||
<div style="width: 220px; float: left;">
|
||||
<h2 class="title-secondary" :style="color('titleColor')">{{ $t('front_extern.detail_anbieter') }}</h2>
|
||||
<div class="vcard">
|
||||
<span v-html="$store.state.details.standort.firma_name" class="org fn"></span>
|
||||
<span class="adr">
|
||||
<span class="street-address">{{ $store.state.details.standort.kunde_strasse }}</span>
|
||||
<span class="postal-code">{{ $store.state.details.standort.kunde_plz }}</span>
|
||||
<span class="locality">{{ $store.state.details.standort.kunde_ort }}</span>
|
||||
</span>
|
||||
</div>
|
||||
<a :href="googleMapsLink" target="_blank" class="geo" style="color: #000000;!important">{{ $t('front_extern.detail_googlemap')}} </a>
|
||||
</div>
|
||||
<div v-if="standortLogo" style="float: right; padding: 0px; padding-top: 25px;"><img :src="standortLogo" :alt="$store.state.details.standort.firma_name + ' ' + $store.state.details.standort.kunde_ort" style="max-width: 200px;"></div>
|
||||
<address class="phone-container">
|
||||
<table style="margin-left: -2px;">
|
||||
<tbody>
|
||||
<tr v-if="$store.state.details.standort.kunde_telefon || $store.state.details.standort.kunde_mobile" class="primary">
|
||||
<th class="header">{{ $t('front_extern.details_telefon') }}</th>
|
||||
<td class="data">
|
||||
<span class="phone">
|
||||
<a :style="color('fontColor')" id="lnkPhoneCall_1" :href="'tel:' + ($store.state.details.standort.kunde_telefon ? $store.state.details.standort.kunde_telefon.replace(/ /g, '') : $store.state.details.standort.kunde_mobile.replace(/ /g, ''))" class="tel call-on-me">{{ $store.state.details.standort.kunde_telefon ? $store.state.details.standort.kunde_telefon : $store.state.details.standort.kunde_mobile }}</a>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="$store.state.details.standort.kunde_telefon">
|
||||
<th class="header">{{ $t('front_extern.details_fax') }}</th>
|
||||
<td class="data"><span class="phone"><span class="tel">{{ $store.state.details.standort.kunde_telefon }}</span></span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</address>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<div class="kontaktDiv">
|
||||
<div class="DetailContact">
|
||||
<div id="kontaktArea">
|
||||
<form v-if="!contactSent" id="kontaktdaten" name="kontaktdaten" method="post" onsubmit="return false;" novalidate="novalidate">
|
||||
<div class="kontaktDiv1">
|
||||
<span class="DCTitle" :style="color('titleColor')">{{ $t('front_extern.form_kontakt') }}</span>
|
||||
<label class="inpLabel">{{ $t('front_extern.form_anrede') }}</label>
|
||||
<input id="anrede0" name="anrede" type="radio" value="1" v-model="form.anrede">
|
||||
<label for="anrede0" class="labelFrau">{{ $t('front_extern.form_frau') }}</label>
|
||||
<input id="anrede1" name="anrede" type="radio" value="2" v-model="form.anrede">
|
||||
<label for="anrede1">{{ $t('front_extern.form_herr') }}</label>
|
||||
<input id="anrede2" name="anrede" type="radio" value="3" v-model="form.anrede">
|
||||
<label for="anrede2">{{ $t('front_extern.form_firma') }}</label>
|
||||
<label ref="vorname" class="inpLabel">{{ $t('front_extern.form_vorname') }} * </label>
|
||||
<input id="vorname" name="vorname" type="text" v-model="form.vorname" class="DetailInputText" :style="errorClass('vorname')" title="">
|
||||
<label ref="name" class="inpLabel">{{ $t('front_extern.form_name') }} *</label>
|
||||
<input id="name" name="name" type="text" v-model="form.name" class="DetailInputText" :style="errorClass('name')" title="">
|
||||
<label ref="telefon" class="inpLabel">{{ $t('front_extern.form_telefon') }} *</label>
|
||||
<input id="telefon" name="telefon" type="text" v-model="form.telefon" class="DetailInputText" :style="errorClass('telefon')" title="">
|
||||
<label ref="email" class="inpLabel">{{ $t('front_extern.form_email') }} *</label>
|
||||
<input id="email" name="email" type="text" v-model="form.email" class="DetailInputText" :style="errorClass('email')" title="">
|
||||
<div class="contactOptions">
|
||||
<input id="chkCopy" type="checkbox" value="1" v-model="form.sendCopy">
|
||||
<label for="chkCopy">{{ $t('front_extern.form_kopie') }}</label>
|
||||
</div>
|
||||
<div class="dieMitInfo">{{ $t('front_extern.form_required') }}<br> </div>
|
||||
<span class="DCTitle" style="color: #DE182E!important;"></span>
|
||||
<label class="inpLabel" style="width:200px;">{{ $t('front_extern.form_interested_in') }}</label>
|
||||
<div class="contactRightOptions">
|
||||
<input id="chkBesichtigung" type="checkbox" v-model="form.chkBesichtigung">
|
||||
<label for="chkBesichtigung">{{ $t('front_extern.form_interested_in_visit') }}</label>
|
||||
<input id="chkProbefahrt" type="checkbox" v-model="form.chkProbefahrt">
|
||||
<label for="chkProbefahrt">{{ $t('front_extern.form_interested_in_testdrive') }}</label>
|
||||
</div>
|
||||
<label class="inpLabel" style0="width:200px;">{{ $t('front_extern.form_bemerkung') }}</label>
|
||||
<textarea id="bemerkungen" v-model="form.bemerkungen" name="bemerkungen" class="contactTextarea"></textarea>
|
||||
<div class="smsSumbitPart">
|
||||
<input type="submit" @click.prevent="sendContact" class="button primary submit advSearchBtn submitKontaktForm" :value="$t('front_extern.form_absenden')" style="cursor: pointer; height: 32px;" :style="[bckgrColor('buttonColor'), color('buttonTextColor')]">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<div v-else>
|
||||
<span v-html="$t('front_extern.contact_sent')" class="DCTitle" :style="color('titleColor')"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
|
||||
import DetailImage from './DetailImage.vue'
|
||||
|
||||
import PathMixin from '../mixins/PathMixin.js'
|
||||
import Numberformatting from '../mixins/Numberformatting.js'
|
||||
import defaultImageMixin from '../mixins/defaultImageMixin.js'
|
||||
// import PhotoSwipeLightbox from 'photoswipe';
|
||||
// import 'photoswipe/style.css';
|
||||
import PhotoSwipeComponent from './vue3-picture-swipe/PhotoSwipeComponent.vue';
|
||||
|
||||
export default {
|
||||
// props: ['list', 'details', '$store.state.settings.lang', 'settings', 'url'],
|
||||
props: ['url'],
|
||||
mixins: [PathMixin, Numberformatting, defaultImageMixin],
|
||||
components: {
|
||||
'detail-image': DetailImage,
|
||||
PhotoSwipeComponent,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
contactSent: false,
|
||||
form: {
|
||||
rowID: 0,
|
||||
adID: 0,
|
||||
anrede: 1,
|
||||
vorname: '',
|
||||
name: '',
|
||||
telefon: '',
|
||||
email: '',
|
||||
sendCopy: false,
|
||||
chkBesichtigung: false,
|
||||
chkProbefahrt: false,
|
||||
bemerkungen: '',
|
||||
},
|
||||
formErrors: {
|
||||
name: false,
|
||||
vorname: false,
|
||||
email: false,
|
||||
teleforn: false,
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
imageClick: function(e) {
|
||||
// console.log(e);
|
||||
// this.$store.state.details.pictures
|
||||
},
|
||||
picClicked: function() {
|
||||
},
|
||||
defaultPic: function() {
|
||||
if(!this.$store.state.details.pictures) {
|
||||
return this.getDefaultImage();
|
||||
// return '/front/v30/images/J56420132201.jpg';
|
||||
}
|
||||
if(this.$store.state.details.pictures.length == 0) {
|
||||
return this.getDefaultImage();
|
||||
// return '/front/v30/images/J56420132201.jpg';
|
||||
}
|
||||
return this.adCDNPath(this.$store.state.details.ident_nr_kunde, this.$store.state.details.ident_nr_standort) + this.$store.state.details.pictures[0].datei;
|
||||
},
|
||||
getPic: function(pic) {
|
||||
return this.adCDNPath(this.$store.state.details.ident_nr_kunde, this.$store.state.details.ident_nr_standort) + pic;
|
||||
},
|
||||
getWarranty: function() {
|
||||
var ret = '';
|
||||
switch(this.$store.state.details.garantie_typ){
|
||||
case 1:
|
||||
return '-';
|
||||
break;
|
||||
case 2:
|
||||
if(this.$store.state.details.garantie_monate) {
|
||||
ret += this.$store.state.details.garantie_monate + ' ' + this.$t('front_extern.detail_months');
|
||||
}
|
||||
if(this.$store.state.details.garantie_km && this.$store.state.details.garantie_km * 1 != 0 && !isNaN(this.$store.state.details.garantie_km)) {
|
||||
if(ret != '') {
|
||||
ret += ' ' + this.$t('front_extern.detail_or') + '<br>';
|
||||
}
|
||||
ret += this.formatNum(this.$store.state.details.garantie_km) + ' ' + this.$t('front_extern.detail_kilometer');
|
||||
}
|
||||
break;
|
||||
case 3:
|
||||
if(this.$store.state.details.garantie_datum) {
|
||||
ret += this.$t('front_extern.detail_until') + ' ' + this.formatDate(this.$store.state.details.garantie_datum);
|
||||
}
|
||||
if(this.$store.state.details.garantie_km && this.$store.state.details.garantie_km * 1 != 0 && !isNaN(this.$store.state.details.garantie_km)) {
|
||||
if(ret != '') {
|
||||
ret += ' ' + this.$t('front_extern.detail_or') + '<br>';
|
||||
}
|
||||
ret += this.$t('front_extern.detail_until') + ' ' + this.formatNum(this.$store.state.details.garantie_km) + ' ' + this.$t('front_extern.detail_kilometer');
|
||||
}
|
||||
break;
|
||||
case 4:
|
||||
if(this.$store.state.details.garantie_datum) {
|
||||
ret += this.$t('front_extern.detail_until') + ' ' + this.formatDate(this.$store.state.details.garantie_datum);
|
||||
}
|
||||
if(this.$store.state.details.garantie_km && this.$store.state.details.garantie_km * 1 != 0 && !isNaN(this.$store.state.details.garantie_km)) {
|
||||
if(ret != '') {
|
||||
ret += ' ' + '<br>' + this.$t('front_extern.detail_or') + ' ';
|
||||
}
|
||||
ret += this.$t('front_extern.detail_until') + " 3'000 " + this.$t('front_extern.detail_kilometer');
|
||||
}
|
||||
if(this.$store.state.details.garantie_vers_anbieter && this.$store.state.details.garantie_vers_anbieter != 1) {
|
||||
if(ret != '') {
|
||||
ret += '<br/>';
|
||||
}
|
||||
ret += this.$t('front_extern.detail_provider') + ': ' + this.$store.state.details.garantieAnbieter;
|
||||
}
|
||||
if(this.$store.state.details.garantie_vers_kosten && this.$store.state.details.garantie_vers_kosten > 0) {
|
||||
if(ret != '') {
|
||||
ret += '<br>';
|
||||
}
|
||||
ret += this.$t('front_extern.detail_insurance_cost') + ': ' + this.formatPrice(this.$store.state.details.garantie_vers_kosten, 0);
|
||||
}
|
||||
break;
|
||||
}
|
||||
return ret;
|
||||
},
|
||||
errorClass(name) {
|
||||
if(this.formErrors[name]) {
|
||||
return "border: 2px solid red;"
|
||||
}
|
||||
return '';
|
||||
},
|
||||
resetFormErrors() {
|
||||
this.formErrors = {
|
||||
name: false,
|
||||
vorname: false,
|
||||
email: false,
|
||||
teleforn: false,
|
||||
}
|
||||
},
|
||||
sendContact() {
|
||||
this.isLoading = true;
|
||||
this.form.rowID = this.$store.state.settings.id;
|
||||
this.form.adID = this.$store.state.details.id;
|
||||
axios
|
||||
.get(this.url + "/api/ext/sendContact", {
|
||||
params: this.form
|
||||
})
|
||||
.then(response => {
|
||||
this.resetFormErrors();
|
||||
this.contactSent = true;
|
||||
})
|
||||
.catch(error => {
|
||||
this.resetFormErrors();
|
||||
if(error.response.status == 422){
|
||||
var errList = error.response.data.errors;
|
||||
var listKeys = Object.keys(errList);
|
||||
if(listKeys.length > 0) {
|
||||
listKeys.forEach(element => {
|
||||
this.formErrors[element] = true;
|
||||
});
|
||||
}
|
||||
}else{
|
||||
console.log('Error: ', error.response.data)
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
this.isLoading = false;
|
||||
})
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
axiosParams() {
|
||||
const params = new URLSearchParams();
|
||||
params.append('param1', 'value1');
|
||||
params.append('param2', 'value2');
|
||||
return params;
|
||||
},
|
||||
getPrev: function() {
|
||||
var id = this.$store.state.details.id;
|
||||
var ndx = this.$store.state.list.findIndex(i => i.id === id);
|
||||
if(ndx > 0) {
|
||||
return this.$store.state.list[ndx-1].id;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
getNext: function() {
|
||||
var id = this.$store.state.details.id;
|
||||
var ndx = this.$store.state.list.findIndex(i => i.id === id);
|
||||
if(ndx < this.$store.state.list.length-1) {
|
||||
return this.$store.state.list[ndx+1].id;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
fahrzeug() {
|
||||
if(this.$store.state.details.modell_zusatz && this.$store.state.details.modell_zusatz.length > 0) {
|
||||
return this.$store.state.details.rel_marke.Markenbezeichnung + ' ' + this.$store.state.details.rel_modelle.Modellbezeichnung + ' ' + this.$store.state.details.modell_zusatz;
|
||||
}else{
|
||||
return this.$store.state.details.rel_marke.Markenbezeichnung + ' ' + this.$store.state.details.rel_modelle.Modellbezeichnung;
|
||||
}
|
||||
},
|
||||
googleMapsLink: function() {
|
||||
return '//maps.google.ch/maps?q=' + this.$store.state.details.standort.kunde_strasse + ',' + this.$store.state.details.standort.kunde_plz + '+' + this.$store.state.details.standort.kunde_ort;
|
||||
},
|
||||
standortLogo: function() {
|
||||
var logo = this.$store.state.details.standort.images.find(b => b.medientyp_id == 1);
|
||||
if(logo) {
|
||||
return this.clientCDNPath(this.$store.state.details.ident_nr_kunde, this.$store.state.details.ident_nr_standort) + '/logos/' + logo.media;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.strikethrough {
|
||||
position: relative;
|
||||
}
|
||||
.strikethrough:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
left: 0;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
border-top: 1px solid;
|
||||
border-color: inherit;
|
||||
|
||||
-webkit-transform:rotate(-5deg);
|
||||
-moz-transform:rotate(-5deg);
|
||||
-ms-transform:rotate(-5deg);
|
||||
-o-transform:rotate(-5deg);
|
||||
transform:rotate(-5deg);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,203 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="hub hub-search" id="basicSearchId">
|
||||
<div class="heading-container" style="line-height: 70px; margin-bottom: 0px;">
|
||||
<div class="navButtonsContainer">
|
||||
<h1 class="title-main" :style="fontColor">
|
||||
<span :style="color('titleColor')" class="counter-container">
|
||||
<span class="count">{{ $store.state.list ? $store.state.pagination.numberOfReslults : 0 }}</span> {{ $t('front_extern.vehicles')}}
|
||||
</span>
|
||||
</h1>
|
||||
<template v-if="false">
|
||||
<span class="divider advanced-mobile"> | </span><span class="customize-search-container advanced-mobile"><a href="javascript:;" class="top-link customize-search advancedSearchButton"><span style="color: #000000!important">Erweiterte Suche</span></a></span><span class="divider advanced-mobile"> | </span><span class="customize-search-container"><a href="javascript:;" class="top-link customize-search resetButton"><span style="color: #000000!important">Zurücksetzen</span></a></span>
|
||||
</template>
|
||||
</div>
|
||||
<div v-if="false" class="printButtonsContainer"><a href="#" class="printLayerButton" data-modal-id="modalPrint" style="color: #000000!important">Drucken</a><span class="divider"> | </span><a href="#" class="pdfLayerButton" data-modal-id="modalPdf" style="color: #000000!important">Download PDF</a></div>
|
||||
</div>
|
||||
<div>
|
||||
<Pagination
|
||||
v-if="$store.state.pagination.numberOfReslults"
|
||||
:total-pages="Math.ceil($store.state.pagination.numberOfReslults/$store.state.settings.perPage)"
|
||||
:per-page="$store.state.settings.perPage"
|
||||
:current-page="$store.state.pagination.page"
|
||||
@pagechanged="$emit('reloadData')"
|
||||
|
||||
/>
|
||||
</div>
|
||||
<form v-if="true" style="padding: 10px;" id="hcifilterform" action="" method="GET" :style="[bckgrColor('searchBgColor')]">
|
||||
<div id="expander">
|
||||
<div class="expander-content">
|
||||
<div class="filter-form">
|
||||
<div class="layout--group">
|
||||
<div class="layout--four-fifth full-w-mobile">
|
||||
<div class="layout--group">
|
||||
<div class="layout--one-fourth">
|
||||
<div class="part-line connected">
|
||||
<label for="Make" class="line-label">
|
||||
<span class="label-text" :style="color('titleColor')">{{ $t('front_extern.label_marke') }}</span>
|
||||
</label>
|
||||
<div class="ghost-select-container">
|
||||
<div class="ghost-select">
|
||||
<brand-selector
|
||||
@brandChanged="$emit('brandChanged')"
|
||||
/>
|
||||
</div>
|
||||
<div class="connector"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout--one-fourth">
|
||||
<div class="part-line">
|
||||
<label for="Model" class="line-label">
|
||||
<span class="label-text" :style="color('titleColor')">{{ $t('front_extern.label_modell') }}</span>
|
||||
</label>
|
||||
<div class="ghost-select-container" id="divModel">
|
||||
<div class="ghost-select">
|
||||
<model-selector
|
||||
@reloadData="$emit('reloadData')"
|
||||
/>
|
||||
</div>
|
||||
<div class="connector"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout--one-fourth">
|
||||
<div class="part-line">
|
||||
<label for="PriceTo" class="line-label">
|
||||
<span class="label-text" :style="color('titleColor')">{{ $t('front_extern.label_price') }} <span class="label-hint">{{ $t('front_extern.label_to') }}</span></span>
|
||||
</label>
|
||||
<div class="ghost-select-container">
|
||||
<div class="ghost-select">
|
||||
<price-selector
|
||||
@reloadData="$emit('reloadData')"
|
||||
/>
|
||||
</div>
|
||||
<div class="connector"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout--one-fourth">
|
||||
<div class="part-line">
|
||||
<label for="KmTo" class="line-label">
|
||||
<span class="label-text" :style="color('titleColor')">{{ $t('front_extern.label_km') }} <span class="label-hint">{{ $t('front_extern.label_to') }}</span></span>
|
||||
</label>
|
||||
<div class="ghost-select-container">
|
||||
<div class="ghost-select">
|
||||
<km-selector
|
||||
@reloadData="$emit('reloadData')"
|
||||
/>
|
||||
</div>
|
||||
<div class="connector"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="$store.state.locations.length > 1" class="layout--one-fourth">
|
||||
<div class="part-line connected">
|
||||
<label for="KmTo" class="line-label">
|
||||
<span class="label-text" :style="color('titleColor')">{{ $t('front_extern.standort') }}</span>
|
||||
</label>
|
||||
<div class="ghost-select-container">
|
||||
<div class="ghost-select">
|
||||
<standort-selector
|
||||
@reloadData="$emit('reloadData')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout--one-fifth showOnMobile">
|
||||
<div class="part-line">
|
||||
<label for="Sort" class="line-label">
|
||||
<span class="label-text" :style="color('titleColor')">{{ $t('front_extern.label_sortby') }}</span>
|
||||
</label>
|
||||
<div class="ghost-select-container">
|
||||
<div class="ghost-select sort">
|
||||
<sort-selector
|
||||
@reloadData="$emit('reloadData')"
|
||||
/>
|
||||
</div>
|
||||
<div class="connector"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout--group">
|
||||
<div class="layout--one-fourth onMobile">
|
||||
<div class="part-line">
|
||||
<label for="Sort" class="line-label">
|
||||
<span class="label-text" style="color: #d63e2d!important;">Sortieren nach:</span>
|
||||
</label>
|
||||
<div class="ghost-select-container">
|
||||
<div class="ghost-select sort"><span class="label sortLabelText">Bitte auswählen</span>
|
||||
<div class="button" :style="bckgrColor">
|
||||
<span class="icon" style="border-top-color: #FFFFFF!important;"></span>
|
||||
</div>
|
||||
<sort-selector
|
||||
@reloadData="$emit('reloadData')"
|
||||
/>
|
||||
</div>
|
||||
<div class="connector"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="hub hub-filter-list">
|
||||
<div class="resultListContainer" style="margin: 0 auto;"></div>
|
||||
<div id="listContainerToPrint" class="object-list-container search-result-container">
|
||||
<p class="printHeader"><b>Keller Motos AG</b> Industriestrasse 17 5301 Siggenthal-Station Telefon: 056 281 13 13 </p>
|
||||
<product-grid
|
||||
@detailClick="$emit('detailClick', $event)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import ProductGrid from './ProductGrid.vue'
|
||||
|
||||
import SelectorBrand from './SelectorBrand.vue'
|
||||
import SelectorModel from './SelectorModel.vue'
|
||||
import SelectorPrice from './SelectorPrice.vue'
|
||||
import SelectorKm from './SelectorKm.vue'
|
||||
import SelectorSort from './SelectorSort.vue'
|
||||
import SelectorStandort from './SelectorStandort.vue'
|
||||
import Pagination from './Pagination.vue'
|
||||
|
||||
export default {
|
||||
// :data="list"
|
||||
// :lang="settings.lang"
|
||||
// :settings="settings"
|
||||
// props: ['data', 'lang', 'settings'],
|
||||
|
||||
components: {
|
||||
'product-grid': ProductGrid,
|
||||
'brand-selector': SelectorBrand,
|
||||
'model-selector': SelectorModel,
|
||||
'price-selector': SelectorPrice,
|
||||
'km-selector': SelectorKm,
|
||||
'sort-selector': SelectorSort,
|
||||
'standort-selector': SelectorStandort,
|
||||
'Pagination': Pagination,
|
||||
},
|
||||
data() {
|
||||
},
|
||||
computed: {
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.hub.hub-search, #expander {
|
||||
background-color: v-bind('#' + $store.state.settings.divBgColor + "!important") ;
|
||||
}
|
||||
.hub.hub-filter-list{
|
||||
background-color: v-bind('#' + $store.state.settings.divBgColor + "!important") ;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,153 @@
|
||||
<template>
|
||||
<div class="">
|
||||
<div v-if="totalPages == 1" class="pagination" aria-label="Pagination">
|
||||
<a v-on:click.prevent.stop=""><</a>
|
||||
<a href="#"
|
||||
v-on:click.prevent.stop=""
|
||||
v-bind:class="['bg-mhsecondary-blue', 'text-mhprimary-sand', 'font-extrabold']"
|
||||
class="active"
|
||||
>
|
||||
1
|
||||
</a>
|
||||
<a v-on:click.prevent.stop="">></a>
|
||||
</div>
|
||||
<div v-else class="pagination" aria-label="Pagination">
|
||||
<a v-if="currentPage > 1" v-on:click.prevent.stop="goToPage(currentPage - 1)" href="#" class="">
|
||||
<
|
||||
</a>
|
||||
<a v-else class="">
|
||||
<
|
||||
</a>
|
||||
<a v-if="currentPage > 2" v-on:click.prevent.stop="goToPage(1)" href="#">
|
||||
1
|
||||
</a>
|
||||
<a v-if="currentPage > 3" v-on:click.prevent.stop class="">
|
||||
...
|
||||
</a>
|
||||
<a v-for="index in stepsDif+1" :key="index" href="#"
|
||||
v-on:click.prevent.stop="goToPage(index+stepStart-1)"
|
||||
v-bind:class="[currentPage == index+stepStart-1 ? ['active']: ['']]"
|
||||
class=""
|
||||
>
|
||||
{{getPageNum(index)}}
|
||||
</a>
|
||||
<a v-if="totalPages != stepStop" v-on:click.prevent.stop class="">
|
||||
...
|
||||
</a>
|
||||
<a v-if="totalPages != stepStop" v-on:click.prevent.stop="goToPage(totalPages)" href="#" class="">
|
||||
{{totalPages}}
|
||||
</a>
|
||||
<a
|
||||
v-if="currentPage != totalPages"
|
||||
v-on:click.prevent.stop="goToPage(currentPage + 1)"
|
||||
href="#" class="">
|
||||
>
|
||||
</a>
|
||||
<a v-else v-on:click.prevent.stop="" class="">></a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "pagination",
|
||||
props: {
|
||||
maxVisibleButtons: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: 10
|
||||
},
|
||||
totalPages: {
|
||||
type: Number,
|
||||
required: true
|
||||
},
|
||||
perPage: {
|
||||
type: Number,
|
||||
required: true
|
||||
},
|
||||
currentPage: {
|
||||
type: Number,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
stepsDif: 0,
|
||||
stepStart: 1,
|
||||
stepStop: 1,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.calculate();
|
||||
},
|
||||
computed: {
|
||||
},
|
||||
methods: {
|
||||
calculate() {
|
||||
if(this.currentPage > 2) {
|
||||
this.stepStart = this.currentPage-1;
|
||||
}else{
|
||||
this.stepStart = 1;
|
||||
}
|
||||
this.stepStop = this.totalPages
|
||||
if(this.totalPages - this.currentPage > 2) {
|
||||
this.stepStop = this.currentPage + 1;
|
||||
}
|
||||
this.stepsDif = this.stepStop - this.stepStart;
|
||||
},
|
||||
goToPage(page) {
|
||||
if(page >= 1 && page <= this.totalPages) {
|
||||
this.$store.commit('setPage', page);
|
||||
this.$emit("pagechanged", page);
|
||||
this.calculate();
|
||||
}
|
||||
},
|
||||
getPageNum(ndx) {
|
||||
return ndx + this.stepStart - 1;
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
},
|
||||
watch: {
|
||||
'currentPage'(to, from) {
|
||||
this.calculate();
|
||||
},
|
||||
'totalPages'(to, from) {
|
||||
this.calculate();
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.pagination {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.pagination a {
|
||||
color: black;
|
||||
float: left;
|
||||
padding: 8px 16px;
|
||||
text-decoration: none;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.pagination a.active {
|
||||
background-color: v-bind('#' + $store.state.settings.buttonColor);
|
||||
color: v-bind('#' + $store.state.settings.buttonTextColor);;
|
||||
border: 1px solid v-bind('#' + $store.state.settings.buttonColor);
|
||||
}
|
||||
|
||||
.pagination a:hover:not(.active) {background-color: #ddd;}
|
||||
|
||||
.pagination a:first-child {
|
||||
border-top-left-radius: 5px;
|
||||
border-bottom-left-radius: 5px;
|
||||
color: v-bind('#' + $store.state.settings.titleColor);;
|
||||
}
|
||||
|
||||
.pagination a:last-child {
|
||||
border-top-right-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
color: v-bind('#' + $store.state.settings.titleColor);;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<ul class="listContainerJSON object-list search-result-list">
|
||||
<result-item v-for="result in $store.state.list"
|
||||
v-bind:key="result.id"
|
||||
:result="result"
|
||||
@detailClick="$emit('detailClick', $event)"
|
||||
>
|
||||
</result-item>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ResultItem from './ResultItem.vue'
|
||||
// import Loader from './Loader.vue'
|
||||
|
||||
export default {
|
||||
// props: [
|
||||
// "data", "lang", "loading", 'settings'
|
||||
// ],
|
||||
components: {
|
||||
'result-item': ResultItem,
|
||||
// 'loader': Loader,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
computed: {
|
||||
// resultsLoading() {
|
||||
// return this.$store.state.items.resultsLoading;
|
||||
// },
|
||||
},
|
||||
methods: {
|
||||
},
|
||||
watch: {
|
||||
resultsLoading(to, from) {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<img
|
||||
class=""
|
||||
:src="filename"
|
||||
:width="imgW"
|
||||
:height="imgH"
|
||||
@load="loadImage"
|
||||
@error="onImgError()"
|
||||
>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PathMixin from '../mixins/PathMixin.js'
|
||||
import defaultImageMixin from '../mixins/defaultImageMixin.js'
|
||||
|
||||
export default {
|
||||
mixins: [PathMixin, defaultImageMixin],
|
||||
props: ['result'],
|
||||
|
||||
data: function () {
|
||||
return {
|
||||
imgWidth: 1,
|
||||
imgHeight: 1,
|
||||
imgError: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onImgError() {
|
||||
this.imgError = true;
|
||||
},
|
||||
loadImage(img) {
|
||||
if(this.$parent.$refs.rImageContainer) {
|
||||
var maxH = this.$parent.$refs.rImageContainer.clientHeight;
|
||||
var maxW = this.$parent.$refs.rImageContainer.clientWidth;
|
||||
var imgW = img.srcElement.naturalWidth;
|
||||
var imgH = img.srcElement.naturalHeight;
|
||||
var t1 = maxW / imgW;
|
||||
var t2 = maxH / imgH;
|
||||
if(t1 > t2) {
|
||||
this.imgWidth = imgW * t2;
|
||||
this.imgHeight = imgH * t2;
|
||||
}else{
|
||||
this.imgWidth = imgW * t1;
|
||||
this.imgHeight = imgH * t1;
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
computed: {
|
||||
imgW: function() {
|
||||
return this.imgWidth;
|
||||
},
|
||||
imgH: function() {
|
||||
return this.imgHeight;
|
||||
},
|
||||
pSize() {
|
||||
},
|
||||
filename() {
|
||||
if(this.result.media[0]){
|
||||
return (this.imgError) ? this.getDefaultImage(this.result.modell_kategorie) : this.adCDNPath(this.result.ident_nr_kunde, this.result.ident_nr_standort) + 'S' + this.result.media[0]['datei'];
|
||||
}else{
|
||||
return this.getDefaultImage(this.result.modell_kategorie);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,205 @@
|
||||
<template>
|
||||
<a href="#" @click.prevent="$emit('detailClick', result.id)" class="newListeItem ListeField goToDetail">
|
||||
<div :style="[bckgrColor('divBgColor')]">
|
||||
<div ref="rImageContainer" class="ListeCol newListeImageContainer" style="text-align: center;">
|
||||
<result-image
|
||||
data-src=""
|
||||
:alt="result.rel_marke.Markenbezeichnung + ' ' + result.rel_modelle.Modellbezeichnung + ' ' + result.rel_category['bezeichnung_' + $store.state.settings.lang] + ' ' + result.rel_art['bezeichnung_' + $store.state.settings.lang]"
|
||||
:title="result.rel_marke.Markenbezeichnung + ' ' + result.rel_modelle.Modellbezeichnung + ' ' + result.rel_category['bezeichnung_' + $store.state.settings.lang] + ' ' + result.rel_art['bezeichnung_' + $store.state.settings.lang]"
|
||||
:result="result"
|
||||
class=""
|
||||
/>
|
||||
</div>
|
||||
<div class="ListeCol newListeTitleDetailsContainer" :style="color('fontColor')">
|
||||
<div class="newListeTitleDetailsFirst" style="width:500px;">
|
||||
<span v-html="fahrzWoZus" :style="color('titleColor')" class="newListeTitletext mobileTruncate"></span>
|
||||
<br>
|
||||
</div>
|
||||
<div class="newListeTitleDetailsSecond">
|
||||
<template v-if="$store.state.settings.srchParObj.rental">
|
||||
<span v-if="result.mietkonditionen && result.mietkonditionen.miete_tag" class="exportShowMobile">
|
||||
{{ $t("front_extern.ab") }} <b>{{formatPrice(result.mietkonditionen.miete_tag, 0)}} / {{ $t("front_extern.day") }}</b>
|
||||
</span>
|
||||
</template>
|
||||
<span v-else class="exportShowMobile"><b>{{formatPrice(result.fzg_preis, 0)}}</b></span>
|
||||
{{result.rel_art['bezeichnung_' + $store.state.settings.lang]}} <br>
|
||||
<span v-if="result.fzg_art == '1' || result.fzg_art == '2'">
|
||||
<template v-if="result.fzg_rubrik_vermietung == 0">
|
||||
<span v-if="result.fzg_km_distanz == 0">
|
||||
{{ formatNum(result.fzg_km) }} {{ $t("front_extern.km") }}
|
||||
</span>
|
||||
<span v-else>
|
||||
{{ formatNum(result.fzg_km) }} {{ $t("front_extern.h") }}
|
||||
</span>
|
||||
<br />
|
||||
</template>
|
||||
<template v-if="result.fzg_1iv != ''">
|
||||
{{ $t("front_extern.1iv") }} {{ formatDate(result.fzg_1iv) }}<br />
|
||||
</template>
|
||||
{{result.fzg_leistung ? formatNum(result.fzg_leistung, 1) + 'KW' : ''}} {{ $t("front_extern.ausweis") }} {{result.rel_ausweis['bezeichnung_' + $store.state.settings.lang]}}
|
||||
</span>
|
||||
<span v-else-if="result.fzg_art == '3' || result.fzg_art == '4' || result.fzg_art == '5'">
|
||||
<template v-if="result.garantie_typ == '2'">
|
||||
<template v-if="result.garantie_monate != ''">
|
||||
{{ result.garantie_monate }}
|
||||
{{ $t("front_extern.monate") }}
|
||||
</template>
|
||||
<template v-if="result.garantie_monate != '' && (result.garantie_km > 0)">
|
||||
{{ $t("front_extern.oder") }}
|
||||
</template>
|
||||
<template v-if="(result.garantie_km > 0)">
|
||||
{{ result.garantie_km }} {{ $t("front_extern.kilometer") }}
|
||||
</template>
|
||||
</template>
|
||||
<template v-if="result.garantie_typ == '3'">
|
||||
<template v-if="result.garantie_monate != ''">
|
||||
{{ result.garantie_monate }}
|
||||
{{ $t("front_extern.monate") }}
|
||||
</template>
|
||||
<template v-if="result.garantie_monate != '' && (result.garantie_km > 0)">
|
||||
{{ $t("front_extern.oder") }}
|
||||
</template>
|
||||
<template v-if="(result.garantie_km > 0)">
|
||||
{{ result.garantie_km }} {{ $t("front_extern.kilometer") }}
|
||||
</template>
|
||||
</template>
|
||||
<template v-if="result.garantie_monate != '' && result.garantie_km == ''">
|
||||
<br />
|
||||
</template>
|
||||
<template v-if="result.fzg_1iv != '' && result.fzg_art == '5'">
|
||||
{{ $t("front_extern.1iv") }} {{ result.fzg_1iv }}<br />
|
||||
</template>
|
||||
{{result.fzg_leistung ? formatNum(result.fzg_leistung, 1) + 'KW' : ''}} {{ $t("front_extern.ausweis") }} {{result.rel_ausweis['bezeichnung_' + $store.state.settings.lang]}}
|
||||
</span>
|
||||
<span class="hide-mob"> |</span> {{ result.rel_farbe['bezeichnung_' + $store.state.settings.lang] }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="ListeCol exportShowNormal" style="width: 12px;" :style="color('fontColor')">
|
||||
<span style="border-left: 1px solid #ccc; display: block; height: 100px; margin-right: 10px;"> </span>
|
||||
</div>
|
||||
<div class="ListeCol newListePriceDetailsContainer exportShowNormal" :style="color('fontColor')">
|
||||
<template v-if="$store.state.settings.srchParObj.rental">
|
||||
<span v-if="result.mietkonditionen && result.mietkonditionen.miete_tag" class="newListePriceDetailsContainerFirst">
|
||||
{{ $t("front_extern.ab") }} <b>{{formatPrice(result.mietkonditionen.miete_tag, 0)}} / {{ $t("front_extern.day") }}</b>
|
||||
</span>
|
||||
</template>
|
||||
<template v-else>
|
||||
<template v-if="result.fzg_rubrik_vermietung == 0 || (result.fzg_rubrik_vermietung == 1 && result.inserat_status_vermietet_anzeigen == 1)" class="price beschNormal">
|
||||
<span v-if="result.actualprice != result.fzg_preis" class="newListePriceDetailsContainerFirst">
|
||||
{{ $t("front_extern.special_price") }}: <b>{{formatPrice(result.actualprice, 0)}}</b><br />
|
||||
{{ $t("front_extern.normal_price") }}: <span class="strikethrough">{{formatPrice(result.fzg_preis, 0)}}</span><br />
|
||||
{{ $t("front_extern.special_price_bis") }}: {{formatDate(result.fzg_preis_aktion_bis)}}
|
||||
</span>
|
||||
<span v-else-if="result.actualprice > 0" class="newListePriceDetailsContainerFirst">
|
||||
{{ $t("front_extern.price") }}: <b>{{formatPrice(result.actualprice, 0)}}</b>
|
||||
</span>
|
||||
<span v-else class="newListePriceDetailsContainerFirst">
|
||||
{{ $t("front_extern.price") }}: {{ $t('front_extern.price_on_request') }}
|
||||
</span>
|
||||
</template>
|
||||
<template v-if="result.fzg_rubrik_vermietung == 1">
|
||||
<span v-if="result.mietkonditionen && result.mietkonditionen.miete_tag" class="newListePriceDetailsContainerFirst">
|
||||
<br />
|
||||
{{ $t("front_extern.mietbar_ab") }}: <b>{{formatPrice(result.mietkonditionen.miete_tag, 0)}} / {{ $t("front_extern.day") }}</b>
|
||||
</span>
|
||||
</template>
|
||||
</template>
|
||||
<span v-if="$store.state.locations.length > 1" class="newListePriceDetailsContainerLocation">
|
||||
{{ $t("front_extern.standort") }}: {{ result.standort.firma_name }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ResultImage from './ResultImage.vue'
|
||||
import PathMixin from '../mixins/PathMixin.js'
|
||||
import Numberformatting from '../mixins/Numberformatting.js'
|
||||
|
||||
export default {
|
||||
mixins: [PathMixin, Numberformatting],
|
||||
props: ['result'],
|
||||
components: {
|
||||
'result-image': ResultImage
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getCategoryText(id) {
|
||||
switch (id) {
|
||||
case 4:
|
||||
case 5:
|
||||
case 6:
|
||||
case 7:
|
||||
case 8:
|
||||
case 11:
|
||||
case 15:
|
||||
case 19:
|
||||
return this.$t('front_extern.result_motorrad');
|
||||
break;
|
||||
default:
|
||||
return '';
|
||||
break;
|
||||
}
|
||||
},
|
||||
getArtClass(result) {
|
||||
switch (result.fzg_art) {
|
||||
case 1:
|
||||
return 'bg-mhsecondary-orange';
|
||||
break;
|
||||
case 2:
|
||||
return 'bg-mhsecondary-cyan';
|
||||
break;
|
||||
case 3:
|
||||
return 'bg-mhsecondary-moss';
|
||||
break;
|
||||
case 4:
|
||||
default:
|
||||
return 'bg-mhsecondary-yellow';
|
||||
break;
|
||||
case 5:
|
||||
return 'bg-mhsecondary-beige';
|
||||
break;
|
||||
}
|
||||
},
|
||||
createUrl(result) {
|
||||
return this.adSlug(this.$store.state.settings.lang, result.rel_marke.Markenbezeichnung, result.rel_modelle.Modellbezeichnung, result.id);
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
fahrzWoZus() {
|
||||
return this.result.rel_marke.Markenbezeichnung + ' ' + this.result.rel_modelle.Modellbezeichnung;
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.strikethrough {
|
||||
position: relative;
|
||||
}
|
||||
.strikethrough:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
left: 0;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
border-top: 1px solid;
|
||||
border-color: inherit;
|
||||
|
||||
-webkit-transform:rotate(-5deg);
|
||||
-moz-transform:rotate(-5deg);
|
||||
-ms-transform:rotate(-5deg);
|
||||
-o-transform:rotate(-5deg);
|
||||
transform:rotate(-5deg);
|
||||
}
|
||||
span.newListePriceDetailsContainerLocation {
|
||||
font-size: 15px;
|
||||
display: inherit;
|
||||
font-weight: 400;
|
||||
padding-top: 20px;
|
||||
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<span class="label">{{ getLabel }}</span>
|
||||
<div class="button" :style="[bckgrColor('buttonColor'), color('buttonTextColor')]">
|
||||
<span class="icon" style="border-top-color: #FFFFFF!important;"></span>
|
||||
</div>
|
||||
<select class="ghost" id="markenID" name="marke" v-model="selectedBrand">
|
||||
<option value="0">{{ $t('front_extern.select_alle') }}</option>
|
||||
<option v-for="(brand, key) in $store.state.brands" v-bind:key="key" :value="brand.id">{{brand.name}}</option>
|
||||
</select>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
selectedBrand: {
|
||||
get: function () {
|
||||
return this.$store.state.selected['brand'];
|
||||
},
|
||||
set: function (state) {
|
||||
this.$store.commit('setSelected', {item: 'brand', state: state});
|
||||
this.$emit('brandChanged')
|
||||
}
|
||||
},
|
||||
getLabel() {
|
||||
if(this.$store.state.selected.brand == 0) {
|
||||
return this.$t('front_extern.select_alle');
|
||||
}
|
||||
var ndx = this.$store.state.brands.findIndex(i => i.id === this.$store.state.selected.brand);
|
||||
return this.$store.state.brands[ndx].name;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<span class="label">{{ getLabel }}</span>
|
||||
<div class="button" :style="[bckgrColor('buttonColor'), color('buttonTextColor')]">
|
||||
<span class="icon" :style="[{'border-top-color': '#' + $store.state.settings.buttonTextColor + '!important'}]"></span>
|
||||
</div>
|
||||
<select class="ghost" id="KmTo" name="KmTo" v-model="selectedKm">
|
||||
<option value="" selected="selected">{{ $t('front_extern.select_alle') }}</option>
|
||||
<option v-for="(km, key) in kms" v-bind:key="key" :value="key">{{km}}</option>
|
||||
</select>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['data', 'lang', 'settings'],
|
||||
data() {
|
||||
return {
|
||||
'kms': {
|
||||
1000: "1'000 Km",
|
||||
5000: "5'000 Km",
|
||||
7500: "7'500 Km",
|
||||
10000: "10'000 Km",
|
||||
25000: "25'000 Km",
|
||||
50000: "50'000 Km",
|
||||
60000: "60'000 Km",
|
||||
70000: "70'000 Km",
|
||||
80000: "80'000 Km",
|
||||
90000: "90'000 Km",
|
||||
100000: "100'000 Km",
|
||||
125000: "125'000 Km",
|
||||
150000: "150'000 Km",
|
||||
175000: "175'000 Km",
|
||||
200000: "200'000 Km",
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
selectedKm: {
|
||||
get: function () {
|
||||
return this.$store.state.selected['km'];
|
||||
},
|
||||
set: function (state) {
|
||||
this.$store.commit('setSelected', {item: 'km', state: state});
|
||||
this.$emit('reloadData')
|
||||
}
|
||||
},
|
||||
getLabel() {
|
||||
if(this.$store.state.selected.km == 0) {
|
||||
return this.$t('front_extern.select_alle');
|
||||
}
|
||||
return this.kms[this.$store.state.selected.km];
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,35 @@
|
||||
<template>
|
||||
<span class="label">{{ getLabel }}</span>
|
||||
<div class="button" :style="bckgrColor('buttonColor')">
|
||||
<span class="icon" style="border-top-color: #FFFFFF!important;"></span>
|
||||
</div>
|
||||
<select class="ghost" id="modelID" name="Model" v-model="selectedModel">
|
||||
<option value="0">{{ $t('front_extern.select_alle') }}</option>
|
||||
<option v-for="(model, key) in $store.state.models" v-bind:key="key" :value="key">{{model}}</option>
|
||||
</select>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
selectedModel: {
|
||||
get: function () {
|
||||
return this.$store.state.selected['model'];
|
||||
},
|
||||
set: function (state) {
|
||||
this.$store.commit('setSelected', {item: 'model', state: state});
|
||||
this.$emit('reloadData')
|
||||
}
|
||||
},
|
||||
getLabel() {
|
||||
if(this.$store.state.selected.model == 0) {
|
||||
return this.$t('front_extern.select_alle');
|
||||
}
|
||||
return this.$store.state.models[this.$store.state.selected.model];
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<span class="label">{{ getLabel }}</span>
|
||||
<div class="button" :style="bckgrColor('buttonColor')">
|
||||
<span class="icon" style="border-top-color: #FFFFFF!important;"></span>
|
||||
</div>
|
||||
<select class="ghost" id="PriceTo" name="PriceTo" v-model="selectedPrice">
|
||||
<option value="" selected="selected">{{ $t('front_extern.select_alle') }}</option>
|
||||
<option v-for="(price, key) in prices" v-bind:key="key" :value="key">{{price}}</option>
|
||||
</select>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
'prices': {
|
||||
1000: "CHF 1'000",
|
||||
2000: "CHF 2'000",
|
||||
3000: "CHF 3'000",
|
||||
4000: "CHF 4'000",
|
||||
5000: "CHF 5'000",
|
||||
7500: "CHF 7'500",
|
||||
10000: "CHF 10'000",
|
||||
12500: "CHF 12'500",
|
||||
15000: "CHF 15'000",
|
||||
17500: "CHF 17'500",
|
||||
20000: "CHF 20'000",
|
||||
22500: "CHF 22'500",
|
||||
30000: "CHF 30'000",
|
||||
35000: "CHF 35'000",
|
||||
40000: "CHF 40'000",
|
||||
45000: "CHF 45'000",
|
||||
50000: "CHF 50'000",
|
||||
60000: "CHF 60'000",
|
||||
70000: "CHF 70'000",
|
||||
80000: "CHF 80'000",
|
||||
90000: "CHF 90'000",
|
||||
100000: "CHF 100'000",
|
||||
150000: "CHF 150'000",
|
||||
200000: "CHF 200'000",
|
||||
300000: "CHF 300'000",
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
selectedPrice: {
|
||||
get: function () {
|
||||
return this.$store.state.selected['price'];
|
||||
},
|
||||
set: function (state) {
|
||||
this.$store.commit('setSelected', {item: 'price', state: state});
|
||||
this.$emit('reloadData')
|
||||
}
|
||||
},
|
||||
getLabel() {
|
||||
if(this.$store.state.selected.price == 0) {
|
||||
return this.$t('front_extern.select_alle');
|
||||
}
|
||||
return this.prices[this.$store.state.selected.price];
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<span class="label sortLabelText">{{ getLabel }}</span>
|
||||
<div class="button" :style="bckgrColor('buttonColor')">
|
||||
<span class="icon" style="border-top-color: #FFFFFF!important;"></span>
|
||||
</div>
|
||||
<select class="ghost" id="Sort" name="Sort" v-model="selectedSort">
|
||||
<option value="" selected="selected">{{ $t('front_extern.sort_choose') }}</option>
|
||||
<option v-for="(sort, key) in sorts" v-bind:key="key" :value="key">{{sort}}</option>
|
||||
</select>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
'sorts': {
|
||||
3: this.$t('front_extern.sort_price_asc'),
|
||||
2: this.$t('front_extern.sort_price_desc'),
|
||||
5: this.$t('front_extern.sort_km_asc'),
|
||||
4: this.$t('front_extern.sort_km_desc'),
|
||||
7: this.$t('front_extern.sort_markemodel_asc'),
|
||||
6: this.$t('front_extern.sort_markemodel_desc'),
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
selectedSort: {
|
||||
get: function () {
|
||||
return this.$store.state.selected['sort'];
|
||||
},
|
||||
set: function (state) {
|
||||
this.$store.commit('setSelected', {item: 'sort', state: state});
|
||||
this.$emit('reloadData')
|
||||
}
|
||||
},
|
||||
getLabel() {
|
||||
if(this.$store.state.selected.sort == 0) {
|
||||
return this.$t('front_extern.sort_choose');
|
||||
}
|
||||
return this.sorts[this.$store.state.selected.sort];
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<span class="label">{{ getLabel }}</span>
|
||||
<div class="button" :style="[bckgrColor('buttonColor'), color('buttonTextColor')]">
|
||||
<span class="icon" style="border-top-color: #FFFFFF!important;"></span>
|
||||
</div>
|
||||
<select class="ghost" id="stadortID" name="standort" v-model="selectedStandort">
|
||||
<option value="0">{{ $t('front_extern.select_alle') }}</option>
|
||||
<option v-for="(location, key) in $store.state.locations" v-bind:key="key" :value="location.id">{{location.name}}</option>
|
||||
</select>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
selectedStandort: {
|
||||
get: function () {
|
||||
return this.$store.state.selected['location'];
|
||||
},
|
||||
set: function (state) {
|
||||
this.$store.commit('setSelected', {item: 'location', state: state});
|
||||
this.$emit('reloadData')
|
||||
}
|
||||
},
|
||||
getLabel() {
|
||||
if(this.$store.state.selected.location == 0) {
|
||||
return this.$t('front_extern.select_alle');
|
||||
}
|
||||
var ndx = this.$store.state.locations.findIndex(i => i.id === this.$store.state.selected.location);
|
||||
return this.$store.state.locations[ndx].name;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,341 @@
|
||||
<script>
|
||||
import * as Vue from 'vue';
|
||||
import PhotoSwipe from './photoswipe/photoswipe';
|
||||
import PhotoSwipeUI_Default from './photoswipe/photoswipe-ui-default';
|
||||
import './photoswipe/photoswipe.css';
|
||||
import './photoswipe/default-skin/default-skin.css';
|
||||
|
||||
const {h} = Vue;
|
||||
|
||||
export default {
|
||||
props: {
|
||||
options: {
|
||||
default: () => ({}),
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
pswp: null,
|
||||
angle: 0
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
const self = this;
|
||||
const initPhotoSwipeFromDOM = function (gallerySelector) {
|
||||
|
||||
// parse slide data (url, title, size ...) from DOM elements
|
||||
// (children of gallerySelector)
|
||||
const parseThumbnailElements = function (el) {
|
||||
// const thumbElements = el.childNodes;
|
||||
const thumbElements = el.querySelectorAll('a');
|
||||
const numNodes = thumbElements.length;
|
||||
const items = [];
|
||||
|
||||
let figureEl,
|
||||
linkEl,
|
||||
size,
|
||||
item;
|
||||
|
||||
for (let i = 0; i < numNodes; i++) {
|
||||
|
||||
figureEl = thumbElements[i]; // <figure> element
|
||||
// include only element nodes
|
||||
if (figureEl.nodeType !== 1) {
|
||||
continue;
|
||||
}
|
||||
linkEl = figureEl.children[0]; // <a> element
|
||||
// size = linkEl.getAttribute('data-size').split('x');
|
||||
|
||||
// create slide object
|
||||
item = {
|
||||
src: linkEl.dataset.fullp,
|
||||
w: 0,
|
||||
h: 0,
|
||||
title: linkEl.getAttribute('title')
|
||||
};
|
||||
|
||||
|
||||
if (figureEl.children.length > 1) {
|
||||
// <figcaption> content
|
||||
item.title = figureEl.children[1].innerHTML;
|
||||
}
|
||||
|
||||
if (linkEl.children.length > 0) {
|
||||
// <img> thumbnail element, retrieving thumbnail url
|
||||
item.msrc = linkEl.children[0].getAttribute('src');
|
||||
}
|
||||
|
||||
item.el = figureEl; // save link to element for getThumbBoundsFn
|
||||
items.push(item);
|
||||
}
|
||||
return items;
|
||||
};
|
||||
|
||||
// find nearest parent element
|
||||
const closest = function closest(el, fn) {
|
||||
return el && (fn(el) ? el : closest(el.parentNode, fn));
|
||||
};
|
||||
|
||||
// triggers when user clicks on thumbnail
|
||||
const onThumbnailsClick = function (e) {
|
||||
e = e || window.event;
|
||||
e.preventDefault ? e.preventDefault() : e.returnValue = false;
|
||||
|
||||
const eTarget = e.target || e.srcElement;
|
||||
|
||||
// find root element of slide
|
||||
const clickedListItem = closest(eTarget, (el) => {
|
||||
return (el.tagName && el.tagName.toUpperCase() === 'IMG');
|
||||
});
|
||||
|
||||
if (!clickedListItem) {
|
||||
return;
|
||||
}
|
||||
|
||||
// find index of clicked item by looping through all child nodes
|
||||
// alternatively, you may define index via data- attribute
|
||||
// const clickedGallery = clickedListItem.parentNode.parentNode.parentNode;
|
||||
const clickedGallery = document.querySelectorAll('.my-gallery');
|
||||
|
||||
// const childNodes = clickedListItem.parentNode.childNodes;
|
||||
const childNodes = clickedGallery[0].querySelectorAll('img');
|
||||
const numChildNodes = childNodes.length;
|
||||
let nodeIndex = 0,
|
||||
index;
|
||||
|
||||
for (let i = 0; i < numChildNodes; i++) {
|
||||
if (childNodes[i].nodeType !== 1) {
|
||||
continue;
|
||||
}
|
||||
|
||||
if (childNodes[i] === clickedListItem) {
|
||||
index = nodeIndex;
|
||||
break;
|
||||
}
|
||||
nodeIndex++;
|
||||
}
|
||||
|
||||
if (index >= 0) {
|
||||
// open PhotoSwipe if valid index found
|
||||
openPhotoSwipe(index, clickedGallery[0]);
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
// parse picture index and gallery index from URL (#&pid=1&gid=2)
|
||||
const photoswipeParseHash = function () {
|
||||
const hash = window.location.hash.substring(1),
|
||||
params = {};
|
||||
|
||||
if (hash.length < 5) {
|
||||
return params;
|
||||
}
|
||||
|
||||
const vars = hash.split('&');
|
||||
for (let i = 0; i < vars.length; i++) {
|
||||
if (!vars[i]) {
|
||||
continue;
|
||||
}
|
||||
const pair = vars[i].split('=');
|
||||
if (pair.length < 2) {
|
||||
continue;
|
||||
}
|
||||
params[pair[0]] = pair[1];
|
||||
}
|
||||
|
||||
if (params.gid) {
|
||||
params.gid = parseInt(params.gid, 10);
|
||||
}
|
||||
|
||||
return params;
|
||||
};
|
||||
|
||||
const openPhotoSwipe = function (index, galleryElement, disableAnimation, fromURL) {
|
||||
const pswpElement = document.querySelectorAll('.pswp')[0];
|
||||
// console.log('before parse:', galleryElement)
|
||||
const items = parseThumbnailElements(galleryElement);
|
||||
|
||||
// define options (if needed)
|
||||
const options = {
|
||||
// define gallery index (for URL)
|
||||
galleryUID: galleryElement.getAttribute('data-pswp-uid'),
|
||||
|
||||
getThumbBoundsFn(index) {
|
||||
// See Options -> getThumbBoundsFn section of documentation for more info
|
||||
const thumbnail = items[index].el.getElementsByTagName('img')[0], // find thumbnail
|
||||
pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
|
||||
rect = thumbnail.getBoundingClientRect();
|
||||
|
||||
return {x: rect.left, y: rect.top + pageYScroll, w: rect.width};
|
||||
}
|
||||
};
|
||||
|
||||
// PhotoSwipe opened from URL
|
||||
if (fromURL) {
|
||||
if (options.galleryPIDs) {
|
||||
// parse real index when custom PIDs are used
|
||||
// http://photoswipe.com/documentation/faq.html#custom-pid-in-url
|
||||
for (let j = 0; j < items.length; j++) {
|
||||
if (items[j].pid === index) {
|
||||
options.index = j;
|
||||
break;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// in URL indexes start from 1
|
||||
options.index = parseInt(index, 10) - 1;
|
||||
}
|
||||
} else {
|
||||
options.index = parseInt(index, 10);
|
||||
}
|
||||
|
||||
// exit if index not found
|
||||
if (isNaN(options.index)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (disableAnimation) {
|
||||
options.showAnimationDuration = 0;
|
||||
}
|
||||
|
||||
// Pass data to PhotoSwipe and initialize it
|
||||
const gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, Object.assign(options, self.options));
|
||||
gallery.listen('gettingData', (index, item) => {
|
||||
if (item.w < 1 || item.h < 1) { // unknown size
|
||||
const img = new Image();
|
||||
img.onload = function () { // will get size after load
|
||||
item.w = this.width; // set image width
|
||||
item.h = this.height; // set image height
|
||||
gallery.invalidateCurrItems(); // reinit Items
|
||||
gallery.updateSize(true); // reinit Items
|
||||
};
|
||||
img.src = item.src; // let's download image
|
||||
}
|
||||
});
|
||||
gallery.init();
|
||||
self.pswp = gallery;
|
||||
|
||||
// trigger open event after swiper is opened
|
||||
self.$emit('open');
|
||||
|
||||
// trigger close event after swiper is closed
|
||||
gallery.listen('destroy', () => self.$emit('close'));
|
||||
};
|
||||
|
||||
const idTimeout = setTimeout(() => {
|
||||
clearInterval(idInterval);
|
||||
}, 5000);
|
||||
|
||||
const idInterval = setInterval(() => {
|
||||
if (document.querySelectorAll(gallerySelector)) {
|
||||
clearInterval(idInterval);
|
||||
clearTimeout(idTimeout);
|
||||
|
||||
// loop through all gallery elements and bind events
|
||||
const galleryElements = document.querySelectorAll(gallerySelector);
|
||||
for (let i = 0, l = galleryElements.length; i < l; i++) {
|
||||
galleryElements[i].setAttribute('data-pswp-uid', i + 1);
|
||||
galleryElements[i].onclick = onThumbnailsClick;
|
||||
}
|
||||
|
||||
// Parse URL and open gallery if it contains #&pid=3&gid=1
|
||||
const hashData = photoswipeParseHash();
|
||||
if (hashData.pid && hashData.gid) {
|
||||
openPhotoSwipe(hashData.pid, galleryElements[hashData.gid - 1], true, true);
|
||||
}
|
||||
}
|
||||
}, 50);
|
||||
|
||||
|
||||
};
|
||||
|
||||
initPhotoSwipeFromDOM('.my-gallery a');
|
||||
},
|
||||
methods: {
|
||||
rotate(newAngle) {
|
||||
this.angle += newAngle;
|
||||
this.$el.querySelectorAll('.pswp__img').forEach(i => i.style.transform = `rotate(${this.angle}deg)`);
|
||||
},
|
||||
resetAngle() {
|
||||
this.angle = 0;
|
||||
this.$el.querySelectorAll('.pswp__img').forEach(i => i.style.transform = `rotate(${this.angle}deg)`);
|
||||
}
|
||||
},
|
||||
render() {
|
||||
const self = this;
|
||||
return h('div', {class: 'pswp', tabindex: '-1', role: 'dialog', 'aria-hidden': true}, [
|
||||
h('div', {class: 'pswp__bg'}),
|
||||
h('div', {class: 'pswp__scroll-wrap'}, [
|
||||
h('div', {class: 'pswp__container'}, [
|
||||
h('div', {class: 'pswp__item'}),
|
||||
h('div', {class: 'pswp__item'}),
|
||||
h('div', {class: 'pswp__item'})
|
||||
]),
|
||||
h('div', {class: 'pswp__ui pswp__ui--hidden'}, [
|
||||
h('div', {class: 'pswp__top-bar'}, [
|
||||
h('div', {class: 'pswp__counter'}),
|
||||
h('button', {class: 'pswp__button pswp__button--close', title: 'Close (Esc)'}),
|
||||
self.options.rotationOn ? h('button', {
|
||||
class: 'pswp__button pswp__button--rotate pswp__button--rotate--left',
|
||||
title: 'Rotate left',
|
||||
onClick() {
|
||||
self.rotate(-90);
|
||||
}
|
||||
}) : '',
|
||||
self.options.rotationOn ? h('button', {
|
||||
class: 'pswp__button pswp__button--rotate pswp__button--rotate--right',
|
||||
title: 'Rotate left',
|
||||
onClick() {
|
||||
self.rotate(90);
|
||||
}
|
||||
}) : '',
|
||||
h('button', {class: 'pswp__button pswp__button--share', title: 'Share'}),
|
||||
h('button', {class: 'pswp__button pswp__button--fs', title: 'Toggle fullscreen'}),
|
||||
h('button', {class: 'pswp__button pswp__button--zoom', title: 'Zoom in/out'}),
|
||||
h('div', {class: 'pswp__preloader'}, h('div', {class: 'pswp__preloader__icn'}, h('div', {class: 'pswp__preloader__cut'}, h('div', {class: 'pswp__preloader__donut'}))))
|
||||
]),
|
||||
h('div', {class: 'pswp__share-modal pswp__share-modal--hidden pswp__single-tap'}, h('div', {class: 'pswp__share-tooltip'})),
|
||||
h('button', {
|
||||
class: 'pswp__button pswp__button--arrow--left',
|
||||
title: 'Previous (arrow left)',
|
||||
onClick() {
|
||||
self.resetAngle();
|
||||
}
|
||||
}),
|
||||
h('button', {
|
||||
class: 'pswp__button pswp__button--arrow--right',
|
||||
title: 'Next (arrow right)',
|
||||
onClick() {
|
||||
self.resetAngle();
|
||||
}
|
||||
}),
|
||||
h('div', {class: 'pswp__caption'}, h('div', {class: 'pswp__caption__center'}))
|
||||
])
|
||||
])
|
||||
]);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.pswp__top-bar {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.pswp__caption__center {
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.pswp__button--rotate {
|
||||
background: url(./icons/rotate.png) 0 0 no-repeat;
|
||||
background-size: 62px 24px;
|
||||
}
|
||||
|
||||
.pswp__button--rotate--left {
|
||||
background-position: 8px 10px;
|
||||
}
|
||||
|
||||
.pswp__button--rotate--right {
|
||||
background-position: -26px 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,15 @@
|
||||
<script>
|
||||
import {h, compile} from 'vue';
|
||||
|
||||
export default {
|
||||
name: 'RenderHtml',
|
||||
props: ['template'],
|
||||
render() {
|
||||
if (!this.template) {
|
||||
return h('div', 'loading...');
|
||||
} else {
|
||||
return h(compile(`${this.template}`));
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="my-gallery" itemscope itemtype="http://schema.org/ImageGallery">
|
||||
<figure
|
||||
v-for="(item, index) in items"
|
||||
v-show="index === 0 || !singleThumbnail"
|
||||
:key="index"
|
||||
class="gallery-thumbnail"
|
||||
itemprop="associatedMedia"
|
||||
itemscope
|
||||
itemtype="http://schema.org/ImageObject"
|
||||
:src="item.src"
|
||||
>
|
||||
<a
|
||||
v-show="nbThumbnailsDisplayed === -1 || index < nbThumbnailsDisplayed"
|
||||
:href="item.src"
|
||||
itemprop="contentUrl"
|
||||
:data-size="`${item.w}x${item.h}`"
|
||||
:title="item.title"
|
||||
>
|
||||
<img :src="item.thumbnail" :alt="item.alt" itemprop="thumbnail" />
|
||||
</a>
|
||||
<render-html v-if="item.htmlAfterThumbnail" :template="item.htmlAfterThumbnail" />
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
<photo-swipe-component
|
||||
v-if="defaultStructure"
|
||||
:options="options"
|
||||
@open="$emit('open')"
|
||||
@close="$emit('close')"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PhotoSwipeComponent from './PhotoSwipeComponent.vue';
|
||||
// import RenderHtml from './RenderHtml.vue';
|
||||
|
||||
export default {
|
||||
// components: {PhotoSwipeComponent, RenderHtml},
|
||||
components: {PhotoSwipeComponent},
|
||||
props: {
|
||||
items: {
|
||||
default: [
|
||||
{
|
||||
src: 'http://via.placeholder.com/600x400',
|
||||
thumbnail: 'http://via.placeholder.com/64x64',
|
||||
w: 0,
|
||||
h: 0,
|
||||
alt: 'some numbers on a grey background',
|
||||
htmlAfterThumbnail: '<span class="photos-date">29.12.2021</span>'
|
||||
},
|
||||
{
|
||||
src: 'http://via.placeholder.com/1200x900',
|
||||
thumbnail: 'http://via.placeholder.com/64x64',
|
||||
w: 0,
|
||||
h: 0,
|
||||
htmlAfterThumbnail: ''
|
||||
}
|
||||
],
|
||||
type: Array
|
||||
},
|
||||
options: {
|
||||
default: () => ({}),
|
||||
type: Object
|
||||
},
|
||||
singleThumbnail: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
nbThumbnailsDisplayed: {
|
||||
default: -1,
|
||||
type: Number
|
||||
},
|
||||
defaultStructure: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
</script>
|
||||
<style scoped>
|
||||
.gallery-thumbnail {
|
||||
display: inline;
|
||||
margin: 5px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M13,4.07V1L8.45,5.55L13,10V6.09C15.84,6.57 18,9.03 18,12C18,14.97 15.84,17.43 13,17.91V19.93C16.95,19.44 20,16.08 20,12C20,7.92 16.95,4.56 13,4.07M7.1,18.32C8.26,19.22 9.61,19.76 11,19.93V17.9C10.13,17.75 9.29,17.41 8.54,16.87L7.1,18.32M6.09,13H4.07C4.24,14.39 4.79,15.73 5.69,16.89L7.1,15.47C6.58,14.72 6.23,13.88 6.09,13M7.11,8.53L5.7,7.11C4.8,8.27 4.24,9.61 4.07,11H6.09C6.23,10.13 6.58,9.28 7.11,8.53Z" /></svg>
|
||||
|
After Width: | Height: | Size: 700 B |
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M16.89,15.5L18.31,16.89C19.21,15.73 19.76,14.39 19.93,13H17.91C17.77,13.87 17.43,14.72 16.89,15.5M13,17.9V19.92C14.39,19.75 15.74,19.21 16.9,18.31L15.46,16.87C14.71,17.41 13.87,17.76 13,17.9M19.93,11C19.76,9.61 19.21,8.27 18.31,7.11L16.89,8.53C17.43,9.28 17.77,10.13 17.91,11M15.55,5.55L11,1V4.07C7.06,4.56 4,7.92 4,12C4,16.08 7.05,19.44 11,19.93V17.91C8.16,17.43 6,14.97 6,12C6,9.03 8.16,6.57 11,6.09V10L15.55,5.55Z" /></svg>
|
||||
|
After Width: | Height: | Size: 711 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
@@ -0,0 +1,3 @@
|
||||
import VuePictureSwipe from './VuePictureSwipe.vue';
|
||||
|
||||
export default VuePictureSwipe;
|
||||
Vendored
+482
@@ -0,0 +1,482 @@
|
||||
/*! PhotoSwipe Default UI CSS by Dmitry Semenov | photoswipe.com | MIT license */
|
||||
/*
|
||||
|
||||
Contents:
|
||||
|
||||
1. Buttons
|
||||
2. Share modal and links
|
||||
3. Index indicator ("1 of X" counter)
|
||||
4. Caption
|
||||
5. Loading indicator
|
||||
6. Additional styles (root element, top bar, idle state, hidden state, etc.)
|
||||
|
||||
*/
|
||||
/*
|
||||
|
||||
1. Buttons
|
||||
|
||||
*/
|
||||
/* <button> css reset */
|
||||
.pswp__button {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
position: relative;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
overflow: visible;
|
||||
-webkit-appearance: none;
|
||||
display: block;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
float: right;
|
||||
opacity: 0.75;
|
||||
-webkit-transition: opacity 0.2s;
|
||||
transition: opacity 0.2s;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none; }
|
||||
.pswp__button:focus, .pswp__button:hover {
|
||||
opacity: 1; }
|
||||
.pswp__button:active {
|
||||
outline: none;
|
||||
opacity: 0.9; }
|
||||
.pswp__button::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border: 0; }
|
||||
|
||||
/* pswp__ui--over-close class it added when mouse is over element that should close gallery */
|
||||
.pswp__ui--over-close .pswp__button--close {
|
||||
opacity: 1; }
|
||||
|
||||
.pswp__button,
|
||||
.pswp__button--arrow--left:before,
|
||||
.pswp__button--arrow--right:before {
|
||||
background: url('https://motorradhandel.ch/extern/images/default-skin.png') 0 0 no-repeat;
|
||||
background-size: 264px 88px;
|
||||
width: 44px;
|
||||
height: 44px; }
|
||||
|
||||
@media (-webkit-min-device-pixel-ratio: 1.1), (-webkit-min-device-pixel-ratio: 1.09375), (min-resolution: 105dpi), (min-resolution: 1.1dppx) {
|
||||
/* Serve SVG sprite if browser supports SVG and resolution is more than 105dpi */
|
||||
.pswp--svg .pswp__button,
|
||||
.pswp--svg .pswp__button--arrow--left:before,
|
||||
.pswp--svg .pswp__button--arrow--right:before {
|
||||
background-image: url('https://motorradhandel.ch/extern/images/default-skin.svg'); }
|
||||
.pswp--svg .pswp__button--arrow--left,
|
||||
.pswp--svg .pswp__button--arrow--right {
|
||||
background: none; } }
|
||||
|
||||
.pswp__button--close {
|
||||
background-position: 0 -44px; }
|
||||
|
||||
.pswp__button--share {
|
||||
background-position: -44px -44px; }
|
||||
|
||||
.pswp__button--fs {
|
||||
display: none; }
|
||||
|
||||
.pswp--supports-fs .pswp__button--fs {
|
||||
display: block; }
|
||||
|
||||
.pswp--fs .pswp__button--fs {
|
||||
background-position: -44px 0; }
|
||||
|
||||
.pswp__button--zoom {
|
||||
display: none;
|
||||
background-position: -88px 0; }
|
||||
|
||||
.pswp--zoom-allowed .pswp__button--zoom {
|
||||
display: block; }
|
||||
|
||||
.pswp--zoomed-in .pswp__button--zoom {
|
||||
background-position: -132px 0; }
|
||||
|
||||
/* no arrows on touch screens */
|
||||
.pswp--touch .pswp__button--arrow--left,
|
||||
.pswp--touch .pswp__button--arrow--right {
|
||||
visibility: hidden; }
|
||||
|
||||
/*
|
||||
Arrow buttons hit area
|
||||
(icon is added to :before pseudo-element)
|
||||
*/
|
||||
.pswp__button--arrow--left,
|
||||
.pswp__button--arrow--right {
|
||||
background: none;
|
||||
top: 50%;
|
||||
margin-top: -50px;
|
||||
width: 70px;
|
||||
height: 100px;
|
||||
position: absolute; }
|
||||
|
||||
.pswp__button--arrow--left {
|
||||
left: 0; }
|
||||
|
||||
.pswp__button--arrow--right {
|
||||
right: 0; }
|
||||
|
||||
.pswp__button--arrow--left:before,
|
||||
.pswp__button--arrow--right:before {
|
||||
content: '';
|
||||
top: 35px;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
height: 30px;
|
||||
width: 32px;
|
||||
position: absolute; }
|
||||
|
||||
.pswp__button--arrow--left:before {
|
||||
left: 6px;
|
||||
background-position: -138px -44px; }
|
||||
|
||||
.pswp__button--arrow--right:before {
|
||||
right: 6px;
|
||||
background-position: -94px -44px; }
|
||||
|
||||
/*
|
||||
|
||||
2. Share modal/popup and links
|
||||
|
||||
*/
|
||||
.pswp__counter,
|
||||
.pswp__share-modal {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none; }
|
||||
|
||||
.pswp__share-modal {
|
||||
display: block;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 10px;
|
||||
position: absolute;
|
||||
z-index: 1600;
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.25s ease-out;
|
||||
transition: opacity 0.25s ease-out;
|
||||
-webkit-backface-visibility: hidden;
|
||||
will-change: opacity; }
|
||||
|
||||
.pswp__share-modal--hidden {
|
||||
display: none; }
|
||||
|
||||
.pswp__share-tooltip {
|
||||
z-index: 1620;
|
||||
position: absolute;
|
||||
background: #FFF;
|
||||
top: 56px;
|
||||
border-radius: 2px;
|
||||
display: block;
|
||||
width: auto;
|
||||
right: 44px;
|
||||
-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
|
||||
-webkit-transform: translateY(6px);
|
||||
-ms-transform: translateY(6px);
|
||||
transform: translateY(6px);
|
||||
-webkit-transition: -webkit-transform 0.25s;
|
||||
transition: transform 0.25s;
|
||||
-webkit-backface-visibility: hidden;
|
||||
will-change: transform; }
|
||||
.pswp__share-tooltip a {
|
||||
display: block;
|
||||
padding: 8px 12px;
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
line-height: 18px; }
|
||||
.pswp__share-tooltip a:hover {
|
||||
text-decoration: none;
|
||||
color: #000; }
|
||||
.pswp__share-tooltip a:first-child {
|
||||
/* round corners on the first/last list item */
|
||||
border-radius: 2px 2px 0 0; }
|
||||
.pswp__share-tooltip a:last-child {
|
||||
border-radius: 0 0 2px 2px; }
|
||||
|
||||
.pswp__share-modal--fade-in {
|
||||
opacity: 1; }
|
||||
.pswp__share-modal--fade-in .pswp__share-tooltip {
|
||||
-webkit-transform: translateY(0);
|
||||
-ms-transform: translateY(0);
|
||||
transform: translateY(0); }
|
||||
|
||||
/* increase size of share links on touch devices */
|
||||
.pswp--touch .pswp__share-tooltip a {
|
||||
padding: 16px 12px; }
|
||||
|
||||
a.pswp__share--facebook:before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
top: -12px;
|
||||
right: 15px;
|
||||
border: 6px solid transparent;
|
||||
border-bottom-color: #FFF;
|
||||
-webkit-pointer-events: none;
|
||||
-moz-pointer-events: none;
|
||||
pointer-events: none; }
|
||||
|
||||
a.pswp__share--facebook:hover {
|
||||
background: #3E5C9A;
|
||||
color: #FFF; }
|
||||
a.pswp__share--facebook:hover:before {
|
||||
border-bottom-color: #3E5C9A; }
|
||||
|
||||
a.pswp__share--twitter:hover {
|
||||
background: #55ACEE;
|
||||
color: #FFF; }
|
||||
|
||||
a.pswp__share--pinterest:hover {
|
||||
background: #CCC;
|
||||
color: #CE272D; }
|
||||
|
||||
a.pswp__share--download:hover {
|
||||
background: #DDD; }
|
||||
|
||||
/*
|
||||
|
||||
3. Index indicator ("1 of X" counter)
|
||||
|
||||
*/
|
||||
.pswp__counter {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 44px;
|
||||
font-size: 13px;
|
||||
line-height: 44px;
|
||||
color: #FFF;
|
||||
opacity: 0.75;
|
||||
padding: 0 10px; }
|
||||
|
||||
/*
|
||||
|
||||
4. Caption
|
||||
|
||||
*/
|
||||
.pswp__caption {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
min-height: 44px; }
|
||||
.pswp__caption small {
|
||||
font-size: 11px;
|
||||
color: #BBB; }
|
||||
|
||||
.pswp__caption__center {
|
||||
text-align: left;
|
||||
max-width: 420px;
|
||||
margin: 0 auto;
|
||||
font-size: 13px;
|
||||
padding: 10px;
|
||||
line-height: 20px;
|
||||
color: #CCC; }
|
||||
|
||||
.pswp__caption--empty {
|
||||
display: none; }
|
||||
|
||||
/* Fake caption element, used to calculate height of next/prev image */
|
||||
.pswp__caption--fake {
|
||||
visibility: hidden; }
|
||||
|
||||
/*
|
||||
|
||||
5. Loading indicator (preloader)
|
||||
|
||||
You can play with it here - http://codepen.io/dimsemenov/pen/yyBWoR
|
||||
|
||||
*/
|
||||
.pswp__preloader {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
margin-left: -22px;
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.25s ease-out;
|
||||
transition: opacity 0.25s ease-out;
|
||||
will-change: opacity;
|
||||
direction: ltr; }
|
||||
|
||||
.pswp__preloader__icn {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: 12px; }
|
||||
|
||||
.pswp__preloader--active {
|
||||
opacity: 1; }
|
||||
.pswp__preloader--active .pswp__preloader__icn {
|
||||
/* We use .gif in browsers that don't support CSS animation */
|
||||
background: url('https://motorradhandel.ch/extern/images/preloader.gif') 0 0 no-repeat; }
|
||||
|
||||
.pswp--css_animation .pswp__preloader--active {
|
||||
opacity: 1; }
|
||||
.pswp--css_animation .pswp__preloader--active .pswp__preloader__icn {
|
||||
-webkit-animation: clockwise 500ms linear infinite;
|
||||
animation: clockwise 500ms linear infinite; }
|
||||
.pswp--css_animation .pswp__preloader--active .pswp__preloader__donut {
|
||||
-webkit-animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite;
|
||||
animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite; }
|
||||
|
||||
.pswp--css_animation .pswp__preloader__icn {
|
||||
background: none;
|
||||
opacity: 0.75;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
top: 15px;
|
||||
margin: 0; }
|
||||
|
||||
.pswp--css_animation .pswp__preloader__cut {
|
||||
/*
|
||||
The idea of animating inner circle is based on Polymer ("material") loading indicator
|
||||
by Keanu Lee https://blog.keanulee.com/2014/10/20/the-tale-of-three-spinners.html
|
||||
*/
|
||||
position: relative;
|
||||
width: 7px;
|
||||
height: 14px;
|
||||
overflow: hidden; }
|
||||
|
||||
.pswp--css_animation .pswp__preloader__donut {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border: 2px solid #FFF;
|
||||
border-radius: 50%;
|
||||
border-left-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: none;
|
||||
margin: 0; }
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.pswp__preloader {
|
||||
position: relative;
|
||||
left: auto;
|
||||
top: auto;
|
||||
margin: 0;
|
||||
float: right; } }
|
||||
|
||||
@-webkit-keyframes clockwise {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg); }
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg); } }
|
||||
|
||||
@keyframes clockwise {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg); }
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg); } }
|
||||
|
||||
@-webkit-keyframes donut-rotate {
|
||||
0% {
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0); }
|
||||
50% {
|
||||
-webkit-transform: rotate(-140deg);
|
||||
transform: rotate(-140deg); }
|
||||
100% {
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0); } }
|
||||
|
||||
@keyframes donut-rotate {
|
||||
0% {
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0); }
|
||||
50% {
|
||||
-webkit-transform: rotate(-140deg);
|
||||
transform: rotate(-140deg); }
|
||||
100% {
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0); } }
|
||||
|
||||
/*
|
||||
|
||||
6. Additional styles
|
||||
|
||||
*/
|
||||
/* root element of UI */
|
||||
.pswp__ui {
|
||||
-webkit-font-smoothing: auto;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
z-index: 1550; }
|
||||
|
||||
/* top black bar with buttons and "1 of X" indicator */
|
||||
.pswp__top-bar {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 44px;
|
||||
width: 100%; }
|
||||
|
||||
.pswp__caption,
|
||||
.pswp__top-bar,
|
||||
.pswp--has_mouse .pswp__button--arrow--left,
|
||||
.pswp--has_mouse .pswp__button--arrow--right {
|
||||
-webkit-backface-visibility: hidden;
|
||||
will-change: opacity;
|
||||
-webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
|
||||
transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }
|
||||
|
||||
/* pswp--has_mouse class is added only when two subsequent mousemove events occur */
|
||||
.pswp--has_mouse .pswp__button--arrow--left,
|
||||
.pswp--has_mouse .pswp__button--arrow--right {
|
||||
visibility: visible; }
|
||||
|
||||
.pswp__top-bar,
|
||||
.pswp__caption {
|
||||
background-color: rgba(0, 0, 0, 0.5); }
|
||||
|
||||
/* pswp__ui--fit class is added when main image "fits" between top bar and bottom bar (caption) */
|
||||
.pswp__ui--fit .pswp__top-bar,
|
||||
.pswp__ui--fit .pswp__caption {
|
||||
background-color: rgba(0, 0, 0, 0.3); }
|
||||
|
||||
/* pswp__ui--idle class is added when mouse isn't moving for several seconds (JS option timeToIdle) */
|
||||
.pswp__ui--idle .pswp__top-bar {
|
||||
opacity: 0; }
|
||||
|
||||
.pswp__ui--idle .pswp__button--arrow--left,
|
||||
.pswp__ui--idle .pswp__button--arrow--right {
|
||||
opacity: 0; }
|
||||
|
||||
/*
|
||||
pswp__ui--hidden class is added when controls are hidden
|
||||
e.g. when user taps to toggle visibility of controls
|
||||
*/
|
||||
.pswp__ui--hidden .pswp__top-bar,
|
||||
.pswp__ui--hidden .pswp__caption,
|
||||
.pswp__ui--hidden .pswp__button--arrow--left,
|
||||
.pswp__ui--hidden .pswp__button--arrow--right {
|
||||
/* Force paint & create composition layer for controls. */
|
||||
opacity: 0.001; }
|
||||
|
||||
/* pswp__ui--one-slide class is added when there is just one item in gallery */
|
||||
.pswp__ui--one-slide .pswp__button--arrow--left,
|
||||
.pswp__ui--one-slide .pswp__button--arrow--right,
|
||||
.pswp__ui--one-slide .pswp__counter {
|
||||
display: none; }
|
||||
|
||||
.pswp__element--disabled {
|
||||
display: none !important; }
|
||||
|
||||
.pswp--minimal--dark .pswp__top-bar {
|
||||
background: none; }
|
||||
BIN
Binary file not shown.
|
After Width: | Height: | Size: 547 B |
+1
@@ -0,0 +1 @@
|
||||
<svg width="264" height="88" viewBox="0 0 264 88" xmlns="http://www.w3.org/2000/svg"><title>default-skin 2</title><g fill="none" fill-rule="evenodd"><g><path d="M67.002 59.5v3.768c-6.307.84-9.184 5.75-10.002 9.732 2.22-2.83 5.564-5.098 10.002-5.098V71.5L73 65.585 67.002 59.5z" id="Shape" fill="#fff"/><g fill="#fff"><path d="M13 29v-5h2v3h3v2h-5zM13 15h5v2h-3v3h-2v-5zM31 15v5h-2v-3h-3v-2h5zM31 29h-5v-2h3v-3h2v5z" id="Shape"/></g><g fill="#fff"><path d="M62 24v5h-2v-3h-3v-2h5zM62 20h-5v-2h3v-3h2v5zM70 20v-5h2v3h3v2h-5zM70 24h5v2h-3v3h-2v-5z"/></g><path d="M20.586 66l-5.656-5.656 1.414-1.414L22 64.586l5.656-5.656 1.414 1.414L23.414 66l5.656 5.656-1.414 1.414L22 67.414l-5.656 5.656-1.414-1.414L20.586 66z" fill="#fff"/><path d="M111.785 65.03L110 63.5l3-3.5h-10v-2h10l-3-3.5 1.785-1.468L117 59l-5.215 6.03z" fill="#fff"/><path d="M152.215 65.03L154 63.5l-3-3.5h10v-2h-10l3-3.5-1.785-1.468L147 59l5.215 6.03z" fill="#fff"/><g><path id="Rectangle-11" fill="#fff" d="M160.957 28.543l-3.25-3.25-1.413 1.414 3.25 3.25z"/><path d="M152.5 27c3.038 0 5.5-2.462 5.5-5.5s-2.462-5.5-5.5-5.5-5.5 2.462-5.5 5.5 2.462 5.5 5.5 5.5z" id="Oval-1" stroke="#fff" stroke-width="1.5"/><path fill="#fff" d="M150 21h5v1h-5z"/></g><g><path d="M116.957 28.543l-1.414 1.414-3.25-3.25 1.414-1.414 3.25 3.25z" fill="#fff"/><path d="M108.5 27c3.038 0 5.5-2.462 5.5-5.5s-2.462-5.5-5.5-5.5-5.5 2.462-5.5 5.5 2.462 5.5 5.5 5.5z" stroke="#fff" stroke-width="1.5"/><path fill="#fff" d="M106 21h5v1h-5z"/><path fill="#fff" d="M109.043 19.008l-.085 5-1-.017.085-5z"/></g></g></g></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 866 B |
+861
@@ -0,0 +1,861 @@
|
||||
/*! PhotoSwipe Default UI - 4.1.3 - 2019-01-08
|
||||
* http://photoswipe.com
|
||||
* Copyright (c) 2019 Dmitry Semenov; */
|
||||
/**
|
||||
*
|
||||
* UI on top of main sliding area (caption, arrows, close button, etc.).
|
||||
* Built just using public methods/properties of PhotoSwipe.
|
||||
*
|
||||
*/
|
||||
(function (root, factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
define(factory);
|
||||
} else if (typeof exports === 'object') {
|
||||
module.exports = factory();
|
||||
} else {
|
||||
root.PhotoSwipeUI_Default = factory();
|
||||
}
|
||||
})(this, function () {
|
||||
|
||||
'use strict';
|
||||
|
||||
|
||||
|
||||
var PhotoSwipeUI_Default =
|
||||
function(pswp, framework) {
|
||||
|
||||
var ui = this;
|
||||
var _overlayUIUpdated = false,
|
||||
_controlsVisible = true,
|
||||
_fullscrenAPI,
|
||||
_controls,
|
||||
_captionContainer,
|
||||
_fakeCaptionContainer,
|
||||
_indexIndicator,
|
||||
_shareButton,
|
||||
_shareModal,
|
||||
_shareModalHidden = true,
|
||||
_initalCloseOnScrollValue,
|
||||
_isIdle,
|
||||
_listen,
|
||||
|
||||
_loadingIndicator,
|
||||
_loadingIndicatorHidden,
|
||||
_loadingIndicatorTimeout,
|
||||
|
||||
_galleryHasOneSlide,
|
||||
|
||||
_options,
|
||||
_defaultUIOptions = {
|
||||
barsSize: {top:44, bottom:'auto'},
|
||||
closeElClasses: ['item', 'caption', 'zoom-wrap', 'ui', 'top-bar'],
|
||||
timeToIdle: 4000,
|
||||
timeToIdleOutside: 1000,
|
||||
loadingIndicatorDelay: 1000, // 2s
|
||||
|
||||
addCaptionHTMLFn: function(item, captionEl /*, isFake */) {
|
||||
if(!item.title) {
|
||||
captionEl.children[0].innerHTML = '';
|
||||
return false;
|
||||
}
|
||||
captionEl.children[0].innerHTML = item.title;
|
||||
return true;
|
||||
},
|
||||
|
||||
closeEl:true,
|
||||
captionEl: true,
|
||||
fullscreenEl: true,
|
||||
zoomEl: true,
|
||||
shareEl: false,
|
||||
counterEl: true,
|
||||
arrowEl: true,
|
||||
preloaderEl: true,
|
||||
|
||||
tapToClose: false,
|
||||
tapToToggleControls: true,
|
||||
|
||||
clickToCloseNonZoomable: true,
|
||||
|
||||
shareButtons: [
|
||||
{id:'facebook', label:'Share on Facebook', url:'https://www.facebook.com/sharer/sharer.php?u={{url}}'},
|
||||
{id:'twitter', label:'Tweet', url:'https://twitter.com/intent/tweet?text={{text}}&url={{url}}'},
|
||||
{id:'pinterest', label:'Pin it', url:'http://www.pinterest.com/pin/create/button/'+
|
||||
'?url={{url}}&media={{image_url}}&description={{text}}'},
|
||||
{id:'download', label:'Download image', url:'{{raw_image_url}}', download:true}
|
||||
],
|
||||
getImageURLForShare: function( /* shareButtonData */ ) {
|
||||
return pswp.currItem.src || '';
|
||||
},
|
||||
getPageURLForShare: function( /* shareButtonData */ ) {
|
||||
return window.location.href;
|
||||
},
|
||||
getTextForShare: function( /* shareButtonData */ ) {
|
||||
return pswp.currItem.title || '';
|
||||
},
|
||||
|
||||
indexIndicatorSep: ' / ',
|
||||
fitControlsWidth: 1200
|
||||
|
||||
},
|
||||
_blockControlsTap,
|
||||
_blockControlsTapTimeout;
|
||||
|
||||
|
||||
|
||||
var _onControlsTap = function(e) {
|
||||
if(_blockControlsTap) {
|
||||
return true;
|
||||
}
|
||||
|
||||
|
||||
e = e || window.event;
|
||||
|
||||
if(_options.timeToIdle && _options.mouseUsed && !_isIdle) {
|
||||
// reset idle timer
|
||||
_onIdleMouseMove();
|
||||
}
|
||||
|
||||
|
||||
var target = e.target || e.srcElement,
|
||||
uiElement,
|
||||
clickedClass = target.getAttribute('class') || '',
|
||||
found;
|
||||
|
||||
for(var i = 0; i < _uiElements.length; i++) {
|
||||
uiElement = _uiElements[i];
|
||||
if(uiElement.onTap && clickedClass.indexOf('pswp__' + uiElement.name ) > -1 ) {
|
||||
uiElement.onTap();
|
||||
found = true;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
if(found) {
|
||||
if(e.stopPropagation) {
|
||||
e.stopPropagation();
|
||||
}
|
||||
_blockControlsTap = true;
|
||||
|
||||
// Some versions of Android don't prevent ghost click event
|
||||
// when preventDefault() was called on touchstart and/or touchend.
|
||||
//
|
||||
// This happens on v4.3, 4.2, 4.1,
|
||||
// older versions strangely work correctly,
|
||||
// but just in case we add delay on all of them)
|
||||
var tapDelay = framework.features.isOldAndroid ? 600 : 30;
|
||||
_blockControlsTapTimeout = setTimeout(function() {
|
||||
_blockControlsTap = false;
|
||||
}, tapDelay);
|
||||
}
|
||||
|
||||
},
|
||||
_fitControlsInViewport = function() {
|
||||
return !pswp.likelyTouchDevice || _options.mouseUsed || screen.width > _options.fitControlsWidth;
|
||||
},
|
||||
_togglePswpClass = function(el, cName, add) {
|
||||
framework[ (add ? 'add' : 'remove') + 'Class' ](el, 'pswp__' + cName);
|
||||
},
|
||||
|
||||
// add class when there is just one item in the gallery
|
||||
// (by default it hides left/right arrows and 1ofX counter)
|
||||
_countNumItems = function() {
|
||||
var hasOneSlide = (_options.getNumItemsFn() === 1);
|
||||
|
||||
if(hasOneSlide !== _galleryHasOneSlide) {
|
||||
_togglePswpClass(_controls, 'ui--one-slide', hasOneSlide);
|
||||
_galleryHasOneSlide = hasOneSlide;
|
||||
}
|
||||
},
|
||||
_toggleShareModalClass = function() {
|
||||
_togglePswpClass(_shareModal, 'share-modal--hidden', _shareModalHidden);
|
||||
},
|
||||
_toggleShareModal = function() {
|
||||
|
||||
_shareModalHidden = !_shareModalHidden;
|
||||
|
||||
|
||||
if(!_shareModalHidden) {
|
||||
_toggleShareModalClass();
|
||||
setTimeout(function() {
|
||||
if(!_shareModalHidden) {
|
||||
framework.addClass(_shareModal, 'pswp__share-modal--fade-in');
|
||||
}
|
||||
}, 30);
|
||||
} else {
|
||||
framework.removeClass(_shareModal, 'pswp__share-modal--fade-in');
|
||||
setTimeout(function() {
|
||||
if(_shareModalHidden) {
|
||||
_toggleShareModalClass();
|
||||
}
|
||||
}, 300);
|
||||
}
|
||||
|
||||
if(!_shareModalHidden) {
|
||||
_updateShareURLs();
|
||||
}
|
||||
return false;
|
||||
},
|
||||
|
||||
_openWindowPopup = function(e) {
|
||||
e = e || window.event;
|
||||
var target = e.target || e.srcElement;
|
||||
|
||||
pswp.shout('shareLinkClick', e, target);
|
||||
|
||||
if(!target.href) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if( target.hasAttribute('download') ) {
|
||||
return true;
|
||||
}
|
||||
|
||||
window.open(target.href, 'pswp_share', 'scrollbars=yes,resizable=yes,toolbar=no,'+
|
||||
'location=yes,width=550,height=420,top=100,left=' +
|
||||
(window.screen ? Math.round(screen.width / 2 - 275) : 100) );
|
||||
|
||||
if(!_shareModalHidden) {
|
||||
_toggleShareModal();
|
||||
}
|
||||
|
||||
return false;
|
||||
},
|
||||
_updateShareURLs = function() {
|
||||
var shareButtonOut = '',
|
||||
shareButtonData,
|
||||
shareURL,
|
||||
image_url,
|
||||
page_url,
|
||||
share_text;
|
||||
|
||||
for(var i = 0; i < _options.shareButtons.length; i++) {
|
||||
shareButtonData = _options.shareButtons[i];
|
||||
|
||||
image_url = _options.getImageURLForShare(shareButtonData);
|
||||
page_url = _options.getPageURLForShare(shareButtonData);
|
||||
share_text = _options.getTextForShare(shareButtonData);
|
||||
|
||||
shareURL = shareButtonData.url.replace('{{url}}', encodeURIComponent(page_url) )
|
||||
.replace('{{image_url}}', encodeURIComponent(image_url) )
|
||||
.replace('{{raw_image_url}}', image_url )
|
||||
.replace('{{text}}', encodeURIComponent(share_text) );
|
||||
|
||||
shareButtonOut += '<a href="' + shareURL + '" target="_blank" '+
|
||||
'class="pswp__share--' + shareButtonData.id + '"' +
|
||||
(shareButtonData.download ? 'download' : '') + '>' +
|
||||
shareButtonData.label + '</a>';
|
||||
|
||||
if(_options.parseShareButtonOut) {
|
||||
shareButtonOut = _options.parseShareButtonOut(shareButtonData, shareButtonOut);
|
||||
}
|
||||
}
|
||||
_shareModal.children[0].innerHTML = shareButtonOut;
|
||||
_shareModal.children[0].onclick = _openWindowPopup;
|
||||
|
||||
},
|
||||
_hasCloseClass = function(target) {
|
||||
for(var i = 0; i < _options.closeElClasses.length; i++) {
|
||||
if( framework.hasClass(target, 'pswp__' + _options.closeElClasses[i]) ) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
},
|
||||
_idleInterval,
|
||||
_idleTimer,
|
||||
_idleIncrement = 0,
|
||||
_onIdleMouseMove = function() {
|
||||
clearTimeout(_idleTimer);
|
||||
_idleIncrement = 0;
|
||||
if(_isIdle) {
|
||||
ui.setIdle(false);
|
||||
}
|
||||
},
|
||||
_onMouseLeaveWindow = function(e) {
|
||||
e = e ? e : window.event;
|
||||
var from = e.relatedTarget || e.toElement;
|
||||
if (!from || from.nodeName === 'HTML') {
|
||||
clearTimeout(_idleTimer);
|
||||
_idleTimer = setTimeout(function() {
|
||||
ui.setIdle(true);
|
||||
}, _options.timeToIdleOutside);
|
||||
}
|
||||
},
|
||||
_setupFullscreenAPI = function() {
|
||||
if(_options.fullscreenEl && !framework.features.isOldAndroid) {
|
||||
if(!_fullscrenAPI) {
|
||||
_fullscrenAPI = ui.getFullscreenAPI();
|
||||
}
|
||||
if(_fullscrenAPI) {
|
||||
framework.bind(document, _fullscrenAPI.eventK, ui.updateFullscreen);
|
||||
ui.updateFullscreen();
|
||||
framework.addClass(pswp.template, 'pswp--supports-fs');
|
||||
} else {
|
||||
framework.removeClass(pswp.template, 'pswp--supports-fs');
|
||||
}
|
||||
}
|
||||
},
|
||||
_setupLoadingIndicator = function() {
|
||||
// Setup loading indicator
|
||||
if(_options.preloaderEl) {
|
||||
|
||||
_toggleLoadingIndicator(true);
|
||||
|
||||
_listen('beforeChange', function() {
|
||||
|
||||
clearTimeout(_loadingIndicatorTimeout);
|
||||
|
||||
// display loading indicator with delay
|
||||
_loadingIndicatorTimeout = setTimeout(function() {
|
||||
|
||||
if(pswp.currItem && pswp.currItem.loading) {
|
||||
|
||||
if( !pswp.allowProgressiveImg() || (pswp.currItem.img && !pswp.currItem.img.naturalWidth) ) {
|
||||
// show preloader if progressive loading is not enabled,
|
||||
// or image width is not defined yet (because of slow connection)
|
||||
_toggleLoadingIndicator(false);
|
||||
// items-controller.js function allowProgressiveImg
|
||||
}
|
||||
|
||||
} else {
|
||||
_toggleLoadingIndicator(true); // hide preloader
|
||||
}
|
||||
|
||||
}, _options.loadingIndicatorDelay);
|
||||
|
||||
});
|
||||
_listen('imageLoadComplete', function(index, item) {
|
||||
if(pswp.currItem === item) {
|
||||
_toggleLoadingIndicator(true);
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
},
|
||||
_toggleLoadingIndicator = function(hide) {
|
||||
if( _loadingIndicatorHidden !== hide ) {
|
||||
_togglePswpClass(_loadingIndicator, 'preloader--active', !hide);
|
||||
_loadingIndicatorHidden = hide;
|
||||
}
|
||||
},
|
||||
_applyNavBarGaps = function(item) {
|
||||
var gap = item.vGap;
|
||||
|
||||
if( _fitControlsInViewport() ) {
|
||||
|
||||
var bars = _options.barsSize;
|
||||
if(_options.captionEl && bars.bottom === 'auto') {
|
||||
if(!_fakeCaptionContainer) {
|
||||
_fakeCaptionContainer = framework.createEl('pswp__caption pswp__caption--fake');
|
||||
_fakeCaptionContainer.appendChild( framework.createEl('pswp__caption__center') );
|
||||
_controls.insertBefore(_fakeCaptionContainer, _captionContainer);
|
||||
framework.addClass(_controls, 'pswp__ui--fit');
|
||||
}
|
||||
if( _options.addCaptionHTMLFn(item, _fakeCaptionContainer, true) ) {
|
||||
|
||||
var captionSize = _fakeCaptionContainer.clientHeight;
|
||||
gap.bottom = parseInt(captionSize,10) || 44;
|
||||
} else {
|
||||
gap.bottom = bars.top; // if no caption, set size of bottom gap to size of top
|
||||
}
|
||||
} else {
|
||||
gap.bottom = bars.bottom === 'auto' ? 0 : bars.bottom;
|
||||
}
|
||||
|
||||
// height of top bar is static, no need to calculate it
|
||||
gap.top = bars.top;
|
||||
} else {
|
||||
gap.top = gap.bottom = 0;
|
||||
}
|
||||
},
|
||||
_setupIdle = function() {
|
||||
// Hide controls when mouse is used
|
||||
if(_options.timeToIdle) {
|
||||
_listen('mouseUsed', function() {
|
||||
|
||||
framework.bind(document, 'mousemove', _onIdleMouseMove);
|
||||
framework.bind(document, 'mouseout', _onMouseLeaveWindow);
|
||||
|
||||
_idleInterval = setInterval(function() {
|
||||
_idleIncrement++;
|
||||
if(_idleIncrement === 2) {
|
||||
ui.setIdle(true);
|
||||
}
|
||||
}, _options.timeToIdle / 2);
|
||||
});
|
||||
}
|
||||
},
|
||||
_setupHidingControlsDuringGestures = function() {
|
||||
|
||||
// Hide controls on vertical drag
|
||||
_listen('onVerticalDrag', function(now) {
|
||||
if(_controlsVisible && now < 0.95) {
|
||||
ui.hideControls();
|
||||
} else if(!_controlsVisible && now >= 0.95) {
|
||||
ui.showControls();
|
||||
}
|
||||
});
|
||||
|
||||
// Hide controls when pinching to close
|
||||
var pinchControlsHidden;
|
||||
_listen('onPinchClose' , function(now) {
|
||||
if(_controlsVisible && now < 0.9) {
|
||||
ui.hideControls();
|
||||
pinchControlsHidden = true;
|
||||
} else if(pinchControlsHidden && !_controlsVisible && now > 0.9) {
|
||||
ui.showControls();
|
||||
}
|
||||
});
|
||||
|
||||
_listen('zoomGestureEnded', function() {
|
||||
pinchControlsHidden = false;
|
||||
if(pinchControlsHidden && !_controlsVisible) {
|
||||
ui.showControls();
|
||||
}
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
|
||||
|
||||
var _uiElements = [
|
||||
{
|
||||
name: 'caption',
|
||||
option: 'captionEl',
|
||||
onInit: function(el) {
|
||||
_captionContainer = el;
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'share-modal',
|
||||
option: 'shareEl',
|
||||
onInit: function(el) {
|
||||
_shareModal = el;
|
||||
},
|
||||
onTap: function() {
|
||||
_toggleShareModal();
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'button--share',
|
||||
option: 'shareEl',
|
||||
onInit: function(el) {
|
||||
_shareButton = el;
|
||||
},
|
||||
onTap: function() {
|
||||
_toggleShareModal();
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'button--zoom',
|
||||
option: 'zoomEl',
|
||||
onTap: pswp.toggleDesktopZoom
|
||||
},
|
||||
{
|
||||
name: 'counter',
|
||||
option: 'counterEl',
|
||||
onInit: function(el) {
|
||||
_indexIndicator = el;
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'button--close',
|
||||
option: 'closeEl',
|
||||
onTap: pswp.close
|
||||
},
|
||||
{
|
||||
name: 'button--arrow--left',
|
||||
option: 'arrowEl',
|
||||
onTap: pswp.prev
|
||||
},
|
||||
{
|
||||
name: 'button--arrow--right',
|
||||
option: 'arrowEl',
|
||||
onTap: pswp.next
|
||||
},
|
||||
{
|
||||
name: 'button--fs',
|
||||
option: 'fullscreenEl',
|
||||
onTap: function() {
|
||||
if(_fullscrenAPI.isFullscreen()) {
|
||||
_fullscrenAPI.exit();
|
||||
} else {
|
||||
_fullscrenAPI.enter();
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'preloader',
|
||||
option: 'preloaderEl',
|
||||
onInit: function(el) {
|
||||
_loadingIndicator = el;
|
||||
}
|
||||
}
|
||||
|
||||
];
|
||||
|
||||
var _setupUIElements = function() {
|
||||
var item,
|
||||
classAttr,
|
||||
uiElement;
|
||||
|
||||
var loopThroughChildElements = function(sChildren) {
|
||||
if(!sChildren) {
|
||||
return;
|
||||
}
|
||||
|
||||
var l = sChildren.length;
|
||||
for(var i = 0; i < l; i++) {
|
||||
item = sChildren[i];
|
||||
classAttr = item.className;
|
||||
|
||||
for(var a = 0; a < _uiElements.length; a++) {
|
||||
uiElement = _uiElements[a];
|
||||
|
||||
if(classAttr.indexOf('pswp__' + uiElement.name) > -1 ) {
|
||||
|
||||
if( _options[uiElement.option] ) { // if element is not disabled from options
|
||||
|
||||
framework.removeClass(item, 'pswp__element--disabled');
|
||||
if(uiElement.onInit) {
|
||||
uiElement.onInit(item);
|
||||
}
|
||||
|
||||
//item.style.display = 'block';
|
||||
} else {
|
||||
framework.addClass(item, 'pswp__element--disabled');
|
||||
//item.style.display = 'none';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
loopThroughChildElements(_controls.children);
|
||||
|
||||
var topBar = framework.getChildByClass(_controls, 'pswp__top-bar');
|
||||
if(topBar) {
|
||||
loopThroughChildElements( topBar.children );
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
ui.init = function() {
|
||||
|
||||
// extend options
|
||||
framework.extend(pswp.options, _defaultUIOptions, true);
|
||||
|
||||
// create local link for fast access
|
||||
_options = pswp.options;
|
||||
|
||||
// find pswp__ui element
|
||||
_controls = framework.getChildByClass(pswp.scrollWrap, 'pswp__ui');
|
||||
|
||||
// create local link
|
||||
_listen = pswp.listen;
|
||||
|
||||
|
||||
_setupHidingControlsDuringGestures();
|
||||
|
||||
// update controls when slides change
|
||||
_listen('beforeChange', ui.update);
|
||||
|
||||
// toggle zoom on double-tap
|
||||
_listen('doubleTap', function(point) {
|
||||
var initialZoomLevel = pswp.currItem.initialZoomLevel;
|
||||
if(pswp.getZoomLevel() !== initialZoomLevel) {
|
||||
pswp.zoomTo(initialZoomLevel, point, 333);
|
||||
} else {
|
||||
pswp.zoomTo(_options.getDoubleTapZoom(false, pswp.currItem), point, 333);
|
||||
}
|
||||
});
|
||||
|
||||
// Allow text selection in caption
|
||||
_listen('preventDragEvent', function(e, isDown, preventObj) {
|
||||
var t = e.target || e.srcElement;
|
||||
if(
|
||||
t &&
|
||||
t.getAttribute('class') && e.type.indexOf('mouse') > -1 &&
|
||||
( t.getAttribute('class').indexOf('__caption') > 0 || (/(SMALL|STRONG|EM)/i).test(t.tagName) )
|
||||
) {
|
||||
preventObj.prevent = false;
|
||||
}
|
||||
});
|
||||
|
||||
// bind events for UI
|
||||
_listen('bindEvents', function() {
|
||||
framework.bind(_controls, 'pswpTap click', _onControlsTap);
|
||||
framework.bind(pswp.scrollWrap, 'pswpTap', ui.onGlobalTap);
|
||||
|
||||
if(!pswp.likelyTouchDevice) {
|
||||
framework.bind(pswp.scrollWrap, 'mouseover', ui.onMouseOver);
|
||||
}
|
||||
});
|
||||
|
||||
// unbind events for UI
|
||||
_listen('unbindEvents', function() {
|
||||
if(!_shareModalHidden) {
|
||||
_toggleShareModal();
|
||||
}
|
||||
|
||||
if(_idleInterval) {
|
||||
clearInterval(_idleInterval);
|
||||
}
|
||||
framework.unbind(document, 'mouseout', _onMouseLeaveWindow);
|
||||
framework.unbind(document, 'mousemove', _onIdleMouseMove);
|
||||
framework.unbind(_controls, 'pswpTap click', _onControlsTap);
|
||||
framework.unbind(pswp.scrollWrap, 'pswpTap', ui.onGlobalTap);
|
||||
framework.unbind(pswp.scrollWrap, 'mouseover', ui.onMouseOver);
|
||||
|
||||
if(_fullscrenAPI) {
|
||||
framework.unbind(document, _fullscrenAPI.eventK, ui.updateFullscreen);
|
||||
if(_fullscrenAPI.isFullscreen()) {
|
||||
_options.hideAnimationDuration = 0;
|
||||
_fullscrenAPI.exit();
|
||||
}
|
||||
_fullscrenAPI = null;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// clean up things when gallery is destroyed
|
||||
_listen('destroy', function() {
|
||||
if(_options.captionEl) {
|
||||
if(_fakeCaptionContainer) {
|
||||
_controls.removeChild(_fakeCaptionContainer);
|
||||
}
|
||||
framework.removeClass(_captionContainer, 'pswp__caption--empty');
|
||||
}
|
||||
|
||||
if(_shareModal) {
|
||||
_shareModal.children[0].onclick = null;
|
||||
}
|
||||
framework.removeClass(_controls, 'pswp__ui--over-close');
|
||||
framework.addClass( _controls, 'pswp__ui--hidden');
|
||||
ui.setIdle(false);
|
||||
});
|
||||
|
||||
|
||||
if(!_options.showAnimationDuration) {
|
||||
framework.removeClass( _controls, 'pswp__ui--hidden');
|
||||
}
|
||||
_listen('initialZoomIn', function() {
|
||||
if(_options.showAnimationDuration) {
|
||||
framework.removeClass( _controls, 'pswp__ui--hidden');
|
||||
}
|
||||
});
|
||||
_listen('initialZoomOut', function() {
|
||||
framework.addClass( _controls, 'pswp__ui--hidden');
|
||||
});
|
||||
|
||||
_listen('parseVerticalMargin', _applyNavBarGaps);
|
||||
|
||||
_setupUIElements();
|
||||
|
||||
if(_options.shareEl && _shareButton && _shareModal) {
|
||||
_shareModalHidden = true;
|
||||
}
|
||||
|
||||
_countNumItems();
|
||||
|
||||
_setupIdle();
|
||||
|
||||
_setupFullscreenAPI();
|
||||
|
||||
_setupLoadingIndicator();
|
||||
};
|
||||
|
||||
ui.setIdle = function(isIdle) {
|
||||
_isIdle = isIdle;
|
||||
_togglePswpClass(_controls, 'ui--idle', isIdle);
|
||||
};
|
||||
|
||||
ui.update = function() {
|
||||
// Don't update UI if it's hidden
|
||||
if(_controlsVisible && pswp.currItem) {
|
||||
|
||||
ui.updateIndexIndicator();
|
||||
|
||||
if(_options.captionEl) {
|
||||
_options.addCaptionHTMLFn(pswp.currItem, _captionContainer);
|
||||
|
||||
_togglePswpClass(_captionContainer, 'caption--empty', !pswp.currItem.title);
|
||||
}
|
||||
|
||||
_overlayUIUpdated = true;
|
||||
|
||||
} else {
|
||||
_overlayUIUpdated = false;
|
||||
}
|
||||
|
||||
if(!_shareModalHidden) {
|
||||
_toggleShareModal();
|
||||
}
|
||||
|
||||
_countNumItems();
|
||||
};
|
||||
|
||||
ui.updateFullscreen = function(e) {
|
||||
|
||||
if(e) {
|
||||
// some browsers change window scroll position during the fullscreen
|
||||
// so PhotoSwipe updates it just in case
|
||||
setTimeout(function() {
|
||||
pswp.setScrollOffset( 0, framework.getScrollY() );
|
||||
}, 50);
|
||||
}
|
||||
|
||||
// toogle pswp--fs class on root element
|
||||
framework[ (_fullscrenAPI.isFullscreen() ? 'add' : 'remove') + 'Class' ](pswp.template, 'pswp--fs');
|
||||
};
|
||||
|
||||
ui.updateIndexIndicator = function() {
|
||||
if(_options.counterEl) {
|
||||
_indexIndicator.innerHTML = (pswp.getCurrentIndex()+1) +
|
||||
_options.indexIndicatorSep +
|
||||
_options.getNumItemsFn();
|
||||
}
|
||||
};
|
||||
|
||||
ui.onGlobalTap = function(e) {
|
||||
e = e || window.event;
|
||||
var target = e.target || e.srcElement;
|
||||
|
||||
if(_blockControlsTap) {
|
||||
return;
|
||||
}
|
||||
|
||||
if(e.detail && e.detail.pointerType === 'mouse') {
|
||||
|
||||
// close gallery if clicked outside of the image
|
||||
if(_hasCloseClass(target)) {
|
||||
pswp.close();
|
||||
return;
|
||||
}
|
||||
|
||||
if(framework.hasClass(target, 'pswp__img')) {
|
||||
if(pswp.getZoomLevel() === 1 && pswp.getZoomLevel() <= pswp.currItem.fitRatio) {
|
||||
if(_options.clickToCloseNonZoomable) {
|
||||
pswp.close();
|
||||
}
|
||||
} else {
|
||||
pswp.toggleDesktopZoom(e.detail.releasePoint);
|
||||
}
|
||||
}
|
||||
|
||||
} else {
|
||||
|
||||
// tap anywhere (except buttons) to toggle visibility of controls
|
||||
if(_options.tapToToggleControls) {
|
||||
if(_controlsVisible) {
|
||||
ui.hideControls();
|
||||
} else {
|
||||
ui.showControls();
|
||||
}
|
||||
}
|
||||
|
||||
// tap to close gallery
|
||||
if(_options.tapToClose && (framework.hasClass(target, 'pswp__img') || _hasCloseClass(target)) ) {
|
||||
pswp.close();
|
||||
return;
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
ui.onMouseOver = function(e) {
|
||||
e = e || window.event;
|
||||
var target = e.target || e.srcElement;
|
||||
|
||||
// add class when mouse is over an element that should close the gallery
|
||||
_togglePswpClass(_controls, 'ui--over-close', _hasCloseClass(target));
|
||||
};
|
||||
|
||||
ui.hideControls = function() {
|
||||
framework.addClass(_controls,'pswp__ui--hidden');
|
||||
_controlsVisible = false;
|
||||
};
|
||||
|
||||
ui.showControls = function() {
|
||||
_controlsVisible = true;
|
||||
if(!_overlayUIUpdated) {
|
||||
ui.update();
|
||||
}
|
||||
framework.removeClass(_controls,'pswp__ui--hidden');
|
||||
};
|
||||
|
||||
ui.supportsFullscreen = function() {
|
||||
var d = document;
|
||||
return !!(d.exitFullscreen || d.mozCancelFullScreen || d.webkitExitFullscreen || d.msExitFullscreen);
|
||||
};
|
||||
|
||||
ui.getFullscreenAPI = function() {
|
||||
var dE = document.documentElement,
|
||||
api,
|
||||
tF = 'fullscreenchange';
|
||||
|
||||
if (dE.requestFullscreen) {
|
||||
api = {
|
||||
enterK: 'requestFullscreen',
|
||||
exitK: 'exitFullscreen',
|
||||
elementK: 'fullscreenElement',
|
||||
eventK: tF
|
||||
};
|
||||
|
||||
} else if(dE.mozRequestFullScreen ) {
|
||||
api = {
|
||||
enterK: 'mozRequestFullScreen',
|
||||
exitK: 'mozCancelFullScreen',
|
||||
elementK: 'mozFullScreenElement',
|
||||
eventK: 'moz' + tF
|
||||
};
|
||||
|
||||
|
||||
|
||||
} else if(dE.webkitRequestFullscreen) {
|
||||
api = {
|
||||
enterK: 'webkitRequestFullscreen',
|
||||
exitK: 'webkitExitFullscreen',
|
||||
elementK: 'webkitFullscreenElement',
|
||||
eventK: 'webkit' + tF
|
||||
};
|
||||
|
||||
} else if(dE.msRequestFullscreen) {
|
||||
api = {
|
||||
enterK: 'msRequestFullscreen',
|
||||
exitK: 'msExitFullscreen',
|
||||
elementK: 'msFullscreenElement',
|
||||
eventK: 'MSFullscreenChange'
|
||||
};
|
||||
}
|
||||
|
||||
if(api) {
|
||||
api.enter = function() {
|
||||
// disable close-on-scroll in fullscreen
|
||||
_initalCloseOnScrollValue = _options.closeOnScroll;
|
||||
_options.closeOnScroll = false;
|
||||
|
||||
if(this.enterK === 'webkitRequestFullscreen') {
|
||||
pswp.template[this.enterK]( Element.ALLOW_KEYBOARD_INPUT );
|
||||
} else {
|
||||
return pswp.template[this.enterK]();
|
||||
}
|
||||
};
|
||||
api.exit = function() {
|
||||
_options.closeOnScroll = _initalCloseOnScrollValue;
|
||||
|
||||
return document[this.exitK]();
|
||||
|
||||
};
|
||||
api.isFullscreen = function() { return document[this.elementK]; };
|
||||
}
|
||||
|
||||
return api;
|
||||
};
|
||||
|
||||
|
||||
|
||||
};
|
||||
return PhotoSwipeUI_Default;
|
||||
|
||||
|
||||
});
|
||||
+179
@@ -0,0 +1,179 @@
|
||||
/*! PhotoSwipe main CSS by Dmitry Semenov | photoswipe.com | MIT license */
|
||||
/*
|
||||
Styles for basic PhotoSwipe functionality (sliding area, open/close transitions)
|
||||
*/
|
||||
/* pswp = photoswipe */
|
||||
.pswp {
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
overflow: hidden;
|
||||
-ms-touch-action: none;
|
||||
touch-action: none;
|
||||
z-index: 1500;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
/* create separate layer, to avoid paint on window.onscroll in webkit/blink */
|
||||
-webkit-backface-visibility: hidden;
|
||||
outline: none; }
|
||||
.pswp * {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box; }
|
||||
.pswp img {
|
||||
max-width: none; }
|
||||
|
||||
/* style is added when JS option showHideOpacity is set to true */
|
||||
.pswp--animate_opacity {
|
||||
/* 0.001, because opacity:0 doesn't trigger Paint action, which causes lag at start of transition */
|
||||
opacity: 0.001;
|
||||
will-change: opacity;
|
||||
/* for open/close transition */
|
||||
-webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
|
||||
transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }
|
||||
|
||||
.pswp--open {
|
||||
display: block; }
|
||||
|
||||
.pswp--zoom-allowed .pswp__img {
|
||||
/* autoprefixer: off */
|
||||
cursor: -webkit-zoom-in;
|
||||
cursor: -moz-zoom-in;
|
||||
cursor: zoom-in; }
|
||||
|
||||
.pswp--zoomed-in .pswp__img {
|
||||
/* autoprefixer: off */
|
||||
cursor: -webkit-grab;
|
||||
cursor: -moz-grab;
|
||||
cursor: grab; }
|
||||
|
||||
.pswp--dragging .pswp__img {
|
||||
/* autoprefixer: off */
|
||||
cursor: -webkit-grabbing;
|
||||
cursor: -moz-grabbing;
|
||||
cursor: grabbing; }
|
||||
|
||||
/*
|
||||
Background is added as a separate element.
|
||||
As animating opacity is much faster than animating rgba() background-color.
|
||||
*/
|
||||
.pswp__bg {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #000;
|
||||
opacity: 0;
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
-webkit-backface-visibility: hidden;
|
||||
will-change: opacity; }
|
||||
|
||||
.pswp__scroll-wrap {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden; }
|
||||
|
||||
.pswp__container,
|
||||
.pswp__zoom-wrap {
|
||||
-ms-touch-action: none;
|
||||
touch-action: none;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0; }
|
||||
|
||||
/* Prevent selection and tap highlights */
|
||||
.pswp__container,
|
||||
.pswp__img {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-touch-callout: none; }
|
||||
|
||||
.pswp__zoom-wrap {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
-webkit-transform-origin: left top;
|
||||
-ms-transform-origin: left top;
|
||||
transform-origin: left top;
|
||||
/* for open/close transition */
|
||||
-webkit-transition: -webkit-transform 333ms cubic-bezier(0.4, 0, 0.22, 1);
|
||||
transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1); }
|
||||
|
||||
.pswp__bg {
|
||||
will-change: opacity;
|
||||
/* for open/close transition */
|
||||
-webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
|
||||
transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }
|
||||
|
||||
.pswp--animated-in .pswp__bg,
|
||||
.pswp--animated-in .pswp__zoom-wrap {
|
||||
-webkit-transition: none;
|
||||
transition: none; }
|
||||
|
||||
.pswp__container,
|
||||
.pswp__zoom-wrap {
|
||||
-webkit-backface-visibility: hidden; }
|
||||
|
||||
.pswp__item {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
overflow: hidden; }
|
||||
|
||||
.pswp__img {
|
||||
position: absolute;
|
||||
width: auto;
|
||||
height: auto;
|
||||
top: 0;
|
||||
left: 0; }
|
||||
|
||||
/*
|
||||
stretched thumbnail or div placeholder element (see below)
|
||||
style is added to avoid flickering in webkit/blink when layers overlap
|
||||
*/
|
||||
.pswp__img--placeholder {
|
||||
-webkit-backface-visibility: hidden; }
|
||||
|
||||
/*
|
||||
div element that matches size of large image
|
||||
large image loads on top of it
|
||||
*/
|
||||
.pswp__img--placeholder--blank {
|
||||
background: #222; }
|
||||
|
||||
.pswp--ie .pswp__img {
|
||||
width: 100% !important;
|
||||
height: auto !important;
|
||||
left: 0;
|
||||
top: 0; }
|
||||
|
||||
/*
|
||||
Error message appears when image is not loaded
|
||||
(JS option errorMsg controls markup)
|
||||
*/
|
||||
.pswp__error-msg {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
margin-top: -8px;
|
||||
color: #CCC; }
|
||||
|
||||
.pswp__error-msg a {
|
||||
color: #CCC;
|
||||
text-decoration: underline; }
|
||||
+3700
File diff suppressed because it is too large
Load Diff
Vendored
+26
@@ -0,0 +1,26 @@
|
||||
import { createApp } from 'vue'
|
||||
import { i18n } from './modules/i18n.js';
|
||||
import App from "./App.vue";
|
||||
import store from "./modules/store";
|
||||
import colorMixin from './mixins/colorMixin';
|
||||
|
||||
const appEl = document.createElement('div');
|
||||
appEl.setAttribute("id", "app");
|
||||
|
||||
var src = document.getElementsByClassName('wrapperJSON');
|
||||
if(src.length) {
|
||||
src[0].appendChild(appEl);
|
||||
}else{
|
||||
const queryString = window.location.search;
|
||||
const urlParams = new URLSearchParams(queryString);
|
||||
var ui=urlParams.get('ui');
|
||||
var fzl=urlParams.get('fzl');
|
||||
const wrapper = document.createElement('div');
|
||||
wrapper.setAttribute("class", "wrapperJSON");
|
||||
wrapper.setAttribute("data-ui", ui);
|
||||
wrapper.setAttribute("data-fzl", fzl);
|
||||
wrapper.appendChild(appEl);
|
||||
document.body.appendChild(wrapper);
|
||||
}
|
||||
|
||||
createApp(App).mixin(colorMixin).use(i18n).use(store).mount('#app');
|
||||
@@ -0,0 +1,48 @@
|
||||
export default {
|
||||
methods: {
|
||||
formatPrice(price, prec=2, dots=true, label=true) {
|
||||
price = Number(price);
|
||||
if(price == 0 && label) {
|
||||
return this.$t('front_extern.on_request')
|
||||
}else{
|
||||
if(price != Math.floor(price) && prec > 0) {
|
||||
return 'CHF ' + this.splitAndPad(price.toFixed(prec));
|
||||
}
|
||||
if(dots) {
|
||||
return 'CHF ' + this.splitAndPad(price.toFixed(0)) + '.-';
|
||||
}else{
|
||||
return 'CHF ' + this.splitAndPad(price.toFixed(0));
|
||||
}
|
||||
}
|
||||
},
|
||||
splitAndPad(number) {
|
||||
number = number + '';
|
||||
var x = number.split('.');
|
||||
var x1 = x[0];
|
||||
var x2 = x.length > 1 ? '.' + x[1] : '';
|
||||
var rgx = /(\d+)(\d{3})/;
|
||||
while (rgx.test(x1)) {
|
||||
x1 = x1.replace(rgx, '$1' + '’' + '$2');
|
||||
}
|
||||
return x1 + x2;
|
||||
},
|
||||
isContentHtml(input) {
|
||||
var htmlRegex = new RegExp(/<[a-z/][\s\S]*>/i);
|
||||
return htmlRegex.test(input);
|
||||
},
|
||||
formatDate(value) {
|
||||
if(!value) {
|
||||
return '-';
|
||||
}
|
||||
const date = new Date(value);
|
||||
if(!date instanceof Date || isNaN(date)) {
|
||||
return '-';
|
||||
}
|
||||
return new Intl.DateTimeFormat("de-CH", {year: 'numeric', month: '2-digit', day: '2-digit' }).format(date);
|
||||
},
|
||||
formatNum(price, digits = 0){
|
||||
var options = { maximumFractionDigits: digits, minimumFractionDigits: digits }
|
||||
return Intl.NumberFormat("de-CH", options).format(price);
|
||||
},
|
||||
}
|
||||
};
|
||||
+42
@@ -0,0 +1,42 @@
|
||||
import { slugify } from 'transliteration';
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
// CDN paths
|
||||
clientCDNPath(client, location) {
|
||||
return "https://cdn.motorradhandel.ch/media/clients/" + client + '/' + location;
|
||||
},
|
||||
adCDNPath(client, location) {
|
||||
return this.clientCDNPath(client, location) + '/ads/';
|
||||
},
|
||||
marktplatzCDNPath(client, location) {
|
||||
return this.clientCDNPath(client, location) + '/marktplatz/';
|
||||
},
|
||||
brandLogos(logo) {
|
||||
return "https://cdn.motorradhandel.ch/media/marken/images/" + logo;
|
||||
},
|
||||
|
||||
|
||||
// Slug creations
|
||||
adSlug(locale, brandName, modelName, id) {
|
||||
return '/' + locale + '/d/' + this.safeString(brandName) + '/' + this.safeString(modelName) + '/' + id;
|
||||
},
|
||||
rentalSlug(locale, brandName, modelName, id) {
|
||||
return '/' + locale + '/m/' + this.safeString(brandName) + '/' + this.safeString(modelName) + '/' + id;
|
||||
},
|
||||
clientSlug(locale, clientName, id) {
|
||||
return '/' + locale + '/h/' + this.safeString(clientName) + '/' + id;
|
||||
},
|
||||
marktplatzSlug(locale, art, title, id) {
|
||||
return '/' + locale + '/mp/' + this.safeString(art) + '/' + this.safeString(title) + '/' + id;
|
||||
},
|
||||
bikesorySlug(locale, title, brand, model, id) {
|
||||
return '/' + locale + '/stories/' + this.safeString(title) + '/' + this.safeString(brand) + '/' + this.safeString(model) + '/' + id;
|
||||
},
|
||||
|
||||
|
||||
safeString(str) {
|
||||
return slugify(str).replace(/[-\s]+/g, '-');
|
||||
},
|
||||
}
|
||||
};
|
||||
+12
@@ -0,0 +1,12 @@
|
||||
export default {
|
||||
methods: {
|
||||
// setting values:
|
||||
// titleColor, divBGColor, bgColor, secondColor, fontColor, searchBgColor, buttonColor, buttonTextColor
|
||||
color: function(setting) {
|
||||
return this.$store.state.settings[setting] ? 'color: #' + this.$store.state.settings[setting] + ' !important' : '';
|
||||
},
|
||||
bckgrColor: function(setting) {
|
||||
return this.$store.state.settings[setting] ? 'background: #' + this.$store.state.settings[setting] + ' !important' : '';
|
||||
},
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,10 @@
|
||||
export default {
|
||||
methods: {
|
||||
getDefaultImage(category = 1) {
|
||||
return "https://cdn.motorradhandel.ch/media/categories/def_images/motorradhandel_missing_image_" + category + ".png";
|
||||
},
|
||||
getDefaultMPImage(category = 1) {
|
||||
return "https://cdn.motorradhandel.ch/media/categories/def_images/motorradhandel_mp_missing_image_" + category + ".png";
|
||||
},
|
||||
}
|
||||
};
|
||||
+28
@@ -0,0 +1,28 @@
|
||||
import { useI18n, createI18n } from 'vue-i18n';
|
||||
import axios from 'axios'
|
||||
|
||||
|
||||
export const i18n = createI18n({
|
||||
locale: 'de',
|
||||
fallbackLocale: 'de',
|
||||
allowComposition: true,
|
||||
})
|
||||
|
||||
const loadedLanguages = []
|
||||
|
||||
function setI18nLanguage (i18n, lang) {
|
||||
if (i18n.mode === 'legacy') {
|
||||
i18n.global.locale = lang
|
||||
} else {
|
||||
i18n.global.locale.value = lang
|
||||
}
|
||||
axios.defaults.headers.common['Accept-Language'] = lang
|
||||
document.querySelector('html').setAttribute('lang', lang)
|
||||
return lang
|
||||
}
|
||||
|
||||
export const loadLanguage = function(i18n, lng, texts) {
|
||||
loadedLanguages.push(lng)
|
||||
i18n.global.setLocaleMessage(lng, texts)
|
||||
setI18nLanguage(i18n, lng)
|
||||
}
|
||||
+60
@@ -0,0 +1,60 @@
|
||||
import Vuex from "vuex";
|
||||
|
||||
export default new Vuex.Store({
|
||||
state: () => ({
|
||||
settings: {},
|
||||
listParams: {
|
||||
arts: [],
|
||||
brands: [],
|
||||
categories: [],
|
||||
},
|
||||
selected: {
|
||||
brand: 0,
|
||||
model: 0,
|
||||
price: 0,
|
||||
km: 0,
|
||||
location: 0,
|
||||
sort: 0,
|
||||
page: 1,
|
||||
},
|
||||
list: {},
|
||||
brands: {},
|
||||
models: {},
|
||||
pagination: {},
|
||||
locations: [],
|
||||
}),
|
||||
mutations: {
|
||||
setPage(state, page) {
|
||||
state.selected.page = page;
|
||||
},
|
||||
setSelected(state, payload) {
|
||||
state.selected[payload.item] = payload.state;
|
||||
},
|
||||
updateResults(state, payload) {0
|
||||
state.list = payload.data.data.results;
|
||||
state.pagination = payload.data.data.pagination;
|
||||
state.selected.page = state.pagination.page;
|
||||
// this.commit('setAdditionalParams', payload);
|
||||
},
|
||||
updateModels(state, payload) {
|
||||
state.selected.model = 0;
|
||||
state.models = payload.data.models;
|
||||
},
|
||||
updateDetails(state, payload) {
|
||||
state.details = payload.data;
|
||||
},
|
||||
updateSettings(state, payload) {
|
||||
state.settings = payload.data.settings;
|
||||
state.settings.srchParObj = JSON.parse(state.settings.srchParams);
|
||||
state.listParams.arts = state.settings.fzart ? state.settings.fzart.split(",") : [];
|
||||
state.listParams.brands = state.settings.marken ? state.settings.marken.split(",") : [];
|
||||
state.listParams.categories = state.settings.kategorie ? state.settings.kategorie.split(",") : [];
|
||||
state.list = payload.data.data.results;
|
||||
state.brands = payload.data.brands;
|
||||
state.pagination = payload.data.data.pagination;
|
||||
state.locations = payload.data.locations;
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
});
|
||||
Reference in New Issue
Block a user