Skip to content

Commit

Permalink
Release 1.1.3 (#33)
Browse files Browse the repository at this point in the history
* Initial Commit

* Bumped version.

Resolves issue #32.
  • Loading branch information
srm985 authored Nov 25, 2018
1 parent 43b07d3 commit 23561f8
Show file tree
Hide file tree
Showing 5 changed files with 28 additions and 20 deletions.
33 changes: 19 additions & 14 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -63,33 +63,34 @@ To initiate an instance of the keyboard within your application you may include

| Option | Default Value | Information |
|--------|---------------|-------------|
| inputType | 'text, textarea, number, password, search, tel, url, contenteditable' | May pass individual input types or comma-separated values. |
| language | none | Given as a string with comma-separated values i.e. 'us, spanish, arabic, russian'. |
| keyboardPosition | 'bottom' | Locate the keyboard at page 'top', 'middle', or 'bottom' with a default edge padding of 20px. |
| cancelColor | '#E74C3C' | Defines background color of cancel button. May pass hex string or specific color i.e. 'blue'. |
| cancelTextColor | '#FFFFFF' | Defines text color of cancel button. May pass hex string or specific color i.e. 'white'. |
| acceptColor | '#2ECC71' | Defines background color of accept button. May pass hex string or specific color i.e. 'blue'. |
| acceptTextColor | '#FFFFFF' | Defines text color of accept button. May pass hex string or specific color i.e. 'white'. |
| keyColor | '#E0E0E0' | Defines background color of keys. May pass hex string or specific color i.e. 'blue'. |
| keyTextColor | '#555555' | Defines text color used on keys. May pass hex string or specific color i.e. 'blue'. |
| blackoutColor | '25, 25, 25, 0.9' | Defines color and opacity of blackout background. Passed as RGBA string. |
| allowEscapeCancel | true | Cancel keyboard input with hardware keyboard [Escape] key. |
| allowEnterAccept | true | Accept keyboard input with hardware keyboard [Enter] key. |
| keyCharacterRegex | { number: /[0-9]|[eE]|\.|\+|\-/, tel: /[0-9]|\.|\+|\-|\#|\(|\)/ } | Define regular expressions for input field types. These pertain to the individual key pressed, not the whole accepted pattern. The object keys must match identically to the input type. |
| allowEscapeCancel | true | Cancel keyboard input with hardware keyboard [Escape] key. |
| blackoutColor | '25, 25, 25, 0.9' | Defines color and opacity of blackout background. Passed as RGBA string. |
| cancelColor | '#E74C3C' | Defines background color of cancel button. May pass hex string or specific color i.e. 'blue'. |
| cancelTextColor | '#FFFFFF' | Defines text color of cancel button. May pass hex string or specific color i.e. 'white'. |
| inputFieldRegex | { number: /^(-)?(((\d+)|(\d+\.(\d+)?)|(\.(\d+)?))([eE]([-+])?(\d+)?)?)?$/ } | Define regular expressions for the accepted patterns of input field types. These patterns serve to further restrict browser-specific prepopulated patterns. For example, you may NOT generate a regex to allow letters in an input[type="number"]. Ensure these are whole pattern matches handled by the prepension and appension of ^ and $. The object keys must match identically to the input type. |
| inputType | 'text, textarea, number, password, search, tel, url, contenteditable' | May pass individual input types or comma-separated values. |
| keyCharacterRegex | { number: /[0-9]|[eE]|\.|\+|\-/, tel: /[0-9]|\.|\+|\-|\#|\(|\)/ } | Define regular expressions for input field types. These pertain to the individual key pressed, not the whole accepted pattern. The object keys must match identically to the input type. |
| keyColor | '#E0E0E0' | Defines background color of keys. May pass hex string or specific color i.e. 'blue'. |
| keyTextColor | '#555555' | Defines text color used on keys. May pass hex string or specific color i.e. 'blue'. |
| keyboardPosition | 'bottom' | Locate the keyboard at page 'top', 'middle', or 'bottom' with a default edge padding of 20px. |
| language | none | Given as a string with comma-separated values i.e. 'us, spanish, arabic, russian'. |
| languageKeyTextColor | #3498db | Defines text color of language button. May pass hex string or specific color i.e. 'white'. |
| showSelectedLanguage | false | This option labels the language button with the currently-selected language. The name is derived from the actual language file name, so name appropriately. |


#### Callbacks

| Name | Information |
|------|-------------|
| enterKey | Define action of [Enter] key |
| tabKey | Define action of [Tab] key |
| ctrlKey | Define action of [Ctrl] key |
| altKey | Define action of [Alt] key |
| spareKey | Define action of [Spare] key |
| ctrlKey | Define action of [Ctrl] key |
| enterKey | Define action of [Enter] key |
| languageKey | Define action of [Language] key |
| spareKey | Define action of [Spare] key |
| tabKey | Define action of [Tab] key |

_You may change the user-displayed names of any keys in keyboard.js without affecting functionality._

Expand Down Expand Up @@ -265,3 +266,7 @@ In this release I have addressed several issues related to how the keyboard hand
#### Version 1.1.2

* Added option to support showing the currently-displayed language.

#### Version 1.1.3

* Added ability to define language key text color.
2 changes: 1 addition & 1 deletion dist/main.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/styles.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

9 changes: 7 additions & 2 deletions src/js/keyboard.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
//* GitHub: https://github.com/srm985/mok-project *
//* *
//* Started: March 2017 *
//* Version: 1.1.2 *
//* Version: 1.1.3 *
//* *
//* License: MIT (https://opensource.org/licenses/MIT) *
//* *
Expand Down Expand Up @@ -56,6 +56,7 @@ $.fn.keyboard = function (passedOptions) {
keyboardPosition = 'bottom',
language = 'us',
languageKey = '',
languageKeyTextColor = '#3498db',
showSelectedLanguage = false,
spareKey = '',
tabKey = ''
Expand All @@ -80,6 +81,7 @@ $.fn.keyboard = function (passedOptions) {
keyTextColor,
language,
languageKey,
languageKeyTextColor,
showSelectedLanguage,
spareKey,
tabKey
Expand Down Expand Up @@ -441,6 +443,7 @@ $.fn.keyboard = function (passedOptions) {
function keyboardFillout() {
const {
language,
languageKeyTextColor,
showSelectedLanguage
} = options;

Expand All @@ -459,7 +462,9 @@ $.fn.keyboard = function (passedOptions) {
$('.keyboard-row:eq(3)').append('<button class="keyboard-key keyboard-key-lg" data-keyval="shift">Shift</button>');
$('.keyboard-wrapper').append('<div class="keyboard-row"></div>');
$('.keyboard-row:eq(4)').append('<button class="keyboard-key keyboard-key-lg" data-keyval="ctrl">Ctrl</button>');
$('.keyboard-row:eq(4)').append(`<button class="keyboard-key keyboard-key-lg language-button" data-keyval="language"><span data-keyval="language">${languageButtonText}</span></button>`);
$('.keyboard-row:eq(4)').append(`<button class="keyboard-key keyboard-key-lg language-button" data-keyval="language">
<span style="color: ${languageKeyTextColor};" data-keyval="language">${languageButtonText}</span>
</button>`);
$('.keyboard-row:eq(4)').append('<button class="keyboard-key keyboard-key-lg" data-keyval="alt">Alt</button>');
$('.keyboard-row:eq(4)').append('<button class="keyboard-key keyboard-key-xl" data-keyval="space">&nbsp;</button>');
$('.keyboard-row:eq(4)').append('<button class="keyboard-key keyboard-key-lg" data-keyval="alt grp">Alt Grp</button>');
Expand Down
2 changes: 0 additions & 2 deletions src/scss/keyboard.scss
Original file line number Diff line number Diff line change
Expand Up @@ -152,6 +152,4 @@ $blackout-color: rgba(25, 25, 25, 0.9);

white-space: nowrap;
text-overflow: ellipsis;

color: $primary-color !important;
}

0 comments on commit 23561f8

Please sign in to comment.