78 lines
2.5 KiB
JavaScript
Executable file
78 lines
2.5 KiB
JavaScript
Executable file
import { attachShadow, createEvent, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
|
|
import { b as getIonMode } from './ionic-global.js';
|
|
|
|
const imgCss = ":host{display:block;-o-object-fit:contain;object-fit:contain}img{display:block;width:100%;height:100%;-o-object-fit:inherit;object-fit:inherit;-o-object-position:inherit;object-position:inherit}";
|
|
|
|
const Img = class extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
this.__registerHost();
|
|
attachShadow(this);
|
|
this.ionImgWillLoad = createEvent(this, "ionImgWillLoad", 7);
|
|
this.ionImgDidLoad = createEvent(this, "ionImgDidLoad", 7);
|
|
this.ionError = createEvent(this, "ionError", 7);
|
|
this.onLoad = () => {
|
|
this.ionImgDidLoad.emit();
|
|
};
|
|
this.onError = () => {
|
|
this.ionError.emit();
|
|
};
|
|
}
|
|
srcChanged() {
|
|
this.addIO();
|
|
}
|
|
componentDidLoad() {
|
|
this.addIO();
|
|
}
|
|
addIO() {
|
|
if (this.src === undefined) {
|
|
return;
|
|
}
|
|
if (typeof window !== 'undefined' &&
|
|
'IntersectionObserver' in window &&
|
|
'IntersectionObserverEntry' in window &&
|
|
'isIntersecting' in window.IntersectionObserverEntry.prototype) {
|
|
this.removeIO();
|
|
this.io = new IntersectionObserver(data => {
|
|
/**
|
|
* On slower devices, it is possible for an intersection observer entry to contain multiple
|
|
* objects in the array. This happens when quickly scrolling an image into view and then out of
|
|
* view. In this case, the last object represents the current state of the component.
|
|
*/
|
|
if (data[data.length - 1].isIntersecting) {
|
|
this.load();
|
|
this.removeIO();
|
|
}
|
|
});
|
|
this.io.observe(this.el);
|
|
}
|
|
else {
|
|
// fall back to setTimeout for Safari and IE
|
|
setTimeout(() => this.load(), 200);
|
|
}
|
|
}
|
|
load() {
|
|
this.loadError = this.onError;
|
|
this.loadSrc = this.src;
|
|
this.ionImgWillLoad.emit();
|
|
}
|
|
removeIO() {
|
|
if (this.io) {
|
|
this.io.disconnect();
|
|
this.io = undefined;
|
|
}
|
|
}
|
|
render() {
|
|
return (h(Host, { class: getIonMode(this) }, h("img", { decoding: "async", src: this.loadSrc, alt: this.alt, onLoad: this.onLoad, onError: this.loadError, part: "image" })));
|
|
}
|
|
get el() { return this; }
|
|
static get watchers() { return {
|
|
"src": ["srcChanged"]
|
|
}; }
|
|
static get style() { return imgCss; }
|
|
};
|
|
|
|
const IonImg = /*@__PURE__*/proxyCustomElement(Img, [1,"ion-img",{"alt":[1],"src":[1],"loadSrc":[32],"loadError":[32]}]);
|
|
|
|
export { IonImg };
|