Arma3_Exile/arma-server-web-admin
1
0
Fork 0
mirror of https://github.com/Dahlgren/arma-server-web-admin.git synced 2024-08-30 17:22:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #142 from Dahlgren/feature/navigation-active-state

Browse Source 
Add active state to navigation bar elements
This commit is contained in:
Björn Dahlgren 2019-09-22 21:50:57 +02:00 committed by GitHub
commit 96b391e598
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 16 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
public/js/app/views/navigation.js
View File

@ -14,6 +14,14 @@ define(function (require) {
return Marionette.ItemView.extend({ return Marionette.ItemView.extend({
template: _.template(tpl), template: _.template(tpl),
templateHelpers: function() {
return {
isActiveRoute: function (route) {
return Backbone.history.fragment === route ? 'active' : ''
}
}
},
events: { events: {
"click #settings": "settings" "click #settings": "settings"
}, },
@ -22,6 +30,7 @@ define(function (require) {
this.settings = options.settings; this.settings = options.settings;
this.servers = options.servers; this.servers = options.servers;
this.serversListView = new ServersListView({ collection: this.servers }) this.serversListView = new ServersListView({ collection: this.servers })
Backbone.history.on('route', this.render);
}, },
onDomRefresh: function () { onDomRefresh: function () {

3
public/js/app/views/navigation/servers/list_item.js
View File

@ -11,6 +11,9 @@ define(function (require) {
template = _.template(tpl); template = _.template(tpl);
return Marionette.ItemView.extend({ return Marionette.ItemView.extend({
className: function () {
return Backbone.history.fragment === 'servers/' + this.model.get('id') ? 'active' : ''
},
tagName: "li", tagName: "li",
template: template template: template
}); });

8
public/js/tpl/navigation.html
View File

@ -11,10 +11,10 @@
</div> </div>
<div class="navbar-collapse collapse"> <div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right"> <ul class="nav navbar-nav navbar-right">
<li><a href="#" id="dashboard">Dashboard</a></li> <li class="<%= isActiveRoute('') %>"><a href="#" id="dashboard">Dashboard</a></li>
<li><a href="#logs" id="logs">Logs</a></li> <li class="<%= isActiveRoute('logs') %>"><a href="#logs" id="logs">Logs</a></li>
<li><a href="#missions" id="missions">Missions</a></li> <li class="<%= isActiveRoute('missions') %>"><a href="#missions" id="missions">Missions</a></li>
<li><a href="#mods" id="mods">Mods</a></li> <li class="<%= isActiveRoute('mods') %>"><a href="#mods" id="mods">Mods</a></li>
<li><a href="#" id="settings">Settings</a></li> <li><a href="#" id="settings">Settings</a></li>
<li class="dropdown"> <li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Servers <b class="caret"></b></a> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Servers <b class="caret"></b></a>