Switch Web Component

A switch form Web Component utilising the latest ES6 and other web technologies to create reusable custom elements. While not explicitly extending the HTML checkbox element () the underlying state management uses a standard checkbox in order to keep track of the "checked""unchecked" state and allow for a value to be sent via submissions^[1].

The component is reactive in size - the handle will grow/shrink with respect to the set width/height (which can be configured either via the width/height attributes or using CSS styling).

Listeners are attached to work as other standard HTML elements of similar functionality. The click, spacebar and enter keyboard events (once having focus) will all change the state of the switch.

Additionally all custom attributes also have the same named properties and are kept in sync for any Javascript manipulation.

Installation

Add the switch-component.js file to your /js folder.
Include the javascript file into the page you're wanting to use it in. It's recommended not to use the async keyword so that the file loads as soon as possible.

<script charset="utf-8" defer src="js/switch-component.js" type="module"></script>

It is also recommended to include the web components polyfill for the older browsers unable to understand the new ES6 functions.

<!-- The web component polyfill -->
<script src="https://cdn.rawgit.com/webcomponents/webcomponentsjs/edf84e6e/webcomponents-sd-ce.js"></script>

Usage

  <cloud-switch
          name="cloudSwitch"
          value="1"
  ></cloud-switch> <!-- Minimum required code, additional attributes are defined below. -->

Attributes

Attribute	Property	Default	Value(s)	Required	Description
name	name	-	`string`	✔️	The name which will be sent upon form submission.
value	value	"1"	`string`	✔️	The value to be send upon form submission.
disabled	disabled	`false`	`boolean`	❌	Prevents the element from obtaining focus or sending it's value.
readonly	readonly	`false`	`boolean`	❌	The element can still obtain focus, and value submitted but unable to have it's value changed.
checked	checked	`true`	`boolean`	❌	Sets by default as the switch in "on" mode.
width	width	-	[`integer`, `double`]	❌	Sets the width of the switch.
height	width	-	[`integer`, `double`]	❌	Sets the height of the switch.
on-text	onText	"ON"	`string`	❌	Sets the text which is displayed when the switch is in it's "on" mode.
off-text	offText	"OFF"	`string`	❌	Sets the text which is displayed when the switch is in it's "off" mode.
role	role	"checkbox"	`string`	❌	The correct value for WAI-ARIA accecssable-compliant components.
color	color	"info"	["success", "primary", "secondary", "danger", "warning", "info", "dark"]	❌	Changes the color of the switch. The names and values are taken from Bootstrap 4.0. See below for a list of possible colors and their hex values.

Color Options

Color	Background	Border
"success"	#4dbd74	#3a9d5d
"primary"	#20a8d8	#1985ac
"secondary"	#c8ced3	#acb5bc
"danger"	#f86c6b	#f63c3a
"warning"	#ffc107	#d39e00
"info"	#63c2de	#39b2d5
"dark"	#181b1e	#181b1e

Example

<!-- Minimal example -->
  <cloud-switch>
  </cloud-switch>

<!-- Example -->
  <cloud-switch 
          name="Send Value?"
          on-text="Hell Yea" 
          off-text="No, no!" 
          color="primary"
          value="Yes"
  ></cloud-switch>

<!--  Verbose example -->
  <cloud-switch
          name="cloudSwitch"
          value="1"
          color="info"
          id="customerChkbox"
          role="checkbox"
          width="96"
          height="48"
  ></cloud-switch>

TODO

Provide values which will be submitted whether the switch is "on" or "off".
Allow any color to be set (and complementary border/gradient auto-generated).

Footnotes

[1] The current state of web components prevent custom form inputs from being able to be submitted. Offical thread here_[closed]

cartoonclouds/switch-component