HTML Editor go on

src/components/CMyElem/CMyElem.ts

@@ -2,7 +2,7 @@ import {
   defineComponent, onMounted, PropType, ref, toRef, watch,
 } from 'vue'
 
-import { IMyElem, IMyPage, IOperators } from '@src/model'
+import { IMyCard, IMyElem, IMyPage, IOperators } from '@src/model'
 import { useGlobalStore } from '@store/globalStore'
 
 import { CImgTitle } from '../CImgTitle/index'
@@ -17,15 +17,21 @@ import { CMyPageIntro } from '@src/components/CMyPageIntro'
 import { CEventsCalendar } from '@src/components/CEventsCalendar'
 import { CMyEditor } from '@src/components/CMyEditor'
 import { CMyFieldRec } from '@src/components/CMyFieldRec'
+import { CSelectColor } from '@src/components/CSelectColor'
+import { CSelectFontSize } from '@src/components/CSelectFontSize'
 
 import MixinMetaTags from '@/mixins/mixin-metatags'
+import MixinBase from '@/mixins/mixin-base'
 import { useQuasar } from 'quasar'
 import { useI18n } from '@/boot/i18n'
 
 
 export default defineComponent({
   name: 'CMyElem',
-  components: { CImgTitle, CTitle, LandingFooter, CEventsCalendar, CCardCarousel, COpenStreetMap, CMyPage, CMyPageIntro, CMyEditor, CMyFieldRec },
+  components: { CImgTitle, CTitle, LandingFooter, CEventsCalendar,
+    CCardCarousel, COpenStreetMap, CMyPage, CMyPageIntro, CMyEditor, CMyFieldRec,
+    CSelectColor, CSelectFontSize },
+  emits: ['selElemClick'],
   props: {
     myelem: {
       type: Object as PropType<IMyElem>,
@@ -47,10 +53,12 @@ export default defineComponent({
       default: false,
     },
   },
-  setup(props) {
+  setup(props, { emit }) {
     const globalStore = useGlobalStore()
 
     const { setmeta, getsrcbyimg } = MixinMetaTags()
+    const { setValDb, getValDb } = MixinBase()
+
 
     const $q = useQuasar()
     const { t } = useI18n()
@@ -115,6 +123,16 @@ export default defineComponent({
       globalStore.addNewElem($q, t, newrec)
     }
 
+    function dupElem(order?: number) {
+
+      const newrec = props.myelem
+
+      newrec._id = undefined
+      newrec.order = order ? order : newrec.order! + 10
+
+      globalStore.addNewElem($q, t, newrec)
+    }
+
     function delElem() {
       $q.dialog({
         message: 'Eliminare ' + props.myelem.container + ' ?',
@@ -153,6 +171,7 @@ export default defineComponent({
     function clickOnElem() {
       if (props.editOn) {
         enableEdit.value = true
+        emit('selElemClick', props.myelem)
       }
     }
 
@@ -166,9 +185,24 @@ export default defineComponent({
         mycl += ' align_left'
       }
 
+      if (props.myelem.class2)
+        mycl += ' ' + props.myelem.class2
+
       return mycl
     }
 
+    function getImgFileByElem(elem: IMyElem, reccard?: IMyCard) {
+      if (elem) {
+        if (elem.type === shared_consts.ELEMTYPE.CARD) {
+          return 'upload/pages/' + elem.path + '/' + reccard!.imagefile
+        } else if (elem.type === shared_consts.ELEMTYPE.IMAGE) {
+          return 'upload/pages/' + elem.path + '/' + elem.container
+        } else {
+          return 'upload/pages/' + elem.path + '/' + elem.image
+        }
+      }
+    }
+
     function showFit() {
       if (props.myelem.type)
         return [shared_consts.ELEMTYPE.TEXT].includes(props.myelem.type)
@@ -201,6 +235,9 @@ export default defineComponent({
       clickOnElem,
       getClass,
       showFit,
+      getValDb,
+      dupElem,
+      getImgFileByElem,
     }
   },