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

refactor(hintApp): simplify app

Browse Source
This commit is contained in:
Brian Ford 2014-10-14 11:54:16 -07:00
parent f1b460e45a
commit 6911e08b73
5 changed files with 214 additions and 200 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

157
hint.html
View File

@ -1,91 +1,92 @@
<!doctype html> <!doctype html>
<html ng-csp ng-app="ngHintUI"> <html ng-csp ng-app="ngHintUI">
<head> <head>
<script src="bower_components/angular/angular.js"></script> <link rel="stylesheet" href="bower_components/angular/angular-csp.css">
<script src="bower_components/angular-bootstrap/ui-bootstrap.js"></script> <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<script src="bower_components/jquery/dist/jquery.js"></script> <link rel="stylesheet" href="app.css">
<script src="hintApp.js"></script> </head>
<script src="hintService.js"></script> <body>
<script src="hintCtrl.js"></script> <div ng-controller="HintController">
<div class="row" style="padding:10px">
<link rel="stylesheet" href="bower_components/angular/angular-csp.css"> <div class="col-md-12">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css"> <ul class="nav nav-tabs">
<link rel="stylesheet" href="app.css"> <li ng-class="{active: module === modName}" ng-repeat="(modName, value) in messageData" ng-click="setModule(modName)">
<a data-toggle="tab">
</head> {{modName}}
<body> </a>
<div ng-controller="HintController" > </li>
<div class="row" style="padding:10px"> </ul>
<div class="col-md-12"> <div class="row" style="padding: 5px 0px">
<ul class="nav nav-tabs"> <div class="col-md-2">
<li ng-class="{active: module === modName}" ng-repeat="(modName, value) in messageData" ng-click="setModule(modName)"> <ul class="nav nav-pills nav-stacked">
<a data-toggle="tab"> <li ng-class="{active: type === label}" ng-repeat="label in labels" ng-click="setType(label)">
{{modName}} <a class="offsetTab">{{label}}</a>
</a> </li>
</li> </ul>
</ul> <div ng-show="suppressedMessagesLength">
<div class="row" style="padding: 5px 0px"> <hr>
<div class="col-md-2"> <h5 class="offsetTab">Suppressed Errors:</h5>
<ul class="nav nav-pills nav-stacked"> <ul class="nav nav-pills nav-stacked">
<li ng-class="{active: type === label}" ng-repeat="label in labels" ng-click="setType(label)"> <li ng-repeat="(key,message) in suppressedMessages">
<a class="offsetTab"> <div class="suppressedMessage">
{{label}} <div class='alert alert-warning condenseAlert'>
</a> {{message}}
<button type="button" class="close" style="margin-top:-5px" ng-click="unsuppressMessage(key)">
<span aria-hidden="true">&times;</span>
<span class="sr-only">Close</span>
</button>
</div>
</div>
</li> </li>
</ul> </ul>
<div ng-show="suppressedMessagesLength">
<hr>
<h5 class="offsetTab">Suppressed Errors:</h5>
<ul class="nav nav-pills nav-stacked">
<li ng-repeat="(key,message) in suppressedMessages">
<div class="suppressedMessage">
<div class='alert alert-warning condenseAlert'>
{{message}}
<button type="button" class="close" style="margin-top:-5px" ng-click="unsuppressMessage(key)"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
</button>
</div>
</div>
</li>
</ul>
</div>
</div> </div>
<div class="col-md-10"> </div>
<div class="input-group"> <div class="col-md-10">
<div class="input-group-addon"><span class="glyphicon glyphicon-search"></span></div> <div class="input-group">
<input class="form-control" type="text" placeholder="Search Messages" ng-model="search"> <div class="input-group-addon"><span class="glyphicon glyphicon-search"></span></div>
</div> <input class="form-control" type="text" placeholder="Search Messages" ng-model="search">
<table class="table table-striped table-hover" ng-show="messageData[module][type].length"> </div>
<thead> <table class="table table-striped table-hover" ng-show="messageData[module][type].length">
<tr> <thead>
<th>No.</th> <tr>
<th ng-show="module === 'All' && type === 'All Messages' ">Module</th> <th>No.</th>
<th>Message</th> <th ng-show="module === 'All' && type === 'All Messages' ">Module</th>
<th ng-show="type === 'All Messages'">Type</th> <th>Message</th>
<th>Suppress</th> <th ng-show="type === 'All Messages'">Type</th>
</tr> <th>Suppress</th>
</thead> </tr>
<tbody> </thead>
<tr ng-repeat="message in messageData[module][type]| filter:search" <tbody>
ng-class="{danger: type === 'All Messages' && message.type === 'Error Messages', <tr ng-repeat="message in messageData[module][type] | filter:search"
warning: type === 'All Messages' && message.type === 'Warning Messages', ng-class="{danger: type === 'All Messages' && message.type === 'Error Messages',
info: type === 'All Messages' && message.type === 'Suggestion Messages'}" warning: type === 'All Messages' && message.type === 'Warning Messages',
ng-hide="isSuppressed(message.message)"> info: type === 'All Messages' && message.type === 'Suggestion Messages'}"
<td>{{$index+1}}</td> ng-hide="isSuppressed(message.message)">
<td ng-show="module === 'All' && type === 'All Messages'">{{message.module}}</td> <td>{{$index + 1}}</td>
<td>{{message.message || message}}</td> <td ng-show="module === 'All' && type === 'All Messages'">{{message.module}}</td>
<td ng-show="type === 'All Messages'">{{message.type.split(' ')[0]}}</td> <td>{{message.message || message}}</td>
<td align="center"><button type="button" class="btn btn-default btn-xs" ng-click="suppressMessage(message.message)"><span class="glyphicon glyphicon-minus-sign"></span></button></td> <td ng-show="type === 'All Messages'">{{ message.type.split(' ')[0] }}</td>
</tr> <td align="center"><button type="button" class="btn btn-default btn-xs" ng-click="suppressMessage(message.message)"><span class="glyphicon glyphicon-minus-sign"></span></button></td>
</tbody> </tr>
</table> </tbody>
<div ng-show="!messageData[module][type].length"> </table>
<h3>There are no messages in this category.</h3> <div ng-show="!messageData[module][type].length">
</div> <h3>There are no messages in this category.</h3>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</body> </div>
<!-- scripts -->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap.js"></script>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="hintApp.js"></script>
</body>
</html> </html>

2
hint.js
View File

@ -6,6 +6,6 @@ var customEvent = document.createEvent('Event');
customEvent.initEvent('myCustomEvent', true, true); customEvent.initEvent('myCustomEvent', true, true);
angular.hint.onMessage = function (moduleName, message, messageType) { angular.hint.onMessage = function (moduleName, message, messageType) {
eventProxyElement.innerText = moduleName+'##'+message+'##'+messageType; eventProxyElement.innerText = moduleName + '##' + message + '##' + messageType;
eventProxyElement.dispatchEvent(customEvent); eventProxyElement.dispatchEvent(customEvent);
}; };

135
hintApp.js
View File

@ -1 +1,134 @@
angular.module('ngHintUI',[]); angular.module('ngHintUI', []).
controller('HintController', ['$scope', 'hintService',
function($scope, hintService) {
//Set the hint service to perform this action when the page is refreshed
hintService.onRefresh(function() {
$scope.messageData = {
'All' : {
'Error Messages': [],
'Warning Messages': [],
'Suggestion Messages': [],
'All Messages': []
}
};
});
//Set the hint service to perform this action whenever
//a new hint message is received.
hintService.onHint(function(msg) {
//If there is no scope data, initialize a new data object
$scope.messageData = $scope.messageData || {
'All' : {
'Error Messages': [],
'Warning Messages': [],
'Suggestion Messages': [],
'All Messages': []
}
};
// Split the hint message into useful information
var result = msg.split('##'),
modName = result[0],
message = result[1],
messageType = result[2];
//If there are no messages for this module, make new arrays for this module's messages
if(!$scope.messageData[modName]) {
$scope.messageData[modName] = {
'Error Messages': [],
'Warning Messages': [],
'Suggestion Messages': [],
'All Messages': []
};
}
$scope.messageData['All']['All Messages'].push({
message: message,
type: messageType,
module: modName
});
if(!$scope.messageData['All'][messageType]) {
$scope.messageData['All'][messageType] = [];
}
$scope.messageData['All'][messageType].push(message);
$scope.messageData[modName]['All Messages'].push({message: message, type: messageType});
$scope.messageData[modName][messageType].push(message);
});
$scope.suppressedMessages = {};
$scope.suppressedMessagesLength = 0;
$scope.labels = ['All Messages', 'Error Messages', 'Warning Messages', 'Suggestion Messages'];
$scope.setModule = function(module) {
$scope.module = module;
};
$scope.setType = function(type) {
$scope.type = type;
};
$scope.setModule('All');
$scope.setType('All Messages');
$scope.isSuppressed = function(message) {
message = message.split(' ').slice(6,9).join('');
return message in $scope.suppressedMessages;
};
$scope.suppressMessage = function(message) {
$scope.suppressedMessagesLength++;
var key = message.split(' ').slice(6,9).join('');
var secondSpace = message.indexOf(' ', message.indexOf(' '));
var endInd = 60;
while(message.charAt(endInd) !== ' ') {
endInd++;
if(endInd > 75) {
break;
}
}
$scope.suppressedMessages[key] = '...' + message.substr(secondSpace+1,endInd) + '...';
};
$scope.unsuppressMessage = function(messageKey) {
$scope.suppressedMessagesLength--;
delete $scope.suppressedMessages[messageKey];
};
}]).
service('hintService', ['$rootScope', function($rootScope) {
var onHintCallback,
onRefreshCallback;
this.onHint = function(cb) {
onHintCallback = cb;
};
this.onRefresh = function(cb) {
onRefreshCallback = cb;
};
var port = chrome.extension.connect();
port.postMessage(chrome.devtools.inspectedWindow.tabId);
port.onMessage.addListener(function(msg) {
$rootScope.$apply(function () {
if (msg === 'refresh') {
onRefreshCallback();
} else {
onHintCallback(msg);
}
});
});
port.onDisconnect.addListener(function (a) {
console.log(a);
});
}]);

90
hintCtrl.js
View File

@ -1,90 +0,0 @@
angular.module('ngHintUI')
.controller('HintController', ['$scope', 'hintService',
function($scope, hintService) {
//Set the hint service to perform this action when the page is refreshed
hintService.setRefreshFunction(function() {
$scope.messageData = {
'All' : {
'Error Messages': [],
'Warning Messages': [],
'Suggestion Messages': [],
'All Messages': []
}
};
});
//Set the hint service to perform this action whenever
//a new hint message is received.
hintService.setHintFunction(function(msg) {
//If there is no scope data, initialize a new data object
$scope.messageData = $scope.messageData || {
'All' : {
'Error Messages': [],
'Warning Messages': [],
'Suggestion Messages': [],
'All Messages': []
}
};
//Split the hint message into useful information
var result = msg.split('##'),
modName = result[0],
message = result[1],
messageType = result[2];
//If there are no messages for this module, make new arrays for this module's messages
if(!$scope.messageData[modName]) {
$scope.messageData[modName] = {
'Error Messages': [],
'Warning Messages': [],
'Suggestion Messages': [],
'All Messages': []
};
}
$scope.messageData['All']['All Messages'].push({message: message, type: messageType, module: modName});
$scope.messageData['All'][messageType].push(message);
$scope.messageData[modName]['All Messages'].push({message: message, type: messageType});
$scope.messageData[modName][messageType].push(message);
$scope.$apply();
});
$scope.module, $scope.type, $scope.suppressedMessages = {}, $scope.suppressedMessagesLength = 0;
$scope.labels = ['All Messages', 'Error Messages', 'Warning Messages', 'Suggestion Messages'];
$scope.setModule = function(module) {
$scope.module = module;
};
$scope.setType = function(type) {
$scope.type = type;
};
$scope.setModule('All');
$scope.setType('All Messages');
$scope.isSuppressed = function(message) {
message = message.split(' ').slice(6,9).join('');
return message in $scope.suppressedMessages;
};
$scope.suppressMessage = function(message) {
$scope.suppressedMessagesLength++;
var key = message.split(' ').slice(6,9).join('');
var secondSpace = message.indexOf(' ', message.indexOf(' '));
var endInd = 60;
while(message.charAt(endInd) !== ' ') {
endInd++;
if(endInd > 75) {
break;
}
}
$scope.suppressedMessages[key] = '...'+message.substring(secondSpace+1,endInd)+'...';
};
$scope.unsuppressMessage = function(messageKey) {
$scope.suppressedMessagesLength--;
delete $scope.suppressedMessages[messageKey];
}
}]);

30
hintService.js
View File

@ -1,30 +0,0 @@
angular.module('ngHintUI').
service('hintService', function() {
var onHintFunction, onRefreshFunction;
this.setHintFunction = function(hintFunction) {
onHintFunction = hintFunction;
}
this.getHintFunction = function() {
return onHintFunction;
}
this.setRefreshFunction = function(refreshFunction) {
onRefreshFunction = refreshFunction;
}
this.getRefreshFunction = function() {
return onRefreshFunction;
}
var port = chrome.extension.connect();
port.postMessage(chrome.devtools.inspectedWindow.tabId);
port.onMessage.addListener(function(msg) {
msg == 'refresh' ? onRefreshFunction() : onHintFunction(msg);
});
port.onDisconnect.addListener(function (a) {
console.log(a);
});
});