Version 2.0

[Mottie]

I am planning on rewriting this plugin in plain JS or React. The following list are changes that are being planned. Please feel free to comment:

Remove

• Remove jQuery dependency.
• Remove built-in jQuery UI position utility support. Use the beforeVisible or visible callback to position it.
• Remove position option - see above.
• Remove customLayout option; The layout option will accept the custom layout instead.
• Remove '{accept} {space} {cancel}' row from every language layout - we'll use the addRow method to add these instead (described below).

Change/Fix

• Improved deadkey support. Allow various input methods:

  • Combine input keys (e.g. ' + a becomes á) - only if a key is active? - see #79.
  • AltGr + letter shortcut - see #106.

• Better support, demo and documentation for use with Codemirror - see #306 & #551.

• Better support, demo and documentation for use with Ace editor - see #306.

• Better support, demo and documentation for plugins like select2, chosen, selectator and selectize.js - see #349 & #464.

• Find a way to override the Alt key in Windows to allow switching keysets.

• Use tabindex properly when switching inputs - see #472.

• Set display option to allow modifying the text of any key - see #555.

• Split keyboard layouts, similar to the extender extension, but add to different containers like a split physical keyboard.

• Expand keyaction definitions. Possible syntax:

  Keyboard.keyActions = {
  
    accept: {
      // action key aliases; can replace with a regular expression
      aliases: [ "{a}", "{accept}" ],
      // if null, get key content from language display definition;
      // if it doesn't exist, the keyAction name is used
      content: null,
      // extra class names added to key (defaults contained in Keyboard.css)
      classes: "accept-me",
      tooltip: "",
      // key action to perform
      action : function (kb) {
        kb.accept();
      },
      // add keys that are allowed to enter into the input/textarea if
      // `restrictInput` is set
      acceptedKeys: []
    },
  
    spacer: {
      aliases: [ /^\{sp:((\d+)?([\.|,]\d+)?)(em|px)?\}$/i ],
      content: function(kb, key) {
        // kb = keyboard object
        // key = alias minus the wrapping {}
        // not perfect globalization, but allows you to use
        // {sp:1,1em}, {sp:1.2em} or {sp:15px}
        let margin = parseFloat(key.replace(/,/, '.')
          .match(/^sp:((\d+)?([\.|,]\d+)?)(em|px)?$/i)[1] || 0),
  
          // previously {sp:1} would add 1em margin to each side of a 0 width
          // span now Firefox doesn't seem to render 0px dimensions, so now we
          // set the 1em margin x 2 for the width
          width = (key.match(/px/i) ? margin + 'px' : (margin * 2) + 'em'),
  
          span = document.createElement('span');
  
        span.css.width = width;
        return span;
      },
      classes: "keyboard-spacer",
      tooltip: ""
      // action: null,
      // acceptedKeys: []
    },
  
    panic: {
      aliases: [ "{panic}", "{!!!}" ],
      content: "Panic!!!",
      classes: "keyboard-action-panic",
      tooltip: "",
      action: function (kb) {
        Modal.open({
          media: "assets/panic.mp4",
          onClose: function() {
            kb.insertText("Ahhhhh!");
          }
        });
      },
      acceptedKeys: "panic!".split("")
    }
  
  };

• Add internal methods to change key/keyactions to auto-suggest characters (e.g. suggest Pinyin characters based on input - see #322).

• Rename tabNavigation to tabBehavior and give it 3 options (see #692):

  • "disable" - do nothing
  • "insertTab" - textarea only
  • "navigate" - textarea & input

Add

• Support for contenteditable elements - see #208 & #540.

• Support for input masks - new, or integrate an existing masker? see #89 & #201.

• Allow initialization on the document & use a delegated binding on input/textarea - see #558.

• Better support, demo and documentation for use with Mathquill - see #423.

• Wrap each row with a div to support row styling (e.g. row spacing).

• Physical keyboard shortcuts?

• Add layout & language selector to keyboard popup - see #110, #355 & #532:

  • Allow chosing which layouts & languages to include.
  • Allow toggling the display of selectors.
  • Allow enable/disabling of these selectors.

• Add a customizable tool bar:

  • Set location, e.g. across the top or bottom.
  • Include custom keys: lock/unlock, enable/disable, etc.
  • Include layout & language selectors.

• Add a key:

  • Allows adding a key or action key to any layout without having to copy/paste a current layout and making it "custom".

  • Possible syntax:

    Keyboard.addKey("{test}", {
      // keyset(s); opts "all", "normal", "shift", "meta", etc
      // should allow multiple settings, e.g. "normal,shift" (add to 2+ keysets)
      to: "all",
      // where to add row & column (zero-based index)
      row: 0,
      column: 0
    });

• Add a row:

  • Allows adding a row of keys to any layout without having to copy/paste a current layout and making it "custom".

  • Possible syntax:

    Keyboard.addRow("{accept} {space} {cancel}", {
      // keyset(s); opts "all", "normal", "shift", "meta", etc
      // should allow multiple settings, e.g. "normal,shift" (add to 2+ keysets)
      to: "all",   
      // where to add the row
      // "append", "prepend", or "2" (zero-based row index)
      loc: "append"
    });

• Replace a row

  • Allows replacing an existing row of keys in any layout without having to copy/paste a current layout and making it "custom".

  • Similar to javascript .replace() and allow using regular expressions to match a row.

  • Possible syntax:

    // syntax: replaceRow({original row}, {new row});
    Keyboard.replaceRow("{accept} {space} {cancel}", "{a} {space} {c}");
    // or
    Keyboard.replaceRow(/\{accept\}/g, "{a} {space} {c}");

• Remove a button from a defined layout

  • If you don't want to redefine a defined layout, add a setting to remove one or more buttons from the layout - see #49 (comment)
  • For example: tab: false or ignore: ['tab', 'lock']

[jbotte]

Love the idea of plain js!

[squarism]

In terms of plain js, do you mean you'd just traverse and manipulate the DOM using some modern browser baseline? Or would you split out the project into plain javascript objects (like a lib) and then have bindings to jquery or react? Even if you didn't tackle the bindings bits, having a library would make creating a mottie-react project sort of easier. The component would just include the library and invoke functions. CSS would be in the react binding project. All the logic / layout / human language details would be in the lib maybe? Is this close or just rambling?

[Mottie]

Hi @squarism!

I was actually thinking to build it as a library that can be used just like that... then I, with help, could build adapters for other libraries.

[exylzior]

Good Day ! ! !

I'm trying to use your library in a React but I'm having some difficulty in using the example as reference because it uses gives a Jquery example do you have React Examples ?