Animations in the WebEditor

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>