Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
MonsterMMORPG opened this issue Feb 28, 2017 · 12 comments
Open

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

MonsterMMORPG opened this issue Feb 28, 2017 · 12 comments
Labels
Demo Enhancement How to... Layout Version 2

Comments

@MonsterMMORPG
Copy link

MonsterMMORPG commented Feb 28, 2017 •
edited
Loading

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
Copy link
Owner

Mottie commented Mar 1, 2017

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
Copy link
Owner

Mottie commented Mar 1, 2017

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
Copy link
Author

@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
Copy link
Owner

Mottie commented Mar 9, 2017

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
    });
});

@Mottie Mottie mentioned this issue Mar 9, 2017
Closed
@MonsterMMORPG
Copy link
Author

MonsterMMORPG commented Mar 10, 2017 via email

@MonsterMMORPG
Copy link
Author

MonsterMMORPG commented Mar 10, 2017 via email

@Mottie
Copy link
Owner

Mottie commented Mar 10, 2017

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
Copy link
Owner

Mottie commented Mar 10, 2017

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
Copy link
Author

MonsterMMORPG commented Mar 10, 2017 via email

@MonsterMMORPG
Copy link
Author

MonsterMMORPG commented Mar 10, 2017 via email

@Mottie
Copy link
Owner

Mottie commented Mar 10, 2017

There are several options you might want to check out:

@MonsterMMORPG
Copy link
Author

MonsterMMORPG commented Mar 10, 2017 via email

@Mottie Mottie mentioned this issue Apr 6, 2017
Closed
@Mottie Mottie mentioned this issue May 5, 2017
Open
28 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Demo Enhancement How to... Layout Version 2
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@Mottie @MonsterMMORPG