Mirroring/kaamelott-soundboard
1
0
Fork 0
mirror of https://github.com/2ec0b4/kaamelott-soundboard.git synced 2025-12-08 15:43: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
* -----------------------------------------------------------------------------
*/
.likely {
opacity: 0;
}
footer {
height: 40px;
text-align: center;
@@ -481,12 +484,12 @@ noscript p {
margin: 0;
padding: 0;
}
#app {
#main {
margin: 0 auto;
padding: 0;
width: 90%;
}
#app .uil-ring-css {
#main .uil-ring-css {
margin: 0 auto;
-ms-transform: scale(0.4);
-webkit-transform: scale(0.4);
@@ -562,7 +565,7 @@ noscript p {
.ribbon {
display: none;
}
#app {
#main {
padding-bottom: 50px;
padding-top: 90px;
}
@@ -576,7 +579,7 @@ noscript p {
header h1 {
font-size: 1.6em;
}
#app {
#main {
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="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">
</head>
<body>
@@ -56,13 +55,13 @@
<h1>Kaamelott Soundboard</h1>
</header>
<div id="app">
<main id="main" class="site-main" role="main">
<noscript>
<p>Ça va mal se mettre si JavaScript n'est pas activé sur votre navigateur</p>
</noscript>
<div class="uil-ring-css"><div></div></div>
</div>
</main>
<footer>
<div class="likely likely-light" data-url="http://kaamelott-soundboard.2ec0b4.fr/">
@@ -73,6 +72,6 @@
</footer>
</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>
</html>

75
js/app/app.js
View File

@@ -1,53 +1,44 @@
requirejs(['main'], function () {
"use strict";
require([
'backbone',
'jquery',
'marionette',
'underscore',
'likely',
'controllers/soundboard',
'views/main'
],
function(Backbone, $, Marionette, _, Likely,
SoundboardController,
MainView) {
"use strict";
define('app', function(require) {
var Marionette = require('marionette'),
Radio = require('backbone.radio'),
SoundboardController = require('controllers/soundboard'),
app;
var initialize = function initialize() {
window.App = (window.App) || new Marionette.Application();
require('css!../../node_modules/ilyabirman-likely/release/likely.css');
require('likely');
App.on("start", start);
app = Marionette.Application.extend({
initialize: function intialize() {
this.addRegions({
'mainRegion': "#main"
});
App.addRegions({
'app': '#app'
});
Radio.channel('app').reply('region:show', this.showRegion.bind(this));
App.controllers = {};
App.controllers.soundboard = new SoundboardController();
this.router = new Marionette.AppRouter();
App.router = new Marionette.AppRouter();
this.start();
},
App.router.processAppRoutes(App.controllers.soundboard, {
"": "index"
});
start: function start() {
var soundboardController = new SoundboardController();
App.start();
};
this.router.processAppRoutes(soundboardController, {
"": "index"
});
var start = function () {
var mainView = new MainView();
App.getRegion('app').show(mainView);
if (Backbone.history) {
Backbone.history.start();
this.trigger("backbone:history:start");
}
if (Backbone.history) {
Backbone.history.start();
App.trigger("backbone:history:start");
}
likely.initiate();
},
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(
'collections/sounds',
[
'backbone',
'underscore',
'models/sound'
],
function (Backbone, _, Sound) {
"use strict";
define('collections/sounds', function(require) {
"use strict";
var Sounds = Backbone.Collection.extend({
model: Sound,
url: 'sounds/sounds.json',
comparator: function(a, b) {
var str1 = a.get('title'),
str2 = b.get('title');
var Backbone = require('backbone'),
Sound = require('models/sound'),
Sounds;
return str1.localeCompare(str2);
},
filterByTitle: function(search){
if( search == "" ) {
return this;
}
Sounds = Backbone.Collection.extend({
model: Sound,
url: 'sounds/sounds.json',
comparator: function(a, b) {
var str1 = a.get('title'),
str2 = b.get('title');
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 str1.localeCompare(str2);
},
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(
'controllers/soundboard',
[
'marionette',
'radios/sounds',
'views/soundboard'
],
function (Marionette, SoundsRadio, SoundboardView) {
"use strict";
define('controllers/soundboard', function(require) {
"use strict";
var SoundboardController = Marionette.Object.extend({
initialize: function() {
this.soundsRadio = new SoundsRadio();
},
index: function() {
var currentView = App.getRegion('app').currentView;
var Marionette = require('marionette'),
Radio = require('backbone.radio'),
SoundsRadio = require('radios/sounds'),
SoundboardView = require('views/soundboard'),
SoundboardController;
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',
urlArgs:'t=160525',
paths: {
'backbone': '/js/vendor/backbone/backbone-min',
'backbone.radio': '/js/vendor/backbone/plugins/backbone.radio/backbone.radio.min',
'hbs': '/js/vendor/require/plugins/require-handlebars-plugin/hbs',
'jquery': '/js/vendor/jquery/jquery-1.12.2.min',
'likely': '/js/vendor/likely/likely',
'marionette': '/js/vendor/marionette/backbone.marionette.min',
'underscore': '/js/vendor/underscore/underscore-min'
},
hbs: {
"templateExtension": "hbs",
"hbs/underscore": "underscore"
'backbone': '../../node_modules/backbone/backbone-min',
'backbone.radio': '../../node_modules/backbone.radio/build/backbone.radio',
'css': '../../node_modules/require-css/css',
'handlebars': '../../node_modules/handlebars/dist/handlebars.min',
'hbs': '../../node_modules/requirejs-handlebars/hb',
'jquery': '../../node_modules/jquery/dist/jquery.min',
'likely': '../../node_modules/ilyabirman-likely/release/likely',
'marionette': '../../node_modules/backbone.marionette/lib/backbone.marionette.min',
'text': '../../node_modules/requirejs-text/text',
'underscore': '../../node_modules/underscore/underscore-min',
'app': './app'
},
shim: {
'likely' : {
exports: 'likely'
'backbone': {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
},
'hbs': {
'templateExtension': 'hbs',
'hbs/underscore': 'underscore'
},
'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(
'models/sound',
[
'backbone'
],
function (Backbone) {
"use strict";
define('models/sound', function(require) {
"use strict";
var Sound = Backbone.Model.extend({
audio: null,
defaults: {
title: "",
character: "",
episode: "",
file: "",
playing: false
},
play: function() {
if( !this.audio ) {
this.audio = new Audio('sounds/'+this.get('file'));
}
var Backbone = require('backbone'),
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');
Sound = Backbone.Model.extend({
audio: null,
defaults: {
title: "",
character: "",
episode: "",
file: "",
playing: false
},
play: function() {
if( !this.audio ) {
this.audio = new Audio('sounds/'+this.get('file'));
}
});
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(
'radios/sounds',
[
'marionette',
'backbone.radio',
'collections/sounds'
],
function (Marionette, Radio, SoundsCollection) {
"use strict";
define('radios/sounds', function(require) {
"use strict";
var SoundsRadio = Marionette.Object.extend({
initialize : function () {
this.channel = Radio.channel('Sounds');
var Marionette = require('marionette'),
Radio = require('backbone.radio'),
SoundsCollection = require('collections/sounds'),
SoundsRadio;
this.channel.reply('getSounds', this.getSounds.bind(this));
},
getSounds: function() {
var soundsCollection = new SoundsCollection();
SoundsRadio = Marionette.Object.extend({
initialize : function () {
this.channel = Radio.channel('Sounds');
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(
'views/filter',
[
'marionette',
'backbone.radio',
'hbs!templates/filter'
],
function (Marionette, Radio, SoundsFilterTemplate) {
"use strict";
define('views/filter', function(require) {
"use strict";
var 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();
var Marionette = require('marionette'),
Radio = require('backbone.radio'),
SoundsFilterTemplate = require('hbs!templates/filter.hbs'),
SoundsFilterView;
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(
'views/sound',
[
'marionette',
'models/sound',
'hbs!templates/sound'
],
function (Marionette, SoundModel, SoundBlockTemplate) {
"use strict";
define('views/sound', function(require) {
"use strict";
var SoundBlockView = Marionette.ItemView.extend({
template: SoundBlockTemplate,
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();
var Marionette = require('marionette'),
SoundModel = require('models/sound'),
SoundTemplate = require('hbs!templates/sound.hbs'),
SoundView;
if( this.model.get('playing') ) {
this.trigger('sound:stop');
SoundView = Marionette.ItemView.extend({
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();
} else {
this.trigger('sound:play');
if( this.model.get('playing') ) {
this.trigger('sound:stop');
this.model.play();
}
},
playingAttributeChanged: function() {
if( this.model.get('playing') ) {
$(this.ui.soundItem).addClass('playing');
} else {
$(this.ui.soundItem).removeClass('playing');
}
},
toggleSoundDetail: function(e) {
var offset;
this.model.stop();
} else {
this.trigger('sound:play');
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);
this.model.play();
}
});
},
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(
'views/soundboard',
[
'marionette',
'views/filter',
'views/sounds',
'hbs!templates/soundboard'
],
function (Marionette, SoundsFilterView, SoundsView, SoundboardTemplate) {
"use strict";
define('views/soundboard', function(require) {
"use strict";
var SoundboardView = Marionette.LayoutView.extend({
template: SoundboardTemplate,
regions: {
'filter': '#filter',
'list': '#list'
},
onShow: function() {
var Marionette = require('marionette'),
SoundsFilterView = require('views/filter'),
SoundsView = require('views/sounds'),
SoundboardTemplate = require('hbs!templates/soundboard.hbs'),
SoundboardView;
this.showChildView('filter', new SoundsFilterView());
this.showChildView('list', new SoundsView());
SoundboardView = Marionette.LayoutView.extend({
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(
'views/sounds',
[
'marionette',
'backbone.radio',
'underscore',
'collections/sounds',
'views/sound'
],
function (Marionette, Radio, _, SoundsCollection, SoundView) {
"use strict";
define('views/sounds', function(require) {
"use strict";
var SoundsCollectionView = Marionette.CollectionView.extend({
childView: SoundView,
collection: new SoundsCollection(),
tagName: 'ul',
childEvents: {
'sound:play': 'stopPlayingSound'
},
initialize: function() {
var that = this;
var Marionette = require('marionette'),
Radio = require('backbone.radio'),
SoundsCollection = require('collections/sounds'),
SoundView = require('views/sound'),
SoundsCollectionView;
this.data = {
collection: this.collection
};
SoundsCollectionView = Marionette.CollectionView.extend({
childView: SoundView,
collection: new SoundsCollection(),
tagName: 'ul',
childEvents: {
'sound:play': 'stopPlayingSound'
},
initialize: function() {
var that = this;
this.channel = Radio.channel('Sounds');
this.channel.request('getSounds').then(this.initCollection.bind(this));
this.channel.on('sounds:filter', this.filterCollection.bind(this));
},
initCollection: function(sounds) {
this.data.collection = new SoundsCollection(sounds);
this.collection = this.data.collection;
this.data = {
collection: this.collection
};
this.render();
},
filterCollection: function(search) {
this.collection = this.data.collection.filterByTitle(search);
this.channel = Radio.channel('Sounds');
this.channel.request('getSounds').then(this.initCollection.bind(this));
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();
},
stopPlayingSound: function() {
var playingSound = this.collection.findWhere({playing: true});
this.render();
},
filterCollection: function(search) {
this.collection = this.data.collection.filterByTitle(search);
if( playingSound ) {
playingSound.stop();
}
this.render();
},
stopPlayingSound: function() {
var playingSound = this.collection.findWhere({playing: true});
if( playingSound ) {
playingSound.stop();
}
});
}
});
return SoundsCollectionView;
return SoundsCollectionView;
});