diff --git a/css/style.css b/css/style.css index a2743f5..6d0018a 100644 --- a/css/style.css +++ b/css/style.css @@ -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; } } diff --git a/index.html b/index.html index 806ee77..0bde77a 100644 --- a/index.html +++ b/index.html @@ -45,7 +45,6 @@ - @@ -56,13 +55,13 @@

Kaamelott Soundboard

-
+
-
+ - + diff --git a/js/app/app.js b/js/app/app.js index 3aa1dc3..eaf3a09 100644 --- a/js/app/app.js +++ b/js/app/app.js @@ -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; +}); diff --git a/js/app/collections/sounds.js b/js/app/collections/sounds.js index bb5183d..cb85fe9 100644 --- a/js/app/collections/sounds.js +++ b/js/app/collections/sounds.js @@ -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; }); diff --git a/js/app/controllers/soundboard.js b/js/app/controllers/soundboard.js index bae703f..f00eade 100644 --- a/js/app/controllers/soundboard.js +++ b/js/app/controllers/soundboard.js @@ -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; }); diff --git a/js/app/main.js b/js/app/main.js index fb45fd4..fbe04a1 100644 --- a/js/app/main.js +++ b/js/app/main.js @@ -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(); +}); diff --git a/js/app/models/sound.js b/js/app/models/sound.js index e262b14..bc0d4c4 100644 --- a/js/app/models/sound.js +++ b/js/app/models/sound.js @@ -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; }); diff --git a/js/app/radios/sounds.js b/js/app/radios/sounds.js index 0190c9a..c6aca28 100644 --- a/js/app/radios/sounds.js +++ b/js/app/radios/sounds.js @@ -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; }); diff --git a/js/app/templates/main.hbs b/js/app/templates/main.hbs deleted file mode 100644 index 55b5901..0000000 --- a/js/app/templates/main.hbs +++ /dev/null @@ -1,3 +0,0 @@ -
- -
diff --git a/js/app/views/filter.js b/js/app/views/filter.js index 2b8bcb6..560dd30 100644 --- a/js/app/views/filter.js +++ b/js/app/views/filter.js @@ -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; }); diff --git a/js/app/views/main.js b/js/app/views/main.js deleted file mode 100644 index 8391524..0000000 --- a/js/app/views/main.js +++ /dev/null @@ -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; -}); diff --git a/js/app/views/sound.js b/js/app/views/sound.js index aac7f20..b4dfb20 100644 --- a/js/app/views/sound.js +++ b/js/app/views/sound.js @@ -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(); - - $('
') - .addClass('tooltip') - .append( - $('

').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(); + + $('

') + .addClass('tooltip') + .append( + $('

').text(this.model.getSoundDetail()) + ) + .css({left: (offset.left+25)+'px', top: (offset.top+30)+'px'}) + .appendTo('body') + .delay(1000) + .show(0); + } + }); + + return SoundView; }); diff --git a/js/app/views/soundboard.js b/js/app/views/soundboard.js index 0b1dfa2..c481859 100644 --- a/js/app/views/soundboard.js +++ b/js/app/views/soundboard.js @@ -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; }); diff --git a/js/app/views/sounds.js b/js/app/views/sounds.js index 1161283..0f8bc98 100644 --- a/js/app/views/sounds.js +++ b/js/app/views/sounds.js @@ -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; });