Animations in the WebEditor

src/components/CMyPageElem2/CMyPageElem2.ts

@@ -0,0 +1,145 @@
+import {
+  computed,
+  defineComponent, onMounted, ref, toRef, watch,
+} from 'vue'
+
+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'
+import { tools } from '@store/Modules/tools'
+import { useQuasar } from 'quasar'
+import { useI18n } from '@/boot/i18n'
+import { shared_consts } from '@/common/shared_vuejs'
+import objectId from '@src/js/objectId'
+
+export default defineComponent({
+  name: 'CMyPageElem2',
+  components: { LandingFooter, CImgTitle, CTitle, CMyElem, CMyEditElem },
+  props: {
+    title: String,
+    mypath: {
+      type: String,
+      required: true,
+    },
+    img: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    imgbackground: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    sizes: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    styleadd: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    nofooter: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+
+  setup(props) {
+    const rec = ref<IMyPage | null>(null)
+    const mypathin = toRef(props, 'mypath')
+
+    const $q = useQuasar()
+
+    const { t } = useI18n()
+    const globalStore = useGlobalStore()
+
+    const editOn = ref(false)
+    const visuEditor = ref(false)
+    const addOn = ref(false)
+    const myelemVoid = ref({ _id: objectId(), active: true, type: shared_consts.ELEMTYPE.TEXT, container: '...', path: mypathin.value } as IMyElem)
+
+
+    const selElem = ref(globalStore.selElem)
+
+    const myelems = computed(() => {
+      if (mypathin.value)
+        return globalStore.getMyElems(mypathin.value)
+      else
+        return null
+    })
+
+    function load() {
+      // console.log('load', mypathin.value)
+
+      if (mypathin.value !== '') {
+        globalStore.loadPage('/' + mypathin.value, 'cmypageelem').then(ris => {
+          rec.value = ris
+        })
+      }
+
+      if (tools.isManager()) {
+        editOn.value = tools.getCookie('EDITPAGES', '0') === '-1' ? true : false
+        console.log('getcookie: ', editOn.value, mypathin.value)
+      }
+    }
+
+    watch(() => props.mypath, (to: string, from: string) => {
+      console.log('... load', mypathin.value, props.mypath)
+      selElem.value = {}
+      load()
+    })
+
+    watch(
+      () => editOn.value,
+      () => {
+        if (!editOn.value) {
+          selElem.value = {}
+        }
+      })
+
+    function selElemClick(myelem: IMyElem) {
+      console.log('mypageelem selElemClick', myelem)
+      selElem.value = myelem
+      visuEditor.value = !!myelem
+    }
+
+    function mounted() {
+      load()
+    }
+
+    function saveElem(myelem: IMyElem) {
+      //
+    }
+
+    function changeVisuDrawer(path: string, edit: boolean) {
+      globalStore.changeVisuDrawer(path, edit)
+    }
+
+    onMounted(mounted)
+
+    return {
+      rec, myelems,
+      mypathin,
+      editOn,
+      visuEditor,
+      addOn,
+      tools,
+      shared_consts,
+      myelemVoid,
+      selElemClick,
+      selElem,
+      saveElem,
+      changeVisuDrawer,
+    }
+  },
+
+})

src/components/CMyPageElem2/CMyPageElem2.vue

@@ -0,0 +1,135 @@
+<template>
+  <div>
+    <div v-if="mypathin && !!rec">
+      <q-toggle
+        v-if="tools.isManager()"
+        v-model="editOn"
+        color="green"
+        @update:model-value="changeVisuDrawer(mypathin, editOn)"
+        icon="fas fa-pencil-alt"
+      >
+      </q-toggle>
+
+      <q-toggle
+        v-if="tools.isManager()"
+        v-model="visuEditor"
+        color="green"
+        @update:model-value="changeVisuDrawer(mypathin, editOn)"
+        icon="fas fa-pencil-alt"
+      >
+      </q-toggle>
+
+      <q-drawer
+        v-model="visuEditor"
+        side="right"
+        :width="350"
+        :breakpoint="700"
+        elevated
+      >
+        <q-scroll-area class="fit">
+          <q-bar dense class="bg-primary text-white">
+            <q-toolbar-title> Editor </q-toolbar-title>
+            <q-btn
+              flat
+              round
+              color="white"
+              icon="close"
+              @click="
+                visuEditor = false;
+              "
+            ></q-btn>
+          </q-bar>
+          <CMyEditElem
+            :myelem="selElem"
+            :editOn="true"
+            :path="rec.path"
+          >
+          </CMyEditElem>
+        </q-scroll-area>
+      </q-drawer>
+
+      <div class="q-ma-xs q-gutter-xs q-pa-xs">
+        <div v-if="!!rec.img1" class="text-center">
+          <q-img :src="`` + rec.img1" class="img"></q-img>
+        </div>
+
+        <div v-if="!!rec.content" v-html="rec.content"></div>
+        <q-video v-if="!!rec.video1" :src="rec.video1" :ratio="rec.ratio1">
+        </q-video>
+
+        <div v-if="!!rec.img2" class="text-center">
+          <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>
+
+        <div v-if="!!rec.img3" class="text-center">
+          <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>
+        <div v-if="!!rec.content4" v-html="rec.content4"></div>
+
+        <div v-for="(myelem, ind) in myelems" :key="ind">
+
+          <CMyElem
+            v-if="myelem.active || editOn"
+            :myelem="myelem"
+            :editOn="editOn"
+            :addOn="addOn"
+            :path="rec.path"
+            :selElem="selElem"
+            @selElemClick="selElemClick"
+          >
+          </CMyElem>
+        </div>
+        <div v-if="myelems.length === 0">
+          <CMyElem
+            v-if="editOn"
+            :myelem="myelemVoid"
+            :editOn="editOn"
+            :addOn="addOn"
+            :selElem="selElem"
+            :path="rec.path"
+            @selElemClick="selElemClick"
+          >
+          </CMyElem>
+        </div>
+      </div>
+    </div>
+    <div v-else>
+      <div v-if="!!title">
+        <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>
+        </div>
+        <slot></slot>
+        <div v-if="!nofooter">
+          <LandingFooter></LandingFooter>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" src="./CMyPageElem2.ts">
+</script>
+<style lang="scss" scoped>
+@import './CMyPageElem2.scss';
+</style>

src/components/CMyPageElem2/index.ts

@@ -0,0 +1 @@
+export { default as CMyPageElem2 } from './CMyPageElem2.vue'