diff --git a/slideout/slideout-tests.ts b/slideout/slideout-tests.ts index 7445b3466..7d634be80 100644 --- a/slideout/slideout-tests.ts +++ b/slideout/slideout-tests.ts @@ -1,71 +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 +/// + +// 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"); +}); diff --git a/slideout/slideout.d.ts b/slideout/slideout.d.ts index 715d70546..28c317d0c 100644 --- a/slideout/slideout.d.ts +++ b/slideout/slideout.d.ts @@ -1,157 +1,157 @@ -// Type definitions for Slideout 0.1.12 -// Project: https://github.com/mango/slideout -// 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; -} +// Type definitions for Slideout 0.1.12 +// Project: https://github.com/mango/slideout +// 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; +}