- aggiornato l'Editor HTML

src/components/CMyEditElem/CMyEditElem.scss

@@ -1,4 +1,3 @@
-
 .testo-banda {
   //background: -webkit-gradient(linear, left top, left bottom, from(#3144f0), to(transparent));
   //background: linear-gradient(180deg, #3144f0, transparent);
@@ -23,15 +22,14 @@ h4 {
   visibility: hidden;
 }
 
-.landing {
-}
+.landing {}
 
 .landing_background {
   background: #000 url(../../../public/images/foto1.jpg) no-repeat 50% fixed;
   background-size: cover
 }
 
-.landing > section {
+.landing>section {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -74,21 +72,21 @@ h4 {
   font-size: 1rem;
 }
 
-.landing > section.padding {
+.landing>section.padding {
   padding: 5.62rem 1rem;
 }
 
-.landing > section.padding_testo {
+.landing>section.padding_testo {
   padding-top: 1.25rem;
   padding-bottom: 1rem;
 }
 
-.landing > section.padding_gallery {
+.landing>section.padding_gallery {
   padding-top: 3.125rem;
   padding-bottom: 5.625rem;
 }
 
-.landing > section > div {
+.landing>section>div {
   position: relative;
   width: 100%
 }
@@ -144,7 +142,8 @@ h4 {
   text-shadow: .25rem .25rem .5rem $grayshadow;
 }
 
-.landing__features h4, .landing__features h6 {
+.landing__features h4,
+.landing__features h6 {
   margin: 1rem 0
 }
 
@@ -252,7 +251,8 @@ body.mobile .landing:before {
   text-shadow: 0.125rem 0.125rem 0.25rem $grayshadow;
 }
 
-.text-h1, h1 {
+.text-h1,
+h1 {
   font-size: 3rem;
   font-weight: bold;
   line-height: 3rem;
@@ -341,42 +341,47 @@ body.mobile .landing:before {
   .landing__hero {
     text-align: center
   }
+
   .landing__header {
     height: 7vh
   }
+
   .clgutter {
     margin-top: 0;
     padding: 0;
   }
-  .landing__hero .text-h1, h1 {
+
+  .landing__hero .text-h1,
+  h1 {
     font-size: 2rem;
     line-height: 2.05rem;
     margin-bottom: 1.25rem
   }
 
-  .landing > section.padding {
+  .landing>section.padding {
     padding: 2.5rem 1rem;
   }
 
-  .landing > section.padding_testo {
+  .landing>section.padding_testo {
     padding-top: 1.25rem;
     padding-bottom: 1rem;
   }
 
-  .landing > section.padding_gallery {
+  .landing>section.padding_gallery {
     padding-top: 3.125rem;
     padding-bottom: 5.625rem;
 
     max-width: 800px;
   }
 
-  .landing > section.padding_gallery > div {
+  .landing>section.padding_gallery>div {
     padding-top: 3.125rem;
     padding-bottom: 5.625rem;
 
   }
 
-  .landing__features h4, .landing__features h6 {
+  .landing__features h4,
+  .landing__features h6 {
     margin: 1.25rem 0
   }
 
@@ -389,12 +394,15 @@ body.mobile .landing:before {
     text-align: center;
     margin-top: 1.25rem;
   }
+
   .landing__hero-content {
     padding-bottom: 11.25rem;
   }
+
   .landing__hero2-content {
     padding-bottom: 7.25rem;
   }
+
   .landing__hero-btns {
     -webkit-box-pack: center;
     -ms-flex-pack: center;
@@ -408,6 +416,7 @@ body.mobile .landing:before {
   .text-subtitle1 {
     font-size: 1.25rem;
   }
+
   .text-vers {
     font-size: 0.6rem;
   }
@@ -480,3 +489,12 @@ body.mobile .landing:before {
   justify-content: space-between;
   background-color: green;
 }
+
+
+.uniform-button {
+  height: 40px;
+  /* Altezza fissa per tutti i bottoni */
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

src/components/CMyEditElem/CMyEditElem.ts

@@ -1,5 +1,5 @@
 import {
-  defineComponent, onMounted, PropType, ref, toRef, watch,
+  defineComponent, onMounted, PropType, computed, ref, toRef, watch,
 } from 'vue'
 
 import { IElemText, IImgGallery, ILabelValue, IMyCard, IMyElem, IMyPage, IOperators } from '@src/model'
@@ -39,7 +39,7 @@ export default defineComponent({
     CCardCarousel, COpenStreetMap, CMyPage, CMyPageIntro, CMyEditor, CMyFieldRec,
     CSelectColor, CSelectFontSize, CSelectImage, CImgPoster, CSelectAnimation
   },
-  emits: ['saveElem', 'selElemClick'],
+  emits: ['saveElem', 'selElemClick', 'toggleSize', 'deleteElem'],
   props: {
     myelem: {
       type: Object as PropType<IMyElem>,
@@ -90,6 +90,7 @@ export default defineComponent({
     const myel = toRef(props, 'myelem')
     const newtype = ref(<any>'')
     const visuadd = ref(false)
+    const direzadd = ref(1)
 
     watch(() => myel.value.order, (value, oldval) => {
       mounted()
@@ -108,29 +109,69 @@ export default defineComponent({
           // OK
           disableSave.value = true
           emit('saveElem', myelem)
+
           if (exit)
             elemChanged.value = false
         }
       })
     }
 
-    function addNewElem(order?: number) {
+    function getNewOrderByThisElem() {
+      let myelem = props.myelem
+      let neword = 0
+      if (myelem) {
+        neword = myelem.order!
+        const recfound = globalStore.getMyElemNextThisElemId(props.path, myelem._id!)
+
+        if (recfound) {
+          neword = Math.round((recfound.order! + myelem.order!) / 2)
+        }
+      }
+      return neword
+    }
+
+    async function addNewElem(elemsel: any, direz: number) {
 
       visuadd.value = false
 
-      let newrec = globalStore.prepareAddNewElem(order, $q, t, props.myelem, newtype.value)
+      let neword = 0
+
+      let recfound = null
+
+      if (direz === -1) {  // Sopra
+        // ottieni l'elemento precedente, mantenendo l'ordinamento
+        recfound = globalStore.getMyElemPrecThisElemId(props.path, elemsel._id)
+      } else if (direz === 1) {  // Sotto
+        // ottieni l'elemento precedente, mantenendo l'ordinamento
+        recfound = globalStore.getMyElemNextThisElemId(props.path, elemsel._id)
+      }
+
+      if (recfound) {
+        // get the middle of the order number between thie 2 elements
+        neword = Math.round((recfound.order + elemsel.order) / 2)
+      }
+
+      let newrec = await globalStore.prepareAddNewElem(neword, $q, t, props.myelem, newtype.value)
 
       emit('selElemClick', newrec)
+
+      // emit('updateAll', newrec)
     }
 
-    function dupElem(order?: number) {
+    async function dupElem(order?: number) {
 
-      const newrec = props.myelem
+      const newrec: IMyElem = { ...props.myelem }
 
       newrec._id = undefined
-      newrec.order = order ? order : newrec.order! + 10
+      newrec.order = getNewOrderByThisElem()
+      if (newrec.type === shared_consts.ELEMTYPE.HTML) {
+        newrec.containerHtml = 'Copia di ' + newrec.containerHtml
+      }
+
+      const mynewelem = await globalStore.addNewElem($q, t, newrec)
+
+      emit('selElemClick', mynewelem)
 
-      globalStore.addNewElem($q, t, newrec)
     }
 
     function delElem() {
@@ -151,6 +192,7 @@ export default defineComponent({
           if (ris) {
             // OK
             disableSave.value = true
+            emit('deleteElem', props.myelem)
           }
         })
       })
@@ -292,6 +334,73 @@ export default defineComponent({
       modifElem()
     }
 
+    function toggleSize() {
+      emit('toggleSize', null)
+    }
+
+    const orderOptions = computed(() => {
+      const options = []
+
+      for (let i = 0; i <= 100; i += 1) {
+        options.push({ label: i.toString(), value: i });
+      }
+
+      for (let i = 100; i <= 1000; i += 10) {
+        options.push({ label: i.toString(), value: i });
+      }
+
+      return options;
+    });
+
+    function addOrder(rec: any) {
+      neworder.value = rec
+    }
+
+    async function moveElem(direz: any) {
+      let myelem = props.myelem
+
+      const elemprec = globalStore.getMyElemPrecThisElemId(props.path, myelem._id)
+      const elemnext = globalStore.getMyElemNextThisElemId(props.path, myelem._id!)
+
+      let neworder = 0
+      let oldorder = myelem.order!
+
+      if (direz === -1) {
+        // UP
+        neworder = elemprec.order!
+        elemprec.order = oldorder
+
+        if (oldorder === elemprec.order!) {
+          const elemprec2 = globalStore.getMyElemPrecThisElemId(props.path, elemprec._id!)
+
+          neworder = (elemprec2.order! + elemprec.order) / 2
+          elemprec.order = Math.round((oldorder + neworder) / 2)
+        }
+
+        await globalStore.saveMyElem($q, t, elemprec)
+        emit('saveElem', elemprec)
+      } else if (direz === 1) {
+        // DOWN
+        neworder = elemnext.order!
+        elemnext.order = oldorder
+
+        if (oldorder === elemnext.order!) {
+          const elemnext2 = globalStore.getMyElemNextThisElemId(props.path, elemnext._id!)
+
+          neworder = (elemnext2.order! + elemnext.order) / 2
+          elemnext.order = Math.round((oldorder + neworder) / 2)
+        }
+
+
+        await globalStore.saveMyElem($q, t, elemnext)
+        emit('saveElem', elemnext)
+      }
+
+      myelem.order = neworder
+      await globalStore.saveMyElem($q, t, myelem)
+      emit('saveElem', myelem)
+    }
+
     onMounted(mounted)
 
     return {
@@ -334,6 +443,11 @@ export default defineComponent({
       Products,
       generateSizeOptions,
       updateSizeWidth,
+      direzadd,
+      toggleSize,
+      orderOptions,
+      addOrder,
+      moveElem,
     }
   },