surya/myprojplanet_vite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

HTML Editor go on

Browse Source
This commit is contained in:
Surya Paolo
2022-11-13 22:39:25 +01:00
parent 5076d72523
commit 711f1b515d
35 changed files with 3684 additions and 1663 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/CMyPageElem/CMyPageElem.ts
View File

@@ -7,6 +7,7 @@ import { IMyElem, IMyPage } from '@src/model'
import { useGlobalStore } from '@store/globalStore'
import { LandingFooter } from '@/components/LandingFooter'
import { CMyElem } from '@/components/CMyElem'
import { CMyEditElem } from '@/components/CMyEditElem'
import { CImgTitle } from '../CImgTitle/index'
import { CTitle } from '../CTitle/index'
@@ -17,7 +18,7 @@ import { shared_consts } from '@/common/shared_vuejs'
export default defineComponent({
name: 'CMyPageElem',
components: { LandingFooter, CImgTitle, CTitle, CMyElem },
components: { LandingFooter, CImgTitle, CTitle, CMyElem, CMyEditElem },
props: {
title: String,
mypath: {
@@ -61,6 +62,7 @@ export default defineComponent({
const editOn = ref(false)
const addOn = ref(false)
const selElem = ref({} as IMyElem)
const myelemVoid = ref({active: true, type: shared_consts.ELEMTYPE.TEXT, container: '...', path: mypathin.value} as IMyElem)
const globalStore = useGlobalStore()
@@ -76,6 +78,11 @@ export default defineComponent({
const load = async (): Promise<void> => {
// console.log('load', mypathin.value)
if (mypathin.value !== '') rec.value = await globalStore.loadPage('/' + mypathin.value)
editOn.value = tools.getCookie('EDIT_' + mypathin.value) === '-1' ? true : false
if (mypathin.value === 'home')
editOn.value = false
console.log('getcookie: ', editOn.value, mypathin.value)
}
watch(() => props.mypath, async (to: string, from: string) => {
@@ -84,6 +91,19 @@ export default defineComponent({
})
function selElemClick(myelem: IMyElem) {
selElem.value = myelem
}
function saveElem(myelem: IMyElem) {
//
}
function changeVisuDrawer() {
console.log('changeVisuDrawer')
tools.setCookie('EDIT_' + mypathin.value, editOn.value ? '-1' : '0')
}
onMounted(load)
return {
@@ -94,6 +114,10 @@ export default defineComponent({
tools,
shared_consts,
myelemVoid,
selElemClick,
selElem,
saveElem,
changeVisuDrawer,
}
},

103
src/components/CMyPageElem/CMyPageElem.vue
View File

@@ -1,26 +1,44 @@
<template>
<div>
<div v-if="mypathin && !!rec">
<q-toolbar>
<q-toggle v-if="tools.isManager()"
v-model="editOn"
icon="fas fa-pencil-alt"
>
</q-toggle>
<!-- <q-toggle v-if="tools.isManager()"
v-model="addOn"
icon="fas fa-plus"
>
</q-toggle>-->
</q-toolbar>
<q-toggle
v-if="tools.isManager()"
v-model="editOn"
color="green"
@update:model-value="changeVisuDrawer"
icon="fas fa-pencil-alt"
>
</q-toggle>
<q-drawer
v-model="editOn"
side="right"
show-if-above
:width="400"
:breakpoint="700"
elevated
>
<q-bar dense class="bg-primary text-white">
<q-toolbar-title> Editor </q-toolbar-title>
<q-btn
flat
round
color="white"
icon="close"
@click="editOn = false; changeVisuDrawer()"
></q-btn>
</q-bar>
<CMyEditElem
:myelem="selElem"
:editOn="true"
:path="rec.path"
@saveElem="saveElem"
>
</CMyEditElem>
</q-drawer>
<div class="q-ma-sm q-gutter-sm q-pa-xs">
<div v-if="!!rec.img1" class="text-center">
<q-img :src="``+ rec.img1" class="img"></q-img>
<q-img :src="`` + rec.img1" class="img"></q-img>
</div>
<div v-if="!!rec.content" v-html="rec.content"></div>
@@ -28,41 +46,62 @@
</q-video>
<div v-if="!!rec.img2" class="text-center">
<q-img :src="``+ rec.img2" class="img"></q-img>
<q-img :src="`` + rec.img2" class="img"></q-img>
</div>
<div v-if="!!rec.content2" v-html="rec.content2"></div>
<q-video v-if="!!rec.video2" :src="rec.video2" :ratio="rec.ratio2"></q-video>
<q-video
v-if="!!rec.video2"
:src="rec.video2"
:ratio="rec.ratio2"
></q-video>
<div v-if="!!rec.img3" class="text-center">
<q-img :src="``+ rec.img2" class="img"></q-img>
<q-img :src="`` + rec.img2" class="img"></q-img>
</div>
<div v-if="!!rec.content3" v-html="rec.content3"></div>
<q-video v-if="!!rec.video3" :src="rec.video3" :ratio="rec.ratio3"></q-video>
<q-video
v-if="!!rec.video3"
:src="rec.video3"
:ratio="rec.ratio3"
></q-video>
<div v-if="!!rec.content4" v-html="rec.content4"></div>
<span v-for="(myelem, ind) in myelems" :key="ind">
<CMyElem v-if="myelem.active || editOn" :myelem="myelem" :editOn="editOn" :addOn="addOn" :path="rec.path">
<div v-for="(myelem, ind) in myelems" :key="ind">
<CMyElem
v-if="myelem.active || editOn"
:myelem="myelem"
:editOn="editOn"
:addOn="addOn"
:path="rec.path"
@selElemClick="selElemClick"
>
</CMyElem>
</span>
</div>
<div v-if="myelems.length === 0">
<CMyElem v-if="editOn" :myelem="myelemVoid" :editOn="editOn" :addOn="addOn" :path="rec.path">
<CMyElem
v-if="editOn"
:myelem="myelemVoid"
:editOn="editOn"
:addOn="addOn"
:path="rec.path"
>
</CMyElem>
</div>
</div>
</div>
<div v-else>
<div v-if="!!title">
<CTitle
v-if="imgbackground" :imgbackground="imgbackground"
:headtitle="title" :sizes="sizes" :styleadd="styleadd"></CTitle>
v-if="imgbackground"
:imgbackground="imgbackground"
:headtitle="title"
:sizes="sizes"
:styleadd="styleadd"
></CTitle>
<div v-if="!imgbackground">
<CImgTitle v-if="img" :src="img" :title="title">
</CImgTitle>
<CImgTitle v-if="img" :src="img" :title="title"> </CImgTitle>
</div>
<slot></slot>
<div v-if="!nofooter">