Skip to content

Commit 29bac0c

Browse files
l-linl-lin
committed
Correct sidebar
1 parent dc44cde commit 29bac0c

File tree

3 files changed

+109
-48
lines changed

3 files changed

+109
-48
lines changed

‎demo/app.js

+86-27
Original file line numberDiff line numberDiff line change
@@ -1,83 +1,142 @@
11
(function(angular, backToTop) {
22
'use strict';
3-
angular.module('datatablesSampleApp', ['ngResource', 'datatables', 'ui.bootstrap', 'ui.router', 'hljs']).
4-
controller('apiCtrl', function($scope, DTOptionsBuilder) {
5-
$scope.dtOptions = DTOptionsBuilder.newOptions()
6-
.withDisplayLength(10)
7-
.withColReorder()
8-
.withColVis()
9-
.withOption('bAutoWidth', false)
10-
.withTableTools('vendor/datatables-tabletools/swf/copy_csv_xls_pdf.swf');
11-
}).
12-
config(function (hljsServiceProvider) {
3+
angular.module('datatablesSampleApp', ['ngResource', 'datatables', 'ui.bootstrap', 'ui.router', 'hljs'])
4+
.config(function (hljsServiceProvider) {
135
hljsServiceProvider.setOptions({
146
// replace tab with 4 spaces
157
tabReplace: ' '
168
});
17-
}).
18-
config(function($stateProvider, $urlRouterProvider) {
9+
})
10+
.config(function($stateProvider, $urlRouterProvider) {
1911
$urlRouterProvider.otherwise('/gettingStarted');
2012
$stateProvider
2113
.state('gettingStarted', {
2214
url: '/gettingStarted',
23-
templateUrl: 'demo/partials/getting_started.html'
15+
templateUrl: 'demo/partials/getting_started.html',
16+
controller: function($rootScope) {
17+
$rootScope.$broadcast('event:changeView', 'gettingStarted');
18+
}
2419
})
2520
.state('zeroConfig', {
2621
url: '/zeroConfig',
27-
templateUrl: 'demo/partials/zero_config.html'
22+
templateUrl: 'demo/partials/zero_config.html',
23+
controller: function($rootScope) {
24+
$rootScope.$broadcast('event:changeView', 'zeroConfig');
25+
}
2826
})
2927
.state('withOptions', {
3028
url: '/withOptions',
31-
templateUrl: 'demo/partials/with_options.html'
29+
templateUrl: 'demo/partials/with_options.html',
30+
controller: function($rootScope) {
31+
$rootScope.$broadcast('event:changeView', 'withOptions');
32+
}
3233
})
3334
.state('withPromise', {
3435
url: '/withPromise',
35-
templateUrl: 'demo/partials/with_promise.html'
36+
templateUrl: 'demo/partials/with_promise.html',
37+
controller: function($rootScope) {
38+
$rootScope.$broadcast('event:changeView', 'withPromise');
39+
}
3640
})
3741
.state('dataReloadWithPromise', {
3842
url: '/dataReloadWithPromise',
39-
templateUrl: 'demo/partials/data_reload_with_promise.html'
43+
templateUrl: 'demo/partials/data_reload_with_promise.html',
44+
controller: function($rootScope) {
45+
$rootScope.$broadcast('event:changeView', 'dataReloadWithPromise');
46+
}
4047
})
4148
.state('withAjax', {
4249
url: '/withAjax',
43-
templateUrl: 'demo/partials/with_ajax.html'
50+
templateUrl: 'demo/partials/with_ajax.html',
51+
controller: function($rootScope) {
52+
$rootScope.$broadcast('event:changeView', 'withAjax');
53+
}
4454
})
4555
.state('dataReloadWithAjax', {
4656
url: '/dataReloadWithAjax',
47-
templateUrl: 'demo/partials/data_reload_with_ajax.html'
57+
templateUrl: 'demo/partials/data_reload_with_ajax.html',
58+
controller: function($rootScope) {
59+
$rootScope.$broadcast('event:changeView', 'dataReloadWithAjax');
60+
}
4861
})
4962
.state('angularWay', {
5063
url: '/angularWay',
51-
templateUrl: 'demo/partials/angular_way.html'
64+
templateUrl: 'demo/partials/angular_way.html',
65+
controller: function($rootScope) {
66+
$rootScope.$broadcast('event:changeView', 'angularWay');
67+
}
5268
})
5369
.state('angularWayWithOptions', {
5470
url: '/angularWayWithOptions',
55-
templateUrl: 'demo/partials/angular_way_with_options.html'
71+
templateUrl: 'demo/partials/angular_way_with_options.html',
72+
controller: function($rootScope) {
73+
$rootScope.$broadcast('event:changeView', 'angularWayWithOptions');
74+
}
5675
})
5776
.state('withColReorder', {
5877
url: '/withColReorder',
59-
templateUrl: 'demo/partials/with_col_reorder.html'
78+
templateUrl: 'demo/partials/with_col_reorder.html',
79+
controller: function($rootScope) {
80+
$rootScope.$broadcast('event:changeView', 'withColReorder');
81+
}
6082
})
6183
.state('withColVis', {
6284
url: '/withColVis',
63-
templateUrl: 'demo/partials/with_col_vis.html'
85+
templateUrl: 'demo/partials/with_col_vis.html',
86+
controller: function($rootScope) {
87+
$rootScope.$broadcast('event:changeView', 'withColVis');
88+
}
6489
})
6590
.state('withTableTools', {
6691
url: '/withTableTools',
67-
templateUrl: 'demo/partials/with_table_tools.html'
92+
templateUrl: 'demo/partials/with_table_tools.html',
93+
controller: function($rootScope) {
94+
$rootScope.$broadcast('event:changeView', 'withTableTools');
95+
}
6896
})
6997
.state('bootstrapIntegration', {
7098
url: '/bootstrapIntegration',
71-
templateUrl: 'demo/partials/bootstrap_integration.html'
99+
templateUrl: 'demo/partials/bootstrap_integration.html',
100+
controller: function($rootScope) {
101+
$rootScope.$broadcast('event:changeView', 'bootstrapIntegration');
102+
}
72103
})
73104
.state('allInOne', {
74105
url: '/allInOne',
75-
templateUrl: 'demo/partials/all_in_one.html'
106+
templateUrl: 'demo/partials/all_in_one.html',
107+
controller: function($rootScope) {
108+
$rootScope.$broadcast('event:changeView', 'allInOne');
109+
}
76110
})
77111
.state('api', {
78112
url: '/api',
79-
templateUrl: 'demo/partials/api.html'
113+
templateUrl: 'demo/partials/api.html',
114+
controller: function($rootScope) {
115+
$rootScope.$broadcast('event:changeView', 'api');
116+
}
80117
});
118+
})
119+
.controller('sidebarCtrl', function($scope) {
120+
$scope.currentView = 'gettingStarted';
121+
$scope.$on('event:changeView', function (event, view) {
122+
$scope.currentView = view;
123+
$scope.isCollapsed = $scope.isUsageActive();
124+
});
125+
$scope.isActive = function (view) {
126+
return $scope.currentView === view;
127+
};
128+
$scope.isUsageActive = function () {
129+
return 'gettingStarted' !== $scope.currentView && 'api' !== $scope.currentView;
130+
};
131+
$scope.isCollapsed = !('gettingStarted' === $scope.currentView || 'api' === $scope.currentView);
132+
})
133+
.controller('apiCtrl', function($scope, DTOptionsBuilder) {
134+
$scope.dtOptions = DTOptionsBuilder.newOptions()
135+
.withDisplayLength(10)
136+
.withColReorder()
137+
.withColVis()
138+
.withOption('bAutoWidth', false)
139+
.withTableTools('vendor/datatables-tabletools/swf/copy_csv_xls_pdf.swf');
81140
});
82141

83142
backToTop.init({

‎demo/partials/sidebar.html

+18-18
Original file line numberDiff line numberDiff line change
@@ -1,83 +1,83 @@
1-
<ul class="sidebar-item nav nav-list">
2-
<li>
1+
<ul class="sidebar-item nav nav-list" ng-controller="sidebarCtrl">
2+
<li ng-class="{'active': isActive('gettingStarted')}">
33
<a ui-sref="gettingStarted" class="faa-parent animated-hover">
44
<i class="fa fa-gear faa-spin"></i>&nbsp;Getting started
55
</a>
66
</li>
7-
<li>
7+
<li ng-class="{'active': isUsageActive()}">
88
<a class="faa-parent animated-hover" ng-click="isCollapsed = !isCollapsed; $event.stopProgragation()">
99
<i class="fa fa-play faa-horizontal"></i>&nbsp;Usage
1010
<b class="arrow fa fa-angle-down"></b>
1111
</a>
12-
<ul class="submenu" collapse="isCollapsed">
13-
<li>
12+
<ul class="submenu" collapse="!isCollapsed">
13+
<li ng-class="{'active': isActive('zeroConfig')}">
1414
<a ui-sref="zeroConfig">
1515
<i class="menu-icon fa fa-caret-right"></i>&nbsp;Zero configuration
1616
</a>
1717
</li>
18-
<li>
18+
<li ng-class="{'active': isActive('withOptions')}">
1919
<a ui-sref="withOptions">
2020
<i class="menu-icon fa fa-caret-right"></i>&nbsp;With options
2121
</a>
2222
</li>
23-
<li>
23+
<li ng-class="{'active': isActive('withPromise')}">
2424
<a ui-sref="withPromise">
2525
<i class="menu-icon fa fa-caret-right"></i>&nbsp;With promise
2626
</a>
2727
</li>
28-
<li>
28+
<li ng-class="{'active': isActive('dataReloadWithPromise')}">
2929
<a ui-sref="dataReloadWithPromise">
3030
<i class="menu-icon fa fa-caret-right"></i>&nbsp;Data reload with promise
3131
</a>
3232
</li>
33-
<li>
33+
<li ng-class="{'active': isActive('withAjax')}">
3434
<a ui-sref="withAjax">
3535
<i class="menu-icon fa fa-caret-right"></i>&nbsp;With ajax
3636
</a>
3737
</li>
38-
<li>
38+
<li ng-class="{'active': isActive('dataReloadWithAjax')}">
3939
<a ui-sref="dataReloadWithAjax">
4040
<i class="menu-icon fa fa-caret-right"></i>&nbsp;Data reload with Ajax
4141
</a>
4242
</li>
43-
<li>
43+
<li ng-class="{'active': isActive('angularWay')}">
4444
<a ui-sref="angularWay">
4545
<i class="menu-icon fa fa-caret-right"></i>&nbsp;The Angular way
4646
</a>
4747
</li>
48-
<li>
48+
<li ng-class="{'active': isActive('angularWayWithOptions')}">
4949
<a ui-sref="angularWayWithOptions">
5050
<i class="menu-icon fa fa-caret-right"></i>&nbsp;The Angular way with options
5151
</a>
5252
</li>
53-
<li>
53+
<li ng-class="{'active': isActive('withColReorder')}">
5454
<a ui-sref="withColReorder">
5555
<i class="menu-icon fa fa-caret-right"></i>&nbsp;With ColReorder
5656
</a>
5757
</li>
58-
<li>
58+
<li ng-class="{'active': isActive('withColVis')}">
5959
<a ui-sref="withColVis">
6060
<i class="menu-icon fa fa-caret-right"></i>&nbsp;With ColVis
6161
</a>
6262
</li>
63-
<li>
63+
<li ng-class="{'active': isActive('withTableTools')}">
6464
<a ui-sref="withTableTools">
6565
<i class="menu-icon fa fa-caret-right"></i>&nbsp;With TableTools
6666
</a>
6767
</li>
68-
<li>
68+
<li ng-class="{'active': isActive('bootstrapIntegration')}">
6969
<a ui-sref="bootstrapIntegration">
7070
<i class="menu-icon fa fa-caret-right"></i>&nbsp;Bootstrap integration
7171
</a>
7272
</li>
73-
<li>
73+
<li ng-class="{'active': isActive('allInOne')}">
7474
<a ui-sref="allInOne">
7575
<i class="menu-icon fa fa-caret-right"></i>&nbsp;All in one
7676
</a>
7777
</li>
7878
</ul>
7979
</li>
80-
<li>
80+
<li ng-class="{'active': isActive('api')}">
8181
<a ui-sref="api">
8282
<i class="fa fa-book"></i>&nbsp;API
8383
</a>

‎styles/main.css

+5-3
Original file line numberDiff line numberDiff line change
@@ -223,7 +223,7 @@ pre code {
223223
}
224224

225225
.api pre {
226-
border-radius: 0px;
226+
border-radius: 0;
227227
}
228228

229229
/* ---------------------------------------- */
@@ -344,12 +344,14 @@ pre code {
344344
margin: 0;
345345
}
346346

347-
.sidebar-item.nav-list>li .submenu>li>a:hover {
347+
.sidebar-item.nav-list>li .submenu>li>a:hover,
348+
.sidebar-item.nav-list>li .submenu>li.active>a {
348349
color: #4b88b7;
349350
background-color: #f1f5f9;
350351
}
351352

352-
.sidebar-item.nav-list>li .submenu>li>a:hover>i.fa {
353+
.sidebar-item.nav-list>li .submenu>li>a:hover>i.fa,
354+
.sidebar-item.nav-list>li .submenu>li.active>a>i.fa {
353355
display: inline-block;
354356
}
355357

0 commit comments

Comments
 (0)