From 09ba90cce0b63bedbe9986047f51bbe77e91bc84 Mon Sep 17 00:00:00 2001 From: Nathan Pitman Date: Fri, 1 May 2015 17:40:07 +1200 Subject: [PATCH 1/2] Added type bindings for the qtip2 library (including tooltip setup, excluding its API). --- qtip2/qtip2-tests.ts | 537 +++++++++++++++++++++++++++++++++ qtip2/qtip2-tests.ts.tscparams | 2 + qtip2/qtip2.d.ts | 153 ++++++++++ 3 files changed, 692 insertions(+) create mode 100644 qtip2/qtip2-tests.ts create mode 100644 qtip2/qtip2-tests.ts.tscparams create mode 100644 qtip2/qtip2.d.ts diff --git a/qtip2/qtip2-tests.ts b/qtip2/qtip2-tests.ts new file mode 100644 index 000000000..f6e0b8997 --- /dev/null +++ b/qtip2/qtip2-tests.ts @@ -0,0 +1,537 @@ +/// + +var $a = $('_'); + + +/** + * Test core properties (http://qtip2.com/options#core) + */ +function testCoreProperties() { + // Test with all core options specififed + $a.qtip({ + content: 'Jan Jansen', + id: 'jan-jansen', + prerender: true, + overwrite: true, + suppress: true, + metadata: { + type: 'html5', + name: 'qtipopts' + } + }); + + // Test ID as boolean + $a.qtip({ + content: 'yoshimo', + id: false + }); + + // Test with no options specified + $a.qtip({ + content: 'aerie' + }); +} + + +/** + * http://qtip2.com/options#content.text + */ +function testContentText() { + // Shorthand string + $a.qtip({ + content: 'valygar' + }); + + // Regular string + $a.qtip({ + content: { text: 'kivan' } + }); + + // Shorthand boolean + $a.qtip({ + content: true + }); + + // Regular boolean + $a.qtip({ + content: { text: true } + }); + + // Shorthand Deferred / Promise + $a.qtip({ + content: $.Deferred().resolve('cernd') + }); + + $a.qtip({ + content: $.Deferred().reject().promise() + }); + + // Regular Deferred / Promise + $a.qtip({ + content: { text: $.Deferred().resolve('horatio') } + }); + + $a.qtip({ + content: { text: $.Deferred().reject().promise() } + }); + + // Shorthand function + $a.qtip({ + content: function(event, api) { } + }); + + $a.qtip({ + content: function(event) { return 2; } + }); + + $a.qtip({ + content: function() { } + }); + + // Regular function + $a.qtip({ + content: { text: function(event, api) { } } + }); + + $a.qtip({ + content: { text: function(event) { return 2; } } + }); + + $a.qtip({ + content: { text: function() { } } + }); + + // Shorthand jQuery elements + $a.qtip({ + content: $('.irenicus') + }); + + // Regular jQuery elements + $a.qtip({ + content: { text: $('.irenicus') } + }); +} + + +/** + * http://qtip2.com/options#content.title + */ +function testContentTitle() { + // Shorthand string + $a.qtip({ + content: { title: 'keldorn' } + }); + + // Regular string + $a.qtip({ + content: { + title: { text: 'nalia' } + } + }); + + // Shorthand boolean + $a.qtip({ + content: { title: true } + }); + + // Regular boolean + $a.qtip({ + content: { + title: { text: true } + } + }); + + // Shorthand Deferred / Promise + $a.qtip({ + content: { title: $.Deferred().resolve('mazzy') } + }); + + $a.qtip({ + content: { title: $.Deferred().reject().promise() } + }); + + // Regular Deferred / Promise + $a.qtip({ + content: { title: { text: $.Deferred().resolve('bodhi') } } + }); + + $a.qtip({ + content: { title: { text: $.Deferred().reject().promise() } } + }); + + // Shorthand function + $a.qtip({ + content: { title: function(event, api) {} } + }); + + $a.qtip({ + content: { title: function(event) { return 2; } } + }); + + $a.qtip({ + content: { title: function() { } } + }); + + // Regular function + $a.qtip({ + content: { title: { text: function(event, api) { } } } + }); + + $a.qtip({ + content: { title: { text: function(event) { return 2; } } } + }); + + $a.qtip({ + content: { title: { text: function() { } } } + }); + + // Shorthand jQuery elements + $a.qtip({ + content: { title: $('.irenicus') } + }); + + // Regular jQuery elements + $a.qtip({ + content: { title: { text: $('.irenicus') } } + }); +} + + +/** + * http://qtip2.com/options#content.button + */ +function testContentButtonProperty() { + $a.qtip({ + content: { button: $('.minsc') } + }); + + $a.qtip({ + content: { button: 'jaheira' } + }); + + $a.qtip({ + content: { button: true } + }); +} + + +/** + * http://qtip2.com/options#content.attr + */ +function testContentAttrProperty() { + $a.qtip({ + content: { attr: 'viconia' } + }); +} + + +/** + * http://qtip2.com/options#position + */ +function testPositionProperty() { + // Shorthand + $a.qtip({ position: 'top left' }); + + // The below four calls test all combinations of all sub-properties + $a.qtip({ + position: { + target: $('.khalid'), + my: 'top left', + at: 'bottom right', + container: $('.edwin-odesseiron'), + viewport: $('.dynaheir'), + effect: function(api, pos, viewport) { }, + adjust: { x: 2 } + } + }); + + $a.qtip({ + position: { + target: [2, 2], + my: true, + at: true, + container: false, + viewport: true, + effect: function(api, pos) { return 2; }, + adjust: { y: 2 } + } + }); + + $a.qtip({ + position: { + target: 'mouse', + effect: function(api) {}, + adjust: { x: 2, y: 2 } + } + }); + + $a.qtip({ + position: { + target: false, + effect: function() {}, + adjust: { + mouse: true, + resize: true, + scroll: false, + method: 'flipinvert' + } + } + }); + + $a.qtip({ + position: { + adjust: { } + } + }); +} + + +/** + * http://qtip2.com/options#show + */ +function testShowProperty() { + // Shorthand + $a.qtip({ show: true }); + $a.qtip({ show: 'mouseenter' }); + $a.qtip({ show: $('.korgan') }); + + // The below calls test all combinations of all sub-properties + $a.qtip({ + show: { + target: $('.gorion'), + event: false, + delay: 42, + solo: $('.imoen'), + ready: true, + effect: function(offset) { + }, + modal: true + } + }); + + $a.qtip({ + show: { + target: false, + event: 'mouseenter', + solo: '.qtips', + effect: true, + modal: { + on: true, + blur: false, + escape: true, + stealfocus: true, + effect: true + } + } + }); + + $a.qtip({ + show: { + solo: false, + modal: { + effect: function(state) {} + } + } + }); + + $a.qtip({ + show: { + modal: {} + } + }); +} + + +/** + * http://qtip2.com/options#hide + */ +function testHideProperty() { + // Shorthand + $a.qtip({ hide: 'mouseenter' }); + $a.qtip({ hide: $('.montaron') }); + + // The below calls test all combinations of all sub-properties + $a.qtip({ + hide: { + target: $('.gorion'), + event: false, + delay: 42, + inactive: 64, + fixed: true, + leave: 'window', + distance: 32, + effect: function(offset) { + }, + } + }); + + $a.qtip({ + hide: { + target: false, + event: 'mouseenter', + inactive: false, + leave: false, + distance: false, + effect: true, + } + }); +} + + +/** + * http://qtip2.com/options#style + */ +function testStyleProperty() { + // Shorthand + $a.qtip({ style: 'kagain' }); + + // The below calls test all combinations of all sub-properties + $a.qtip({ + style: { + classes: 'anomen', + def: true, + widget: true, + width: '24pt', + height: '24pt', + tip: 'top left' + } + }); + + $a.qtip({ + show: { + classes: false, + width: 24, + height: 24, + tip: false + } + }); + + $a.qtip({ + show: { + classes: false, + width: false, + height: false, + tip: { + corner: 'bottom right', + mimic: 'bottom right', + border: 3, + width: 27, + height: 32, + offset: 1 + } + } + }); + + $a.qtip({ + show: { + tip: { + corner: true, + mimic: true, + border: false + } + } + }); + + $a.qtip({ + show: { + tip: { } + } + }); +} + + +function baseCase() { + $a.qtip(); + $a.qtip({}); + + $a.qtip('horatio'); + $a.qtip('activate'); + $a.qtip('deactivate'); +} + + +/** + * Test with all options specified. Copied from http://qtip2.com/options#global and amended. + */ +function allTogetherNow() { + $a.qtip({ + prerender: false, + id: false, + overwrite: true, + suppress: true, + content: { + title: true, + attr: 'title', + text: false, + button: false + }, + position: { + my: 'top left', + at: 'bottom right', + target: false, + container: false, + viewport: false, + adjust: { + x: 0, y: 0, + mouse: true, + resize: true, + method: 'flip flip' + }, + effect: function(api, pos, viewport) { + $(this).animate(pos, { + duration: 200, + queue: false + }); + } + }, + show: { + target: false, + event: 'mouseenter', + effect: true, + delay: 90, + solo: false, + ready: false, + modal: { + on: false, + effect: true, + blur: true, + escape: true + } + }, + hide: { + target: false, + event: 'mouseleave', + effect: true, + delay: 0, + fixed: false, + inactive: false, + leave: 'window', + distance: false + }, + style: { + classes: '', + widget: false, + width: false, + height: false, + tip: { + corner: true, + mimic: false, + width: 8, + height: 8, + border: true, + offset: 0 + } + }, + events: { + render: null, + move: null, + show: null, + hide: null, + toggle: null, + visible: null, + hidden: null, + focus: null, + blur: null + } + }); +} \ No newline at end of file diff --git a/qtip2/qtip2-tests.ts.tscparams b/qtip2/qtip2-tests.ts.tscparams new file mode 100644 index 000000000..2280b0116 --- /dev/null +++ b/qtip2/qtip2-tests.ts.tscparams @@ -0,0 +1,2 @@ + +--noImplicitAny \ No newline at end of file diff --git a/qtip2/qtip2.d.ts b/qtip2/qtip2.d.ts new file mode 100644 index 000000000..dd84052ce --- /dev/null +++ b/qtip2/qtip2.d.ts @@ -0,0 +1,153 @@ +// Type definitions for qtip2 v2.2.1 +// Project: http://http://qtip2.com/ +// Definitions by: Nathan Pitman +// Definitions: https://github.com/borisyankov/DefinitelyTyped +// Notes: +// - Deprecated functionality is not supported. + + +/// + +declare module QTip2 { + /** + * Content property + */ + type Title = string | JQuery | Func | boolean | JQueryGenericPromise; + type Text = string | JQuery | Func | boolean | JQueryGenericPromise; + + interface Content { + title?: Title | { text: Title }; + text?: Text; + attr?: string; + button?: string | JQuery | boolean; + } + + + /** + * Position property + */ + interface PositionAdjust { + x?: number; + y?: number; + mouse?: boolean; + resize?: boolean; + scroll?: boolean; + method?: string; + } + + type Target = JQuery | number[] | string; + + interface Position { + my?: string | boolean; + at?: string | boolean; + target?: Target | boolean; + container?: JQuery | boolean; + viewport?: JQuery | boolean; + effect?: boolean | ((api: any, pos: any, viewport: any) => any); + adjust?: PositionAdjust; + } + + + /** + * Show property + */ + interface Show { + target?: JQuery | boolean; + event?: string | boolean; + delay?: number; + solo?: JQuery | string | boolean; + ready?: boolean; + effect?: boolean | ((offset: any) => any); + modal?: boolean | Modal; + } + + interface Modal + { + on?: boolean; + blur?: boolean; + escape?: boolean; + stealfocus?: boolean; + effect?: boolean | ((state: any) => any); + } + + + /** + * Hide property + */ + interface Hide { + target?: JQuery | boolean; + event?: string | boolean; + delay?: number; + inactive?: number | boolean; + fixed?: boolean; + // TODO: What is going on here? + leave?: string | boolean; + distance?: number | boolean; + effect?: boolean | ((offset: any) => any); + } + + + /** + * Style property + */ + interface Tip { + corner?: string | boolean; + mimic?: string | boolean; + border?: number | boolean; + width?: number; + height?: number; + offset?: number; + } + + interface Style { + classes?: string | boolean; + def?: boolean; + widget?: boolean; + width: string | number | boolean; + height: string | number | boolean; + tip?: string | boolean | Tip; + } + + + /** + * Events property + */ + type Func = (event: any, api: any) => any; + + interface Events { + render?: Func; + show?: Func; + hide?: Func; + toggle?: Func; + visible?: Func; + hidden?: Func; + move?: Func; + focus?: Func; + blur?: Func; + } + + + /** + * Options + */ + interface QTipOptions { + id?: string | boolean; + prerender?: boolean; + overwrite?: boolean; + suppress?: boolean; + metadata?: any; + content?: Text | Content; + position?: string | Position; + style?: string | Style; + show?: string | boolean | JQuery | Show; + hide?: string | JQuery | Hide; + events?: Events; + } +} + + +interface JQuery { + qtip(): JQuery; + + qtip(options: QTip2.QTipOptions): JQuery; +} From b02be7c1c8c305b7dc71b2a335730f4d44f36795 Mon Sep 17 00:00:00 2001 From: Nathan Pitman Date: Sat, 2 May 2015 20:22:43 +1200 Subject: [PATCH 2/2] Added type bindings for QTip2 API. --- qtip2/qtip2-tests.ts | 536 ++++++++++++++++++++++++++++++++++++++++++- qtip2/qtip2.d.ts | 318 ++++++++++++++++++++++--- 2 files changed, 812 insertions(+), 42 deletions(-) diff --git a/qtip2/qtip2-tests.ts b/qtip2/qtip2-tests.ts index f6e0b8997..ea4e16099 100644 --- a/qtip2/qtip2-tests.ts +++ b/qtip2/qtip2-tests.ts @@ -77,11 +77,11 @@ function testContentText() { // Shorthand function $a.qtip({ - content: function(event, api) { } + content: function(event: Event, api: QTip2.Api) { } }); $a.qtip({ - content: function(event) { return 2; } + content: function(event: Event) { return 2; } }); $a.qtip({ @@ -90,11 +90,11 @@ function testContentText() { // Regular function $a.qtip({ - content: { text: function(event, api) { } } + content: { text: function(event: Event, api: QTip2.Api) {} } }); $a.qtip({ - content: { text: function(event) { return 2; } } + content: { text: function(event: Event) { return 2; } } }); $a.qtip({ @@ -161,11 +161,11 @@ function testContentTitle() { // Shorthand function $a.qtip({ - content: { title: function(event, api) {} } + content: { title: function(event: Event, api: QTip2.Api) {} } }); $a.qtip({ - content: { title: function(event) { return 2; } } + content: { title: function(event: Event) { return 2; } } }); $a.qtip({ @@ -174,11 +174,11 @@ function testContentTitle() { // Regular function $a.qtip({ - content: { title: { text: function(event, api) { } } } + content: { title: { text: function(event: Event, api: QTip2.Api) { } } } }); $a.qtip({ - content: { title: { text: function(event) { return 2; } } } + content: { title: { text: function(event: Event) { return 2; } } } }); $a.qtip({ @@ -240,7 +240,7 @@ function testPositionProperty() { at: 'bottom right', container: $('.edwin-odesseiron'), viewport: $('.dynaheir'), - effect: function(api, pos, viewport) { }, + effect: function(api: QTip2.Api, pos: any, viewport: any) { }, adjust: { x: 2 } } }); @@ -252,7 +252,7 @@ function testPositionProperty() { at: true, container: false, viewport: true, - effect: function(api, pos) { return 2; }, + effect: function(api: QTip2.Api, pos: any) { return 2; }, adjust: { y: 2 } } }); @@ -260,7 +260,7 @@ function testPositionProperty() { $a.qtip({ position: { target: 'mouse', - effect: function(api) {}, + effect: function(api: QTip2.Api) {}, adjust: { x: 2, y: 2 } } }); @@ -534,4 +534,518 @@ function allTogetherNow() { blur: null } }); +} + + +/** + * http://qtip2.com/api#api-methods.get + */ +function testApiGetViaObject() { + $a.qtip({}); + + var api = $a.qtip('api'); + + api.get('id'); + api.get('prerender'); + api.get('overwrite'); + api.get('suppress'); + api.get('metadata'); + + api.get('content'); + api.get('content.text'); + api.get('content.attr'); + api.get('content.title'); + api.get('content.button'); + + api.get('position'); + api.get('position.my'); + api.get('position.at'); + api.get('position.target'); + api.get('position.container'); + api.get('position.viewport'); + any)> + api.get('position.effect'); + api.get('position.adjust'); + + api.get('show'); + api.get('show.target'); + api.get('show.event'); + api.get('show.delay'); + api.get('show.solo'); + api.get('show.ready'); + any)> api.get('show.effect'); + api.get('show.modal'); + + api.get('hide'); + api.get('hide.target'); + api.get('hide.event'); + api.get('hide.delay'); + api.get('hide.leave'); + api.get('hide.distance'); + any)> api.get('hide.effect'); + + api.get('style'); + api.get('style.classes'); + api.get('style.def'); + api.get('style.widget'); + api.get('style.width'); + api.get('style.height'); + api.get('style.tip'); + + api.get('events'); + api.get('events.render'); + api.get('events.show'); + api.get('events.hide'); + api.get('events.toggle'); + api.get('events.visible'); + api.get('events.hidde'); + api.get('events.move'); + api.get('events.focus'); + api.get('events.blur'); +} + + +/** + * http://qtip2.com/api#api.updating + */ +function testApiGetViaString() { + $a.qtip({}); + + $a.qtip('option', 'id'); + $a.qtip('option', 'prerender'); + $a.qtip('option', 'overwrite'); + $a.qtip('option', 'suppress'); + $a.qtip('option', 'metadata'); + + $a.qtip('option', 'content'); + $a.qtip('option', 'content.text'); + $a.qtip('option', 'content.attr'); + $a.qtip('option', 'content.title'); + $a.qtip('option', 'content.button'); + + $a.qtip('option', 'position'); + $a.qtip('option', 'position.my'); + $a.qtip('option', 'position.at'); + $a.qtip('option', 'position.target'); + $a.qtip('option', 'position.container'); + $a.qtip('option', 'position.viewport'); + any)> + $a.qtip('option', 'position.effect'); + $a.qtip('option', 'position.adjust'); + + $a.qtip('option', 'show'); + $a.qtip('option', 'show.target'); + $a.qtip('option', 'show.event'); + $a.qtip('option', 'show.delay'); + $a.qtip('option', 'show.solo'); + $a.qtip('option', 'show.ready'); + any)> $a.qtip('option', 'show.effect'); + $a.qtip('option', 'show.modal'); + + $a.qtip('option', 'hide'); + $a.qtip('option', 'hide.target'); + $a.qtip('option', 'hide.event'); + $a.qtip('option', 'hide.delay'); + $a.qtip('option', 'hide.leave'); + $a.qtip('option', 'hide.distance'); + any)> $a.qtip('option', 'hide.effect'); + + $a.qtip('option', 'style'); + $a.qtip('option', 'style.classes'); + $a.qtip('option', 'style.def'); + $a.qtip('option', 'style.widget'); + $a.qtip('option', 'style.width'); + $a.qtip('option', 'style.height'); + $a.qtip('option', 'style.tip'); + + $a.qtip('option', 'events'); + $a.qtip('option', 'events.render'); + $a.qtip('option', 'events.show'); + $a.qtip('option', 'events.hide'); + $a.qtip('option', 'events.toggle'); + $a.qtip('option', 'events.visible'); + $a.qtip('option', 'events.hidde'); + $a.qtip('option', 'events.move'); + $a.qtip('option', 'events.focus'); + $a.qtip('option', 'events.blur'); +} + + +/** + * http://qtip2.com/api#api-methods.set + */ +function testApiSetViaObject() { + + // TODO + $a.qtip({}); + + var api = $a.qtip('api'); + + api.set({ + prerender: false, + id: false, + overwrite: true, + suppress: true, + content: { + title: true, + attr: 'title', + text: false, + button: false + }, + position: { + my: 'top left', + at: 'bottom right', + target: false, + container: false, + viewport: false, + adjust: { + x: 0, y: 0, + mouse: true, + resize: true, + method: 'flip flip' + }, + effect: function(api, pos, viewport) { + $(this).animate(pos, { + duration: 200, + queue: false + }); + } + }, + show: { + target: false, + event: 'mouseenter', + effect: true, + delay: 90, + solo: false, + ready: false, + modal: { + on: false, + effect: true, + blur: true, + escape: true + } + }, + hide: { + target: false, + event: 'mouseleave', + effect: true, + delay: 0, + fixed: false, + inactive: false, + leave: 'window', + distance: false + }, + style: { + classes: '', + widget: false, + width: false, + height: false, + tip: { + corner: true, + mimic: false, + width: 8, + height: 8, + border: true, + offset: 0 + } + }, + events: { + render: null, + move: null, + show: null, + hide: null, + toggle: null, + visible: null, + hidden: null, + focus: null, + blur: null + } + }); + + api.set('id', null); + api.set('prerender', null); + api.set('overwrite', null); + api.set('suppress', null); + api.set('metadata', null); + + api.set('content', null); + api.set('content.title', null); + api.set('content.text', null); + api.set('content.attr', null); + api.set('content.button', null); + + api.set('position', null); + api.set('position.my', null); + api.set('position.at', null); + api.set('position.target', null); + api.set('position.container', null); + api.set('position.viewport', null); + api.set('position.effect', void)> null); + api.set('position.adjust', null); + + api.set('show', null); + api.set('show.target', null); + api.set('show.event', null); + api.set('show.delay', null); + api.set('show.solo', null); + api.set('show.ready', null); + api.set('show.effect', void)> null); + api.set('show.modal', null); + + api.set('hide', null); + api.set('hide.target', null); + api.set('hide.event', null); + api.set('hide.inactive', null); + api.set('hide.fixed', null); + api.set('hide.leave', null); + api.set('hide.distance', null); + api.set('hide.effect', void)> null); + + api.set('style', null); + api.set('style.classes', null); + api.set('style.def', null); + api.set('style.widget', null); + api.set('style.width', null); + api.set('style.height', null); + api.set('style.tip', null); + + api.set('events', null); + api.set('events.render', null); + api.set('events.show', null); + api.set('events.hide', null); + api.set('events.toggle', null); + api.set('events.visible', null); + api.set('events.hidden', null); + api.set('events.move', null); + api.set('events.focus', null); + api.set('events.blur', null); +} + + +/** + * http://qtip2.com/api#api.updating + */ +function testApiSetViaString() { + $a.qtip({}); + + $a.qtip('option', { + prerender: false, + id: false, + overwrite: true, + suppress: true, + content: { + title: true, + attr: 'title', + text: false, + button: false + }, + position: { + my: 'top left', + at: 'bottom right', + target: false, + container: false, + viewport: false, + adjust: { + x: 0, y: 0, + mouse: true, + resize: true, + method: 'flip flip' + }, + effect: function(api: QTip2.Api, pos: any, viewport: any) { + $(this).animate(pos, { + duration: 200, + queue: false + }); + } + }, + show: { + target: false, + event: 'mouseenter', + effect: true, + delay: 90, + solo: false, + ready: false, + modal: { + on: false, + effect: true, + blur: true, + escape: true + } + }, + hide: { + target: false, + event: 'mouseleave', + effect: true, + delay: 0, + fixed: false, + inactive: false, + leave: 'window', + distance: false + }, + style: { + classes: '', + widget: false, + width: false, + height: false, + tip: { + corner: true, + mimic: false, + width: 8, + height: 8, + border: true, + offset: 0 + } + }, + events: { + render: null, + move: null, + show: null, + hide: null, + toggle: null, + visible: null, + hidden: null, + focus: null, + blur: null + } + }); + + $a.qtip('option', 'id', null); + $a.qtip('option', 'prerender', null); + $a.qtip('option', 'overwrite', null); + $a.qtip('option', 'suppress', null); + $a.qtip('option', 'metadata', null); + + $a.qtip('option', 'content', null); + $a.qtip('option', 'content.title', null); + $a.qtip('option', 'content.text', null); + $a.qtip('option', 'content.attr', null); + $a.qtip('option', 'content.button', null); + + $a.qtip('option', 'position', null); + $a.qtip('option', 'position.my', null); + $a.qtip('option', 'position.at', null); + $a.qtip('option', 'position.target', null); + $a.qtip('option', 'position.container', null); + $a.qtip('option', 'position.viewport', null); + $a.qtip('option', 'position.effect', void)> null); + $a.qtip('option', 'position.adjust', null); + + $a.qtip('option', 'show', null); + $a.qtip('option', 'show.target', null); + $a.qtip('option', 'show.event', null); + $a.qtip('option', 'show.delay', null); + $a.qtip('option', 'show.solo', null); + $a.qtip('option', 'show.ready', null); + $a.qtip('option', 'show.effect', void)> null); + $a.qtip('option', 'show.modal', null); + + $a.qtip('option', 'hide', null); + $a.qtip('option', 'hide.target', null); + $a.qtip('option', 'hide.event', null); + $a.qtip('option', 'hide.inactive', null); + $a.qtip('option', 'hide.fixed', null); + $a.qtip('option', 'hide.leave', null); + $a.qtip('option', 'hide.distance', null); + $a.qtip('option', 'hide.effect', void)> null); + + $a.qtip('option', 'style', null); + $a.qtip('option', 'style.classes', null); + $a.qtip('option', 'style.def', null); + $a.qtip('option', 'style.widget', null); + $a.qtip('option', 'style.width', null); + $a.qtip('option', 'style.height', null); + $a.qtip('option', 'style.tip', null); + + $a.qtip('option', 'events', null); + $a.qtip('option', 'events.render', null); + $a.qtip('option', 'events.show', null); + $a.qtip('option', 'events.hide', null); + $a.qtip('option', 'events.toggle', null); + $a.qtip('option', 'events.visible', null); + $a.qtip('option', 'events.hidden', null); + $a.qtip('option', 'events.move', null); + $a.qtip('option', 'events.focus', null); + $a.qtip('option', 'events.blur', null); +} + + +/** + * http://qtip2.com/api#api-methods + */ +function testApiViaObject() { + $a.qtip({}); + + var api = $a.qtip('api'); + + api.toggle(); + api.toggle(true); + api.toggle(false, null); + + api.show(); + api.show( null); + + api.hide(); + api.hide( null); + + api.disable(); + api.disable(true); + + api.enable(); + + api.reposition(); + api.reposition( null); + api.reposition( null, true); + + api.focus(); + api.focus( null); + + api.blur(); + api.blur( null); + + api.destroy(); + api.destroy(true); +} + + +/** + * http://qtip2.com/api#api.updating + */ +function testApiMethodsViaString() { + $a.qtip('toggle'); + $a.qtip('toggle', true); + $a.qtip('toggle', true, null); + + $a.qtip('show'); + $a.qtip('show', null); + + $a.qtip('hide'); + $a.qtip('hide', null); + + $a.qtip('disable'); + $a.qtip('disable', true); + + $a.qtip('enable'); + + $a.qtip('reposition'); + $a.qtip('reposition', null); + $a.qtip('reposition', null, true); + + $a.qtip('focus'); + $a.qtip('focus', null); + + $a.qtip('blur'); + $a.qtip('blur', null); + + $a.qtip('destroy'); + $a.qtip('destroy', true); +} + + +/** + * http://qtip2.com/options#global + * + * $.fn is of type any, therefore we can't (and don't need to) add type bindings for QTip2 globals under it. + */ +function testGlobals() { + $.fn.qtip.defaults.prerender = true; } \ No newline at end of file diff --git a/qtip2/qtip2.d.ts b/qtip2/qtip2.d.ts index dd84052ce..1691715b6 100644 --- a/qtip2/qtip2.d.ts +++ b/qtip2/qtip2.d.ts @@ -1,19 +1,24 @@ // Type definitions for qtip2 v2.2.1 -// Project: http://http://qtip2.com/ +// Project: http://qtip2.com/ // Definitions by: Nathan Pitman // Definitions: https://github.com/borisyankov/DefinitelyTyped // Notes: +// - Type bindings for the QTip2 API and options are included. Bindings for global settings aren't required. // - Deprecated functionality is not supported. - +// - Where possible, things are strongly typed and 'any' is avoided. +// - QTip2 includes a lot of shorthand notation for various expressions. These bindings support it all. /// declare module QTip2 { + type EventApiFunc = (event: Event, api: Api) => void; + + /** * Content property */ - type Title = string | JQuery | Func | boolean | JQueryGenericPromise; - type Text = string | JQuery | Func | boolean | JQueryGenericPromise; + type Title = string | JQuery | EventApiFunc | boolean | JQueryGenericPromise; + type Text = string | JQuery | EventApiFunc | boolean | JQueryGenericPromise; interface Content { title?: Title | { text: Title }; @@ -43,7 +48,7 @@ declare module QTip2 { target?: Target | boolean; container?: JQuery | boolean; viewport?: JQuery | boolean; - effect?: boolean | ((api: any, pos: any, viewport: any) => any); + effect?: boolean | ((api: Api, pos: any, viewport: any) => void); adjust?: PositionAdjust; } @@ -57,7 +62,7 @@ declare module QTip2 { delay?: number; solo?: JQuery | string | boolean; ready?: boolean; - effect?: boolean | ((offset: any) => any); + effect?: boolean | ((offset: any) => void); modal?: boolean | Modal; } @@ -67,7 +72,7 @@ declare module QTip2 { blur?: boolean; escape?: boolean; stealfocus?: boolean; - effect?: boolean | ((state: any) => any); + effect?: boolean | ((state: any) => void); } @@ -80,25 +85,15 @@ declare module QTip2 { delay?: number; inactive?: number | boolean; fixed?: boolean; - // TODO: What is going on here? leave?: string | boolean; distance?: number | boolean; - effect?: boolean | ((offset: any) => any); + effect?: boolean | ((offset: any) => void); } /** * Style property */ - interface Tip { - corner?: string | boolean; - mimic?: string | boolean; - border?: number | boolean; - width?: number; - height?: number; - offset?: number; - } - interface Style { classes?: string | boolean; def?: boolean; @@ -108,22 +103,29 @@ declare module QTip2 { tip?: string | boolean | Tip; } + interface Tip { + corner?: string | boolean; + mimic?: string | boolean; + border?: number | boolean; + width?: number; + height?: number; + offset?: number; + } + /** * Events property */ - type Func = (event: any, api: any) => any; - interface Events { - render?: Func; - show?: Func; - hide?: Func; - toggle?: Func; - visible?: Func; - hidden?: Func; - move?: Func; - focus?: Func; - blur?: Func; + render?: EventApiFunc; + show?: EventApiFunc; + hide?: EventApiFunc; + toggle?: EventApiFunc; + visible?: EventApiFunc; + hidden?: EventApiFunc; + move?: EventApiFunc; + focus?: EventApiFunc; + blur?: EventApiFunc; } @@ -143,11 +145,265 @@ declare module QTip2 { hide?: string | JQuery | Hide; events?: Events; } + + + /** + * API + */ + interface Api { + get(propertyName: 'id'): string | boolean; + get(propertyName: 'prerender'): boolean; + get(propertyName: 'overwrite'): boolean; + get(propertyName: 'suppress'): boolean; + get(propertyName: 'metadata'): any; + get(propertyName: 'content'): Content; + get(propertyName: 'content.text'): Text; + get(propertyName: 'content.attr'): string; + get(propertyName: 'content.title'): Title; + get(propertyName: 'content.button'): string | JQuery | boolean; + get(propertyName: 'position'): Position; + get(propertyName: 'position.my'): string | boolean; + get(propertyName: 'position.at'): string | boolean; + get(propertyName: 'position.target'): Target | boolean; + get(propertyName: 'position.container'): JQuery | boolean; + get(propertyName: 'position.viewport'): JQuery | boolean; + get(propertyName: 'position.effect'): boolean | ((api: any, pos: any, viewport: any) => void); + get(propertyName: 'position.adjust'): PositionAdjust; + get(propertyName: 'show'): Show; + get(propertyName: 'show.target'): JQuery | boolean; + get(propertyName: 'show.event'): string | boolean; + get(propertyName: 'show.delay'): number; + get(propertyName: 'show.solo'): JQuery | string | boolean; + get(propertyName: 'show.ready'): boolean; + get(propertyName: 'show.effect'): boolean | ((offset: any) => void); + get(propertyName: 'show.modal'): boolean | Modal; + get(propertyName: 'hide'): Hide; + get(propertyName: 'hide.target'): JQuery | boolean; + get(propertyName: 'hide.event'): string | boolean; + get(propertyName: 'hide.delay'): number; + get(propertyName: 'hide.leave'): string | boolean; + get(propertyName: 'hide.distance'): number | boolean; + get(propertyName: 'hide.effect'): boolean | ((offset: any) => void); + get(propertyName: 'style'): Style; + get(propertyName: 'style.classes'): string | boolean; + get(propertyName: 'style.def'): boolean; + get(propertyName: 'style.widget'): boolean; + get(propertyName: 'style.width'): string | number | boolean; + get(propertyName: 'style.height'): string | number | boolean; + get(propertyName: 'style.tip'): string | boolean | Tip; + get(propertyName: 'events'): Events; + get(propertyName: 'events.render'): EventApiFunc; + get(propertyName: 'events.show'): EventApiFunc; + get(propertyName: 'events.hide'): EventApiFunc; + get(propertyName: 'events.toggle'): EventApiFunc; + get(propertyName: 'events.visible'): EventApiFunc; + get(propertyName: 'events.hidden'): EventApiFunc; + get(propertyName: 'events.move'): EventApiFunc; + get(propertyName: 'events.focus'): EventApiFunc; + get(propertyName: 'events.blur'): EventApiFunc; + get(propertyName: string): any; + + set(properties: QTipOptions): Api; + set(propertyName: 'id', value: string | boolean): Api; + set(propertyName: 'prerender', value: boolean): Api; + set(propertyName: 'overwrite', value: boolean): Api; + set(propertyName: 'suppress', value: boolean): Api; + set(propertyName: 'metadata', value: any): Api; + set(propertyName: 'content', value: Text | Content): Api; + set(propertyName: 'content.title', value: Title | { text: Title }): Api; + set(propertyName: 'content.text', value: Text): Api; + set(propertyName: 'content.attr', value: string): Api; + set(propertyName: 'content.button', value: string | JQuery | boolean): Api; + set(propertyName: 'position', value: Position): Api; + set(propertyName: 'position.my', value: string | boolean): Api; + set(propertyName: 'position.at', value: string | boolean): Api; + set(propertyName: 'position.target', value: Target | boolean): Api; + set(propertyName: 'position.container', value: JQuery | boolean): Api; + set(propertyName: 'position.viewport', value: JQuery | boolean): Api; + set(propertyName: 'position.effect', value: boolean | ((api: Api, pos: any, viewport: any) => void) ): Api; + set(propertyName: 'position.adjust', value: PositionAdjust): Api; + set(propertyName: 'show', value: Show): Api; + set(propertyName: 'show.target', value: JQuery | boolean): Api; + set(propertyName: 'show.event', value: string | boolean): Api; + set(propertyName: 'show.delay', value: number): Api; + set(propertyName: 'show.solo', value: JQuery | string | boolean): Api; + set(propertyName: 'show.ready', value: boolean): Api; + set(propertyName: 'show.effect', value: boolean | ((offset: any) => void)): Api; + set(propertyName: 'show.modal', value: boolean | Modal): Api; + set(propertyName: 'hide', value: Hide): Api; + set(propertyName: 'hide.target', value: JQuery | boolean): Api; + set(propertyName: 'hide.event', value: string | boolean): Api; + set(propertyName: 'hide.inactive', value: number | boolean): Api; + set(propertyName: 'hide.fixed', value: boolean): Api; + set(propertyName: 'hide.leave', value: string | boolean): Api; + set(propertyName: 'hide.distance', value: number | boolean): Api; + set(propertyName: 'hide.effect', value: boolean | ((offset: any) => void)): Api + set(propertyName: 'style', value: Style): Api; + set(propertyName: 'style.classes', value: string | boolean): Api; + set(propertyName: 'style.def', value: boolean): Api; + set(propertyName: 'style.widget', value: boolean): Api; + set(propertyName: 'style.width', value: string | number | boolean): Api; + set(propertyName: 'style.height', value: string | number | boolean): Api; + set(propertyName: 'style.tip', value: string | boolean | Tip): Api; + set(propertyName: 'events', value: Events): Api; + set(propertyName: 'events.render', value: EventApiFunc): Api; + set(propertyName: 'events.show', value: EventApiFunc): Api; + set(propertyName: 'events.hide', value: EventApiFunc): Api; + set(propertyName: 'events.toggle', value: EventApiFunc): Api; + set(propertyName: 'events.visible', value: EventApiFunc): Api; + set(propertyName: 'events.hidden', value: EventApiFunc): Api; + set(propertyName: 'events.move', value: EventApiFunc): Api; + set(propertyName: 'events.focus', value: EventApiFunc): Api; + set(propertyName: 'events.blur', value: EventApiFunc): Api; + set(propertyName: string, value: any): Api; + + toggle(state?: boolean, event?: Event): Api; + + show(event?: Event): Api; + + hide(event?: Event): Api; + + disable(state?: boolean): Api; + + enable(): Api; + + reposition(event?: Event, effect?: boolean): Api; + + focus(event?: Event): Api; + + blur(event?: Event): Api; + + destroy(immediate?: boolean): Api; + } } interface JQuery { - qtip(): JQuery; + qtip(options?: QTip2.QTipOptions): JQuery; - qtip(options: QTip2.QTipOptions): JQuery; + qtip(methodName: 'api'): QTip2.Api; + + qtip(methodName: 'option', propertyName: 'id'): string | boolean; + qtip(methodName: 'option', propertyName: 'prerender'): boolean; + qtip(methodName: 'option', propertyName: 'overwrite'): boolean; + qtip(methodName: 'option', propertyName: 'suppress'): boolean; + qtip(methodName: 'option', propertyName: 'metadata'): any; + qtip(methodName: 'option', propertyName: 'content'): QTip2.Content; + qtip(methodName: 'option', propertyName: 'content.text'): QTip2.Text; + qtip(methodName: 'option', propertyName: 'content.attr'): string; + qtip(methodName: 'option', propertyName: 'content.title'): QTip2.Title; + qtip(methodName: 'option', propertyName: 'content.button'): string | JQuery | boolean; + qtip(methodName: 'option', propertyName: 'position'): QTip2.Position; + qtip(methodName: 'option', propertyName: 'position.my'): string | boolean; + qtip(methodName: 'option', propertyName: 'position.at'): string | boolean; + qtip(methodName: 'option', propertyName: 'position.target'): QTip2.Target | boolean; + qtip(methodName: 'option', propertyName: 'position.container'): JQuery | boolean; + qtip(methodName: 'option', propertyName: 'position.viewport'): JQuery | boolean; + qtip(methodName: 'option', propertyName: 'position.effect'): boolean | ((api: QTip2.Api, pos: any, viewport: any) => void); + qtip(methodName: 'option', propertyName: 'position.adjust'): QTip2.PositionAdjust; + qtip(methodName: 'option', propertyName: 'show'): QTip2.Show; + qtip(methodName: 'option', propertyName: 'show.target'): JQuery | boolean; + qtip(methodName: 'option', propertyName: 'show.event'): string | boolean; + qtip(methodName: 'option', propertyName: 'show.delay'): number; + qtip(methodName: 'option', propertyName: 'show.solo'): JQuery | string | boolean; + qtip(methodName: 'option', propertyName: 'show.ready'): boolean; + qtip(methodName: 'option', propertyName: 'show.effect'): boolean | ((offset: any) => void); + qtip(methodName: 'option', propertyName: 'show.modal'): boolean | QTip2.Modal; + qtip(methodName: 'option', propertyName: 'hide'): QTip2.Hide; + qtip(methodName: 'option', propertyName: 'hide.target'): JQuery | boolean; + qtip(methodName: 'option', propertyName: 'hide.event'): string | boolean; + qtip(methodName: 'option', propertyName: 'hide.delay'): number; + qtip(methodName: 'option', propertyName: 'hide.leave'): string | boolean; + qtip(methodName: 'option', propertyName: 'hide.distance'): number | boolean; + qtip(methodName: 'option', propertyName: 'hide.effect'): boolean | ((offset: any) => void); + qtip(methodName: 'option', propertyName: 'style'): QTip2.Style; + qtip(methodName: 'option', propertyName: 'style.classes'): string | boolean; + qtip(methodName: 'option', propertyName: 'style.def'): boolean; + qtip(methodName: 'option', propertyName: 'style.widget'): boolean; + qtip(methodName: 'option', propertyName: 'style.width'): string | number | boolean; + qtip(methodName: 'option', propertyName: 'style.height'): string | number | boolean; + qtip(methodName: 'option', propertyName: 'style.tip'): string | boolean | QTip2.Tip; + qtip(methodName: 'option', propertyName: 'events'): QTip2.Events; + qtip(methodName: 'option', propertyName: 'events.render'): QTip2.EventApiFunc; + qtip(methodName: 'option', propertyName: 'events.show'): QTip2.EventApiFunc; + qtip(methodName: 'option', propertyName: 'events.hide'): QTip2.EventApiFunc; + qtip(methodName: 'option', propertyName: 'events.toggle'): QTip2.EventApiFunc; + qtip(methodName: 'option', propertyName: 'events.visible'): QTip2.EventApiFunc; + qtip(methodName: 'option', propertyName: 'events.hidden'): QTip2.EventApiFunc; + qtip(methodName: 'option', propertyName: 'events.move'): QTip2.EventApiFunc; + qtip(methodName: 'option', propertyName: 'events.focus'): QTip2.EventApiFunc; + qtip(methodName: 'option', propertyName: 'events.blur'): QTip2.EventApiFunc; + + qtip(methodName: 'option', properties: QTip2.QTipOptions): QTip2.Api; + qtip(methodName: 'option', propertyName: 'id', value: string | boolean): QTip2.Api; + qtip(methodName: 'option', propertyName: 'prerender', value: boolean): QTip2.Api; + qtip(methodName: 'option', propertyName: 'overwrite', value: boolean): QTip2.Api; + qtip(methodName: 'option', propertyName: 'suppress', value: boolean): QTip2.Api; + qtip(methodName: 'option', propertyName: 'metadata', value: any): QTip2.Api; + qtip(methodName: 'option', propertyName: 'content', value: QTip2.Text | QTip2.Content): QTip2.Api; + qtip(methodName: 'option', propertyName: 'content.title', value: QTip2.Title | { text: QTip2.Title }): QTip2.Api; + qtip(methodName: 'option', propertyName: 'content.text', value: QTip2.Text): QTip2.Api; + qtip(methodName: 'option', propertyName: 'content.attr', value: string): QTip2.Api; + qtip(methodName: 'option', propertyName: 'content.button', value: string | JQuery | boolean): QTip2.Api; + qtip(methodName: 'option', propertyName: 'position', value: QTip2.Position): QTip2.Api; + qtip(methodName: 'option', propertyName: 'position.my', value: string | boolean): QTip2.Api; + qtip(methodName: 'option', propertyName: 'position.at', value: string | boolean): QTip2.Api; + qtip(methodName: 'option', propertyName: 'position.target', value: QTip2.Target | boolean): QTip2.Api; + qtip(methodName: 'option', propertyName: 'position.container', value: JQuery | boolean): QTip2.Api; + qtip(methodName: 'option', propertyName: 'position.viewport', value: JQuery | boolean): QTip2.Api; + qtip(methodName: 'option', propertyName: 'position.effect', value: boolean | ((api: QTip2.Api, pos: any, viewport: any) => void) ): QTip2.Api; + qtip(methodName: 'option', propertyName: 'position.adjust', value: QTip2.PositionAdjust): QTip2.Api; + qtip(methodName: 'option', propertyName: 'show', value: QTip2.Show): QTip2.Api; + qtip(methodName: 'option', propertyName: 'show.target', value: JQuery | boolean): QTip2.Api; + qtip(methodName: 'option', propertyName: 'show.event', value: string | boolean): QTip2.Api; + qtip(methodName: 'option', propertyName: 'show.delay', value: number): QTip2.Api; + qtip(methodName: 'option', propertyName: 'show.solo', value: JQuery | string | boolean): QTip2.Api; + qtip(methodName: 'option', propertyName: 'show.ready', value: boolean): QTip2.Api; + qtip(methodName: 'option', propertyName: 'show.effect', value: boolean | ((offset: any) => void)): QTip2.Api; + qtip(methodName: 'option', propertyName: 'show.modal', value: boolean | QTip2.Modal): QTip2.Api; + qtip(methodName: 'option', propertyName: 'hide', value: QTip2.Hide): QTip2.Api; + qtip(methodName: 'option', propertyName: 'hide.target', value: JQuery | boolean): QTip2.Api; + qtip(methodName: 'option', propertyName: 'hide.event', value: string | boolean): QTip2.Api; + qtip(methodName: 'option', propertyName: 'hide.inactive', value: number | boolean): QTip2.Api; + qtip(methodName: 'option', propertyName: 'hide.fixed', value: boolean): QTip2.Api; + qtip(methodName: 'option', propertyName: 'hide.leave', value: string | boolean): QTip2.Api; + qtip(methodName: 'option', propertyName: 'hide.distance', value: number | boolean): QTip2.Api; + qtip(methodName: 'option', propertyName: 'hide.effect', value: boolean | ((offset: any) => void)): QTip2.Api + qtip(methodName: 'option', propertyName: 'style', value: QTip2.Style): QTip2.Api; + qtip(methodName: 'option', propertyName: 'style.classes', value: string | boolean): QTip2.Api; + qtip(methodName: 'option', propertyName: 'style.def', value: boolean): QTip2.Api; + qtip(methodName: 'option', propertyName: 'style.widget', value: boolean): QTip2.Api; + qtip(methodName: 'option', propertyName: 'style.width', value: string | number | boolean): QTip2.Api; + qtip(methodName: 'option', propertyName: 'style.height', value: string | number | boolean): QTip2.Api; + qtip(methodName: 'option', propertyName: 'style.tip', value: string | boolean | QTip2.Tip): QTip2.Api; + qtip(methodName: 'option', propertyName: 'events', value: QTip2.Events): QTip2.Api; + qtip(methodName: 'option', propertyName: 'events.render', value: QTip2.EventApiFunc): QTip2.Api; + qtip(methodName: 'option', propertyName: 'events.show', value: QTip2.EventApiFunc): QTip2.Api; + qtip(methodName: 'option', propertyName: 'events.hide', value: QTip2.EventApiFunc): QTip2.Api; + qtip(methodName: 'option', propertyName: 'events.toggle', value: QTip2.EventApiFunc): QTip2.Api; + qtip(methodName: 'option', propertyName: 'events.visible', value: QTip2.EventApiFunc): QTip2.Api; + qtip(methodName: 'option', propertyName: 'events.hidden', value: QTip2.EventApiFunc): QTip2.Api; + qtip(methodName: 'option', propertyName: 'events.move', value: QTip2.EventApiFunc): QTip2.Api; + qtip(methodName: 'option', propertyName: 'events.focus', value: QTip2.EventApiFunc): QTip2.Api; + qtip(methodName: 'option', propertyName: 'events.blur', value: QTip2.EventApiFunc): QTip2.Api; + + qtip(methodName: 'toggle', state?: boolean, event?: Event): JQuery; + + qtip(methodName: 'show', event?: Event): JQuery; + + qtip(methodName: 'hide', event?: Event): JQuery; + + qtip(methodName: 'disable', state?: boolean): JQuery; + + qtip(methodName: 'enable'): JQuery + + qtip(methodName: 'reposition', event?: Event, effect?: boolean): JQuery; + + qtip(methodName: 'focus', event?: Event): JQuery; + + qtip(methodName: 'blur', event?: Event): JQuery; + + qtip(methodName: 'destroy', immediate?: boolean): JQuery; + + qtip(methodName: string, p1?: any, p2?: any, p3?: any): any; }