ion-img.cjs.entry.js 3.8 KB

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