@chat21/chat21-web-widget 5.0.75 → 5.0.76

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.
Files changed (6) hide show
  1. package/CHANGELOG.md +5 -0
  2. package/package.json +1 -1
  3. package/src/app/app.component.scss +5 -0
  4. package/src/app/component/message/image/image.component.html +4 -3
  5. package/src/app/component/message/image/image.component.ts +53 -41
  6. package/src/app/providers/translator.service.ts +2 -2
package/CHANGELOG.md CHANGED
@@ -5,9 +5,14 @@
5
5
  *Dario De Pascalis*
6
6
  ### **Copyrigth**: *Tiledesk SRL*
7
7
 
8
+ ### 5.0.76 in PROD
9
+
8
10
  ### 5.0.75 in PROD
9
11
  - bug-fixed: WELCOME_TITLE and WELCOME_MSG translation labels not rendered
10
12
 
13
+ ### 5.0.75-rc.1
14
+ - added: image preview iframe on image click
15
+
11
16
  ### 5.0.74 in PROD
12
17
 
13
18
  ### 5.0.74-rc.5
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.75",
4
+ "version": "5.0.76",
5
5
  "license": "MIT",
6
6
  "homepage": "https://www.tiledesk.com",
7
7
  "repository": {
package/src/app/app.component.scss CHANGED
@@ -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%;
package/src/app/component/message/image/image.component.html CHANGED
@@ -1,11 +1,12 @@
1
1
  <!-- [ngStyle] = "{ 'max-width': width +'px', 'max-height': height +'px' }" style="position: relative; text-align: center; margin: auto"-->
2
- <div class="c21-img-container" >
2
+ <div class="c21-img-container">
3
3
  <img
4
4
  class="message-contentX message-content-imageX"
5
5
  [alt]="metadata?.name"
6
6
  [ngClass]="{'isLoadingImage': loading}"
7
- [ngStyle] = "{ 'width': width, 'height': height }"
7
+ [ngStyle] = "{ 'width': width + 'px', 'height': height+'px' }"
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>
package/src/app/component/message/image/image.component.ts CHANGED
@@ -9,8 +9,8 @@ import { saveAs } from 'file-saver';
9
9
  export class ImageComponent implements OnInit {
10
10
 
11
11
  @Input() metadata: any;
12
- @Input() width: number;
13
- @Input() height: number;
12
+ @Input() width: any;
13
+ @Input() height: any;
14
14
  @Output() onElementRendered = new EventEmitter<{element: string, status: boolean}>();
15
15
 
16
16
  loading: boolean = true
@@ -28,8 +28,8 @@ export class ImageComponent implements OnInit {
28
28
  }
29
29
 
30
30
  downloadImage(url: string, fileName: string) {
31
- console.log('Image COMP - IMAGE URL ', url)
32
- console.log('Image COMP - IMAGE FILENAME ', fileName)
31
+ // console.log('Image COMP - IMAGE URL ', url);
32
+ // console.log('Image COMP - IMAGE FILENAME ', fileName);
33
33
  fileName? null: fileName = decodeURIComponent(decodeURIComponent(url).split('/').pop())
34
34
  // const a: any = document.createElement('a');
35
35
  // a.href = this.sanitizer.bypassSecurityTrustUrl(url);
@@ -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: 80vh; max-width: 80vw; }'
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
 
package/src/app/providers/translator.service.ts CHANGED
@@ -266,7 +266,7 @@ export class TranslatorService {
266
266
 
267
267
 
268
268
  this._translate.get(labels).subscribe(res => {
269
- console.log('»»»» initI18n »»»»»» »»»»»» GET TRANSLATED LABELS RES ', res);
269
+ // console.log('»»»» initI18n »»»»»» »»»»»» GET TRANSLATED LABELS RES ', res);
270
270
  globals.LABEL_PLACEHOLDER = res['LABEL_PLACEHOLDER']
271
271
  globals.LABEL_START_NW_CONV = res['LABEL_START_NW_CONV'];
272
272
  globals.LABEL_SELECT_TOPIC = res['LABEL_SELECT_TOPIC'];
@@ -317,7 +317,7 @@ 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('resss', globals.WELCOME_TITLE)
320
+
321
321
  if(globals.WELCOME_TITLE === 'WELLCOME_TITLE') globals.WELCOME_TITLE = res['WELCOME_TITLE']
322
322
  if (!globals.welcomeTitle) {
323
323
  globals.welcomeTitle = globals.WELCOME_TITLE; /** Set the widget welcome message. Value type : string */