# j-Shortcuts

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

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: de
Content-SHA256: e3facb86f0c8e0c2a39a0058257cdcc61ce749ac2fcba414dc1473ca998ab45d
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

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__:

```javascript
// 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__:

```html
<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__:

```javascript
// 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.

```html 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>
```