docs: document event listeners

ZenithDevs · Apr 1, 2021 · 41da6de · 41da6de
1 parent 0e5cb68
commit 41da6de
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 20 deletions.
diff --git a/README.md b/README.md
@@ -94,3 +94,11 @@ type CKControl =
   | "analog_r_right"
   | "analog_r_press";
 ```
+
+#### Event Listeners
+
+There are currently three event listener types:
+
+- "change", passes an object with the input source and it's current state to the event listener.
+- "connected", passes a GamepadEvent to the event listener.
+- "disconnected", passes a GamepadEvent to the event listener.
diff --git a/docs/demo/main.js b/docs/demo/main.js
@@ -1,26 +1,35 @@
 var controls = new ControllerKit();
 
-document.querySelector('#gamepads').innerHTML = 'getGamepads' in navigator ? navigator.getGamepads().length : '0';
-document.querySelector('#gamepad-events').innerHTML = 'GamepadEvent' in window ? 'true' : 'false';
+document.querySelector("#gamepads").innerHTML =
+  "getGamepads" in navigator ? navigator.getGamepads().length : "0";
+document.querySelector("#gamepad-events").innerHTML =
+  "GamepadEvent" in window ? "true" : "false";
 
-controls.on('change', ({source, state}) => {
-	document.querySelector('#output').innerHTML = `${Object.getPrototypeOf(source).constructor.name}<br>${Object.keys(state)
-	.filter(key => state[key])
-	.map(key => {
-		return `${key}: ${state[key]}`
-	}).join('<br>')}`
-	console.log(state);
+controls.on("change", ({ source, state }) => {
+  document.querySelector("#output").innerHTML = `${
+    Object.getPrototypeOf(source).constructor.name
+  }<br>${Object.keys(state)
+    .filter((key) => state[key])
+    .map((key) => {
+      return `${key}: ${state[key]}`;
+    })
+    .join("<br>")}`;
+  console.log(state);
 });
 
-controls.on('connected', (evt) => {
-	document.querySelector('#gamepads').innerHTML = navigator.getGamepads().length;
-	// document.querySelector('#output').innerHTML = `Controller connected with id "${evt.gamepad.id}" and index "${evt.gamepad.index}"`
-	console.log('Controller connected.', evt.gamepad);
+controls.on("connected", (evt) => {
+  document.querySelector(
+    "#gamepads"
+  ).innerHTML = navigator.getGamepads().length;
+  // document.querySelector('#output').innerHTML = `Controller connected with id "${evt.gamepad.id}" and index "${evt.gamepad.index}"`
+  console.log("Controller connected.", evt.gamepad);
 });
 
-controls.on('disconnected', (evt) => {
-	document.querySelector('#output').innerHTML = `Controller disconnected with id "${evt.gamepad.id}" and index "${evt.gamepad.index}"`
-	console.log('Controller disconnected.', evt.gamepad);
+controls.on("disconnected", (evt) => {
+  document.querySelector(
+    "#output"
+  ).innerHTML = `Controller disconnected with id "${evt.gamepad.id}" and index "${evt.gamepad.index}"`;
+  console.log("Controller disconnected.", evt.gamepad);
 });
 
-controls.listen();
+controls.listen();
diff --git a/docs/index.html b/docs/index.html
@@ -105,6 +105,19 @@ <h4 id="binding">Binding</h4>
   | "analog_r_left"
   | "analog_r_right"
   | "analog_r_press";</code></pre>
+
+      <h4>Event Listeners</h4>
+
+      <p>There are currently three event listener types:</p>
+
+      <ul>
+        <li>
+          "change", passes an object with the input source and it's current
+          state to the event listener.
+        </li>
+        <li>"connected", passes a GamepadEvent to the event listener.</li>
+        <li>"disconnected", passes a GamepadEvent to the event listener.</li>
+      </ul>
     </main>
     <!-- <footer></footer> -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/highlight.min.js"></script>

diff --git a/src/controllerkit.d.ts b/src/controllerkit.d.ts
@@ -1,7 +1,8 @@
+declare type CKEventName = "change" | "connected" | "disconnected";
 declare type CKEventHandler = (arg0: any) => void;
 
 declare type CKEventHandlers = {
-  event: string;
+  event: CKEventName;
   handler: CKEventHandler;
 }[];
 

diff --git a/src/index.ts b/src/index.ts
@@ -103,7 +103,7 @@ export default class ControllerKit {
    * @param event The event name
    * @param handler The event handler
    */
-  public on(event: string, handler: CKEventHandler) {
+  public on(event: CKEventName, handler: CKEventHandler) {
     this.eventHandlers.push({ event, handler });
   }
 
@@ -112,7 +112,7 @@ export default class ControllerKit {
    * @param event The event name
    * @param handler The event handler
    */
-  public off(event: string, handler: CKEventHandler) {
+  public off(event: CKEventName, handler: CKEventHandler) {
     let index = this.eventHandlers.indexOf({ event, handler });
     if (index > -1) {
       this.eventHandlers.splice(index, 1);