Adding extender resets the keyboard to the standard keyset

[tobiasvandriessel]

My problem is that adding another extender resets the keyboard to the standard keyset, is this intended behaviour? In that case you can just close the issue :P But to me, it doesn't seem like that is the best standard behaviour when adding an extender, because I can imagine people wanting to add an extender to the current KeySet, without having to switch to that KeySet again after adding the Extender.

P.S. The keyset switching works really well :)

[Mottie]

Hi @tobiasvandriessel!

The problem is that the redraw() function was originally created to allow switching the main keyboard layout. If the user changed the view to an alt, shift or meta keyset, and then switched the layout, the new layout may or may not have the same keysets. So the keysets are reset (ref) to prevent that issue.

I guess I could add an option to override that behavior, or maybe not reset if the same main keyboard keyset is still being used. What do you think?

[tobiasvandriessel]

Ha, thanks for your quick reply! Hmm, okay I understand now how it started out, thanks. To be honest, the first option feels like a hacky way that may introduce trouble in the future, the second option sounds better but I don't know all the use cases, so some use cases might be hurt? I guess the best way is to let it stay like this, except if you think there is no use case where somebody would like to redraw a keyboard with the same keyset! Thanks for this discussion haha

[Mottie]

You give up too soon grasshoppa....

If we add a variable to save the last keyset, you can reset the layout - https://jsfiddle.net/Mottie/y0hL0ea9/2/

Code from #505 with added lastKeyset variable and beforeVisible callback:

$(function() {

  var $keyboard = $('#keyboard'),
    // extender layout
    lastKeyset = '',
    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;
    lastKeyset = kb.last.keyset;
    // 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"
    },
    beforeVisible: function(e, kb) {
      if (lastKeyset) {
        [kb.shiftActive, kb.altActive, kb.metaActive] = lastKeyset;
        kb.showKeySet();
      }
    },
    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
  });
});

[Mottie]

Oops, I threw in some array destructuring in the code... just in case you or someone else doesn't understand, these two bits of code are equivalent:

[kb.shiftActive, kb.altActive, kb.metaActive] = lastKeyset;
/* the code above does the same thing as the code below */
kb.shiftActive = lastKeyset[0];
kb.altActive = lastKeyset[1];
kb.metaActive = lastKeyset[2];

[Mottie]

See #505 (comment) for update... basically all this has been internalized in the extender code.

demo - https://jsfiddle.net/Mottie/gn3qcxLn/