From dab0e9d127125a469626ae3b16ef5004eaf86e1f Mon Sep 17 00:00:00 2001 From: ToastHawaii Date: Sat, 19 Mar 2016 14:19:50 +0100 Subject: [PATCH] Add typedefinition for slideout. --- slideout/slideout-tests.ts | 71 +++++++++++++++++ slideout/slideout.d.ts | 158 ++++++++++++++++++++++++++++++++++++- 2 files changed, 228 insertions(+), 1 deletion(-) create mode 100644 slideout/slideout-tests.ts diff --git a/slideout/slideout-tests.ts b/slideout/slideout-tests.ts new file mode 100644 index 000000000..7445b3466 --- /dev/null +++ b/slideout/slideout-tests.ts @@ -0,0 +1,71 @@ +/// + +// Slideout(options) +var slideout = new Slideout({ + "panel": document.getElementById("panel"), + "menu": document.getElementById("menu"), + "padding": 256, + "tolerance": 70 +}); + +// Slideout.open(); +slideout.open(); + +// Slideout.close(); +slideout.close(); + +// Slideout.toggle(); +slideout.toggle(); + +// Slideout.isOpen(); +slideout.isOpen(); // true or false + +// Slideout.destroy(); +slideout.destroy(); + +// Slideout.enableTouch(); +slideout.enableTouch(); + +// Slideout.disableTouch(); +slideout.disableTouch(); + +// Slideout.on(event, listener); +slideout.on("open", function () { }); + +// Slideout.once(event, listener); +slideout.once("open", function () { }); + +// Slideout.off(event, listener); +slideout.off("open", function () { }); + +// Slideout.emit(event, ...data); +slideout.emit("open"); + +// Events +slideout.on("translatestart", function () { + console.log("Start"); +}); + +slideout.on("translate", function (translated) { + console.log("Translate: " + translated); // 120 in px +}); + +slideout.on("translateend", function () { + console.log("End"); +}); + +// How to open slideout from right side. +var slideout = new Slideout({ + "panel": document.getElementById("content"), + "menu": document.getElementById("menu"), + "side": "right" +}); + +// How to use slideout with a fixed header. +slideout.on("beforeopen", function () { + document.querySelector(".fixed").classList.add("fixed-open"); +}); + +slideout.on("beforeclose", function () { + document.querySelector(".fixed").classList.remove("fixed-open"); +}); \ No newline at end of file diff --git a/slideout/slideout.d.ts b/slideout/slideout.d.ts index 8b1378917..7b203df02 100644 --- a/slideout/slideout.d.ts +++ b/slideout/slideout.d.ts @@ -1 +1,157 @@ - +// Type definitions for Slideout 0.1.12 +// Project: https://github.com/t4t5/sweetalert/ +// Definitions by: Markus Peloso +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped + +declare module "slideout" { + export = Slideout; +} + +declare namespace Slideout { + /** + * Options to customize a new instance of Slideout. + */ + interface Options { + /** + * The DOM element that contains all your application content (.slideout-panel). + */ + panel: HTMLElement; + + /** + * The DOM element that contains your menu application (.slideout-menu). + */ + menu: HTMLElement; + + /** + * The time (milliseconds) to open/close the slideout. + * Default: 300. + */ + duration?: number; + + /** + * The CSS effect to use when animating the opening and closing of the slideout. + * Default: ease. + */ + fx?: string; + + /** + * Default: 256. + */ + padding?: number; + + /** + * The number of px needed for the menu can be opened completely, otherwise it closes. + * Default: 70. + */ + tolerance?: number; + + /** + * Set this option to false to disable Slideout touch events. + * Default: true. + */ + touch?: boolean; + + /** + * The side to open the slideout. + * Default: left. + */ + side?: "left" | "right"; + } + + type Events = "beforeopen" | "open" | "beforeclose" | "close" | "translatestart" | "translate" | "translateend"; +} + +/** + * A touch slideout navigation menu for your mobile web apps. + */ +declare class Slideout { + /** + * A touch slideout navigation menu for your mobile web apps. + * @param options Options to customize a new instance of Slideout. + */ + constructor(options: Slideout.Options); + + /** + * Opens the slideout menu. It emits beforeopen and open events. + */ + open(): Slideout; + + /** + * Closes the slideout menu. It emits beforeclose and close events. + */ + close(): Slideout; + + /** + * Toggles (open/close) the slideout menu. + */ + toggle(): Slideout; + + /** + * Returns true if the slideout is currently open, and false if it is closed. + */ + isOpen(): boolean; + + /** + * Cleans up the instance so another slideout can be created on the same area. + */ + destroy(): Slideout; + + /** + * Enables opening the slideout via touch events. + */ + enableTouch(): Slideout; + + /** + * Disables opening the slideout via touch events. + */ + disableTouch(): Slideout; + + /** + * Adds a listener to the collection for the specified event. + * @param event The event name. + * @param listener A listener function to add. + */ + on(event: "translate", listener: (translateX: number) => any): Slideout; + + /** + * Adds a listener to the collection for the specified event. + * @param event The event name. + * @param listener A listener function to add. + */ + on(event: Slideout.Events, listener: Function): Slideout; + + /** + * Adds a listener to the collection for the specified event that will be called only once. + * @param event The event name. + * @param listener A listener function to add. + */ + once(event: "translate", listener: (translateX: number) => any): Slideout; + + /** + * Adds a listener to the collection for the specified event that will be called only once. + * @param event The event name. + * @param listener A listener function to add. + */ + once(event: Slideout.Events, listener: Function): Slideout; + + /** + * Removes a listener from the collection for the specified event. + * @param event The event name. + * @param listener A listener function to remove. + */ + off(event: "translate", listener: (translateX: number) => any): Slideout; + + /** + * Removes a listener from the collection for the specified event. + * @param event The event name. + * @param listener A listener function to remove. + */ + off(event: Slideout.Events, listener: Function): Slideout; + + /** + * Execute each item in the listener collection in order with the specified data. + * @param event The name of the event you want to emit. + * @param data Data to pass to the listeners. + */ + emit(event: Slideout.Events, ...data: any[]): Slideout; +} \ No newline at end of file