Creating a extension placed somewhere else

[tobiasvandriessel]

Is it possible to extend the keyboard with additional keys not directly attached to the keyboard? I'd like to place a 'small keyboard' at the top-right of the screen while the main keyboard is at the bottom, the way I did it right now (very hacky) was placing the wanted keys in the keyboard and then moving them to the top right on top of a div with the same background colour. I'd imagine this is not included in the library, but would you know a way even a bit more smart than my hacky way? :P Thanks a lot in advance!

[Mottie]

Hi @tobiasvandriessel!

You can use the extender extension to create a secondary set of keys - see the docs.

The extender keys are added inside of a div with a ui-keyboard-extender class name during the beforeVisible event. You can move that div to the top-right corner using the visible event. Those keys would still be bound to the input.

[tobiasvandriessel]

Thanks again for your quick reply! Your answer comes very close to the solution, but I'd like to use different sets of keys for the extender, is that possible? Or is it possible to use different extenders?

[Mottie]

The extender is set up to only accept a layout name. So, define a custom layout and save it to the $.keyboard.layouts object. Then pass that name to the extender - demo:

$(function() {

  // this layout is already included in the extender
  // code. It is added here as an example.
  $.keyboard.layouts.numpad = {
    'normal': [
      '{clear} / * -',
      '7 8 9 +',
      '4 5 6 %',
      '1 2 3 =',
      '0 {dec} {left} {right}'
    ]
  };

  $('#keyboard').keyboard({
    layout: 'custom',
    customLayout: {
      '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} {extender}'
      ],
      '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} {extender}'
      ]
    }
  }).addExtender({
    // choose any layout
    layout: 'numpad',
    // start with extender showing?
    showing: false,
    // reposition keyboard after toggling extender layout
    reposition: true
  });
});

[tobiasvandriessel]

Thanks for your reply and sorry for being so vague with my question, but what I meant to ask was: Is it possible to define multiple extenders or (multiple) different keysets within one extender and switch between them?

[Mottie]

To add multiple extender layouts, you'll need to reinitialize the extender... I put together this demo; click on the monkey to switch extender layouts.

$(function() {

  var $keyboard = $('#keyboard'),
    // extender layout
  	hexActive = false;

  $.keyboard.layouts.numpad = {
    'normal': [
      '{clear} / * -',
      '7 8 9 +',
      '4 5 6 %',
      '1 2 3 =',
      '0 {dec} {left} {right}'
    ]
  };

  $.keyboard.layouts.hexpad = {
    'normal': [
      'C D E F',
      '8 9 A B',
      '4 5 6 7',
      '0 1 2 3',
      'x {clear} {left} {right}'
    ]
  };

  // switch extender layout
  $.keyboard.keyaction.hex = function(kb) {
    hexActive = !hexActive;
    // toggle hex button
    $keyboard.addExtender({
      layout: hexActive ? 'hexpad' : 'numpad',
      // restore current state of extender
      showing: kb.extender_options.showing
    });
    kb.redraw();
    // update state of hex button
    $('.ui-keyboard-hex').toggleClass(kb.options.css.buttonActive, hexActive);
  };

  $keyboard.keyboard({
    layout: 'custom',
    display: {
    	hex: "🐵:Hexpad",
      clear: "🗑:Clear",
      extender: " :Toggle Pad"
    },
    customLayout: {
      '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} {extender} {hex}'
      ],
      '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} {extender} {hex}'
      ]
    }
  }).addExtender({
    // choose any layout
    layout: 'numpad',
    // start with extender showing?
    showing: true,
    // reposition keyboard after toggling extender layout
    reposition: true
  });
});

[tobiasvandriessel]

Thanks, a lot! :) Now I can rewrite everything to different keysets and extenders, which will probably be way more efficient! :D

[Mottie]

Ugh, sorry, some changes I made in v1.26.9 were making the extender layout shift under the main keyboard. I've fixed this in v1.26.11!

[tobiasvandriessel]

No problem! :)

[Mottie]

Alrighty, this time I updated the extender code to preserve the keyset and redraw on its own; you'll still need to call the extender function to update the layout... and the hex action key no longer needs to call redraw() - updated demo

$(function() {

  var $keyboard = $('#keyboard'),
    // extender layout
    hexActive = false;

  $.keyboard.layouts.numpad = {
    'normal': [
      '{clear} / * -',
      '7 8 9 +',
      '4 5 6 %',
      '1 2 3 =',
      '0 {dec} {left} {right}'
    ]
  };

  $.keyboard.layouts.hexpad = {
    'normal': [
      'C D E F',
      '8 9 A B',
      '4 5 6 7',
      '0 1 2 3',
      'x {clear} {left} {right}'
    ]
  };

  // switch extender layout
  $.keyboard.keyaction.hex = function(kb) {
    hexActive = !hexActive;
    // update state of hex button
    $('.ui-keyboard-hex').toggleClass(kb.options.css.buttonActive, hexActive);
    // change extender layout
    $keyboard.addExtender({
      layout: hexActive ? 'hexpad' : 'numpad'
    });
  };

  $keyboard.keyboard({
    layout: 'custom',
    display: {
      hex: "🐵:Hexpad",
      clear: "🗑:Clear",
      extender: " :Toggle Pad"
    },
    customLayout: {
      '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} {extender} {hex}'
      ],
      '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} {extender} {hex}'
      ]
    }
  }).addExtender({
    // choose any layout
    layout: 'numpad',
    // start with extender showing?
    showing: true,
    // reposition keyboard after toggling extender layout
    reposition: true
  });
});

[tobiasvandriessel]

Sorry for my late response on your fast response, you're amazing! Going to implement it right away :)