Options
All
  • Public
  • Public/Protected
  • All
Menu

Class FlowManager<TEvent>

FlowManager

The FlowManager is a singleton that is used to trigger page transitions between pages. It is triggered when Vue.js detects a beforeRouteLeave, passes along the next method and calls it when the transition out of the current page has been completed. It can also be used for hijacking the page flow, this will make sure the new page does not transition in until the release method has been called.

Type parameters

  • TEvent: AbstractEvent

Hierarchy

  • EventDispatcher
    • FlowManager

Implements

  • IDisposable

Index

Constructors

constructor

  • When the FlowManager is initially constructed it detects if we are using a browser that does not support pointer-events. If it's not supported the fallback div is created and injected into the DOM.

    Returns FlowManager

Properties

flowHijacked

flowHijacked: Promise<void> = Promise.resolve()

This property contains the promise that hijacks the flow. When the flow hijack is released this promise will be released as well and the flow is allowed to continue.

Protected listeners

listeners: EventListenerMap<TEvent>

An object containing all event listeners by [[AbstractEvent.type|event type]]. Each value on this object is an Array of [[EventListenerData]] objects for each event listener added with that type.

parent

parent: EventDispatcher | null

The parent EventDispatcher instance. If this instance has no parent, this value will be set to null. The parent is used in the bubbling and capturing phases of events.

see

dispatchEvent for more information on the bubbling and capturing chain

Protected target

target: EventDispatcher

The value that will be set as [[AbstractEvent.target|target]] on events that are dispatched by this EventDispatcher instance. Set to the value passed to the constructor

transitionOut

transitionOut: Promise<void>

This property contains a promise that is the transition out method that is called when we leave the page. When the transition out is done this promise will be resolved and the flow is allowed to continue.

Methods

addEventListener

  • addEventListener<TType>(eventType: TType, handler: EventHandlerForEvent<ExtractEventOfType<TEvent, TType>>, useCapture?: boolean, priority?: number): EventListenerData<TEvent>
  • Adds a new event listener. The given handler function will be called in the following cases:

    • An event with a [[AbstractEvent.type|type]] that is equal to the given eventType is dispatched on this EventDispatcher instance.
    • An event with a [[AbstractEvent.type|type]] that is equal to the given eventType is dispatched on a child EventDispatcher, and the useCapture parameter is set to true
    • An event with [[AbstractEvent.bubbles|bubbles]] set to true and a [[AbstractEvent.type|type]] that is equal to the given eventType is dispatched on a child EventDispatcher, and the useCapture parameter is set to false
    see

    dispatchEvent for more info on the which event listeners are called during capturing and bubbling

    Type parameters

    • TType: TypesForEvent<TEvent>

    Parameters

    • eventType: TType

      The eventType to listen for

    • handler: EventHandlerForEvent<ExtractEventOfType<TEvent, TType>>

      The handler function that will be called when a matching event is dispatched. This function will retrieve the dispatched [[AbstractEvent|event]] as a parameter

    • Optional useCapture: boolean

      Indicates if this handler should be called during the capturing phase of an event chain. If and only if this is set to false will this handler be called during the bubbling phase of an event chain.

    • Optional priority: number

      A number that indicates the priority of this event listener relative to other event listeners of the same type on this EventDispatcher instance. A higher number indicates that this listener will be called earlier.

    Returns EventListenerData<TEvent>

    An object describing the listener that has a [[EventListenerData.dispose|dispose()]] method to remove the listener.

dispatchEvent

  • dispatchEvent(event: TEvent): boolean
  • Dispatches the given event. The dispatch consists of three phases:

    1. The capture phase. We walk through all ancestors of this EventDispatcher, with the top-most instance first and the direct parent of this EventDispatcher last. On each ancestor, we call all event handlers that are added with the useCapture argument set to true and the eventType set to the same [[AbstractEvent.type|type]] as the given event. If this EventDispatcher has no parent, this phase will be skipped.
    2. The target phase. In this phase we call all event handlers on this EventDispatcher instance that listen for the same [[AbstractEvent.type|type]] as the given event.
    3. The bubbling phase. This phase will only be executed if the given event has the [[AbstractEvent.bubbles|bubbles]] property set to true. If so, we will again walk through all ancestors of this EventDispatcher, but in the reverse order: the direct parent of this instance first and the top-most parent last. On every ancestor, we will call all event handlers that are added with the useCapture argument set to false and the eventType set to the same [[AbstractEvent.type|type]] as the given event.

    If any of the event handlers call [[AbstractEvent.stopPropagation|stopPropagation()]], we will skip all event handlers that occur on a target later in the event chain. If an event handler calls [[AbstractEvent.stopImmediatePropagation|stopImmediatePropagation()]], we will also skip any event handlers on the same target in the event chain.

    Parameters

    • event: TEvent

      The event to dispatch

    Returns boolean

    If one of the handlers that have been called during this dispatch called [[AbstractEvent.preventDefault|event.preventDefault()]], this method will return false. If no handlers have been called or none of the handlers have called [[AbstractEvent.preventDefault|event.preventDefault()]], this method will return true.

    Please note: [[AbstractEvent.preventDefault|preventDefault()]] can only be called on events that have their [[AbstractEvent.cancelable|cancelable]] property set to true

dispose

  • dispose(): void
  • This method will probably never be called but if you want to you can dispose of the flow manager and everything will be cleaned.

    Returns void

done

  • done(): void
  • When the flow is fully done this method should be called. For example when the transition out of the current page is completely done. It will reset the transition out promise, clear the previous component id and re-enable all the pointer events so the user can navigate further.

    Returns void

hasEventListener

  • hasEventListener<TType>(eventType: TType, handler?: EventHandlerForEvent<ExtractEventOfType<TEvent, TType>>, useCapture?: boolean): boolean
  • Checks if an event listener matching the given parameters exists on this EventDispatcher instance.

    Type parameters

    • TType: TypesForEvent<TEvent>

    Parameters

    • eventType: TType

      Will only look for event listeners with this eventType

    • Optional handler: EventHandlerForEvent<ExtractEventOfType<TEvent, TType>>

      If set, will only match event listeners that have the same handler function

    • Optional useCapture: boolean

      If set, will only match event listeners that have the same useCapture argument.

      Please note: if no useCapture argument was provided to addEventListener, it is set to false by default

    Returns boolean

    True if one or more event listeners exist

hijackFlow

  • hijackFlow(): Promise<function>
  • When this method is called it will return a promise with a resolve method that can be called to release the hijack. When the hijack is released the flow will continue.

    Returns Promise<function>

isDisposed

  • isDisposed(): boolean
  • After dispose has been called, this method returns true. Use this method to determine whether dispose() should be run again.

    Returns boolean

Protected listenerSorter

  • listenerSorter(e1: EventListenerData, e2: EventListenerData): number
  • Method that is used to sort arrays of event listeners based on their [[EventListenerData.priority|priority]] property. Higher priority will be sorted before lower priority values.

    Parameters

    • e1: EventListenerData

      The first event listener to compare

    • e2: EventListenerData

      The other event listener to compare to

    Returns number

    A number that indicates the sorting according to the JS sort() method.

removeAllEventListeners

  • removeAllEventListeners(eventType?: TypesForEvent<TEvent>): void
  • Removes all event listeners that have a [[AbstractEvent.type|type]] of the given eventType from this EventDispatcher instance, regardless of their [[EventListenerData.handler|handler]] or [[EventListenerData.useCapture|useCapture]] property.

    Please note: if you remove an event listener during the dispatch of an event it will not be called anymore, even if it was supposed to be called in the same event chain

    Parameters

    • Optional eventType: TypesForEvent<TEvent>

      The [[AbstractEvent.type|type]] of event to remove. If not provided, all event listeners will be removed regardless of their type.

    Returns void

removeEventListener

  • removeEventListener<TType>(eventType: TType, handler: EventHandlerForEvent<any>, useCapture?: boolean): void
  • Removes all event listeners that match the given parameters from this EventDispatcher instance.

    Please note: if you remove an event listener during the dispatch of an event it will not be called anymore, even if it was supposed to be called in the same event chain

    Type parameters

    • TType: TypesForEvent<TEvent>

    Parameters

    • eventType: TType

      Only event listeners of that have this eventType are removed

    • handler: EventHandlerForEvent<any>

      Only event listeners that have this handler function will be removed

    • Optional useCapture: boolean

      Only event listeners that have been added with the same useCapture parameter will be removed. Please note: if no useCapture argument is provided, only event listeners that have useCapture set to false will be removed.

    Returns void

start

  • The vue router triggers the onLeave method twice, so we need to store the current componentId to avoid weird page transition issues. If it's triggered on the same page we release the hijack right away.

    Parameters

    • pageInstance: IAbstractPageTransitionComponent

      The reference to the current page instance

    • release: function

      The release method that will allow the vue-router to continue

        • (param?: string | boolean): void
        • Parameters

          • Optional param: string | boolean

          Returns void

    • to: IRoute

      The target route we are navigating to

    • from: IRoute

      The current route we are navigating away from

    Returns void

willTrigger

  • willTrigger(eventType: TypesForEvent<TEvent>): boolean
  • Checks if an event listener with a [[EventListenerData.type|type]] of the given eventType exists on this EventDispatcher or any ancestor EventDispatcher instance.

    Parameters

    • eventType: TypesForEvent<TEvent>

      The event type to check for

    Returns boolean

    true if a matching listener is found

Generated using TypeDoc