add updates

Updates: Add btn to categories / product / cms.
Add Dynamic Zones
Add .env files
Add .avif support
Add Zone priority
Add alias zone

Fix: getSubselectKey if empty

.env.exemple

@@ -0,0 +1,2 @@
+# VITE JS 
+PRETTYBLOCKS_VITE_DEV=false

.gitignore

@@ -9,4 +9,5 @@ views/images/*
 **.DS_Store**
 test.php
 .php-cs-fixer.cache
-_dev/yarn.lock
+_dev/yarn.lock
+.env

_dev/src/components/Iframe.vue

@@ -41,7 +41,7 @@ onUnmounted(() => {
 const reloadIframe = () => {
   iframe.reloadIframe()
 }
-emitter.on('reloadIframe', async (id_prettyblocks) => {
+emitter.on('reloadIframe', async () => {
   let context = contextShop()
   iframe.setUrl(context.href)
   iframe.reloadIframe()

_dev/src/components/form/ZoneSelect.vue

@@ -11,22 +11,53 @@ defineComponent({
   ChevronUpDownIcon
 })
 let items = ref([]);
-
+let current_zone = currentZone()
 emitter.on('loadZones', (zonesState) => {
-
   items.value = zonesState
   if (zonesState.indexOf(currentZone().name) == -1) {
-    currentZone().$patch({
-      name: zonesState[0]
-    })
+    let priorityZone = zonesState[0]
+
+    // if prettyblocks already init (when reloading a simple page)
+    let isPresent = zonesState.find(zone => {
+      return zone.name === current_zone.zoneToFocus
+    }) || false
+   
+    if(current_zone.zoneToFocus !== ''  && isPresent)
+    {
+      priorityZone = current_zone
+    } else {
+
+      current_zone.$patch({
+        name: zonesState[0].name,
+        alias: zonesState[0].alias,
+        priority: zonesState[0].priority,
+        zoneToFocus: zonesState[0].name,
+      })
+  
+      priorityZone = zonesState[0]
+  
+  
+      // check if there is a priority zone 
+      for (let zone of zonesState) {
+          if (zone.priority === true) {
+              priorityZone = zone;
+              break;
+          }
+      }
+    }
 
-    props.modelValue.name = zonesState[0]
-    onInput(zonesState[0])
+    
+    props.modelValue.name = priorityZone.name
+    props.modelValue.alias = priorityZone.alias
+    props.modelValue.priority = priorityZone.priority
+    props.modelValue.zoneToFocus = priorityZone.name
+
+    onInput(priorityZone)
   }
 })
 
 emitter.on('selectZone' , (zone) => {
-  props.modelValue.name = zone
+  props.modelValue = zone
   onInput(zone)
 })
 
@@ -36,26 +67,39 @@ const props = defineProps({
   modelValue: {
     type: Object,
     default: {
-      name: 'displayHome'
+      name: 'displayHome',
+      alias: '',
+      priority: false
     }
   }
 
 })
 
 const changetItem = (item) => {
-  props.modelValue.name = item
+  props.modelValue.name = item.name
+  props.modelValue.alias = item.alias
+  // force reload on the last zone
+  props.modelValue.priority = true
 }
 
 
 
 const emit = defineEmits(['update:modelValue'])
 
-function onInput(value) {
+function onInput(zone) {
   let current_zone = currentZone()
-  current_zone.$patch({ name: value })
-  emit('update:modelValue.name', value)
+  current_zone.$patch({ 
+    name: zone.name,
+    alias: zone.alias,
+    priority: zone.priority,
+    zoneToFocus: zone.name,
+  })
+
+  emit('update:modelValue.name', zone.name)
+  emit('update:modelValue.alias', zone.alias)
+  emit('update:modelValue.priority', zone.priority)
 
-  emitter.emit('focusOnZone', value) 
+  emitter.emit('focusOnZone', zone.name) 
   
 }
 
@@ -68,9 +112,9 @@ watch(() => props.modelValue, onInput)
     <div class="mt-1 relative">
       <ListboxButton
         class="relative w-full bg-white border border-gray-300 rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-indigo focus:border-indigo sm:text-sm">
-        <span class="flex items-center">
+        <span class="flex items-center break-all">
           <!-- display the name of selected element -->
-          <span class="block truncate">{{ trans('current_zone') }}: {{ props.modelValue.name }}</span>
+          <span class="block line-clamp-1 truncate max-w-48"> {{ trans('current_zone') }}: {{ props.modelValue.alias !== '' ? props.modelValue.alias : props.modelValue.name }}</span>
         </span>
         <span class="ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
           <ChevronUpDownIcon class="h-5 w-5 text-gray-400" aria-hidden="true" />
@@ -86,7 +130,7 @@ watch(() => props.modelValue, onInput)
               :class="[active ? 'text-white bg-indigo' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']">
               <div class="flex items-center">
                 <span :class="[selected ? 'font-semibold' : 'font-normal', 'block truncate']">
-                  {{ item }}
+                  {{ item.alias !== '' ? item.alias : item.name }}
                 </span>
               </div>
             </li>

_dev/src/scripts/block.js

@@ -86,7 +86,17 @@ export default class Block {
     {
         let key_formatted = 0
         this.subSelected = this.getCurrentBlock().subSelected
-        key_formatted = this.subSelected.split('-')[1]
+        if(typeof this.subSelected !== 'undefined'){
+            key_formatted = this.subSelected.split('-')[1]
+        } else {
+            let maxKey = 0
+            if(this.states.length == 0){
+                let keys = Object.keys(this.states).map(Number);
+                maxKey = Math.max(...keys); 
+            }
+            maxKey = maxKey + 1
+            key_formatted = this.id_prettyblocks + '-' + maxKey;
+        }
         return key_formatted
     }
 

_dev/src/scripts/helper.js

@@ -0,0 +1,7 @@
+export function getZoneDetailsByDom(domElement) {
+    return {
+        name: domElement.getAttribute('data-zone-name'),
+        alias: domElement.getAttribute('data-zone-alias') || '',
+        priority: domElement.getAttribute('data-zone-priority') || false,
+    }
+}

_dev/src/scripts/iframe.js

@@ -86,13 +86,14 @@ export default class Iframe {
             if(event.data.type == 'focusBlock')
             {
                 let id_prettyblocks = event.data.data.id_prettyblocks
-                let zone_name = event.data.data.zone_name
+                let zone = event.data.data.zone
+
                 let piniaBlocks =  await storedBlocks().blocks
 
                 let element = await piniaBlocks.find(b => {
                     return b.id_prettyblocks == id_prettyblocks
                 });
-                emitter.emit('selectZone', zone_name)
+                emitter.emit('selectZone', zone)
 
                 emitter.emit('displayBlockConfig', element)
                 emitter.emit('setSelectedElement', element.formatted.id)
@@ -144,8 +145,6 @@ export default class Iframe {
         this.loader.value = true
         let iframe = document.getElementById('website-iframe')
         iframe.src = this.updateFilteredURL(this.current_url.value)
-        // this.loadIframe()
-        // this.loader.value = false
     }
     updateFilteredURL(url) {
         let hashIndex = url.indexOf('#');

_dev/src/store/currentBlock.js

@@ -17,6 +17,9 @@ export const currentZone = defineStore('currentZone', {
   state: () => {
     return {
       name: 'displayHome',
+      alias: '',
+      priority: false,
+      zoneToFocus: '',
     }
   }
 })