1 |
|
2 |
|
3 |
|
4 | import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
|
5 | import { b as getIonMode } from './ionic-global.js';
|
6 | import { i as inheritAttributes } from './helpers.js';
|
7 |
|
8 | 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}";
|
9 |
|
10 | const Img = proxyCustomElement(class extends HTMLElement {
|
11 | constructor() {
|
12 | super();
|
13 | this.__registerHost();
|
14 | this.__attachShadow();
|
15 | this.ionImgWillLoad = createEvent(this, "ionImgWillLoad", 7);
|
16 | this.ionImgDidLoad = createEvent(this, "ionImgDidLoad", 7);
|
17 | this.ionError = createEvent(this, "ionError", 7);
|
18 | this.inheritedAttributes = {};
|
19 | this.onLoad = () => {
|
20 | this.ionImgDidLoad.emit();
|
21 | };
|
22 | this.onError = () => {
|
23 | this.ionError.emit();
|
24 | };
|
25 | }
|
26 | srcChanged() {
|
27 | this.addIO();
|
28 | }
|
29 | componentWillLoad() {
|
30 | this.inheritedAttributes = inheritAttributes(this.el, ['draggable']);
|
31 | }
|
32 | componentDidLoad() {
|
33 | this.addIO();
|
34 | }
|
35 | addIO() {
|
36 | if (this.src === undefined) {
|
37 | return;
|
38 | }
|
39 | if (typeof window !== 'undefined' &&
|
40 | 'IntersectionObserver' in window &&
|
41 | 'IntersectionObserverEntry' in window &&
|
42 | 'isIntersecting' in window.IntersectionObserverEntry.prototype) {
|
43 | this.removeIO();
|
44 | this.io = new IntersectionObserver(data => {
|
45 | |
46 |
|
47 |
|
48 |
|
49 |
|
50 | if (data[data.length - 1].isIntersecting) {
|
51 | this.load();
|
52 | this.removeIO();
|
53 | }
|
54 | });
|
55 | this.io.observe(this.el);
|
56 | }
|
57 | else {
|
58 |
|
59 | setTimeout(() => this.load(), 200);
|
60 | }
|
61 | }
|
62 | load() {
|
63 | this.loadError = this.onError;
|
64 | this.loadSrc = this.src;
|
65 | this.ionImgWillLoad.emit();
|
66 | }
|
67 | removeIO() {
|
68 | if (this.io) {
|
69 | this.io.disconnect();
|
70 | this.io = undefined;
|
71 | }
|
72 | }
|
73 | render() {
|
74 | const { loadSrc, alt, onLoad, loadError, inheritedAttributes } = this;
|
75 | const { draggable } = inheritedAttributes;
|
76 | return (h(Host, { class: getIonMode(this) }, h("img", { decoding: "async", src: loadSrc, alt: alt, onLoad: onLoad, onError: loadError, part: "image", draggable: isDraggable(draggable) })));
|
77 | }
|
78 | get el() { return this; }
|
79 | static get watchers() { return {
|
80 | "src": ["srcChanged"]
|
81 | }; }
|
82 | static get style() { return imgCss; }
|
83 | }, [1, "ion-img", {
|
84 | "alt": [1],
|
85 | "src": [1],
|
86 | "loadSrc": [32],
|
87 | "loadError": [32]
|
88 | }]);
|
89 |
|
90 |
|
91 |
|
92 |
|
93 |
|
94 |
|
95 |
|
96 | const isDraggable = (draggable) => {
|
97 | switch (draggable) {
|
98 | case 'true':
|
99 | return true;
|
100 | case 'false':
|
101 | return false;
|
102 | default:
|
103 | return undefined;
|
104 | }
|
105 | };
|
106 | function defineCustomElement$1() {
|
107 | if (typeof customElements === "undefined") {
|
108 | return;
|
109 | }
|
110 | const components = ["ion-img"];
|
111 | components.forEach(tagName => { switch (tagName) {
|
112 | case "ion-img":
|
113 | if (!customElements.get(tagName)) {
|
114 | customElements.define(tagName, Img);
|
115 | }
|
116 | break;
|
117 | } });
|
118 | }
|
119 |
|
120 | const IonImg = Img;
|
121 | const defineCustomElement = defineCustomElement$1;
|
122 |
|
123 | export { IonImg, defineCustomElement };
|