HTML Editor go on
This commit is contained in:
Surya Paolo
482
src/components/CMyEditElem/CMyEditElem.scss
Executable file
482
src/components/CMyEditElem/CMyEditElem.scss
Executable file
@@ -0,0 +1,482 @@
|
||||
|
||||
.testo-banda {
|
||||
//background: -webkit-gradient(linear, left top, left bottom, from(#3144f0), to(transparent));
|
||||
//background: linear-gradient(180deg, #3144f0, transparent);
|
||||
//background: rgba(0, 0, 0, .6)
|
||||
}
|
||||
|
||||
$grayshadow: #555;
|
||||
|
||||
$textcol: blue;
|
||||
$textcol_scuro: darkblue;
|
||||
|
||||
p {
|
||||
margin: 0 0 1.25rem;
|
||||
//text-shadow: .125rem .125rem .25rem $grayshadow;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.mycard {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.landing {
|
||||
}
|
||||
|
||||
.landing_background {
|
||||
background: #000 url(../../../public/images/foto1.jpg) no-repeat 50% fixed;
|
||||
background-size: cover
|
||||
}
|
||||
|
||||
.landing > section {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
//padding: 0 16px
|
||||
}
|
||||
|
||||
.intro {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: stretch;
|
||||
/* flex-flow: row nowrap; */
|
||||
|
||||
padding: 1.25rem 0 1.25rem 0;
|
||||
margin: .125rem;
|
||||
|
||||
* {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
&__associazione {
|
||||
min-width: 350px;
|
||||
}
|
||||
|
||||
&__comeassociarsi {
|
||||
min-width: 350px;
|
||||
}
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
letter-spacing: 0.125rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.landing > section.padding {
|
||||
padding: 5.62rem 1rem;
|
||||
}
|
||||
|
||||
.landing > section.padding_testo {
|
||||
padding-top: 1.25rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.landing > section.padding_gallery {
|
||||
padding-top: 3.125rem;
|
||||
padding-bottom: 5.625rem;
|
||||
}
|
||||
|
||||
.landing > section > div {
|
||||
position: relative;
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.maxwidth1200 {
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
.landing__toolbar {
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#000), to(transparent));
|
||||
background: linear-gradient(180deg, #000, transparent);
|
||||
padding: 0 !important
|
||||
}
|
||||
|
||||
.landing__toolbar .q-btn {
|
||||
border-radius: 0 0 .315rem .315rem;
|
||||
-ms-flex-item-align: stretch;
|
||||
align-self: stretch
|
||||
}
|
||||
|
||||
.landing__hero {
|
||||
min-height: 50vh
|
||||
}
|
||||
|
||||
.landing__header {
|
||||
height: 18vh
|
||||
}
|
||||
|
||||
.landing__arrow {
|
||||
bottom: 1.5rem;
|
||||
opacity: .4
|
||||
}
|
||||
|
||||
.landing__front {
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(15%, rgba(0, 0, 0, .6)));
|
||||
background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .6) 15%)
|
||||
}
|
||||
|
||||
.landing__logo {
|
||||
width: 9.40rem;
|
||||
height: 9.40rem;
|
||||
margin-top: 1.315rem;
|
||||
//-webkit-animation: logo-rotate 240s linear infinite;
|
||||
//animation: logo-rotate 240s linear infinite
|
||||
}
|
||||
|
||||
.landing__features .q-icon {
|
||||
font-size: 4rem
|
||||
}
|
||||
|
||||
h4 {
|
||||
line-height: 1.5;
|
||||
text-shadow: .25rem .25rem .5rem $grayshadow;
|
||||
}
|
||||
|
||||
.landing__features h4, .landing__features h6 {
|
||||
margin: 1rem 0
|
||||
}
|
||||
|
||||
.landing__features p {
|
||||
opacity: .7;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.landing__footer {
|
||||
//background: -webkit-gradient(linear, left top, left bottom, color-stop(65%, rgba(0, 0, 0, .1)), to(#000));
|
||||
background: linear-gradient(180deg, rgba(0, 0, 0, .8) 95%, #FFF);
|
||||
padding-top: 4.5rem !important;
|
||||
padding-bottom: 4.5rem !important;
|
||||
padding-left: 1.25rem;
|
||||
padding-right: 1.25rem;
|
||||
color: #9f9f9f;
|
||||
}
|
||||
|
||||
.icon_contact:hover {
|
||||
color: blue;
|
||||
border-color: white;
|
||||
border-width: .0625rem;
|
||||
}
|
||||
|
||||
.landing__footer .doc-link {
|
||||
color: $textcol;
|
||||
}
|
||||
|
||||
.landing__footer .doc-link:hover {
|
||||
opacity: .8
|
||||
}
|
||||
|
||||
.landing__swirl-bg {
|
||||
background-repeat: no-repeat !important;
|
||||
background-position: top;
|
||||
background-size: contain !important;
|
||||
background-image: url(../../../public/images/landing_first_section.png) !important
|
||||
}
|
||||
|
||||
.feat-descr {
|
||||
font-size: 1.15rem;
|
||||
}
|
||||
|
||||
.feat-descr:hover {
|
||||
transition: opacity 0.5s ease-in-out;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.q-col-gutter-sm {
|
||||
padding: 3.125rem 3.125rem;
|
||||
//margin-left: -48px
|
||||
}
|
||||
|
||||
body.mobile .landing {
|
||||
//background: unset
|
||||
}
|
||||
|
||||
body.mobile .landing:before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
top: 0;
|
||||
height: 100vh;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
//background: #000 url(../../public/images/cover.jpg) 50%;
|
||||
|
||||
background-size: cover
|
||||
}
|
||||
|
||||
/*
|
||||
@-webkit-keyframes logo-rotate {
|
||||
to {
|
||||
-webkit-transform: rotate(-1turn);
|
||||
transform: rotate(-1turn)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes logo-rotate {
|
||||
to {
|
||||
-webkit-transform: rotate(-1turn);
|
||||
transform: rotate(-1turn)
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
.home {
|
||||
//background-color: rgb(250, 250, 250);
|
||||
padding: 3.125rem;
|
||||
display: flex;
|
||||
//flex-wrap: nowrap;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.btn-start {
|
||||
margin: 3.125rem;
|
||||
}
|
||||
|
||||
.shadow {
|
||||
//color: white;
|
||||
text-shadow: 0.125rem 0.125rem 0.25rem $grayshadow;
|
||||
}
|
||||
|
||||
.text-h1, h1 {
|
||||
font-size: 3rem;
|
||||
font-weight: bold;
|
||||
line-height: 3rem;
|
||||
letter-spacing: -.01562em;
|
||||
margin-bottom: 8px !important;
|
||||
}
|
||||
|
||||
.text-h2 {
|
||||
font-size: 3.75rem;
|
||||
font-weight: 300;
|
||||
line-height: 3.75rem;
|
||||
letter-spacing: -.00833em;
|
||||
}
|
||||
|
||||
.text-weight-bold {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.text-vers {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.75rem;
|
||||
letter-spacing: .00937em;
|
||||
text-shadow: .25rem .25rem .5rem $grayshadow;
|
||||
}
|
||||
|
||||
.homep-cover-img-1 {
|
||||
background: #000 url(../../../public/images/foto1.jpg) no-repeat 50% fixed;
|
||||
//transition: background-image 1s ease-in-out;
|
||||
}
|
||||
|
||||
.homep-cover-img-2 {
|
||||
background: #000 url(../../../public/images/foto2.jpg) no-repeat 50% fixed;
|
||||
//transition: background-image 1s ease-in-out;
|
||||
}
|
||||
|
||||
.homep-cover-img-3 {
|
||||
background: #000 url(../../../public/images/foto3.jpg) no-repeat 50% fixed;
|
||||
//transition: background-image 1s ease-in-out;
|
||||
}
|
||||
|
||||
.homep-cover-img.hide-filter:before {
|
||||
opacity: 0
|
||||
}
|
||||
|
||||
.landing__footer-icons {
|
||||
font-size: 1.75rem
|
||||
}
|
||||
|
||||
.landing__footer-icons a {
|
||||
margin: 0 .5rem .5rem;
|
||||
text-decoration: none;
|
||||
outline: 0;
|
||||
color: $textcol;
|
||||
transition: color .28s
|
||||
}
|
||||
|
||||
.landing__footer-icons a:hover {
|
||||
color: $textcol_scuro;
|
||||
}
|
||||
|
||||
.doc-img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.mylist {
|
||||
background: #3fdaff;
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
|
||||
.clgutter {
|
||||
margin-top: 1.25rem;
|
||||
padding: .62rem;
|
||||
}
|
||||
|
||||
.carousel_img_3 {
|
||||
//background-image: url(../../public/images/cibo_sano.jpg);
|
||||
background-size: cover !important;
|
||||
background-position: 50% center !important;
|
||||
background-repeat: no-repeat !important;
|
||||
}
|
||||
|
||||
@media (max-width: 718px) {
|
||||
// PER VERSIONE MOBILE
|
||||
|
||||
.landing__hero {
|
||||
text-align: center
|
||||
}
|
||||
.landing__header {
|
||||
height: 7vh
|
||||
}
|
||||
.clgutter {
|
||||
margin-top: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.landing__hero .text-h1, h1 {
|
||||
font-size: 2rem;
|
||||
line-height: 2.05rem;
|
||||
margin-bottom: 1.25rem
|
||||
}
|
||||
|
||||
.landing > section.padding {
|
||||
padding: 2.5rem 1rem;
|
||||
}
|
||||
|
||||
.landing > section.padding_testo {
|
||||
padding-top: 1.25rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.landing > section.padding_gallery {
|
||||
padding-top: 3.125rem;
|
||||
padding-bottom: 5.625rem;
|
||||
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.landing > section.padding_gallery > div {
|
||||
padding-top: 3.125rem;
|
||||
padding-bottom: 5.625rem;
|
||||
|
||||
}
|
||||
|
||||
.landing__features h4, .landing__features h6 {
|
||||
margin: 1.25rem 0
|
||||
}
|
||||
|
||||
h4 {
|
||||
line-height: 1.4;
|
||||
text-shadow: 0.25rem 0.25rem 0.5rem $grayshadow;
|
||||
}
|
||||
|
||||
.landing .feature-item {
|
||||
text-align: center;
|
||||
margin-top: 1.25rem;
|
||||
}
|
||||
.landing__hero-content {
|
||||
padding-bottom: 11.25rem;
|
||||
}
|
||||
.landing__hero2-content {
|
||||
padding-bottom: 7.25rem;
|
||||
}
|
||||
.landing__hero-btns {
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center
|
||||
}
|
||||
|
||||
.q-col-gutter-sm {
|
||||
padding: .625rem .315rem;
|
||||
}
|
||||
|
||||
.text-subtitle1 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
.text-vers {
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.custom-caption {
|
||||
text-align: center;
|
||||
padding: .75rem;
|
||||
color: $textcol;
|
||||
background-color: rgba(0, 0, 0, .3);
|
||||
}
|
||||
|
||||
.sfondo-grigio {
|
||||
padding: 1rem;
|
||||
color: $textcol;
|
||||
background-color: rgba(0, 0, 0, .35);
|
||||
}
|
||||
|
||||
.mycontacts {
|
||||
color: gray;
|
||||
letter-spacing: 0.078rem;
|
||||
}
|
||||
|
||||
.mycontacts_title {
|
||||
text-shadow: 0.125rem 0.125rem 0.125rem #555;
|
||||
font-weight: bold;
|
||||
color: #999;
|
||||
letter-spacing: 0.125rem;
|
||||
}
|
||||
|
||||
.mycontacts_text {
|
||||
color: #999;
|
||||
letter-spacing: 0.093rem;
|
||||
}
|
||||
|
||||
.clEditDiv {
|
||||
border: #c8c9cb solid 2px;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.clEditNotActive {
|
||||
background-color: #e6e6e6;
|
||||
}
|
||||
|
||||
.clEdit {
|
||||
border: #f69f09 solid 2px;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.clEdit:hover {
|
||||
border: #11f609 solid 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.align_center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.align_right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.align_left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.flex3 {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background-color: green;
|
||||
}
|
||||
259
src/components/CMyEditElem/CMyEditElem.ts
Executable file
259
src/components/CMyEditElem/CMyEditElem.ts
Executable file
@@ -0,0 +1,259 @@
|
||||
import {
|
||||
defineComponent, onMounted, PropType, ref, toRef, watch,
|
||||
} from 'vue'
|
||||
|
||||
import { ILabelValue, IMyElem, IMyPage, IOperators } from '@src/model'
|
||||
import { useGlobalStore } from '@store/globalStore'
|
||||
|
||||
import { CImgTitle } from '../CImgTitle/index'
|
||||
import { CTitle } from '@/components/CTitle/index'
|
||||
import { tools } from '@store/Modules/tools'
|
||||
import { shared_consts } from '@/common/shared_vuejs'
|
||||
import { LandingFooter } from '@/components/LandingFooter'
|
||||
import { COpenStreetMap } from '@src/components/COpenStreetMap'
|
||||
import { CCardCarousel } from '@src/components/CCardCarousel'
|
||||
import { CMyPage } from '@src/components/CMyPage'
|
||||
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'
|
||||
import { emitKeypressEvents } from 'readline'
|
||||
import { costanti } from '@costanti'
|
||||
|
||||
|
||||
export default defineComponent({
|
||||
name: 'CMyEditElem',
|
||||
components: { CImgTitle, CTitle, LandingFooter, CEventsCalendar,
|
||||
CCardCarousel, COpenStreetMap, CMyPage, CMyPageIntro, CMyEditor, CMyFieldRec,
|
||||
CSelectColor, CSelectFontSize },
|
||||
emits: ['saveElem'],
|
||||
props: {
|
||||
myelem: {
|
||||
type: Object as PropType<IMyElem>,
|
||||
required: true,
|
||||
},
|
||||
path: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: '',
|
||||
},
|
||||
editOn: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
},
|
||||
addOn: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
setup(props, { emit }) {
|
||||
const globalStore = useGlobalStore()
|
||||
|
||||
const { setmeta, getsrcbyimg } = MixinMetaTags()
|
||||
const { setValDb, getValDb } = MixinBase()
|
||||
|
||||
|
||||
const $q = useQuasar()
|
||||
const { t } = useI18n()
|
||||
|
||||
const animare = ref(0)
|
||||
const slide = ref(0)
|
||||
const slide2 = ref(0)
|
||||
const arrPages = ref([] as any[])
|
||||
const disableSave = ref(true)
|
||||
const enableEdit = ref(true)
|
||||
const elemChanged = ref(false)
|
||||
const enableAdd = ref(true)
|
||||
|
||||
const neworder = ref(<number|undefined>0)
|
||||
|
||||
const myel = toRef(props, 'myelem')
|
||||
const newtype = ref(<any>'')
|
||||
|
||||
watch(() => myel.value.order, (value, oldval) => {
|
||||
mounted()
|
||||
})
|
||||
|
||||
function getArrDisciplines() {
|
||||
return globalStore.disciplines.filter((rec: any) => rec.showinhome)
|
||||
}
|
||||
|
||||
function getheightgallery() {
|
||||
if (tools.isMobile())
|
||||
return '400px'
|
||||
else
|
||||
return '600px'
|
||||
}
|
||||
|
||||
function saveElem(exit?: boolean) {
|
||||
// Save Elem record
|
||||
const myelem = props.myelem
|
||||
myelem.order = neworder.value
|
||||
globalStore.saveMyElem($q, t, myelem).then((ris) => {
|
||||
if (ris) {
|
||||
// OK
|
||||
disableSave.value = true
|
||||
emit('saveElem', myelem)
|
||||
if (exit)
|
||||
elemChanged.value = false
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function addNewElem(order?: number) {
|
||||
|
||||
const newrec: IMyElem = {
|
||||
_id: undefined,
|
||||
type: newtype.value,
|
||||
path: props.myelem.path,
|
||||
order: order ? order : 1000,
|
||||
active: true,
|
||||
container: ''
|
||||
}
|
||||
|
||||
if (newrec.type === shared_consts.ELEMTYPE.CAROUSEL_IMGS) {
|
||||
newrec.container2 = '8'
|
||||
newrec.height = 600
|
||||
} else if (newrec.type === shared_consts.ELEMTYPE.CARD) {
|
||||
newrec.class2 = 'row justify-center'
|
||||
}
|
||||
|
||||
|
||||
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 + ' ?',
|
||||
html: true,
|
||||
ok: {
|
||||
label: 'Elimina',
|
||||
push: true,
|
||||
},
|
||||
title: '',
|
||||
cancel: true,
|
||||
persistent: false,
|
||||
}).onOk(async () => {
|
||||
|
||||
// Save Elem record
|
||||
await globalStore.delMyElem($q, t, props.myelem).then((ris) => {
|
||||
if (ris) {
|
||||
// OK
|
||||
disableSave.value = true
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
function modifElem(value: any) {
|
||||
disableSave.value = false
|
||||
elemChanged.value = true
|
||||
}
|
||||
|
||||
function mounted() {
|
||||
neworder.value = props.myelem.order
|
||||
|
||||
arrPages.value = []
|
||||
arrPages.value.push({label: '[Vuoto]', path: ''})
|
||||
for (const page of globalStore.mypage) {
|
||||
|
||||
const rec = {
|
||||
// @ts-ignore
|
||||
label: page.title,
|
||||
// @ts-ignore
|
||||
value: page.path
|
||||
}
|
||||
arrPages.value.push(rec)
|
||||
}
|
||||
|
||||
if (props.myelem)
|
||||
newtype.value = props.myelem.type
|
||||
}
|
||||
|
||||
function clickOnElem() {
|
||||
if (props.editOn) {
|
||||
}
|
||||
}
|
||||
|
||||
function addNewCard() {
|
||||
if (!myel.value.listcards)
|
||||
myel.value.listcards = []
|
||||
myel.value.listcards.push({ imagefile: '', alt: '', description: '' })
|
||||
modifElem(true)
|
||||
}
|
||||
|
||||
function getClass() {
|
||||
let mycl = ''
|
||||
if (props.myelem.align === shared_consts.ALIGNTYPE.CEHTER) {
|
||||
mycl += ' align_center'
|
||||
} else if (props.myelem.align === shared_consts.ALIGNTYPE.RIGHT) {
|
||||
mycl += ' align_right'
|
||||
} else if (props.myelem.align === shared_consts.ALIGNTYPE.LEFT) {
|
||||
mycl += ' align_left'
|
||||
}
|
||||
|
||||
return mycl
|
||||
}
|
||||
|
||||
function showFit() {
|
||||
if (props.myelem.type)
|
||||
return [shared_consts.ELEMTYPE.TEXT].includes(props.myelem.type)
|
||||
else
|
||||
return false
|
||||
}
|
||||
|
||||
onMounted(mounted)
|
||||
|
||||
return {
|
||||
tools,
|
||||
shared_consts,
|
||||
getArrDisciplines,
|
||||
getheightgallery,
|
||||
slide,
|
||||
slide2,
|
||||
animare,
|
||||
setmeta,
|
||||
getsrcbyimg,
|
||||
saveElem,
|
||||
myel,
|
||||
disableSave,
|
||||
modifElem,
|
||||
delElem,
|
||||
addNewElem,
|
||||
newtype,
|
||||
neworder,
|
||||
elemChanged,
|
||||
enableAdd,
|
||||
clickOnElem,
|
||||
getClass,
|
||||
showFit,
|
||||
getValDb,
|
||||
dupElem,
|
||||
enableEdit,
|
||||
addNewCard,
|
||||
arrPages,
|
||||
costanti,
|
||||
}
|
||||
},
|
||||
|
||||
})
|
||||
647
src/components/CMyEditElem/CMyEditElem.vue
Executable file
647
src/components/CMyEditElem/CMyEditElem.vue
Executable file
@@ -0,0 +1,647 @@
|
||||
<template>
|
||||
<div
|
||||
v-if="myel"
|
||||
:class="
|
||||
(editOn ? ` clEditDiv` : ``) +
|
||||
`` +
|
||||
(!myel.active ? ` clEditNotActive` : ``)
|
||||
"
|
||||
>
|
||||
<div>
|
||||
<q-bar v-if="enableEdit" dense class="bg-blue-1 q-px-sm">
|
||||
<q-toggle
|
||||
left-label="Attiva"
|
||||
v-model="myel.active"
|
||||
color="positive"
|
||||
icon="fas fa-eye"
|
||||
>
|
||||
</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-space />
|
||||
<q-btn
|
||||
icon="fas fa-trash-alt"
|
||||
color="negative"
|
||||
dense
|
||||
flat
|
||||
size="sm"
|
||||
@click="delElem"
|
||||
>
|
||||
</q-btn>
|
||||
<q-btn
|
||||
icon="far fa-copy"
|
||||
color="primary"
|
||||
dense
|
||||
flat
|
||||
size="sm"
|
||||
@click="dupElem(myel.order + 10)"
|
||||
>
|
||||
</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 class="justify-center q-gutter-xs row">
|
||||
<q-btn
|
||||
dense
|
||||
v-if="enableEdit && !disableSave"
|
||||
icon="fas fa-check"
|
||||
color="positive"
|
||||
label="Applica"
|
||||
size="sm"
|
||||
:disable="disableSave"
|
||||
@click="saveElem"
|
||||
>
|
||||
</q-btn>
|
||||
<q-btn
|
||||
dense
|
||||
v-if="enableEdit && !disableSave"
|
||||
icon="fas fa-check"
|
||||
color="positive"
|
||||
label="Salva"
|
||||
size="sm"
|
||||
:disable="disableSave"
|
||||
@click="saveElem(true)"
|
||||
>
|
||||
</q-btn>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<q-select
|
||||
v-if="enableEdit"
|
||||
rounded
|
||||
outlined
|
||||
v-model="myel.align"
|
||||
:options="tools.SelectListAlign"
|
||||
@update:model-value="modifElem"
|
||||
dense
|
||||
label="Allinea"
|
||||
style="min-width: 100px"
|
||||
emit-value
|
||||
map-options
|
||||
>
|
||||
</q-select>
|
||||
<q-select
|
||||
v-if="enableEdit"
|
||||
rounded
|
||||
style="min-width: 100px"
|
||||
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
|
||||
style="min-width: 100px"
|
||||
outlined
|
||||
v-model="myel.fit"
|
||||
:options="tools.SelectListFit"
|
||||
@update:model-value="modifElem"
|
||||
dense
|
||||
label="Fit"
|
||||
emit-value
|
||||
map-options
|
||||
>
|
||||
</q-select>
|
||||
</div>
|
||||
<div class="row">
|
||||
<q-input
|
||||
label="Classe:"
|
||||
@update:model-value="modifElem"
|
||||
v-model="myel.class2"
|
||||
filled
|
||||
v-on:keyup.enter="saveElem"
|
||||
>
|
||||
</q-input>
|
||||
</div>
|
||||
|
||||
<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"
|
||||
dense
|
||||
filled
|
||||
v-on:keyup.enter="saveElem"
|
||||
>
|
||||
</q-input>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="myel.type === shared_consts.ELEMTYPE.CARD"
|
||||
:class="myel.span ? '' : ''"
|
||||
>
|
||||
<q-btn
|
||||
rounded
|
||||
dense
|
||||
color="primary"
|
||||
label="Card"
|
||||
icon="fas fa-plus"
|
||||
@click="addNewCard"
|
||||
>
|
||||
</q-btn>
|
||||
<div v-for="(rec, ind) in myel.listcards" :key="ind">
|
||||
<div v-if="enableEdit" class="column">
|
||||
<CMyFieldRec
|
||||
title="Lista Immagini:"
|
||||
table="myelems"
|
||||
:id="myel._id"
|
||||
:rec="myel"
|
||||
field="listcards"
|
||||
@update:model-value="modifElem"
|
||||
:canEdit="true"
|
||||
:canModify="true"
|
||||
>
|
||||
</CMyFieldRec>
|
||||
<q-input
|
||||
label="Immagine:"
|
||||
dense
|
||||
class="fa-border"
|
||||
@update:model-value="modifElem"
|
||||
v-model="rec.imagefile"
|
||||
filled
|
||||
v-on:keyup.enter="saveElem"
|
||||
>
|
||||
</q-input>
|
||||
<div v-if="enableEdit" class="row">
|
||||
<q-input
|
||||
dense
|
||||
style="min-width: 100px"
|
||||
label="Titolo:"
|
||||
class="fa-border"
|
||||
@update:model-value="modifElem"
|
||||
v-model="rec.alt"
|
||||
filled
|
||||
v-on:keyup.enter="saveElem"
|
||||
>
|
||||
</q-input>
|
||||
<CSelectColor
|
||||
v-if="enableEdit"
|
||||
style="min-width: 100px"
|
||||
v-model="rec.color"
|
||||
@update:model-value="modifElem"
|
||||
title="Col Titolo"
|
||||
>
|
||||
</CSelectColor>
|
||||
<CSelectFontSize
|
||||
v-if="enableEdit"
|
||||
style="min-width: 100px"
|
||||
v-model="rec.size"
|
||||
@update:model-value="modifElem"
|
||||
title="Font Titolo"
|
||||
>
|
||||
</CSelectFontSize>
|
||||
</div>
|
||||
<CMyEditor
|
||||
v-model:value="rec.content"
|
||||
title="Contenuto:"
|
||||
@keyup.enter.stop
|
||||
:showButtons="false"
|
||||
:canModify="true"
|
||||
@update:value="modifElem"
|
||||
@showandsave="saveElem"
|
||||
>
|
||||
</CMyEditor>
|
||||
|
||||
<q-input
|
||||
label="Sottotitolo:"
|
||||
class="fa-border"
|
||||
dense
|
||||
@update:model-value="modifElem"
|
||||
v-model="rec.description"
|
||||
filled
|
||||
v-on:keyup.enter="saveElem"
|
||||
>
|
||||
</q-input>
|
||||
</div>
|
||||
<div v-if="enableEdit" class="row">
|
||||
<CSelectColor
|
||||
v-if="enableEdit"
|
||||
v-model="rec.colorsub"
|
||||
@update:model-value="modifElem"
|
||||
title="Col Sottotitolo"
|
||||
>
|
||||
</CSelectColor>
|
||||
</div>
|
||||
</div>
|
||||
</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 v-else-if="myel.type === shared_consts.ELEMTYPE.TITLE">
|
||||
<div v-if="enableEdit">
|
||||
<q-input
|
||||
label="Titolo"
|
||||
class="fa-border"
|
||||
@update:model-value="modifElem"
|
||||
v-model="myel.title"
|
||||
filled
|
||||
v-on:keyup.enter="saveElem"
|
||||
>
|
||||
</q-input>
|
||||
<q-input
|
||||
label="Style"
|
||||
class="fa-border"
|
||||
@update:model-value="modifElem"
|
||||
v-model="myel.styleadd"
|
||||
filled
|
||||
v-on:keyup.enter="saveElem"
|
||||
>
|
||||
</q-input>
|
||||
<q-input
|
||||
label="Immagine:"
|
||||
class="fa-border"
|
||||
@update:model-value="modifElem"
|
||||
v-model="myel.imgback"
|
||||
filled
|
||||
v-on:keyup.enter="saveElem"
|
||||
>
|
||||
</q-input>
|
||||
</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 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 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
|
||||
dense
|
||||
v-on:keyup.enter="saveElem"
|
||||
>
|
||||
</q-input>
|
||||
<CMyFieldRec
|
||||
title="NomeFile Img:"
|
||||
table="myelems"
|
||||
:id="myel._id"
|
||||
:rec="myel"
|
||||
field="container"
|
||||
@update:model-value="modifElem"
|
||||
:canEdit="true"
|
||||
:canModify="true"
|
||||
:type="costanti.FieldType.images"
|
||||
>
|
||||
</CMyFieldRec>
|
||||
|
||||
<div class="row">
|
||||
<q-input
|
||||
label="Width:"
|
||||
@update:model-value="modifElem"
|
||||
v-model="myel.widthimg"
|
||||
filled
|
||||
dense
|
||||
v-on:keyup.enter="saveElem"
|
||||
>
|
||||
</q-input>
|
||||
<q-input
|
||||
label="Height:"
|
||||
@update:model-value="modifElem"
|
||||
v-model="myel.heightimg"
|
||||
filled
|
||||
dense
|
||||
v-on:keyup.enter="saveElem"
|
||||
>
|
||||
</q-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else-if="myel.type === shared_consts.ELEMTYPE.IMAGEUPLOAD">
|
||||
<div v-if="enableEdit">
|
||||
<q-input
|
||||
label="NomeFile Img:"
|
||||
@update:model-value="modifElem"
|
||||
v-model="myel.image"
|
||||
filled
|
||||
v-on:keyup.enter="saveElem"
|
||||
>
|
||||
</q-input>
|
||||
<CMyFieldRec
|
||||
title="NomeFile Img:"
|
||||
table="myelems"
|
||||
:id="myel._id"
|
||||
:rec="myel"
|
||||
field="image"
|
||||
@update:model-value="modifElem"
|
||||
:canEdit="true"
|
||||
:canModify="true"
|
||||
:type="costanti.FieldType.images"
|
||||
>
|
||||
</CMyFieldRec>
|
||||
<div class="row">
|
||||
<q-input
|
||||
label="Width:"
|
||||
@update:model-value="modifElem"
|
||||
v-model="myel.widthimg"
|
||||
filled
|
||||
v-on:keyup.enter="saveElem"
|
||||
>
|
||||
</q-input>
|
||||
<q-input
|
||||
label="Height:"
|
||||
@update:model-value="modifElem"
|
||||
v-model="myel.heightimg"
|
||||
filled
|
||||
v-on:keyup.enter="saveElem"
|
||||
>
|
||||
</q-input>
|
||||
</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>
|
||||
<div v-else-if="myel.type === shared_consts.ELEMTYPE.FOOTER"></div>
|
||||
<div v-else-if="myel.type === shared_consts.ELEMTYPE.PAGE">
|
||||
<div v-if="enableEdit" class="row">
|
||||
<q-select
|
||||
rounded
|
||||
outlined
|
||||
v-model="myel.container"
|
||||
:options="arrPages"
|
||||
label="Pagina"
|
||||
emit-value
|
||||
map-options
|
||||
@change="saveElem"
|
||||
>
|
||||
</q-select>
|
||||
</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>
|
||||
<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 v-if="enableEdit" class="row">
|
||||
<q-input
|
||||
label="ImgMap:"
|
||||
@update:model-value="modifElem"
|
||||
v-model="myel.container"
|
||||
debounce="1000"
|
||||
filled
|
||||
v-on:keyup.enter="saveElem"
|
||||
>
|
||||
</q-input>
|
||||
<q-input
|
||||
label="UrlMap:"
|
||||
@update:model-value="modifElem"
|
||||
v-model="myel.container2"
|
||||
debounce="1000"
|
||||
filled
|
||||
v-on:keyup.enter="saveElem"
|
||||
>
|
||||
</q-input>
|
||||
<q-input
|
||||
label="Title:"
|
||||
@update:model-value="modifElem"
|
||||
v-model="myel.container3"
|
||||
debounce="1000"
|
||||
filled
|
||||
v-on:keyup.enter="saveElem"
|
||||
>
|
||||
</q-input>
|
||||
<q-input
|
||||
label="Coordinata Mappa 1:"
|
||||
@update:model-value="modifElem"
|
||||
v-model="myel.containerHtml"
|
||||
debounce="1000"
|
||||
filled
|
||||
v-on:keyup.enter="saveElem"
|
||||
>
|
||||
</q-input>
|
||||
<q-input
|
||||
label="Coordinata Mappa Big:"
|
||||
@update:model-value="modifElem"
|
||||
v-model="myel.link"
|
||||
debounce="1000"
|
||||
filled
|
||||
v-on:keyup.enter="saveElem"
|
||||
>
|
||||
</q-input>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="myel.type === shared_consts.ELEMTYPE.CAROUSEL_IMGS">
|
||||
<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>
|
||||
</div>
|
||||
<div v-else-if="myel.type === shared_consts.ELEMTYPE.CAROUSEL_HOME"></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>
|
||||
</div>
|
||||
<div v-else-if="myel.type === shared_consts.ELEMTYPE.CHECK_EMAIL"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" src="./CMyEditElem.ts">
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import './CMyEditElem.scss';
|
||||
</style>
|
||||
1
src/components/CMyEditElem/index.ts
Executable file
1
src/components/CMyEditElem/index.ts
Executable file
@@ -0,0 +1 @@
|
||||
export { default as CMyEditElem } from './CMyEditElem.vue'
|
||||
Reference in New Issue
Block a user