From fc21d4baae8d09df2a52f3c7bf21f271dee40625 Mon Sep 17 00:00:00 2001 From: Bruno Grieder Date: Wed, 1 Apr 2015 11:03:44 +0200 Subject: [PATCH] Added Switchery Type Definitions (https://github.com/abpetkov/switchery) --- switchery/switchery-tests.ts | 71 ++++++++++++++++++++++++++++++++++++ switchery/switchery.d.ts | 64 ++++++++++++++++++++++++++++++++ 2 files changed, 135 insertions(+) create mode 100644 switchery/switchery-tests.ts create mode 100644 switchery/switchery.d.ts diff --git a/switchery/switchery-tests.ts b/switchery/switchery-tests.ts new file mode 100644 index 0000000000..2a06795027 --- /dev/null +++ b/switchery/switchery-tests.ts @@ -0,0 +1,71 @@ +/// + +// +// Examples from https://github.com/abpetkov/switchery +// + +function multipleSwitches() { + + var elems = Array.prototype.slice.call( document.querySelectorAll( '.js-switch' ) ); + + elems.forEach( (html: Element) => { + var switchery = new Switchery( html ); + } ); +} + + +function disabledSwitch() { + + var elem = document.querySelector( '.js-switch' ) + + //inactive switch + 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} ); +} + + +function coloredSwitch() { + + 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'} ); + + //Or the secondary color, which will change the switch background color and border color: + 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'} ); +} + +function switchSizes() { + + var elem = document.querySelector( '.js-switch' ) + + var switchery = new Switchery( elem, {size: 'small'} ); + switchery = new Switchery( elem, {size: 'large'} ); +} + +function checkingState() { + + var elem = document.querySelector( '.js-switch' ) + + //On click: + + var clickCheckbox = document.querySelector( '.js-check-click' ) + var clickButton = document.querySelector( '.js-check-click-button' ); + + clickButton.addEventListener( 'click', () => { + alert( clickCheckbox.checked ); + } ); + + //On change: + + var changeCheckbox = document.querySelector( '.js-check-change' ); + + changeCheckbox.onchange = function () { + alert( changeCheckbox.checked ); + }; +} \ No newline at end of file diff --git a/switchery/switchery.d.ts b/switchery/switchery.d.ts new file mode 100644 index 0000000000..4d953aff88 --- /dev/null +++ b/switchery/switchery.d.ts @@ -0,0 +1,64 @@ +// Type definitions for switchery 0.7.0 +// Project: https://github.com/abpetkov/switchery +// Definitions by: Bruno Grieder +// Definitions: https://github.com/borisyankov/DefinitelyTyped + +declare module Switchery { + + export interface Options { + + /** + * color of the switch element (HEX or RGB value) + * @default '#64bd63' + */ + color? : string; + /** + * secondary color for background color and border, when the switch is off + * @default '#dfdfdf' + */ + secondaryColor? : string; + /** + * color of the jack/handle element + * @default '#fff' + */ + jackColor? : string; + /** + * class name for the switch element (by default styled in switchery.css) + * @default 'switchery' + */ + className? : string; + /** + * enable or disable click events and changing the state of the switch (boolean value) + * @default false + */ + disabled? : boolean; + /** + * opacity of the switch when it's disabled (0 to 1) + * @default 0.5 + */ + 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' + */ + speed? : string; + /** + * size of the switch element (small or large) + * @default 'default' + */ + size? : string; + } + + +} + +declare class Switchery { + + constructor(node: Node, options?: Switchery.Options); + +} + +declare module "switchery" { + + export = Switchery +} \ No newline at end of file