From fc21d4baae8d09df2a52f3c7bf21f271dee40625 Mon Sep 17 00:00:00 2001 From: Bruno Grieder Date: Wed, 1 Apr 2015 11:03:44 +0200 Subject: [PATCH 1/2] 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 000000000..2a0679502 --- /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 000000000..4d953aff8 --- /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 From b79e545dc323badb1fb6b8feed1037982ee71606 Mon Sep 17 00:00:00 2001 From: Bruno Grieder Date: Wed, 1 Apr 2015 11:07:34 +0200 Subject: [PATCH 2/2] jquery-fullscreen type definitions (https://github.com/kayahr/jquery-fullscreen-plugin) --- jquery-fullscreen/jquery-fullscreen-tests.ts | 36 ++++++++++++++++++++ jquery-fullscreen/jquery-fullscreen.d.ts | 28 +++++++++++++++ 2 files changed, 64 insertions(+) create mode 100644 jquery-fullscreen/jquery-fullscreen-tests.ts create mode 100644 jquery-fullscreen/jquery-fullscreen.d.ts diff --git a/jquery-fullscreen/jquery-fullscreen-tests.ts b/jquery-fullscreen/jquery-fullscreen-tests.ts new file mode 100644 index 000000000..633b3d393 --- /dev/null +++ b/jquery-fullscreen/jquery-fullscreen-tests.ts @@ -0,0 +1,36 @@ +/// + +// +// Examples from https://github.com/kayahr/jquery-fullscreen-plugin +// + +function enteringFullScreen() { + + $(document).fullScreen(true); + $('#myVideo').fullScreen(true); +} + +function exitingFullScreen() { + + $(document).fullScreen(false); + $('#myVideo').fullScreen(false); +} + + +function queryingFullScreenMode() { + + //The method returns the current fullscreen element (or true if browser doesn't support this) when fullscreen mode is active, + // false if not active or null when the browser does not support fullscreen mode at all + var isFullScreen = $(document).fullScreen() != null; +} + +function fullScreenNotifications() { + + $(document).bind("fullscreenchange", () => { + console.log("Fullscreen " + ($(document).fullScreen() ? "on" : "off")); + }); + + $(document).bind("fullscreenerror", () => { + alert("Browser rejected fullscreen change"); + }); +} \ No newline at end of file diff --git a/jquery-fullscreen/jquery-fullscreen.d.ts b/jquery-fullscreen/jquery-fullscreen.d.ts new file mode 100644 index 000000000..605b9fb59 --- /dev/null +++ b/jquery-fullscreen/jquery-fullscreen.d.ts @@ -0,0 +1,28 @@ +// Type definitions for jquery-fullscreen 1.1.5 +// Project: https://github.com/kayahr/jquery-fullscreen-plugin +// Definitions by: Bruno Grieder +// Definitions: https://github.com/borisyankov/DefinitelyTyped + +/// + +interface JQuery { + + /** + * You can either switch the whole page or a single HTML element to fullscreen mode + * This only works when the code was triggered by a user interaction (For example a onclick event on a button). Browsers don't allow entering fullscreen mode without user interaction. + * Fullscreen mode is always exited via the document but this plugin allows it also via any HTML element. The owner document of the selected HTML element is used + */ + fullScreen(fullScreen: boolean): JQuery | boolean; + + /** + * The method returns the current fullscreen element (or true if browser doesn't support this) when fullscreen mode is active, + * false if not active or null when the browser does not support fullscreen mode at all + */ + fullScreen(): boolean; + + /** + * The plugin provides another method for simple fullscreen mode toggling + */ + toggleFullScreen(): JQuery | boolean; +} +