VisionPlayer Documentation | Module: lib/ui/Popup

Version: 1.5.0
Author: Frank Kudermann - alphanull
License: MIT
Requires: publisher
Source: Popup.js, line 16

Constructor

Creates a new Popup instance.

Parameters:

Name	Type	Attributes	Description
`options`	Popup~options	optional	Configuration settings for this popup instance.

Members

private aConf :Object<Popup~options>

Holds the active configuration that applies to the current action.

Type: Object<Popup~options>
Source: Popup.js, line 31

private iConf :Object<Popup~options>

Holds the instance configuration for each instance.

Type: Object<Popup~options>
Source: Popup.js, line 38

private els :Object<HTMLElement>

All references to Dom nodes are stored here.

Properties

Name	Type	Description
`target`	HTMLElement	The "target" of the Popup, ie the Element the Popup points to. Based on this Element, also the layout is calculated.
`root`	HTMLElement	The root element of this widget (i.e. The outermost layer).
`bg`	HTMLElement	The "background" layer, which is displayed underneath the popup. Can be used to create a "dim" effect when styled appropriately, and has also an event that closes the popup when the user clicks in this area.
`box`	HTMLElement	The popup element.
`pointer`	HTMLElement	The pointer element.
`cntWrapper`	HTMLElement	The outer content element. Just needed to have some extra margin around the scrollbars, if needed.
`cnt`	HTMLElement	The inner content element, which holds popup content injected later on.

Type: Object<HTMLElement>
Source: Popup.js, line 54

private handlers :Object<function()>

References to the various handlers, all bound (to "this").

Properties

Name	Type	Description
`hide`	function	Handler for the "hide" event.
`resize`	function	Handler for resize events.
`key`	function	Handler for keyboard events.
`visible`	function	Handler for the show transition event.
`hidden`	function	Handler for the hide transition event.

Type: Object<function()>
Source: Popup.js, line 105

private measurements :Object

Holds all relevant positioning values for calculating the layout.

Properties

Name	Type	Description
`scrollTop`	number	Scrolling posiiton from the top.
`scrollLeft`	number	Scrolling posiiton from the left.
`viewportWidth`	number	Width of viewport in pixels.
`viewportHeight`	number	Height of viewport in pixels.
`targetWidth`	number	Width of target in pixels.
`targetHeight`	number	Height of target in pixels.
`targetTop`	number	Target top position in pixels.
`targetLeft`	number	Target left position in pixels.
`popupWidth`	number	Width of popup in pixels.
`popupHeight`	number	Height of popup in pixels.
`pointerWidth`	number	Width of pointer in pixels.
`pointerHeight`	number	Height of pointer in pixels.

Type: Object
Source: Popup.js, line 131

private layouts :Popup~layoutObject

Holds all calculated Layouts.

Type: Popup~layoutObject
Source: Popup.js, line 157

private hasTransitions :boolean

Determines if the client has CSS transitions.

Type: boolean
Source: Popup.js, line 164

private transitionend :string

Determines which transition event name the client needs. Only useful for older Safaris.

Type: string
Source: Popup.js, line 171

private state :string

The current state of the Popup.

Type: string
Source: Popup.js, line 183

private focusables :Array<HTMLElement>

A list of all tabbable/focusable elements inside the popup. Used to trap focus when focusTrap is enabled.

Type: Array<HTMLElement>
Source: Popup.js, line 334

private, static defaults :Popup~options

Holds the defaults for all instances.

Type: Popup~options
Source: Popup.js, line 926

Methods

configure(optionsopt)

Sets various options for the popup. Called by the "show" Function.

Parameters:

Name	Type	Attributes	Description
`options`	Popup~options	optional	Various options for the popup, see also Popup.show.

Source: Popup.js, line 193

show(content, eventOrTarget, optionsopt)

Shows the popup with specified content and alignment target.

Parameters:

Name	Type	Attributes	Description
`content`	string \| HTMLElement \| DocumentFragment		The content to display in the popup.
`eventOrTarget`	Event \| HTMLElement \| DocumentFragment		The event or element that triggered the popup.
`options`	Popup~options	optional	Configuration overrides for this invocation.

Source: Popup.js, line 209

hide(eventopt, nullable, optionsopt)

Hides the popup.

Parameters:

Name	Type	Attributes	Description
`event`	Event	optional nullable	The event that triggered the hide action.
`options`	Popup~options	optional	Additional options.

Source: Popup.js, line 268

private onVisible()

Called when showing is completed (ie when transition ends).

Source: Popup.js, line 302

private onHidden()

Called when hiding is completed (ie transition has ended).

Source: Popup.js, line 350

private layout()

Calculates and applies the layout based on the best orientation and dimensions.

Source: Popup.js, line 386

private measureLayout()

Helper function that calculates positions and widths used by the "layout" method.

Source: Popup.js, line 639

private onKey(event)

Keyboard handler for ESC key to close the popup.

Parameters:

Name	Type	Description
`event`	KeyboardEvent	The original keyboard event.

Source: Popup.js, line 728

private onFocus(event)

Handles focus trapping inside the popup when focusTrap is enabled. Ensures that Tab cycles between the first and last focusable elements within the popup.

Parameters:

Name	Type	Description
`event`	KeyboardEvent	The keydown event used for detecting tab navigation.

Source: Popup.js, line 741

replaceContent(content)

Replaces the popup content with new content.

Parameters:

Name	Type	Description
`content`	string \| HTMLElement \| DocumentFragment	New content to insert.

Source: Popup.js, line 761

private attachContent(content)

Fills the content area of the view with the desired content, depending on the type of content. Also, if content is an Element which has a parent, the parent is saved so that the content can later be reinserted where it was when hiding the popup.

Parameters:

Name	Type	Description
`content`	string \| Element \| DocumentFragment	The content for the popup, can be a (html) string, an element or a DOM fragment.

Throws: If no valid content type was found.

Type Error
Source: Popup.js, line 776

private detachContent()

If an existing content parent position was saved before, put the element back where it was, otherwise just empty the content area.

Source: Popup.js, line 822

private resize()

Recalculates layout on viewport resize.

Source: Popup.js, line 858

remove()

Removes the popup and detaches all event listeners.

Source: Popup.js, line 867

private extend(target, source, clone) → Object

Extends 'target' object with members from 'source'. Does only a simple shallow extension, and returns a copy of the target.

Parameters:

Name	Type	Description
`target`	Object	Destination object.
`source`	Object	Source object from which to extend.
`clone`	boolean	If set to true, a cloned copy of the target is returned.

Returns: Extended object.; Type Object
Source: Popup.js, line 892

static configure(options)

Configures the popup globally, so it must be called on the constructor: Popup.configure(...). Uses defaults for options that are not specified. Note that in contrast to the Popup#configure instance method, these options apply to all future instances of the overlay.

Parameters:

Name	Type	Description
`options`	Popup~options	The configuration object which applies to this instance.

Source: Popup.js, line 961

Type Definitions

options

Structure of the Popup options

Properties

Name	Type	Attributes	Default	Description
`parentElement`	HTMLElement	optional		The Element the popup DOM nodes should be attached to. Defaults to document.body.
`orientation`	Array<string>	optional	"top","bottom","right","left"	An Array holding the preferred orientation in relation to the target element, ie the element the popup points to. The orientations are checked in the order they appear in the array, an as soon as the popup would fit on the screen with the currently tested orientation,the appropriate layout is selected for display.
`margins`	Object<number>	optional	{top:10,bottom:10,right:10,left:10}	Minimum margins from viewport, separate for all four edges.
`pointerDistance`	number	optional	5	Distance between popup and target element.
`pointerEdgeDistance`	number	optional	10	Minimum default distance between pointer graphic and the edge of the popup background.
`animate`	boolean	optional	true	Determines if the popup should be animated.
`fixedPos`	number	optional	false	Indicates if Popup should have a fixed position.
`limitLayout`	boolean	optional	true	If true, the popup size is limited to the viewport when necessary, adding scrollbars.
`baseViewClass`	string	optional	"pu"	Default classname of the main view.
`pointerViewClass`	string	optional	"pu-pointer"	Default classname of the pointer element.
`viewClass`	string	optional	""	Additional classname of the main view.
`handleEscKey`	boolean	optional	true	If true, popup closes on ESC key.
`onHide`	function	optional nullable	null	Callback which is executed when the popup is about being hidden. Cancels hiding if this callback returns `false`.
`onHidden`	function	optional nullable	null	Callback which is executed when the popup has closed.
`onShow`	function	optional nullable	null	Callback which is executed when the popup is being shown. Cancels showing if this callback returns `false`.
`onVisible`	function	optional nullable	null	Callback which is executed when the popup is visible.
`onAttachment`	function	optional nullable	null	Callback which is executed when the content has been attached.
`onDetachment`	function	optional nullable	null	Callback which is executed when the content has been detached.
`focus`	boolean	optional	true	Automatically focuses popup as soon as it has opened. Helps with tabbing, in case the popup holds any suitable controls.
`focusTrap`	boolean	optional	true	If enabled, traps keyboard focus inside the popup until it is closed (useful for accessibility).
`resize`	boolean	optional	true	If enabled, use internal resize function.

Type: Object
Source: Popup.js, line 967

layoutObject

Structure of the layout object

Properties

Name	Type	Description
`o`	string	Orientation for this layout.
`area`	number	Area in square pixels occupied by this layout.
`deltaHeight`	number	Delta between popup and vireport height.
`deltaWidth`	number	Delta between popup and vireport height.
`index`	number	Position of this layout in the array.
`moveX`	number	Amount which the popup needs to be moved in horizontal direction so that it fits in the viewport.
`moveY`	number	Amount which the popup needs to be moved in vertical direction so that it fits in the viewport.

Type: Object
Source: Popup.js, line 992

Module: lib/ui/Popup

Constructor

new Popup(optionsopt)

Members

private aConf :Object<Popup~options>

private iConf :Object<Popup~options>

private els :Object<HTMLElement>

private handlers :Object<function()>

private measurements :Object

private layouts :Popup~layoutObject

private hasTransitions :boolean

private transitionend :string

private state :string

private focusables :Array<HTMLElement>

private, static defaults :Popup~options

Methods

configure(optionsopt)

show(content, eventOrTarget, optionsopt)

hide(eventopt, nullable, optionsopt)

private onVisible()

private onHidden()

private layout()

private measureLayout()

private onKey(event)

private onFocus(event)

replaceContent(content)

private attachContent(content)

private detachContent()

private resize()

remove()

private extend(target, source, clone) → Object

static configure(options)

Type Definitions

options

layoutObject

Settings