From c8b3b9a8d26ead78d4c54a36692a06d76d709fbc Mon Sep 17 00:00:00 2001 From: Boris Yankov Date: Thu, 18 Oct 2012 06:42:58 +0300 Subject: [PATCH] Fancybox definitions and tests added --- Definitions/fancybox-2.1.d.ts | 126 +++++++++++++++++++++++++++++ README.md | 5 +- Tests/fancybox-tests.ts | 148 ++++++++++++++++++++++++++++++++++ 3 files changed, 277 insertions(+), 2 deletions(-) create mode 100644 Definitions/fancybox-2.1.d.ts create mode 100644 Tests/fancybox-tests.ts diff --git a/Definitions/fancybox-2.1.d.ts b/Definitions/fancybox-2.1.d.ts new file mode 100644 index 000000000..c9892c96b --- /dev/null +++ b/Definitions/fancybox-2.1.d.ts @@ -0,0 +1,126 @@ +// Type definitions for fancyBox 2.1 +// Project: https://github.com/fancyapps/fancyBox +// Definitions: https://github.com/borisyankov/DefinitelyTyped + + +interface FancyboxOptions { + padding?: any; // number or [] + margin?: any; // number or [] + width?: any; // number or [] + height?: any; // number or [] + minWidth?: number; + minHeight?: number; + maxWidth?: number; + maxHeight?: number; + autoSize?: bool; + autoHeight?: bool; + autoWidth?: bool; + autoResize?: bool; + autoCenter?: bool; + fitToView?: bool; + aspectRatio?: bool; + topRatio?: number; + leftRatio?: number; + scrolling?: string; + wrapCSS?: string; + arrows?: bool; + closeBtn?: bool; + closeClick?: bool; + nextClick?: bool; + mouseWheel?: bool; + autoPlay?: bool; + playSpeed?: number; + preload?: number; + modal?: bool; + loop?: bool; + ajax?: any; + iframe?: any; + swf?: any; + keys?: any; + direction?: any; + scrollOutside?: bool; + index?: number; + type?: string; + href?: string; + content?: string; + title?: string; + tpl?: any; + + openEffect?: string; + closeEffect?: string; + nextEffect?: string; + prevEffect?: string; + + openSpeed?: number; + closeSpeed?: number; + nextSpeed?: number; + prevSpeed?: number; + + openEasing?: string; + closeEasing?: string; + nextEasing?: string; + prevEasing?: string; + + openOpacity?: bool; + closeOpacity?: bool; + + openMethod?: string; + closeMethod?: string; + nextMethod?: string; + prevMethod?: string; + + helpers?: any; +} + +interface FancyboxMethods { + open(group?: any[], options?: FancyboxOptions); + cancel(); + close(force?: bool); + play(); + next(); + prev(); + jumpto(index?: number); + reposition(); + update(); + toggle(); + showLoading(); + hideLoading(); + + (options?: FancyboxOptions): void; + (selector: string, options?: FancyboxOptions): void; + (selector: JQuery, options?: FancyboxOptions): void; + (group?: any[], options?: FancyboxOptions): void; +} + +interface FancyboxCallback { + onCancel; + beforeLoad; + afterLoad; + beforeShow; + afterShow; + beforeClose; + afterClose; + onUpdate; + onPlayStart; + onPlayEnd; +} + +interface FancyboxThumbnailHelperOptions { + width?: number; + height?: number; + source?: any; + position?: string; +} + +interface FancyboxButtonHelperOptions { + tpl?: string; + position?: string; +} + +interface JQuery { + fancybox: FancyboxMethods; +} + +interface JQueryStatic { + fancybox: FancyboxMethods; +} \ No newline at end of file diff --git a/README.md b/README.md index fdacf237f..a031f0223 100644 --- a/README.md +++ b/README.md @@ -10,17 +10,19 @@ Complete * Backbone.js * Bootstrap * Express (from TypeScript samples) +* Fancybox * History.js * jQuery.Globalize * jQuery (from TypeScript samples) +* Knockout.js * Modernizr * Mustache.js * Node.js (from TypeScript samples) +* QUnit * Underscore.js In Progress ----------- -* Knockout.js * jQuery UI * jQuery Mobile @@ -28,7 +30,6 @@ Next ---- * Angular.js * jQuery.Validate -* QUnit * PhoneGap * Isotope * Reveal.js diff --git a/Tests/fancybox-tests.ts b/Tests/fancybox-tests.ts new file mode 100644 index 000000000..b3cd97583 --- /dev/null +++ b/Tests/fancybox-tests.ts @@ -0,0 +1,148 @@ +/// +/// + +$('.fancybox').fancybox(); +$('.fancybox').fancybox({ + padding: 0, + openEffect: 'elastic' +}); +$.fancybox([ + { href: 'img1.jpg', title: 'Title' }, + { href: 'img2.jpg', title: 'Title' } +]); +$.fancybox({ href: 'image.jpg', title: 'Lorem lipsum' }); +$.fancybox(['image.jpg', 'image.jpg']); +$.fancybox('image.jpg'); +$.fancybox('

Lorem lipsum

'); + +$.fancybox.cancel(); +$.fancybox.close(true); +$.fancybox.play(); +$.fancybox.next(); +$.fancybox.prev(); +$.fancybox.jumpto(1); +$.fancybox.reposition(); +$.fancybox.update(); +$.fancybox.toggle(); +$.fancybox.showLoading(); +$.fancybox.hideLoading(); +$(".selector").fancybox({ 'type': 'image' }); +$("#single_1").fancybox({ + helpers: { + title: { + type: 'float' + } + } +}); +$("#single_2").fancybox({ + openEffect: 'elastic', + closeEffect: 'elastic', + helpers: { + title: { + type: 'inside' + } + } +}); +$(".fancybox").fancybox({ + openEffect: 'none', + closeEffect: 'none' +}); +$(".various").fancybox({ + maxWidth: 800, + maxHeight: 600, + fitToView: false, + width: '70%', + height: '70%', + autoSize: false, + closeClick: false, + openEffect: 'none', + closeEffect: 'none' +}); +$(".fancybox-button").fancybox({ + prevEffect: 'none', + nextEffect: 'none', + closeBtn: false, + helpers: { + title: { type: 'inside' }, + buttons: {} + } +}); +$(".fancybox-thumb").fancybox({ + prevEffect: 'none', + nextEffect: 'none', + helpers: { + title: { + type: 'outside' + }, + thumbs: { + width: 50, + height: 50 + } + } +}); +$('.fancybox-media').fancybox({ + openEffect: 'none', + closeEffect: 'none', + helpers: { + media: {} + } +}); +$(".fancybox").fancybox({ + helpers: { + title: null + } +}); +$(".fancybox").fancybox({ + helpers: { + overlay: null + } +}); +$(".fancybox").fancybox({ + helpers: { + title: { + type: 'inside' + }, + overlay: { + showEarly: false + } + } +}); +$(".fancybox").fancybox({ + helpers: { + thumbs: { + width: 50, + height: 50 + } + } +}); +$(".fancybox").fancybox({ + beforeLoad: function () { + this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : ''); + } +}); +$.fancybox('

Lorem Lipsum

Lorem lipsum

', { + title: 'Custom Title' +}); +$.fancybox($("#inline"), { + title: 'Custom Title' +}); +$.fancybox({ + href: 'example.jpg', + title: 'Custom Title' +}); +$.fancybox([ + { + href: 'example1.jpg', + title: 'Custom Title 1' + }, + { + href: 'example2.jpg', + title: 'Custom Title 2' + } +], { + padding: 0 +}); + +$(".fancybox").fancybox({ + margin: [20, 60, 20, 60] +}); \ No newline at end of file