Created
January 2, 2017 23:56
-
-
Save forethoughtde/533bf23ec9fd222adb2ec7b862891523 to your computer and use it in GitHub Desktop.
Handles both key and mouse events
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function(){ | |
| var keyElements = selectElements('key', 'class'); | |
| function selectElements(element, selectType) | |
| { | |
| var elements; | |
| if( selectType == 'class') | |
| { | |
| elements = document.getElementsByClassName(element); | |
| } | |
| else | |
| { | |
| elements = document.getElementsByTagName(element); | |
| } | |
| return elements; | |
| } | |
| function callAppropriateMethod(keyNum, selectElement, selectType, callerFunc) | |
| { | |
| var elements = selectElements(selectElement, selectType); | |
| for(var i =0; i < elements.length; i++) | |
| { | |
| if(elements[i].getAttribute('data-key') == keyNum.toString()) | |
| { | |
| callerFunc(elements[i]); | |
| break; | |
| } | |
| } | |
| } | |
| function playAudio(element) | |
| { | |
| element.play(); | |
| } | |
| function applyStyle(element) | |
| { | |
| element.setAttribute('style', 'border:4px solid yellow'); | |
| } | |
| function removeStyle(element) | |
| { | |
| element.removeAttribute('style'); | |
| } | |
| function mainCaller(keyCode){ | |
| callAppropriateMethod(keyCode, 'key', 'class', applyStyle); | |
| callAppropriateMethod(keyCode, 'audio', '', playAudio); | |
| setTimeout(function(){ | |
| callAppropriateMethod(keyCode, 'key', 'class', removeStyle); | |
| }, 200); | |
| } | |
| document.body.addEventListener('keypress', function(event) | |
| { | |
| var specifiedKeyStorkes = ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L']; | |
| if(specifiedKeyStorkes.indexOf(event.key) !== -1) | |
| { | |
| mainCaller(event.keyCode || event.charCode); | |
| } | |
| }); | |
| function handleMouseEvent(iteration) | |
| { | |
| return function(event){ | |
| callAppropriateMethod(keyElements[iteration].getAttribute('data-key'), 'audio', '', playAudio ); | |
| }; | |
| } | |
| function applyMouseEvent(elements) | |
| { | |
| for(var i=0;i< elements.length; i++) | |
| { | |
| elements[i].addEventListener('click', handleMouseEvent(i)); | |
| } | |
| } | |
| applyMouseEvent(keyElements); | |
| })(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment