Version 1.5 glow.widgets.InfoPanel
API Quick Reference
JavaScript is required to use the quick reference
A panel with content directed at a particular point on the page.
Further Info & Examples
Constructor
new glow.widgets.InfoPanel(content, opts)Parameters
- content
- Type
- selector | Element | glow.dom.NodeList
the element that contains the contents of the Panel. If this is in the document it will be moved to document.body. If your content node has a child element with class "hd" it will be added to the header of the panel. Similarly, an element with class "ft" will be added to the footer of the panel.
- opts
- Type
- Object
Zero or more of the following as properties of an object:
- anim
A transition for showing / hiding the panel
- From
- glow.widgets.Overlay
- Type
- String | Function
- Default
- "null"
- Optional
- Yes
Can be "fade" or "slide", or a function which returns a glow.anim.Animation or glow.anim.Timeline. The function is passed the overlay as the first parameter, and 'true' if the overlay is showing, 'false' if it's hiding.
- ariaProperties
Key-value pairs of aria properties and values
- From
- glow.widgets.Overlay
- Type
- Object
- Optional
- Yes
These are applied to the overlay container for accessibility purposes. By default the overlay is a polite live area.
- ariaRole
The aria role of the panel.
- Type
- String
- Default
- "description"
- Optional
- Yes
This is used for accessibility purposes, the default is acceptable for panels which provide descriptive content for a page element
- autoPosition
Position the overlay relative to the viewport
- From
- glow.widgets.Overlay
- Type
- Boolean
- Default
- "true"
- Optional
- Yes
If true, the overlay will be positioned to the viewport according to the x & y options. If false, you will have to set the position manually by setting the left / right css styles of the container property.
- className
Values for the Overlay container's class attribute.
- From
- glow.widgets.Overlay
- Type
- String
- Optional
- Yes
- closeOnMaskClick
if true then listens for a click event on the mask and hides when it fires
- From
- glow.widgets.Overlay
- Type
- Boolean
- Default
- "true"
- Optional
- Yes
- context
Element to point at.
- Type
- String | Element | glow.dom.NodeList
- Optional
- Yes
If no context is provided then the panel must be positioned manually using the container property.
- focusOnShow
Give the overlay keyboard focus when it appears?
- From
- glow.widgets.Panel
- Type
- Boolean
- Default
- true
- Optional
- Yes
Use 'returnTo' to specify where to send focus when the overlay closes
- hideFilter
Exclude elements from hiding
- From
- glow.widgets.Overlay
- Type
- Function
- Optional
- Yes
When provided this function is run for every element that may be hidden. This includes windowed Flash movies if 'hideWindowedFlash' is true, and any matches for 'hideWhileShown'. In the function, 'this' refers to the element. Return false to prevent this element being hidden.
- hideWhileShown
Elements to hide while the overlay is shown
- From
- glow.widgets.Overlay
- Type
- selector | Element | glow.dom.NodeList
- Optional
- Yes
This is useful for hiding page elements which always appear on top of other page elements. Flash movies can be handled easier using the hideWindowedFlash option.
- hideWindowedFlash
Hide windowed Flash movies?
- From
- glow.widgets.Overlay
- Type
- Boolean
- Default
- true
- Optional
- Yes
When set to true, any Flash movie without wmode "transparent" or "opaque" will be hidden when the overlay shows. This is because they always appear on top of other elements on the page. Flash movies inside the overlay are excluded from hiding.
- id
Value for the Overlay container's ID attribute
- From
- glow.widgets.Overlay
- Type
- String
- Optional
- Yes
- mask
Mask to use for modal overlays
- From
- glow.widgets.Overlay
- Type
- glow.widgets.Mask
- Optional
- Yes
used to indicate to the user that the overlay is modal. If provided then the modal property is set to true.
- modal
is the overlay modal?
- Type
- Boolean
- Default
- false
- Optional
- Yes
If true then a default Mask will be created if one is not provided.
- offsetInContext
Position of the pointer within the context.
- Type
- Object
- Optional
- Yes
In the format {x: 24, y: "50%"}. The default points to an edge of the context, depending on the position of the pointer.
- pointerPosition
Restrict the point to a particular side.
- Type
- String
- Optional
- Yes
The default is dependant on the context's position on the page. The panel will try to be where it is most visible to the user. To restrict the position, set this property to "t"/"r"/"b"/"l"; top / left / bottom / right respectively.
- pointerRegisters
Identify the position of the point within pointer elements.
- Type
- Object
- Optional
- Yes
Only required for custom templates.
- returnTo
Element to give focus to when the overlay closes
- Type
- selector | Element | glow.dom.NodeList
- Optional
- Yes
By default, this is the context element. For accessibility purposes you may want to set an element to give focus to when the overlay closes. This meanss devices which present data to the user by the cursor position (such as screen readers) will be sent somewhere useful.
- template
An html template to use to create the panel
- From
- glow.widgets.Panel
- Type
- String
- Optional
- Yes
- theme
Visual theme
- Type
- String
- Default
- "light"
- Optional
- Yes
Only applies when using the default template. Currently supported themes are "dark" and "light".
- width
Width of the panel
- From
- glow.widgets.Panel
- Type
- Number | String
- Default
- 400
- Optional
- Yes
Default of 400px gives a content width of 360px in the default template
- x
Distance of overlay from the left of the viewport
- From
- glow.widgets.Overlay
- Type
- Number | String
- Default
- "50%"
- Optional
- Yes
If the unit is a percentage then 0% is aligned to the left of the viewport, 100% is aligned to the right of viewport and 50% is centered.
- y
Distance of overlay from the top of the viewport
- From
- glow.widgets.Overlay
- Type
- Number | String
- Default
- "50%"
- Optional
- Yes
If the unit is a percentage then 0% is aligned to the left of the viewport, 100% is aligned to the right of viewport and 50% is centered.
- zIndex
The z-index to set on the overlay
- From
- glow.widgets.Overlay
- Type
- Number
- Default
- "9991"
- Optional
- Yes
If the overlay is modal, the zIndex of the mask will be set to one less than the value of this attribute.
Properties
- autoPosition
Position the overlay relative to the viewport
- From
- glow.widgets.Overlay
- Type
- Boolean
Description
If true, the overlay will be positioned to the viewport according to the x & y options. If false, you will have to set the position manually by setting the left / right css styles of the container property.
- body
The panel's body element
- container
The overlay's container.
Description
Use this to alter the width of the overlay. You can also manually position the overlay using this node when autoPosition is false.
- content
The content of the overlay
The panel's footer element
- header
The panel's header element
- isShown
True if the overlay is showing
- From
- glow.widgets.Overlay
- Type
- Boolean
- returnTo
Element to give focus to when the overlay closes
- From
- glow.widgets.Overlay
- Type
- selector | Element | glow.dom.NodeList
Description
For accessibility purposes you may want to set an element to give focus to when the overlay closes. This meanss devices which present data to the user by the cursor position (such as screen readers) will be sent somewhere useful.
Methods
- hide
Hides the overlay
- setContext
Change element to point at.
Synopsis
myInfoPanel.setContext(context);Parameters
- context
- Type
- String | HTMLElement | glow.dom.NodeList
Element to point at
Returns
this
Description
If no context is provided then the panel must be positioned manually using the container property.
- setPosition
Change or recalculate the position of the InfoPanel
Synopsis
myInfoPanel.setPosition(x, y);Parameters
- x
Pixel distance from the left of the document to point at.
- y
Pixel distance from the top of the document to point at.
Returns
this
Description
Call with parameters to change the position of the InfoPanel or call without parameters to simply reposition. You may need to call this without parameters if the element the Panel is pointing at changes position.
- show
Displays the overlay
Events
- show
Fired when the overlay is about to appear on the screen, before any animation.
Synopsis
glow.events.addListener(myInfoPanel, "show", function(event) { // ... });Arguments
- event
Event Object
Description
At this point you can access the content of the overlay and make changes before it is shown to the user. If you prevent the default action of this event (by returning false or calling event.preventDefault) the overlay will not show.
- afterShow
Fired when the overlay is visible to the user and any 'show' animation is complete
Synopsis
glow.events.addListener(myInfoPanel, "afterShow", function(event) { // ... });Arguments
- event
Event Object
Description
This event is ideal to assign focus to a particular part of the overlay. If you want to change content of the overlay before it appears, see the 'show' event.
- hide
Fired when the overlay is about to hide
Synopsis
glow.events.addListener(myInfoPanel, "hide", function(event) { // ... });Arguments
- event
Event Object
Description
If you prevent the default action of this event (by returning false or calling event.preventDefault) the overlay will not hide.
- afterHide
Fired when the overlay has fully hidden, after any hiding animation has completed
Synopsis
glow.events.addListener(myInfoPanel, "afterHide", function(event) { // ... });Arguments
- event
Event Object
