(petosorus-random_button) Merge branch 'random_button' of https://github.com/petosorus/kaamelott-soundboard into petosorus-random_button

* 'random_button' of https://github.com/petosorus/kaamelott-soundboard:
  styling
  Filtrage lors de l'aléatoire
  Proto bouton aléatoire

css/style.css

@@ -497,6 +497,10 @@ textarea {
 input[type="text"] {
     height: 34px;
 }
+span {
+    display: flex;
+    justify-content: center;
+}
 .btn, .btn:hover, .btn:focus,
 a.btn, a.btn:hover, a.btn:focus {
     background-color: #CB4D59;
@@ -561,6 +565,50 @@ a.btn:active {
     top:3px;
     border-bottom: 0;
 }
+.random, .random:hover, .random:focus,
+a.random, a.random:hover, a.random:focus {
+    background-color: #18AE90;
+    background-image: none;
+    border: 0;
+    border-bottom: 3px solid #017F66;
+    border-radius: 0;
+    color: #FEFDFD;
+    cursor: pointer;
+    display: inline-block;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 1.42857;
+    outline: none;
+    padding: 5px 20px;
+    position: relative;
+    text-decoration: none;
+    vertical-align: top;
+    white-space: nowrap;
+    -moz-user-select: none;
+    -webkit-appearance: none;
+}
+.reset, .reset:hover, .reset:focus,
+a.reset, a.reset:hover, a.reset:focus {
+    background-color: #CB4D59;
+    background-image: none;
+    border: 0;
+    border-bottom: 3px solid #8B121E;
+    border-radius: 0;
+    color: #FEFDFD;
+    cursor: pointer;
+    display: inline-block;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 1.42857;
+    outline: none;
+    padding: 5px 20px;
+    position: relative;
+    text-decoration: none;
+    vertical-align: top;
+    white-space: nowrap;
+    -moz-user-select: none;
+    -webkit-appearance: none;
+}
 /**
 * GENERAL
 * -----------------------------------------------------------------------------

js/app/app.js

@@ -20,6 +20,7 @@ define("app", function(require) {
             Radio.channel("App").reply("region:show", this.showRegion.bind(this));
             Radio.channel("App").reply("modal:show", this.showModal.bind(this));
             Radio.channel("Sounds").on("sound:play", this.changeUrl.bind(this));
+            Radio.channel("Sounds").on("sound:stop", this.resetUrl.bind(this));
 
             this.router = new Marionette.AppRouter();
 
@@ -46,6 +47,10 @@ define("app", function(require) {
             this.router.navigate("son/"+slug);
         },
 
+        resetUrl: function() {
+            this.router.navigate("/");
+        },
+
         showRegion: function showRegion(params) {
             this.mainRegion.show(params.view);
         },

js/app/collections/sounds.js

@@ -14,6 +14,15 @@ define("collections/sounds", function(require) {
 
             return str1.localeCompare(str2);
         },
+        filterByCid: function(cid) {
+            if(cid == "") {
+                return this;
+            }
+
+            return new Sounds(this.filter(function(data) {
+                return data.cid == cid;
+            }));
+        },
         filterByTitle: function(search){
             var that    = this,
                 pattern;
@@ -25,7 +34,7 @@ define("collections/sounds", function(require) {
             pattern     = new RegExp(this.removeDiacritics(search), "gi");
             return new Sounds(this.filter(function(data) {
                 pattern.lastIndex = 0;
-                
+
                 return pattern.test(that.removeDiacritics(data.get("title")))
                     || pattern.test(that.removeDiacritics(data.get("character")))
                     || pattern.test(that.removeDiacritics(data.get("episode")));

js/app/templates/random.hbs

@@ -0,0 +1,2 @@
+<button id="random" class="random">🎲</button>
+<button id="reset" class="reset">❌</button>

js/app/templates/soundboard.hbs

@@ -1,6 +1,12 @@
-<div id="filter">
+<span>
+    <div id="filter">
 
-</div>
+    </div>
+
+    <div id="random">
+
+    </div>
+</span>
 
 <div id="list">
 

js/app/views/random.js

@@ -0,0 +1,31 @@
+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: "#random",
+            resetButton: "#reset"
+        },
+        events: {
+            "click @ui.randomButton": "random",
+            "click @ui.resetButton": "reset"
+        },
+        initialize: function() {
+            this.channel    = Radio.channel("Sounds");
+        },
+        random: function() {
+            this.channel.trigger("sounds:random");
+        },
+        reset: function() {
+            this.channel.trigger("sounds:reset");
+        }
+    });
+
+    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,8 @@ 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));
+            this.channel.on("sounds:reset", this.resetCollection.bind(this));
         },
         onBeforeRender: function() {
             var sound;
@@ -52,11 +54,32 @@ define("views/sounds", function(require) {
 
             this.render();
         },
+        filterCollectionByCid: function(cid) {
+            this.collection = this.data.collection.filterByCid(cid);
+
+            this.render();
+        },
         manageSounds: function(args) {
             this.stopPlayingSound();
 
             Radio.channel("Sounds").trigger("sound:play", args.model.getSlug());
         },
+        randomSound: function() {
+            this.stopPlayingSound();
+
+            this.filterCollection("");
+            var index = Math.floor(Math.random() * Math.floor(this.collection.length));
+            var sound = this.collection.models[index];
+            this.filterCollectionByCid(sound.cid);
+
+            Radio.channel("Sounds").trigger("sound:play", sound.getSlug());
+            sound.play();
+        },
+        resetCollection: function() {
+            this.filterCollection("");
+
+            Radio.channel("Sounds").trigger("sound:stop");
+        },
         stopPlayingSound: function() {
             var playingSound    = this.collection.findWhere({playing: true});