Animations in the WebEditor

_ALL_SITES/arcadei.it/quasar.conf.js

@@ -37,7 +37,9 @@ module.exports = configure((ctx) => ({
   // --> boot files are part of "main.js"
   // https://v2.quasar.dev/quasar-cli/boot-files
   // boot: ['vue-i18n', 'vue-meta', 'axios', 'vee-validate', 'myconfig', 'local-storage', 'error-handler', 'globalroutines', 'vue-idb', 'dragula', 'guard'],
-  boot: ['i18n', 'axios', 'vee-validate', 'myconfig', 'local-storage', 'error-handler', 'globalroutines', 'calendar'],
+  boot: ['i18n', 'axios', 'vee-validate',
+    'myconfig', 'local-storage', 'error-handler', 'globalroutines',
+    'calendar'],
 
   // https://v2.quasar.dev/quasar-cli/quasar-conf-js#Property%3A-css
   css: [
@@ -97,7 +99,7 @@ module.exports = configure((ctx) => ({
 
     chainWebpack(chain, { isServer, isClient }) {
       chain.resolve.alias
-      // .set('myalias', path.resolve(__dirname, './src/somefolder'))
+        // .set('myalias', path.resolve(__dirname, './src/somefolder'))
         .set('@', helpers.root('src'))
         .set('@components', helpers.root('src/components/index.ts'))
         .set('@boot', helpers.root('src/boot/*'))

src/App.ts

@@ -11,6 +11,8 @@ import { computed } from 'vue'
 import { CProvaPao } from '@/components/CProvaPao'
 import { tools } from '@store/Modules/tools'
 
+import 'animate.css';
+
 export default {
   components: {
     appHeader: MyHeader,

src/common/shared_vuejs.ts

@@ -1248,10 +1248,6 @@ export const shared_consts = {
       value: 110,
       label: 'Carosello Immagini',
     },
-    {
-      value: 90,
-      label: 'Footer',
-    },
     {
       value: 100,
       label: 'Check Email',
@@ -1280,7 +1276,6 @@ export const shared_consts = {
     CALENDAR: 70,
     CAROUSEL_IDISCIPLINE: 80,
     CAROUSEL_HOME: 85,
-    FOOTER: 90,
     CHECK_EMAIL: 100,
     CAROUSEL_IMGS: 110,
     OPENSTREETMAP: 120,
@@ -1302,7 +1297,6 @@ export const shared_consts = {
     UP_LEFT: 5,
   },
 
-
   getStatusStr(status: number) {
     const trovatorec = this.OrderStatusStr.find((rec) => rec.value === status)
     return (trovatorec) ? trovatorec.label : ''

src/components/CMyEditElem/CMyEditElem.ts

@@ -19,6 +19,7 @@ import { CEventsCalendar } from '@src/components/CEventsCalendar'
 import { CMyEditor } from '@src/components/CMyEditor'
 import { CMyFieldRec } from '@src/components/CMyFieldRec'
 import { CSelectImage } from '@src/components/CSelectImage'
+import { CSelectAnimation } from '@src/components/CSelectAnimation'
 import { CSelectColor } from '@src/components/CSelectColor'
 import { CSelectFontSize } from '@src/components/CSelectFontSize'
 
@@ -35,7 +36,7 @@ export default defineComponent({
   components: {
     CImgTitle, CTitle, LandingFooter, CEventsCalendar,
     CCardCarousel, COpenStreetMap, CMyPage, CMyPageIntro, CMyEditor, CMyFieldRec,
-    CSelectColor, CSelectFontSize, CSelectImage, CImgPoster
+    CSelectColor, CSelectFontSize, CSelectImage, CImgPoster, CSelectAnimation
   },
   emits: ['saveElem'],
   props: {
@@ -247,6 +248,7 @@ export default defineComponent({
       return (myel.value.type === shared_consts.ELEMTYPE.IMAGE)
       || (myel.value.type === shared_consts.ELEMTYPE.IMGTITLE)
       || (myel.value.type === shared_consts.ELEMTYPE.TEXT)
+      || (myel.value.type === shared_consts.ELEMTYPE.CARD)
       || (myel.value.type === shared_consts.ELEMTYPE.HTML)
       || (myel.value.type === shared_consts.ELEMTYPE.CAROUSEL_IMGS)
     }

src/components/CMyEditElem/CMyEditElem.vue

@@ -182,22 +182,12 @@
         >
         </q-input>
       </div>
-
-          <q-select
-            v-if="enableEdit && showAnimation"
-            rounded
-            style="min-width: 150px"
-            outlined
-            v-model="myel.class_anim"
-            :options="tools.SelectListAnimation"
-            @update:model-value="modifElem"
-            dense
-            label="Animazione"
-            emit-value
-            map-options
-          >
-          </q-select>
-
+      <CSelectAnimation
+        v-if="enableEdit && showAnimation"
+        v-model="myel.class_anim"
+        @update:model-value="modifElem"
+      >
+      </CSelectAnimation>
       <div v-if="myel.type === shared_consts.ELEMTYPE.TEXT">
         <div v-if="enableEdit">
           <q-input
@@ -486,20 +476,6 @@
             v-on:keyup.enter="saveElem"
           >
           </q-input>
-          <q-select
-            v-if="enableEdit"
-            rounded
-            style="min-width: 150px"
-            outlined
-            v-model="myel.class_anim"
-            :options="tools.SelectListAnimation"
-            @update:model-value="modifElem"
-            dense
-            label="Animazione Titolo"
-            emit-value
-            map-options
-          >
-          </q-select>
           <CSelectColor
             style="min-width: 100px"
             v-model="myel.color"
@@ -524,20 +500,13 @@
           >
           </CSelectColor>
         </div>
-        <q-select
-          v-if="enableEdit"
-          rounded
-          style="min-width: 150px"
-          outlined
-          v-model="myel.class_anim2"
-          :options="tools.SelectListAnimation"
-          @update:model-value="modifElem"
-          dense
-          label="Animaz SottoTitolo"
-          emit-value
-          map-options
-        >
-        </q-select>
+      <CSelectAnimation
+        v-if="enableEdit && showAnimation"
+        v-model="myel.class_anim2"
+        @update:model-value="modifElem"
+        label="Animaz SottoTitolo"
+      >
+      </CSelectAnimation>
         <div class="row">
           <q-input
             label="Classe Title"

src/components/CMyElem/CMyElem.vue

@@ -32,7 +32,7 @@
                 <div :class="` ` + rec.size" :style="`color: ` + rec.color">
                   {{ rec.alt }}
                 </div>
-                <div :class="`q-mt-sm q-mb-xs `" v-html="rec.content"></div>
+                <div :class="`q-mt-sm q-mb-xs ` + myel.class_anim" v-html="rec.content"></div>
                 <div
                   v-if="rec.description"
                   class="text-caption"
@@ -196,20 +196,12 @@
           </q-video>
         </div>
       </div>
-      <div v-else-if="myel.type === shared_consts.ELEMTYPE.FOOTER">
-        <div
-          :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
-          @click="clickOnElem"
-        >
-          <LandingFooter></LandingFooter>
-        </div>
-      </div>
       <div v-else-if="myel.type === shared_consts.ELEMTYPE.PAGE">
         <div
           :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
           @click="clickOnElem"
         >
-          <CMyPage :mypath="myel.container">&nbsp;</CMyPage>
+          <div style="color: gray;">Pagina: {{myel.container}}</div>
         </div>
       </div>
       <div v-else-if="myel.type === shared_consts.ELEMTYPE.PAGEINTRO">

src/components/CMyPageElem/CMyPageElem.ts

@@ -8,6 +8,7 @@ import { useGlobalStore } from '@store/globalStore'
 import { LandingFooter } from '@/components/LandingFooter'
 import { CMyElem } from '@/components/CMyElem'
 import { CMyEditElem } from '@/components/CMyEditElem'
+import { CMyPageElem2 } from '@/components/CMyPageElem2'
 
 import { CImgTitle } from '../CImgTitle/index'
 import { CTitle } from '../CTitle/index'
@@ -19,7 +20,7 @@ import objectId from '@src/js/objectId'
 
 export default defineComponent({
   name: 'CMyPageElem',
-  components: { LandingFooter, CImgTitle, CTitle, CMyElem, CMyEditElem },
+  components: { LandingFooter, CImgTitle, CTitle, CMyElem, CMyEditElem, CMyPageElem2 },
   props: {
     title: String,
     mypath: {
@@ -79,6 +80,7 @@ export default defineComponent({
 
     function load() {
       // console.log('load', mypathin.value)
+
       if (mypathin.value !== '') {
         globalStore.loadPage('/' + mypathin.value, 'cmypageelem').then(ris => {
           rec.value = ris

src/components/CMyPageElem/CMyPageElem.vue

@@ -34,16 +34,10 @@
               round
               color="white"
               icon="close"
-              @click="
-                visuEditor = false;
-              "
+              @click="visuEditor = false"
             ></q-btn>
           </q-bar>
-          <CMyEditElem
-            :myelem="selElem"
-            :editOn="true"
-            :path="rec.path"
-          >
+          <CMyEditElem :myelem="selElem" :editOn="true" :path="rec.path">
           </CMyEditElem>
         </q-scroll-area>
       </q-drawer>
@@ -81,16 +75,21 @@
         <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>
+            <CMyElem
+              v-if="myelem.active || editOn"
+              :myelem="myelem"
+              :editOn="editOn"
+              :addOn="addOn"
+              :path="rec.path"
+              :selElem="selElem"
+              @selElemClick="selElemClick"
+            >
+            </CMyElem>
+          </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
@@ -105,6 +104,7 @@
           </CMyElem>
         </div>
       </div>
+      <LandingFooter v-if="rec.showFooter"></LandingFooter>
     </div>
     <div v-else>
       <div v-if="!!title">

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'

src/components/CSelectAnimation/CSelectAnimation.ts

@@ -0,0 +1,60 @@
+import { defineComponent, onMounted, ref } from 'vue'
+
+import { tools } from '@src/store/Modules/tools'
+import { shared_consts } from '@src/common/shared_vuejs'
+import { emit } from 'process'
+
+export default defineComponent({
+  name: 'CSelectAnimation',
+  emits: ['update:modelValue'],
+  props: {
+    modelValue: {
+      type: String,
+      required: true,
+      default: '',
+    },
+    label: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+
+  setup(props, { emit }) {
+
+    const myclass = ref('')
+    const animType = ref('')
+    const animSpeed = ref('')
+    const animDelay = ref('')
+
+    function updateClass() {
+
+      let mycl = ''
+
+      myclass.value = 'animate__animated ' + animType.value + ' ' + animSpeed.value + ' ' + animDelay.value
+
+      emit('update:modelValue', myclass.value)
+    }
+
+    function mounted() {
+
+      const myarr = props.modelValue.split(' ')
+
+      animType.value = tools.findFirstElemInCommon(tools.SelectListAnimation, myarr)
+      animSpeed.value = tools.findFirstElemInCommon(tools.SelectListSpeed, myarr)
+      animDelay.value = tools.findFirstElemInCommon(tools.SelectListDelay, myarr)
+
+    }
+
+    onMounted(mounted)
+
+    return {
+      tools,
+      updateClass,
+      animType,
+      animSpeed,
+      animDelay,
+    }
+  },
+
+})

src/components/CSelectAnimation/CSelectAnimation.vue

@@ -0,0 +1,52 @@
+<template>
+  <div>
+    {{label}}
+    <q-select
+      rounded
+      style="min-width: 150px"
+      outlined
+      v-model="animType"
+      :options="tools.SelectListAnimation"
+      @update:model-value="updateClass"
+      dense
+      label="Tipo:"
+      emit-value
+      map-options
+    >
+    </q-select>
+
+    <q-select
+      rounded
+      style="min-width: 150px"
+      outlined
+      v-model="animSpeed"
+      :options="tools.SelectListSpeed"
+      @update:model-value="updateClass"
+      dense
+      label="Speed:"
+      emit-value
+      map-options
+    >
+    </q-select>
+
+    <q-select
+      rounded
+      style="min-width: 150px"
+      outlined
+      v-model="animDelay"
+      :options="tools.SelectListDelay"
+      @update:model-value="updateClass"
+      dense
+      label="Ritardo:"
+      emit-value
+      map-options
+    >
+    </q-select>
+  </div>
+</template>
+
+<script lang="ts" src="./CSelectAnimation.ts">
+</script>
+<style lang="scss" scoped>
+@import './CSelectAnimation.scss';
+</style>

src/components/CSelectAnimation/index.ts

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

src/model/Calendar.ts

@@ -77,6 +77,11 @@ export interface ILabelValue {
   value: number
 }
 
+export interface ILabelValueStr {
+  label: string
+  value: string
+}
+
 export interface IValue {
   value: number
 }

src/model/GlobalStore.ts

@@ -190,6 +190,8 @@ export interface IMyPage {
   infooter?: boolean
   internalpage?: boolean
   extraclass?: string
+  loadFirst?: boolean
+  showFooter?: boolean
 }
 
 export interface IOption {

src/store/Modules/fieldsTable.ts

@@ -237,6 +237,8 @@ export const colmypage = [
   AddCol({ name: 'l_par', label_trans: 'pages.l_par', fieldtype: costanti.FieldType.number }),
   AddCol({ name: 'l_child', label_trans: 'pages.l_child', fieldtype: costanti.FieldType.number }),
   AddCol({ name: 'internalpage', label_trans: 'pages.internalpage', fieldtype: costanti.FieldType.boolean }),
+  AddCol({ name: 'loadFirst', label_trans: 'pages.loadFirst', fieldtype: costanti.FieldType.boolean }),
+  AddCol({ name: 'showFooter', label_trans: 'pages.showFooter', fieldtype: costanti.FieldType.boolean }),
   AddCol({ name: 'iconsize', label_trans: 'pages.iconsize', fieldtype: costanti.FieldType.string }),
   AddCol({ name: 'extraclass', label_trans: 'pages.extraclass', fieldtype: costanti.FieldType.string }),
   AddCol(DeleteRec),

src/store/Modules/tools.ts

@@ -12,7 +12,7 @@ import {
   ITodo,
   IUserFields,
   Privacy,
-  TipoVisu, IGroup, IMySkill, IMyBacheca, IImgGallery, IMsgGlobParam, IUserExport, ISpecialField, IAccount, IMyCircuit, ISendCoin, IMovement, IMovVisu, INotif, IMyElem, IMyCard,
+  TipoVisu, IGroup, IMySkill, IMyBacheca, IImgGallery, IMsgGlobParam, IUserExport, ISpecialField, IAccount, IMyCircuit, ISendCoin, IMovement, IMovVisu, INotif, IMyElem, IMyCard, ILabelValue, ILabelValueStr,
 } from '@model'
 
 import { fieldsTable } from '@store/Modules/fieldsTable'
@@ -593,19 +593,257 @@ export const tools = {
     },
   ],
 
+  SelectListSpeed: [
+    {
+      label: '[Nessuna]',
+      value: '',
+    },
+    {
+      label: 'Slow 2s',
+      value: 'animate__slow',
+    },
+    {
+      label: 'Slower 3s',
+      value: 'animate__slower',
+    },
+    {
+      label: 'Fast .8s',
+      value: 'animate__fast',
+    },
+    {
+      label: 'Faster .5s',
+      value: 'animate__faster',
+    },
+  ],
+
+  SelectListDelay: [
+    {
+      label: '[Nessuna]',
+      value: '',
+    },
+    {
+      label: 'Delay 2s',
+      value: 'animate__delay-2s',
+    },
+    {
+      label: 'Delay 3s',
+      value: 'animate__delay-3s',
+    },
+    {
+      label: 'Delay 4s',
+      value: 'animate__delay-4s',
+    },
+    {
+      label: 'Delay 5s',
+      value: 'animate__delay-5s',
+    },
+
+  ],
+
+
   SelectListAnimation: [
     {
       label: '[Nessuna]',
       value: '',
     },
     {
-      label: 'Dal basso verso l\'alto',
-      value: 'anim_toBottom',
+      label: 'HeartBeat',
+      value: 'animate__heartBeat',
     },
     {
-      label: 'Da sinistra verso Destra',
-      value: 'anim_toRight',
+      label: 'Jello',
+      value: 'animate__jello',
     },
+    {
+      label: 'Pulse',
+      value: 'animate__pulse',
+    },
+    {
+      label: 'slideIn Left',
+      value: 'animate__slideInLeft',
+    },
+    {
+      label: 'slideIn Right',
+      value: 'animate__slideInRight',
+    },
+    {
+      label: 'slideIn Up',
+      value: 'animate__slideInUp',
+    },
+    {
+      label: 'slideIn Down',
+      value: 'animate__slideInDown',
+    },
+    {
+      label: 'slideOut Left',
+      value: 'animate__slideOutLeft',
+    },
+    {
+      label: 'slideOut Right',
+      value: 'animate__slideOutRight',
+    },
+    {
+      label: 'slideOut Up',
+      value: 'animate__slideOutUp',
+    },
+    {
+      label: 'slideOut Down',
+      value: 'animate__slideOutDown',
+    },
+    {
+      label: 'zoomIn Left',
+      value: 'animate__zoomInLeft',
+    },
+    {
+      label: 'zoomIn Right',
+      value: 'animate__zoomInRight',
+    },
+    {
+      label: 'zoomIn Up',
+      value: 'animate__zoomInUp',
+    },
+    {
+      label: 'zoomIn Down',
+      value: 'animate__zoomInDown',
+    },
+    {
+      label: 'zoomOut Left',
+      value: 'animate__zoomOutLeft',
+    },
+    {
+      label: 'zoomOut Right',
+      value: 'animate__zoomOutRight',
+    },
+    {
+      label: 'zoomOut Up',
+      value: 'animate__zoomOutUp',
+    },
+    {
+      label: 'zoomOut Down',
+      value: 'animate__zoomOutDown',
+    },
+    {
+      label: 'FadeIn Left',
+      value: 'animate__fadeInLeft',
+    },
+    {
+      label: 'FadeIn Right',
+      value: 'animate__fadeInRight',
+    },
+    {
+      label: 'FadeIn Up',
+      value: 'animate__fadeInUp',
+    },
+    {
+      label: 'FadeIn Up Big',
+      value: 'animate__fadeInUpBig',
+    },
+    {
+      label: 'FadeIn Down',
+      value: 'animate__fadeInDown',
+    },
+    {
+      label: 'FadeIn Down Big',
+      value: 'animate__fadeInDownBig',
+    },
+    {
+      label: 'FadeOut Left',
+      value: 'animate__fadeOutLeft',
+    },
+    {
+      label: 'FadeOut Right',
+      value: 'animate__fadeOutRight',
+    },
+    {
+      label: 'FadeOut Up',
+      value: 'animate__fadeOutUp',
+    },
+    {
+      label: 'FadeOut Down',
+      value: 'animate__fadeOutDown',
+    },
+    {
+      label: 'bounceIn Left',
+      value: 'animate__bounceInLeft',
+    },
+    {
+      label: 'bounceIn Right',
+      value: 'animate__bounceInRight',
+    },
+    {
+      label: 'bounceIn Up',
+      value: 'animate__bounceInUp',
+    },
+    {
+      label: 'bounceIn Down',
+      value: 'animate__bounceInDown',
+    },
+    {
+      label: 'bounceOut Left',
+      value: 'animate__bounceOutLeft',
+    },
+    {
+      label: 'bounceOut Right',
+      value: 'animate__bounceOutRight',
+    },
+    {
+      label: 'bounceOut Up',
+      value: 'animate__bounceOutUp',
+    },
+    {
+      label: 'bounceOut Down',
+      value: 'animate__bounceOutDown',
+    },
+    {
+      label: 'backIn Left',
+      value: 'animate__backInLeft',
+    },
+    {
+      label: 'backIn Right',
+      value: 'animate__backInRight',
+    },
+    {
+      label: 'backIn Up',
+      value: 'animate__backInUp',
+    },
+    {
+      label: 'backIn Down',
+      value: 'animate__backInDown',
+    },
+    {
+      label: 'backOut Left',
+      value: 'animate__backOutLeft',
+    },
+    {
+      label: 'backOut Right',
+      value: 'animate__backOutRight',
+    },
+    {
+      label: 'backOut Up',
+      value: 'animate__backOutUp',
+    },
+    {
+      label: 'backOut Down',
+      value: 'animate__backOutDown',
+    },
+    {
+      label: 'lightSpeedIn Left',
+      value: 'animate__lightSpeedInLeft',
+    },
+    {
+      label: 'lightSpeedIn Right',
+      value: 'animate__lightSpeedInRight',
+    },
+    {
+      label: 'lightSpeedOut Left',
+      value: 'animate__lightSpeedOutLeft',
+    },
+    {
+      label: 'lightSpeedOut Right',
+      value: 'animate__lightSpeedOutRight',
+    },
+
+
 
   ],
 
@@ -6900,6 +7138,18 @@ export const tools = {
     }
   },
 
+  findFirstElemInCommon(arr1: ILabelValueStr[], arr2: string[]) {
+    for (let i = 0; i < arr1.length; i++) {
+      for (let j = 0; j < arr2.length; j++) {
+        if (arr1[i].value == arr2[j] && arr1[i].value !== '') {
+          return arr1[i].value
+        }
+      }
+    }
+
+    return ''
+  }
+
   // getLocale() {
   //   if (navigator.languages && navigator.languages.length > 0) {
   //     return navigator.languages[0]

src/store/globalStore.ts

@@ -917,7 +917,7 @@ export const useGlobalStore = defineStore('GlobalStore', {
       const mypage = this.getPage(`/${path}`)
 
       // Controlla se l'ho già caricato
-      if (!!mypage && !!mypage.content) {
+      if (!!mypage && (!!mypage.content || mypage.loadFirst)) {
         return mypage
       }