simple-virtual-keyboard - npm Package Compare versions

Comparing version 0.2.0 to 0.2.1

build/index.js

@@ -1,1 +0,1 @@
-define("simple-virtual-keyboard",[],(function(){return function(){"use strict";var o={d:function(t,e){for(var n in e)o.o(e,n)&&!o.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:e[n]})},o:function(o,t){return Object.prototype.hasOwnProperty.call(o,t)},r:function(o){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(o,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(o,"__esModule",{value:!0})}},t={};o.r(t),o.d(t,{DefaultKeyboardLayout:function(){return d},default:function(){return f}});var e=function(o,t){o&&Object.assign(o.style,t)};function n(o,t){for(var e=0;e<t.length;e++){var n=t[e];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(o,n.key,n)}}var i=function(){function o(t,e){!function(o,t){if(!(o instanceof t))throw new TypeError("Cannot call a class as a function")}(this,o),this.config=t,this.style=e,this.element=null,this.handler=null}var t,i;return t=o,(i=[{key:"code",get:function(){return this.config.code}},{key:"content",get:function(){return this.config.content}},{key:"shiftContent",get:function(){var o;return null!==(o=this.config.shiftContent)&&void 0!==o?o:null}},{key:"isBackspace",get:function(){var o;return null!==(o=this.config.isBackspace)&&void 0!==o&&o}},{key:"isTab",get:function(){var o;return null!==(o=this.config.isTab)&&void 0!==o&&o}},{key:"isCaps",get:function(){var o;return null!==(o=this.config.isCaps)&&void 0!==o&&o}},{key:"isEnter",get:function(){var o;return null!==(o=this.config.isEnter)&&void 0!==o&&o}},{key:"isShift",get:function(){var o;return null!==(o=this.config.isShift)&&void 0!==o&&o}},{key:"isSpace",get:function(){var o;return null!==(o=this.config.isSpace)&&void 0!==o&&o}},{key:"isMeta",get:function(){return this.isBackspace||this.isTab||this.isCaps||this.isEnter||this.isShift||this.isSpace}},{key:"setHandler",value:function(o){this.handler=o}},{key:"toggleCase",value:function(o){this.isMeta||(this.config.content=o?this.content.toUpperCase():this.content.toLowerCase())}},{key:"render",value:function(){var o=arguments.length>0&&void 0!==arguments[0]&&arguments[0],t=document.createElement("div");return t.classList.add("a-virtual-keyboard__button"),t.innerText=o&&this.config.shiftContent||this.config.content,e(t,{gridColumn:"".concat(this.config.columnPosition," / span ").concat(this.config.columnSize),gridRow:"".concat(this.config.rowPosition," / span ").concat(this.config.rowSize),justifySelf:"center",alignSelf:"center",background:this.style.background,borderRadius:this.style.borderRadius}),this.element=t,t}},{key:"press",value:function(){var o=this;if(!this.element)throw new Error("Button is not rendered");this.push(),window.setTimeout((function(){return o.unPush()}),this.style.pressDuration)}},{key:"push",value:function(){e(this.element,{background:this.style.pressBackground})}},{key:"unPush",value:function(){e(this.element,{background:this.style.background})}}])&&n(t.prototype,i),o}();function r(o,t){var e=Object.keys(o);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(o);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(o,t).enumerable}))),e.push.apply(e,n)}return e}function c(o,t,e){return t in o?Object.defineProperty(o,t,{value:e,enumerable:!0,configurable:!0,writable:!0}):o[t]=e,o}function s(o,t){for(var e=0;e<t.length;e++){var n=t[e];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(o,n.key,n)}}function u(o,t){var e=Object.keys(o);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(o);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(o,t).enumerable}))),e.push.apply(e,n)}return e}function l(o){for(var t=1;t<arguments.length;t++){var e=null!=arguments[t]?arguments[t]:{};t%2?u(Object(e),!0).forEach((function(t){a(o,t,e[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(o,Object.getOwnPropertyDescriptors(e)):u(Object(e)).forEach((function(t){Object.defineProperty(o,t,Object.getOwnPropertyDescriptor(e,t))}))}return o}function a(o,t,e){return t in o?Object.defineProperty(o,t,{value:e,enumerable:!0,configurable:!0,writable:!0}):o[t]=e,o}var d=function(){var o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:function(){},t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return l({columnsCount:15,rowsCount:5,columnGap:"5px",rowGap:"8px",additionalStyles:{maxWidth:"1300px"},onButtonClick:o,style:{padding:"10px",background:"#4cbefa",borderTop:"1px solid #7acffb",borderBottom:"1px solid #49a9db",button:{minWidth:"35px",minHeight:"50px",background:"#78e2aa",border:"1px solid #a1ebc4",borderRadius:"5px",pressDuration:150,pressBackground:"blue"}},buttons:[{columnSize:1,rowSize:1,columnPosition:1,rowPosition:1,code:"Backquote",content:"`",shiftContent:"~"},{columnSize:1,rowSize:1,columnPosition:2,rowPosition:1,code:"Digit1",content:"1",shiftContent:"!"},{columnSize:1,rowSize:1,columnPosition:3,rowPosition:1,code:"Digit2",content:"2",shiftContent:"@"},{columnSize:1,rowSize:1,columnPosition:4,rowPosition:1,code:"Digit3",content:"3",shiftContent:"#"},{columnSize:1,rowSize:1,columnPosition:5,rowPosition:1,code:"Digit4",content:"4",shiftContent:"$"},{columnSize:1,rowSize:1,columnPosition:6,rowPosition:1,code:"Digit5",content:"5",shiftContent:"%"},{columnSize:1,rowSize:1,columnPosition:7,rowPosition:1,code:"Digit6",content:"6",shiftContent:"^"},{columnSize:1,rowSize:1,columnPosition:8,rowPosition:1,code:"Digit7",content:"7",shiftContent:"7"},{columnSize:1,rowSize:1,columnPosition:9,rowPosition:1,code:"Digit8",content:"8",shiftContent:"*"},{columnSize:1,rowSize:1,columnPosition:10,rowPosition:1,code:"Digit9",content:"9",shiftContent:"("},{columnSize:1,rowSize:1,columnPosition:11,rowPosition:1,code:"Digit0",content:"0",shiftContent:")"},{columnSize:1,rowSize:1,columnPosition:12,rowPosition:1,code:"Minus",content:"-",shiftContent:"_"},{columnSize:1,rowSize:1,columnPosition:13,rowPosition:1,code:"Equal",content:"=",shiftContent:"+"},{columnSize:2,rowSize:1,columnPosition:14,rowPosition:1,code:"Backspace",content:"<-",isBackspace:!0},{columnSize:2,rowSize:1,columnPosition:1,rowPosition:2,code:"Tab",content:"TAB",isTab:!0},{columnSize:1,rowSize:1,columnPosition:3,rowPosition:2,code:"KeyQ",content:"Q"},{columnSize:1,rowSize:1,columnPosition:4,rowPosition:2,code:"KeyW",content:"W"},{columnSize:1,rowSize:1,columnPosition:5,rowPosition:2,code:"KeyE",content:"E"},{columnSize:1,rowSize:1,columnPosition:6,rowPosition:2,code:"KeyR",content:"R"},{columnSize:1,rowSize:1,columnPosition:7,rowPosition:2,code:"KeyT",content:"T"},{columnSize:1,rowSize:1,columnPosition:8,rowPosition:2,code:"KeyY",content:"Y"},{columnSize:1,rowSize:1,columnPosition:9,rowPosition:2,code:"KeyU",content:"U"},{columnSize:1,rowSize:1,columnPosition:10,rowPosition:2,code:"KeyI",content:"I"},{columnSize:1,rowSize:1,columnPosition:11,rowPosition:2,code:"KeyO",content:"O"},{columnSize:1,rowSize:1,columnPosition:12,rowPosition:2,code:"KeyP",content:"P"},{columnSize:1,rowSize:1,columnPosition:13,rowPosition:2,code:"BracketLeft",content:"[",shiftContent:"{"},{columnSize:1,rowSize:1,columnPosition:14,rowPosition:2,code:"BracketRight",content:"]",shiftContent:"}"},{columnSize:1,rowSize:1,columnPosition:15,rowPosition:2,code:"Backslash",content:"\\",shiftContent:"|"},{columnSize:2,rowSize:1,columnPosition:1,rowPosition:3,code:"CapsLock",content:"CAPS",isCaps:!0},{columnSize:1,rowSize:1,columnPosition:3,rowPosition:3,code:"KeyA",content:"A"},{columnSize:1,rowSize:1,columnPosition:4,rowPosition:3,code:"KeyS",content:"S"},{columnSize:1,rowSize:1,columnPosition:5,rowPosition:3,code:"KeyD",content:"D"},{columnSize:1,rowSize:1,columnPosition:6,rowPosition:3,code:"KeyF",content:"F"},{columnSize:1,rowSize:1,columnPosition:7,rowPosition:3,code:"KeyG",content:"G"},{columnSize:1,rowSize:1,columnPosition:8,rowPosition:3,code:"KeyH",content:"H"},{columnSize:1,rowSize:1,columnPosition:9,rowPosition:3,code:"KeyJ",content:"J"},{columnSize:1,rowSize:1,columnPosition:10,rowPosition:3,code:"KeyK",content:"K"},{columnSize:1,rowSize:1,columnPosition:11,rowPosition:3,code:"KeyL",content:"L"},{columnSize:1,rowSize:1,columnPosition:12,rowPosition:3,code:"Semicolon",content:";",shiftContent:":"},{columnSize:1,rowSize:1,columnPosition:13,rowPosition:3,code:"Quote",content:"'",shiftContent:'"'},{columnSize:2,rowSize:1,columnPosition:14,rowPosition:3,code:"Enter",content:"ENTER",isEnter:!0},{columnSize:3,rowSize:1,columnPosition:1,rowPosition:4,code:"ShiftLeft",content:"SHIFT",isShift:!0},{columnSize:1,rowSize:1,columnPosition:4,rowPosition:4,code:"KeyZ",content:"Z"},{columnSize:1,rowSize:1,columnPosition:5,rowPosition:4,code:"KeyX",content:"X"},{columnSize:1,rowSize:1,columnPosition:6,rowPosition:4,code:"KeyC",content:"C"},{columnSize:1,rowSize:1,columnPosition:7,rowPosition:4,code:"KeyV",content:"V"},{columnSize:1,rowSize:1,columnPosition:8,rowPosition:4,code:"KeyB",content:"B"},{columnSize:1,rowSize:1,columnPosition:9,rowPosition:4,code:"KeyN",content:"N"},{columnSize:1,rowSize:1,columnPosition:10,rowPosition:4,code:"KeyM",content:"M"},{columnSize:1,rowSize:1,columnPosition:11,rowPosition:4,code:"Comma",content:",",shiftContent:"<"},{columnSize:1,rowSize:1,columnPosition:12,rowPosition:4,code:"Period",content:".",shiftContent:">"},{columnSize:1,rowSize:1,columnPosition:13,rowPosition:4,code:"Slash",content:"/",shiftContent:"?"},{columnSize:2,rowSize:1,columnPosition:14,rowPosition:4,code:"ShiftRight",content:"SHIFT",isShift:!0},{columnSize:8,rowSize:1,columnPosition:5,rowPosition:5,code:"Space",content:"",isSpace:!0}]},t)},f=function(){function o(t){!function(o,t){if(!(o instanceof t))throw new TypeError("Cannot call a class as a function")}(this,o),this.config=t,this.rendered=document.createElement("div"),this.renderedButtons=[],this.capsMode=!1,this.init()}var t,n;return t=o,(n=[{key:"init",value:function(){var o=this;this.rendered.classList.add("a-virtual-keyboard"),e(this.rendered,{width:this.config.width,height:this.config.height}),this.renderLayout(),this.renderButtons(),document.addEventListener("keydown",this.onButtonAction(void 0)),document.addEventListener("keydown",(function(t){t.shiftKey&&o.enableShiftMode(t.code)})),document.addEventListener("keyup",(function(t){"ShiftRight"!==t.code&&"ShiftLeft"!==t.code||o.disableShiftMode(t.code)}))}},{key:"mount",value:function(o){var t=document.querySelector(o);t&&t.appendChild(this.rendered)}},{key:"destroy",value:function(){this.destroyButtons(),this.rendered.remove()}},{key:"renderLayout",value:function(){e(this.rendered,function(o){for(var t=1;t<arguments.length;t++){var e=null!=arguments[t]?arguments[t]:{};t%2?r(Object(e),!0).forEach((function(t){c(o,t,e[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(o,Object.getOwnPropertyDescriptors(e)):r(Object(e)).forEach((function(t){Object.defineProperty(o,t,Object.getOwnPropertyDescriptor(e,t))}))}return o}({display:"grid",gridTemplateColumns:"repeat(".concat(this.config.layout.columnsCount,", minmax(").concat(this.config.layout.style.button.minWidth,", 1fr))"),gridTemplateRows:"repeat(".concat(this.config.layout.rowsCount,", minmax(").concat(this.config.layout.style.button.minHeight,", 1fr))"),rowGap:this.config.layout.rowGap,columnGap:this.config.layout.columnGap,padding:this.config.layout.style.padding,background:this.config.layout.style.background,borderTop:this.config.layout.style.borderTop,borderBottom:this.config.layout.style.borderBottom,borderLeft:this.config.layout.style.borderLeft,borderRight:this.config.layout.style.borderRight,border:this.config.layout.style.border},this.config.layout.additionalStyles))}},{key:"enableShiftMode",value:function(o){this.renderedButtons.forEach((function(t){t.isShift&&o===t.code&&t.push()})),this.enableCapsMode()}},{key:"disableShiftMode",value:function(o){this.renderedButtons.forEach((function(t){t.isShift&&o===t.code&&t.unPush()})),this.capsMode&&this.disableCapsMode()}},{key:"onButtonAction",value:function(o){var t=this;return function(e){var n=o;e instanceof KeyboardEvent&&(n=null==e?void 0:e.code);var i=t.renderedButtons.find((function(o){return o.code===n}));if(i){if(null==e||e.preventDefault(),i.isCaps)return void t.toggleCapsMode();i.isShift||i.press(),e instanceof KeyboardEvent&&null!=e&&e.key&&(isNaN(parseFloat(e.key))||!isFinite(e.key))&&((null==e?void 0:e.key)===i.content.toLowerCase()&&t.disableCapsMode(),(null==e?void 0:e.key)===i.content.toUpperCase()&&t.enableCapsMode());var r=i.content;null!=e&&e.shiftKey&&i.shiftContent&&(r=i.shiftContent),t.config.layout.onButtonClick(i.code,r,i.isBackspace,i.isTab,i.isEnter,i.isSpace,i.isShift)}}}},{key:"toggleCapsMode",value:function(){this.capsMode=!this.capsMode,this.rerenderButtons()}},{key:"enableCapsMode",value:function(){this.capsMode||(this.capsMode=!0,this.rerenderButtons(!1,!0))}},{key:"disableCapsMode",value:function(){this.capsMode&&(this.capsMode=!1,this.rerenderButtons(!1))}},{key:"rerenderButtons",value:function(){var o=!(arguments.length>0&&void 0!==arguments[0])||arguments[0],t=arguments.length>1&&void 0!==arguments[1]&&arguments[1];this.destroyButtons(),this.renderButtons(o,t)}},{key:"destroyButtons",value:function(){this.renderedButtons.map((function(o){var t;return null===(t=o.element)||void 0===t?void 0:t.removeEventListener("click",o.handler)})),this.renderedButtons=[],this.rendered.innerHTML=""}},{key:"renderButtons",value:function(){var o=this,t=arguments.length>0&&void 0!==arguments[0]&&arguments[0],e=arguments.length>1&&void 0!==arguments[1]&&arguments[1];this.config.layout.buttons.forEach((function(n){var r=new i(n,o.config.layout.style.button);r.toggleCase(o.capsMode);var c=r.render(e);if(!o.config.listenMode){var s=o.onButtonAction(r.code);r.setHandler(s),c.addEventListener("click",s)}t&&r.isCaps&&r.press(),o.renderedButtons.push(r),o.rendered.appendChild(c)}))}}])&&s(t.prototype,n),o}();return t}()}));
+define("simple-virtual-keyboard",[],(function(){return function(){"use strict";var o={d:function(n,t){for(var e in t)o.o(t,e)&&!o.o(n,e)&&Object.defineProperty(n,e,{enumerable:!0,get:t[e]})},o:function(o,n){return Object.prototype.hasOwnProperty.call(o,n)},r:function(o){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(o,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(o,"__esModule",{value:!0})}},n={};o.r(n),o.d(n,{DefaultKeyboardLayout:function(){return m},RussianLanguage:function(){return h},default:function(){return f}});var t=function(o,n){o&&Object.assign(o.style,n)};function e(o,n){for(var t=0;t<n.length;t++){var e=n[t];e.enumerable=e.enumerable||!1,e.configurable=!0,"value"in e&&(e.writable=!0),Object.defineProperty(o,e.key,e)}}var i=function(){function o(n,t){!function(o,n){if(!(o instanceof n))throw new TypeError("Cannot call a class as a function")}(this,o),this.config=n,this.style=t,this.element=null,this.handler=null}var n,i;return n=o,(i=[{key:"code",get:function(){return this.config.code}},{key:"content",get:function(){return this.config.content}},{key:"shiftContent",get:function(){var o;return null!==(o=this.config.shiftContent)&&void 0!==o?o:null}},{key:"isBackspace",get:function(){var o;return null!==(o=this.config.isBackspace)&&void 0!==o&&o}},{key:"isTab",get:function(){var o;return null!==(o=this.config.isTab)&&void 0!==o&&o}},{key:"isCaps",get:function(){var o;return null!==(o=this.config.isCaps)&&void 0!==o&&o}},{key:"isEnter",get:function(){var o;return null!==(o=this.config.isEnter)&&void 0!==o&&o}},{key:"isShift",get:function(){var o;return null!==(o=this.config.isShift)&&void 0!==o&&o}},{key:"isSpace",get:function(){var o;return null!==(o=this.config.isSpace)&&void 0!==o&&o}},{key:"isMeta",get:function(){return this.isBackspace||this.isTab||this.isCaps||this.isEnter||this.isShift||this.isSpace}},{key:"setHandler",value:function(o){this.handler=o}},{key:"toggleCase",value:function(o){this.isMeta||(this.config.content=o?this.content.toUpperCase():this.content.toLowerCase())}},{key:"render",value:function(){var o=arguments.length>0&&void 0!==arguments[0]&&arguments[0],n=document.createElement("div");return n.classList.add("a-virtual-keyboard__button"),n.innerText=o&&this.config.shiftContent||this.config.content,t(n,{gridColumn:"".concat(this.config.columnPosition," / span ").concat(this.config.columnSize),gridRow:"".concat(this.config.rowPosition," / span ").concat(this.config.rowSize),justifySelf:"center",alignSelf:"center",background:this.style.background,borderRadius:this.style.borderRadius}),this.element=n,n}},{key:"press",value:function(){var o=this;if(!this.element)throw new Error("Button is not rendered");this.push(),window.setTimeout((function(){return o.unPush()}),this.style.pressDuration)}},{key:"push",value:function(){t(this.element,{background:this.style.pressBackground})}},{key:"unPush",value:function(){t(this.element,{background:this.style.background})}}])&&e(n.prototype,i),o}();function c(o,n){var t=Object.keys(o);if(Object.getOwnPropertySymbols){var e=Object.getOwnPropertySymbols(o);n&&(e=e.filter((function(n){return Object.getOwnPropertyDescriptor(o,n).enumerable}))),t.push.apply(t,e)}return t}function r(o,n,t){return n in o?Object.defineProperty(o,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):o[n]=t,o}function s(o,n){if(!(o instanceof n))throw new TypeError("Cannot call a class as a function")}function u(o,n){for(var t=0;t<n.length;t++){var e=n[t];e.enumerable=e.enumerable||!1,e.configurable=!0,"value"in e&&(e.writable=!0),Object.defineProperty(o,e.key,e)}}function l(o,n){var t=Object.keys(o);if(Object.getOwnPropertySymbols){var e=Object.getOwnPropertySymbols(o);n&&(e=e.filter((function(n){return Object.getOwnPropertyDescriptor(o,n).enumerable}))),t.push.apply(t,e)}return t}function a(o){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?l(Object(t),!0).forEach((function(n){d(o,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(o,Object.getOwnPropertyDescriptors(t)):l(Object(t)).forEach((function(n){Object.defineProperty(o,n,Object.getOwnPropertyDescriptor(t,n))}))}return o}function d(o,n,t){return n in o?Object.defineProperty(o,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):o[n]=t,o}var m=function(){var o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:function(){},n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return a({columnsCount:15,rowsCount:5,columnGap:"5px",rowGap:"8px",additionalStyles:{maxWidth:"1300px"},onButtonClick:o,style:{padding:"10px",background:"#4cbefa",borderTop:"1px solid #7acffb",borderBottom:"1px solid #49a9db",button:{minWidth:"35px",minHeight:"50px",background:"#78e2aa",border:"1px solid #a1ebc4",borderRadius:"5px",pressDuration:150,pressBackground:"blue"}},buttons:[{columnSize:1,rowSize:1,columnPosition:1,rowPosition:1,code:"Backquote",content:"`",shiftContent:"~"},{columnSize:1,rowSize:1,columnPosition:2,rowPosition:1,code:"Digit1",content:"1",shiftContent:"!"},{columnSize:1,rowSize:1,columnPosition:3,rowPosition:1,code:"Digit2",content:"2",shiftContent:"@"},{columnSize:1,rowSize:1,columnPosition:4,rowPosition:1,code:"Digit3",content:"3",shiftContent:"#"},{columnSize:1,rowSize:1,columnPosition:5,rowPosition:1,code:"Digit4",content:"4",shiftContent:"$"},{columnSize:1,rowSize:1,columnPosition:6,rowPosition:1,code:"Digit5",content:"5",shiftContent:"%"},{columnSize:1,rowSize:1,columnPosition:7,rowPosition:1,code:"Digit6",content:"6",shiftContent:"^"},{columnSize:1,rowSize:1,columnPosition:8,rowPosition:1,code:"Digit7",content:"7",shiftContent:"7"},{columnSize:1,rowSize:1,columnPosition:9,rowPosition:1,code:"Digit8",content:"8",shiftContent:"*"},{columnSize:1,rowSize:1,columnPosition:10,rowPosition:1,code:"Digit9",content:"9",shiftContent:"("},{columnSize:1,rowSize:1,columnPosition:11,rowPosition:1,code:"Digit0",content:"0",shiftContent:")"},{columnSize:1,rowSize:1,columnPosition:12,rowPosition:1,code:"Minus",content:"-",shiftContent:"_"},{columnSize:1,rowSize:1,columnPosition:13,rowPosition:1,code:"Equal",content:"=",shiftContent:"+"},{columnSize:2,rowSize:1,columnPosition:14,rowPosition:1,code:"Backspace",content:"<-",isBackspace:!0},{columnSize:2,rowSize:1,columnPosition:1,rowPosition:2,code:"Tab",content:"TAB",isTab:!0},{columnSize:1,rowSize:1,columnPosition:3,rowPosition:2,code:"KeyQ",content:"Q"},{columnSize:1,rowSize:1,columnPosition:4,rowPosition:2,code:"KeyW",content:"W"},{columnSize:1,rowSize:1,columnPosition:5,rowPosition:2,code:"KeyE",content:"E"},{columnSize:1,rowSize:1,columnPosition:6,rowPosition:2,code:"KeyR",content:"R"},{columnSize:1,rowSize:1,columnPosition:7,rowPosition:2,code:"KeyT",content:"T"},{columnSize:1,rowSize:1,columnPosition:8,rowPosition:2,code:"KeyY",content:"Y"},{columnSize:1,rowSize:1,columnPosition:9,rowPosition:2,code:"KeyU",content:"U"},{columnSize:1,rowSize:1,columnPosition:10,rowPosition:2,code:"KeyI",content:"I"},{columnSize:1,rowSize:1,columnPosition:11,rowPosition:2,code:"KeyO",content:"O"},{columnSize:1,rowSize:1,columnPosition:12,rowPosition:2,code:"KeyP",content:"P"},{columnSize:1,rowSize:1,columnPosition:13,rowPosition:2,code:"BracketLeft",content:"[",shiftContent:"{"},{columnSize:1,rowSize:1,columnPosition:14,rowPosition:2,code:"BracketRight",content:"]",shiftContent:"}"},{columnSize:1,rowSize:1,columnPosition:15,rowPosition:2,code:"Backslash",content:"\\",shiftContent:"|"},{columnSize:2,rowSize:1,columnPosition:1,rowPosition:3,code:"CapsLock",content:"CAPS",isCaps:!0},{columnSize:1,rowSize:1,columnPosition:3,rowPosition:3,code:"KeyA",content:"A"},{columnSize:1,rowSize:1,columnPosition:4,rowPosition:3,code:"KeyS",content:"S"},{columnSize:1,rowSize:1,columnPosition:5,rowPosition:3,code:"KeyD",content:"D"},{columnSize:1,rowSize:1,columnPosition:6,rowPosition:3,code:"KeyF",content:"F"},{columnSize:1,rowSize:1,columnPosition:7,rowPosition:3,code:"KeyG",content:"G"},{columnSize:1,rowSize:1,columnPosition:8,rowPosition:3,code:"KeyH",content:"H"},{columnSize:1,rowSize:1,columnPosition:9,rowPosition:3,code:"KeyJ",content:"J"},{columnSize:1,rowSize:1,columnPosition:10,rowPosition:3,code:"KeyK",content:"K"},{columnSize:1,rowSize:1,columnPosition:11,rowPosition:3,code:"KeyL",content:"L"},{columnSize:1,rowSize:1,columnPosition:12,rowPosition:3,code:"Semicolon",content:";",shiftContent:":"},{columnSize:1,rowSize:1,columnPosition:13,rowPosition:3,code:"Quote",content:"'",shiftContent:'"'},{columnSize:2,rowSize:1,columnPosition:14,rowPosition:3,code:"Enter",content:"ENTER",isEnter:!0},{columnSize:3,rowSize:1,columnPosition:1,rowPosition:4,code:"ShiftLeft",content:"SHIFT",isShift:!0},{columnSize:1,rowSize:1,columnPosition:4,rowPosition:4,code:"KeyZ",content:"Z"},{columnSize:1,rowSize:1,columnPosition:5,rowPosition:4,code:"KeyX",content:"X"},{columnSize:1,rowSize:1,columnPosition:6,rowPosition:4,code:"KeyC",content:"C"},{columnSize:1,rowSize:1,columnPosition:7,rowPosition:4,code:"KeyV",content:"V"},{columnSize:1,rowSize:1,columnPosition:8,rowPosition:4,code:"KeyB",content:"B"},{columnSize:1,rowSize:1,columnPosition:9,rowPosition:4,code:"KeyN",content:"N"},{columnSize:1,rowSize:1,columnPosition:10,rowPosition:4,code:"KeyM",content:"M"},{columnSize:1,rowSize:1,columnPosition:11,rowPosition:4,code:"Comma",content:",",shiftContent:"<"},{columnSize:1,rowSize:1,columnPosition:12,rowPosition:4,code:"Period",content:".",shiftContent:">"},{columnSize:1,rowSize:1,columnPosition:13,rowPosition:4,code:"Slash",content:"/",shiftContent:"?"},{columnSize:2,rowSize:1,columnPosition:14,rowPosition:4,code:"ShiftRight",content:"SHIFT",isShift:!0},{columnSize:8,rowSize:1,columnPosition:5,rowPosition:5,code:"Space",content:"",isSpace:!0}]},n)};function S(o,n){var t=Object.keys(o);if(Object.getOwnPropertySymbols){var e=Object.getOwnPropertySymbols(o);n&&(e=e.filter((function(n){return Object.getOwnPropertyDescriptor(o,n).enumerable}))),t.push.apply(t,e)}return t}function w(o){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?S(Object(t),!0).forEach((function(n){P(o,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(o,Object.getOwnPropertyDescriptors(t)):S(Object(t)).forEach((function(n){Object.defineProperty(o,n,Object.getOwnPropertyDescriptor(t,n))}))}return o}function P(o,n,t){return n in o?Object.defineProperty(o,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):o[n]=t,o}var h=function(){var o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:function(){},n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return w({columnsCount:15,rowsCount:5,columnGap:"5px",rowGap:"8px",additionalStyles:{maxWidth:"1300px"},onButtonClick:o,style:{padding:"10px",background:"#4cbefa",borderTop:"1px solid #7acffb",borderBottom:"1px solid #49a9db",button:{minWidth:"35px",minHeight:"50px",background:"#78e2aa",border:"1px solid #a1ebc4",borderRadius:"5px",pressDuration:150,pressBackground:"blue"}},buttons:[{columnSize:1,rowSize:1,columnPosition:1,rowPosition:1,code:"Backquote",content:"Ё"},{columnSize:1,rowSize:1,columnPosition:2,rowPosition:1,code:"Digit1",content:"1",shiftContent:"!"},{columnSize:1,rowSize:1,columnPosition:3,rowPosition:1,code:"Digit2",content:"2",shiftContent:"@"},{columnSize:1,rowSize:1,columnPosition:4,rowPosition:1,code:"Digit3",content:"3",shiftContent:"#"},{columnSize:1,rowSize:1,columnPosition:5,rowPosition:1,code:"Digit4",content:"4",shiftContent:"$"},{columnSize:1,rowSize:1,columnPosition:6,rowPosition:1,code:"Digit5",content:"5",shiftContent:"%"},{columnSize:1,rowSize:1,columnPosition:7,rowPosition:1,code:"Digit6",content:"6",shiftContent:"^"},{columnSize:1,rowSize:1,columnPosition:8,rowPosition:1,code:"Digit7",content:"7",shiftContent:"7"},{columnSize:1,rowSize:1,columnPosition:9,rowPosition:1,code:"Digit8",content:"8",shiftContent:"*"},{columnSize:1,rowSize:1,columnPosition:10,rowPosition:1,code:"Digit9",content:"9",shiftContent:"("},{columnSize:1,rowSize:1,columnPosition:11,rowPosition:1,code:"Digit0",content:"0",shiftContent:")"},{columnSize:1,rowSize:1,columnPosition:12,rowPosition:1,code:"Minus",content:"-",shiftContent:"_"},{columnSize:1,rowSize:1,columnPosition:13,rowPosition:1,code:"Equal",content:"=",shiftContent:"+"},{columnSize:2,rowSize:1,columnPosition:14,rowPosition:1,code:"Backspace",content:"<-",isBackspace:!0},{columnSize:2,rowSize:1,columnPosition:1,rowPosition:2,code:"Tab",content:"TAB",isTab:!0},{columnSize:1,rowSize:1,columnPosition:3,rowPosition:2,code:"KeyQ",content:"Й"},{columnSize:1,rowSize:1,columnPosition:4,rowPosition:2,code:"KeyW",content:"Ц"},{columnSize:1,rowSize:1,columnPosition:5,rowPosition:2,code:"KeyE",content:"У"},{columnSize:1,rowSize:1,columnPosition:6,rowPosition:2,code:"KeyR",content:"К"},{columnSize:1,rowSize:1,columnPosition:7,rowPosition:2,code:"KeyT",content:"Е"},{columnSize:1,rowSize:1,columnPosition:8,rowPosition:2,code:"KeyY",content:"Н"},{columnSize:1,rowSize:1,columnPosition:9,rowPosition:2,code:"KeyU",content:"Г"},{columnSize:1,rowSize:1,columnPosition:10,rowPosition:2,code:"KeyI",content:"Ш"},{columnSize:1,rowSize:1,columnPosition:11,rowPosition:2,code:"KeyO",content:"Щ"},{columnSize:1,rowSize:1,columnPosition:12,rowPosition:2,code:"KeyP",content:"З"},{columnSize:1,rowSize:1,columnPosition:13,rowPosition:2,code:"BracketLeft",content:"Х"},{columnSize:1,rowSize:1,columnPosition:14,rowPosition:2,code:"BracketRight",content:"Ъ"},{columnSize:1,rowSize:1,columnPosition:15,rowPosition:2,code:"Backslash",content:"\\",shiftContent:"/"},{columnSize:2,rowSize:1,columnPosition:1,rowPosition:3,code:"CapsLock",content:"CAPS",isCaps:!0},{columnSize:1,rowSize:1,columnPosition:3,rowPosition:3,code:"KeyA",content:"Ф"},{columnSize:1,rowSize:1,columnPosition:4,rowPosition:3,code:"KeyS",content:"Ы"},{columnSize:1,rowSize:1,columnPosition:5,rowPosition:3,code:"KeyD",content:"В"},{columnSize:1,rowSize:1,columnPosition:6,rowPosition:3,code:"KeyF",content:"А"},{columnSize:1,rowSize:1,columnPosition:7,rowPosition:3,code:"KeyG",content:"П"},{columnSize:1,rowSize:1,columnPosition:8,rowPosition:3,code:"KeyH",content:"Р"},{columnSize:1,rowSize:1,columnPosition:9,rowPosition:3,code:"KeyJ",content:"О"},{columnSize:1,rowSize:1,columnPosition:10,rowPosition:3,code:"KeyK",content:"Л"},{columnSize:1,rowSize:1,columnPosition:11,rowPosition:3,code:"KeyL",content:"Д"},{columnSize:1,rowSize:1,columnPosition:12,rowPosition:3,code:"Semicolon",content:"Ж"},{columnSize:1,rowSize:1,columnPosition:13,rowPosition:3,code:"Quote",content:"Э"},{columnSize:2,rowSize:1,columnPosition:14,rowPosition:3,code:"Enter",content:"ENTER",isEnter:!0},{columnSize:3,rowSize:1,columnPosition:1,rowPosition:4,code:"ShiftLeft",content:"SHIFT",isShift:!0},{columnSize:1,rowSize:1,columnPosition:4,rowPosition:4,code:"KeyZ",content:"Я"},{columnSize:1,rowSize:1,columnPosition:5,rowPosition:4,code:"KeyX",content:"Ч"},{columnSize:1,rowSize:1,columnPosition:6,rowPosition:4,code:"KeyC",content:"С"},{columnSize:1,rowSize:1,columnPosition:7,rowPosition:4,code:"KeyV",content:"М"},{columnSize:1,rowSize:1,columnPosition:8,rowPosition:4,code:"KeyB",content:"И"},{columnSize:1,rowSize:1,columnPosition:9,rowPosition:4,code:"KeyN",content:"Т"},{columnSize:1,rowSize:1,columnPosition:10,rowPosition:4,code:"KeyM",content:"Ь"},{columnSize:1,rowSize:1,columnPosition:11,rowPosition:4,code:"Comma",content:"Б"},{columnSize:1,rowSize:1,columnPosition:12,rowPosition:4,code:"Period",content:"Ю"},{columnSize:1,rowSize:1,columnPosition:13,rowPosition:4,code:"Slash",content:".",shiftContent:","},{columnSize:2,rowSize:1,columnPosition:14,rowPosition:4,code:"ShiftRight",content:"SHIFT",isShift:!0},{columnSize:8,rowSize:1,columnPosition:5,rowPosition:5,code:"Space",content:"",isSpace:!0}]},n)},f=function(){function o(n){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[];s(this,o),this.languages=[n.layout].concat(t),this.config=n,this.currentLanguageIndex=0,this.rendered=document.createElement("div"),this.renderedButtons=[],this.capsMode=!1,this.init()}var n,e;return n=o,(e=[{key:"layout",get:function(){return this.languages[this.currentLanguageIndex%this.languages.length]}},{key:"addLanguage",value:function(o){this.languages.push(o)}},{key:"changeLanguage",value:function(){this.currentLanguageIndex++,this.rerenderButtons(this.capsMode)}},{key:"init",value:function(){this.rendered.classList.add("a-virtual-keyboard"),t(this.rendered,{width:this.config.width,height:this.config.height}),this.renderLayout(),this.renderButtons(),this.initKeyDown(),this.initShiftChange(),this.initLanguageChange()}},{key:"initKeyDown",value:function(){document.addEventListener("keydown",this.onButtonAction(void 0))}},{key:"initShiftChange",value:function(){var o=this;document.addEventListener("keydown",(function(n){n.shiftKey&&o.enableShiftMode(n.code)})),document.addEventListener("keyup",(function(n){"ShiftRight"!==n.code&&"ShiftLeft"!==n.code||o.disableShiftMode(n.code)}))}},{key:"initLanguageChange",value:function(){var o=this;window.addEventListener("keydown",(function(n){n.ctrlKey&&n.altKey&&o.changeLanguage()}))}},{key:"mount",value:function(o){var n=document.querySelector(o);n&&n.appendChild(this.rendered)}},{key:"destroy",value:function(){this.destroyButtons(),this.rendered.remove()}},{key:"renderLayout",value:function(){t(this.rendered,function(o){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?c(Object(t),!0).forEach((function(n){r(o,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(o,Object.getOwnPropertyDescriptors(t)):c(Object(t)).forEach((function(n){Object.defineProperty(o,n,Object.getOwnPropertyDescriptor(t,n))}))}return o}({display:"grid",gridTemplateColumns:"repeat(".concat(this.layout.columnsCount,", minmax(").concat(this.layout.style.button.minWidth,", 1fr))"),gridTemplateRows:"repeat(".concat(this.layout.rowsCount,", minmax(").concat(this.layout.style.button.minHeight,", 1fr))"),rowGap:this.layout.rowGap,columnGap:this.layout.columnGap,padding:this.layout.style.padding,background:this.layout.style.background,borderTop:this.layout.style.borderTop,borderBottom:this.layout.style.borderBottom,borderLeft:this.layout.style.borderLeft,borderRight:this.layout.style.borderRight,border:this.layout.style.border},this.layout.additionalStyles))}},{key:"enableShiftMode",value:function(o){this.renderedButtons.forEach((function(n){n.isShift&&o===n.code&&n.push()})),this.enableCapsMode()}},{key:"disableShiftMode",value:function(o){this.renderedButtons.forEach((function(n){n.isShift&&o===n.code&&n.unPush()})),this.capsMode&&this.disableCapsMode()}},{key:"onButtonAction",value:function(o){var n=this;return function(t){var e=o;t instanceof KeyboardEvent&&(e=null==t?void 0:t.code);var i=n.renderedButtons.find((function(o){return o.code===e}));if(i){if(null==t||t.preventDefault(),i.isCaps)return void n.toggleCapsMode();i.isShift||i.press(),t instanceof KeyboardEvent&&i.content.toLowerCase()!==i.content.toUpperCase()&&!i.isMeta&&((null==t?void 0:t.key)===i.content.toLowerCase()&&n.disableCapsMode(),(null==t?void 0:t.key)===i.content.toUpperCase()&&n.enableCapsMode());var c=i.content;null!=t&&t.shiftKey&&i.shiftContent&&(c=i.shiftContent),n.layout.onButtonClick(i.code,c,i.isBackspace,i.isTab,i.isEnter,i.isSpace,i.isShift)}}}},{key:"toggleCapsMode",value:function(){this.capsMode=!this.capsMode,this.rerenderButtons()}},{key:"enableCapsMode",value:function(){this.capsMode||(this.capsMode=!0,this.rerenderButtons(!1,!0))}},{key:"disableCapsMode",value:function(){this.capsMode&&(this.capsMode=!1,this.rerenderButtons(!1))}},{key:"rerenderButtons",value:function(){var o=!(arguments.length>0&&void 0!==arguments[0])||arguments[0],n=arguments.length>1&&void 0!==arguments[1]&&arguments[1];this.destroyButtons(),this.renderButtons(o,n)}},{key:"destroyButtons",value:function(){this.renderedButtons.map((function(o){var n;return null===(n=o.element)||void 0===n?void 0:n.removeEventListener("click",o.handler)})),this.renderedButtons=[],this.rendered.innerHTML=""}},{key:"renderButtons",value:function(){var o=this,n=arguments.length>0&&void 0!==arguments[0]&&arguments[0],t=arguments.length>1&&void 0!==arguments[1]&&arguments[1];this.layout.buttons.forEach((function(e){var c=new i(e,o.layout.style.button);c.toggleCase(o.capsMode);var r=c.render(t);if(!o.config.listenMode){var s=o.onButtonAction(c.code);c.setHandler(s),r.addEventListener("click",s)}n&&c.isCaps&&c.press(),o.renderedButtons.push(c),o.rendered.appendChild(r)}))}}])&&u(n.prototype,e),o}();return n}()}));

build/types/components/Keyboard.d.ts

@@ -1,9 +0,17 @@
-import { KeyboardConfig } from "../types";
+import { KeyboardConfig, KeyboardLayoutInterface } from "../types";
 declare class Keyboard {
+    private readonly rendered;
+    private readonly languages;
     private config;
+    private currentLanguageIndex;
     private renderedButtons;
     private capsMode;
-    private readonly rendered;
-    constructor(config: KeyboardConfig);
+    constructor(config: KeyboardConfig, languages?: KeyboardLayoutInterface[]);
+    get layout(): KeyboardLayoutInterface;
+    addLanguage(layout: KeyboardLayoutInterface): void;
+    changeLanguage(): void;
     init(): void;
+    initKeyDown(): void;
+    initShiftChange(): void;
+    initLanguageChange(): void;
     mount(selector: string): void;
@@ -10,0 +18,0 @@ destroy(): void;

build/types/index.d.ts

 import "./styles/index.scss";
 import Keyboard from "./components/Keyboard";
 import { DefaultKeyboardLayout } from "./layouts/default";
-export { DefaultKeyboardLayout };
+import { RussianLanguage } from "./layouts/languages/ru";
+export { DefaultKeyboardLayout, RussianLanguage };
 export default Keyboard;

package.json

 {
   "name": "simple-virtual-keyboard",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Virtual keyboard",
@@ -5,0 +5,0 @@ "main": "./build/index.js",

No alert changes

Improved metrics

Total package byte prevSize

64195

increased by13.05%

Number of package files

31

increased by3.33%

Lines of code

1720

increased by0.76%

No dependency changes