Keyboard navigation for Sketch Measure

bookmarklet.js

(function() {
	const aside = document.querySelector('aside');

	function getCurrent() {
		return document.querySelector('.artboard.active') || document.querySelector('.artboard');
	}

	function showSidebar() {
		aside.classList.add('on');
	}

	function hideSidebar() {
		aside.classList.remove('on');
	}

	document.addEventListener('keydown', function(event) {
		let target;

		switch (event.keyCode) {
			/* Down: Go to next pattern */
			case 40:
				event.preventDefault();
				
				target = getCurrent().nextSibling;

				break;

			/* Up: Go to previous pattern */
			case 38:
				event.preventDefault();
				
				target = getCurrent().previousSibling;

				break;

			/* Right: Show sidebar */
			case 39:
				event.preventDefault();
				
				showSidebar();

				break;

			/* Left: Hide sidebar */
			case 37:
				event.preventDefault();
				
				hideSidebar();

				break;

			/* Space: Show currently active item in sidebar */
			case 32:
				event.preventDefault();
				
				target = getCurrent();

				break;
		}

		if (target) {
			showSidebar('on');

			target.scrollIntoView();
			target.click();
		}
	});
})();