@ascii-web/client 0.9.2 → 0.9.3
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/dist/ascii-img.js +11 -3
- package/package.json +1 -1
package/dist/ascii-img.js
CHANGED
|
@@ -25,10 +25,15 @@ const STYLES = `
|
|
|
25
25
|
color: var(--ascii-color, white);
|
|
26
26
|
background-color: var(--ascii-bg, black);
|
|
27
27
|
}
|
|
28
|
-
|
|
28
|
+
/* clips the measure span so its width never makes the page scroll */
|
|
29
|
+
.measure-box {
|
|
29
30
|
position: absolute;
|
|
31
|
+
width: 0;
|
|
32
|
+
height: 0;
|
|
33
|
+
overflow: hidden;
|
|
34
|
+
}
|
|
35
|
+
.measure {
|
|
30
36
|
visibility: hidden;
|
|
31
|
-
pointer-events: none;
|
|
32
37
|
}
|
|
33
38
|
`;
|
|
34
39
|
export class AsciiImg extends HTMLElement {
|
|
@@ -56,7 +61,10 @@ export class AsciiImg extends HTMLElement {
|
|
|
56
61
|
this.#measure = document.createElement('span');
|
|
57
62
|
this.#measure.className = 'measure';
|
|
58
63
|
this.#measure.textContent = 'M'.repeat(100);
|
|
59
|
-
|
|
64
|
+
const measureBox = document.createElement('div');
|
|
65
|
+
measureBox.className = 'measure-box';
|
|
66
|
+
measureBox.appendChild(this.#measure);
|
|
67
|
+
this.#shadow.appendChild(measureBox);
|
|
60
68
|
this.setAttribute('role', 'img');
|
|
61
69
|
// render on the next frame rather than inside the callback: rendering
|
|
62
70
|
// changes the host's height, which would resize the observed element
|