From 23c89546f7993111037ee8a2689019d427fe4ee2 Mon Sep 17 00:00:00 2001 From: Fergal Moran Date: Thu, 18 Jul 2013 20:50:22 +0100 Subject: [PATCH] Refactored mix list into layout to allow swapping the header --- static/js/app/lib/controller.coffee | 26 ++++++----- static/js/app/lib/controller.js | 40 ++++++++--------- static/js/app/lib/router.coffee | 3 -- static/js/app/lib/router.js | 9 ++-- static/js/app/views/mix/mixDetailView.js | 43 ------------------- static/js/app/views/mix/mixListLayout.coffee | 26 +++++++++++ static/js/app/views/mix/mixListView.coffee | 7 +-- static/js/app/views/mix/mixListView.js | 17 ++------ .../app/views/widgets/mixTabHeaderView.coffee | 7 +++ templates/views/MixListLayoutView.html | 2 + templates/views/MixListView.html | 11 ----- templates/views/MixTabHeaderView.html | 10 +++++ 12 files changed, 90 insertions(+), 111 deletions(-) delete mode 100755 static/js/app/views/mix/mixDetailView.js create mode 100644 static/js/app/views/mix/mixListLayout.coffee create mode 100644 static/js/app/views/widgets/mixTabHeaderView.coffee create mode 100644 templates/views/MixListLayoutView.html create mode 100644 templates/views/MixTabHeaderView.html diff --git a/static/js/app/lib/controller.coffee b/static/js/app/lib/controller.coffee index dff348d..c7dd649 100755 --- a/static/js/app/lib/controller.coffee +++ b/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") diff --git a/static/js/app/lib/controller.js b/static/js/app/lib/controller.js index 84d939b..ff10d59 100755 --- a/static/js/app/lib/controller.js +++ b/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({ diff --git a/static/js/app/lib/router.coffee b/static/js/app/lib/router.coffee index 8e506e6..a5a77df 100755 --- a/static/js/app/lib/router.coffee +++ b/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 - - - diff --git a/static/js/app/lib/router.js b/static/js/app/lib/router.js index e33b7fc..00017b4 100755 --- a/static/js/app/lib/router.js +++ b/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; diff --git a/static/js/app/views/mix/mixDetailView.js b/static/js/app/views/mix/mixDetailView.js deleted file mode 100755 index 1e49474..0000000 --- a/static/js/app/views/mix/mixDetailView.js +++ /dev/null @@ -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); diff --git a/static/js/app/views/mix/mixListLayout.coffee b/static/js/app/views/mix/mixListLayout.coffee new file mode 100644 index 0000000..71adee2 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/static/js/app/views/mix/mixListView.coffee b/static/js/app/views/mix/mixListView.coffee index 54f2dca..b0b867d 100755 --- a/static/js/app/views/mix/mixListView.coffee +++ b/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 diff --git a/static/js/app/views/mix/mixListView.js b/static/js/app/views/mix/mixListView.js index 31871c4..bd40547 100755 --- a/static/js/app/views/mix/mixListView.js +++ b/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); diff --git a/static/js/app/views/widgets/mixTabHeaderView.coffee b/static/js/app/views/widgets/mixTabHeaderView.coffee new file mode 100644 index 0000000..c5e5aca --- /dev/null +++ b/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 \ No newline at end of file diff --git a/templates/views/MixListLayoutView.html b/templates/views/MixListLayoutView.html new file mode 100644 index 0000000..6a14260 --- /dev/null +++ b/templates/views/MixListLayoutView.html @@ -0,0 +1,2 @@ +
+
diff --git a/templates/views/MixListView.html b/templates/views/MixListView.html index edfafba..b05bf69 100755 --- a/templates/views/MixListView.html +++ b/templates/views/MixListView.html @@ -1,12 +1 @@ - - diff --git a/templates/views/MixTabHeaderView.html b/templates/views/MixTabHeaderView.html new file mode 100644 index 0000000..382d0d3 --- /dev/null +++ b/templates/views/MixTabHeaderView.html @@ -0,0 +1,10 @@ +