Mirroring/kaamelott-soundboard
1
0
Fork 0
mirror of https://github.com/2ec0b4/kaamelott-soundboard.git synced 2025-12-08 23:53:24 +00:00
Code Releases Activity

Révise l'utilisation de require

Browse Source
This commit is contained in:
Antoine
2016-05-29 20:47:35 +02:00
parent 77f1820fa5
commit 0ce3b318e4
14 changed files with 309 additions and 345 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
css/style.css
View File

@@ -162,6 +162,9 @@ header h1 {
* FOOTER * FOOTER
* ----------------------------------------------------------------------------- * -----------------------------------------------------------------------------
*/ */
.likely {
opacity: 0;
}
footer { footer {
height: 40px; height: 40px;
text-align: center; text-align: center;
@@ -481,12 +484,12 @@ noscript p {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
#app { #main {
margin: 0 auto; margin: 0 auto;
padding: 0; padding: 0;
width: 90%; width: 90%;
} }
#app .uil-ring-css { #main .uil-ring-css {
margin: 0 auto; margin: 0 auto;
-ms-transform: scale(0.4); -ms-transform: scale(0.4);
-webkit-transform: scale(0.4); -webkit-transform: scale(0.4);
@@ -562,7 +565,7 @@ noscript p {
.ribbon { .ribbon {
display: none; display: none;
} }
#app { #main {
padding-bottom: 50px; padding-bottom: 50px;
padding-top: 90px; padding-top: 90px;
} }
@@ -576,7 +579,7 @@ noscript p {
header h1 { header h1 {
font-size: 1.6em; font-size: 1.6em;
} }
#app { #main {
padding-top: 75px; padding-top: 75px;
} }
} }

7
index.html
View File

@@ -45,7 +45,6 @@
<meta itemprop="description" content="Quelques-unes des meilleures répliques sonores de Kaamelott. C'était ça ou chante Sloubi."> <meta itemprop="description" content="Quelques-unes des meilleures répliques sonores de Kaamelott. C'était ça ou chante Sloubi.">
<meta itemprop="image" content="http://kaamelott-soundboard.2ec0b4.fr/img/ks.jpg"> <meta itemprop="image" content="http://kaamelott-soundboard.2ec0b4.fr/img/ks.jpg">
<link rel="stylesheet" href="/js/vendor/likely/likely.css" media="screen">
<link rel="stylesheet" href="/css/style.css" media="screen"> <link rel="stylesheet" href="/css/style.css" media="screen">
</head> </head>
<body> <body>
@@ -56,13 +55,13 @@
<h1>Kaamelott Soundboard</h1> <h1>Kaamelott Soundboard</h1>
</header> </header>
<div id="app"> <main id="main" class="site-main" role="main">
<noscript> <noscript>
<p>Ça va mal se mettre si JavaScript n'est pas activé sur votre navigateur</p> <p>Ça va mal se mettre si JavaScript n'est pas activé sur votre navigateur</p>
</noscript> </noscript>
<div class="uil-ring-css"><div></div></div> <div class="uil-ring-css"><div></div></div>
</div> </main>
<footer> <footer>
<div class="likely likely-light" data-url="http://kaamelott-soundboard.2ec0b4.fr/"> <div class="likely likely-light" data-url="http://kaamelott-soundboard.2ec0b4.fr/">
@@ -73,6 +72,6 @@
</footer> </footer>
</div> </div>
<script data-main="/js/app/app" src="/js/vendor/require/require.js"></script> <script data-main="/js/app/main" src="/node_modules/requirejs/require.js"></script>
</body> </body>
</html> </html>

75
js/app/app.js
View File

@@ -1,53 +1,44 @@
requirejs(['main'], function () { define('app', function(require) {
"use strict"; var Marionette = require('marionette'),
require([ Radio = require('backbone.radio'),
'backbone', SoundboardController = require('controllers/soundboard'),
'jquery', app;
'marionette',
'underscore',
'likely',
'controllers/soundboard',
'views/main'
],
function(Backbone, $, Marionette, _, Likely,
SoundboardController,
MainView) {
"use strict";
var initialize = function initialize() { require('css!../../node_modules/ilyabirman-likely/release/likely.css');
window.App = (window.App) || new Marionette.Application(); require('likely');
App.on("start", start); app = Marionette.Application.extend({
initialize: function intialize() {
this.addRegions({
'mainRegion': "#main"
});
App.addRegions({ Radio.channel('app').reply('region:show', this.showRegion.bind(this));
'app': '#app'
});
App.controllers = {}; this.router = new Marionette.AppRouter();
App.controllers.soundboard = new SoundboardController();
App.router = new Marionette.AppRouter(); this.start();
},
App.router.processAppRoutes(App.controllers.soundboard, { start: function start() {
"": "index" var soundboardController = new SoundboardController();
});
App.start(); this.router.processAppRoutes(soundboardController, {
}; "": "index"
});
var start = function () { if (Backbone.history) {
var mainView = new MainView(); Backbone.history.start();
App.getRegion('app').show(mainView); this.trigger("backbone:history:start");
}
if (Backbone.history) { likely.initiate();
Backbone.history.start(); },
App.trigger("backbone:history:start");
}
likely.initiate(); showRegion: function showRegion(params) {
}; this.mainRegion.show(params.view);
}
});
initialize(); return app;
}); });
}
);

51
js/app/collections/sounds.js
View File

@@ -1,33 +1,30 @@
define( define('collections/sounds', function(require) {
'collections/sounds', "use strict";
[
'backbone',
'underscore',
'models/sound'
],
function (Backbone, _, Sound) {
"use strict";
var Sounds = Backbone.Collection.extend({ var Backbone = require('backbone'),
model: Sound, Sound = require('models/sound'),
url: 'sounds/sounds.json', Sounds;
comparator: function(a, b) {
var str1 = a.get('title'),
str2 = b.get('title');
return str1.localeCompare(str2); Sounds = Backbone.Collection.extend({
}, model: Sound,
filterByTitle: function(search){ url: 'sounds/sounds.json',
if( search == "" ) { comparator: function(a, b) {
return this; var str1 = a.get('title'),
} str2 = b.get('title');
var pattern = new RegExp(search, 'gi'); return str1.localeCompare(str2);
return new Sounds(this.filter(function(data) { },
return pattern.test(data.get('title')) || pattern.test(data.get('character')); filterByTitle: function(search){
})); if( search == "" ) {
return this;
} }
});
return Sounds; var pattern = new RegExp(search, 'gi');
return new Sounds(this.filter(function(data) {
return pattern.test(data.get('title')) || pattern.test(data.get('character'));
}));
}
});
return Sounds;
}); });

37
js/app/controllers/soundboard.js
View File

@@ -1,23 +1,22 @@
define( define('controllers/soundboard', function(require) {
'controllers/soundboard', "use strict";
[
'marionette',
'radios/sounds',
'views/soundboard'
],
function (Marionette, SoundsRadio, SoundboardView) {
"use strict";
var SoundboardController = Marionette.Object.extend({ var Marionette = require('marionette'),
initialize: function() { Radio = require('backbone.radio'),
this.soundsRadio = new SoundsRadio(); SoundsRadio = require('radios/sounds'),
}, SoundboardView = require('views/soundboard'),
index: function() { SoundboardController;
var currentView = App.getRegion('app').currentView;
currentView.showChildView('main', new SoundboardView()); SoundboardController = Marionette.Object.extend({
} initialize: function() {
}); var soundsRadio = new SoundsRadio();
},
index: function() {
var view = new SoundboardView();
return SoundboardController; Radio.channel('app').request('region:show', { view: view });
}
});
return SoundboardController;
}); });

41
js/app/main.js
View File

@@ -1,25 +1,36 @@
requirejs.config({ require.config({
baseUrl: 'js/app', baseUrl: 'js/app',
urlArgs:'t=160525', urlArgs:'t=160525',
paths: { paths: {
'backbone': '/js/vendor/backbone/backbone-min', 'backbone': '../../node_modules/backbone/backbone-min',
'backbone.radio': '/js/vendor/backbone/plugins/backbone.radio/backbone.radio.min', 'backbone.radio': '../../node_modules/backbone.radio/build/backbone.radio',
'hbs': '/js/vendor/require/plugins/require-handlebars-plugin/hbs', 'css': '../../node_modules/require-css/css',
'jquery': '/js/vendor/jquery/jquery-1.12.2.min', 'handlebars': '../../node_modules/handlebars/dist/handlebars.min',
'likely': '/js/vendor/likely/likely', 'hbs': '../../node_modules/requirejs-handlebars/hb',
'marionette': '/js/vendor/marionette/backbone.marionette.min', 'jquery': '../../node_modules/jquery/dist/jquery.min',
'underscore': '/js/vendor/underscore/underscore-min' 'likely': '../../node_modules/ilyabirman-likely/release/likely',
}, 'marionette': '../../node_modules/backbone.marionette/lib/backbone.marionette.min',
hbs: { 'text': '../../node_modules/requirejs-text/text',
"templateExtension": "hbs", 'underscore': '../../node_modules/underscore/underscore-min',
"hbs/underscore": "underscore" 'app': './app'
}, },
shim: { shim: {
'likely' : { 'backbone': {
exports: 'likely' deps: ['underscore', 'jquery'],
exports: 'Backbone'
},
'hbs': {
'templateExtension': 'hbs',
'hbs/underscore': 'underscore'
}, },
'marionette' : { 'marionette' : {
deps: ['jquery', 'backbone', 'underscore'] deps: ['backbone']
} }
} }
}); });
define(function(require) {
var App = require('app');
new App();
});

74
js/app/models/sound.js
View File

@@ -1,43 +1,41 @@
define( define('models/sound', function(require) {
'models/sound', "use strict";
[
'backbone'
],
function (Backbone) {
"use strict";
var Sound = Backbone.Model.extend({ var Backbone = require('backbone'),
audio: null, Sound;
defaults: {
title: "",
character: "",
episode: "",
file: "",
playing: false
},
play: function() {
if( !this.audio ) {
this.audio = new Audio('sounds/'+this.get('file'));
}
this.audio.play(); Sound = Backbone.Model.extend({
this.audio.onended = this.stop.bind(this); audio: null,
this.audio.onpause = this.stop.bind(this); defaults: {
title: "",
this.set('playing', true); character: "",
}, episode: "",
stop: function() { file: "",
if( this.audio && !this.audio.paused ) { playing: false
this.audio.pause(); },
this.audio.load(); play: function() {
} if( !this.audio ) {
this.audio = new Audio('sounds/'+this.get('file'));
this.set('playing', false);
},
getSoundDetail: function() {
return this.get('character')+', '+this.get('episode');
} }
});
return Sound; this.audio.play();
this.audio.onended = this.stop.bind(this);
this.audio.onpause = this.stop.bind(this);
this.set('playing', true);
},
stop: function() {
if( this.audio && !this.audio.paused ) {
this.audio.pause();
this.audio.load();
}
this.set('playing', false);
},
getSoundDetail: function() {
return this.get('character')+', '+this.get('episode');
}
});
return Sound;
}); });

38
js/app/radios/sounds.js
View File

@@ -1,25 +1,23 @@
define( define('radios/sounds', function(require) {
'radios/sounds', "use strict";
[
'marionette',
'backbone.radio',
'collections/sounds'
],
function (Marionette, Radio, SoundsCollection) {
"use strict";
var SoundsRadio = Marionette.Object.extend({ var Marionette = require('marionette'),
initialize : function () { Radio = require('backbone.radio'),
this.channel = Radio.channel('Sounds'); SoundsCollection = require('collections/sounds'),
SoundsRadio;
this.channel.reply('getSounds', this.getSounds.bind(this)); SoundsRadio = Marionette.Object.extend({
}, initialize : function () {
getSounds: function() { this.channel = Radio.channel('Sounds');
var soundsCollection = new SoundsCollection();
return soundsCollection.fetch(); this.channel.reply('getSounds', this.getSounds.bind(this));
} },
}); getSounds: function() {
var soundsCollection = new SoundsCollection();
return SoundsRadio; return soundsCollection.fetch();
}
});
return SoundsRadio;
}); });

3
js/app/templates/main.hbs
View File

@@ -1,3 +0,0 @@
<main class="site-main" role="main">
</main>

54
js/app/views/filter.js
View File

@@ -1,32 +1,30 @@
define( define('views/filter', function(require) {
'views/filter', "use strict";
[
'marionette',
'backbone.radio',
'hbs!templates/filter'
],
function (Marionette, Radio, SoundsFilterTemplate) {
"use strict";
var SoundsFilterView = Marionette.LayoutView.extend({ var Marionette = require('marionette'),
template: SoundsFilterTemplate, Radio = require('backbone.radio'),
ui: { SoundsFilterTemplate = require('hbs!templates/filter.hbs'),
searchForm: 'form', SoundsFilterView;
searchField: 'form input[name="s"]'
},
events: {
'submit @ui.searchForm': 'filterSounds',
'keyup @ui.searchField': 'filterSounds'
},
initialize: function() {
this.channel = Radio.channel('Sounds');
},
filterSounds: function(e) {
e.preventDefault();
this.channel.trigger('sounds:filter', $(this.ui.searchField).val()); SoundsFilterView = Marionette.LayoutView.extend({
} template: SoundsFilterTemplate,
}); ui: {
searchForm: 'form',
searchField: 'form input[name="s"]'
},
events: {
'submit @ui.searchForm': 'filterSounds',
'keyup @ui.searchField': 'filterSounds'
},
initialize: function() {
this.channel = Radio.channel('Sounds');
},
filterSounds: function(e) {
e.preventDefault();
return SoundsFilterView; this.channel.trigger('sounds:filter', $(this.ui.searchField).val());
}
});
return SoundsFilterView;
}); });

18
js/app/views/main.js
View File

@@ -1,18 +0,0 @@
define(
'views/main',
[
'marionette',
'hbs!templates/main'
],
function (Marionette, MainTemplate) {
"use strict";
var MainView = Marionette.LayoutView.extend({
template: MainTemplate,
regions: {
'main': 'main'
}
});
return MainView;
});

120
js/app/views/sound.js
View File

@@ -1,69 +1,67 @@
define( define('views/sound', function(require) {
'views/sound', "use strict";
[
'marionette',
'models/sound',
'hbs!templates/sound'
],
function (Marionette, SoundModel, SoundBlockTemplate) {
"use strict";
var SoundBlockView = Marionette.ItemView.extend({ var Marionette = require('marionette'),
template: SoundBlockTemplate, SoundModel = require('models/sound'),
model: SoundModel, SoundTemplate = require('hbs!templates/sound.hbs'),
tagName: 'li', SoundView;
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') ) { SoundView = Marionette.ItemView.extend({
this.trigger('sound:stop'); 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();
this.model.stop(); if( this.model.get('playing') ) {
} else { this.trigger('sound:stop');
this.trigger('sound:play');
this.model.play(); this.model.stop();
} } else {
}, this.trigger('sound: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') { this.model.play();
$('.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);
} }
}); },
playingAttributeChanged: function() {
if( this.model.get('playing') ) {
$(this.ui.soundItem).addClass('playing');
} else {
$(this.ui.soundItem).removeClass('playing');
}
},
toggleSoundDetail: function(e) {
var offset;
return SoundBlockView; 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;
}); });

42
js/app/views/soundboard.js
View File

@@ -1,27 +1,23 @@
define( define('views/soundboard', function(require) {
'views/soundboard', "use strict";
[
'marionette',
'views/filter',
'views/sounds',
'hbs!templates/soundboard'
],
function (Marionette, SoundsFilterView, SoundsView, SoundboardTemplate) {
"use strict";
var SoundboardView = Marionette.LayoutView.extend({ var Marionette = require('marionette'),
template: SoundboardTemplate, SoundsFilterView = require('views/filter'),
regions: { SoundsView = require('views/sounds'),
'filter': '#filter', SoundboardTemplate = require('hbs!templates/soundboard.hbs'),
'list': '#list' SoundboardView;
},
onShow: function() {
this.showChildView('filter', new SoundsFilterView()); SoundboardView = Marionette.LayoutView.extend({
this.showChildView('list', new SoundsView()); template: SoundboardTemplate,
regions: {
'filter': '#filter',
'list': '#list'
},
onShow: function() {
this.showChildView('filter', new SoundsFilterView());
this.showChildView('list', new SoundsView());
}
});
} return SoundboardView;
});
return SoundboardView;
}); });

83
js/app/views/sounds.js
View File

@@ -1,52 +1,49 @@
define( define('views/sounds', function(require) {
'views/sounds', "use strict";
[
'marionette',
'backbone.radio',
'underscore',
'collections/sounds',
'views/sound'
],
function (Marionette, Radio, _, SoundsCollection, SoundView) {
"use strict";
var SoundsCollectionView = Marionette.CollectionView.extend({ var Marionette = require('marionette'),
childView: SoundView, Radio = require('backbone.radio'),
collection: new SoundsCollection(), SoundsCollection = require('collections/sounds'),
tagName: 'ul', SoundView = require('views/sound'),
childEvents: { SoundsCollectionView;
'sound:play': 'stopPlayingSound'
},
initialize: function() {
var that = this;
this.data = { SoundsCollectionView = Marionette.CollectionView.extend({
collection: this.collection childView: SoundView,
}; collection: new SoundsCollection(),
tagName: 'ul',
childEvents: {
'sound:play': 'stopPlayingSound'
},
initialize: function() {
var that = this;
this.channel = Radio.channel('Sounds'); this.data = {
this.channel.request('getSounds').then(this.initCollection.bind(this)); collection: this.collection
this.channel.on('sounds:filter', this.filterCollection.bind(this)); };
},
initCollection: function(sounds) {
this.data.collection = new SoundsCollection(sounds);
this.collection = this.data.collection;
this.render(); this.channel = Radio.channel('Sounds');
}, this.channel.request('getSounds').then(this.initCollection.bind(this));
filterCollection: function(search) { this.channel.on('sounds:filter', this.filterCollection.bind(this));
this.collection = this.data.collection.filterByTitle(search); },
initCollection: function(sounds) {
this.data.collection = new SoundsCollection(sounds);
this.collection = this.data.collection;
this.render(); this.render();
}, },
stopPlayingSound: function() { filterCollection: function(search) {
var playingSound = this.collection.findWhere({playing: true}); this.collection = this.data.collection.filterByTitle(search);
if( playingSound ) { this.render();
playingSound.stop(); },
} stopPlayingSound: function() {
var playingSound = this.collection.findWhere({playing: true});
if( playingSound ) {
playingSound.stop();
} }
}); }
});
return SoundsCollectionView; return SoundsCollectionView;
}); });