interaction-centre
Advanced tools
Readme
#JS Interaction Centre
js interaction centre is a lightweight (26KB) interaction event manager that makes setting up complex interactions such as keyboard combinations, mouse interactions, and HTML input element interaction events simple through the use of JSON files that link events to callbacks.
This module is written in typescript so has type-definitions in-built. It can be used modularly or as a javascript global.
#API
InteractionManager (combines all interaction handlers)
new interactionCentre.InteractionManager(
callback_object:Object,
listener_element:HTMLElement,
path_to_interactions_json:string
);
KeyboardInteractionHandler
new interactionCentre.KeyboardInteractionManager(
callback_object:Object,
listener_element:HTMLElement,
path_to_interactions_json:string
);
MouseInteractionHandler
new interactionCentre.MouseInteractionManager(
callback_object:Object,
listener_element:HTMLElement,
path_to_interactions_json:string
);
GUIInteractionHandler
new interactionCentre.GUIInteractionManager(
callback_object:Object,
path_to_interactions_json:string
);
callback_object is an object or scope that contains the callback functions linked to by the interactions json file.
listener_element is the element that listens for the event, and that event data (eg.. mouse position) is relative to.
path_to_interactions_json is the path to your interaction definitions.
#Example use
As a javascript global:
##interactions.json:
{
"keyboard":{
"press":{
"any":"pressed_any_key",
"control": "pressed_control",
"p":"pressed_p",
"P":"pressed_cap_p",
"control+b":"pressed_control_b",
"control+alt+shift+b":"pressed_control_alt_shift_b",
"arrowright":"pressed_rightarrow",
"a+b+c":"pressed_a_b_c"
},
"release":{
"x":"x_released"
}
},
"mouse":{
"click":{
"left":"clicked_mouse",
"right":"clicked_mouse",
"middle":"clicked_mouse"
},
"press":{
"left":"pressed_left_mouse_button",
"right":"pressed_left_mouse_button",
"middle":"pressed_left_mouse_button"
},
"drag":"mouse_dragged",
"move":"mouse_moved"
},
"gui":{
"test1":{
"callbacks":{
"input":"slider_changed"
},
"attributes":{
"min":0.001,
"max":1,
"value":0.5,
"step":0.001
}
},
"press-me":{
"callbacks":{
"click":"pressed_button"
}
}
}
}
##index.html:
<html>
<head>
<script type="text/javascript" src="https://unpkg.com/interaction-centre"></script>
</head>
<body>
<input id="test1" type="range"/>
<input id="press-me" type="button" style="width:100px" value="press-me"/>
<!-- This div an be any html element that can have events registered to it (for example Canvas)
forgive the inline styles, this is a very basic example example -->
<div id="interactor" style="position:relative; top:100px; left:100px; width:300px; height:300px; background-color:#DDD;"></div>
<script type="text/javascript"">
function setup_interact(){
var interaction_obj = document.getElementById("interactor");
var interaction_manager = new interactionCentre.InteractionManager(this, interaction_obj, "./interactions.json");
this.clicked_mouse = (button, mouseData)=>{
console.log("clicked mouse on the interaction object. BUTTON:", button);
}
this.pressed_left_mouse_button = (button, mouseData)=>{
console.log("PRESSED a mouse button. BUTTON:", button);
}
this.pressed_button = ()=>{
console.log("button was pressed");
}
this.slider_changed = (value)=>{
console.log("slider value:", value);
}
this.mouse_moved = (mouseData)=>{
console.log("moved"+" x:"+mouseData.position.x+" y:"+mouseData.position.y);
}
this.mouse_dragged = (mouseData)=>{
console.log("dragged"+" x:"+mouseData.position.x+" y:"+mouseData.position.y);
}
this.pressed_any_key = (button, mouseData)=>{
console.log("a key was pressed: ", button);
}
this.pressed_control = (button, keyboard_data)=>{
console.log("pressed control", button, keyboard_data);
}
this.pressed_control_b = (button, keyboard_data)=>{
console.log("pressed control+b", button, keyboard_data);
}
this.pressed_alt_n = (button, keyboard_data)=>{
console.log("pressed alt+n", button, keyboard_data);
}
this.pressed_p = (button, keyboard_data)=>{
console.log("pressed p", button, keyboard_data);
}
this.pressed_cap_p = (button, keyboard_data)=>{
console.log("pressed capital P", button, keyboard_data);
}
this.x_released =(button, keyboard_data)=>{
console.log("released x", button, keyboard_data);
}
this.pressed_control_alt_shift_b = (button, keyboard_data)=>{
console.log("pressed control alt shift b", button, keyboard_data);
}
this.pressed_a_b_c = ()=>{
console.log("you pressed a & b & c");
}
this.pressed_rightarrow = (button, keyboard_data)=>{
console.log("pressed right arrow", button, keyboard_data);
}
};
setup_interact();
</script>
</body>
</html>
#TO-DO
Improve error handling Implement TouchInteractionHandler
FAQs
interaction centre is an interaction event manager that controls mouse, keyboard, HTML form elements, and eventually touch events. It makes creating complex interactions such as keyboard combinations, mouse control, and setting up HTML input elements easy
The npm package interaction-centre receives a total of 29 weekly downloads. As such, interaction-centre popularity was classified as not popular.
We found that interaction-centre demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
NIST's new AI Risk Management Framework aims to enhance the security and reliability of generative AI systems and address the unique challenges of malicious AI exploits.
Security News
This episode of the Risky Biz podcast discusses how the rise of small open source packages and the shift towards individual maintainers makes the ecosystem more vulnerable to supply chain attacks.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.