HTML Editor go on
This commit is contained in:
Surya Paolo
@@ -1,125 +1,48 @@
|
||||
<template>
|
||||
<div v-if="myel"
|
||||
:class="(editOn ? ` clEditDiv` : ``) + `` + (!myel.active ? ` clEditNotActive` : ``)"
|
||||
<div
|
||||
v-if="myel"
|
||||
:class="
|
||||
(editOn ? ` clEditDiv` : ``) +
|
||||
`` +
|
||||
(!myel.active ? ` clEditNotActive` : ``)
|
||||
"
|
||||
>
|
||||
<q-bar v-if="enableEdit" dense class="bg-blue-1 text-white q-px-sm">
|
||||
<q-toggle
|
||||
v-model="myel.active"
|
||||
color="positive"
|
||||
icon="fas fa-eye"
|
||||
>
|
||||
</q-toggle>
|
||||
<q-toggle
|
||||
v-model="enableEdit"
|
||||
icon="fas fa-pencil-alt"
|
||||
>
|
||||
</q-toggle>
|
||||
<!--<q-toggle v-if="tools.isManager()"
|
||||
v-model="enableAdd"
|
||||
icon="fas fa-plus"
|
||||
</q-toggle>
|
||||
>-->
|
||||
|
||||
<q-input
|
||||
style="max-width: 60px"
|
||||
hide-bottom-space
|
||||
borderless
|
||||
dense
|
||||
@update:model-value="modifElem"
|
||||
v-model="neworder"
|
||||
v-on:keyup.enter="saveElem(false)"
|
||||
type="number"
|
||||
>
|
||||
</q-input>
|
||||
<q-select
|
||||
v-if="enableEdit"
|
||||
rounded outlined v-model="myel.align"
|
||||
:options="tools.SelectListAlign"
|
||||
@update:model-value="modifElem"
|
||||
dense
|
||||
label="Allinea" emit-value map-options>
|
||||
</q-select>
|
||||
<q-select
|
||||
v-if="enableEdit"
|
||||
rounded outlined v-model="myel.class"
|
||||
:options="tools.SelectListClass"
|
||||
@update:model-value="modifElem"
|
||||
dense
|
||||
label="Classe" emit-value map-options>
|
||||
</q-select>
|
||||
<q-select
|
||||
v-if="enableEdit && showFit"
|
||||
rounded outlined v-model="myel.fit"
|
||||
:options="tools.SelectListFit"
|
||||
@update:model-value="modifElem"
|
||||
dense
|
||||
label="Fit" emit-value map-options>
|
||||
</q-select>
|
||||
<q-space/>
|
||||
<q-btn
|
||||
icon="fas fa-trash-alt"
|
||||
color="negative"
|
||||
dense
|
||||
flat
|
||||
size="sm"
|
||||
@click="delElem">
|
||||
</q-btn>
|
||||
|
||||
<q-select v-if="enableAdd"
|
||||
v-model="newtype"
|
||||
dense
|
||||
style="width: 150px;"
|
||||
:options="shared_consts.TypesElem"
|
||||
emit-value map-options>
|
||||
|
||||
</q-select>
|
||||
<q-btn
|
||||
v-if="enableAdd"
|
||||
size="sm"
|
||||
dense
|
||||
flat
|
||||
icon="fas fa-plus"
|
||||
color="positive"
|
||||
@click="addNewElem(myel.order-10)">
|
||||
</q-btn>
|
||||
|
||||
</q-bar>
|
||||
|
||||
<div v-if="myel.type === shared_consts.ELEMTYPE.TEXT">
|
||||
<div v-if="enableEdit">
|
||||
<q-input
|
||||
class="fa-border"
|
||||
@update:model-value="modifElem"
|
||||
v-model="myel.container"
|
||||
filled
|
||||
v-on:keyup.enter="saveElem"
|
||||
<div>
|
||||
<div v-if="myel.type === shared_consts.ELEMTYPE.TEXT">
|
||||
<div
|
||||
:class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
|
||||
@click="clickOnElem"
|
||||
>
|
||||
|
||||
</q-input>
|
||||
|
||||
{{ myel.container }}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
:class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
|
||||
@click="clickOnElem">{{ myel.container }}
|
||||
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" flat bordered>
|
||||
rec: {{rec}}
|
||||
<q-img :src="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 `" v-html="rec.content"></div>
|
||||
<div
|
||||
v-if="rec.description"
|
||||
class="text-caption"
|
||||
:style="`color: ` + rec.colorsub"
|
||||
>
|
||||
{{ rec.description }}
|
||||
</div>
|
||||
</q-card-section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="myel.type === shared_consts.ELEMTYPE.CARD">
|
||||
|
||||
<q-card class="my-card" flat bordered>
|
||||
<q-img
|
||||
:src="myel.img"
|
||||
/>
|
||||
|
||||
<q-card-section>
|
||||
<div class="text-overline text-orange-9">{{ myel.container }}</div>
|
||||
<div class="text-h5 q-mt-sm q-mb-xs">{{ myel.container2 }}</div>
|
||||
<div class="text-caption text-grey">
|
||||
{{ myel.container3 }}
|
||||
</div>
|
||||
</q-card-section>
|
||||
|
||||
<!--<q-card-actions>
|
||||
<!--<q-card-actions>
|
||||
<q-btn flat color="dark" label="Share"/>
|
||||
<q-btn flat color="primary" label="Book"/>
|
||||
|
||||
@@ -135,436 +58,309 @@
|
||||
/>
|
||||
</q-card-actions>-->
|
||||
|
||||
<q-slide-transition>
|
||||
<div v-show="expanded">
|
||||
<q-separator/>
|
||||
<q-card-section class="text-subitle2">
|
||||
{{ lorem }}
|
||||
</q-card-section>
|
||||
<!--<q-slide-transition>
|
||||
<div v-show="expanded">
|
||||
<q-separator />
|
||||
<q-card-section class="text-subitle2">
|
||||
|
||||
</q-card-section>
|
||||
</div>
|
||||
</q-slide-transition>
|
||||
-->
|
||||
</q-card>
|
||||
</div>
|
||||
</q-slide-transition>
|
||||
</q-card>
|
||||
</div>
|
||||
|
||||
<div v-if="myel.type === shared_consts.ELEMTYPE.MARGINI">
|
||||
<div v-if="enableEdit">
|
||||
<q-input
|
||||
label="Margine:"
|
||||
class="fa-border"
|
||||
@update:model-value="modifElem"
|
||||
v-model="myel.size"
|
||||
filled
|
||||
v-on:keyup.enter="saveElem"
|
||||
>
|
||||
</q-input>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<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 v-if="enableEdit">
|
||||
<q-input
|
||||
class="fa-border"
|
||||
@update:model-value="modifElem"
|
||||
v-model="myel.title"
|
||||
filled
|
||||
v-on:keyup.enter="saveElem"
|
||||
>
|
||||
</q-input>
|
||||
|
||||
</div>
|
||||
<div>
|
||||
<div v-if="myel.type === shared_consts.ELEMTYPE.MARGINI">
|
||||
<div
|
||||
:class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
|
||||
@click="clickOnElem">
|
||||
<CTitle
|
||||
:imgbackground="myel.imgback"
|
||||
:headtitle="myel.title" :sizes="myel.size" :styleadd="myel.styleadd">
|
||||
</CTitle>
|
||||
@click="clickOnElem"
|
||||
:style="`margin: ` + myel.size"
|
||||
>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="myel.type === shared_consts.ELEMTYPE.IMGTITLE">
|
||||
<div v-if="enableEdit">
|
||||
<q-input
|
||||
label="Img"
|
||||
class="fa-border"
|
||||
@update:model-value="modifElem"
|
||||
v-model="myel.container"
|
||||
filled
|
||||
v-on:keyup.enter="saveElem(false)"
|
||||
>
|
||||
</q-input>
|
||||
<q-input
|
||||
label="Title"
|
||||
class="fa-border"
|
||||
@update:model-value="modifElem"
|
||||
v-model="myel.container"
|
||||
filled
|
||||
v-on:keyup.enter="saveElem"
|
||||
>
|
||||
</q-input>
|
||||
|
||||
</div>
|
||||
<div>
|
||||
<div :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
|
||||
@click="clickOnElem">
|
||||
<CImgTitle v-if="myel.container" :src="myel.container" :title="myel.title">
|
||||
</CImgTitle>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="myel.type === shared_consts.ELEMTYPE.HTML">
|
||||
<div v-if="enableEdit">
|
||||
<q-input
|
||||
label="Classe:"
|
||||
@update:model-value="modifElem"
|
||||
v-model="myel.class"
|
||||
filled
|
||||
v-on:keyup.enter="saveElem"
|
||||
>
|
||||
</q-input>
|
||||
<CMyEditor
|
||||
v-model:value="myel.containerHtml" title="" @keyup.enter.stop
|
||||
:showButtons="false"
|
||||
:canModify="true"
|
||||
@update:value="modifElem"
|
||||
@showandsave="saveElem"
|
||||
>
|
||||
</CMyEditor>
|
||||
|
||||
</div>
|
||||
<div>
|
||||
<div :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
|
||||
@click="clickOnElem"
|
||||
v-html="myel.containerHtml"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="myel.type === shared_consts.ELEMTYPE.IMAGE">
|
||||
<div v-if="enableEdit">
|
||||
<q-input
|
||||
label="NomeFile Img:"
|
||||
@update:model-value="modifElem"
|
||||
v-model="myel.container"
|
||||
filled
|
||||
v-on:keyup.enter="saveElem"
|
||||
>
|
||||
</q-input>
|
||||
<div class="row">
|
||||
<q-input
|
||||
label="Width:"
|
||||
@update:model-value="modifElem"
|
||||
v-model="myel.widthimg"
|
||||
filled
|
||||
v-on:keyup.enter="saveElem"
|
||||
<div v-else-if="myel.type === shared_consts.ELEMTYPE.TITLE">
|
||||
<div>
|
||||
<div
|
||||
:class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
|
||||
@click="clickOnElem"
|
||||
>
|
||||
</q-input>
|
||||
<q-input
|
||||
label="Height:"
|
||||
@update:model-value="modifElem"
|
||||
v-model="myel.heightimg"
|
||||
filled
|
||||
v-on:keyup.enter="saveElem"
|
||||
>
|
||||
</q-input>
|
||||
<CTitle
|
||||
:imgbackground="myel.imgback"
|
||||
:headtitle="myel.title"
|
||||
:sizes="myel.size"
|
||||
:styleadd="myel.styleadd"
|
||||
>
|
||||
</CTitle>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
|
||||
@click="clickOnElem">
|
||||
<q-img :src="myel.container" :fit="myel.fit" class="img" :width="myel.widthimg ? myel.widthimg: undefined" :height="myel.heightimg ? myel.heightimg : undefined"></q-img>
|
||||
<div v-else-if="myel.type === shared_consts.ELEMTYPE.IMGTITLE">
|
||||
<div>
|
||||
<div
|
||||
:class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
|
||||
@click="clickOnElem"
|
||||
>
|
||||
<CImgTitle
|
||||
v-if="myel.container"
|
||||
:src="myel.container"
|
||||
:title="myel.title"
|
||||
>
|
||||
</CImgTitle>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="myel.type === shared_consts.ELEMTYPE.VIDEO">
|
||||
<div v-if="enableEdit" class="row">
|
||||
<q-input
|
||||
label="NomeFile Video:"
|
||||
@update:model-value="modifElem"
|
||||
v-model="myel.container"
|
||||
filled
|
||||
v-on:keyup.enter="saveElem"
|
||||
>
|
||||
</q-input>
|
||||
<q-input
|
||||
label="Ratio:"
|
||||
type="number"
|
||||
@update:model-value="modifElem"
|
||||
v-model="myel.ratio"
|
||||
filled
|
||||
v-on:keyup.enter="saveElem"
|
||||
>
|
||||
</q-input>
|
||||
</div>
|
||||
<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.FOOTER">
|
||||
<div :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
|
||||
@click="clickOnElem">
|
||||
|
||||
<LandingFooter></LandingFooter>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="myel.type === shared_consts.ELEMTYPE.PAGE">
|
||||
<div v-if="enableEdit" class="row">
|
||||
<q-input
|
||||
label="Importa Pagina:"
|
||||
@update:model-value="modifElem"
|
||||
v-model="myel.container"
|
||||
filled
|
||||
v-on:keyup.enter="saveElem"
|
||||
>
|
||||
</q-input>
|
||||
</div>
|
||||
<div :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
|
||||
@click="clickOnElem">
|
||||
<CMyPage :mypath="myel.container"> </CMyPage>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="myel.type === shared_consts.ELEMTYPE.PAGEINTRO">
|
||||
<div v-if="enableEdit" class="row">
|
||||
<q-input
|
||||
label="NomeFile Img:"
|
||||
@update:model-value="modifElem"
|
||||
v-model="myel.container"
|
||||
debounce="1000"
|
||||
filled
|
||||
v-on:keyup.enter="saveElem"
|
||||
>
|
||||
</q-input>
|
||||
<q-input
|
||||
label="Width:"
|
||||
type="number"
|
||||
@update:model-value="modifElem"
|
||||
debounce="1000"
|
||||
v-model="myel.widthimg"
|
||||
filled
|
||||
v-on:keyup.enter="saveElem"
|
||||
>
|
||||
</q-input>
|
||||
<q-input
|
||||
label="Height:"
|
||||
type="number"
|
||||
@update:model-value="modifElem"
|
||||
debounce="1000"
|
||||
v-model="myel.heightimg"
|
||||
filled
|
||||
v-on:keyup.enter="saveElem"
|
||||
>
|
||||
</q-input>
|
||||
<q-input
|
||||
label="Link:"
|
||||
@update:model-value="modifElem"
|
||||
debounce="1000"
|
||||
v-model="myel.link"
|
||||
filled
|
||||
v-on:keyup.enter="saveElem"
|
||||
>
|
||||
</q-input>
|
||||
</div>
|
||||
<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">
|
||||
<!-- Da Fare -->
|
||||
<COpenStreetMap :imgmap="getValDb('IMGMAP', false)" :urlmap="getValDb('URLMAP', false)" :title="getValDb('MAP_TITLE', false)"
|
||||
:coordinates="getValDb('COORD_MAP_1', false)" :coord_big="getValDb('COORD_MAP_BIG', false)">
|
||||
|
||||
</COpenStreetMap>
|
||||
</div>
|
||||
<div v-else-if="myel.type === shared_consts.ELEMTYPE.CAROUSEL_IMGS">
|
||||
<section class="maxwidth padding_gallery bg-white text-grey-10 text-center">
|
||||
|
||||
<div v-if="enableEdit" class="row">
|
||||
<CMyFieldRec
|
||||
title="Lista Immagini:"
|
||||
table="myelems"
|
||||
:id="myel._id"
|
||||
:rec="myel"
|
||||
field="list"
|
||||
@update:model-value="modifElem"
|
||||
:canEdit="true"
|
||||
:canModify="true">
|
||||
</CMyFieldRec>
|
||||
|
||||
<!--sss
|
||||
-->
|
||||
|
||||
<q-input
|
||||
label="Secondi tra un'immagine e l'altra:"
|
||||
@update:model-value="modifElem"
|
||||
debounce="1000"
|
||||
v-model="myel.container2"
|
||||
type="number"
|
||||
filled
|
||||
v-on:keyup.enter="saveElem"
|
||||
>
|
||||
</q-input>
|
||||
<q-toggle
|
||||
label="Sottotitoli"
|
||||
v-model="myel.parambool"
|
||||
color="positive"
|
||||
icon="fas fa-eye"
|
||||
>
|
||||
</q-toggle>
|
||||
|
||||
<q-toggle
|
||||
label="Miniature"
|
||||
v-model="myel.parambool2"
|
||||
color="positive"
|
||||
icon="fas fa-eye"
|
||||
>
|
||||
</q-toggle>
|
||||
|
||||
<div v-else-if="myel.type === shared_consts.ELEMTYPE.HTML">
|
||||
<div>
|
||||
<div
|
||||
:class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
|
||||
@click="clickOnElem"
|
||||
v-html="myel.containerHtml"
|
||||
></div>
|
||||
</div>
|
||||
<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.height ? myel.height.toString() : 600">
|
||||
<q-carousel-slide v-for="(rec, index) in myel.list" :key="index" :name="index"
|
||||
:img-src="getsrcbyimg(`upload/pages/`+ 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>
|
||||
<div v-else-if="myel.type === shared_consts.ELEMTYPE.IMAGE">
|
||||
<div class="text-center">
|
||||
<div
|
||||
:class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
|
||||
@click="clickOnElem"
|
||||
>
|
||||
<q-img
|
||||
:src="getImgFileByElem(myel.container)"
|
||||
:fit="myel.fit"
|
||||
class="img"
|
||||
:width="myel.widthimg ? myel.widthimg : undefined"
|
||||
:height="myel.heightimg ? myel.heightimg : undefined"
|
||||
></q-img>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div v-else-if="myel.type === shared_consts.ELEMTYPE.CAROUSEL_HOME">
|
||||
</div>
|
||||
|
||||
<section>
|
||||
<div class="landing">
|
||||
<div class="landing__hero maxwidth1200 text-white">
|
||||
<div v-else-if="myel.type === shared_consts.ELEMTYPE.IMAGEUPLOAD">
|
||||
<div class="text-center">
|
||||
<div
|
||||
:class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
|
||||
@click="clickOnElem"
|
||||
>
|
||||
<q-img
|
||||
:src="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.FOOTER">
|
||||
<div
|
||||
:class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
|
||||
@click="clickOnElem"
|
||||
>
|
||||
<LandingFooter></LandingFooter>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="myel.type === shared_consts.ELEMTYPE.PAGE">
|
||||
<div
|
||||
:class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
|
||||
@click="clickOnElem"
|
||||
>
|
||||
<CMyPage :mypath="myel.container"> </CMyPage>
|
||||
</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="maxwidth padding_gallery bg-white text-grey-10 text-center"
|
||||
>
|
||||
<div
|
||||
:class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
|
||||
@click="clickOnElem"
|
||||
>
|
||||
<q-carousel
|
||||
animated
|
||||
:autoplay="animare"
|
||||
swipeable
|
||||
animated
|
||||
:autoplay="myel.container2 ? myel.container2 * 1000 : 8000"
|
||||
v-model="slide2"
|
||||
arrows
|
||||
:fit="myel.fit"
|
||||
:thumbnails="myel.parambool2"
|
||||
infinite
|
||||
navigation
|
||||
transition-next="slide-left"
|
||||
transition-prev="slide-right"
|
||||
v-model="slide"
|
||||
:height="getheightgallery()"
|
||||
width="100%"
|
||||
:height="myel.height ? myel.height.toString() : 600"
|
||||
>
|
||||
<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">
|
||||
|
||||
v-for="(rec, index) in myel.list"
|
||||
:key="index"
|
||||
:name="index"
|
||||
:img-src="
|
||||
getsrcbyimg(`upload/pages/` + 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="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 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>
|
||||
<!--<div class="landing__arrow absolute-bottom text-center">
|
||||
<!--<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>
|
||||
</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>
|
||||
</section>
|
||||
</div>
|
||||
<div v-else-if="myel.type === shared_consts.ELEMTYPE.CALENDAR">
|
||||
<div v-if="enableEdit" class="row">
|
||||
<q-input
|
||||
label="Visualizza ultimi N eventi:"
|
||||
@update:model-value="modifElem"
|
||||
debounce="1000"
|
||||
v-model="myel.number"
|
||||
filled
|
||||
v-on:keyup.enter="saveElem"
|
||||
>
|
||||
</q-input>
|
||||
</div>
|
||||
|
||||
<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 class="justify-center q-gutter-xs row">
|
||||
<q-btn
|
||||
v-if="enableEdit && !disableSave"
|
||||
icon="fas fa-check"
|
||||
color="positive"
|
||||
label="Applica"
|
||||
size="sm"
|
||||
:disable="disableSave"
|
||||
@click="saveElem">
|
||||
</q-btn>
|
||||
<q-btn
|
||||
v-if="enableEdit && !disableSave"
|
||||
icon="fas fa-check"
|
||||
color="positive"
|
||||
label="Salva"
|
||||
size="sm"
|
||||
:disable="disableSave"
|
||||
@click="saveElem(true)">
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user