Print Friendly

Class YAHOO.widget.Panel

Package:YAHOO.widget
Class:Panel
Extends:Overlay
Subclasses:Dialog
Defined In:container.js
Panel is an implementation of Overlay that behaves like an OS window, with a draggable header and an optional close icon at the top right.

Public Properties

Property Defined By
  BOTTOM_LEFT<static> : String Overlay
<static> Constant representing the top bottom left corner of an element, used for configuring the context eleme...
  BOTTOM_RIGHT<static> : String Overlay
<static> Constant representing the bottom right corner of an element, used for configuring the context element ...
  CSS_OVERLAY<static> : String Overlay
<static> Constant representing the default CSS class used for an Overlay
  CSS_PANEL<static> : String Panel
<static> Constant representing the default CSS class used for a Panel
  CSS_PANEL_CONTAINER<static> : String Panel
<static> Constant representing the default CSS class used for a Panel's wrapping container
  TOP_LEFT<static> : String Overlay
<static> Constant representing the top left corner of an element, used for configuring the context element alig...
  TOP_RIGHT<static> : String Overlay
<static> Constant representing the top right corner of an element, used for configuring the context element ali...
  cfg : YAHOO.util.KeyListener[] @default Panel
A KeyListener (or array of KeyListeners) that will be enabled when the Panel is shown, and disabled when the Panel is...
  javascript : String Overlay
<static> The URL that will be placed in the iframe

Public Methods

Method Defined By
  Panel(String el, HTMLElement el, Object userConfig) Panel
  align(String elementAlign, String contextAlign) : void Overlay
Aligns the Overlay to its context element using the specified corner points (represented by the constants TOP_LEFT, T...
  buildMask() : void Panel
Builds the mask that is laid over the document when the Panel is configured to be modal.
  buildWrapper() : void Panel
Builds the wrapping container around the Panel that is used for positioning the shadow and matte underlays. The conta...
  center() : void Overlay
Centers the container in the viewport.
  configClose(String type, Object[] args, Object obj) : void Panel
The default event handler fired when the "close" property is changed. The method controls the appending or hiding of ...
  configConstrainToViewport(String type, Object[] args, Object obj) : void Overlay
The default event handler fired when the "constraintoviewport" property is changed.
  configContext(String type, Object[] args, Object obj) : void Overlay
The default event handler fired when the "context" property is changed.
  configDraggable(String type, Object[] args, Object obj) : void Panel
The default event handler fired when the "draggable" property is changed.
  configFixedCenter(String type, Object[] args, Object obj) : void Overlay
The default event handler fired when the "fixedcenter" property is changed.
  configHeight(String type, Object[] args, Object obj) : void Panel
The default event handler fired when the "height" property is changed.
  configIframe(String type, Object[] args, Object obj) : void Overlay
The default event handler fired when the "iframe" property is changed.
  configKeyListeners(String type, Object[] args, Object obj) : void Panel
The default event handler fired when the "keylisteners" property is changed.
  configModal(String type, Object[] args, Object obj) : void Panel
The default event handler fired when the "modal" property is changed. This handler subscribes or unsubscribes to the ...
  configUnderlay(String type, Object[] args, Object obj) : void Panel
The default event handler fired when the "underlay" property is changed.
  configVisible(String type, Object[] args, Object obj) : void Overlay
The default event handler fired when the "visible" property is changed. This method is responsible for firing showEve...
  configWidth(String type, Object[] args, Object obj) : void Panel
The default event handler fired when the "width" property is changed.
  configX(String type, Object[] args, Object obj) : void Overlay
The default event handler fired when the "x" property is changed.
  configXY(String type, Object[] args, Object obj) : void Overlay
The default event handler fired when the "xy" property is changed.
  configY(String type, Object[] args, Object obj) : void Overlay
The default event handler fired when the "y" property is changed.
  configzIndex(String type, Object[] args, Object obj) : void Panel
The default event handler fired when the "zIndex" property is changed.
  destroy() : void Overlay
Removes the Overlay element from the DOM and sets all child elements to null.
  doCenterOnDOMEvent() : void Overlay
Center event handler used for centering on scroll/resize, but only if the Overlay is visible
  enforceConstraints(String type, Object[] args, Object obj) : void Overlay
The default event handler executed when the moveEvent is fired, if the "constraintoviewport" is set to true.
  hideIframe() : void Overlay
Hides the iframe shim, if it has been enabled
  hideMacGeckoScrollbars() : void Overlay
Adds a special CSS class to the Overlay when Mac/Gecko is in use, to work around a Gecko bug where scrollbars cannot ...
  hideMask() : void Panel
Hides the modality mask.
  init(String el, HTMLElement el, Object userConfig) : void Panel
The Overlay initialization method, which is executed for Overlay and all of its subclasses. This method is automatica...
  initDefaultConfig() : void Panel
Initializes the class's configurable properties which can be changed using the Panel's Config object (cfg).
  initEvents() : void Panel
Initializes the custom events for Module which are fired automatically at appropriate times by the Module class.
  moveTo(Number x, Number y) : void Overlay
Moves the Overlay to the specified position. This function is identical to calling this.cfg.setProperty("xy", [x,y]);
  onDomResize(DOMEvent e, Object obj) : void Panel
Event handler fired when the resize monitor element is resized.
  registerDragDrop() : void Panel
Registers the Panel's header for drag & drop capability.
  removeMask() : void Panel
Removes the modality mask.
  render(String appendToNode, HTMLElement appendToNode) : boolean Panel
Renders the Panel by inserting the elements that are not already in the main Panel into their correct places. Optiona...
  showIframe() : void Overlay
Shows the iframe shim, if it has been enabled
  showMacGeckoScrollbars() : void Overlay
Removes a special CSS class from the Overlay when Mac/Gecko is in use, to work around a Gecko bug where scrollbars ca...
  showMask() : void Panel
Shows the modality mask.
  sizeMask() : void Panel
Sets the size of the modality mask to cover the entire scrollable area of the document
  sizeUnderlay() : void Panel
Adjusts the size of the shadow based on the size of the element.
  syncPosition() : void Overlay
Synchronizes the Panel's "xy", "x", and "y" properties with the Panel's position in the DOM. This is primarily used t...
  toString() : String Panel
Returns a String representation of the object.
  windowResizeHandler<static>(DOMEvent e) : void Overlay
<static> The DOM event handler used to fire the CustomEvent for window resize
  windowScrollHandler<static>(DOMEvent e) : void Overlay
<static> The DOM event handler used to fire the CustomEvent for window scroll

Public Events

Event Defined By
  YAHOO.widget.Overlay.windowResizeEvent : () Overlay
A singleton CustomEvent used for reacting to the DOM event for window resize
  YAHOO.widget.Overlay.windowScrollEvent : () Overlay
A singleton CustomEvent used for reacting to the DOM event for window scroll
  beforeMoveEvent : (Number x, Number y) Overlay
CustomEvent fired before the Overlay is moved.
  dragEvent : () Panel
CustomEvent when the Panel is dragged
  hideMaskEvent : () Panel
CustomEvent fired after the modality mask is hidden
  moveEvent : (Number x, Number y) Overlay
CustomEvent fired after the Overlay is moved.
  showMaskEvent : () Panel
CustomEvent fired after the modality mask is shown

Property Details

BOTTOM_LEFT<static>

public String BOTTOM_LEFT<static>
<static> Constant representing the top bottom left corner of an element, used for configuring the context element alignment
This property is defined by Overlay.

BOTTOM_RIGHT<static>

public String BOTTOM_RIGHT<static>
<static> Constant representing the bottom right corner of an element, used for configuring the context element alignment
This property is defined by Overlay.

CSS_OVERLAY<static>

public String CSS_OVERLAY<static>
<static> Constant representing the default CSS class used for an Overlay
This property is defined by Overlay.

CSS_PANEL<static>

public String CSS_PANEL<static>
<static> Constant representing the default CSS class used for a Panel
This property is defined by Panel.

CSS_PANEL_CONTAINER<static>

public String CSS_PANEL_CONTAINER<static>
<static> Constant representing the default CSS class used for a Panel's wrapping container
This property is defined by Panel.

TOP_LEFT<static>

public String TOP_LEFT<static>
<static> Constant representing the top left corner of an element, used for configuring the context element alignment
This property is defined by Overlay.

TOP_RIGHT<static>

public String TOP_RIGHT<static>
<static> Constant representing the top right corner of an element, used for configuring the context element alignment
This property is defined by Overlay.

cfg

public YAHOO.util.KeyListener[] @default cfg
A KeyListener (or array of KeyListeners) that will be enabled when the Panel is shown, and disabled when the Panel is hidden. @config keylisteners
This property is defined by Panel.

javascript

public String javascript
<static> The URL that will be placed in the iframe
This property is defined by Overlay.

Constructor Details

Panel

public function Panel(String el, HTMLElement el, Object userConfig)
Parameters:
  • el : String
    The element ID representing the Panel OR
  • el : HTMLElement
    The element representing the Panel
  • userConfig : Object
    The configuration object literal containing the configuration that should be set for this Panel. See configuration documentation for more details.

Method Details

align

public function align(String elementAlign, String contextAlign)
Aligns the Overlay to its context element using the specified corner points (represented by the constants TOP_LEFT, TOP_RIGHT, BOTTOM_LEFT, and BOTTOM_RIGHT.
Parameters:
  • elementAlign : String
    The String representing the corner of the Overlay that should be aligned to the context element
  • contextAlign : String
    The corner of the context element that the elementAlign corner should stick to.
Returns:
  • void
This method is defined by Overlay.

buildMask

public function buildMask()
Builds the mask that is laid over the document when the Panel is configured to be modal.
Parameters:
  • None.
Returns:
  • void
This method is defined by Panel.

buildWrapper

public function buildWrapper()
Builds the wrapping container around the Panel that is used for positioning the shadow and matte underlays. The container element is assigned to a local instance variable called container, and the element is reinserted inside of it.
Parameters:
  • None.
Returns:
  • void
This method is defined by Panel.

center

public function center()
Centers the container in the viewport.
Parameters:
  • None.
Returns:
  • void
This method is defined by Overlay.

configClose

public function configClose(String type, Object[] args, Object obj)
The default event handler fired when the "close" property is changed. The method controls the appending or hiding of the close icon at the top right of the Panel.
Parameters:
  • type : String
    The CustomEvent type (usually the property name)
  • args : Object[]
    The CustomEvent arguments. For configuration handlers, args[0] will equal the newly applied value for the property.
  • obj : Object
    The scope object. For configuration handlers, this will usually equal the owner.
Returns:
  • void
This method is defined by Panel.

configConstrainToViewport

public function configConstrainToViewport(String type, Object[] args, Object obj)
The default event handler fired when the "constraintoviewport" property is changed.
Parameters:
  • type : String
    The CustomEvent type (usually the property name)
  • args : Object[]
    The CustomEvent arguments. For configuration handlers, args[0] will equal the newly applied value for the property.
  • obj : Object
    The scope object. For configuration handlers, this will usually equal the owner.
Returns:
  • void
This method is defined by Overlay.

configContext

public function configContext(String type, Object[] args, Object obj)
The default event handler fired when the "context" property is changed.
Parameters:
  • type : String
    The CustomEvent type (usually the property name)
  • args : Object[]
    The CustomEvent arguments. For configuration handlers, args[0] will equal the newly applied value for the property.
  • obj : Object
    The scope object. For configuration handlers, this will usually equal the owner.
Returns:
  • void
This method is defined by Overlay.

configDraggable

public function configDraggable(String type, Object[] args, Object obj)
The default event handler fired when the "draggable" property is changed.
Parameters:
  • type : String
    The CustomEvent type (usually the property name)
  • args : Object[]
    The CustomEvent arguments. For configuration handlers, args[0] will equal the newly applied value for the property.
  • obj : Object
    The scope object. For configuration handlers, this will usually equal the owner.
Returns:
  • void
This method is defined by Panel.

configFixedCenter

public function configFixedCenter(String type, Object[] args, Object obj)
The default event handler fired when the "fixedcenter" property is changed.
Parameters:
  • type : String
    The CustomEvent type (usually the property name)
  • args : Object[]
    The CustomEvent arguments. For configuration handlers, args[0] will equal the newly applied value for the property.
  • obj : Object
    The scope object. For configuration handlers, this will usually equal the owner.
Returns:
  • void
This method is defined by Overlay.

configHeight

public function configHeight(String type, Object[] args, Object obj)
The default event handler fired when the "height" property is changed.
Parameters:
  • type : String
    The CustomEvent type (usually the property name)
  • args : Object[]
    The CustomEvent arguments. For configuration handlers, args[0] will equal the newly applied value for the property.
  • obj : Object
    The scope object. For configuration handlers, this will usually equal the owner.
Returns:
  • void
This method is defined by Panel.

configIframe

public function configIframe(String type, Object[] args, Object obj)
The default event handler fired when the "iframe" property is changed.
Parameters:
  • type : String
    The CustomEvent type (usually the property name)
  • args : Object[]
    The CustomEvent arguments. For configuration handlers, args[0] will equal the newly applied value for the property.
  • obj : Object
    The scope object. For configuration handlers, this will usually equal the owner.
Returns:
  • void
This method is defined by Overlay.

configKeyListeners

public function configKeyListeners(String type, Object[] args, Object obj)
The default event handler fired when the "keylisteners" property is changed.
Parameters:
  • type : String
    The CustomEvent type (usually the property name)
  • args : Object[]
    The CustomEvent arguments. For configuration handlers, args[0] will equal the newly applied value for the property.
  • obj : Object
    The scope object. For configuration handlers, this will usually equal the owner.
Returns:
  • void
This method is defined by Panel.

configModal

public function configModal(String type, Object[] args, Object obj)
The default event handler fired when the "modal" property is changed. This handler subscribes or unsubscribes to the show and hide events to handle the display or hide of the modality mask.
Parameters:
  • type : String
    The CustomEvent type (usually the property name)
  • args : Object[]
    The CustomEvent arguments. For configuration handlers, args[0] will equal the newly applied value for the property.
  • obj : Object
    The scope object. For configuration handlers, this will usually equal the owner.
Returns:
  • void
This method is defined by Panel.

configUnderlay

public function configUnderlay(String type, Object[] args, Object obj)
The default event handler fired when the "underlay" property is changed.
Parameters:
  • type : String
    The CustomEvent type (usually the property name)
  • args : Object[]
    The CustomEvent arguments. For configuration handlers, args[0] will equal the newly applied value for the property.
  • obj : Object
    The scope object. For configuration handlers, this will usually equal the owner.
Returns:
  • void
This method is defined by Panel.

configVisible

public function configVisible(String type, Object[] args, Object obj)
The default event handler fired when the "visible" property is changed. This method is responsible for firing showEvent and hideEvent.
Parameters:
  • type : String
    The CustomEvent type (usually the property name)
  • args : Object[]
    The CustomEvent arguments. For configuration handlers, args[0] will equal the newly applied value for the property.
  • obj : Object
    The scope object. For configuration handlers, this will usually equal the owner.
Returns:
  • void
This method is defined by Overlay.

configWidth

public function configWidth(String type, Object[] args, Object obj)
The default event handler fired when the "width" property is changed.
Parameters:
  • type : String
    The CustomEvent type (usually the property name)
  • args : Object[]
    The CustomEvent arguments. For configuration handlers, args[0] will equal the newly applied value for the property.
  • obj : Object
    The scope object. For configuration handlers, this will usually equal the owner.
Returns:
  • void
This method is defined by Panel.

configX

public function configX(String type, Object[] args, Object obj)
The default event handler fired when the "x" property is changed.
Parameters:
  • type : String
    The CustomEvent type (usually the property name)
  • args : Object[]
    The CustomEvent arguments. For configuration handlers, args[0] will equal the newly applied value for the property.
  • obj : Object
    The scope object. For configuration handlers, this will usually equal the owner.
Returns:
  • void
This method is defined by Overlay.

configXY

public function configXY(String type, Object[] args, Object obj)
The default event handler fired when the "xy" property is changed.
Parameters:
  • type : String
    The CustomEvent type (usually the property name)
  • args : Object[]
    The CustomEvent arguments. For configuration handlers, args[0] will equal the newly applied value for the property.
  • obj : Object
    The scope object. For configuration handlers, this will usually equal the owner.
Returns:
  • void
This method is defined by Overlay.

configY

public function configY(String type, Object[] args, Object obj)
The default event handler fired when the "y" property is changed.
Parameters:
  • type : String
    The CustomEvent type (usually the property name)
  • args : Object[]
    The CustomEvent arguments. For configuration handlers, args[0] will equal the newly applied value for the property.
  • obj : Object
    The scope object. For configuration handlers, this will usually equal the owner.
Returns:
  • void
This method is defined by Overlay.

configzIndex

public function configzIndex(String type, Object[] args, Object obj)
The default event handler fired when the "zIndex" property is changed.
Parameters:
  • type : String
    The CustomEvent type (usually the property name)
  • args : Object[]
    The CustomEvent arguments. For configuration handlers, args[0] will equal the newly applied value for the property.
  • obj : Object
    The scope object. For configuration handlers, this will usually equal the owner.
Returns:
  • void
This method is defined by Panel.

destroy

public function destroy()
Removes the Overlay element from the DOM and sets all child elements to null.
Parameters:
  • None.
Returns:
  • void
This method is defined by Overlay.

doCenterOnDOMEvent

public function doCenterOnDOMEvent()
Center event handler used for centering on scroll/resize, but only if the Overlay is visible
Parameters:
  • None.
Returns:
  • void
This method is defined by Overlay.

enforceConstraints

public function enforceConstraints(String type, Object[] args, Object obj)
The default event handler executed when the moveEvent is fired, if the "constraintoviewport" is set to true.
Parameters:
  • type : String
    The CustomEvent type (usually the property name)
  • args : Object[]
    The CustomEvent arguments. For configuration handlers, args[0] will equal the newly applied value for the property.
  • obj : Object
    The scope object. For configuration handlers, this will usually equal the owner.
Returns:
  • void
This method is defined by Overlay.

hideIframe

public function hideIframe()
Hides the iframe shim, if it has been enabled
Parameters:
  • None.
Returns:
  • void
This method is defined by Overlay.

hideMacGeckoScrollbars

public function hideMacGeckoScrollbars()
Adds a special CSS class to the Overlay when Mac/Gecko is in use, to work around a Gecko bug where scrollbars cannot be hidden. See https://bugzilla.mozilla.org/show_bug.cgi?id=187435
Parameters:
  • None.
Returns:
  • void
This method is defined by Overlay.

hideMask

public function hideMask()
Hides the modality mask.
Parameters:
  • None.
Returns:
  • void
This method is defined by Panel.

init

public function init(String el, HTMLElement el, Object userConfig)
The Overlay initialization method, which is executed for Overlay and all of its subclasses. This method is automatically called by the constructor, and sets up all DOM references for pre-existing markup, and creates required markup if it is not already present.
Parameters:
  • el : String
    The element ID representing the Overlay OR
  • el : HTMLElement
    The element representing the Overlay
  • userConfig : Object
    The configuration object literal containing the configuration that should be set for this Overlay. See configuration documentation for more details.
Returns:
  • void
This method is defined by Panel.

initDefaultConfig

public function initDefaultConfig()
Initializes the class's configurable properties which can be changed using the Panel's Config object (cfg).
Parameters:
  • None.
Returns:
  • void
This method is defined by Panel.

initEvents

public function initEvents()
Initializes the custom events for Module which are fired automatically at appropriate times by the Module class.
Parameters:
  • None.
Returns:
  • void
This method is defined by Panel.

moveTo

public function moveTo(Number x, Number y)
Moves the Overlay to the specified position. This function is identical to calling this.cfg.setProperty("xy", [x,y]);
Parameters:
  • x : Number
    The Overlay's new x position
  • y : Number
    The Overlay's new y position
Returns:
  • void
This method is defined by Overlay.

onDomResize

public function onDomResize(DOMEvent e, Object obj)
Event handler fired when the resize monitor element is resized.
Parameters:
  • e : DOMEvent
    The resize DOM event
  • obj : Object
    The scope object
Returns:
  • void
This method is defined by Panel.

registerDragDrop

public function registerDragDrop()
Registers the Panel's header for drag & drop capability.
Parameters:
  • None.
Returns:
  • void
This method is defined by Panel.

removeMask

public function removeMask()
Removes the modality mask.
Parameters:
  • None.
Returns:
  • void
This method is defined by Panel.

render

public function render(String appendToNode, HTMLElement appendToNode)
Renders the Panel by inserting the elements that are not already in the main Panel into their correct places. Optionally appends the Panel to the specified node prior to the render's execution. NOTE: For Panels without existing markup, the appendToNode argument is REQUIRED. If this argument is ommitted and the current element is not present in the document, the function will return false, indicating that the render was a failure.
Parameters:
  • appendToNode : String
    The element id to which the Module should be appended to prior to rendering OR
  • appendToNode : HTMLElement
    The element to which the Module should be appended to prior to rendering
Returns:
  • boolean
    Success or failure of the render
This method is defined by Panel.

showIframe

public function showIframe()
Shows the iframe shim, if it has been enabled
Parameters:
  • None.
Returns:
  • void
This method is defined by Overlay.

showMacGeckoScrollbars

public function showMacGeckoScrollbars()
Removes a special CSS class from the Overlay when Mac/Gecko is in use, to work around a Gecko bug where scrollbars cannot be hidden. See https://bugzilla.mozilla.org/show_bug.cgi?id=187435
Parameters:
  • None.
Returns:
  • void
This method is defined by Overlay.

showMask

public function showMask()
Shows the modality mask.
Parameters:
  • None.
Returns:
  • void
This method is defined by Panel.

sizeMask

public function sizeMask()
Sets the size of the modality mask to cover the entire scrollable area of the document
Parameters:
  • None.
Returns:
  • void
This method is defined by Panel.

sizeUnderlay

public function sizeUnderlay()
Adjusts the size of the shadow based on the size of the element.
Parameters:
  • None.
Returns:
  • void
This method is defined by Panel.

syncPosition

public function syncPosition()
Synchronizes the Panel's "xy", "x", and "y" properties with the Panel's position in the DOM. This is primarily used to update position information during drag & drop.
Parameters:
  • None.
Returns:
  • void
This method is defined by Overlay.

toString

public function toString()
Returns a String representation of the object.
Parameters:
  • None.
Returns:
  • String
    The string representation of the Panel.
This method is defined by Panel.

windowResizeHandler<static>

public function windowResizeHandler<static>(DOMEvent e)
<static> The DOM event handler used to fire the CustomEvent for window resize
Parameters:
  • e : DOMEvent
    The DOM resize event
Returns:
  • void
This method is defined by Overlay.

windowScrollHandler<static>

public function windowScrollHandler<static>(DOMEvent e)
<static> The DOM event handler used to fire the CustomEvent for window scroll
Parameters:
  • e : DOMEvent
    The DOM scroll event
Returns:
  • void
This method is defined by Overlay.

Event Details

YAHOO.widget.Overlay.windowResizeEvent

public event YAHOO.widget.Overlay.windowResizeEvent
A singleton CustomEvent used for reacting to the DOM event for window resize
Subscribers will be called with the following parameters:
  • None.
This event is defined by Overlay.

YAHOO.widget.Overlay.windowScrollEvent

public event YAHOO.widget.Overlay.windowScrollEvent
A singleton CustomEvent used for reacting to the DOM event for window scroll
Subscribers will be called with the following parameters:
  • None.
This event is defined by Overlay.

beforeMoveEvent

public event beforeMoveEvent
CustomEvent fired before the Overlay is moved.
Subscribers will be called with the following parameters:
  • x : Number
    x coordinate
  • y : Number
    y coordinate
This event is defined by Overlay.

dragEvent

public event dragEvent
CustomEvent when the Panel is dragged
Subscribers will be called with the following parameters:
  • None.
This event is defined by Panel.

hideMaskEvent

public event hideMaskEvent
CustomEvent fired after the modality mask is hidden
Subscribers will be called with the following parameters:
  • None.
This event is defined by Panel.

moveEvent

public event moveEvent
CustomEvent fired after the Overlay is moved.
Subscribers will be called with the following parameters:
  • x : Number
    x coordinate
  • y : Number
    y coordinate
This event is defined by Overlay.

showMaskEvent

public event showMaskEvent
CustomEvent fired after the modality mask is shown
Subscribers will be called with the following parameters:
  • None.
This event is defined by Panel.

Copyright © 2006 Jack Slocum. All rights reserved.