From 7994d590c308a6c414ab34bc34f902760f3c3534 Mon Sep 17 00:00:00 2001 From: Nathan Shively-Sanders <293473+sandersn@users.noreply.github.com> Date: Tue, 15 Sep 2020 14:25:33 -0700 Subject: [PATCH] web-animations-js: remove ts3.1 support (#47608) TS 3.1 is no longer supported on Definitely Typed. --- types/web-animations-js/package.json | 11 -- types/web-animations-js/ts3.1/index.d.ts | 106 ------------------ types/web-animations-js/ts3.1/tsconfig.json | 25 ----- types/web-animations-js/ts3.1/tslint.json | 1 - .../ts3.1/web-animations-js-tests.ts | 82 -------------- 5 files changed, 225 deletions(-) delete mode 100644 types/web-animations-js/package.json delete mode 100644 types/web-animations-js/ts3.1/index.d.ts delete mode 100644 types/web-animations-js/ts3.1/tsconfig.json delete mode 100644 types/web-animations-js/ts3.1/tslint.json delete mode 100644 types/web-animations-js/ts3.1/web-animations-js-tests.ts diff --git a/types/web-animations-js/package.json b/types/web-animations-js/package.json deleted file mode 100644 index 54d5b8743e..0000000000 --- a/types/web-animations-js/package.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "private": true, - "types": "index", - "typesVersions": { - "<=3.1": { - "*": [ - "ts3.1/*" - ] - } - } -} diff --git a/types/web-animations-js/ts3.1/index.d.ts b/types/web-animations-js/ts3.1/index.d.ts deleted file mode 100644 index ee915bc5f8..0000000000 --- a/types/web-animations-js/ts3.1/index.d.ts +++ /dev/null @@ -1,106 +0,0 @@ -type AnimationEffectTimingFillMode = "none" | "forwards" | "backwards" | "both" | "auto"; -type AnimationEffectTimingPlaybackDirection = "normal" | "reverse" | "alternate" | "alternate-reverse"; - -interface AnimationPlaybackEvent { - target: Animation; - readonly currentTime: number | null; - readonly timelineTime: number | null; - type: string; - bubbles: boolean; - cancelable: boolean; - currentTarget: Animation; - defaultPrevented: boolean; - eventPhase: number; - timeStamp: number; -} - -interface AnimationPlaybackEventInit extends EventInit { - currentTime?: number | null; - timelineTime?: number | null; -} - -declare var AnimationPlaybackEvent: { - prototype: AnimationPlaybackEvent; - new(type: string, eventInitDict?: AnimationPlaybackEventInit): AnimationPlaybackEvent; -}; - -interface AnimationKeyFrame { - easing?: string | string[]; - offset?: number | Array | null; - opacity?: number | number[]; - transform?: string | string[]; - // [key: string]: string | number | [string | number, string | number] | undefined; (duplicate string indexer in TypeScript 2.7+) -} - -interface AnimationTimeline { - readonly currentTime: number | null; - getAnimations(): Animation[]; - play(effect: KeyframeEffect): Animation; -} -interface AnimationEffectTiming { - delay?: number; - direction?: AnimationEffectTimingPlaybackDirection; - duration?: number; - easing?: string; - endDelay?: number; - fill?: AnimationEffectTimingFillMode; - iterationStart?: number; - iterations?: number; - playbackRate?: number; -} - -interface AnimationEffectReadOnly { - readonly timing: number; - getComputedTiming(): ComputedTimingProperties; -} - -interface ComputedTimingProperties { - endTime: number; - activeDuration: number; - localTime: number | null; - progress: number | null; - currentIteration: number | null; -} - -type AnimationEventListener = ((this: Animation, evt: AnimationPlaybackEvent) => any) | null; - -interface Animation extends EventTarget { - currentTime: number | null; - id: string; - oncancel: AnimationEventListener; - onfinish: AnimationEventListener; - readonly playState: AnimationPlayState; - playbackRate: number; - startTime: number | null; - cancel(): void; - finish(): void; - pause(): void; - play(): void; - reverse(): void; - addEventListener(type: "finish" | "cancel", handler: EventListener): void; - removeEventListener(type: "finish" | "cancel", handler: EventListener): void; - effect: AnimationEffect | null; - readonly finished: Promise; - readonly ready: Promise; - timeline: AnimationTimeline | null; -} - -declare var Animation: { - prototype: Animation; - new(effect?: AnimationEffect | null, timeline?: AnimationTimeline | null): Animation; -}; - -declare class SequenceEffect extends KeyframeEffect { - constructor(effects: KeyframeEffect[]); -} -declare class GroupEffect extends KeyframeEffect { - constructor(effects: KeyframeEffect[]); -} -interface Element { - animate(effect: AnimationKeyFrame | AnimationKeyFrame[] | null, timing: number | AnimationEffectTiming): Animation; - animate(keyframes: Keyframe[] | PropertyIndexedKeyframes | null, options?: number | KeyframeAnimationOptions): Animation; - getAnimations(): Animation[]; -} -interface Document { - readonly timeline: AnimationTimeline; -} diff --git a/types/web-animations-js/ts3.1/tsconfig.json b/types/web-animations-js/ts3.1/tsconfig.json deleted file mode 100644 index d78a0d3aaf..0000000000 --- a/types/web-animations-js/ts3.1/tsconfig.json +++ /dev/null @@ -1,25 +0,0 @@ -{ - "compilerOptions": { - "module": "commonjs", - "lib": [ - "es5", - "es6", - "dom" - ], - "noImplicitAny": true, - "noImplicitThis": true, - "strictNullChecks": true, - "strictFunctionTypes": true, - "baseUrl": "../../", - "typeRoots": [ - "../../" - ], - "types": [], - "noEmit": true, - "forceConsistentCasingInFileNames": true - }, - "files": [ - "index.d.ts", - "web-animations-js-tests.ts" - ] -} diff --git a/types/web-animations-js/ts3.1/tslint.json b/types/web-animations-js/ts3.1/tslint.json deleted file mode 100644 index 3db14f85ea..0000000000 --- a/types/web-animations-js/ts3.1/tslint.json +++ /dev/null @@ -1 +0,0 @@ -{ "extends": "dtslint/dt.json" } diff --git a/types/web-animations-js/ts3.1/web-animations-js-tests.ts b/types/web-animations-js/ts3.1/web-animations-js-tests.ts deleted file mode 100644 index 39d0e21faf..0000000000 --- a/types/web-animations-js/ts3.1/web-animations-js-tests.ts +++ /dev/null @@ -1,82 +0,0 @@ -// From the documentation -function test_doc() { - const elem = document.createElement('div'); - const animation = elem.animate({ - opacity: [0.5, 1], - transform: ['scale(0.5)', 'scale(1)'] - }, { - direction: 'alternate', - duration: 500, - iterations: Infinity - }); -} -// From https://io2015codelabs.appspot.com/codelabs/web-animations-transitions-playbackcontrol -// To test KeyframeEffect, SequenceEffect and GroupEffect -function test_AnimationsApiNext() { - function buildFadeIn(target: HTMLElement) { - const steps: Keyframe[] = []; - return new KeyframeEffect(target, steps, { - duration: 500, - delay: -1000, - fill: 'backwards', - easing: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)' - }); - } - function buildFadeOut(target: HTMLElement) { - const angle = Math.pow((Math.random() * 16) - 6, 3); - const offset = (Math.random() * 20) - 10; - const transform = `translate(${offset}em, 20em) rotate(${angle}deg) scale(0)`; - const steps: Keyframe[] = []; - return new KeyframeEffect(target, steps, { - duration: 1500, - easing: 'ease-in' - }); - } - const effectNode = document.createElement('div'); - effectNode.className = 'circleEffect'; - // tslint:disable-next-line:no-unnecessary-type-assertion - const bounds = document.documentElement!.getBoundingClientRect(); - effectNode.style.left = `${bounds.left + bounds.width / 2}px`; - effectNode.style.top = `${bounds.top + bounds.height / 2}px`; - const header = document.querySelector('header'); - if (header) { - header.appendChild(effectNode); - } - const newColor = `hsl(${Math.round(Math.random() * 255)}, 46%, 42%)`; - effectNode.style.background = newColor; - const scaleSteps: Keyframe[] = []; - const timing: AnimationEffectTiming = { duration: 2500, easing: 'ease-in-out', fill: "backwards" }; - const scaleEffect = new KeyframeEffect(effectNode, scaleSteps, timing); - const fadeEffect = new SequenceEffect([buildFadeOut(effectNode), buildFadeIn(effectNode)]); - const allEffects = [scaleEffect, fadeEffect]; - // Play all animations within this group. - const groupEffect = new GroupEffect(allEffects); - const anim = document.timeline.play(groupEffect); -} - -// https://developer.mozilla.org/en-US/docs/Web/API/Animation/Animation -// http://codepen.io/rachelnabors/pen/eJyWzm/?editors=0010 -function test_whiteRabbit() { - const whiteRabbit = document.getElementById("rabbit"); - if (whiteRabbit) { - const rabbitDownKeyframes = new KeyframeEffect( - whiteRabbit, - [], - { duration: 3000, fill: 'forwards' } - ); - const rabbitDownAnimation = new Animation(rabbitDownKeyframes, document.timeline); - // On tap or click, - whiteRabbit.addEventListener("mousedown", downHeGoes, false); - whiteRabbit.addEventListener("touchstart", downHeGoes, false); - - // Trigger a single-fire animation - function downHeGoes(event: Event) { - // Remove those event listeners - whiteRabbit!.removeEventListener("mousedown", downHeGoes, false); - whiteRabbit!.removeEventListener("touchstart", downHeGoes, false); - - // Play rabbit animation - rabbitDownAnimation.play(); - } - } -}