Merge pull request #4021 from bgrieder/master

Switchery and jquery-fullscreen Type Definitions

jquery-fullscreen/jquery-fullscreen-tests.ts

@@ -0,0 +1,36 @@
+/// <reference path="jquery-fullscreen.d.ts"/>
+
+//
+// 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");
+    });
+}

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 <https://github.com/bgrieder>
+// Definitions: https://github.com/borisyankov/DefinitelyTyped
+
+/// <reference path="../jquery/jquery.d.ts"/>
+
+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;
+}
+

switchery/switchery-tests.ts

@@ -0,0 +1,71 @@
+/// <reference path="switchery.d.ts"/>
+
+//
+// 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 = <HTMLInputElement> document.querySelector( '.js-check-click' )
+    var clickButton = <HTMLInputElement> document.querySelector( '.js-check-click-button' );
+
+    clickButton.addEventListener( 'click', () => {
+        alert( clickCheckbox.checked );
+    } );
+
+    //On change:
+
+    var changeCheckbox = <HTMLInputElement> document.querySelector( '.js-check-change' );
+
+    changeCheckbox.onchange = function () {
+        alert( changeCheckbox.checked );
+    };
+}

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 <https://github.com/bgrieder>
+// 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
+}