feat(marquee): Adds marquee effect to title if needed

- fixes #460

package.json

@@ -81,7 +81,6 @@
     "ava": "0.18.2",
     "babel-core": "6.22.0",
     "babel-loader": "7.1.1",
-    "superagent-nock": "0.3.1",
     "babel-plugin-add-module-exports": "0.2.1",
     "babel-plugin-lodash": "3.2.11",
     "babel-plugin-transform-object-rest-spread": "6.23.0",
@@ -115,6 +114,7 @@
     "snazzy": "7.0.0",
     "standard": "10.0.2",
     "standard-changelog": "1.0.1",
+    "superagent-nock": "0.3.1",
     "surge": "0.18.0",
     "transform-runtime": "0.0.0",
     "vue-loader": "13.7.0",

src/components/App.vue

@@ -58,6 +58,7 @@
 
   @import '~styles/transitions';
   @import '~styles/animations';
+  @import '~styles/marquee';
 
   .podlove {
     display: block;

src/components/header/Info.vue

@@ -10,9 +10,9 @@
         <a :href="show.link" target="_blank" class="truncate" v-if="display === 'embed' && show.link">{{ show.title }}</a>
         <span class="truncate" v-else>{{ show.title }}</span>
       </h2>
-      <h1 class="title" :style="titleStyle" v-if="hasEpisodeTitle">
-        <a :href="episode.link" target="_blank" class="truncate" v-if="display === 'embed' && episode.link">{{ episode.title }}</a>
-        <span class="truncate" v-else>{{ episode.title }}</span>
+      <h1 class="title" v-marquee :style="titleStyle" v-if="hasEpisodeTitle">
+        <a :href="episode.link" target="_blank" v-if="display === 'embed' && episode.link">{{ episode.title }}</a>
+        <span v-else>{{ episode.title }}</span>
       </h1>
       <div class="subtitle" :style="subtitleStyle" v-if="hasDescription">{{ episode.subtitle }}</div>
     </div>

src/components/shared/TabHeader.vue

@@ -1,11 +1,11 @@
 <template>
-  <ul class="tab-header" :class="{ overflows }">
+  <ul class="tab-header" :class="{ overflows }" v-resize="resizeHandler">
     <span class="header-shadow" :style="headerShadowStyle"></span>
     <slot></slot>
   </ul>
 </template>
+
 <script>
-  /* global MutationObserver */
   import color from 'color'
 
   export default {
@@ -22,18 +22,16 @@
         }
       }
     },
-    mounted () {
-      const resizeHandler = () => {
+    methods: {
+      resizeHandler () {
         this.$nextTick(() => {
           this.overflows = this.$el.scrollWidth > this.$el.clientWidth
         })
       }
+    },
 
-      const tabsObserver = new MutationObserver(resizeHandler)
-
-      tabsObserver.observe(this.$el, { childList: true })
-      window.addEventListener('resize', resizeHandler)
-      resizeHandler()
+    mounted () {
+      this.resizeHandler()
     }
   }
 </script>

src/core/directives/index.js

@@ -1,7 +1,11 @@
-import clipboard from './directives/clipboard'
+import clipboard from './clipboard'
+import resize from './resize'
+import marquee from './marquee'
 
 const registerDirectives = context => {
   context.Renderer.directive('clipboard', clipboard)
+  context.Renderer.directive('resize', resize)
+  context.Renderer.directive('marquee', marquee)
 
   return context
 }

src/core/directives/marquee.js

@@ -0,0 +1,38 @@
+import { setStyles, hasOverflow, addClasses, removeClasses } from 'utils/dom'
+
+const marquee = el => {
+  const scroller = el.firstChild
+
+  setStyles({
+    'overflow-x': 'auto',
+    'white-space': 'nowrap'
+  })(scroller)
+
+  setStyles({
+    height: `${el.offsetHeight}px`
+  })(el)
+
+  setStyles({
+    height: `${scroller.offsetHeight}px`
+  })(scroller)
+
+  if (hasOverflow(scroller)) {
+    addClasses('marquee-container')(el)
+    addClasses('marquee')(scroller)
+  } else {
+    removeClasses('marquee-container')(el)
+    removeClasses('marquee')(scroller)
+  }
+
+  setStyles({
+    'overflow-x': 'visible'
+  })(scroller)
+}
+
+export default {
+  bind (el) {
+    marquee(el)
+    window.addEventListener('resize', () => marquee(el))
+  },
+  update: marquee
+}

src/core/directives/resize.js

@@ -0,0 +1,10 @@
+/* global MutationObserver */
+
+export default {
+  bind (el, { value }) {
+    const observer = new MutationObserver(value)
+
+    observer.observe(el, { childList: true })
+    window.addEventListener('resize', value)
+  }
+}

src/styles/_marquee.scss

@@ -0,0 +1,42 @@
+.marquee-container {
+  overflow: hidden;
+  position: relative;
+
+  .marquee {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    text-align: left;
+
+    /* Starting position */
+    transform: translateX(0%);
+
+    /* Apply animation to this element */
+    animation: scroll 10s linear infinite;
+  }
+
+  /* Move it (define the animation) */
+  @keyframes scroll {
+    0% {
+      opacity: 1;
+      transform: translateX(0%); }
+    20% {
+      opacity: 1;
+      transform: translateX(0%); }
+    40% {
+      opacity: 1;
+      transform: translateX(0%);
+    }
+    80% {
+      opacity: 1;
+    }
+    90% {
+      opacity: 0;
+      transform: translateX(-110%);
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+ }

src/utils/dom.js

@@ -1,4 +1,4 @@
-import curry from 'lodash/fp/curry'
+import { curry, compose, uniq, concat, join, filter } from 'lodash/fp'
 
 export const findNode = selector => document.querySelectorAll(selector)
 export const createNode = tag => document.createElement(tag)
@@ -10,3 +10,25 @@ export const tag = curry((tag, value = '', attributes = {}) => {
   attr = attr.join('')
   return `<${tag}${attr}>${value}</${tag}>`
 })
+
+export const setStyles = (attrs = {}) => el => {
+  Object.keys(attrs).forEach(property => {
+    el.style[property] = attrs[property]
+  })
+}
+
+export const getClasses = el => el.className.split(' ')
+
+export const hasOverflow = el => el.scrollWidth > el.clientWidth
+
+export const addClasses = (...classes) => el => {
+  el.className = compose(join(' '), uniq, concat(classes), getClasses)(el)
+
+  return el
+}
+
+export const removeClasses = (...classes) => el => {
+  el.className = compose(join(' '), filter(className => !~classes.indexOf(className)), getClasses)(el)
+
+  return el
+}