npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@loyall/kioskboard

v1.0.3

Published

Customize Kioskboard keyboard position to fix it inside a wrapper instead of sliding from bottom of the screen.

Downloads

6

Readme

NPM Version Known Vulnerabilities License

KioskBoard - Virtual Keyboard

A pure JavaScript library for using the Virtual Keyboard.

Forked by Loyall

https://bitbucket.org/weconnect/kioskboard-loyall
Customize the keyboard position to fix it inside a wrapper instead of sliding from bottom of the screen.


Current Version

1.4.0 *


Documentation and Demo

https://furcan.github.io/KioskBoard/


Browser Compatibility

Chrome - Firefox - Safari - Opera - Edge - IE 11


(A) Install & Import

Install

npm
npm i kioskboard
yarn
yarn add kioskboard

Import

import KioskBoard from "kioskboard";

(B) Adding to an HTML Document

CSS and JS
<link rel="stylesheet" href="dist/kioskboard-1.4.0.min.css" />

<script src="dist/kioskboard-1.4.0.min.js"></script>
Or only JS (All in One - Internal CSS)
<script src="dist/kioskboard-aio-1.4.0.min.js"></script>

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.


Initialize / Run

KioskBoard Virtual Keyboard can be used with the input or textarea elements. KioskBoard must be initialized with the required options. The other options are optional. The keyboard type data-kioskboard-type and special characters data-kioskboard-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 for all input or textarea elements to run KioskBoard.


HTML => (data-* options)
<!-- An example of a textarea element: Keyboard type is "all" and the availability of special characters is "true". -->
<textarea class="virtual-keyboard" data-kioskboard-type="all" data-kioskboard-specialcharacters="true" placeholder="Your Address"></textarea>

<!-- An example of an input element: Keyboard type is "keyboard" and the availability of special characters is "false". -->
<input class="virtual-keyboard" data-kioskboard-type="keyboard" data-kioskboard-specialcharacters="false" placeholder="Your Name" />

<!-- An example of an input element: Keyboard type is "numpad". (special characters are not allowed for the "numpad" type.) -->
<input class="virtual-keyboard" data-kioskboard-type="numpad" placeholder="Your Number" />

JS => (Step1: Initialize)
// Initialize KioskBoard (default/all options)

KioskBoard.Init({

  /*!
  * Required
  * Have to define an Array of Objects 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 "kioskboard-keys-${langugage}.json" file must be set to the "keysJsonUrl" option. (XMLHttpRequest to getting the keys from JSON file.)
  * e.g. '/Content/Plugins/KioskBoard/dist/kioskboard-keys-english.json'
  */
  keysJsonUrl: null,

  /*
  * Optional: (Special Characters Object)* Can override default special characters object with the new/custom one.
  * e.g. {"key":"value", "key":"value", ...} => {"0":"#", "1":"$", "2":"%", "3":"+", "4":"-", "5":"*"}
  */
  specialCharactersObject: null,

  // Optional: (Other Options)

  // Language Code (ISO 639-1) for custom keys (for language support) => e.g. "en" || "tr" || "es" || "de" || "fr" etc.
  language: 'en',

  // The theme of keyboard => "light" || "dark" || "flat" || "material" || "oldschool"
  theme: 'light',

  // Uppercase or lowercase to start. Uppercase when "true"
  capsLockActive: true,

  // Allow or prevent real/physical keyboard usage. Prevented when "false"
  allowRealKeyboard: 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',

  // Allow or deny Spacebar on the keyboard. The keyboard is denied 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',

  // v1.1.0 and the next versions
  // Allow or prevent mobile keyboard usage. Prevented when "false"
  allowMobileKeyboard: false,

  // v1.3.0 and the next versions
  // Scrolls the document to the top of the input/textarea element. The default value is "true" as before. Prevented when "false"
  autoScroll: true,
});
JS => (Step2: Run)
// Select the input or the textarea element(s) to run the KioskBoard

KioskBoard.Run('.virtual-keyboard');
OR
JS => (Run with Init - v1.4.0 and the next versions)
// Select the input or the textarea element(s) to run the KioskBoard

KioskBoard.Run('.virtual-keyboard', {
   // ...init options
});

Merge

KioskBoard.Merge({}); function has been deprecated. (v1.4.0 and the next versions)

// The Merge function extends the initialize function for a specific action or event.

// KioskBoard.Merge({
  // theme: 'dark',
// });

Language (JSON)

If custom keys are not defined with the keysArrayOfObjects option, the keysJsonUrl option can be used. Can create an Array of Objects for custom keys related to a custom language. Expecting JSON format is like [{"key":"value", "key":"value"}, ...] Each object in that array creates a row element (HTML) on the keyboard. The "key" in the objects is an "index" for each Keyboard Keys. Also, the "value" is each key's value and text.

Additionally, KioskBoard includes 7 different language packages: English Turkish Spanish German French Hungarian Russian

An example of a JSON file (for custom keys) is as below.

[
   {
      "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 © 2021 KioskBoard - Virtual Keyboard

License

MIT license - https://opensource.org/licenses/MIT