diff --git a/css/styles.css b/css/styles.css index cdfa6c3..cc8563d 100644 --- a/css/styles.css +++ b/css/styles.css @@ -19,3 +19,47 @@ body { .no-reports { display: none; } + +/** + * [START] Browse directory +*/ + +#browseList ul { + margin-left: 0; + list-style-type: none; +} + +#browseList li { + background-color: #f7f7f7; + margin: 10px 0; +} + +#browseList li:hover { + background-color: #0081c2; + background-image: -moz-linear-gradient(top, #0088cc, #0077b3); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3)); + background-image: -webkit-linear-gradient(top, #0088cc, #0077b3); + background-image: -o-linear-gradient(top, #0088cc, #0077b3); + background-image: linear-gradient(to bottom, #0088cc, #0077b3); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0); +} + +#browseList li a { + display: block; + padding: 10px; +} + +#browseList li a:hover { + text-decoration: none; + color: #ffffff; +} + +#browseList li p { + margin: 0; + padding-bottom: 4px; +} + +/** + * [END] Browse directory +*/ diff --git a/index.html b/index.html index 4d7aadf..083cdf8 100644 --- a/index.html +++ b/index.html @@ -33,6 +33,7 @@ + diff --git a/js/app.js b/js/app.js index 099e1c1..a3f4bf4 100644 --- a/js/app.js +++ b/js/app.js @@ -27,6 +27,7 @@ directory.Router = Backbone.Router.extend({ routes: { "": "home", + "browse": "browse", "contact": "contact", "employees/:id": "employeeDetails" }, @@ -54,6 +55,17 @@ directory.Router = Backbone.Router.extend({ directory.shellView.selectMenuItem('home-menu'); }, + browse: function () { + if (!directory.browseView) { + directory.browseView = new directory.BrowseView(); + directory.browseView.render(); + } else { + directory.browseView.delegateEvents(); + } + this.$content.html(directory.browseView.el); + directory.shellView.selectMenuItem('browse-menu'); + }, + contact: function () { if (!directory.contactView) { directory.contactView = new directory.ContactView(); @@ -80,7 +92,7 @@ directory.Router = Backbone.Router.extend({ }); $(document).on("ready", function () { - directory.loadTemplates(["HomeView", "ContactView", "ShellView", "EmployeeView", "EmployeeSummaryView", "EmployeeListItemView"], + directory.loadTemplates(["HomeView", "BrowseView", "ContactView", "ShellView", "EmployeeView", "EmployeeSummaryView", "EmployeeListItemView"], function () { directory.router = new directory.Router(); Backbone.history.start(); diff --git a/js/views/browse.js b/js/views/browse.js new file mode 100644 index 0000000..a11bd12 --- /dev/null +++ b/js/views/browse.js @@ -0,0 +1,29 @@ +directory.BrowseView = Backbone.View.extend({ + + initialize: function () { + this.employees = new directory.EmployeeCollection(); + this.sortBy = 'firstName'; + this.employees.comparator = this.sortBy; + this.employees.fetch({reset: true, data: {name: ''}}); + this.listView = new directory.EmployeeListView({model: this.employees, className: 'browse-list'}); + this.employees.on('sort', this.render, this); + }, + + render: function () { + this.$el.html(this.template()); + $("#sortBy").val(this.sortBy); + $("#browseList", this.el).html(this.listView.render().el); + return this; + }, + + events: { + "change #sortBy":"sort" + }, + + sort: function() { + this.sortBy = $("#sortBy").val(); + this.employees.comparator = this.sortBy; + this.employees.sort(); + } + +}); \ No newline at end of file diff --git a/tpl/BrowseView.html b/tpl/BrowseView.html new file mode 100644 index 0000000..233870e --- /dev/null +++ b/tpl/BrowseView.html @@ -0,0 +1,10 @@ +
+ +