Proto bouton aléatoire

js/app/app.js

@@ -43,7 +43,7 @@ define("app", function(require) {
         },
 
         changeUrl: function(slug) {
-            this.router.navigate("son/"+slug);
+            this.router.navigate("son/"+slug, {trigger: true});
         },
 
         showRegion: function showRegion(params) {

js/app/templates/random.hbs

@@ -0,0 +1 @@
+<button>Son aléatoire</button>

js/app/templates/soundboard.hbs

@@ -2,6 +2,10 @@
 
 </div>
 
+<div id="random">
+
+</div>
+
 <div id="list">
 
 </div>

js/app/views/random.js

@@ -0,0 +1,26 @@
+define("views/random", function(require) {
+    "use strict";
+
+    var Marionette              = require("marionette"),
+        Radio                   = require("backbone.radio"),
+        RandomTemplate          = require("hbs!templates/random"),
+        RandomView;
+
+    RandomView = Marionette.LayoutView.extend({
+        template: RandomTemplate,
+        ui: {
+            randomButton: "button"
+        },
+        events: {
+            "click @ui.randomButton": "random"
+        },
+        initialize: function() {
+            this.channel    = Radio.channel("Sounds");
+        },
+        random: function() {
+            this.channel.trigger("sounds:random");
+        }
+    });
+
+    return RandomView;
+});

js/app/views/soundboard.js

@@ -3,6 +3,7 @@ define("views/soundboard", function(require) {
 
     var Marionette          = require("marionette"),
         SoundsFilterView    = require("views/filter"),
+        RandomView          = require("views/random"),
         SoundsView          = require("views/sounds"),
         SoundboardTemplate  = require("hbs!templates/soundboard"),
         SoundboardView;
@@ -11,6 +12,7 @@ define("views/soundboard", function(require) {
         template: SoundboardTemplate,
         regions: {
             regFilter: "#filter",
+            regRandom: "#random",
             regList: "#list"
         },
         initialize: function(options) {
@@ -18,6 +20,7 @@ define("views/soundboard", function(require) {
         },
         onShow: function() {
             this.showChildView("regFilter", new SoundsFilterView());
+            this.showChildView("regRandom", new RandomView());
             this.showChildView("regList", new SoundsView({
                 slug: this.slug
             }));

js/app/views/sounds.js

@@ -28,6 +28,7 @@ define("views/sounds", function(require) {
             this.channel    = Radio.channel("Sounds");
             this.channel.request("getSounds").then(this.initCollection.bind(this));
             this.channel.on("sounds:filter", this.filterCollection.bind(this));
+            this.channel.on("sounds:random", this.randomSound.bind(this));
         },
         onBeforeRender: function() {
             var sound;
@@ -57,6 +58,13 @@ define("views/sounds", function(require) {
 
             Radio.channel("Sounds").trigger("sound:play", args.model.getSlug());
         },
+        randomSound: function() {
+            var index = Math.floor(Math.random() * Math.floor(this.collection.length));
+            var sound = this.collection.models[index];
+
+            Radio.channel("Sounds").trigger("sound:play", sound.getSlug());
+            // sound.play();
+        },
         stopPlayingSound: function() {
             var playingSound    = this.collection.findWhere({playing: true});