oqapi/webgui
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
webgui/www/extras/yui/docs/container/overview-summary-Panel.js.html
JT Smith 4f68a0933c added YUI and YUI-ext 
fixed the resizable text area with IE problem
fixed the ad space with IE problem
merged the 7.2.0 and 7.1.4 change logs
2006-11-07 23:15:57 +00:00

782 lines
34 KiB
HTML
Raw Blame History

<html>
<head>
<title>JavaScript Documentation - Panel.js</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<h1>JavaScript Documentation</h1>
<h3><a href="./index.html">Yahoo! UI Library: Container</a></h3>
<div class="breadcrumbs">
<a href="./index.html">Yahoo! UI Library: Container</a>
&gt;
<strong>Panel.js</strong>
</div>
</div>
<div id="body">
<div class="nav">
<div class="module resources">
<ul class="content">
<li><a href="overview-tree.html">Tree View</a></li>
<li><a href="index-all.html">Element Index</a></li>
</ul>
</div>
<div class="module">
<h4><a href="./allclasses-noframe.html">Classes</a></h4>
<ul class="content">
<li>
<a href="YAHOO.util.Config.html">
YAHOO.util.Config</a>
</li>
<li>
<a href="YAHOO.util.KeyListener.html">
YAHOO.util.KeyListener</a>
</li>
<li>
<a href="YAHOO.widget.ContainerEffect.html">
YAHOO.widget.ContainerEffect</a>
</li>
<li>
<a href="YAHOO.widget.Dialog.html">
YAHOO.widget.Dialog</a>
</li>
<li>
<a href="YAHOO.widget.Module.html">
YAHOO.widget.Module</a>
</li>
<li>
<a href="YAHOO.widget.Overlay.html">
YAHOO.widget.Overlay</a>
</li>
<li>
<a href="YAHOO.widget.OverlayManager.html">
YAHOO.widget.OverlayManager</a>
</li>
<li>
<a href="YAHOO.widget.Panel.html">
YAHOO.widget.Panel</a>
</li>
<li>
<a href="YAHOO.widget.SimpleDialog.html">
YAHOO.widget.SimpleDialog</a>
</li>
<li>
<a href="YAHOO.widget.Tooltip.html">
YAHOO.widget.Tooltip</a>
</li>
</ul>
</div>
<div class="module">
<h4><a href="./overview-summary.html">Files</a></h4>
<ul class="content">
<li>
<a href="overview-summary-Config.js.html">
Config.js</a>
</li>
<li>
<a href="overview-summary-ContainerEffect.js.html">
ContainerEffect.js</a>
</li>
<li>
<a href="overview-summary-Dialog.js.html">
Dialog.js</a>
</li>
<li>
<a href="overview-summary-KeyListener.js.html">
KeyListener.js</a>
</li>
<li>
<a href="overview-summary-Module.js.html">
Module.js</a>
</li>
<li>
<a href="overview-summary-Overlay.js.html">
Overlay.js</a>
</li>
<li>
<a href="overview-summary-OverlayManager.js.html">
OverlayManager.js</a>
</li>
<li>
<a href="overview-summary-Panel.js.html">
Panel.js</a>
</li>
<li>
<a href="overview-summary-SimpleDialog.js.html">
SimpleDialog.js</a>
</li>
<li>
<a href="overview-summary-Tooltip.js.html">
Tooltip.js</a>
</li>
</ul>
</div>
</div>
<div class="main">
<h2>Panel.js</h2>
<div class="meta">
</div>
<div class="quick-links">
<strong>Quick Links:</strong>&nbsp;
<a href="#classSummary">Class Summary</a> |
<a href="#source">Source Code</a>
</div>
<div class="section class summaries">
<h3><a name="classSummary">Class Summary</a> <span class="top">[<a href="#top">top</a>]</span></h3>
<div class="content">
<table border="1" cellpadding="3" cellspacing="0">
<tr>
<td class="name">
<a href="YAHOO.widget.Panel.html">YAHOO.widget.Panel</a>
</td>
<td class="overview">&nbsp;</td>
</tr>
</table>
</div>
</div>
<div class="section source">
<h3><a name="source">Souce Code</a> <span class="top">[<a href="#top">top</a>]</span></h3>
<pre class="sourceview"><span class="comment">/*
Copyright (c) 2006, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
Version 0.11.3
*/</span>
<span class="comment">/**
* 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.
* <span class="attrib">@extends</span> YAHOO.widget.Overlay
* <span class="attrib">@param</span> {string} el The element ID representing the Panel &lt;em&gt;OR&lt;/em&gt;
* <span class="attrib">@param</span> {Element} el The element representing the Panel
* <span class="attrib">@param</span> {object} userConfig The configuration object literal containing the configuration that should be set for this Panel. See configuration documentation for more details.
* <span class="attrib">@constructor</span>
*/</span>
YAHOO.widget.Panel = <span class="reserved">function</span>(el, userConfig) {
YAHOO.widget.Panel.superclass.constructor.call(<span class="reserved">this</span>, el, userConfig);
};
YAHOO.extend(YAHOO.widget.Panel, YAHOO.widget.Overlay);
<span class="comment">/**
* Constant representing the default CSS class used for a Panel
* <span class="attrib">@type</span> string
* <span class="attrib">@final</span>
*/</span>
YAHOO.widget.Panel.CSS_PANEL = <span class="literal">"panel"</span>;
<span class="comment">/**
* Constant representing the default CSS class used for a Panel's wrapping container
* <span class="attrib">@type</span> string
* <span class="attrib">@final</span>
*/</span>
YAHOO.widget.Panel.CSS_PANEL_CONTAINER = <span class="literal">"panel-container"</span>;
<span class="comment">/**
* CustomEvent fired after the modality mask is shown
* args: none
* <span class="attrib">@type</span> YAHOO.util.CustomEvent
*/</span>
YAHOO.widget.Panel.<span class="reserved">prototype</span>.showMaskEvent = null;
<span class="comment">/**
* CustomEvent fired after the modality mask is hidden
* args: none
* <span class="attrib">@type</span> YAHOO.util.CustomEvent
*/</span>
YAHOO.widget.Panel.<span class="reserved">prototype</span>.hideMaskEvent = null;
<span class="comment">/**
* 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.
* <span class="attrib">@param</span> {string} el The element ID representing the Overlay &lt;em&gt;OR&lt;/em&gt;
* <span class="attrib">@param</span> {Element} el The element representing the Overlay
* <span class="attrib">@param</span> {object} userConfig The configuration object literal containing the configuration that should be set for this Overlay. See configuration documentation for more details.
*/</span>
YAHOO.widget.Panel.<span class="reserved">prototype</span>.init = <span class="reserved">function</span>(el, userConfig) {
YAHOO.widget.Panel.superclass.init.call(<span class="reserved">this</span>, el<span class="comment">/*, userConfig*/</span>); <span class="comment">// Note that we don't pass the user config in here yet because we only want it executed once, at the lowest subclass level</span>
<span class="reserved">this</span>.beforeInitEvent.fire(YAHOO.widget.Panel);
YAHOO.util.Dom.addClass(<span class="reserved">this</span>.element, YAHOO.widget.Panel.CSS_PANEL);
<span class="reserved">this</span>.buildWrapper();
<span class="reserved">if</span> (userConfig) {
<span class="reserved">this</span>.cfg.applyConfig(userConfig, true);
}
<span class="reserved">this</span>.beforeRenderEvent.subscribe(<span class="reserved">function</span>() {
var draggable = <span class="reserved">this</span>.cfg.getProperty(<span class="literal">"draggable"</span>);
<span class="reserved">if</span> (draggable) {
<span class="reserved">if</span> (! <span class="reserved">this</span>.header) {
<span class="reserved">this</span>.setHeader(<span class="literal">"&amp;nbsp;"</span>);
}
}
}, <span class="reserved">this</span>, true);
var me = <span class="reserved">this</span>;
<span class="reserved">this</span>.showMaskEvent.subscribe(<span class="reserved">function</span>() {
var checkFocusable = <span class="reserved">function</span>(el) {
<span class="reserved">if</span> (el.tagName == <span class="literal">"A"</span> || el.tagName == <span class="literal">"BUTTON"</span> || el.tagName == <span class="literal">"SELECT"</span> || el.tagName == <span class="literal">"INPUT"</span> || el.tagName == <span class="literal">"TEXTAREA"</span> || el.tagName == <span class="literal">"FORM"</span>) {
<span class="reserved">if</span> (! YAHOO.util.Dom.isAncestor(me.element, el)) {
YAHOO.util.Event.addListener(el, <span class="literal">"focus"</span>, el.blur);
<span class="reserved">return</span> true;
}
} <span class="reserved">else</span> {
<span class="reserved">return</span> false;
}
};
<span class="reserved">this</span>.focusableElements = YAHOO.util.Dom.getElementsBy(checkFocusable);
}, <span class="reserved">this</span>, true);
<span class="reserved">this</span>.hideMaskEvent.subscribe(<span class="reserved">function</span>() {
<span class="reserved">for</span> (var i=0;i&lt;<span class="reserved">this</span>.focusableElements.length;i++) {
var el2 = <span class="reserved">this</span>.focusableElements[i];
YAHOO.util.Event.removeListener(el2, <span class="literal">"focus"</span>, el2.blur);
}
}, <span class="reserved">this</span>, true);
<span class="reserved">this</span>.initEvent.fire(YAHOO.widget.Panel);
};
<span class="comment">/**
* Initializes the custom events for Module which are fired automatically at appropriate times by the Module class.
*/</span>
YAHOO.widget.Panel.<span class="reserved">prototype</span>.initEvents = <span class="reserved">function</span>() {
YAHOO.widget.Panel.superclass.initEvents.call(<span class="reserved">this</span>);
<span class="reserved">this</span>.showMaskEvent = new YAHOO.util.CustomEvent(<span class="literal">"showMask"</span>);
<span class="reserved">this</span>.hideMaskEvent = new YAHOO.util.CustomEvent(<span class="literal">"hideMask"</span>);
<span class="reserved">this</span>.dragEvent = new YAHOO.util.CustomEvent(<span class="literal">"drag"</span>);
};
<span class="comment">/**
* Initializes the class's configurable properties which can be changed using the Panel's Config object (cfg).
*/</span>
YAHOO.widget.Panel.<span class="reserved">prototype</span>.initDefaultConfig = <span class="reserved">function</span>() {
YAHOO.widget.Panel.superclass.initDefaultConfig.call(<span class="reserved">this</span>);
<span class="comment">// Add panel config properties //</span>
<span class="reserved">this</span>.cfg.addProperty(<span class="literal">"close"</span>, { value:true, handler:<span class="reserved">this</span>.configClose, validator:<span class="reserved">this</span>.cfg.checkBoolean, supercedes:[<span class="literal">"visible"</span>] } );
<span class="reserved">this</span>.cfg.addProperty(<span class="literal">"draggable"</span>, { value:true, handler:<span class="reserved">this</span>.configDraggable, validator:<span class="reserved">this</span>.cfg.checkBoolean, supercedes:[<span class="literal">"visible"</span>] } );
<span class="reserved">this</span>.cfg.addProperty(<span class="literal">"underlay"</span>, { value:<span class="literal">"shadow"</span>, handler:<span class="reserved">this</span>.configUnderlay, supercedes:[<span class="literal">"visible"</span>] } );
<span class="reserved">this</span>.cfg.addProperty(<span class="literal">"modal"</span>, { value:false, handler:<span class="reserved">this</span>.configModal, validator:<span class="reserved">this</span>.cfg.checkBoolean, supercedes:[<span class="literal">"visible"</span>] } );
<span class="reserved">this</span>.cfg.addProperty(<span class="literal">"keylisteners"</span>, { handler:<span class="reserved">this</span>.configKeyListeners, suppressEvent:true, supercedes:[<span class="literal">"visible"</span>] } );
};
<span class="comment">// BEGIN BUILT-IN PROPERTY EVENT HANDLERS //</span>
<span class="comment">/**
* 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.
*/</span>
YAHOO.widget.Panel.<span class="reserved">prototype</span>.configClose = <span class="reserved">function</span>(type, args, obj) {
var val = args[0];
var doHide = <span class="reserved">function</span>(e, obj) {
obj.hide();
};
<span class="reserved">if</span> (val) {
<span class="reserved">if</span> (! <span class="reserved">this</span>.close) {
<span class="reserved">this</span>.close = document.createElement(<span class="literal">"DIV"</span>);
YAHOO.util.Dom.addClass(<span class="reserved">this</span>.close, <span class="literal">"close"</span>);
<span class="reserved">if</span> (<span class="reserved">this</span>.isSecure) {
YAHOO.util.Dom.addClass(<span class="reserved">this</span>.close, <span class="literal">"secure"</span>);
} <span class="reserved">else</span> {
YAHOO.util.Dom.addClass(<span class="reserved">this</span>.close, <span class="literal">"nonsecure"</span>);
}
<span class="reserved">this</span>.close.innerHTML = <span class="literal">"&amp;nbsp;"</span>;
<span class="reserved">this</span>.innerElement.appendChild(<span class="reserved">this</span>.close);
YAHOO.util.Event.addListener(<span class="reserved">this</span>.close, <span class="literal">"click"</span>, doHide, <span class="reserved">this</span>);
} <span class="reserved">else</span> {
<span class="reserved">this</span>.close.style.display = <span class="literal">"block"</span>;
}
} <span class="reserved">else</span> {
<span class="reserved">if</span> (<span class="reserved">this</span>.close) {
<span class="reserved">this</span>.close.style.display = <span class="literal">"none"</span>;
}
}
};
<span class="comment">/**
* The default event handler fired when the "draggable" property is changed.
*/</span>
YAHOO.widget.Panel.<span class="reserved">prototype</span>.configDraggable = <span class="reserved">function</span>(type, args, obj) {
var val = args[0];
<span class="reserved">if</span> (val) {
<span class="reserved">if</span> (<span class="reserved">this</span>.header) {
YAHOO.util.Dom.setStyle(<span class="reserved">this</span>.header,<span class="literal">"cursor"</span>,<span class="literal">"move"</span>);
<span class="reserved">this</span>.registerDragDrop();
}
} <span class="reserved">else</span> {
<span class="reserved">if</span> (<span class="reserved">this</span>.dd) {
<span class="reserved">this</span>.dd.unreg();
}
<span class="reserved">if</span> (<span class="reserved">this</span>.header) {
YAHOO.util.Dom.setStyle(<span class="reserved">this</span>.header,<span class="literal">"cursor"</span>,<span class="literal">"auto"</span>);
}
}
};
<span class="comment">/**
* The default event handler fired when the "underlay" property is changed.
*/</span>
YAHOO.widget.Panel.<span class="reserved">prototype</span>.configUnderlay = <span class="reserved">function</span>(type, args, obj) {
var val = args[0];
switch (val.toLowerCase()) {
case <span class="literal">"shadow"</span>:
YAHOO.util.Dom.removeClass(<span class="reserved">this</span>.element, <span class="literal">"matte"</span>);
YAHOO.util.Dom.addClass(<span class="reserved">this</span>.element, <span class="literal">"shadow"</span>);
<span class="reserved">if</span> (! <span class="reserved">this</span>.underlay) { <span class="comment">// create if not already in DOM</span>
<span class="reserved">this</span>.underlay = document.createElement(<span class="literal">"DIV"</span>);
<span class="reserved">this</span>.underlay.className = <span class="literal">"underlay"</span>;
<span class="reserved">this</span>.underlay.innerHTML = <span class="literal">"&amp;nbsp;"</span>;
<span class="reserved">this</span>.element.appendChild(<span class="reserved">this</span>.underlay);
}
<span class="reserved">this</span>.sizeUnderlay();
break;
case <span class="literal">"matte"</span>:
YAHOO.util.Dom.removeClass(<span class="reserved">this</span>.element, <span class="literal">"shadow"</span>);
YAHOO.util.Dom.addClass(<span class="reserved">this</span>.element, <span class="literal">"matte"</span>);
break;
default:
YAHOO.util.Dom.removeClass(<span class="reserved">this</span>.element, <span class="literal">"shadow"</span>);
YAHOO.util.Dom.removeClass(<span class="reserved">this</span>.element, <span class="literal">"matte"</span>);
break;
}
};
<span class="comment">/**
* 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.
*/</span>
YAHOO.widget.Panel.<span class="reserved">prototype</span>.configModal = <span class="reserved">function</span>(type, args, obj) {
var modal = args[0];
<span class="reserved">if</span> (modal) {
<span class="reserved">this</span>.buildMask();
<span class="reserved">if</span> (! YAHOO.util.Config.alreadySubscribed( <span class="reserved">this</span>.showEvent, <span class="reserved">this</span>.showMask, <span class="reserved">this</span> ) ) {
<span class="reserved">this</span>.showEvent.subscribe(<span class="reserved">this</span>.showMask, <span class="reserved">this</span>, true);
}
<span class="reserved">if</span> (! YAHOO.util.Config.alreadySubscribed( <span class="reserved">this</span>.hideEvent, <span class="reserved">this</span>.hideMask, <span class="reserved">this</span>) ) {
<span class="reserved">this</span>.hideEvent.subscribe(<span class="reserved">this</span>.hideMask, <span class="reserved">this</span>, true);
}
<span class="reserved">if</span> (! YAHOO.util.Config.alreadySubscribed( YAHOO.widget.Overlay.windowResizeEvent, <span class="reserved">this</span>.sizeMask, <span class="reserved">this</span> ) ) {
YAHOO.widget.Overlay.windowResizeEvent.subscribe(<span class="reserved">this</span>.sizeMask, <span class="reserved">this</span>, true);
}
} <span class="reserved">else</span> {
<span class="reserved">this</span>.beforeShowEvent.unsubscribe(<span class="reserved">this</span>.showMask, <span class="reserved">this</span>);
<span class="reserved">this</span>.hideEvent.unsubscribe(<span class="reserved">this</span>.hideMask, <span class="reserved">this</span>);
YAHOO.widget.Overlay.windowResizeEvent.unsubscribe(<span class="reserved">this</span>.sizeMask);
}
};
<span class="comment">/**
* The default event handler fired when the "keylisteners" property is changed.
*/</span>
YAHOO.widget.Panel.<span class="reserved">prototype</span>.configKeyListeners = <span class="reserved">function</span>(type, args, obj) {
var listeners = args[0];
<span class="reserved">if</span> (listeners) {
<span class="reserved">if</span> (listeners instanceof Array) {
<span class="reserved">for</span> (var i=0;i&lt;listeners.length;i++) {
var listener = listeners[i];
<span class="reserved">if</span> (! YAHOO.util.Config.alreadySubscribed(<span class="reserved">this</span>.showEvent, listener.enable, listener)) {
<span class="reserved">this</span>.showEvent.subscribe(listener.enable, listener, true);
}
<span class="reserved">if</span> (! YAHOO.util.Config.alreadySubscribed(<span class="reserved">this</span>.hideEvent, listener.disable, listener)) {
<span class="reserved">this</span>.hideEvent.subscribe(listener.disable, listener, true);
<span class="reserved">this</span>.destroyEvent.subscribe(listener.disable, listener, true);
}
}
} <span class="reserved">else</span> {
<span class="reserved">if</span> (! YAHOO.util.Config.alreadySubscribed(<span class="reserved">this</span>.showEvent, listeners.enable, listeners)) {
<span class="reserved">this</span>.showEvent.subscribe(listeners.enable, listeners, true);
}
<span class="reserved">if</span> (! YAHOO.util.Config.alreadySubscribed(<span class="reserved">this</span>.hideEvent, listeners.disable, listeners)) {
<span class="reserved">this</span>.hideEvent.subscribe(listeners.disable, listeners, true);
<span class="reserved">this</span>.destroyEvent.subscribe(listeners.disable, listeners, true);
}
}
}
};
<span class="comment">// END BUILT-IN PROPERTY EVENT HANDLERS //</span>
<span class="comment">/**
* 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.
*/</span>
YAHOO.widget.Panel.<span class="reserved">prototype</span>.buildWrapper = <span class="reserved">function</span>() {
var elementParent = <span class="reserved">this</span>.element.parentNode;
var elementClone = <span class="reserved">this</span>.element.cloneNode(true);
<span class="reserved">this</span>.innerElement = elementClone;
<span class="reserved">this</span>.innerElement.style.visibility = <span class="literal">"inherit"</span>;
YAHOO.util.Dom.addClass(<span class="reserved">this</span>.innerElement, YAHOO.widget.Panel.CSS_PANEL);
var wrapper = document.createElement(<span class="literal">"DIV"</span>);
wrapper.className = YAHOO.widget.Panel.CSS_PANEL_CONTAINER;
wrapper.id = elementClone.id + <span class="literal">"_c"</span>;
wrapper.appendChild(elementClone);
<span class="reserved">if</span> (elementParent) {
elementParent.replaceChild(wrapper, <span class="reserved">this</span>.element);
}
<span class="reserved">this</span>.element = wrapper;
<span class="comment">// Resynchronize the local field references</span>
var childNodes = <span class="reserved">this</span>.innerElement.childNodes;
<span class="reserved">if</span> (childNodes) {
<span class="reserved">for</span> (var i=0;i&lt;childNodes.length;i++) {
var child = childNodes[i];
switch (child.className) {
case YAHOO.widget.Module.CSS_HEADER:
<span class="reserved">this</span>.header = child;
break;
case YAHOO.widget.Module.CSS_BODY:
<span class="reserved">this</span>.body = child;
break;
case YAHOO.widget.Module.CSS_FOOTER:
<span class="reserved">this</span>.footer = child;
break;
}
}
}
<span class="reserved">this</span>.initDefaultConfig(); <span class="comment">// We've changed the DOM, so the configuration must be re-tooled to get the DOM references right</span>
};
<span class="comment">/**
* Adjusts the size of the shadow based on the size of the element.
*/</span>
YAHOO.widget.Panel.<span class="reserved">prototype</span>.sizeUnderlay = <span class="reserved">function</span>() {
<span class="reserved">if</span> (<span class="reserved">this</span>.underlay &amp;&amp; <span class="reserved">this</span>.browser != <span class="literal">"gecko"</span> &amp;&amp; <span class="reserved">this</span>.browser != <span class="literal">"safari"</span>) {
<span class="reserved">this</span>.underlay.style.width = <span class="reserved">this</span>.innerElement.offsetWidth + <span class="literal">"px"</span>;
<span class="reserved">this</span>.underlay.style.height = <span class="reserved">this</span>.innerElement.offsetHeight + <span class="literal">"px"</span>;
}
};
<span class="comment">/**
* Event handler fired when the resize monitor element is resized.
*/</span>
YAHOO.widget.Panel.<span class="reserved">prototype</span>.onDomResize = <span class="reserved">function</span>(e, obj) {
YAHOO.widget.Panel.superclass.onDomResize.call(<span class="reserved">this</span>, e, obj);
var me = <span class="reserved">this</span>;
setTimeout(<span class="reserved">function</span>() {
me.sizeUnderlay();
}, 0);
};
<span class="comment">/**
* Registers the Panel's header for drag &amp; drop capability.
*/</span>
YAHOO.widget.Panel.<span class="reserved">prototype</span>.registerDragDrop = <span class="reserved">function</span>() {
<span class="reserved">if</span> (<span class="reserved">this</span>.header) {
<span class="reserved">this</span>.dd = new YAHOO.util.DD(<span class="reserved">this</span>.element.id, <span class="reserved">this</span>.id);
<span class="reserved">if</span> (! <span class="reserved">this</span>.header.id) {
<span class="reserved">this</span>.header.id = <span class="reserved">this</span>.id + <span class="literal">"_h"</span>;
}
var me = <span class="reserved">this</span>;
<span class="reserved">this</span>.dd.startDrag = <span class="reserved">function</span>() {
<span class="reserved">if</span> (me.browser == <span class="literal">"ie"</span>) {
YAHOO.util.Dom.addClass(me.element,<span class="literal">"drag"</span>);
}
<span class="reserved">if</span> (me.cfg.getProperty(<span class="literal">"constraintoviewport"</span>)) {
var offsetHeight = me.element.offsetHeight;
var offsetWidth = me.element.offsetWidth;
var viewPortWidth = YAHOO.util.Dom.getViewportWidth();
var viewPortHeight = YAHOO.util.Dom.getViewportHeight();
var scrollX = window.scrollX || document.documentElement.scrollLeft;
var scrollY = window.scrollY || document.documentElement.scrollTop;
var topConstraint = scrollY + 10;
var leftConstraint = scrollX + 10;
var bottomConstraint = scrollY + viewPortHeight - offsetHeight - 10;
var rightConstraint = scrollX + viewPortWidth - offsetWidth - 10;
<span class="reserved">this</span>.minX = leftConstraint;
<span class="reserved">this</span>.maxX = rightConstraint;
<span class="reserved">this</span>.constrainX = true;
<span class="reserved">this</span>.minY = topConstraint;
<span class="reserved">this</span>.maxY = bottomConstraint;
<span class="reserved">this</span>.constrainY = true;
} <span class="reserved">else</span> {
<span class="reserved">this</span>.constrainX = false;
<span class="reserved">this</span>.constrainY = false;
}
me.dragEvent.fire(<span class="literal">"startDrag"</span>, arguments);
};
<span class="reserved">this</span>.dd.onDrag = <span class="reserved">function</span>() {
me.syncPosition();
me.cfg.refireEvent(<span class="literal">"iframe"</span>);
<span class="reserved">if</span> (<span class="reserved">this</span>.platform == <span class="literal">"mac"</span> &amp;&amp; <span class="reserved">this</span>.browser == <span class="literal">"gecko"</span>) {
<span class="reserved">this</span>.showMacGeckoScrollbars();
}
me.dragEvent.fire(<span class="literal">"onDrag"</span>, arguments);
};
<span class="reserved">this</span>.dd.endDrag = <span class="reserved">function</span>() {
<span class="reserved">if</span> (me.browser == <span class="literal">"ie"</span>) {
YAHOO.util.Dom.removeClass(me.element,<span class="literal">"drag"</span>);
}
me.dragEvent.fire(<span class="literal">"endDrag"</span>, arguments);
};
<span class="reserved">this</span>.dd.setHandleElId(<span class="reserved">this</span>.header.id);
<span class="reserved">this</span>.dd.addInvalidHandleType(<span class="literal">"INPUT"</span>);
<span class="reserved">this</span>.dd.addInvalidHandleType(<span class="literal">"SELECT"</span>);
<span class="reserved">this</span>.dd.addInvalidHandleType(<span class="literal">"TEXTAREA"</span>);
}
};
<span class="comment">/**
* Builds the mask that is laid over the document when the Panel is configured to be modal.
*/</span>
YAHOO.widget.Panel.<span class="reserved">prototype</span>.buildMask = <span class="reserved">function</span>() {
<span class="reserved">if</span> (! <span class="reserved">this</span>.mask) {
<span class="reserved">this</span>.mask = document.createElement(<span class="literal">"DIV"</span>);
<span class="reserved">this</span>.mask.id = <span class="reserved">this</span>.id + <span class="literal">"_mask"</span>;
<span class="reserved">this</span>.mask.className = <span class="literal">"mask"</span>;
<span class="reserved">this</span>.mask.innerHTML = <span class="literal">"&amp;nbsp;"</span>;
var maskClick = <span class="reserved">function</span>(e, obj) {
YAHOO.util.Event.stopEvent(e);
};
var firstChild = document.body.firstChild;
<span class="reserved">if</span> (firstChild) {
document.body.insertBefore(<span class="reserved">this</span>.mask, document.body.firstChild);
} <span class="reserved">else</span> {
document.body.appendChild(<span class="reserved">this</span>.mask);
}
}
};
<span class="comment">/**
* Hides the modality mask.
*/</span>
YAHOO.widget.Panel.<span class="reserved">prototype</span>.hideMask = <span class="reserved">function</span>() {
<span class="reserved">if</span> (<span class="reserved">this</span>.cfg.getProperty(<span class="literal">"modal"</span>) &amp;&amp; <span class="reserved">this</span>.mask) {
<span class="reserved">this</span>.mask.style.display = <span class="literal">"none"</span>;
<span class="reserved">this</span>.hideMaskEvent.fire();
YAHOO.util.Dom.removeClass(document.body, <span class="literal">"masked"</span>);
}
};
<span class="comment">/**
* Shows the modality mask.
*/</span>
YAHOO.widget.Panel.<span class="reserved">prototype</span>.showMask = <span class="reserved">function</span>() {
<span class="reserved">if</span> (<span class="reserved">this</span>.cfg.getProperty(<span class="literal">"modal"</span>) &amp;&amp; <span class="reserved">this</span>.mask) {
YAHOO.util.Dom.addClass(document.body, <span class="literal">"masked"</span>);
<span class="reserved">this</span>.sizeMask();
<span class="reserved">this</span>.mask.style.display = <span class="literal">"block"</span>;
<span class="reserved">this</span>.showMaskEvent.fire();
}
};
<span class="comment">/**
* Sets the size of the modality mask to cover the entire scrollable area of the document
*/</span>
YAHOO.widget.Panel.<span class="reserved">prototype</span>.sizeMask = <span class="reserved">function</span>() {
<span class="reserved">if</span> (<span class="reserved">this</span>.mask) {
<span class="reserved">this</span>.mask.style.height = YAHOO.util.Dom.getDocumentHeight()+<span class="literal">"px"</span>;
<span class="reserved">this</span>.mask.style.width = YAHOO.util.Dom.getDocumentWidth()+<span class="literal">"px"</span>;
}
};
<span class="comment">/**
* The default event handler fired when the "height" property is changed.
*/</span>
YAHOO.widget.Panel.<span class="reserved">prototype</span>.configHeight = <span class="reserved">function</span>(type, args, obj) {
var height = args[0];
var el = <span class="reserved">this</span>.innerElement;
YAHOO.util.Dom.setStyle(el, <span class="literal">"height"</span>, height);
<span class="reserved">this</span>.cfg.refireEvent(<span class="literal">"underlay"</span>);
<span class="reserved">this</span>.cfg.refireEvent(<span class="literal">"iframe"</span>);
};
<span class="comment">/**
* The default event handler fired when the "width" property is changed.
*/</span>
YAHOO.widget.Panel.<span class="reserved">prototype</span>.configWidth = <span class="reserved">function</span>(type, args, obj) {
var width = args[0];
var el = <span class="reserved">this</span>.innerElement;
YAHOO.util.Dom.setStyle(el, <span class="literal">"width"</span>, width);
<span class="reserved">this</span>.cfg.refireEvent(<span class="literal">"underlay"</span>);
<span class="reserved">this</span>.cfg.refireEvent(<span class="literal">"iframe"</span>);
};
<span class="comment">/**
* 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.
* <span class="attrib">@param</span> {string} appendToNode The element id to which the Module should be appended to prior to rendering &lt;em&gt;OR&lt;/em&gt;
* <span class="attrib">@param</span> {Element} appendToNode The element to which the Module should be appended to prior to rendering
* <span class="attrib">@return</span> {boolean} Success or failure of the render
*/</span>
YAHOO.widget.Panel.<span class="reserved">prototype</span>.render = <span class="reserved">function</span>(appendToNode) {
<span class="reserved">return</span> YAHOO.widget.Panel.superclass.render.call(<span class="reserved">this</span>, appendToNode, <span class="reserved">this</span>.innerElement);
};
<span class="comment">/**
* Returns a string representation of the object.
* <span class="attrib">@type</span> string
*/</span>
YAHOO.widget.Panel.<span class="reserved">prototype</span>.toString = <span class="reserved">function</span>() {
<span class="reserved">return</span> <span class="literal">"Panel "</span> + <span class="reserved">this</span>.id;
};</pre>
</div>
</div>
</div>
<div id="footer">
<hr />
Copyright &copy; 2006 Yahoo! Inc. All rights reserved.
<br /><br />
Documentation generated by <a href="http://jsdoc.sourceforge.net/">
JSDoc</a>
</div>
</body>
</html>
Reference in a new issue View git blame Copy permalink