edit: docs

Author: rokobuljan

docs.md

@@ -19,23 +19,6 @@ ___
 <dd></dd>
 </dl>
 
-## Functions
-
-<dl>
-<dt><a href="#el">el(sel, [par])</a> ⇒ <code>HTMLElement</code></dt>
-<dd><p>DOM helper - Get one DOM element</p>
-</dd>
-<dt><a href="#els">els(sel, [par])</a> ⇒ <code>NodeList</code></dt>
-<dd><p>DOM helper - Get multiple DOM elements</p>
-</dd>
-<dt><a href="#elNew">elNew(tag, [prop])</a> ⇒ <code>HTMLElement</code></dt>
-<dd><p>DOM helper - Create new DOM element</p>
-</dd>
-<dt><a href="#keysArray">keysArray(keys)</a> ⇒ <code>Array.&lt;string&gt;</code></dt>
-<dd><p>Convert a string or array of strings - to array</p>
-</dd>
-</dl>
-
 ## Typedefs
 
 <dl>
@@ -112,7 +95,7 @@ Kioboard
 | Param | Type | Default | Description |
 | --- | --- | --- | --- |
 | options | <code>Object</code> |  |  |
-| options.parent | <code>string</code> \| <code>NodeList</code> \| <code>undefined</code> | <code>&quot;body&quot;</code> | Element to insert kioboard into |
+| options.parent | <code>string</code> \| <code>Element</code> \| <code>undefined</code> | <code>&quot;body&quot;</code> | Element to insert kioboard into |
 | options.inputs | <code>string</code> \| <code>NodeList</code> \| <code>HTMLElement</code> \| <code>undefined</code> | <code>&quot;[data-kioboard]&quot;</code> | Selector string, Element or elements. The input(s) to bind to |
 | options.input | <code>HTMLInputElement</code> \| <code>HTMLTextAreaElement</code> | <code>options.inputs[0]</code> | The currently active input |
 | [options.layoutName] | <code>string</code> \| <code>undefined</code> |  | The /layouts/<name>.js to use |
@@ -588,7 +571,7 @@ Respects also the input's maxlength.
 
 | Param | Type | Default | Description |
 | --- | --- | --- | --- |
-| val | <code>string</code> | <code>&quot;\&quot;\&quot;&quot;</code> | Text to insert at caret position or highlighted section |
+| val | <code>string</code> |  | Text to insert at caret position or highlighted section |
 | from | <code>number</code> | <code>this.input.selectionStart</code> |  |
 | to | <code>number</code> | <code>this.input.selectionEnd</code> |  |
 
@@ -636,53 +619,6 @@ kio.init();
 | --- | --- | --- |
 | key | <code>string</code> | The last pressed key |
 
-<a name="el"></a>
-
-## el(sel, [par]) ⇒ <code>HTMLElement</code>
-DOM helper - Get one DOM element
-
-**Kind**: global function  
-
-| Param | Type | Description |
-| --- | --- | --- |
-| sel | <code>string</code> | Selector |
-| [par] | <code>HTMLElement</code> | Optional parent defaults to window.document |
-
-<a name="els"></a>
-
-## els(sel, [par]) ⇒ <code>NodeList</code>
-DOM helper - Get multiple DOM elements
-
-**Kind**: global function  
-
-| Param | Type | Description |
-| --- | --- | --- |
-| sel | <code>string</code> | Selector |
-| [par] | <code>HTMLElement</code> | Optional parent defaults to window.document |
-
-<a name="elNew"></a>
-
-## elNew(tag, [prop]) ⇒ <code>HTMLElement</code>
-DOM helper - Create new DOM element
-
-**Kind**: global function  
-
-| Param | Type | Description |
-| --- | --- | --- |
-| tag | <code>string</code> | Tag name |
-| [prop] | <code>Object</code> | Optional element properties |
-
-<a name="keysArray"></a>
-
-## keysArray(keys) ⇒ <code>Array.&lt;string&gt;</code>
-Convert a string or array of strings - to array
-
-**Kind**: global function  
-
-| Param | Type |
-| --- | --- |
-| keys | <code>string</code> \| <code>Array.&lt;string&gt;</code> | 
-
 <a name="ActionFunction"></a>
 
 ## ActionFunction : <code>function</code>

index.html

@@ -17,7 +17,7 @@
             height: 300dvh;
             color: #333;
             background: linear-gradient(0deg, rgba(17,170,238,1) 0%, rgba(16,208,255,1)  100%);
-            background: #222;
+            /* background: #222; */
         }
 
         #app {

index.js

@@ -6,7 +6,6 @@ import Kioboard from "./src/kioboard.js";
 // kio.load("hr");
 
 const myLayout = {
-    name: "XXX",
     layers: {
         default: [
             "a b c backspace",
@@ -19,7 +18,7 @@ const myLayout = {
             "extras space",
         ],
         myExtras: [
-            "! $ & backspace 1 \u1234",
+            "! $ & backspace 1",
             "% # * enter",
             "default space",
         ]
@@ -35,15 +34,21 @@ const myLayout = {
 };
 
 // const kio = new Kioboard(myLayout);
-const kio = new Kioboard({ inputs: ".kio1", layoutName: "en" });
-const kio2 = new Kioboard({ inputs: ".kio2", layoutName: "hr", shiftState: 2 });
+const kio = new Kioboard({
+    inputs: ".kio1",
+    theme: "my-custom",
+    isAlwaysVisible: true,
+    ...myLayout
+})
 
+const kio2 = new Kioboard({ inputs: ".kio2", layoutName: "hr" });
 
-kio.load("de", (layout) => {
-    console.log(`Loaded: layouts/${kio.layoutName}.js layout`, layout);
-    kio.show(); // Optionally, show it!
-    kio.sequence("shift H default e l l o space emoji default shift W default o r l d shift ! default", 300);
-});
+
+// kio.load("de", (layout) => {
+//     console.log(`Loaded: layouts/${kio.layoutName}.js layout`, layout);
+//     kio.show(); // Optionally, show it!
+//     kio.sequence("shift H default e l l o space emoji default shift W default o r l d shift ! default", 300);
+// });
 
 // const kio = new Kioboard().load("de", (data) => {
 //     console.log(`loaded`, kio, data);

package.json

@@ -1,7 +1,7 @@
 {
     "name": "@rbuljan/kioboard",
     "description": "Virtual keyboard for digital signage kiosk touch screens",
-    "version": "0.1.4",
+    "version": "0.1.5",
     "author": {
         "name": "Roko C. Buljan",
         "url": "https://github.com/rokobuljan"

readme.md

@@ -6,18 +6,16 @@ your  **virtual keyboard** for digital signage kiosk touchscreens
 
 ## Features
 
-- [x] Fully customizable layouts
-- [x] Fully customizable buttons icons
+- [x] Fully customizable layouts and layers
 - [x] Fully customizable buttons actions
+- [x] Fully customizable buttons icons (Unicode, SVG)
 - [x] Themes: default, flat, glass. In light and dark mode
-- [x] Layout files (contribute to the project!)
+- [x] Language presets (contribute to the project!)
 - [x] Shift + Caps-Lock
 - [x] Close Kioboard button
+- [x] Togle or set initial visibility
 - [x] Drag/move Kioboard handler
-- [x] Customizable button icons (supported: Unicode, SVG)
-- [x] Per-button custom action callbacks
-- [x] Toggle Kioboard visibility or set as permanently open
-- [x] Different layouts per input-sets
+- [x] Different layouts per input groups
 - [x] Long key press - repeat input
 
 ## Usage
@@ -48,10 +46,11 @@ Customization options example:
 const kio = new Kioboard({
     layoutName: "en", // "en|de|es|fr|hr" // Contribute for more!
     inputs: "[data-kioboard]", // selector|Element|Element[]|NodeList
+    input: null, // The curently active input Element
     parent: "body", // selector|Element
-    theme: "default", // "default|flat|glass-(light|dark)"
+    theme: "default", // "default|flat|glass"-"light|dark"
     layerName: "default",
-    layers: {}, // instead of layoutName use custom layers
+    layers: {}, // custom layers
     icons: {}, // custom icons
     isEnterSubmit: true, // should Enter submit closest Form
     isVisible: false, // On init
@@ -76,7 +75,7 @@ const kio = new Kioboard({
 
 ## Feature requests / issues
 
-[Github: rokobuljan/kioboard/issues →](https://github.com/rokobuljan/kioboard/issues)
+[GitHub: rokobuljan/kioboard/issues →](https://github.com/rokobuljan/kioboard/issues)
 
 ## Licence
 

src/kioboard.js

@@ -3,6 +3,7 @@ import Emitter from "./emitter.js";
 
 /**
  * DOM helper - Get one DOM element
+ * @ignore
  * @param {string} sel Selector
  * @param {HTMLElement=} par Optional parent defaults to window.document
  * @returns {HTMLElement}
@@ -11,6 +12,7 @@ const el = (sel, par = document) => par.querySelector(sel);
 
 /**
  * DOM helper - Get multiple DOM elements
+ * @ignore
  * @param {string} sel Selector
  * @param {HTMLElement=} par Optional parent defaults to window.document
  * @returns {NodeList}
@@ -19,6 +21,7 @@ const els = (sel, par = document) => par.querySelectorAll(sel);
 
 /**
  * DOM helper - Create new DOM element
+ * @ignore
  * @param {string} tag Tag name
  * @param {Object=} prop Optional element properties
  * @returns {HTMLElement}
@@ -27,6 +30,7 @@ const elNew = (tag, prop) => Object.assign(document.createElement(tag), prop);
 
 /**
  * Convert a string or array of strings - to array
+ * @ignore
  * @param {string|Array<string>} keys
  * @returns {Array<string>}
  */
@@ -136,7 +140,7 @@ class Kioboard {
 
     /**
      * @param {Object} options
-     * @param {string|NodeList|undefined} options.parent=body - Element to insert kioboard into
+     * @param {string|Element|undefined} options.parent=body - Element to insert kioboard into
      * @param {string|NodeList|HTMLElement|undefined} options.inputs=[data-kioboard]] Selector string, Element or elements. The input(s) to bind to
      * @param {HTMLInputElement|HTMLTextAreaElement} options.input=options.inputs[0]] The currently active input
      * @param {string|undefined} [options.layoutName] The /layouts/<name>.js to use
@@ -860,7 +864,7 @@ class Kioboard {
     /**
      * Insert value at caret position.
      * Respects also the input's maxlength.
-     * @param {string} val="" Text to insert at caret position or highlighted section
+     * @param {string} val Text to insert at caret position or highlighted section
      * @param {number} from=this.input.selectionStart
      * @param {number} to=this.input.selectionEnd
      * @example