j-Shortcuts

jComponent 20 · jcomponent@20 component Beispiel mit jComponent 20 geladen

Diese Komponente kann beim Erstellen von Tastaturkürzeln helfen. Die Komponente ist Singleton.

Methoden:

component.register(shortcut, callback(e), [prevent], [preparation(e)]) – registriert eine neue Verknüpfung
component.exec('shortcut') – wertet die Verknüpfung aus

Verknüpfungen:

enter
esc
tab
cmd, meta, win
shift, capslock
ctrl
alt
space
backspace, del, delete
left, up, right, down
F1, F2, F3, F4, F5, F6, F7, F8, F9, F10, F11, F12
oder benutzerdefinierte Schlüsselcodes {Number} oder Schlüsselzeichen {String(1)}
ins
remove bedeutet backspace oder delete
save
selectall
clone
undo
redo
unterstützt .shortcut, mehr dazu weiter unten

Beispiel:

// SETTER(true, ...) --> works in jComponent +v9.0.0

SETTER(true, 'shortcuts/register', 'cmd + enter', function(e) {
    console.log('PRESSED: CMD + ENTER');
});

SETTER(true, 'shortcuts/register', 'alt + p', function(e) {
    console.log('PRESSED: ALT + P');
});

SETTER(true, 'shortcuts/register', 'esc', function(e) {
    console.log('PRESSED: esc');
});

// +v3 supports multiple shortcuts at the one time:
SETTER(true, 'shortcuts/register', 'cmd+enter, ctrl+enter', function(e) {
    console.log('PRESSED: CMD + ENTER');
});

// NEW: you can make preparation for the shortcut
SETTER(true, 'shortcuts/register', 'cmd+enter, ctrl+enter', function(e) {
    console.log('PRESSED: CMD + ENTER');
}, function(e) {
	// You can enable/disable shortcut manually in the "preparation function"
	// but you need to "return {Boolean}", true will approve shortcut (it calls of the shortcut "callback")
	// otherwise "returning false" the shorcut will be skipped
	return e.target.tagName !== 'INPUT';
});

Neue Inline-Deklaration:

<button class="exec shortcut" data-shortcut="F1" data-exec="METHO_TO_CALL">Help</button>

.shortcut-Klasse wird click Veranstaltung veröffentlichen
Eigentum e.shortcut enthält Event-Instanzen aus dem keydown Event

Neue Sitzungskurz:

// Open session for new shortcuts
// The methods disables all registered shortcuts while session is not end
SETTER('shortcuts/session', function(register) {
	register('esc', function() {

		// Cancels session
		SETTER('shortcuts/end');

	});
});

Verwenden Sie es mit <ui-component name="shortcuts">. Wenn die Komponente noch nicht geladen ist, lädt jComponent sie bei der ersten Verwendung von der Adresse in DEF.fallback herunter (standardmäßig das CDN Componentator). Autor: Peter Širka. Quelle: Componentator-Komponenten-Repository, MIT-Lizenz.

example.html

<ui-component name="shortcuts"></ui-component>

<div>PRESS ENTER or INSERT</div>

<script>
    var keyvalue = {};
    SETTER(true, 'shortcuts/register', 'ENTER', () => alert('ENTER'));
    SETTER(true, 'shortcuts/register', 'ins', () => alert('INSERT'));
</script>