vhad/DefinitelyTyped
1
0
Fork 0
mirror of https://github.com/gosticks/DefinitelyTyped.git synced 2026-07-05 01:30:17 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #236 from Strato/fguillot-master

Browse Source 
jQuery.cycle definitions file.
This commit is contained in:
Boris Yankov
2013-02-01 06:38:56 -08:00
parent fac7512588 bc489ff33f
commit cd401ff4e6
2 changed files with 417 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

324
jquery.cycle/jquery.cycle-tests.ts Normal file
View File

@@ -0,0 +1,324 @@
/// <reference path="../jquery/jquery.d.ts"/>
/// <reference path="jquery.cycle.d.ts"/>
// As basic as it can be
$('#element').cycle();
/* Beginner Demos */
$('#s1').cycle('fade');
$('#s2').cycle({
fx: 'scrollDown'
});
$('#s3').cycle({
fx: 'fade',
speed: 2500
});
$('#s4').cycle({
fx: 'scrollDown',
speed: 300,
timeout: 2000
});
$('#s5').cycle({
fx: 'fade',
pause: true
});
$('#s6').cycle({
fx: 'scrollDown',
random: true
});
/* Intermediate Demos (Part 1) */
$('#s1').cycle({
fx: 'zoom',
easing: 'easeInBounce',
delay: -4000
});
$('#s2').cycle({
fx: 'scrollDown',
easing: 'easeOutBounce',
delay: -2000
});
$('#s3').cycle({
fx: 'zoom',
sync: false,
delay: -4000
});
$('#s4').cycle({
fx: 'scrollDown',
sync: false,
delay: -2000
});
$('#s5').cycle({
fx: 'shuffle',
delay: -4000
});
$('#s6').cycle({
fx: 'shuffle',
shuffle: {
top: -230,
left: 230
},
easing: 'easeInOutBack',
delay: -2000
});
/* Intermediate Demos (Part 2) */
$('#s1').cycle({
fx: 'slideY',
speed: 300,
next: '#s1',
timeout: 0
});
$('#s2').cycle({
fx: 'fade',
speed: 'fast',
timeout: 0,
next: '#next2',
prev: '#prev2'
});
$('#s3').cycle({
fx: 'fade',
speed: 300,
timeout: 3000,
next: '#s3',
pause: true
});
$('#s4')
.before('<div id="nav">')
.cycle({
fx: 'turnDown',
speed: 'fast',
timeout: 0,
pager: '#nav'
});
$('#s5').cycle({
fx: 'scrollLeft',
timeout: 5000,
before: function () {
$('#output').html("Scrolling image:<br>" + this.src);
},
after: function () {
$('#output').html("Scroll complete for:<br>" + this.src)
.append('<h3>' + this.alt + '</h3>');
}
});
$('#s6').cycle({
fx: 'scrollUp',
timeout: 6000,
delay: -2000
});
$('#s7').cycle({
fx: 'scrollRight',
delay: -1000
});
/* Advanced Demos (Part 1) */
$('#s1').cycle({
fx: 'zoom',
speedIn: 2500,
speedOut: 500,
easeIn: 'easeInBounce',
easeOut: 'easeOutElastic',
sync: false,
delay: -4000
});
$('#s2').cycle({
fx: 'scrollDown',
speedIn: 2000,
speedOut: 500,
easeIn: 'easeInCirc',
easeOut: 'easeOutBounce',
delay: -2000
});
$('#s3').cycle({
fx: 'custom',
cssBefore: {
left: 232,
top: -232,
display: 'block'
},
animIn: {
left: 0,
top: 0
},
animOut: {
left: 232,
top: 232
},
delay: -3000
});
$('#s4').cycle({
fx: 'custom',
sync: false,
cssBefore: {
top: 0,
left: 232,
display: 'block'
},
animIn: {
left: 0
},
animOut: {
top: 232
},
delay: -1000
});
$('#s5').cycle({
fx: 'custom',
cssBefore: {
left: 115,
top: 115,
width: 0,
height: 0,
opacity: 1,
display: 'block'
},
animOut: {
opacity: 0
},
animIn: {
left: 0,
top: 0,
width: 200,
height: 200
},
cssAfter: {
zIndex: 0
},
delay: -3000
});
$('#s6').cycle({
fx: 'custom',
cssBefore: {
top: 0,
left: 0,
width: 0,
height: 0,
display: 'block'
},
animIn: {
width: 200,
height: 200
},
animOut: {
top: 200,
left: 200,
width: 0,
height: 0
},
cssAfter: {
zIndex: 0
},
delay: -1000
});
/* Advanced Demos (Part 2) */
$('#s6').cycle({
fx: 'custom',
cssBefore: {
top: 0,
left: 0,
width: 0,
height: 0,
zIndex: 1
},
animIn: {
width: 200,
height: 200
},
animOut: {
top: 200,
left: 200,
width: 0,
height: 0
},
cssAfter: {
zIndex: 0
}
});
$.fn.cycle.transitions.pinch = function ($cont, $slides, opts) {
var $el = $($slides[0]);
var w = $el.width();
var h = $el.height();
opts.cssBefore = { top: 0, left: 0, width: 0, height: 0, zIndex: 1 };
opts.animIn = { width: w, height: h };
opts.animOut = { top: h, left: w, width: 0, height: 0 };
opts.cssAfter = { zIndex: 0 };
};
$('#s1').cycle('pinch');
$('#s2').cycle({
fx: 'pinch',
delay: 2000
});
/* More Demos (from the more demos page) */
// Using multiple transition effects in a single slide slideshow
$('#slideshow2').cycle({
fx: 'scrollLeft,scrollDown,scrollRight,scrollUp',
randomizeEffects: false,
easing: 'easeInBack' // easing supported via the easing plugin
});
// Another Advanced "pager" Demo
$('#slideshow').cycle({
fx: 'turnDown',
speed: 'fast',
timeout: 0,
pager: '#nav',
pagerAnchorBuilder: function (idx, slide) {
// return selector string for existing anchor
return '#nav li:eq(' + idx + ') a';
}
});
// Using the 'slideExpr' option
$('#slideshow').cycle({ slideExpr: 'img' });
// Defeating IE's ClearType bug
$('#slideshow').cycle({
cleartype: false // disable cleartype corrections
});
// Using the 'nowrap' option (manual slideshow)
$('#s1').cycle({
fx: 'scrollHorz',
prev: '#prev1',
next: '#next1',
nowrap: true,
timeout: 0
});
// Using a continually transitioning slideshow (the 'continuous' option)
$('#slideshow').cycle({
fx: 'shuffle',
continuous: true
});

93
jquery.cycle/jquery.cycle.d.ts vendored Normal file
View File

@@ -0,0 +1,93 @@
// Type definitions for jQuery.cycle.js 2.9999.81 (15-JAN-2013)
// Project: http://jquery.malsup.com/cycle/
// Definitions by: François Guillot <http://fguillot.developpez.com/>
// Definitions: https://github.com/borisyankov/DefinitelyTyped
/// <reference path="../jquery/jquery.d.ts"/>
interface CycleOptions {
activePagerClass?: string; // class name used for the active pager link
after?: (currSlideElement: Element, nextSlideElement: Element, options: CycleOptions, forwardFlag: bool) => void; // transition callback (scope set to element that was shown): function(currSlideElement, nextSlideElement, options, forwardFlag)
allowPagerClickBubble?: bool; // allows or prevents click event on pager anchors from bubbling
animIn?: any; // properties that define how the slide animates in
animOut?: any; // properties that define how the slide animates out
aspect?: bool; // preserve aspect ratio during fit resizing, cropping if necessary (must be used with fit option)
autostop?: bool; // true to end slideshow after X transitions (where X == slide count)
autostopCount?: number; // number of transitions (optionally used with autostop to define X)
backwards?: bool; // true to start slideshow at last slide and move backwards through the stack
before?: (currSlideElement: Element, nextSlideElement: Element, options:CycleOptions, forwardFlag: bool) => void; // transition callback (scope set to element to be shown): function(currSlideElement, nextSlideElement, options, forwardFlag)
center?: bool; // set to true to have cycle add top/left margin to each slide (use with width and height options)
cleartype?: bool; // true if clearType corrections should be applied (for IE)
cleartypeNoBg?: bool; // set to true to disable extra cleartype fixing (leave false to force background color setting on slides)
containerResize?: bool; // resize container to fit largest slide
containerResizeHeight?: bool; // resize containers height to fit the largest slide but leave the width dynamic
continuous?: bool; // true to start next transition immediately after current one completes
cssAfter?: any; // properties that defined the state of the slide after transitioning out
cssBefore?: any; // properties that define the initial state of the slide before transitioning in
delay?: number; // additional delay (in ms) for first transition (hint: can be negative)
easeIn?: string; // easing for "in" transition
easeOut?: string; // easing for "out" transition
easing?: string; // easing method for both in and out transitions
end?: (options: CycleOptions) => void; // callback invoked when the slideshow terminates (use with autostop or nowrap options): function(options)
fastOnEvent?: bool; // force fast transitions when triggered manually (via pager or prev/next); value == time in ms
fit?: bool; // force slides to fit container
fx?: string; // name of transition effect (or comma separated names, ex: 'fade,scrollUp,shuffle')
fxFn?: (currSlideElement: Element, nextSlideElement: Element, options: CycleOptions, afterCalback: Function, forwardFlag: bool) => void; // function used to control the transition: function(currSlideElement, nextSlideElement, options, afterCalback, forwardFlag)
height?: any; // container height (if the 'fit' option is true, the slides will be set to this height as well)
manualTrump?: bool; // causes manual transition to stop an active transition instead of being ignored
metaAttr?: string; // data- attribute that holds the option data for the slideshow
next?: any; // element, jQuery object, or jQuery selector string for the element to use as event trigger for next slide
nowrap?: bool; // true to prevent slideshow from wrapping
onPagerEvent?: (zeroBasedSlideIndex: number, slideElement: Element) => void; // callback fn for pager events: function(zeroBasedSlideIndex, slideElement)
onPrevNextEvent?: (isNext: bool, zeroBasedSlideIndex: number, slideElement: Element) => void; // callback fn for prev/next events: function(isNext, zeroBasedSlideIndex, slideElement)
pager?: any; // element, jQuery object, or jQuery selector string for the element to use as pager container
pagerAnchorBuilder?: (index: number, DOMelement: Element) => string; // callback fn for building anchor links: function(index, DOMelement)
pagerEvent?: string; // name of event which drives the pager navigation
pause?: bool; // true to enable "pause on hover"
pauseOnPagerHover?: bool; // true to pause when hovering over pager link
prev?: any; // element, jQuery object, or jQuery selector string for the element to use as event trigger for previous slide
prevNextEvent?: string; // event which drives the manual transition to the previous or next slide
random?: bool; // true for random, false for sequence (not applicable to shuffle fx)
randomizeEffects?: bool; // valid when multiple effects are used; true to make the effect sequence random
requeueOnImageNotLoaded?: bool; // requeue the slideshow if any image slides are not yet loaded
requeueTimeout?: number; // ms delay for requeue
rev?: bool; // causes animations to transition in reverse (for effects that support it such as scrollHorz/scrollVert/shuffle)
shuffle?: any; // coords for shuffle animation, ex: { top:15, left: 200 }
skipInitializationCallbacks?: bool; // set to true to disable the first before/after callback that occurs prior to any transition
slideExpr?: string; // expression for selecting slides (if something other than all children is required)
slideResize?: bool; // force slide width/height to fixed size before every transition
speed?: any; // speed of the transition (any valid fx speed value)
speedIn?: any; // speed of the 'in' transition
speedOut?: any; // speed of the 'out' transition
startingSlide?: number; // zero-based index of the first slide to be displayed
sync?: bool; // true if in/out transitions should occur simultaneously
timeout?: number; // milliseconds between slide transitions (0 to disable auto advance)
timeoutFn?: (currSlideElement: Element, nextSlideElement: Element, options: CycleOptions, forwardFlag: bool) => void; // callback for determining per-slide timeout value: function(currSlideElement, nextSlideElement, options, forwardFlag)
updateActivePagerLink?: (pager: any, currSlide: number, clsName: string) => void; // callback fn invoked to update the active pager link (adds/removes activePagerClass style)
width?: any; // container width (if the 'fit' option is true, the slides will be set to this width as well)
}
interface Cycle {
(fx?: string): JQuery;
(options?: CycleOptions): JQuery;
ver: () => string;
debug: bool;
defaults: CycleOptions;
// expose next/prev function, caller must pass in state
next: (options?: CycleOptions) => void;
prev: (options?: CycleOptions) => void;
transitions: { [key: string]: ($cont: JQuery, $slides: JQuery, options: CycleOptions) => void; }; // transition definitions - only fade is defined here, transition pack defines the rest
custom: (currSlideElement: Element, nextSlideElement: Element, options: CycleOptions, afterCalback: Function, forwardFlag: bool, speedOverride?: number) => void; // the actual fn for effecting a transition
commonReset: (currSlideElement: Element, nextSlideElement: Element, options: CycleOptions, w?: bool, h?: bool, rev?: bool) => void; // reset common props before the next transition
hopsFromLast: (options: CycleOptions, forwardFlag?: bool) => number; // helper fn to calculate the number of slides between the current and the next
createPagerAnchor: (index: number, DOMElement: Element, $pager: JQuery, els: any, options: CycleOptions) => string;
updateActivePagerLink: (pager: any, currSlide: number, clsName: string) => void; // invoked after transition
resetState: (options: CycleOptions, fx?: string) => void; // reset internal state; we do this on every pass in order to support multiple effects
}
interface JQuery {
cycle: Cycle;
}