1
0
Fork 0

More viewport and push state modifications...

master
Matthieu Lalonde 12 years ago committed by xSmurf
parent 5219fbe781
commit 80b6ff9630

@ -88,13 +88,13 @@
<div class="ui-layout-center" class="loading"></div> <div class="ui-layout-center" class="loading"></div>
<div class="ui-layout-south row-fluid" id="wrapperFooter"> <div class="ui-layout-south row-fluid">
<div id="wrapperFooterLeft" class="span4 row-fluid"> <div id="wrapperFooterLeft" class="span4 row-fluid">
<div class="span2"> <div class="span2">
<button class="btn btn-mini btn-inverse" type="button" data-toggle="side-bar"><i class="icon-chevron-left icon-white"></i></button> <button class="btn btn-mini btn-inverse" type="button" data-target="sidebar"><i class="icon-chevron-left icon-white"></i></button>
</div> </div>
<button class="btn btn-mini btn-inverse" type="button" data-toggle="button"><i class="icon-random icon-white"></i></button> <button class="btn btn-mini btn-inverse" type="button" data-target="random"><i class="icon-random icon-white"></i></button>
<button class="btn btn-mini btn-inverse" type="button" data-toggle="button"><i class="icon-retweet icon-white"></i></button> <button class="btn btn-mini btn-inverse" type="button" data-target="repeat"><i class="icon-retweet icon-white"></i></button>
</div> </div>
<div id="wrapperFooterCenter" class="span4"> <div id="wrapperFooterCenter" class="span4">
<span class="list-count">0</span>&nbsp;items <span class="list-count">0</span>&nbsp;items
@ -113,7 +113,7 @@
<li><a tabindex="-1" href="#">Separated link</a></li> <li><a tabindex="-1" href="#">Separated link</a></li>
</ul> </ul>
</div> --> </div> -->
<button class="btn btn-mini btn btn-inverse" type="button" data-target="modalAboutDaapr"><i class="icon-question-sign icon-white"></i></button> <button class="btn btn-mini btn btn-inverse" type="button" data-target="about"><i class="icon-question-sign icon-white"></i></button>
</div> </div>
</div> </div>
@ -134,43 +134,6 @@
<li><a href="javascript:void(0);">Genre</a></li> <li><a href="javascript:void(0);">Genre</a></li>
</ul> </ul>
<script type="text/html" id="_tmplModalServerLogin">
<div id="modalServerLogin">
<div class="overlay"></div>
<div class="modal" data-show="true" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-body" style="font-size: 1.2em">
<form>
<fieldset>
<legend>{{dmap_itemname}} login</legend>
<p>
<input type="text" class="input-large" placeholder="Login">
</p>
<p>
<input type="password" class="input-large" placeholder="Password">
</p>
<!--label class="checkbox">
<input type="checkbox"> Remember me
</label-->
</fieldset>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-mini" data-dismiss="modal" aria-hidden="true"><i class="icon-remove"></i>&nbsp;Cancel</button>
<button class="btn btn-mini btn-primary" data-dismiss="modal" aria-hidden="true"><i class="icon-ok"></i>&nbsp;Login</button>
</div>
</div>
</div>
</script>
<script type="text/html" id="_tmplModalServerLoading">
<div id="modalServerLoading">
<div class="overlay"></div>
<div class="modal">
</div>
</div>
</script>
<!-- Underscore Templates --> <!-- Underscore Templates -->
<script type="text/html" id="_tmplPlayerView"> <script type="text/html" id="_tmplPlayerView">
<div class="daaprPlayerTitleIndicator">{{dmap_itemname}}</div> <div class="daaprPlayerTitleIndicator">{{dmap_itemname}}</div>

@ -27,9 +27,11 @@ define([
, "collections/playlist" , "collections/playlist"
, "views/client" , "views/client"
, "views/list"
, "text!../templates/app/modal-loading.html" , "text!../templates/app/modal-loading.html"
, "text!../templates/app/modal-login.html" , "text!../templates/app/modal-login.html"
, "text!../templates/app/modal-about.html"
], ],
function( function(
_ _
@ -51,29 +53,37 @@ _
, PlaylistCollection , PlaylistCollection
, ClientView , ClientView
, ListView
, tmplModalLoading , tmplModalLoading
, tmplModalLogin , tmplModalLogin
, tmplModalAbout
) { ) {
"use strict"; "use strict";
var App = Backbone.Router.extend({ var App = Backbone.Router.extend({
routes: { routes: {
"playlist": "_routerActionPlaylist" "about": "_routerActionAbout"
, "playlist": "_routerActionPlaylist"
, "servers/:server": "_routerActionClient" , "servers/:server": "_routerActionClient"
, "playlist/:item": "_routerActionPlaylistItem" , "playlist/:item": "_routerActionPlaylistItem"
, ":server/items/:item": "_routerActionServerItem" , ":server/items/:item": "_routerActionServerItem"
//"*actions": "defaultRoute" // matches http://example.com/#anything-here //"*actions": "defaultRoute" // matches http://example.com/#anything-here
} }
, historyStart: window.history.length
, initialize: function() { , initialize: function() {
_.bindAll(this _.bindAll(this
, "_routerActionAbout"
, "_routerActionPlaylist" , "_routerActionPlaylist"
, "_routerActionClient" , "_routerActionClient"
, "_routerActionItem" , "_routerActionItem"
, "_routerActionServerItem" , "_routerActionServerItem"
, "_serverInit" , "_serverInit"
, "__showModalAbout"
); );
var that = this var that = this
@ -142,7 +152,7 @@ _
el: that.Views.App.Layout.panes.center el: that.Views.App.Layout.panes.center
}); });
// TODO: Add playlist view here that.Views.Main.setView("playlist", new ListView());
that.Views.Footer.on("toggle:sidebar", function __fnAppEventTogglerSiderBar(event) { that.Views.Footer.on("toggle:sidebar", function __fnAppEventTogglerSiderBar(event) {
that.Views.App.toggleSideBar(); that.Views.App.toggleSideBar();
@ -156,6 +166,8 @@ _
// TODO:... // TODO:...
}); });
that.Views.Footer.on("show:about", that.__showModalAbout);
that.Views.App.$el.delegate("div.modal", "hidden", function __fnAppEventRemoveModals(event) { that.Views.App.$el.delegate("div.modal", "hidden", function __fnAppEventRemoveModals(event) {
$(event.target).remove(); $(event.target).remove();
}); });
@ -174,6 +186,13 @@ _
return this; return this;
} }
, _routerActionAbout: function () {
var that = this
;
that.__showModalAbout();
}
, _routerActionPlaylist: function () { , _routerActionPlaylist: function () {
var that = this var that = this
; ;
@ -287,7 +306,6 @@ _
if (saveCredentials) { if (saveCredentials) {
var newModel = (_.clone({}, serverModel.attributes, {username: username, password: password})); var newModel = (_.clone({}, serverModel.attributes, {username: username, password: password}));
console.log(newModel);
serverModel.set("username", username, {silent: true}); serverModel.set("username", username, {silent: true});
serverModel.set("password", password, {silent: true}); serverModel.set("password", password, {silent: true});
@ -314,6 +332,29 @@ _
server.client.init(); server.client.init();
} }
, __showModalAbout: function () {
var that = this
, $modal = $(tmplModalAbout)
, previousPush = window.location.pathname
;
if (previousPush.indexOf("/about") >= 0) {
previousPush = "";
}
$modal.on("hidden", function __fnEventAppModalAboutClosed(event) {
if (window.history.length === that.historyStart) {
that.navigate("", false);
} else {
window.history.back();
}
});
setTimeout(function () {
$modal.modal();
}, 50);
}
}); });
return App; return App;

@ -42,6 +42,7 @@ _
, initialize: function (options) { , initialize: function (options) {
_.bindAll(this _.bindAll(this
, "_initLayout"
, "show" , "show"
, "hide" , "hide"
); );
@ -58,30 +59,18 @@ _
Client.__super__.initialize.apply(that, arguments); Client.__super__.initialize.apply(that, arguments);
that.el.id = "__view-" + that.Server.client.attributes.hostname.replace(".", "_"); that.el.id = "__view-cient-" + that.Server.client.attributes.hostname.replace(".", "_");
that.id = that.Server.client.attributes.hostname; that.id = that.Server.client.attributes.hostname;
/* /*
that.Views.Browser = new BrowserView(that.Client, {
el: that.Layout.panes.north
});
var dbId = that.Server.client.collections.databasesInfo.get("dmap_listing").at(0).id
, dbCollection = that.Server.client.collections.databases[dbId].get("dmap_listing")
;
that.Views.List = new ListView(dbCollection, {
el: that.Layout.panes.center
, type: "client"
});
*/ */
} }
, show: function () { , _initLayout: function () {
var that = this var that = this
; ;
that.Layout = that.$el.layout({ that.Layout = that.$el.layout({
defaults: { defaults: {
closable: false closable: false
@ -101,6 +90,31 @@ _
minSize: 200 minSize: 200
} }
}); });
that.Views.Browser = new BrowserView(that.Client, {
el: that.Layout.panes.north
});
var dbId = that.Server.client.collections.databasesInfo.get("dmap_listing").at(0).id
, dbCollection = that.Server.client.collections.databases[dbId].get("dmap_listing")
;
that.Views.List = new ListView({
el: that.Layout.panes.center
, collection: dbCollection
, type: "client"
});
}
, show: function () {
var that = this
;
if (that.Layout === null) {
that._initLayout();
}
this.$el.show();
//console.debug(that.Server.client.collections.databases[that.Server.client.collections.databasesInfo.get("dmap_listing").at(0).id].get("dmap_listing")); //console.debug(that.Server.client.collections.databases[that.Server.client.collections.databasesInfo.get("dmap_listing").at(0).id].get("dmap_listing"));
} }
@ -108,6 +122,7 @@ _
var that = this var that = this
; ;
this.$el.hide();
} }
}); });

@ -9,42 +9,108 @@ define([
, "jquery" , "jquery"
, "backbone" , "backbone"
, "bootstrap" , "bootstrap"
, "text!../../templates/footer/modal-about.html"
] ]
, function (_, $, Backbone, Bootstrap, tmplModalAbout) { , function (_, $, Backbone, Bootstrap) {
"use strict"; "use strict";
var Footer = Backbone.View.extend({ var Footer = Backbone.View.extend({
events: { events: {
"click button[data-target='modalAboutDaapr']": "_buttonAboutClick" "click button[data-target='about']": "__eventButtonAboutClick"
, "click button[data-target='sidebar']": "__eventToggleButtonSideBar"
, "click button[data-target='random']": "__eventToggleButtonRandom"
, "click button[data-target='repeat']": "__eventToggleButtonRepeat"
} }
, _stateRepeat: false
, _stateRandom: false
, initialize: function (options) { , initialize: function (options) {
_.bindAll(this
, "__eventToggleButtonRandom"
, "__eventToggleButtonRepeat"
, "__eventToggleButtonSideBar"
, "__eventButtonAboutClick"
);
var that = this var that = this
; ;
Footer.__super__.initialize.apply(that, arguments); Footer.__super__.initialize.apply(that, arguments);
}
, __eventToggleButtonRandom: function (event) {
var that = this
, $target = $(event.target)
;
that._stateRandom = !that._stateRandom;
if (event.target.tagName === "I") {
$target = $target.parent();
}
if (that._stateRandom) {
$target.addClass("active");
} else {
$target.removeClass("active");
}
if (!that.__timeoutDebounceRandomButton) {
that.__timeoutDebounceRandomButton = setTimeout(function () {
that.trigger("toggle:random", that._stateRandom);
delete that.__timeoutDebounceRandomButton;
}, 500);
}
}
, __eventToggleButtonRepeat: function (event) {
var that = this
, $target = $(event.target)
;
that._stateRepeat = !that._stateRepeat;
if (event.target.tagName === "I") {
$target = $target.parent();
}
if (that._stateRepeat) {
$target.addClass("active");
} else {
$target.removeClass("active");
}
that.$el.delegate("button[data-toggle='side-bar']", "click", function (event) { if (!that.__timeoutDebounceRepeatButton) {
that.trigger("toggle:sidebar"); that.__timeoutDebounceRepeatButton = setTimeout(function () {
that.trigger("toggle:repeat", that._stateRepeat);
var $target = $(event.target); delete that.__timeoutDebounceRepeatButton;
if (event.target.tagName === "BUTTON") { }, 500);
$target = $target.find("i"); }
} }
, __eventToggleButtonSideBar: function (event) {
var that = this
;
that.trigger("toggle:sidebar");
$target.toggleClass("icon-chevron-right"); var $target = $(event.target);
$target.toggleClass("icon-chevron-left"); if (event.target.tagName === "BUTTON") {
}); $target = $target.find("i");
}
$target.toggleClass("icon-chevron-right");
$target.toggleClass("icon-chevron-left");
} }
, _buttonAboutClick: function(event) { , __eventButtonAboutClick: function(event) {
var $modal = $(tmplModalAbout) var that = this
; ;
$modal.modal(); Backbone.Router.prototype.navigate("about", true);
} }
}); });

@ -8,22 +8,42 @@ define([
"jquery" "jquery"
, "backbone" , "backbone"
, "bootstrap" , "bootstrap"
, "text!../../templates/view-list.html"
] ]
, function ($, Backbone, Bootstrap) { , function (
$
, Backbone
, Bootstrap
, tmplListView
) {
"use strict"; "use strict";
var List = Backbone.View.extend({ var List = Backbone.View.extend({
el: $("table") type: "playlist"
, type: "playlist"
, initialize: function (options) {
var that = this
;
, initialize: function (collection, options) { if (options && options.el) {
this.$el = $(options.el).find("table:first"); options.el.innerHTML = tmplListView;
} else {
options = options || {};
options.el = document.createElement("div");
this.type = options.type || "playlist"; options.el.id = "__view-playlist";
options.el.className = "playlist-view-container";
options.el.innerHTML = tmplListView;
this.el = options.el;
this.$el = $(this.el);
}
List.__super__.initialize.apply(this, arguments); List.__super__.initialize.apply(this, arguments);
this.$el.html("<tr><td><h1>" + this.type + "</h1></td></tr>"); this.$el.find("table:first").html("<tr><td><h1>" + this.type + "</h1></td></tr>");
return this; return this;
} }
@ -31,6 +51,20 @@ define([
, render: function () { , render: function () {
return this.$el; return this.$el;
} }
, show: function () {
var that = this
;
this.$el.show();
}
, hide: function () {
var that = this
;
this.$el.hide();
}
}); });
return List; return List;

@ -24,6 +24,7 @@ _
var Main = Backbone.View.extend({ var Main = Backbone.View.extend({
children: {} children: {}
, current: null
, initialize: function (options) { , initialize: function (options) {
_.bindAll(this _.bindAll(this
@ -31,14 +32,12 @@ _
, "getView" , "getView"
, "showView" , "showView"
, "hideView" , "hideView"
, "toggleView" //, "toggleView"
, "destroyView" , "destroyView"
); );
//that.setView("playlist", new ListView(playlistCollection)); //that.setView("playlist", new ListView(playlistCollection));
Main.__super__.initialize.apply(this, arguments); Main.__super__.initialize.apply(this, arguments);
console.log(this.el);
} }
, setView: function (name, view) { , setView: function (name, view) {
@ -60,9 +59,21 @@ _
var that = this var that = this
; ;
console.debug("Show view: "+ name, that.$el, that.children[name], that.children[name].$el); if (that.current === name) {
return true;
}
if (that.current) {
that.hideView(that.current);
}
that.current = name;
console.debug("Show view: "+ name);//, that.$el, that.children[name], that.children[name].$el);
if (that.children[name] && that.children[name].$el) { if (that.children[name] && that.children[name].$el) {
that.$el.append(that.children[name].$el); if (that.$el.find(that.children[name].$el).length === 0) {
that.$el.append(that.children[name].$el);
}
if (that.children[name].show) { if (that.children[name].show) {
setTimeout(function __fnTimeoutMainViewShow() { setTimeout(function __fnTimeoutMainViewShow() {
@ -79,8 +90,11 @@ _
var that = this var that = this
; ;
that.current = null;
console.debug("Hide view: "+ name); console.debug("Hide view: "+ name);
if (that.children[name] && that.children[name].$el) { if (that.children[name] && that.children[name].$el) {
if (that.children[name].hide) { if (that.children[name].hide) {
that.children[name].hide(); that.children[name].hide();
} else { } else {
@ -88,11 +102,11 @@ _
} }
setTimeout(function __fnTimeoutMainViewHide() { setTimeout(function __fnTimeoutMainViewHide() {
that.$el.remove(that.children[name].$el); that.$el.find(that.children[name].$el).remove();
}, 50); }, 50);
} }
} }
/*
, toggleView: function (name) { , toggleView: function (name) {
var that = this var that = this
; ;
@ -101,7 +115,7 @@ _
that.children[name].$el.toggle(); that.children[name].$el.toggle();
} }
} }
*/
, destroyView: function (name) { , destroyView: function (name) {
} }

@ -204,16 +204,17 @@ console.log(event);
}(item)); }(item));
$item.on("click", function __fnSideBarViewEventDblClickItem(event) { $item.on("click", function __fnSideBarViewEventDblClickItem(event) {
that.$el.find("li.selected").removeClass("selected"); // FIXME: This needs to check the state of the client and debounce
$item.addClass("selected"); that.$el.find("li.selected").removeClass("selected");
$item.addClass("selected");
/* /*
if (item.client.state < item.client._states.loaded) { if (item.client.state < item.client._states.loaded) {
item.client.fetchDatabases(item.client.fetchDatabase); item.client.fetchDatabases(item.client.fetchDatabase);
} else { } else {
console.log(item.client.collections); console.log(item.client.collections);
} }
*/ */
Backbone.Router.prototype.navigate("servers/" + item.id, true); Backbone.Router.prototype.navigate("servers/" + item.id, true);
}); });
} }

@ -10,7 +10,5 @@
<table cellpadding="0" cellspacing="0" border="0" class="table-albums"><tr><td><h1>" + this.type + "</h1></td></tr></table> <table cellpadding="0" cellspacing="0" border="0" class="table-albums"><tr><td><h1>" + this.type + "</h1></td></tr></table>
</div> </div>
</div> </div>
<div class="ui-layout-center"> <div class="ui-layout-center"></div>
<table cellpadding="0" cellspacing="0" border="0" class="table-list"><tr><td><h1>" + this.type + "</h1></td></tr></table>
</div>
</div> </div>

@ -0,0 +1 @@
<table cellpadding="0" cellspacing="0" border="0" class="table-list"><tr><td><h1>" + this.type + "</h1></td></tr></table>
Loading…
Cancel
Save