| 1 | 'use strict';
|
| 2 |
|
| 3 | Object.defineProperty(exports, '__esModule', { value: true });
|
| 4 |
|
| 5 | const index = require('./index-dd4b7ba3.js');
|
| 6 | const index$1 = require('./index-dffbd352.js');
|
| 7 |
|
| 8 | const indexCss = "img[src=\"\"]{opacity:0}taro-image-core{display:inline-block;overflow:hidden;position:relative;width:auto;height:auto;font-size:0}.taro-img.taro-img__widthfix{height:100%}.taro-img__mode-scaletofill{width:100%;height:100%}.taro-img__mode-aspectfit{max-width:100%;max-height:100%}.taro-img__mode-aspectfill{position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}.taro-img__mode-aspectfill--width{min-width:100%;height:100%}.taro-img__mode-aspectfill--height{width:100%;min-height:100%}.taro-img__mode-widthfix{width:100%}.taro-img__mode-heightfix{height:100%}.taro-img__mode-top{width:100%}.taro-img__mode-bottom{position:absolute;bottom:0;width:100%}.taro-img__mode-left{height:100%}.taro-img__mode-right{position:absolute;right:0;height:100%}.taro-img__mode-topright{position:absolute;right:0}.taro-img__mode-bottomleft{position:absolute;bottom:0}.taro-img__mode-bottomright{position:absolute;right:0;bottom:0}";
|
| 9 |
|
| 10 | Promise.resolve().then(function () { return require('./intersection-observer-dc4cfcef.js'); });
|
| 11 | let Image = class {
|
| 12 | constructor(hostRef) {
|
| 13 | index.registerInstance(this, hostRef);
|
| 14 | this.onLoad = index.createEvent(this, "load", 7);
|
| 15 | this.onError = index.createEvent(this, "error", 7);
|
| 16 | this.mode = 'scaleToFill';
|
| 17 | this.lazyLoad = false;
|
| 18 | this.nativeProps = {};
|
| 19 | this.aspectFillMode = 'width';
|
| 20 | }
|
| 21 | componentDidLoad() {
|
| 22 | if (!this.lazyLoad)
|
| 23 | return;
|
| 24 | const lazyImg = new IntersectionObserver(entries => {
|
| 25 |
|
| 26 | if (entries[entries.length - 1].isIntersecting) {
|
| 27 | lazyImg.unobserve(this.imgRef);
|
| 28 | this.imgRef.src = this.src;
|
| 29 | }
|
| 30 | }, {
|
| 31 | rootMargin: '300px 0px'
|
| 32 | });
|
| 33 | lazyImg.observe(this.imgRef);
|
| 34 | }
|
| 35 | imageOnLoad() {
|
| 36 | const { width, height, naturalWidth, naturalHeight } = this.imgRef;
|
| 37 | this.onLoad.emit({
|
| 38 | width,
|
| 39 | height
|
| 40 | });
|
| 41 | this.aspectFillMode = naturalWidth > naturalHeight ? 'width' : 'height';
|
| 42 | }
|
| 43 | imageOnError() {
|
| 44 | this.onError.emit();
|
| 45 | }
|
| 46 | render() {
|
| 47 | const { src, mode = 'scaleToFill', lazyLoad = false, aspectFillMode = 'width', imageOnLoad, imageOnError, nativeProps } = this;
|
| 48 | const cls = index$1.classnames({
|
| 49 | 'taro-img__widthfix': mode === 'widthFix'
|
| 50 | });
|
| 51 | const imgCls = index$1.classnames(`taro-img__mode-${mode.toLowerCase().replace(/\s/g, '')}`, {
|
| 52 | [`taro-img__mode-aspectfill--${aspectFillMode}`]: mode === 'aspectFill'
|
| 53 | });
|
| 54 | return (index.h(index.Host, { class: cls }, lazyLoad ? (index.h("img", Object.assign({ ref: img => (this.imgRef = img), class: imgCls, onLoad: imageOnLoad.bind(this), onError: imageOnError.bind(this) }, nativeProps))) : (index.h("img", Object.assign({ ref: img => (this.imgRef = img), class: imgCls, src: src, onLoad: imageOnLoad.bind(this), onError: imageOnError.bind(this) }, nativeProps)))));
|
| 55 | }
|
| 56 | };
|
| 57 | Image.style = indexCss;
|
| 58 |
|
| 59 | exports.taro_image_core = Image;
|