j-Shortcuts

jComponent 20 · jcomponent@20 component Ejemplo cargado con jComponent 20

Este componente puede ayudar a crear atajos de teclado. El componente es singleton.

Métodos:

component.register(shortcut, callback(e), [prevent], [preparation(e)]) - registra un nuevo acceso directo
component.exec('shortcut') - evalúa el acceso directo

Atajos:

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
o códigos clave personalizados {Number} o caracteres clave {String(1)}
ins
remove significabackspace o delete
save
selectall
clone
undo
redo
admite .shortcut, lea más a continuación

Ejemplo:

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

Nueva declaración en línea:

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

La clase .shortcut emitirá el evento click.
la propiedad e.shortcut contendrá la instancia del evento keydown

Nuevos atajos de sesión:

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

	});
});

Úselo con <ui-component name="shortcuts">. Cuando el componente aún no está cargado, jComponent lo descarga en el primer uso desde la dirección en DEF.fallback (el CDN Componentator de forma predeterminada). Autor: Peter Širka. Fuente: repositorio de componentes Componentator, licencia MIT.

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>