Animate player text-overflow
authorChloe Laisne <chloe.laisne@gmail.com>
Tue, 27 Sep 2016 01:40:19 +0200
changeset 302 973df1349591
parent 301 29b425234094
child 303 2fef8007c2b2
Animate player text-overflow
cms/app-client/app/components/player-component.js
cms/app-client/app/styles/components/player-component.scss
cms/app-client/app/templates/components/player-component.hbs
--- a/cms/app-client/app/components/player-component.js	Mon Sep 26 23:13:15 2016 +0200
+++ b/cms/app-client/app/components/player-component.js	Tue Sep 27 01:40:19 2016 +0200
@@ -19,6 +19,11 @@
         return this.get('player').get('model');
     }),
 
+    didRender: function() {
+        this.textAutoscroll(Ember.$('#' + this.elementId).find('.title'));
+        this.textAutoscroll(Ember.$('#' + this.elementId).find('.author'));
+    },
+
     modelLoaded: Ember.observer('player.model', function() {
         var items = this.get('player').get('items');
         var index = items.indexOf(this.get('player').get('item'));
@@ -64,6 +69,26 @@
         }));
     },
 
+    textAutoscroll: function(jElement) {
+        var text = jElement.find('span');
+        text.stop(true);
+        text.css('text-indent', '0px');
+        if(text.width() > jElement.width()) {
+            var duration = ( ( text.width() - jElement.width() ) * 8 / 100 ) * 1000;
+            function animate() {
+                text.delay(4000)
+                    .animate({
+                        'text-indent': -( text.width() - jElement.width() ) + 'px'
+                    }, duration, 'linear', function() {
+                        text.stop(true);
+                        text.css('text-indent', '0px')
+                        window.setTimeout(function() { animate() }, 1);
+                    });
+            }
+            animate();
+        }
+    },
+
     onUpdate: function() {
         var progress = this.get('popcorn').currentTime();
         var duration = this.get('popcorn').duration();
--- a/cms/app-client/app/styles/components/player-component.scss	Mon Sep 26 23:13:15 2016 +0200
+++ b/cms/app-client/app/styles/components/player-component.scss	Tue Sep 27 01:40:19 2016 +0200
@@ -166,10 +166,17 @@
 
 .player-component #audio .meta .title,
 .player-component #audio .meta .author {
-    
+    position: relative;
+    height: 22px;
+    text-overflow: clip;
 }
 
-
+.player-component #audio .meta .title span,
+.player-component #audio .meta .author span {
+    position: absolute;
+    overflow: auto;
+    text-overflow: initial;
+}
 
 .player-component #audio .meta .title {
     font-weight: bold;
--- a/cms/app-client/app/templates/components/player-component.hbs	Mon Sep 26 23:13:15 2016 +0200
+++ b/cms/app-client/app/templates/components/player-component.hbs	Tue Sep 27 01:40:19 2016 +0200
@@ -27,11 +27,11 @@
 	</div>
 	<div class="meta">
 		<p>
-			<span title="{{ item.title }}" class="title">{{ item.title }}</span>
+			<span title="{{ item.title }}" class="title"><span>{{ item.title }}</span></span>
 			{{doc-language class="language" url=item.language}}
 		</p>
 		<p>
-			<span title="{{item.publishers_disp}}" class="author">{{item.publishers_disp}}</span>
+			<span title="{{item.publishers_disp}}" class="author"><span>{{item.publishers_disp}}</span></span>
 			<span class="date">{{short-date item.issued}}</span>
 		</p>
 	</div>