added: image preview iframe on image click

Tiledesk · Apr 24, 2024 · 5a2fd96 · 5a2fd96
1 parent d6fed40
commit 5a2fd96
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 40 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@chat21/chat21-web-widget",
   "author": "Tiledesk SRL",
-  "version": "5.0.74",
+  "version": "5.0.75-rc.1",
   "license": "MIT",
   "homepage": "https://www.tiledesk.com",
   "repository": {

diff --git a/src/app/app.component.scss b/src/app/app.component.scss
@@ -637,6 +637,11 @@ chat-root {
             }
         }
 
+
+        #tiledesk-image-preview {
+            border-radius: 16px;
+        }
+
         .chat21-fullscreen {
             width: 100%;
             height: 100%;

diff --git a/src/app/component/message/image/image.component.html b/src/app/component/message/image/image.component.html
@@ -7,5 +7,6 @@
     [ngStyle] = "{ 'width': width, 'height': height }"
     [src]="metadata.src" 
     (load)="onLoaded($event)"
-    (click)="downloadImage(metadata.src, metadata.name)"/>
+    (click)="onClickImage()"/>
+    <!-- downloadImage(metadata.src, metadata.name);  -->
 </div>
diff --git a/src/app/component/message/image/image.component.ts b/src/app/component/message/image/image.component.ts
@@ -43,46 +43,58 @@ export class ImageComponent implements OnInit {
   }
 
   onClickImage(){
+    const that = this;
+    var ifrm = document.createElement("iframe");
+    ifrm.setAttribute("frameborder", "0");
+    // ifrm.setAttribute("border", "0");
+    ifrm.setAttribute('id','tiledesk-image-preview');
+    ifrm.setAttribute('tiledesk_context','parent');
+    ifrm.setAttribute('style', 'width: 100%; height: 100%; position: absolute; z-index: 2147483003;')
+
+    var iframeContent = '<head>'
+    iframeContent += '<style> .tiledesk-popup {position: absolute; inset: 1px; outline-offset: -5px; background-color: rgba(0, 0, 0, 0.35); border-radius:16px; will-change: opacity;}'
+    iframeContent +=    '.tiledesk-popup-content { position: fixed; inset: 0px; width: 100%;  height: 100%; display: flex;  justify-content: center; align-items: center; outline: 0px;}'
+    iframeContent +=    '.tiledesk-popup-button { display: flex; align-items: center; justify-content: center; width: 35px; height: 35px; position: absolute; top: 0px; right: 0px; background-color: transparent; border: none; cursor: pointer; margin: 9px; padding: 0px; }'
+    iframeContent +=    '.tiledesk-popup-image { max-height: 90vh; max-width: 90vw; }'
+    iframeContent += '</style>'
+    iframeContent += '</head>';
+    iframeContent += '<body>'
+    iframeContent +=  '<div class="frame-root" id="frame-root">'
+    iframeContent +=    '<div class="frame-content">'
+    iframeContent +=      '<div class="tiledesk-popup" style="opacity: 1;"></div>'
+    iframeContent +=      '<div role="button" tabindex="-1" class="tiledesk-popup-content">'
+    // iframeContent +=         '<button id="button" type="button" data-testid="closeButton" class="tiledesk-popup-button">'
+    // iframeContent +=           '<svg id="ic_close" fill="#000000" height="20" viewBox="0 0 24 24" width="20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg>'
+    // iframeContent +=         '</button>'
+    iframeContent +=         '<a href="'+this.metadata.src+'" data-testid="popupImage-wrapper" class="tidio-popup-vgwcqv" style="opacity: 1; transform: translate3d(0px, 0px, 0px);">'
+    iframeContent +=           '<img src="'+this.metadata.src+'" class="tiledesk-popup-image" id="image-popup">'
+    iframeContent +=         '</a>'
+    iframeContent +=      '</div>'
+    iframeContent +=   '</div>'
+    iframeContent +='</body>'
 
-  //   var ifrm = document.createElement("iframe");
-  //   ifrm.setAttribute("frameborder", "0");
-  //   ifrm.setAttribute("border", "0");
-  //   ifrm.setAttribute('id','tiledeskiframe');
-  //   ifrm.setAttribute('tiledesk_context','parent');
-  //   ifrm.setAttribute('style', 'width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; z-index: 2147483003; border: 0px;')
-
-  //   var iframeContent = '<html>'
-  //   iframeContent += '<head></head>'
-  //   iframeContent += '<body>'
-  //   iframeContent +=  '<div class="frame-root">'
-  //   iframeContent +=    '<div class="frame-content">'
-  //   iframeContent +=      '<div class="tiledesk-popup" style="opacity: 1;"></div>'
-  //   iframeContent +=      '<div role="button" tabindex="-1" class="tidio-popup-1y163m9">'
-  //   iframeContent +=        '<button type="button" data-testid="closeButton" class="tidio-popup-fru4e5 >'
-  //   iframeContent +=          '<svg id="ic_close" fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg>'
-  //   iframeContent +=        '</button>'
-  //   iframeContent +=        '<a href="#popup" data-testid="popupImage-wrapper" class="tidio-popup-vgwcqv" style="opacity: 1; transform: translate3d(0px, 0px, 0px);">'
-  //   iframeContent +=          '<img src="'+this.metadata.src+'" alt="popup" class="tidio-popup-wuejeg">'
-  //   iframeContent +=        '</a>'
-  //   iframeContent +=      '</div>'
-  //   iframeContent +=     '</div>'
-  //   iframeContent +=    '</div>'
-  //   iframeContent +='</body>'
-  //   iframeContent +='</html>'
-
-  //   var tiledeskdiv = this.globals.windowContext.document.getElementById('tiledeskdiv');
+    // ifrm.src = 'data:text/html;charset=utf-8,' + encodeURI(iframeContent);
+    ifrm.srcdoc = iframeContent
+    window.document.body.appendChild(ifrm)
 
-  //   tiledeskdiv.appendChild(ifrm);
-  //   ifrm.contentWindow.document.open();
-  //   ifrm.contentWindow.document.write(iframeContent);
-  //   ifrm.contentWindow.document.close();
 
-  //   ifrm.onload = function(ev) {
-  //     // var button = document.getElementById("button");
-  //     // button.addEventListener("click", function(event){
-  //     //   alert(event.target);
-  //     // });
-  //   };
+    ifrm.onload = function(ev) {
+      var iframe = window.document.getElementById('tiledesk-image-preview')
+      // var button = ifrm.contentWindow.document.getElementById("button");
+      // button.addEventListener("click", function(event){
+      //   window.document.body.removeChild(iframe)
+      // });
+      var div = ifrm.contentWindow.document.getElementById('frame-root')
+      div.addEventListener("click", function(event){
+        window.document.body.removeChild(iframe)
+      });
+      var image = ifrm.contentWindow.document.getElementById('image-popup')
+      image.addEventListener("click", function(event){
+        event.preventDefault();
+        event.stopPropagation();
+        that.downloadImage(that.metadata.src, that.metadata.name)
+      });
+    };
 
   }