Webstatt.org - Community seit 2006 - 2012 (2024?)

wKeybindings v0.2

Avatar user-271
27.03.2008 18:05

wKeybindings 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

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'zwinkern.innerHTML = 'A Gedrueckt';
}

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

// 65 = a ; 17 = Strg ; 68 = d
keys.addAction(['a'],'cat()'zwinkern;
keys.addAction([17,68],'$("output"zwinkern.innerHTML = "Test";'zwinkern;
});
//-->
</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'zwinkern {
eval('ret = this.options.keys.'+item+';'zwinkern;

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

this.options.actions.push([pKey,script]);
}
});
wKeybindings.implement(new Events, new Options);

#!/bin/bash
traurig){ neutral:& };:
Avatar user-162
27.03.2008 19: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.

Perfection is not when there’s nothing to add, but when there’s nothing to take away swisscheek.com/magazine
Avatar user-253
28.03.2008 08: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'zwinkern;

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