switchery: Improvements

- Added missing option: jackSecondaryColor
- Added instance methods
- Added module export as default

switchery/switchery-tests.ts

@@ -3,69 +3,86 @@
 //
 // Examples from https://github.com/abpetkov/switchery
 //
+import {default as Switchery} from "switchery";
 
 function multipleSwitches() {
 
-    var elems = Array.prototype.slice.call( document.querySelectorAll( '.js-switch' ) );
+    var elems = Array.prototype.slice.call(document.querySelectorAll('.js-switch'));
 
-    elems.forEach( (html: Element)  => {
-        var switchery = new Switchery( html );
-    } );
+    elems.forEach((html: Element) => {
+        var switchery = new Switchery(html);
+    });
 }
 
 
 function disabledSwitch() {
 
-    var elem = document.querySelector( '.js-switch' )
+    var elem = document.querySelector('.js-switch')
 
     //inactive switch
-    var switchery = new Switchery( elem, {disabled: true} );
+    var switchery = new Switchery(elem, { disabled: true });
 
     //Customize the default opacity of the disabled switch, using the disabledOpacity option.
-    switchery = new Switchery( elem, {disabled: true, disabledOpacity: 0.75} );
+    switchery = new Switchery(elem, { disabled: true, disabledOpacity: 0.75 });
 }
 
 
 function coloredSwitch() {
 
-    var elem = document.querySelector( '.js-switch' )
+    var elem = document.querySelector('.js-switch')
 
     //You can change the primary color of the switch to fit your design perfectly:
-    var switchery = new Switchery( elem, {color: '#41b7f1'} );
+    var switchery = new Switchery(elem, { color: '#41b7f1' });
 
     //Or the secondary color, which will change the switch background color and border color:
-    switchery = new Switchery( elem, {secondaryColor: '#bbf0f0'} );
+    switchery = new Switchery(elem, { secondaryColor: '#bbf0f0' });
 
     //Since version 0.6.3, you're even allowed to change the jack color from JS, as follows:
-    switchery = new Switchery( elem, {jackColor: '#fffc00'} );
+    switchery = new Switchery(elem, { jackColor: '#fffc00', jackSecondaryColor: '#41b7f1' });
 }
 
 function switchSizes() {
 
-    var elem = document.querySelector( '.js-switch' )
+    var elem = document.querySelector('.js-switch')
 
-    var switchery = new Switchery( elem, {size: 'small'} );
-    switchery = new Switchery( elem, {size: 'large'} );
+    var switchery = new Switchery(elem, { size: 'small' });
+    switchery = new Switchery(elem, { size: 'large' });
 }
 
 function checkingState() {
 
-    var elem = document.querySelector( '.js-switch' )
+    var elem = document.querySelector('.js-switch')
 
     //On click:
 
-    var clickCheckbox = <HTMLInputElement> document.querySelector( '.js-check-click' )
-    var clickButton = <HTMLInputElement> document.querySelector( '.js-check-click-button' );
+    var clickCheckbox = <HTMLInputElement> document.querySelector('.js-check-click')
+    var clickButton = <HTMLInputElement> document.querySelector('.js-check-click-button');
 
-    clickButton.addEventListener( 'click', () => {
-        alert( clickCheckbox.checked );
-    } );
+    clickButton.addEventListener('click', () => {
+        alert(clickCheckbox.checked);
+    });
 
     //On change:
 
-    var changeCheckbox = <HTMLInputElement> document.querySelector( '.js-check-change' );
+    var changeCheckbox = <HTMLInputElement> document.querySelector('.js-check-change');
 
-    changeCheckbox.onchange = function () {
-        alert( changeCheckbox.checked );
+    changeCheckbox.onchange = function() {
+        alert(changeCheckbox.checked);
     };
+}
+
+function detached() {
+    var elem = document.querySelector('.js-switch')
+    var switchery = new Switchery(elem, { size: 'small' });
+
+    switchery.destroy();
+}
+
+function toggleState() {
+    var elem = document.querySelector('.js-switch')
+    var switchery = new Switchery(elem, { size: 'small' });
+    var isDisabled = switchery.isDisabled();
+
+    switchery.enable();
+    switchery.disable();
 }

switchery/switchery.d.ts

@@ -1,64 +1,93 @@
-// Type definitions for switchery 0.7.0
+// Type definitions for switchery 0.8.1
 // Project: https://github.com/abpetkov/switchery
-// Definitions by: Bruno Grieder <https://github.com/bgrieder>
+// Definitions by: Bruno Grieder <https://github.com/bgrieder>, Clayton Lautier <https://github.com/claylaut>
 // Definitions: https://github.com/borisyankov/DefinitelyTyped
 
 declare module Switchery {
 
-    export interface Options {
+    interface SwitcheryStatic {
+        new (node: Node, options?: Options): Switchery;
+    }
+
+    interface Options {
 
         /**
          * color of the switch element (HEX or RGB value)
          * @default '#64bd63'
          */
-        color? : string;
+        color?: string;
         /**
          * secondary color for background color and border, when the switch is off
          * @default '#dfdfdf'
          */
-        secondaryColor? : string;
+        secondaryColor?: string;
         /**
          * color of the jack/handle element
          * @default '#fff'
          */
-        jackColor? : string;
+        jackColor?: string;
+        /**
+         * color of unchecked jack/handle element
+         * @default 'null'
+		 */
+        jackSecondaryColor?: string;
         /**
          * class name for the switch element (by default styled in switchery.css)
          * @default 'switchery'
          */
-        className? : string;
+        className?: string;
         /**
          * enable or disable click events and changing the state of the switch (boolean value)
          * @default false
          */
-        disabled? : boolean;
+        disabled?: boolean;
         /**
          * opacity of the switch when it's disabled (0 to 1)
          * @default 0.5
          */
-        disabledOpacity? : number;
+        disabledOpacity?: number;
         /**
          * length of time that the transition will take, ex. '0.4s', '1s', '2.2s' (Note: transition speed of the handle is twice shorter)
-         * @default '0.4s'
+         * @default '0.1s'
          */
-        speed? : string;
+        speed?: string;
         /**
          * size of the switch element (small or large)
          * @default 'default'
          */
-        size? : string;
+        size?: string;
     }
-
-
 }
 
-declare class Switchery {
+interface Switchery {
 
-    constructor(node: Node, options?: Switchery.Options);
+	/**
+     * Unbinding all event handlers attached to the switch element to prepare the object for garbage collection.
+     * @returns {void} 
+     */
+    destroy(): void;
 
+	/**
+     * Enable disabled switch by re-adding event handlers and changing the opacity to 1.
+     * @returns {void} 
+     */
+    enable(): void;
+
+	/**
+     * Disable switch by unbinding attached events and changing opacity to disabledOpacity value
+     * @returns {void} 
+     */
+    disable(): void;
+
+	/**
+     * Check if switch is currently disabled by checking the readonly and disabled attributes on the checkbox and the disabled option set via JS.
+     *  If any of those are present, the returned value is true.
+     * @returns {boolean} whether it's disabled or not. 
+     */
+    isDisabled(): boolean;
 }
 
 declare module "switchery" {
-
-    export = Switchery
+    var switchery: Switchery.SwitcheryStatic;
+    export default switchery;
 }