npm update

package.json

@@ -1,6 +1,6 @@
 {
   "name": "simple-keyboard",
-  "version": "2.18.1",
+  "version": "2.19.0",
   "description": "On-screen Javascript Virtual Keyboard",
   "main": "build/index.js",
   "types": "build/index.d.ts",

src/lib/components/Keyboard.css

@@ -26,6 +26,18 @@ html {
   margin-right: 5px;
 }
 
+.simple-keyboard .hg-row .hg-button-container {
+  margin-right: 5px;
+}
+
+.simple-keyboard .hg-row > div:last-child {
+  margin-right: 0;
+}
+
+.simple-keyboard .hg-row .hg-button-container {
+  display: flex;
+}
+
 .simple-keyboard .hg-button {
   display: inline-block;
   flex-grow: 1;

src/lib/components/Keyboard.js

@@ -813,18 +813,104 @@ class SimpleKeyboard {
   /**
    * Get module prop
    */
-  getModuleProp = (name, prop) => {
+  getModuleProp(name, prop) {
     if (!this.modules[name]) return false;
 
     return this.modules[name][prop];
-  };
+  }
 
   /**
    * getModulesList
    */
-  getModulesList = () => {
+  getModulesList() {
     return Object.keys(this.modules);
-  };
+  }
+
+  /**
+   * Parse Row DOM containers
+   */
+  parseRowDOMContainers(
+    rowDOM,
+    rowIndex,
+    containerStartIndexes,
+    containerEndIndexes
+  ) {
+    let rowDOMArray = Array.from(rowDOM.children);
+    let removedElements = 0;
+
+    if (rowDOMArray.length) {
+      containerStartIndexes.forEach((startIndex, arrIndex) => {
+        let endIndex = containerEndIndexes[arrIndex];
+
+        /**
+         * If there exists a respective end index
+         * if end index comes after start index
+         */
+        if (!endIndex || !(endIndex > startIndex)) {
+          return false;
+        }
+
+        /**
+         * Updated startIndex, endIndex
+         * This is since the removal of buttons to place a single button container
+         * results in a modified array size
+         */
+        let updated_startIndex = startIndex - removedElements;
+        let updated_endIndex = endIndex - removedElements;
+
+        /**
+         * Create button container
+         */
+        let containerDOM = document.createElement("div");
+        containerDOM.className += "hg-button-container";
+        let containerUID = `${
+          this.options.layoutName
+        }-r${rowIndex}c${arrIndex}`;
+        containerDOM.setAttribute("data-skUID", containerUID);
+
+        /**
+         * Taking elements due to be inserted into container
+         */
+        let containedElements = rowDOMArray.splice(
+          updated_startIndex,
+          updated_endIndex - updated_startIndex + 1
+        );
+        removedElements = updated_endIndex - updated_startIndex;
+
+        /**
+         * Inserting elements to container
+         */
+        containedElements.forEach(element => containerDOM.appendChild(element));
+
+        /**
+         * Adding container at correct position within rowDOMArray
+         */
+        rowDOMArray.splice(updated_startIndex, 0, containerDOM);
+
+        /**
+         * Clearing old rowDOM children structure
+         */
+        rowDOM.innerHTML = "";
+
+        /**
+         * Appending rowDOM new children list
+         */
+        rowDOMArray.forEach(element => rowDOM.appendChild(element));
+
+        if (this.options.debug) {
+          console.log(
+            "rowDOMContainer",
+            containedElements,
+            updated_startIndex,
+            updated_endIndex,
+            removedElements + 1
+          );
+        }
+      });
+    }
+
+    return rowDOM;
+  }
 
   /**
    * Renders rows and buttons as per options
@@ -852,6 +938,7 @@ class SimpleKeyboard {
     let useTouchEvents = this.options.useTouchEvents || false;
     let useTouchEventsClass = useTouchEvents ? "hg-touch-events" : "";
     let useMouseEvents = this.options.useMouseEvents || false;
+    let disableRowButtonContainers = this.options.disableRowButtonContainers;
 
     /**
      * Account for buttonTheme, if set
@@ -879,10 +966,52 @@ class SimpleKeyboard {
       let rowDOM = document.createElement("div");
       rowDOM.className += "hg-row";
 
+      /**
+       * Tracking container indicators in rows
+       */
+      let containerStartIndexes = [];
+      let containerEndIndexes = [];
+
       /**
        * Iterating through each button in row
        */
       rowArray.forEach((button, bIndex) => {
+        /**
+         * Check if button has a container indicator
+         */
+        let buttonHasContainerStart =
+          !disableRowButtonContainers &&
+          button.includes("[") &&
+          button.length > 1;
+        let buttonHasContainerEnd =
+          !disableRowButtonContainers &&
+          button.includes("]") &&
+          button.length > 1;
+
+        /**
+         * Save container start index, if applicable
+         */
+        if (buttonHasContainerStart) {
+          containerStartIndexes.push(bIndex);
+
+          /**
+           * Removing indicator
+           */
+          button = button.replace(/\[/g, "");
+        }
+
+        if (buttonHasContainerEnd) {
+          containerEndIndexes.push(bIndex);
+
+          /**
+           * Removing indicator
+           */
+          button = button.replace(/\]/g, "");
+        }
+
+        /**
+         * Processing button options
+         */
         let fctBtnClass = this.utilities.getButtonClass(button);
         let buttonThemeClass = buttonThemesParsed[button];
         let buttonDisplayName = this.utilities.getButtonDisplayName(
@@ -982,6 +1111,16 @@ class SimpleKeyboard {
         rowDOM.appendChild(buttonDOM);
       });
 
+      /**
+       * Parse containers in row
+       */
+      rowDOM = this.parseRowDOMContainers(
+        rowDOM,
+        rIndex,
+        containerStartIndexes,
+        containerEndIndexes
+      );
+
       /**
        * Appending row to keyboard
        */

src/lib/components/tests/Keyboard.test.js

@@ -1075,4 +1075,100 @@ it('Keyboard beforeRender method will work', () => {
   });
 
   expect(timesCalled).toBe(2);
+});
+
+it('Keyboard parseRowDOMContainers will work', () => {
+  testUtil.setDOM();
+
+  let keyboard = new Keyboard({
+    layout: {
+      '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} {arrowleft} [{arrowup} {arrowdown}] {arrowright}'
+      ],
+      '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}'
+      ]
+    }
+  });
+
+  let containers = Array.from(document.querySelectorAll(".hg-button-container"));
+
+  expect(containers.length).toBe(5);
+
+  keyboard.setOptions({
+    debug: true
+  });
+
+  expect(containers.length).toBe(5);
+});
+
+it('Keyboard parseRowDOMContainers will ignore empty rows', () => {
+  testUtil.setDOM();
+
+  let failed = false;
+
+  try {
+    let keyboard = new Keyboard();
+    keyboard.parseRowDOMContainers({
+      children: []
+    });
+  } catch (e) {
+    failed = true;
+  }
+
+  expect(failed).toBeFalsy();
+});
+
+
+it('Keyboard parseRowDOMContainers will ignore missing endIndex or endIndex before startIndex', () => {
+  testUtil.setDOM();
+
+  let keyboard = new Keyboard({
+    layout: {
+      'default': [
+        '` [1 2 3 4 5 6 7 8 9 0 - = {bksp}',
+        '` 1 2 3] 4 5 6 7 8 9 [0 - = {bksp}',
+      ]
+    }
+  });
+
+  let containers = Array.from(document.querySelectorAll(".hg-button-container"));
+
+  expect(containers.length).toBe(0);
+});
+
+it('Keyboard disableRowButtonContainers will bypass parseRowDOMContainers', () => {
+  testUtil.setDOM();
+
+  let keyboard = new Keyboard({
+    disableRowButtonContainers: true,
+    layout: {
+      '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} {arrowleft} [{arrowup} {arrowdown}] {arrowright}'
+      ],
+      '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}'
+      ]
+    }
+  });
+
+  let containers = Array.from(document.querySelectorAll(".hg-button-container"));
+
+  expect(containers.length).toBe(0);
 });