feat: add enlarge on click functionality

TYPO3-Headless · Oct 22, 2021 · b0b75ff · b0b75ff
1 parent 7bda32c
commit b0b75ff
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 6 deletions.
diff --git a/lib/templates/components/content/elements/CeImage.vue b/lib/templates/components/content/elements/CeImage.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="ce-image">
     <ce-header v-bind="$props" />
-    <media-gallery :gallery="gallery" />
+    <media-gallery :gallery="gallery" :enlarge-image-on-click="enlargeImageOnClick" />
   </div>
 </template>
 <script>
@@ -17,7 +17,11 @@ export default {
     gallery: {
       type: Object,
       required: true,
-      default: () => {}
+      default: () => ({})
+    },
+    enlargeImageOnClick: {
+      type: Boolean,
+      default: false
     }
   }
 }

diff --git a/lib/templates/components/content/elements/CeTextpic.vue b/lib/templates/components/content/elements/CeTextpic.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="ce-textpic">
-    <media-gallery :gallery="gallery">
+    <media-gallery :gallery="gallery" :enlarge-image-on-click="enlargeImageOnClick">
       <ce-header v-bind="$props" />
       <html-parser :content="bodytext" />
     </media-gallery>
@@ -23,6 +23,10 @@ export default {
     bodytext: {
       type: String,
       required: true
+    },
+    enlargeImageOnClick: {
+      type: Boolean,
+      default: false
     }
   }
 }

diff --git a/lib/templates/components/content/elements/media/Gallery.vue b/lib/templates/components/content/elements/media/Gallery.vue
@@ -10,13 +10,20 @@
         :key="rowKey"
         class="ce-gallery__row"
       >
-        <div
+        <component
+          :is="enlargeImageOnClick ? 'a' : 'div'"
           v-for="(col, colKey) in row.columns"
           :key="colKey"
           class="ce-gallery__col"
+          v-bind="{
+            ...(enlargeImageOnClick && {
+              target: '_blank',
+              href: col.publicUrl
+            })
+          }"
         >
           <ce-media-file :file="col" />
-        </div>
+        </component>
       </div>
     </div>
     <div
@@ -38,7 +45,11 @@ export default {
     gallery: {
       type: Object,
       required: true,
-      default: () => {}
+      default: () => ({})
+    },
+    enlargeImageOnClick: {
+      type: Boolean,
+      default: false
     }
   },
   computed: {