summaryrefslogtreecommitdiffstats
path: root/public/media/js/jquery.keyboard.extension-typing.js
blob: bf82a66c7f72f20add1d961029ee30bf29f7cf4f (plain) (blame)
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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
/*
 * jQuery UI Virtual Keyboard Typing Simulator v1.0
 *
 * By Rob Garrison (aka Mottie & Fudgey)
 * Dual licensed under the MIT and GPL licenses.
 *
 * Use this extension with the Virtual Keyboard to simulate
 * typing for tutorials or whatever else use you can find
 *
 * Requires:
 *  jQuery
 *  jQuery UI & css
 *  Keyboard plugin : https://github.com/Mottie/Keyboard
 *
 * Setup:
 *  $('.ui-keyboard-input')
 *   .keyboard(options)
 *   .addTyping();
 *
 *  // or if targeting a specific keyboard
 *  $('#keyboard1')
 *   .keyboard(options)
 *   .addTyping();
 * 
 * Basic Usage:
 *  // get keyboard object, open it, then start typing simulation
 *  $('#keyboard-input').getkeyboard().reveal().typeIn('Hello World', 700);
 *
 *  // get keyboard object, open it, type in "This is a test" with 700ms delay between types, then accept & close the keyboard
 *  $('#keyboard-input').getkeyboard().reveal().typeIn('This is a test', 700, function(){ $('#keyboard-input').getkeyboard().close(true); });
 */

 //  TO DO: Make the "enter" work "This\ntest"

 // EXAMPLES:
 // $('#inter').getkeyboard().reveal().typeIn('\tHello \b\n\tWorld', 500);
 // $('#meta').getkeyboard().reveal().typeIn('abCDd11123\u2648\u2649\u264A\u264B', 700, function(){ alert('all done!'); });

(function($){
$.fn.addTyping = function(){
	return this.each(function(){
		// make sure a keyboard is attached
		var base = $(this).data('keyboard');
		if (!base) { return; }

		// variables
		base.typing_options = {};
		base.typing_keymap = {
			' '  : 'space',
			' ' : 'space',
			'\b' : 'bksp',
			'\t' : 'tab'
		};
		base.typing_timer;

		// Store typing text
		base.typeIn = function(txt, delay, callback){
			if (!base.isVisible) {
				// keyboard was closed
				base.typing_options.init = false;
				clearTimeout(base.typing_timer);
				return;
			}
			var t = base.typing_options, n, k, key, ks, meta, set;
			if (base.typing_options.init !== true) {
				t.init = true;
				t.text = txt;
				t.len = txt.length;
				t.delay = delay || 300;
				t.current = 0;
				t.callback = callback;
			}

			// function that loops through and types each character
			txt = t.text.substring( t.current, ++t.current );
			ks = base.$keyboard.find('.ui-keyboard-keyset');
			k = (txt === '\n' || txt === '\r') ? 'Enter' : txt;
			key = ks.filter(':visible').find('input.ui-keyboard-button[value="' + k + '"]');

			// key is visible, simulate typing
			if (key.length) {
				base.typing_simulateKey(key,txt);
			} else {

				// key not found, check if it is in the keymap (tab, space, enter, etc)
				n = (txt in base.typing_keymap) ? base.typing_keymap[txt] : txt.charCodeAt(0);
				if (n === 'bksp') { txt = n; }
				// find actual key on keyboard
				key = ks.find('input.ui-keyboard-' + n);
				// find the keyset it is in
				set = key.closest('.ui-keyboard-keyset');
				// figure out which keyset the key is in then simulate clicking on that meta key, then on the key
				if (set.attr('name')) {
					// get meta key name
					meta = set.attr('name');

					// reset back to default keys
					if (meta === 'default'){
						base.metaActive = base.shiftActive = base.altActive = false;
						base.showKeySet();

					// Meta Key: If it's a meta key we have to do something a little
					// different because "meta" will have a number following it
					} else if (meta.match('meta')){
						// make the plugin think we're passing it an jQuery object with a name
						set = { name : '_' + meta};
						base.metaActive = true;
						base.showKeySet(set);

					// Shift or Alt key
					} else if (base.keyaction.hasOwnProperty(meta)) {
						base.keyaction[meta]();
					}

					// Add the key
					base.typing_simulateKey(key,txt);

				// Key doesn't exist on the keyboard, so just enter it
				} else {
					base.insertText(txt);
				}

			}

			if (t.current < t.len){
				if (!base.isVisible) { return; } // keyboard was closed, abort!!
				setTimeout(function(){ base.typeIn(); }, t.delay);
			} else {
				t.init = false;
				if ($.isFunction(t.callback)) {
					// ensure all typing animation is done before the callback
					setTimeout(function(){
						t.callback();
					}, t.delay);
				}
				return;
			}
		};

		// mouseover the key, add the text directly, then mouseout on the key
		base.typing_simulateKey = function(el,txt){
			var e = el.length;
			if (e) { el.filter(':visible').trigger('mouseenter'); }
			base.typing_timer = setTimeout(function(){
				if (!base.isVisible) { return; }
				base.insertText(txt);
				if (e) { setTimeout(function(){ el.filter(':visible').trigger('mouseleave'); }, base.typing_options.delay/3); }
			}, base.typing_options.delay/3);
		};

	});
};
})(jQuery);