j-Shortcuts

jComponent 20 · jcomponent@20 component Voorbeeld geladen met jComponent 20

Deze component kan helpen bij het maken van toetsenbord shortcuts. de component is singleton.

Methoden:

component.register(shortcut, callback(e), [prevent], [preparation(e)]) - een nieuw kortschot
component.exec('shortcut') - afkorting

Kortschoenen:

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
of aangepaste sleutelcodes {Number} of sleutelfiguren {String(1)}
ins
remove betekent backspace of delete
save
selectall
clone
undo
redo
ondersteunt .shortcut, lees meer hieronder

Voorbeeld:

// 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';
});

Nieuwe inline verklaring:

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

.shortcut-klasse zal click evenement uitgeven
eigendom e.shortcut zal Event instance van de keydown event bevatten

Nieuwe sessies kort:

// 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');

	});
});

Gebruik het met <ui-component name="shortcuts">Wanneer de component nog niet is geladen, jComponent Download het op eerste gebruik van het adres in DEF.fallback (De Componentator Schrijver: Peter Širka. bron: de Componentator Componenten repository, MIT licentie.

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>