angular-on-screen-keyboard
Version:
Always present 'On screen keyboard' for angular
10 lines (7 loc) • 3.49 kB
JavaScript
angular.module("onScreenKeyboard",["ngSanitize"]).directive("onScreenKeyboard",["$timeout","$document",function(a,b){"use strict";return{restrict:"E",bindToController:!0,controllerAs:"ctrl",scope:{rows:"=?",uppercaseAllWords:"@"},controller:["$sce",function(a){var b=this;b.rows||(b.rows=[["1","2","3","4","5","6","7","8","9","0",{type:"erase",colspan:2,text:"⇐"}],["q","w","e","r","t","y","u","i","o","p","@"],["a","s","d","f","g","h","j","k","l","-","_",{type:"margin"}],[{type:"shift",upperCase:"⇓",lowerCase:"⇑"},"z","x","c","v","b","n","m",",",".",{type:"shift",upperCase:"⇓",lowerCase:"⇑"}],[{type:"margin"},{type:"space",colspan:9,text:" "}]]),b.getText=function(c){if("margin"===c.type)return"";var d="";return d=c.text?c.text:c.lowerCase&&!b.isUpperCase?c.lowerCase:c.upperCase&&b.isUpperCase?c.upperCase:b.isUpperCase?c.toUpperCase():c.toLowerCase(),d&&d.indexOf("&")>-1?a.trustAsHtml(d):d}}],link:function(c,d,e){var f=c.ctrl;f.isUpperCase=!1,f.lastInputCtrl=null,f.startPos=null,f.endPos=null,f.printKeyStroke=function(a,b){if(f.lastInputCtrl){if(f.startPos=f.lastInputCtrl.selectionStart,f.endPos=f.lastInputCtrl.selectionEnd,"erase"===a.type)return void f.eraseKeyStroke();if("shift"===a.type)return void(f.isUpperCase=!f.isUpperCase);var c=angular.element(b.target||b.srcElement).text(),d=angular.element(f.lastInputCtrl),e=d.val(),g=e.substring(0,f.startPos),h=e.substring(f.endPos,e.length);d.val(g+c+h),d.triggerHandler("change"),f.startPos+=c.length,f.endPos+=c.length,f.lastInputCtrl.selectionStart=f.startPos,f.lastInputCtrl.selectionEnd=f.startPos,f.setKeyboardLayout(),f.refocus()}},f.refocus=function(){f.lastInputCtrl.focus()},f.eraseKeyStroke=function(){if(f.lastInputCtrl){var a=f.startPos!==f.endPos,b=angular.element(f.lastInputCtrl),c=b.val(),d=c.substring(0,a?f.startPos:f.startPos-1),e=c.substring(f.endPos,c.length);b.val(d+e),b.triggerHandler("change"),a?f.endPos=f.startPos:(f.startPos--,f.endPos--),f.lastInputCtrl.selectionStart=f.startPos,f.lastInputCtrl.selectionEnd=f.startPos,f.setKeyboardLayout(),f.refocus()}},f.setKeyboardLayout=function(){return f.lastInputCtrl?void(f.lastInputCtrl.className&&f.isUpperCase?f.isUpperCase=!1:0===angular.element(f.lastInputCtrl).val().length?f.isUpperCase=!0:" "!==angular.element(f.lastInputCtrl).val().slice(-1)||f.isUpperCase||void 0===e.uppercaseAllWords?f.isUpperCase=!1:f.isUpperCase=!0):void(f.isUpperCase=!0)};var g=function(a){var b=a.target||a.srcElement;"INPUT"!==b.tagName&&"TEXTAREA"!==b.tagName||(f.lastInputCtrl=b,f.setKeyboardLayout())},h=function(){f.lastInputCtrl&&(f.startPos=f.lastInputCtrl.selectionStart,f.endPos=f.lastInputCtrl.selectionEnd,f.setKeyboardLayout(),c.$digest())};b.bind("focusin",g),b.bind("keyup",h),c.$on("$destroy",function(){b.unbind("focusin",g),b.unbind("keyup",h)}),d.bind("contextmenu",function(a){return a.preventDefault(),!1}),a(function(){f.isUpperCase=!0},0)},templateUrl:"/templates/angular-on-screen-keyboard.html"}}]);;
angular.module('onScreenKeyboard').run(['$templateCache', function($templateCache) {
'use strict';
$templateCache.put('/templates/angular-on-screen-keyboard.html',
"<div class=keyboard><table><tr ng-repeat=\"row in ctrl.rows\"><td ng-repeat=\"key in row\" ng-click=\"ctrl.printKeyStroke(key, $event)\" colspan=\"{{key.colspan || 1}}\" ng-class=\"{'button': key.type !== 'margin', 'letter': key.type !== 'margin'}\" class={{key.type}} ng-bind-html=ctrl.getText(key)></td></tr></table></div>"
);
}]);