diff --git a/CHANGELOG.md b/CHANGELOG.md index fed6d9b..7be5764 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,7 @@ # [Cha Cha Cha Changes](http://www.youtube.com/watch?v=pl3vxEudif8&t=0m53s) ## master +* Rewrote ui-keypress (API is not backwards-compatible) ## v0.2.0 * Unit tests. Unit tests. Unit tests. diff --git a/modules/directives/keypress/keypress.js b/modules/directives/keypress/keypress.js index 966210a..5950b06 100644 --- a/modules/directives/keypress/keypress.js +++ b/modules/directives/keypress/keypress.js @@ -1,88 +1,99 @@ -/** - * Bind one or more handlers to particular keys or their combination - * @param hash {mixed} keyBindings Can be an object or string where keybinding expression of keys or keys combinations and AngularJS Exspressions are set. Object syntax: "{ keys1: expression1 [, keys2: expression2 [ , ... ]]}". String syntax: ""expression1 on keys1 [ and expression2 on keys2 [ and ... ]]"". Expression is an AngularJS Expression, and key(s) are dash-separated combinations of keys and modifiers (one or many, if any. Order does not matter). Supported modifiers are 'ctrl', 'shift', 'alt' and key can be used either via its keyCode (13 for Return) or name. Named keys are 'backspace', 'tab', 'enter', 'esc', 'space', 'pageup', 'pagedown', 'end', 'home', 'left', 'up', 'right', 'down', 'insert', 'delete'. - * @example - **/ -angular.module('ui.directives').directive('uiKeypress', ['$parse', function ($parse) { - return { - link: function (scope, elm, attrs) { - var keysByCode = { - 8: 'backspace', - 9: 'tab', - 13: 'enter', - 27: 'esc', - 32: 'space', - 33: 'pageup', - 34: 'pagedown', - 35: 'end', - 36: 'home', - 37: 'left', - 38: 'up', - 39: 'right', - 40: 'down', - 45: 'insert', - 46: 'delete' - }; - - var params, paramsParsed, expression, keys, combinations = []; - try { - params = scope.$eval(attrs.uiKeypress); - paramsParsed = true; - } catch (error) { - params = attrs.uiKeypress.split(/\s+and\s+/i); - paramsParsed = false; - } +function keypress(mode, scope, elm, attrs){ + var params, paramsParsed, expression, keys, combinations = [], keysByCode = { + 8: 'backspace', + 9: 'tab', + 13: 'enter', + 27: 'esc', + 32: 'space', + 33: 'pageup', + 34: 'pagedown', + 35: 'end', + 36: 'home', + 37: 'left', + 38: 'up', + 39: 'right', + 40: 'down', + 45: 'insert', + 46: 'delete' + }; + params = scope.$eval(attrs.uiKeypress); - // Prepare combinations for simple checking - angular.forEach(params, function (v, k) { - var combination = {}; - if (paramsParsed) { - // An object passed - combination.expression = $parse(v); - combination.keys = k; - } else { - // A string passed - v = v.split(/\s+on\s+/i); - combination.expression = $parse(v[0]); - combination.keys = v[1]; - } + // Prepare combinations for simple checking + angular.forEach(params, function (v, k) { + var combination = {}; + combination.expression = $parse(v); + combination.keys = k; - keys = {}; - angular.forEach(combination.keys.split('-'), function (value) { - keys[value] = true; - }); - combination.keys = keys; - combinations.push(combination); - }); + keys = {}; + angular.forEach(combination.keys.split(' '), function (value) { + keys[value] = true; + }); + combination.keys = keys; + combinations.push(combination); + }); - // Check only mathcing of pressed keys one of the conditions - elm.bind('keydown', function (event) { - // No need to do that inside the cycle - var altPressed = event.metaKey || event.altKey; - var ctrlPressed = event.ctrlKey; - var shiftPressed = event.shiftKey; + // Check only mathcing of pressed keys one of the conditions + elm.bind(mode, function (event) { + // No need to do that inside the cycle + var altPressed = event.metaKey || event.altKey; + var ctrlPressed = event.ctrlKey; + var shiftPressed = event.shiftKey; + var keyCode = event.keyCode; + + // normalize keycodes + if (mode === 'keypress' && !shiftPressed && keyCode >= 97 && keyCode <= 122) { + keyCode = keyCode - 32; + } - // Iterate over prepared combinations - angular.forEach(combinations, function (combination) { + // Iterate over prepared combinations + angular.forEach(combinations, function (combination) { - var mainKeyPressed = (combination.keys[keysByCode[event.keyCode]] || combination.keys[event.keyCode.toString()]) || false; + var mainKeyPressed = (combination.keys[keysByCode[event.keyCode]] || combination.keys[event.keyCode.toString()]) || false; - var altRequired = combination.keys.alt || false; - var ctrlRequired = combination.keys.ctrl || false; - var shiftRequired = combination.keys.shift || false; + var altRequired = combination.keys.alt || false; + var ctrlRequired = combination.keys.ctrl || false; + var shiftRequired = combination.keys.shift || false; - if (mainKeyPressed && - ( altRequired == altPressed ) && - ( ctrlRequired == ctrlPressed ) && - ( shiftRequired == shiftPressed ) - ) { - // Run the function - scope.$apply(function () { - combination.expression(scope, { '$event': event }); - }); - } + if ( + mainKeyPressed && + ( altRequired == altPressed ) && + ( ctrlRequired == ctrlPressed ) && + ( shiftRequired == shiftPressed ) + ) { + // Run the function + scope.$apply(function () { + combination.expression(scope, { '$event': event }); }); - }); + } + }); + }); +} + +/** + * Bind one or more handlers to particular keys or their combination + * @param hash {mixed} keyBindings Can be an object or string where keybinding expression of keys or keys combinations and AngularJS Exspressions are set. Object syntax: "{ keys1: expression1 [, keys2: expression2 [ , ... ]]}". String syntax: ""expression1 on keys1 [ and expression2 on keys2 [ and ... ]]"". Expression is an AngularJS Expression, and key(s) are dash-separated combinations of keys and modifiers (one or many, if any. Order does not matter). Supported modifiers are 'ctrl', 'shift', 'alt' and key can be used either via its keyCode (13 for Return) or name. Named keys are 'backspace', 'tab', 'enter', 'esc', 'space', 'pageup', 'pagedown', 'end', 'home', 'left', 'up', 'right', 'down', 'insert', 'delete'. + * @example + **/ +angular.module('ui.directives').directive('uiKeydown', ['$parse', function ($parse) { + return { + link: function (scope, elm, attrs) { + keypress('keydown', scope, elm, attrs); } }; }]); + +angular.module('ui.directives').directive('uiKeypress', ['$parse', function ($parse) { + return { + link: function (scope, elm, attrs) { + keypress('keydown', scope, elm, attrs); + } + }; +}]); + +angular.module('ui.directives').directive('uiKeyup', ['$parse', function ($parse) { + return { + link: function (scope, elm, attrs) { + keypress('keydown', scope, elm, attrs); + } + }; +}]); \ No newline at end of file