Refactored mix list into layout to allow swapping the header

static/js/app/lib/controller.coffee

@@ -1,8 +1,8 @@
 define ['app', 'marionette', 'vent',
         'views/chat/chatView',
-        'models/mix/mixItem', 'views/mix/mixListView', 'views/mix/mixDetailView', 'views/mix/mixEditView',
+        'models/mix/mixItem', 'views/mix/mixListLayout', 'views/mix/mixListView', 'views/mix/mixDetailView', 'views/mix/mixEditView',
         'models/user/userItem', 'views/user/userListView', 'views/user/userEditView'],
-(App, Marionette, vent, ChatView, MixItem, MixListView, MixDetailView, MixEditView, UserItem, UserListView, UserEditView)->
+(App, Marionette, vent, ChatView, MixItem, MixListLayout, MixListView, MixDetailView, MixEditView, UserItem, UserListView, UserEditView)->
     class DssController extends Marionette.Controller
 
         home: ->
@@ -10,13 +10,14 @@ define ['app', 'marionette', 'vent',
             @showMixList()
             true
 
-        _showMixList: (options) ->
+        _showMixList: () ->
             app = require('app')
-            app.contentRegion.show(new MixListView(options))
+            app.contentRegion.show(new MixListLayout())
             true
 
         showMixList: (type) ->
-            @_showMixList({order_by: type || 'latest'})
+            @_showMixList()
+            vent.trigger("mix:showlist", {order_by: type || 'latest'})
             true
 
         showMix: (slug)->
@@ -64,23 +65,28 @@ define ['app', 'marionette', 'vent',
 
         showUserDetail: (slug) ->
             console.log("Controller: showUserDetail")
-            @_showMixList({order_by: 'latest', user: slug})
+            @_showMixList()
+            vent.trigger("mix:showlist", {order_by: 'latest', user: slug})
 
         showUserFavourites: (slug) ->
             console.log("Controller: showUserFavourites")
-            @_showMixList({order_by: 'latest', type: 'favourites', user: slug})
+            @_showMixList()
+            vent.trigger("mix:showlist", {order_by: 'latest', type: 'favourites', user: slug})
 
         showUserLikes: (slug) ->
             console.log("Controller: showUserLikes")
-            @_showMixList({order_by: 'latest', type: 'likes', user: slug})
+            @_showMixList()
+            vent.trigger("mix:showlist", {order_by: 'latest', type: 'likes', user: slug})
 
         showUserFollowing: (slug) ->
             console.log("Controller: showUserFollowing")
-            @_showMixList({order_by: 'latest', type: 'following', user: slug})
+            @_showMixList()
+            vent.trigger("mix:showlist", {order_by: 'latest', type: 'following', user: slug})
 
         showUserFollowers: (slug) ->
             console.log("Controller: showUserFollowers")
-            @_showMixList({order_by: 'latest', type: 'followers', user: slug})
+            @_showMixList()
+            vent.trigger("mix:showlist", {order_by: 'latest', type: 'followers', user: slug})
 
         editUser: () ->
             console.log("Controller: editUser")

static/js/app/lib/controller.js

@@ -1,17 +1,16 @@
-// Generated by CoffeeScript 1.6.2
+// Generated by CoffeeScript 1.3.3
 (function() {
   var __hasProp = {}.hasOwnProperty,
     __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
 
-  define(['app', 'marionette', 'vent', 'views/chat/chatView', 'models/mix/mixItem', 'views/mix/mixListView', 'views/mix/mixDetailView', 'views/mix/mixEditView', 'models/user/userItem', 'views/user/userListView', 'views/user/userEditView'], function(App, Marionette, vent, ChatView, MixItem, MixListView, MixDetailView, MixEditView, UserItem, UserListView, UserEditView) {
-    var DssController, _ref;
-
+  define(['app', 'marionette', 'vent', 'views/chat/chatView', 'models/mix/mixItem', 'views/mix/mixListLayout', 'views/mix/mixListView', 'views/mix/mixDetailView', 'views/mix/mixEditView', 'models/user/userItem', 'views/user/userListView', 'views/user/userEditView'], function(App, Marionette, vent, ChatView, MixItem, MixListLayout, MixListView, MixDetailView, MixEditView, UserItem, UserListView, UserEditView) {
+    var DssController;
     DssController = (function(_super) {
+
       __extends(DssController, _super);
 
       function DssController() {
-        _ref = DssController.__super__.constructor.apply(this, arguments);
-        return _ref;
+        return DssController.__super__.constructor.apply(this, arguments);
       }
 
       DssController.prototype.home = function() {
@@ -20,16 +19,16 @@
         return true;
       };
 
-      DssController.prototype._showMixList = function(options) {
+      DssController.prototype._showMixList = function() {
         var app;
-
         app = require('app');
-        app.contentRegion.show(new MixListView(options));
+        app.contentRegion.show(new MixListLayout());
         return true;
       };
 
       DssController.prototype.showMixList = function(type) {
-        this._showMixList({
+        this._showMixList();
+        vent.trigger("mix:showlist", {
           order_by: type || 'latest'
         });
         return true;
@@ -37,7 +36,6 @@
 
       DssController.prototype.showMix = function(slug) {
         var app, mix;
-
         console.log("Controller: showMix");
         app = require('app');
         mix = new MixItem({
@@ -56,7 +54,6 @@
 
       DssController.prototype.uploadMix = function() {
         var app, mix;
-
         console.log("Controller: mixUpload");
         app = require('app');
         mix = new MixItem({
@@ -73,7 +70,6 @@
 
       DssController.prototype.editMix = function(slug) {
         var app, mix;
-
         console.log("Controller: mixEdit");
         app = require('app');
         mix = new MixItem({
@@ -91,7 +87,6 @@
 
       DssController.prototype.showChat = function() {
         var app;
-
         console.log("Controller: showChat");
         app = require('app');
         return app.contentRegion.show(new ChatView());
@@ -99,7 +94,6 @@
 
       DssController.prototype.showUserList = function(type) {
         var app;
-
         console.log("Controller: showUserList");
         app = require('app');
         return app.contentRegion.show(new UserListView());
@@ -107,7 +101,8 @@
 
       DssController.prototype.showUserDetail = function(slug) {
         console.log("Controller: showUserDetail");
-        return this._showMixList({
+        this._showMixList();
+        return vent.trigger("mix:showlist", {
           order_by: 'latest',
           user: slug
         });
@@ -115,7 +110,8 @@
 
       DssController.prototype.showUserFavourites = function(slug) {
         console.log("Controller: showUserFavourites");
-        return this._showMixList({
+        this._showMixList();
+        return vent.trigger("mix:showlist", {
           order_by: 'latest',
           type: 'favourites',
           user: slug
@@ -124,7 +120,8 @@
 
       DssController.prototype.showUserLikes = function(slug) {
         console.log("Controller: showUserLikes");
-        return this._showMixList({
+        this._showMixList();
+        return vent.trigger("mix:showlist", {
           order_by: 'latest',
           type: 'likes',
           user: slug
@@ -133,7 +130,8 @@
 
       DssController.prototype.showUserFollowing = function(slug) {
         console.log("Controller: showUserFollowing");
-        return this._showMixList({
+        this._showMixList();
+        return vent.trigger("mix:showlist", {
           order_by: 'latest',
           type: 'following',
           user: slug
@@ -142,7 +140,8 @@
 
       DssController.prototype.showUserFollowers = function(slug) {
         console.log("Controller: showUserFollowers");
-        return this._showMixList({
+        this._showMixList();
+        return vent.trigger("mix:showlist", {
           order_by: 'latest',
           type: 'followers',
           user: slug
@@ -151,7 +150,6 @@
 
       DssController.prototype.editUser = function() {
         var app, user;
-
         console.log("Controller: editUser");
         app = require('app');
         user = new UserItem({

static/js/app/lib/router.coffee

@@ -26,6 +26,3 @@ define ['marionette', 'vent', 'app.lib/controller'],
             console.log "Router: initialize"
             @listenTo vent, "navigate:mix", (slug)->
                 @navigate 'mix/' + slug, true
-
-
-

static/js/app/lib/router.js

@@ -1,17 +1,16 @@
-// Generated by CoffeeScript 1.6.2
+// Generated by CoffeeScript 1.3.3
 (function() {
   var __hasProp = {}.hasOwnProperty,
     __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
 
   define(['marionette', 'vent', 'app.lib/controller'], function(Marionette, vent, Controller) {
-    var DssRouter, _ref;
-
+    var DssRouter;
     return DssRouter = (function(_super) {
+
       __extends(DssRouter, _super);
 
       function DssRouter() {
-        _ref = DssRouter.__super__.constructor.apply(this, arguments);
-        return _ref;
+        return DssRouter.__super__.constructor.apply(this, arguments);
       }
 
       DssRouter.prototype.controller = new Controller;

static/js/app/views/mix/mixDetailView.js

@@ -1,43 +0,0 @@
-// Generated by CoffeeScript 1.6.2
-(function() {
-  var __hasProp = {}.hasOwnProperty,
-    __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
-
-  define(['marionette', 'models/mix/mixItem', 'views/mix/mixItemView', 'text!/tpl/MixDetailView'], function(Marionette, MixItem, MixItemView, Template) {
-    var MixDetailView, _ref;
-
-    MixDetailView = (function(_super) {
-      __extends(MixDetailView, _super);
-
-      function MixDetailView() {
-        _ref = MixDetailView.__super__.constructor.apply(this, arguments);
-        return _ref;
-      }
-
-      MixDetailView.prototype.template = _.template(Template);
-
-      MixDetailView.prototype.regions = {
-        mix: "#mix",
-        comments: "#comments"
-      };
-
-      MixDetailView.prototype.onRender = function() {
-        var view;
-
-        view = new MixItemView({
-          tagName: "div",
-          className: "mix-listing audio-listing-single",
-          model: this.model
-        });
-        this.mix.show(view);
-        view.renderComments();
-        return true;
-      };
-
-      return MixDetailView;
-
-    })(Marionette.Layout);
-    return MixDetailView;
-  });
-
-}).call(this);

static/js/app/views/mix/mixListLayout.coffee

@@ -0,0 +1,26 @@
+define ['marionette', 'vent', 'views/widgets/mixTabHeaderView', 'views/mix/mixListView', 'text!/tpl/MixListLayoutView'],
+(Marionette, vent, MixTabHeaderView, MixListView, Template) ->
+
+    class MixListRegionView extends Marionette.Layout
+        template: _.template(Template)
+        regions:{
+            headerRegion: "#mix-list-heading"
+            bodyRegion: "#mix-list-body"
+        }
+
+        initialize: ->
+            @listenTo(vent, "mix:showlist", @showMixList)
+
+        onShow: ->
+            @headerRegion.show(new MixTabHeaderView())
+
+        showMixList: (options)->
+            console.log("Layout: showoing mixlist")
+            @bodyRegion.show(new MixListView(options))
+            @tabChanged(options.order_by)
+
+        tabChanged: (type) ->
+            $('#mix-tab li[id=li-' + type + ']', @el).addClass('active')
+            true
+
+    MixListRegionView

static/js/app/views/mix/mixListView.coffee

@@ -9,10 +9,11 @@ define ['marionette', 'vent', 'models/mix/mixCollection', 'views/mix/mixItemView
 
         currentMix = -1
 
-        initialize: =>
+        initialize: ->
             @collection = new MixCollection()
             @collection.fetch
                 data: @options
+
             return
 
         mixPlay: (model) ->
@@ -22,9 +23,5 @@ define ['marionette', 'vent', 'models/mix/mixCollection', 'views/mix/mixItemView
             currentMix = model.cid
             return
 
-        tabChanged: (type) ->
-            $('#mix-tab li[id=li-' + type + ']', @el).addClass('active')
-            true
-
     MixListView
 

static/js/app/views/mix/mixListView.js

@@ -1,20 +1,17 @@
-// Generated by CoffeeScript 1.6.2
+// Generated by CoffeeScript 1.3.3
 (function() {
-  var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
-    __hasProp = {}.hasOwnProperty,
+  var __hasProp = {}.hasOwnProperty,
     __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
 
   define(['marionette', 'vent', 'models/mix/mixCollection', 'views/mix/mixItemView', 'text!/tpl/MixListView'], function(Marionette, vent, MixCollection, MixItemView, Template) {
-    var MixListView, _ref;
-
+    var MixListView;
     MixListView = (function(_super) {
       var currentMix;
 
       __extends(MixListView, _super);
 
       function MixListView() {
-        this.initialize = __bind(this.initialize, this);        _ref = MixListView.__super__.constructor.apply(this, arguments);
-        return _ref;
+        return MixListView.__super__.constructor.apply(this, arguments);
       }
 
       MixListView.prototype.template = _.template(Template);
@@ -36,7 +33,6 @@
 
       MixListView.prototype.mixPlay = function(model) {
         var v;
-
         if (currentMix !== -1) {
           v = this.children.findByModelCid(currentMix);
           v.mixStop(v.model);
@@ -44,11 +40,6 @@
         currentMix = model.cid;
       };
 
-      MixListView.prototype.tabChanged = function(type) {
-        $('#mix-tab li[id=li-' + type + ']', this.el).addClass('active');
-        return true;
-      };
-
       return MixListView;
 
     })(Marionette.CompositeView);

static/js/app/views/widgets/mixTabHeaderView.coffee

@@ -0,0 +1,7 @@
+define ['marionette', 'underscore', 'vent', 'text!/tpl/MixTabHeaderView'],
+(Marionette, _, vent, Template) ->
+
+    class MixTabHeaderView extends Marionette.ItemView
+        template: _.template(Template)
+
+    MixTabHeaderView

templates/views/MixListLayoutView.html

@@ -0,0 +1,2 @@
+<div id="mix-list-heading"></div>
+<div id="mix-list-body"></div>

templates/views/MixListView.html

@@ -1,12 +1 @@
-<ul class="mix-toggle nav nav-pills" id="mix-tab">
-    <li id="li-latest"><a href="mixes" id='latest'>Latest</a></li>
-    <li id="li-toprated"><a href="mixes/toprated" id='toprated'>Top Rated</a></li>
-    <li id="li-mostplayed"><a href="mixes/mostplayed" id='mostplayed'>Most Played</a></li>
-    <li id="li-mostactive"><a href="mixes/mostactive" id='mostactive'>Most Active</a></li>
-    <li id="li-recommended"><a href="mixes/recommended" id='recommended'>Recommended</a></li>
-    {% if user.is_authenticated %}
-        <li><a href="/mixes/favourites" id='favourites'>Favourites</a></li>
-    {% endif %}
-</ul>
-
 <ul id="mix-list-container-ul" class="mix-listing audio-listing"></ul>

templates/views/MixTabHeaderView.html

@@ -0,0 +1,10 @@
+<ul class="mix-toggle nav nav-pills" id="mix-tab">
+    <li id="li-latest"><a href="/mixes" id='latest'>Latest</a></li>
+    <li id="li-toprated"><a href="/mixes/toprated" id='toprated'>Top Rated</a></li>
+    <li id="li-mostplayed"><a href="/mixes/mostplayed" id='mostplayed'>Most Played</a></li>
+    <li id="li-mostactive"><a href="/mixes/mostactive" id='mostactive'>Most Active</a></li>
+    <li id="li-recommended"><a href="/mixes/recommended" id='recommended'>Recommended</a></li>
+    {% if user.is_authenticated %}
+        <li><a href="/mixes/favourites" id='favourites'>Favourites</a></li>
+    {% endif %}
+</ul>