{"version":3,"file":"ticker-CCt7HetE.js","sources":["../../../app/javascript/components/ticker.vue?vue&type=template&lang.js","../../../app/javascript/components/ticker.vue"],"sourcesContent":["\n<div class=\"ticker\">\n  <div class=\"label\">\n    Latest\n  </div>\n  <div class=\"items\">\n    <a :href=\"item.url\" class=\"item\" v-for=\"(item, index) in items\" :key=\"index\" :ref=\"`item-${index}`\" :id=\"`item-${index}`\"  :class=\"index == active ? 'active' : ''\">\n      {{ item.title }}\n    </a>\n  </div>\n  <div class=\"overlay\" ref=\"overflow\"></div>\n</div>\n","<template>\n  <div class=\"ticker\">\n    <div class=\"label\">\n      Latest\n    </div>\n    <div class=\"items\">\n      <a :href=\"item.url\" class=\"item\" v-for=\"(item, index) in items\" :key=\"index\" :ref=\"`item-${index}`\" :id=\"`item-${index}`\"  :class=\"index == active ? 'active' : ''\">\n        {{ item.title }}\n      </a>\n    </div>\n    <div class=\"overlay\" ref=\"overflow\"></div>\n  </div>\n</template>\n\n<script>\n\nfunction sleep(ms) {\n    return new Promise(resolve => setTimeout(resolve, ms));\n}\n\nexport default {\n  props: {\n    items: { type: Array, required: true }\n  },\n\n  data() {\n    return {\n      active: 0\n    }\n  },\n\n  mounted() {\n    this.start()\n  },\n\n  methods: {\n    start() {\n      setTimeout(this.next, 4000);\n    },\n\n    async next() {\n      // find existing active item\n      let item = this.$refs[`item-${this.active}`][0]\n\n      // Check if the item is overflowing\n      const overflow = item.scrollWidth - item.offsetWidth\n      const scrollSpeed = 60; // 60px per second\n      const scrollDuration = overflow / scrollSpeed;\n\n      // if overflowing, scroll item to the left before fade transition, calculate scroll duration based on the distance to the left\n      if (overflow > 0) {\n        item.style.transition = `transform ${scrollDuration}s linear`\n        item.style.transform = `translateX(-${overflow}px)`\n        await sleep(scrollDuration * 1000) // await the scroll animation to finish\n        this.$refs.overflow.style.opacity = 0;\n        await sleep(1000) // wee pause at the end\n      }\n      \n      // fade item out\n      item.style.transition = `opacity 0.3s ease-in-out`\n      item.classList.remove('active')\n      await sleep(300)\n      \n      // move to the next item\n      this.active = (this.active + 1) % this.items.length\n      item = this.$refs[`item-${this.active}`][0]\n\n      // fade next item in\n      item.style.transition = `opacity 0.3s ease-in-out`\n      item.style.transform = `translateX(0px)` // reset to the start of the left\n      item.classList.add('active')\n\n      // display the overlay if this next item is overflowing\n      this.$refs.overflow.style.opacity = item.scrollWidth - item.offsetWidth > 0 ? 1 : 0; \n\n      // schedule timer for next item\n      setTimeout(this.next, 3000);\n    }\n },\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.ticker {\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  width: 100%;\n  height: 42px;\n}\n.label {\n  color: #DFA9FF;\n  font-family: 'Inter-SemiBold', Arial, Helvetica, sans-serif;\n  font-size: 12px;\n  height: 14px;\n  padding-right: 16px;\n  border-right: 1px solid rgba(255,255,255,0.4);\n  margin-right: 16px;\n}\n.items {\n  position: relative;\n  width: 100%;\n  height: 14px;\n  white-space: nowrap;\n  overflow: hidden;\n\n  .item {\n    width: calc(100% - 20px);\n    position: absolute;\n    top: 0;\n    left: 0;\n    font-family: 'Inter', Arial, Helvetica, sans-serif;\n    font-style:  normal;\n    font-weight: 400;\n    padding: 0;\n    border: 0;\n    text-decoration: none;\n    \n    font-size: 12px;\n    height: 14px;\n    opacity: 0;\n    pointer-events: none;\n    transition: opacity 0.3s ease-in-out;\n    color: white;\n\n    &.active {\n      opacity: 1;\n      pointer-events: unset;\n    }\n  }\n}\n\n.overlay {\n  height: 42px;\n  width: 42px;\n  position: absolute;\n  right: 0px;\n  top: 0px;\n  background-image: linear-gradient(to right, rgba(22,21,46,0), rgba(22,21,46,1));\n\n  @media (max-width: 768px) {\n    transition: opacity 0.3s ease-in-out;\n  }\n  \n}\n\n</style>"],"names":["render","_vm","_h","_c","item","index","staticRenderFns","sleep","ms","resolve","__vue2_script","overflow","scrollDuration"],"mappings":"oDAAA,IAAIA,EAAS,UAAY,CACvB,IAAIC,EAAI,KACJC,EAAGD,EAAI,eACPE,EAAGF,EAAI,MAAM,IAAIC,EAErB,OAAOC,EAAG,MAAO,CACf,YAAa,QACjB,EAAK,CAACA,EAAG,MAAO,CACZ,YAAa,OACjB,EAAK,CAACF,EAAI,GAAG,UAAU,CAAC,CAAC,EAAGE,EAAG,MAAO,CAClC,YAAa,OACjB,EAAKF,EAAI,GAAGA,EAAI,MAAO,SAAUG,EAAMC,EAAO,CAC1C,OAAOF,EAAG,IAAK,CACb,IAAKE,EACL,IAAK,QAAQA,CAAK,GAClB,SAAU,GACV,YAAa,OACb,MAAOA,GAASJ,EAAI,OAAS,SAAW,GACxC,MAAO,CACL,KAAQG,EAAK,IACb,GAAM,QAAQC,CAAK,EAC3B,CACK,EAAE,CAACJ,EAAI,GAAG,IAAMA,EAAI,GAAGG,EAAK,KAAK,EAAI,GAAG,CAAC,CAAC,CAC5C,CAAA,EAAG,CAAC,EAAGD,EAAG,MAAO,CAChB,IAAK,WACL,YAAa,SACd,CAAA,CAAC,CAAC,CACL,EACIG,EAAkB,CAAE,ECZxB,SAAAC,EAAAC,EAAA,CACA,OAAA,IAAA,QAAAC,GAAA,WAAAA,EAAAD,CAAA,CAAA,CACA,CAEA,MAAAE,EAAA,CACA,MAAA,CACA,MAAA,CAAA,KAAA,MAAA,SAAA,EAAA,CACA,EAEA,MAAA,CACA,MAAA,CACA,OAAA,CACA,CACA,EAEA,SAAA,CACA,KAAA,MAAA,CACA,EAEA,QAAA,CACA,OAAA,CACA,WAAA,KAAA,KAAA,GAAA,CACA,EAEA,MAAA,MAAA,CAEA,IAAAN,EAAA,KAAA,MAAA,QAAA,KAAA,MAAA,EAAA,EAAA,CAAA,EAGA,MAAAO,EAAAP,EAAA,YAAAA,EAAA,YAEAQ,EAAAD,EADA,GAIAA,EAAA,IACAP,EAAA,MAAA,WAAA,aAAAQ,CAAA,WACAR,EAAA,MAAA,UAAA,eAAAO,CAAA,MACA,MAAAJ,EAAAK,EAAA,GAAA,EACA,KAAA,MAAA,SAAA,MAAA,QAAA,EACA,MAAAL,EAAA,GAAA,GAIAH,EAAA,MAAA,WAAA,2BACAA,EAAA,UAAA,OAAA,QAAA,EACA,MAAAG,EAAA,GAAA,EAGA,KAAA,QAAA,KAAA,OAAA,GAAA,KAAA,MAAA,OACAH,EAAA,KAAA,MAAA,QAAA,KAAA,MAAA,EAAA,EAAA,CAAA,EAGAA,EAAA,MAAA,WAAA,2BACAA,EAAA,MAAA,UAAA,kBACAA,EAAA,UAAA,IAAA,QAAA,EAGA,KAAA,MAAA,SAAA,MAAA,QAAAA,EAAA,YAAAA,EAAA,YAAA,EAAA,EAAA,EAGA,WAAA,KAAA,KAAA,GAAA,CACA,CACA,CACA"}