newfreeplanet_OLD/src/components/CMyPageElem/CMyPageElem.vue

<template>
  <div>
    <div v-if="mypathin && !!rec && !onloading">
      <q-toggle
        v-if="tools.isManager()"
        v-model="editOn"
        dense
        color="green"
        size="sm"
        @update:model-value="changeVisuDrawer(mypathin, editOn)"
        icon="fas fa-pencil-alt"
      >
      </q-toggle>

      <q-drawer
        v-model="visuEditor"
        v-if="selElem && editOn"
        show-if-above
        :breakpoint="800"
        side="right"
        :width="tools.isMobile() ? 350 : mywidthEditor"
        elevated
        style="transition: 'width 0.3s ease'"
      >
        <q-bar dense class="q-ma-xs bg-primary text-white">
          <q-toolbar-title> Editor </q-toolbar-title>
          <q-btn
            flat
            round
            size="md"
            color="white"
            icon="close"
            @click="
              visuEditor = false;
              selElem = {};
            "
          ></q-btn>
        </q-bar>

        <CMyEditElem
          :myelem="selElem"
          :editOn="true"
          :path="rec.path"
          @selElemClick="selElemClick"
          @deleteElem="deleteElem"
          @toggleSize="toggleSize"
        >
        </CMyEditElem>
      </q-drawer>

      <div class="q-gutter-xs" style="margin-left: 1px; margin-right: 1px">
        <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 in myelems" :key="myelem._id">
          <div>
            <transition :duration="1000" appear>
              <CTitleBanner
                v-if="
                  (myelem.active || editOn) && !!rec.path && myelem.titleBanner
                "
                :class="`q-pa-xs `"
                :title="myelem.titleBanner"
                bgcolor="bg-primary"
                :clcolor="myelem.color ? `` : `text-white`"
                :mystyle="
                  myelem.color ? `color: ${myelem.color} !important;` : ``
                "
                :myclass="myelem.classBanner"
                :canopen="true"
              >
                <CMyElem
                  :myelem="myelem"
                  :editOn="editOn"
                  :addOn="addOn"
                  :path="!!rec.path ? rec.path : ''"
                  :selElem="selElem"
                  @selElemClick="selElemClick"
                >
                </CMyElem>
              </CTitleBanner>
              <CMyElem
                v-else-if="(myelem.active || editOn) && !!rec.path"
                :myelem="myelem"
                :editOn="editOn"
                :addOn="addOn"
                :path="!!rec.path ? rec.path : ''"
                :selElem="selElem"
                @selElemClick="selElemClick"
              >
              </CMyElem>
            </transition>
          </div>
          <div v-if="myelem.type === shared_consts.ELEMTYPE.PAGE">
            <CMyPageElem2 :mypath="myelem.container">&nbsp;</CMyPageElem2>
          </div>
        </div>

        <div v-if="myelems.length === 0">
          <CMyElem
            v-if="editOn && !!rec.path"
            :myelem="myelemVoid"
            :editOn="editOn"
            :addOn="addOn"
            :selElem="selElem"
            :path="rec.path"
            @selElemClick="selElemClick"
          >
          </CMyElem>
        </div>
      </div>
      <LandingFooter v-if="rec.showFooter"></LandingFooter>
    </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"></div>
      </div>
    </div>
    <q-inner-loading id="spinner" :showing="onloading">
      <q-spinner-tail color="primary" size="4em"> </q-spinner-tail>
    </q-inner-loading>
  </div>
</template>

<script lang="ts" src="./CMyPageElem.ts">
</script>
<style lang="scss" scoped>
@import './CMyPageElem.scss';
</style>