From 52854d5f1c46796481428d3ab7be722b6c47c869 Mon Sep 17 00:00:00 2001 From: Greg Smith Date: Mon, 10 Aug 2015 13:17:20 -0500 Subject: [PATCH] Update velocity-animate.d.ts for latest Velocity --- velocity-animate/velocity-animate-tests.ts | 59 +++++++++++ velocity-animate/velocity-animate.d.ts | 116 ++++++++++++++------- 2 files changed, 136 insertions(+), 39 deletions(-) diff --git a/velocity-animate/velocity-animate-tests.ts b/velocity-animate/velocity-animate-tests.ts index 96400d365..afcd8b563 100644 --- a/velocity-animate/velocity-animate-tests.ts +++ b/velocity-animate/velocity-animate-tests.ts @@ -293,3 +293,62 @@ function advanced_utility_function () { options: { duration: 1500 } }); } + +function ui_pack_sequence_running() { + var $element1: JQuery; + var $element2: JQuery; + var $element3: JQuery; + + $element1.velocity({ translateX: 100 }, 1000, function() { + $element2.velocity({ translateX: 200 }, 1000, function() { + $element3.velocity({ translateX: 300 }, 1000); + }); + }); + + var mySequence = [ + { e: $element1, p: { translateX: 100 }, o: { duration: 1000 } }, + { e: $element2, p: { translateX: 200 }, o: { duration: 1000 } }, + { e: $element3, p: { translateX: 300 }, o: { duration: 1000 } } + ]; + $.Velocity.RunSequence(mySequence); + + var mySequence2 = [ + { e: $element1, p: { translateX: 100 }, o: { duration: 1000 } }, + /* The call below will run at the same time as the first call. */ + { e: $element2, p: { translateX: 200 }, o: { duration: 1000, sequenceQueue: false } }, + /* As normal, the call below will run once the second call is complete. */ + { e: $element3, p: { translateX: 300 }, o: { duration: 1000 } } + ]; + $.Velocity.RunSequence(mySequence2); +} + +function ui_pack_registration() { + var $element: JQuery; + + $.Velocity.RegisterEffect("callout.pulse", { + defaultDuration: 900, + calls: [ + [ { scaleX: 1.1 }, 0.50 ], + [ { scaleX: 1 }, 0.50 ] + ] + }); + $element.velocity("callout.pulse"); + + $.Velocity + .RegisterEffect("transition.flipXIn", { + defaultDuration: 700, + calls: [ + [ { opacity: 1, rotateY: [ 0, -55 ] } ] + ] + }) + .RegisterEffect("transition.flipXOut", { + defaultDuration: 700, + calls: [ + [ { opacity: 0, rotateY: 55 } ] + ], + reset: { rotateY: 0 } + }); + $element + .velocity("transition.flipXIn") + .velocity("transition.flipXOut", { delay: 1000 }); +} diff --git a/velocity-animate/velocity-animate.d.ts b/velocity-animate/velocity-animate.d.ts index 6946da972..9a1f58aa0 100644 --- a/velocity-animate/velocity-animate.d.ts +++ b/velocity-animate/velocity-animate.d.ts @@ -1,4 +1,4 @@ -// Type definitions for Velocity 0.0.22 +// Type definitions for Velocity 1.2.2 // Project: http://velocityjs.org/ // Definitions by: Greg Smith // Definitions: https://github.com/borisyankov/DefinitelyTyped @@ -6,14 +6,13 @@ /// 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?: 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; + velocity(name: string, options: jquery.velocity.RegisteredEffectOptions): JQuery; + velocity(options: {properties: jquery.velocity.Properties; options: jquery.velocity.Options}): JQuery; + velocity(properties: jquery.velocity.Properties, options: jquery.velocity.Options): JQuery; + velocity(properties: jquery.velocity.Properties, duration: number, easing: jquery.velocity.Easing, complete?: jquery.velocity.ElementCallback): JQuery; + velocity(properties: jquery.velocity.Properties, duration: number, complete?: jquery.velocity.ElementCallback): JQuery; + velocity(properties: jquery.velocity.Properties, easing: jquery.velocity.Easing, complete?: jquery.velocity.ElementCallback): JQuery; + velocity(properties: jquery.velocity.Properties, complete?: jquery.velocity.ElementCallback): JQuery; } interface JQueryStatic { @@ -21,42 +20,81 @@ interface JQueryStatic { } declare module jquery.velocity { - interface ElementCallback { - (elements: NodeListOf): void; + type Properties = Object; + type Easing = string|number[]; + type ElementCallback = (elements: NodeListOf) => void; + type ProgressCallback = (elements: NodeListOf, percentComplete: number, timeRemaining: number, timeStart: number) => void; + type EffectCall = + [Properties] | + [Properties, number] | + [Properties, EffectCallOptions] | + [Properties, number, EffectCallOptions]; + + interface EffectCallOptions { + delay?: any; + easing?: any; } - interface ProgressCallback { - (elements: NodeListOf, percentComplete: number, timeRemaining: number, timeStart: number): void; + interface Options { + queue?: string|boolean; + duration?: string|number; + easing?: Easing; + begin?: ElementCallback; + complete?: ElementCallback; + progress?: ProgressCallback; + display?: string|boolean; + loop?: number|boolean; + delay?: number|boolean; + mobileHA?: boolean; + _cacheValues?: boolean; + } + + interface RegisterEffectOptions { + defaultDuration?: number; + calls: EffectCall[]; + reset?: Object; + } + + interface RegisteredEffectOptions { + duration?: string|number; + begin?: ElementCallback; + complete?: ElementCallback; + display?: string; + delay?: number; + mobileHA?: boolean; + _cacheValues?: boolean; + stagger?: number; + drag?: boolean; + backwards?: boolean; + } + + interface SequenceCall { + e: HTMLElement|JQuery; + p: Properties; + o: SequenceOptions; + } + + interface SequenceOptions extends Options { + sequenceQueue?: boolean; } 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; - /** - * Get a hook value. Hooks are the subvalues of multi-value CSS properties. - * It features the same API as $.css(). - */ - hook(element: HTMLElement|JQuery, cssKey: string): string; - /** - * Set a hook value. Hooks are the subvalues of multi-value CSS properties. - * It features the same API as $.css(). - */ - hook(element: HTMLElement|JQuery, cssKey: string, cssValue: string): void; - } + animate(options: {elements: NodeListOf; properties: Properties; options: Options}): any; + animate(elements: HTMLElement|NodeListOf, properties: Properties, options: Options): any; + RegisterEffect(name: string, options: RegisterEffectOptions): VelocityStatic; + RunSequence(sequence: SequenceCall[]): VelocityStatic; - interface VelocityOptions { - queue?: any; - duration?: any; - easing?: any; - begin?: ElementCallback; - complete?: ElementCallback; - progress?: ProgressCallback; - display?: any; - loop?: any; - delay?: any; - mobileHA?: boolean; - _cacheValues?: boolean; + /** + * Get a hook value. Hooks are the subvalues of multi-value CSS properties. + * It features the same API as $.css(). + */ + hook(element: HTMLElement|JQuery, cssKey: string): string; + + /** + * Set a hook value. Hooks are the subvalues of multi-value CSS properties. + * It features the same API as $.css(). + */ + hook(element: HTMLElement|JQuery, cssKey: string, cssValue: string): void; } }