diff --git a/index.html b/index.html index 72035ed..4a5c2ad 100644 --- a/index.html +++ b/index.html @@ -88,21 +88,8 @@ -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
diff --git a/resources/css/app.css b/resources/css/app.css index 42c0742..974de24 100644 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -170,43 +170,43 @@ body > .ui-layout-west > #wrapperSideBar ul li { display: inline-block; } -div#wrapperBrowser { +div#wrapperMain > div > div:first { margin: 0; padding: 0; background: #FFF url(../img/grid3-hrow2.gif) repeat-x; } - div#wrapperBrowser > div.third { + div#wrapperMain > div > div:first > div.third { width: 33.3333%; float: left; clear: none; } - div#wrapperBrowser > div.third:first-child { + div#wrapperMain > div > div:first > div.third:first-child { clear: left; } - div#wrapperBrowser > div.third:last-child { + div#wrapperMain > div > div:first > div.third:last-child { clear: right; } - div#wrapperBrowser > div.third > div.dataTables_wrapper, - div#wrapperBrowser > div.third > div.dataTables_wrapper { + div#wrapperMain > div > div:first > div.third > div.dataTables_wrapper, + div#wrapperMain > div > div:first > div.third > div.dataTables_wrapper { border-left: 1px solid #C6C6C6; } - div#wrapperBrowser > div:first-child > div.dataTables_wrapper, - div#wrapperBrowser > div:first-child > div.dataTables_wrapper { + div#wrapperMain > div > div:first > div:first-child > div.dataTables_wrapper, + div#wrapperMain > div > div:first > div:first-child > div.dataTables_wrapper { border-left: none; padding-left: 1px; } - div#wrapperBrowser > div.third > div.dataTables_wrapper table td { + div#wrapperMain > div > div:first > div.third > div.dataTables_wrapper table td { padding-left: 4px; } - div#wrapperBrowser table.dataTable tr td.sorting_1 { background-color: transparent; } - div#wrapperBrowser table.dataTable tr td.sorting_2 { background-color: transparent; } - div#wrapperBrowser table.dataTable tr td.sorting_3 { background-color: transparent; } + div#wrapperMain > div > div:first table.dataTable tr td.sorting_1 { background-color: transparent; } + div#wrapperMain > div > div:first table.dataTable tr td.sorting_2 { background-color: transparent; } + div#wrapperMain > div > div:first table.dataTable tr td.sorting_3 { background-color: transparent; } div#wrapperList { @@ -335,7 +335,7 @@ div.dataTables_scrollHeadInner th { border: none; } - div#wrapperBrowser div.dataTables_scrollHeadInner th { + div#wrapperMain > div > div:first div.dataTables_scrollHeadInner th { padding-left: 4px; } @@ -352,10 +352,10 @@ table.dataTable tbody tr.selected td, table.dataTable tbody tr.selected td.sorting_1, table.dataTable tbody tr.selected td.sorting_2, table.dataTable tbody tr.selected td.sorting_3, -div#wrapperBrowser > div.third > div.dataTables_wrapper table tr.selected td, -div#wrapperBrowser > div.third > div.dataTables_wrapper table tr.selected td.sorting_1, -div#wrapperBrowser > div.third > div.dataTables_wrapper table tr.selected td.sorting_2, -div#wrapperBrowser > div.third > div.dataTables_wrapper table tr.selected td.sorting_3, +div#wrapperMain > div > div:first > div.third > div.dataTables_wrapper table tr.selected td, +div#wrapperMain > div > div:first > div.third > div.dataTables_wrapper table tr.selected td.sorting_1, +div#wrapperMain > div > div:first > div.third > div.dataTables_wrapper table tr.selected td.sorting_2, +div#wrapperMain > div > div:first > div.third > div.dataTables_wrapper table tr.selected td.sorting_3, .dropdown-menu * a:hover, .dropdown-menu * a:focus, .dropdown-menu * li:hover, diff --git a/resources/js/app.js b/resources/js/app.js index f0fe997..208bbe6 100644 --- a/resources/js/app.js +++ b/resources/js/app.js @@ -24,6 +24,9 @@ define([ // , "models/dmap" , "collections/server" + , "collections/playlist" + + , "views/client" , "text!../templates/app/modal-loading.html" , "text!../templates/app/modal-login.html" @@ -45,6 +48,9 @@ _ , ClientModel //, DMAPModel , ServerCollection +, PlaylistCollection + +, ClientView , tmplModalLoading , tmplModalLogin @@ -80,6 +86,8 @@ _ this.servers = new ServerCollection(); + this.playlist = new PlaylistCollection(); + this.servers.on("add", function (server) { server.save(); }); @@ -121,17 +129,25 @@ _ that.Views.App = new AppView(); that.Views.Footer = new FooterView(); - that.Views.Footer.on("toggle:sidebar", function __fnAppEventTogglerSiderBar() { + that.Views.Footer.on("toggle:sidebar", function __fnAppEventTogglerSiderBar(event) { that.Views.App.toggleSideBar(); }); + that.Views.Footer.on("toggle:random", function __fnAppEventTogglerRandom(event) { + // TODO:... + }); + + that.Views.Footer.on("toggle:repeat", function __fnAppEventTogglerRepeater(event) { + // TODO:... + }); + that.Views.App.$el.delegate("div.modal", "hidden", function __fnAppEventRemoveModals(event) { $(event.target).remove(); }); Backbone.history.start({ pushState: true - , root: "/" + , root: Config.docRoot }); // For now let's reset the state when we start up @@ -148,6 +164,7 @@ _ ; that.Views.SideBar.select("> ul > li:first"); + that.Views.Main.showView("playlist"); } , _routerActionClient: function (hostname) { @@ -159,28 +176,48 @@ _ that.Views.SideBar.select(server); if (client) { - if (client.state < 4) { - var __fnAppEventClientInitited = function () { - client.fetchDatabases(client.fetchDatabase); - }; + var __fnAppEventClientLoaded = function () { + if (!that.Views.Main.getView(server.get("hostname"))) { + that.Views.Main.setView(server.client.attributes.hostname, new ClientView(server.client)); + } + that.Views.Main.showView(server.get("hostname")); + } + , __fnAppEventClientInitited = function () { + client.fetchDatabases(function __fnAppCbFetchDatabases() { + client.fetchDatabase(function __fnAppCbFetchDatabase() { + __fnAppEventClientLoaded(); + }); + }); + }; + + if (client.state < 4) { client.on("inited", __fnAppEventClientInitited); if (client.state <= 0) { client.init(); } } else if (client.state === 4) { - client.fetchDatabases(client.fetchDatabase); + __fnAppEventClientInitited(); + } else if (client.state > 4) { + __fnAppEventClientLoaded(); } } } , _routerActionPlaylistItem: function (item) { + var that = this + ; + that.Views.SideBar.select("> ul > li:first"); } , _routerActionServerItem: function (server, item) { + var that = this + ; + that.Views.SideBar.select(server); + that.Views.Main.showView(server.get("hostname")); } , _serverInit: function(server) { diff --git a/resources/js/collections/playlist.js b/resources/js/collections/playlist.js index e69de29..43b8b76 100644 --- a/resources/js/collections/playlist.js +++ b/resources/js/collections/playlist.js @@ -0,0 +1,32 @@ +/*jslint laxbreak:true */ +/*jslint laxcomma:true */ +/*jslint loopfunc:true */ +/*jslint strict:true */ +/*jslint browser:true */ +/*jslint devel:true */ +define([ + "underscore" + , "backbone" + + , "models/server" + + , "backbone-localstorage" +] +, function (_, Backbone, ServerModel) { + "use strict"; + + var Server = Backbone.Collection.extend({ + model: ServerModel + + , localStorage: new Backbone.LocalStorage("daap-servers") + + , initialize: function () { + //_.bindAll(this, ""); + + return Server.__super__.initialize.call(this, arguments); + } + + }); + + return Server; +}); \ No newline at end of file diff --git a/resources/js/config.js b/resources/js/config.js index 9f4bf2a..f68b83e 100644 --- a/resources/js/config.js +++ b/resources/js/config.js @@ -17,7 +17,7 @@ define([ debug: false , verbose: false - , docRoot: "" + , docRoot: "/" // TODO: Should addLeadingSlash instead , daap: { hostname: "daap.lalonde.me" @@ -35,7 +35,7 @@ define([ , debug: true , verbose: 6 - , docRoot: "" + , docRoot: "/" , daap: { hostname: "daap.localhost" diff --git a/resources/js/main.js b/resources/js/main.js index 0dc3684..8ecba7c 100644 --- a/resources/js/main.js +++ b/resources/js/main.js @@ -6,7 +6,7 @@ require.config({ shim: { "jquery-ui": ["jquery"] , "jquery-event-drag": ["jquery"] - , "jquery-layout": ["jquery"] + , "jquery-layout": ["jquery", "jquery-ui"] , "datatables": ["jquery"] , "bootstrap-contextmenu": ["bootstrap"] @@ -43,9 +43,9 @@ require.config({ deps: ["toolbox"] } - //, "config": { - // exports: "Config" - //} + , "underscore-string": { + deps: ["underscore"] + } } , paths: { @@ -59,6 +59,7 @@ require.config({ , "bootstrap-contextmenu": "../vendors/bootstrap/contextmenu/59986df48f/js/bootstrap-contextmenu" , "underscore": "../vendors/lodash/0.9.0/lodash.underscore.min" + , "underscore-string": "../vendors/lodash/string/2.3.0/underscore.string.min" , "backbone": "../vendors/backbone/0.9.2/backbone-min" , "backbone-localstorage": "../vendors/backbone/localstorage/8651291560/backbone.localStorage-min" @@ -68,7 +69,6 @@ require.config({ , "text": "../vendors/require/plugins/text/f5816b565b/text" , "async": "../vendors/async" - //, "config": "config" } , baseUrl: "/resources/js" diff --git a/resources/js/views/app.js b/resources/js/views/app.js index 2fc49da..e849c82 100644 --- a/resources/js/views/app.js +++ b/resources/js/views/app.js @@ -10,6 +10,8 @@ define([ , "jquery" , "backbone" , "jquery-layout" + + , "jquery-ui" ] , function (_, $, Backbone) { "use strict"; @@ -45,6 +47,8 @@ define([ , west: { size: 150 , closable: true + , fxName: "slider" + // TODO: fx does not work } , center: { diff --git a/resources/js/views/browser.js b/resources/js/views/browser.js index e69de29..ca10c21 100644 --- a/resources/js/views/browser.js +++ b/resources/js/views/browser.js @@ -0,0 +1,52 @@ +/*jslint laxbreak:true */ +/*jslint laxcomma:true */ +/*jslint loopfunc:true */ +/*jslint strict:true */ +/*jslint browser:true */ +/*jslint devel:true */ + +define([ + "underscore" + , "jquery" + , "backbone" + + , "views/browser" + , "views/list" + + , "text!../../templates/client/browser-layout.html" + + , "jquery-layout" +] +, function ( +_ +, $ +, Backbone + +, BrowserView +, ListView + +, tmplBrowserLayout +) { + "use strict"; + + var Browser = Backbone.View.extend({ + client: null + + , layout: null + + , browserView: null + + , listView: null + + , initialize: function (client) { + var that = this + ; + + Browser.__super__.initialize.apply(that); + + that.client = client; + } + }); + + return Browser; +}); \ No newline at end of file diff --git a/resources/js/views/client.js b/resources/js/views/client.js index 7ad077b..452fe01 100644 --- a/resources/js/views/client.js +++ b/resources/js/views/client.js @@ -6,15 +6,85 @@ /*jslint devel:true */ define([ - "jquery" + "underscore" + , "jquery" , "backbone" + + , "views/browser" + , "views/list" + + , "text!../../templates/client/layout.html" + , "jquery-layout" ] -, function ($, Backbone) { +, function ( +_ +, $ +, Backbone + +, BrowserView +, ListView + +, tmplClientLayout +) { "use strict"; - return Backbone.View.extend({ + var Client = Backbone.View.extend({ + el: $(tmplClientLayout) + + , client: null + + , layout: null + + , browserView: null + + , listView: null + + , initialize: function (client) { + var that = this + , container = document.createElement("div") + ; + + that.el.id = "__view-" + client.attributes.hostname.replace(".", "_"); + + Client.__super__.initialize.apply(that); + + that.client = client; + + that.layout = that.$el.find("> div").layout({ + defaults: { + closable: false + , resizable: true + , slidable: true + , spacing_open: 5 + , spacing_closed: 5 + } + + , north: { + minSize: 100 + , size: 200 + , closable: true + } + + , center: { + minSize: 200 + } + }); + + that.browserView = new BrowserView({ + el: that.layout.panes.north + , client: that.client + }); + + that.ListView = new ListView({ + el: that.layout.panes.center + , client: that.client + }); + + } }); + + return Client; }); /* diff --git a/resources/js/views/main.js b/resources/js/views/main.js index a9c4497..11df0a4 100644 --- a/resources/js/views/main.js +++ b/resources/js/views/main.js @@ -5,9 +5,64 @@ /*jslint browser:true */ /*jslint devel:true */ define([ + "underscore" + , "jquery" + , "backbone" + + , "views/list" + , "views/client" ] -, function () { +, function ( +_ +, $ +, Backbone + +, ListView +, ClientView +) { "use strict"; - return function() {}; + var Main = Backbone.View.extend({ + el: $("div#wrapperMain") + + , children: {} + + , initialize: function (playlistCollection) { + //this.setView("playlist", new ListView(playlistCollection)); + + Main.__super__.initialize.apply(this, arguments); + } + + , setView: function (name, view) { + console.debug("Set view: "+ name); + this.children[name] = view; + } + + , getView: function (name) { + return this.children[name]; + } + + , showView: function (name) { + console.debug("Show view: "+ name); + if (this.children[name] && this.children[name].$el) { + this.children[name].$el.show(); + this.$el.append(this.children[name].$el); + } + } + , hideView: function (name) { + console.debug("Hide view: "+ name); + if (this.children[name] && this.children[name].$el) { + this.children[name].$el.hide(); + this.$el.remove(this.children[name].$el); + } + } + + , toggleView: function (name) { + if (this.children[name] && this.children[name].$el) { + this.children[name].$el.toggle(); + } + } + }); + + return Main; }); \ No newline at end of file diff --git a/resources/js/views/sidebar.js b/resources/js/views/sidebar.js index a59d852..46e15ef 100644 --- a/resources/js/views/sidebar.js +++ b/resources/js/views/sidebar.js @@ -68,8 +68,8 @@ _ that.renderServerItem(server); }); - this.$el.delegate("> ul > li:first-child", "dblclick", function __fnSideBarEventDblclickPlaylist(event) { - Backbone.Router.prototype.navigate("playlist", false); + this.$el.delegate("> ul > li:first-child", "click", function __fnSideBarEventDblclickPlaylist(event) { + Backbone.Router.prototype.navigate("playlist", true); setTimeout(function __fnSideBarViewTimeoutTogglePlaylistClass() { that.$el.find("li.selected").removeClass("selected"); @@ -204,7 +204,7 @@ console.log(event); }; }(item)); - $item.on("dblclick", function __fnSideBarViewEventDblClickItem(event) { + $item.on("click", function __fnSideBarViewEventDblClickItem(event) { that.$el.find("li.selected").removeClass("selected"); $item.addClass("selected"); /* diff --git a/resources/templates/app/modal-loading.html b/resources/templates/app/modal-loading.html index 924a90f..a3cc471 100644 --- a/resources/templates/app/modal-loading.html +++ b/resources/templates/app/modal-loading.html @@ -4,7 +4,7 @@ data-show="true" tabindex="-1" role="dialog">
-

Loading

+

Loading...

diff --git a/resources/templates/client/layout.html b/resources/templates/client/layout.html new file mode 100644 index 0000000..3a540c1 --- /dev/null +++ b/resources/templates/client/layout.html @@ -0,0 +1,16 @@ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file