a-simple-switch - npm Package Compare versions

Comparing version 0.4.2 to 0.4.4

package.json

 {
   "name": "a-simple-switch",
-  "version": "0.4.2",
+  "version": "0.4.4",
   "description": "Vanilla JS/CSS Switch UI element",
   "main": "src/javascript/index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "medusa"
   },
@@ -34,3 +34,3 @@ "author": "Ivan Mattie",
     "gulp-zip": "^4.0.0",
-    "medusa-cli": "^0.3.1",
+    "medusa-cli": "^0.5.2",
     "webpack": "^2.6.1",
@@ -37,0 +37,0 @@ "webpack-stream": "^3.2.0"

readme.md

 # Simple Switch
 
 [![npm version](https://badge.fury.io/js/a-simple-switch.svg)](https://badge.fury.io/js/a-simple-switch)
+[![Build Status](https://travis-ci.org/aeolingamenfel/simple-switch.svg?branch=master)](https://travis-ci.org/aeolingamenfel/simple-switch)
 
@@ -18,3 +19,2 @@ Simple, accessible, performant implementation of the Switch UI element.
 
-  - [Statistics](#statistics)
   - [Installation](#installation)
@@ -29,12 +29,2 @@ - [Installing the Javascript](#installing-the-javascript)
 
-## Statistics
-
-Below are the gzipped sizes of the source files. All measured using an Apache
-server and Google Chrome.
-
-| File | Size (after gzip) |
-| ---- | ----------------- |
-| `SimpleSwitch.css` | 860 bytes |
-| `SimpleSwitch.min.js` | 1.6 kilobytes |
-
 ## Installation
@@ -143,2 +133,3 @@
 | Material Style | `material` | Boolean | `false` | No | If set, will set the Switch to have an alternative style that matches the [Material.io spec](https://material.io/guidelines/components/selection-controls.html#selection-controls-switch) for Switches |
+| Update Size from Font | `matchSizeToFont` | Boolean | `false` | No | If set, will cause the Switch to attempt to match its size to the font size of the containing element |
 
@@ -154,3 +145,3 @@ *Example:*
 ```Javascript
-var myCheckbox = document.getElementById("my-checkbox");
+let myCheckbox = document.getElementById("my-checkbox");
 
@@ -157,0 +148,0 @@ new SimpleSwitch.Switch({

src/javascript/index.js

 import {Switch} from "./Switch.js";
 
+// Export the Switch class so that users of this code can create new Switches by
+// calling new SimpleSwitch.Switch()
 export {Switch};
 
+// Takes care of finding Switches within the site code.
 export var init = function() {
-    var x, _switch, switches = document.querySelectorAll("[data-type='simple-switch']");
+    var x, _switch,
+        switches = document.querySelectorAll("[data-type='simple-switch']");
 
@@ -8,0 +12,0 @@ for(x = 0; x < switches.length; x++) {

src/javascript/Switch.js

@@ -0,16 +1,49 @@
+/**
+ * Wrapper class that handles upgrading a normal checkbox into a SimpleSwitch.
+ */
 export class Switch {
 
+    /**
+     * Constructor for a new Switch.
+     * 
+     * @param {Object} config The configuration information for the new Switch.
+     * 
+     * @param {HTMLElement} config.element The HTMLElement object repesenting
+     *  the checkbox to upgrade. Either this or config.selector MUST be
+     *  specified.
+     * 
+     * @param {String} config.selector The CSS selector that specifies the 
+     *  checkbox to be upgraded. Either this or the config.element MUST be 
+     *  specified.
+     * 
+     * @param {Boolean} config.material Defaults to false. If true, will render
+     *  the new Switch in a Material Design-inspired look.
+     * 
+     * @param {Boolean} config.matchSizeToFont Defaults to false. If true, will
+     *  attempt to figure out the impled font size for the Switch, and match
+     *  its size to that font size. 
+     */
     constructor(config) {
-        this.element = config.element || document.querySelector(config.selector);
-        this.isMaterial = typeof config.material !== 'undefined' ? config.material : false;
+        // set/get basic properties from config or defaults
+        this.element = config.element
+            || document.querySelector(config.selector);
+        this.isMaterial = typeof config.material !== 'undefined'
+            ? config.material : false;
         this.checked = !!this.element.checked;
+        this.matchSizeToFont = typeof config.matchSizeToFont !== 'undefined' ?
+            config.matchSizeToFont : false;
 
         // override from property
-        if(this.element.dataset.material && this.element.dataset.material === "true") {
+        if(this.element.dataset.material
+            && this.element.dataset.material === "true") {
             this.isMaterial = true;
         }
 
+        // actually create the elements that make up the Switch
         this.setup();
     }
 
+    /**
+     * Creates the elements that make up the Switch.
+     */
     setup() {
@@ -32,2 +65,6 @@ this.track = document.createElement("button");
 
+        // The track itself, despite being a button, shouldn't be tabbed to. 
+        // Instead, when the original checkbox gains focus, the Javascript will
+        // update the track. This is so that screenreaders still read the 
+        // Switch as a checkbox.
         this.track.setAttribute("tabindex", -1);
@@ -44,5 +81,10 @@
     /**
-     * Updates the size of the Switch to match the inherited font size.
+     * Updates the size of the Switch to match the inherited font size. Only
+     * works on browsers that support CSS variables for now.
      */
     updateSize() {
+        if(!this.matchSizeToFont) {
+            return;
+        }
+
         const _style = window.getComputedStyle(this.track);
@@ -54,2 +96,6 @@ const inheritedFontSize = _style['font-size'];
 
+    /**
+     * Takes care of binding all relevant events from the checkbox so that the 
+     * Switch can update itself when those events happen.
+     */
     bind() {
@@ -73,2 +119,7 @@ this.track.addEventListener("click", function(e) {
 
+    /**
+     * Called automatically when the wrapped checkbox gains focus.
+     * 
+     * @param {FocusEvent} e The focus event object. 
+     */
     checkboxFocused(e) {
@@ -78,2 +129,7 @@ this.track.classList.add(Switch.FOCUSED_CLASS_NAME);
 
+    /**
+     * Called automatically when the wrapped checkbox loses focus.
+     * 
+     * @param {BlurEvent} e The blur event object.
+     */
     checkboxBlurred(e) {
@@ -83,2 +139,7 @@ this.track.classList.remove(Switch.FOCUSED_CLASS_NAME);
 
+    /**
+     * Called automatically when the Switch track is clicked.
+     * 
+     * @param {ClickEvent} e The click event object.
+     */
     trackClicked(e) {
@@ -88,2 +149,7 @@ this.toggle();
 
+    /**
+     * Called automatically when the wrapped checkbox is clicked.
+     * 
+     * @param {ClickEvent} e The click event object.
+     */
     checkboxToggled(e) {
@@ -93,2 +159,6 @@ this.toggle();
 
+    /**
+     * Toggles the state of the Switch. Also takes care of making sure the 
+     * wrapped checkbox is also updated.
+     */
     toggle() {
@@ -95,0 +165,0 @@ this.checked = this.track.classList.toggle(Switch.CHECKED_CLASS_NAME);

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No tests

Quality

Package does not have any tests. This is a strong signal of a poorly maintained or low quality package.

Found 1 instance in 1 package

Improved metrics

Lines of code

238

increased by25.26%

Number of low quality alerts

2

decreased by-33.33%

Worsened metrics

Total package byte prevSize

22670

decreased by-3.45%

Number of package files

10

decreased by-23.08%

Number of lines in readme file

167

decreased by-5.11%

No dependency changes