From 645ce5a19b3ffa59546a7c506917d1e6691f7147 Mon Sep 17 00:00:00 2001 From: Greg Smith Date: Fri, 13 Jun 2014 15:45:56 -0500 Subject: [PATCH 1/2] Type definitions for Velocity --- velocity-animate/velocity-animate-tests.ts | 295 +++++++++++++++++++++ velocity-animate/velocity-animate.d.ts | 44 +++ 2 files changed, 339 insertions(+) create mode 100644 velocity-animate/velocity-animate-tests.ts create mode 100644 velocity-animate/velocity-animate.d.ts diff --git a/velocity-animate/velocity-animate-tests.ts b/velocity-animate/velocity-animate-tests.ts new file mode 100644 index 0000000000..5487299772 --- /dev/null +++ b/velocity-animate/velocity-animate-tests.ts @@ -0,0 +1,295 @@ +/// + +function basics_arguments() { + var $el: JQuery; + $el.velocity({ + top: 10, + left: 10 + }, { + /* Velocity's default options: */ + duration: 400, + easing: "swing", + queue: "", + begin: null, + progress: null, + complete: null, + loop: false, + delay: false, + display: false, + mobileHA: true + }); + + $el.velocity({ top: 50 }, 1000); + $el.velocity({ top: 50 }, 1000, "swing"); + $el.velocity({ top: 50 }, "swing"); + $el.velocity({ top: 50 }, 1000, function() { alert("Hi"); }); + + $el.velocity({ + properties: { opacity: 1 }, + options: { duration: 500 } + }); +} + +function basics_values() { + var $el: JQuery; + $el.velocity({ + top: 50, // Defaults to the px unit type + left: "50%", + width: "+=5rem", // Add 5rem to the current rem value + height: "*=2" // Double the current height + }); +} + +function options_duration() { + var $el: JQuery; + $el.velocity({ opacity: 1 }, { duration: 1000 }); + $el.velocity({ opacity: 1 }, { duration: "slow" }); +} + +function options_easing() { + var $el: JQuery; + /* Use one of the jQuery UI easings. */ + $el.velocity({ width: 50 }, "easeInSine"); + /* Use a custom bezier curve. */ + $el.velocity({ width: 50 }, [ 0.17, 0.67, 0.83, 0.67 ]); + /* Use spring physics. */ + $el.velocity({ width: 50 }, [ 250, 15 ]); + + $el.velocity({ + borderBottomWidth: [ "2px", "spring" ], // Uses "spring" + width: [ "100px", [ 250, 15 ] ], // Uses custom spring physics + height: "100px" // Defaults to easeInSine + }, { + easing: "easeInSine" // The call's default easing + }); +} + +function options_queue() { + var $el: JQuery; + /* Trigger the first animation: Animate width. */ + $el.velocity({ width: "500px" }, { duration: 10000 }); + /* Trigger the second animation: Animate height. */ + setTimeout(function() { + /* Will run in parallel starting at the 5000ms mark. */ + $el.velocity({ height: "500px" }, { queue: false }); + }, 5000); +} + +function options_complete() { + var $el: JQuery; + $el.velocity({ + opacity: 0 + }, { + /* Logs all the animated divs. */ + complete: function(elements) { console.log(elements); } + }); +} + +function options_begin() { + var $el: JQuery; + $el.velocity({ + opacity: 0 + }, { + /* Logs all the animated divs. */ + begin: function(elements) { console.log(elements); } + }); +} + +function options_progress() { + var $el: JQuery; + var $percentComplete: JQuery; + var $timeRemaining: JQuery; + $el.velocity({ + opacity: 0 + }, { + progress: function(elements, percentComplete, timeRemaining, timeStart) { + $percentComplete.html((percentComplete * 100) + "%"); + $timeRemaining.html(timeRemaining + "ms remaining!"); + } + }); +} + +function options_mobileHA() { + var $el: JQuery; + $el.velocity({ height: "10em" }, { mobileHA: false }); +} + +function options_loop() { + var $el: JQuery; + $el.velocity({ height: "10em" }, { loop: 2 }); +} + +function options_delay() { + var $el: JQuery; + $el.velocity({ + height: "+=10em" + }, { + loop: 4, + /* Wait 100ms before alternating. */ + delay: 100 + }); +} + +function options_display() { + var $el: JQuery; + /* Animate down to zero then set display to "none". */ + $el.velocity({ opacity: 0 }, { display: "none" }); + /* Set display to "block" then animate from opacity:0. */ + $el.velocity({ opacity: 1 }, { display: "block" }); +} + +function command_scroll() { + var $el: JQuery; + $el + .velocity("scroll", { duration: 1500, easing: "spring" }) + .velocity({ opacity: 1 }); + + /* Scroll container to the top of the targeted div. */ + $el.velocity("scroll", { container: $("#container") }); + + /* Scroll the browser to the LEFT edge of the targeted div. */ + $el.velocity("scroll", { axis: "x" }); + + /* Scroll to a position 50 pixels above the div. */ + $el + .velocity("scroll", { duration: 750, offset: -50 }) + /* Then scroll to a position 250 pixels beyond the div. */ + .velocity("scroll", { duration: 750, offset: 250 }); +} + +function command_stop() { + var $el: JQuery; + $el.velocity("stop"); +} + +function command_reverse() { + var $el: JQuery; + $el.velocity("reverse"); + $el.velocity("reverse", { duration: 2000 }); +} + +function command_fadeIn_fadeOut() { + var $el: JQuery; + $el + .velocity("fadeIn", { duration: 1500 }) + .velocity("fadeOut", { delay: 500, duration: 1500 }); +} + +function command_slideDown_slideUp() { + var $el: JQuery; + $el + .velocity("slideDown", { duration: 1500 }) + .velocity("slideUp", { delay: 500, duration: 1500 }); +} + +function feature_transforms() { + var $el: JQuery; + /* Translate to the right and rotate clockwise. */ + $el.velocity({ + translateX: "200px", + rotateZ: "45deg" + }); + + /* Translate to the right and rotate clockwise. */ + $el.velocity({ + translateZ: 0, // Force HA by animating a 3D property + translateX: "200px", + rotateZ: "45deg" + }); +} + +function feature_hooks() { + var $el: JQuery; + $el.velocity({ textShadowBlur: "10px" }); +} + +function feature_colors() { + var $el: JQuery; + $el.velocity({ + /* Animate red to 50% (0.5 * 255). */ + colorRed: "50%", + /* Concurrently animate to a richer blue. */ + colorBlue: "+=50", + /* Fade the text down to 85% opacity. */ + colorAlpha: 0.85 + }); +} + +function feature_sequences() { + var $el: JQuery; + $.Velocity.Sequences.hover = function (element, options) { + var duration = options.duration || 750; + $.Velocity.animate(element, + { + translateY: "-=10px", + }, { + /* Delay is relative to user-adjustable duration. */ + delay: duration * 0.033, + duration: duration, + loop: 3, + easing: "easeInOutSine" + }); + }; + + /* Later on in your code, trigger the sequence: */ + /* Note: As normal, you may optionally pass in options. */ + $el.velocity("hover", { duration: 450 }); + + $.Velocity.Sequences.hover = function (element, options) { + var duration = options.duration || 750; + /* Pre-construct animation maps before chaining. */ + var calls = [ + { + properties: { translateY: "-10px" }, + options: { + delay: duration * 0.033, + duration: duration, + loop: 3, + easing: "easeInOutSine" + } + } + ]; + /* Iteratively chain the calls. */ + $.each(calls, function(i, call) { + $.Velocity.animate( + element, + call.properties, + call.options + ); + }); + }; +} + +function advanced_value_functions() { + var $el: JQuery; + $el.velocity({ + opacity: function() { return Math.random() } + }); + $el.velocity({ + translateX: function(i, total) { + /* Generate translateX's end value. */ + return (i * 10) + "px"; + } + }); +} + +function advanced_forcefeeding() { + var $el: JQuery; + $el.velocity({ + translateX: [ 500, 0 ], + opacity: [ 0, "easeInSine", 1 ] + }); + $el + .velocity({ translateX: [ 500, 0 ] }) + .velocity({ translateX: 1000 }); +} + +function advanced_utility_function () { + var divs = document.getElementsByTagName("div"); + $.Velocity.animate(divs, { opacity: 0 }, { duration: 1500 }); + $.Velocity.animate({ + elements: divs, + properties: { opacity: 0 }, + options: { duration: 1500 } + }); +} diff --git a/velocity-animate/velocity-animate.d.ts b/velocity-animate/velocity-animate.d.ts new file mode 100644 index 0000000000..cd5c42ab17 --- /dev/null +++ b/velocity-animate/velocity-animate.d.ts @@ -0,0 +1,44 @@ +// Type definitions for Velocity 0.0.22 +// Project: http://velocityjs.org/ +// Definitions by: Greg Smith +// Definitions: https://github.com/borisyankov/DefinitelyTyped + +/// + +interface JQuery { + velocity(options: {properties: Object; options: jquery.velocity.VelocityOptions}): JQuery; + velocity(properties: Object, options: jquery.velocity.VelocityOptions): JQuery; + velocity(properties: Object, duration?: number, easing?: string, complete?: Function): JQuery; + velocity(properties: Object, duration?: number, easing?: number[], complete?: Function): JQuery; + velocity(properties: Object, duration?: number, complete?: Function): JQuery; + velocity(properties: Object, easing?: string, complete?: Function): JQuery; + velocity(properties: Object, easing?: number[], complete?: Function): JQuery; + velocity(properties: Object, complete?: Function): JQuery; +} + +interface JQueryStatic { + Velocity: jquery.velocity.VelocityStatic; +} + +declare module jquery.velocity { + interface VelocityStatic { + Sequences: any; + animate(options: {elements: NodeListOf; properties: Object; options: VelocityOptions}): void; + animate(elements: NodeListOf, properties: Object, options: VelocityOptions): void; + animate(element: HTMLElement, properties: Object, options: VelocityOptions): void; + } + + interface VelocityOptions { + queue?: any; + duration?: any; + easing?: any; + begin?: Function; + complete?: Function; + progress?: Function; + display?: any; + loop?: any; + delay?: any; + mobileHA?: boolean; + _cacheValues?: boolean; + } +} From 6c8cd94c7595dd86c93099491e30fd0cf27e39b9 Mon Sep 17 00:00:00 2001 From: Greg Smith Date: Sat, 14 Jun 2014 14:35:54 -0500 Subject: [PATCH 2/2] Fix implicit-any errors, update CONTRIBUTORS.md --- CONTRIBUTORS.md | 1 + velocity-animate/velocity-animate-tests.ts | 42 +++++++++++----------- velocity-animate/velocity-animate.d.ts | 26 +++++++++----- 3 files changed, 39 insertions(+), 30 deletions(-) diff --git a/CONTRIBUTORS.md b/CONTRIBUTORS.md index 4c2fbc8e16..a6d20f6ad1 100644 --- a/CONTRIBUTORS.md +++ b/CONTRIBUTORS.md @@ -317,6 +317,7 @@ All definitions files include a header with the author and editors, so at some p * [urlrouter](https://github.com/fengmk2/urlrouter) (by [Carlos Ballesteros Velasco](https://github.com/soywiz)) * [UUID.js](https://github.com/LiosK/UUID.js) (by [Jason Jarrett](https://github.com/staxmanade)) * [Valerie](https://github.com/davewatts/valerie) (by [Howard Richards](https://github.com/conficient)) +* [Velocity](http://velocityjs.org/) (by [Greg Smith](https://github.com/smrq)) * [Viewporter](https://github.com/zynga/viewporter) (by [Boris Yankov](https://github.com/borisyankov)) * [Vimeo](http://developer.vimeo.com/player/js-api) (by [Daz Wilkin](https://github.com/DazWilkin/)) * [vinyl](https://github.com/wearefractal/vinyl) (by [vvakame](https://github.com/vvakame/)) diff --git a/velocity-animate/velocity-animate-tests.ts b/velocity-animate/velocity-animate-tests.ts index 5487299772..96400d3650 100644 --- a/velocity-animate/velocity-animate-tests.ts +++ b/velocity-animate/velocity-animate-tests.ts @@ -2,7 +2,7 @@ function basics_arguments() { var $el: JQuery; - $el.velocity({ + $el.velocity({ top: 10, left: 10 }, { @@ -24,7 +24,7 @@ function basics_arguments() { $el.velocity({ top: 50 }, "swing"); $el.velocity({ top: 50 }, 1000, function() { alert("Hi"); }); - $el.velocity({ + $el.velocity({ properties: { opacity: 1 }, options: { duration: 500 } }); @@ -32,7 +32,7 @@ function basics_arguments() { function basics_values() { var $el: JQuery; - $el.velocity({ + $el.velocity({ top: 50, // Defaults to the px unit type left: "50%", width: "+=5rem", // Add 5rem to the current rem value @@ -42,7 +42,7 @@ function basics_values() { function options_duration() { var $el: JQuery; - $el.velocity({ opacity: 1 }, { duration: 1000 }); + $el.velocity({ opacity: 1 }, { duration: 1000 }); $el.velocity({ opacity: 1 }, { duration: "slow" }); } @@ -59,7 +59,7 @@ function options_easing() { borderBottomWidth: [ "2px", "spring" ], // Uses "spring" width: [ "100px", [ 250, 15 ] ], // Uses custom spring physics height: "100px" // Defaults to easeInSine - }, { + }, { easing: "easeInSine" // The call's default easing }); } @@ -79,7 +79,7 @@ function options_complete() { var $el: JQuery; $el.velocity({ opacity: 0 - }, { + }, { /* Logs all the animated divs. */ complete: function(elements) { console.log(elements); } }); @@ -89,7 +89,7 @@ function options_begin() { var $el: JQuery; $el.velocity({ opacity: 0 - }, { + }, { /* Logs all the animated divs. */ begin: function(elements) { console.log(elements); } }); @@ -101,7 +101,7 @@ function options_progress() { var $timeRemaining: JQuery; $el.velocity({ opacity: 0 - }, { + }, { progress: function(elements, percentComplete, timeRemaining, timeStart) { $percentComplete.html((percentComplete * 100) + "%"); $timeRemaining.html(timeRemaining + "ms remaining!"); @@ -121,9 +121,9 @@ function options_loop() { function options_delay() { var $el: JQuery; - $el.velocity({ + $el.velocity({ height: "+=10em" - }, { + }, { loop: 4, /* Wait 100ms before alternating. */ delay: 100 @@ -141,7 +141,7 @@ function options_display() { function command_scroll() { var $el: JQuery; $el - .velocity("scroll", { duration: 1500, easing: "spring" }) + .velocity("scroll", { duration: 1500, easing: "spring" }) .velocity({ opacity: 1 }); /* Scroll container to the top of the targeted div. */ @@ -164,7 +164,7 @@ function command_stop() { function command_reverse() { var $el: JQuery; - $el.velocity("reverse"); + $el.velocity("reverse"); $el.velocity("reverse", { duration: 2000 }); } @@ -185,13 +185,13 @@ function command_slideDown_slideUp() { function feature_transforms() { var $el: JQuery; /* Translate to the right and rotate clockwise. */ - $el.velocity({ + $el.velocity({ translateX: "200px", rotateZ: "45deg" }); /* Translate to the right and rotate clockwise. */ - $el.velocity({ + $el.velocity({ translateZ: 0, // Force HA by animating a 3D property translateX: "200px", rotateZ: "45deg" @@ -217,12 +217,12 @@ function feature_colors() { function feature_sequences() { var $el: JQuery; - $.Velocity.Sequences.hover = function (element, options) { + $.Velocity.Sequences.hover = function (element: HTMLElement, options: {duration?: number}) { var duration = options.duration || 750; $.Velocity.animate(element, - { + { translateY: "-=10px", - }, { + }, { /* Delay is relative to user-adjustable duration. */ delay: duration * 0.033, duration: duration, @@ -235,13 +235,13 @@ function feature_sequences() { /* Note: As normal, you may optionally pass in options. */ $el.velocity("hover", { duration: 450 }); - $.Velocity.Sequences.hover = function (element, options) { + $.Velocity.Sequences.hover = function (element: HTMLElement, options: {duration?: number}) { var duration = options.duration || 750; /* Pre-construct animation maps before chaining. */ var calls = [ - { + { properties: { translateY: "-10px" }, - options: { + options: { delay: duration * 0.033, duration: duration, loop: 3, @@ -266,7 +266,7 @@ function advanced_value_functions() { opacity: function() { return Math.random() } }); $el.velocity({ - translateX: function(i, total) { + translateX: function(i: number, total: number) { /* Generate translateX's end value. */ return (i * 10) + "px"; } diff --git a/velocity-animate/velocity-animate.d.ts b/velocity-animate/velocity-animate.d.ts index cd5c42ab17..00c4218965 100644 --- a/velocity-animate/velocity-animate.d.ts +++ b/velocity-animate/velocity-animate.d.ts @@ -8,12 +8,12 @@ interface JQuery { velocity(options: {properties: Object; options: jquery.velocity.VelocityOptions}): JQuery; velocity(properties: Object, options: jquery.velocity.VelocityOptions): JQuery; - velocity(properties: Object, duration?: number, easing?: string, complete?: Function): JQuery; - velocity(properties: Object, duration?: number, easing?: number[], complete?: Function): JQuery; - velocity(properties: Object, duration?: number, complete?: Function): JQuery; - velocity(properties: Object, easing?: string, complete?: Function): JQuery; - velocity(properties: Object, easing?: number[], complete?: Function): JQuery; - velocity(properties: Object, complete?: Function): JQuery; + velocity(properties: Object, duration?: number, easing?: string, complete?: jquery.velocity.ElementCallback): JQuery; + velocity(properties: Object, duration?: number, easing?: number[], complete?: jquery.velocity.ElementCallback): JQuery; + velocity(properties: Object, duration?: number, complete?: jquery.velocity.ElementCallback): JQuery; + velocity(properties: Object, easing?: string, complete?: jquery.velocity.ElementCallback): JQuery; + velocity(properties: Object, easing?: number[], complete?: jquery.velocity.ElementCallback): JQuery; + velocity(properties: Object, complete?: jquery.velocity.ElementCallback): JQuery; } interface JQueryStatic { @@ -21,6 +21,14 @@ interface JQueryStatic { } declare module jquery.velocity { + interface ElementCallback { + (elements: NodeListOf): void; + } + + interface ProgressCallback { + (elements: NodeListOf, percentComplete: number, timeRemaining: number, timeStart: number): void; + } + interface VelocityStatic { Sequences: any; animate(options: {elements: NodeListOf; properties: Object; options: VelocityOptions}): void; @@ -32,9 +40,9 @@ declare module jquery.velocity { queue?: any; duration?: any; easing?: any; - begin?: Function; - complete?: Function; - progress?: Function; + begin?: ElementCallback; + complete?: ElementCallback; + progress?: ProgressCallback; display?: any; loop?: any; delay?: any;