Permalink
Browse files

Issue #2 - Refactored out the SKG key-recognition control into a pres…

…sAnyKeyButton directive
  • Loading branch information...
1 parent 15505e3 commit 78e77e1c0b01f3c2246fc7487494550728fbf513 @jessewebb committed Jul 19, 2015
Showing with 119 additions and 81 deletions.
  1. +2 −2 buy-binds-generator.html
  2. +2 −72 js/controllers.js
  3. +113 −2 js/directives.js
  4. +2 −5 partials/single-key-generator.phtml
@@ -86,8 +86,8 @@
<div class="row">
<div class="col-sm-12">
<ul class="nav nav-pills">
- <li active-class="active"><a id="generatorMultiKeyGenLink" href="#/">Multi-Key Generator</a></li>
- <li active-class="active"><a id="generatorSingleKeyGenLink" href="#/skg">Single Key Generator</a></li>
+ <li active-tab-class="active"><a id="generatorMultiKeyGenLink" href="#/">Multi-Key Generator</a></li>
+ <li active-tab-class="active"><a id="generatorSingleKeyGenLink" href="#/skg">Single Key Generator</a></li>
</ul>
<div ng-view></div>
View
@@ -22,66 +22,8 @@ buyndsControllers.controller('SingleKeyGenCtrl', ['$scope', '$route', '$window',
$scope.bindOptions = new buynds.BindOptions();
$scope.buyBind = '';
- $scope.keyRecognitionActivated = false;
$scope.submitted = false;
- var onPointerLockChange = function () {
- console.log('Executing onPointerLockChange');
- if($window.document.pointerLockElement ||
- $window.document.mozPointerLockElement ||
- $window.document.webkitPointerLockElement) {
- // The pointer lock status is now locked
- } else {
- // The pointer lock status is now unlocked
- if ($scope.keyRecognitionActivated) {
- jQuery($window.document).unbind('keydown');
- disablePointerLock();
- $scope.keyRecognitionActivated = false;
- $scope.$apply(); // force refresh because this function executes asynchronously outside AngularJS scope
- }
- }
- };
-
- var onPointerLockError = function () {
- $window.console.error('Pointer lock failed');
- jQuery($window.document).unbind('keydown');
- disablePointerLock();
- $scope.keyRecognitionActivated = false;
- $scope.$apply(); // force refresh because this function executes asynchronously outside AngularJS scope
- };
-
- var setupPointerLock = function (elem) {
- elem.requestPointerLock = elem.requestPointerLock ||
- elem.mozRequestPointerLock || elem.webkitRequestPointerLock;
- elem.requestPointerLock();
-
- $window.document.addEventListener('pointerlockchange', onPointerLockChange);
- $window.document.addEventListener('mozpointerlockchange', onPointerLockChange);
- $window.document.addEventListener('webkitpointerlockchange', onPointerLockChange);
-
- $window.document.addEventListener('pointerlockerror', onPointerLockError);
- $window.document.addEventListener('mozpointerlockerror', onPointerLockError);
- $window.document.addEventListener('webkitpointerlockerror', onPointerLockError);
- };
-
- var disablePointerLock = function () {
- $window.document.removeEventListener('pointerlockchange', onPointerLockChange);
- $window.document.removeEventListener('mozpointerlockchange', onPointerLockChange);
- $window.document.removeEventListener('webkitpointerlockchange', onPointerLockChange);
-
- $window.document.removeEventListener('pointerlockerror', onPointerLockError);
- $window.document.removeEventListener('mozpointerlockerror', onPointerLockError);
- $window.document.removeEventListener('webkitpointerlockerror', onPointerLockError);
-
- if($window.document.pointerLockElement ||
- $window.document.mozPointerLockElement ||
- $window.document.webkitPointerLockElement) {
- $window.document.exitPointerLock = $window.document.exitPointerLock ||
- $window.document.mozExitPointerLock || $window.document.webkitExitPointerLock;
- $window.document.exitPointerLock();
- }
- };
-
var findBindableKeyByCode = function (keyCode) {
for (var i = 0; i < $scope.bindableKeys.keyGroups.length; i++) {
var keyGroup = $scope.bindableKeys.keyGroups[i];
@@ -95,25 +37,13 @@ buyndsControllers.controller('SingleKeyGenCtrl', ['$scope', '$route', '$window',
return null;
};
- $scope.activateKeyRecognition = function (event) {
- $scope.keyRecognitionActivated = true;
- setupPointerLock(event.currentTarget);
- jQuery($window.document).keydown($scope.registerKeyPress);
- };
-
- $scope.registerKeyPress = function (keyEvent) {
- $scope.keyRecognitionActivated = false;
- jQuery($window.document).unbind('keydown');
- disablePointerLock();
- var keyCode = keyEvent.which;
- var bindableKey = findBindableKeyByCode(keyEvent.which);
+ $scope.setKeyToBindByCode = function (keyCode) {
+ var bindableKey = findBindableKeyByCode(keyCode);
if (bindableKey == null) {
$window.alert('Unrecognized Key! (keyCode = ' + keyCode + ')');
} else {
$scope.bindOptions.keyToBind = bindableKey.bind;
}
- keyEvent.preventDefault();
- $scope.$apply(); // force refresh because this function executes asynchronously outside AngularJS scope
};
$scope.toggleGearSelection = function (gearBind) {
View
@@ -8,9 +8,9 @@ buyndsDirectives.directive('appVersion', ['version', function (version) {
};
}]);
-buyndsDirectives.directive('activeClass', ['$location', function($location) {
+buyndsDirectives.directive('activeTabClass', ['$location', function($location) {
return function (scope, element, attrs) {
- var clazz = attrs.activeClass;
+ var clazz = attrs.activeTabClass;
var linkElement = element.children().eq(0); // assume 'a' element is first child
var linkHref = linkElement.attr('href');
linkHref = linkHref.substring(1); // remove leading hash character
@@ -24,3 +24,114 @@ buyndsDirectives.directive('activeClass', ['$location', function($location) {
});
};
}]);
+
+buyndsDirectives.directive('pressAnyKeyButton', ['$window', function($window) {
+ return {
+ scope: {
+ onKeyPress: '&'
+ },
+ restrict: 'A',
+ link: function(scope, element, attrs) {
+ scope.keyRecognitionActivated = false;
+ var domElement = element.get(0);
+
+ function isPointerLockActivated() {
+ return $window.document.pointerLockElement === domElement ||
+ $window.document.mozPointerLockElement === domElement ||
+ $window.document.webkitPointerLockElement === domElement;
+ }
+
+ function onKeyPress(keyPressEvent) {
+ if (scope.keyRecognitionActivated) {
+ scope.keyRecognitionActivated = false;
+ jQuery($window.document).off('keydown');
+ disablePointerLock();
+ var keyCode = keyPressEvent.which;
+ scope.onKeyPress()(keyCode);
+ scope.$apply();
+ keyPressEvent.preventDefault();
+ }
+ }
+
+ function onPointerLockChange() {
+ if(isPointerLockActivated()) {
+ if (!scope.keyRecognitionActivated) {
+ scope.keyRecognitionActivated = true;
+ jQuery($window.document).on('keydown', onKeyPress);
+ scope.$apply();
+ }
+ } else {
+ if (scope.keyRecognitionActivated) {
+ scope.keyRecognitionActivated = false;
+ jQuery($window.document).off('keydown');
+ disablePointerLock();
+ scope.$apply();
+ }
+ }
+ }
+
+ function onPointerLockError() {
+ $window.console.error('Pointer lock failed');
+ scope.keyRecognitionActivated = false;
+ jQuery($window.document).off('keydown');
+ disablePointerLock();
+ scope.$apply();
+ }
+
+ function setupPointerLock() {
+ $window.document.addEventListener('pointerlockchange', onPointerLockChange);
+ $window.document.addEventListener('mozpointerlockchange', onPointerLockChange);
+ $window.document.addEventListener('webkitpointerlockchange', onPointerLockChange);
+
+ $window.document.addEventListener('pointerlockerror', onPointerLockError);
+ $window.document.addEventListener('mozpointerlockerror', onPointerLockError);
+ $window.document.addEventListener('webkitpointerlockerror', onPointerLockError);
+
+ domElement.requestPointerLock = domElement.requestPointerLock ||
+ domElement.mozRequestPointerLock || domElement.webkitRequestPointerLock;
+ domElement.requestPointerLock();
+ }
+
+ function disablePointerLock() {
+ $window.document.removeEventListener('pointerlockchange', onPointerLockChange);
+ $window.document.removeEventListener('mozpointerlockchange', onPointerLockChange);
+ $window.document.removeEventListener('webkitpointerlockchange', onPointerLockChange);
+
+ $window.document.removeEventListener('pointerlockerror', onPointerLockError);
+ $window.document.removeEventListener('mozpointerlockerror', onPointerLockError);
+ $window.document.removeEventListener('webkitpointerlockerror', onPointerLockError);
+
+ if(isPointerLockActivated()) {
+ $window.document.exitPointerLock = $window.document.exitPointerLock ||
+ $window.document.mozExitPointerLock || $window.document.webkitExitPointerLock;
+ $window.document.exitPointerLock();
+ }
+ }
+
+ function activateKeyRecognition() {
+ setupPointerLock();
+ }
+
+ scope.$watch('keyRecognitionActivated', function(value) {
+ if (value) {
+ element.removeClass(attrs.inactiveClass);
+ element.addClass(attrs.activeClass);
+ } else {
+ element.removeClass(attrs.activeClass);
+ element.addClass(attrs.inactiveClass);
+ }
+ });
+
+ element.on('click', function() {
+ if (!scope.keyRecognitionActivated) {
+ activateKeyRecognition();
+ }
+ });
+
+ element.on('$destroy', function() {
+ jQuery($window.document).off('keydown');
+ disablePointerLock();
+ });
+ }
+ };
+}]);
@@ -24,11 +24,8 @@
<div class="form-group" ng-class="{ 'has-error': submitted && skgForm.skgKeySelect.$invalid }">
<div class="col-sm-offset-3 col-sm-9">
<div class="input-group">
- <div class="btn input-group-addon"
- ng-click="activateKeyRecognition($event)"
- ng-class="{ 'btn-default': !keyRecognitionActivated, 'btn-info': keyRecognitionActivated }">
- Press Any Key <span class="glyphicon glyphicon-edit"></span>
- </div>
+ <div class="btn input-group-addon" press-any-key-button on-key-press="setKeyToBindByCode"
+ inactive-class="btn-default" active-class="btn-info">Press Any Key <span class="glyphicon glyphicon-edit"></span></div>
<div class="form-control" disabled><code ng-show="bindOptions.keyToBind">{{ bindOptions.keyToBind }}</code></div>
<span class="glyphicon glyphicon-remove form-control-feedback" ng-show="submitted && skgForm.skgKeySelect.$invalid"></span>
</div>

0 comments on commit 78e77e1

Please sign in to comment.