@chat21/chat21-web-widget 5.0.74 → 5.0.75-rc.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@chat21/chat21-web-widget",
3
3
  "author": "Tiledesk SRL",
4
- "version": "5.0.74",
4
+ "version": "5.0.75-rc.1",
5
5
  "license": "MIT",
6
6
  "homepage": "https://www.tiledesk.com",
7
7
  "repository": {
@@ -637,6 +637,11 @@ chat-root {
637
637
  }
638
638
  }
639
639
 
640
+
641
+ #tiledesk-image-preview {
642
+ border-radius: 16px;
643
+ }
644
+
640
645
  .chat21-fullscreen {
641
646
  width: 100%;
642
647
  height: 100%;
@@ -372,11 +372,6 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
372
372
  that.g.tiledeskToken = tiledeskTokenTEMP;
373
373
  }
374
374
 
375
- const firebaseTokenTEMP = this.messagingAuthService.getToken();
376
- if (firebaseTokenTEMP && firebaseTokenTEMP !== undefined) {
377
- that.g.firebaseToken = firebaseTokenTEMP;
378
- }
379
-
380
375
  const autoStart = this.g.autoStart;
381
376
  that.stateLoggedUser = state;
382
377
  if (state && state === AUTH_STATE_ONLINE) {
@@ -7,5 +7,6 @@
7
7
  [ngStyle] = "{ 'width': width, 'height': height }"
8
8
  [src]="metadata.src"
9
9
  (load)="onLoaded($event)"
10
- (click)="downloadImage(metadata.src, metadata.name)"/>
10
+ (click)="onClickImage()"/>
11
+ <!-- downloadImage(metadata.src, metadata.name); -->
11
12
  </div>
@@ -43,46 +43,58 @@ export class ImageComponent implements OnInit {
43
43
  }
44
44
 
45
45
  onClickImage(){
46
+ const that = this;
47
+ var ifrm = document.createElement("iframe");
48
+ ifrm.setAttribute("frameborder", "0");
49
+ // ifrm.setAttribute("border", "0");
50
+ ifrm.setAttribute('id','tiledesk-image-preview');
51
+ ifrm.setAttribute('tiledesk_context','parent');
52
+ ifrm.setAttribute('style', 'width: 100%; height: 100%; position: absolute; z-index: 2147483003;')
53
+
54
+ var iframeContent = '<head>'
55
+ 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;}'
56
+ iframeContent += '.tiledesk-popup-content { position: fixed; inset: 0px; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; outline: 0px;}'
57
+ 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; }'
58
+ iframeContent += '.tiledesk-popup-image { max-height: 90vh; max-width: 90vw; }'
59
+ iframeContent += '</style>'
60
+ iframeContent += '</head>';
61
+ iframeContent += '<body>'
62
+ iframeContent += '<div class="frame-root" id="frame-root">'
63
+ iframeContent += '<div class="frame-content">'
64
+ iframeContent += '<div class="tiledesk-popup" style="opacity: 1;"></div>'
65
+ iframeContent += '<div role="button" tabindex="-1" class="tiledesk-popup-content">'
66
+ // iframeContent += '<button id="button" type="button" data-testid="closeButton" class="tiledesk-popup-button">'
67
+ // 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>'
68
+ // iframeContent += '</button>'
69
+ iframeContent += '<a href="'+this.metadata.src+'" data-testid="popupImage-wrapper" class="tidio-popup-vgwcqv" style="opacity: 1; transform: translate3d(0px, 0px, 0px);">'
70
+ iframeContent += '<img src="'+this.metadata.src+'" class="tiledesk-popup-image" id="image-popup">'
71
+ iframeContent += '</a>'
72
+ iframeContent += '</div>'
73
+ iframeContent += '</div>'
74
+ iframeContent +='</body>'
46
75
 
47
- // var ifrm = document.createElement("iframe");
48
- // ifrm.setAttribute("frameborder", "0");
49
- // ifrm.setAttribute("border", "0");
50
- // ifrm.setAttribute('id','tiledeskiframe');
51
- // ifrm.setAttribute('tiledesk_context','parent');
52
- // ifrm.setAttribute('style', 'width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; z-index: 2147483003; border: 0px;')
53
-
54
- // var iframeContent = '<html>'
55
- // iframeContent += '<head></head>'
56
- // iframeContent += '<body>'
57
- // iframeContent += '<div class="frame-root">'
58
- // iframeContent += '<div class="frame-content">'
59
- // iframeContent += '<div class="tiledesk-popup" style="opacity: 1;"></div>'
60
- // iframeContent += '<div role="button" tabindex="-1" class="tidio-popup-1y163m9">'
61
- // iframeContent += '<button type="button" data-testid="closeButton" class="tidio-popup-fru4e5 >'
62
- // 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>'
63
- // iframeContent += '</button>'
64
- // iframeContent += '<a href="#popup" data-testid="popupImage-wrapper" class="tidio-popup-vgwcqv" style="opacity: 1; transform: translate3d(0px, 0px, 0px);">'
65
- // iframeContent += '<img src="'+this.metadata.src+'" alt="popup" class="tidio-popup-wuejeg">'
66
- // iframeContent += '</a>'
67
- // iframeContent += '</div>'
68
- // iframeContent += '</div>'
69
- // iframeContent += '</div>'
70
- // iframeContent +='</body>'
71
- // iframeContent +='</html>'
72
-
73
- // var tiledeskdiv = this.globals.windowContext.document.getElementById('tiledeskdiv');
76
+ // ifrm.src = 'data:text/html;charset=utf-8,' + encodeURI(iframeContent);
77
+ ifrm.srcdoc = iframeContent
78
+ window.document.body.appendChild(ifrm)
74
79
 
75
- // tiledeskdiv.appendChild(ifrm);
76
- // ifrm.contentWindow.document.open();
77
- // ifrm.contentWindow.document.write(iframeContent);
78
- // ifrm.contentWindow.document.close();
79
80
 
80
- // ifrm.onload = function(ev) {
81
- // // var button = document.getElementById("button");
82
- // // button.addEventListener("click", function(event){
83
- // // alert(event.target);
84
- // // });
85
- // };
81
+ ifrm.onload = function(ev) {
82
+ var iframe = window.document.getElementById('tiledesk-image-preview')
83
+ // var button = ifrm.contentWindow.document.getElementById("button");
84
+ // button.addEventListener("click", function(event){
85
+ // window.document.body.removeChild(iframe)
86
+ // });
87
+ var div = ifrm.contentWindow.document.getElementById('frame-root')
88
+ div.addEventListener("click", function(event){
89
+ window.document.body.removeChild(iframe)
90
+ });
91
+ var image = ifrm.contentWindow.document.getElementById('image-popup')
92
+ image.addEventListener("click", function(event){
93
+ event.preventDefault();
94
+ event.stopPropagation();
95
+ that.downloadImage(that.metadata.src, that.metadata.name)
96
+ });
97
+ };
86
98
 
87
99
  }
88
100
 
@@ -317,7 +317,6 @@ export class TranslatorService {
317
317
  globals.LABEL_PREVIEW = res['LABEL_PREVIEW']
318
318
  globals.LABEL_ERROR_FIELD_REQUIRED= res['LABEL_ERROR_FIELD_REQUIRED']
319
319
 
320
- console.log('gggggg', globals.welcomeTitle)
321
320
  if (!globals.welcomeTitle) {
322
321
 
323
322
  globals.welcomeTitle = globals.WELCOME_TITLE; /** Set the widget welcome message. Value type : string */