cms/app-client/app/components/transcript-component.js
author Chloe Laisne <chloe.laisne@gmail.com>
Thu, 21 Jul 2016 23:36:50 +0200
changeset 246 5b7ae96768be
parent 245 c9dd78a43b07
child 247 7a5d729992b8
permissions -rw-r--r--
Bsic transcript-component design Autoscroll transcript
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
245
c9dd78a43b07 Transcript model and erializer
Chloe Laisne <chloe.laisne@gmail.com>
parents:
diff changeset
     1
import Ember from 'ember';
c9dd78a43b07 Transcript model and erializer
Chloe Laisne <chloe.laisne@gmail.com>
parents:
diff changeset
     2
c9dd78a43b07 Transcript model and erializer
Chloe Laisne <chloe.laisne@gmail.com>
parents:
diff changeset
     3
export default Ember.Component.extend({
c9dd78a43b07 Transcript model and erializer
Chloe Laisne <chloe.laisne@gmail.com>
parents:
diff changeset
     4
246
5b7ae96768be Bsic transcript-component design
Chloe Laisne <chloe.laisne@gmail.com>
parents: 245
diff changeset
     5
    classNames: ['transcript-component'],
5b7ae96768be Bsic transcript-component design
Chloe Laisne <chloe.laisne@gmail.com>
parents: 245
diff changeset
     6
5b7ae96768be Bsic transcript-component design
Chloe Laisne <chloe.laisne@gmail.com>
parents: 245
diff changeset
     7
    player: Ember.inject.service(),
5b7ae96768be Bsic transcript-component design
Chloe Laisne <chloe.laisne@gmail.com>
parents: 245
diff changeset
     8
5b7ae96768be Bsic transcript-component design
Chloe Laisne <chloe.laisne@gmail.com>
parents: 245
diff changeset
     9
    autoscroll: true,
5b7ae96768be Bsic transcript-component design
Chloe Laisne <chloe.laisne@gmail.com>
parents: 245
diff changeset
    10
    autoscrollElement : Ember.$('.corpus-app-container'),
5b7ae96768be Bsic transcript-component design
Chloe Laisne <chloe.laisne@gmail.com>
parents: 245
diff changeset
    11
5b7ae96768be Bsic transcript-component design
Chloe Laisne <chloe.laisne@gmail.com>
parents: 245
diff changeset
    12
    itemObserver: Ember.observer('player.item', function () {
5b7ae96768be Bsic transcript-component design
Chloe Laisne <chloe.laisne@gmail.com>
parents: 245
diff changeset
    13
        this.set('autoscroll', true);
5b7ae96768be Bsic transcript-component design
Chloe Laisne <chloe.laisne@gmail.com>
parents: 245
diff changeset
    14
    }),
245
c9dd78a43b07 Transcript model and erializer
Chloe Laisne <chloe.laisne@gmail.com>
parents:
diff changeset
    15
246
5b7ae96768be Bsic transcript-component design
Chloe Laisne <chloe.laisne@gmail.com>
parents: 245
diff changeset
    16
    init: function() {
5b7ae96768be Bsic transcript-component design
Chloe Laisne <chloe.laisne@gmail.com>
parents: 245
diff changeset
    17
        var self = this;
5b7ae96768be Bsic transcript-component design
Chloe Laisne <chloe.laisne@gmail.com>
parents: 245
diff changeset
    18
        this.get('autoscrollElement').bind('scroll', function() {
5b7ae96768be Bsic transcript-component design
Chloe Laisne <chloe.laisne@gmail.com>
parents: 245
diff changeset
    19
            self.set('autoscroll', false);
5b7ae96768be Bsic transcript-component design
Chloe Laisne <chloe.laisne@gmail.com>
parents: 245
diff changeset
    20
        });
5b7ae96768be Bsic transcript-component design
Chloe Laisne <chloe.laisne@gmail.com>
parents: 245
diff changeset
    21
5b7ae96768be Bsic transcript-component design
Chloe Laisne <chloe.laisne@gmail.com>
parents: 245
diff changeset
    22
        this._super(...arguments);
5b7ae96768be Bsic transcript-component design
Chloe Laisne <chloe.laisne@gmail.com>
parents: 245
diff changeset
    23
    },
5b7ae96768be Bsic transcript-component design
Chloe Laisne <chloe.laisne@gmail.com>
parents: 245
diff changeset
    24
5b7ae96768be Bsic transcript-component design
Chloe Laisne <chloe.laisne@gmail.com>
parents: 245
diff changeset
    25
    didUpdate: function() {
5b7ae96768be Bsic transcript-component design
Chloe Laisne <chloe.laisne@gmail.com>
parents: 245
diff changeset
    26
        if(this.get('autoscroll')) {
5b7ae96768be Bsic transcript-component design
Chloe Laisne <chloe.laisne@gmail.com>
parents: 245
diff changeset
    27
            this.get('autoscrollElement').scrollTop((Ember.$('.sentence.active').offset().top + this.get('autoscrollElement').scrollTop()) - this.get('autoscrollElement').offset().top)
5b7ae96768be Bsic transcript-component design
Chloe Laisne <chloe.laisne@gmail.com>
parents: 245
diff changeset
    28
        }
5b7ae96768be Bsic transcript-component design
Chloe Laisne <chloe.laisne@gmail.com>
parents: 245
diff changeset
    29
    }
245
c9dd78a43b07 Transcript model and erializer
Chloe Laisne <chloe.laisne@gmail.com>
parents:
diff changeset
    30
c9dd78a43b07 Transcript model and erializer
Chloe Laisne <chloe.laisne@gmail.com>
parents:
diff changeset
    31
});