blob42/angularjs-batarang
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

fix ui issues with enabling batarang

Browse Source
This commit is contained in:
Brian Ford 2012-11-13 19:03:12 -05:00
parent 0905deec4e
commit 6636a6f00f
4 changed files with 55 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
css/panel.css
View File

@ -23,6 +23,19 @@ body {
background-color: #E0E0E0; background-color: #E0E0E0;
} }
.bat-nav-check {
background-color: #fff;
border: 1px solid #ddd;
border-bottom-color: transparent;
border-radius: 4px 4px 0 0;
padding: 8px 12px 8px 12px;
margin-right: 2px;
line-height: 18px;
}
.bat-nav-check input[type="checkbox"] {
margin: 0;
}
/* /*
* Slider widget style based on jquery-ui-bootstrap * Slider widget style based on jquery-ui-bootstrap

19
js/controllers/PanelCtrl.js
View File

@ -1,19 +0,0 @@
panelApp.controller('PanelCtrl', function PanelCtrl($scope, appContext) {
// TODO: remove this (newVal === oldVal ?)
var first = true;
appContext.getDebug(function (result) {
$scope.enable = result;
$scope.$watch('enable', function (newVal, oldVal) {
// prevent refresh on initial pageload
if (first) {
first = false;
} else {
appContext.setDebug(newVal);
}
});
});
});

43
js/directives/tabs.js
View File

@ -10,18 +10,52 @@ panelApp.directive('batTabs', function ($compile, $templateCache, $http) {
'<li ng-repeat="pane in panes" ng-class="{active:pane.selected}">'+ '<li ng-repeat="pane in panes" ng-class="{active:pane.selected}">'+
'<a href="" ng-click="select(pane)">{{pane.title}}</a>' + '<a href="" ng-click="select(pane)">{{pane.title}}</a>' +
'</li>' + '</li>' +
'<li>' +
'<div class="bat-nav-check">' +
'<input type="checkbox" ng-model="enable" id="enable-instrumentation"> ' +
'Enable' +
'</div>' +
'</li>' +
'</ul>' + '</ul>' +
'</div>' + '</div>' +
'<div class="row-fluid bat-tabs-inside"></div>' + '<div class="row-fluid bat-tabs-inside"></div>' +
'<div ng-transclude></div>' + '<div ng-transclude></div>' +
'</div>', '</div>',
replace: true, replace: true,
controller: function ($scope, $element) { controller: function ($scope, appContext) {
var panes = $scope.panes = []; var panes = $scope.panes = [];
this.addPane = function(pane) { this.addPane = function(pane) {
panes.push(pane); panes.push(pane);
}; };
// TODO: remove this (newVal === oldVal ?)
var first = true;
appContext.getDebug(function (result) {
$scope.enable = result;
$scope.$watch('enable', function (newVal, oldVal) {
// prevent refresh on initial pageload
if (first) {
first = false;
} else {
appContext.setDebug(newVal);
if (!newVal) {
$scope.lastPane = $scope.currentPane;
$scope.select($scope.panes[$scope.panes.length - 1]);
} else {
$scope.select($scope.lastPane);
}
}
});
if (result) {
$scope.select($scope.panes[0]);
}
});
}, },
link: function (scope, element, attr) { link: function (scope, element, attr) {
@ -36,6 +70,9 @@ panelApp.directive('batTabs', function ($compile, $templateCache, $http) {
} }
scope.select = function (pane) { scope.select = function (pane) {
if (!scope.enable && pane !== scope.panes[scope.panes.length - 1]) {
return;
}
$http.get(pane.src, { cache: $templateCache }). $http.get(pane.src, { cache: $templateCache }).
then(function (response) { then(function (response) {
var template = response.data; var template = response.data;
@ -51,9 +88,11 @@ panelApp.directive('batTabs', function ($compile, $templateCache, $http) {
pane.selected = false; pane.selected = false;
}); });
pane.selected = true; pane.selected = true;
scope.currentPane = pane;
}; };
scope.select(scope.panes[0]); scope.lastPane = scope.panes[0];
scope.select(scope.panes[scope.panes.length - 1]);
} }
}; };

11
panel.html
View File

@ -41,19 +41,10 @@
<script src="js/controllers/DepsCtrl.js"></script> <script src="js/controllers/DepsCtrl.js"></script>
<script src="js/controllers/ModelCtrl.js"></script> <script src="js/controllers/ModelCtrl.js"></script>
<script src="js/controllers/OptionsCtrl.js"></script> <script src="js/controllers/OptionsCtrl.js"></script>
<script src="js/controllers/PanelCtrl.js"></script>
<script src="js/controllers/PerfCtrl.js"></script> <script src="js/controllers/PerfCtrl.js"></script>
</head> </head>
<body ng-controller="PanelCtrl"> <body>
<label class="checkbox" for="enable-instrumentation">
<input type="checkbox" ng-model="enable" id="enable-instrumentation">
Enable
<span class="label label-important">
Causes refresh
<i class="icon-refresh icon-white"></i>
</span>
</label>
<bat-tabs> <bat-tabs>
<bat-pane title="Models" src="panes/model.html"></bat-pane> <bat-pane title="Models" src="panes/model.html"></bat-pane>
<bat-pane title="Performance" src="panes/perf.html"></bat-pane> <bat-pane title="Performance" src="panes/perf.html"></bat-pane>