Skip to content

Commit

Permalink
### 5.0.76 in PROD
Browse files Browse the repository at this point in the history
  • Loading branch information
Gabriele Panico committed May 6, 2024
2 parents 47ef25c + 2062592 commit 04bfced
Show file tree
Hide file tree
Showing 6 changed files with 70 additions and 47 deletions.
5 changes: 5 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,14 @@
*Dario De Pascalis*
### **Copyrigth**: *Tiledesk SRL*

### 5.0.76 in PROD

### 5.0.75 in PROD
- bug-fixed: WELCOME_TITLE and WELCOME_MSG translation labels not rendered

### 5.0.75-rc.1
- added: image preview iframe on image click

### 5.0.74 in PROD

### 5.0.74-rc.5
Expand Down
4 changes: 2 additions & 2 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "@chat21/chat21-web-widget",
"author": "Tiledesk SRL",
"version": "5.0.75",
"version": "5.0.76",
"license": "MIT",
"homepage": "https://www.tiledesk.com",
"repository": {
Expand Down
5 changes: 5 additions & 0 deletions src/app/app.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -637,6 +637,11 @@ chat-root {
}
}


#tiledesk-image-preview {
border-radius: 16px;
}

.chat21-fullscreen {
width: 100%;
height: 100%;
Expand Down
7 changes: 4 additions & 3 deletions src/app/component/message/image/image.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
<!-- [ngStyle] = "{ 'max-width': width +'px', 'max-height': height +'px' }" style="position: relative; text-align: center; margin: auto"-->
<div class="c21-img-container" >
<div class="c21-img-container">
<img
class="message-contentX message-content-imageX"
[alt]="metadata?.name"
[ngClass]="{'isLoadingImage': loading}"
[ngStyle] = "{ 'width': width, 'height': height }"
[ngStyle] = "{ 'width': width + 'px', 'height': height+'px' }"
[src]="metadata.src"
(load)="onLoaded($event)"
(click)="downloadImage(metadata.src, metadata.name)"/>
(click)="onClickImage()"/>
<!-- downloadImage(metadata.src, metadata.name); -->
</div>
94 changes: 53 additions & 41 deletions src/app/component/message/image/image.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@ import { saveAs } from 'file-saver';
export class ImageComponent implements OnInit {

@Input() metadata: any;
@Input() width: number;
@Input() height: number;
@Input() width: any;
@Input() height: any;
@Output() onElementRendered = new EventEmitter<{element: string, status: boolean}>();

loading: boolean = true
Expand All @@ -28,8 +28,8 @@ export class ImageComponent implements OnInit {
}

downloadImage(url: string, fileName: string) {
console.log('Image COMP - IMAGE URL ', url)
console.log('Image COMP - IMAGE FILENAME ', fileName)
// console.log('Image COMP - IMAGE URL ', url);
// console.log('Image COMP - IMAGE FILENAME ', fileName);
fileName? null: fileName = decodeURIComponent(decodeURIComponent(url).split('/').pop())
// const a: any = document.createElement('a');
// a.href = this.sanitizer.bypassSecurityTrustUrl(url);
Expand All @@ -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: 80vh; max-width: 80vw; }'
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)
// });
};

}

Expand Down

0 comments on commit 04bfced

Please sign in to comment.