mirror of
https://github.com/2ec0b4/kaamelott-soundboard.git
synced 2025-12-08 23:53:24 +00:00
f7982f2309
* Permet la lecture d'un son passé en paramètre d'URL * Remplace du code créé par l'utilisation d'un template * Ajoute un bouton de partage * Ajoute une région pour gérer une modal * Affiche une modal de partage * Améliore le style du flash de sélection de son * Corrige un mauvais appel de fonction * Supprime la destruction de la vue au scroll de la fenêtre : le comportement n'est pas idéal sur iOS quand il y a le focus sur l'input * Ne joue pas automatiquement le son partagé sur iOS (après avoir tenté : https://paulbakaus.com/tutorials/html5/web-audio-on-ios/ ) * Permet d'éviter le zoom au focus sur l'input * Ajoute, dans le style, des préfixes manquants
90 lines
2.7 KiB
JavaScript
90 lines
2.7 KiB
JavaScript
define("views/sound", function(require) {
|
||
"use strict";
|
||
|
||
var Marionette = require("marionette"),
|
||
SoundModel = require("models/sound"),
|
||
SoundTemplate = require("hbs!templates/sound"),
|
||
SoundDetailTemplate = require("hbs!templates/soundDetail"),
|
||
SoundView;
|
||
|
||
SoundView = Marionette.ItemView.extend({
|
||
template: SoundTemplate,
|
||
model: SoundModel,
|
||
tagName: "li",
|
||
ui: {
|
||
btn: ".btn",
|
||
btnPlay: ".btn-play",
|
||
btnShare: ".btn-share"
|
||
},
|
||
events: {
|
||
"mouseenter @ui.btnPlay": "toggleSoundDetail",
|
||
"mouseleave @ui.btnPlay": "toggleSoundDetail",
|
||
"click @ui.btnPlay": "toggleSound"
|
||
},
|
||
triggers: {
|
||
"click @ui.btnShare": {
|
||
event: "sound:share",
|
||
preventDefault: true
|
||
},
|
||
},
|
||
initialize: function() {
|
||
this.listenTo(this.model, "change:playing", this.playingAttributeChanged);
|
||
},
|
||
onShow: function() {
|
||
var that = this,
|
||
height;
|
||
|
||
if( this.model.get('selected') ) {
|
||
height = $('header').outerHeight();
|
||
$('html, body').animate({scrollTop: this.$el.offset().top-height}, 750, 'swing', function() {
|
||
that.$el.find(that.ui.btn).addClass('flash');
|
||
});
|
||
|
||
if( !/iPhone|iPad|iPod/i.test(navigator.userAgent) ) {
|
||
this.$el.find(this.ui.btnPlay).click();
|
||
}
|
||
}
|
||
},
|
||
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.btnPlay).addClass("playing");
|
||
} else {
|
||
$(this.ui.btnPlay).removeClass("playing");
|
||
}
|
||
},
|
||
toggleSoundDetail: function(e) {
|
||
var offset,
|
||
template;
|
||
|
||
if (e.type === "mouseleave") {
|
||
$(".tooltip").remove();
|
||
return;
|
||
}
|
||
|
||
offset = $(this.el).offset();
|
||
template = SoundDetailTemplate({detail: this.model.getSoundDetail()});
|
||
|
||
$(template)
|
||
.css({left: (offset.left+25)+"px", top: (offset.top+30)+"px"})
|
||
.appendTo("body")
|
||
.delay(1000)
|
||
.show(0);
|
||
}
|
||
});
|
||
|
||
return SoundView;
|
||
});
|