From 4c4a1e7905f8fc79d5a0c993d30844c3c62a8484 Mon Sep 17 00:00:00 2001 From: Ivan Mattie Date: Sat, 10 Jun 2017 14:18:16 -0600 Subject: [PATCH] Refactored Switch code a little, added better docuementation --- readme.md | 60 +++++++++++++++++++ src/javascript/{SimpleSwitch.js => Switch.js} | 2 +- src/javascript/index.js | 6 +- 3 files changed, 64 insertions(+), 4 deletions(-) rename src/javascript/{SimpleSwitch.js => Switch.js} (98%) diff --git a/readme.md b/readme.md index f062b9a..123b475 100644 --- 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 `` 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 + +``` + +### 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 + +``` + +```Javascript +var myCheckbox = document.getElementById("my-checkbox"); + +new SimpleSwitch.Switch({ + element: myCheckbox +}); +``` diff --git a/src/javascript/SimpleSwitch.js b/src/javascript/Switch.js similarity index 98% rename from src/javascript/SimpleSwitch.js rename to src/javascript/Switch.js index bece684..23bbded 100644 --- a/src/javascript/SimpleSwitch.js +++ b/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 index e81472c..adabbf0 100644 --- a/src/javascript/index.js +++ b/src/javascript/index.js @@ -1,6 +1,6 @@ -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']"); @@ -8,7 +8,7 @@ export var init = function() { for(x = 0; x < switches.length; x++) { _switch = switches[x]; - new SimpleSwitch({ + new Switch({ element: _switch }); }