Webpage Editor: Carousel Images
This commit is contained in:
paoloar77
@@ -1,6 +1,25 @@
|
||||
<template>
|
||||
<div v-if="myel">
|
||||
<q-bar v-if="editOn" dense class="bg-blue-1 text-white q-px-sm">
|
||||
<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
|
||||
@@ -8,7 +27,7 @@
|
||||
dense
|
||||
@update:model-value="modifElem"
|
||||
v-model="neworder"
|
||||
v-on:keyup.enter="saveElem"
|
||||
v-on:keyup.enter="saveElem(false)"
|
||||
type="number"
|
||||
>
|
||||
</q-input>
|
||||
@@ -22,7 +41,7 @@
|
||||
@click="delElem">
|
||||
</q-btn>
|
||||
|
||||
<q-select v-if="addOn"
|
||||
<q-select v-if="enableAdd"
|
||||
v-model="newtype"
|
||||
dense
|
||||
style="width: 150px;"
|
||||
@@ -31,7 +50,7 @@
|
||||
|
||||
</q-select>
|
||||
<q-btn
|
||||
v-if="addOn"
|
||||
v-if="enableAdd"
|
||||
size="sm"
|
||||
dense
|
||||
flat
|
||||
@@ -42,7 +61,7 @@
|
||||
|
||||
</q-bar>
|
||||
<div v-if="myel.type === shared_consts.ELEMTYPE.TEXT">
|
||||
<div v-if="editOn">
|
||||
<div v-if="enableEdit">
|
||||
<q-input
|
||||
class="fa-border"
|
||||
@update:model-value="modifElem"
|
||||
@@ -54,13 +73,14 @@
|
||||
</q-input>
|
||||
|
||||
</div>
|
||||
<div v-else
|
||||
:class="myel.class">{{ myel.container }}
|
||||
<div
|
||||
:class="myel.class + (editOn ? ` clEdit` : ``)"
|
||||
@click="clickOnElem">{{ myel.container }}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="myel.type === shared_consts.ELEMTYPE.MARGINI">
|
||||
<div v-if="editOn">
|
||||
<div v-if="enableEdit">
|
||||
<q-input
|
||||
label="Margine:"
|
||||
class="fa-border"
|
||||
@@ -72,10 +92,14 @@
|
||||
</q-input>
|
||||
|
||||
</div>
|
||||
<div :style="`margin: ` + myel.size"></div>
|
||||
<div
|
||||
:class="myel.class + (editOn ? ` clEdit` : ``)"
|
||||
@click="clickOnElem"
|
||||
:style="`margin: ` + myel.size">
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="myel.type === shared_consts.ELEMTYPE.TITLE">
|
||||
<div v-if="editOn">
|
||||
<div v-if="enableEdit">
|
||||
<q-input
|
||||
class="fa-border"
|
||||
@update:model-value="modifElem"
|
||||
@@ -86,22 +110,26 @@
|
||||
</q-input>
|
||||
|
||||
</div>
|
||||
<div v-else>
|
||||
<CTitle
|
||||
:imgbackground="myel.imgback"
|
||||
:headtitle="myel.title" :sizes="myel.size" :styleadd="myel.styleadd">
|
||||
</CTitle>
|
||||
<div>
|
||||
<div
|
||||
:class="myel.class + (editOn ? ` clEdit` : ``)"
|
||||
@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 v-if="editOn">
|
||||
<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"
|
||||
v-on:keyup.enter="saveElem(false)"
|
||||
>
|
||||
</q-input>
|
||||
<q-input
|
||||
@@ -115,13 +143,16 @@
|
||||
</q-input>
|
||||
|
||||
</div>
|
||||
<div v-else>
|
||||
<CImgTitle v-if="myel.container" :src="myel.container" :title="myel.title">
|
||||
</CImgTitle>
|
||||
<div>
|
||||
<div :class="myel.class + (editOn ? ` clEdit` : ``)"
|
||||
@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="editOn">
|
||||
<div v-if="enableEdit">
|
||||
<q-input
|
||||
label="Classe:"
|
||||
@update:model-value="modifElem"
|
||||
@@ -140,12 +171,14 @@
|
||||
</CMyEditor>
|
||||
|
||||
</div>
|
||||
<div v-else>
|
||||
<div :class="myel.class" v-html="myel.containerHtml"></div>
|
||||
<div>
|
||||
<div :class="myel.class + (editOn ? ` clEdit` : ``)"
|
||||
@click="clickOnElem"
|
||||
v-html="myel.containerHtml"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="myel.type === shared_consts.ELEMTYPE.IMAGE">
|
||||
<div v-if="editOn">
|
||||
<div v-if="enableEdit">
|
||||
<q-input
|
||||
label="NomeFile Img:"
|
||||
@update:model-value="modifElem"
|
||||
@@ -176,11 +209,14 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<q-img :src="myel.container" class="img" :width="myel.width.toString()" :height="myel.height.toString()"></q-img>
|
||||
<div :class="myel.class + (editOn ? ` clEdit` : ``)"
|
||||
@click="clickOnElem">
|
||||
<q-img :src="myel.container" class="img" :width="myel.width.toString()" :height="myel.height.toString()"></q-img>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="myel.type === shared_consts.ELEMTYPE.VIDEO">
|
||||
<div v-if="editOn" class="row">
|
||||
<div v-if="enableEdit" class="row">
|
||||
<q-input
|
||||
label="NomeFile Video:"
|
||||
@update:model-value="modifElem"
|
||||
@@ -199,16 +235,19 @@
|
||||
>
|
||||
</q-input>
|
||||
</div>
|
||||
<q-video v-if="!!rec.container" :src="rec.container" :ratio="rec.ratio">
|
||||
</q-video>
|
||||
<div :class="myel.class + (editOn ? ` clEdit` : ``)"
|
||||
@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">
|
||||
<LandingFooter></LandingFooter>
|
||||
</div>
|
||||
<div v-else-if="myel.type === shared_consts.ELEMTYPE.PAGE">
|
||||
<div v-if="editOn" class="row">
|
||||
<div v-if="enableEdit" class="row">
|
||||
<q-input
|
||||
label="Nome Pagina:"
|
||||
label="Importa Pagina:"
|
||||
@update:model-value="modifElem"
|
||||
v-model="myel.container"
|
||||
filled
|
||||
@@ -216,10 +255,13 @@
|
||||
>
|
||||
</q-input>
|
||||
</div>
|
||||
<CMyPage :mypath="myel.container"></CMyPage>
|
||||
<div :class="myel.class + (editOn ? ` clEdit` : ``)"
|
||||
@click="clickOnElem">
|
||||
<CMyPage :mypath="myel.container"> </CMyPage>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="myel.type === shared_consts.ELEMTYPE.PAGEINTRO">
|
||||
<div v-if="editOn" class="row">
|
||||
<div v-if="enableEdit" class="row">
|
||||
<q-input
|
||||
label="NomeFile Img:"
|
||||
@update:model-value="modifElem"
|
||||
@@ -255,7 +297,10 @@
|
||||
>
|
||||
</q-input>
|
||||
</div>
|
||||
<CMyPageIntro :mypath="myel.container" :maxheightimg="myel.heightimg" :maxwidthimg="myel.widthimg" :link="myel.link"></CMyPageIntro>
|
||||
<div :class="myel.class + (editOn ? ` clEdit` : ``)"
|
||||
@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()">
|
||||
@@ -272,40 +317,72 @@
|
||||
<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="editOn" class="row">
|
||||
<q-input
|
||||
label="lista:"
|
||||
<div v-if="enableEdit" class="row">
|
||||
<CMyFieldRec
|
||||
title="Lista Immagini:"
|
||||
table="myelems"
|
||||
:id="myel._id"
|
||||
:rec="myel"
|
||||
field="list"
|
||||
@update:model-value="modifElem"
|
||||
v-model="myel.list"
|
||||
:canEdit="true"
|
||||
:canModify="true">
|
||||
</CMyFieldRec>
|
||||
|
||||
<q-input
|
||||
label="Secondi tra un'immagine e l'altra:"
|
||||
@update:model-value="modifElem"
|
||||
v-model="myel.container2"
|
||||
type="number"
|
||||
filled
|
||||
v-on:keyup.enter="saveElem"
|
||||
>
|
||||
</q-input>
|
||||
</div>
|
||||
<q-toggle
|
||||
label="Sottotitoli"
|
||||
v-model="myel.parambool"
|
||||
color="positive"
|
||||
icon="fas fa-eye"
|
||||
>
|
||||
</q-toggle>
|
||||
|
||||
<q-carousel
|
||||
swipeable
|
||||
animated
|
||||
:autoplay="8000"
|
||||
v-model="slide2"
|
||||
arrows
|
||||
thumbnails
|
||||
infinite
|
||||
height="600">
|
||||
<q-carousel-slide v-for="(rec, index) in myel.list" :key="index" :name="index"
|
||||
:img-src="getsrcbyimg(`images/`+ rec.imagefile)"
|
||||
:alt="rec.alt"
|
||||
class="carousel_slide">
|
||||
<div 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>
|
||||
<q-toggle
|
||||
label="Miniature"
|
||||
v-model="myel.parambool2"
|
||||
color="positive"
|
||||
icon="fas fa-eye"
|
||||
>
|
||||
</q-toggle>
|
||||
|
||||
</div>
|
||||
<div :class="myel.class + (editOn ? ` clEdit` : ``)"
|
||||
@click="clickOnElem">
|
||||
|
||||
<q-carousel
|
||||
swipeable
|
||||
animated
|
||||
:autoplay="myel.container2 ? (myel.container2 * 1000) : 8000"
|
||||
v-model="slide2"
|
||||
arrows
|
||||
: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>
|
||||
</div>
|
||||
</q-carousel-slide>
|
||||
</q-carousel>
|
||||
</q-carousel-slide>
|
||||
</q-carousel>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div v-else-if="myel.type === shared_consts.ELEMTYPE.CAROUSEL_HOME">
|
||||
@@ -367,6 +444,17 @@
|
||||
</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"
|
||||
v-model="myel.number"
|
||||
filled
|
||||
v-on:keyup.enter="saveElem"
|
||||
>
|
||||
</q-input>
|
||||
</div>
|
||||
|
||||
<CEventsCalendar :mysingleevent="null" :showfirstN="myel.number || 3">
|
||||
</CEventsCalendar>
|
||||
</div>
|
||||
@@ -379,15 +467,26 @@
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<q-btn
|
||||
v-if="editOn && !disableSave"
|
||||
icon="fas fa-check"
|
||||
color="positive"
|
||||
label="Salva"
|
||||
size="sm"
|
||||
:disable="disableSave"
|
||||
@click="saveElem">
|
||||
</q-btn>
|
||||
<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