From 0261f2b86b25aabea9d61c5c5d0afe9deae24060 Mon Sep 17 00:00:00 2001 From: Thomas Graviou Date: Wed, 16 Oct 2019 11:28:49 +0200 Subject: [PATCH 1/8] =?UTF-8?q?Proto=20bouton=20al=C3=A9atoire?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/app/app.js | 2 +- js/app/templates/random.hbs | 1 + js/app/templates/soundboard.hbs | 4 ++++ js/app/views/random.js | 26 ++++++++++++++++++++++++++ js/app/views/soundboard.js | 3 +++ js/app/views/sounds.js | 8 ++++++++ 6 files changed, 43 insertions(+), 1 deletion(-) create mode 100644 js/app/templates/random.hbs create mode 100644 js/app/views/random.js diff --git a/js/app/app.js b/js/app/app.js index a6aab82..9ab12ba 100644 --- a/js/app/app.js +++ b/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) { diff --git a/js/app/templates/random.hbs b/js/app/templates/random.hbs new file mode 100644 index 0000000..98b82d5 --- /dev/null +++ b/js/app/templates/random.hbs @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/js/app/templates/soundboard.hbs b/js/app/templates/soundboard.hbs index a284c03..c7e20d0 100644 --- a/js/app/templates/soundboard.hbs +++ b/js/app/templates/soundboard.hbs @@ -2,6 +2,10 @@ +
+ +
+
diff --git a/js/app/views/random.js b/js/app/views/random.js new file mode 100644 index 0000000..328863b --- /dev/null +++ b/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; +}); diff --git a/js/app/views/soundboard.js b/js/app/views/soundboard.js index 97bd4bc..32999ea 100644 --- a/js/app/views/soundboard.js +++ b/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 })); diff --git a/js/app/views/sounds.js b/js/app/views/sounds.js index 6a830f2..d22ff63 100644 --- a/js/app/views/sounds.js +++ b/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}); From aa163e62e1e13acc654911533e1b01ec34667589 Mon Sep 17 00:00:00 2001 From: Thomas Graviou Date: Fri, 25 Oct 2019 14:25:51 +0200 Subject: [PATCH 2/8] =?UTF-8?q?Filtrage=20lors=20de=20l'al=C3=A9atoire?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/app/app.js | 7 ++++++- js/app/collections/sounds.js | 11 ++++++++++- js/app/templates/random.hbs | 3 ++- js/app/views/random.js | 9 +++++++-- js/app/views/sounds.js | 15 ++++++++++++++- 5 files changed, 39 insertions(+), 6 deletions(-) diff --git a/js/app/app.js b/js/app/app.js index 9ab12ba..6c88f33 100644 --- a/js/app/app.js +++ b/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(); @@ -43,7 +44,11 @@ define("app", function(require) { }, changeUrl: function(slug) { - this.router.navigate("son/"+slug, {trigger: true}); + this.router.navigate("son/"+slug); + }, + + resetUrl: function() { + this.router.navigate("/"); }, showRegion: function showRegion(params) { diff --git a/js/app/collections/sounds.js b/js/app/collections/sounds.js index 04d17da..0c126a5 100644 --- a/js/app/collections/sounds.js +++ b/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"))); diff --git a/js/app/templates/random.hbs b/js/app/templates/random.hbs index 98b82d5..8854272 100644 --- a/js/app/templates/random.hbs +++ b/js/app/templates/random.hbs @@ -1 +1,2 @@ - \ No newline at end of file + + \ No newline at end of file diff --git a/js/app/views/random.js b/js/app/views/random.js index 328863b..2089f5f 100644 --- a/js/app/views/random.js +++ b/js/app/views/random.js @@ -9,16 +9,21 @@ define("views/random", function(require) { RandomView = Marionette.LayoutView.extend({ template: RandomTemplate, ui: { - randomButton: "button" + randomButton: "#random", + resetButton: "#reset" }, events: { - "click @ui.randomButton": "random" + "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"); } }); diff --git a/js/app/views/sounds.js b/js/app/views/sounds.js index d22ff63..6f4321f 100644 --- a/js/app/views/sounds.js +++ b/js/app/views/sounds.js @@ -29,6 +29,7 @@ define("views/sounds", function(require) { 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; @@ -53,17 +54,29 @@ 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.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(); + sound.play(); + }, + resetCollection: function() { + this.filterCollection(""); + + Radio.channel("Sounds").trigger("sound:stop"); }, stopPlayingSound: function() { var playingSound = this.collection.findWhere({playing: true}); From e8362190219d56f26e2c8085f7a88d6634445ad9 Mon Sep 17 00:00:00 2001 From: Thomas Graviou Date: Mon, 4 Nov 2019 13:41:56 +0100 Subject: [PATCH 3/8] styling --- css/style.css | 48 +++++++++++++++++++++++++++++++++ js/app/templates/random.hbs | 4 +-- js/app/templates/soundboard.hbs | 10 ++++--- js/app/views/sounds.js | 2 ++ 4 files changed, 58 insertions(+), 6 deletions(-) diff --git a/css/style.css b/css/style.css index 22180d5..53465a9 100644 --- a/css/style.css +++ b/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 * ----------------------------------------------------------------------------- diff --git a/js/app/templates/random.hbs b/js/app/templates/random.hbs index 8854272..7470cfd 100644 --- a/js/app/templates/random.hbs +++ b/js/app/templates/random.hbs @@ -1,2 +1,2 @@ - - \ No newline at end of file + + \ No newline at end of file diff --git a/js/app/templates/soundboard.hbs b/js/app/templates/soundboard.hbs index c7e20d0..7eb31fa 100644 --- a/js/app/templates/soundboard.hbs +++ b/js/app/templates/soundboard.hbs @@ -1,10 +1,12 @@ -
+ +
-
+
-
+
-
+
+
diff --git a/js/app/views/sounds.js b/js/app/views/sounds.js index 6f4321f..60beaf2 100644 --- a/js/app/views/sounds.js +++ b/js/app/views/sounds.js @@ -65,6 +65,8 @@ define("views/sounds", function(require) { 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]; From aab98d7e8d5fe64a42a7f9f45c35e003d9c602bc Mon Sep 17 00:00:00 2001 From: Thomas Graviou Date: Tue, 28 Jan 2020 13:22:01 +0100 Subject: [PATCH 4/8] Random button styling --- css/style.css | 39 +++++++++++---------------------- js/app/templates/random.hbs | 4 ++-- js/app/templates/soundboard.hbs | 10 ++++----- js/app/views/random.js | 2 ++ 4 files changed, 21 insertions(+), 34 deletions(-) diff --git a/css/style.css b/css/style.css index 53465a9..145b22c 100644 --- a/css/style.css +++ b/css/style.css @@ -497,10 +497,6 @@ 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; @@ -565,28 +561,6 @@ 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; @@ -633,6 +607,9 @@ noscript p { margin: 0; padding: 0; } +.hidden { + display: none !important; +} .invisible { visibility: hidden; } @@ -659,6 +636,16 @@ noscript p { width: 100%; z-index: 10000; } +#random > div { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; +} +#random > div > button { + display: flex; + margin: 5px 5px 0 5px; +} #filter { text-align: center; } diff --git a/js/app/templates/random.hbs b/js/app/templates/random.hbs index 7470cfd..0efcdc0 100644 --- a/js/app/templates/random.hbs +++ b/js/app/templates/random.hbs @@ -1,2 +1,2 @@ - - \ No newline at end of file + + \ No newline at end of file diff --git a/js/app/templates/soundboard.hbs b/js/app/templates/soundboard.hbs index 7eb31fa..c7e20d0 100644 --- a/js/app/templates/soundboard.hbs +++ b/js/app/templates/soundboard.hbs @@ -1,12 +1,10 @@ - -
+
-
+
-
+
-
- +
diff --git a/js/app/views/random.js b/js/app/views/random.js index 2089f5f..90e7269 100644 --- a/js/app/views/random.js +++ b/js/app/views/random.js @@ -20,9 +20,11 @@ define("views/random", function(require) { this.channel = Radio.channel("Sounds"); }, random: function() { + this.$el.find(this.ui.resetButton).removeClass('hidden'); this.channel.trigger("sounds:random"); }, reset: function() { + this.$el.find(this.ui.resetButton).addClass('hidden'); this.channel.trigger("sounds:reset"); } }); From 8c38fde4b2e9c98fa016f0c30a64ebb94772e076 Mon Sep 17 00:00:00 2001 From: Antoine Date: Tue, 11 Feb 2020 22:49:21 +0100 Subject: [PATCH 5/8] =?UTF-8?q?(petosorus-random=5Fbutton)=20Active=20/=20?= =?UTF-8?q?d=C3=A9sactive=20le=20bouton?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/style.css | 5 +++++ js/app/templates/random.hbs | 2 +- js/app/views/random.js | 14 ++++++++++++-- 3 files changed, 18 insertions(+), 3 deletions(-) diff --git a/css/style.css b/css/style.css index 145b22c..0f0a8e6 100644 --- a/css/style.css +++ b/css/style.css @@ -583,6 +583,11 @@ a.reset, a.reset:hover, a.reset:focus { -moz-user-select: none; -webkit-appearance: none; } +.btn[disabled], .btn[disabled]:hover, .btn[disabled]:focus { + background-color: #CCCCCC; + border-bottom: 3px solid #777777; + color: #777777; +} /** * GENERAL * ----------------------------------------------------------------------------- diff --git a/js/app/templates/random.hbs b/js/app/templates/random.hbs index 0efcdc0..825b695 100644 --- a/js/app/templates/random.hbs +++ b/js/app/templates/random.hbs @@ -1,2 +1,2 @@ - \ No newline at end of file + diff --git a/js/app/views/random.js b/js/app/views/random.js index 90e7269..01cb998 100644 --- a/js/app/views/random.js +++ b/js/app/views/random.js @@ -17,15 +17,25 @@ define("views/random", function(require) { "click @ui.resetButton": "reset" }, initialize: function() { + var that = this; this.channel = Radio.channel("Sounds"); + this.channel.on("sounds:filter", function (value) { + if (value == "") { + return; + } + that.enableButton(); + }); }, random: function() { - this.$el.find(this.ui.resetButton).removeClass('hidden'); + this.enableButton(); this.channel.trigger("sounds:random"); }, reset: function() { - this.$el.find(this.ui.resetButton).addClass('hidden'); + this.$el.find(this.ui.resetButton).attr('disabled', 'disabled'); this.channel.trigger("sounds:reset"); + }, + enableButton: function() { + this.$el.find(this.ui.resetButton).removeAttr('disabled'); } }); From a102c7b9e3f878dce73775a4bacf3f3ca91e76ca Mon Sep 17 00:00:00 2001 From: Antoine Date: Tue, 11 Feb 2020 22:49:47 +0100 Subject: [PATCH 6/8] =?UTF-8?q?(petosorus-random=5Fbutton)=20R=C3=A9initia?= =?UTF-8?q?lise=20=C3=A9galement=20le=20filtre?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/app/views/filter.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/js/app/views/filter.js b/js/app/views/filter.js index e5abfd4..8492f24 100644 --- a/js/app/views/filter.js +++ b/js/app/views/filter.js @@ -20,6 +20,7 @@ define("views/filter", function(require) { }, initialize: function() { this.channel = Radio.channel("Sounds"); + this.channel.on("sounds:reset", this.resetFilter.bind(this)); }, filterSounds: function(e) { var value = this.$el.find(this.ui.searchField).val(); @@ -35,7 +36,9 @@ define("views/filter", function(require) { this.channel.trigger("sounds:filter", value); }, resetFilter: function(e) { - e.preventDefault(); + if (e) { + e.preventDefault(); + } this.$el.find(this.ui.searchField).val(''); this.$el.find(this.ui.searchForm).submit(); From 561d477e51d2757ed201f0a3e3cb0920ce581076 Mon Sep 17 00:00:00 2001 From: Antoine Date: Tue, 11 Feb 2020 22:50:16 +0100 Subject: [PATCH 7/8] =?UTF-8?q?(petosorus-random=5Fbutton)=20Am=C3=A9liore?= =?UTF-8?q?=20les=20espacements=20des=20boutons?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/style.css | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/css/style.css b/css/style.css index 0f0a8e6..279eb43 100644 --- a/css/style.css +++ b/css/style.css @@ -642,14 +642,19 @@ noscript p { z-index: 10000; } #random > div { + margin-top: 2em; display: flex; flex-direction: row; justify-content: center; align-items: center; } -#random > div > button { - display: flex; - margin: 5px 5px 0 5px; +#random > div > .btn { + margin: 0; + text-align: center; + width: 120px; +} +#random > div > .btn + .btn { + margin-left: 20px; } #filter { text-align: center; From 9eb2d9c021afecf846c42b1452d15e7bfd2c2a48 Mon Sep 17 00:00:00 2001 From: Antoine Date: Sat, 15 Feb 2020 20:00:49 +0100 Subject: [PATCH 8/8] =?UTF-8?q?(petosorus-random=5Fbutton)=20Corrige=20un?= =?UTF-8?q?=20"faux-vrai"=20de=20r=C3=A9f=C3=A9rence=20de=20fichier=20vers?= =?UTF-8?q?ionn=C3=A9=20par=20Gulp?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- gulpfile.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/gulpfile.js b/gulpfile.js index 6c25bc2..17ad9d5 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -21,9 +21,9 @@ function referenceToRegexs(reference) { regExp; if (isJSReference) { - regExp = '('+ qoutes +')(' + escapedRefPathBase + ')()('+ qoutes + '|$)'; + regExp = '(data-main=(?:'+ qoutes +'))(' + escapedRefPathBase + ')()('+ qoutes + '|$)'; regExps.push(new RegExp(regExp, 'g')); - regExp = '(require\\\(['+ qoutes +'])(' + escapedRefPathBase.replace(/\\\/js\\\/app\\\//ig, '') + ')()(['+ qoutes +']\\\))'; + regExp = '((?:define|require)\\\(['+ qoutes +'])(' + escapedRefPathBase.replace(/\\\/js\\\/app\\\//ig, '') + ')()(['+ qoutes +'](?:\\\)|,))'; regExps.push(new RegExp(regExp, 'g')); } else if(isHBSReference) { regExp = '(require\\\(['+ qoutes +']hbs!)(' + escapedRefPathBase.replace(/\\\/js\\\/app\\\//ig, '') + ')()(['+ qoutes +']\\\))';