Refactored Switch code a little, added better docuementation

ava-cassiopeia · Jun 10, 2017 · 4c4a1e7 · 4c4a1e7
1 parent 56ae6c6
commit 4c4a1e7
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 4 deletions.
diff --git a/readme.md b/readme.md
@@ -1,3 +1,63 @@
 # Simple Switch
 
 Simple, accessible, performant implementation of the Switch UI element.
+
+**Features:**
+
+  - Vanilla JS/CSS: doesn't require any outside library to function
+  - Accessible: works properly with screenreaders and the ARIA spec
+  - Performant: uses proper layering and transitioning to ensure high performance
+
+---
+
+  - [Installation](#installation)
+  - [Creating a Simple Switch](#creating-a-simple-switch)
+    - [Automatically Creating Switches](#automatically-creating-switches)
+    - [Manually Creating Switches](#manually-creating-switches)
+
+## Installation
+
+To install the Switch code, simply import the Javascript and CSS files present
+into your page as needed. Make sure to place the Javascript code at the bottom
+of the `<body>` tag.
+
+## Creating a Simple Switch
+
+There are two ways to create a Simple Switch. On page load, the Simple Switch
+code will automatically detect checkboxes that are flagged as switches, and
+upgrade them, *or* you may manually instantiate a switch. See below for more
+details.
+
+### Automatically Creating Switches
+
+To have a switch be automatically upgraded, simply add the `data-type` attribute
+to any checkbox-type input that you want upgraded, and set that attribute to the
+value of `simple-switch`.
+
+*Example:*
+
+```HTML
+<input type="checkbox" name="my-checkbox" data-type="simple-switch" />
+```
+
+### Manually Creating Switches
+
+You may also manually instantiate a switch, which may be useful for
+lazily-loaded UI elements or parts of the page. The `Switch` class which handles
+upgrading and controlling Switches is available under the `SimpleSwitch`
+namespace, and takes one parameter, `element`, which is a direct reference to
+the HTMLElement checkbox to be upgraded.
+
+*Example:*
+
+```HTML
+<input type="checkbox" name="my-checkbox" id="my-checkbox" />
+```
+
+```Javascript
+var myCheckbox = document.getElementById("my-checkbox");
+
+new SimpleSwitch.Switch({
+    element: myCheckbox
+});
+```
diff --git a/src/javascript/SimpleSwitch.js → src/javascript/Switch.js b/src/javascript/SimpleSwitch.js → src/javascript/Switch.js
@@ -1,4 +1,4 @@
-export class SimpleSwitch {
+export class Switch {
 
     constructor(config) {
         this.element = config.element;

diff --git a/src/javascript/index.js b/src/javascript/index.js
@@ -1,14 +1,14 @@
-import {SimpleSwitch} from "./SimpleSwitch.js";
+import {Switch} from "./Switch.js";
 
-export {SimpleSwitch};
+export {Switch};
 
 export var init = function() {
     var x, _switch, switches = document.querySelectorAll("[data-type='simple-switch']");
 
     for(x = 0; x < switches.length; x++) {
         _switch = switches[x];
 
-        new SimpleSwitch({
+        new Switch({
             element: _switch
         });
     }