{"version":3,"sources":["webpack:///./src/components/LazyImage.vue?f672","webpack:///src/components/LazyImage.vue","webpack:///./src/components/LazyImage.vue?8590","webpack:///./src/components/LazyImage.vue","webpack:///./src/mixins/imageRenderer.js","webpack:///./src/components/LazyImage.vue?24f7","webpack:///./src/components/LazyImage.vue?3aea","webpack:///./src/components/LazyImage.vue?2d84"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","attrs","responsive","url","imageWidth","description","width","height","_t","staticRenderFns","name","introduction","mixins","imageRenderer","token","props","Boolean","String","type","default","note","injectStyles","context","style0","__inject__","component","data","computed","isRetina","window","devicePixelRatio","methods","throttle","fn","wait","time","Date","now","setImageWidth","elWidth","$el","offsetWidth","maxWidth","handleResize","addEventListener","handleImages","mounted","exports","module","push","i","content","__esModule","locals","add"],"mappings":"0IAAA,IAAIA,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,MAAM,CAACE,YAAY,cAAc,CAACF,EAAG,MAAM,CAACG,MAAM,CAAC,IAAMP,EAAIQ,WAAcR,EAAIS,IAAM,MAAQT,EAAIU,WAAa,WAAcV,EAAIS,IAAI,IAAMT,EAAIW,YAAY,MAAQX,EAAIY,MAAM,OAASZ,EAAIa,OAAO,QAAU,OAAO,UAAY,WAAWb,EAAIc,GAAG,YAAY,IAC1VC,EAAkB,G,YCetB,GACEC,KAAM,YACNC,aAAc,gCAEdC,OAAQ,CAACC,EAAX,MAEER,YAAa,GACbS,MACF,kGAEEC,MAAO,CACLb,WAAYc,QACZV,MAAOW,OACPV,OAAQU,OAERd,IAAK,CACHe,KAAMD,OACNE,QAAS,GACTC,KAAM,2CAGRf,YAAa,CACXa,KAAMD,OACNE,QAAS,GACTC,KAAM,2BCxC0R,I,YCGtS,SAASC,EAAcC,GAErB,IAAIC,EAAS,EAAQ,QACnBA,EAAOC,YAAYD,EAAOC,WAAWF,GAMzC,IAAIG,EAAY,eACd,EACAhC,EACAgB,GACA,EACAY,EACA,KACA,YAIa,aAAAI,E,6CCvBA,QACbC,KADa,WAEX,MAAO,CACLtB,WAAY,KAIhBuB,SAAU,CACRC,SADQ,WAEN,OAAOC,OAAOC,iBAAmB,IAIrCC,QAAS,CACPC,SADO,SACEC,EAAIC,GACX,IAAIC,EAAOC,KAAKC,MAEhB,OAAO,WACDF,EAAOD,EAAOE,KAAKC,MAAS,IAC9BJ,IACAE,EAAOC,KAAKC,SAKlBC,cAZO,WAaL,IAAIC,EAAU5C,KAAK6C,IAAIC,YACnBrC,EAAaT,KAAKiC,SAAmB,EAARW,EAAYA,EACvCG,EAAW,KAEjB/C,KAAKS,WAAcA,EAAasC,EAAYtC,EAAasC,GAG3DC,aApBO,WAqBLd,OAAOe,iBAAiB,SAAUjD,KAAKqC,SAASrC,KAAKkD,aAAc,OAGrEA,aAxBO,WAyBLlD,KAAK2C,kBAITQ,QA1Ca,WA2CXnD,KAAKkD,eACLlD,KAAKgD,kB,kCC5CT,oH,qBCAAI,EAAUC,EAAOD,QAAU,EAAQ,OAAR,EAAyD,GAKpFA,EAAQE,KAAK,CAACD,EAAOE,EAAI,wEAAyE,M,qBCFlG,IAAIC,EAAU,EAAQ,QACnBA,EAAQC,aAAYD,EAAUA,EAAQhC,SACnB,kBAAZgC,IAAsBA,EAAU,CAAC,CAACH,EAAOE,EAAIC,EAAS,MAC7DA,EAAQE,SAAQL,EAAOD,QAAUI,EAAQE,QAE5C,IAAIC,EAAM,EAAQ,QAA+DnC,QACpEmC,EAAI,WAAYH,GAAS,EAAM,CAAC,WAAY,EAAM,YAAa","file":"js/chunks/chunk-4fd5377d.js?id=52b48c8ca746aa756cfe","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"lazy-image\"},[_c('img',{attrs:{\"src\":_vm.responsive ? (_vm.url + \"?w=\" + _vm.imageWidth + \"&fm=webp\") : _vm.url,\"alt\":_vm.description,\"width\":_vm.width,\"height\":_vm.height,\"loading\":\"lazy\",\"draggable\":\"false\"}}),_vm._t(\"default\")],2)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template lang=\"html\">\n  <div class=\"lazy-image\">\n    <img\n      :src=\"responsive ? `${url}?w=${imageWidth}&fm=webp` : url\"\n      :alt=\"description\"\n      :width=\"width\"\n      :height=\"height\"\n      loading=\"lazy\"\n      draggable=\"false\" />\n    <slot/>\n  </div>\n</template>\n\n<script>\nimport imageRenderer from '@/mixins/imageRenderer'\n\nexport default {\n  name: 'LazyImage',\n  introduction: 'Lazy load image at right size',\n\n  mixins: [imageRenderer],\n\n  description: '',\n  token:\n    '<lazy-image url=\"http://molly.nathansplace.co.uk/100x100.jpg\" description=\"molly\"></lazy-image>',\n\n  props: {\n    responsive: Boolean,\n    width: String,\n    height: String,\n\n    url: {\n      type: String,\n      default: '',\n      note: 'The source of the image to be loaded in'\n    },\n\n    description: {\n      type: String,\n      default: '',\n      note: 'Used in image alt tag'\n    }\n  }\n}\n</script>\n\n<style lang=\"sass\">\n.lazy-image\n  text-align: center\n  height: 100%\n\n  .is-loading\n\n  > img\n    width: 100%\n</style>\n","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./LazyImage.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./LazyImage.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./LazyImage.vue?vue&type=template&id=df871710&lang=html&\"\nimport script from \"./LazyImage.vue?vue&type=script&lang=js&\"\nexport * from \"./LazyImage.vue?vue&type=script&lang=js&\"\nfunction injectStyles (context) {\n  \n  var style0 = require(\"./LazyImage.vue?vue&type=style&index=0&lang=sass&\")\nif (style0.__inject__) style0.__inject__(context)\n\n}\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  injectStyles,\n  null,\n  \"3f195088\"\n  \n)\n\nexport default component.exports","export default {\n  data() {\n    return {\n      imageWidth: ''\n    }\n  },\n\n  computed: {\n    isRetina() {\n      return window.devicePixelRatio > 1\n    }\n  },\n\n  methods: {\n    throttle(fn, wait) {\n      let time = Date.now()\n\n      return () => {\n        if((time + wait - Date.now()) < 0 ) {\n          fn()\n          time = Date.now()\n        }\n      }\n    },\n\n    setImageWidth() {\n      let elWidth = this.$el.offsetWidth\n      let imageWidth = this.isRetina ? elWidth*2 : elWidth\n      const maxWidth = 2400\n\n      this.imageWidth = (imageWidth < maxWidth) ? imageWidth : maxWidth\n    },\n\n    handleResize() {\n      window.addEventListener('resize', this.throttle(this.handleImages, 150))\n    },\n\n    handleImages() {\n      this.setImageWidth()\n    }\n  },\n\n  mounted() {\n    this.handleImages()\n    this.handleResize()\n  }\n}\n","export * from \"-!../../node_modules/vue-style-loader/index.js??ref--9-oneOf-1-0!../../node_modules/css-loader/index.js??ref--9-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--9-oneOf-1-2!../../node_modules/postcss-loader/src/index.js??ref--9-oneOf-1-3!../../node_modules/sass-loader/dist/cjs.js??ref--9-oneOf-1-4!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./LazyImage.vue?vue&type=style&index=0&lang=sass&\"","exports = module.exports = require(\"../../node_modules/css-loader/lib/css-base.js\")(false);\n// imports\n\n\n// module\nexports.push([module.id, \".lazy-image{text-align:center;height:100%}.lazy-image>img{width:100%}\", \"\"]);\n\n// exports\n","// style-loader: Adds some css to the DOM by adding a <style> tag\n\n// load the styles\nvar content = require(\"!!../../node_modules/css-loader/index.js??ref--9-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--9-oneOf-1-2!../../node_modules/postcss-loader/src/index.js??ref--9-oneOf-1-3!../../node_modules/sass-loader/dist/cjs.js??ref--9-oneOf-1-4!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./LazyImage.vue?vue&type=style&index=0&lang=sass&\");\nif(content.__esModule) content = content.default;\nif(typeof content === 'string') content = [[module.id, content, '']];\nif(content.locals) module.exports = content.locals;\n// add the styles to the DOM\nvar add = require(\"!../../node_modules/vue-style-loader/lib/addStylesClient.js\").default\nvar update = add(\"bfdd2f3e\", content, true, {\"sourceMap\":false,\"shadowMode\":false});"],"sourceRoot":""}