From f24949bde75706196f842b0a30d3cc969dbe703a Mon Sep 17 00:00:00 2001 From: Clayton Lautier Date: Tue, 6 Oct 2015 02:23:38 +0200 Subject: [PATCH] switchery: Improvements - Added missing option: jackSecondaryColor - Added instance methods - Added module export as default --- switchery/switchery-tests.ts | 63 +++++++++++++++++++++------------- switchery/switchery.d.ts | 65 ++++++++++++++++++++++++++---------- 2 files changed, 87 insertions(+), 41 deletions(-) diff --git a/switchery/switchery-tests.ts b/switchery/switchery-tests.ts index 2a06795027..35bd77920f 100644 --- a/switchery/switchery-tests.ts +++ b/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 = document.querySelector( '.js-check-click' ) - var clickButton = document.querySelector( '.js-check-click-button' ); + var clickCheckbox = document.querySelector('.js-check-click') + var clickButton = document.querySelector('.js-check-click-button'); - clickButton.addEventListener( 'click', () => { - alert( clickCheckbox.checked ); - } ); + clickButton.addEventListener('click', () => { + alert(clickCheckbox.checked); + }); //On change: - var changeCheckbox = document.querySelector( '.js-check-change' ); + var changeCheckbox = 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(); } \ No newline at end of file diff --git a/switchery/switchery.d.ts b/switchery/switchery.d.ts index 4d953aff88..79934c776c 100644 --- a/switchery/switchery.d.ts +++ b/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 +// Definitions by: Bruno Grieder , Clayton Lautier // 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; } \ No newline at end of file