Alloy UI

aui-overlay  1.0.1

 
Filters

Class OverlayContextPanel - extends OverlayContext

Known Subclasses:
Tooltip

A base class for OverlayContextPanel, providing:
  • Widget Lifecycle (initializer, renderUI, bindUI, syncUI, destructor)
  • Customizable arrow
  • Optional animation when show or hide
Quick Example:
var instance = new A.OverlayContextPanel({
bodyContent: 'Here s a sample OverlayContextPanel.',
boundingBox: '#overlay-context-panel',
trigger: '#triggerButton',
cancellableHide: true,
hideDelay: 200,
hideOnDocumentClick: false,
anim: true
}).render();
Check the list of Configuration Attributes available for OverlayContextPanel.

Constructor

OverlayContextPanel ( config )
Parameters:
config <Object> Object literal specifying widget configuration properties.

Properties

OverlayContextPanel.ATTRS - static Object

Static property used to define the default attribute configuration for the OverlayContextPanel.

OverlayContextPanel.NAME - static String

Static property provides a string to identify the class.

Properties inherited from WidgetPositionConstrain:

Properties inherited from WidgetStack:

Properties inherited from Attribute:

Properties inherited from Component:

Properties inherited from WidgetPositionAlign:

Properties inherited from Base:

Properties inherited from WidgetStdMod:

Properties inherited from WidgetPosition:

Properties inherited from OverlayContext:

Configuration Attributes

anim - Object

Enable or disable the animation for hide and show. Used as the Anim configuration attributes.
anim: {
show: {
duration: .9
},
hide: {
duration: .2
}
}
Default Value: { show: false }

arrow - String

Position where the arrow will be placed. See showArrow. If it's not set, it will get the value set on the align point. Here is a list of valid arrows 'bc', 'bl', 'br', 'cc', 'lb', 'lc', 'lt', 'rb', 'rc', 'rl'.
Default Value: null

hideOn - String

See hideOn.
Default Value: click

showArrow - boolean

If true the OverlayContextPanel will show an arrow positioned on the arrow point.
Default Value: true

showOn - String

See showOn.
Default Value: click

stack - boolean

Gives stacking habilities to the OverlayContextPanel.
Default Value: true

Configuration attributes inherited from WidgetPositionConstrain:

Configuration attributes inherited from Widget:

Configuration attributes inherited from WidgetStack:

Configuration attributes inherited from Component:

Configuration attributes inherited from WidgetPositionAlign:

Configuration attributes inherited from Base:

Configuration attributes inherited from WidgetStdMod:

Configuration attributes inherited from WidgetPosition:

x,
xy,
y

Methods

_afterShowArrowChange

protected void _afterShowArrowChange ( event )
Fires after showArrow attribute changes.
Parameters:
event <EventFacade>

_beforeShow

protected void _beforeShow ( event )
Fires before show the OverlayContextPanel.
Parameters:
event <EventFacade>

_renderElements

protected void _renderElements ( )
Render DOM elements for the OverlayContextPanel.

_setAnim

protected Object _setAnim ( value )
Setter for the anim attribute.
Parameters:
value <Object>

_setStack

protected boolean _setStack ( value )
Setter for the stack attribute.
Parameters:
value <boolean>

_syncElements

protected void _syncElements ( )
Sync the UI of the OverlayContextPanel elements.

align

void align ( node , points )
Aligns the OverlayContextPanel to the provided node (or viewport) using the provided points. Inherited from Overlay.
Parameters:
node <Node | String | null> A reference (or selector string) for the Node which with the OverlayContextPanel is to be aligned.
points <Array[2]> A two element array, specifying the points on the OverlayContextPanel and node/viewport which need to be aligned.

bindUI

protected void bindUI ( )
Bind the events on the OverlayContextPanel UI. Lifecycle.

fixPointerColor

void fixPointerColor ( )
OverlayContextPanel uses a imageless arrow, which involves some CSS technics. This method is meant to fix the color of the borders of the arrow.

getAlignPoint

String getAlignPoint ( )
Normalize the align point value. The align point 'cc' is not a valid position for the arrow and then it's normalized to the 'bc' point.

hide

void hide ( event )
Hides the OverlayContextPanel.
Parameters:
event <EventFacade>

renderUI

protected void renderUI ( )
Create the DOM structure for the OverlayContextPanel. Lifecycle.

syncUI

protected void syncUI ( )
Sync the OverlayContextPanel UI. Lifecycle.

Methods inherited from Plugin.Host:

Events

animChange

animChange ( event )
Fires when the value for the configuration attribute 'anim' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

arrowChange

arrowChange ( event )
Fires when the value for the configuration attribute 'arrow' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

hideOnChange

hideOnChange ( event )
Fires when the value for the configuration attribute 'hideOn' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

showArrowChange

showArrowChange ( event )
Fires when the value for the configuration attribute 'showArrow' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

showOnChange

showOnChange ( event )
Fires when the value for the configuration attribute 'showOn' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

stackChange

stackChange ( event )
Fires when the value for the configuration attribute 'stack' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

Events inherited from WidgetStack:

Events inherited from Base:

Events inherited from WidgetPosition: