Hacking at 0300

Last modified 2009-04-02

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>

$.ui.textpopup.subclass("ui.helloWorld", {
	_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 sole argument (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 sole argument (this is meant to be a function called like $.fn.hide)
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}
Parameter to pass to show/hide above
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'}
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
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

$.ui.textpopup.defaults.extend({
	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(){});.

Note that in standards-compliant browsers, the height of inline elements is not well defined, so positioning does not work. Use display: inline-block on your <input> elements (I might modify the widget to do this automatically, but for now use CSS). Corrected in 2009-03-31 version.

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'});

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

$(...).helloWorld('show') and $(...).helloWorld('hide') to show and hide the popup. These return the jQuery object.
$(...).helloWorld('box') returns the popup div as a single-element jQuery object

Example of using callable functions and the trigger option:

<div id="example3">
	<label>Example 3:</label> <input id="input3">
</div>

$('#input3').helloWorld({
  hideOnOutsideClick: false,
  trigger: $('<span> Show </span>').insertAfter('#example3 input'),
  shown: function() {$('#example3 label').text('Example 3 visible:')},
  hidden: function() {$('#example3 label').text('Example 3 hidden:')}
});
$('#input3').helloWorld('box').css('border', '2px outset #eee');
$('<span> Hide </span>').insertAfter('#input3').click (function(){
  $('#input3').helloWorld('hide');
});

$.ui.hebrewKeyboard

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

<div id="example4">
	Example 4 (Hebrew): <input id="input4">
</div>

$('#input4').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;})