UPPERCASE/lowercase definition suggestion

Hi,

I tested your virtual keyboard and like it very much. Although there is, I think, an enhancement to make it closer to real life keyboard. Besides of the regular alphabet letters, there are punctuation signs and the javascript does know how to handle local lower case of '?' for instance... I suggest that the JSON keyboard definition could contain a 2 letter string in some cases to define upper case and lower case, respectively, of the character to show.

example: for a basic french keyboard would be:

[ 
  { "0": "A", "1": "Z", "2": "E", "3": "R", "4": "T", "5": "Y", "6": "U", "7": "I", "8": "O", "9": "P"},
  { "0": "Q", "1": "S", "2": "D", "3": "F", "4": "G", "5": "H", "6": "J", "7": "K", "8": "L", "9": "M"},
  { "0": "W", "1": "X", "2": "C", "3": "V", "4": "B", "5": "N", "6": "?,", "7": ".;", "8": "/:", "9": "+="}
]

I did it... This modification requires to:

1/ Add some new style definitions in the css (or the aio version):

#KioskBoard-VirtualKeyboard.kioskboard-tolowercase .kioskboard-row-dynamic span[class^=kioskboard-key][lowercase]:after{
content:attr(lowercase)
}
#KioskBoard-VirtualKeyboard.kioskboard-touppercase .kioskboard-row-dynamic span[class^=kioskboard-key][uppercase]:after{
content:attr(uppercase)
}

2/ Add some extra code in the javascript inputFocusListener function to use these new classes:

            // dynamic keys group: begin
            for (var i = 0; i < data.length; i++) {
              var eachObj = data[i];
              var rowKeysContent = '';
              for (var key5 in eachObj) {
                if (Object.prototype.hasOwnProperty.call(eachObj, key5)) {
                  var index5 = key5;
                  var value5 = eachObj[key5];
                  var key_value = value5.toString();
                  var extra_attr = "";
                  if (value5.length > 1) {
                    key_value = "";
                    extra_attr=' uppercase="' + value5.toString()[0] + '" lowercase="' + value5.toString()[1] + '"';
                  }
                  var eachKey5 = '<span style="font-family:' + fontFamily + ',sans-serif;font-weight:' + fontWeight + ';font-size:' + fontSize + ';" class="kioskboard-key kioskboard-key-' + value5.toString().toLocaleLowerCase(keyboardLanguage) + '" data-index="' + index5.toString() + '" data-value="' + value5.toString() + '"'+ extra_attr + '>' + key_value + '</span>';
                  rowKeysContent += eachKey5;
                }
              }
              keysRowElements += '<div class="kioskboard-row kioskboard-row-dynamic">' + rowKeysContent + '</div>';
            }
            // dynamic keys group: end

3/ Finally, add some extra code in the javascript keysClickListeners function to return the right value to the input field:

                  // check capslock
                  if (keyValue.length < 2) {
                      if (isCapsLockActive) {
                        keyValue = keyValue.toLocaleUpperCase(keyboardLanguage);
                      } else {
                        keyValue = keyValue.toLocaleLowerCase(keyboardLanguage);
                      }
                  } else {
                      if (isCapsLockActive) {
                        keyValue = keyValue[0]
                      } else {
                        keyValue = keyValue[1]
                      }
                  }

Hope this helps...

furcan / KioskBoard

UPPERCASE/lowercase definition suggestion #16