Hacking at 0300

Last modified 2011-10-28; added box option

The Hebrew pop-up keyboard on the YI site search box was always hard-coded and kind of obtrusive, so I wanted to make a jQuery plugin to add a keyboard to any input type="text" or textarea. To make it more flexible, I factored it into a general-purpose popup widget and the keyboard itself.

Download the code.

$.ui.textpopup

The $.ui.textpopup widget is meant to be a base class for real popup widgets. It requires jQuery UI 1.7 and my subclassing code. The subclass needs to override the _fill method to fill the box with the desired controls. For example:

<div id="example1">
	Example 1: <input>
</div>

$.widget("ui.helloWorld", $.bililite.textpopup, {
	_fill: function(box){
		var self = this;
		$('<input type="button" value="Hello, World" />').appendTo(box).click(function() {
			self.element.val('Hello, World')
		});
	}
});

$('#example1 input').helloWorld();

textpopup has the following options:

show {Function}
Called to show the popup; this is set to the popup div and 
the speed is the argument(s) (this is meant to be a function called like $.fn.show). 
hide {Function}
Called to show the popup; this is set to the popup div and
the speed is the argument(s) (this is meant to be a function called like $.fn.hide)
box {jQuery object|undefined}
Element to contain the popup box. If undefined, a new, absolutely-positioned <div> is created. Set this to create an "inline" popup.
shown {Function}
Callback (this is set to the input element) called when show is completed
Also available as the custom event textpopupshown
hidden {Function}
Callback (this is set to the input element) called when hide is completed
Also available as the custom event textpopuphidden
created {Function}
Callback (this is set to the input element) called when the popup is created. Signature is
Function(Event, box {jQuery object})
Also available as the custom event textpopupcreated
speed {String|Number|Array}
Parameter to pass to show/hide above. If it is an array, it is passed with apply
so you can pass multiple arguments.
 For instance, to use jQuery UI effects, use speed: ['slide', {direction: 'right'}, 'slow']
hideOnOutsideClick {Boolean}
true to hide the popup if the mouse is clicked outside the popup or the target element
position {'tl'|'lt|'bl'|'lb'|'tr'|'rt'|'br'|'rb'|Object}
String that indicates where to position the popup
  relative to the textbox. 'tl' means on top of the input box, aligned to the left edge;
  'lt' means on the left of the input box aligned to the top edge; similarly 'b' for bottom
 and 'r' for right. If an object is passed, it will be passed unchanged to position, except that if the of option
 is not specified, it will be set to this.element
trigger {'self'|null|String|jQuery|DOM element}
Element(s) to use as the trigger to show the
  popup. uses the code 
    if (trigger == 'self') trigger = self.element; if (trigger) $(trigger).click(function(){self.show()})
class {String}
class to be added to the popup box

// Default values
$.ui.textpopup.prototype.options = {
	show: $.fn.show,
	hide: $.fn.hide,
	speed: 'slow',
	hideOnOutsideClick: true,
	position: 'tl',
	trigger: 'self',
	'class': 'ui-textpopup-box'
};

Note that the event names prepend the actual name of the widget, so if you subclass textpopup, use the new name. Thus $.ui.textpopup.subclass('foo'); $(selector).foo().bind('fooshown', function(){});.

Examples of position:

<div id="example2">
<div><strong>tl</strong><input/></div>
<div><strong>lt</strong><input/></div>
<div><strong>br</strong><input/></div>
<div><strong>rb</strong><input/></div>
<div><strong>lb</strong><input/></div>
</div>

$('#example2 input').each(function(){
  $(this).css({height: '50px'}).helloWorld({position: $(this).prev().text()});
});

$('#example2 div, #example2 span').css({margin:'2px'});

<div id="example3">
<div><strong>Slide Right</strong><input/></div>
</div>

$('#example3 input').each(function(){
  $(this).css({height: '50px'}).helloWorld({
    speed: ['slide', {direction: 'right'}, 'slow'],
    position: {my: 'bottom', at: 'top'}
  });
});

$('#example3 div, #example3 span').css({margin:'2px'});

Callable functions include (obviously, use the name of the subclass you created):

$(...).textpopup('show') and $(...).helloWorld('hide')
show and hide the popup. These return the jQuery object.
$(...).textpopup('box')
returns the popup div as a single-element jQuery object
$(...).textpopup('position')
repositions the popup. Use this if the size of the popup changes. Returns the jQuery object.

Example of using callable functions and the trigger option:

<div id="example4">
	<label>Example 4 hidden:</label><br/><input id="input4">
</div>

$('<span> Hide </span>').css({outline: 'black dotted thin'}).insertAfter('#input4').click (function(){
  $('#input4').helloWorld('hide');
});
var triggerElement = $('<span> Show </span>').css({outline: 'black dotted thin'}).insertAfter('#input4');
$('#input4').helloWorld({
  hideOnOutsideClick: false,
  position: {my: 'right', at: 'left'},
  speed: ['fold', {}, 1000],
  trigger: triggerElement,
  shown: function() {$('#example4 label').text('Example 4 visible:')},
  hidden: function() {$('#example4 label').text('Example 4 hidden:')}
});
$('#input4').helloWorld('box').css('border', '2px outset #eee');

$.ui.hebrewKeyboard

The $.bililite.hebrewKeyboard is just a subclass of $.bililite.textpopup that uses AJAX to load a Hebrew keyboard into the popup div and $.fn.sendkeys to insert the Hebrew characters.

Inspired by Ilya Lebedev's VirtualKeyboard, the plugin also catches keystrokes to allow typing directly in Hebrew, using the CapsLock key as a toggle between English and Hebrew keyboards.

<div id="example5">
	Example 5 (Hebrew): <input id="input5">
</div>

$('#input5').hebrewKeyboard();

It works with contenteditable="true" elements as well:

<div id="example6" contenteditable="true" >
	Example 6 (Hebrew): Edit me!
</div>

$('#example6').hebrewKeyboard();

Download the html for the keyboard.

The keyboard uses CSS sprites and a single image:

to simulate the keypresses. IE (of course) can't handle a:hover styling unless there's a real link, so each key has a pretend href="javascript:insertLetter", but really uses $('a').click(function(){sendkeys...return false;})