From 1a5d917a7d1dc19d24247ceee8ac67ec7e9f0194 Mon Sep 17 00:00:00 2001 From: Francisco Hodge Date: Thu, 6 Feb 2020 00:30:41 -0500 Subject: [PATCH] Supporting DOM element param --- build/css/index.css | 2 +- build/css/index.css.map | 2 +- build/index.js | 2 +- build/index.js.map | 2 +- package.json | 2 +- src/demo/DOMElementDemo.js | 31 ++++ src/demo/css/DOMElementDemo.css | 14 ++ src/demo/index.js | 7 +- src/demo/tests/DOMElementDemo.test.js | 22 +++ src/lib/components/Keyboard.js | 177 +++++++++++++++------- src/lib/components/tests/Keyboard.test.js | 23 +++ src/lib/services/Utilities.js | 28 ++-- 12 files changed, 235 insertions(+), 77 deletions(-) create mode 100644 src/demo/DOMElementDemo.js create mode 100644 src/demo/css/DOMElementDemo.css create mode 100644 src/demo/tests/DOMElementDemo.test.js diff --git a/build/css/index.css b/build/css/index.css index 59c93e4e..071f5a09 100644 --- a/build/css/index.css +++ b/build/css/index.css @@ -8,5 +8,5 @@ * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. * - */body,html{margin:0;padding:0}.simple-keyboard{font-family:HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;width:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;box-sizing:border-box;overflow:hidden;touch-action:manipulation}.simple-keyboard .hg-row{display:flex}.simple-keyboard .hg-row:not(:last-child){margin-bottom:5px}.simple-keyboard .hg-row .hg-button-container,.simple-keyboard .hg-row .hg-button:not(:last-child){margin-right:5px}.simple-keyboard .hg-row>div:last-child{margin-right:0}.simple-keyboard .hg-row .hg-button-container{display:flex}.simple-keyboard .hg-button{display:inline-block;flex-grow:1;cursor:pointer}.simple-keyboard .hg-button span{pointer-events:none}.simple-keyboard.hg-theme-default{background-color:rgba(0,0,0,.1);padding:5px;border-radius:5px}.simple-keyboard.hg-theme-default .hg-button{box-shadow:0 0 3px -1px rgba(0,0,0,.3);height:40px;border-radius:5px;box-sizing:border-box;padding:5px;background:#fff;border-bottom:1px solid #b5b5b5;cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:rgba(0,0,0,0)}.simple-keyboard.hg-theme-default .hg-button.hg-activeButton{background:#efefef}.simple-keyboard button.hg-button{border-width:0;outline:0;font-size:inherit}.simple-keyboard.hg-theme-default.hg-layout-numeric .hg-button{width:33.3%;height:60px;align-items:center;display:flex;justify-content:center}.simple-keyboard.hg-theme-default .hg-button.hg-button-numpadadd,.simple-keyboard.hg-theme-default .hg-button.hg-button-numpadenter{height:85px}.simple-keyboard.hg-theme-default .hg-button.hg-button-numpad0{width:105px}.simple-keyboard.hg-theme-default .hg-button.hg-button-com{max-width:85px}.simple-keyboard.hg-theme-default .hg-button.hg-standardBtn.hg-button-at{max-width:45px}.simple-keyboard.hg-theme-default .hg-button.hg-selectedButton{background:rgba(5,25,70,.53);color:#fff}.simple-keyboard.hg-theme-default .hg-button.hg-standardBtn[data-skbtn=".com"]{max-width:82px}.simple-keyboard.hg-theme-default .hg-button.hg-standardBtn[data-skbtn="@"]{max-width:60px} + */.hg-theme-default{width:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;box-sizing:border-box;overflow:hidden;touch-action:manipulation}.hg-theme-default .hg-button span{pointer-events:none}.hg-theme-default button.hg-button{border-width:0;outline:0;font-size:inherit}.hg-theme-default{font-family:HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;background-color:rgba(0,0,0,.1);padding:5px;border-radius:5px}.hg-theme-default .hg-button{display:inline-block;flex-grow:1}.hg-theme-default .hg-row{display:flex}.hg-theme-default .hg-row:not(:last-child){margin-bottom:5px}.hg-theme-default .hg-row .hg-button-container,.hg-theme-default .hg-row .hg-button:not(:last-child){margin-right:5px}.hg-theme-default .hg-row>div:last-child{margin-right:0}.hg-theme-default .hg-row .hg-button-container{display:flex}.hg-theme-default .hg-button{box-shadow:0 0 3px -1px rgba(0,0,0,.3);height:40px;border-radius:5px;box-sizing:border-box;padding:5px;background:#fff;border-bottom:1px solid #b5b5b5;cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:rgba(0,0,0,0)}.hg-theme-default .hg-button.hg-activeButton{background:#efefef}.hg-theme-default.hg-layout-numeric .hg-button{width:33.3%;height:60px;align-items:center;display:flex;justify-content:center}.hg-theme-default .hg-button.hg-button-numpadadd,.hg-theme-default .hg-button.hg-button-numpadenter{height:85px}.hg-theme-default .hg-button.hg-button-numpad0{width:105px}.hg-theme-default .hg-button.hg-button-com{max-width:85px}.hg-theme-default .hg-button.hg-standardBtn.hg-button-at{max-width:45px}.hg-theme-default .hg-button.hg-selectedButton{background:rgba(5,25,70,.53);color:#fff}.hg-theme-default .hg-button.hg-standardBtn[data-skbtn=".com"]{max-width:82px}.hg-theme-default .hg-button.hg-standardBtn[data-skbtn="@"]{max-width:60px} /*# sourceMappingURL=index.css.map */ \ No newline at end of file diff --git a/build/css/index.css.map b/build/css/index.css.map index a4d8e8c7..2f0ac8a5 100644 --- a/build/css/index.css.map +++ b/build/css/index.css.map @@ -1 +1 @@ -{"version":3,"sources":["index.css","/home/runner/work/simple-keyboard/simple-keyboard/src/lib/components/Keyboard.css"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE,CCVF,UAEE,QAAS,CACT,SACF,CAEA,iBACE,4GAC+C,CAC/C,UAAW,CACX,wBAAiB,CAAjB,qBAAiB,CAAjB,oBAAiB,CAAjB,gBAAiB,CACjB,qBAAsB,CACtB,eAAgB,CAChB,yBACF,CAEA,yBACE,YACF,CAEA,0CACE,iBACF,CAMA,mGACE,gBACF,CAEA,wCACE,cACF,CAEA,8CACE,YACF,CAEA,4BACE,oBAAqB,CACrB,WAAY,CACZ,cACF,CAEA,iCACE,mBACF,CAKA,kCACE,+BAAoC,CACpC,WAAY,CACZ,iBACF,CAEA,6CACE,sCAA+C,CAC/C,WAAY,CACZ,iBAAkB,CAClB,qBAAsB,CACtB,WAAY,CACZ,eAAiB,CACjB,+BAAgC,CAChC,cAAe,CACf,YAAa,CACb,kBAAmB,CACnB,sBAAuB,CACvB,yCACF,CAEA,6DACE,kBACF,CAGA,kCACE,cAAe,CACf,SAAU,CACV,iBACF,CAEA,+DACE,WAAY,CACZ,WAAY,CACZ,kBAAmB,CACnB,YAAa,CACb,sBACF,CAMA,oIACE,WACF,CAEA,+DACE,WACF,CAEA,2DACE,cACF,CAEA,yEACE,cACF,CAEA,+DACE,4BAAiC,CACjC,UACF,CAEA,+EACE,cACF,CAEA,4EACE,cACF","file":"index.css","sourcesContent":["/*!\n * \n * simple-keyboard v2.27.85\n * https://github.com/hodgef/simple-keyboard\n * \n * Copyright (c) Francisco Hodge (https://github.com/hodgef)\n * \n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n * \n */\nbody,\nhtml {\n margin: 0;\n padding: 0;\n}\n\n.simple-keyboard {\n font-family: \"HelveticaNeue-Light\", \"Helvetica Neue Light\", \"Helvetica Neue\",\n Helvetica, Arial, \"Lucida Grande\", sans-serif;\n width: 100%;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n box-sizing: border-box;\n overflow: hidden;\n touch-action: manipulation;\n}\n\n.simple-keyboard .hg-row {\n display: flex;\n}\n\n.simple-keyboard .hg-row:not(:last-child) {\n margin-bottom: 5px;\n}\n\n.simple-keyboard .hg-row .hg-button:not(:last-child) {\n margin-right: 5px;\n}\n\n.simple-keyboard .hg-row .hg-button-container {\n margin-right: 5px;\n}\n\n.simple-keyboard .hg-row > div:last-child {\n margin-right: 0;\n}\n\n.simple-keyboard .hg-row .hg-button-container {\n display: flex;\n}\n\n.simple-keyboard .hg-button {\n display: inline-block;\n flex-grow: 1;\n cursor: pointer;\n}\n\n.simple-keyboard .hg-button span {\n pointer-events: none;\n}\n\n/**\n * hg-theme-default theme\n */\n.simple-keyboard.hg-theme-default {\n background-color: rgba(0, 0, 0, 0.1);\n padding: 5px;\n border-radius: 5px;\n}\n\n.simple-keyboard.hg-theme-default .hg-button {\n box-shadow: 0px 0px 3px -1px rgba(0, 0, 0, 0.3);\n height: 40px;\n border-radius: 5px;\n box-sizing: border-box;\n padding: 5px;\n background: white;\n border-bottom: 1px solid #b5b5b5;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n.simple-keyboard.hg-theme-default .hg-button.hg-activeButton {\n background: #efefef;\n}\n\n/* When using option \"useButtonTag\" */\n.simple-keyboard button.hg-button {\n border-width: 0;\n outline: 0;\n font-size: inherit;\n}\n\n.simple-keyboard.hg-theme-default.hg-layout-numeric .hg-button {\n width: 33.3%;\n height: 60px;\n align-items: center;\n display: flex;\n justify-content: center;\n}\n\n.simple-keyboard.hg-theme-default .hg-button.hg-button-numpadadd {\n height: 85px;\n}\n\n.simple-keyboard.hg-theme-default .hg-button.hg-button-numpadenter {\n height: 85px;\n}\n\n.simple-keyboard.hg-theme-default .hg-button.hg-button-numpad0 {\n width: 105px;\n}\n\n.simple-keyboard.hg-theme-default .hg-button.hg-button-com {\n max-width: 85px;\n}\n\n.simple-keyboard.hg-theme-default .hg-button.hg-standardBtn.hg-button-at {\n max-width: 45px;\n}\n\n.simple-keyboard.hg-theme-default .hg-button.hg-selectedButton {\n background: rgba(5, 25, 70, 0.53);\n color: white;\n}\n\n.simple-keyboard.hg-theme-default .hg-button.hg-standardBtn[data-skbtn=\".com\"] {\n max-width: 82px;\n}\n\n.simple-keyboard.hg-theme-default .hg-button.hg-standardBtn[data-skbtn=\"@\"] {\n max-width: 60px;\n}\n\n","body,\nhtml {\n margin: 0;\n padding: 0;\n}\n\n.simple-keyboard {\n font-family: \"HelveticaNeue-Light\", \"Helvetica Neue Light\", \"Helvetica Neue\",\n Helvetica, Arial, \"Lucida Grande\", sans-serif;\n width: 100%;\n user-select: none;\n box-sizing: border-box;\n overflow: hidden;\n touch-action: manipulation;\n}\n\n.simple-keyboard .hg-row {\n display: flex;\n}\n\n.simple-keyboard .hg-row:not(:last-child) {\n margin-bottom: 5px;\n}\n\n.simple-keyboard .hg-row .hg-button:not(:last-child) {\n margin-right: 5px;\n}\n\n.simple-keyboard .hg-row .hg-button-container {\n margin-right: 5px;\n}\n\n.simple-keyboard .hg-row > div:last-child {\n margin-right: 0;\n}\n\n.simple-keyboard .hg-row .hg-button-container {\n display: flex;\n}\n\n.simple-keyboard .hg-button {\n display: inline-block;\n flex-grow: 1;\n cursor: pointer;\n}\n\n.simple-keyboard .hg-button span {\n pointer-events: none;\n}\n\n/**\n * hg-theme-default theme\n */\n.simple-keyboard.hg-theme-default {\n background-color: rgba(0, 0, 0, 0.1);\n padding: 5px;\n border-radius: 5px;\n}\n\n.simple-keyboard.hg-theme-default .hg-button {\n box-shadow: 0px 0px 3px -1px rgba(0, 0, 0, 0.3);\n height: 40px;\n border-radius: 5px;\n box-sizing: border-box;\n padding: 5px;\n background: white;\n border-bottom: 1px solid #b5b5b5;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n.simple-keyboard.hg-theme-default .hg-button.hg-activeButton {\n background: #efefef;\n}\n\n/* When using option \"useButtonTag\" */\n.simple-keyboard button.hg-button {\n border-width: 0;\n outline: 0;\n font-size: inherit;\n}\n\n.simple-keyboard.hg-theme-default.hg-layout-numeric .hg-button {\n width: 33.3%;\n height: 60px;\n align-items: center;\n display: flex;\n justify-content: center;\n}\n\n.simple-keyboard.hg-theme-default .hg-button.hg-button-numpadadd {\n height: 85px;\n}\n\n.simple-keyboard.hg-theme-default .hg-button.hg-button-numpadenter {\n height: 85px;\n}\n\n.simple-keyboard.hg-theme-default .hg-button.hg-button-numpad0 {\n width: 105px;\n}\n\n.simple-keyboard.hg-theme-default .hg-button.hg-button-com {\n max-width: 85px;\n}\n\n.simple-keyboard.hg-theme-default .hg-button.hg-standardBtn.hg-button-at {\n max-width: 45px;\n}\n\n.simple-keyboard.hg-theme-default .hg-button.hg-selectedButton {\n background: rgba(5, 25, 70, 0.53);\n color: white;\n}\n\n.simple-keyboard.hg-theme-default .hg-button.hg-standardBtn[data-skbtn=\".com\"] {\n max-width: 82px;\n}\n\n.simple-keyboard.hg-theme-default .hg-button.hg-standardBtn[data-skbtn=\"@\"] {\n max-width: 60px;\n}\n"]} \ No newline at end of file +{"version":3,"sources":["index.css","C:/Dev/simple-keyboard/src/lib/components/Keyboard.css"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE,CCNF,kBACE,UAAW,CACX,wBAAiB,CAAjB,qBAAiB,CAAjB,oBAAiB,CAAjB,gBAAiB,CACjB,qBAAsB,CACtB,eAAgB,CAChB,yBACF,CAEA,kCACE,mBACF,CAGA,mCACE,cAAe,CACf,SAAU,CACV,iBACF,CAEA,kBACE,4GAC+C,CAC/C,+BAAoC,CACpC,WAAY,CACZ,iBACF,CAEA,6BACE,oBAAqB,CACrB,WAEF,CAEA,0BACE,YACF,CAEA,2CACE,iBACF,CAMA,qGACE,gBACF,CAEA,yCACE,cACF,CAEA,+CACE,YACF,CAEA,6BACE,sCAA+C,CAC/C,WAAY,CACZ,iBAAkB,CAClB,qBAAsB,CACtB,WAAY,CACZ,eAAiB,CACjB,+BAAgC,CAChC,cAAe,CACf,YAAa,CACb,kBAAmB,CACnB,sBAAuB,CACvB,yCACF,CAEA,6CACE,kBACF,CAEA,+CACE,WAAY,CACZ,WAAY,CACZ,kBAAmB,CACnB,YAAa,CACb,sBACF,CAMA,oGACE,WACF,CAEA,+CACE,WACF,CAEA,2CACE,cACF,CAEA,yDACE,cACF,CAEA,+CACE,4BAAiC,CACjC,UACF,CAEA,+DACE,cACF,CAEA,4DACE,cACF","file":"index.css","sourcesContent":["/*!\n * \n * simple-keyboard v2.27.85\n * https://github.com/hodgef/simple-keyboard\n * \n * Copyright (c) Francisco Hodge (https://github.com/hodgef)\n * \n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n * \n */\n/**\r\n * simple-keyboard\r\n * Theme: hg-theme-default\r\n */\r\n.hg-theme-default {\r\n width: 100%;\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none;\r\n box-sizing: border-box;\r\n overflow: hidden;\r\n touch-action: manipulation;\r\n}\r\n\r\n.hg-theme-default .hg-button span {\r\n pointer-events: none;\r\n}\r\n\r\n/* When using option \"useButtonTag\" */\r\n.hg-theme-default button.hg-button {\r\n border-width: 0;\r\n outline: 0;\r\n font-size: inherit;\r\n}\r\n\r\n.hg-theme-default {\r\n font-family: \"HelveticaNeue-Light\", \"Helvetica Neue Light\", \"Helvetica Neue\",\r\n Helvetica, Arial, \"Lucida Grande\", sans-serif;\r\n background-color: rgba(0, 0, 0, 0.1);\r\n padding: 5px;\r\n border-radius: 5px;\r\n}\r\n\r\n.hg-theme-default .hg-button {\r\n display: inline-block;\r\n flex-grow: 1;\r\n cursor: pointer;\r\n}\r\n\r\n.hg-theme-default .hg-row {\r\n display: flex;\r\n}\r\n\r\n.hg-theme-default .hg-row:not(:last-child) {\r\n margin-bottom: 5px;\r\n}\r\n\r\n.hg-theme-default .hg-row .hg-button:not(:last-child) {\r\n margin-right: 5px;\r\n}\r\n\r\n.hg-theme-default .hg-row .hg-button-container {\r\n margin-right: 5px;\r\n}\r\n\r\n.hg-theme-default .hg-row > div:last-child {\r\n margin-right: 0;\r\n}\r\n\r\n.hg-theme-default .hg-row .hg-button-container {\r\n display: flex;\r\n}\r\n\r\n.hg-theme-default .hg-button {\r\n box-shadow: 0px 0px 3px -1px rgba(0, 0, 0, 0.3);\r\n height: 40px;\r\n border-radius: 5px;\r\n box-sizing: border-box;\r\n padding: 5px;\r\n background: white;\r\n border-bottom: 1px solid #b5b5b5;\r\n cursor: pointer;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n}\r\n\r\n.hg-theme-default .hg-button.hg-activeButton {\r\n background: #efefef;\r\n}\r\n\r\n.hg-theme-default.hg-layout-numeric .hg-button {\r\n width: 33.3%;\r\n height: 60px;\r\n align-items: center;\r\n display: flex;\r\n justify-content: center;\r\n}\r\n\r\n.hg-theme-default .hg-button.hg-button-numpadadd {\r\n height: 85px;\r\n}\r\n\r\n.hg-theme-default .hg-button.hg-button-numpadenter {\r\n height: 85px;\r\n}\r\n\r\n.hg-theme-default .hg-button.hg-button-numpad0 {\r\n width: 105px;\r\n}\r\n\r\n.hg-theme-default .hg-button.hg-button-com {\r\n max-width: 85px;\r\n}\r\n\r\n.hg-theme-default .hg-button.hg-standardBtn.hg-button-at {\r\n max-width: 45px;\r\n}\r\n\r\n.hg-theme-default .hg-button.hg-selectedButton {\r\n background: rgba(5, 25, 70, 0.53);\r\n color: white;\r\n}\r\n\r\n.hg-theme-default .hg-button.hg-standardBtn[data-skbtn=\".com\"] {\r\n max-width: 82px;\r\n}\r\n\r\n.hg-theme-default .hg-button.hg-standardBtn[data-skbtn=\"@\"] {\r\n max-width: 60px;\r\n}\r\n\n","/**\r\n * simple-keyboard\r\n * Theme: hg-theme-default\r\n */\r\n.hg-theme-default {\r\n width: 100%;\r\n user-select: none;\r\n box-sizing: border-box;\r\n overflow: hidden;\r\n touch-action: manipulation;\r\n}\r\n\r\n.hg-theme-default .hg-button span {\r\n pointer-events: none;\r\n}\r\n\r\n/* When using option \"useButtonTag\" */\r\n.hg-theme-default button.hg-button {\r\n border-width: 0;\r\n outline: 0;\r\n font-size: inherit;\r\n}\r\n\r\n.hg-theme-default {\r\n font-family: \"HelveticaNeue-Light\", \"Helvetica Neue Light\", \"Helvetica Neue\",\r\n Helvetica, Arial, \"Lucida Grande\", sans-serif;\r\n background-color: rgba(0, 0, 0, 0.1);\r\n padding: 5px;\r\n border-radius: 5px;\r\n}\r\n\r\n.hg-theme-default .hg-button {\r\n display: inline-block;\r\n flex-grow: 1;\r\n cursor: pointer;\r\n}\r\n\r\n.hg-theme-default .hg-row {\r\n display: flex;\r\n}\r\n\r\n.hg-theme-default .hg-row:not(:last-child) {\r\n margin-bottom: 5px;\r\n}\r\n\r\n.hg-theme-default .hg-row .hg-button:not(:last-child) {\r\n margin-right: 5px;\r\n}\r\n\r\n.hg-theme-default .hg-row .hg-button-container {\r\n margin-right: 5px;\r\n}\r\n\r\n.hg-theme-default .hg-row > div:last-child {\r\n margin-right: 0;\r\n}\r\n\r\n.hg-theme-default .hg-row .hg-button-container {\r\n display: flex;\r\n}\r\n\r\n.hg-theme-default .hg-button {\r\n box-shadow: 0px 0px 3px -1px rgba(0, 0, 0, 0.3);\r\n height: 40px;\r\n border-radius: 5px;\r\n box-sizing: border-box;\r\n padding: 5px;\r\n background: white;\r\n border-bottom: 1px solid #b5b5b5;\r\n cursor: pointer;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n}\r\n\r\n.hg-theme-default .hg-button.hg-activeButton {\r\n background: #efefef;\r\n}\r\n\r\n.hg-theme-default.hg-layout-numeric .hg-button {\r\n width: 33.3%;\r\n height: 60px;\r\n align-items: center;\r\n display: flex;\r\n justify-content: center;\r\n}\r\n\r\n.hg-theme-default .hg-button.hg-button-numpadadd {\r\n height: 85px;\r\n}\r\n\r\n.hg-theme-default .hg-button.hg-button-numpadenter {\r\n height: 85px;\r\n}\r\n\r\n.hg-theme-default .hg-button.hg-button-numpad0 {\r\n width: 105px;\r\n}\r\n\r\n.hg-theme-default .hg-button.hg-button-com {\r\n max-width: 85px;\r\n}\r\n\r\n.hg-theme-default .hg-button.hg-standardBtn.hg-button-at {\r\n max-width: 45px;\r\n}\r\n\r\n.hg-theme-default .hg-button.hg-selectedButton {\r\n background: rgba(5, 25, 70, 0.53);\r\n color: white;\r\n}\r\n\r\n.hg-theme-default .hg-button.hg-standardBtn[data-skbtn=\".com\"] {\r\n max-width: 82px;\r\n}\r\n\r\n.hg-theme-default .hg-button.hg-standardBtn[data-skbtn=\"@\"] {\r\n max-width: 60px;\r\n}\r\n"]} \ No newline at end of file diff --git a/build/index.js b/build/index.js index 4dc6c8d9..bd1d6536 100644 --- a/build/index.js +++ b/build/index.js @@ -9,5 +9,5 @@ * LICENSE file in the root directory of this source tree. * */ -!function(t,e){"object"===typeof exports&&"object"===typeof module?module.exports=e():"function"===typeof define&&define.amd?define("SimpleKeyboard",[],e):"object"===typeof exports?exports.SimpleKeyboard=e():t.SimpleKeyboard=e()}(window,(function(){return function(t){var e={};function __webpack_require__(n){if(e[n])return e[n].exports;var o=e[n]={i:n,l:!1,exports:{}};return t[n].call(o.exports,o,o.exports,__webpack_require__),o.l=!0,o.exports}return __webpack_require__.m=t,__webpack_require__.c=e,__webpack_require__.d=function(t,e,n){__webpack_require__.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},__webpack_require__.r=function(t){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},__webpack_require__.t=function(t,e){if(1&e&&(t=__webpack_require__(t)),8&e)return t;if(4&e&&"object"===typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(__webpack_require__.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)__webpack_require__.d(n,o,function(e){return t[e]}.bind(null,o));return n},__webpack_require__.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return __webpack_require__.d(e,"a",e),e},__webpack_require__.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},__webpack_require__.p="",__webpack_require__(__webpack_require__.s=0)}([function(t,e,n){t.exports=n(2)},function(t,e,n){},function(t,e,n){"use strict";n.r(e);n(1);function _typeof(t){return(_typeof="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})(t)}function _defineProperties(t,e){for(var n=0;n0?s=this.removeAt(s,n,o):"{space}"===t?s=this.addStringAt(s," ",n,o):"{tab}"!==t||"boolean"===typeof i.tabCharOnTab&&!1===i.tabCharOnTab?"{enter}"!==t&&"{numpadenter}"!==t||!i.newLineOnEnter?t.includes("numpad")&&Number.isInteger(Number(t[t.length-2]))?s=this.addStringAt(s,t[t.length-2],n,o):"{numpaddivide}"===t?s=this.addStringAt(s,"/",n,o):"{numpadmultiply}"===t?s=this.addStringAt(s,"*",n,o):"{numpadsubtract}"===t?s=this.addStringAt(s,"-",n,o):"{numpadadd}"===t?s=this.addStringAt(s,"+",n,o):"{numpaddecimal}"===t?s=this.addStringAt(s,".",n,o):"{"===t||"}"===t?s=this.addStringAt(s,t,n,o):t.includes("{")||t.includes("}")||(s=this.addStringAt(s,t,n,o)):s=this.addStringAt(s,"\n",n,o):s=this.addStringAt(s,"\t",n,o),s}},{key:"updateCaretPos",value:function(t,e){var n=this.updateCaretPosAction(t,e);this.dispatch((function(t){t.caretPosition=n}))}},{key:"updateCaretPosAction",value:function(t,e){var n=this.getOptions(),o=this.getCaretPosition();return e?o>0&&(o-=t):o+=t,n.debug&&console.log("Caret at:",o,"(".concat(this.keyboardDOMClass,")")),o}},{key:"addStringAt",value:function(t,e,n,o){var i;return n||0===n?(i=[t.slice(0,n),e,t.slice(n)].join(""),this.isMaxLengthReached()||o&&this.updateCaretPos(e.length)):i=t+e,i}},{key:"removeAt",value:function(t,e,n){var o;if(0===this.getCaretPosition())return t;var i=/([\uD800-\uDBFF][\uDC00-\uDFFF])/g;return e&&e>=0?t.substring(e-2,e).match(i)?(o=t.substr(0,e-2)+t.substr(e),n&&this.updateCaretPos(2,!0)):(o=t.substr(0,e-1)+t.substr(e),n&&this.updateCaretPos(1,!0)):t.slice(-2).match(i)?(o=t.slice(0,-2),n&&this.updateCaretPos(2,!0)):(o=t.slice(0,-1),n&&this.updateCaretPos(1,!0)),o}},{key:"handleMaxLength",value:function(t,e){var n=this.getOptions(),o=n.maxLength,i=t[n.inputName],s=e.length-1>=o;if(e.length<=i.length)return!1;if(Number.isInteger(o))return n.debug&&console.log("maxLength (num) reached:",s),s?(this.maxLengthReached=!0,!0):(this.maxLengthReached=!1,!1);if("object"===_typeof(o)){var a=i.length===o[n.inputName];return n.debug&&console.log("maxLength (obj) reached:",a),a?(this.maxLengthReached=!0,!0):(this.maxLengthReached=!1,!1)}}},{key:"isMaxLengthReached",value:function(){return Boolean(this.maxLengthReached)}},{key:"isTouchDevice",value:function(){return"ontouchstart"in window||navigator.maxTouchPoints}},{key:"pointerEventsSupported",value:function(){return window.PointerEvent}},{key:"camelCase",value:function(t){return!!t&&t.toLowerCase().trim().split(/[.\-_\s]/g).reduce((function(t,e){return e.length?t+e[0].toUpperCase()+e.slice(1):t}))}}])&&_defineProperties(t.prototype,e),n&&_defineProperties(t,n),Utilities}();function PhysicalKeyboard_defineProperties(t,e){for(var n=0;n ? {shift}",".com @ {space}"]}}}],(e=null)&&KeyboardLayout_defineProperties(t.prototype,e),n&&KeyboardLayout_defineProperties(t,n),KeyboardLayout}();function _toConsumableArray(t){return function(t){if(Array.isArray(t)){for(var e=0,n=new Array(t.length);e1?n:n[0]),e}},{key:"inputPatternIsValid",value:function(t){var e,n=this.options.inputPattern;if((e=n instanceof RegExp?n:n[this.options.inputName])&&t){var o=e.test(t);return this.options.debug&&console.log('inputPattern ("'.concat(e,'"): ').concat(o?"passed":"did not pass!")),o}return!0}},{key:"setEventListeners",value:function(){!this.isFirstKeyboardInstance&&this.allKeyboardInstances||(this.options.debug&&console.log("Caret handling started (".concat(this.keyboardDOMClass,")")),document.addEventListener("keyup",this.handleKeyUp),document.addEventListener("keydown",this.handleKeyDown),document.addEventListener("mouseup",this.handleMouseUp),document.addEventListener("touchend",this.handleTouchEnd))}},{key:"handleKeyUp",value:function(t){this.caretEventHandler(t),this.options.physicalKeyboardHighlight&&this.physicalKeyboard.handleHighlightKeyUp(t)}},{key:"handleKeyDown",value:function(t){this.options.physicalKeyboardHighlight&&this.physicalKeyboard.handleHighlightKeyDown(t)}},{key:"handleMouseUp",value:function(t){this.caretEventHandler(t)}},{key:"handleTouchEnd",value:function(t){this.caretEventHandler(t)}},{key:"caretEventHandler",value:function(t){var e;t.target.tagName&&(e=t.target.tagName.toLowerCase()),this.dispatch((function(n){n.isMouseHold&&(n.isMouseHold=!1),"textarea"!==e&&"input"!==e||n.options.disableCaretPositioning?n.options.disableCaretPositioning&&(n.caretPosition=null):(n.caretPosition=t.target.selectionStart,n.options.debug&&console.log("Caret at: ",t.target.selectionStart,t.target.tagName.toLowerCase(),"(".concat(n.keyboardDOMClass,")")))}))}},{key:"recurseButtons",value:function(t){var e=this;if(!t)return!1;Object.keys(this.buttonElements).forEach((function(n){return e.buttonElements[n].forEach(t)}))}},{key:"destroy",value:function(){this.options.debug&&console.log("Destroying simple-keyboard instance: ".concat(this.currentInstanceName)),document.removeEventListener("keyup",this.handleKeyUp),document.removeEventListener("keydown",this.handleKeyDown),document.removeEventListener("mouseup",this.handleMouseUp),document.removeEventListener("touchend",this.handleTouchEnd),document.onpointerup=null,document.ontouchend=null,document.ontouchcancel=null,document.onmouseup=null;var deleteButton=function(t){t.onpointerdown=null,t.onpointerup=null,t.onpointercancel=null,t.ontouchstart=null,t.ontouchend=null,t.ontouchcancel=null,t.onclick=null,t.onmousedown=null,t.onmouseup=null,t.remove(),t=null};this.recurseButtons(deleteButton),this.recurseButtons=null,deleteButton=null,this.keyboardDOM.onpointerdown=null,this.keyboardDOM.ontouchstart=null,this.keyboardDOM.onmousedown=null,this.clear(),window.SimpleKeyboardInstances[this.currentInstanceName]=null,delete window.SimpleKeyboardInstances[this.currentInstanceName],this.initialized=!1}},{key:"getButtonThemeClasses",value:function(t){var e=this.options.buttonTheme,n=[];return Array.isArray(e)&&e.forEach((function(e){if(e.class&&"string"===typeof e.class&&e.buttons&&"string"===typeof e.buttons){var o=e.class.split(" ");e.buttons.split(" ").includes(t)&&(n=[].concat(_toConsumableArray(n),_toConsumableArray(o)))}else console.warn('Incorrect "buttonTheme". Please check the documentation.',e)})),n}},{key:"setDOMButtonAttributes",value:function(t,e){var n=this.options.buttonAttributes;Array.isArray(n)&&n.forEach((function(n){n.attribute&&"string"===typeof n.attribute&&n.value&&"string"===typeof n.value&&n.buttons&&"string"===typeof n.buttons?n.buttons.split(" ").includes(t)&&e(n.attribute,n.value):console.warn('Incorrect "buttonAttributes". Please check the documentation.',n)}))}},{key:"onTouchDeviceDetected",value:function(){this.processAutoTouchEvents(),this.disableContextualWindow()}},{key:"disableContextualWindow",value:function(){window.oncontextmenu=function(t){if(t.target.classList.contains("hg-button"))return t.preventDefault(),t.stopPropagation(),!1}}},{key:"processAutoTouchEvents",value:function(){this.options.autoUseTouchEvents&&(this.options.useTouchEvents=!0,this.options.debug&&console.log("autoUseTouchEvents: Touch device detected, useTouchEvents enabled."))}},{key:"onInit",value:function(){this.options.debug&&console.log("".concat(this.keyboardDOMClass," Initialized")),this.setEventListeners(),"function"===typeof this.options.onInit&&this.options.onInit()}},{key:"beforeFirstRender",value:function(){this.utilities.isTouchDevice()&&this.onTouchDeviceDetected(),"function"===typeof this.options.beforeFirstRender&&this.options.beforeFirstRender(),this.isFirstKeyboardInstance&&this.utilities.pointerEventsSupported()&&!this.options.useTouchEvents&&!this.options.useMouseEvents&&this.options.debug&&console.log("Using PointerEvents as it is supported by this browser"),this.options.useTouchEvents&&this.options.debug&&console.log("useTouchEvents has been enabled. Only touch events will be used.")}},{key:"beforeRender",value:function(){"function"===typeof this.options.beforeRender&&this.options.beforeRender()}},{key:"onRender",value:function(){"function"===typeof this.options.onRender&&this.options.onRender()}},{key:"onModulesLoaded",value:function(){"function"===typeof this.options.onModulesLoaded&&this.options.onModulesLoaded()}},{key:"loadModules",value:function(){var t=this;Array.isArray(this.options.modules)&&(this.options.modules.forEach((function(e){var n=new e;if(n.constructor.name&&"Function"!==n.constructor.name){var o="module-".concat(t.utilities.camelCase(n.constructor.name));t.keyboardPluginClasses=t.keyboardPluginClasses+" ".concat(o)}n.init(t)})),this.keyboardPluginClasses=this.keyboardPluginClasses+" modules-loaded",this.render(),this.onModulesLoaded())}},{key:"getModuleProp",value:function(t,e){return!!this.modules[t]&&this.modules[t][e]}},{key:"getModulesList",value:function(){return Object.keys(this.modules)}},{key:"parseRowDOMContainers",value:function(t,e,n,o){var i=this,s=Array.from(t.children),a=0;return s.length&&n.forEach((function(n,r){var u=o[r];if(!u||!(u>n))return!1;var c=n-a,l=u-a,h=document.createElement("div");h.className+="hg-button-container";var d="".concat(i.options.layoutName,"-r").concat(e,"c").concat(r);h.setAttribute("data-skUID",d);var p=s.splice(c,l-c+1);a=l-c,p.forEach((function(t){return h.appendChild(t)})),s.splice(c,0,h),t.innerHTML="",s.forEach((function(e){return t.appendChild(e)})),i.options.debug&&console.log("rowDOMContainer",p,c,l,a+1)})),t}},{key:"render",value:function(){var t=this;this.clear(),this.initialized||this.beforeFirstRender(),this.beforeRender();var e="hg-layout-".concat(this.options.layoutName),n=this.options.layout||s.getDefaultLayout(),o=this.options.useTouchEvents||!1,i=o?"hg-touch-events":"",a=this.options.useMouseEvents||!1,r=this.options.disableRowButtonContainers;this.keyboardDOM.className+=" ".concat(this.options.theme," ").concat(e," ").concat(this.keyboardPluginClasses," ").concat(i),n[this.options.layoutName].forEach((function(e,n){var i=e.split(" "),s=document.createElement("div");s.className+="hg-row";var u=[],c=[];i.forEach((function(e,i){var l,h=!r&&e.includes("[")&&e.length>1,d=!r&&e.includes("]")&&e.length>1;h&&(u.push(i),e=e.replace(/\[/g,"")),d&&(c.push(i),e=e.replace(/\]/g,""));var p=t.utilities.getButtonClass(e),f=t.utilities.getButtonDisplayName(e,t.options.display,t.options.mergeDisplay),y=t.options.useButtonTag?"button":"div",b=document.createElement(y);b.className+="hg-button ".concat(p),(l=b.classList).add.apply(l,_toConsumableArray(t.getButtonThemeClasses(e))),t.setDOMButtonAttributes(e,(function(t,e){b.setAttribute(t,e)})),t.activeButtonClass="hg-activeButton",!t.utilities.pointerEventsSupported()||o||a?o?(b.ontouchstart=function(n){t.handleButtonClicked(e),t.handleButtonMouseDown(e,n)},b.ontouchend=function(){t.handleButtonMouseUp(e)},b.ontouchcancel=function(){t.handleButtonMouseUp(e)}):(b.onclick=function(){t.isMouseHold=!1,t.handleButtonClicked(e)},b.onmousedown=function(n){t.handleButtonMouseDown(e,n)},b.onmouseup=function(){t.handleButtonMouseUp(e)}):(b.onpointerdown=function(n){t.handleButtonClicked(e),t.handleButtonMouseDown(e,n)},b.onpointerup=function(){t.handleButtonMouseUp(e)},b.onpointercancel=function(){t.handleButtonMouseUp(e)}),b.setAttribute("data-skBtn",e);var m="".concat(t.options.layoutName,"-r").concat(n,"b").concat(i);b.setAttribute("data-skBtnUID",m);var g=document.createElement("span");g.innerHTML=f,b.appendChild(g),t.buttonElements[e]||(t.buttonElements[e]=[]),t.buttonElements[e].push(b),s.appendChild(b)})),s=t.parseRowDOMContainers(s,n,u,c),t.keyboardDOM.appendChild(s)})),this.onRender(),this.initialized||(this.initialized=!0,!this.utilities.pointerEventsSupported()||o||a?o?(document.ontouchend=function(){return t.handleButtonMouseUp()},document.ontouchcancel=function(){return t.handleButtonMouseUp()},this.keyboardDOM.ontouchstart=function(e){return t.handleKeyboardContainerMouseDown(e)}):o||(document.onmouseup=function(){return t.handleButtonMouseUp()},this.keyboardDOM.onmousedown=function(e){return t.handleKeyboardContainerMouseDown(e)}):(document.onpointerup=function(){return t.handleButtonMouseUp()},this.keyboardDOM.onpointerdown=function(e){return t.handleKeyboardContainerMouseDown(e)}),this.onInit())}}])&&Keyboard_defineProperties(t.prototype,e),n&&Keyboard_defineProperties(t,n),SimpleKeyboard}();e.default=a}])})); +!function(t,e){"object"===typeof exports&&"object"===typeof module?module.exports=e():"function"===typeof define&&define.amd?define("SimpleKeyboard",[],e):"object"===typeof exports?exports.SimpleKeyboard=e():t.SimpleKeyboard=e()}(window,(function(){return function(t){var e={};function __webpack_require__(n){if(e[n])return e[n].exports;var o=e[n]={i:n,l:!1,exports:{}};return t[n].call(o.exports,o,o.exports,__webpack_require__),o.l=!0,o.exports}return __webpack_require__.m=t,__webpack_require__.c=e,__webpack_require__.d=function(t,e,n){__webpack_require__.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},__webpack_require__.r=function(t){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},__webpack_require__.t=function(t,e){if(1&e&&(t=__webpack_require__(t)),8&e)return t;if(4&e&&"object"===typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(__webpack_require__.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)__webpack_require__.d(n,o,function(e){return t[e]}.bind(null,o));return n},__webpack_require__.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return __webpack_require__.d(e,"a",e),e},__webpack_require__.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},__webpack_require__.p="",__webpack_require__(__webpack_require__.s=4)}([function(t,e,n){"use strict";function _typeof(t){return(_typeof="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})(t)}function _defineProperties(t,e){for(var n=0;n0?s=this.removeAt(s,n,o):"{space}"===t?s=this.addStringAt(s," ",n,o):"{tab}"!==t||"boolean"===typeof i.tabCharOnTab&&!1===i.tabCharOnTab?"{enter}"!==t&&"{numpadenter}"!==t||!i.newLineOnEnter?t.includes("numpad")&&Number.isInteger(Number(t[t.length-2]))?s=this.addStringAt(s,t[t.length-2],n,o):"{numpaddivide}"===t?s=this.addStringAt(s,"/",n,o):"{numpadmultiply}"===t?s=this.addStringAt(s,"*",n,o):"{numpadsubtract}"===t?s=this.addStringAt(s,"-",n,o):"{numpadadd}"===t?s=this.addStringAt(s,"+",n,o):"{numpaddecimal}"===t?s=this.addStringAt(s,".",n,o):"{"===t||"}"===t?s=this.addStringAt(s,t,n,o):t.includes("{")||t.includes("}")||(s=this.addStringAt(s,t,n,o)):s=this.addStringAt(s,"\n",n,o):s=this.addStringAt(s,"\t",n,o),s}},{key:"updateCaretPos",value:function(t,e){var n=this.updateCaretPosAction(t,e);this.dispatch((function(t){t.caretPosition=n}))}},{key:"updateCaretPosAction",value:function(t,e){var n=this.getOptions(),o=this.getCaretPosition();return e?o>0&&(o-=t):o+=t,n.debug&&console.log("Caret at:",o,"(".concat(this.keyboardDOMClass,")")),o}},{key:"addStringAt",value:function(t,e,n,o){var i;return n||0===n?(i=[t.slice(0,n),e,t.slice(n)].join(""),this.isMaxLengthReached()||o&&this.updateCaretPos(e.length)):i=t+e,i}},{key:"removeAt",value:function(t,e,n){var o;if(0===this.getCaretPosition())return t;var i=/([\uD800-\uDBFF][\uDC00-\uDFFF])/g;return e&&e>=0?t.substring(e-2,e).match(i)?(o=t.substr(0,e-2)+t.substr(e),n&&this.updateCaretPos(2,!0)):(o=t.substr(0,e-1)+t.substr(e),n&&this.updateCaretPos(1,!0)):t.slice(-2).match(i)?(o=t.slice(0,-2),n&&this.updateCaretPos(2,!0)):(o=t.slice(0,-1),n&&this.updateCaretPos(1,!0)),o}},{key:"handleMaxLength",value:function(t,e){var n=this.getOptions(),o=n.maxLength,i=t[n.inputName],s=e.length-1>=o;if(e.length<=i.length)return!1;if(Number.isInteger(o))return n.debug&&console.log("maxLength (num) reached:",s),s?(this.maxLengthReached=!0,!0):(this.maxLengthReached=!1,!1);if("object"===_typeof(o)){var a=i.length===o[n.inputName];return n.debug&&console.log("maxLength (obj) reached:",a),a?(this.maxLengthReached=!0,!0):(this.maxLengthReached=!1,!1)}}},{key:"isMaxLengthReached",value:function(){return Boolean(this.maxLengthReached)}},{key:"isTouchDevice",value:function(){return"ontouchstart"in window||navigator.maxTouchPoints}},{key:"pointerEventsSupported",value:function(){return window.PointerEvent}},{key:"camelCase",value:function(t){return!!t&&t.toLowerCase().trim().split(/[.\-_\s]/g).reduce((function(t,e){return e.length?t+e[0].toUpperCase()+e.slice(1):t}))}}])&&_defineProperties(t.prototype,e),n&&_defineProperties(t,n),Utilities}();e.a=o},function(t,e,n){"use strict";(function(t){n(7);var o=n(2),i=n(3),s=n(0);function _toConsumableArray(t){return function(t){if(Array.isArray(t)){for(var e=0,n=new Array(t.length);e1?n:n[0]),e}},{key:"inputPatternIsValid",value:function(t){var e,n=this.options.inputPattern;if((e=n instanceof RegExp?n:n[this.options.inputName])&&t){var o=e.test(t);return this.options.debug&&console.log('inputPattern ("'.concat(e,'"): ').concat(o?"passed":"did not pass!")),o}return!0}},{key:"setEventListeners",value:function(){!this.isFirstKeyboardInstance&&this.allKeyboardInstances||(this.options.debug&&console.log("Caret handling started (".concat(this.keyboardDOMClass,")")),document.addEventListener("keyup",this.handleKeyUp),document.addEventListener("keydown",this.handleKeyDown),document.addEventListener("mouseup",this.handleMouseUp),document.addEventListener("touchend",this.handleTouchEnd))}},{key:"handleKeyUp",value:function(t){this.caretEventHandler(t),this.options.physicalKeyboardHighlight&&this.physicalKeyboard.handleHighlightKeyUp(t)}},{key:"handleKeyDown",value:function(t){this.options.physicalKeyboardHighlight&&this.physicalKeyboard.handleHighlightKeyDown(t)}},{key:"handleMouseUp",value:function(t){this.caretEventHandler(t)}},{key:"handleTouchEnd",value:function(t){this.caretEventHandler(t)}},{key:"caretEventHandler",value:function(t){var e;t.target.tagName&&(e=t.target.tagName.toLowerCase()),this.dispatch((function(n){n.isMouseHold&&(n.isMouseHold=!1),"textarea"!==e&&"input"!==e||n.options.disableCaretPositioning?n.options.disableCaretPositioning&&(n.caretPosition=null):(n.caretPosition=t.target.selectionStart,n.options.debug&&console.log("Caret at: ",t.target.selectionStart,t.target.tagName.toLowerCase(),"(".concat(n.keyboardDOMClass,")")))}))}},{key:"recurseButtons",value:function(t){var e=this;if(!t)return!1;Object.keys(this.buttonElements).forEach((function(n){return e.buttonElements[n].forEach(t)}))}},{key:"destroy",value:function(){this.options.debug&&console.log("Destroying simple-keyboard instance: ".concat(this.currentInstanceName)),document.removeEventListener("keyup",this.handleKeyUp),document.removeEventListener("keydown",this.handleKeyDown),document.removeEventListener("mouseup",this.handleMouseUp),document.removeEventListener("touchend",this.handleTouchEnd),document.onpointerup=null,document.ontouchend=null,document.ontouchcancel=null,document.onmouseup=null;var deleteButton=function(t){t.onpointerdown=null,t.onpointerup=null,t.onpointercancel=null,t.ontouchstart=null,t.ontouchend=null,t.ontouchcancel=null,t.onclick=null,t.onmousedown=null,t.onmouseup=null,t.remove(),t=null};this.recurseButtons(deleteButton),this.recurseButtons=null,deleteButton=null,this.keyboardDOM.onpointerdown=null,this.keyboardDOM.ontouchstart=null,this.keyboardDOM.onmousedown=null,this.clear(),window.SimpleKeyboardInstances[this.currentInstanceName]=null,delete window.SimpleKeyboardInstances[this.currentInstanceName],this.initialized=!1}},{key:"getButtonThemeClasses",value:function(t){var e=this.options.buttonTheme,n=[];return Array.isArray(e)&&e.forEach((function(e){if(e.class&&"string"===typeof e.class&&e.buttons&&"string"===typeof e.buttons){var o=e.class.split(" ");e.buttons.split(" ").includes(t)&&(n=[].concat(_toConsumableArray(n),_toConsumableArray(o)))}else console.warn('Incorrect "buttonTheme". Please check the documentation.',e)})),n}},{key:"setDOMButtonAttributes",value:function(t,e){var n=this.options.buttonAttributes;Array.isArray(n)&&n.forEach((function(n){n.attribute&&"string"===typeof n.attribute&&n.value&&"string"===typeof n.value&&n.buttons&&"string"===typeof n.buttons?n.buttons.split(" ").includes(t)&&e(n.attribute,n.value):console.warn('Incorrect "buttonAttributes". Please check the documentation.',n)}))}},{key:"onTouchDeviceDetected",value:function(){this.processAutoTouchEvents(),this.disableContextualWindow()}},{key:"disableContextualWindow",value:function(){window.oncontextmenu=function(t){if(t.target.classList.contains("hg-button"))return t.preventDefault(),t.stopPropagation(),!1}}},{key:"processAutoTouchEvents",value:function(){this.options.autoUseTouchEvents&&(this.options.useTouchEvents=!0,this.options.debug&&console.log("autoUseTouchEvents: Touch device detected, useTouchEvents enabled."))}},{key:"onInit",value:function(){this.options.debug&&console.log("".concat(this.keyboardDOMClass," Initialized")),this.setEventListeners(),"function"===typeof this.options.onInit&&this.options.onInit()}},{key:"beforeFirstRender",value:function(){this.utilities.isTouchDevice()&&this.onTouchDeviceDetected(),"function"===typeof this.options.beforeFirstRender&&this.options.beforeFirstRender(),this.isFirstKeyboardInstance&&this.utilities.pointerEventsSupported()&&!this.options.useTouchEvents&&!this.options.useMouseEvents&&this.options.debug&&console.log("Using PointerEvents as it is supported by this browser"),this.options.useTouchEvents&&this.options.debug&&console.log("useTouchEvents has been enabled. Only touch events will be used.")}},{key:"beforeRender",value:function(){"function"===typeof this.options.beforeRender&&this.options.beforeRender()}},{key:"onRender",value:function(){"function"===typeof this.options.onRender&&this.options.onRender()}},{key:"onModulesLoaded",value:function(){"function"===typeof this.options.onModulesLoaded&&this.options.onModulesLoaded()}},{key:"loadModules",value:function(){var e=this;Array.isArray(this.options.modules)&&(this.options.modules.forEach((function(n){var o=new n;if(t.constructor.name&&"Function"!==o.constructor.name){var i="module-".concat(e.utilities.camelCase(o.constructor.name));e.keyboardPluginClasses=e.keyboardPluginClasses+" ".concat(i)}o.init(e)})),this.keyboardPluginClasses=this.keyboardPluginClasses+" modules-loaded",this.render(),this.onModulesLoaded())}},{key:"getModuleProp",value:function(t,e){return!!this.modules[t]&&this.modules[t][e]}},{key:"getModulesList",value:function(){return Object.keys(this.modules)}},{key:"parseRowDOMContainers",value:function(t,e,n,o){var i=this,s=Array.from(t.children),a=0;return s.length&&n.forEach((function(n,r){var u=o[r];if(!u||!(u>n))return!1;var c=n-a,l=u-a,h=document.createElement("div");h.className+="hg-button-container";var d="".concat(i.options.layoutName,"-r").concat(e,"c").concat(r);h.setAttribute("data-skUID",d);var p=s.splice(c,l-c+1);a=l-c,p.forEach((function(t){return h.appendChild(t)})),s.splice(c,0,h),t.innerHTML="",s.forEach((function(e){return t.appendChild(e)})),i.options.debug&&console.log("rowDOMContainer",p,c,l,a+1)})),t}},{key:"render",value:function(){var t=this;this.clear(),this.initialized||this.beforeFirstRender(),this.beforeRender();var e="hg-layout-".concat(this.options.layoutName),n=this.options.layout||Object(o.a)(),i=this.options.useTouchEvents||!1,s=i?"hg-touch-events":"",a=this.options.useMouseEvents||!1,r=this.options.disableRowButtonContainers;this.keyboardDOM.className=this.getKeyboardClassString(this.options.theme,e,this.keyboardPluginClasses,s),n[this.options.layoutName].forEach((function(e,n){var o=e.split(" "),s=document.createElement("div");s.className+="hg-row";var u=[],c=[];o.forEach((function(e,o){var l,h=!r&&e.includes("[")&&e.length>1,d=!r&&e.includes("]")&&e.length>1;h&&(u.push(o),e=e.replace(/\[/g,"")),d&&(c.push(o),e=e.replace(/\]/g,""));var p=t.utilities.getButtonClass(e),f=t.utilities.getButtonDisplayName(e,t.options.display,t.options.mergeDisplay),y=t.options.useButtonTag?"button":"div",b=document.createElement(y);b.className+="hg-button ".concat(p),(l=b.classList).add.apply(l,_toConsumableArray(t.getButtonThemeClasses(e))),t.setDOMButtonAttributes(e,(function(t,e){b.setAttribute(t,e)})),t.activeButtonClass="hg-activeButton",!t.utilities.pointerEventsSupported()||i||a?i?(b.ontouchstart=function(n){t.handleButtonClicked(e),t.handleButtonMouseDown(e,n)},b.ontouchend=function(){t.handleButtonMouseUp(e)},b.ontouchcancel=function(){t.handleButtonMouseUp(e)}):(b.onclick=function(){t.isMouseHold=!1,t.handleButtonClicked(e)},b.onmousedown=function(n){t.handleButtonMouseDown(e,n)},b.onmouseup=function(){t.handleButtonMouseUp(e)}):(b.onpointerdown=function(n){t.handleButtonClicked(e),t.handleButtonMouseDown(e,n)},b.onpointerup=function(){t.handleButtonMouseUp(e)},b.onpointercancel=function(){t.handleButtonMouseUp(e)}),b.setAttribute("data-skBtn",e);var m="".concat(t.options.layoutName,"-r").concat(n,"b").concat(o);b.setAttribute("data-skBtnUID",m);var v=document.createElement("span");v.innerHTML=f,b.appendChild(v),t.buttonElements[e]||(t.buttonElements[e]=[]),t.buttonElements[e].push(b),s.appendChild(b)})),s=t.parseRowDOMContainers(s,n,u,c),t.keyboardDOM.appendChild(s)})),this.onRender(),this.initialized||(this.initialized=!0,!this.utilities.pointerEventsSupported()||i||a?i?(document.ontouchend=function(){return t.handleButtonMouseUp()},document.ontouchcancel=function(){return t.handleButtonMouseUp()},this.keyboardDOM.ontouchstart=function(e){return t.handleKeyboardContainerMouseDown(e)}):i||(document.onmouseup=function(){return t.handleButtonMouseUp()},this.keyboardDOM.onmousedown=function(e){return t.handleKeyboardContainerMouseDown(e)}):(document.onpointerup=function(){return t.handleButtonMouseUp()},this.keyboardDOM.onpointerdown=function(e){return t.handleKeyboardContainerMouseDown(e)}),this.onInit())}}])&&_defineProperties(e.prototype,n),a&&_defineProperties(e,a),SimpleKeyboard}();e.a=a}).call(this,n(6)(t))},function(t,e,n){"use strict";n.d(e,"a",(function(){return getDefaultLayout}));var getDefaultLayout=function(){return{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}"]}}},function(t,e,n){"use strict";var o=n(0);function _defineProperties(t,e){for(var n=0;n 0\n ) {\n output = this.removeAt(output, caretPos, moveCaret);\n } else if (button === \"{space}\")\n output = this.addStringAt(output, \" \", caretPos, moveCaret);\n else if (\n button === \"{tab}\" &&\n !(\n typeof options.tabCharOnTab === \"boolean\" &&\n options.tabCharOnTab === false\n )\n ) {\n output = this.addStringAt(output, \"\\t\", caretPos, moveCaret);\n } else if (\n (button === \"{enter}\" || button === \"{numpadenter}\") &&\n options.newLineOnEnter\n )\n output = this.addStringAt(output, \"\\n\", caretPos, moveCaret);\n else if (\n button.includes(\"numpad\") &&\n Number.isInteger(Number(button[button.length - 2]))\n ) {\n output = this.addStringAt(\n output,\n button[button.length - 2],\n caretPos,\n moveCaret\n );\n } else if (button === \"{numpaddivide}\")\n output = this.addStringAt(output, \"/\", caretPos, moveCaret);\n else if (button === \"{numpadmultiply}\")\n output = this.addStringAt(output, \"*\", caretPos, moveCaret);\n else if (button === \"{numpadsubtract}\")\n output = this.addStringAt(output, \"-\", caretPos, moveCaret);\n else if (button === \"{numpadadd}\")\n output = this.addStringAt(output, \"+\", caretPos, moveCaret);\n else if (button === \"{numpaddecimal}\")\n output = this.addStringAt(output, \".\", caretPos, moveCaret);\n else if (button === \"{\" || button === \"}\")\n output = this.addStringAt(output, button, caretPos, moveCaret);\n else if (!button.includes(\"{\") && !button.includes(\"}\"))\n output = this.addStringAt(output, button, caretPos, moveCaret);\n\n return output;\n }\n\n /**\n * Moves the cursor position by a given amount\n *\n * @param {number} length Represents by how many characters the input should be moved\n * @param {boolean} minus Whether the cursor should be moved to the left or not.\n */\n updateCaretPos(length, minus) {\n let newCaretPos = this.updateCaretPosAction(length, minus);\n\n this.dispatch(instance => {\n instance.caretPosition = newCaretPos;\n });\n }\n\n /**\n * Action method of updateCaretPos\n *\n * @param {number} length Represents by how many characters the input should be moved\n * @param {boolean} minus Whether the cursor should be moved to the left or not.\n */\n updateCaretPosAction(length, minus) {\n let options = this.getOptions();\n let caretPosition = this.getCaretPosition();\n\n if (minus) {\n if (caretPosition > 0) caretPosition = caretPosition - length;\n } else {\n caretPosition = caretPosition + length;\n }\n\n if (options.debug) {\n console.log(\"Caret at:\", caretPosition, `(${this.keyboardDOMClass})`);\n }\n\n return caretPosition;\n }\n\n /**\n * Adds a string to the input at a given position\n *\n * @param {string} source The source input\n * @param {string} string The string to add\n * @param {number} position The (cursor) position where the string should be added\n * @param {boolean} moveCaret Whether to update simple-keyboard's cursor\n */\n addStringAt(source, string, position, moveCaret) {\n let output;\n\n if (!position && position !== 0) {\n output = source + string;\n } else {\n output = [source.slice(0, position), string, source.slice(position)].join(\n \"\"\n );\n\n /**\n * Avoid caret position change when maxLength is set\n */\n if (!this.isMaxLengthReached()) {\n if (moveCaret) this.updateCaretPos(string.length);\n }\n }\n\n return output;\n }\n\n /**\n * Removes an amount of characters at a given position\n *\n * @param {string} source The source input\n * @param {number} position The (cursor) position from where the characters should be removed\n * @param {boolean} moveCaret Whether to update simple-keyboard's cursor\n */\n removeAt(source, position, moveCaret) {\n let caretPosition = this.getCaretPosition();\n\n if (caretPosition === 0) {\n return source;\n }\n\n let output;\n let prevTwoChars;\n let emojiMatched;\n let emojiMatchedReg = /([\\uD800-\\uDBFF][\\uDC00-\\uDFFF])/g;\n\n /**\n * Emojis are made out of two characters, so we must take a custom approach to trim them.\n * For more info: https://mathiasbynens.be/notes/javascript-unicode\n */\n if (position && position >= 0) {\n prevTwoChars = source.substring(position - 2, position);\n emojiMatched = prevTwoChars.match(emojiMatchedReg);\n\n if (emojiMatched) {\n output = source.substr(0, position - 2) + source.substr(position);\n if (moveCaret) this.updateCaretPos(2, true);\n } else {\n output = source.substr(0, position - 1) + source.substr(position);\n if (moveCaret) this.updateCaretPos(1, true);\n }\n } else {\n prevTwoChars = source.slice(-2);\n emojiMatched = prevTwoChars.match(emojiMatchedReg);\n\n if (emojiMatched) {\n output = source.slice(0, -2);\n if (moveCaret) this.updateCaretPos(2, true);\n } else {\n output = source.slice(0, -1);\n if (moveCaret) this.updateCaretPos(1, true);\n }\n }\n\n return output;\n }\n /**\n * Determines whether the maxLength has been reached. This function is called when the maxLength option it set.\n *\n * @param {object} inputObj\n * @param {string} updatedInput\n */\n handleMaxLength(inputObj, updatedInput) {\n let options = this.getOptions();\n let maxLength = options.maxLength;\n let currentInput = inputObj[options.inputName];\n let condition = updatedInput.length - 1 >= maxLength;\n\n if (\n /**\n * If pressing this button won't add more characters\n * We exit out of this limiter function\n */\n updatedInput.length <= currentInput.length\n ) {\n return false;\n }\n\n if (Number.isInteger(maxLength)) {\n if (options.debug) {\n console.log(\"maxLength (num) reached:\", condition);\n }\n\n if (condition) {\n /**\n * @type {boolean} Boolean value that shows whether maxLength has been reached\n */\n this.maxLengthReached = true;\n return true;\n } else {\n this.maxLengthReached = false;\n return false;\n }\n }\n\n if (typeof maxLength === \"object\") {\n let condition = currentInput.length === maxLength[options.inputName];\n\n if (options.debug) {\n console.log(\"maxLength (obj) reached:\", condition);\n }\n\n if (condition) {\n this.maxLengthReached = true;\n return true;\n } else {\n this.maxLengthReached = false;\n return false;\n }\n }\n }\n\n /**\n * Gets the current value of maxLengthReached\n */\n isMaxLengthReached() {\n return Boolean(this.maxLengthReached);\n }\n\n /**\n * Determines whether a touch device is being used\n */\n isTouchDevice() {\n return \"ontouchstart\" in window || navigator.maxTouchPoints;\n }\n\n /**\n * Determines whether pointer events are supported\n */\n pointerEventsSupported() {\n return window.PointerEvent;\n }\n\n /**\n * Bind all methods in a given class\n */\n\n static bindMethods(myClass, instance) {\n // eslint-disable-next-line no-unused-vars\n for (let myMethod of Object.getOwnPropertyNames(myClass.prototype)) {\n let excludeMethod =\n myMethod === \"constructor\" || myMethod === \"bindMethods\";\n if (!excludeMethod) {\n instance[myMethod] = instance[myMethod].bind(instance);\n }\n }\n }\n\n /**\n * Transforms an arbitrary string to camelCase\n *\n * @param {string} string The string to transform.\n */\n camelCase(string) {\n if (!string) return false;\n\n return string\n .toLowerCase()\n .trim()\n .split(/[.\\-_\\s]/g)\n .reduce((string, word) =>\n word.length ? string + word[0].toUpperCase() + word.slice(1) : string\n );\n }\n}\n\nexport default Utilities;\n","import Utilities from \"../services/Utilities\";\n\n/**\n * Physical Keyboard Service\n */\nclass PhysicalKeyboard {\n /**\n * Creates an instance of the PhysicalKeyboard service\n */\n constructor({ dispatch, getOptions }) {\n /**\n * @type {object} A simple-keyboard instance\n */\n this.dispatch = dispatch;\n this.getOptions = getOptions;\n\n /**\n * Bindings\n */\n Utilities.bindMethods(PhysicalKeyboard, this);\n }\n\n handleHighlightKeyDown(event) {\n let options = this.getOptions();\n let buttonPressed = this.getSimpleKeyboardLayoutKey(event);\n\n this.dispatch(instance => {\n let buttonDOM =\n instance.getButtonElement(buttonPressed) ||\n instance.getButtonElement(`{${buttonPressed}}`);\n\n if (buttonDOM) {\n buttonDOM.style.backgroundColor =\n options.physicalKeyboardHighlightBgColor || \"#9ab4d0\";\n buttonDOM.style.color =\n options.physicalKeyboardHighlightTextColor || \"white\";\n }\n });\n }\n\n handleHighlightKeyUp(event) {\n let buttonPressed = this.getSimpleKeyboardLayoutKey(event);\n\n this.dispatch(instance => {\n let buttonDOM =\n instance.getButtonElement(buttonPressed) ||\n instance.getButtonElement(`{${buttonPressed}}`);\n\n if (buttonDOM && buttonDOM.removeAttribute) {\n buttonDOM.removeAttribute(\"style\");\n }\n });\n }\n\n /**\n * Transforms a KeyboardEvent's \"key.code\" string into a simple-keyboard layout format\n * @param {object} event The KeyboardEvent\n */\n getSimpleKeyboardLayoutKey(event) {\n let output;\n\n if (\n event.code.includes(\"Numpad\") ||\n event.code.includes(\"Shift\") ||\n event.code.includes(\"Space\") ||\n event.code.includes(\"Backspace\") ||\n event.code.includes(\"Control\") ||\n event.code.includes(\"Alt\") ||\n event.code.includes(\"Meta\")\n ) {\n output = event.code;\n } else {\n output = event.key;\n }\n\n /**\n * If button is not uppercase, casting to lowercase\n */\n if (\n output !== output.toUpperCase() ||\n (event.code[0] === \"F\" &&\n Number.isInteger(Number(event.code[1])) &&\n event.code.length <= 3)\n ) {\n output = output.toLowerCase();\n }\n\n return output;\n }\n}\n\nexport default PhysicalKeyboard;\n","/**\n * Keyboard Layout Service\n */\nclass KeyboardLayout {\n /**\n * Get default simple-keyboard layout\n * @return {object} The default layout (US-QWERTY)\n */\n static getDefaultLayout() {\n return {\n default: [\n \"` 1 2 3 4 5 6 7 8 9 0 - = {bksp}\",\n \"{tab} q w e r t y u i o p [ ] \\\\\",\n \"{lock} a s d f g h j k l ; ' {enter}\",\n \"{shift} z x c v b n m , . / {shift}\",\n \".com @ {space}\"\n ],\n shift: [\n \"~ ! @ # $ % ^ & * ( ) _ + {bksp}\",\n \"{tab} Q W E R T Y U I O P { } |\",\n '{lock} A S D F G H J K L : \" {enter}',\n \"{shift} Z X C V B N M < > ? {shift}\",\n \".com @ {space}\"\n ]\n };\n }\n}\n\nexport default KeyboardLayout;\n","import \"./Keyboard.css\";\n\n// Services\nimport PhysicalKeyboard from \"../services/PhysicalKeyboard\";\nimport KeyboardLayout from \"../services/KeyboardLayout\";\nimport Utilities from \"../services/Utilities\";\n\n/**\n * Root class for simple-keyboard\n * This class:\n * - Parses the options\n * - Renders the rows and buttons\n * - Handles button functionality\n */\nclass SimpleKeyboard {\n /**\n * Creates an instance of SimpleKeyboard\n * @param {Array} params If first parameter is a string, it is considered the container class. The second parameter is then considered the options object. If first parameter is an object, it is considered the options object.\n */\n constructor(...params) {\n let keyboardDOMQuery =\n typeof params[0] === \"string\" ? params[0] : \".simple-keyboard\";\n let options = typeof params[0] === \"object\" ? params[0] : params[1];\n\n if (!options) options = {};\n\n /**\n * Initializing Utilities\n */\n this.utilities = new Utilities({\n getOptions: this.getOptions,\n getCaretPosition: this.getCaretPosition,\n dispatch: this.dispatch\n });\n\n /**\n * Caret position\n */\n this.caretPosition = null;\n\n /**\n * Processing options\n */\n this.keyboardDOM = document.querySelector(keyboardDOMQuery);\n\n /**\n * @type {object}\n * @property {object} layout Modify the keyboard layout.\n * @property {string} layoutName Specifies which layout should be used.\n * @property {object} display Replaces variable buttons (such as {bksp}) with a human-friendly name (e.g.: “backspace”).\n * @property {boolean} mergeDisplay By default, when you set the display property, you replace the default one. This setting merges them instead.\n * @property {string} theme A prop to add your own css classes to the keyboard wrapper. You can add multiple classes separated by a space.\n * @property {Array} buttonTheme A prop to add your own css classes to one or several buttons.\n * @property {Array} buttonAttributes A prop to add your own attributes to one or several buttons.\n * @property {boolean} debug Runs a console.log every time a key is pressed. Displays the buttons pressed and the current input.\n * @property {boolean} newLineOnEnter Specifies whether clicking the “ENTER” button will input a newline (\\n) or not.\n * @property {boolean} tabCharOnTab Specifies whether clicking the “TAB” button will input a tab character (\\t) or not.\n * @property {string} inputName Allows you to use a single simple-keyboard instance for several inputs.\n * @property {number} maxLength Restrains all of simple-keyboard inputs to a certain length. This should be used in addition to the input element’s maxlengthattribute.\n * @property {object} maxLength Restrains simple-keyboard’s individual inputs to a certain length. This should be used in addition to the input element’s maxlengthattribute.\n * @property {boolean} syncInstanceInputs When set to true, this option synchronizes the internal input of every simple-keyboard instance.\n * @property {boolean} physicalKeyboardHighlight Enable highlighting of keys pressed on physical keyboard.\n * @property {boolean} preventMouseDownDefault Calling preventDefault for the mousedown events keeps the focus on the input.\n * @property {boolean} stopMouseDownPropagation Stops pointer down events on simple-keyboard buttons from bubbling to parent elements.\n * @property {string} physicalKeyboardHighlightTextColor Define the text color that the physical keyboard highlighted key should have.\n * @property {string} physicalKeyboardHighlightBgColor Define the background color that the physical keyboard highlighted key should have.\n * @property {function(button: string):string} onKeyPress Executes the callback function on key press. Returns button layout name (i.e.: “{shift}”).\n * @property {function(input: string):string} onChange Executes the callback function on input change. Returns the current input’s string.\n * @property {function} onRender Executes the callback function every time simple-keyboard is rendered (e.g: when you change layouts).\n * @property {function} onInit Executes the callback function once simple-keyboard is rendered for the first time (on initialization).\n * @property {function(inputs: object):object} onChangeAll Executes the callback function on input change. Returns the input object with all defined inputs.\n * @property {boolean} useButtonTag Render buttons as a button element instead of a div element.\n * @property {boolean} disableCaretPositioning A prop to ensure characters are always be added/removed at the end of the string.\n * @property {object} inputPattern Restrains input(s) change to the defined regular expression pattern.\n * @property {boolean} useTouchEvents Instructs simple-keyboard to use touch events instead of click events.\n * @property {boolean} autoUseTouchEvents Enable useTouchEvents automatically when touch device is detected.\n * @property {boolean} useMouseEvents Opt out of PointerEvents handling, falling back to the prior mouse event logic.\n * @property {function} destroy Clears keyboard listeners and DOM elements.\n * @property {boolean} disableButtonHold Disable button hold action.\n * @property {function} onKeyReleased Executes the callback function on key release.\n */\n this.options = options;\n this.options.layoutName = this.options.layoutName || \"default\";\n this.options.theme = this.options.theme || \"hg-theme-default\";\n this.options.inputName = this.options.inputName || \"default\";\n this.options.preventMouseDownDefault =\n this.options.preventMouseDownDefault || false;\n\n /**\n * @type {object} Classes identifying loaded plugins\n */\n this.keyboardPluginClasses = \"\";\n\n /**\n * Bindings\n */\n Utilities.bindMethods(SimpleKeyboard, this);\n\n /**\n * simple-keyboard uses a non-persistent internal input to keep track of the entered string (the variable `keyboard.input`).\n * This removes any dependency to input DOM elements. You can type and directly display the value in a div element, for example.\n * @example\n * // To get entered input\n * let input = keyboard.getInput();\n *\n * // To clear entered input.\n * keyboard.clearInput();\n *\n * @type {object}\n * @property {object} default Default SimpleKeyboard internal input.\n * @property {object} myInputName Example input that can be set through `options.inputName:\"myInputName\"`.\n */\n this.input = {};\n this.input[this.options.inputName] = \"\";\n\n /**\n * @type {string} DOM class of the keyboard wrapper, normally \"simple-keyboard\" by default.\n */\n this.keyboardDOMClass = keyboardDOMQuery.split(\".\").join(\"\");\n\n /**\n * @type {object} Contains the DOM elements of every rendered button, the key being the button's layout name (e.g.: \"{enter}\").\n */\n this.buttonElements = {};\n\n /**\n * Simple-keyboard Instances\n * This enables multiple simple-keyboard support with easier management\n */\n if (!window[\"SimpleKeyboardInstances\"])\n window[\"SimpleKeyboardInstances\"] = {};\n\n this.currentInstanceName = this.utilities.camelCase(this.keyboardDOMClass);\n window[\"SimpleKeyboardInstances\"][this.currentInstanceName] = this;\n\n /**\n * Instance vars\n */\n this.allKeyboardInstances = window[\"SimpleKeyboardInstances\"];\n this.keyboardInstanceNames = Object.keys(window[\"SimpleKeyboardInstances\"]);\n this.isFirstKeyboardInstance =\n this.keyboardInstanceNames[0] === this.currentInstanceName;\n\n /**\n * Physical Keyboard support\n */\n this.physicalKeyboard = new PhysicalKeyboard({\n dispatch: this.dispatch,\n getOptions: this.getOptions\n });\n\n /**\n * Rendering keyboard\n */\n if (this.keyboardDOM) this.render();\n else {\n console.warn(`\"${keyboardDOMQuery}\" was not found in the DOM.`);\n throw new Error(\"KEYBOARD_DOM_ERROR\");\n }\n\n /**\n * Modules\n */\n this.modules = {};\n this.loadModules();\n }\n\n /**\n * Getters\n */\n getOptions = () => this.options;\n getCaretPosition = () => this.caretPosition;\n\n /**\n * Handles clicks made to keyboard buttons\n * @param {string} button The button's layout name.\n */\n handleButtonClicked(button) {\n let debug = this.options.debug;\n\n /**\n * Ignoring placeholder buttons\n */\n if (button === \"{//}\") return false;\n\n /**\n * Calling onKeyPress\n */\n if (typeof this.options.onKeyPress === \"function\")\n this.options.onKeyPress(button);\n\n if (!this.input[this.options.inputName])\n this.input[this.options.inputName] = \"\";\n\n let updatedInput = this.utilities.getUpdatedInput(\n button,\n this.input[this.options.inputName],\n this.caretPosition\n );\n\n if (\n // If input will change as a result of this button press\n this.input[this.options.inputName] !== updatedInput &&\n // This pertains to the \"inputPattern\" option:\n // If inputPattern isn't set\n (!this.options.inputPattern ||\n // Or, if it is set and if the pattern is valid - we proceed.\n (this.options.inputPattern && this.inputPatternIsValid(updatedInput)))\n ) {\n /**\n * If maxLength and handleMaxLength yield true, halting\n */\n if (\n this.options.maxLength &&\n this.utilities.handleMaxLength(this.input, updatedInput)\n ) {\n return false;\n }\n\n this.input[this.options.inputName] = this.utilities.getUpdatedInput(\n button,\n this.input[this.options.inputName],\n this.caretPosition,\n true\n );\n\n if (debug) console.log(\"Input changed:\", this.input);\n\n /**\n * Enforce syncInstanceInputs, if set\n */\n if (this.options.syncInstanceInputs) this.syncInstanceInputs();\n\n /**\n * Calling onChange\n */\n if (typeof this.options.onChange === \"function\")\n this.options.onChange(this.input[this.options.inputName]);\n\n /**\n * Calling onChangeAll\n */\n if (typeof this.options.onChangeAll === \"function\")\n this.options.onChangeAll(this.input);\n }\n\n if (debug) {\n console.log(\"Key pressed:\", button);\n }\n }\n\n /**\n * Handles button mousedown\n */\n /* istanbul ignore next */\n handleButtonMouseDown(button, e) {\n /**\n * Handle event options\n */\n if (this.options.preventMouseDownDefault) e.preventDefault();\n if (this.options.stopMouseDownPropagation) e.stopPropagation();\n\n /**\n * Add active class\n */\n if (e) e.target.classList.add(this.activeButtonClass);\n\n /**\n * @type {boolean} Whether the mouse is being held onKeyPress\n */\n this.isMouseHold = true;\n\n if (this.holdInteractionTimeout) clearTimeout(this.holdInteractionTimeout);\n\n if (this.holdTimeout) clearTimeout(this.holdTimeout);\n\n /**\n * @type {object} Time to wait until a key hold is detected\n */\n if (!this.options.disableButtonHold) {\n this.holdTimeout = setTimeout(() => {\n if (\n this.isMouseHold &&\n ((!button.includes(\"{\") && !button.includes(\"}\")) ||\n button === \"{delete}\" ||\n button === \"{backspace}\" ||\n button === \"{bksp}\" ||\n button === \"{space}\" ||\n button === \"{tab}\")\n ) {\n if (this.options.debug) console.log(\"Button held:\", button);\n\n this.handleButtonHold(button, e);\n }\n clearTimeout(this.holdTimeout);\n }, 500);\n }\n }\n\n /**\n * Handles button mouseup\n */\n handleButtonMouseUp(button) {\n /**\n * Remove active class\n */\n this.recurseButtons(buttonElement => {\n buttonElement.classList.remove(this.activeButtonClass);\n });\n\n this.isMouseHold = false;\n if (this.holdInteractionTimeout) clearTimeout(this.holdInteractionTimeout);\n\n /**\n * Calling onKeyReleased\n */\n if (button && typeof this.options.onKeyReleased === \"function\")\n this.options.onKeyReleased(button);\n }\n\n /**\n * Handles container mousedown\n */\n handleKeyboardContainerMouseDown(e) {\n /**\n * Handle event options\n */\n if (this.options.preventMouseDownDefault) e.preventDefault();\n }\n\n /**\n * Handles button hold\n */\n /* istanbul ignore next */\n handleButtonHold(button) {\n if (this.holdInteractionTimeout) clearTimeout(this.holdInteractionTimeout);\n\n /**\n * @type {object} Timeout dictating the speed of key hold iterations\n */\n this.holdInteractionTimeout = setTimeout(() => {\n if (this.isMouseHold) {\n this.handleButtonClicked(button);\n this.handleButtonHold(button);\n } else {\n clearTimeout(this.holdInteractionTimeout);\n }\n }, 100);\n }\n\n /**\n * Send a command to all simple-keyboard instances (if you have several instances).\n */\n syncInstanceInputs() {\n this.dispatch(instance => {\n instance.replaceInput(this.input);\n instance.caretPosition = this.caretPosition;\n });\n }\n\n /**\n * Clear the keyboard’s input.\n * @param {string} [inputName] optional - the internal input to select\n */\n clearInput(inputName) {\n inputName = inputName || this.options.inputName;\n this.input[inputName] = \"\";\n\n /**\n * Reset caretPosition\n */\n this.caretPosition = 0;\n\n /**\n * Enforce syncInstanceInputs, if set\n */\n if (this.options.syncInstanceInputs) this.syncInstanceInputs();\n }\n\n /**\n * Get the keyboard’s input (You can also get it from the onChange prop).\n * @param {string} [inputName] optional - the internal input to select\n */\n getInput(inputName) {\n inputName = inputName || this.options.inputName;\n\n /**\n * Enforce syncInstanceInputs, if set\n */\n if (this.options.syncInstanceInputs) this.syncInstanceInputs();\n\n return this.input[inputName];\n }\n\n /**\n * Set the keyboard’s input.\n * @param {string} input the input value\n * @param {string} inputName optional - the internal input to select\n */\n setInput(input, inputName) {\n inputName = inputName || this.options.inputName;\n this.input[inputName] = input;\n\n /**\n * Enforce syncInstanceInputs, if set\n */\n if (this.options.syncInstanceInputs) this.syncInstanceInputs();\n }\n\n /**\n * Replace the input object (`keyboard.input`)\n * @param {object} inputObj The input object\n */\n replaceInput(inputObj) {\n this.input = inputObj;\n }\n\n /**\n * Set new option or modify existing ones after initialization.\n * @param {object} options The options to set\n */\n setOptions(options) {\n options = options || {};\n this.options = Object.assign(this.options, options);\n\n /**\n * Some option changes require adjustments before re-render\n */\n this.onSetOptions(options);\n\n /**\n * Rendering\n */\n this.render();\n }\n\n /**\n * Executing actions depending on changed options\n * @param {object} options The options to set\n */\n onSetOptions(options) {\n if (options.inputName) {\n /**\n * inputName changed. This requires a caretPosition reset\n */\n if (this.options.debug) {\n console.log(\"inputName changed. caretPosition reset.\");\n }\n\n this.caretPosition = null;\n }\n }\n\n /**\n * Remove all keyboard rows and reset keyboard values.\n * Used internally between re-renders.\n */\n clear() {\n this.keyboardDOM.innerHTML = \"\";\n this.keyboardDOM.className = this.keyboardDOMClass;\n this.buttonElements = {};\n }\n\n /**\n * Send a command to all simple-keyboard instances at once (if you have multiple instances).\n * @param {function(instance: object, key: string)} callback Function to run on every instance\n */\n dispatch(callback) {\n if (!window[\"SimpleKeyboardInstances\"]) {\n console.warn(\n `SimpleKeyboardInstances is not defined. Dispatch cannot be called.`\n );\n throw new Error(\"INSTANCES_VAR_ERROR\");\n }\n\n return Object.keys(window[\"SimpleKeyboardInstances\"]).forEach(key => {\n callback(window[\"SimpleKeyboardInstances\"][key], key);\n });\n }\n\n /**\n * Adds/Modifies an entry to the `buttonTheme`. Basically a way to add a class to a button.\n * @param {string} buttons List of buttons to select (separated by a space).\n * @param {string} className Classes to give to the selected buttons (separated by space).\n */\n addButtonTheme(buttons, className) {\n if (!className || !buttons) return false;\n\n buttons.split(\" \").forEach(button => {\n className.split(\" \").forEach(classNameItem => {\n if (!this.options.buttonTheme) this.options.buttonTheme = [];\n\n let classNameFound = false;\n\n /**\n * If class is already defined, we add button to class definition\n */\n this.options.buttonTheme.map(buttonTheme => {\n if (buttonTheme.class.split(\" \").includes(classNameItem)) {\n classNameFound = true;\n\n let buttonThemeArray = buttonTheme.buttons.split(\" \");\n if (!buttonThemeArray.includes(button)) {\n classNameFound = true;\n buttonThemeArray.push(button);\n buttonTheme.buttons = buttonThemeArray.join(\" \");\n }\n }\n return buttonTheme;\n });\n\n /**\n * If class is not defined, we create a new entry\n */\n if (!classNameFound) {\n this.options.buttonTheme.push({\n class: classNameItem,\n buttons: buttons\n });\n }\n });\n });\n\n this.render();\n }\n\n /**\n * Removes/Amends an entry to the `buttonTheme`. Basically a way to remove a class previously added to a button through buttonTheme or addButtonTheme.\n * @param {string} buttons List of buttons to select (separated by a space).\n * @param {string} className Classes to give to the selected buttons (separated by space).\n */\n removeButtonTheme(buttons, className) {\n /**\n * When called with empty parameters, remove all button themes\n */\n if (!buttons && !className) {\n this.options.buttonTheme = [];\n this.render();\n return false;\n }\n\n /**\n * If buttons are passed and buttonTheme has items\n */\n if (\n buttons &&\n Array.isArray(this.options.buttonTheme) &&\n this.options.buttonTheme.length\n ) {\n let buttonArray = buttons.split(\" \");\n buttonArray.forEach((button, key) => {\n this.options.buttonTheme.map((buttonTheme, index) => {\n /**\n * If className is set, we affect the buttons only for that class\n * Otherwise, we afect all classes\n */\n if (\n (className && className.includes(buttonTheme.class)) ||\n !className\n ) {\n let filteredButtonArray = buttonTheme.buttons\n .split(\" \")\n .filter(item => item !== button);\n\n /**\n * If buttons left, return them, otherwise, remove button Theme\n */\n if (filteredButtonArray.length) {\n buttonTheme.buttons = filteredButtonArray.join(\" \");\n } else {\n this.options.buttonTheme.splice(index, 1);\n buttonTheme = null;\n }\n }\n\n return buttonTheme;\n });\n });\n\n this.render();\n }\n }\n\n /**\n * Get the DOM Element of a button. If there are several buttons with the same name, an array of the DOM Elements is returned.\n * @param {string} button The button layout name to select\n */\n getButtonElement(button) {\n let output;\n\n let buttonArr = this.buttonElements[button];\n if (buttonArr) {\n if (buttonArr.length > 1) {\n output = buttonArr;\n } else {\n output = buttonArr[0];\n }\n }\n\n return output;\n }\n\n /**\n * This handles the \"inputPattern\" option\n * by checking if the provided inputPattern passes\n */\n inputPatternIsValid(inputVal) {\n let inputPatternRaw = this.options.inputPattern;\n let inputPattern;\n\n /**\n * Check if input pattern is global or targeted to individual inputs\n */\n if (inputPatternRaw instanceof RegExp) {\n inputPattern = inputPatternRaw;\n } else {\n inputPattern = inputPatternRaw[this.options.inputName];\n }\n\n if (inputPattern && inputVal) {\n let didInputMatch = inputPattern.test(inputVal);\n\n if (this.options.debug) {\n console.log(\n `inputPattern (\"${inputPattern}\"): ${\n didInputMatch ? \"passed\" : \"did not pass!\"\n }`\n );\n }\n\n return didInputMatch;\n } else {\n /**\n * inputPattern doesn't seem to be set for the current input, or input is empty. Pass.\n */\n return true;\n }\n }\n\n /**\n * Handles simple-keyboard event listeners\n */\n setEventListeners() {\n /**\n * Only first instance should set the event listeners\n */\n if (this.isFirstKeyboardInstance || !this.allKeyboardInstances) {\n if (this.options.debug) {\n console.log(`Caret handling started (${this.keyboardDOMClass})`);\n }\n\n /**\n * Event Listeners\n */\n document.addEventListener(\"keyup\", this.handleKeyUp);\n document.addEventListener(\"keydown\", this.handleKeyDown);\n document.addEventListener(\"mouseup\", this.handleMouseUp);\n document.addEventListener(\"touchend\", this.handleTouchEnd);\n }\n }\n\n /**\n * Event Handler: KeyUp\n */\n handleKeyUp(event) {\n this.caretEventHandler(event);\n\n if (this.options.physicalKeyboardHighlight) {\n this.physicalKeyboard.handleHighlightKeyUp(event);\n }\n }\n\n /**\n * Event Handler: KeyDown\n */\n handleKeyDown(event) {\n if (this.options.physicalKeyboardHighlight) {\n this.physicalKeyboard.handleHighlightKeyDown(event);\n }\n }\n\n /**\n * Event Handler: MouseUp\n */\n handleMouseUp(event) {\n this.caretEventHandler(event);\n }\n\n /**\n * Event Handler: TouchEnd\n */\n handleTouchEnd(event) {\n this.caretEventHandler(event);\n }\n\n /**\n * Called by {@link setEventListeners} when an event that warrants a cursor position update is triggered\n */\n caretEventHandler(event) {\n let targetTagName;\n if (event.target.tagName) {\n targetTagName = event.target.tagName.toLowerCase();\n }\n\n this.dispatch(instance => {\n if (instance.isMouseHold) {\n instance.isMouseHold = false;\n }\n\n if (\n (targetTagName === \"textarea\" || targetTagName === \"input\") &&\n !instance.options.disableCaretPositioning\n ) {\n /**\n * Tracks current cursor position\n * As keys are pressed, text will be added/removed at that position within the input.\n */\n instance.caretPosition = event.target.selectionStart;\n\n if (instance.options.debug) {\n console.log(\n \"Caret at: \",\n event.target.selectionStart,\n event.target.tagName.toLowerCase(),\n `(${instance.keyboardDOMClass})`\n );\n }\n } else if (instance.options.disableCaretPositioning) {\n /**\n * If we toggled off disableCaretPositioning, we must ensure caretPosition doesn't persist once reactivated.\n */\n instance.caretPosition = null;\n }\n });\n }\n\n /**\n * Execute an operation on each button\n */\n recurseButtons(fn) {\n if (!fn) return false;\n\n Object.keys(this.buttonElements).forEach(buttonName =>\n this.buttonElements[buttonName].forEach(fn)\n );\n }\n\n /**\n * Destroy keyboard listeners and DOM elements\n */\n destroy() {\n if (this.options.debug)\n console.log(\n `Destroying simple-keyboard instance: ${this.currentInstanceName}`\n );\n\n /**\n * Remove document listeners\n */\n document.removeEventListener(\"keyup\", this.handleKeyUp);\n document.removeEventListener(\"keydown\", this.handleKeyDown);\n document.removeEventListener(\"mouseup\", this.handleMouseUp);\n document.removeEventListener(\"touchend\", this.handleTouchEnd);\n document.onpointerup = null;\n document.ontouchend = null;\n document.ontouchcancel = null;\n document.onmouseup = null;\n\n /**\n * Remove buttons\n */\n let deleteButton = buttonElement => {\n buttonElement.onpointerdown = null;\n buttonElement.onpointerup = null;\n buttonElement.onpointercancel = null;\n buttonElement.ontouchstart = null;\n buttonElement.ontouchend = null;\n buttonElement.ontouchcancel = null;\n buttonElement.onclick = null;\n buttonElement.onmousedown = null;\n buttonElement.onmouseup = null;\n\n buttonElement.remove();\n buttonElement = null;\n };\n\n this.recurseButtons(deleteButton);\n\n this.recurseButtons = null;\n deleteButton = null;\n\n /**\n * Remove wrapper events\n */\n this.keyboardDOM.onpointerdown = null;\n this.keyboardDOM.ontouchstart = null;\n this.keyboardDOM.onmousedown = null;\n\n /**\n * Clearing keyboard wrapper\n */\n this.clear();\n\n /**\n * Remove instance\n */\n window[\"SimpleKeyboardInstances\"][this.currentInstanceName] = null;\n delete window[\"SimpleKeyboardInstances\"][this.currentInstanceName];\n\n /**\n * Reset initialized flag\n */\n this.initialized = false;\n }\n\n /**\n * Process buttonTheme option\n */\n getButtonThemeClasses(button) {\n let buttonTheme = this.options.buttonTheme;\n let buttonClasses = [];\n\n if (Array.isArray(buttonTheme)) {\n buttonTheme.forEach(themeObj => {\n if (\n themeObj.class &&\n typeof themeObj.class === \"string\" &&\n themeObj.buttons &&\n typeof themeObj.buttons === \"string\"\n ) {\n let themeObjClasses = themeObj.class.split(\" \");\n let themeObjButtons = themeObj.buttons.split(\" \");\n\n if (themeObjButtons.includes(button)) {\n buttonClasses = [...buttonClasses, ...themeObjClasses];\n }\n } else {\n console.warn(\n `Incorrect \"buttonTheme\". Please check the documentation.`,\n themeObj\n );\n }\n });\n }\n\n return buttonClasses;\n }\n\n /**\n * Process buttonAttributes option\n */\n setDOMButtonAttributes(button, callback) {\n let buttonAttributes = this.options.buttonAttributes;\n\n if (Array.isArray(buttonAttributes)) {\n buttonAttributes.forEach(attrObj => {\n if (\n attrObj.attribute &&\n typeof attrObj.attribute === \"string\" &&\n attrObj.value &&\n typeof attrObj.value === \"string\" &&\n attrObj.buttons &&\n typeof attrObj.buttons === \"string\"\n ) {\n let attrObjButtons = attrObj.buttons.split(\" \");\n\n if (attrObjButtons.includes(button)) {\n callback(attrObj.attribute, attrObj.value);\n }\n } else {\n console.warn(\n `Incorrect \"buttonAttributes\". Please check the documentation.`,\n attrObj\n );\n }\n });\n }\n }\n\n onTouchDeviceDetected() {\n /**\n * Processing autoTouchEvents\n */\n this.processAutoTouchEvents();\n\n /**\n * Disabling contextual window on touch devices\n */\n this.disableContextualWindow();\n }\n\n /**\n * Disabling contextual window for hg-button\n */\n /* istanbul ignore next */\n disableContextualWindow() {\n window.oncontextmenu = event => {\n if (event.target.classList.contains(\"hg-button\")) {\n event.preventDefault();\n event.stopPropagation();\n return false;\n }\n };\n }\n\n /**\n * Process autoTouchEvents option\n */\n processAutoTouchEvents() {\n if (this.options.autoUseTouchEvents) {\n this.options.useTouchEvents = true;\n\n if (this.options.debug) {\n console.log(\n `autoUseTouchEvents: Touch device detected, useTouchEvents enabled.`\n );\n }\n }\n }\n\n /**\n * Executes the callback function once simple-keyboard is rendered for the first time (on initialization).\n */\n onInit() {\n if (this.options.debug) {\n console.log(`${this.keyboardDOMClass} Initialized`);\n }\n\n /**\n * setEventListeners\n */\n this.setEventListeners();\n\n if (typeof this.options.onInit === \"function\") this.options.onInit();\n }\n\n /**\n * Executes the callback function before a simple-keyboard render.\n */\n beforeFirstRender() {\n /**\n * Performing actions when touch device detected\n */\n if (this.utilities.isTouchDevice()) {\n this.onTouchDeviceDetected();\n }\n\n if (typeof this.options.beforeFirstRender === \"function\")\n this.options.beforeFirstRender();\n\n /**\n * Notify about PointerEvents usage\n */\n if (\n this.isFirstKeyboardInstance &&\n this.utilities.pointerEventsSupported() &&\n !this.options.useTouchEvents &&\n !this.options.useMouseEvents\n ) {\n if (this.options.debug) {\n console.log(\"Using PointerEvents as it is supported by this browser\");\n }\n }\n\n /**\n * Notify about touch events usage\n */\n if (this.options.useTouchEvents) {\n if (this.options.debug) {\n console.log(\n \"useTouchEvents has been enabled. Only touch events will be used.\"\n );\n }\n }\n }\n\n /**\n * Executes the callback function before a simple-keyboard render.\n */\n beforeRender() {\n if (typeof this.options.beforeRender === \"function\")\n this.options.beforeRender();\n }\n\n /**\n * Executes the callback function every time simple-keyboard is rendered (e.g: when you change layouts).\n */\n onRender() {\n if (typeof this.options.onRender === \"function\") this.options.onRender();\n }\n\n /**\n * Executes the callback function once all modules have been loaded\n */\n onModulesLoaded() {\n if (typeof this.options.onModulesLoaded === \"function\")\n this.options.onModulesLoaded();\n }\n\n /**\n * Register module\n */\n registerModule = (name, initCallback) => {\n if (!this.modules[name]) this.modules[name] = {};\n\n initCallback(this.modules[name]);\n };\n\n /**\n * Load modules\n */\n loadModules() {\n if (Array.isArray(this.options.modules)) {\n this.options.modules.forEach(Module => {\n let module = new Module();\n\n /* istanbul ignore next */\n if (module.constructor.name && module.constructor.name !== \"Function\") {\n let classStr = `module-${this.utilities.camelCase(\n module.constructor.name\n )}`;\n this.keyboardPluginClasses =\n this.keyboardPluginClasses + ` ${classStr}`;\n }\n\n module.init(this);\n });\n\n this.keyboardPluginClasses =\n this.keyboardPluginClasses + \" modules-loaded\";\n\n this.render();\n this.onModulesLoaded();\n }\n }\n\n /**\n * Get module prop\n */\n getModuleProp(name, prop) {\n if (!this.modules[name]) return false;\n\n return this.modules[name][prop];\n }\n\n /**\n * getModulesList\n */\n getModulesList() {\n return Object.keys(this.modules);\n }\n\n /**\n * Parse Row DOM containers\n */\n parseRowDOMContainers(\n rowDOM,\n rowIndex,\n containerStartIndexes,\n containerEndIndexes\n ) {\n let rowDOMArray = Array.from(rowDOM.children);\n let removedElements = 0;\n\n if (rowDOMArray.length) {\n containerStartIndexes.forEach((startIndex, arrIndex) => {\n let endIndex = containerEndIndexes[arrIndex];\n\n /**\n * If there exists a respective end index\n * if end index comes after start index\n */\n if (!endIndex || !(endIndex > startIndex)) {\n return false;\n }\n\n /**\n * Updated startIndex, endIndex\n * This is since the removal of buttons to place a single button container\n * results in a modified array size\n */\n let updated_startIndex = startIndex - removedElements;\n let updated_endIndex = endIndex - removedElements;\n\n /**\n * Create button container\n */\n let containerDOM = document.createElement(\"div\");\n containerDOM.className += \"hg-button-container\";\n let containerUID = `${this.options.layoutName}-r${rowIndex}c${arrIndex}`;\n containerDOM.setAttribute(\"data-skUID\", containerUID);\n\n /**\n * Taking elements due to be inserted into container\n */\n let containedElements = rowDOMArray.splice(\n updated_startIndex,\n updated_endIndex - updated_startIndex + 1\n );\n removedElements = updated_endIndex - updated_startIndex;\n\n /**\n * Inserting elements to container\n */\n containedElements.forEach(element => containerDOM.appendChild(element));\n\n /**\n * Adding container at correct position within rowDOMArray\n */\n rowDOMArray.splice(updated_startIndex, 0, containerDOM);\n\n /**\n * Clearing old rowDOM children structure\n */\n rowDOM.innerHTML = \"\";\n\n /**\n * Appending rowDOM new children list\n */\n rowDOMArray.forEach(element => rowDOM.appendChild(element));\n\n if (this.options.debug) {\n console.log(\n \"rowDOMContainer\",\n containedElements,\n updated_startIndex,\n updated_endIndex,\n removedElements + 1\n );\n }\n });\n }\n\n return rowDOM;\n }\n\n /**\n * Renders rows and buttons as per options\n */\n render() {\n /**\n * Clear keyboard\n */\n this.clear();\n\n /**\n * Calling beforeFirstRender\n */\n if (!this.initialized) {\n this.beforeFirstRender();\n }\n\n /**\n * Calling beforeRender\n */\n this.beforeRender();\n\n let layoutClass = `hg-layout-${this.options.layoutName}`;\n let layout = this.options.layout || KeyboardLayout.getDefaultLayout();\n let useTouchEvents = this.options.useTouchEvents || false;\n let useTouchEventsClass = useTouchEvents ? \"hg-touch-events\" : \"\";\n let useMouseEvents = this.options.useMouseEvents || false;\n let disableRowButtonContainers = this.options.disableRowButtonContainers;\n\n /**\n * Adding themeClass, layoutClass to keyboardDOM\n */\n this.keyboardDOM.className += ` ${this.options.theme} ${layoutClass} ${this.keyboardPluginClasses} ${useTouchEventsClass}`;\n\n /**\n * Iterating through each row\n */\n layout[this.options.layoutName].forEach((row, rIndex) => {\n let rowArray = row.split(\" \");\n\n /**\n * Creating empty row\n */\n let rowDOM = document.createElement(\"div\");\n rowDOM.className += \"hg-row\";\n\n /**\n * Tracking container indicators in rows\n */\n let containerStartIndexes = [];\n let containerEndIndexes = [];\n\n /**\n * Iterating through each button in row\n */\n rowArray.forEach((button, bIndex) => {\n /**\n * Check if button has a container indicator\n */\n let buttonHasContainerStart =\n !disableRowButtonContainers &&\n button.includes(\"[\") &&\n button.length > 1;\n let buttonHasContainerEnd =\n !disableRowButtonContainers &&\n button.includes(\"]\") &&\n button.length > 1;\n\n /**\n * Save container start index, if applicable\n */\n if (buttonHasContainerStart) {\n containerStartIndexes.push(bIndex);\n\n /**\n * Removing indicator\n */\n button = button.replace(/\\[/g, \"\");\n }\n\n if (buttonHasContainerEnd) {\n containerEndIndexes.push(bIndex);\n\n /**\n * Removing indicator\n */\n button = button.replace(/\\]/g, \"\");\n }\n\n /**\n * Processing button options\n */\n let fctBtnClass = this.utilities.getButtonClass(button);\n let buttonDisplayName = this.utilities.getButtonDisplayName(\n button,\n this.options.display,\n this.options.mergeDisplay\n );\n\n /**\n * Creating button\n */\n let buttonType = this.options.useButtonTag ? \"button\" : \"div\";\n let buttonDOM = document.createElement(buttonType);\n buttonDOM.className += `hg-button ${fctBtnClass}`;\n\n /**\n * Adding buttonTheme\n */\n buttonDOM.classList.add(...this.getButtonThemeClasses(button));\n\n /**\n * Adding buttonAttributes\n */\n this.setDOMButtonAttributes(button, (attribute, value) => {\n buttonDOM.setAttribute(attribute, value);\n });\n\n this.activeButtonClass = \"hg-activeButton\";\n\n /**\n * Handle button click event\n */\n /* istanbul ignore next */\n if (\n this.utilities.pointerEventsSupported() &&\n !useTouchEvents &&\n !useMouseEvents\n ) {\n /**\n * Handle PointerEvents\n */\n buttonDOM.onpointerdown = e => {\n this.handleButtonClicked(button);\n this.handleButtonMouseDown(button, e);\n };\n buttonDOM.onpointerup = () => {\n this.handleButtonMouseUp(button);\n };\n buttonDOM.onpointercancel = () => {\n this.handleButtonMouseUp(button);\n };\n } else {\n /**\n * Fallback for browsers not supporting PointerEvents\n */\n if (useTouchEvents) {\n /**\n * Handle touch events\n */\n buttonDOM.ontouchstart = e => {\n this.handleButtonClicked(button);\n this.handleButtonMouseDown(button, e);\n };\n buttonDOM.ontouchend = () => {\n this.handleButtonMouseUp(button);\n };\n buttonDOM.ontouchcancel = () => {\n this.handleButtonMouseUp(button);\n };\n } else {\n /**\n * Handle mouse events\n */\n buttonDOM.onclick = () => {\n this.isMouseHold = false;\n this.handleButtonClicked(button);\n };\n buttonDOM.onmousedown = e => {\n this.handleButtonMouseDown(button, e);\n };\n buttonDOM.onmouseup = () => {\n this.handleButtonMouseUp(button);\n };\n }\n }\n\n /**\n * Adding identifier\n */\n buttonDOM.setAttribute(\"data-skBtn\", button);\n\n /**\n * Adding unique id\n * Since there's no limit on spawning same buttons, the unique id ensures you can style every button\n */\n let buttonUID = `${this.options.layoutName}-r${rIndex}b${bIndex}`;\n buttonDOM.setAttribute(\"data-skBtnUID\", buttonUID);\n\n /**\n * Adding button label to button\n */\n let buttonSpanDOM = document.createElement(\"span\");\n buttonSpanDOM.innerHTML = buttonDisplayName;\n buttonDOM.appendChild(buttonSpanDOM);\n\n /**\n * Adding to buttonElements\n */\n if (!this.buttonElements[button]) this.buttonElements[button] = [];\n\n this.buttonElements[button].push(buttonDOM);\n\n /**\n * Appending button to row\n */\n rowDOM.appendChild(buttonDOM);\n });\n\n /**\n * Parse containers in row\n */\n rowDOM = this.parseRowDOMContainers(\n rowDOM,\n rIndex,\n containerStartIndexes,\n containerEndIndexes\n );\n\n /**\n * Appending row to keyboard\n */\n this.keyboardDOM.appendChild(rowDOM);\n });\n\n /**\n * Calling onRender\n */\n this.onRender();\n\n if (!this.initialized) {\n /**\n * Ensures that onInit and beforeFirstRender are only called once per instantiation\n */\n this.initialized = true;\n\n /**\n * Handling parent events\n */\n /* istanbul ignore next */\n if (\n this.utilities.pointerEventsSupported() &&\n !useTouchEvents &&\n !useMouseEvents\n ) {\n document.onpointerup = () => this.handleButtonMouseUp();\n this.keyboardDOM.onpointerdown = e =>\n this.handleKeyboardContainerMouseDown(e);\n } else if (useTouchEvents) {\n /**\n * Handling ontouchend, ontouchcancel\n */\n document.ontouchend = () => this.handleButtonMouseUp();\n document.ontouchcancel = () => this.handleButtonMouseUp();\n\n this.keyboardDOM.ontouchstart = e =>\n this.handleKeyboardContainerMouseDown(e);\n } else if (!useTouchEvents) {\n /**\n * Handling mouseup\n */\n document.onmouseup = () => this.handleButtonMouseUp();\n this.keyboardDOM.onmousedown = e =>\n this.handleKeyboardContainerMouseDown(e);\n }\n\n /**\n * Calling onInit\n */\n this.onInit();\n }\n }\n}\n\nexport default SimpleKeyboard;\n","import SimpleKeyboard from \"./components/Keyboard\";\nexport default SimpleKeyboard;\n"],"sourceRoot":""} \ No newline at end of file +{"version":3,"sources":["../../webpack/universalModuleDefinition","../../webpack/bootstrap","services/Utilities.js","components/Keyboard.js","services/KeyboardLayout.js","services/PhysicalKeyboard.js","index.js","../../node_modules/webpack/buildin/harmony-module.js"],"names":["root","factory","exports","module","define","amd","window","installedModules","__webpack_require__","moduleId","i","l","modules","call","m","c","d","name","getter","o","Object","defineProperty","enumerable","get","r","Symbol","toStringTag","value","t","mode","__esModule","ns","create","key","bind","n","object","property","prototype","hasOwnProperty","p","s","Utilities","getOptions","getCaretPosition","dispatch","this","bindMethods","myClass","instance","getOwnPropertyNames","myMethod","button","buttonTypeClass","includes","buttonWithoutBraces","replace","buttonNormalized","display","mergeDisplay","assign","getDefaultDiplay","input","caretPos","moveCaret","options","output","length","removeAt","addStringAt","tabCharOnTab","newLineOnEnter","Number","isInteger","minus","newCaretPos","updateCaretPosAction","caretPosition","debug","console","log","keyboardDOMClass","source","string","position","slice","join","isMaxLengthReached","updateCaretPos","emojiMatchedReg","substring","match","substr","inputObj","updatedInput","maxLength","currentInput","inputName","condition","maxLengthReached","Boolean","navigator","maxTouchPoints","PointerEvent","toLowerCase","trim","split","reduce","word","toUpperCase","SimpleKeyboard","params","keyboardDOM","document","querySelector","HTMLDivElement","className","warn","Error","initCallback","baseDOMClasses","keyboardClasses","filter","DOMClass","handleParams","utilities","layoutName","theme","preventMouseDownDefault","keyboardPluginClasses","buttonElements","currentInstanceName","camelCase","allKeyboardInstances","keyboardInstanceNames","keys","isFirstKeyboardInstance","physicalKeyboard","PhysicalKeyboard","render","loadModules","onKeyPress","getUpdatedInput","inputPattern","inputPatternIsValid","handleMaxLength","syncInstanceInputs","onChange","onChangeAll","e","preventDefault","stopMouseDownPropagation","stopPropagation","target","classList","add","activeButtonClass","isMouseHold","holdInteractionTimeout","clearTimeout","holdTimeout","disableButtonHold","setTimeout","handleButtonHold","recurseButtons","buttonElement","remove","onKeyReleased","handleButtonClicked","replaceInput","onSetOptions","innerHTML","callback","forEach","buttons","classNameItem","buttonTheme","classNameFound","map","class","buttonThemeArray","push","Array","isArray","index","filteredButtonArray","item","splice","buttonArr","inputVal","inputPatternRaw","RegExp","didInputMatch","test","addEventListener","handleKeyUp","handleKeyDown","handleMouseUp","handleTouchEnd","event","caretEventHandler","physicalKeyboardHighlight","handleHighlightKeyUp","handleHighlightKeyDown","targetTagName","tagName","disableCaretPositioning","selectionStart","fn","buttonName","removeEventListener","onpointerup","ontouchend","ontouchcancel","onmouseup","deleteButton","onpointerdown","onpointercancel","ontouchstart","onclick","onmousedown","clear","initialized","buttonClasses","themeObj","themeObjClasses","buttonAttributes","attrObj","attribute","processAutoTouchEvents","disableContextualWindow","oncontextmenu","contains","autoUseTouchEvents","useTouchEvents","setEventListeners","onInit","isTouchDevice","onTouchDeviceDetected","beforeFirstRender","pointerEventsSupported","useMouseEvents","beforeRender","onRender","onModulesLoaded","KeyboardModule","keyboardModule","constructor","classStr","init","prop","rowDOM","rowIndex","containerStartIndexes","containerEndIndexes","rowDOMArray","from","children","removedElements","startIndex","arrIndex","endIndex","updated_startIndex","updated_endIndex","containerDOM","createElement","containerUID","setAttribute","containedElements","element","appendChild","layoutClass","layout","getDefaultLayout","useTouchEventsClass","disableRowButtonContainers","getKeyboardClassString","row","rIndex","rowArray","bIndex","buttonHasContainerStart","buttonHasContainerEnd","fctBtnClass","getButtonClass","buttonDisplayName","getButtonDisplayName","buttonType","useButtonTag","buttonDOM","getButtonThemeClasses","setDOMButtonAttributes","handleButtonMouseDown","handleButtonMouseUp","buttonUID","buttonSpanDOM","parseRowDOMContainers","handleKeyboardContainerMouseDown","default","shift","buttonPressed","getSimpleKeyboardLayoutKey","getButtonElement","style","backgroundColor","physicalKeyboardHighlightBgColor","color","physicalKeyboardHighlightTextColor","removeAttribute","code","originalModule","webpackPolyfill"],"mappings":"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","file":"index.js","sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"SimpleKeyboard\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"SimpleKeyboard\"] = factory();\n\telse\n\t\troot[\"SimpleKeyboard\"] = factory();\n})(window, function() {\nreturn "," \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 4);\n","/**\r\n * Utility Service\r\n */\r\nclass Utilities {\r\n /**\r\n * Creates an instance of the Utility service\r\n */\r\n constructor({ getOptions, getCaretPosition, dispatch }) {\r\n this.getOptions = getOptions;\r\n this.getCaretPosition = getCaretPosition;\r\n this.dispatch = dispatch;\r\n\r\n /**\r\n * Bindings\r\n */\r\n Utilities.bindMethods(Utilities, this);\r\n }\r\n\r\n /**\r\n * Adds default classes to a given button\r\n *\r\n * @param {string} button The button's layout name\r\n * @return {string} The classes to be added to the button\r\n */\r\n getButtonClass(button) {\r\n const buttonTypeClass =\r\n button.includes(\"{\") && button.includes(\"}\") && button !== \"{//}\"\r\n ? \"functionBtn\"\r\n : \"standardBtn\";\r\n const buttonWithoutBraces = button.replace(\"{\", \"\").replace(\"}\", \"\");\r\n let buttonNormalized = \"\";\r\n\r\n if (buttonTypeClass !== \"standardBtn\")\r\n buttonNormalized = ` hg-button-${buttonWithoutBraces}`;\r\n\r\n return `hg-${buttonTypeClass}${buttonNormalized}`;\r\n }\r\n\r\n /**\r\n * Default button display labels\r\n */\r\n getDefaultDiplay() {\r\n return {\r\n \"{bksp}\": \"backspace\",\r\n \"{backspace}\": \"backspace\",\r\n \"{enter}\": \"< enter\",\r\n \"{shift}\": \"shift\",\r\n \"{shiftleft}\": \"shift\",\r\n \"{shiftright}\": \"shift\",\r\n \"{alt}\": \"alt\",\r\n \"{s}\": \"shift\",\r\n \"{tab}\": \"tab\",\r\n \"{lock}\": \"caps\",\r\n \"{capslock}\": \"caps\",\r\n \"{accept}\": \"Submit\",\r\n \"{space}\": \" \",\r\n \"{//}\": \" \",\r\n \"{esc}\": \"esc\",\r\n \"{escape}\": \"esc\",\r\n \"{f1}\": \"f1\",\r\n \"{f2}\": \"f2\",\r\n \"{f3}\": \"f3\",\r\n \"{f4}\": \"f4\",\r\n \"{f5}\": \"f5\",\r\n \"{f6}\": \"f6\",\r\n \"{f7}\": \"f7\",\r\n \"{f8}\": \"f8\",\r\n \"{f9}\": \"f9\",\r\n \"{f10}\": \"f10\",\r\n \"{f11}\": \"f11\",\r\n \"{f12}\": \"f12\",\r\n \"{numpaddivide}\": \"/\",\r\n \"{numlock}\": \"lock\",\r\n \"{arrowup}\": \"↑\",\r\n \"{arrowleft}\": \"←\",\r\n \"{arrowdown}\": \"↓\",\r\n \"{arrowright}\": \"→\",\r\n \"{prtscr}\": \"print\",\r\n \"{scrolllock}\": \"scroll\",\r\n \"{pause}\": \"pause\",\r\n \"{insert}\": \"ins\",\r\n \"{home}\": \"home\",\r\n \"{pageup}\": \"up\",\r\n \"{delete}\": \"del\",\r\n \"{end}\": \"end\",\r\n \"{pagedown}\": \"down\",\r\n \"{numpadmultiply}\": \"*\",\r\n \"{numpadsubtract}\": \"-\",\r\n \"{numpadadd}\": \"+\",\r\n \"{numpadenter}\": \"enter\",\r\n \"{period}\": \".\",\r\n \"{numpaddecimal}\": \".\",\r\n \"{numpad0}\": \"0\",\r\n \"{numpad1}\": \"1\",\r\n \"{numpad2}\": \"2\",\r\n \"{numpad3}\": \"3\",\r\n \"{numpad4}\": \"4\",\r\n \"{numpad5}\": \"5\",\r\n \"{numpad6}\": \"6\",\r\n \"{numpad7}\": \"7\",\r\n \"{numpad8}\": \"8\",\r\n \"{numpad9}\": \"9\"\r\n };\r\n }\r\n /**\r\n * Returns the display (label) name for a given button\r\n *\r\n * @param {string} button The button's layout name\r\n * @param {object} display The provided display option\r\n * @param {boolean} mergeDisplay Whether the provided param value should be merged with the default one.\r\n */\r\n getButtonDisplayName(button, display, mergeDisplay) {\r\n if (mergeDisplay) {\r\n display = Object.assign({}, this.getDefaultDiplay(), display);\r\n } else {\r\n display = display || this.getDefaultDiplay();\r\n }\r\n\r\n return display[button] || button;\r\n }\r\n\r\n /**\r\n * Returns the updated input resulting from clicking a given button\r\n *\r\n * @param {string} button The button's layout name\r\n * @param {string} input The input string\r\n * @param {number} caretPos The cursor's current position\r\n * @param {boolean} moveCaret Whether to update simple-keyboard's cursor\r\n */\r\n getUpdatedInput(button, input, caretPos, moveCaret) {\r\n const options = this.getOptions();\r\n let output = input;\r\n\r\n if (\r\n (button === \"{bksp}\" || button === \"{backspace}\") &&\r\n output.length > 0\r\n ) {\r\n output = this.removeAt(output, caretPos, moveCaret);\r\n } else if (button === \"{space}\")\r\n output = this.addStringAt(output, \" \", caretPos, moveCaret);\r\n else if (\r\n button === \"{tab}\" &&\r\n !(\r\n typeof options.tabCharOnTab === \"boolean\" &&\r\n options.tabCharOnTab === false\r\n )\r\n ) {\r\n output = this.addStringAt(output, \"\\t\", caretPos, moveCaret);\r\n } else if (\r\n (button === \"{enter}\" || button === \"{numpadenter}\") &&\r\n options.newLineOnEnter\r\n )\r\n output = this.addStringAt(output, \"\\n\", caretPos, moveCaret);\r\n else if (\r\n button.includes(\"numpad\") &&\r\n Number.isInteger(Number(button[button.length - 2]))\r\n ) {\r\n output = this.addStringAt(\r\n output,\r\n button[button.length - 2],\r\n caretPos,\r\n moveCaret\r\n );\r\n } else if (button === \"{numpaddivide}\")\r\n output = this.addStringAt(output, \"/\", caretPos, moveCaret);\r\n else if (button === \"{numpadmultiply}\")\r\n output = this.addStringAt(output, \"*\", caretPos, moveCaret);\r\n else if (button === \"{numpadsubtract}\")\r\n output = this.addStringAt(output, \"-\", caretPos, moveCaret);\r\n else if (button === \"{numpadadd}\")\r\n output = this.addStringAt(output, \"+\", caretPos, moveCaret);\r\n else if (button === \"{numpaddecimal}\")\r\n output = this.addStringAt(output, \".\", caretPos, moveCaret);\r\n else if (button === \"{\" || button === \"}\")\r\n output = this.addStringAt(output, button, caretPos, moveCaret);\r\n else if (!button.includes(\"{\") && !button.includes(\"}\"))\r\n output = this.addStringAt(output, button, caretPos, moveCaret);\r\n\r\n return output;\r\n }\r\n\r\n /**\r\n * Moves the cursor position by a given amount\r\n *\r\n * @param {number} length Represents by how many characters the input should be moved\r\n * @param {boolean} minus Whether the cursor should be moved to the left or not.\r\n */\r\n updateCaretPos(length, minus) {\r\n const newCaretPos = this.updateCaretPosAction(length, minus);\r\n\r\n this.dispatch(instance => {\r\n instance.caretPosition = newCaretPos;\r\n });\r\n }\r\n\r\n /**\r\n * Action method of updateCaretPos\r\n *\r\n * @param {number} length Represents by how many characters the input should be moved\r\n * @param {boolean} minus Whether the cursor should be moved to the left or not.\r\n */\r\n updateCaretPosAction(length, minus) {\r\n const options = this.getOptions();\r\n let caretPosition = this.getCaretPosition();\r\n\r\n if (minus) {\r\n if (caretPosition > 0) caretPosition = caretPosition - length;\r\n } else {\r\n caretPosition = caretPosition + length;\r\n }\r\n\r\n if (options.debug) {\r\n console.log(\"Caret at:\", caretPosition, `(${this.keyboardDOMClass})`);\r\n }\r\n\r\n return caretPosition;\r\n }\r\n\r\n /**\r\n * Adds a string to the input at a given position\r\n *\r\n * @param {string} source The source input\r\n * @param {string} string The string to add\r\n * @param {number} position The (cursor) position where the string should be added\r\n * @param {boolean} moveCaret Whether to update simple-keyboard's cursor\r\n */\r\n addStringAt(source, string, position, moveCaret) {\r\n let output;\r\n\r\n if (!position && position !== 0) {\r\n output = source + string;\r\n } else {\r\n output = [source.slice(0, position), string, source.slice(position)].join(\r\n \"\"\r\n );\r\n\r\n /**\r\n * Avoid caret position change when maxLength is set\r\n */\r\n if (!this.isMaxLengthReached()) {\r\n if (moveCaret) this.updateCaretPos(string.length);\r\n }\r\n }\r\n\r\n return output;\r\n }\r\n\r\n /**\r\n * Removes an amount of characters at a given position\r\n *\r\n * @param {string} source The source input\r\n * @param {number} position The (cursor) position from where the characters should be removed\r\n * @param {boolean} moveCaret Whether to update simple-keyboard's cursor\r\n */\r\n removeAt(source, position, moveCaret) {\r\n const caretPosition = this.getCaretPosition();\r\n\r\n if (caretPosition === 0) {\r\n return source;\r\n }\r\n\r\n let output;\r\n let prevTwoChars;\r\n let emojiMatched;\r\n const emojiMatchedReg = /([\\uD800-\\uDBFF][\\uDC00-\\uDFFF])/g;\r\n\r\n /**\r\n * Emojis are made out of two characters, so we must take a custom approach to trim them.\r\n * For more info: https://mathiasbynens.be/notes/javascript-unicode\r\n */\r\n if (position && position >= 0) {\r\n prevTwoChars = source.substring(position - 2, position);\r\n emojiMatched = prevTwoChars.match(emojiMatchedReg);\r\n\r\n if (emojiMatched) {\r\n output = source.substr(0, position - 2) + source.substr(position);\r\n if (moveCaret) this.updateCaretPos(2, true);\r\n } else {\r\n output = source.substr(0, position - 1) + source.substr(position);\r\n if (moveCaret) this.updateCaretPos(1, true);\r\n }\r\n } else {\r\n prevTwoChars = source.slice(-2);\r\n emojiMatched = prevTwoChars.match(emojiMatchedReg);\r\n\r\n if (emojiMatched) {\r\n output = source.slice(0, -2);\r\n if (moveCaret) this.updateCaretPos(2, true);\r\n } else {\r\n output = source.slice(0, -1);\r\n if (moveCaret) this.updateCaretPos(1, true);\r\n }\r\n }\r\n\r\n return output;\r\n }\r\n /**\r\n * Determines whether the maxLength has been reached. This function is called when the maxLength option it set.\r\n *\r\n * @param {object} inputObj\r\n * @param {string} updatedInput\r\n */\r\n handleMaxLength(inputObj, updatedInput) {\r\n const options = this.getOptions();\r\n const maxLength = options.maxLength;\r\n const currentInput = inputObj[options.inputName];\r\n const condition = updatedInput.length - 1 >= maxLength;\r\n\r\n if (\r\n /**\r\n * If pressing this button won't add more characters\r\n * We exit out of this limiter function\r\n */\r\n updatedInput.length <= currentInput.length\r\n ) {\r\n return false;\r\n }\r\n\r\n if (Number.isInteger(maxLength)) {\r\n if (options.debug) {\r\n console.log(\"maxLength (num) reached:\", condition);\r\n }\r\n\r\n if (condition) {\r\n /**\r\n * @type {boolean} Boolean value that shows whether maxLength has been reached\r\n */\r\n this.maxLengthReached = true;\r\n return true;\r\n } else {\r\n this.maxLengthReached = false;\r\n return false;\r\n }\r\n }\r\n\r\n if (typeof maxLength === \"object\") {\r\n const condition = currentInput.length === maxLength[options.inputName];\r\n\r\n if (options.debug) {\r\n console.log(\"maxLength (obj) reached:\", condition);\r\n }\r\n\r\n if (condition) {\r\n this.maxLengthReached = true;\r\n return true;\r\n } else {\r\n this.maxLengthReached = false;\r\n return false;\r\n }\r\n }\r\n }\r\n\r\n /**\r\n * Gets the current value of maxLengthReached\r\n */\r\n isMaxLengthReached() {\r\n return Boolean(this.maxLengthReached);\r\n }\r\n\r\n /**\r\n * Determines whether a touch device is being used\r\n */\r\n isTouchDevice() {\r\n return \"ontouchstart\" in window || navigator.maxTouchPoints;\r\n }\r\n\r\n /**\r\n * Determines whether pointer events are supported\r\n */\r\n pointerEventsSupported() {\r\n return window.PointerEvent;\r\n }\r\n\r\n /**\r\n * Bind all methods in a given class\r\n */\r\n\r\n static bindMethods(myClass, instance) {\r\n // eslint-disable-next-line no-unused-vars\r\n for (const myMethod of Object.getOwnPropertyNames(myClass.prototype)) {\r\n const excludeMethod =\r\n myMethod === \"constructor\" || myMethod === \"bindMethods\";\r\n if (!excludeMethod) {\r\n instance[myMethod] = instance[myMethod].bind(instance);\r\n }\r\n }\r\n }\r\n\r\n /**\r\n * Transforms an arbitrary string to camelCase\r\n *\r\n * @param {string} string The string to transform.\r\n */\r\n camelCase(string) {\r\n if (!string) return false;\r\n\r\n return string\r\n .toLowerCase()\r\n .trim()\r\n .split(/[.\\-_\\s]/g)\r\n .reduce((string, word) =>\r\n word.length ? string + word[0].toUpperCase() + word.slice(1) : string\r\n );\r\n }\r\n}\r\n\r\nexport default Utilities;\r\n","import \"./Keyboard.css\";\r\n\r\n// Services\r\nimport { getDefaultLayout } from \"../services/KeyboardLayout\";\r\nimport PhysicalKeyboard from \"../services/PhysicalKeyboard\";\r\nimport Utilities from \"../services/Utilities\";\r\n\r\n/**\r\n * Root class for simple-keyboard\r\n * This class:\r\n * - Parses the options\r\n * - Renders the rows and buttons\r\n * - Handles button functionality\r\n */\r\nclass SimpleKeyboard {\r\n /**\r\n * Creates an instance of SimpleKeyboard\r\n * @param {Array} params If first parameter is a string, it is considered the container class. The second parameter is then considered the options object. If first parameter is an object, it is considered the options object.\r\n */\r\n constructor(...params) {\r\n const { keyboardDOMClass, keyboardDOM, options = {} } = this.handleParams(\r\n params\r\n );\r\n\r\n /**\r\n * Initializing Utilities\r\n */\r\n this.utilities = new Utilities({\r\n getOptions: this.getOptions,\r\n getCaretPosition: this.getCaretPosition,\r\n dispatch: this.dispatch\r\n });\r\n\r\n /**\r\n * Caret position\r\n */\r\n this.caretPosition = null;\r\n\r\n /**\r\n * Processing options\r\n */\r\n this.keyboardDOM = keyboardDOM;\r\n\r\n /**\r\n * @type {object}\r\n * @property {object} layout Modify the keyboard layout.\r\n * @property {string} layoutName Specifies which layout should be used.\r\n * @property {object} display Replaces variable buttons (such as {bksp}) with a human-friendly name (e.g.: “backspace”).\r\n * @property {boolean} mergeDisplay By default, when you set the display property, you replace the default one. This setting merges them instead.\r\n * @property {string} theme A prop to add your own css classes to the keyboard wrapper. You can add multiple classes separated by a space.\r\n * @property {Array} buttonTheme A prop to add your own css classes to one or several buttons.\r\n * @property {Array} buttonAttributes A prop to add your own attributes to one or several buttons.\r\n * @property {boolean} debug Runs a console.log every time a key is pressed. Displays the buttons pressed and the current input.\r\n * @property {boolean} newLineOnEnter Specifies whether clicking the “ENTER” button will input a newline (\\n) or not.\r\n * @property {boolean} tabCharOnTab Specifies whether clicking the “TAB” button will input a tab character (\\t) or not.\r\n * @property {string} inputName Allows you to use a single simple-keyboard instance for several inputs.\r\n * @property {number} maxLength Restrains all of simple-keyboard inputs to a certain length. This should be used in addition to the input element’s maxlengthattribute.\r\n * @property {object} maxLength Restrains simple-keyboard’s individual inputs to a certain length. This should be used in addition to the input element’s maxlengthattribute.\r\n * @property {boolean} syncInstanceInputs When set to true, this option synchronizes the internal input of every simple-keyboard instance.\r\n * @property {boolean} physicalKeyboardHighlight Enable highlighting of keys pressed on physical keyboard.\r\n * @property {boolean} preventMouseDownDefault Calling preventDefault for the mousedown events keeps the focus on the input.\r\n * @property {boolean} stopMouseDownPropagation Stops pointer down events on simple-keyboard buttons from bubbling to parent elements.\r\n * @property {string} physicalKeyboardHighlightTextColor Define the text color that the physical keyboard highlighted key should have.\r\n * @property {string} physicalKeyboardHighlightBgColor Define the background color that the physical keyboard highlighted key should have.\r\n * @property {function(button: string):string} onKeyPress Executes the callback function on key press. Returns button layout name (i.e.: “{shift}”).\r\n * @property {function(input: string):string} onChange Executes the callback function on input change. Returns the current input’s string.\r\n * @property {function} onRender Executes the callback function every time simple-keyboard is rendered (e.g: when you change layouts).\r\n * @property {function} onInit Executes the callback function once simple-keyboard is rendered for the first time (on initialization).\r\n * @property {function(inputs: object):object} onChangeAll Executes the callback function on input change. Returns the input object with all defined inputs.\r\n * @property {boolean} useButtonTag Render buttons as a button element instead of a div element.\r\n * @property {boolean} disableCaretPositioning A prop to ensure characters are always be added/removed at the end of the string.\r\n * @property {object} inputPattern Restrains input(s) change to the defined regular expression pattern.\r\n * @property {boolean} useTouchEvents Instructs simple-keyboard to use touch events instead of click events.\r\n * @property {boolean} autoUseTouchEvents Enable useTouchEvents automatically when touch device is detected.\r\n * @property {boolean} useMouseEvents Opt out of PointerEvents handling, falling back to the prior mouse event logic.\r\n * @property {function} destroy Clears keyboard listeners and DOM elements.\r\n * @property {boolean} disableButtonHold Disable button hold action.\r\n * @property {function} onKeyReleased Executes the callback function on key release.\r\n */\r\n this.options = options;\r\n this.options.layoutName = this.options.layoutName || \"default\";\r\n this.options.theme = this.options.theme || \"hg-theme-default\";\r\n this.options.inputName = this.options.inputName || \"default\";\r\n this.options.preventMouseDownDefault =\r\n this.options.preventMouseDownDefault || false;\r\n\r\n /**\r\n * @type {object} Classes identifying loaded plugins\r\n */\r\n this.keyboardPluginClasses = \"\";\r\n\r\n /**\r\n * Bindings\r\n */\r\n Utilities.bindMethods(SimpleKeyboard, this);\r\n\r\n /**\r\n * simple-keyboard uses a non-persistent internal input to keep track of the entered string (the variable `keyboard.input`).\r\n * This removes any dependency to input DOM elements. You can type and directly display the value in a div element, for example.\r\n * @example\r\n * // To get entered input\r\n * const input = keyboard.getInput();\r\n *\r\n * // To clear entered input.\r\n * keyboard.clearInput();\r\n *\r\n * @type {object}\r\n * @property {object} default Default SimpleKeyboard internal input.\r\n * @property {object} myInputName Example input that can be set through `options.inputName:\"myInputName\"`.\r\n */\r\n this.input = {};\r\n this.input[this.options.inputName] = \"\";\r\n\r\n /**\r\n * @type {string} DOM class of the keyboard wrapper, normally \"simple-keyboard\" by default.\r\n */\r\n this.keyboardDOMClass = keyboardDOMClass;\r\n\r\n /**\r\n * @type {object} Contains the DOM elements of every rendered button, the key being the button's layout name (e.g.: \"{enter}\").\r\n */\r\n this.buttonElements = {};\r\n\r\n /**\r\n * Simple-keyboard Instances\r\n * This enables multiple simple-keyboard support with easier management\r\n */\r\n if (!window[\"SimpleKeyboardInstances\"])\r\n window[\"SimpleKeyboardInstances\"] = {};\r\n\r\n this.currentInstanceName = this.utilities.camelCase(this.keyboardDOMClass);\r\n window[\"SimpleKeyboardInstances\"][this.currentInstanceName] = this;\r\n\r\n /**\r\n * Instance vars\r\n */\r\n this.allKeyboardInstances = window[\"SimpleKeyboardInstances\"];\r\n this.keyboardInstanceNames = Object.keys(window[\"SimpleKeyboardInstances\"]);\r\n this.isFirstKeyboardInstance =\r\n this.keyboardInstanceNames[0] === this.currentInstanceName;\r\n\r\n /**\r\n * Physical Keyboard support\r\n */\r\n this.physicalKeyboard = new PhysicalKeyboard({\r\n dispatch: this.dispatch,\r\n getOptions: this.getOptions\r\n });\r\n\r\n /**\r\n * Rendering keyboard\r\n */\r\n if (this.keyboardDOM) this.render();\r\n else {\r\n console.warn(`\".${keyboardDOMClass}\" was not found in the DOM.`);\r\n throw new Error(\"KEYBOARD_DOM_ERROR\");\r\n }\r\n\r\n /**\r\n * Modules\r\n */\r\n this.modules = {};\r\n this.loadModules();\r\n }\r\n\r\n /**\r\n * parseParams\r\n */\r\n handleParams = params => {\r\n let keyboardDOMClass;\r\n let keyboardDOM;\r\n let options;\r\n\r\n /**\r\n * If first parameter is a string:\r\n * Consider it as an element's class\r\n */\r\n if (typeof params[0] === \"string\") {\r\n keyboardDOMClass = params[0].split(\".\").join(\"\");\r\n keyboardDOM = document.querySelector(`.${keyboardDOMClass}`);\r\n options = params[1];\r\n\r\n /**\r\n * If first parameter is an HTMLDivElement\r\n * Consider it as the keyboard DOM element\r\n */\r\n } else if (params[0] instanceof HTMLDivElement) {\r\n /**\r\n * This element must have a class, otherwise throw\r\n */\r\n if (!params[0].className) {\r\n console.warn(\"Any DOM element passed as parameter must have a class.\");\r\n throw new Error(\"KEYBOARD_DOM_CLASS_ERROR\");\r\n }\r\n\r\n keyboardDOMClass = params[0].className.split(\" \")[0];\r\n keyboardDOM = params[0];\r\n options = params[1];\r\n\r\n /**\r\n * Otherwise, search for .simple-keyboard DOM element\r\n */\r\n } else {\r\n keyboardDOMClass = \"simple-keyboard\";\r\n keyboardDOM = document.querySelector(`.${keyboardDOMClass}`);\r\n options = params[0];\r\n }\r\n\r\n return {\r\n keyboardDOMClass,\r\n keyboardDOM,\r\n options\r\n };\r\n };\r\n\r\n /**\r\n * Getters\r\n */\r\n getOptions = () => this.options;\r\n getCaretPosition = () => this.caretPosition;\r\n\r\n /**\r\n * Handles clicks made to keyboard buttons\r\n * @param {string} button The button's layout name.\r\n */\r\n handleButtonClicked(button) {\r\n const debug = this.options.debug;\r\n\r\n /**\r\n * Ignoring placeholder buttons\r\n */\r\n if (button === \"{//}\") return false;\r\n\r\n /**\r\n * Calling onKeyPress\r\n */\r\n if (typeof this.options.onKeyPress === \"function\")\r\n this.options.onKeyPress(button);\r\n\r\n if (!this.input[this.options.inputName])\r\n this.input[this.options.inputName] = \"\";\r\n\r\n const updatedInput = this.utilities.getUpdatedInput(\r\n button,\r\n this.input[this.options.inputName],\r\n this.caretPosition\r\n );\r\n\r\n if (\r\n // If input will change as a result of this button press\r\n this.input[this.options.inputName] !== updatedInput &&\r\n // This pertains to the \"inputPattern\" option:\r\n // If inputPattern isn't set\r\n (!this.options.inputPattern ||\r\n // Or, if it is set and if the pattern is valid - we proceed.\r\n (this.options.inputPattern && this.inputPatternIsValid(updatedInput)))\r\n ) {\r\n /**\r\n * If maxLength and handleMaxLength yield true, halting\r\n */\r\n if (\r\n this.options.maxLength &&\r\n this.utilities.handleMaxLength(this.input, updatedInput)\r\n ) {\r\n return false;\r\n }\r\n\r\n this.input[this.options.inputName] = this.utilities.getUpdatedInput(\r\n button,\r\n this.input[this.options.inputName],\r\n this.caretPosition,\r\n true\r\n );\r\n\r\n if (debug) console.log(\"Input changed:\", this.input);\r\n\r\n /**\r\n * Enforce syncInstanceInputs, if set\r\n */\r\n if (this.options.syncInstanceInputs) this.syncInstanceInputs();\r\n\r\n /**\r\n * Calling onChange\r\n */\r\n if (typeof this.options.onChange === \"function\")\r\n this.options.onChange(this.input[this.options.inputName]);\r\n\r\n /**\r\n * Calling onChangeAll\r\n */\r\n if (typeof this.options.onChangeAll === \"function\")\r\n this.options.onChangeAll(this.input);\r\n }\r\n\r\n if (debug) {\r\n console.log(\"Key pressed:\", button);\r\n }\r\n }\r\n\r\n /**\r\n * Handles button mousedown\r\n */\r\n /* istanbul ignore next */\r\n handleButtonMouseDown(button, e) {\r\n /**\r\n * Handle event options\r\n */\r\n if (this.options.preventMouseDownDefault) e.preventDefault();\r\n if (this.options.stopMouseDownPropagation) e.stopPropagation();\r\n\r\n /**\r\n * Add active class\r\n */\r\n if (e) e.target.classList.add(this.activeButtonClass);\r\n\r\n /**\r\n * @type {boolean} Whether the mouse is being held onKeyPress\r\n */\r\n this.isMouseHold = true;\r\n\r\n if (this.holdInteractionTimeout) clearTimeout(this.holdInteractionTimeout);\r\n\r\n if (this.holdTimeout) clearTimeout(this.holdTimeout);\r\n\r\n /**\r\n * @type {object} Time to wait until a key hold is detected\r\n */\r\n if (!this.options.disableButtonHold) {\r\n this.holdTimeout = setTimeout(() => {\r\n if (\r\n this.isMouseHold &&\r\n ((!button.includes(\"{\") && !button.includes(\"}\")) ||\r\n button === \"{delete}\" ||\r\n button === \"{backspace}\" ||\r\n button === \"{bksp}\" ||\r\n button === \"{space}\" ||\r\n button === \"{tab}\")\r\n ) {\r\n if (this.options.debug) console.log(\"Button held:\", button);\r\n\r\n this.handleButtonHold(button, e);\r\n }\r\n clearTimeout(this.holdTimeout);\r\n }, 500);\r\n }\r\n }\r\n\r\n /**\r\n * Handles button mouseup\r\n */\r\n handleButtonMouseUp(button) {\r\n /**\r\n * Remove active class\r\n */\r\n this.recurseButtons(buttonElement => {\r\n buttonElement.classList.remove(this.activeButtonClass);\r\n });\r\n\r\n this.isMouseHold = false;\r\n if (this.holdInteractionTimeout) clearTimeout(this.holdInteractionTimeout);\r\n\r\n /**\r\n * Calling onKeyReleased\r\n */\r\n if (button && typeof this.options.onKeyReleased === \"function\")\r\n this.options.onKeyReleased(button);\r\n }\r\n\r\n /**\r\n * Handles container mousedown\r\n */\r\n handleKeyboardContainerMouseDown(e) {\r\n /**\r\n * Handle event options\r\n */\r\n if (this.options.preventMouseDownDefault) e.preventDefault();\r\n }\r\n\r\n /**\r\n * Handles button hold\r\n */\r\n /* istanbul ignore next */\r\n handleButtonHold(button) {\r\n if (this.holdInteractionTimeout) clearTimeout(this.holdInteractionTimeout);\r\n\r\n /**\r\n * @type {object} Timeout dictating the speed of key hold iterations\r\n */\r\n this.holdInteractionTimeout = setTimeout(() => {\r\n if (this.isMouseHold) {\r\n this.handleButtonClicked(button);\r\n this.handleButtonHold(button);\r\n } else {\r\n clearTimeout(this.holdInteractionTimeout);\r\n }\r\n }, 100);\r\n }\r\n\r\n /**\r\n * Send a command to all simple-keyboard instances (if you have several instances).\r\n */\r\n syncInstanceInputs() {\r\n this.dispatch(instance => {\r\n instance.replaceInput(this.input);\r\n instance.caretPosition = this.caretPosition;\r\n });\r\n }\r\n\r\n /**\r\n * Clear the keyboard’s input.\r\n * @param {string} [inputName] optional - the internal input to select\r\n */\r\n clearInput(inputName) {\r\n inputName = inputName || this.options.inputName;\r\n this.input[inputName] = \"\";\r\n\r\n /**\r\n * Reset caretPosition\r\n */\r\n this.caretPosition = 0;\r\n\r\n /**\r\n * Enforce syncInstanceInputs, if set\r\n */\r\n if (this.options.syncInstanceInputs) this.syncInstanceInputs();\r\n }\r\n\r\n /**\r\n * Get the keyboard’s input (You can also get it from the onChange prop).\r\n * @param {string} [inputName] optional - the internal input to select\r\n */\r\n getInput(inputName) {\r\n inputName = inputName || this.options.inputName;\r\n\r\n /**\r\n * Enforce syncInstanceInputs, if set\r\n */\r\n if (this.options.syncInstanceInputs) this.syncInstanceInputs();\r\n\r\n return this.input[inputName];\r\n }\r\n\r\n /**\r\n * Set the keyboard’s input.\r\n * @param {string} input the input value\r\n * @param {string} inputName optional - the internal input to select\r\n */\r\n setInput(input, inputName) {\r\n inputName = inputName || this.options.inputName;\r\n this.input[inputName] = input;\r\n\r\n /**\r\n * Enforce syncInstanceInputs, if set\r\n */\r\n if (this.options.syncInstanceInputs) this.syncInstanceInputs();\r\n }\r\n\r\n /**\r\n * Replace the input object (`keyboard.input`)\r\n * @param {object} inputObj The input object\r\n */\r\n replaceInput(inputObj) {\r\n this.input = inputObj;\r\n }\r\n\r\n /**\r\n * Set new option or modify existing ones after initialization.\r\n * @param {object} options The options to set\r\n */\r\n setOptions(options) {\r\n options = options || {};\r\n this.options = Object.assign(this.options, options);\r\n\r\n /**\r\n * Some option changes require adjustments before re-render\r\n */\r\n this.onSetOptions(options);\r\n\r\n /**\r\n * Rendering\r\n */\r\n this.render();\r\n }\r\n\r\n /**\r\n * Executing actions depending on changed options\r\n * @param {object} options The options to set\r\n */\r\n onSetOptions(options) {\r\n if (options.inputName) {\r\n /**\r\n * inputName changed. This requires a caretPosition reset\r\n */\r\n if (this.options.debug) {\r\n console.log(\"inputName changed. caretPosition reset.\");\r\n }\r\n\r\n this.caretPosition = null;\r\n }\r\n }\r\n\r\n /**\r\n * Remove all keyboard rows and reset keyboard values.\r\n * Used internally between re-renders.\r\n */\r\n clear() {\r\n this.keyboardDOM.innerHTML = \"\";\r\n this.keyboardDOM.className = this.keyboardDOMClass;\r\n this.buttonElements = {};\r\n }\r\n\r\n /**\r\n * Send a command to all simple-keyboard instances at once (if you have multiple instances).\r\n * @param {function(instance: object, key: string)} callback Function to run on every instance\r\n */\r\n dispatch(callback) {\r\n if (!window[\"SimpleKeyboardInstances\"]) {\r\n console.warn(\r\n `SimpleKeyboardInstances is not defined. Dispatch cannot be called.`\r\n );\r\n throw new Error(\"INSTANCES_VAR_ERROR\");\r\n }\r\n\r\n return Object.keys(window[\"SimpleKeyboardInstances\"]).forEach(key => {\r\n callback(window[\"SimpleKeyboardInstances\"][key], key);\r\n });\r\n }\r\n\r\n /**\r\n * Adds/Modifies an entry to the `buttonTheme`. Basically a way to add a class to a button.\r\n * @param {string} buttons List of buttons to select (separated by a space).\r\n * @param {string} className Classes to give to the selected buttons (separated by space).\r\n */\r\n addButtonTheme(buttons, className) {\r\n if (!className || !buttons) return false;\r\n\r\n buttons.split(\" \").forEach(button => {\r\n className.split(\" \").forEach(classNameItem => {\r\n if (!this.options.buttonTheme) this.options.buttonTheme = [];\r\n\r\n let classNameFound = false;\r\n\r\n /**\r\n * If class is already defined, we add button to class definition\r\n */\r\n this.options.buttonTheme.map(buttonTheme => {\r\n if (buttonTheme.class.split(\" \").includes(classNameItem)) {\r\n classNameFound = true;\r\n\r\n const buttonThemeArray = buttonTheme.buttons.split(\" \");\r\n if (!buttonThemeArray.includes(button)) {\r\n classNameFound = true;\r\n buttonThemeArray.push(button);\r\n buttonTheme.buttons = buttonThemeArray.join(\" \");\r\n }\r\n }\r\n return buttonTheme;\r\n });\r\n\r\n /**\r\n * If class is not defined, we create a new entry\r\n */\r\n if (!classNameFound) {\r\n this.options.buttonTheme.push({\r\n class: classNameItem,\r\n buttons: buttons\r\n });\r\n }\r\n });\r\n });\r\n\r\n this.render();\r\n }\r\n\r\n /**\r\n * Removes/Amends an entry to the `buttonTheme`. Basically a way to remove a class previously added to a button through buttonTheme or addButtonTheme.\r\n * @param {string} buttons List of buttons to select (separated by a space).\r\n * @param {string} className Classes to give to the selected buttons (separated by space).\r\n */\r\n removeButtonTheme(buttons, className) {\r\n /**\r\n * When called with empty parameters, remove all button themes\r\n */\r\n if (!buttons && !className) {\r\n this.options.buttonTheme = [];\r\n this.render();\r\n return false;\r\n }\r\n\r\n /**\r\n * If buttons are passed and buttonTheme has items\r\n */\r\n if (\r\n buttons &&\r\n Array.isArray(this.options.buttonTheme) &&\r\n this.options.buttonTheme.length\r\n ) {\r\n const buttonArray = buttons.split(\" \");\r\n buttonArray.forEach(button => {\r\n this.options.buttonTheme.map((buttonTheme, index) => {\r\n /**\r\n * If className is set, we affect the buttons only for that class\r\n * Otherwise, we afect all classes\r\n */\r\n if (\r\n (className && className.includes(buttonTheme.class)) ||\r\n !className\r\n ) {\r\n const filteredButtonArray = buttonTheme.buttons\r\n .split(\" \")\r\n .filter(item => item !== button);\r\n\r\n /**\r\n * If buttons left, return them, otherwise, remove button Theme\r\n */\r\n if (filteredButtonArray.length) {\r\n buttonTheme.buttons = filteredButtonArray.join(\" \");\r\n } else {\r\n this.options.buttonTheme.splice(index, 1);\r\n buttonTheme = null;\r\n }\r\n }\r\n\r\n return buttonTheme;\r\n });\r\n });\r\n\r\n this.render();\r\n }\r\n }\r\n\r\n /**\r\n * Get the DOM Element of a button. If there are several buttons with the same name, an array of the DOM Elements is returned.\r\n * @param {string} button The button layout name to select\r\n */\r\n getButtonElement(button) {\r\n let output;\r\n\r\n const buttonArr = this.buttonElements[button];\r\n if (buttonArr) {\r\n if (buttonArr.length > 1) {\r\n output = buttonArr;\r\n } else {\r\n output = buttonArr[0];\r\n }\r\n }\r\n\r\n return output;\r\n }\r\n\r\n /**\r\n * This handles the \"inputPattern\" option\r\n * by checking if the provided inputPattern passes\r\n */\r\n inputPatternIsValid(inputVal) {\r\n const inputPatternRaw = this.options.inputPattern;\r\n let inputPattern;\r\n\r\n /**\r\n * Check if input pattern is global or targeted to individual inputs\r\n */\r\n if (inputPatternRaw instanceof RegExp) {\r\n inputPattern = inputPatternRaw;\r\n } else {\r\n inputPattern = inputPatternRaw[this.options.inputName];\r\n }\r\n\r\n if (inputPattern && inputVal) {\r\n const didInputMatch = inputPattern.test(inputVal);\r\n\r\n if (this.options.debug) {\r\n console.log(\r\n `inputPattern (\"${inputPattern}\"): ${\r\n didInputMatch ? \"passed\" : \"did not pass!\"\r\n }`\r\n );\r\n }\r\n\r\n return didInputMatch;\r\n } else {\r\n /**\r\n * inputPattern doesn't seem to be set for the current input, or input is empty. Pass.\r\n */\r\n return true;\r\n }\r\n }\r\n\r\n /**\r\n * Handles simple-keyboard event listeners\r\n */\r\n setEventListeners() {\r\n /**\r\n * Only first instance should set the event listeners\r\n */\r\n if (this.isFirstKeyboardInstance || !this.allKeyboardInstances) {\r\n if (this.options.debug) {\r\n console.log(`Caret handling started (${this.keyboardDOMClass})`);\r\n }\r\n\r\n /**\r\n * Event Listeners\r\n */\r\n document.addEventListener(\"keyup\", this.handleKeyUp);\r\n document.addEventListener(\"keydown\", this.handleKeyDown);\r\n document.addEventListener(\"mouseup\", this.handleMouseUp);\r\n document.addEventListener(\"touchend\", this.handleTouchEnd);\r\n }\r\n }\r\n\r\n /**\r\n * Event Handler: KeyUp\r\n */\r\n handleKeyUp(event) {\r\n this.caretEventHandler(event);\r\n\r\n if (this.options.physicalKeyboardHighlight) {\r\n this.physicalKeyboard.handleHighlightKeyUp(event);\r\n }\r\n }\r\n\r\n /**\r\n * Event Handler: KeyDown\r\n */\r\n handleKeyDown(event) {\r\n if (this.options.physicalKeyboardHighlight) {\r\n this.physicalKeyboard.handleHighlightKeyDown(event);\r\n }\r\n }\r\n\r\n /**\r\n * Event Handler: MouseUp\r\n */\r\n handleMouseUp(event) {\r\n this.caretEventHandler(event);\r\n }\r\n\r\n /**\r\n * Event Handler: TouchEnd\r\n */\r\n handleTouchEnd(event) {\r\n this.caretEventHandler(event);\r\n }\r\n\r\n /**\r\n * Called by {@link setEventListeners} when an event that warrants a cursor position update is triggered\r\n */\r\n caretEventHandler(event) {\r\n let targetTagName;\r\n if (event.target.tagName) {\r\n targetTagName = event.target.tagName.toLowerCase();\r\n }\r\n\r\n this.dispatch(instance => {\r\n if (instance.isMouseHold) {\r\n instance.isMouseHold = false;\r\n }\r\n\r\n if (\r\n (targetTagName === \"textarea\" || targetTagName === \"input\") &&\r\n !instance.options.disableCaretPositioning\r\n ) {\r\n /**\r\n * Tracks current cursor position\r\n * As keys are pressed, text will be added/removed at that position within the input.\r\n */\r\n instance.caretPosition = event.target.selectionStart;\r\n\r\n if (instance.options.debug) {\r\n console.log(\r\n \"Caret at: \",\r\n event.target.selectionStart,\r\n event.target.tagName.toLowerCase(),\r\n `(${instance.keyboardDOMClass})`\r\n );\r\n }\r\n } else if (instance.options.disableCaretPositioning) {\r\n /**\r\n * If we toggled off disableCaretPositioning, we must ensure caretPosition doesn't persist once reactivated.\r\n */\r\n instance.caretPosition = null;\r\n }\r\n });\r\n }\r\n\r\n /**\r\n * Execute an operation on each button\r\n */\r\n recurseButtons(fn) {\r\n if (!fn) return false;\r\n\r\n Object.keys(this.buttonElements).forEach(buttonName =>\r\n this.buttonElements[buttonName].forEach(fn)\r\n );\r\n }\r\n\r\n /**\r\n * Destroy keyboard listeners and DOM elements\r\n */\r\n destroy() {\r\n if (this.options.debug)\r\n console.log(\r\n `Destroying simple-keyboard instance: ${this.currentInstanceName}`\r\n );\r\n\r\n /**\r\n * Remove document listeners\r\n */\r\n document.removeEventListener(\"keyup\", this.handleKeyUp);\r\n document.removeEventListener(\"keydown\", this.handleKeyDown);\r\n document.removeEventListener(\"mouseup\", this.handleMouseUp);\r\n document.removeEventListener(\"touchend\", this.handleTouchEnd);\r\n document.onpointerup = null;\r\n document.ontouchend = null;\r\n document.ontouchcancel = null;\r\n document.onmouseup = null;\r\n\r\n /**\r\n * Remove buttons\r\n */\r\n let deleteButton = buttonElement => {\r\n buttonElement.onpointerdown = null;\r\n buttonElement.onpointerup = null;\r\n buttonElement.onpointercancel = null;\r\n buttonElement.ontouchstart = null;\r\n buttonElement.ontouchend = null;\r\n buttonElement.ontouchcancel = null;\r\n buttonElement.onclick = null;\r\n buttonElement.onmousedown = null;\r\n buttonElement.onmouseup = null;\r\n\r\n buttonElement.remove();\r\n buttonElement = null;\r\n };\r\n\r\n this.recurseButtons(deleteButton);\r\n\r\n this.recurseButtons = null;\r\n deleteButton = null;\r\n\r\n /**\r\n * Remove wrapper events\r\n */\r\n this.keyboardDOM.onpointerdown = null;\r\n this.keyboardDOM.ontouchstart = null;\r\n this.keyboardDOM.onmousedown = null;\r\n\r\n /**\r\n * Clearing keyboard wrapper\r\n */\r\n this.clear();\r\n\r\n /**\r\n * Remove instance\r\n */\r\n window[\"SimpleKeyboardInstances\"][this.currentInstanceName] = null;\r\n delete window[\"SimpleKeyboardInstances\"][this.currentInstanceName];\r\n\r\n /**\r\n * Reset initialized flag\r\n */\r\n this.initialized = false;\r\n }\r\n\r\n /**\r\n * Process buttonTheme option\r\n */\r\n getButtonThemeClasses(button) {\r\n const buttonTheme = this.options.buttonTheme;\r\n let buttonClasses = [];\r\n\r\n if (Array.isArray(buttonTheme)) {\r\n buttonTheme.forEach(themeObj => {\r\n if (\r\n themeObj.class &&\r\n typeof themeObj.class === \"string\" &&\r\n themeObj.buttons &&\r\n typeof themeObj.buttons === \"string\"\r\n ) {\r\n const themeObjClasses = themeObj.class.split(\" \");\r\n const themeObjButtons = themeObj.buttons.split(\" \");\r\n\r\n if (themeObjButtons.includes(button)) {\r\n buttonClasses = [...buttonClasses, ...themeObjClasses];\r\n }\r\n } else {\r\n console.warn(\r\n `Incorrect \"buttonTheme\". Please check the documentation.`,\r\n themeObj\r\n );\r\n }\r\n });\r\n }\r\n\r\n return buttonClasses;\r\n }\r\n\r\n /**\r\n * Process buttonAttributes option\r\n */\r\n setDOMButtonAttributes(button, callback) {\r\n const buttonAttributes = this.options.buttonAttributes;\r\n\r\n if (Array.isArray(buttonAttributes)) {\r\n buttonAttributes.forEach(attrObj => {\r\n if (\r\n attrObj.attribute &&\r\n typeof attrObj.attribute === \"string\" &&\r\n attrObj.value &&\r\n typeof attrObj.value === \"string\" &&\r\n attrObj.buttons &&\r\n typeof attrObj.buttons === \"string\"\r\n ) {\r\n const attrObjButtons = attrObj.buttons.split(\" \");\r\n\r\n if (attrObjButtons.includes(button)) {\r\n callback(attrObj.attribute, attrObj.value);\r\n }\r\n } else {\r\n console.warn(\r\n `Incorrect \"buttonAttributes\". Please check the documentation.`,\r\n attrObj\r\n );\r\n }\r\n });\r\n }\r\n }\r\n\r\n onTouchDeviceDetected() {\r\n /**\r\n * Processing autoTouchEvents\r\n */\r\n this.processAutoTouchEvents();\r\n\r\n /**\r\n * Disabling contextual window on touch devices\r\n */\r\n this.disableContextualWindow();\r\n }\r\n\r\n /**\r\n * Disabling contextual window for hg-button\r\n */\r\n /* istanbul ignore next */\r\n disableContextualWindow() {\r\n window.oncontextmenu = event => {\r\n if (event.target.classList.contains(\"hg-button\")) {\r\n event.preventDefault();\r\n event.stopPropagation();\r\n return false;\r\n }\r\n };\r\n }\r\n\r\n /**\r\n * Process autoTouchEvents option\r\n */\r\n processAutoTouchEvents() {\r\n if (this.options.autoUseTouchEvents) {\r\n this.options.useTouchEvents = true;\r\n\r\n if (this.options.debug) {\r\n console.log(\r\n `autoUseTouchEvents: Touch device detected, useTouchEvents enabled.`\r\n );\r\n }\r\n }\r\n }\r\n\r\n /**\r\n * Executes the callback function once simple-keyboard is rendered for the first time (on initialization).\r\n */\r\n onInit() {\r\n if (this.options.debug) {\r\n console.log(`${this.keyboardDOMClass} Initialized`);\r\n }\r\n\r\n /**\r\n * setEventListeners\r\n */\r\n this.setEventListeners();\r\n\r\n if (typeof this.options.onInit === \"function\") this.options.onInit();\r\n }\r\n\r\n /**\r\n * Executes the callback function before a simple-keyboard render.\r\n */\r\n beforeFirstRender() {\r\n /**\r\n * Performing actions when touch device detected\r\n */\r\n if (this.utilities.isTouchDevice()) {\r\n this.onTouchDeviceDetected();\r\n }\r\n\r\n if (typeof this.options.beforeFirstRender === \"function\")\r\n this.options.beforeFirstRender();\r\n\r\n /**\r\n * Notify about PointerEvents usage\r\n */\r\n if (\r\n this.isFirstKeyboardInstance &&\r\n this.utilities.pointerEventsSupported() &&\r\n !this.options.useTouchEvents &&\r\n !this.options.useMouseEvents\r\n ) {\r\n if (this.options.debug) {\r\n console.log(\"Using PointerEvents as it is supported by this browser\");\r\n }\r\n }\r\n\r\n /**\r\n * Notify about touch events usage\r\n */\r\n if (this.options.useTouchEvents) {\r\n if (this.options.debug) {\r\n console.log(\r\n \"useTouchEvents has been enabled. Only touch events will be used.\"\r\n );\r\n }\r\n }\r\n }\r\n\r\n /**\r\n * Executes the callback function before a simple-keyboard render.\r\n */\r\n beforeRender() {\r\n if (typeof this.options.beforeRender === \"function\")\r\n this.options.beforeRender();\r\n }\r\n\r\n /**\r\n * Executes the callback function every time simple-keyboard is rendered (e.g: when you change layouts).\r\n */\r\n onRender() {\r\n if (typeof this.options.onRender === \"function\") this.options.onRender();\r\n }\r\n\r\n /**\r\n * Executes the callback function once all modules have been loaded\r\n */\r\n onModulesLoaded() {\r\n if (typeof this.options.onModulesLoaded === \"function\")\r\n this.options.onModulesLoaded();\r\n }\r\n\r\n /**\r\n * Register module\r\n */\r\n registerModule = (name, initCallback) => {\r\n if (!this.modules[name]) this.modules[name] = {};\r\n\r\n initCallback(this.modules[name]);\r\n };\r\n\r\n /**\r\n * Load modules\r\n */\r\n loadModules() {\r\n if (Array.isArray(this.options.modules)) {\r\n this.options.modules.forEach(KeyboardModule => {\r\n const keyboardModule = new KeyboardModule();\r\n\r\n /* istanbul ignore next */\r\n if (\r\n module.constructor.name &&\r\n keyboardModule.constructor.name !== \"Function\"\r\n ) {\r\n const classStr = `module-${this.utilities.camelCase(\r\n keyboardModule.constructor.name\r\n )}`;\r\n this.keyboardPluginClasses =\r\n this.keyboardPluginClasses + ` ${classStr}`;\r\n }\r\n\r\n keyboardModule.init(this);\r\n });\r\n\r\n this.keyboardPluginClasses =\r\n this.keyboardPluginClasses + \" modules-loaded\";\r\n\r\n this.render();\r\n this.onModulesLoaded();\r\n }\r\n }\r\n\r\n /**\r\n * Get module prop\r\n */\r\n getModuleProp(name, prop) {\r\n if (!this.modules[name]) return false;\r\n\r\n return this.modules[name][prop];\r\n }\r\n\r\n /**\r\n * getModulesList\r\n */\r\n getModulesList() {\r\n return Object.keys(this.modules);\r\n }\r\n\r\n /**\r\n * Parse Row DOM containers\r\n */\r\n parseRowDOMContainers(\r\n rowDOM,\r\n rowIndex,\r\n containerStartIndexes,\r\n containerEndIndexes\r\n ) {\r\n const rowDOMArray = Array.from(rowDOM.children);\r\n let removedElements = 0;\r\n\r\n if (rowDOMArray.length) {\r\n containerStartIndexes.forEach((startIndex, arrIndex) => {\r\n const endIndex = containerEndIndexes[arrIndex];\r\n\r\n /**\r\n * If there exists a respective end index\r\n * if end index comes after start index\r\n */\r\n if (!endIndex || !(endIndex > startIndex)) {\r\n return false;\r\n }\r\n\r\n /**\r\n * Updated startIndex, endIndex\r\n * This is since the removal of buttons to place a single button container\r\n * results in a modified array size\r\n */\r\n const updated_startIndex = startIndex - removedElements;\r\n const updated_endIndex = endIndex - removedElements;\r\n\r\n /**\r\n * Create button container\r\n */\r\n const containerDOM = document.createElement(\"div\");\r\n containerDOM.className += \"hg-button-container\";\r\n const containerUID = `${this.options.layoutName}-r${rowIndex}c${arrIndex}`;\r\n containerDOM.setAttribute(\"data-skUID\", containerUID);\r\n\r\n /**\r\n * Taking elements due to be inserted into container\r\n */\r\n const containedElements = rowDOMArray.splice(\r\n updated_startIndex,\r\n updated_endIndex - updated_startIndex + 1\r\n );\r\n removedElements = updated_endIndex - updated_startIndex;\r\n\r\n /**\r\n * Inserting elements to container\r\n */\r\n containedElements.forEach(element => containerDOM.appendChild(element));\r\n\r\n /**\r\n * Adding container at correct position within rowDOMArray\r\n */\r\n rowDOMArray.splice(updated_startIndex, 0, containerDOM);\r\n\r\n /**\r\n * Clearing old rowDOM children structure\r\n */\r\n rowDOM.innerHTML = \"\";\r\n\r\n /**\r\n * Appending rowDOM new children list\r\n */\r\n rowDOMArray.forEach(element => rowDOM.appendChild(element));\r\n\r\n if (this.options.debug) {\r\n console.log(\r\n \"rowDOMContainer\",\r\n containedElements,\r\n updated_startIndex,\r\n updated_endIndex,\r\n removedElements + 1\r\n );\r\n }\r\n });\r\n }\r\n\r\n return rowDOM;\r\n }\r\n\r\n /**\r\n * getKeyboardClassString\r\n */\r\n getKeyboardClassString = (...baseDOMClasses) => {\r\n const keyboardClasses = [this.keyboardDOMClass, ...baseDOMClasses].filter(\r\n DOMClass => !!DOMClass\r\n );\r\n\r\n return keyboardClasses.join(\" \");\r\n };\r\n\r\n /**\r\n * Renders rows and buttons as per options\r\n */\r\n render() {\r\n /**\r\n * Clear keyboard\r\n */\r\n this.clear();\r\n\r\n /**\r\n * Calling beforeFirstRender\r\n */\r\n if (!this.initialized) {\r\n this.beforeFirstRender();\r\n }\r\n\r\n /**\r\n * Calling beforeRender\r\n */\r\n this.beforeRender();\r\n\r\n const layoutClass = `hg-layout-${this.options.layoutName}`;\r\n const layout = this.options.layout || getDefaultLayout();\r\n const useTouchEvents = this.options.useTouchEvents || false;\r\n const useTouchEventsClass = useTouchEvents ? \"hg-touch-events\" : \"\";\r\n const useMouseEvents = this.options.useMouseEvents || false;\r\n const disableRowButtonContainers = this.options.disableRowButtonContainers;\r\n\r\n /**\r\n * Adding themeClass, layoutClass to keyboardDOM\r\n */\r\n this.keyboardDOM.className = this.getKeyboardClassString(\r\n this.options.theme,\r\n layoutClass,\r\n this.keyboardPluginClasses,\r\n useTouchEventsClass\r\n );\r\n\r\n /**\r\n * Iterating through each row\r\n */\r\n layout[this.options.layoutName].forEach((row, rIndex) => {\r\n const rowArray = row.split(\" \");\r\n\r\n /**\r\n * Creating empty row\r\n */\r\n let rowDOM = document.createElement(\"div\");\r\n rowDOM.className += \"hg-row\";\r\n\r\n /**\r\n * Tracking container indicators in rows\r\n */\r\n const containerStartIndexes = [];\r\n const containerEndIndexes = [];\r\n\r\n /**\r\n * Iterating through each button in row\r\n */\r\n rowArray.forEach((button, bIndex) => {\r\n /**\r\n * Check if button has a container indicator\r\n */\r\n const buttonHasContainerStart =\r\n !disableRowButtonContainers &&\r\n button.includes(\"[\") &&\r\n button.length > 1;\r\n const buttonHasContainerEnd =\r\n !disableRowButtonContainers &&\r\n button.includes(\"]\") &&\r\n button.length > 1;\r\n\r\n /**\r\n * Save container start index, if applicable\r\n */\r\n if (buttonHasContainerStart) {\r\n containerStartIndexes.push(bIndex);\r\n\r\n /**\r\n * Removing indicator\r\n */\r\n button = button.replace(/\\[/g, \"\");\r\n }\r\n\r\n if (buttonHasContainerEnd) {\r\n containerEndIndexes.push(bIndex);\r\n\r\n /**\r\n * Removing indicator\r\n */\r\n button = button.replace(/\\]/g, \"\");\r\n }\r\n\r\n /**\r\n * Processing button options\r\n */\r\n const fctBtnClass = this.utilities.getButtonClass(button);\r\n const buttonDisplayName = this.utilities.getButtonDisplayName(\r\n button,\r\n this.options.display,\r\n this.options.mergeDisplay\r\n );\r\n\r\n /**\r\n * Creating button\r\n */\r\n const buttonType = this.options.useButtonTag ? \"button\" : \"div\";\r\n const buttonDOM = document.createElement(buttonType);\r\n buttonDOM.className += `hg-button ${fctBtnClass}`;\r\n\r\n /**\r\n * Adding buttonTheme\r\n */\r\n buttonDOM.classList.add(...this.getButtonThemeClasses(button));\r\n\r\n /**\r\n * Adding buttonAttributes\r\n */\r\n this.setDOMButtonAttributes(button, (attribute, value) => {\r\n buttonDOM.setAttribute(attribute, value);\r\n });\r\n\r\n this.activeButtonClass = \"hg-activeButton\";\r\n\r\n /**\r\n * Handle button click event\r\n */\r\n /* istanbul ignore next */\r\n if (\r\n this.utilities.pointerEventsSupported() &&\r\n !useTouchEvents &&\r\n !useMouseEvents\r\n ) {\r\n /**\r\n * Handle PointerEvents\r\n */\r\n buttonDOM.onpointerdown = e => {\r\n this.handleButtonClicked(button);\r\n this.handleButtonMouseDown(button, e);\r\n };\r\n buttonDOM.onpointerup = () => {\r\n this.handleButtonMouseUp(button);\r\n };\r\n buttonDOM.onpointercancel = () => {\r\n this.handleButtonMouseUp(button);\r\n };\r\n } else {\r\n /**\r\n * Fallback for browsers not supporting PointerEvents\r\n */\r\n if (useTouchEvents) {\r\n /**\r\n * Handle touch events\r\n */\r\n buttonDOM.ontouchstart = e => {\r\n this.handleButtonClicked(button);\r\n this.handleButtonMouseDown(button, e);\r\n };\r\n buttonDOM.ontouchend = () => {\r\n this.handleButtonMouseUp(button);\r\n };\r\n buttonDOM.ontouchcancel = () => {\r\n this.handleButtonMouseUp(button);\r\n };\r\n } else {\r\n /**\r\n * Handle mouse events\r\n */\r\n buttonDOM.onclick = () => {\r\n this.isMouseHold = false;\r\n this.handleButtonClicked(button);\r\n };\r\n buttonDOM.onmousedown = e => {\r\n this.handleButtonMouseDown(button, e);\r\n };\r\n buttonDOM.onmouseup = () => {\r\n this.handleButtonMouseUp(button);\r\n };\r\n }\r\n }\r\n\r\n /**\r\n * Adding identifier\r\n */\r\n buttonDOM.setAttribute(\"data-skBtn\", button);\r\n\r\n /**\r\n * Adding unique id\r\n * Since there's no limit on spawning same buttons, the unique id ensures you can style every button\r\n */\r\n const buttonUID = `${this.options.layoutName}-r${rIndex}b${bIndex}`;\r\n buttonDOM.setAttribute(\"data-skBtnUID\", buttonUID);\r\n\r\n /**\r\n * Adding button label to button\r\n */\r\n const buttonSpanDOM = document.createElement(\"span\");\r\n buttonSpanDOM.innerHTML = buttonDisplayName;\r\n buttonDOM.appendChild(buttonSpanDOM);\r\n\r\n /**\r\n * Adding to buttonElements\r\n */\r\n if (!this.buttonElements[button]) this.buttonElements[button] = [];\r\n\r\n this.buttonElements[button].push(buttonDOM);\r\n\r\n /**\r\n * Appending button to row\r\n */\r\n rowDOM.appendChild(buttonDOM);\r\n });\r\n\r\n /**\r\n * Parse containers in row\r\n */\r\n rowDOM = this.parseRowDOMContainers(\r\n rowDOM,\r\n rIndex,\r\n containerStartIndexes,\r\n containerEndIndexes\r\n );\r\n\r\n /**\r\n * Appending row to keyboard\r\n */\r\n this.keyboardDOM.appendChild(rowDOM);\r\n });\r\n\r\n /**\r\n * Calling onRender\r\n */\r\n this.onRender();\r\n\r\n if (!this.initialized) {\r\n /**\r\n * Ensures that onInit and beforeFirstRender are only called once per instantiation\r\n */\r\n this.initialized = true;\r\n\r\n /**\r\n * Handling parent events\r\n */\r\n /* istanbul ignore next */\r\n if (\r\n this.utilities.pointerEventsSupported() &&\r\n !useTouchEvents &&\r\n !useMouseEvents\r\n ) {\r\n document.onpointerup = () => this.handleButtonMouseUp();\r\n this.keyboardDOM.onpointerdown = e =>\r\n this.handleKeyboardContainerMouseDown(e);\r\n } else if (useTouchEvents) {\r\n /**\r\n * Handling ontouchend, ontouchcancel\r\n */\r\n document.ontouchend = () => this.handleButtonMouseUp();\r\n document.ontouchcancel = () => this.handleButtonMouseUp();\r\n\r\n this.keyboardDOM.ontouchstart = e =>\r\n this.handleKeyboardContainerMouseDown(e);\r\n } else if (!useTouchEvents) {\r\n /**\r\n * Handling mouseup\r\n */\r\n document.onmouseup = () => this.handleButtonMouseUp();\r\n this.keyboardDOM.onmousedown = e =>\r\n this.handleKeyboardContainerMouseDown(e);\r\n }\r\n\r\n /**\r\n * Calling onInit\r\n */\r\n this.onInit();\r\n }\r\n }\r\n}\r\n\r\nexport default SimpleKeyboard;\r\n","export const getDefaultLayout = () => {\r\n return {\r\n default: [\r\n \"` 1 2 3 4 5 6 7 8 9 0 - = {bksp}\",\r\n \"{tab} q w e r t y u i o p [ ] \\\\\",\r\n \"{lock} a s d f g h j k l ; ' {enter}\",\r\n \"{shift} z x c v b n m , . / {shift}\",\r\n \".com @ {space}\"\r\n ],\r\n shift: [\r\n \"~ ! @ # $ % ^ & * ( ) _ + {bksp}\",\r\n \"{tab} Q W E R T Y U I O P { } |\",\r\n '{lock} A S D F G H J K L : \" {enter}',\r\n \"{shift} Z X C V B N M < > ? {shift}\",\r\n \".com @ {space}\"\r\n ]\r\n };\r\n};\r\n","import Utilities from \"../services/Utilities\";\r\n\r\n/**\r\n * Physical Keyboard Service\r\n */\r\nclass PhysicalKeyboard {\r\n /**\r\n * Creates an instance of the PhysicalKeyboard service\r\n */\r\n constructor({ dispatch, getOptions }) {\r\n /**\r\n * @type {object} A simple-keyboard instance\r\n */\r\n this.dispatch = dispatch;\r\n this.getOptions = getOptions;\r\n\r\n /**\r\n * Bindings\r\n */\r\n Utilities.bindMethods(PhysicalKeyboard, this);\r\n }\r\n\r\n handleHighlightKeyDown(event) {\r\n const options = this.getOptions();\r\n const buttonPressed = this.getSimpleKeyboardLayoutKey(event);\r\n\r\n this.dispatch(instance => {\r\n const buttonDOM =\r\n instance.getButtonElement(buttonPressed) ||\r\n instance.getButtonElement(`{${buttonPressed}}`);\r\n\r\n if (buttonDOM) {\r\n buttonDOM.style.backgroundColor =\r\n options.physicalKeyboardHighlightBgColor || \"#9ab4d0\";\r\n buttonDOM.style.color =\r\n options.physicalKeyboardHighlightTextColor || \"white\";\r\n }\r\n });\r\n }\r\n\r\n handleHighlightKeyUp(event) {\r\n const buttonPressed = this.getSimpleKeyboardLayoutKey(event);\r\n\r\n this.dispatch(instance => {\r\n const buttonDOM =\r\n instance.getButtonElement(buttonPressed) ||\r\n instance.getButtonElement(`{${buttonPressed}}`);\r\n\r\n if (buttonDOM && buttonDOM.removeAttribute) {\r\n buttonDOM.removeAttribute(\"style\");\r\n }\r\n });\r\n }\r\n\r\n /**\r\n * Transforms a KeyboardEvent's \"key.code\" string into a simple-keyboard layout format\r\n * @param {object} event The KeyboardEvent\r\n */\r\n getSimpleKeyboardLayoutKey(event) {\r\n let output;\r\n\r\n if (\r\n event.code.includes(\"Numpad\") ||\r\n event.code.includes(\"Shift\") ||\r\n event.code.includes(\"Space\") ||\r\n event.code.includes(\"Backspace\") ||\r\n event.code.includes(\"Control\") ||\r\n event.code.includes(\"Alt\") ||\r\n event.code.includes(\"Meta\")\r\n ) {\r\n output = event.code;\r\n } else {\r\n output = event.key;\r\n }\r\n\r\n /**\r\n * If button is not uppercase, casting to lowercase\r\n */\r\n if (\r\n output !== output.toUpperCase() ||\r\n (event.code[0] === \"F\" &&\r\n Number.isInteger(Number(event.code[1])) &&\r\n event.code.length <= 3)\r\n ) {\r\n output = output.toLowerCase();\r\n }\r\n\r\n return output;\r\n }\r\n}\r\n\r\nexport default PhysicalKeyboard;\r\n","import SimpleKeyboard from \"./components/Keyboard\";\r\nexport default SimpleKeyboard;\r\n","module.exports = function (originalModule) {\n if (!originalModule.webpackPolyfill) {\n var module = Object.create(originalModule); // module.parent = undefined by default\n\n if (!module.children) module.children = [];\n Object.defineProperty(module, \"loaded\", {\n enumerable: true,\n get: function get() {\n return module.l;\n }\n });\n Object.defineProperty(module, \"id\", {\n enumerable: true,\n get: function get() {\n return module.i;\n }\n });\n Object.defineProperty(module, \"exports\", {\n enumerable: true\n });\n module.webpackPolyfill = 1;\n }\n\n return module;\n};"],"sourceRoot":""} \ No newline at end of file diff --git a/package.json b/package.json index 44dd8f12..4201c380 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "simple-keyboard", - "version": "2.27.85", + "version": "2.28.0", "description": "On-screen Javascript Virtual Keyboard", "main": "build/index.js", "types": "build/index.d.ts", diff --git a/src/demo/DOMElementDemo.js b/src/demo/DOMElementDemo.js new file mode 100644 index 00000000..e8a10804 --- /dev/null +++ b/src/demo/DOMElementDemo.js @@ -0,0 +1,31 @@ +import Keyboard from "../lib"; +import "./css/DOMElementDemo.css"; + +class Demo { + constructor() { + const rootDOM = + document.querySelector("#root") || document.createElement("div"); + + const keyboard1DOM = document.createElement("div"); + keyboard1DOM.className = "my-keyboard"; + + const keyboard2DOM = document.createElement("div"); + keyboard2DOM.className = "my-keyboard2"; + + /** + * Demo Start + */ + this.keyboard1 = new Keyboard(keyboard1DOM, { + onChange: input => console.log(this.keyboard1.keyboardDOMClass, input) + }); + + this.keyboard2 = new Keyboard(keyboard2DOM, { + onChange: input => console.log(this.keyboard2.keyboardDOMClass, input) + }); + + rootDOM.appendChild(keyboard1DOM); + rootDOM.appendChild(keyboard2DOM); + } +} + +export default Demo; diff --git a/src/demo/css/DOMElementDemo.css b/src/demo/css/DOMElementDemo.css new file mode 100644 index 00000000..47c2c188 --- /dev/null +++ b/src/demo/css/DOMElementDemo.css @@ -0,0 +1,14 @@ +input { + width: 100%; + height: 100px; + padding: 20px; + font-size: 20px; + border: none; + box-sizing: border-box; +} + +.my-keyboard, +.my-keyboard2 { + max-width: 850px; + margin-top: 20px; +} diff --git a/src/demo/index.js b/src/demo/index.js index a5d917f1..7b3f989f 100644 --- a/src/demo/index.js +++ b/src/demo/index.js @@ -4,9 +4,10 @@ import "./css/index.css"; * Demos */ import BasicDemo from "./BasicDemo"; -//import FullKeyboardDemo from "./FullKeyboardDemo"; -//import ButtonThemeDemo from "./ButtonThemeDemo"; -//import MultipleKeyboardsDemo from "./MultipleKeyboardsDestroyDemo"; +// import ButtonThemeDemo from "./ButtonThemeDemo"; +// import DOMElementDemo from "./DOMElementDemo"; +// import FullKeyboardDemo from "./FullKeyboardDemo"; +// import MultipleKeyboardsDemo from "./MultipleKeyboardsDestroyDemo"; /** * Selected demo diff --git a/src/demo/tests/DOMElementDemo.test.js b/src/demo/tests/DOMElementDemo.test.js new file mode 100644 index 00000000..a9254e12 --- /dev/null +++ b/src/demo/tests/DOMElementDemo.test.js @@ -0,0 +1,22 @@ +import DOMElementDemo from '../DOMElementDemo'; +import Keyboard from '../../lib/components/Keyboard'; + +it('Demo will load', () => { + new DOMElementDemo(); +}); + +it('Demo keyboards will be instantiated', () => { + const demo = new DOMElementDemo(); + expect(demo.keyboard1).toBeInstanceOf(Keyboard); + expect(demo.keyboard2).toBeInstanceOf(Keyboard); +}); + +it('Demo input change will work', () => { + const demo = new DOMElementDemo(); + + demo.keyboard1.getButtonElement("q").onclick(); + demo.keyboard2.getButtonElement("e").onclick(); + + expect(demo.keyboard1.getInput()).toBe("q"); + expect(demo.keyboard2.getInput()).toBe("e"); +}); \ No newline at end of file diff --git a/src/lib/components/Keyboard.js b/src/lib/components/Keyboard.js index 242b1802..2134783a 100644 --- a/src/lib/components/Keyboard.js +++ b/src/lib/components/Keyboard.js @@ -1,8 +1,8 @@ import "./Keyboard.css"; // Services +import { getDefaultLayout } from "../services/KeyboardLayout"; import PhysicalKeyboard from "../services/PhysicalKeyboard"; -import KeyboardLayout from "../services/KeyboardLayout"; import Utilities from "../services/Utilities"; /** @@ -18,11 +18,9 @@ class SimpleKeyboard { * @param {Array} params If first parameter is a string, it is considered the container class. The second parameter is then considered the options object. If first parameter is an object, it is considered the options object. */ constructor(...params) { - let keyboardDOMQuery = - typeof params[0] === "string" ? params[0] : ".simple-keyboard"; - let options = typeof params[0] === "object" ? params[0] : params[1]; - - if (!options) options = {}; + const { keyboardDOMClass, keyboardDOM, options = {} } = this.handleParams( + params + ); /** * Initializing Utilities @@ -41,7 +39,7 @@ class SimpleKeyboard { /** * Processing options */ - this.keyboardDOM = document.querySelector(keyboardDOMQuery); + this.keyboardDOM = keyboardDOM; /** * @type {object} @@ -101,7 +99,7 @@ class SimpleKeyboard { * This removes any dependency to input DOM elements. You can type and directly display the value in a div element, for example. * @example * // To get entered input - * let input = keyboard.getInput(); + * const input = keyboard.getInput(); * * // To clear entered input. * keyboard.clearInput(); @@ -116,7 +114,7 @@ class SimpleKeyboard { /** * @type {string} DOM class of the keyboard wrapper, normally "simple-keyboard" by default. */ - this.keyboardDOMClass = keyboardDOMQuery.split(".").join(""); + this.keyboardDOMClass = keyboardDOMClass; /** * @type {object} Contains the DOM elements of every rendered button, the key being the button's layout name (e.g.: "{enter}"). @@ -154,7 +152,7 @@ class SimpleKeyboard { */ if (this.keyboardDOM) this.render(); else { - console.warn(`"${keyboardDOMQuery}" was not found in the DOM.`); + console.warn(`".${keyboardDOMClass}" was not found in the DOM.`); throw new Error("KEYBOARD_DOM_ERROR"); } @@ -165,6 +163,56 @@ class SimpleKeyboard { this.loadModules(); } + /** + * parseParams + */ + handleParams = params => { + let keyboardDOMClass; + let keyboardDOM; + let options; + + /** + * If first parameter is a string: + * Consider it as an element's class + */ + if (typeof params[0] === "string") { + keyboardDOMClass = params[0].split(".").join(""); + keyboardDOM = document.querySelector(`.${keyboardDOMClass}`); + options = params[1]; + + /** + * If first parameter is an HTMLDivElement + * Consider it as the keyboard DOM element + */ + } else if (params[0] instanceof HTMLDivElement) { + /** + * This element must have a class, otherwise throw + */ + if (!params[0].className) { + console.warn("Any DOM element passed as parameter must have a class."); + throw new Error("KEYBOARD_DOM_CLASS_ERROR"); + } + + keyboardDOMClass = params[0].className.split(" ")[0]; + keyboardDOM = params[0]; + options = params[1]; + + /** + * Otherwise, search for .simple-keyboard DOM element + */ + } else { + keyboardDOMClass = "simple-keyboard"; + keyboardDOM = document.querySelector(`.${keyboardDOMClass}`); + options = params[0]; + } + + return { + keyboardDOMClass, + keyboardDOM, + options + }; + }; + /** * Getters */ @@ -176,7 +224,7 @@ class SimpleKeyboard { * @param {string} button The button's layout name. */ handleButtonClicked(button) { - let debug = this.options.debug; + const debug = this.options.debug; /** * Ignoring placeholder buttons @@ -192,7 +240,7 @@ class SimpleKeyboard { if (!this.input[this.options.inputName]) this.input[this.options.inputName] = ""; - let updatedInput = this.utilities.getUpdatedInput( + const updatedInput = this.utilities.getUpdatedInput( button, this.input[this.options.inputName], this.caretPosition @@ -499,7 +547,7 @@ class SimpleKeyboard { if (buttonTheme.class.split(" ").includes(classNameItem)) { classNameFound = true; - let buttonThemeArray = buttonTheme.buttons.split(" "); + const buttonThemeArray = buttonTheme.buttons.split(" "); if (!buttonThemeArray.includes(button)) { classNameFound = true; buttonThemeArray.push(button); @@ -547,8 +595,8 @@ class SimpleKeyboard { Array.isArray(this.options.buttonTheme) && this.options.buttonTheme.length ) { - let buttonArray = buttons.split(" "); - buttonArray.forEach((button, key) => { + const buttonArray = buttons.split(" "); + buttonArray.forEach(button => { this.options.buttonTheme.map((buttonTheme, index) => { /** * If className is set, we affect the buttons only for that class @@ -558,7 +606,7 @@ class SimpleKeyboard { (className && className.includes(buttonTheme.class)) || !className ) { - let filteredButtonArray = buttonTheme.buttons + const filteredButtonArray = buttonTheme.buttons .split(" ") .filter(item => item !== button); @@ -588,7 +636,7 @@ class SimpleKeyboard { getButtonElement(button) { let output; - let buttonArr = this.buttonElements[button]; + const buttonArr = this.buttonElements[button]; if (buttonArr) { if (buttonArr.length > 1) { output = buttonArr; @@ -605,7 +653,7 @@ class SimpleKeyboard { * by checking if the provided inputPattern passes */ inputPatternIsValid(inputVal) { - let inputPatternRaw = this.options.inputPattern; + const inputPatternRaw = this.options.inputPattern; let inputPattern; /** @@ -618,7 +666,7 @@ class SimpleKeyboard { } if (inputPattern && inputVal) { - let didInputMatch = inputPattern.test(inputVal); + const didInputMatch = inputPattern.test(inputVal); if (this.options.debug) { console.log( @@ -817,7 +865,7 @@ class SimpleKeyboard { * Process buttonTheme option */ getButtonThemeClasses(button) { - let buttonTheme = this.options.buttonTheme; + const buttonTheme = this.options.buttonTheme; let buttonClasses = []; if (Array.isArray(buttonTheme)) { @@ -828,8 +876,8 @@ class SimpleKeyboard { themeObj.buttons && typeof themeObj.buttons === "string" ) { - let themeObjClasses = themeObj.class.split(" "); - let themeObjButtons = themeObj.buttons.split(" "); + const themeObjClasses = themeObj.class.split(" "); + const themeObjButtons = themeObj.buttons.split(" "); if (themeObjButtons.includes(button)) { buttonClasses = [...buttonClasses, ...themeObjClasses]; @@ -850,7 +898,7 @@ class SimpleKeyboard { * Process buttonAttributes option */ setDOMButtonAttributes(button, callback) { - let buttonAttributes = this.options.buttonAttributes; + const buttonAttributes = this.options.buttonAttributes; if (Array.isArray(buttonAttributes)) { buttonAttributes.forEach(attrObj => { @@ -862,7 +910,7 @@ class SimpleKeyboard { attrObj.buttons && typeof attrObj.buttons === "string" ) { - let attrObjButtons = attrObj.buttons.split(" "); + const attrObjButtons = attrObj.buttons.split(" "); if (attrObjButtons.includes(button)) { callback(attrObj.attribute, attrObj.value); @@ -1011,19 +1059,22 @@ class SimpleKeyboard { */ loadModules() { if (Array.isArray(this.options.modules)) { - this.options.modules.forEach(Module => { - let module = new Module(); + this.options.modules.forEach(KeyboardModule => { + const keyboardModule = new KeyboardModule(); /* istanbul ignore next */ - if (module.constructor.name && module.constructor.name !== "Function") { - let classStr = `module-${this.utilities.camelCase( - module.constructor.name + if ( + keyboardModule.constructor.name && + keyboardModule.constructor.name !== "Function" + ) { + const classStr = `module-${this.utilities.camelCase( + keyboardModule.constructor.name )}`; this.keyboardPluginClasses = this.keyboardPluginClasses + ` ${classStr}`; } - module.init(this); + keyboardModule.init(this); }); this.keyboardPluginClasses = @@ -1059,12 +1110,12 @@ class SimpleKeyboard { containerStartIndexes, containerEndIndexes ) { - let rowDOMArray = Array.from(rowDOM.children); + const rowDOMArray = Array.from(rowDOM.children); let removedElements = 0; if (rowDOMArray.length) { containerStartIndexes.forEach((startIndex, arrIndex) => { - let endIndex = containerEndIndexes[arrIndex]; + const endIndex = containerEndIndexes[arrIndex]; /** * If there exists a respective end index @@ -1079,21 +1130,21 @@ class SimpleKeyboard { * This is since the removal of buttons to place a single button container * results in a modified array size */ - let updated_startIndex = startIndex - removedElements; - let updated_endIndex = endIndex - removedElements; + const updated_startIndex = startIndex - removedElements; + const updated_endIndex = endIndex - removedElements; /** * Create button container */ - let containerDOM = document.createElement("div"); + const containerDOM = document.createElement("div"); containerDOM.className += "hg-button-container"; - let containerUID = `${this.options.layoutName}-r${rowIndex}c${arrIndex}`; + const containerUID = `${this.options.layoutName}-r${rowIndex}c${arrIndex}`; containerDOM.setAttribute("data-skUID", containerUID); /** * Taking elements due to be inserted into container */ - let containedElements = rowDOMArray.splice( + const containedElements = rowDOMArray.splice( updated_startIndex, updated_endIndex - updated_startIndex + 1 ); @@ -1134,6 +1185,17 @@ class SimpleKeyboard { return rowDOM; } + /** + * getKeyboardClassString + */ + getKeyboardClassString = (...baseDOMClasses) => { + const keyboardClasses = [this.keyboardDOMClass, ...baseDOMClasses].filter( + DOMClass => !!DOMClass + ); + + return keyboardClasses.join(" "); + }; + /** * Renders rows and buttons as per options */ @@ -1155,23 +1217,28 @@ class SimpleKeyboard { */ this.beforeRender(); - let layoutClass = `hg-layout-${this.options.layoutName}`; - let layout = this.options.layout || KeyboardLayout.getDefaultLayout(); - let useTouchEvents = this.options.useTouchEvents || false; - let useTouchEventsClass = useTouchEvents ? "hg-touch-events" : ""; - let useMouseEvents = this.options.useMouseEvents || false; - let disableRowButtonContainers = this.options.disableRowButtonContainers; + const layoutClass = `hg-layout-${this.options.layoutName}`; + const layout = this.options.layout || getDefaultLayout(); + const useTouchEvents = this.options.useTouchEvents || false; + const useTouchEventsClass = useTouchEvents ? "hg-touch-events" : ""; + const useMouseEvents = this.options.useMouseEvents || false; + const disableRowButtonContainers = this.options.disableRowButtonContainers; /** * Adding themeClass, layoutClass to keyboardDOM */ - this.keyboardDOM.className += ` ${this.options.theme} ${layoutClass} ${this.keyboardPluginClasses} ${useTouchEventsClass}`; + this.keyboardDOM.className = this.getKeyboardClassString( + this.options.theme, + layoutClass, + this.keyboardPluginClasses, + useTouchEventsClass + ); /** * Iterating through each row */ layout[this.options.layoutName].forEach((row, rIndex) => { - let rowArray = row.split(" "); + const rowArray = row.split(" "); /** * Creating empty row @@ -1182,8 +1249,8 @@ class SimpleKeyboard { /** * Tracking container indicators in rows */ - let containerStartIndexes = []; - let containerEndIndexes = []; + const containerStartIndexes = []; + const containerEndIndexes = []; /** * Iterating through each button in row @@ -1192,11 +1259,11 @@ class SimpleKeyboard { /** * Check if button has a container indicator */ - let buttonHasContainerStart = + const buttonHasContainerStart = !disableRowButtonContainers && button.includes("[") && button.length > 1; - let buttonHasContainerEnd = + const buttonHasContainerEnd = !disableRowButtonContainers && button.includes("]") && button.length > 1; @@ -1225,8 +1292,8 @@ class SimpleKeyboard { /** * Processing button options */ - let fctBtnClass = this.utilities.getButtonClass(button); - let buttonDisplayName = this.utilities.getButtonDisplayName( + const fctBtnClass = this.utilities.getButtonClass(button); + const buttonDisplayName = this.utilities.getButtonDisplayName( button, this.options.display, this.options.mergeDisplay @@ -1235,8 +1302,8 @@ class SimpleKeyboard { /** * Creating button */ - let buttonType = this.options.useButtonTag ? "button" : "div"; - let buttonDOM = document.createElement(buttonType); + const buttonType = this.options.useButtonTag ? "button" : "div"; + const buttonDOM = document.createElement(buttonType); buttonDOM.className += `hg-button ${fctBtnClass}`; /** @@ -1319,13 +1386,13 @@ class SimpleKeyboard { * Adding unique id * Since there's no limit on spawning same buttons, the unique id ensures you can style every button */ - let buttonUID = `${this.options.layoutName}-r${rIndex}b${bIndex}`; + const buttonUID = `${this.options.layoutName}-r${rIndex}b${bIndex}`; buttonDOM.setAttribute("data-skBtnUID", buttonUID); /** * Adding button label to button */ - let buttonSpanDOM = document.createElement("span"); + const buttonSpanDOM = document.createElement("span"); buttonSpanDOM.innerHTML = buttonDisplayName; buttonDOM.appendChild(buttonSpanDOM); diff --git a/src/lib/components/tests/Keyboard.test.js b/src/lib/components/tests/Keyboard.test.js index e9d8d302..57be7fef 100644 --- a/src/lib/components/tests/Keyboard.test.js +++ b/src/lib/components/tests/Keyboard.test.js @@ -1338,3 +1338,26 @@ it('Keyboard recurseButtons will not work without a valid param', () => { const keyboard = new Keyboard(); expect(keyboard.recurseButtons()).toBe(false); }); + +it('Keyboard will not work with a DOM element param without class', () => { + try { + const keyboardDOM = document.createElement("div"); + new Keyboard(keyboardDOM); + expect(true).toBe(false); + } catch (e) { + expect(e.message).toBe("KEYBOARD_DOM_CLASS_ERROR"); + } +}); + +it('Keyboard will work with a DOM element param with class', () => { + try { + const keyboardClass = "my-keyboard"; + const keyboardDOM = document.createElement("div"); + keyboardDOM.className = keyboardClass; + const keyboard = new Keyboard(keyboardDOM); + + expect(keyboard.keyboardDOMClass).toBe(keyboardClass); + } catch (e) { + expect(true).toBe(false); + } +}); \ No newline at end of file diff --git a/src/lib/services/Utilities.js b/src/lib/services/Utilities.js index 1cf1b738..5109ae02 100644 --- a/src/lib/services/Utilities.js +++ b/src/lib/services/Utilities.js @@ -23,11 +23,11 @@ class Utilities { * @return {string} The classes to be added to the button */ getButtonClass(button) { - let buttonTypeClass = + const buttonTypeClass = button.includes("{") && button.includes("}") && button !== "{//}" ? "functionBtn" : "standardBtn"; - let buttonWithoutBraces = button.replace("{", "").replace("}", ""); + const buttonWithoutBraces = button.replace("{", "").replace("}", ""); let buttonNormalized = ""; if (buttonTypeClass !== "standardBtn") @@ -128,7 +128,7 @@ class Utilities { * @param {boolean} moveCaret Whether to update simple-keyboard's cursor */ getUpdatedInput(button, input, caretPos, moveCaret) { - let options = this.getOptions(); + const options = this.getOptions(); let output = input; if ( @@ -186,7 +186,7 @@ class Utilities { * @param {boolean} minus Whether the cursor should be moved to the left or not. */ updateCaretPos(length, minus) { - let newCaretPos = this.updateCaretPosAction(length, minus); + const newCaretPos = this.updateCaretPosAction(length, minus); this.dispatch(instance => { instance.caretPosition = newCaretPos; @@ -200,7 +200,7 @@ class Utilities { * @param {boolean} minus Whether the cursor should be moved to the left or not. */ updateCaretPosAction(length, minus) { - let options = this.getOptions(); + const options = this.getOptions(); let caretPosition = this.getCaretPosition(); if (minus) { @@ -253,7 +253,7 @@ class Utilities { * @param {boolean} moveCaret Whether to update simple-keyboard's cursor */ removeAt(source, position, moveCaret) { - let caretPosition = this.getCaretPosition(); + const caretPosition = this.getCaretPosition(); if (caretPosition === 0) { return source; @@ -262,7 +262,7 @@ class Utilities { let output; let prevTwoChars; let emojiMatched; - let emojiMatchedReg = /([\uD800-\uDBFF][\uDC00-\uDFFF])/g; + const emojiMatchedReg = /([\uD800-\uDBFF][\uDC00-\uDFFF])/g; /** * Emojis are made out of two characters, so we must take a custom approach to trim them. @@ -301,10 +301,10 @@ class Utilities { * @param {string} updatedInput */ handleMaxLength(inputObj, updatedInput) { - let options = this.getOptions(); - let maxLength = options.maxLength; - let currentInput = inputObj[options.inputName]; - let condition = updatedInput.length - 1 >= maxLength; + const options = this.getOptions(); + const maxLength = options.maxLength; + const currentInput = inputObj[options.inputName]; + const condition = updatedInput.length - 1 >= maxLength; if ( /** @@ -334,7 +334,7 @@ class Utilities { } if (typeof maxLength === "object") { - let condition = currentInput.length === maxLength[options.inputName]; + const condition = currentInput.length === maxLength[options.inputName]; if (options.debug) { console.log("maxLength (obj) reached:", condition); @@ -377,8 +377,8 @@ class Utilities { static bindMethods(myClass, instance) { // eslint-disable-next-line no-unused-vars - for (let myMethod of Object.getOwnPropertyNames(myClass.prototype)) { - let excludeMethod = + for (const myMethod of Object.getOwnPropertyNames(myClass.prototype)) { + const excludeMethod = myMethod === "constructor" || myMethod === "bindMethods"; if (!excludeMethod) { instance[myMethod] = instance[myMethod].bind(instance);