@getflip/swirl-components 0.300.1 → 0.300.2
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/components.json +1 -1
- package/dist/cjs/swirl-app-icon.cjs.entry.js +14 -1
- package/dist/cjs/swirl-avatar.cjs.entry.js +12 -1
- package/dist/cjs/swirl-file-viewer_8.cjs.entry.js +14 -1
- package/dist/cjs/swirl-image-grid-item.cjs.entry.js +14 -3
- package/dist/collection/components/swirl-app-icon/swirl-app-icon.js +14 -1
- package/dist/collection/components/swirl-avatar/swirl-avatar.js +12 -1
- package/dist/collection/components/swirl-file-viewer/viewers/swirl-file-viewer-image/swirl-file-viewer-image.js +14 -1
- package/dist/collection/components/swirl-image-grid-item/swirl-image-grid-item.js +14 -3
- package/dist/components/assets/pdfjs/pdf.worker.min.js +1 -1
- package/dist/components/swirl-app-icon.js +14 -1
- package/dist/components/swirl-avatar.js +12 -1
- package/dist/components/swirl-file-viewer-image2.js +14 -1
- package/dist/components/swirl-image-grid-item.js +14 -3
- package/dist/esm/swirl-app-icon.entry.js +14 -1
- package/dist/esm/swirl-avatar.entry.js +12 -1
- package/dist/esm/swirl-file-viewer_8.entry.js +14 -1
- package/dist/esm/swirl-image-grid-item.entry.js +14 -3
- package/dist/swirl-components/p-329a4a15.entry.js +1 -0
- package/dist/swirl-components/p-9356e017.entry.js +1 -0
- package/dist/swirl-components/p-93767851.entry.js +1 -0
- package/dist/swirl-components/{p-93fe6d45.entry.js → p-f5a753c6.entry.js} +1 -1
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/dist/types/components/swirl-app-icon/swirl-app-icon.d.ts +3 -0
- package/dist/types/components/swirl-avatar/swirl-avatar.d.ts +2 -0
- package/dist/types/components/swirl-file-viewer/viewers/swirl-file-viewer-image/swirl-file-viewer-image.d.ts +2 -0
- package/dist/types/components/swirl-image-grid-item/swirl-image-grid-item.d.ts +2 -1
- package/package.json +1 -1
- package/dist/swirl-components/p-0a9f3263.entry.js +0 -1
- package/dist/swirl-components/p-2f44dd71.entry.js +0 -1
- package/dist/swirl-components/p-613a263e.entry.js +0 -1
package/components.json
CHANGED
|
@@ -17,10 +17,23 @@ const SwirlAppIcon = class {
|
|
|
17
17
|
this.setImageUnavailable = () => {
|
|
18
18
|
this.imageAvailable = false;
|
|
19
19
|
};
|
|
20
|
+
this.onImageElementUpdate = (el) => {
|
|
21
|
+
this.imgEl?.removeEventListener("load", this.setImageAvailable);
|
|
22
|
+
this.imgEl?.removeEventListener("error", this.setImageUnavailable);
|
|
23
|
+
this.imgEl = el;
|
|
24
|
+
if (this.imgEl) {
|
|
25
|
+
this.imgEl.addEventListener("load", this.setImageAvailable);
|
|
26
|
+
this.imgEl.addEventListener("error", this.setImageUnavailable);
|
|
27
|
+
}
|
|
28
|
+
};
|
|
20
29
|
this.icon = undefined;
|
|
21
30
|
this.src = undefined;
|
|
22
31
|
this.imageAvailable = undefined;
|
|
23
32
|
}
|
|
33
|
+
disconnectedCallback() {
|
|
34
|
+
this.imgEl?.removeEventListener("load", this.setImageAvailable);
|
|
35
|
+
this.imgEl?.removeEventListener("error", this.setImageUnavailable);
|
|
36
|
+
}
|
|
24
37
|
render() {
|
|
25
38
|
const showImage = Boolean(this.src) &&
|
|
26
39
|
(this.imageAvailable || this.imageAvailable === undefined);
|
|
@@ -29,7 +42,7 @@ const SwirlAppIcon = class {
|
|
|
29
42
|
const className = index$1.classnames("app-icon", {
|
|
30
43
|
"app-icon--has-icon": showIcon || showFallbackIcon,
|
|
31
44
|
});
|
|
32
|
-
return (index.h(index.Host, { key: '
|
|
45
|
+
return (index.h(index.Host, { key: '4c903c83af417365577fa87cf0aa4311c5a88b4d' }, index.h("span", { key: 'fe288c3715c20fa504329100d08faa2027723204', class: className }, showImage && (index.h("img", { key: '7e6ed8864f1551bcfed28911010f952b67659e74', alt: "", height: "256", ref: this.onImageElementUpdate, src: this.src, width: "256" })), showIcon && (index.h("span", { key: 'ac54a7dbb1b26d035a9b24c63667c21d9b37fec7', class: "app-icon__icon", innerHTML: this.icon })))));
|
|
33
46
|
}
|
|
34
47
|
};
|
|
35
48
|
SwirlAppIcon.style = SwirlAppIconStyle0;
|
|
@@ -24,6 +24,15 @@ const SwirlAvatar = class {
|
|
|
24
24
|
this.imageError = index.createEvent(this, "imageError", 7);
|
|
25
25
|
this.imageLoad = index.createEvent(this, "imageLoad", 7);
|
|
26
26
|
this.componentLoaded = false;
|
|
27
|
+
this.onImageElementUpdate = (el) => {
|
|
28
|
+
this.imgEl?.removeEventListener("load", this.setImageAvailable);
|
|
29
|
+
this.imgEl?.removeEventListener("error", this.setImageUnavailable);
|
|
30
|
+
this.imgEl = el;
|
|
31
|
+
if (this.imgEl) {
|
|
32
|
+
this.imgEl.addEventListener("load", this.setImageAvailable);
|
|
33
|
+
this.imgEl.addEventListener("error", this.setImageUnavailable);
|
|
34
|
+
}
|
|
35
|
+
};
|
|
27
36
|
this.setImageAvailable = () => {
|
|
28
37
|
this.imageAvailable = true;
|
|
29
38
|
this.loadingError = false;
|
|
@@ -84,6 +93,8 @@ const SwirlAvatar = class {
|
|
|
84
93
|
}
|
|
85
94
|
disconnectedCallback() {
|
|
86
95
|
this.intersectionObserver?.disconnect();
|
|
96
|
+
this.imgEl?.removeEventListener("load", this.setImageAvailable);
|
|
97
|
+
this.imgEl?.removeEventListener("error", this.setImageUnavailable);
|
|
87
98
|
}
|
|
88
99
|
watchSrcProp() {
|
|
89
100
|
this.imageAvailable = undefined;
|
|
@@ -117,7 +128,7 @@ const SwirlAvatar = class {
|
|
|
117
128
|
});
|
|
118
129
|
const badgeClassName = index$1.classnames("avatar__badge", `avatar__badge--position-${this.badgePosition}`);
|
|
119
130
|
const toolClassName = index$1.classnames("avatar__tool", `avatar__tool--position-${this.toolPosition}`);
|
|
120
|
-
return (index.h(index.Host, { key: '
|
|
131
|
+
return (index.h(index.Host, { key: '3c36f09dcdb6b1f6f56e3dbfb7a673e77b3ef6f9', "aria-label": this.interactive ? this.label : undefined, onKeydown: this.interactive ? this.onKeydown : undefined, onKeyup: this.interactive ? this.onKeyup : undefined, role: role, tabIndex: this.interactive ? 0 : undefined }, index.h("span", { key: '21057a05d374a8803a8c28b9a5ff133146a5806f', class: className, part: "avatar" }, showImage && (index.h("span", { key: '99c45973ba401b828bb140a5d61bfd9929340033', class: "avatar__image" }, index.h("img", { key: '95ad28f353923ceb60205f36086784c733ef461b', alt: "", height: swirlAvatarSizeMappings[this.size], loading: this.loading !== "intersecting" ? this.loading : undefined, ref: this.onImageElementUpdate, src: this.src, width: swirlAvatarSizeMappings[this.size] }))), showInitials && (index.h("span", { key: '66de0845df06e63d53d6dc86223aff7da3a46bb7', class: "avatar__initials" }, index.h("span", { key: '28ca37f08266223e3ecfa461eb4c100a4b3adc41' }, this.initials))), showIcon && index.h("span", { key: '404230c35d5a1272ef94ae82a56391832904183f', class: "avatar__icon", innerHTML: this.icon }), showFallbackIcon && (index.h("span", { key: '90677bfa3d90d817357ced9087ccadf18644ff10', class: "avatar__icon" }, index.h("swirl-icon-person", { key: 'ddc8abcba3e8679aa16786cde144ce1fc2238460' }))), showBadge && (index.h("span", { key: '49a10edded6458c1eba7590e355a77e9d35e921f', class: badgeClassName, innerHTML: this.badge })), index.h("span", { key: '267f7ed319a57f571bf0d5d9b26877ce8ac69e9c', class: toolClassName }, index.h("slot", { key: '07f809b1dd6d911428daaddb626f75b7cf6ec40a', name: "tool" }))), this.showLabel && (index.h("span", { key: '5bfdcf03b6afedc2778009c898a3cde10c1959b3', "aria-hidden": true, class: "avatar__label" }, this.label))));
|
|
121
132
|
}
|
|
122
133
|
get element() { return index.getElement(this); }
|
|
123
134
|
static get watchers() { return {
|
|
@@ -340,6 +340,15 @@ const SwirlFileViewerImage = class {
|
|
|
340
340
|
this.endPan = () => {
|
|
341
341
|
this.panning = false;
|
|
342
342
|
};
|
|
343
|
+
this.onImageElementUpdate = (el) => {
|
|
344
|
+
this.imageEl?.removeEventListener("load", this.onLoad);
|
|
345
|
+
this.imageEl?.removeEventListener("error", this.onError);
|
|
346
|
+
this.imageEl = el;
|
|
347
|
+
if (this.imageEl) {
|
|
348
|
+
this.imageEl.addEventListener("load", this.onLoad);
|
|
349
|
+
this.imageEl.addEventListener("error", this.onError);
|
|
350
|
+
}
|
|
351
|
+
};
|
|
343
352
|
this.description = "";
|
|
344
353
|
this.errorMessage = "File could not be loaded.";
|
|
345
354
|
this.file = undefined;
|
|
@@ -350,6 +359,10 @@ const SwirlFileViewerImage = class {
|
|
|
350
359
|
componentDidLoad() {
|
|
351
360
|
this.activate.emit(this.el);
|
|
352
361
|
}
|
|
362
|
+
disconnectedCallback() {
|
|
363
|
+
this.imageEl?.removeEventListener("load", this.onLoad);
|
|
364
|
+
this.imageEl?.removeEventListener("error", this.onError);
|
|
365
|
+
}
|
|
353
366
|
watchFile() {
|
|
354
367
|
this.error = false;
|
|
355
368
|
this.loading = true;
|
|
@@ -369,7 +382,7 @@ const SwirlFileViewerImage = class {
|
|
|
369
382
|
return this.updateZoomAndPan(1);
|
|
370
383
|
}
|
|
371
384
|
render() {
|
|
372
|
-
return (index.h(index.Host, { key: '
|
|
385
|
+
return (index.h(index.Host, { key: 'dee1710566cedea2b677f25cf816d879a9de66f4', class: "file-viewer-image", onDblClick: this.onDblClick, onWheel: this.onWheel, onPointerDown: this.onPointerDown, onPointerMove: this.onPointerMove, onPointerUp: this.onPointerUp, onTouchStart: this.onTouchStart, onTouchMove: this.onTouchMove, onTouchEnd: this.onTouchEnd }, this.error && (index.h("swirl-inline-error", { key: 'd29984d319144f8d4ff276a9f5502e14e6b0fdaf', class: "file-viewer-image__error", message: this.errorMessage })), index.h("img", { key: 'd303129a6ba1f537c02b39b3fd0dfa63b82c85f3', alt: this.description, class: "file-viewer-image__image", ref: this.onImageElementUpdate, src: this.file }), this.loading && (index.h("div", { key: 'd96bf98483c7e71bfeca5636547b2bddbe7463fe', class: "file-viewer-image__spinner" }, index.h("swirl-spinner", { key: 'a6cf23493fc08e24cfd0e4c5cd2e42f06866a3b4' })))));
|
|
373
386
|
}
|
|
374
387
|
get el() { return index.getElement(this); }
|
|
375
388
|
static get watchers() { return {
|
|
@@ -39,6 +39,15 @@ const SwirlImageGridItem = class {
|
|
|
39
39
|
event.stopImmediatePropagation();
|
|
40
40
|
this.gifPaused ? this.playGif() : this.pauseGif();
|
|
41
41
|
};
|
|
42
|
+
this.onImageElementUpdate = (el) => {
|
|
43
|
+
this.img?.removeEventListener("load", this.onLoad);
|
|
44
|
+
this.img?.removeEventListener("error", this.onError);
|
|
45
|
+
this.img = el;
|
|
46
|
+
if (this.img) {
|
|
47
|
+
this.img.addEventListener("load", this.onLoad);
|
|
48
|
+
this.img.addEventListener("error", this.onError);
|
|
49
|
+
}
|
|
50
|
+
};
|
|
42
51
|
this.alt = undefined;
|
|
43
52
|
this.gifPauseLabel = "Pause GIF playback";
|
|
44
53
|
this.gifPlayLabel = "Continue GIF playback";
|
|
@@ -89,6 +98,8 @@ const SwirlImageGridItem = class {
|
|
|
89
98
|
disconnectedCallback() {
|
|
90
99
|
this.intersectionObserver?.disconnect();
|
|
91
100
|
this.computedSrc = "";
|
|
101
|
+
this.img?.removeEventListener("load", this.onLoad);
|
|
102
|
+
this.img?.removeEventListener("error", this.onError);
|
|
92
103
|
}
|
|
93
104
|
setupIntersectionObserver() {
|
|
94
105
|
if (this.loading !== "intersecting") {
|
|
@@ -132,16 +143,16 @@ const SwirlImageGridItem = class {
|
|
|
132
143
|
"image-grid-item--has-error": this.error,
|
|
133
144
|
"image-grid-item--has-overlay": this.overlay,
|
|
134
145
|
});
|
|
135
|
-
return (index.h(index.Host, { key: '
|
|
146
|
+
return (index.h(index.Host, { key: 'e4eb2be265d838cddced2108c1b75a240b1400e9', "data-sibling-count": siblingCount, role: "listitem" }, index.h(Tag, { key: '008dffd8c7773f259de22d9028e0c2e078f8be2f', class: className, type: this.interactive ? "button" : undefined }, index.h("div", { key: '9fc0c346e2af3ad14ecc213d5e3c6e6f49aa195d', class: "image-grid-item__background", style: {
|
|
136
147
|
backgroundImage: showBlurredBackground
|
|
137
148
|
? `url(${this.computedSrc})`
|
|
138
149
|
: undefined,
|
|
139
150
|
} }), this.loading !== "intersecting" ||
|
|
140
151
|
this.inViewport ||
|
|
141
|
-
this.gifPaused ? (index.h("img", { alt: this.alt, class: "image-grid-item__image", loading: this.loading !== "intersecting" ? this.loading : undefined,
|
|
152
|
+
this.gifPaused ? (index.h("img", { alt: this.alt, class: "image-grid-item__image", loading: this.loading !== "intersecting" ? this.loading : undefined, ref: this.onImageElementUpdate, src: this.computedSrc })) : (index.h("div", { class: "image-grid-item__loading-placeholder" })), this.showGifControls && (index.h("swirl-stack", { key: '1b23ab0aa255e665a82ba90cb7d96a6576d2d685', class: "image-grid-item__gif-controls", orientation: "horizontal", spacing: "4" }, index.h("button", { key: 'f6c56c8da07bbf1d19391b741b7d434b6c7b2972', class: "image-grid-item__gif-controls__icon image-grid-item__gif-controls__icon--button", onClick: this.handleControlClick, type: "button", "aria-label": this.gifPaused ? this.gifPlayLabel : this.gifPauseLabel }, this.gifPaused ? (index.h("swirl-icon-play-arrow", { size: 20 })) : (index.h("swirl-icon-pause", { size: 20 }))), index.h("div", { key: '4acb33cd6af6e5ee61bab268cdea740b247bef30', class: "image-grid-item__gif-controls__icon image-grid-item__gif-controls__icon--label" }, index.h("swirl-icon-gif", { key: 'e3ea89bf918b1fdf754bb81536ba389730788a4f', size: 20 })))), this.loaded &&
|
|
142
153
|
!this.error &&
|
|
143
154
|
this.icon &&
|
|
144
|
-
!Boolean(this.overlay) && (index.h("div", { key: '
|
|
155
|
+
!Boolean(this.overlay) && (index.h("div", { key: 'd3696b2335bad01ffd36c0aaddd2dedf71a8f7fa', class: "image-grid-item__icon", innerHTML: this.icon })), this.overlay && (index.h("div", { key: '0cdacacd44ff79c1043e605e62b31da990a11ea0', class: "image-grid-item__overlay" }, this.overlay)), !this.loaded && (index.h("div", { key: '2107c59c6d08c54a9ae7489602b62655e7f8d879', class: "image-grid-item__spinner" }, index.h("swirl-spinner", { key: '9d26ca3e44db026a02b0a331bf4fb9b563e99d1c' }))), this.loaded && this.error && (index.h("div", { key: '75d83a68fdb8721c11e1a81059da66421408d25a', class: "image-grid-item__error" }, index.h("swirl-icon-error", { key: '454d1fb81c377b3d6c6291c77d479aada8b04b70', color: "critical" }))))));
|
|
145
156
|
}
|
|
146
157
|
get el() { return index.getElement(this); }
|
|
147
158
|
static get watchers() { return {
|
|
@@ -8,10 +8,23 @@ export class SwirlAppIcon {
|
|
|
8
8
|
this.setImageUnavailable = () => {
|
|
9
9
|
this.imageAvailable = false;
|
|
10
10
|
};
|
|
11
|
+
this.onImageElementUpdate = (el) => {
|
|
12
|
+
this.imgEl?.removeEventListener("load", this.setImageAvailable);
|
|
13
|
+
this.imgEl?.removeEventListener("error", this.setImageUnavailable);
|
|
14
|
+
this.imgEl = el;
|
|
15
|
+
if (this.imgEl) {
|
|
16
|
+
this.imgEl.addEventListener("load", this.setImageAvailable);
|
|
17
|
+
this.imgEl.addEventListener("error", this.setImageUnavailable);
|
|
18
|
+
}
|
|
19
|
+
};
|
|
11
20
|
this.icon = undefined;
|
|
12
21
|
this.src = undefined;
|
|
13
22
|
this.imageAvailable = undefined;
|
|
14
23
|
}
|
|
24
|
+
disconnectedCallback() {
|
|
25
|
+
this.imgEl?.removeEventListener("load", this.setImageAvailable);
|
|
26
|
+
this.imgEl?.removeEventListener("error", this.setImageUnavailable);
|
|
27
|
+
}
|
|
15
28
|
render() {
|
|
16
29
|
const showImage = Boolean(this.src) &&
|
|
17
30
|
(this.imageAvailable || this.imageAvailable === undefined);
|
|
@@ -20,7 +33,7 @@ export class SwirlAppIcon {
|
|
|
20
33
|
const className = classnames("app-icon", {
|
|
21
34
|
"app-icon--has-icon": showIcon || showFallbackIcon,
|
|
22
35
|
});
|
|
23
|
-
return (h(Host, { key: '
|
|
36
|
+
return (h(Host, { key: '4c903c83af417365577fa87cf0aa4311c5a88b4d' }, h("span", { key: 'fe288c3715c20fa504329100d08faa2027723204', class: className }, showImage && (h("img", { key: '7e6ed8864f1551bcfed28911010f952b67659e74', alt: "", height: "256", ref: this.onImageElementUpdate, src: this.src, width: "256" })), showIcon && (h("span", { key: 'ac54a7dbb1b26d035a9b24c63667c21d9b37fec7', class: "app-icon__icon", innerHTML: this.icon })))));
|
|
24
37
|
}
|
|
25
38
|
static get is() { return "swirl-app-icon"; }
|
|
26
39
|
static get encapsulation() { return "shadow"; }
|
|
@@ -16,6 +16,15 @@ const swirlAvatarSizeMappings = {
|
|
|
16
16
|
export class SwirlAvatar {
|
|
17
17
|
constructor() {
|
|
18
18
|
this.componentLoaded = false;
|
|
19
|
+
this.onImageElementUpdate = (el) => {
|
|
20
|
+
this.imgEl?.removeEventListener("load", this.setImageAvailable);
|
|
21
|
+
this.imgEl?.removeEventListener("error", this.setImageUnavailable);
|
|
22
|
+
this.imgEl = el;
|
|
23
|
+
if (this.imgEl) {
|
|
24
|
+
this.imgEl.addEventListener("load", this.setImageAvailable);
|
|
25
|
+
this.imgEl.addEventListener("error", this.setImageUnavailable);
|
|
26
|
+
}
|
|
27
|
+
};
|
|
19
28
|
this.setImageAvailable = () => {
|
|
20
29
|
this.imageAvailable = true;
|
|
21
30
|
this.loadingError = false;
|
|
@@ -76,6 +85,8 @@ export class SwirlAvatar {
|
|
|
76
85
|
}
|
|
77
86
|
disconnectedCallback() {
|
|
78
87
|
this.intersectionObserver?.disconnect();
|
|
88
|
+
this.imgEl?.removeEventListener("load", this.setImageAvailable);
|
|
89
|
+
this.imgEl?.removeEventListener("error", this.setImageUnavailable);
|
|
79
90
|
}
|
|
80
91
|
watchSrcProp() {
|
|
81
92
|
this.imageAvailable = undefined;
|
|
@@ -109,7 +120,7 @@ export class SwirlAvatar {
|
|
|
109
120
|
});
|
|
110
121
|
const badgeClassName = classnames("avatar__badge", `avatar__badge--position-${this.badgePosition}`);
|
|
111
122
|
const toolClassName = classnames("avatar__tool", `avatar__tool--position-${this.toolPosition}`);
|
|
112
|
-
return (h(Host, { key: '
|
|
123
|
+
return (h(Host, { key: '3c36f09dcdb6b1f6f56e3dbfb7a673e77b3ef6f9', "aria-label": this.interactive ? this.label : undefined, onKeydown: this.interactive ? this.onKeydown : undefined, onKeyup: this.interactive ? this.onKeyup : undefined, role: role, tabIndex: this.interactive ? 0 : undefined }, h("span", { key: '21057a05d374a8803a8c28b9a5ff133146a5806f', class: className, part: "avatar" }, showImage && (h("span", { key: '99c45973ba401b828bb140a5d61bfd9929340033', class: "avatar__image" }, h("img", { key: '95ad28f353923ceb60205f36086784c733ef461b', alt: "", height: swirlAvatarSizeMappings[this.size], loading: this.loading !== "intersecting" ? this.loading : undefined, ref: this.onImageElementUpdate, src: this.src, width: swirlAvatarSizeMappings[this.size] }))), showInitials && (h("span", { key: '66de0845df06e63d53d6dc86223aff7da3a46bb7', class: "avatar__initials" }, h("span", { key: '28ca37f08266223e3ecfa461eb4c100a4b3adc41' }, this.initials))), showIcon && h("span", { key: '404230c35d5a1272ef94ae82a56391832904183f', class: "avatar__icon", innerHTML: this.icon }), showFallbackIcon && (h("span", { key: '90677bfa3d90d817357ced9087ccadf18644ff10', class: "avatar__icon" }, h("swirl-icon-person", { key: 'ddc8abcba3e8679aa16786cde144ce1fc2238460' }))), showBadge && (h("span", { key: '49a10edded6458c1eba7590e355a77e9d35e921f', class: badgeClassName, innerHTML: this.badge })), h("span", { key: '267f7ed319a57f571bf0d5d9b26877ce8ac69e9c', class: toolClassName }, h("slot", { key: '07f809b1dd6d911428daaddb626f75b7cf6ec40a', name: "tool" }))), this.showLabel && (h("span", { key: '5bfdcf03b6afedc2778009c898a3cde10c1959b3', "aria-hidden": true, class: "avatar__label" }, this.label))));
|
|
113
124
|
}
|
|
114
125
|
static get is() { return "swirl-avatar"; }
|
|
115
126
|
static get encapsulation() { return "shadow"; }
|
|
@@ -148,6 +148,15 @@ export class SwirlFileViewerImage {
|
|
|
148
148
|
this.endPan = () => {
|
|
149
149
|
this.panning = false;
|
|
150
150
|
};
|
|
151
|
+
this.onImageElementUpdate = (el) => {
|
|
152
|
+
this.imageEl?.removeEventListener("load", this.onLoad);
|
|
153
|
+
this.imageEl?.removeEventListener("error", this.onError);
|
|
154
|
+
this.imageEl = el;
|
|
155
|
+
if (this.imageEl) {
|
|
156
|
+
this.imageEl.addEventListener("load", this.onLoad);
|
|
157
|
+
this.imageEl.addEventListener("error", this.onError);
|
|
158
|
+
}
|
|
159
|
+
};
|
|
151
160
|
this.description = "";
|
|
152
161
|
this.errorMessage = "File could not be loaded.";
|
|
153
162
|
this.file = undefined;
|
|
@@ -158,6 +167,10 @@ export class SwirlFileViewerImage {
|
|
|
158
167
|
componentDidLoad() {
|
|
159
168
|
this.activate.emit(this.el);
|
|
160
169
|
}
|
|
170
|
+
disconnectedCallback() {
|
|
171
|
+
this.imageEl?.removeEventListener("load", this.onLoad);
|
|
172
|
+
this.imageEl?.removeEventListener("error", this.onError);
|
|
173
|
+
}
|
|
161
174
|
watchFile() {
|
|
162
175
|
this.error = false;
|
|
163
176
|
this.loading = true;
|
|
@@ -177,7 +190,7 @@ export class SwirlFileViewerImage {
|
|
|
177
190
|
return this.updateZoomAndPan(1);
|
|
178
191
|
}
|
|
179
192
|
render() {
|
|
180
|
-
return (h(Host, { key: '
|
|
193
|
+
return (h(Host, { key: 'dee1710566cedea2b677f25cf816d879a9de66f4', class: "file-viewer-image", onDblClick: this.onDblClick, onWheel: this.onWheel, onPointerDown: this.onPointerDown, onPointerMove: this.onPointerMove, onPointerUp: this.onPointerUp, onTouchStart: this.onTouchStart, onTouchMove: this.onTouchMove, onTouchEnd: this.onTouchEnd }, this.error && (h("swirl-inline-error", { key: 'd29984d319144f8d4ff276a9f5502e14e6b0fdaf', class: "file-viewer-image__error", message: this.errorMessage })), h("img", { key: 'd303129a6ba1f537c02b39b3fd0dfa63b82c85f3', alt: this.description, class: "file-viewer-image__image", ref: this.onImageElementUpdate, src: this.file }), this.loading && (h("div", { key: 'd96bf98483c7e71bfeca5636547b2bddbe7463fe', class: "file-viewer-image__spinner" }, h("swirl-spinner", { key: 'a6cf23493fc08e24cfd0e4c5cd2e42f06866a3b4' })))));
|
|
181
194
|
}
|
|
182
195
|
static get is() { return "swirl-file-viewer-image"; }
|
|
183
196
|
static get encapsulation() { return "shadow"; }
|
|
@@ -26,6 +26,15 @@ export class SwirlImageGridItem {
|
|
|
26
26
|
event.stopImmediatePropagation();
|
|
27
27
|
this.gifPaused ? this.playGif() : this.pauseGif();
|
|
28
28
|
};
|
|
29
|
+
this.onImageElementUpdate = (el) => {
|
|
30
|
+
this.img?.removeEventListener("load", this.onLoad);
|
|
31
|
+
this.img?.removeEventListener("error", this.onError);
|
|
32
|
+
this.img = el;
|
|
33
|
+
if (this.img) {
|
|
34
|
+
this.img.addEventListener("load", this.onLoad);
|
|
35
|
+
this.img.addEventListener("error", this.onError);
|
|
36
|
+
}
|
|
37
|
+
};
|
|
29
38
|
this.alt = undefined;
|
|
30
39
|
this.gifPauseLabel = "Pause GIF playback";
|
|
31
40
|
this.gifPlayLabel = "Continue GIF playback";
|
|
@@ -76,6 +85,8 @@ export class SwirlImageGridItem {
|
|
|
76
85
|
disconnectedCallback() {
|
|
77
86
|
this.intersectionObserver?.disconnect();
|
|
78
87
|
this.computedSrc = "";
|
|
88
|
+
this.img?.removeEventListener("load", this.onLoad);
|
|
89
|
+
this.img?.removeEventListener("error", this.onError);
|
|
79
90
|
}
|
|
80
91
|
setupIntersectionObserver() {
|
|
81
92
|
if (this.loading !== "intersecting") {
|
|
@@ -119,16 +130,16 @@ export class SwirlImageGridItem {
|
|
|
119
130
|
"image-grid-item--has-error": this.error,
|
|
120
131
|
"image-grid-item--has-overlay": this.overlay,
|
|
121
132
|
});
|
|
122
|
-
return (h(Host, { key: '
|
|
133
|
+
return (h(Host, { key: 'e4eb2be265d838cddced2108c1b75a240b1400e9', "data-sibling-count": siblingCount, role: "listitem" }, h(Tag, { key: '008dffd8c7773f259de22d9028e0c2e078f8be2f', class: className, type: this.interactive ? "button" : undefined }, h("div", { key: '9fc0c346e2af3ad14ecc213d5e3c6e6f49aa195d', class: "image-grid-item__background", style: {
|
|
123
134
|
backgroundImage: showBlurredBackground
|
|
124
135
|
? `url(${this.computedSrc})`
|
|
125
136
|
: undefined,
|
|
126
137
|
} }), this.loading !== "intersecting" ||
|
|
127
138
|
this.inViewport ||
|
|
128
|
-
this.gifPaused ? (h("img", { alt: this.alt, class: "image-grid-item__image", loading: this.loading !== "intersecting" ? this.loading : undefined,
|
|
139
|
+
this.gifPaused ? (h("img", { alt: this.alt, class: "image-grid-item__image", loading: this.loading !== "intersecting" ? this.loading : undefined, ref: this.onImageElementUpdate, src: this.computedSrc })) : (h("div", { class: "image-grid-item__loading-placeholder" })), this.showGifControls && (h("swirl-stack", { key: '1b23ab0aa255e665a82ba90cb7d96a6576d2d685', class: "image-grid-item__gif-controls", orientation: "horizontal", spacing: "4" }, h("button", { key: 'f6c56c8da07bbf1d19391b741b7d434b6c7b2972', class: "image-grid-item__gif-controls__icon image-grid-item__gif-controls__icon--button", onClick: this.handleControlClick, type: "button", "aria-label": this.gifPaused ? this.gifPlayLabel : this.gifPauseLabel }, this.gifPaused ? (h("swirl-icon-play-arrow", { size: 20 })) : (h("swirl-icon-pause", { size: 20 }))), h("div", { key: '4acb33cd6af6e5ee61bab268cdea740b247bef30', class: "image-grid-item__gif-controls__icon image-grid-item__gif-controls__icon--label" }, h("swirl-icon-gif", { key: 'e3ea89bf918b1fdf754bb81536ba389730788a4f', size: 20 })))), this.loaded &&
|
|
129
140
|
!this.error &&
|
|
130
141
|
this.icon &&
|
|
131
|
-
!Boolean(this.overlay) && (h("div", { key: '
|
|
142
|
+
!Boolean(this.overlay) && (h("div", { key: 'd3696b2335bad01ffd36c0aaddd2dedf71a8f7fa', class: "image-grid-item__icon", innerHTML: this.icon })), this.overlay && (h("div", { key: '0cdacacd44ff79c1043e605e62b31da990a11ea0', class: "image-grid-item__overlay" }, this.overlay)), !this.loaded && (h("div", { key: '2107c59c6d08c54a9ae7489602b62655e7f8d879', class: "image-grid-item__spinner" }, h("swirl-spinner", { key: '9d26ca3e44db026a02b0a331bf4fb9b563e99d1c' }))), this.loaded && this.error && (h("div", { key: '75d83a68fdb8721c11e1a81059da66421408d25a', class: "image-grid-item__error" }, h("swirl-icon-error", { key: '454d1fb81c377b3d6c6291c77d479aada8b04b70', color: "critical" }))))));
|
|
132
143
|
}
|
|
133
144
|
static get is() { return "swirl-image-grid-item"; }
|
|
134
145
|
static get encapsulation() { return "shadow"; }
|