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-south row-fluid" id="wrapperFooter">
<div class="ui-layout-south row-fluid">
<div id="wrapperFooterLeft" class="span4 row-fluid">
<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>
<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-toggle="button"><i class="icon-retweet 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-target="repeat"><i class="icon-retweet icon-white"></i></button>
</div>
<div id="wrapperFooterCenter" class="span4">
<span class="list-count">0</span>&nbsp;items
@ -113,7 +113,7 @@
<li><a tabindex="-1" href="#">Separated link</a></li>
</ul>
</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>
@ -134,43 +134,6 @@
<li><a href="javascript:void(0);">Genre</a></li>
</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 -->
<script type="text/html" id="_tmplPlayerView">
<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 {
height: 25px;
}
body > .ui-layout-south > div#wrapperFooterLeft {
text-align: left;
padding-left: 10px;

47
resources/js/app.js
Unescape View File

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

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

@ -42,6 +42,7 @@ _
, initialize: function (options) {
_.bindAll(this
, "_initLayout"
, "show"
, "hide"
);
@ -58,30 +59,18 @@ _
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.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
;
that.Layout = that.$el.layout({
defaults: {
closable: false
@ -101,6 +90,31 @@ _
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"));
}
@ -108,6 +122,7 @@ _
var that = this
;
this.$el.hide();
}
});

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

@ -9,42 +9,108 @@ define([
, "jquery"
, "backbone"
, "bootstrap"
, "text!../../templates/footer/modal-about.html"
]
, function (_, $, Backbone, Bootstrap, tmplModalAbout) {
, function (_, $, Backbone, Bootstrap) {
"use strict";
var Footer = Backbone.View.extend({
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) {
_.bindAll(this
, "__eventToggleButtonRandom"
, "__eventToggleButtonRepeat"
, "__eventToggleButtonSideBar"
, "__eventButtonAboutClick"
);
var that = this
;
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) {
that.trigger("toggle:sidebar");
if (!that.__timeoutDebounceRepeatButton) {
that.__timeoutDebounceRepeatButton = setTimeout(function () {
that.trigger("toggle:repeat", that._stateRepeat);
var $target = $(event.target);
if (event.target.tagName === "BUTTON") {
$target = $target.find("i");
}
delete that.__timeoutDebounceRepeatButton;
}, 500);
}
}
, __eventToggleButtonSideBar: function (event) {
var that = this
;
that.trigger("toggle:sidebar");
$target.toggleClass("icon-chevron-right");
$target.toggleClass("icon-chevron-left");
});
var $target = $(event.target);
if (event.target.tagName === "BUTTON") {
$target = $target.find("i");
}
$target.toggleClass("icon-chevron-right");
$target.toggleClass("icon-chevron-left");
}
, _buttonAboutClick: function(event) {
var $modal = $(tmplModalAbout)
, __eventButtonAboutClick: function(event) {
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"
, "backbone"
, "bootstrap"
, "text!../../templates/view-list.html"
]
, function ($, Backbone, Bootstrap) {
, function (
$
, Backbone
, Bootstrap
, tmplListView
) {
"use strict";
var List = Backbone.View.extend({
el: $("table")
, type: "playlist"
type: "playlist"
, initialize: function (options) {
var that = this
;
, initialize: function (collection, options) {
this.$el = $(options.el).find("table:first");
if (options && options.el) {
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);
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;
}
@ -31,6 +51,20 @@ define([
, render: function () {
return this.$el;
}
, show: function () {
var that = this
;
this.$el.show();
}
, hide: function () {
var that = this
;
this.$el.hide();
}
});
return List;

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

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

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

@ -204,16 +204,17 @@ console.log(event);
}(item));
$item.on("click", function __fnSideBarViewEventDblClickItem(event) {
that.$el.find("li.selected").removeClass("selected");
$item.addClass("selected");
// FIXME: This needs to check the state of the client and debounce
that.$el.find("li.selected").removeClass("selected");
$item.addClass("selected");
/*
if (item.client.state < item.client._states.loaded) {
item.client.fetchDatabases(item.client.fetchDatabase);
} else {
console.log(item.client.collections);
}
*/
Backbone.Router.prototype.navigate("servers/" + item.id, true);
if (item.client.state < item.client._states.loaded) {
item.client.fetchDatabases(item.client.fetchDatabase);
} else {
console.log(item.client.collections);
}
*/
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>
</div>
</div>
<div class="ui-layout-center">
<table cellpadding="0" cellspacing="0" border="0" class="table-list"><tr><td><h1>" + this.type + "</h1></td></tr></table>
</div>
<div class="ui-layout-center"></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