Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #38373 > unrolled thread

Keydriven events howto best encapsulate the keypress code

Back to article view | Back to comp.lang.javascript

Contents

  Keydriven events howto best encapsulate the keypress code Jonas Thörnvall <jonas.thornvall@gmail.com> - 2020-04-20 13:25 -0700
    Re: Keydriven events howto best encapsulate the keypress code "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2020-04-21 01:01 +0200
    Re: Keydriven events howto best encapsulate the keypress code JJ <jj4public@vfemail.net> - 2020-04-21 13:37 +0700

#38373 — Keydriven events howto best encapsulate the keypress code

Even though i use event listeners here and there i am not really familiar with how to encapsulate the keydriven actions, is the way i present here how it is usually done? Or should/can one breakout the if clauses/selection to put within their own function?

I honestly find it disturbing having the active code together with the declaration of the listener? 
But maybe that is just me finding reading javascript syntax confusing? Ideas like function(event) as parameters to listeners just feel foreign to me.

document.addEventListener('keydown', function(event) {
        if (event.keyCode == 67) {
            document.getElementById("cnode").checked = true;
        } else if (event.keyCode == 66) {
            document.getElementById("rnode").checked = true;
        } else if (event.keyCode == 69) {
           document.getElementById("rmnode").checked = true;
           removeMarkedNodes();
        } else if (event.keyCode == 74) {
           reset_booleans;
           moveit=true;
           build_canvas();
           document.getElementById("movenode").checked = true;
        } else if (event.keyCode == 71) {
            document.getElementById("mnode").checked = true;
        } else if (event.keyCode == 70) {
            document.getElementById("relnodes").checked = true;
            reset_booleans();
            markarea=true;
            markUnmarkAll();
            build_canvas();
            document.getElementById("movenode").checked = true;
        } else if (event.keyCode == 65) {
            document.getElementById("area").checked = true;
        } else if (event.keyCode == 72) {
            document.getElementById("cmlink").checked = true;
            createMarkedLinks();
        } else if (event.keyCode == 73) {
            document.getElementById("rmlink").checked = true;
            removeMarkedLinks();
        } else if (event.keyCode == 68) {
            document.getElementById("drawtool").checked = true;
        } else if (event.keyCode == 82) {
          document.getElementById("reshape").checked = true;
        } else if (event.keyCode == 17) {
            drawstart = true;
            message2="SET FOCUS"
        } else if (event.keyCode == 16) {
            shiftpress = true;
        } else if (event.keyCode == 84) {
            document.getElementById("beziercurve").checked = true;
            bezier_curve();
        }
    });

[toc] | [next] | [standalone]

#38374

=?UTF-8?Q?Jonas_Th=C3=B6rnvall?= <jonas.thornvall@gmail.com> wrote on 20
Apr 2020 in comp.lang.javascript: 

> Even though i use event listeners here and there i am not really
> familiar with how to encapsulate the keydriven actions, is the way i
> present here how it is usually done? Or should/can one breakout the if
> clauses/selection to put within their own function? 
> 
> I honestly find it disturbing having the active code together with the
> declaration of the listener? But maybe that is just me finding reading
> javascript syntax confusing? Ideas like function(event) as parameters to
> listeners just feel foreign to me. 
> 
> document.addEventListener('keydown', function(event) {
>         if (event.keyCode == 67) {
>             document.getElementById("cnode").checked = true;
>         } else if (event.keyCode == 66) {
>             document.getElementById("rnode").checked = true;
>         } else if (event.keyCode == 69) {
>            document.getElementById("rmnode").checked = true;
>            removeMarkedNodes();
>         } else if (event.keyCode == 74) {
>            reset_booleans;
>            moveit=true;
>            build_canvas();
>            document.getElementById("movenode").checked = true;
>         } else if (event.keyCode == 71) {
>             document.getElementById("mnode").checked = true;
>         } else if (event.keyCode == 70) {
>             document.getElementById("relnodes").checked = true;
>             reset_booleans();
>             markarea=true;
>             markUnmarkAll();
>             build_canvas();
>             document.getElementById("movenode").checked = true;
>         } else if (event.keyCode == 65) {
>             document.getElementById("area").checked = true;
>         } else if (event.keyCode == 72) {
>             document.getElementById("cmlink").checked = true;
>             createMarkedLinks();
>         } else if (event.keyCode == 73) {
>             document.getElementById("rmlink").checked = true;
>             removeMarkedLinks();
>         } else if (event.keyCode == 68) {
>             document.getElementById("drawtool").checked = true;
>         } else if (event.keyCode == 82) {
>           document.getElementById("reshape").checked = true;
>         } else if (event.keyCode == 17) {
>             drawstart = true;
>             message2="SET FOCUS"
>         } else if (event.keyCode == 16) {
>             shiftpress = true;
>         } else if (event.keyCode == 84) {
>             document.getElementById("beziercurve").checked = true;
>             bezier_curve();
>         }
>     });
> 

Try [untested ofcourse]:

const ecArr = '67/66/71/65/68/82/69/74/70/72/73/84'.split('/');
const enArr = 
'cnode/rnode/mnode/area/drawtool/reshape/rmnode/movenode/relnodes/cmlink/rml
ink/beziercurve'.split('/');

document.addEventListener('keydown', event => {
	let ec = event.keyCode;
	let found = ecArr.indexOf(ec);
	if (found>-1)
		document.getElementById(enArr[found]).checked = true;
	
	if (ec == 69) {
		removeMarkedNodes();
	} else if (ec == 74) {
		reset_booleans;
		moveit=true;
		build_canvas();
	} else if (ec == 70) {
		reset_booleans();
		markarea=true;
		markUnmarkAll();
		build_canvas();
		document.getElementById('movenode').checked = true;
	} else if (ec == 72) {
		createMarkedLinks();
	} else if (ec == 73) {
		removeMarkedLinks();
	} else if (ec == 17) {
		drawstart = true;
		message2="SET FOCUS";
	} else if (ec == 16) {
		shiftpress = true;
	} else if (ec == 84) {
		bezier_curve();
	};
});



-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#38375

On Mon, 20 Apr 2020 13:25:06 -0700 (PDT), Jonas Thörnvall wrote:
> Even though i use event listeners here and there i am not really familiar
> with how to encapsulate the keydriven actions, is the way i present here
> how it is usually done? Or should/can one breakout the if
> clauses/selection to put within their own function? 
> 
> I honestly find it disturbing having the active code together with the
> declaration of the listener? But maybe that is just me finding reading
> javascript syntax confusing? Ideas like function(event) as parameters to
> listeners just feel foreign to me.
[snip]

I'd suggest using the string based `key` property instead, and make the
listener like this.

  function checkElement(id) {
    document.getElementById(id).checked = true;
  }

  var keyShortcuts = {
    "B": function() {
      checkElement("rnode");
    },
    "C": function() {
      checkElement("cnode");
    },
    "E": function() {
      checkElement("rmnode");
      removeMarkedNodes();
    },

    //...

    "ControlLeft": function() {
      drawstart = true;
      message2="SET FOCUS"
    },
    "ShiftLeft": function() {
      shiftpress = true;
    }
  };

  document.addEventListener('keydown', function(event) {
    if (keyShortcuts[event.key]) keyShortcuts[event.key]();
  });

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web