Posibble to add altkeyspopup to the extender

[tobiasvandriessel]

I'm probably pushing you into fury by now with all my requests, but is it possible to use the AltKeysPopUp with an extender? I just noticed this seems to be impossible right now, is that correct?

[Mottie]

Hi @tobiasvandriessel!

It is already possible... the extender layout needs to contain a key, or keys, setup in the alkeypopup altKeys object (ref):

demo

Although, now that I test it, it appears that the popup isn't correctly centered over the extender layout... I'll have to fix that.

[Mottie]

Hmm, and the altKeysPopup breaks after switching layouts...

[tobiasvandriessel]

Thanks for your quick reply! So, I'll have to add the AltKeysPopup everytime I switch then? That's no big issue :P

The correctly center part isn't that important for me, I think, as I move the div to another place on the screen anyway and would probably need to adjust it anyhow.

[Mottie]

So, calling the altKeysPopup a second time doesn't appear to work... I'll put this on my to-do list for tomorrow...

It's time!

[Mottie]

Ok, I think everything is all fixed up! demo

Here is the hex action button code... you will need to call the addAltKeyPopup function. There is also a new popupPosition callback which will let you reposition the popup.

$.keyboard.keyaction.hex = function(kb) {
  hexActive = !hexActive;
  // update state of hex button
  $('.ui-keyboard-hex').toggleClass(kb.options.css.buttonActive, hexActive);
  // toggle hex button
  $keyboard
    .addExtender({
      layout: hexActive ? 'hexpad' : 'numpad'
    })
    .addAltKeyPopup({
      popupPosition: function(kb, data) {
        /*
        {
          $kb         : Keyboard element (jQuery object),
          $key        : Clicked key element (jQuery object),
          $popup      : Popup container (jQuery object),
          kbHeight    : Keyboard element outer height,
          kbWidth     : Keyboard element outer width,
          popupHeight : Popup container height,
          popupWidth  : Popup container width,
          popupLeft   : Popup container left position,
          popupTop    : Popup container top position
        }
        example: tweak position for extender layout
        if (data.$key.closest('.ui-keyboard-extender').length) {
          data.$popup.css('left', data.popupLeft - data.$popup.width() * 1.5);
        }
        */
      }
    });
};

[tobiasvandriessel]

Ah shiiit, you're just too great haha! Can I get you a beer or something? :P