@square/maker/components/Image/script.js

Maker Design System by Square

!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("../../components/Skeleton"),require("../../components/Theme"),require("../../components/TransitionFadeIn"),require("../../utils/css-validator"),require("lodash/throttle"));else if("function"==typeof define&&define.amd)define(["../../components/Skeleton","../../components/Theme","../../components/TransitionFadeIn","../../utils/css-validator","lodash/throttle"],t);else{var o="object"==typeof exports?t(require("../../components/Skeleton"),require("../../components/Theme"),require("../../components/TransitionFadeIn"),require("../../utils/css-validator"),require("lodash/throttle")):t(e["../../components/Skeleton"],e["../../components/Theme"],e["../../components/TransitionFadeIn"],e["../../utils/css-validator"],e["lodash/throttle"]);for(var s in o)("object"==typeof exports?exports:e)[s]=o[s]}}(this,(function(e,t,o,s,i){return(()=>{var n={89:function(e){e.exports=function(){"use strict";var e=function(e){var t=e.props,o=e.data,s=e.parent,i=function e(t){return Array.isArray(t)?(o=t=>e(t),t.reduce(((e,t)=>e.concat(o(t))),[])):null!==(s=t)&&"object"==typeof s?function(e){let t=[];for(const o in e)e[o]&&t.push(o);return t}(t):"string"==typeof t&&t?[t]:[];var o,s}([o.staticClass,o.class]);if(i){var n,r,a,l=(r=(n=t).body,a=n.document,r?window.document.body:!!a&&window.document.documentElement);if(l){var d=function(e,t){if(!t.length)return;const{classList:o}=e;return t.filter((e=>{if(!o.contains(e))return o.add(e),!0}))}(l,i),c=function(){!function(e,t){if(!t||!t.length)return;let o;for(;o=t.shift();)e.classList.remove(o);e.classList.length||e.removeAttribute("class")}(l,d)};s.$once("hook:beforeUpdate",c),s.$once("hook:destroyed",c)}}},t=Object.prototype.hasOwnProperty,o=function(e,t,o){var s="&"===t[0],i="~"===(t=s?t.slice(1):t)[0],n="!"===(t=i?t.slice(1):t)[0];return{o:e,t:t=n?t.slice(1):t,i:o,u:{once:i,capture:n,passive:s}}},s=function(e){var s,i,n,r=e.props,a=e.listeners,l=e.parent,d=function(e,s){var i,n,r=[];for(var a in s)if(i=s,n=a,t.call(i,n)){var l=s[a],d=o(e,a,l);d.o.addEventListener(d.t,d.i,d.u),r.push(d)}return r}((i=(s=r).body,n=s.document,i?window.document.body:n?window.document:window),a),c=function(){!function(e){for(var t;t=e.shift();)t.o.removeEventListener(t.t,t.i,t.u)}(d)};l.$once("hook:beforeUpdate",c),l.$once("hook:destroyed",c)},i=function(t){s(t),e(t)};return{name:"pseudo-window",functional:!0,props:{document:Boolean,body:Boolean},render:function(e,t){return t.parent._isMounted?i(t):t.parent.$once("hook:mounted",(function(){i(t)})),t.slots().default}}}()},78:t=>{"use strict";t.exports=e},219:e=>{"use strict";e.exports=t},403:e=>{"use strict";e.exports=o},948:e=>{"use strict";e.exports=s},400:e=>{"use strict";e.exports=i}},r={};function a(e){var t=r[e];if(void 0!==t)return t.exports;var o=r[e]={exports:{}};return n[e].call(o.exports,o,o.exports,a),o.exports}a.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return a.d(t,{a:t}),t},a.d=(e,t)=>{for(var o in t)a.o(t,o)&&!a.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},a.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),a.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var l={};return(()=>{"use strict";a.r(l),a.d(l,{MImage:()=>f});var e=a(400),t=a.n(e),o=a(89),s=a.n(o),i=a(403),n=a(78),r=a(219),d=a(948),c=a.n(d);function h(){const e=new WeakMap,t=new IntersectionObserver((t=>{t.forEach((t=>{var o;return null===(o=e.get(t.target))||void 0===o?void 0:o(t)}))}));return{watch(o,s){e.set(o,s),t.observe(o)},unwatch(o){t.unobserve(o),e.delete(o)}}}let u;const p={components:{PseudoWindow:s(),MTransitionFadeIn:i.MTransitionFadeIn,MSkeletonBlock:n.MSkeletonBlock},inject:{theme:{default:(0,r.defaultTheme)(),from:r.MThemeKey}},inheritAttrs:!1,props:{src:{type:String,default:void 0},srcset:{type:String,default:void 0},sizes:{type:String,default:void 0},shape:{type:String,default:void 0,validator:e=>["original","square","circle","arch","hexagon"].includes(e)},lazyload:{type:Boolean,default:!1},objectFit:{type:String,validator:c()("object-fit"),default:"cover"},objectPosition:{type:String,validator:c()("object-position"),default:"center"},shouldDisableTransition:{type:Boolean,default:!1},shouldUseStaticSizeStyles:{type:Boolean,default:!1},alt:{type:String,default:""}},data(){return{shouldLoad:!1,loaded:!1,throttledResizeHandler:t()(this.getImageDimensions,200),height:0,width:0,getImageDimensionsFnAttemptsLeft:20,getImageDimensionsTimeout:void 0}},computed:{...(0,r.resolveThemeableProps)("image",["shape"]),calculatedSrc(){return this.shouldLoad?this.src:""},calculatedSrcSet(){return this.shouldLoad?this.srcset:""},imageWrapperStyles:()=>({"--maker-image-hexagon":"polygon(50% 0, 93.3012701892219% 25%, 93.3012701892219% 75%, 50% 100%, 6.69872981077807% 75%, 6.69872981077807% 25%)"}),style(){const e={"--image-height":"".concat(this.height,"px"),"--image-object-fit":this.objectFit,"--image-object-position":this.objectPosition};return this.shouldUseStaticSizeStyles&&this.height&&this.width&&(e.height="".concat(this.height,"px"),e.width="".concat(this.width,"px")),e},isThumbnail(){return this.width<"150"},shouldGetImageDimensions(){return this.shouldUseStaticSizeStyles||"square"!==this.shape&&"original"!==this.shape}},watch:{src:"load",srcset:"load",shape:{immediate:!0,handler(){!this.shouldGetImageDimensions||this.height&&this.width||this.$nextTick((()=>this.getImageDimensions()))}}},mounted(){var e;((this.loaded||this.shouldDisableTransition)&&this.$emit("image:visible"),this.lazyload)?(null!==(e=u)&&void 0!==e||(u=new h),u.watch(this.$el,(({isIntersecting:e})=>{e&&this.load()}))):this.load();const t=()=>{this.getImageDimensions(),this.getImageDimensionsFnAttemptsLeft-=1,0!==this.getImageDimensionsFnAttemptsLeft&&(this.height&&this.width||(this.getImageDimensionsTimeout=setTimeout(t,100)))};this.shouldGetImageDimensions&&this.$nextTick(t)},beforeDestroy(){var e;null===(e=u)||void 0===e||e.unwatch(this.$el),clearTimeout(this.getImageDimensionsTimeout)},methods:{load(){var e;this.shouldLoad=!0,null===(e=u)||void 0===e||e.unwatch(this.$el)},getImageDimensions(){var e,t;this.height=(null===(e=this.$el)||void 0===e?void 0:e.offsetHeight)||0,this.width=(null===(t=this.$el)||void 0===t?void 0:t.offsetWidth)||0},afterEnter(){this.$emit("image:visible")},onLoaded(){this.loaded=!0,!this.shouldGetImageDimensions||this.height&&this.width||this.$nextTick((()=>this.getImageDimensions()))}}},m={ImageWrapper:"📚19-10-2emJCV",Image:"📚19-10-2j_xX0",thumbnail:"📚19-10-2_7QZj",shape_square:"📚19-10-2NojeF",shape_circle:"📚19-10-2N3kcV",shape_arch:"📚19-10-2_3RYa",shape_hexagon:"📚19-10-2Vd_9P"};const f=function(e,t,o,s,i,n,r,a){var l,d="function"==typeof e?e.options:e;if(t&&(d.render=t,d.staticRenderFns=o,d._compiled=!0),s&&(d.functional=!0),n&&(d._scopeId="data-v-"+n),r?(l=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),i&&i.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(r)},d._ssrRegister=l):i&&(l=a?function(){i.call(this,(d.functional?this.parent:this).$root.$options.shadowRoot)}:i),l)if(d.functional){d._injectStyles=l;var c=d.render;d.render=function(e,t){return l.call(t),c(e,t)}}else{var h=d.beforeCreate;d.beforeCreate=h?[].concat(h,l):[l]}return{exports:e,options:d}}(p,(function(){var e,t,o=this,s=o.$createElement,i=o._self._c||s;return i("div",{class:o.$s.ImageWrapper,style:o.imageWrapperStyles},[o.loaded?o._e():i("m-skeleton-block",{class:[o.$s.Image,o.$s["shape_"+o.resolvedShape]]}),o._v(" "),o.shouldDisableTransition?[i("img",o._g(o._b({directives:[{name:"show",rawName:"v-show",value:o.loaded,expression:"loaded"}],class:(e={},e[o.$s.Image]=!0,e[o.$s["shape_"+o.resolvedShape]]=o.resolvedShape,e[o.$s.thumbnail]=o.isThumbnail,e),style:o.style,attrs:{srcset:o.calculatedSrcSet,sizes:o.sizes,src:o.calculatedSrc,alt:o.alt},on:{load:o.onLoaded}},"img",o.$attrs,!1),o.$listeners))]:i("m-transition-fade-in",{on:{"after-enter":o.afterEnter}},[i("img",o._g(o._b({directives:[{name:"show",rawName:"v-show",value:o.loaded,expression:"loaded"}],class:(t={},t[o.$s.Image]=!0,t[o.$s["shape_"+o.resolvedShape]]=o.resolvedShape,t[o.$s.thumbnail]=o.isThumbnail,t),style:o.style,attrs:{srcset:o.calculatedSrcSet,sizes:o.sizes,src:o.calculatedSrc,alt:o.alt},on:{load:o.onLoaded}},"img",o.$attrs,!1),o.$listeners))]),o._v(" "),i("pseudo-window",{on:{resize:o.throttledResizeHandler}})],2)}),[],!1,(function(e){this.$s=m.locals||m}),null,null).exports})(),l})()}));
//# sourceMappingURL=script.js.map