<!DOCTYPE html>
<html ng-app="plunker">
<head>
<script data-require="angular.js@1.x" data-semver="1.4.2" src="https://code.angularjs.org/1.4.2/angular.js"></script>
<script data-require="ui-bootstrap@*" data-semver="0.13.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.min.js"></script>
<link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body dt-konami-debug ng-controller="MainCtrl">
<h1>Jem's konami debug</h1>
<p>Hit the following combination: ↑ ↑ ↓ ↓ ← → ← → B A</p>
<br />
<div class="container" ng-if="showDebug">
<div class="panel panel-default">
<div class="panel-heading">
<h2 class="panel-title">debug pane</h2>
</div>
<div class="panel-body">
<span>some debug data</span>
</div>
</div>
</div>
</body>
</html>
// Code goes here
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.weekViewSelected = "production"
});
app.directive('dtKonamiDebug', ['$document', '$rootScope',
function($document, $rootScope) {
// Pattern = Konami code (↑ ↑ ↓ ↓ ← → ← → B A)
var pattern = [38, 38, 40, 40, 37, 39, 37, 39, 66, 65];
// Pattern = "debug"
// var pattern = [68, 69, 66, 85, 71];
var cursor = 0;
return {
restrict: 'A',
link: function(scope, element, attrs) {
// Enrich parent scope
scope.showDebug = false;
// Bind document's keydown event (rem: keypress is trapped by navigation handler, pans the screen and disables propagation)
$document.bind('keydown', function(event) {
// Obtain keycode
var keycode = event.which;
// Output keycode
//console.log('keydown: ' + keycode);
// Compare keycode with expected character
if (pattern[cursor] == keycode) {
// End of the pattern?
if (pattern.length == ++cursor) {
// console.log('debug mode toggle');
scope.showDebug = !scope.showDebug;
scope.$apply();
cursor = 0;
}
} else {
cursor = 0;
}
});
scope.$watch('showDebug', function(newVal) {
});
}
};
}
]);
/* Styles go here */