Willkommen in der Webstatt Zum Webstatt Blog und Stories
nuit nuit am 27.03.08 19:05

[SIZE=16]wKeybindings[/SIZE] v0.2
Demo: http://demo.moonsword.info/jslibs/wKeybindings/

Leichte Verwaltung von Keybindings für Webseiten. Bindings können schnell über:
obj.addAction(keys,function)
eingebunden werden. Wobei keys ein Array und function eine beliebige Javascriptanweisung ist

wKeybindings.html zeigt ein Beispiel, wie man sowas einsetzen könnte.

Viel Spass damit,
nuit

Quote
Changes:

    [*]Endlich komplett Crossbrowser (dank mootools)
    [*]konstanten eingefügt, d.h. tab für tab und shift und so weiter...kann im code nachgelesen oder gefragt werden, es können aber nach wie vor auch ascii eingegeben werdn
    [*]Konstanten bisher nur für Mac, wer will kann eine konstantenliste machen, kann ganz einfach eingefügt, bzw. übergeben werden
    [*]bessere überprüfung, danke michael für die ideen und mootools für die bereitstellung der tools


Benötigt wird die mootools library, mit Events, Classes.Extra, mehr sollte er eigentlich nicht brauchen.
Ich verwend die 1.2Beta version zum testen, es könnte aber sein, dass es noch mit 1.11 auch läuft, noch nicht getestet, die funktionen sind in v0.1 nachzulesen (wKeybindings).

Usage:
<html>
<head>
<title>wKeybindings-example</title>
<script type="text/javascript" src="mootools-beta-1.2b2-compatible.js"></script>
<script type="text/javascript" src="wKeybindings-v0.2.js"></script>
<script type="text/javascript">
<!--
function cat() {
$('output').innerHTML = 'A Gedrueckt';
}

window.addEvent('domready', function() {
keys = new wKeybindings();

// 65 = a ; 17 = Strg ; 68 = d
keys.addAction(['a'],'cat()');
keys.addAction([17,68],'$("output").innerHTML = "Test";');
});
//-->
</script>
</head>
<body>
<div id="debug"></div>
<b>a</b> oder <b>[STRG]+d</b></b>
<div id="output" style="padding: 5px; background-color: yellow;"></div>
</body>
</html>


wKeybindings-v0.2.js
/*
wKeyBindings V0.2

Copyright (C) 2008 Jan Hoersch
*/

// MOOTOOLS REQUIRED http://mootools.net
// At Least: V1.11

Array.implement({

/**
* compare - Returns true for equal Arrays
*
* @example
* [1,4,5,2,5].compare([4,5,1,5,2]) == true
* [1,4,5,2,5].compare([1,4,5,2,5},true) == true
* [1,4,5,2,5].compare([4,1,2,5,5},true) == false
* [1,3,2].compare([2,4,1]) == false
*
* @return {Boolean}
* @param {Object} Array
* {Boolean} Position Sensitiv
*/
compare: function(array,position) {
if(this.length != array.length) return false;

if(position) {
for(i = 0; i < this.length; i++) {
if(this[i] != array[i]) return false;
}
} else {
var contain = false;
for(i = 0; i < this.length; i++) {
for(y = 0; y < array.length; y++) {
if(this[i] == array[y]) {
array = array.unset(y);
contain = true;
break;
}
}
if(!contain) {
return false;
} else {
contain = false;
}
}
}
return true;
},


/**
* unset - Unsetting a element in the array by there Index
*
* @example
* [1,5,3].unset(1) == [1,3]
*
* @return {Object} Array
* @param {Object} Array
*/
unset: function(key) {
var buffer = new Array();
this.each(function(item,index){
if(key != index) {
buffer[buffer.length] = item;
}
});
return buffer;
},
});

wKeybindings = new Class({
options: {
pressedKey: [],
actions: [],
keys: {
'tab' : 9,
'enter' : 13,
'shift' : 16,
'lstrg' : 17,
'lalt' : 18,
'capslock' : 20,

'space' : 32,

'left' : 37,
'up' : 38,
'right' : 39,
'down' : 40,

'0' : 48,
'1' : 49,
'2' : 50,
'3' : 51,
'4' : 52,
'5' : 53,
'6' : 54,
'7' : 55,
'8' : 56,
'9' : 57,

'a' : 65,
'b' : 66,
'c' : 67,
'd' : 68,
'e' : 69,
'f' : 70,
'g' : 71,
'h' : 72,
'i' : 73,
'j' : 74,
'k' : 75,
'l' : 76,
'm' : 77,
'n' : 78,
'o' : 79,
'p' : 80,
'q' : 81,
'r' : 82,
's' : 83,
't' : 84,
'u' : 85,
'v' : 86,
'w' : 87,
'x' : 88,
'y' : 89,
'z' : 90,

'lApfel' : 91,
'rApfel' : 93,
}
},

initialize: function(options) {
this.setOptions(options);

window.addEvent('keydown', function(event) {
event = new Event(event);
if(!this.options.pressedKey.contains(event.code)) {
this.options.pressedKey.push(event.code);
}
return this.check();
}.bind(this));

window.addEvent('keyup', function(event) {
event = new Event(event);
this.options.pressedKey.remove(event.code);
}.bind(this));
},

check: function() {
this.options.actions.each(function(item, index) {
if(item[0].compare(this.options.pressedKey)) {
eval(item[1]);

this.options.pressedKey.empty();
return true;
}
},this);
},

addAction: function(pKey,script) {
pKey = pKey.map(function(item,index) {
if($type(item) == 'string') {
eval('ret = this.options.keys.'+item+';');

return ret;
}
else if($type(item) == 'number') {
return item;
}
},this);

this.options.actions.push([pKey,script]);
}
});
wKeybindings.implement(new Events, new Options);
netcup.de Warum gibt es hier Werbung?
der_nic der_nic am 27.03.08 20:50

Bei mir scheints im IE6 (WinXP) nicht zu funktionieren. So wies aussieht lädt er die Files nicht richtig, denn er meckert, dass wKeybindings nicht definiert ist.

Michael Michael am 28.03.08 09:10

Habe es nicht ausführlich getestet. Jquery mit dem Hotkeys Plugin kann das allerdings schon. Sogar mit Tastenkombinationen:

http://plugins.jquery.com/project/hotkeys

$.hotkeys.add('Taste oder Tastenkombination', function(){ ... });
$.hotkeys.remove('Taste oder Tastebkombination');

Eine Demo gibt es hier: http://jshotkeys.googlepages.com/test-static.html

Creative Commons Lizenzvertrag
Alle Inhalte des Webstatt-Archivs stehen unter einer Creative Commons Namensnennung - Weitergabe unter gleichen Bedingungen 3.0 Unported Lizenz.

Impressum & Kontakt