simple-keyboard - npm Package Compare versions

Comparing version 2.0.5 to 2.1.0

build/index.js

@@ -1,2 +0,2 @@
-!function(t,n){if("object"===typeof exports&&"object"===typeof module)module.exports=n();else if("function"===typeof define&&define.amd)define([],n);else{var e=n();for(var o in e)("object"===typeof exports?exports:t)[o]=e[o]}}(this,function(){return function(t){function n(o){if(e[o])return e[o].exports;var i=e[o]={i:o,l:!1,exports:{}};return t[o].call(i.exports,i,i.exports,n),i.l=!0,i.exports}var e={};return n.m=t,n.c=e,n.d=function(t,e,o){n.o(t,e)||Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:o})},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,n){return Object.prototype.hasOwnProperty.call(t,n)},n.p="",n(n.s=0)}([function(t,n,e){t.exports=e(1)},function(t,n,e){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var o=e(2);n.default=o.a},function(t,n,e){"use strict";function o(t,n){if(!(t instanceof n))throw new TypeError("Cannot call a class as a function")}var i=e(3),r=(e.n(i),e(4)),a=e(5),u="function"===typeof Symbol&&"symbol"===typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"===typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},s=function t(){o(this,t),c.call(this);var n="string"===typeof(arguments.length<=0?void 0:arguments[0])?arguments.length<=0?void 0:arguments[0]:".simple-keyboard",e="object"===u(arguments.length<=0?void 0:arguments[0])?arguments.length<=0?void 0:arguments[0]:arguments.length<=1?void 0:arguments[1];e||(e={}),this.keyboardDOM=document.querySelector(n),this.options=e,this.input="",this.options.layoutName=this.options.layoutName||"default",this.options.theme=this.options.theme||"hg-theme-default",this.keyboardDOM?this.render():console.error('"'+n+'" was not found in the DOM.')},c=function(){var t=this;this.handleButtonClicked=function(n){var e=t.options.debug;if("{//}"===n)return!1;"function"===typeof t.options.onKeyPress&&t.options.onKeyPress(n);var o={newLineOnEnter:!0===t.options.newLineOnEnter},i=a.a.getUpdatedInput(n,t.input,o);t.input!==i&&(t.input=i,e&&console.log("Input changed:",t.input),"function"===typeof t.options.onChange&&t.options.onChange(t.input)),e&&console.log("Key pressed:",n)},this.clearInput=function(){t.input=""},this.getInput=function(){return t.input},this.setInput=function(n){t.input=n},this.setOptions=function(n){n=n||{},t.options=Object.assign(t.options,n),t.render()},this.clear=function(){t.keyboardDOM.innerHTML=""},this.render=function(){t.clear();var n=t.options.layout?"hg-layout-custom":"hg-layout-"+t.options.layoutName,e=t.options.layout||r.a.getLayout(t.options.layoutName);t.keyboardDOM.className+=" "+t.options.theme+" "+n,e[t.options.layoutName].forEach(function(n,e){var o=n.split(" "),i=document.createElement("div");i.className+="hg-row",o.forEach(function(n,e){var o=a.a.getButtonClass(n),r=a.a.getButtonDisplayName(n,t.options.display),u=document.createElement("div");u.className+="hg-button "+o,u.onclick=function(){return t.handleButtonClicked(n)};var s=document.createElement("span");s.innerHTML=r,u.appendChild(s),i.appendChild(u),"function"===typeof t.options.onInit&&t.options.onInit()}),t.keyboardDOM.appendChild(i)})}};n.a=s},function(t,n){},function(t,n,e){"use strict";function o(t,n){if(!(t instanceof n))throw new TypeError("Cannot call a class as a function")}var i=function t(){o(this,t)};i.getLayout=function(t){return"qwerty"===t?{default:["` 1 2 3 4 5 6 7 8 9 0 - = {bksp}","{tab} q w e r t y u i o p [ ] \\","{lock} a s d f g h j k l ; ' {enter}","{shift} z x c v b n m , . / {shift}",".com @ {space}"],shift:["~ ! @ # $ % ^ & * ( ) _ + {bksp}","{tab} Q W E R T Y U I O P { } |",'{lock} A S D F G H J K L : " {enter}',"{shift} Z X C V B N M < > ? {shift}",".com @ {space}"]}:"numeric"===t?{default:["1 2 3","4 5 6","7 8 9","{//} 0 {bksp}"]}:i.getLayout("qwerty")},n.a=i},function(t,n,e){"use strict";function o(t,n){if(!(t instanceof n))throw new TypeError("Cannot call a class as a function")}var i=function(){function t(t,n){for(var e=0;e<n.length;e++){var o=n[e];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}return function(n,e,o){return e&&t(n.prototype,e),o&&t(n,o),n}}(),r=function(){function t(){o(this,t)}return i(t,null,[{key:"normalizeString",value:function(t){var n=void 0;return n="@"===t?"at":","===t?"comma":"."===t?"dot":"\\"===t?"backslash":"/"===t?"fordardslash":"*"===t?"asterisk":"&"===t?"ampersand":"$"===t?"dollarsign":"="===t?"equals":"+"===t?"plus":"-"===t?"minus":"'"===t?"apostrophe":";"===t?"colon":"["===t?"openbracket":"]"===t?"closebracket":"//"===t?"emptybutton":"",n?" hg-button-"+n:""}},{key:"getDefaultDiplay",value:function(){return{"{bksp}":"delete","{enter}":"< enter","{shift}":"shift","{s}":"shift","{tab}":"tab","{lock}":"caps","{accept}":"Submit","{space}":" ","{//}":" "}}}]),t}();r.getButtonClass=function(t){var n=t.includes("{")&&"{//}"!==t?"functionBtn":"standardBtn",e=t.replace("{","").replace("}","");return"hg-"+n+("standardBtn"===n?r.normalizeString(e):" hg-button-"+e)},r.getButtonDisplayName=function(t,n){return n=n||r.getDefaultDiplay(),n[t]||t},r.getUpdatedInput=function(t,n,e){var o=n,i=e.newLineOnEnter;return"{bksp}"===t&&o.length>0?o=o.slice(0,-1):"{space}"===t?o+=" ":"{tab}"===t?o+="\t":"{enter}"===t&&i?o+="\n":t.includes("{")||t.includes("{")||(o+=t),o},n.a=r}])});
+!function(t,n){if("object"===typeof exports&&"object"===typeof module)module.exports=n();else if("function"===typeof define&&define.amd)define([],n);else{var e=n();for(var o in e)("object"===typeof exports?exports:t)[o]=e[o]}}(this,function(){return function(t){function n(o){if(e[o])return e[o].exports;var i=e[o]={i:o,l:!1,exports:{}};return t[o].call(i.exports,i,i.exports,n),i.l=!0,i.exports}var e={};return n.m=t,n.c=e,n.d=function(t,e,o){n.o(t,e)||Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:o})},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,n){return Object.prototype.hasOwnProperty.call(t,n)},n.p="",n(n.s=0)}([function(t,n,e){t.exports=e(1)},function(t,n,e){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var o=e(2);n.default=o.a},function(t,n,e){"use strict";function o(t,n){if(!(t instanceof n))throw new TypeError("Cannot call a class as a function")}var i=e(3),a=(e.n(i),e(4)),r=e(5),u="function"===typeof Symbol&&"symbol"===typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"===typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},s=function t(){o(this,t),p.call(this);var n="string"===typeof(arguments.length<=0?void 0:arguments[0])?arguments.length<=0?void 0:arguments[0]:".simple-keyboard",e="object"===u(arguments.length<=0?void 0:arguments[0])?arguments.length<=0?void 0:arguments[0]:arguments.length<=1?void 0:arguments[1];e||(e={}),this.keyboardDOM=document.querySelector(n),this.options=e,this.options.layoutName=this.options.layoutName||"default",this.options.theme=this.options.theme||"hg-theme-default",this.options.inputName=this.options.inputName||"default",this.input={},this.input[this.options.inputName]="",this.keyboardDOM?this.render():console.error('"'+n+'" was not found in the DOM.')},p=function(){var t=this;this.handleButtonClicked=function(n){var e=t.options.debug;if("{//}"===n)return!1;"function"===typeof t.options.onKeyPress&&t.options.onKeyPress(n);var o={newLineOnEnter:!0===t.options.newLineOnEnter};t.input[t.options.inputName]||(t.input[t.options.inputName]="");var i=r.a.getUpdatedInput(n,t.input[t.options.inputName],o);t.input[t.options.inputName]!==i&&(t.input[t.options.inputName]=i,e&&console.log("Input changed:",t.input),"function"===typeof t.options.onChange&&t.options.onChange(t.input[t.options.inputName])),e&&console.log("Key pressed:",n)},this.clearInput=function(n){n=n||t.options.inputName,t.input[t.options.inputName]=""},this.getInput=function(n){return n=n||t.options.inputName,t.input[t.options.inputName]},this.setInput=function(n,e){e=e||t.options.inputName,t.input[e]=n},this.setOptions=function(n){n=n||{},t.options=Object.assign(t.options,n),t.render()},this.clear=function(){t.keyboardDOM.innerHTML=""},this.render=function(){t.clear();var n=t.options.layout?"hg-layout-custom":"hg-layout-"+t.options.layoutName,e=t.options.layout||a.a.getLayout(t.options.layoutName);t.keyboardDOM.className+=" "+t.options.theme+" "+n,e[t.options.layoutName].forEach(function(n,e){var o=n.split(" "),i=document.createElement("div");i.className+="hg-row",o.forEach(function(n,e){var o=r.a.getButtonClass(n),a=r.a.getButtonDisplayName(n,t.options.display),u=document.createElement("div");u.className+="hg-button "+o,u.onclick=function(){return t.handleButtonClicked(n)};var s=document.createElement("span");s.innerHTML=a,u.appendChild(s),i.appendChild(u),"function"===typeof t.options.onInit&&t.options.onInit()}),t.keyboardDOM.appendChild(i)})}};n.a=s},function(t,n){},function(t,n,e){"use strict";function o(t,n){if(!(t instanceof n))throw new TypeError("Cannot call a class as a function")}var i=function t(){o(this,t)};i.getLayout=function(t){return"qwerty"===t?{default:["` 1 2 3 4 5 6 7 8 9 0 - = {bksp}","{tab} q w e r t y u i o p [ ] \\","{lock} a s d f g h j k l ; ' {enter}","{shift} z x c v b n m , . / {shift}",".com @ {space}"],shift:["~ ! @ # $ % ^ & * ( ) _ + {bksp}","{tab} Q W E R T Y U I O P { } |",'{lock} A S D F G H J K L : " {enter}',"{shift} Z X C V B N M < > ? {shift}",".com @ {space}"]}:"numeric"===t?{default:["1 2 3","4 5 6","7 8 9","{//} 0 {bksp}"]}:i.getLayout("qwerty")},n.a=i},function(t,n,e){"use strict";function o(t,n){if(!(t instanceof n))throw new TypeError("Cannot call a class as a function")}var i=function(){function t(t,n){for(var e=0;e<n.length;e++){var o=n[e];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}return function(n,e,o){return e&&t(n.prototype,e),o&&t(n,o),n}}(),a=function(){function t(){o(this,t)}return i(t,null,[{key:"normalizeString",value:function(t){var n=void 0;return n="@"===t?"at":","===t?"comma":"."===t?"dot":"\\"===t?"backslash":"/"===t?"fordardslash":"*"===t?"asterisk":"&"===t?"ampersand":"$"===t?"dollarsign":"="===t?"equals":"+"===t?"plus":"-"===t?"minus":"'"===t?"apostrophe":";"===t?"colon":"["===t?"openbracket":"]"===t?"closebracket":"//"===t?"emptybutton":"",n?" hg-button-"+n:""}},{key:"getDefaultDiplay",value:function(){return{"{bksp}":"delete","{enter}":"< enter","{shift}":"shift","{s}":"shift","{tab}":"tab","{lock}":"caps","{accept}":"Submit","{space}":" ","{//}":" "}}}]),t}();a.getButtonClass=function(t){var n=t.includes("{")&&"{//}"!==t?"functionBtn":"standardBtn",e=t.replace("{","").replace("}","");return"hg-"+n+("standardBtn"===n?a.normalizeString(e):" hg-button-"+e)},a.getButtonDisplayName=function(t,n){return n=n||a.getDefaultDiplay(),n[t]||t},a.getUpdatedInput=function(t,n,e){var o=n,i=e.newLineOnEnter;return"{bksp}"===t&&o.length>0?o=o.slice(0,-1):"{space}"===t?o+=" ":"{tab}"===t?o+="\t":"{enter}"===t&&i?o+="\n":t.includes("{")||t.includes("{")||(o+=t),o},n.a=a}])});
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "simple-keyboard",
-  "version": "2.0.5",
+  "version": "2.1.0",
   "description": "On-screen Virtual Keyboard",
@@ -5,0 +5,0 @@ "main": "build/index.js",

README.md

@@ -176,2 +176,10 @@ # simple-keyboard
 
+### inputName
+
+> Allows you to use a single simple-keyboard instance for several inputs. 
+
+```js
+inputName: "default"
+```
+
 ## Methods
@@ -216,2 +224,45 @@
 
+### setOptions
+
+> Set new option or modify existing ones after initialization. The changes are applied immediately.
+
+```js
+keyboard.setOptions({
+  theme: "my-custom-theme"
+});
+```
+
+## Use-cases
+
+### Using several inputs
+
+Set the *[inputName](#inputname)* option for each input you want to handle with simple-keyboard.
+
+For example:
+```html
+  <input class="input" id="input1" value=""/>
+  <input class="input" id="input2" value=""/>
+```
+
+```js
+  // Initialize simple-keyboard as usual
+  var keyboard = new Keyboard({
+    onChange: input => console.log(input),
+    onKeyPress: button => console.log(button),
+  });
+
+  // Add an event listener for the inputs to be tracked
+  document.querySelectorAll('.input')
+    .forEach(input => input.addEventListener('focus', onInputFocus));
+
+  // Set the inputName option on the fly !
+  function onInputFocus(event){
+    keyboard.setOptions({
+      inputName: event.target.id
+    });
+  }
+```
+
+[Using several inputs](#using-several-inputs)
+
 ## Demo
@@ -218,0 +269,0 @@

No alert changes

Improved metrics

Total package byte prevSize

599270

increased by0.5%

Lines of code

487

increased by0.21%

Number of lines in readme file

285

increased by21.79%

No dependency changes