@square/maker/components/Image/styles.css.map

📚 Maker Design System by Square

{"version":3,"sources":["webpack://../components/Image/src/Image.vue"],"names":[],"mappings":"AA8HA,mBACA,iBAAA,CACA,UAAA,CACA,WACA,CAEA,mBACA,UAAA,CACA,WAAA,CACA,mBAAA,CAAA,gBAAA,CACA,yBAAA,CAAA,sBACA","file":"styles.css","sourcesContent":["<template>\n\t<div :class=\"$s.ImageWrapper\">\n\t\t<template v-if=\"isIntersecting\">\n\t\t\t<m-transition-fade-in>\n\t\t\t\t<m-skeleton-block\n\t\t\t\t\tv-if=\"!loaded\"\n\t\t\t\t/>\n\t\t\t\t<img\n\t\t\t\t\tv-else\n\t\t\t\t\t:class=\"$s.Image\"\n\t\t\t\t\t:src=\"src\"\n\t\t\t\t\t:srcset=\"srcset\"\n\t\t\t\t\tv-bind=\"$attrs\"\n\t\t\t\t\tv-on=\"$listeners\"\n\t\t\t\t>\n\t\t\t</m-transition-fade-in>\n\t\t</template>\n\t</div>\n</template>\n\n<script>\nimport { MTransitionFadeIn } from '@square/maker/components/TransitionFadeIn';\nimport { MSkeletonBlock } from '@square/maker/components/Skeleton';\n\nfunction SharedIntersectionObserver() {\n\tconst callbacks = new WeakMap();\n\tconst o = new IntersectionObserver((entries) => {\n\t\tentries.forEach((entry) => callbacks.get(entry.target)(entry));\n\t});\n\n\treturn {\n\t\twatch(element, callback) {\n\t\t\tcallbacks.set(element, callback);\n\t\t\to.observe(element);\n\t\t},\n\t\tunwatch(element) {\n\t\t\to.unobserve(element);\n\t\t\tcallbacks.delete(element);\n\t\t},\n\t};\n}\n\nconst imgCache = new Set();\n\nlet observer;\n\n/**\n * @inheritAttrs img\n * @inheritListeners img\n */\nexport default {\n\tcomponents: {\n\t\tMTransitionFadeIn,\n\t\tMSkeletonBlock,\n\t},\n\n\tinheritAttrs: false,\n\n\tprops: {\n\t\tsrc: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\tsrcset: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tisIntersecting: true,\n\t\t\tloaded: imgCache.has(this.src + this.srcset),\n\t\t};\n\t},\n\n\twatch: {\n\t\tsrc: 'load',\n\t\tsrcset: 'load',\n\t},\n\n\tmounted() {\n\t\tif (!observer) {\n\t\t\tobserver = new SharedIntersectionObserver();\n\t\t}\n\n\t\tobserver.watch(this.$el, this.onIntersection);\n\t},\n\n\tbeforeDestroy() {\n\t\tobserver.unwatch(this.$el);\n\t},\n\n\tmethods: {\n\t\tonIntersection({ isIntersecting }) {\n\t\t\tthis.isIntersecting = isIntersecting;\n\t\t\tif (isIntersecting) {\n\t\t\t\tthis.load();\n\t\t\t}\n\t\t},\n\n\t\tload() {\n\t\t\tif (this.loaded || (!this.src && !this.srcset)) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst img = new Image();\n\n\t\t\tif (this.src) {\n\t\t\t\timg.src = this.src;\n\t\t\t}\n\n\t\t\tif (this.srcset) {\n\t\t\t\timg.srcset = this.srcset;\n\t\t\t}\n\n\t\t\timg.addEventListener('load', () => {\n\t\t\t\timgCache.add(this.src + this.srcset);\n\t\t\t\tthis.loaded = true;\n\t\t\t});\n\t\t},\n\t},\n};\n</script>\n\n<style module=\"$s\">\n.ImageWrapper {\n\tposition: relative;\n\twidth: 100%;\n\theight: 100%;\n}\n\n.Image {\n\twidth: 100%;\n\theight: 100%;\n\tobject-fit: cover;\n\tobject-position: center;\n}\n</style>\n"]}