2019-02-16 10:48:40 +08:00
/ * !
*
2019-02-24 03:44:13 +08:00
* simple - keyboard v2 . 15.3 ( Non - minified build )
2019-02-16 10:48:40 +08:00
* https : //github.com/hodgef/simple-keyboard
*
* Copyright ( c ) Francisco Hodge ( https : //github.com/hodgef)
*
2019-02-24 03:44:13 +08:00
* This source code is licensed under the MIT license found in the
2019-02-16 10:48:40 +08:00
* 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/PhysicalKeyboard.js
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 ;
}
/ * *
* Physical Keyboard Service
* / var PhysicalKeyboard = / * * / f u n c t i o n ( ) {
/ * *
* Creates an instance of the PhysicalKeyboard service
* / f u n c t i o n P h y s i c a l K e y b o a r d ( s i m p l e K e y b o a r d I n s t a n c e ) {
_classCallCheck ( this , PhysicalKeyboard ) ;
/ * *
* @ type { object } A simple - keyboard instance
* / t h i s . s i m p l e K e y b o a r d I n s t a n c e = s i m p l e K e y b o a r d I n s t a n c e ;
/ * *
* Bindings
* / t h i s . i n i t K e y b o a r d L i s t e n e r = t h i s . i n i t K e y b o a r d L i s t e n e r . b i n d ( t h i s ) ;
this . getSimpleKeyboardLayoutKey = this . getSimpleKeyboardLayoutKey . bind ( this ) ;
/ * *
* Initialize key listeners
* / t h i s . i n i t K e y b o a r d L i s t e n e r ( ) ;
}
/ * *
* Initializes key event listeners
* / _ c r e a t e C l a s s ( P h y s i c a l K e y b o a r d , [ {
key : "initKeyboardListener" ,
value : function initKeyboardListener ( ) {
var _this = this ;
// Adding button style on keydown
document . addEventListener ( "keydown" , function ( event ) {
if ( _this . simpleKeyboardInstance . options . physicalKeyboardHighlight ) {
var buttonPressed = _this . getSimpleKeyboardLayoutKey ( event ) ;
_this . simpleKeyboardInstance . dispatch ( function ( instance ) {
var buttonDOM = instance . getButtonElement ( buttonPressed ) || instance . getButtonElement ( "{" . concat ( buttonPressed , "}" ) ) ;
if ( buttonDOM ) {
buttonDOM . style . backgroundColor = _this . simpleKeyboardInstance . options . physicalKeyboardHighlightBgColor || "#9ab4d0" ;
buttonDOM . style . color = _this . simpleKeyboardInstance . options . physicalKeyboardHighlightTextColor || "white" ;
}
} ) ;
}
} ) ;
// Removing button style on keyup
document . addEventListener ( "keyup" , function ( event ) {
if ( _this . simpleKeyboardInstance . options . physicalKeyboardHighlight ) {
var buttonPressed = _this . getSimpleKeyboardLayoutKey ( event ) ;
_this . simpleKeyboardInstance . 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
* / i f ( o u t p u t ! = = o u t p u t . t o U p p e r C a s e ( ) | | e v e n t . c o d e [ 0 ] = = = " F " & & N u m b e r . i s I n t e g e r ( N u m b e r ( e v e n t . c o d e [ 1 ] ) ) & & e v e n t . c o d e . l e n g t h < = 3 ) {
output = output . toLowerCase ( ) ;
}
return output ;
}
} ] ) ;
return PhysicalKeyboard ;
} ( ) ;
/* harmony default export */ var services _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 = / * * / f u n c t i o n ( ) {
function KeyboardLayout ( ) {
KeyboardLayout _classCallCheck ( this , KeyboardLayout ) ;
}
KeyboardLayout _createClass ( KeyboardLayout , null , [ {
key : "getDefaultLayout" ,
/ * *
* Get default simple - keyboard layout
* @ return { object } The default layout ( US - QWERTY )
* / v a l u e : f u n c t i o n g e t D e f a u l t L a y o u t ( ) {
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/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 Utilities _classCallCheck ( instance , Constructor ) {
if ( ! ( instance instanceof Constructor ) ) {
throw new TypeError ( "Cannot call a class as a function" ) ;
}
}
function Utilities _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 Utilities _createClass ( Constructor , protoProps , staticProps ) {
if ( protoProps ) {
Utilities _defineProperties ( Constructor . prototype , protoProps ) ;
}
if ( staticProps ) {
Utilities _defineProperties ( Constructor , staticProps ) ;
}
return Constructor ;
}
/ * *
* Utility Service
* / var Utilities = / * * / f u n c t i o n ( ) {
/ * *
* Creates an instance of the Utility service
* / f u n c t i o n U t i l i t i e s ( s i m p l e K e y b o a r d I n s t a n c e ) {
Utilities _classCallCheck ( this , Utilities ) ;
/ * *
* @ type { object } A simple - keyboard instance
* / t h i s . s i m p l e K e y b o a r d I n s t a n c e = s i m p l e K e y b o a r d I n s t a n c e ;
/ * *
* Bindings
* / t h i s . g e t B u t t o n C l a s s = t h i s . g e t B u t t o n C l a s s . b i n d ( t h i s ) ;
this . getButtonDisplayName = this . getButtonDisplayName . bind ( this ) ;
this . getUpdatedInput = this . getUpdatedInput . bind ( this ) ;
this . updateCaretPos = this . updateCaretPos . bind ( this ) ;
this . updateCaretPosAction = this . updateCaretPosAction . bind ( this ) ;
this . isMaxLengthReached = this . isMaxLengthReached . bind ( this ) ;
this . camelCase = this . camelCase . bind ( this ) ;
this . countInArray = this . countInArray . bind ( 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
* / U t i l i t i e s _ c r e a t e C l a s s ( U t i l i t i e s , [ {
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 { object } options The simple - keyboard options object
* @ 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 , options , caretPos , moveCaret ) {
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 ( this . simpleKeyboardInstance , length , minus ) ;
if ( this . simpleKeyboardInstance . options . syncInstanceInputs ) {
this . simpleKeyboardInstance . dispatch ( function ( instance ) {
instance . caretPosition = newCaretPos ;
} ) ;
}
}
/ * *
* Action method of updateCaretPos
*
* @ param { object } instance The instance whose position should be updated
* @ 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 ( instance , length , minus ) {
if ( minus ) {
if ( instance . caretPosition > 0 ) {
instance . caretPosition = instance . caretPosition - length ;
}
} else {
instance . caretPosition = instance . caretPosition + length ;
}
if ( this . simpleKeyboardInstance . options . debug ) {
console . log ( "Caret at:" , instance . caretPosition , "(" . concat ( instance . keyboardDOMClass , ")" ) ) ;
}
return instance . 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
* / i f ( ! t h i s . i s M a x L e n g t h R e a c h e d ( ) ) {
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 ) {
if ( this . simpleKeyboardInstance . 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
* / i f ( p o s i t i o n & & p o s i t i o n > = 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 { object } options
* @ param { string } updatedInput
* / } , {
key : "handleMaxLength" ,
value : function handleMaxLength ( inputObj , options , updatedInput ) {
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
* / u p d a t e d I n p u t . l e n g t h < = c u r r e n t I n p u t . l e n g t h ) {
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
* / t h i s . m a x L e n g t h R e a c h e d = t r u e ;
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 ) ;
}
/ * *
* Transforms an arbitrary string to camelCase
*
* @ param { string } string The string to transform .
* / } , {
key : "camelCase" ,
value : function camelCase ( string ) {
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 ) ;
}
} ] ) ;
return Utilities ;
} ( ) ;
/* harmony default export */ var services _Utilities = Utilities ;
// 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 ;
}
function _defineProperty ( obj , key , value ) {
if ( key in obj ) {
Object . defineProperty ( obj , key , {
value : value ,
enumerable : true ,
configurable : true ,
writable : true
} ) ;
} else {
obj [ key ] = value ;
}
return obj ;
}
// Services
/ * *
* Root class for simple - keyboard
* This class :
* - Parses the options
* - Renders the rows and buttons
* - Handles button functionality
* / var Keyboard_SimpleKeyboard = / * * / f u n c t i o n ( ) {
/ * *
* 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 .
* / f u n c t i o n S i m p l e K e y b o a r d ( ) {
var _this = this ;
Keyboard _classCallCheck ( this , SimpleKeyboard ) ;
_defineProperty ( this , "setOptions" , function ( option ) {
option = option || { } ;
_this . options = Object . assign ( _this . options , option ) ;
_this . render ( ) ;
} ) ;
_defineProperty ( this , "registerModule" , function ( name , initCallback ) {
if ( ! _this . modules [ name ] ) {
_this . modules [ name ] = { } ;
}
initCallback ( _this . modules [ name ] ) ;
} ) ;
_defineProperty ( this , "getModuleProp" , function ( name , prop ) {
if ( ! _this . modules [ name ] ) {
return false ;
}
return _this . modules [ name ] [ prop ] ;
} ) ;
_defineProperty ( this , "getModulesList" , function ( ) {
return Object . keys ( _this . modules ) ;
} ) ;
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 ( this ) ;
/ * *
* Processing options
* / t h i s . k e y b o a r d D O M = d o c u m e n t . q u e r y S e l e c t o r ( k e y b o a r d D O M Q u e r y ) ;
/ * *
* @ 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 .
* / t h i s . o p t i o n s = o p t i o n s ;
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
* / t h i s . k e y b o a r d P l u g i n C l a s s e s = " " ;
/ * *
* Bindings
* / t h i s . h a n d l e B u t t o n C l i c k e d = t h i s . h a n d l e B u t t o n C l i c k e d . b i n d ( t h i s ) ;
this . syncInstanceInputs = this . syncInstanceInputs . bind ( this ) ;
this . clearInput = this . clearInput . bind ( this ) ;
this . getInput = this . getInput . bind ( this ) ;
this . setInput = this . setInput . bind ( this ) ;
this . replaceInput = this . replaceInput . bind ( this ) ;
this . clear = this . clear . bind ( this ) ;
this . dispatch = this . dispatch . bind ( this ) ;
this . addButtonTheme = this . addButtonTheme . bind ( this ) ;
this . removeButtonTheme = this . removeButtonTheme . bind ( this ) ;
this . getButtonElement = this . getButtonElement . bind ( this ) ;
this . handleCaret = this . handleCaret . bind ( this ) ;
this . caretEventHandler = this . caretEventHandler . bind ( this ) ;
this . onInit = this . onInit . bind ( this ) ;
this . onRender = this . onRender . bind ( this ) ;
this . render = this . render . bind ( this ) ;
this . loadModules = this . loadModules . bind ( this ) ;
this . handleButtonMouseUp = this . handleButtonMouseUp . bind ( this ) ;
this . handleButtonMouseDown = this . handleButtonMouseDown . bind ( this ) ;
this . handleButtonHold = this . handleButtonHold . bind ( this ) ;
this . onModulesLoaded = this . onModulesLoaded . bind ( this ) ;
this . inputPatternIsValid = this . inputPatternIsValid . bind ( 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" ` .
* / t h i s . i n p u t = { } ;
this . input [ this . options . inputName ] = "" ;
/ * *
* @ type { string } DOM class of the keyboard wrapper , normally "simple-keyboard" by default .
* / t h i s . k e y b o a r d D O M C l a s s = k e y b o a r d D O M Q u e r y . s p l i t ( " . " ) . j o i n ( " " ) ;
/ * *
* @ type { object } Contains the DOM elements of every rendered button , the key being the button ' s layout name ( e . g . : "{enter}" ) .
* / t h i s . b u t t o n E l e m e n t s = { } ;
/ * *
* Rendering keyboard
* / i f ( t h i s . k e y b o a r d D O M ) {
this . render ( ) ;
} else {
console . warn ( '"' . concat ( keyboardDOMQuery , '" was not found in the DOM.' ) ) ;
throw new Error ( "KEYBOARD_DOM_ERROR" ) ;
}
/ * *
* Saving instance
* This enables multiple simple - keyboard support with easier management
* / i f ( ! w i n d o w [ " S i m p l e K e y b o a r d I n s t a n c e s " ] ) {
window [ "SimpleKeyboardInstances" ] = { } ;
}
window [ "SimpleKeyboardInstances" ] [ this . utilities . camelCase ( this . keyboardDOMClass ) ] = this ;
/ * *
* Physical Keyboard support
* / t h i s . p h y s i c a l K e y b o a r d I n t e r f a c e = n e w s e r v i c e s _ P h y s i c a l K e y b o a r d ( t h i s ) ;
/ * *
* Modules
* / t h i s . m o d u l e s = { } ;
this . loadModules ( ) ;
}
/ * *
* Handles clicks made to keyboard buttons
* @ param { string } button The button ' s layout name .
* / K e y b o a r d _ c r e a t e C l a s s ( S i m p l e K e y b o a r d , [ {
key : "handleButtonClicked" ,
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 . options , 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
* / i f ( t h i s . o p t i o n s . m a x L e n g t h & & t h i s . u t i l i t i e s . h a n d l e M a x L e n g t h ( t h i s . i n p u t , t h i s . o p t i o n s , u p d a t e d I n p u t ) ) {
return false ;
}
this . input [ this . options . inputName ] = this . utilities . getUpdatedInput ( button , this . input [ this . options . inputName ] , this . options , 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 ] ) ;
}
}
if ( debug ) {
console . log ( "Key pressed:" , button ) ;
}
}
/ * *
* Handles button mousedown
* / / * istanbul ignore next * / } , {
key : "handleButtonMouseDown" ,
value : function handleButtonMouseDown ( button , e ) {
var _this2 = this ;
/ * *
* @ type { boolean } Whether the mouse is being held onKeyPress
* / t h i s . i s M o u s e H o l d = t r u e ;
if ( this . holdInteractionTimeout ) {
clearTimeout ( this . holdInteractionTimeout ) ;
}
if ( this . holdTimeout ) {
clearTimeout ( this . holdTimeout ) ;
/ * *
* @ type { object } Time to wait until a key hold is detected
* / }
this . holdTimeout = setTimeout ( function ( ) {
if ( _this2 . isMouseHold && ( ! button . includes ( "{" ) && ! button . includes ( "}" ) || 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 ( ) {
this . isMouseHold = false ;
if ( this . holdInteractionTimeout ) {
clearTimeout ( this . holdInteractionTimeout ) ;
}
}
/ * *
* 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 ) ;
} ) ;
}
/ * *
* 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 ] = "" ;
/ * *
* Enforce syncInstanceInputs , if set
* / i f ( t h i s . o p t i o n s . s y n c I n s t a n c e I n p u t s ) {
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
* / i f ( t h i s . o p t i o n s . s y n c I n s t a n c e I n p u t s ) {
this . syncInstanceInputs ( this . input ) ;
}
return this . input [ this . options . 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
* / i f ( t h i s . o p t i o n s . s y n c I n s t a n c e I n p u t s ) {
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 } option The option to set
* / } , {
key : "clear" ,
/ * *
* Remove all keyboard rows and reset keyboard values .
* Used interally between re - renders .
* / v a l u e : f u n c t i o n c l e a r ( ) {
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
* / _ t h i s 5 . o p t i o n s . b u t t o n T h e m e . m a p ( f u n c t i o n ( b u t t o n T h e m e ) {
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
* / i f ( ! c l a s s N a m e F o u n d ) {
_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
* / i f ( ! b u t t o n s & & ! c l a s s N a m e ) {
this . options . buttonTheme = [ ] ;
this . render ( ) ;
return false ;
}
/ * *
* If buttons are passed and buttonTheme has items
* / i f ( b u t t o n s & & A r r a y . i s A r r a y ( t h i s . o p t i o n s . b u t t o n T h e m e ) & & t h i s . o p t i o n s . b u t t o n T h e m e . l e n g t h ) {
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
* / i f ( c l a s s N a m e & & c l a s s N a m e . i n c l u d e s ( b u t t o n T h e m e . c l a s s ) | | ! c l a s s N a m e ) {
var filteredButtonArray = buttonTheme . buttons . split ( " " ) . filter ( function ( item ) {
return item !== button ;
} ) ;
/ * *
* If buttons left , return them , otherwise , remove button Theme
* / i f ( f i l t e r e d B u t t o n A r r a y . l e n g t h ) {
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
* / i f ( i n p u t P a t t e r n R a w i n s t a n c e o f R e g E x p ) {
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 .
* / r e t u r n t r u e ;
}
}
/ * *
* Retrieves the current cursor position within a input or textarea ( if any )
* / } , {
key : "handleCaret" ,
value : function handleCaret ( ) {
/ * *
* Only first instance should insall the caret handling events
* / t h i s . c a r e t P o s i t i o n = n u l l ;
var simpleKeyboardInstances = window [ "SimpleKeyboardInstances" ] ;
if ( simpleKeyboardInstances && Object . keys ( simpleKeyboardInstances ) [ 0 ] === this . utilities . camelCase ( this . keyboardDOMClass ) || ! simpleKeyboardInstances ) {
if ( this . options . debug ) {
console . log ( "Caret handling started (" . concat ( this . keyboardDOMClass , ")" ) ) ;
}
document . addEventListener ( "keyup" , this . caretEventHandler ) ;
document . addEventListener ( "mouseup" , this . caretEventHandler ) ;
document . addEventListener ( "touchend" , this . caretEventHandler ) ;
}
}
/ * *
* Called by { @ link handleCaret } 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 .
* / i n s t a n c e . c a r e t P o s i t i o n = e v e n t . t a r g e t . s e l e c t i o n S t a r t ;
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 .
* / i n s t a n c e . c a r e t P o s i t i o n = n u l l ;
}
} ) ;
}
/ * *
* 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" ) ) ;
}
/ * *
* Caret handling
* / t h i s . h a n d l e C a r e t ( ) ;
if ( typeof this . options . onInit === "function" ) {
this . options . onInit ( ) ;
}
}
/ * *
* 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
* / v a l u e : f u n c t i o n l o a d M o d u l e s ( ) {
var _this7 = 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 ( _this7 . utilities . camelCase ( module . constructor . name ) ) ;
_this7 . keyboardPluginClasses = _this7 . keyboardPluginClasses + " " . concat ( classStr ) ;
}
module . init ( _this7 ) ;
} ) ;
this . keyboardPluginClasses = this . keyboardPluginClasses + " modules-loaded" ;
this . render ( ) ;
this . onModulesLoaded ( ) ;
}
}
/ * *
* Get module prop
* / } , {
key : "render" ,
/ * *
* Renders rows and buttons as per options
* / v a l u e : f u n c t i o n r e n d e r ( ) {
var _this8 = this ;
/ * *
* Clear keyboard
* / t h i s . c l e a r ( ) ;
var layoutClass = "hg-layout-" . concat ( this . options . layoutName ) ;
var layout = this . options . layout || services _KeyboardLayout . getDefaultLayout ( ) ;
var useTouchEvents = this . options . useTouchEvents || false ;
/ * *
* Account for buttonTheme , if set
* / v a r b u t t o n T h e m e s P a r s e d = { } ;
if ( Array . isArray ( this . options . buttonTheme ) ) {
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 ( ! _this8 . 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.' ) ;
}
} ) ;
}
/ * *
* Adding themeClass , layoutClass to keyboardDOM
* / t h i s . k e y b o a r d D O M . c l a s s N a m e + = " " . c o n c a t ( t h i s . o p t i o n s . t h e m e , " " ) . c o n c a t ( l a y o u t C l a s s , " " ) . c o n c a t ( t h i s . k e y b o a r d P l u g i n C l a s s e s ) ;
/ * *
* Iterating through each row
* / l a y o u t [ t h i s . o p t i o n s . l a y o u t N a m e ] . f o r E a c h ( f u n c t i o n ( r o w , r I n d e x ) {
var rowArray = row . split ( " " ) ;
/ * *
* Creating empty row
* / v a r r o w D O M = d o c u m e n t . c r e a t e E l e m e n t ( " d i v " ) ;
rowDOM . className += "hg-row" ;
/ * *
* Iterating through each button in row
* / r o w A r r a y . f o r E a c h ( f u n c t i o n ( b u t t o n , b I n d e x ) {
var fctBtnClass = _this8 . utilities . getButtonClass ( button ) ;
var buttonThemeClass = buttonThemesParsed [ button ] ;
var buttonDisplayName = _this8 . utilities . getButtonDisplayName ( button , _this8 . options . display , _this8 . options . mergeDisplay ) ;
/ * *
* Creating button
* / v a r b u t t o n T y p e = _ t h i s 8 . o p t i o n s . u s e B u t t o n T a g ? " b u t t o n " : " d i v " ;
var buttonDOM = document . createElement ( buttonType ) ;
buttonDOM . className += "hg-button " . concat ( fctBtnClass ) . concat ( buttonThemeClass ? " " + buttonThemeClass : "" ) ;
if ( useTouchEvents ) {
buttonDOM . ontouchstart = function ( e ) {
_this8 . handleButtonClicked ( button ) ;
_this8 . handleButtonMouseDown ( button , e ) ;
} ;
buttonDOM . ontouchend = function ( e ) {
return _this8 . handleButtonMouseUp ( ) ;
} ;
buttonDOM . ontouchcancel = function ( e ) {
return _this8 . handleButtonMouseUp ( ) ;
} ;
} else {
buttonDOM . onclick = function ( ) {
_this8 . isMouseHold = false ;
_this8 . handleButtonClicked ( button ) ;
} ;
buttonDOM . onmousedown = function ( e ) {
if ( _this8 . options . preventMouseDownDefault ) {
e . preventDefault ( ) ;
}
_this8 . handleButtonMouseDown ( button , e ) ;
} ;
}
/ * *
* Adding identifier
* / b u t t o n D O M . s e t A t t r i b u t e ( " d a t a - s k B t n " , b u t t o n ) ;
/ * *
* Adding unique id
* Since there ' s no limit on spawning same buttons , the unique id ensures you can style every button
* / v a r b u t t o n U I D = " " . c o n c a t ( _ t h i s 8 . o p t i o n s . l a y o u t N a m e , " - r " ) . c o n c a t ( r I n d e x , " b " ) . c o n c a t ( b I n d e x ) ;
buttonDOM . setAttribute ( "data-skBtnUID" , buttonUID ) ;
/ * *
* Adding display label
* / b u t t o n D O M . s e t A t t r i b u t e ( " d a t a - d i s p l a y L a b e l " , b u t t o n D i s p l a y N a m e ) ;
/ * *
* Adding button label to button
* / v a r b u t t o n S p a n D O M = d o c u m e n t . c r e a t e E l e m e n t ( " s p a n " ) ;
buttonSpanDOM . innerHTML = buttonDisplayName ;
buttonDOM . appendChild ( buttonSpanDOM ) ;
/ * *
* Adding to buttonElements
* / i f ( ! _ t h i s 8 . b u t t o n E l e m e n t s [ b u t t o n ] ) {
_this8 . buttonElements [ button ] = [ ] ;
}
_this8 . buttonElements [ button ] . push ( buttonDOM ) ;
/ * *
* Appending button to row
* / r o w D O M . a p p e n d C h i l d ( b u t t o n D O M ) ;
} ) ;
/ * *
* Appending row to keyboard
* / _ t h i s 8 . k e y b o a r d D O M . a p p e n d C h i l d ( r o w D O M ) ;
} ) ;
/ * *
* Calling onRender
* / t h i s . o n R e n d e r ( ) ;
if ( ! this . initialized ) {
/ * *
* Ensures that onInit is only called once per instantiation
* / t h i s . i n i t i a l i z e d = t r u e ;
/ * *
* Handling mouseup
* / i f ( ! u s e T o u c h E v e n t s ) {
document . onmouseup = function ( ) {
return _this8 . handleButtonMouseUp ( ) ;
} ;
}
/ * *
* Calling onInit
* / t h i s . o n I n i t ( ) ;
}
}
} ] ) ;
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 ;
/***/ }
/******/ ] ) ;
} ) ;
