1 import Ember from 'ember';

     2 

     3 export default Ember.Component.extend({

     4   constants: Ember.inject.service(),

     5 

     6   classNames: ['autoscroll-component'],

     7   tagName: "span",

     8   attributeBindings: ['title'],

     9 

    10   title: Ember.computed.oneWay('text'),

    11 

    12   text: null,

    13   textWidth: null,

    14   doScroll: false,

    15   keyFrameStyleDef: null,

    16   scrollRate: null,

    17 

    18   willDestroyElement() {

    19     const keyFrameStyleDef = this.get('keyFrameStyleDef');

    20     if(keyFrameStyleDef !== null) {

    21         Ember.run(() => {

    22           Ember.$(keyFrameStyleDef).remove();

    23         });

    24         this.set('keyFrameStyleDef', null);

    25     }

    26   },

    27 

    28   didRender() {

    29     const textWidth = this.$('span').width();

    30     if(textWidth === this.get('textWidth')) {

    31       return;

    32     }

    33     this.set('textWidth', textWidth);

    34     const outerWidth = this.$().width();

    35     const doScroll = (textWidth > outerWidth);

    36     const id = this.elementId;

    37 

    38     Ember.run(() => {

    39       if(this.get('keyFrameStyleDef') !== null) {

    40         Ember.$(this.get('keyFrameStyleDef')).remove();

    41       }

    42       if(doScroll) {

    43         const scrollRate = this.get('scrollRate') || this.get('constants').AUTOSCROLL_RATE;

    44         const duration = Math.ceil((textWidth + 30) / scrollRate) + 1;

    45         const firstFramePercent = Math.ceil((1/duration)*100);

    46 

    47         var keyframesDef = '';

    48         ['-webkit-', '-moz-', ''].forEach(function(p) {

    49           keyframesDef += `@${p}keyframes marquee-${id} { 0% { left: 0; } ${firstFramePercent}% { left: 0; } 100% { left: -${textWidth + 30 }px; } }\n`;

    50         });

    51         this.set(

    52           'keyFrameStyleDef',

    53           Ember.$("<style>")

    54             .prop('id', 'scroll-style-'+id)

    55             .prop("type", "text/css")

    56             .text(keyframesDef)

    57             .appendTo("head")

    58         );

    59         this.$('div').css('animation', `marquee-${id} ${duration}s linear infinite`);

    60         this.$('span:last-child').removeClass('hidden-double');

    61       } else {

    62         this.$('span:last-child').addClass('hidden-double');

    63         this.$('div').css('animation', '');

    64       }

    65     });

    66 

    67   }

    68 });