fix(title): Fixes scrolling issue in title when overflowing

podlove · Mar 2, 2018 · 052ceca · 052ceca
1 parent 471b7b6
commit 052ceca
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 12 deletions.
diff --git a/src/core/directives/marquee.js b/src/core/directives/marquee.js
@@ -1,8 +1,10 @@
-import { setStyles, hasOverflow, addClasses, removeClasses } from 'utils/dom'
+import { setStyles, addClasses, removeClasses } from 'utils/dom'
 
 const marquee = el => {
   const scroller = el.firstChild
 
+  const animationDuration = scroller.scrollWidth / 50
+
   setStyles({
     'overflow-x': 'auto',
     'white-space': 'nowrap'
@@ -13,12 +15,16 @@ const marquee = el => {
   })(el)
 
   setStyles({
-    height: `${scroller.offsetHeight}px`
+    height: `${scroller.offsetHeight}px`,
+    width: `${scroller.scrollWidth}px`
   })(scroller)
 
-  if (hasOverflow(scroller)) {
+  if (scroller.scrollWidth > el.offsetWidth) {
     addClasses('marquee-container')(el)
     addClasses('marquee')(scroller)
+    setStyles({
+      'animation-duration': `${animationDuration > 10 ? animationDuration : 10}s` // min 10s
+    })(scroller)
   } else {
     removeClasses('marquee-container')(el)
     removeClasses('marquee')(scroller)

diff --git a/src/styles/_marquee.scss b/src/styles/_marquee.scss
@@ -19,24 +19,19 @@
   /* 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% {
+    20% {
       opacity: 1;
+      transform: translateX(0%);
     }
     90% {
-      opacity: 0;
-      transform: translateX(-110%);
+      opacity: 1;
     }
     100% {
       opacity: 0;
+      transform: translateX(-100%);
     }
   }
  }