HTML Editor go on
This commit is contained in:
Surya Paolo
@@ -474,3 +474,9 @@ body.mobile .landing:before {
|
||||
.align_left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.flex3 {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
@@ -2,7 +2,7 @@ import {
|
||||
defineComponent, onMounted, PropType, ref, toRef, watch,
|
||||
} from 'vue'
|
||||
|
||||
import { IMyElem, IMyPage, IOperators } from '@src/model'
|
||||
import { IMyCard, IMyElem, IMyPage, IOperators } from '@src/model'
|
||||
import { useGlobalStore } from '@store/globalStore'
|
||||
|
||||
import { CImgTitle } from '../CImgTitle/index'
|
||||
@@ -17,15 +17,21 @@ import { CMyPageIntro } from '@src/components/CMyPageIntro'
|
||||
import { CEventsCalendar } from '@src/components/CEventsCalendar'
|
||||
import { CMyEditor } from '@src/components/CMyEditor'
|
||||
import { CMyFieldRec } from '@src/components/CMyFieldRec'
|
||||
import { CSelectColor } from '@src/components/CSelectColor'
|
||||
import { CSelectFontSize } from '@src/components/CSelectFontSize'
|
||||
|
||||
import MixinMetaTags from '@/mixins/mixin-metatags'
|
||||
import MixinBase from '@/mixins/mixin-base'
|
||||
import { useQuasar } from 'quasar'
|
||||
import { useI18n } from '@/boot/i18n'
|
||||
|
||||
|
||||
export default defineComponent({
|
||||
name: 'CMyElem',
|
||||
components: { CImgTitle, CTitle, LandingFooter, CEventsCalendar, CCardCarousel, COpenStreetMap, CMyPage, CMyPageIntro, CMyEditor, CMyFieldRec },
|
||||
components: { CImgTitle, CTitle, LandingFooter, CEventsCalendar,
|
||||
CCardCarousel, COpenStreetMap, CMyPage, CMyPageIntro, CMyEditor, CMyFieldRec,
|
||||
CSelectColor, CSelectFontSize },
|
||||
emits: ['selElemClick'],
|
||||
props: {
|
||||
myelem: {
|
||||
type: Object as PropType<IMyElem>,
|
||||
@@ -47,10 +53,12 @@ export default defineComponent({
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
setup(props, { emit }) {
|
||||
const globalStore = useGlobalStore()
|
||||
|
||||
const { setmeta, getsrcbyimg } = MixinMetaTags()
|
||||
const { setValDb, getValDb } = MixinBase()
|
||||
|
||||
|
||||
const $q = useQuasar()
|
||||
const { t } = useI18n()
|
||||
@@ -115,6 +123,16 @@ export default defineComponent({
|
||||
globalStore.addNewElem($q, t, newrec)
|
||||
}
|
||||
|
||||
function dupElem(order?: number) {
|
||||
|
||||
const newrec = props.myelem
|
||||
|
||||
newrec._id = undefined
|
||||
newrec.order = order ? order : newrec.order! + 10
|
||||
|
||||
globalStore.addNewElem($q, t, newrec)
|
||||
}
|
||||
|
||||
function delElem() {
|
||||
$q.dialog({
|
||||
message: 'Eliminare ' + props.myelem.container + ' ?',
|
||||
@@ -153,6 +171,7 @@ export default defineComponent({
|
||||
function clickOnElem() {
|
||||
if (props.editOn) {
|
||||
enableEdit.value = true
|
||||
emit('selElemClick', props.myelem)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -166,9 +185,24 @@ export default defineComponent({
|
||||
mycl += ' align_left'
|
||||
}
|
||||
|
||||
if (props.myelem.class2)
|
||||
mycl += ' ' + props.myelem.class2
|
||||
|
||||
return mycl
|
||||
}
|
||||
|
||||
function getImgFileByElem(elem: IMyElem, reccard?: IMyCard) {
|
||||
if (elem) {
|
||||
if (elem.type === shared_consts.ELEMTYPE.CARD) {
|
||||
return 'upload/pages/' + elem.path + '/' + reccard!.imagefile
|
||||
} else if (elem.type === shared_consts.ELEMTYPE.IMAGE) {
|
||||
return 'upload/pages/' + elem.path + '/' + elem.container
|
||||
} else {
|
||||
return 'upload/pages/' + elem.path + '/' + elem.image
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function showFit() {
|
||||
if (props.myelem.type)
|
||||
return [shared_consts.ELEMTYPE.TEXT].includes(props.myelem.type)
|
||||
@@ -201,6 +235,9 @@ export default defineComponent({
|
||||
clickOnElem,
|
||||
getClass,
|
||||
showFit,
|
||||
getValDb,
|
||||
dupElem,
|
||||
getImgFileByElem,
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@@ -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