Merge pull request #118 from jfrog/MAR-10487

MAR-10489 - Research img open preview

Author: danielleafrog

src/components/ImageModal.vue

@@ -0,0 +1,82 @@
+<template>
+  <div v-if="visible" class="modal-overlay" @click.self="$emit('close')">
+    <div class="modal-content">
+      <button class="modal-close-button" @click="$emit('close')">
+        &times;
+      </button>
+      <img :srcset="imageUrl" alt="Full Preview" class="modal-image"/>
+    </div>
+  </div>
+</template>
+
+<script>
+// No imports needed for standard Options API features
+
+export default {
+  // 1. Define component name
+  name: 'ImageModal',
+
+  // 2. Define props
+  props: {
+    visible: {
+      type: Boolean,
+      required: true
+    },
+    imageUrl: {
+      type: String,
+      default: ''
+    }
+  },
+
+  // 3. Define emitted events (Optional, but good practice in Vue 2)
+  emits: ['close'],
+
+};
+</script>
+
+<style scoped>
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.9); /* Dark, semi-transparent background */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999; /* Ensure it's on top of everything */
+}
+
+.modal-content {
+  position: relative;
+  max-width: 90%;
+  max-height: 90%;
+}
+
+.modal-image {
+  max-width: 100%;
+  max-height: 80vh; /* Viewport height for a better fit */
+  display: block;
+}
+
+.modal-close-button {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  background: rgba(255, 255, 255, 0.2);
+  color: white;
+  border: none;
+  border-radius: 50%;
+  font-size: 1.5rem;
+  padding: 0 1rem;
+  cursor: pointer;
+  z-index: 10000;
+  width: 30px;
+  height: 30px;
+  display: flex
+;
+  justify-content: center;
+  align-items: center;
+}
+</style>

src/components/post/RealTimePostContent.vue

@@ -1,39 +1,99 @@
 <template>
-  <section
-      v-html="content"
-      ref="codeSection"
-      class="latest-posts-single-post-content text-black"
-  />
+  <div class="post-content-wrapper">
+    <section
+        v-html="content"
+        ref="codeSection"
+        class="latest-posts-single-post-content text-black"
+    />
+
+    <ImageModal
+        :visible="isModalVisible"
+        :image-url="selectedImageUrl"
+        @close="closeModal"
+    />
+  </div>
 </template>
 
 <script>
-import hljs from 'highlight.js'; // Import Highlight.js
-import 'highlight.js/styles/atom-one-dark-reasonable.css'; // Import the desired style
+import hljs from 'highlight.js';
+import 'highlight.js/styles/atom-one-dark-reasonable.css';
+import ImageModal from '../ImageModal.vue';
 
 export default {
   name: 'PostContent',
+  components: {
+    ImageModal, // Register the modal component
+  },
   props: {
     content: {
       type: String,
       default: 'lorem ipsum'
     },
   },
+  data() {
+    return {
+      isModalVisible: false,
+      selectedImageUrl: '',
+    };
+  },
   methods: {
+    // Existing method for code highlighting
     highlightCode() {
+      // It's important to check if the ref exists before querying the DOM
+      if (!this.$refs.codeSection) return;
 
-      // Target only the code blocks in the section
       const codeBlocks = this.$refs.codeSection.querySelectorAll('pre code');
       codeBlocks.forEach((block) => {
-        hljs.highlightBlock(block); // Highlight the code block
+        hljs.highlightBlock(block);
       });
     },
+
+    //  Attach click listeners to images
+    attachImageClickEvent() {
+      // It's important to check if the ref exists before querying the DOM
+      if (!this.$refs.codeSection) return;
+
+      const images = this.$refs.codeSection.querySelectorAll('img');
+
+      images.forEach(img => {
+        // Prevent attaching the listener multiple times on component updates
+        if (img.dataset.clickAttached) return;
+
+        img.style.cursor = 'zoom-in'; // Visual cue for the user
+
+        // 1. Define the handler function
+        const clickHandler = (event) => {
+          event.preventDefault(); // Prevent default link behavior if the image is wrapped in an <a> tag
+          this.openModal(img.src);
+        };
+
+        // 2. Attach the native DOM event listener
+        img.addEventListener('click', clickHandler);
+
+        // 3. Mark the image as handled
+        img.dataset.clickAttached = 'true';
+      });
+    },
+
+    // 🆕 NEW METHOD: Modal controls
+    openModal(url) {
+      this.selectedImageUrl = url;
+      this.isModalVisible = true;
+    },
+    closeModal() {
+      this.isModalVisible = false;
+      this.selectedImageUrl = '';
+    },
   },
-  mounted() {
 
-    // Apply syntax highlighting when mounted
+  mounted() {
+    // Apply syntax highlighting
     this.highlightCode();
+    // 🆕 Attach image click event after initial render
+    this.attachImageClickEvent();
   },
 
+
 }
 </script>