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 | | 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
Zero or more of the following as properties of an object:
- anim
-
A transition for showing / hiding the panel
- From
- glow.widgets.Overlay
- Type
- |
- 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
- 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
- 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
- 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
- Optional
- Yes
- closeOnMaskClick
-
if true then listens for a click event on the mask and hides when it fires
- From
- glow.widgets.Overlay
- Type
- Default
- "true"
- Optional
- Yes
- context
-
Element to point at.
- Type
- | | 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
- 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
- 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 | | 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
- 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
- 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
- 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
- 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
- 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
- Optional
- Yes
Only required for custom templates.
- returnTo
-
Element to give focus to when the overlay closes
- Type
- selector | | 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
- Optional
- Yes
- theme
-
Visual theme
- Type
- 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
- |
- 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
- |
- 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
- |
- 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
- 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
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
- From
- glow.widgets.Panel
- Type
- glow.dom.NodeList
- container
-
The overlay's container.
- From
- glow.widgets.Overlay
- Type
- glow.dom.NodeList
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
- From
- glow.widgets.Overlay
- Type
- glow.dom.NodeList
-
The panel's footer element
- From
- glow.widgets.Panel
- Type
- glow.dom.NodeList
- header
-
The panel's header element
- From
- glow.widgets.Panel
- Type
- glow.dom.NodeList
- isShown
-
True if the overlay is showing
- From
- glow.widgets.Overlay
- Type
- returnTo
-
Element to give focus to when the overlay closes
- From
- glow.widgets.Overlay
- Type
- selector | | 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
- | | 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
-
- Type
- |
- Optional
- Yes
Pixel distance from the left of the document to point at.
- y
-
- Type
- |
- Optional
- Yes
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.
- From
- glow.widgets.Overlay
Synopsis
glow.events.addListener(myInfoPanel, "show", function(event) { // ... });Arguments
- event
-
- Type
- glow.events.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
- From
- glow.widgets.Overlay
Synopsis
glow.events.addListener(myInfoPanel, "afterShow", function(event) { // ... });Arguments
- event
-
- Type
- glow.events.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
- From
- glow.widgets.Overlay
Synopsis
glow.events.addListener(myInfoPanel, "hide", function(event) { // ... });Arguments
- event
-
- Type
- glow.events.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
- From
- glow.widgets.Overlay
Synopsis
glow.events.addListener(myInfoPanel, "afterHide", function(event) { // ... });Arguments
- event
-
- Type
- glow.events.Event
Event Object
