https://github.com/sid220/betterboard
BetterBoard - A pure JavaScript library for using virtual keyboards.
https://github.com/sid220/betterboard
Last synced: 3 months ago
JSON representation
BetterBoard - A pure JavaScript library for using virtual keyboards.
- Host: GitHub
- URL: https://github.com/sid220/betterboard
- Owner: Sid220
- License: mit
- Created: 2022-03-28T20:24:23.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2022-10-17T19:01:28.000Z (over 2 years ago)
- Last Synced: 2025-02-11T21:02:47.815Z (4 months ago)
- Language: JavaScript
- Homepage:
- Size: 31.3 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
[npm-version-badge]: https://img.shields.io/npm/v/BetterBoard.svg
[npm-version-url]: https://www.npmjs.com/package/BetterBoard
[synk-badge]: https://snyk.io/test/github/furcan/BetterBoard/badge.svg?targetFile=package.json
[synk-url]: https://snyk.io/test/github/furcan/BetterBoard?targetFile=package.json
[typescript-badge]: https://badgen.net/badge/icon/Typed?icon=typescript&label&labelColor=3178c6&color=555
[typescript-url]: https://github.com/furcan/BetterBoard/blob/main/index.d.ts
[lic-badge]: https://img.shields.io/github/license/furcan/BetterBoard.svg
[lic-url]: https://github.com/furcan/BetterBoard/blob/main/LICENSE
[![NPM Version][npm-version-badge]][npm-version-url]
[![Known Vulnerabilities][synk-badge]][synk-url]
[![TypeScript][typescript-badge]][typescript-url]
[![License][lic-badge]][lic-url]
# BetterBoard - The ULTIMATE virtual keyboard solution
A pure JavaScript library for using virtual keyboards.
---------
## Current Version
1.0.0-beta.01 [*](https://github.com/furcan/BetterBoard/blob/main/CHANGELOG.md)
---------
## Documentation and Demo
COMING SOON!
---------
## Browser Compatibility
`Chrome` || `Firefox` || `Safari` || `Opera` || `Edge` || `IE 11`
---------
## (A) Install & Import
### Install
COMING SOON... None of these work btw
#### [yarn](https://yarnpkg.com/package/BetterBoard)
```js
yarn add BetterBoard
```
#### [npm](https://www.npmjs.com/package/BetterBoard)
```js
npm i BetterBoard
```
### Import
```jsx
import BetterBoard from 'BetterBoard';
```
---------
## (B) Adding to an HTML Document
### CSS and JS
Actually works!:
```html
```
### Or only JS (All in One - Internal CSS)
```html
```
---------
## Keyboard Types and Themes
3 types of keyboards can be used: `all`, `keyboard`, and `numpad`.
5 types of themes can be used. `light`, `dark`, `flat`, `material`, and `oldschool`.
---------
## Run / Initialize
BetterBoard Virtual Keyboard can be used with the `input` or `textarea` elements.
BetterBoard must be initialized with the required options. The other ones are optional. Keyboard Type (the default value is "all") `data-BetterBoard-type`, Keyboard Placement (the default value is "bottom") `data-BetterBoard-placement`, and Special Characters `data-BetterBoard-specialcharacters` settings are each element-based (data attributes).
All options and examples of data attribute usages are as below. Also, a custom class name can be defined as globally for all input and/or textarea elements to run BetterBoard.
---------
### HTML => (data-* options)
```html
```
---------
### JS => (Run with Init)
```js
// Select the input or the textarea element(s) to run the BetterBoard
BetterBoard.run('.js-virtual-keyboard', {
// ...init options
});
```
### OR
### JS => (Step1: Initialize)
```js
// Initialize BetterBoard (default/all options)
BetterBoard.init({
/*!
* Required
* An Array of Objects has to be defined for the custom keys. Hint: Each object creates a row element (HTML) on the keyboard.
* e.g. [{"key":"value"}, {"key":"value"}] => [{"0":"A","1":"B","2":"C"}, {"0":"D","1":"E","2":"F"}]
*/
keysArrayOfObjects: null,
/*!
* Required only if "keysArrayOfObjects" is "null".
* The path of the "BetterBoard-keys-${langugage}.json" file must be set to the "keysJsonUrl" option. (XMLHttpRequest to get the keys from JSON file.)
* e.g. '/Content/Plugins/BetterBoard/dist/BetterBoard-keys-english.json'
*/
keysJsonUrl: null,
/*
* Optional: An Array of Strings can be set to override the built-in special characters.
* e.g. ["#", "€", "%", "+", "-", "*"]
*/
keysSpecialCharsArrayOfStrings: null,
/*
* Optional: An Array of Numbers can be set to override the built-in numpad keys. (From 0 to 9, in any order.)
* e.g. [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]
*/
keysNumpadArrayOfNumbers: null,
// Optional: (Other Options)
// Language Code (ISO 639-1) for custom keys (for language support) => e.g. "de" || "en" || "fr" || "hu" || "tr" etc...
language: 'en',
// The theme of keyboard => "light" || "dark" || "flat" || "material" || "oldschool"
theme: 'light',
// Uppercase or lowercase to start. Uppercased when "true"
capsLockActive: true,
/*
* Allow or prevent real/physical keyboard usage. Prevented when "false"
* In addition, the "allowMobileKeyboard" option must be "true" as well, if the real/physical keyboard has wanted to be used.
*/
allowRealKeyboard: false,
// Allow or prevent mobile keyboard usage. Prevented when "false"
allowMobileKeyboard: false,
// CSS animations for opening or closing the keyboard
cssAnimations: true,
// CSS animations duration as millisecond
cssAnimationsDuration: 360,
// CSS animations style for opening or closing the keyboard => "slide" || "fade"
cssAnimationsStyle: 'slide',
// Enable or Disable Spacebar functionality on the keyboard. The Spacebar will be passive when "false"
keysAllowSpacebar: true,
// Text of the space key (Spacebar). Without text => " "
keysSpacebarText: 'Space',
// Font family of the keys
keysFontFamily: 'sans-serif',
// Font size of the keys
keysFontSize: '22px',
// Font weight of the keys
keysFontWeight: 'normal',
// Size of the icon keys
keysIconSize: '25px',
// Scrolls the document to the top or bottom(by the placement option) of the input/textarea element. Prevented when "false"
autoScroll: true,
});
```
### JS => (Step2: Run)
```js
// Select the input or the textarea element(s) to run the BetterBoard
BetterBoard.run('.js-virtual-keyboard');
```
---------
## Language (JSON)
The `keysJsonUrl` option has to be set if custom keys are not defined with the `keysArrayOfObjects` option. JSON format has to be: `[{"key":"value", "key":"value"}, ...]`. Each object in that array creates a row element (HTML) on the keyboard. The "key" in the objects is used as an "index" for each Keyboard Keys. The "value" is each key's value and inner text.
Additionally, BetterBoard includes 9 different language packages: `Arabic`, `English`, `French`, `German`, `Hungarian`, `Persian`, `Russian`, `Spanish`, and `Turkish`.
An example of a JSON file (for custom keys) in English.
```json
[
{
"0": "Q",
"1": "W",
"2": "E",
"3": "R",
"4": "T",
"5": "Y",
"6": "U",
"7": "I",
"8": "O",
"9": "P"
},
{
"0": "A",
"1": "S",
"2": "D",
"3": "F",
"4": "G",
"5": "H",
"6": "J",
"7": "K",
"8": "L"
},
{
"0": "Z",
"1": "X",
"2": "C",
"3": "V",
"4": "B",
"5": "N",
"6": "M"
}
]
```
---------
---------
---------
## Copyright
Copyright © 2022 BetterBoard - Virtual Keyboard
## License
MIT license - https://opensource.org/licenses/MIT