# HG changeset patch # User Chloe Laisne # Date 1474933219 -7200 # Node ID 973df1349591bf3c210c3a18d32a4a09fcf6e90b # Parent 29b4252340943efdf86d7baa054c2fa582274487 Animate player text-overflow diff -r 29b425234094 -r 973df1349591 cms/app-client/app/components/player-component.js --- 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(); diff -r 29b425234094 -r 973df1349591 cms/app-client/app/styles/components/player-component.scss --- 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; diff -r 29b425234094 -r 973df1349591 cms/app-client/app/templates/components/player-component.hbs --- 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 @@

- {{ item.title }} + {{ item.title }} {{doc-language class="language" url=item.language}}

- {{item.publishers_disp}} + {{item.publishers_disp}} {{short-date item.issued}}