From ce701b90f23acddf0673cea62a3c5c2a0d8d04a0 Mon Sep 17 00:00:00 2001 From: samuelOsborne Date: Sun, 20 Jun 2021 17:26:01 +0200 Subject: [PATCH] feat(Interactions): Added possibility to mix 'on-show' with all base interaction types --- examples/index.html | 6 +++ .../multiple-interactions/show-and-click.html | 52 +++++++++++++++++++ .../show-and-freeze-click.html | 52 +++++++++++++++++++ .../multiple-interactions/show-and-hover.html | 52 +++++++++++++++++++ .../show-and-morph-lock.html | 52 +++++++++++++++++++ .../multiple-interactions/show-and-morph.html | 52 +++++++++++++++++++ .../show-and-switch.html | 52 +++++++++++++++++++ src/index.ts | 28 +++++++++- .../{FreezeClick.ts => freeze-click.ts} | 0 src/interactions/interaction-type.ts | 8 ++- src/interactions/show-and-click.ts | 22 ++++++++ src/interactions/show-and-freeze-click.ts | 22 ++++++++ src/interactions/show-and-hover.ts | 22 ++++++++ src/interactions/show-and-morph-lock.ts | 22 ++++++++ src/interactions/show-and-morph.ts | 22 ++++++++ src/interactions/show-and-switch.ts | 22 ++++++++ src/interactions/switch.ts | 3 +- 17 files changed, 484 insertions(+), 5 deletions(-) create mode 100644 examples/multiple-interactions/show-and-click.html create mode 100644 examples/multiple-interactions/show-and-freeze-click.html create mode 100644 examples/multiple-interactions/show-and-hover.html create mode 100644 examples/multiple-interactions/show-and-morph-lock.html create mode 100644 examples/multiple-interactions/show-and-morph.html create mode 100644 examples/multiple-interactions/show-and-switch.html rename src/interactions/{FreezeClick.ts => freeze-click.ts} (100%) create mode 100644 src/interactions/show-and-click.ts create mode 100644 src/interactions/show-and-freeze-click.ts create mode 100644 src/interactions/show-and-hover.ts create mode 100644 src/interactions/show-and-morph-lock.ts create mode 100644 src/interactions/show-and-morph.ts create mode 100644 src/interactions/show-and-switch.ts diff --git a/examples/index.html b/examples/index.html index 0c3fcca..96bba77 100644 --- a/examples/index.html +++ b/examples/index.html @@ -21,6 +21,12 @@

Examples

  • Interaction: Morph
  • Interaction: Morph lock
  • Interaction: Play-on-show
    • +
  • Show and click
    • +
  • Show and hover
    • +
  • Show and freeze click
    • +
  • Show and morph
    • +
  • Show and morph-lock
    • +
  • Show and switch
  • Interaction: Play-once
  • Interaction: Switch
  • Attribute: view-box
    • diff --git a/examples/multiple-interactions/show-and-click.html b/examples/multiple-interactions/show-and-click.html new file mode 100644 index 0000000..da2c6f2 --- /dev/null +++ b/examples/multiple-interactions/show-and-click.html @@ -0,0 +1,52 @@ + + + + + Show-and-click example + + + + +

    + Interaction: 'Show-and-click' +

    +
    +

    Scroll down!

    +
    +

    Interaction: 'show-and-click'

    +
    + + +
    + + + + diff --git a/examples/multiple-interactions/show-and-freeze-click.html b/examples/multiple-interactions/show-and-freeze-click.html new file mode 100644 index 0000000..e1e3d55 --- /dev/null +++ b/examples/multiple-interactions/show-and-freeze-click.html @@ -0,0 +1,52 @@ + + + + + Show-and-click example + + + + +

    + Interaction: 'show-and-freeze-click' +

    +
    +

    Scroll down!

    +
    +

    Interaction: 'show-and-freeze-click'

    +
    + + +
    + + + + diff --git a/examples/multiple-interactions/show-and-hover.html b/examples/multiple-interactions/show-and-hover.html new file mode 100644 index 0000000..9f8822e --- /dev/null +++ b/examples/multiple-interactions/show-and-hover.html @@ -0,0 +1,52 @@ + + + + + Show-and-click example + + + + +

    + Interaction: 'show-and-hover' +

    +
    +

    Scroll down!

    +
    +

    Interaction: 'show-and-hover'

    +
    + + +
    + + + + diff --git a/examples/multiple-interactions/show-and-morph-lock.html b/examples/multiple-interactions/show-and-morph-lock.html new file mode 100644 index 0000000..d42e92b --- /dev/null +++ b/examples/multiple-interactions/show-and-morph-lock.html @@ -0,0 +1,52 @@ + + + + + Show-and-click example + + + + +

    + Interaction: 'show-and-morph-lock' +

    +
    +

    Scroll down!

    +
    +

    Interaction: 'show-and-morph-lock'

    +
    + + +
    + + + + diff --git a/examples/multiple-interactions/show-and-morph.html b/examples/multiple-interactions/show-and-morph.html new file mode 100644 index 0000000..44b37a2 --- /dev/null +++ b/examples/multiple-interactions/show-and-morph.html @@ -0,0 +1,52 @@ + + + + + Show-and-click example + + + + +

    + Interaction: 'show-and-morph' +

    +
    +

    Scroll down!

    +
    +

    Interaction: 'show-and-morph'

    +
    + + +
    + + + + diff --git a/examples/multiple-interactions/show-and-switch.html b/examples/multiple-interactions/show-and-switch.html new file mode 100644 index 0000000..880303d --- /dev/null +++ b/examples/multiple-interactions/show-and-switch.html @@ -0,0 +1,52 @@ + + + + + Show-and-click example + + + + +

    + Interaction: 'show-and-switch' +

    +
    +

    Scroll down!

    +
    +

    Interaction: 'show-and-switch'

    +
    + + +
    + + + + diff --git a/src/index.ts b/src/index.ts index e1bb18e..603c68d 100644 --- a/src/index.ts +++ b/src/index.ts @@ -9,7 +9,13 @@ import {MorphLock} from "./interactions/morph-lock"; import {Switch} from "./interactions/switch"; import {PlayOnShow} from "./interactions/play-on-show"; import {PlayOnce} from "./interactions/play-once"; -import {FreezeClick} from "./interactions/FreezeClick"; +import {FreezeClick} from "./interactions/freeze-click"; +import {ShowAndClick} from "./interactions/show-and-click"; +import {ShowAndHover} from "./interactions/show-and-hover"; +import {ShowAndMorph} from "./interactions/show-and-morph"; +import {ShowAndMorphLock} from "./interactions/show-and-morph-lock"; +import {ShowAndFreezeClick} from "./interactions/show-and-freeze-click"; +import {ShowAndSwitch} from "./interactions/show-and-switch"; import {Stroke} from "./modifiers/stroke"; import {InteractionType} from "./interactions/interaction-type"; @@ -65,7 +71,7 @@ export class LottieInteractive extends FASTElement { this.playOnce = newValue; } /** - * Path to the animation + * Path or URL to the animation * @public */ @attr path: string; @@ -304,6 +310,24 @@ export class LottieInteractive extends FASTElement { case InteractionType.PlayOnShow: this.currentInteraction = new PlayOnShow(this.lottie, this.animationContainer, this); break; + case InteractionType.ShowAndClick: + this.currentInteraction = new ShowAndClick(this.lottie, this.animationContainer, this); + break; + case InteractionType.ShowAndHover: + this.currentInteraction = new ShowAndHover(this.lottie, this.animationContainer, this); + break; + case InteractionType.ShowAndMorph: + this.currentInteraction = new ShowAndMorph(this.lottie, this.animationContainer, this); + break; + case InteractionType.ShowAndMorphLock: + this.currentInteraction = new ShowAndMorphLock(this.lottie, this.animationContainer, this); + break; + case InteractionType.ShowAndFreezeClick: + this.currentInteraction = new ShowAndFreezeClick(this.lottie, this.animationContainer, this); + break; + case InteractionType.ShowAndSwitch: + this.currentInteraction = new ShowAndSwitch(this.lottie, this.animationContainer, this); + break; case InteractionType.PlayOnce: this.currentInteraction = new PlayOnce(this.lottie, this.animationContainer, this); break; diff --git a/src/interactions/FreezeClick.ts b/src/interactions/freeze-click.ts similarity index 100% rename from src/interactions/FreezeClick.ts rename to src/interactions/freeze-click.ts diff --git a/src/interactions/interaction-type.ts b/src/interactions/interaction-type.ts index 22cc4a0..4ce7e9e 100644 --- a/src/interactions/interaction-type.ts +++ b/src/interactions/interaction-type.ts @@ -6,5 +6,11 @@ export enum InteractionType { PlayOnce = "play-once", Switch = "switch", MorphLock = "morph-lock", - FreezeClick = "freeze-click" + FreezeClick = "freeze-click", + ShowAndClick = "show-and-click", + ShowAndHover = "show-and-hover", + ShowAndMorph = "show-and-morph", + ShowAndMorphLock = "show-and-morph-lock", + ShowAndFreezeClick = "show-and-freeze-click", + ShowAndSwitch = "show-and-switch" } diff --git a/src/interactions/show-and-click.ts b/src/interactions/show-and-click.ts new file mode 100644 index 0000000..a9373f5 --- /dev/null +++ b/src/interactions/show-and-click.ts @@ -0,0 +1,22 @@ +import {LottiePlayer} from "Lottie-web"; +import {BaseInteraction} from "./base-interaction"; +import {InteractionType} from "./interaction-type"; +import {FASTElement} from "@microsoft/fast-element"; +import {PlayOnShow} from "./play-on-show"; +import {Click} from "./click"; + +export class ShowAndClick extends BaseInteraction { + private playOnShow: PlayOnShow; + private playOnClick: Click; + + constructor(player: LottiePlayer, element: HTMLElement, fastElement: FASTElement) { + super(player, element, fastElement); + + this.interactionType = InteractionType.ShowAndClick; + this.playOnShow = new PlayOnShow(player, element, fastElement); + this.playOnClick = new Click(player, element, fastElement); + } + + removeListener(): void { + } +} diff --git a/src/interactions/show-and-freeze-click.ts b/src/interactions/show-and-freeze-click.ts new file mode 100644 index 0000000..9e2fe67 --- /dev/null +++ b/src/interactions/show-and-freeze-click.ts @@ -0,0 +1,22 @@ +import {LottiePlayer} from "Lottie-web"; +import {BaseInteraction} from "./base-interaction"; +import {InteractionType} from "./interaction-type"; +import {FASTElement} from "@microsoft/fast-element"; +import {PlayOnShow} from "./play-on-show"; +import {FreezeClick} from "./freeze-click"; + +export class ShowAndFreezeClick extends BaseInteraction { + private playOnShow: PlayOnShow; + private playOnFreezeClick: FreezeClick; + + constructor(player: LottiePlayer, element: HTMLElement, fastElement: FASTElement) { + super(player, element, fastElement); + + this.interactionType = InteractionType.ShowAndClick; + this.playOnShow = new PlayOnShow(player, element, fastElement); + this.playOnFreezeClick = new FreezeClick(player, element, fastElement); + } + + removeListener(): void { + } +} diff --git a/src/interactions/show-and-hover.ts b/src/interactions/show-and-hover.ts new file mode 100644 index 0000000..0efc9bd --- /dev/null +++ b/src/interactions/show-and-hover.ts @@ -0,0 +1,22 @@ +import {LottiePlayer} from "Lottie-web"; +import {BaseInteraction} from "./base-interaction"; +import {InteractionType} from "./interaction-type"; +import {FASTElement} from "@microsoft/fast-element"; +import {PlayOnShow} from "./play-on-show"; +import {Hover} from "./hover"; + +export class ShowAndHover extends BaseInteraction { + private playOnShow: PlayOnShow; + private playOnHover: Hover; + + constructor(player: LottiePlayer, element: HTMLElement, fastElement: FASTElement) { + super(player, element, fastElement); + + this.interactionType = InteractionType.ShowAndClick; + this.playOnShow = new PlayOnShow(player, element, fastElement); + this.playOnHover = new Hover(player, element, fastElement); + } + + removeListener(): void { + } +} diff --git a/src/interactions/show-and-morph-lock.ts b/src/interactions/show-and-morph-lock.ts new file mode 100644 index 0000000..ebbd322 --- /dev/null +++ b/src/interactions/show-and-morph-lock.ts @@ -0,0 +1,22 @@ +import {LottiePlayer} from "Lottie-web"; +import {BaseInteraction} from "./base-interaction"; +import {InteractionType} from "./interaction-type"; +import {FASTElement} from "@microsoft/fast-element"; +import {PlayOnShow} from "./play-on-show"; +import {MorphLock} from "./morph-lock"; + +export class ShowAndMorphLock extends BaseInteraction { + private playOnShow: PlayOnShow; + private playOnMorphLock: MorphLock; + + constructor(player: LottiePlayer, element: HTMLElement, fastElement: FASTElement) { + super(player, element, fastElement); + + this.interactionType = InteractionType.ShowAndClick; + this.playOnShow = new PlayOnShow(player, element, fastElement); + this.playOnMorphLock = new MorphLock(player, element, fastElement); + } + + removeListener(): void { + } +} diff --git a/src/interactions/show-and-morph.ts b/src/interactions/show-and-morph.ts new file mode 100644 index 0000000..1ffd51d --- /dev/null +++ b/src/interactions/show-and-morph.ts @@ -0,0 +1,22 @@ +import {LottiePlayer} from "Lottie-web"; +import {BaseInteraction} from "./base-interaction"; +import {InteractionType} from "./interaction-type"; +import {FASTElement} from "@microsoft/fast-element"; +import {PlayOnShow} from "./play-on-show"; +import {Morph} from "./morph"; + +export class ShowAndMorph extends BaseInteraction { + private playOnShow: PlayOnShow; + private playOnMorph: Morph; + + constructor(player: LottiePlayer, element: HTMLElement, fastElement: FASTElement) { + super(player, element, fastElement); + + this.interactionType = InteractionType.ShowAndMorph; + this.playOnShow = new PlayOnShow(player, element, fastElement); + this.playOnMorph = new Morph(player, element, fastElement); + } + + removeListener(): void { + } +} diff --git a/src/interactions/show-and-switch.ts b/src/interactions/show-and-switch.ts new file mode 100644 index 0000000..567ed17 --- /dev/null +++ b/src/interactions/show-and-switch.ts @@ -0,0 +1,22 @@ +import {LottiePlayer} from "Lottie-web"; +import {BaseInteraction} from "./base-interaction"; +import {InteractionType} from "./interaction-type"; +import {FASTElement} from "@microsoft/fast-element"; +import {PlayOnShow} from "./play-on-show"; +import {Switch} from "./switch"; + +export class ShowAndSwitch extends BaseInteraction { + private playOnShow: PlayOnShow; + private playOnSwitch: Switch; + + constructor(player: LottiePlayer, element: HTMLElement, fastElement: FASTElement) { + super(player, element, fastElement); + + this.interactionType = InteractionType.ShowAndClick; + this.playOnShow = new PlayOnShow(player, element, fastElement); + this.playOnSwitch = new Switch(player, element, fastElement); + } + + removeListener(): void { + } +} diff --git a/src/interactions/switch.ts b/src/interactions/switch.ts index fe60329..0321e3a 100644 --- a/src/interactions/switch.ts +++ b/src/interactions/switch.ts @@ -29,13 +29,12 @@ export class Switch extends BaseInteraction { this.direction = 1; this.playing = true; this.lottiePlayer.setDirection(this.direction); - this.lottiePlayer.goToAndPlay(0, true); } else if (this.direction === 1) { this.direction = -1; this.playing = true; this.lottiePlayer.setDirection(this.direction); - this.lottiePlayer.play(); } + this.lottiePlayer.play(); } public playOnClick(): void {