vue frontend fixes

examples/hydra-vue-f7/src/components/app.vue

@@ -99,7 +99,14 @@
         theme: 'auto', // Automatic theme detection
         view: {
             browserHistory: true,
-
+            browserHistoryOnLoad: true,
+            browserHistoryStoreHistory: false,
+            browserHistoryInitialMatch: false,
+            preloadPreviousPage: false
+            //browserHistorySeperator: "#!",
+            //cache: false,
+            //reloadPages: true,
+            //reloadDetail: true
         },
 
         // App store
@@ -118,11 +125,15 @@
       }
 
       // In Layout.js or App.js
-      const bridge = initBridge("https://hydra.pretagov.com", {allowedBlocks: ['slate', 'image', 'video']});
-
+      const bridge = initBridge("https://hydra.pretagov.com", {allowedBlocks: ['slate', 'image', 'video', 'gridBlock', 'teaser']});
 
       onMounted(() => {
         f7ready((f7) => {
+          window.addEventListener("hashchange", () => {
+              const url = new URL(window.location);
+              const path = url.href.split("#!")[1];
+              f7.views.main.router.navigate(path);
+            });
 
           bridge.onEditChange((data) => {
             // f7.views.main.router.navigate(f7.views.main.router.currentRoute.url, {

examples/hydra-vue-f7/src/components/block.vue

@@ -0,0 +1,81 @@
+<template>
+    <f7-block-title v-if="block['@type']=='title'" :data-block-uid="block_uid">{{ data.title}}</f7-block-title>
+    <div v-else-if="block['@type']=='slate'" :data-block-uid="block_uid" data-editable-field="value">
+        <RichText v-for="node in block['value']" :key="node" :node="node" />
+    </div>
+    <f7-block v-else-if="block['@type']=='image'" :data-block-uid="block_uid">
+        <img v-for="props in [imageProps(block)]" :src="props.url" :class="['image-size-'+props.size, 'image-align-'+props.align]" />
+    </f7-block>
+    <f7-block v-else-if="block['@type']=='gridBlock'" :data-block-uid="block_uid" data-container-blocks="blocks,horizontail,5">
+        <div :class="['grid', 'grid-cols-'+block.blocks_layout, 'grid-gap']">
+            <div v-for="uid in block.blocks_layout"><Block :block_uid="uid" :block="block.blocks[uid]" :data="data"></Block></div>
+        </div>
+    </f7-block>
+    <f7-card v-else-if="block['@type']=='teaser'" :data-block-uid="block_uid">
+        <f7-card-header
+            valign="bottom"
+            :style="{'background-image': ('url()' ? block.href.hasPreviewImage : false)}" data-editable-field="title"
+            >{{block.title}}</f7-card-header
+        >
+        <f7-card-content>
+            <p data-editable-field="Description">{{block.Description}}</p>
+        </f7-card-content>
+        <f7-card-footer>
+            <f7-link :href="getUrl(block.href[0])" data-editable-field="href">Read more</f7-link> 
+        </f7-card-footer>
+    </f7-card>
+</template>
+<script>
+  import RichText from './richtext.vue';
+
+export default {
+  name: 'Block',
+  components: {
+      RichText,
+    },
+  props: {
+    block_uid: {
+      type: String,
+      required: true
+    },
+    block: {
+      type: Object,
+      required: true
+    },
+    data: {
+      type: Object,
+      required: true
+    }
+  },
+  methods: {
+    getUrl(href) {
+        if (href['@id']) {
+            const url = new URL(href['@id']);
+            return url.pathname;
+        } else {
+            return href
+        }
+
+    },
+    imageProps(block) {
+        var image_url = block?.image_scales
+            ? `${block.url}/++api++/${block?.image_scales.image[0].download}`
+            : block.url;
+        image_url = image_url.startsWith("https://hydra.pretagov.com") ? image_url + "/@@images/image" : image_url;
+        const size = block.size;
+        const align = block.align;
+        return {
+          url: image_url,
+          size: size,
+          align: align
+        }
+    }
+  },
+  computed: {
+    subs() {
+      const { children } = this.node
+      return children && children || []
+    }
+  }
+}
+</script>

examples/hydra-vue-f7/src/components/richtext.vue

@@ -1,11 +1,7 @@
 <template>
-    <a v-if="node.type =='link'">{{ node.text }}<RichText v-for="child in subs" :key="child" :node="child"/></a>
-    <p v-else-if="node.type =='p'">{{ node.text }}<RichText v-for="child in subs" :key="child" :node="child"/></p>
-    <h1 v-else-if="node.type =='h1'">{{ node.text }}<RichText v-for="child in subs" :key="child" :node="child"/></h1>
-    <h2 v-else-if="node.type =='h2'">{{ node.text }}<RichText v-for="child in subs" :key="child" :node="child"/></h2>
-    <li v-else-if="node.type =='li'">{{ node.text }}<RichText v-for="child in subs" :key="child" :node="child"/></li>
-    <ul v-else-if="node.type =='ul'">{{ node.text }}<RichText v-for="child in subs" :key="child" :node="child"/></ul>
-    <template v-else :is="node.type">{{ node.text }}<RichText v-for="child in subs" :key="child" :node="child"/></template>
+    <f7-link v-if="node.type =='link'" :href="node.data.url" external :data-node-id="node['nodeId']">{{ node.text }}<RichText v-for="child in subs" :key="child" :node="child"/></f7-link>
+    <template v-else-if="!node.type">{{ node.text }}</template>
+    <component v-else :is="node.type" :data-node-id="node['nodeId']">{{ node.text }}<RichText v-for="child in subs" :key="child" :node="child"/></component>
 </template>
 <script>
 export default {

examples/hydra-vue-f7/src/css/app.css

@@ -1 +1,10 @@
-/* Your app custom styles here */
+/* Your app custom styles here */
+
+.image-align-right {
+    float: right;
+}
+
+.image-size-s {
+    width: 100px;
+    height: 100px;
+}

examples/hydra-vue-f7/src/js/hydra.js

@@ -192,7 +192,126 @@ class Bridge {
     const dragButton = document.createElement('button');
     dragButton.className = 'volto-hydra-drag-button';
     dragButton.innerHTML = dragSVG;
-    dragButton.disabled = true;
+    // dragButton.disabled = true;
+    dragButton.addEventListener('mousedown', (e) => {
+      e.preventDefault();
+      document.querySelector('body').classList.add('grabbing');
+      // Create a copy of the block
+      const draggedBlock = this.currentlySelectedBlock.cloneNode(true);
+      draggedBlock.classList.add('dragging');
+      document.body.appendChild(draggedBlock);
+
+      // Position the copy under the cursor
+      const rect = this.currentlySelectedBlock.getBoundingClientRect();
+      draggedBlock.style.width = `${rect.width}px`;
+      draggedBlock.style.height = `${rect.height}px`;
+      draggedBlock.style.left = `${e.clientX}px`;
+      draggedBlock.style.top = `${e.clientY}px`;
+      console.log(
+        'DRAGGED BLOCK POSITION',
+        draggedBlock.style.left,
+        draggedBlock.style.top,
+      );
+      let closestBlockUid = null;
+      let throttleTimeout; // Throttle the mousemove event for performance (maybe not needed but if we got larger blocks than yeah needed!)
+      let insertAt = null; // 0 for top & 1 for bottom
+      // Handle mouse movement
+      const onMouseMove = (e) => {
+        draggedBlock.style.left = `${e.clientX}px`;
+        draggedBlock.style.top = `${e.clientY}px`;
+        if (!throttleTimeout) {
+          throttleTimeout = setTimeout(() => {
+            const elementBelow = document.elementFromPoint(
+              e.clientX,
+              e.clientY,
+            );
+            let closestBlock = elementBelow;
+            // Find the closest ancestor with 'data-block-id'
+            while (
+              closestBlock &&
+              !closestBlock.hasAttribute('data-block-uid')
+            ) {
+              closestBlock = closestBlock.parentElement;
+            }
+
+            if (closestBlock) {
+              // Remove border from any previously highlighted block
+              const prevHighlighted =
+                insertAt === 0
+                  ? document.querySelector('.highlighted-block')
+                  : document.querySelector('.highlighted-block-bottom');
+
+              if (prevHighlighted) {
+                prevHighlighted.classList.remove(
+                  'highlighted-block',
+                  'highlighted-block-bottom',
+                );
+              }
+
+              // Determine if hovering over top or bottom half (not effiecient but lets try!)
+              const closestBlockRect = closestBlock.getBoundingClientRect();
+              const mouseYRelativeToBlock = e.clientY - closestBlockRect.top;
+              const isHoveringOverTopHalf =
+                mouseYRelativeToBlock < closestBlockRect.height / 2;
+
+              if (isHoveringOverTopHalf) {
+                insertAt = 0;
+              } else {
+                insertAt = 1;
+              }
+              closestBlock.classList.add(
+                `${insertAt === 0 ? 'highlighted-block' : 'highlighted-block-bottom'}`,
+              );
+              closestBlockUid = closestBlock.getAttribute('data-block-uid');
+            } else {
+              console.log('Not hovering over any block');
+            }
+            throttleTimeout = null;
+          }, 100);
+        }
+      };
+      // Cleanup on mouseup & updating the blocks layout & sending it to adminUI
+      const onMouseUp = () => {
+        document.querySelector('body').classList.remove('grabbing');
+        document.removeEventListener('mousemove', onMouseMove);
+        document.removeEventListener('mouseup', onMouseUp);
+
+        draggedBlock.remove();
+        if (closestBlockUid) {
+          const draggedBlockId =
+            this.currentlySelectedBlock.getAttribute('data-block-uid');
+
+          const blocks_layout = this.formData.blocks_layout.items;
+          const draggedBlockIndex = blocks_layout.indexOf(draggedBlockId);
+          const targetBlockIndex = blocks_layout.indexOf(closestBlockUid);
+          if (draggedBlockIndex !== -1 && targetBlockIndex !== -1) {
+            blocks_layout.splice(draggedBlockIndex, 1);
+
+            // Determine insertion point based on hover position
+            const insertIndex =
+              insertAt === 1 ? targetBlockIndex + 1 : targetBlockIndex;
+
+            blocks_layout.splice(insertIndex, 0, draggedBlockId);
+            if (insertAt === 0) {
+              document
+                .querySelector('.highlighted-block')
+                .classList.remove('highlighted-block');
+            } else {
+              document
+                .querySelector('.highlighted-block-bottom')
+                .classList.remove('highlighted-block-bottom');
+            }
+            window.parent.postMessage(
+              { type: 'UPDATE_BLOCKS_LAYOUT', data: this.formData },
+              this.adminOrigin,
+            );
+          }
+        }
+      };
+
+      document.addEventListener('mousemove', onMouseMove);
+      document.addEventListener('mouseup', onMouseUp);
+    });
 
     let boldButton = null;
     let italicButton = null;
@@ -1036,13 +1155,28 @@ class Bridge {
           background-color: #ddd;
         }
         .volto-hydra-drag-button {
-          cursor: default;
+          cursor: grab;
           background: #E4E8EC;
           border-radius: 6px;
           padding: 9px 6px;
           height: 40px;
           display: flex;
         }
+        .grabbing {
+          cursor: grabbing !important;
+        }
+        .dragging {
+          position: fixed !important; 
+          opacity: 0.5; 
+          pointer-events: none; 
+          z-index: 1000; 
+        }
+        .highlighted-block {
+          border-top: 5px solid blue; 
+        }
+        .highlighted-block-bottom {
+          border-bottom: 5px solid blue;
+        }
         .volto-hydra-dropdown-menu {
           display: none;
           position: absolute;

examples/hydra-vue-f7/src/pages/page.vue

@@ -9,58 +9,41 @@
       <f7-nav-right>
         <f7-link icon-ios="f7:menu" icon-aurora="f7:menu" icon-md="material:menu" @click="changePanelFoo" panel-open="right"></f7-link>
       </f7-nav-right>
-      <f7-nav-title-large>{{data.title}}</f7-nav-title-large>
+      <f7-nav-title-large data-editable-metadata="title">{{data.title}}</f7-nav-title-large>
     </f7-navbar>
 
-    <template v-for="block_uid in data.blocks_layout.items" v-bind="data.blocks[block_uid]">
-      <f7-block-title v-if="data.blocks[block_uid]['@type']=='title'" :data-block-uid="block_uid">{{ data.title}}</f7-block-title>
-      <f7-block v-if="data.blocks[block_uid]['@type']=='slate'" :data-block-uid="block_uid" data-editable-field="value">
-        <RichText v-for="node in data.blocks[block_uid]['value']" :key="node" :node="node" />
-      </f7-block>
-      <f7-block v-if="data.blocks[block_uid]['@type']=='image'" :data-block-uid="block_uid">
-        <img :src="data.blocks[block_uid].url+'/@@images/image'"/>
-      </f7-block>
-    </template>
-  </f7-page>
+    <f7-block>
+      <Block v-for="block_uid in data.blocks_layout.items" :key="data.blocks[block_uid]" :block_uid="block_uid" :block="data.blocks[block_uid]" :data="data"></Block>
+  </f7-block>
+</f7-page>
 
 </template>
 
 
 <script>
   import SideNav from './sidenav.vue';
-  import RichText from '../components/richtext.vue';
+  import Block from '../components/block.vue';
   import { useStore } from 'framework7-vue';
   export default {
     components: {
-      RichText
+      Block
+    },
+    props: {
+      f7route: Object,
+      f7router: Object,
     },
     mounted() {
-      this.$root.panelComponent = SideNav;
-      this.$root.panelProps = {
-        navigation: this.data['@components'].navigation.items,
-      }
+      // this.$root.panelComponent = SideNav;
+      // this.$root.panelProps = {
+      //   navigation: this.data['@components'].navigation.items,
+      // }
     },
     methods: {
       changePanelFoo() {
         //this.$root.panelProps.data = data;
-      },
-      imageProps(block) {
-        const image_url = data.blocks[id]?.image_scales
-            ? `${data.blocks[id].url}/++api++/${data.blocks[id]?.image_scales.image[0].download}`
-            : data.blocks[id].url;
-        const size = data.blocks[id].size;
-        const align = data.blocks[id].align;
-        return {
-          url: image_url,
-          size: size,
-          align: align
-        }
       }
     },
-    props: {
-    },
     data() {
-
       return {
         data: useStore('content'),
       }