kaamelott-soundboard/js/app/views/sound.js

define('views/sound', function(require) {
    "use strict";

    var Marionette      = require('marionette'),
        SoundModel      = require('models/sound'),
        SoundTemplate   = require('hbs!templates/sound.hbs'),
        SoundView;

    SoundView = Marionette.ItemView.extend({
        template: SoundTemplate,
        model: SoundModel,
        tagName: 'li',
        ui: {
            soundItem: 'a'
        },
        events: {
            'click @ui.soundItem': 'toggleSound',
            'mouseenter @ui.soundItem': 'toggleSoundDetail',
            'mouseleave @ui.soundItem': 'toggleSoundDetail'
        },
        initialize: function() {
            this.listenTo(this.model, "change:playing", this.playingAttributeChanged);
        },
        toggleSound: function(e) {
            e.preventDefault();

            if( this.model.get('playing') ) {
                this.trigger('sound:stop');

                this.model.stop();
            } else {
                this.trigger('sound:play');

                this.model.play();
            }
        },
        playingAttributeChanged: function() {
            if( this.model.get('playing') ) {
                $(this.ui.soundItem).addClass('playing');
            } else {
                $(this.ui.soundItem).removeClass('playing');
            }
        },
        toggleSoundDetail: function(e) {
            var offset;

            if (e.type === 'mouseleave') {
                $('.tooltip').remove();
                return;
            }

            offset = $(this.el).offset();

            $('<div/>')
                .addClass('tooltip')
                .append(
                    $('<p/>').text(this.model.getSoundDetail())
                )
                .css({left: (offset.left+25)+'px', top: (offset.top+30)+'px'})
                .appendTo('body')
                .delay(1000)
                .show(0);
        }
    });

    return SoundView;
});