Permalink
Browse files

added meta mod keysets

  • Loading branch information...
1 parent a5147ec commit f23befbc5fbf8b389a00cb5e2a3615dcafdc54a5 @Mottie Mottie committed Aug 12, 2011
Showing with 102 additions and 57 deletions.
  1. +10 −3 README.markdown
  2. +26 −6 demo/demo.js
  3. +26 −6 index.html
  4. +7 −17 js/jquery.keyboard.extension-typing.js
  5. +30 −22 js/jquery.keyboard.js
  6. +3 −3 js/jquery.keyboard.min.js
View
@@ -5,8 +5,9 @@ Originally posted by Jeremy Satterfield in his [blog][1], [jQuery plugins][2] an
* An on-screen virtual keyboard embedded within the browser window which will popup when a specified entry field is focused.
* The user can then type and preview their input before Accepting or Canceling.
* Add custom keyboard layouts easily.
-* Add up to four standard key sets to each layout that use the shift and alt keys.
+* Add up to four standard key sets to each layout that use the shift and alt keys (default, shift, alt and alt-shift).
* Add any number of optional modifier keys (meta keys) to add more key sets.
+* Each meta key set also includes the shift, alt and alt-shift keysets - New in version 1.8.9.
* Position the keyboard in any location around the element, or target another element on the page.
* Easily modify the key text to any language or symbol.
* Allow direct input or lock the preview window.
@@ -24,8 +25,8 @@ Originally posted by Jeremy Satterfield in his [blog][1], [jQuery plugins][2] an
* Enable, disable or add more diacritic functionality as desired.
* Use callbacks and event triggers that occur when the keyboard is open or closed and when the content has changed, been accepted or canceled.
* ARIA support (may not be fully implemented)
-* As jQuery UI is a dependancy, this plugin's styling will automatically match the selected jQuery UI theme with the exception of the required CSS listed below.
-* Built in watermarking. It emulates HTML5's placeholder if the browser doesn't support it.
+* As jQuery UI is a dependancy, this plugin's styling will automatically match the selected jQuery UI theme with the exception of the required CSS found in the keyboard.css file.
+* Built in watermarking. It emulates HTML5's placeholder, if the browser doesn't support it.
* Typing extension allows you to simulate typing into the keyboard for demo purposes or to assist user input.
* Autocomplete extension will integrate this keyboard plugin with jQuery UI's autocomplete widget.
* Multiple region specific keyboard layouts included in a separate directory. This is a work in progress and slowly growing.
@@ -72,6 +73,12 @@ Moved to the Wiki Pages: [Home][6] | [FAQ][7] | [Setup][8] | [Options][9] ( [Lay
Only the latest changes will be shown below, see the wiki log to view older versions.
+####Version 1.8.9
+* Added shift, alt and shift-alt keysets to meta keysets.
+ * When adding these keysets to the layout, use `meta#`, `meta#-shift`, `meta#-alt` and `meta#-alt-shift`.
+ * Enhancement request from [pascal-bach](https://github.com/pascal-bach) in [issue #17](https://github.com/Mottie/Keyboard/issues/17), thanks for the suggestion!
+ * Updated the [Custom: Meta Sets](http://mottie.github.com/Keyboard/) demo to reflect these enhancements.
+
####Version 1.8.8
* Fixed a bug where multiple "alwaysOpen" keyboards would not switch focus.
View
@@ -77,10 +77,10 @@ jQuery(function($) {
layout : 'custom',
display: {
'alt' : 'AltGr:It\'s all Greek to me',
- 'meta1' : '\u2666:russian lower-case', // Diamond with label that shows in the title (spaces are okay here)
- 'meta2' : '\u2665:RUSSIAN upper-case', // Heart
- 'meta3' : '\u2663:zodiac', // Club
- 'meta99' : '\u2660:numbers' // Spade
+ 'meta1' : '\u2666:end of alphabet', // Diamond with label that shows in the title (spaces are okay here)
+ 'meta2' : '\u2665:Russian', // Heart
+ 'meta3' : '\u2663:zodiac', // Club
+ 'meta99' : '\u2660:numbers' // Spade
},
customLayout: {
'default' : [
@@ -106,11 +106,31 @@ jQuery(function($) {
'{bksp} {sp:1} {accept} {cancel}'
],
'meta1' : [
- '\u0430 \u0431 \u0432 \u0433 \u0434 \u0435 \u0436', // lower case Russian
+ 't u v w x y z', // lower case end of alphabet
+ '{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
+ '{bksp} {sp:1} {accept} {cancel}'
+ ],
+ 'meta1-shift' : [
+ 'T U V W X Y Z', // upper case
+ '{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
+ '{bksp} {sp:1} {accept} {cancel}'
+ ],
+ 'meta1-alt' : [
+ '0 9 8 7 6 5 4', // numbers
+ '{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
+ '{bksp} {sp:1} {accept} {cancel}'
+ ],
+ 'meta1-alt-shift' : [
+ ') ( * & ^ % $', // shifted numbers
'{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
'{bksp} {sp:1} {accept} {cancel}'
],
'meta2' : [
+ '\u0430 \u0431 \u0432 \u0433 \u0434 \u0435 \u0436', // lower case Russian
+ '{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
+ '{bksp} {sp:1} {accept} {cancel}'
+ ],
+ 'meta2-shift' : [
'\u0410 \u0411 \u0412 \u0413 \u0414 \u0415 \u0416', // upper case Russian
'{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
'{bksp} {sp:1} {accept} {cancel}'
@@ -259,7 +279,7 @@ jQuery(function($) {
});
$('#meta-type').click(function(){
var meta = $('#meta').getkeyboard();
- meta.reveal().typeIn('aBcD11123\u2648\u2649', 700, function(){ meta.accept(); alert('all done!'); });
+ meta.reveal().typeIn('aBcD1112389\u2648\u2649', 700, function(){ meta.accept(); alert('all done!'); });
return false;
});
View
@@ -277,10 +277,10 @@
layout: 'custom',
display: {
'alt' : 'AltGr:It\'s all Greek to me',
- 'meta1' : '\u2666:russian lower-case', <span class="comment">// Diamond with label that shows in the title (spaces are okay here)</span>
- 'meta2' : '\u2665:RUSSIAN upper-case', <span class="comment">// Heart</span>
- 'meta3' : '\u2663:zodiac', <span class="comment">// Club</span>
- 'meta99' : '\u2660:numbers' <span class="comment">// Spade</span>
+ 'meta1' : '\u2666:end of alphabet', <span class="comment">// Diamond with label that shows in the title (spaces are okay here)</span>
+ 'meta2' : '\u2665:Russian', <span class="comment">// Heart</span>
+ 'meta3' : '\u2663:zodiac', <span class="comment">// Club</span>
+ 'meta99' : '\u2660:numbers' <span class="comment">// Spade</span>
},
customLayout: {
'default' : [
@@ -306,11 +306,31 @@
'{bksp} {sp:1} {accept} {cancel}'
],
'meta1' : [
- '\u0430 \u0431 \u0432 \u0433 \u0434 \u0435 \u0436', <span class="comment">// lower case Russian</span>
+ 't u v w x y z', <span class="comment">// lower case end of alphabet</span>
+ '{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
+ '{bksp} {sp:1} {accept} {cancel}'
+ ],
+ 'meta1-shift' : [
+ 'T U V W X Y Z', <span class="comment">// upper case</span>
+ '{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
+ '{bksp} {sp:1} {accept} {cancel}'
+ ],
+ 'meta1-alt' : [
+ '0 9 8 7 6 5 4', <span class="comment">// numbers</span>
+ '{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
+ '{bksp} {sp:1} {accept} {cancel}'
+ ],
+ 'meta1-alt-shift' : [
+ ') ( * & ^ % $', <span class="comment">// shifted numbers</span>
'{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
'{bksp} {sp:1} {accept} {cancel}'
],
'meta2' : [
+ '\u0430 \u0431 \u0432 \u0433 \u0434 \u0435 \u0436', <span class="comment">// lower case Russian</span>
+ '{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
+ '{bksp} {sp:1} {accept} {cancel}'
+ ],
+ 'meta2-shift' : [
'\u0410 \u0411 \u0412 \u0413 \u0414 \u0415 \u0416', <span class="comment">// upper case Russian</span>
'{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
'{bksp} {sp:1} {accept} {cancel}'
@@ -332,7 +352,7 @@
<span class="ct">Script - typing extension
=======</span>
var meta = $('#meta').getkeyboard();
-meta.reveal().typeIn('aBcD11123\u2648\u2649', 700, function(){ meta.accept(); alert('all done!'); });</code></pre>
+meta.reveal().typeIn('aBcD1112389\u2648\u2649', 700, function(){ meta.accept(); alert('all done!'); });</code></pre>
</div>
</div>
@@ -180,29 +180,19 @@
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')){
- base.metaActive = true;
- // make the plugin think we're passing it an jQuery object with a name
- base.showKeySet({ name : '_' + meta});
- // Shift or Alt key
- } else if ($.keyboard.keyaction.hasOwnProperty(meta)) {
- $.keyboard.keyaction[meta](base);
- }
+ // show correct key set
+ base.shiftActive = /shift/.test(meta);
+ base.altActive = /alt/.test(meta);
+ base.metaActive = (meta).match(/meta\d+/) || false;
+ // make the plugin think we're passing it a jQuery object with a name
+ base.showKeySet({ name : '_' + base.metaActive});
// Add the key
base.typing_simulateKey(key,txt);
-
- // Key doesn't exist on the keyboard, so just enter it
} else {
if (!base.typing_event) {
+ // Key doesn't exist on the keyboard, so just enter it
base.insertText(txt);
base.checkCombos();
}
View
@@ -1,6 +1,6 @@
/*
jQuery UI Virtual Keyboard
-Version 1.8.8
+Version 1.8.9
Author: Jeremy Satterfield
Modified: Rob Garrison (Mottie on github)
@@ -109,8 +109,9 @@ $.keyboard = function(el, options){
// Shift and Alt key toggles, sets is true if a layout has more than one keyset - used for mousewheel message
base.shiftActive = base.altActive = base.metaActive = base.sets = false;
+ base.lastKeyset = [false, false, false]; // [shift, alt, meta]
// Class names of the basic key set - meta keysets are handled by the keyname
- base.rows = ['ui-keyboard-keyset-default', 'ui-keyboard-keyset-shift', 'ui-keyboard-keyset-alt', 'ui-keyboard-keyset-alt-shift' ];
+ base.rows = ['', '-shift', '-alt', '-alt-shift' ];
base.acceptedKeys = [];
base.mappedKeys = {}; // for remapping manually typed in keys
base.msie = $.browser.msie; // IE flag, used for caret positioning
@@ -489,26 +490,35 @@ $.keyboard = function(el, options){
};
base.showKeySet = function(el){
- var key, toShow;
- base.$keyboard.find('.ui-keyboard-actionkey[name*=key_meta]').removeClass(o.actionClass);
+ var key = '',
+ toShow = (base.shiftActive) ? 1 : 0;
+ toShow += (base.altActive) ? 2 : 0;
+ // check meta key set
if (base.metaActive) {
- key = el.name.split('_')[1];
- if (!base.$keyboard.find('.ui-keyboard-keyset-' + key ).length) { return; } // keyset doesn't exist
- base.$keyboard
- .find('.ui-keyboard-alt, .ui-keyboard-shift, .ui-keyboard-actionkey[class*=meta]').removeClass(o.actionClass).end()
- .find('.ui-keyboard-actionkey.ui-keyboard-' + key).addClass(o.actionClass).end()
- .find('.ui-keyboard-keyset').hide().end()
- .find('.ui-keyboard-keyset-' + key ).show();
- } else {
- toShow = (base.shiftActive) ? 1 : 0;
- toShow += (base.altActive) ? 2 : 0;
- if (!base.$keyboard.find('.' + base.rows[toShow]).length) { return; } // keyset doesn't exist
- base.$keyboard
- .find('.ui-keyboard-alt')[(base.altActive) ? 'addClass' : 'removeClass'](o.actionClass).end()
- .find('.ui-keyboard-shift')[(base.shiftActive) ? 'addClass' : 'removeClass'](o.actionClass).end()
- .find('.ui-keyboard-keyset').hide().end()
- .find('.' + base.rows[toShow]).show();
+ key = (el && el.name && el.name.match('meta') ? el.name.split('_')[1] : '');
+ // save active meta keyset name
+ if (key === '') {
+ key = (base.metaActive === true) ? '' : base.metaActive;
+ } else {
+ base.metaActive = key;
+ }
}
+ key = (toShow === 0 && !base.metaActive) ? '-default' : (key === '') ? '' : '-' + key;
+ if (!base.$keyboard.find('.ui-keyboard-keyset' + key + base.rows[toShow]).length) {
+ // keyset doesn't exist, so restore last keyset settings
+ base.shiftActive = base.lastKeyset[0];
+ base.altActive = base.lastKeyset[1];
+ base.metaActive = base.lastKeyset[2];
+ return;
+ }
+ base.$keyboard
+ .find('.ui-keyboard-alt, .ui-keyboard-shift, .ui-keyboard-actionkey[class*=meta]').removeClass(o.actionClass).end()
+ .find('.ui-keyboard-alt')[(base.altActive) ? 'addClass' : 'removeClass'](o.actionClass).end()
+ .find('.ui-keyboard-shift')[(base.shiftActive) ? 'addClass' : 'removeClass'](o.actionClass).end()
+ .find('.ui-keyboard-keyset').hide().end()
+ .find('.ui-keyboard-keyset' + key + base.rows[toShow]).show().end()
+ .find('.ui-keyboard-actionkey.ui-keyboard' + key).addClass(o.actionClass);
+ base.lastKeyset = [ base.shiftActive, base.altActive, base.metaActive ];
};
// check for key combos (dead keys)
@@ -875,7 +885,6 @@ $.keyboard = function(el, options){
},
alt : function(base,el){
base.altActive = !base.altActive;
- base.metaActive = false;
base.showKeySet(el);
},
bksp : function(base){
@@ -908,7 +917,6 @@ $.keyboard = function(el, options){
},
shift : function(base,el){
base.shiftActive = !base.shiftActive;
- base.metaActive = false;
base.showKeySet(el);
},
sign : function(base){
Oops, something went wrong.

0 comments on commit f23befb

Please sign in to comment.