WeavyPanels

Panel manager for handling for iframes and their communication.

The panel management is split up into a panels container which can contain multiple panels. Each panel is essentialy a wrapped iframe. The panels container provides the possibility to have multiple panels in the same client container and adds the possibility to shift between which panel that is visible in the container as a tab behavior.

Kind: global class

Instance members

.createContainer(containerId) ⇒ container

Creates a new panel container. The container must be attached to the DOM after being created.

Kind: instance method of WeavyPanels
ParamDefaultDescription
containerId : string "global"

The id of the container.


.closePanels() ⇒ Promise

Closes all panels except persistent panels.

Kind: instance method of WeavyPanels

.clearPanels(force) ⇒ Promise

Removes all panels except persistent panels.

Kind: instance method of WeavyPanels
ParamDescription
force : boolean

Forces all panels to be removed including persistent panels


.resetPanels() ⇒ Promise

Resets all panels to initial state.

Kind: instance method of WeavyPanels

.preload([force])

Preload all frames. Frames will be loaded sequentially starting with system frames. Preloading is ignored on mobile devices.

Kind: instance method of WeavyPanels
ParamDescription
[force : boolean ]

Force preloading for all frames, otherwise only system frames will be preloaded.


Events

"panel-loading" ⇒ Object

Event triggered when panel is starting to load or stops loading.

Kind: event emitted by WeavyPanels
Category: events
Properties
NameDescription
panelId : string

The id of the panel loading.

isLoading : boolean

Indicating wheter the panel is loading or not.

fillBackground : boolean

True if the panel has an opaque background during loading.


"panel-open" ⇒ Object

Event triggered when a panel is opened.

Kind: event emitted by WeavyPanels
Category: events
Properties
NameDescription
panelId : string

The id of the panel being openened.

[destination : string ]

Any url being requested to open in the panel.

panels : container

The panels container for the panel


"panel-toggle" ⇒ Object

Event triggered when a panel is toggled open or closed.

Kind: event emitted by WeavyPanels
Category: events
Properties
NameDescription
panelId : string

The id of the panel toggled.

closed : boolean

True if the panel is closed.


"panel-close" ⇒ Object

Event triggered when weavy closes a panel.

Kind: event emitted by WeavyPanels
Category: events
Properties
NameDescription
panelId : string

The id of the panel

panels : container

The panels container for the panel


"panel-reload" ⇒ Object

Event triggered when a panel is reloading it's content.

Kind: event emitted by WeavyPanels
Category: events
Properties
NameDescription
panelId : string

The id of the panel being reloaded.


"panel-reset" ⇒ Object

Triggered when a panel has been reset.

Kind: event emitted by WeavyPanels
Category: events
Properties
NameDescription
panelId : string

Id of the reset panel


"message" ⇒ Object

Triggered when the app receives a postMessage sent from the panel frame.

Kind: event emitted by WeavyPanels
Category: events
Properties
NameDescription
panelId : string

Id of the panel


"panel-removed" ⇒ Object

Triggered when a panel has been removed.

Kind: event emitted by WeavyPanels
Category: events
Properties
NameDescription
panelId : string

Id of the removed panel


"panel-added" ⇒ Object

Triggered when a panel is added

Kind: event emitted by WeavyPanels
Category: events
Properties
NameDescription
panel : Element

The created panel

panelId : string

The id of the panel

url : url

The url for the frame.

attributes : Object

Panel attributes

attributes.type : string

Type of the panel.

attributes.persistent : boolean

Will the panel remain when remove or clearPanels are called?


Static members

.defaults : Object

Default panels options

Kind: static property of WeavyPanels
Properties
NameDescription
controls : Object

Set to false to disable control buttons

controls.close : boolean

Render a close panel control button.

Example
WeavyPanels.defaults = {
    controls: {
        close: true
    }
};

Inner members

~panel : HTMLElement

Wrapped iframe with event handling, states, preloading and postMessage communication.

Kind: inner typedef of WeavyPanels
Properties
NameDescription
id : string

Unique id for the container. Using panelId processed with getId.

panelId : string

Unprocessed id for the panel.

className : string

DOM class: "weavy-panel".

[dataset.type : string ]

Any provided type.

[dataset.persistent : boolean ]

Will the panel remain when remove or clearPanels are called?

[dataset.preload : boolean ]

Should the panel be preloaded when idle

frame : IFrame

Reference to the child iframe

frame.id : string

Id of the iframe

frame.className : string

DOM class: "weavy-panel-frame"

frame.name : string

Window name for the frame

frame.dataset.src : string

The original url for the panel.

frame.dataset.weavyId : string

The id of the weavy instance the frame belongs to. Provided for convenience.

[frame.dataset.type : string ]

Any provided type.

eventParent : Object

Reference to the parent panels container.

on() : function

Binding to the .on() eventhandler of the weavy instance.

one() : function

Binding to the .one() eventhandler of the weavy instance.

off() : function

Binding to the .off() eventhandler of the weavy instance.

triggerEvent() : function

Using triggerEvent of the weavy instance to trigger events on the panel container that propagates to the weavy instance.

isOpen : boolean

Get if the panel is open.

isLoading : boolean

Get if the panel is loading. Set to true to visually indicate that the panel is loading. Set to false to turn off the visual indication.

isLoaded : boolean

Get if the panel is loaded. Set to true to visually indicate that the panel is loading. Set to false to turn off the visual indication.


~panel.whenReady : WeavyPromise

Promise that resolves when the panel iframe has connected via postMessage.

Kind: instance property of panel
Properties
NameDescription
panelId : string

The id of the panel

windowName : string

The name of the frame

location : string

The location url of the frame.

statusCode : int

The http status code of the frame.

statusDescription : string

The description of the http status code.


~panel.whenLoaded : WeavyPromise

Promise that resolves when the panel iframe has fully loaded.

Kind: instance property of panel
Properties
NameDescription
panelId : string

The id of the panel

windowName : string

the name of the frame


~panel.open([destination]) ⇒ Promise

Open a the panel. The open waits for the weavy.whenReady to complete, then opens the panel.

Returns a promise that is resolved when the panel is opened and fully loaded.

Kind: instance method of panel
Emits: panel-open
ParamDescription
[destination : string ]

Tells the panel to navigate to a specified url.


~panel.toggle([destination]) ⇒ Promise

Open or close the panel.

Returns promise that is resolved when the panel is opened and loaded or closed.

Kind: instance method of panel
Emits: panel-toggle
ParamDescription
[destination : string ]

Tells the panel to navigate to a specified url when opened.


~panel.close() ⇒ Promise

Closes the panel.

Returns a promise that is resolved when the panel is closed.

Kind: instance method of panel
Emits: panel-close

~panel.load([url], [data], [method], [replace]) ⇒ Promise

Load an url with data directly in the panel. Uses turbolinks forms if the panel is loaded and a form post to the frame if the panel isn't loaded.

Loads the predefined panel url if url parameter is omitted.

Returns a promise that is resolved when the panel is loaded.

Kind: instance method of panel
ParamDefaultDescription
[url : string ]

The url to load in the panel.

[data : any ]

URL/form-encoded data to send

[method : string ]"GET"

HTTP Request Method https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods

[replace : bool ]

Replace the content in the panel and load it fresh.


~panel.preload() ⇒ Promise

Preload the panel. The frame needs to have data-src attribute set.

Returns a promise that is resolved when the panel is loaded.

Kind: instance method of panel

~panel.reload() ⇒ Promise

Tells the panel that it needs to reload it's content.

Returns a promise that is resolved when the panel is loaded.

Kind: instance method of panel
Emits: Weavy#event:panel-reload

~panel.reset() ⇒ Promise

Creates a new panel iframe and resets the panel to its original url. This can be used if the panel has ended up in an incorrect state.

Kind: instance method of panel

~panel.getState() ⇒ panelState

Gets the current history state of the panel

Kind: instance method of panel

~panel.setState(state) ⇒ Promise

Sets the state of the panel.

Kind: instance method of panel
ParamDescription
state : panelState

The history panel state to apply


~panel.postMessage(message, [transfer]) ⇒ Promise

Sends a postMessage to the panel iframe. Returns a promise that is resolved when the message has been delivered and rejected if the message fails or has timed out.

Kind: instance method of panel
See: https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
ParamDescription
message : object

The Message to send

[transfer : Array.<Transferable> ]

A sequence of Transferable objects that are transferred with the message.


~panel.remove([force]) ⇒ Promise

Removes a panel. If the panel is open it will be closed before it's removed.

Kind: instance method of panel
Emits: panel-removed
ParamDescription
[force : boolean ]

True will remove the panel even if it's persistent


~container : HTMLElement

Container for multiple panels with common functionality for the panels.

Use addPanel to create a panel in the container.

Each child panel will propagate it's events to the panel container and all the panel container events will propagate to the weavy instance.

Kind: inner typedef of WeavyPanels
Properties
NameDescription
id : string

Unique id for the container. Using containerId processed with getId

containerId : string

The provided id unprocessed.

className : string

DOM class: "weavy-panels"

addPanel : function

addPanel creates a panel in the panel container and returns it.

eventParent : Object

Unset. Set the eventParent as a reference to a parent to provide event propagation to that object.

on : function

Binding to the .on() eventhandler of the weavy instance.

one : function

Binding to the .one() eventhandler of the weavy instance.

off : function

Binding to the .off() eventhandler of the weavy instance.

triggerEvent : function

Using triggerEvent of the weavy instance to trigger events on the panel container that propagates to the weavy instance.


~container.addPanel(panelId, [url], [attributes]) ⇒ panel

Create a panel that has frame handling. If the panel already exists it will return the existing panel.

Kind: instance method of container
Emits: panel-added
ParamDescription
panelId : string

The id of the panel.

[url : url ]

Optional url. The page will not be loaded until preload or open is called.

[attributes : Object ]

All panel attributes are optional

[attributes.type : string ]

Type added as data-type attribute.

[attributes.persistent : boolean ]

Should the panel remain when remove or clearPanels are called?

[attributes.preload : boolean ]

Should the panel be preloaded when idle?