ninegrid2 6.315.0 → 6.316.0

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 (5) hide show
  1. package/dist/ai/aiMessage.js +26 -10
  2. package/dist/bundle.cjs.js +28 -7
  3. package/dist/bundle.esm.js +28 -7
  4. package/package.json +1 -1
  5. package/src/ai/aiMessage.js +26 -10
package/dist/ai/aiMessage.js CHANGED
@@ -19,9 +19,9 @@ class aiMessage extends HTMLElement
19
19
  </style>
20
20
 
21
21
  <div class="chat-message">
22
- <div title="${this.#message}" class="message">
22
+ <span title="${this.#message}" class="message">
23
23
  ${this.#message}
24
- </div>
24
+ </span>
25
25
  <span class="more" style="position:relative;"><a href="#">more</a></span>
26
26
  </div>
27
27
 
@@ -45,6 +45,20 @@ class aiMessage extends HTMLElement
45
45
  console.log(v);;
46
46
  }
47
47
 
48
+ #isEllipsisActive = () => {
49
+
50
+ const element = this.shadowRoot.querySelector(".message");;
51
+ const clone = element.cloneNode(true);
52
+ clone.style.width = "auto";
53
+ clone.style.visibility = "hidden";
54
+ document.body.appendChild(clone);
55
+
56
+ const isTruncated = clone.scrollWidth > element.clientWidth;
57
+ document.body.removeChild(clone);
58
+
59
+ return isTruncated;
60
+ }
61
+
48
62
  #init = () => {
49
63
 
50
64
  const html = `
@@ -81,24 +95,26 @@ class aiMessage extends HTMLElement
81
95
  alert(this.#message);
82
96
  });
83
97
 
98
+
99
+
84
100
  setTimeout(() => {
85
- const elMessage = this.shadowRoot.querySelector(".message");
101
+ //const elMessage = this.shadowRoot.querySelector(".message");
86
102
  const elMore = this.shadowRoot.querySelector(".more");
87
103
 
88
- console.log(elMessage.scrollWidth, elMessage.clientWidth);
104
+ console.log(this.#isEllipsisActive());
89
105
 
90
- elMore.style.display = "flex";
106
+ //elMore.style.display = "flex";
91
107
  //elMore.style.position = "absolute";
92
108
 
93
- console.log(elMessage.scrollWidth, elMessage.clientWidth);
109
+ //console.log(elMessage.scrollWidth, elMessage.clientWidth);
94
110
 
95
111
  //elMore.style.display = (elMessage.scrollWidth > elMessage.clientWidth) ? "flex" : "none";
96
- if (elMessage.scrollWidth > elMessage.clientWidth) {
97
- //elMore.style.display = "flex";
98
- //elMore.style.position = "absolute";
112
+ if (this.#isEllipsisActive()) {
113
+ elMore.style.display = "flex";
114
+ elMore.style.position = "absolute";
99
115
  }
100
116
  else {
101
- //elMore.style.display = "none";
117
+ elMore.style.display = "none";
102
118
  }
103
119
  }, 100);
104
120
 
package/dist/bundle.cjs.js CHANGED
@@ -27305,9 +27305,9 @@ class aiMessage extends HTMLElement
27305
27305
  </style>
27306
27306
 
27307
27307
  <div class="chat-message">
27308
- <div title="${this.#message}" class="message">
27308
+ <span title="${this.#message}" class="message">
27309
27309
  ${this.#message}
27310
- </div>
27310
+ </span>
27311
27311
  <span class="more" style="position:relative;"><a href="#">more</a></span>
27312
27312
  </div>
27313
27313
 
@@ -27330,6 +27330,19 @@ class aiMessage extends HTMLElement
27330
27330
  set data(v) {
27331
27331
  console.log(v); }
27332
27332
 
27333
+ #isEllipsisActive = () => {
27334
+
27335
+ const element = this.shadowRoot.querySelector(".message"); const clone = element.cloneNode(true);
27336
+ clone.style.width = "auto";
27337
+ clone.style.visibility = "hidden";
27338
+ document.body.appendChild(clone);
27339
+
27340
+ const isTruncated = clone.scrollWidth > element.clientWidth;
27341
+ document.body.removeChild(clone);
27342
+
27343
+ return isTruncated;
27344
+ }
27345
+
27333
27346
  #init = () => {
27334
27347
 
27335
27348
  const html = `
@@ -27366,19 +27379,27 @@ class aiMessage extends HTMLElement
27366
27379
  alert(this.#message);
27367
27380
  });
27368
27381
 
27382
+
27383
+
27369
27384
  setTimeout(() => {
27370
- const elMessage = this.shadowRoot.querySelector(".message");
27385
+ //const elMessage = this.shadowRoot.querySelector(".message");
27371
27386
  const elMore = this.shadowRoot.querySelector(".more");
27372
27387
 
27373
- console.log(elMessage.scrollWidth, elMessage.clientWidth);
27388
+ console.log(this.#isEllipsisActive());
27374
27389
 
27375
- elMore.style.display = "flex";
27390
+ //elMore.style.display = "flex";
27376
27391
  //elMore.style.position = "absolute";
27377
27392
 
27378
- console.log(elMessage.scrollWidth, elMessage.clientWidth);
27393
+ //console.log(elMessage.scrollWidth, elMessage.clientWidth);
27379
27394
 
27380
27395
  //elMore.style.display = (elMessage.scrollWidth > elMessage.clientWidth) ? "flex" : "none";
27381
- if (elMessage.scrollWidth > elMessage.clientWidth) ;
27396
+ if (this.#isEllipsisActive()) {
27397
+ elMore.style.display = "flex";
27398
+ elMore.style.position = "absolute";
27399
+ }
27400
+ else {
27401
+ elMore.style.display = "none";
27402
+ }
27382
27403
  }, 100);
27383
27404
 
27384
27405
  };
package/dist/bundle.esm.js CHANGED
@@ -27303,9 +27303,9 @@ class aiMessage extends HTMLElement
27303
27303
  </style>
27304
27304
 
27305
27305
  <div class="chat-message">
27306
- <div title="${this.#message}" class="message">
27306
+ <span title="${this.#message}" class="message">
27307
27307
  ${this.#message}
27308
- </div>
27308
+ </span>
27309
27309
  <span class="more" style="position:relative;"><a href="#">more</a></span>
27310
27310
  </div>
27311
27311
 
@@ -27328,6 +27328,19 @@ class aiMessage extends HTMLElement
27328
27328
  set data(v) {
27329
27329
  console.log(v); }
27330
27330
 
27331
+ #isEllipsisActive = () => {
27332
+
27333
+ const element = this.shadowRoot.querySelector(".message"); const clone = element.cloneNode(true);
27334
+ clone.style.width = "auto";
27335
+ clone.style.visibility = "hidden";
27336
+ document.body.appendChild(clone);
27337
+
27338
+ const isTruncated = clone.scrollWidth > element.clientWidth;
27339
+ document.body.removeChild(clone);
27340
+
27341
+ return isTruncated;
27342
+ }
27343
+
27331
27344
  #init = () => {
27332
27345
 
27333
27346
  const html = `
@@ -27364,19 +27377,27 @@ class aiMessage extends HTMLElement
27364
27377
  alert(this.#message);
27365
27378
  });
27366
27379
 
27380
+
27381
+
27367
27382
  setTimeout(() => {
27368
- const elMessage = this.shadowRoot.querySelector(".message");
27383
+ //const elMessage = this.shadowRoot.querySelector(".message");
27369
27384
  const elMore = this.shadowRoot.querySelector(".more");
27370
27385
 
27371
- console.log(elMessage.scrollWidth, elMessage.clientWidth);
27386
+ console.log(this.#isEllipsisActive());
27372
27387
 
27373
- elMore.style.display = "flex";
27388
+ //elMore.style.display = "flex";
27374
27389
  //elMore.style.position = "absolute";
27375
27390
 
27376
- console.log(elMessage.scrollWidth, elMessage.clientWidth);
27391
+ //console.log(elMessage.scrollWidth, elMessage.clientWidth);
27377
27392
 
27378
27393
  //elMore.style.display = (elMessage.scrollWidth > elMessage.clientWidth) ? "flex" : "none";
27379
- if (elMessage.scrollWidth > elMessage.clientWidth) ;
27394
+ if (this.#isEllipsisActive()) {
27395
+ elMore.style.display = "flex";
27396
+ elMore.style.position = "absolute";
27397
+ }
27398
+ else {
27399
+ elMore.style.display = "none";
27400
+ }
27380
27401
  }, 100);
27381
27402
 
27382
27403
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "ninegrid2",
3
3
  "type": "module",
4
- "version": "6.315.0",
4
+ "version": "6.316.0",
5
5
  "main": "dist/index.js",
6
6
  "exports": {
7
7
  "import": "./dist/index.js",
package/src/ai/aiMessage.js CHANGED
@@ -19,9 +19,9 @@ class aiMessage extends HTMLElement
19
19
  </style>
20
20
 
21
21
  <div class="chat-message">
22
- <div title="${this.#message}" class="message">
22
+ <span title="${this.#message}" class="message">
23
23
  ${this.#message}
24
- </div>
24
+ </span>
25
25
  <span class="more" style="position:relative;"><a href="#">more</a></span>
26
26
  </div>
27
27
 
@@ -45,6 +45,20 @@ class aiMessage extends HTMLElement
45
45
  console.log(v);;
46
46
  }
47
47
 
48
+ #isEllipsisActive = () => {
49
+
50
+ const element = this.shadowRoot.querySelector(".message");;
51
+ const clone = element.cloneNode(true);
52
+ clone.style.width = "auto";
53
+ clone.style.visibility = "hidden";
54
+ document.body.appendChild(clone);
55
+
56
+ const isTruncated = clone.scrollWidth > element.clientWidth;
57
+ document.body.removeChild(clone);
58
+
59
+ return isTruncated;
60
+ }
61
+
48
62
  #init = () => {
49
63
 
50
64
  const html = `
@@ -81,24 +95,26 @@ class aiMessage extends HTMLElement
81
95
  alert(this.#message);
82
96
  });
83
97
 
98
+
99
+
84
100
  setTimeout(() => {
85
- const elMessage = this.shadowRoot.querySelector(".message");
101
+ //const elMessage = this.shadowRoot.querySelector(".message");
86
102
  const elMore = this.shadowRoot.querySelector(".more");
87
103
 
88
- console.log(elMessage.scrollWidth, elMessage.clientWidth);
104
+ console.log(this.#isEllipsisActive());
89
105
 
90
- elMore.style.display = "flex";
106
+ //elMore.style.display = "flex";
91
107
  //elMore.style.position = "absolute";
92
108
 
93
- console.log(elMessage.scrollWidth, elMessage.clientWidth);
109
+ //console.log(elMessage.scrollWidth, elMessage.clientWidth);
94
110
 
95
111
  //elMore.style.display = (elMessage.scrollWidth > elMessage.clientWidth) ? "flex" : "none";
96
- if (elMessage.scrollWidth > elMessage.clientWidth) {
97
- //elMore.style.display = "flex";
98
- //elMore.style.position = "absolute";
112
+ if (this.#isEllipsisActive()) {
113
+ elMore.style.display = "flex";
114
+ elMore.style.position = "absolute";
99
115
  }
100
116
  else {
101
- //elMore.style.display = "none";
117
+ elMore.style.display = "none";
102
118
  }
103
119
  }, 100);
104
120