From f9acb8d76dc39a9bff8d4cc02c901a5bfb481ce4 Mon Sep 17 00:00:00 2001 From: Dan Manastireanu Date: Tue, 1 Nov 2016 14:49:32 +0200 Subject: [PATCH] Add type definition for seamless.js 0.0.6. Closes #12137 (#12357) --- seamless/index.d.ts | 186 +++++++++++++++++++++++++++++++++++++ seamless/seamless-tests.ts | 135 +++++++++++++++++++++++++++ seamless/tsconfig.json | 19 ++++ 3 files changed, 340 insertions(+) create mode 100644 seamless/index.d.ts create mode 100644 seamless/seamless-tests.ts create mode 100644 seamless/tsconfig.json diff --git a/seamless/index.d.ts b/seamless/index.d.ts new file mode 100644 index 0000000000..c6987b272f --- /dev/null +++ b/seamless/index.d.ts @@ -0,0 +1,186 @@ +// Type definitions for seamless.js 0.0.6 +// Project: https://github.com/travist/seamless.js +// Definitions by: Dan Manastireanu +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped + +/// + +declare namespace Seamless { + export interface SeamlessJQuery extends JQuery { + seamless_options: Options, + connection: Connection, + send(data: any): void, + receive(callback: Callback): void, + receive(type: string, callback: Callback): void, + seamless_ready(data: any, event: any): void, + seamless_update(data: any, event: any): any, + seamless_error(data: any, event: any): void + } + + export interface Options { + /** + * The text to show when the child page is loading. + * @default 'Loading ...' + */ + loading?: string, + /** + * The url of the spinner GIF that is shown when the child page is loading. + * @default 'http://www.travistidwell.com/seamless.js/src/loader.gif' + */ + spinner?: string, + /** + * Show or not the loading indicator. + * @default true + */ + showLoadingIndicator?: boolean, + /** + * Called when a child iframe has finished connecting. + * @default null + */ + onConnect?: ((data: any) => void) | null, + /** + * The styles to inject into the child page. + * @default [] + */ + styles?: string[], + /** + * If the fallback functionality is enabled. + * @default false + */ + fallback?: boolean, + /** + * Additional query params to attach to the fallback window when it is opened. + * @default '' + */ + fallbackParams?: string, + /** + * A message to show below the child iframe to offer assistance if they are having problems. + * @default '' + */ + fallbackText?: string, + /** + * The string to show within the 'Click here' link to open the fallback window. + * @default 'Click Here' + */ + fallbackLinkText?: string, + /** + * Text to add after the fallbackLinkText link. + * @default 'to open in a separate window.' + */ + fallbackLinkAfter?: string, + /** + * An array of string styles to add to the fallback text when something bad happens. + * @default [ 'padding: 15px', 'border: 1px solid transparent', 'border-radius: 4px', 'color: #3a87ad', 'background-color: #d9edf7', 'border-color: #bce8f1' ] + */ + fallbackStyles?: string[], + /** + * An array of string styles to add to the fallback link. + * @default [ 'display: inline-block', 'color: #333', 'border: 1px solid #ccc', 'background-color: #fff', 'padding: 5px 10px', 'text-decoration: none', 'font-size: 12px', 'line-height: 1.5', 'border-radius: 6px', 'font-weight: 400', 'cursor: pointer', '-webkit-user-select: none', '-moz-user-select: none', '-ms-user-select: none', 'user-select: none' ] + */ + fallbackLinkStyles?: string[], + /** + * An array of string styles to add to the fallback link on hover. + * @default [ 'background-color:#ebebeb', 'border-color:#adadad' ] + */ + fallbackLinkHoverStyles?: string[], + /** + * The width of the window that is opened up for the fallback. + * @default 960 + */ + fallbackWindowWidth?: number, + /** + * The height of the window that is opened up for the fallback. + * @default 800 + */ + fallbackWindowHeight?: number + } + + export interface ConnectOptions { + /** + * The url of the parent page to connect to. + * @default '' + */ + url?: string, + /** + * The container for the main content on the page which determines the height of the page. + * @default 'body' + */ + container?: string, + /** + * The milliseconds that an update is created from the child to the parent. + * @default 200 + */ + update?: number, + /** + * If this page should allow injected styles. + * @default false + */ + allowStyleInjection?: boolean, + /** + * Allow appended styles to be injected. + * @default false + */ + allowAppendedStyleInjection?: boolean, + /** + * If the child page requires cookies (See Child iFrame Cookie Problem section) + * @default false + */ + requireCookies?: boolean, + /** + * The message to show if the cookie test fails. + * @default 'Your browser requires this page to be opened in a separate window.' + */ + cookieFallbackMsg?: string, + /** + * The text to place inside the link to have them open a new window if the cookie test fails. + * @default 'Click Here' + */ + cookieFallbackLinkMsg?: string, + /** + * The text to place after the link when the cookie test fails. + * @default ' to open in a separate window.' + */ + cookieFallbackAfterMsg?: string, + /** + * Callback that is called when an update is triggered to the parent. + * @default null + */ + onUpdate?(data: any): void, + /** + * Called when the parent connects to this iframe. + * @default null + */ + onConnect?(data: any): void + } + + export interface Callback { + (data: any, event: any): any | boolean | void; + } + + export interface Connection { + id: number, + target: string, + url: string, + active: boolean, + queue: any[] + send(data: any): void, + receive(callback: Callback): void, + receive(type: string, callback: Callback): void, + setActive(active: boolean): void + + } + + export interface Static { + options: ConnectOptions, + connect(options: ConnectOptions): Connection + } +} + + +interface JQuery { + seamless(options?: Seamless.Options): Seamless.SeamlessJQuery +} + +interface JQueryStatic { + seamless: Seamless.Static +} diff --git a/seamless/seamless-tests.ts b/seamless/seamless-tests.ts new file mode 100644 index 0000000000..4aa1ab3aba --- /dev/null +++ b/seamless/seamless-tests.ts @@ -0,0 +1,135 @@ +/// + +/* Create Parent Seamless IFrame */ +$('#myiframe').seamless(); +$('#myiframe').seamless({ + loading: 'I am loading!!!!' +}); +// The default arguments. +var defaults = { + showLoadingIndicator: true, + loading: 'Loading ...', + spinner: 'http://www.travistidwell.com/seamless.js/src/loader.gif', + onConnect: null, + styles: [], + fallback: true, + fallbackParams: '', + fallbackText: '', + fallbackLinkText: 'Click here', + fallbackLinkAfter: ' to open in a separate window.', + fallbackStyles: [ + 'padding: 15px', + 'border: 1px solid transparent', + 'border-radius: 4px', + 'color: #3a87ad', + 'background-color: #d9edf7', + 'border-color: #bce8f1' + ], + fallbackLinkStyles: [ + 'display: inline-block', + 'color: #333', + 'border: 1px solid #ccc', + 'background-color: #fff', + 'padding: 5px 10px', + 'text-decoration: none', + 'font-size: 12px', + 'line-height: 1.5', + 'border-radius: 6px', + 'font-weight: 400', + 'cursor: pointer', + '-webkit-user-select: none', + '-moz-user-select: none', + '-ms-user-select: none', + 'user-select: none' + ], + fallbackLinkHoverStyles: [ + 'background-color:#ebebeb', + 'border-color:#adadad' + ], + fallbackWindowWidth: 960, + fallbackWindowHeight: 800 +}; +$('#myiframe').seamless(defaults); + +/* Connect Child Page to Parent Page */ +(function(){ + $.seamless.connect({ + url: 'index.html' + }); + $.seamless.connect({ + url: 'index.html', + container: 'div.content' + }); +}()); + +/* Communicate to the Child page from the Parent page. */ +(function() { + var child = $('#myiframe').seamless(); + child.show(); + // Send a message + child.send({ + myparam: 'This is anything you want it to be...' + }); + + // Receive a message + child.receive(function (data, event) { + + // Print out the data that was received. + console.log(data); + }); +}()); + +/* Communicate to the Parent page from the Child page. */ +(function(){ + var parent = $.seamless.connect({ + url: 'index.html' + }); + +// Send a message + parent.send({ + myparam: 'This is anything you want it to be...' + }); + +// Receive a message + parent.receive(function(data, event) { + + // Print out the data that was received. + console.log(data); + }); +}()); + + +/* Send Responses */ +(function(){ + var child = $('#myiframe').seamless(); + + child.send({ + data: { + mydata: 'This is a message' + }, + success: function(data: any) { + + // 'data' is what was returned from the child 'receive' function. + console.log(data); + } + }); + + /* Receive a message */ + var parent = $.seamless.connect({ + url: 'index.html' + }); + + parent.receive(function(data, event) { + + // Print out the data that was received. + console.log(data); + + // Now return something for the response. + return { + myresponse: "I'm listening..." + }; + }); +}()); + +/* Child iFrame Cookie Problem */ +$.seamless.options.requireCookies = true; diff --git a/seamless/tsconfig.json b/seamless/tsconfig.json new file mode 100644 index 0000000000..2a0b6508cf --- /dev/null +++ b/seamless/tsconfig.json @@ -0,0 +1,19 @@ +{ + "compilerOptions": { + "module": "commonjs", + "target": "es6", + "noImplicitAny": true, + "strictNullChecks": true, + "baseUrl": "../", + "typeRoots": [ + "../" + ], + "types": [], + "noEmit": true, + "forceConsistentCasingInFileNames": true + }, + "files": [ + "index.d.ts", + "seamless-tests.ts" + ] +}