From 5219fbe7817e78858817ab60a791b15fd076984d Mon Sep 17 00:00:00 2001 From: Matthieu Lalonde Date: Fri, 2 Nov 2012 14:34:35 -0400 Subject: [PATCH] Towards client panel --- index.html | 76 +++++++++---------- resources/css/app.css | 101 ++++++++++++++----------- resources/js/app.js | 29 +++++-- resources/js/views/app.js | 6 +- resources/js/views/client.js | 69 ++++++++++++----- resources/js/views/footer.js | 12 +-- resources/js/views/list.js | 23 +++++- resources/js/views/main.js | 77 ++++++++++++++----- resources/js/views/sidebar.js | 17 +++-- resources/templates/client/layout.html | 10 +-- 10 files changed, 267 insertions(+), 153 deletions(-) diff --git a/index.html b/index.html index 4a5c2ad..7aabff3 100644 --- a/index.html +++ b/index.html @@ -49,48 +49,44 @@
-
-
    -
  •  Playlist
    • -
  • - -  Servers - - -
      - -
    -
    • -
-
+
-
- -
+
diff --git a/resources/css/app.css b/resources/css/app.css index 974de24..53528ef 100644 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -13,6 +13,7 @@ body { background-position: center center; background-repeat: no-repeat; } + /* body.loading > * { display: none; @@ -22,16 +23,16 @@ body.loading > * { * JLayout */ .ui-layout-pane { /* all 'panes' */ - background: transparent; + background: transparent; border: none; - padding: 0; - margin: 0; + padding: 0; + margin: 0; overflow: hidden; } .ui-layout-resizer { background: url('../img/viewport_background.png') repeat-x !important; - cursor: row-resize !important;; + cursor: row-resize !important; } .ui-layout-toggler { @@ -91,7 +92,7 @@ div#wrapperPlayer { line-height: 21px; } -body > .ui-layout-west #wrapperSideBar { +body > .ui-layout-west { margin: 0; padding: 0; min-width: 100px; @@ -102,20 +103,20 @@ body > .ui-layout-west #wrapperSideBar { height: 100%; } -body > .ui-layout-west > #wrapperSideBar ul, -body > .ui-layout-west > #wrapperSideBar ul li { +body > .ui-layout-west > ul, +body > .ui-layout-west > ul li { margin: 0; padding: 0; list-style: none; list-style-type: none; } - body > .ui-layout-west > #wrapperSideBar ul li { + body > .ui-layout-west > ul li { vertical-align: bottom; margin-bottom: 5px; } - body > .ui-layout-west > #wrapperSideBar ul li > span { + body > .ui-layout-west > ul li > span { display: block; line-height: 16px; height: 16px; @@ -124,7 +125,7 @@ body > .ui-layout-west > #wrapperSideBar ul li { padding-left: 5px; } - body > .ui-layout-west > #wrapperSideBar ul li > span > span { + body > .ui-layout-west > ul li > span > span { overflow: hidden; text-overflow: ellipsis; height: 16px; @@ -135,11 +136,11 @@ body > .ui-layout-west > #wrapperSideBar ul li { vertical-align: middle; } - body > .ui-layout-west > #wrapperSideBar ul li > span:hover { + body > .ui-layout-west > ul li > span:hover { color: #000; } - body > .ui-layout-west > #wrapperSideBar ul li.selected > span { + body > .ui-layout-west > ul li.selected > span { color: #FFF; background-color: #4966B1;/* Old browsers */ background: -moz-linear-gradient(top, #6086e5 0%, #6086e5 39%, #4966b1 100%); /* FF3.6+ */ @@ -151,72 +152,80 @@ body > .ui-layout-west > #wrapperSideBar ul li { filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6086e5', endColorstr='#4966b1',GradientType=0 ); /* IE6-9 */ } - body > .ui-layout-west > #wrapperSideBar > ul > li:last-child > span:hover { + body > .ui-layout-west > ul > li:last-child > span:hover { background-color: transparent; background: transparent; color: #333; } - body > .ui-layout-west > #wrapperSideBar ul li ul { + body > .ui-layout-west > ul li ul { margin-left: 10px; } - body > .ui-layout-west > #wrapperSideBar ul li .sidebar-list-action { + body > .ui-layout-west > ul li .sidebar-list-action { display: none; height: 14px; } - body > .ui-layout-west > #wrapperSideBar ul li > span:hover > .sidebar-list-action { + body > .ui-layout-west > ul li > span:hover > .sidebar-list-action { display: inline-block; } -div#wrapperMain > div > div:first { - margin: 0; - padding: 0; - background: #FFF url(../img/grid3-hrow2.gif) repeat-x; +body > .ui-layout-center > div { + height: 100%; + width: 100%; + overflow: hidden; + display: block; } - div#wrapperMain > div > div:first > div.third { + + body > .ui-layout-center > div > div:first { + margin: 0; + padding: 0; + background: #FFF url(../img/grid3-hrow2.gif) repeat-x; + } + + body > .ui-layout-center > div > div:first > div.third { width: 33.3333%; float: left; clear: none; } - div#wrapperMain > div > div:first > div.third:first-child { + body > .ui-layout-center > div > div:first > div.third:first-child { clear: left; } - div#wrapperMain > div > div:first > div.third:last-child { + body > .ui-layout-center > div > div:first > div.third:last-child { clear: right; } - div#wrapperMain > div > div:first > div.third > div.dataTables_wrapper, - div#wrapperMain > div > div:first > div.third > div.dataTables_wrapper { + body > .ui-layout-center > div > div:first > div.third > div.dataTables_wrapper, + body > .ui-layout-center > div > div:first > div.third > div.dataTables_wrapper { border-left: 1px solid #C6C6C6; } - div#wrapperMain > div > div:first > div:first-child > div.dataTables_wrapper, - div#wrapperMain > div > div:first > div:first-child > div.dataTables_wrapper { + body > .ui-layout-center > div > div:first > div:first-child > div.dataTables_wrapper, + body > .ui-layout-center > div > div:first > div:first-child > div.dataTables_wrapper { border-left: none; padding-left: 1px; } - div#wrapperMain > div > div:first > div.third > div.dataTables_wrapper table td { + body > .ui-layout-center > div > div:first > div.third > div.dataTables_wrapper table td { padding-left: 4px; } - 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; } + body > .ui-layout-center > div > div:first table.dataTable tr td.sorting_1 { background-color: transparent; } + body > .ui-layout-center > div > div:first table.dataTable tr td.sorting_2 { background-color: transparent; } + body > .ui-layout-center > div > div:first table.dataTable tr td.sorting_3 { background-color: transparent; } -div#wrapperList { +.ui-layout-center .client-view-container { margin: 0; padding: 0; width: 100%; background: #FFF url(../img/grid3-hrow2.gif) repeat-x; } - div#wrapperList table#tableList { + .ui-layout-center .client-view-container table.table-list { margin: 0; padding: 0; width: 100%; @@ -237,14 +246,14 @@ div#wrapperList { } /* -div#wrapperList table#tableList tr td { +.ui-layout-center .client-view-container table.table-list tr td { text-overflow: ellipsis; max-width: 20%; overflow: hidden; white-space: nowrap; } */ -div#wrapperFooter { +body > .ui-layout-south { margin: 0; padding: 0; background: url('../img/viewport_background.png') repeat-x left bottom; @@ -252,21 +261,21 @@ div#wrapperFooter { height: 30px; line-height: 25px; } - div#wrapperFooter .btn-inverse { + body > .ui-layout-south .btn-inverse { line-height: 12px; } - div#wrapperFooter > div#wrapperFooterRight { + body > .ui-layout-south > div#wrapperFooterRight { text-align: right; padding-right: 10px; padding-top: 3px; } - div#wrapperFooter > div#wrapperFooterRight div.btn-group { + body > .ui-layout-south > div#wrapperFooterRight div.btn-group { height: 25px; } - div#wrapperFooter > div#wrapperFooterLeft { + body > .ui-layout-south > div#wrapperFooterLeft { text-align: left; padding-left: 10px; padding-top: 2px; @@ -335,7 +344,7 @@ div.dataTables_scrollHeadInner th { border: none; } - div#wrapperMain > div > div:first div.dataTables_scrollHeadInner th { + body > .ui-layout-center > div > div:first div.dataTables_scrollHeadInner th { padding-left: 4px; } @@ -352,10 +361,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#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, +body > .ui-layout-center > div > div:first > div.third > div.dataTables_wrapper table tr.selected td, +body > .ui-layout-center > div > div:first > div.third > div.dataTables_wrapper table tr.selected td.sorting_1, +body > .ui-layout-center > div > div:first > div.third > div.dataTables_wrapper table tr.selected td.sorting_2, +body > .ui-layout-center > 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, @@ -380,10 +389,10 @@ div#wrapperPlayer { height: 50px; } -div#wrapperFooter, +body > .ui-layout-south, table.dataTable tr td, table.dataTable tr th, -div#wrapperSideBar, +body > .ui-layout-west, div#wrapperPlayer { -webkit-user-select: none; -ms-user-select: none; diff --git a/resources/js/app.js b/resources/js/app.js index 208bbe6..1b97c54 100644 --- a/resources/js/app.js +++ b/resources/js/app.js @@ -123,11 +123,26 @@ _ , function __asyncAppDependenciesReady(err, result) { that.Views = {}; - that.Views.SideBar = new SideBarView(that.servers); - that.Views.Player = new PlayerView(); - that.Views.Main = new MainView(); that.Views.App = new AppView(); - that.Views.Footer = new FooterView(); + + that.Views.SideBar = new SideBarView({ + el: that.Views.App.Layout.panes.west + , servers: that.servers + }); + + that.Views.Player = new PlayerView({ + el: that.Views.App.Layout.panes.north + }); + + that.Views.Footer = new FooterView({ + el: that.Views.App.Layout.panes.south + }); + + that.Views.Main = new MainView({ + el: that.Views.App.Layout.panes.center + }); + + // TODO: Add playlist view here that.Views.Footer.on("toggle:sidebar", function __fnAppEventTogglerSiderBar(event) { that.Views.App.toggleSideBar(); @@ -178,7 +193,11 @@ _ if (client) { 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.setView(server.client.attributes.hostname, new ClientView({ + /*el: that.Views.App.Layout.panes.center + , */server: server + , aoppendEl: that.Views.App.Layout.panes.center + })); } that.Views.Main.showView(server.get("hostname")); diff --git a/resources/js/views/app.js b/resources/js/views/app.js index e849c82..6f58692 100644 --- a/resources/js/views/app.js +++ b/resources/js/views/app.js @@ -19,7 +19,7 @@ define([ return Backbone.View.extend({ el: $("body") - , layout: null + , Layout: null , layoutItems: null , events: { @@ -30,7 +30,7 @@ define([ var that = this; - that.layout = that.$el.layout({ + that.Layout = that.$el.layout({ //applyDefaultStyles: true defaults: { closable: false @@ -62,7 +62,7 @@ define([ } , toggleSideBar: function () { - this.layout.toggle("west"); + this.Layout.toggle("west"); } }); }); \ No newline at end of file diff --git a/resources/js/views/client.js b/resources/js/views/client.js index 452fe01..87fcf3e 100644 --- a/resources/js/views/client.js +++ b/resources/js/views/client.js @@ -30,28 +30,59 @@ _ "use strict"; var Client = Backbone.View.extend({ - el: $(tmplClientLayout) + id: null - , client: null + , el: $(tmplClientLayout) - , layout: null + , Server: null - , browserView: null + , Layout: null - , listView: null + , Views: {} - , initialize: function (client) { - var that = this - , container = document.createElement("div") + , initialize: function (options) { + _.bindAll(this + , "show" + , "hide" + ); + + var that = this + , appendEl = options.appendEl ; - that.el.id = "__view-" + client.attributes.hostname.replace(".", "_"); - Client.__super__.initialize.apply(that); + that.Server = options.server; + + delete options.server; + delete options.appendEl; + + Client.__super__.initialize.apply(that, arguments); + + that.el.id = "__view-" + 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 + }); - that.client = client; + var dbId = that.Server.client.collections.databasesInfo.get("dmap_listing").at(0).id + , dbCollection = that.Server.client.collections.databases[dbId].get("dmap_listing") + ; - that.layout = that.$el.find("> div").layout({ + that.Views.List = new ListView(dbCollection, { + el: that.Layout.panes.center + , type: "client" + }); +*/ + } + + , show: function () { + var that = this + ; + + + that.Layout = that.$el.layout({ defaults: { closable: false , resizable: true @@ -70,16 +101,12 @@ _ minSize: 200 } }); + //console.debug(that.Server.client.collections.databases[that.Server.client.collections.databasesInfo.get("dmap_listing").at(0).id].get("dmap_listing")); + } - that.browserView = new BrowserView({ - el: that.layout.panes.north - , client: that.client - }); - - that.ListView = new ListView({ - el: that.layout.panes.center - , client: that.client - }); + , hide: function () { + var that = this + ; } }); diff --git a/resources/js/views/footer.js b/resources/js/views/footer.js index 88dba71..55d37e9 100644 --- a/resources/js/views/footer.js +++ b/resources/js/views/footer.js @@ -15,17 +15,17 @@ define([ , function (_, $, Backbone, Bootstrap, tmplModalAbout) { "use strict"; - var View = Backbone.View.extend({ - el: $("div#wrapperFooter") - - , events: { + var Footer = Backbone.View.extend({ + events: { "click button[data-target='modalAboutDaapr']": "_buttonAboutClick" } - , initialize: function () { + , initialize: function (options) { var that = this ; + Footer.__super__.initialize.apply(that, arguments); + that.$el.delegate("button[data-toggle='side-bar']", "click", function (event) { that.trigger("toggle:sidebar"); @@ -48,5 +48,5 @@ define([ } }); - return View; + return Footer; }); \ No newline at end of file diff --git a/resources/js/views/list.js b/resources/js/views/list.js index 96b3edd..7e6bc57 100644 --- a/resources/js/views/list.js +++ b/resources/js/views/list.js @@ -12,7 +12,26 @@ define([ , function ($, Backbone, Bootstrap) { "use strict"; - return Backbone.View.extend({ - + var List = Backbone.View.extend({ + el: $("table") + , type: "playlist" + + , initialize: function (collection, options) { + this.$el = $(options.el).find("table:first"); + + this.type = options.type || "playlist"; + + List.__super__.initialize.apply(this, arguments); + + this.$el.html("

" + this.type + "

"); + + return this; + } + + , render: function () { + return this.$el; + } }); + + return List; }); \ No newline at end of file diff --git a/resources/js/views/main.js b/resources/js/views/main.js index 11df0a4..c34a921 100644 --- a/resources/js/views/main.js +++ b/resources/js/views/main.js @@ -23,45 +23,88 @@ _ "use strict"; var Main = Backbone.View.extend({ - el: $("div#wrapperMain") + children: {} - , children: {} - - , initialize: function (playlistCollection) { - //this.setView("playlist", new ListView(playlistCollection)); + , initialize: function (options) { + _.bindAll(this + , "setView" + , "getView" + , "showView" + , "hideView" + , "toggleView" + , "destroyView" + ); + //that.setView("playlist", new ListView(playlistCollection)); Main.__super__.initialize.apply(this, arguments); + + console.log(this.el); } , setView: function (name, view) { - console.debug("Set view: "+ name); - this.children[name] = view; + var that = this + ; + + console.debug("Set view: "+ name, view); + that.children[name] = view; } , getView: function (name) { - return this.children[name]; + var that = this + ; + + return that.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); + var that = this + ; + + 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.children[name].show) { + setTimeout(function __fnTimeoutMainViewShow() { + that.children[name].show(); + }, 50); + } else { + setTimeout(function __fnTimeoutMainViewShow() { + that.children[name].$el.show(); + }, 50); + } } } , hideView: function (name) { + var that = this + ; + 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); + if (that.children[name] && that.children[name].$el) { + if (that.children[name].hide) { + that.children[name].hide(); + } else { + that.children[name].$el.hide(); + } + + setTimeout(function __fnTimeoutMainViewHide() { + that.$el.remove(that.children[name].$el); + }, 50); } } , toggleView: function (name) { - if (this.children[name] && this.children[name].$el) { - this.children[name].$el.toggle(); + var that = this + ; + + if (that.children[name] && that.children[name].$el) { + that.children[name].$el.toggle(); } } + + , destroyView: function (name) { + + } }); return Main; diff --git a/resources/js/views/sidebar.js b/resources/js/views/sidebar.js index 46e15ef..e3e57cf 100644 --- a/resources/js/views/sidebar.js +++ b/resources/js/views/sidebar.js @@ -35,23 +35,22 @@ _ ) { "use strict"; - return Backbone.View.extend({ - el: $("div#wrapperSideBar") - , elServerList: $("div#wrapperSideBar ul.siderbar-server-list") - - , events: { + var SideBar = Backbone.View.extend({ + events: { "click > ul > li:last-child > span > a.sidebar-list-action": "_addServerItem" } , router: null - , initialize: function (servers) { + , initialize: function (options) { _.bindAll(this, "renderServerItem", "_addServerItem", "_routerActionPlaylist", "_routerActionClient"); var that = this , serverModel = null ; - this.servers = servers; + SideBar.__super__.initialize.apply(that, arguments); + + this.servers = options.servers; async.forEach(this.servers, that.renderServerItem, function __fnSideBarViewCbInitialRender() { that.trigger("rendered"); @@ -178,7 +177,7 @@ console.log(event); , $item = $(itemHtml) ; - this.elServerList.append($item); + this.$el.find("ul:first > li > ul.siderbar-server-list").append($item); item.on("change", function __fnSideBarViewClientItemChanged(event) { if (event.get("name")) { @@ -250,4 +249,6 @@ console.log(event); $glyph.addClass(newClass); } }); + + return SideBar; }); \ No newline at end of file diff --git a/resources/templates/client/layout.html b/resources/templates/client/layout.html index 3a540c1..1fdccef 100644 --- a/resources/templates/client/layout.html +++ b/resources/templates/client/layout.html @@ -1,16 +1,16 @@ -
+
-
+

" + this.type + "

-
+

" + this.type + "

-
+

" + this.type + "

-
+

" + this.type + "

\ No newline at end of file