Mottie/Keyboard

Can you add a keyboard layout change feature like this one?

Opened this issue · 12 comments

MonsterMMORPG commented

I see that we are able to set layout like this

  jQuery.keyboard.layouts['Greek-custom'] = {
    "lang": ["el"],
    // Greek
    "normal": [
      "\\ 1 2 3 4 5 6 7 8 9 0 ' ] {bksp}",
      "{tab} : w ε ρ τ υ θ ι ο π + }",
      "α σ δ φ γ η ξ κ λ \u0384 \u00A8 # {enter}",
      "{shift} < ζ χ ψ ω β ν μ , . - {shift}",
      "{accept} {alt} {space} {alt} {cancel}"
    ],
    "shift": [
      "| ! \" # $ % & / ( ) = ? [ {bksp}",
      "{tab} ; W Ε Ρ Τ Υ Θ Ι Ο Π Ş + }",
      "Α Σ Δ Φ Γ Η Ξ Κ Λ \u00A8 \u0385 @ {enter}",
      "{shift} < Ζ Χ Ψ Ω Β Ν Μ ; : _ {shift}",
      "{accept} {alt} {space} {alt} {cancel}"
    ],
    // latin characters
    "alt": [
      "\\ 1 2 3 4 5 6 7 8 9 0 ' ] {bksp}",
      "{tab} q w e r t y u i o p + }",
      "a s d f g h j k l \u0384 \u00A8 # {enter}",
      "{shift} < z x c v b n m , . - {shift}",
      "{accept} {alt} {space} {alt} {cancel}"
    ],
    "alt-shift" : [
      "| ! \" # $ % & / ( ) = ? [ {bksp}",
      "{tab} Q W E R T Y U I O P * {",
      "A S D F G H J K L \u00A8 \u0385 @ {enter}",
      "{shift} > Z X C V B N M ; : _ {shift}",
      "{accept} {alt} {space} {alt} {cancel}"
    ]
  };

  $('#keyboard').keyboard({
    layout: 'Greek-custom',

  });

Now i think i can define multiple languages like that

But can you add an option that users can select between defined layouts?

How can i achieve it?

Here an example of what i am talking

layoutchange

Moreover i see that you already have many layouts here : https://github.com/Mottie/Keyboard/tree/master/layouts

So how can i initialize the keyboard with multiple selectable layout is this possible?

And i want it to be activated by a button click rather than clicking on a textbox

Mottie commented

Hi @MonsterMMORPG!

I have been wanting to add something similar to this for a while now, but I would like to rewrite this plugin in plain js. And in the rewrite, I'll include this ability.

I'm out of the country right now, and I'll be back next week... the rewrite is high up on my to do list.

Mottie commented

Alternatively, you can add an action key to switch the layout... I'll provide an example next week some time once I catch up with all my emails. Also check out the home wiki page for a bunch of demos

MonsterMMORPG commented

@Mottie ty very much. i suppose rewrite would take months. a temporary simple solution would work for me at the moment as i need urgent :D ty very much

Mottie commented

Sorry for the delay... recovering from jet lag!

Try this demo - it includes the keyboard-layouts-microsoft.min.js file which has all the language files:

$(function() {

  $.keyboard.keyaction.de = function(kb) {
    kb.redraw("de");
  };
  $.keyboard.layouts.de = {
    lang: ["de"],
    normal: [
      "^ 1 2 3 4 5 6 7 8 9 0 ß ´ {bksp}",
      "{tab} q w e r t z u i o p ü +",
      "a s d f g h j k l ö ä # {enter}",
      "{s} < y x c v b n m , . - {s}",
      "{a} {alt} {space} {alt} {c} {de} {en}"
    ],
    shift: [
      '° ! " § $ % & / ( ) = ? ` {bksp}',
      "{tab} Q W E R T Z U I O P Ü *",
      "A S D F G H J K L Ö Ä ' {enter}",
      "{s} > Y X C V B N M ; : _ {s}",
      "{a} {alt} {space} {alt} {c} {de} {en}"
    ],
    alt: [
      "{empty} {empty} ² ³ {empty} {empty} {empty} { [ ] } \\ {empty} {bksp}",
      "{tab} @ {empty} € {empty} {empty} {empty} {empty} {empty} {empty} {empty} {empty} ~",
      "{empty} {empty} {empty} {empty} {empty} {empty} {empty} {empty} {empty} {empty} {empty} {empty} {enter}",
      "{s} | {empty} {empty} {empty} {empty} {empty} {empty} µ {empty} {empty} {empty} {s}",
      "{a} {alt} {space} {alt} {c} {de} {en}"
    ]
  };
  $.keyboard.keyaction.en = function(kb) {
    kb.redraw("en");
  };
  $.keyboard.layouts.en = {
    'normal': [
      '` 1 2 3 4 5 6 7 8 9 0 - = {bksp}',
      '{tab} q w e r t y u i o p [ ] \\',
      'a s d f g h j k l ; \' {enter}',
      '{shift} z x c v b n m , . / {shift}',
      '{accept} {space} {cancel} {de} {en}'
    ],
    'shift': [
      '~ ! @ # $ % ^ & * ( ) _ + {bksp}',
      '{tab} Q W E R T Y U I O P { } |',
      'A S D F G H J K L : " {enter}',
      '{shift} Z X C V B N M < > ? {shift}',
      '{accept} {space} {cancel} {de} {en}'
    ]
  };

  $('#keyboard')
    .keyboard({
      layout: 'en'
    })
    // activate the typing extension
    .addTyping({
      showTyping: true,
      delay: 250
    });
});
MonsterMMORPG commented
MonsterMMORPG commented
Mottie commented

Adding a dropdown is possible, but there are some issues right now.

Because clicking anywhere inside the keyboard takes focus away from the input, the plugin puts the focus back to the input. So selecting a dropdown inside the keyboard is a bit troublesome - demo - to make it work, click and hold the mouse down on the select, then use arrow keys to make your choice. Not a very good UI.

Moving the dropdown outside the keyboard works better - demo:

HTML

<div>Select Language: <select></select></div>
<br>
<input id="keyboard" type="text" />

Script

$(function() {

  var languages = {
    "ar": {
      layout: "ms-Arabic (101)",
      name: "Arabic (\u0627\u0644\u0639\u0631\u0628\u064a\u0629)"
    },
    "de": {
      layout: "ms-German",
      name: "German (Deutsch)"
    },
    "en": {
      layout: "qwerty",
      name: "English"
    },
    "tr": {
      layout: "ms-Turkish F",
      name: "Turkish (T\u00fcrk\u00e7e)"
    }
  }

  function selectLang(lang) {
    var obj = languages[lang],
      kb = $('#keyboard').getkeyboard();
    if (obj) {
      kb.options.language = lang;
      kb.redraw(obj.layout);
    }
  };

  function addLang() {
    var html = '';
    Object.keys(languages).forEach(function(language) {
      html += `<option value="${language}">${languages[language].name}</option>`;
    });
    $('select')
      .html(html)
      .val($('#keyboard').getkeyboard().options.language || "en")
      .change(function() {
        selectLang(this.value);
      });
  }

  $('#keyboard')
    .keyboard({
      usePreview: false
    })
    // activate the typing extension
    .addTyping({
      showTyping: true,
      delay: 250
    });
  addLang();

});
Mottie commented

Oh, and the Arabic and Turkish language and layouts are contained in each of the following files (you'll need to find the specific layout names since they are named differently in each file):

MonsterMMORPG commented
MonsterMMORPG commented
Mottie commented

There are several options you might want to check out:

MonsterMMORPG commented