quarkd/lib/image/index.js

Mobile UI Components built on Web Components.

import{_ as e,a as t}from"../typeof.js";import{_ as i,a as r,b as n,c as o,H as s,d as a,N as l,O as h,B as c}from"../index2.js";import{_ as u}from"../defineProperty.js";import{i as d,t as f,a as v}from"../public.js";import{Local as g}from"../locale/index.js";var p={rootMargin:"0px",threshold:0},m=/scroll|auto/i,y=d?window:void 0,b=["scroll","wheel","mousewheel","resize","animationend","transitionend","touchmove","touchend"],w=new(function(){function i(){e(this,i),u(this,"mode",""),u(this,"listeners",[]),u(this,"listenEvents",b),this.setMode(this.supportIntersection()?"observer":"event")}return t(i,[{key:"supportIntersection",value:function(){return!!(d&&"IntersectionObserver"in window&&"IntersectionObserverEntry"in window&&"intersectionRatio"in window.IntersectionObserverEntry.prototype)}},{key:"initIntersection",value:function(){this.observer=new IntersectionObserver(this.observerCallback.bind(this),p)}},{key:"initEventTarget",value:function(){d&&this.addListenerTarget(window)}},{key:"addListenerTarget",value:function(e){var t=this;e&&this.listenEvents.forEach((function(i){e.addEventListener(i,f(t.eventCallback.bind(t,i),200))}))}},{key:"setMode",value:function(e){this.mode=e,"observer"===e?this.initIntersection():this.initEventTarget()}},{key:"observerCallback",value:function(e){var t=this;e.forEach((function(e){e.isIntersecting&&t.listeners.forEach((function(i){if(i.el===e.target)return i.load(),t.remove(i.el)}))}))}},{key:"eventCallback",value:function(e){var t=this;setTimeout((function(){t.listeners&&0!==t.listeners.length&&t.listeners.forEach((function(e){if(t.checkVisible(e.el))return e.load(),t.remove(e.el)}))}))}},{key:"checkVisible",value:function(e){var t=e.getBoundingClientRect();return t.top<1.3*window.innerHeight&&t.bottom>0&&t.left<1.3*window.innerWidth&&t.right>0}},{key:"isElement",value:function(e){return"HTML"!==e.tagName&&"BODY"!==e.tagName&&1===e.nodeType}},{key:"getScrollParent",value:function(e){for(var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:y,i=e;i&&i!==t&&this.isElement(i);){var r=window.getComputedStyle(i),n=r.overflowY;if(m.test(n))return i;i=i.parentNode}return t}},{key:"add",value:function(e,t,i){var r={el:e,load:function(){e.src=t}};"observer"===this.mode&&this.observer?(this.observer&&this.observer.observe(e),this.listeners.push(r)):(i&&this.addListenerTarget(i),this.checkVisible(e)?r.load():this.listeners.push(r))}},{key:"remove",value:function(e){if("observer"===this.mode&&this.observer&&this.observer.unobserve(e),this.listeners&&0!==this.listeners.length){var t=this.listeners.findIndex((function(t){return t.el===e}));t>=0&&this.listeners.splice(t,1)}}},{key:"uninstall",value:function(){"observer"===this.mode&&this.observer&&this.observer.disconnect()}}]),i}());function k(e,t){var i=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),i.push.apply(i,r)}return i}function A(e){for(var t=1;t<arguments.length;t++){var i=null!=arguments[t]?arguments[t]:{};t%2?k(Object(i),!0).forEach((function(t){u(e,t,i[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(i)):k(Object(i)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(i,t))}))}return e}function O(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var n,o=i(e);if(t){var s=i(this).constructor;n=Reflect.construct(o,arguments,s)}else n=o.apply(this,arguments);return r(this,n)}}var E=function(i){n(a,s);var r=O(a);function a(){var t;e(this,a);for(var i=arguments.length,n=new Array(i),s=0;s<i;s++)n[s]=arguments[s];return t=r.call.apply(r,[this].concat(n)),u(o(t),"src",""),u(o(t),"lazy",!1),u(o(t),"alt",""),u(o(t),"width",""),u(o(t),"height",""),u(o(t),"round",!1),u(o(t),"fit","fill"),u(o(t),"radius",""),u(o(t),"lazyTarget",null),u(o(t),"status","loading"),u(o(t),"imgRef",null),u(o(t),"handleLoad",(function(){t.status="loaded",t.$emit("load")})),u(o(t),"handleError",(function(){t.status="error",t.$emit("error")})),t}return t(a,[{key:"componentDidMount",value:function(){this.shadowRoot&&(this.imgRef=this.shadowRoot.getElementById("quark-img"),this.imgRef&&(this.lazy?(this.lazyTarget=w,this.imgRef.src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWP4////fwAJ+wP9CNHoHgAAAABJRU5ErkJggg==",this.lazyTarget.add(this.imgRef,this.src)):this.imgRef.src=this.src))}},{key:"render",value:function(){var e=this.alt?{alt:this.alt}:{},t=A({class:"quark-image-img",style:{width:v(this.width),height:v(this.height),"object-fit":this.fit,"border-radius":this.round?"50%":this.radius?1:0}},e);return s.h("div",{class:"quark-image",part:"root"},"error"===this.status&&s.h("div",{class:"quark-image-loading",part:"loading"},s.h("slot",{name:"error"},g.current.image.loadError)),"loading"===this.status&&s.h("div",{class:"quark-image-loading",part:"loading"},s.h("slot",{name:"loading"},g.current.loading)),s.h("img",A(A({id:"quark-img",part:"img"},t),{},{onload:this.handleLoad,onerror:this.handleError})))}}]),a}();a([l()],E.prototype,"src",void 0),a([l({type:Boolean})],E.prototype,"lazy",void 0),a([l()],E.prototype,"alt",void 0),a([l()],E.prototype,"width",void 0),a([l()],E.prototype,"height",void 0),a([l({type:Boolean})],E.prototype,"round",void 0),a([l()],E.prototype,"fit",void 0),a([l()],E.prototype,"radius",void 0),a([h()],E.prototype,"status",void 0);var j=E=a([c({tag:"quark-image",style:":host {\n  display: inline-block;\n}\n\n:host .quark-image {\n  position: relative;\n  height: var(--image-height, 100%);\n  width: var(--image-height, 100%);\n}\n\n:host .quark-image-img {\n  height: var(--image-height, 100%);\n  width: var(--image-height, 100%);\n  display: block;\n}\n\n:host .quark-image-loading {\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  color: #969799;\n  font-size: 3.73333vw;\n  background: #f7f8fa;\n  width: 100%;\n  height: 100%;\n}\n"})],E);export{j as default};