{"version":3,"sources":["webpack:///./src/components/copy-shoutout/image-trail/image-trail.vue?d25b","webpack:///./src/components/copy-shoutout/image-trail/image-trail.vue","webpack:///./src/js/util/preloadImages.js","webpack:///./src/components/copy-shoutout/image-trail/util/lerp.js","webpack:///./src/components/copy-shoutout/image-trail/util/getDistance.js","webpack:///src/components/copy-shoutout/image-trail/image-trail.vue","webpack:///./src/components/copy-shoutout/image-trail/image-trail.vue?6d5d","webpack:///./src/components/copy-shoutout/image-trail/image-trail.vue?9506"],"names":["render","_vm","this","_c","_self","staticClass","_l","loadedImages","image","index","key","attrs","staticRenderFns","preloadImages","srcs","arguments","length","undefined","Promise","all","map","src","resolve","proxyImage","Image","addEventListener","complete","then","results","filter","result","lerp","a","b","n","getDistance","point1","point2","x","y","Math","sqrt","THRESHOLD","LERP_AMOUNT","name","props","images","type","Array","default","data","methods","_this","cachedMousePosition","mousePosition","distance","lastMousePosition","showNextImage","nextZIndex","nextIndex","isIdle","i","loadedImagesEls","idle","raf","window","requestAnimationFrame","_this2","img","el","_img$getBoundingClien","getBoundingClientRect","width","height","offsetTop","$el","top","pageYOffset","style","opacity","zIndex","transform","concat","visibility","transition","onTransitionEnd","e","target","removeEventListener","reflow","onMouseMove","pageX","pageY","created","mounted","_this3","matchMedia","matches","$nextTick","prototype","slice","call","querySelectorAll","beforeDestroy","cancelAnimationFrame","component"],"mappings":"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","file":"js/image-trail-lazy.js","sourcesContent":["export * from \"-!../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../node_modules/@vue/cli-service/node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./image-trail.vue?vue&type=style&index=0&id=a0a85f36&prod&lang=scss\"","var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',{staticClass:\"image-trail\"},[_vm._l((_vm.loadedImages),function(image,index){return [_c('img',{key:index,staticClass:\"image-trail__image\",attrs:{\"src\":image}})]})],2)\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","const preloadImages = (srcs = []) => {\n  return Promise.all(\n    srcs.map(src => new Promise(resolve => {\n      const proxyImage = new Image();\n      proxyImage.addEventListener('load', () => resolve(proxyImage.src));\n      proxyImage.addEventListener('error', () => resolve(null));\n      proxyImage.src = src;\n\n      if (proxyImage.complete) {\n        resolve(proxyImage.src);\n      }\n    }))\n  ).then(results => {\n    // filter out images that failed to load\n    return results.filter(result => result);\n  });\n};\n\nexport default preloadImages;","// linear interpolation\nconst lerp = (a, b, n) => (1 - n) * a + n * b;\n\nexport default lerp;","// distance between two points\nconst getDistance = (point1, point2) => {\n  const a = point2.x - point1.x;\n  const b = point2.y - point1.y;\n\n  return Math.sqrt(a*a + b*b);\n};\n\nexport default getDistance;","<template>\n  <div class=\"image-trail\">\n    <template v-for=\"(image, index) in loadedImages\">\n      <img class=\"image-trail__image\" :src=\"image\" :key=\"index\" />\n    </template>\n  </div>\n</template>\n\n<script lang=\"js\">\nimport preloadImages from '../../../js/util/preloadImages';\nimport reflow from '../../../js/util/reflow';\nimport lerp from './util/lerp';\nimport getDistance from './util/getDistance';\n\n// minimum mouse distance to show the next image\nconst THRESHOLD = 150;\n\n// the percentage of the distance to interpolate between two mouse positions\nconst LERP_AMOUNT = 0.1;\n\nexport default  {\n  name: 'ahc-image-trail',\n  props: {\n    images: {\n      type: Array,\n      default: () => []\n    }\n  },\n  data() {\n    return {\n      loadedImages: []\n    }\n  },\n  methods: {\n    render() {\n      // cache previous mouse position\n      this.cachedMousePosition = {\n        x: lerp(this.cachedMousePosition.x || this.mousePosition.x, this.mousePosition.x, LERP_AMOUNT),\n        y: lerp(this.cachedMousePosition.y || this.mousePosition.y, this.mousePosition.y, LERP_AMOUNT)\n      };\n\n      // render the next image if the mouse has moved far enough\n      const distance = getDistance(this.mousePosition, this.lastMousePosition);\n\n      if (distance > THRESHOLD) {\n        this.showNextImage();\n\n        this.nextZIndex = this.nextZIndex + 1;\n        this.nextIndex = (this.nextIndex + 1) % this.loadedImages.length;\n\n        this.lastMousePosition = this.mousePosition;\n      }\n\n      // reset the z-index value if no images are currently animating\n      let isIdle = true;\n      for (let i = 0; i < this.loadedImagesEls.length; i++) {\n        if (!this.loadedImagesEls[i].idle) {\n          isIdle = false;\n          break;\n        }\n      }\n\n      if (isIdle && this.nextZIndex !== 1) {\n        this.nextZIndex = 1;\n      }\n\n      // loop...\n      this.raf = window.requestAnimationFrame(() => this.render());\n    },\n    showNextImage() {\n      const index = this.nextIndex;\n      const img = this.loadedImagesEls[index].el;\n      const { width, height } = img.getBoundingClientRect();\n\n      // top offset of the contanining element, to adjust the mouse position;\n      const offsetTop = this.$el.getBoundingClientRect().top + window.pageYOffset;\n\n      // initial position, centered on a linearly interpolated point between the current and last mouse positions\n      img.style.opacity = 1;\n      img.style.zIndex = this.nextZIndex;\n      img.style.transform = `translate3d(${this.cachedMousePosition.x - width/2}px, ${this.cachedMousePosition.y - offsetTop - height/2}px, 0)`;\n      img.style.visibility = 'visible';\n      img.style.transition = 'none';\n\n      // set the image to \"idle\" when it's done animating\n      const onTransitionEnd = (e) => {\n        if (e.target === img) {\n          this.loadedImagesEls[index].idle = true;\n          img.removeEventListener('transitionend', onTransitionEnd, false);\n        }\n      };\n\n      this.loadedImagesEls[index].idle = false;\n      img.addEventListener('transitionend', onTransitionEnd, false);\n\n      // this forces a sync layout so that the previously set styles\n      // take effect before we set the new ones so the transition will\n      // apply\n      reflow(img);\n\n      // the new position, centered on the last-recorded mouse position\n      img.style.transform = `translate3d(${this.mousePosition.x - width/2}px, ${this.mousePosition.y - offsetTop - height/2}px, 0)`;\n      img.style.opacity = 0;\n      img.style.visibility = 'hidden';\n      img.style.transition = `transform 1s ease-out, opacity 0.5s ease-out 0.5s, visibility 0s linear 1s`;\n    },\n    onMouseMove(e) {\n      this.mousePosition = {\n        x: e.pageX,\n        y: e.pageY\n      };\n    }\n  },\n  created() {\n    // last recorded position of the mouse\n    this.mousePosition = { x: 0, y: 0 };\n\n    // interpolated point between the current and previous mouse positions\n    this.cachedMousePosition = { x: 0, y: 0 };\n\n    // the mouse position when the previous image was rendered\n    this.lastMousePosition = { x: 0, y: 0 };\n\n    // the index of the next image to render\n    this.nextIndex = 0;\n\n    // the z-index to apply to the next image\n    this.nextZIndex = 1;\n  },\n  mounted() {\n    // do not apply the effect on devices that don't support hover with their\n    // primary input device, (assume touch), or if the user prefers reduced motion\n    if (\n      !window.matchMedia('(hover: hover)').matches ||\n      window.matchMedia('(prefers-reduced-motion)').matches\n    ) {\n      return;\n    }\n\n    preloadImages(this.images).then(srcs => {\n      this.loadedImages = srcs;\n\n      this.$nextTick(() => {\n        this.loadedImagesEls = Array.prototype.slice.call(this.$el.querySelectorAll('.image-trail__image'))\n          .map(el => ({ el, idle: true }));\n\n        this.$el.addEventListener('mousemove', this.onMouseMove, false);\n        this.raf = window.requestAnimationFrame(() => this.render());\n      });\n    });\n  },\n  beforeDestroy() {\n    this.$el.removeEventListener('mousemove', this.onMouseMove, false);\n    window.cancelAnimationFrame(this.raf);\n  }\n}\n</script>\n\n<style lang=\"scss\">\n@import \"image-trail\";\n</style>\n","import mod from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../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!./image-trail.vue?vue&type=script&lang=js\"; export default mod; export * from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../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!./image-trail.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./image-trail.vue?vue&type=template&id=a0a85f36\"\nimport script from \"./image-trail.vue?vue&type=script&lang=js\"\nexport * from \"./image-trail.vue?vue&type=script&lang=js\"\nimport style0 from \"./image-trail.vue?vue&type=style&index=0&id=a0a85f36&prod&lang=scss\"\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  null,\n  null,\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}