start of grid and teaser

collective · Aug 18, 2024 · 5f33e1c · 5f33e1c
1 parent fea4a3f
commit 5f33e1c
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 25 deletions.
diff --git a/examples/hydra-vue-f7/src/components/app.vue b/examples/hydra-vue-f7/src/components/app.vue
@@ -125,7 +125,7 @@
       }
 
       // 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) => {

diff --git a/examples/hydra-vue-f7/src/components/block.vue b/examples/hydra-vue-f7/src/components/block.vue
@@ -0,0 +1,73 @@
+<template>
+      <f7-block-title v-if="block['@type']=='title'" :data-block-uid="block_uid">{{ data.title}}</f7-block-title>
+      <div v-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-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-if="block['@type']=='gridBlock'" :data-block-uid="block_uid">
+        <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-if="block['@type']=='teaser'" :data-block-uid="block_uid">
+      <f7-card-header
+        valign="bottom"
+        style="background-image: url(https://cdn.framework7.io/placeholder/people-1000x600-6.jpg)"
+        >{{block.title}}</f7-card-header
+      >
+      <f7-card-content>
+        <p>{{block.Description}}</p>
+      </f7-card-content>
+      <f7-card-footer>
+        <f7-link>Like</f7-link>
+        <f7-link>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: {
+    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>
diff --git a/examples/hydra-vue-f7/src/pages/page.vue b/examples/hydra-vue-f7/src/pages/page.vue
@@ -13,15 +13,7 @@
     </f7-navbar>
 
     <f7-block>
-      <template v-for="block_uid in data.blocks_layout.items" >
-      <f7-block-title v-if="data.blocks[block_uid]['@type']=='title'" :data-block-uid="block_uid">{{ data.title}}</f7-block-title>
-      <div 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" />
-      </div>
-      <f7-block v-if="data.blocks[block_uid]['@type']=='image'" :data-block-uid="block_uid">
-        <img v-for="props in [imageProps(data.blocks[block_uid])]" :src="props.url" :class="['image-size-'+props.size, 'image-align-'+props.align]" />
-      </f7-block>
-    </template>
+      <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>
 
@@ -30,11 +22,11 @@
 
 <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,
@@ -49,19 +41,6 @@
     methods: {
       changePanelFoo() {
         //this.$root.panelProps.data = data;
-      },
-      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
-        }
       }
     },
     data() {