matth
/
daapr
1
0
Fork 0
Code Releases Activity

More viewport and push state modifications...

Browse Source
master
Matthieu Lalonde 12 years ago committed by xSmurf
parent 5219fbe781
commit 80b6ff9630
11 changed files with 236 additions and 103 deletions
Show Stats Download Patch File Download Diff File

47
index.html
Unescape View File

@ -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>

2
resources/css/app.css
Unescape View File

@ -274,7 +274,7 @@ body > .ui-layout-south {
body > .ui-layout-south > div#wrapperFooterRight div.btn-group { body > .ui-layout-south > div#wrapperFooterRight div.btn-group {
height: 25px; height: 25px;
} }
body > .ui-layout-south > div#wrapperFooterLeft { body > .ui-layout-south > div#wrapperFooterLeft {
text-align: left; text-align: left;
padding-left: 10px; padding-left: 10px;

47
resources/js/app.js
Unescape View File

@ -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;

43
resources/js/views/client.js
Unescape View File

@ -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();
} }
}); });

98
resources/js/views/footer.js
Unescape View File

@ -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);
} }
}); });

48
resources/js/views/list.js
Unescape View File

@ -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;

30
resources/js/views/main.js
Unescape View File

@ -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) {
} }

19
resources/js/views/sidebar.js
Unescape View File

@ -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);
}); });
} }

0
resources/templates/footer/modal-about.html → resources/templates/app/modal-about.html
Unescape View File

4
resources/templates/client/layout.html
Unescape View File

@ -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>

1
resources/templates/view-list.html
Unescape View File

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