447 lines
14 KiB
Vue
Executable File
447 lines
14 KiB
Vue
Executable File
<template>
|
||
<div
|
||
v-if="myel"
|
||
:class="
|
||
(editOn ? ` clEditDiv` : ``) +
|
||
`` +
|
||
(!myel.active ? ` clEditNotActive` : ``)
|
||
"
|
||
>
|
||
<div>
|
||
<div v-if="myel.type === shared_consts.ELEMTYPE.TEXT">
|
||
<transition
|
||
appear
|
||
enter-active-class="animated fadeIn"
|
||
leave-active-class="animated fadeOut"
|
||
>
|
||
<div
|
||
:class="
|
||
myel.class +
|
||
(editOn ? ` clEdit` : ``) +
|
||
getClass() +
|
||
` ` +
|
||
tools.getClassAnim(myel.anim)
|
||
"
|
||
@click="clickOnElem"
|
||
>
|
||
{{ myel.container }}
|
||
</div>
|
||
</transition>
|
||
</div>
|
||
<div
|
||
v-if="myel.type === shared_consts.ELEMTYPE.CARD"
|
||
:class="myel.span ? '' : ''"
|
||
>
|
||
<div
|
||
:class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
|
||
@click="clickOnElem"
|
||
>
|
||
<div v-for="(rec, ind) in myel.listcards" :key="ind">
|
||
<q-card
|
||
:class="`my-card center_img bordered ` + myel.class3"
|
||
:style="rec.style"
|
||
>
|
||
<q-img
|
||
:class="tools.getClassAnim(myel.anim2)"
|
||
:src="tools.getImgFileByElem(myel, rec)"
|
||
/>
|
||
˛ <q-card-section>
|
||
<div :class="` ` + rec.size" :style="`color: ` + rec.color">
|
||
{{ rec.alt }}
|
||
</div>
|
||
<div
|
||
:class="`q-mt-sm q-mb-xs ` + tools.getClassAnim(myel.anim)"
|
||
v-html="rec.content"
|
||
></div>
|
||
<div
|
||
v-if="rec.description"
|
||
class="text-caption"
|
||
:style="`color: ` + rec.colorsub"
|
||
>
|
||
{{ rec.description }}
|
||
</div>
|
||
</q-card-section>
|
||
|
||
<!--<q-card-actions>
|
||
<q-btn flat color="dark" label="Share"/>
|
||
<q-btn flat color="primary" label="Book"/>
|
||
|
||
<q-space/>
|
||
|
||
<q-btn
|
||
color="grey"
|
||
round
|
||
flat
|
||
dense
|
||
:icon="expanded ? 'keyboard_arrow_up' : 'keyboard_arrow_down'"
|
||
@click="expanded = !expanded"
|
||
/>
|
||
</q-card-actions>-->
|
||
|
||
<!--<q-slide-transition>
|
||
<div v-show="expanded">
|
||
<q-separator />
|
||
<q-card-section class="text-subtitle2">
|
||
|
||
</q-card-section>
|
||
</div>
|
||
</q-slide-transition>
|
||
-->
|
||
</q-card>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-if="myel.type === shared_consts.ELEMTYPE.MARGINI">
|
||
<div
|
||
:class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
|
||
@click="clickOnElem"
|
||
:style="`margin: ` + myel.size"
|
||
>
|
||
|
||
</div>
|
||
</div>
|
||
<div v-else-if="myel.type === shared_consts.ELEMTYPE.TITLE">
|
||
<div>
|
||
<div
|
||
:class="
|
||
myel.class +
|
||
(editOn ? ` clEdit` : ``) +
|
||
getClass() +
|
||
` ` +
|
||
tools.getClassAnim(myel.anim)
|
||
"
|
||
@click="clickOnElem"
|
||
>
|
||
<CTitle
|
||
:imgbackground="myel.imgback"
|
||
:headtitle="myel.title"
|
||
:sizes="myel.size"
|
||
:styleadd="myel.styleadd"
|
||
>
|
||
</CTitle>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-else-if="myel.type === shared_consts.ELEMTYPE.IMGTITLE">
|
||
<div>
|
||
<div
|
||
:class="
|
||
myel.class +
|
||
(editOn ? ` clEdit` : ``) +
|
||
getClass() +
|
||
` ` +
|
||
tools.getClassAnim(myel.anim)
|
||
"
|
||
@click="clickOnElem"
|
||
>
|
||
<CImgTitle
|
||
v-if="myel.image"
|
||
:src="tools.getImgFileByElem(myel)"
|
||
:title="myel.container"
|
||
:legendinside="myel.container2"
|
||
>
|
||
</CImgTitle>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-else-if="myel.type === shared_consts.ELEMTYPE.IMGPOSTER">
|
||
<div>
|
||
<div
|
||
:class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
|
||
@click="clickOnElem"
|
||
>
|
||
<CImgPoster
|
||
v-if="myel.image"
|
||
:src="tools.getImgFileByElem(myel)"
|
||
:title="myel.container"
|
||
:myheight="myel.heightimg"
|
||
:colorTitle="myel.color"
|
||
:classTitle="myel.class4"
|
||
:vertalign="myel.vertalign"
|
||
:speed="myel.speed"
|
||
:classSubtitle="myel.class3"
|
||
:colorSubtitle="myel.colorsub"
|
||
:legendinside="myel.container2"
|
||
:logo="tools.getImgFileByFilename(myel, myel.container3)"
|
||
:logoheight="myel.height"
|
||
:logowidth="myel.width"
|
||
:fit="myel.fit"
|
||
:anim="myel.anim"
|
||
:anim2="myel.anim2"
|
||
>
|
||
</CImgPoster>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-else-if="myel.type === shared_consts.ELEMTYPE.HTML">
|
||
<div>
|
||
<div
|
||
:class="
|
||
myel.class +
|
||
(editOn ? ` clEdit` : ``) +
|
||
getClass() +
|
||
` ` +
|
||
tools.getClassAnim(myel.anim)
|
||
"
|
||
@click="clickOnElem"
|
||
v-html="myel.containerHtml"
|
||
></div>
|
||
</div>
|
||
</div>
|
||
<div v-else-if="myel.type === shared_consts.ELEMTYPE.IMAGE">
|
||
<div class="text-center">
|
||
<div
|
||
:class="
|
||
myel.class +
|
||
(editOn ? ` clEdit` : ``) +
|
||
getClass() +
|
||
` ` +
|
||
tools.getClassAnim(myel.anim)
|
||
"
|
||
@click="clickOnElem"
|
||
>
|
||
<q-img
|
||
:src="tools.getImgFileByElem(myel.image)"
|
||
:fit="myel.fit"
|
||
class="img"
|
||
:width="myel.widthimg ? myel.widthimg : undefined"
|
||
:height="myel.heightimg ? myel.heightimg : undefined"
|
||
></q-img>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-else-if="myel.type === shared_consts.ELEMTYPE.IMAGEUPLOAD">
|
||
<div class="text-center">
|
||
<div
|
||
:class="
|
||
myel.class +
|
||
(editOn ? ` clEdit` : ``) +
|
||
getClass() +
|
||
` ` +
|
||
tools.getClassAnim(myel.anim)
|
||
"
|
||
@click="clickOnElem"
|
||
>
|
||
<q-img
|
||
:src="tools.getImgFileByElem(myel)"
|
||
:fit="myel.fit"
|
||
class="img"
|
||
:width="myel.widthimg ? myel.widthimg : undefined"
|
||
:height="myel.heightimg ? myel.heightimg : undefined"
|
||
></q-img>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-else-if="myel.type === shared_consts.ELEMTYPE.VIDEO">
|
||
<div
|
||
:class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
|
||
@click="clickOnElem"
|
||
>
|
||
<q-video
|
||
v-if="!!rec.container"
|
||
:src="rec.container"
|
||
:ratio="rec.ratio"
|
||
>
|
||
</q-video>
|
||
</div>
|
||
</div>
|
||
<div v-else-if="myel.type === shared_consts.ELEMTYPE.PAGE">
|
||
<div
|
||
:class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
|
||
@click="clickOnElem"
|
||
>
|
||
<div v-if="editOn" style="color: gray">Pagina: {{ myel.container }}</div>
|
||
</div>
|
||
</div>
|
||
<div v-else-if="myel.type === shared_consts.ELEMTYPE.PAGEINTRO">
|
||
<div
|
||
:class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
|
||
@click="clickOnElem"
|
||
>
|
||
<CMyPageIntro
|
||
:mypath="myel.container"
|
||
:maxheightimg="myel.heightimg"
|
||
:maxwidthimg="myel.widthimg"
|
||
:link="myel.link"
|
||
></CMyPageIntro>
|
||
</div>
|
||
</div>
|
||
<div
|
||
v-else-if="myel.type === shared_consts.ELEMTYPE.CAROUSEL_IDISCIPLINE"
|
||
>
|
||
<CCardCarousel :myarr="getArrDisciplines()"> </CCardCarousel>
|
||
</div>
|
||
<div v-else-if="myel.type === shared_consts.ELEMTYPE.OPENSTREETMAP">
|
||
<div
|
||
:class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
|
||
@click="clickOnElem"
|
||
>
|
||
<div v-if="myel.container">
|
||
<!-- Da Fare -->
|
||
<COpenStreetMap
|
||
:imgmap="myel.container"
|
||
:urlmap="myel.container2"
|
||
:title="myel.container3"
|
||
:coordinates="myel.containerHtml"
|
||
:coord_big="myel.link"
|
||
>
|
||
</COpenStreetMap>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-else-if="myel.type === shared_consts.ELEMTYPE.CAROUSEL_IMGS">
|
||
<section class="padding_gallery bg-white text-grey-10 text-center">
|
||
<div
|
||
:class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
|
||
@click="clickOnElem"
|
||
>
|
||
<q-carousel
|
||
swipeable
|
||
animated
|
||
:autoplay="myel.container2 ? myel.container2 * 1000 : 8000"
|
||
v-model="slide2"
|
||
arrows
|
||
:fit="myel.fit"
|
||
:thumbnails="myel.parambool2"
|
||
infinite
|
||
:height="
|
||
myel.heightimg
|
||
? myel.heightimg.toString()
|
||
: tools.getheightgallery()
|
||
"
|
||
>
|
||
<q-carousel-slide
|
||
v-for="(rec, index) in myel.list"
|
||
:key="index"
|
||
:name="index"
|
||
:img-src="
|
||
getsrcbyimg(`upload/pages/` + myel.path + `/` + rec.imagefile)
|
||
"
|
||
:alt="rec.alt"
|
||
class="carousel_slide"
|
||
>
|
||
<div
|
||
v-if="myel.parambool"
|
||
class="absolute-bottom custom-caption"
|
||
style="margin-bottom: 70px"
|
||
>
|
||
<div class="text-h5">
|
||
<span class="text-h6 text-grey-1 shadow-max"
|
||
>{{ index + 1 }}.
|
||
</span>
|
||
<span v-if="rec.alt" class="text-h6 text-grey-2 shadow">{{
|
||
rec.alt
|
||
}}</span>
|
||
</div>
|
||
<div class="text-subtitle1" v-if="rec.description">
|
||
<span class="text-grey-4 shadow">{{
|
||
rec.description
|
||
}}</span>
|
||
</div>
|
||
</div>
|
||
</q-carousel-slide>
|
||
</q-carousel>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
<div v-else-if="myel.type === shared_consts.ELEMTYPE.CAROUSEL_HOME">
|
||
<section>
|
||
<div class="landing">
|
||
<div class="landing__hero maxwidth1200 text-white">
|
||
<q-carousel
|
||
animated
|
||
:autoplay="animare"
|
||
swipeable
|
||
infinite
|
||
navigation
|
||
transition-next="slide-left"
|
||
transition-prev="slide-right"
|
||
v-model="slide"
|
||
:height="getheightgallery()"
|
||
width="100%"
|
||
>
|
||
<q-carousel-slide
|
||
v-for="(myrec, ind) in myel.list"
|
||
:key="ind"
|
||
:name="ind"
|
||
:img-src="getsrcbyimg(`images/` + myrec.imagefile)"
|
||
>
|
||
<div class="landing__header"></div>
|
||
<div
|
||
class="
|
||
landing__hero-content
|
||
row
|
||
justify-center
|
||
q-gutter-xs
|
||
clgutter
|
||
"
|
||
>
|
||
<div class="row"> </div>
|
||
<div class="flex justify-end">
|
||
<div class="q-gutter-xs testo-banda clgutter">
|
||
<h1 class="text-h1 shadow-max">
|
||
{{ tools.getappname() }}
|
||
</h1>
|
||
<div class="text-subtitle1 shadow text-italic q-pl-sm">
|
||
{{ myel.container }}
|
||
</div>
|
||
<div
|
||
class="
|
||
text-subtitle1
|
||
shadow-max
|
||
big
|
||
text-italic
|
||
q-pl-sm
|
||
"
|
||
>
|
||
{{ myel.container2 }}
|
||
</div>
|
||
<div class="text-subtitle2 shadow text-italic q-pl-sm">
|
||
{{ myel.container3 }}
|
||
</div>
|
||
<div>
|
||
<br /><br />
|
||
<div
|
||
v-if="!tools.isLogged()"
|
||
style="margin: 5px; padding: 5px"
|
||
class="home"
|
||
>
|
||
<br /><br />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--<div class="landing__arrow absolute-bottom text-center">
|
||
<i aria-hidden="true"
|
||
class="q-icon text-h2 text-white material-icons">expand_more</i>
|
||
</div>-->
|
||
</q-carousel-slide>
|
||
</q-carousel>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
<div v-else-if="myel.type === shared_consts.ELEMTYPE.CALENDAR">
|
||
<CEventsCalendar :mysingleevent="null" :showfirstN="myel.number || 3">
|
||
</CEventsCalendar>
|
||
</div>
|
||
<div v-else-if="myel.type === shared_consts.ELEMTYPE.CHECK_EMAIL">
|
||
<div class="q-pa-md q-gutter-md">
|
||
<div v-if="tools.isLogged() && !isVerified" class="text-verified">
|
||
{{ $t('components.authentication.email_verification.link_sent') }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" src="./CMyElem.ts">
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
@import './CMyElem.scss';
|
||
</style>
|