Modularization of keyboard for different use cases

[bachp]

Hello Rob

We ran into some performance issues with your keyboard recently. The problem is the mismatch between the way the keyboard is constructed and our use case.
The idea behind the keyboard is that there is one keyboard per input box but in our use case we need one keyboard for many different input boxes. So the current solution doesn't scale well.

Our idea is to implement a simpler version of the keyboard that supports this use case better. Concretely this means a version of the keyboard that handles multiple input fields from one single instance.

Do you think it would be possible to modularize the functions in a way similar to what jquery does right now with version 1.8. This way the keyboard can be built in different variants for different use cases. But still share the code base. This allows to exclude functions that are not needed and improves performance.

What do you think about this idea? I would be happy to contribute to this enterprise if you think this is a good way to go.

Regards
Pascal

[Mottie]

It would probably be better to not to apply a new instance of the plugin to each input. I've been thinking about rewriting the core plugin as you described so it will perform better when there are numerous elements; but it'll likely require a lot of changes that I don't have the time to do right now.

I would be overjoyed to get some help with the project. What is it that you could help me with? :P

[bachp]

I was thinking about adding a singleton option that takes a jQuery element or selector. If this singleton option is set the keyboard will only be created once and attached to the element specified by singleton.
The elements the keyboard was applied to will only function as targets for the singleton keyboard. Internally the keyboard should hold a reference to the last focused element. If the user starts typing the input should automatically go there. However if the user changes focus to another input element assigned to the keyboard the input should go there of course.

Example:
$(".keyboard-inputs").keyboard({singleton: $("#keyboard-container")});

Do you think this would be hard to implement with the existing code? Or do you have a better solution?

Cheers
Pascal

[bachp]

Hello again

I started to re factor the keyboard to allow the separation of the keyboard container and the input elements.

See the following commit for what I did.
siemens@ccd3749

base.$el is now the contatiner for the keyboard. base.$inputs are the input fields associated to the keyboard. base.$focus is the input field where new input is going to, it is the inputs field that had the focus last.

I now plan to modify the keyboard to allow multiple inputs this currently doesn't work.

What do you think?

[Mottie]

Hmmm, it still seems like it creates a new keyboard for each input... I get three ui-keyboard divs when I open the first three qwerty examples in the index.html file.

I was thinking about moving a bunch of the functions out to $.keyboard and making the base.$el the document body. Then adding a class specific for the layout name to each created keyboard, then the plugin can just find the layout of that type and use it.

But again, my time is short... I have too many things going on right now =( Thanks for your effort!

P.S. Also, when I click inside of the Qwerty Password demo.. I get this error:

Uncaught TypeError: Cannot read property 'length' of null
jquery.keyboard.js:159

[bachp]

Thanks for your feedback. I fixed the errors withe null. It happened when the stayOpen was set to null.

As for the multiple keyboards. It only creates a single keyboard if you explicitly specify the singleton parameter.

E.g. $(".all-inputs").keyboard({singleton: $("#keyboard-location")});

It will then create a keyboard at the location <div id="keyboard-location></div>
for all input elements with the all-inputs class.

I will try to add a demo when I have time.

[Mottie]

Hi @pascal-bach!

In the latest update, I've made some changes that should enhance performance. Basically when the same layout is used on multiple keyboards, the layout is only built once. Multiple keyboards are no longer stored in memory nor are they kept in the DOM - the keyboard is essentially cloned from a "master" copy and destroy after each use.