mirror of
https://github.com/zhigang1992/DefinitelyTyped.git
synced 2026-06-03 06:27:46 +08:00
Add definitions for jquery.tools (overlay widget only)
This commit is contained in:
Joe Skeen
159
jquery.tools/index.d.ts
vendored
Normal file
159
jquery.tools/index.d.ts
vendored
Normal file
@@ -0,0 +1,159 @@
|
||||
// Type definitions for jQuery TOOLS 1.2
|
||||
// Project: https://github.com/jquerytools/jquerytools
|
||||
// Definitions by: Joe Skeen <https://github.com/joeskeen/>
|
||||
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
|
||||
|
||||
|
||||
/// <reference types="jquery"/>
|
||||
|
||||
declare interface JQuery {
|
||||
overlay(opts?: JQueryTools.overlay.OverlayOptions): JQuery;
|
||||
overlay<T extends JQueryTools.overlay.Overlay>(opts?: JQueryTools.overlay.OverlayOptions): T;
|
||||
data(key: 'overlay'): JQueryTools.overlay.Overlay;
|
||||
}
|
||||
|
||||
declare interface JQueryStatic {
|
||||
tools: JQueryTools.ToolsStatic;
|
||||
}
|
||||
|
||||
/** jQuery Tools (http://jquerytools.github.io/documentation/overlay/index.html) */
|
||||
declare namespace JQueryTools {
|
||||
interface ToolsStatic {
|
||||
overlay: overlay.OverlayStatic;
|
||||
}
|
||||
|
||||
namespace overlay {
|
||||
interface OverlayStatic {
|
||||
addEffect(effectName: string,
|
||||
effectFn: (this: Overlay, position: CssOptions, done: Function) => void,
|
||||
closeFn: (this: Overlay, done: Function) => void): void;
|
||||
}
|
||||
|
||||
type CssOptions = { [key: string]: any; };
|
||||
|
||||
interface OverlayOptions {
|
||||
/**
|
||||
* A jQuery selector for the closing elements inside the overlay. These
|
||||
* can be any elements such as links, buttons or images. If this is not
|
||||
* supplied, a close element is auto-generated. Read more about this in
|
||||
* defining close actions.
|
||||
*/
|
||||
close?: JQuery;
|
||||
/**
|
||||
* By default, overlays are closed when the mouse is clicked outside the
|
||||
* overlay area. Setting this property to false suppresses this behaviour
|
||||
* which is suitable for modal dialogs.
|
||||
* @default true
|
||||
*/
|
||||
closeOnClick?: boolean;
|
||||
/**
|
||||
* By default, overlays are closed when the ESC keyboard key is pressed.
|
||||
* Setting this property to false suppresses this behaviour.
|
||||
* @default true
|
||||
*/
|
||||
closeOnEsc?: boolean;
|
||||
/** The speed to close the overlay, in milliseconds */
|
||||
closeSpeed?: number;
|
||||
/**
|
||||
* The effect to be used when an overlay is opened and closed. This can
|
||||
* dramatically change the behaviour of the overlay. By default this tool
|
||||
* uses an effect called "default" which is a simple show/hide effect.
|
||||
* @default 'default'
|
||||
*/
|
||||
effect?: 'default' | string;
|
||||
/**
|
||||
* since 1.2.0. whether overlay stays in the same position while the screen
|
||||
* is scrolled. This is the default behaviour for all browsers except IE6
|
||||
* and below. IE6 does not support fixed positioning. If this property is
|
||||
* set to false then the overlay is positioned in relationship to the document
|
||||
* so that when the screen is scrolled then the overlay moves along with the document.
|
||||
* @default true
|
||||
*/
|
||||
fixed?: boolean;
|
||||
/**
|
||||
* Previously known as expose. Overlay is very often used together with the
|
||||
* Mask Tool. Because of this, the support for this feature has been built
|
||||
* inside the tool. This option accepts the mask configuration. This is either
|
||||
* a simple string specifying the background color of the mask or a more complex
|
||||
* object literal specifying more configuration variables. See an example of an
|
||||
* overlay together with mask. By default masking is disabled.
|
||||
*/
|
||||
mask?: string | MaskOptions;
|
||||
/**
|
||||
* Specifies how far from the left-hand edge of the screen the overlay should be
|
||||
* placed. By default the overlay is horizontally centered with the value "center"
|
||||
* but you can also supply a numerical value specifying a distance in pixels.
|
||||
* @default 'center'
|
||||
*/
|
||||
left?: 'center' | number;
|
||||
/**
|
||||
* If enabled then the overlay loads immediately after it has been initialized.
|
||||
* @default false
|
||||
*/
|
||||
load?: boolean;
|
||||
/**
|
||||
* By default, there can be only one overlay on the page at once. Setting this
|
||||
* property to false allows you to have multiple overlay instances.
|
||||
* @default true
|
||||
*/
|
||||
oneInstance?: boolean;
|
||||
/**
|
||||
* The speed of the fade-in animation on the "default" effect. Valid values are
|
||||
* 'slow', 'normal' and 'fast', or you can supply a numerical value (in milliseconds).
|
||||
* By setting this property to 0, the overlay will appear immediately without any animation.
|
||||
* @default 'normal'
|
||||
*/
|
||||
speed?: 'slow' | 'normal' | 'fast' | number;
|
||||
/**
|
||||
* The element to be overlayed (if not specified in the rel attribute of the triggering element).
|
||||
*/
|
||||
target?: Element;
|
||||
/**
|
||||
* Specifies how far from the top edge of the screen the overlay should be placed.
|
||||
* Acceptable values are an integer number specifying a distance in pixels, a string
|
||||
* (such as '15%') specifying a percentage value or "center" in which case the overlay
|
||||
* is vertically centered. Percentage values work consistently at different screen resolutions.
|
||||
* @default '10%'
|
||||
*/
|
||||
top?: 'center' | string | number;
|
||||
|
||||
/**
|
||||
* before the overlay is displayed. The overlay has already been positioned at the
|
||||
* location from where it will start animating.
|
||||
*/
|
||||
onBeforeLoad?: (this: Overlay, event: JQueryEventObject) => void;
|
||||
/** when the overlay has completely been displayed */
|
||||
onLoad?: (this: Overlay, event: JQueryEventObject) => void;
|
||||
/** before the overlay is closed */
|
||||
onBeforeClose?: (this: Overlay, event: JQueryEventObject) => void;
|
||||
/** when the overlay is closed */
|
||||
onClose?: (this: Overlay, event: JQueryEventObject) => void;
|
||||
}
|
||||
|
||||
interface MaskOptions {
|
||||
/** CSS color string (i.e. hex value) */
|
||||
color?: string;
|
||||
/** load speed in milliseconds */
|
||||
loadSpeed?: number;
|
||||
/** Opacity of mask. Between 0 and 1. */
|
||||
opacity?: number;
|
||||
}
|
||||
|
||||
interface Overlay {
|
||||
/** Closes the overlay. */
|
||||
close(): Overlay;
|
||||
/** Returns the closing element(s) as a jQuery object. */
|
||||
getClosers(): JQuery;
|
||||
/** Returns the configuration for the overlay. */
|
||||
getConf(): OverlayOptions;
|
||||
/** Returns the overlayed element as a jQuery object. */
|
||||
getOverlay(): JQuery;
|
||||
/** Returns the triggering element as a jQuery object. */
|
||||
getTrigger(): JQuery;
|
||||
/** Returns `true` if the overlay is opened. */
|
||||
isOpened(): boolean;
|
||||
/** Opens the overlay. */
|
||||
load(): Overlay;
|
||||
}
|
||||
}
|
||||
}
|
||||
182
jquery.tools/jquery.tools-tests.ts
Normal file
182
jquery.tools/jquery.tools-tests.ts
Normal file
@@ -0,0 +1,182 @@
|
||||
/// <reference path="index.d.ts" />
|
||||
|
||||
/* from documentation at http://jquerytools.github.io/documentation/overlay/index.html */
|
||||
|
||||
$("img[rel]").overlay();
|
||||
|
||||
var triggers = $(".modalInput").overlay({
|
||||
|
||||
// some mask tweaks suitable for modal dialogs
|
||||
mask: {
|
||||
color: '#ebecff',
|
||||
loadSpeed: 200,
|
||||
opacity: 0.9
|
||||
},
|
||||
|
||||
closeOnClick: false
|
||||
});
|
||||
|
||||
var buttons = $("#yesno button").click(function(this: JQuery, e) {
|
||||
|
||||
// get user input
|
||||
var yes = buttons.index(this) === 0;
|
||||
|
||||
// do something with the answer
|
||||
triggers.eq(0).html("You clicked " + (yes ? "yes" : "no"));
|
||||
});
|
||||
|
||||
// select one or more elements to be overlay triggers
|
||||
$(".my_overlay_trigger").overlay({
|
||||
// one configuration property
|
||||
mask: {
|
||||
color: '#ccc'
|
||||
},
|
||||
// another property
|
||||
top: 50
|
||||
// ... the rest of the configuration properties
|
||||
});
|
||||
|
||||
$("#prompt form").submit(function(this: JQuery, e) {
|
||||
|
||||
// close the overlay
|
||||
triggers.eq(1).overlay<JQueryTools.overlay.Overlay>().close();
|
||||
//or more straightforward:
|
||||
triggers.data('overlay').close();
|
||||
|
||||
// get user input
|
||||
var input = $("input", this).val();
|
||||
|
||||
// do something with the answer
|
||||
triggers.eq(1).html(input);
|
||||
|
||||
// do not submit the form
|
||||
return e.preventDefault();
|
||||
});
|
||||
|
||||
$.tools.overlay.addEffect('', function() {}, function() {});
|
||||
|
||||
/* custom effects */
|
||||
$.tools.overlay.addEffect("myEffect", function(position, done) {
|
||||
/*
|
||||
- 'this' variable is a reference to the overlay API
|
||||
- here we use jQuery's fadeIn() method to perform the effect
|
||||
*/
|
||||
this.getOverlay().css(position).fadeIn(this.getConf().speed, done);
|
||||
},
|
||||
|
||||
// close function
|
||||
function(done) {
|
||||
// fade out the overlay
|
||||
this.getOverlay().fadeOut(this.getConf().closeSpeed, done);
|
||||
}
|
||||
);
|
||||
|
||||
$("#apple img[rel]").overlay({effect: 'apple'});
|
||||
|
||||
// select the overlay element - and "make it an overlay"
|
||||
$("#facebox").overlay({
|
||||
// custom top position
|
||||
top: 260,
|
||||
// some mask tweaks suitable for facebox-looking dialogs
|
||||
mask: {
|
||||
// you might also consider a "transparent" color for the mask
|
||||
color: '#fff',
|
||||
// load mask a little faster
|
||||
loadSpeed: 200,
|
||||
// very transparent
|
||||
opacity: 0.5
|
||||
},
|
||||
// disable this for modal dialog-type of overlays
|
||||
closeOnClick: false,
|
||||
// load it immediately after the construction
|
||||
load: true
|
||||
});
|
||||
|
||||
$(function() {
|
||||
|
||||
// if the function argument is given to overlay,
|
||||
// it is assumed to be the onBeforeLoad event listener
|
||||
$("a[rel]").overlay({
|
||||
|
||||
mask: 'darkred',
|
||||
effect: 'apple',
|
||||
|
||||
onBeforeLoad: function() {
|
||||
|
||||
// grab wrapper element inside content
|
||||
var wrap = this.getOverlay().find(".contentWrap");
|
||||
|
||||
// load the page specified in the trigger
|
||||
wrap.load(this.getTrigger().attr("href"));
|
||||
}
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
$(function() {
|
||||
// positions for each overlay
|
||||
var positions = [
|
||||
[0, 530],
|
||||
[400, 20],
|
||||
[400, 530],
|
||||
[0, 20]
|
||||
];
|
||||
|
||||
// setup triggers
|
||||
$("button[rel]").each(function(this: JQuery, i) {
|
||||
|
||||
$(this).overlay({
|
||||
|
||||
// common configuration for each overlay
|
||||
oneInstance: false,
|
||||
closeOnClick: false,
|
||||
|
||||
// setup custom finish position
|
||||
top: positions[i][0],
|
||||
left: positions[i][1],
|
||||
|
||||
// use apple effect
|
||||
effect: 'apple'
|
||||
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// loading animation
|
||||
$.tools.overlay.addEffect("drop", function(css, done) {
|
||||
|
||||
// use Overlay API to gain access to crucial elements
|
||||
var conf = this.getConf(),
|
||||
overlay = this.getOverlay();
|
||||
|
||||
// determine initial position for the overlay
|
||||
if (conf.fixed) {
|
||||
css['position'] = 'fixed';
|
||||
} else {
|
||||
css['top'] += $(window).scrollTop();
|
||||
css['left'] += $(window).scrollLeft();
|
||||
css['position'] = 'absolute';
|
||||
}
|
||||
|
||||
// position the overlay and show it
|
||||
overlay.css(css).show();
|
||||
|
||||
// begin animating with our custom easing
|
||||
overlay.animate(
|
||||
{ top: '+=55', opacity: 1, width: '+=20'}, 400, 'drop', done
|
||||
);
|
||||
|
||||
/* closing animation */
|
||||
}, function(done) {
|
||||
this.getOverlay().animate(
|
||||
{top:'-=55', opacity:0, width:'-=20'}, 300, 'drop',
|
||||
function(this: JQuery) {
|
||||
$(this).hide();
|
||||
done.call(null);
|
||||
});
|
||||
});
|
||||
|
||||
$("img[rel]").overlay({
|
||||
effect: 'drop',
|
||||
mask: '#789'
|
||||
});
|
||||
23
jquery.tools/tsconfig.json
Normal file
23
jquery.tools/tsconfig.json
Normal file
@@ -0,0 +1,23 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"module": "commonjs",
|
||||
"lib": [
|
||||
"es6",
|
||||
"dom"
|
||||
],
|
||||
"noImplicitAny": true,
|
||||
"noImplicitThis": true,
|
||||
"strictNullChecks": true,
|
||||
"baseUrl": "../",
|
||||
"typeRoots": [
|
||||
"../"
|
||||
],
|
||||
"types": [],
|
||||
"noEmit": true,
|
||||
"forceConsistentCasingInFileNames": true
|
||||
},
|
||||
"files": [
|
||||
"index.d.ts",
|
||||
"jquery.tools-tests.ts"
|
||||
]
|
||||
}
|
||||
1
jquery.tools/tslint.json
Normal file
1
jquery.tools/tslint.json
Normal file
@@ -0,0 +1 @@
|
||||
{ "extends": "../tslint.json" }
|
||||
Reference in New Issue
Block a user