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.
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.
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.
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.
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
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.
Adds a new event listener. The given handler function will be called in the following cases:
eventType
is dispatched
on this EventDispatcher instance.eventType
is dispatched
on a child EventDispatcher, and the useCapture
parameter is set to true
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
The eventType to listen for
The handler function that will be called when a matching event is dispatched. This function will retrieve the dispatched [[AbstractEvent|event]] as a parameter
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.
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.
An object describing the listener that has a [[EventListenerData.dispose|dispose()]] method to remove the listener.
Dispatches the given event. The dispatch consists of three phases:
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.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.
The event to dispatch
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
This method will probably never be called but if you want to you can dispose of the flow manager and everything will be cleaned.
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.
Checks if an event listener matching the given parameters exists on this EventDispatcher instance.
Will only look for event listeners with this eventType
If set, will only match event listeners that have the same handler function
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 tofalse
by default
True if one or more event listeners exist
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.
After dispose has been called, this method returns true. Use this method to determine whether dispose() should be run again.
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.
The first event listener to compare
The other event listener to compare to
A number that indicates the sorting according to the JS sort() method.
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
The [[AbstractEvent.type|type]] of event to remove. If not provided, all event listeners will be removed regardless of their type.
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
Only event listeners of that have this eventType
are removed
Only event listeners that have this handler function will be removed
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.
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.
The reference to the current page instance
The release method that will allow the vue-router to continue
The target route we are navigating to
The current route we are navigating away from
Checks if an event listener with a [[EventListenerData.type|type]] of the given eventType
exists
on this EventDispatcher or any ancestor EventDispatcher instance.
The event type to check for
true
if a matching listener is found
Generated using TypeDoc
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.