ion-img.entry.js 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
  1. /*!
  2. * (C) Ionic http://ionicframework.com - MIT License
  3. */
  4. import { r as registerInstance, c as createEvent, h, e as Host, f as getElement } from './index-527b9e34.js';
  5. import { h as inheritAttributes } from './helpers-d94bc8ad.js';
  6. import { b as getIonMode } from './ionic-global-b26f573e.js';
  7. import './index-cfd9c1f2.js';
  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. const IonImgStyle0 = imgCss;
  10. const Img = class {
  11. constructor(hostRef) {
  12. registerInstance(this, hostRef);
  13. this.ionImgWillLoad = createEvent(this, "ionImgWillLoad", 7);
  14. this.ionImgDidLoad = createEvent(this, "ionImgDidLoad", 7);
  15. this.ionError = createEvent(this, "ionError", 7);
  16. this.inheritedAttributes = {};
  17. this.onLoad = () => {
  18. this.ionImgDidLoad.emit();
  19. };
  20. this.onError = () => {
  21. this.ionError.emit();
  22. };
  23. this.loadSrc = undefined;
  24. this.loadError = undefined;
  25. this.alt = undefined;
  26. this.src = undefined;
  27. }
  28. srcChanged() {
  29. this.addIO();
  30. }
  31. componentWillLoad() {
  32. this.inheritedAttributes = inheritAttributes(this.el, ['draggable']);
  33. }
  34. componentDidLoad() {
  35. this.addIO();
  36. }
  37. addIO() {
  38. if (this.src === undefined) {
  39. return;
  40. }
  41. if (typeof window !== 'undefined' &&
  42. 'IntersectionObserver' in window &&
  43. 'IntersectionObserverEntry' in window &&
  44. 'isIntersecting' in window.IntersectionObserverEntry.prototype) {
  45. this.removeIO();
  46. this.io = new IntersectionObserver((data) => {
  47. /**
  48. * On slower devices, it is possible for an intersection observer entry to contain multiple
  49. * objects in the array. This happens when quickly scrolling an image into view and then out of
  50. * view. In this case, the last object represents the current state of the component.
  51. */
  52. if (data[data.length - 1].isIntersecting) {
  53. this.load();
  54. this.removeIO();
  55. }
  56. });
  57. this.io.observe(this.el);
  58. }
  59. else {
  60. // fall back to setTimeout for Safari and IE
  61. setTimeout(() => this.load(), 200);
  62. }
  63. }
  64. load() {
  65. this.loadError = this.onError;
  66. this.loadSrc = this.src;
  67. this.ionImgWillLoad.emit();
  68. }
  69. removeIO() {
  70. if (this.io) {
  71. this.io.disconnect();
  72. this.io = undefined;
  73. }
  74. }
  75. render() {
  76. const { loadSrc, alt, onLoad, loadError, inheritedAttributes } = this;
  77. const { draggable } = inheritedAttributes;
  78. return (h(Host, { key: 'da600442894427dee1974a28e545613afac69fca', class: getIonMode(this) }, h("img", { key: '16df0c7069af86c0fa7ce5af598bc0f63b4eb71a', decoding: "async", src: loadSrc, alt: alt, onLoad: onLoad, onError: loadError, part: "image", draggable: isDraggable(draggable) })));
  79. }
  80. get el() { return getElement(this); }
  81. static get watchers() { return {
  82. "src": ["srcChanged"]
  83. }; }
  84. };
  85. /**
  86. * Enumerated strings must be set as booleans
  87. * as Stencil will not render 'false' in the DOM.
  88. * The need to explicitly render draggable="true"
  89. * as only certain elements are draggable by default.
  90. * https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/draggable.
  91. */
  92. const isDraggable = (draggable) => {
  93. switch (draggable) {
  94. case 'true':
  95. return true;
  96. case 'false':
  97. return false;
  98. default:
  99. return undefined;
  100. }
  101. };
  102. Img.style = IonImgStyle0;
  103. export { Img as ion_img };