Révise l'utilisation de require

2025-12-08 15:43:24 +00:00 · 2016-05-29 20:47:35 +02:00
parent 77f1820fa5
commit 0ce3b318e4
14 changed files with 309 additions and 345 deletions
--- 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;
+});
--- 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;
 });
--- 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;
 });
--- 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();
+});
--- 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;
 });
--- 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;
 });
--- a/js/app/templates/main.hbs
+++ b/js/app/templates/main.hbs
@@ -1,3 +0,0 @@
-<main class="site-main" role="main">
-
-</main>
--- 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;
 });
--- a/js/app/views/main.js
+++ b/js/app/views/main.js
@@ -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;
-});
--- 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();
-
-                $('<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;
 });
--- 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;
 });
--- 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;
 });