mirror of
https://github.com/hodgef/simple-keyboard.git
synced 2025-01-20 01:22:59 +08:00
1799 lines
72 KiB
JavaScript
1799 lines
72 KiB
JavaScript
/*!
|
||
*
|
||
* simple-keyboard v2.24.1 (Non-minified build)
|
||
* https://github.com/hodgef/simple-keyboard
|
||
*
|
||
* Copyright (c) Francisco Hodge (https://github.com/hodgef)
|
||
*
|
||
* This source code is licensed under the MIT license found in the
|
||
* LICENSE file in the root directory of this source tree.
|
||
*
|
||
*/
|
||
(function webpackUniversalModuleDefinition(root, factory) {
|
||
if (typeof exports === "object" && typeof module === "object") {
|
||
module.exports = factory();
|
||
} else if (typeof define === "function" && define.amd) {
|
||
define("SimpleKeyboard", [], factory);
|
||
} else if (typeof exports === "object") {
|
||
exports["SimpleKeyboard"] = factory();
|
||
} else {
|
||
root["SimpleKeyboard"] = factory();
|
||
}
|
||
})(window, function() {
|
||
/******/
|
||
return function(modules) {
|
||
// webpackBootstrap
|
||
/******/ // The module cache
|
||
/******/ var installedModules = {};
|
||
/******/
|
||
/******/ // The require function
|
||
/******/ function __webpack_require__(moduleId) {
|
||
/******/
|
||
/******/ // Check if module is in cache
|
||
/******/ if (installedModules[moduleId]) {
|
||
/******/ return installedModules[moduleId].exports;
|
||
/******/ }
|
||
/******/ // Create a new module (and put it into the cache)
|
||
/******/ var module = installedModules[moduleId] = {
|
||
/******/ i: moduleId,
|
||
/******/ l: false,
|
||
/******/ exports: {}
|
||
/******/ };
|
||
/******/
|
||
/******/ // Execute the module function
|
||
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
|
||
/******/
|
||
/******/ // Flag the module as loaded
|
||
/******/ module.l = true;
|
||
/******/
|
||
/******/ // Return the exports of the module
|
||
/******/ return module.exports;
|
||
/******/ }
|
||
/******/
|
||
/******/
|
||
/******/ // expose the modules object (__webpack_modules__)
|
||
/******/ __webpack_require__.m = modules;
|
||
/******/
|
||
/******/ // expose the module cache
|
||
/******/ __webpack_require__.c = installedModules;
|
||
/******/
|
||
/******/ // define getter function for harmony exports
|
||
/******/ __webpack_require__.d = function(exports, name, getter) {
|
||
/******/ if (!__webpack_require__.o(exports, name)) {
|
||
/******/ Object.defineProperty(exports, name, {
|
||
enumerable: true,
|
||
get: getter
|
||
});
|
||
/******/ }
|
||
/******/ };
|
||
/******/
|
||
/******/ // define __esModule on exports
|
||
/******/ __webpack_require__.r = function(exports) {
|
||
/******/ if (typeof Symbol !== "undefined" && Symbol.toStringTag) {
|
||
/******/ Object.defineProperty(exports, Symbol.toStringTag, {
|
||
value: "Module"
|
||
});
|
||
/******/ }
|
||
/******/ Object.defineProperty(exports, "__esModule", {
|
||
value: true
|
||
});
|
||
/******/ };
|
||
/******/
|
||
/******/ // create a fake namespace object
|
||
/******/ // mode & 1: value is a module id, require it
|
||
/******/ // mode & 2: merge all properties of value into the ns
|
||
/******/ // mode & 4: return value when already ns object
|
||
/******/ // mode & 8|1: behave like require
|
||
/******/ __webpack_require__.t = function(value, mode) {
|
||
/******/ if (mode & 1) {
|
||
value = __webpack_require__(value);
|
||
/******/ }
|
||
if (mode & 8) {
|
||
return value;
|
||
/******/ }
|
||
if (mode & 4 && typeof value === "object" && value && value.__esModule) {
|
||
return value;
|
||
/******/ }
|
||
var ns = Object.create(null);
|
||
/******/ __webpack_require__.r(ns);
|
||
/******/ Object.defineProperty(ns, "default", {
|
||
enumerable: true,
|
||
value: value
|
||
});
|
||
/******/ if (mode & 2 && typeof value != "string") {
|
||
for (var key in value) {
|
||
__webpack_require__.d(ns, key, function(key) {
|
||
return value[key];
|
||
}.bind(null, key));
|
||
/******/ }
|
||
}
|
||
return ns;
|
||
/******/ };
|
||
/******/
|
||
/******/ // getDefaultExport function for compatibility with non-harmony modules
|
||
/******/ __webpack_require__.n = function(module) {
|
||
/******/ var getter = module && module.__esModule ?
|
||
/******/ function getDefault() {
|
||
return module["default"];
|
||
} :
|
||
/******/ function getModuleExports() {
|
||
return module;
|
||
};
|
||
/******/ __webpack_require__.d(getter, "a", getter);
|
||
/******/ return getter;
|
||
/******/ };
|
||
/******/
|
||
/******/ // Object.prototype.hasOwnProperty.call
|
||
/******/ __webpack_require__.o = function(object, property) {
|
||
return Object.prototype.hasOwnProperty.call(object, property);
|
||
};
|
||
/******/
|
||
/******/ // __webpack_public_path__
|
||
/******/ __webpack_require__.p = "";
|
||
/******/
|
||
/******/
|
||
/******/ // Load entry module and return exports
|
||
/******/ return __webpack_require__(__webpack_require__.s = 0);
|
||
/******/ }
|
||
/************************************************************************/
|
||
/******/ ([
|
||
/* 0 */
|
||
/***/ function(module, exports, __webpack_require__) {
|
||
module.exports = __webpack_require__(2);
|
||
/***/ },
|
||
/* 1 */
|
||
/***/ function(module, exports, __webpack_require__) {
|
||
// extracted by mini-css-extract-plugin
|
||
/***/},
|
||
/* 2 */
|
||
/***/ function(module, __webpack_exports__, __webpack_require__) {
|
||
"use strict";
|
||
__webpack_require__.r(__webpack_exports__);
|
||
// EXTERNAL MODULE: ./src/lib/components/Keyboard.css
|
||
var Keyboard = __webpack_require__(1);
|
||
// CONCATENATED MODULE: ./src/lib/services/Utilities.js
|
||
function _typeof(obj) {
|
||
if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
|
||
_typeof = function _typeof(obj) {
|
||
return typeof obj;
|
||
};
|
||
} else {
|
||
_typeof = function _typeof(obj) {
|
||
return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
|
||
};
|
||
}
|
||
return _typeof(obj);
|
||
}
|
||
function _classCallCheck(instance, Constructor) {
|
||
if (!(instance instanceof Constructor)) {
|
||
throw new TypeError("Cannot call a class as a function");
|
||
}
|
||
}
|
||
function _defineProperties(target, props) {
|
||
for (var i = 0; i < props.length; i++) {
|
||
var descriptor = props[i];
|
||
descriptor.enumerable = descriptor.enumerable || false;
|
||
descriptor.configurable = true;
|
||
if ("value" in descriptor) {
|
||
descriptor.writable = true;
|
||
}
|
||
Object.defineProperty(target, descriptor.key, descriptor);
|
||
}
|
||
}
|
||
function _createClass(Constructor, protoProps, staticProps) {
|
||
if (protoProps) {
|
||
_defineProperties(Constructor.prototype, protoProps);
|
||
}
|
||
if (staticProps) {
|
||
_defineProperties(Constructor, staticProps);
|
||
}
|
||
return Constructor;
|
||
}
|
||
/**
|
||
* Utility Service
|
||
*/ var Utilities = /* */ function() {
|
||
/**
|
||
* Creates an instance of the Utility service
|
||
*/ function Utilities(_ref) {
|
||
var getOptions = _ref.getOptions, getCaretPosition = _ref.getCaretPosition, dispatch = _ref.dispatch;
|
||
_classCallCheck(this, Utilities);
|
||
this.getOptions = getOptions;
|
||
this.getCaretPosition = getCaretPosition;
|
||
this.dispatch = dispatch;
|
||
/**
|
||
* Bindings
|
||
*/ Utilities.bindMethods(Utilities, this);
|
||
}
|
||
/**
|
||
* Adds default classes to a given button
|
||
*
|
||
* @param {string} button The button's layout name
|
||
* @return {string} The classes to be added to the button
|
||
*/ _createClass(Utilities, [ {
|
||
key: "getButtonClass",
|
||
value: function getButtonClass(button) {
|
||
var buttonTypeClass = button.includes("{") && button.includes("}") && button !== "{//}" ? "functionBtn" : "standardBtn";
|
||
var buttonWithoutBraces = button.replace("{", "").replace("}", "");
|
||
var buttonNormalized = "";
|
||
if (buttonTypeClass !== "standardBtn") {
|
||
buttonNormalized = " hg-button-".concat(buttonWithoutBraces);
|
||
}
|
||
return "hg-".concat(buttonTypeClass).concat(buttonNormalized);
|
||
}
|
||
/**
|
||
* Default button display labels
|
||
*/ }, {
|
||
key: "getDefaultDiplay",
|
||
value: function getDefaultDiplay() {
|
||
return {
|
||
"{bksp}": "backspace",
|
||
"{backspace}": "backspace",
|
||
"{enter}": "< enter",
|
||
"{shift}": "shift",
|
||
"{shiftleft}": "shift",
|
||
"{shiftright}": "shift",
|
||
"{alt}": "alt",
|
||
"{s}": "shift",
|
||
"{tab}": "tab",
|
||
"{lock}": "caps",
|
||
"{capslock}": "caps",
|
||
"{accept}": "Submit",
|
||
"{space}": " ",
|
||
"{//}": " ",
|
||
"{esc}": "esc",
|
||
"{escape}": "esc",
|
||
"{f1}": "f1",
|
||
"{f2}": "f2",
|
||
"{f3}": "f3",
|
||
"{f4}": "f4",
|
||
"{f5}": "f5",
|
||
"{f6}": "f6",
|
||
"{f7}": "f7",
|
||
"{f8}": "f8",
|
||
"{f9}": "f9",
|
||
"{f10}": "f10",
|
||
"{f11}": "f11",
|
||
"{f12}": "f12",
|
||
"{numpaddivide}": "/",
|
||
"{numlock}": "lock",
|
||
"{arrowup}": "↑",
|
||
"{arrowleft}": "←",
|
||
"{arrowdown}": "↓",
|
||
"{arrowright}": "→",
|
||
"{prtscr}": "print",
|
||
"{scrolllock}": "scroll",
|
||
"{pause}": "pause",
|
||
"{insert}": "ins",
|
||
"{home}": "home",
|
||
"{pageup}": "up",
|
||
"{delete}": "del",
|
||
"{end}": "end",
|
||
"{pagedown}": "down",
|
||
"{numpadmultiply}": "*",
|
||
"{numpadsubtract}": "-",
|
||
"{numpadadd}": "+",
|
||
"{numpadenter}": "enter",
|
||
"{period}": ".",
|
||
"{numpaddecimal}": ".",
|
||
"{numpad0}": "0",
|
||
"{numpad1}": "1",
|
||
"{numpad2}": "2",
|
||
"{numpad3}": "3",
|
||
"{numpad4}": "4",
|
||
"{numpad5}": "5",
|
||
"{numpad6}": "6",
|
||
"{numpad7}": "7",
|
||
"{numpad8}": "8",
|
||
"{numpad9}": "9"
|
||
};
|
||
}
|
||
/**
|
||
* Returns the display (label) name for a given button
|
||
*
|
||
* @param {string} button The button's layout name
|
||
* @param {object} display The provided display option
|
||
* @param {boolean} mergeDisplay Whether the provided param value should be merged with the default one.
|
||
*/ }, {
|
||
key: "getButtonDisplayName",
|
||
value: function getButtonDisplayName(button, display, mergeDisplay) {
|
||
if (mergeDisplay) {
|
||
display = Object.assign({}, this.getDefaultDiplay(), display);
|
||
} else {
|
||
display = display || this.getDefaultDiplay();
|
||
}
|
||
return display[button] || button;
|
||
}
|
||
/**
|
||
* Returns the updated input resulting from clicking a given button
|
||
*
|
||
* @param {string} button The button's layout name
|
||
* @param {string} input The input string
|
||
* @param {number} caretPos The cursor's current position
|
||
* @param {boolean} moveCaret Whether to update simple-keyboard's cursor
|
||
*/ }, {
|
||
key: "getUpdatedInput",
|
||
value: function getUpdatedInput(button, input, caretPos, moveCaret) {
|
||
var options = this.getOptions();
|
||
var output = input;
|
||
if ((button === "{bksp}" || button === "{backspace}") && output.length > 0) {
|
||
output = this.removeAt(output, caretPos, moveCaret);
|
||
} else if (button === "{space}") {
|
||
output = this.addStringAt(output, " ", caretPos, moveCaret);
|
||
} else if (button === "{tab}" && !(typeof options.tabCharOnTab === "boolean" && options.tabCharOnTab === false)) {
|
||
output = this.addStringAt(output, "\t", caretPos, moveCaret);
|
||
} else if ((button === "{enter}" || button === "{numpadenter}") && options.newLineOnEnter) {
|
||
output = this.addStringAt(output, "\n", caretPos, moveCaret);
|
||
} else if (button.includes("numpad") && Number.isInteger(Number(button[button.length - 2]))) {
|
||
output = this.addStringAt(output, button[button.length - 2], caretPos, moveCaret);
|
||
} else if (button === "{numpaddivide}") {
|
||
output = this.addStringAt(output, "/", caretPos, moveCaret);
|
||
} else if (button === "{numpadmultiply}") {
|
||
output = this.addStringAt(output, "*", caretPos, moveCaret);
|
||
} else if (button === "{numpadsubtract}") {
|
||
output = this.addStringAt(output, "-", caretPos, moveCaret);
|
||
} else if (button === "{numpadadd}") {
|
||
output = this.addStringAt(output, "+", caretPos, moveCaret);
|
||
} else if (button === "{numpaddecimal}") {
|
||
output = this.addStringAt(output, ".", caretPos, moveCaret);
|
||
} else if (button === "{" || button === "}") {
|
||
output = this.addStringAt(output, button, caretPos, moveCaret);
|
||
} else if (!button.includes("{") && !button.includes("}")) {
|
||
output = this.addStringAt(output, button, caretPos, moveCaret);
|
||
}
|
||
return output;
|
||
}
|
||
/**
|
||
* Moves the cursor position by a given amount
|
||
*
|
||
* @param {number} length Represents by how many characters the input should be moved
|
||
* @param {boolean} minus Whether the cursor should be moved to the left or not.
|
||
*/ }, {
|
||
key: "updateCaretPos",
|
||
value: function updateCaretPos(length, minus) {
|
||
var newCaretPos = this.updateCaretPosAction(length, minus);
|
||
this.dispatch(function(instance) {
|
||
instance.caretPosition = newCaretPos;
|
||
});
|
||
}
|
||
/**
|
||
* Action method of updateCaretPos
|
||
*
|
||
* @param {number} length Represents by how many characters the input should be moved
|
||
* @param {boolean} minus Whether the cursor should be moved to the left or not.
|
||
*/ }, {
|
||
key: "updateCaretPosAction",
|
||
value: function updateCaretPosAction(length, minus) {
|
||
var options = this.getOptions();
|
||
var caretPosition = this.getCaretPosition();
|
||
if (minus) {
|
||
if (caretPosition > 0) {
|
||
caretPosition = caretPosition - length;
|
||
}
|
||
} else {
|
||
caretPosition = caretPosition + length;
|
||
}
|
||
if (options.debug) {
|
||
console.log("Caret at:", caretPosition, "(".concat(this.keyboardDOMClass, ")"));
|
||
}
|
||
return caretPosition;
|
||
}
|
||
/**
|
||
* Adds a string to the input at a given position
|
||
*
|
||
* @param {string} source The source input
|
||
* @param {string} string The string to add
|
||
* @param {number} position The (cursor) position where the string should be added
|
||
* @param {boolean} moveCaret Whether to update simple-keyboard's cursor
|
||
*/ }, {
|
||
key: "addStringAt",
|
||
value: function addStringAt(source, string, position, moveCaret) {
|
||
var output;
|
||
if (!position && position !== 0) {
|
||
output = source + string;
|
||
} else {
|
||
output = [ source.slice(0, position), string, source.slice(position) ].join("");
|
||
/**
|
||
* Avoid caret position change when maxLength is set
|
||
*/ if (!this.isMaxLengthReached()) {
|
||
if (moveCaret) {
|
||
this.updateCaretPos(string.length);
|
||
}
|
||
}
|
||
}
|
||
return output;
|
||
}
|
||
/**
|
||
* Removes an amount of characters at a given position
|
||
*
|
||
* @param {string} source The source input
|
||
* @param {number} position The (cursor) position from where the characters should be removed
|
||
* @param {boolean} moveCaret Whether to update simple-keyboard's cursor
|
||
*/ }, {
|
||
key: "removeAt",
|
||
value: function removeAt(source, position, moveCaret) {
|
||
var caretPosition = this.getCaretPosition();
|
||
if (caretPosition === 0) {
|
||
return source;
|
||
}
|
||
var output;
|
||
var prevTwoChars;
|
||
var emojiMatched;
|
||
var emojiMatchedReg = /([\uD800-\uDBFF][\uDC00-\uDFFF])/g;
|
||
/**
|
||
* Emojis are made out of two characters, so we must take a custom approach to trim them.
|
||
* For more info: https://mathiasbynens.be/notes/javascript-unicode
|
||
*/ if (position && position >= 0) {
|
||
prevTwoChars = source.substring(position - 2, position);
|
||
emojiMatched = prevTwoChars.match(emojiMatchedReg);
|
||
if (emojiMatched) {
|
||
output = source.substr(0, position - 2) + source.substr(position);
|
||
if (moveCaret) {
|
||
this.updateCaretPos(2, true);
|
||
}
|
||
} else {
|
||
output = source.substr(0, position - 1) + source.substr(position);
|
||
if (moveCaret) {
|
||
this.updateCaretPos(1, true);
|
||
}
|
||
}
|
||
} else {
|
||
prevTwoChars = source.slice(-2);
|
||
emojiMatched = prevTwoChars.match(emojiMatchedReg);
|
||
if (emojiMatched) {
|
||
output = source.slice(0, -2);
|
||
if (moveCaret) {
|
||
this.updateCaretPos(2, true);
|
||
}
|
||
} else {
|
||
output = source.slice(0, -1);
|
||
if (moveCaret) {
|
||
this.updateCaretPos(1, true);
|
||
}
|
||
}
|
||
}
|
||
return output;
|
||
}
|
||
/**
|
||
* Determines whether the maxLength has been reached. This function is called when the maxLength option it set.
|
||
*
|
||
* @param {object} inputObj
|
||
* @param {string} updatedInput
|
||
*/ }, {
|
||
key: "handleMaxLength",
|
||
value: function handleMaxLength(inputObj, updatedInput) {
|
||
var options = this.getOptions();
|
||
var maxLength = options.maxLength;
|
||
var currentInput = inputObj[options.inputName];
|
||
var condition = currentInput.length === maxLength;
|
||
if (
|
||
/**
|
||
* If pressing this button won't add more characters
|
||
* We exit out of this limiter function
|
||
*/ updatedInput.length <= currentInput.length) {
|
||
return false;
|
||
}
|
||
if (Number.isInteger(maxLength)) {
|
||
if (options.debug) {
|
||
console.log("maxLength (num) reached:", condition);
|
||
}
|
||
if (condition) {
|
||
/**
|
||
* @type {boolean} Boolean value that shows whether maxLength has been reached
|
||
*/ this.maxLengthReached = true;
|
||
return true;
|
||
} else {
|
||
this.maxLengthReached = false;
|
||
return false;
|
||
}
|
||
}
|
||
if (_typeof(maxLength) === "object") {
|
||
var _condition = currentInput.length === maxLength[options.inputName];
|
||
if (options.debug) {
|
||
console.log("maxLength (obj) reached:", _condition);
|
||
}
|
||
if (_condition) {
|
||
this.maxLengthReached = true;
|
||
return true;
|
||
} else {
|
||
this.maxLengthReached = false;
|
||
return false;
|
||
}
|
||
}
|
||
}
|
||
/**
|
||
* Gets the current value of maxLengthReached
|
||
*/ }, {
|
||
key: "isMaxLengthReached",
|
||
value: function isMaxLengthReached() {
|
||
return Boolean(this.maxLengthReached);
|
||
}
|
||
/**
|
||
* Determines whether a touch device is being used
|
||
*/ }, {
|
||
key: "isTouchDevice",
|
||
value: function isTouchDevice() {
|
||
return "ontouchstart" in window || navigator.maxTouchPoints;
|
||
}
|
||
/**
|
||
* Determines whether pointer events are supported
|
||
*/ }, {
|
||
key: "pointerEventsSupported",
|
||
value: function pointerEventsSupported() {
|
||
return window.PointerEvent;
|
||
}
|
||
/**
|
||
* Bind all methods in a given class
|
||
*/ }, {
|
||
key: "camelCase",
|
||
/**
|
||
* Transforms an arbitrary string to camelCase
|
||
*
|
||
* @param {string} string The string to transform.
|
||
*/ value: function camelCase(string) {
|
||
if (!string) {
|
||
return false;
|
||
}
|
||
return string.toLowerCase().trim().split(/[.\-_\s]/g).reduce(function(string, word) {
|
||
return word.length ? string + word[0].toUpperCase() + word.slice(1) : string;
|
||
});
|
||
}
|
||
/**
|
||
* Counts the number of duplicates in a given array
|
||
*
|
||
* @param {Array} array The haystack to search in
|
||
* @param {string} value The needle to search for
|
||
*/ }, {
|
||
key: "countInArray",
|
||
value: function countInArray(array, value) {
|
||
return array.reduce(function(n, x) {
|
||
return n + (x === value);
|
||
}, 0);
|
||
}
|
||
} ], [ {
|
||
key: "bindMethods",
|
||
value: function bindMethods(myClass, instance) {
|
||
var _iteratorNormalCompletion = true;
|
||
var _didIteratorError = false;
|
||
var _iteratorError = undefined;
|
||
try {
|
||
for (var _iterator = Object.getOwnPropertyNames(myClass.prototype)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
|
||
var myMethod = _step.value;
|
||
var excludeMethod = myMethod === "constructor" || myMethod === "bindMethods";
|
||
if (!excludeMethod) {
|
||
instance[myMethod] = instance[myMethod].bind(instance);
|
||
}
|
||
}
|
||
} catch (err) {
|
||
_didIteratorError = true;
|
||
_iteratorError = err;
|
||
} finally {
|
||
try {
|
||
if (!_iteratorNormalCompletion && _iterator.return != null) {
|
||
_iterator.return();
|
||
}
|
||
} finally {
|
||
if (_didIteratorError) {
|
||
throw _iteratorError;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
} ]);
|
||
return Utilities;
|
||
}();
|
||
/* harmony default export */ var services_Utilities = Utilities;
|
||
// CONCATENATED MODULE: ./src/lib/services/PhysicalKeyboard.js
|
||
function PhysicalKeyboard_classCallCheck(instance, Constructor) {
|
||
if (!(instance instanceof Constructor)) {
|
||
throw new TypeError("Cannot call a class as a function");
|
||
}
|
||
}
|
||
function PhysicalKeyboard_defineProperties(target, props) {
|
||
for (var i = 0; i < props.length; i++) {
|
||
var descriptor = props[i];
|
||
descriptor.enumerable = descriptor.enumerable || false;
|
||
descriptor.configurable = true;
|
||
if ("value" in descriptor) {
|
||
descriptor.writable = true;
|
||
}
|
||
Object.defineProperty(target, descriptor.key, descriptor);
|
||
}
|
||
}
|
||
function PhysicalKeyboard_createClass(Constructor, protoProps, staticProps) {
|
||
if (protoProps) {
|
||
PhysicalKeyboard_defineProperties(Constructor.prototype, protoProps);
|
||
}
|
||
if (staticProps) {
|
||
PhysicalKeyboard_defineProperties(Constructor, staticProps);
|
||
}
|
||
return Constructor;
|
||
}
|
||
/**
|
||
* Physical Keyboard Service
|
||
*/ var PhysicalKeyboard_PhysicalKeyboard = /* */ function() {
|
||
/**
|
||
* Creates an instance of the PhysicalKeyboard service
|
||
*/ function PhysicalKeyboard(_ref) {
|
||
var dispatch = _ref.dispatch, getOptions = _ref.getOptions;
|
||
PhysicalKeyboard_classCallCheck(this, PhysicalKeyboard);
|
||
/**
|
||
* @type {object} A simple-keyboard instance
|
||
*/ this.dispatch = dispatch;
|
||
this.getOptions = getOptions;
|
||
/**
|
||
* Bindings
|
||
*/ services_Utilities.bindMethods(PhysicalKeyboard, this);
|
||
}
|
||
PhysicalKeyboard_createClass(PhysicalKeyboard, [ {
|
||
key: "handleHighlightKeyDown",
|
||
value: function handleHighlightKeyDown(event) {
|
||
var options = this.getOptions();
|
||
var buttonPressed = this.getSimpleKeyboardLayoutKey(event);
|
||
this.dispatch(function(instance) {
|
||
var buttonDOM = instance.getButtonElement(buttonPressed) || instance.getButtonElement("{".concat(buttonPressed, "}"));
|
||
if (buttonDOM) {
|
||
buttonDOM.style.backgroundColor = options.physicalKeyboardHighlightBgColor || "#9ab4d0";
|
||
buttonDOM.style.color = options.physicalKeyboardHighlightTextColor || "white";
|
||
}
|
||
});
|
||
}
|
||
}, {
|
||
key: "handleHighlightKeyUp",
|
||
value: function handleHighlightKeyUp(event) {
|
||
var buttonPressed = this.getSimpleKeyboardLayoutKey(event);
|
||
this.dispatch(function(instance) {
|
||
var buttonDOM = instance.getButtonElement(buttonPressed) || instance.getButtonElement("{".concat(buttonPressed, "}"));
|
||
if (buttonDOM && buttonDOM.removeAttribute) {
|
||
buttonDOM.removeAttribute("style");
|
||
}
|
||
});
|
||
}
|
||
/**
|
||
* Transforms a KeyboardEvent's "key.code" string into a simple-keyboard layout format
|
||
* @param {object} event The KeyboardEvent
|
||
*/ }, {
|
||
key: "getSimpleKeyboardLayoutKey",
|
||
value: function getSimpleKeyboardLayoutKey(event) {
|
||
var output;
|
||
if (event.code.includes("Numpad") || event.code.includes("Shift") || event.code.includes("Space") || event.code.includes("Backspace") || event.code.includes("Control") || event.code.includes("Alt") || event.code.includes("Meta")) {
|
||
output = event.code;
|
||
} else {
|
||
output = event.key;
|
||
}
|
||
/**
|
||
* If button is not uppercase, casting to lowercase
|
||
*/ if (output !== output.toUpperCase() || event.code[0] === "F" && Number.isInteger(Number(event.code[1])) && event.code.length <= 3) {
|
||
output = output.toLowerCase();
|
||
}
|
||
return output;
|
||
}
|
||
} ]);
|
||
return PhysicalKeyboard;
|
||
}();
|
||
/* harmony default export */ var services_PhysicalKeyboard = PhysicalKeyboard_PhysicalKeyboard;
|
||
// CONCATENATED MODULE: ./src/lib/services/KeyboardLayout.js
|
||
function KeyboardLayout_classCallCheck(instance, Constructor) {
|
||
if (!(instance instanceof Constructor)) {
|
||
throw new TypeError("Cannot call a class as a function");
|
||
}
|
||
}
|
||
function KeyboardLayout_defineProperties(target, props) {
|
||
for (var i = 0; i < props.length; i++) {
|
||
var descriptor = props[i];
|
||
descriptor.enumerable = descriptor.enumerable || false;
|
||
descriptor.configurable = true;
|
||
if ("value" in descriptor) {
|
||
descriptor.writable = true;
|
||
}
|
||
Object.defineProperty(target, descriptor.key, descriptor);
|
||
}
|
||
}
|
||
function KeyboardLayout_createClass(Constructor, protoProps, staticProps) {
|
||
if (protoProps) {
|
||
KeyboardLayout_defineProperties(Constructor.prototype, protoProps);
|
||
}
|
||
if (staticProps) {
|
||
KeyboardLayout_defineProperties(Constructor, staticProps);
|
||
}
|
||
return Constructor;
|
||
}
|
||
/**
|
||
* Keyboard Layout Service
|
||
*/ var KeyboardLayout = /* */ function() {
|
||
function KeyboardLayout() {
|
||
KeyboardLayout_classCallCheck(this, KeyboardLayout);
|
||
}
|
||
KeyboardLayout_createClass(KeyboardLayout, null, [ {
|
||
key: "getDefaultLayout",
|
||
/**
|
||
* Get default simple-keyboard layout
|
||
* @return {object} The default layout (US-QWERTY)
|
||
*/ value: function getDefaultLayout() {
|
||
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}" ]
|
||
};
|
||
}
|
||
} ]);
|
||
return KeyboardLayout;
|
||
}();
|
||
/* harmony default export */ var services_KeyboardLayout = KeyboardLayout;
|
||
// CONCATENATED MODULE: ./src/lib/components/Keyboard.js
|
||
function Keyboard_typeof(obj) {
|
||
if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
|
||
Keyboard_typeof = function _typeof(obj) {
|
||
return typeof obj;
|
||
};
|
||
} else {
|
||
Keyboard_typeof = function _typeof(obj) {
|
||
return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
|
||
};
|
||
}
|
||
return Keyboard_typeof(obj);
|
||
}
|
||
function Keyboard_classCallCheck(instance, Constructor) {
|
||
if (!(instance instanceof Constructor)) {
|
||
throw new TypeError("Cannot call a class as a function");
|
||
}
|
||
}
|
||
function Keyboard_defineProperties(target, props) {
|
||
for (var i = 0; i < props.length; i++) {
|
||
var descriptor = props[i];
|
||
descriptor.enumerable = descriptor.enumerable || false;
|
||
descriptor.configurable = true;
|
||
if ("value" in descriptor) {
|
||
descriptor.writable = true;
|
||
}
|
||
Object.defineProperty(target, descriptor.key, descriptor);
|
||
}
|
||
}
|
||
function Keyboard_createClass(Constructor, protoProps, staticProps) {
|
||
if (protoProps) {
|
||
Keyboard_defineProperties(Constructor.prototype, protoProps);
|
||
}
|
||
if (staticProps) {
|
||
Keyboard_defineProperties(Constructor, staticProps);
|
||
}
|
||
return Constructor;
|
||
}
|
||
// Services
|
||
/**
|
||
* Root class for simple-keyboard
|
||
* This class:
|
||
* - Parses the options
|
||
* - Renders the rows and buttons
|
||
* - Handles button functionality
|
||
*/ var Keyboard_SimpleKeyboard = /* */ function() {
|
||
/**
|
||
* Creates an instance of 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.
|
||
*/ function SimpleKeyboard() {
|
||
var _this = this;
|
||
Keyboard_classCallCheck(this, SimpleKeyboard);
|
||
this.getOptions = function() {
|
||
return _this.options;
|
||
};
|
||
this.getCaretPosition = function() {
|
||
return _this.caretPosition;
|
||
};
|
||
this.registerModule = function(name, initCallback) {
|
||
if (!_this.modules[name]) {
|
||
_this.modules[name] = {};
|
||
}
|
||
initCallback(_this.modules[name]);
|
||
};
|
||
var keyboardDOMQuery = typeof (arguments.length <= 0 ? undefined : arguments[0]) === "string" ? arguments.length <= 0 ? undefined : arguments[0] : ".simple-keyboard";
|
||
var options = Keyboard_typeof(arguments.length <= 0 ? undefined : arguments[0]) === "object" ? arguments.length <= 0 ? undefined : arguments[0] : arguments.length <= 1 ? undefined : arguments[1];
|
||
if (!options) {
|
||
options = {};
|
||
/**
|
||
* Initializing Utilities
|
||
*/ }
|
||
this.utilities = new services_Utilities({
|
||
getOptions: this.getOptions,
|
||
getCaretPosition: this.getCaretPosition,
|
||
dispatch: this.dispatch
|
||
});
|
||
/**
|
||
* Caret position
|
||
*/ this.caretPosition = null;
|
||
/**
|
||
* Processing options
|
||
*/ this.keyboardDOM = document.querySelector(keyboardDOMQuery);
|
||
/**
|
||
* @type {object}
|
||
* @property {object} layout Modify the keyboard layout.
|
||
* @property {string} layoutName Specifies which layout should be used.
|
||
* @property {object} display Replaces variable buttons (such as {bksp}) with a human-friendly name (e.g.: “backspace”).
|
||
* @property {boolean} mergeDisplay By default, when you set the display property, you replace the default one. This setting merges them instead.
|
||
* @property {string} theme A prop to add your own css classes to the keyboard wrapper. You can add multiple classes separated by a space.
|
||
* @property {Array} buttonTheme A prop to add your own css classes to one or several buttons.
|
||
* @property {boolean} debug Runs a console.log every time a key is pressed. Displays the buttons pressed and the current input.
|
||
* @property {boolean} newLineOnEnter Specifies whether clicking the “ENTER” button will input a newline (\n) or not.
|
||
* @property {boolean} tabCharOnTab Specifies whether clicking the “TAB” button will input a tab character (\t) or not.
|
||
* @property {string} inputName Allows you to use a single simple-keyboard instance for several inputs.
|
||
* @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.
|
||
* @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.
|
||
* @property {boolean} syncInstanceInputs When set to true, this option synchronizes the internal input of every simple-keyboard instance.
|
||
* @property {boolean} physicalKeyboardHighlight Enable highlighting of keys pressed on physical keyboard.
|
||
* @property {boolean} preventMouseDownDefault Calling preventDefault for the mousedown events keeps the focus on the input.
|
||
* @property {string} physicalKeyboardHighlightTextColor Define the text color that the physical keyboard highlighted key should have.
|
||
* @property {string} physicalKeyboardHighlightBgColor Define the background color that the physical keyboard highlighted key should have.
|
||
* @property {function(button: string):string} onKeyPress Executes the callback function on key press. Returns button layout name (i.e.: “{shift}”).
|
||
* @property {function(input: string):string} onChange Executes the callback function on input change. Returns the current input’s string.
|
||
* @property {function} onRender Executes the callback function every time simple-keyboard is rendered (e.g: when you change layouts).
|
||
* @property {function} onInit Executes the callback function once simple-keyboard is rendered for the first time (on initialization).
|
||
* @property {function(inputs: object):object} onChangeAll Executes the callback function on input change. Returns the input object with all defined inputs.
|
||
* @property {boolean} useButtonTag Render buttons as a button element instead of a div element.
|
||
* @property {boolean} disableCaretPositioning A prop to ensure characters are always be added/removed at the end of the string.
|
||
* @property {object} inputPattern Restrains input(s) change to the defined regular expression pattern.
|
||
* @property {boolean} useTouchEvents Instructs simple-keyboard to use touch events instead of click events.
|
||
* @property {boolean} autoUseTouchEvents Enable useTouchEvents automatically when touch device is detected.
|
||
* @property {boolean} useMouseEvents Opt out of PointerEvents handling, falling back to the prior mouse event logic.
|
||
* @property {function} destroy Clears keyboard listeners and DOM elements.
|
||
* @property {boolean} disableButtonHold Disable button hold action.
|
||
* @property {function} onKeyReleased Executes the callback function on key release.
|
||
*/ this.options = options;
|
||
this.options.layoutName = this.options.layoutName || "default";
|
||
this.options.theme = this.options.theme || "hg-theme-default";
|
||
this.options.inputName = this.options.inputName || "default";
|
||
this.options.preventMouseDownDefault = this.options.preventMouseDownDefault || false;
|
||
/**
|
||
* @type {object} Classes identifying loaded plugins
|
||
*/ this.keyboardPluginClasses = "";
|
||
/**
|
||
* Bindings
|
||
*/ services_Utilities.bindMethods(SimpleKeyboard, this);
|
||
/**
|
||
* simple-keyboard uses a non-persistent internal input to keep track of the entered string (the variable `keyboard.input`).
|
||
* 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();
|
||
*
|
||
* // To clear entered input.
|
||
* keyboard.clearInput();
|
||
*
|
||
* @type {object}
|
||
* @property {object} default Default SimpleKeyboard internal input.
|
||
* @property {object} myInputName Example input that can be set through `options.inputName:"myInputName"`.
|
||
*/ this.input = {};
|
||
this.input[this.options.inputName] = "";
|
||
/**
|
||
* @type {string} DOM class of the keyboard wrapper, normally "simple-keyboard" by default.
|
||
*/ this.keyboardDOMClass = keyboardDOMQuery.split(".").join("");
|
||
/**
|
||
* @type {object} Contains the DOM elements of every rendered button, the key being the button's layout name (e.g.: "{enter}").
|
||
*/ this.buttonElements = {};
|
||
/**
|
||
* Simple-keyboard Instances
|
||
* This enables multiple simple-keyboard support with easier management
|
||
*/ if (!window["SimpleKeyboardInstances"]) {
|
||
window["SimpleKeyboardInstances"] = {};
|
||
}
|
||
window["SimpleKeyboardInstances"][this.utilities.camelCase(this.keyboardDOMClass)] = this;
|
||
/**
|
||
* Instance vars
|
||
*/ this.allKeyboardInstances = window["SimpleKeyboardInstances"];
|
||
this.currentInstanceName = this.utilities.camelCase(this.keyboardDOMClass);
|
||
this.keyboardInstanceNames = Object.keys(window["SimpleKeyboardInstances"]);
|
||
this.isFirstKeyboardInstance = this.keyboardInstanceNames[0] === this.currentInstanceName;
|
||
/**
|
||
* Physical Keyboard support
|
||
*/ this.physicalKeyboard = new services_PhysicalKeyboard({
|
||
dispatch: this.dispatch,
|
||
getOptions: this.getOptions
|
||
});
|
||
/**
|
||
* Rendering keyboard
|
||
*/ if (this.keyboardDOM) {
|
||
this.render();
|
||
} else {
|
||
console.warn('"'.concat(keyboardDOMQuery, '" was not found in the DOM.'));
|
||
throw new Error("KEYBOARD_DOM_ERROR");
|
||
}
|
||
/**
|
||
* Modules
|
||
*/ this.modules = {};
|
||
this.loadModules();
|
||
}
|
||
/**
|
||
* Getters
|
||
*/ Keyboard_createClass(SimpleKeyboard, [ {
|
||
key: "handleButtonClicked",
|
||
/**
|
||
* Handles clicks made to keyboard buttons
|
||
* @param {string} button The button's layout name.
|
||
*/ value: function handleButtonClicked(button) {
|
||
var debug = this.options.debug;
|
||
/**
|
||
* Ignoring placeholder buttons
|
||
*/ if (button === "{//}") {
|
||
return false;
|
||
/**
|
||
* Calling onKeyPress
|
||
*/ }
|
||
if (typeof this.options.onKeyPress === "function") {
|
||
this.options.onKeyPress(button);
|
||
}
|
||
if (!this.input[this.options.inputName]) {
|
||
this.input[this.options.inputName] = "";
|
||
}
|
||
var updatedInput = this.utilities.getUpdatedInput(button, this.input[this.options.inputName], this.caretPosition);
|
||
if (// If input will change as a result of this button press
|
||
this.input[this.options.inputName] !== updatedInput && (// This pertains to the "inputPattern" option:
|
||
// If inputPattern isn't set
|
||
!this.options.inputPattern || // Or, if it is set and if the pattern is valid - we proceed.
|
||
this.options.inputPattern && this.inputPatternIsValid(updatedInput))) {
|
||
/**
|
||
* If maxLength and handleMaxLength yield true, halting
|
||
*/ if (this.options.maxLength && this.utilities.handleMaxLength(this.input, updatedInput)) {
|
||
return false;
|
||
}
|
||
this.input[this.options.inputName] = this.utilities.getUpdatedInput(button, this.input[this.options.inputName], this.caretPosition, true);
|
||
if (debug) {
|
||
console.log("Input changed:", this.input);
|
||
/**
|
||
* Enforce syncInstanceInputs, if set
|
||
*/ }
|
||
if (this.options.syncInstanceInputs) {
|
||
this.syncInstanceInputs(this.input);
|
||
/**
|
||
* Calling onChange
|
||
*/ }
|
||
if (typeof this.options.onChange === "function") {
|
||
this.options.onChange(this.input[this.options.inputName]);
|
||
/**
|
||
* Calling onChangeAll
|
||
*/ }
|
||
if (typeof this.options.onChangeAll === "function") {
|
||
this.options.onChangeAll(this.input);
|
||
}
|
||
}
|
||
if (debug) {
|
||
console.log("Key pressed:", button);
|
||
}
|
||
}
|
||
/**
|
||
* Handles button mousedown
|
||
*/ /* istanbul ignore next */ }, {
|
||
key: "handleButtonMouseDown",
|
||
value: function handleButtonMouseDown(button, e) {
|
||
var _this2 = this;
|
||
/**
|
||
* Handle event options
|
||
*/ if (this.options.preventMouseDownDefault) {
|
||
e.preventDefault();
|
||
}
|
||
if (this.options.stopMouseDownPropagation) {
|
||
e.stopPropagation();
|
||
/**
|
||
* @type {boolean} Whether the mouse is being held onKeyPress
|
||
*/ }
|
||
this.isMouseHold = true;
|
||
if (this.holdInteractionTimeout) {
|
||
clearTimeout(this.holdInteractionTimeout);
|
||
}
|
||
if (this.holdTimeout) {
|
||
clearTimeout(this.holdTimeout);
|
||
/**
|
||
* @type {object} Time to wait until a key hold is detected
|
||
*/ }
|
||
if (!this.options.disableButtonHold) {
|
||
this.holdTimeout = setTimeout(function() {
|
||
if (_this2.isMouseHold && (!button.includes("{") && !button.includes("}") || button === "{delete}" || button === "{backspace}" || button === "{bksp}" || button === "{space}" || button === "{tab}")) {
|
||
if (_this2.options.debug) {
|
||
console.log("Button held:", button);
|
||
}
|
||
_this2.handleButtonHold(button, e);
|
||
}
|
||
clearTimeout(_this2.holdTimeout);
|
||
}, 500);
|
||
}
|
||
}
|
||
/**
|
||
* Handles button mouseup
|
||
*/ }, {
|
||
key: "handleButtonMouseUp",
|
||
value: function handleButtonMouseUp(button) {
|
||
this.isMouseHold = false;
|
||
if (this.holdInteractionTimeout) {
|
||
clearTimeout(this.holdInteractionTimeout);
|
||
/**
|
||
* Calling onKeyReleased
|
||
*/ }
|
||
if (button && typeof this.options.onKeyReleased === "function") {
|
||
this.options.onKeyReleased(button);
|
||
}
|
||
}
|
||
/**
|
||
* Handles button hold
|
||
*/ /* istanbul ignore next */ }, {
|
||
key: "handleButtonHold",
|
||
value: function handleButtonHold(button) {
|
||
var _this3 = this;
|
||
if (this.holdInteractionTimeout) {
|
||
clearTimeout(this.holdInteractionTimeout);
|
||
/**
|
||
* @type {object} Timeout dictating the speed of key hold iterations
|
||
*/ }
|
||
this.holdInteractionTimeout = setTimeout(function() {
|
||
if (_this3.isMouseHold) {
|
||
_this3.handleButtonClicked(button);
|
||
_this3.handleButtonHold(button);
|
||
} else {
|
||
clearTimeout(_this3.holdInteractionTimeout);
|
||
}
|
||
}, 100);
|
||
}
|
||
/**
|
||
* Send a command to all simple-keyboard instances (if you have several instances).
|
||
*/ }, {
|
||
key: "syncInstanceInputs",
|
||
value: function syncInstanceInputs() {
|
||
var _this4 = this;
|
||
this.dispatch(function(instance) {
|
||
instance.replaceInput(_this4.input);
|
||
instance.caretPosition = _this4.caretPosition;
|
||
});
|
||
}
|
||
/**
|
||
* Clear the keyboard’s input.
|
||
* @param {string} [inputName] optional - the internal input to select
|
||
*/ }, {
|
||
key: "clearInput",
|
||
value: function clearInput(inputName) {
|
||
inputName = inputName || this.options.inputName;
|
||
this.input[inputName] = "";
|
||
/**
|
||
* Reset caretPosition
|
||
*/ this.caretPosition = 0;
|
||
/**
|
||
* Enforce syncInstanceInputs, if set
|
||
*/ if (this.options.syncInstanceInputs) {
|
||
this.syncInstanceInputs(this.input);
|
||
}
|
||
}
|
||
/**
|
||
* Get the keyboard’s input (You can also get it from the onChange prop).
|
||
* @param {string} [inputName] optional - the internal input to select
|
||
*/ }, {
|
||
key: "getInput",
|
||
value: function getInput(inputName) {
|
||
inputName = inputName || this.options.inputName;
|
||
/**
|
||
* Enforce syncInstanceInputs, if set
|
||
*/ if (this.options.syncInstanceInputs) {
|
||
this.syncInstanceInputs(this.input);
|
||
}
|
||
return this.input[inputName];
|
||
}
|
||
/**
|
||
* Set the keyboard’s input.
|
||
* @param {string} input the input value
|
||
* @param {string} inputName optional - the internal input to select
|
||
*/ }, {
|
||
key: "setInput",
|
||
value: function setInput(input, inputName) {
|
||
inputName = inputName || this.options.inputName;
|
||
this.input[inputName] = input;
|
||
/**
|
||
* Enforce syncInstanceInputs, if set
|
||
*/ if (this.options.syncInstanceInputs) {
|
||
this.syncInstanceInputs(this.input);
|
||
}
|
||
}
|
||
/**
|
||
* Replace the input object (`keyboard.input`)
|
||
* @param {object} inputObj The input object
|
||
*/ }, {
|
||
key: "replaceInput",
|
||
value: function replaceInput(inputObj) {
|
||
this.input = inputObj;
|
||
}
|
||
/**
|
||
* Set new option or modify existing ones after initialization.
|
||
* @param {object} options The options to set
|
||
*/ }, {
|
||
key: "setOptions",
|
||
value: function setOptions(options) {
|
||
options = options || {};
|
||
this.options = Object.assign(this.options, options);
|
||
/**
|
||
* Some option changes require adjustments before re-render
|
||
*/ this.onSetOptions(options);
|
||
/**
|
||
* Rendering
|
||
*/ this.render();
|
||
}
|
||
/**
|
||
* Executing actions depending on changed options
|
||
* @param {object} options The options to set
|
||
*/ }, {
|
||
key: "onSetOptions",
|
||
value: function onSetOptions(options) {
|
||
if (options.inputName) {
|
||
/**
|
||
* inputName changed. This requires a caretPosition reset
|
||
*/ if (this.options.debug) {
|
||
console.log("inputName changed. caretPosition reset.");
|
||
}
|
||
this.caretPosition = null;
|
||
}
|
||
}
|
||
/**
|
||
* Remove all keyboard rows and reset keyboard values.
|
||
* Used interally between re-renders.
|
||
*/ }, {
|
||
key: "clear",
|
||
value: function clear() {
|
||
this.keyboardDOM.innerHTML = "";
|
||
this.keyboardDOM.className = this.keyboardDOMClass;
|
||
this.buttonElements = {};
|
||
}
|
||
/**
|
||
* Send a command to all simple-keyboard instances at once (if you have multiple instances).
|
||
* @param {function(instance: object, key: string)} callback Function to run on every instance
|
||
*/ }, {
|
||
key: "dispatch",
|
||
value: function dispatch(callback) {
|
||
if (!window["SimpleKeyboardInstances"]) {
|
||
console.warn("SimpleKeyboardInstances is not defined. Dispatch cannot be called.");
|
||
throw new Error("INSTANCES_VAR_ERROR");
|
||
}
|
||
return Object.keys(window["SimpleKeyboardInstances"]).forEach(function(key) {
|
||
callback(window["SimpleKeyboardInstances"][key], key);
|
||
});
|
||
}
|
||
/**
|
||
* Adds/Modifies an entry to the `buttonTheme`. Basically a way to add a class to a button.
|
||
* @param {string} buttons List of buttons to select (separated by a space).
|
||
* @param {string} className Classes to give to the selected buttons (separated by space).
|
||
*/ }, {
|
||
key: "addButtonTheme",
|
||
value: function addButtonTheme(buttons, className) {
|
||
var _this5 = this;
|
||
if (!className || !buttons) {
|
||
return false;
|
||
}
|
||
buttons.split(" ").forEach(function(button) {
|
||
className.split(" ").forEach(function(classNameItem) {
|
||
if (!_this5.options.buttonTheme) {
|
||
_this5.options.buttonTheme = [];
|
||
}
|
||
var classNameFound = false;
|
||
/**
|
||
* If class is already defined, we add button to class definition
|
||
*/ _this5.options.buttonTheme.map(function(buttonTheme) {
|
||
if (buttonTheme.class.split(" ").includes(classNameItem)) {
|
||
classNameFound = true;
|
||
var buttonThemeArray = buttonTheme.buttons.split(" ");
|
||
if (!buttonThemeArray.includes(button)) {
|
||
classNameFound = true;
|
||
buttonThemeArray.push(button);
|
||
buttonTheme.buttons = buttonThemeArray.join(" ");
|
||
}
|
||
}
|
||
return buttonTheme;
|
||
});
|
||
/**
|
||
* If class is not defined, we create a new entry
|
||
*/ if (!classNameFound) {
|
||
_this5.options.buttonTheme.push({
|
||
class: classNameItem,
|
||
buttons: buttons
|
||
});
|
||
}
|
||
});
|
||
});
|
||
this.render();
|
||
}
|
||
/**
|
||
* Removes/Amends an entry to the `buttonTheme`. Basically a way to remove a class previously added to a button through buttonTheme or addButtonTheme.
|
||
* @param {string} buttons List of buttons to select (separated by a space).
|
||
* @param {string} className Classes to give to the selected buttons (separated by space).
|
||
*/ }, {
|
||
key: "removeButtonTheme",
|
||
value: function removeButtonTheme(buttons, className) {
|
||
var _this6 = this;
|
||
/**
|
||
* When called with empty parameters, remove all button themes
|
||
*/ if (!buttons && !className) {
|
||
this.options.buttonTheme = [];
|
||
this.render();
|
||
return false;
|
||
}
|
||
/**
|
||
* If buttons are passed and buttonTheme has items
|
||
*/ if (buttons && Array.isArray(this.options.buttonTheme) && this.options.buttonTheme.length) {
|
||
var buttonArray = buttons.split(" ");
|
||
buttonArray.forEach(function(button, key) {
|
||
_this6.options.buttonTheme.map(function(buttonTheme, index) {
|
||
/**
|
||
* If className is set, we affect the buttons only for that class
|
||
* Otherwise, we afect all classes
|
||
*/ if (className && className.includes(buttonTheme.class) || !className) {
|
||
var filteredButtonArray = buttonTheme.buttons.split(" ").filter(function(item) {
|
||
return item !== button;
|
||
});
|
||
/**
|
||
* If buttons left, return them, otherwise, remove button Theme
|
||
*/ if (filteredButtonArray.length) {
|
||
buttonTheme.buttons = filteredButtonArray.join(" ");
|
||
} else {
|
||
_this6.options.buttonTheme.splice(index, 1);
|
||
buttonTheme = null;
|
||
}
|
||
}
|
||
return buttonTheme;
|
||
});
|
||
});
|
||
this.render();
|
||
}
|
||
}
|
||
/**
|
||
* Get the DOM Element of a button. If there are several buttons with the same name, an array of the DOM Elements is returned.
|
||
* @param {string} button The button layout name to select
|
||
*/ }, {
|
||
key: "getButtonElement",
|
||
value: function getButtonElement(button) {
|
||
var output;
|
||
var buttonArr = this.buttonElements[button];
|
||
if (buttonArr) {
|
||
if (buttonArr.length > 1) {
|
||
output = buttonArr;
|
||
} else {
|
||
output = buttonArr[0];
|
||
}
|
||
}
|
||
return output;
|
||
}
|
||
/**
|
||
* This handles the "inputPattern" option
|
||
* by checking if the provided inputPattern passes
|
||
*/ }, {
|
||
key: "inputPatternIsValid",
|
||
value: function inputPatternIsValid(inputVal) {
|
||
var inputPatternRaw = this.options.inputPattern;
|
||
var inputPattern;
|
||
/**
|
||
* Check if input pattern is global or targeted to individual inputs
|
||
*/ if (inputPatternRaw instanceof RegExp) {
|
||
inputPattern = inputPatternRaw;
|
||
} else {
|
||
inputPattern = inputPatternRaw[this.options.inputName];
|
||
}
|
||
if (inputPattern && inputVal) {
|
||
var didInputMatch = inputPattern.test(inputVal);
|
||
if (this.options.debug) {
|
||
console.log('inputPattern ("'.concat(inputPattern, '"): ').concat(didInputMatch ? "passed" : "did not pass!"));
|
||
}
|
||
return didInputMatch;
|
||
} else {
|
||
/**
|
||
* inputPattern doesn't seem to be set for the current input, or input is empty. Pass.
|
||
*/ return true;
|
||
}
|
||
}
|
||
/**
|
||
* Handles simple-keyboard event listeners
|
||
*/ }, {
|
||
key: "setEventListeners",
|
||
value: function setEventListeners() {
|
||
/**
|
||
* Only first instance should set the event listeners
|
||
*/ if (this.isFirstKeyboardInstance || !this.allKeyboardInstances) {
|
||
if (this.options.debug) {
|
||
console.log("Caret handling started (".concat(this.keyboardDOMClass, ")"));
|
||
}
|
||
/**
|
||
* Event Listeners
|
||
*/ document.addEventListener("keyup", this.handleKeyUp);
|
||
document.addEventListener("keydown", this.handleKeyDown);
|
||
document.addEventListener("mouseup", this.handleMouseUp);
|
||
document.addEventListener("touchend", this.handleTouchEnd);
|
||
}
|
||
}
|
||
/**
|
||
* Event Handler: KeyUp
|
||
*/ }, {
|
||
key: "handleKeyUp",
|
||
value: function handleKeyUp(event) {
|
||
this.caretEventHandler(event);
|
||
if (this.options.physicalKeyboardHighlight) {
|
||
this.physicalKeyboard.handleHighlightKeyUp(event);
|
||
}
|
||
}
|
||
/**
|
||
* Event Handler: KeyDown
|
||
*/ }, {
|
||
key: "handleKeyDown",
|
||
value: function handleKeyDown(event) {
|
||
if (this.options.physicalKeyboardHighlight) {
|
||
this.physicalKeyboard.handleHighlightKeyDown(event);
|
||
}
|
||
}
|
||
/**
|
||
* Event Handler: MouseUp
|
||
*/ }, {
|
||
key: "handleMouseUp",
|
||
value: function handleMouseUp(event) {
|
||
this.caretEventHandler(event);
|
||
}
|
||
/**
|
||
* Event Handler: TouchEnd
|
||
*/ }, {
|
||
key: "handleTouchEnd",
|
||
value: function handleTouchEnd(event) {
|
||
this.caretEventHandler(event);
|
||
}
|
||
/**
|
||
* Called by {@link setEventListeners} when an event that warrants a cursor position update is triggered
|
||
*/ }, {
|
||
key: "caretEventHandler",
|
||
value: function caretEventHandler(event) {
|
||
var targetTagName;
|
||
if (event.target.tagName) {
|
||
targetTagName = event.target.tagName.toLowerCase();
|
||
}
|
||
this.dispatch(function(instance) {
|
||
if (instance.isMouseHold) {
|
||
instance.isMouseHold = false;
|
||
}
|
||
if ((targetTagName === "textarea" || targetTagName === "input") && !instance.options.disableCaretPositioning) {
|
||
/**
|
||
* Tracks current cursor position
|
||
* As keys are pressed, text will be added/removed at that position within the input.
|
||
*/ instance.caretPosition = event.target.selectionStart;
|
||
if (instance.options.debug) {
|
||
console.log("Caret at: ", event.target.selectionStart, event.target.tagName.toLowerCase(), "(".concat(instance.keyboardDOMClass, ")"));
|
||
}
|
||
} else if (instance.options.disableCaretPositioning) {
|
||
/**
|
||
* If we toggled off disableCaretPositioning, we must ensure caretPosition doesn't persist once reactivated.
|
||
*/ instance.caretPosition = null;
|
||
}
|
||
});
|
||
}
|
||
/**
|
||
* Destroy keyboard listeners and DOM elements
|
||
*/ }, {
|
||
key: "destroy",
|
||
value: function destroy() {
|
||
/**
|
||
* Remove listeners
|
||
*/ document.removeEventListener("keyup", this.handleKeyUp);
|
||
document.removeEventListener("keydown", this.handleKeyDown);
|
||
document.removeEventListener("mouseup", this.handleMouseUp);
|
||
document.removeEventListener("touchend", this.handleTouchEnd);
|
||
/**
|
||
* Clear DOM
|
||
*/ this.clear();
|
||
}
|
||
/**
|
||
* Process buttonTheme option
|
||
*/ }, {
|
||
key: "getButtonTheme",
|
||
value: function getButtonTheme() {
|
||
var _this7 = this;
|
||
var buttonThemesParsed = {};
|
||
this.options.buttonTheme.forEach(function(themeObj) {
|
||
if (themeObj.buttons && themeObj.class) {
|
||
var themeButtons;
|
||
if (typeof themeObj.buttons === "string") {
|
||
themeButtons = themeObj.buttons.split(" ");
|
||
}
|
||
if (themeButtons) {
|
||
themeButtons.forEach(function(themeButton) {
|
||
var themeParsed = buttonThemesParsed[themeButton];
|
||
// If the button has already been added
|
||
if (themeParsed) {
|
||
// Making sure we don't add duplicate classes, even when buttonTheme has duplicates
|
||
if (!_this7.utilities.countInArray(themeParsed.split(" "), themeObj.class)) {
|
||
buttonThemesParsed[themeButton] = "".concat(themeParsed, " ").concat(themeObj.class);
|
||
}
|
||
} else {
|
||
buttonThemesParsed[themeButton] = themeObj.class;
|
||
}
|
||
});
|
||
}
|
||
} else {
|
||
console.warn('buttonTheme row is missing the "buttons" or the "class". Please check the documentation.');
|
||
}
|
||
});
|
||
return buttonThemesParsed;
|
||
}
|
||
}, {
|
||
key: "onTouchDeviceDetected",
|
||
value: function onTouchDeviceDetected() {
|
||
/**
|
||
* Processing autoTouchEvents
|
||
*/ this.processAutoTouchEvents();
|
||
/**
|
||
* Disabling contextual window on touch devices
|
||
*/ this.disableContextualWindow();
|
||
}
|
||
/**
|
||
* Disabling contextual window for hg-button
|
||
*/ /* istanbul ignore next */ }, {
|
||
key: "disableContextualWindow",
|
||
value: function disableContextualWindow() {
|
||
window.oncontextmenu = function(event) {
|
||
if (event.target.classList.contains("hg-button")) {
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
return false;
|
||
}
|
||
};
|
||
}
|
||
/**
|
||
* Process autoTouchEvents option
|
||
*/ }, {
|
||
key: "processAutoTouchEvents",
|
||
value: function processAutoTouchEvents() {
|
||
if (this.options.autoUseTouchEvents) {
|
||
this.options.useTouchEvents = true;
|
||
if (this.options.debug) {
|
||
console.log("autoUseTouchEvents: Touch device detected, useTouchEvents enabled.");
|
||
}
|
||
}
|
||
}
|
||
/**
|
||
* Executes the callback function once simple-keyboard is rendered for the first time (on initialization).
|
||
*/ }, {
|
||
key: "onInit",
|
||
value: function onInit() {
|
||
if (this.options.debug) {
|
||
console.log("".concat(this.keyboardDOMClass, " Initialized"));
|
||
}
|
||
/**
|
||
* setEventListeners
|
||
*/ this.setEventListeners();
|
||
if (typeof this.options.onInit === "function") {
|
||
this.options.onInit();
|
||
}
|
||
}
|
||
/**
|
||
* Executes the callback function before a simple-keyboard render.
|
||
*/ }, {
|
||
key: "beforeFirstRender",
|
||
value: function beforeFirstRender() {
|
||
/**
|
||
* Performing actions when touch device detected
|
||
*/ if (this.utilities.isTouchDevice()) {
|
||
this.onTouchDeviceDetected();
|
||
}
|
||
if (typeof this.options.beforeFirstRender === "function") {
|
||
this.options.beforeFirstRender();
|
||
/**
|
||
* Notify about PointerEvents usage
|
||
*/ }
|
||
if (this.isFirstKeyboardInstance && this.utilities.pointerEventsSupported() && !this.options.useTouchEvents && !this.options.useMouseEvents) {
|
||
if (this.options.debug) {
|
||
console.log("Using PointerEvents as it is supported by this browser");
|
||
}
|
||
}
|
||
/**
|
||
* Notify about touch events usage
|
||
*/ if (this.options.useTouchEvents) {
|
||
if (this.options.debug) {
|
||
console.log("useTouchEvents has been enabled. Only touch events will be used.");
|
||
}
|
||
}
|
||
}
|
||
/**
|
||
* Executes the callback function before a simple-keyboard render.
|
||
*/ }, {
|
||
key: "beforeRender",
|
||
value: function beforeRender() {
|
||
if (typeof this.options.beforeRender === "function") {
|
||
this.options.beforeRender();
|
||
}
|
||
}
|
||
/**
|
||
* Executes the callback function every time simple-keyboard is rendered (e.g: when you change layouts).
|
||
*/ }, {
|
||
key: "onRender",
|
||
value: function onRender() {
|
||
if (typeof this.options.onRender === "function") {
|
||
this.options.onRender();
|
||
}
|
||
}
|
||
/**
|
||
* Executes the callback function once all modules have been loaded
|
||
*/ }, {
|
||
key: "onModulesLoaded",
|
||
value: function onModulesLoaded() {
|
||
if (typeof this.options.onModulesLoaded === "function") {
|
||
this.options.onModulesLoaded();
|
||
}
|
||
}
|
||
/**
|
||
* Register module
|
||
*/ }, {
|
||
key: "loadModules",
|
||
/**
|
||
* Load modules
|
||
*/ value: function loadModules() {
|
||
var _this8 = this;
|
||
if (Array.isArray(this.options.modules)) {
|
||
this.options.modules.forEach(function(Module) {
|
||
var module = new Module();
|
||
/* istanbul ignore next */ if (module.constructor.name && module.constructor.name !== "Function") {
|
||
var classStr = "module-".concat(_this8.utilities.camelCase(module.constructor.name));
|
||
_this8.keyboardPluginClasses = _this8.keyboardPluginClasses + " ".concat(classStr);
|
||
}
|
||
module.init(_this8);
|
||
});
|
||
this.keyboardPluginClasses = this.keyboardPluginClasses + " modules-loaded";
|
||
this.render();
|
||
this.onModulesLoaded();
|
||
}
|
||
}
|
||
/**
|
||
* Get module prop
|
||
*/ }, {
|
||
key: "getModuleProp",
|
||
value: function getModuleProp(name, prop) {
|
||
if (!this.modules[name]) {
|
||
return false;
|
||
}
|
||
return this.modules[name][prop];
|
||
}
|
||
/**
|
||
* getModulesList
|
||
*/ }, {
|
||
key: "getModulesList",
|
||
value: function getModulesList() {
|
||
return Object.keys(this.modules);
|
||
}
|
||
/**
|
||
* Parse Row DOM containers
|
||
*/ }, {
|
||
key: "parseRowDOMContainers",
|
||
value: function parseRowDOMContainers(rowDOM, rowIndex, containerStartIndexes, containerEndIndexes) {
|
||
var _this9 = this;
|
||
var rowDOMArray = Array.from(rowDOM.children);
|
||
var removedElements = 0;
|
||
if (rowDOMArray.length) {
|
||
containerStartIndexes.forEach(function(startIndex, arrIndex) {
|
||
var endIndex = containerEndIndexes[arrIndex];
|
||
/**
|
||
* If there exists a respective end index
|
||
* if end index comes after start index
|
||
*/ if (!endIndex || !(endIndex > startIndex)) {
|
||
return false;
|
||
}
|
||
/**
|
||
* Updated startIndex, endIndex
|
||
* This is since the removal of buttons to place a single button container
|
||
* results in a modified array size
|
||
*/ var updated_startIndex = startIndex - removedElements;
|
||
var updated_endIndex = endIndex - removedElements;
|
||
/**
|
||
* Create button container
|
||
*/ var containerDOM = document.createElement("div");
|
||
containerDOM.className += "hg-button-container";
|
||
var containerUID = "".concat(_this9.options.layoutName, "-r").concat(rowIndex, "c").concat(arrIndex);
|
||
containerDOM.setAttribute("data-skUID", containerUID);
|
||
/**
|
||
* Taking elements due to be inserted into container
|
||
*/ var containedElements = rowDOMArray.splice(updated_startIndex, updated_endIndex - updated_startIndex + 1);
|
||
removedElements = updated_endIndex - updated_startIndex;
|
||
/**
|
||
* Inserting elements to container
|
||
*/ containedElements.forEach(function(element) {
|
||
return containerDOM.appendChild(element);
|
||
});
|
||
/**
|
||
* Adding container at correct position within rowDOMArray
|
||
*/ rowDOMArray.splice(updated_startIndex, 0, containerDOM);
|
||
/**
|
||
* Clearing old rowDOM children structure
|
||
*/ rowDOM.innerHTML = "";
|
||
/**
|
||
* Appending rowDOM new children list
|
||
*/ rowDOMArray.forEach(function(element) {
|
||
return rowDOM.appendChild(element);
|
||
});
|
||
if (_this9.options.debug) {
|
||
console.log("rowDOMContainer", containedElements, updated_startIndex, updated_endIndex, removedElements + 1);
|
||
}
|
||
});
|
||
}
|
||
return rowDOM;
|
||
}
|
||
/**
|
||
* Renders rows and buttons as per options
|
||
*/ }, {
|
||
key: "render",
|
||
value: function render() {
|
||
var _this10 = this;
|
||
/**
|
||
* Clear keyboard
|
||
*/ this.clear();
|
||
/**
|
||
* Calling beforeFirstRender
|
||
*/ if (!this.initialized) {
|
||
this.beforeFirstRender();
|
||
}
|
||
/**
|
||
* Calling beforeRender
|
||
*/ this.beforeRender();
|
||
var layoutClass = "hg-layout-".concat(this.options.layoutName);
|
||
var layout = this.options.layout || services_KeyboardLayout.getDefaultLayout();
|
||
var useTouchEvents = this.options.useTouchEvents || false;
|
||
var useTouchEventsClass = useTouchEvents ? "hg-touch-events" : "";
|
||
var useMouseEvents = this.options.useMouseEvents || false;
|
||
var disableRowButtonContainers = this.options.disableRowButtonContainers;
|
||
/**
|
||
* Account for buttonTheme, if set
|
||
*/ var buttonThemesParsed = Array.isArray(this.options.buttonTheme) ? this.getButtonTheme() : {};
|
||
/**
|
||
* Adding themeClass, layoutClass to keyboardDOM
|
||
*/ this.keyboardDOM.className += " ".concat(this.options.theme, " ").concat(layoutClass, " ").concat(this.keyboardPluginClasses, " ").concat(useTouchEventsClass);
|
||
/**
|
||
* Iterating through each row
|
||
*/ layout[this.options.layoutName].forEach(function(row, rIndex) {
|
||
var rowArray = row.split(" ");
|
||
/**
|
||
* Creating empty row
|
||
*/ var rowDOM = document.createElement("div");
|
||
rowDOM.className += "hg-row";
|
||
/**
|
||
* Tracking container indicators in rows
|
||
*/ var containerStartIndexes = [];
|
||
var containerEndIndexes = [];
|
||
/**
|
||
* Iterating through each button in row
|
||
*/ rowArray.forEach(function(button, bIndex) {
|
||
/**
|
||
* Check if button has a container indicator
|
||
*/ var buttonHasContainerStart = !disableRowButtonContainers && button.includes("[") && button.length > 1;
|
||
var buttonHasContainerEnd = !disableRowButtonContainers && button.includes("]") && button.length > 1;
|
||
/**
|
||
* Save container start index, if applicable
|
||
*/ if (buttonHasContainerStart) {
|
||
containerStartIndexes.push(bIndex);
|
||
/**
|
||
* Removing indicator
|
||
*/ button = button.replace(/\[/g, "");
|
||
}
|
||
if (buttonHasContainerEnd) {
|
||
containerEndIndexes.push(bIndex);
|
||
/**
|
||
* Removing indicator
|
||
*/ button = button.replace(/\]/g, "");
|
||
}
|
||
/**
|
||
* Processing button options
|
||
*/ var fctBtnClass = _this10.utilities.getButtonClass(button);
|
||
var buttonThemeClass = buttonThemesParsed[button];
|
||
var buttonDisplayName = _this10.utilities.getButtonDisplayName(button, _this10.options.display, _this10.options.mergeDisplay);
|
||
/**
|
||
* Creating button
|
||
*/ var buttonType = _this10.options.useButtonTag ? "button" : "div";
|
||
var buttonDOM = document.createElement(buttonType);
|
||
buttonDOM.className += "hg-button ".concat(fctBtnClass).concat(buttonThemeClass ? " " + buttonThemeClass : "");
|
||
/**
|
||
* Handle button click event
|
||
*/ /* istanbul ignore next */ if (_this10.utilities.pointerEventsSupported() && !useTouchEvents && !useMouseEvents) {
|
||
/**
|
||
* Handle PointerEvents
|
||
*/ buttonDOM.onpointerdown = function(e) {
|
||
_this10.handleButtonClicked(button);
|
||
_this10.handleButtonMouseDown(button, e);
|
||
};
|
||
buttonDOM.onpointerup = function() {
|
||
return _this10.handleButtonMouseUp(button);
|
||
};
|
||
buttonDOM.onpointercancel = function() {
|
||
return _this10.handleButtonMouseUp(button);
|
||
};
|
||
} else {
|
||
/**
|
||
* Fallback for browsers not supporting PointerEvents
|
||
*/ if (useTouchEvents) {
|
||
/**
|
||
* Handle touch events
|
||
*/ buttonDOM.ontouchstart = function(e) {
|
||
_this10.handleButtonClicked(button);
|
||
_this10.handleButtonMouseDown(button, e);
|
||
};
|
||
buttonDOM.ontouchend = function() {
|
||
return _this10.handleButtonMouseUp(button);
|
||
};
|
||
buttonDOM.ontouchcancel = function() {
|
||
return _this10.handleButtonMouseUp(button);
|
||
};
|
||
} else {
|
||
/**
|
||
* Handle mouse events
|
||
*/ buttonDOM.onclick = function() {
|
||
_this10.isMouseHold = false;
|
||
_this10.handleButtonClicked(button);
|
||
};
|
||
buttonDOM.onmousedown = function(e) {
|
||
return _this10.handleButtonMouseDown(button, e);
|
||
};
|
||
buttonDOM.onmouseup = function() {
|
||
return _this10.handleButtonMouseUp(button);
|
||
};
|
||
}
|
||
}
|
||
/**
|
||
* Adding identifier
|
||
*/ buttonDOM.setAttribute("data-skBtn", button);
|
||
/**
|
||
* Adding unique id
|
||
* Since there's no limit on spawning same buttons, the unique id ensures you can style every button
|
||
*/ var buttonUID = "".concat(_this10.options.layoutName, "-r").concat(rIndex, "b").concat(bIndex);
|
||
buttonDOM.setAttribute("data-skBtnUID", buttonUID);
|
||
/**
|
||
* Adding display label
|
||
*/ buttonDOM.setAttribute("data-displayLabel", buttonDisplayName);
|
||
/**
|
||
* Adding button label to button
|
||
*/ var buttonSpanDOM = document.createElement("span");
|
||
buttonSpanDOM.innerHTML = buttonDisplayName;
|
||
buttonDOM.appendChild(buttonSpanDOM);
|
||
/**
|
||
* Adding to buttonElements
|
||
*/ if (!_this10.buttonElements[button]) {
|
||
_this10.buttonElements[button] = [];
|
||
}
|
||
_this10.buttonElements[button].push(buttonDOM);
|
||
/**
|
||
* Appending button to row
|
||
*/ rowDOM.appendChild(buttonDOM);
|
||
});
|
||
/**
|
||
* Parse containers in row
|
||
*/ rowDOM = _this10.parseRowDOMContainers(rowDOM, rIndex, containerStartIndexes, containerEndIndexes);
|
||
/**
|
||
* Appending row to keyboard
|
||
*/ _this10.keyboardDOM.appendChild(rowDOM);
|
||
});
|
||
/**
|
||
* Calling onRender
|
||
*/ this.onRender();
|
||
if (!this.initialized) {
|
||
/**
|
||
* Ensures that onInit and beforeFirstRender are only called once per instantiation
|
||
*/ this.initialized = true;
|
||
/**
|
||
* Handling onpointerup
|
||
*/ /* istanbul ignore next */ if (this.utilities.pointerEventsSupported() && !useTouchEvents && !useMouseEvents) {
|
||
document.onpointerup = function() {
|
||
return _this10.handleButtonMouseUp();
|
||
};
|
||
} else if (useTouchEvents) {
|
||
/**
|
||
* Handling ontouchend, ontouchcancel
|
||
*/ document.ontouchend = function() {
|
||
return _this10.handleButtonMouseUp();
|
||
};
|
||
document.ontouchcancel = function() {
|
||
return _this10.handleButtonMouseUp();
|
||
};
|
||
} else if (!useTouchEvents) {
|
||
/**
|
||
* Handling mouseup
|
||
*/ document.onmouseup = function() {
|
||
return _this10.handleButtonMouseUp();
|
||
};
|
||
}
|
||
/**
|
||
* Calling onInit
|
||
*/ this.onInit();
|
||
}
|
||
}
|
||
} ]);
|
||
return SimpleKeyboard;
|
||
}();
|
||
/* harmony default export */ var components_Keyboard = Keyboard_SimpleKeyboard;
|
||
// CONCATENATED MODULE: ./src/lib/index.js
|
||
/* harmony default export */ var lib = __webpack_exports__["default"] = components_Keyboard;
|
||
/***/ }
|
||
/******/ ]);
|
||
}); |