-
Notifications
You must be signed in to change notification settings - Fork 723
/
jquery.keyboard.extension-mobile.js
127 lines (108 loc) · 4.49 KB
/
jquery.keyboard.extension-mobile.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
/*
* jQuery UI Virtual Keyboard for jQuery Mobile Themes v1.0.1 (updated 2/23/2012)
*
* By Rob Garrison (aka Mottie & Fudgey)
* Licensed under the MIT License
*
* Use this extension with the Virtual Keyboard to apply
* the necessary themes to make the keyboard compatible with
* jQuery Mobile themes
*
* Requires:
* jQuery - http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js
* jQuery Mobile - http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js
* jQuery Mobile themes - http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css
*
* Setup:
* $('.ui-keyboard-input')
* .keyboard(options)
* .addMobile(mobile-options);
*
* // or if targeting a specific keyboard
* $('#keyboard1')
* .keyboard(options) // keyboard plugin
* .addMobile(mobile-options); // this keyboard extension
*
*/
(function($){
$.fn.addMobile = function(options){
var o, defaults = {
// keyboard wrapper theme
container : { theme:'a' },
// theme added to all regular buttons
buttonMarkup : { theme:'a', shadow:'true', corners:'true' },
// theme added to all buttons when they are being hovered
buttonHover : { theme:'c' },
// theme added to action buttons (e.g. tab, shift, accept, cancel);
// parameters here will override the settings in the buttonMarkup
buttonAction : { theme:'b' },
// theme added to button when it is active (e.g. shift is down)
// All extra parameters will be ignored
buttonActive : { theme:'e' }
};
return this.each(function(){
var base = $(this).data('keyboard');
// Stop if no keyboard attached or if jQuery Mobile isn't loaded
if (!base || typeof($.fn.textinput) === 'undefined') { return; }
base.mobile_options = o = $.extend({}, defaults, options);
base.mobile_initialized = false;
// Setup
base.mobile_init = function(){
// Add theme to input - if not already done through the markup
$('.ui-keyboard-input').textinput();
// visible event is fired before this extension is initialized, so check!
if (base.options.alwaysOpen && base.isVisible) {
base.mobile_setup();
}
// Setup mobile theme on keyboard once it is visible
base.$el.bind('visible.keyboard', function() {
if (base.mobile_initialized !== true) {
base.mobile_setup();
}
});
}
base.mobile_setup = function(){
var p, actn = $.extend({}, o.buttonMarkup, o.buttonAction);
base.$keyboard
// 'ui-bar ui-bar-a' classes to apply swatch theme
.addClass('ui-bar ui-bar-' + o.container.theme)
// removing 'ui-widget-content' will prevent jQuery UI theme from applying to the keyboard
.removeClass('ui-widget ui-widget-content')
// apply jQuery Mobile button markup
// removed call to jQuery Mobile buttonMarkup function; replaced with base.modButton
.find('button:not(.' + base.options.css.buttonAction + ')').addClass( base.modButton(o.buttonMarkup) ).end()
.find('.' + base.options.css.buttonAction).addClass( base.modButton(actn) ).end()
.find('button').removeClass('ui-corner-all ui-state-default')
.hover(function(){
$(this).addClass('ui-btn-hover-' + o.buttonHover.theme);
},function(){
$(this).removeClass('ui-btn-hover-' + o.buttonHover.theme);
});
// set actionClass (default for jQuery UI = 'ui-state-active'),
// which is the active state of the button (shift is down)
base.options.css.buttonAction = 'ui-btn-down-' + o.buttonActive.theme;
// update keyboard width if preview is showing... after applying mobile theme
if (base.msie && base.$preview[0] !== base.el) {
base.$preview.hide();
base.$keyboard.css('width','');
base.width = base.$keyboard.outerWidth();
base.$keyboard.width(base.width + parseInt(base.$preview.css('fontSize'),10)); // add about 1em to input width for extra padding
base.$preview.width(base.width);
base.$preview.show();
}
// adjust keyboard position after applying mobile theme
p = base.options.position;
p.of = p.of || base.$el.data('keyboardPosition') || base.$el;
p.collision = (base.options.usePreview) ? p.collision || 'fit fit' : 'flip flip';
base.$keyboard.position(p);
base.mobile_initialized = true;
};
base.modButton = function(t){
// Using this instead of the jQuery Mobile buttonMarkup because it is expecting <a>'s instead of <button>
// theme:'a', shadow:'true', inline:'true', corners:'false'
return 'ui-btn ui-btn-up-' + t.theme + (t.shadow == 'true' ? ' ui-shadow' : '') + (t.corners == 'true' ? ' ui-btn-corner-all' : '');
};
base.mobile_init();
});
};
})(jQuery);