oqapi/webgui
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
webgui/www/extras/yui/docs/container/overview-summary-Overlay.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

998 lines
45 KiB
HTML
Raw Blame History

<html>
<head>
<title>JavaScript Documentation - Overlay.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>Overlay.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>Overlay.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.Overlay.html">YAHOO.widget.Overlay</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">/**
* Overlay is a Module that is absolutely positioned above the page flow. It has convenience methods for positioning and sizing, as well as options for controlling zIndex and constraining the Overlay's position to the current visible viewport. Overlay also contains a dynamicly generated IFRAME which is placed beneath it for Internet Explorer 6 and 5.x so that it will be properly rendered above SELECT elements.
* <span class="attrib">@extends</span> YAHOO.widget.Module
* <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 class="attrib">@constructor</span>
*/</span>
YAHOO.widget.Overlay = <span class="reserved">function</span>(el, userConfig) {
YAHOO.widget.Overlay.superclass.constructor.call(<span class="reserved">this</span>, el, userConfig);
};
YAHOO.extend(YAHOO.widget.Overlay, YAHOO.widget.Module);
<span class="comment">/**
* The URL of the blank image that will be placed in the iframe
* <span class="attrib">@type</span> string
* <span class="attrib">@final</span>
*/</span>
YAHOO.widget.Overlay.IFRAME_SRC = <span class="literal">"promo/m/irs/blank.gif"</span>;
<span class="comment">/**
* Constant representing the top left corner of an element, used for configuring the context element alignment
* <span class="attrib">@type</span> string
* <span class="attrib">@final</span>
*/</span>
YAHOO.widget.Overlay.TOP_LEFT = <span class="literal">"tl"</span>;
<span class="comment">/**
* Constant representing the top right corner of an element, used for configuring the context element alignment
* <span class="attrib">@type</span> string
* <span class="attrib">@final</span>
*/</span>
YAHOO.widget.Overlay.TOP_RIGHT = <span class="literal">"tr"</span>;
<span class="comment">/**
* Constant representing the top bottom left corner of an element, used for configuring the context element alignment
* <span class="attrib">@type</span> string
* <span class="attrib">@final</span>
*/</span>
YAHOO.widget.Overlay.BOTTOM_LEFT = <span class="literal">"bl"</span>;
<span class="comment">/**
* Constant representing the bottom right corner of an element, used for configuring the context element alignment
* <span class="attrib">@type</span> string
* <span class="attrib">@final</span>
*/</span>
YAHOO.widget.Overlay.BOTTOM_RIGHT = <span class="literal">"br"</span>;
<span class="comment">/**
* Constant representing the default CSS class used for an Overlay
* <span class="attrib">@type</span> string
* <span class="attrib">@final</span>
*/</span>
YAHOO.widget.Overlay.CSS_OVERLAY = <span class="literal">"overlay"</span>;
<span class="comment">/**
* CustomEvent fired before the Overlay is moved.
* args: x,y that the Overlay will be moved to
* <span class="attrib">@type</span> YAHOO.util.CustomEvent
*/</span>
YAHOO.widget.Overlay.<span class="reserved">prototype</span>.beforeMoveEvent = null;
<span class="comment">/**
* CustomEvent fired after the Overlay is moved.
* args: x,y that the Overlay was moved to
* <span class="attrib">@type</span> YAHOO.util.CustomEvent
*/</span>
YAHOO.widget.Overlay.<span class="reserved">prototype</span>.moveEvent = 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.Overlay.<span class="reserved">prototype</span>.init = <span class="reserved">function</span>(el, userConfig) {
YAHOO.widget.Overlay.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.Overlay);
YAHOO.util.Dom.addClass(<span class="reserved">this</span>.element, YAHOO.widget.Overlay.CSS_OVERLAY);
<span class="reserved">if</span> (userConfig) {
<span class="reserved">this</span>.cfg.applyConfig(userConfig, true);
}
<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">if</span> (! YAHOO.util.Config.alreadySubscribed(<span class="reserved">this</span>.showEvent,<span class="reserved">this</span>.showMacGeckoScrollbars,<span class="reserved">this</span>)) {
<span class="reserved">this</span>.showEvent.subscribe(<span class="reserved">this</span>.showMacGeckoScrollbars,<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>.hideMacGeckoScrollbars,<span class="reserved">this</span>)) {
<span class="reserved">this</span>.hideEvent.subscribe(<span class="reserved">this</span>.hideMacGeckoScrollbars,<span class="reserved">this</span>,true);
}
}
<span class="reserved">this</span>.initEvent.fire(YAHOO.widget.Overlay);
};
<span class="comment">/**
* Initializes the custom events for Overlay which are fired automatically at appropriate times by the Overlay class.
*/</span>
YAHOO.widget.Overlay.<span class="reserved">prototype</span>.initEvents = <span class="reserved">function</span>() {
YAHOO.widget.Overlay.superclass.initEvents.call(<span class="reserved">this</span>);
<span class="reserved">this</span>.beforeMoveEvent = new YAHOO.util.CustomEvent(<span class="literal">"beforeMove"</span>, <span class="reserved">this</span>);
<span class="reserved">this</span>.moveEvent = new YAHOO.util.CustomEvent(<span class="literal">"move"</span>, <span class="reserved">this</span>);
};
<span class="comment">/**
* Initializes the class's configurable properties which can be changed using the Overlay's Config object (cfg).
*/</span>
YAHOO.widget.Overlay.<span class="reserved">prototype</span>.initDefaultConfig = <span class="reserved">function</span>() {
YAHOO.widget.Overlay.superclass.initDefaultConfig.call(<span class="reserved">this</span>);
<span class="comment">// Add overlay config properties //</span>
<span class="reserved">this</span>.cfg.addProperty(<span class="literal">"x"</span>, { handler:<span class="reserved">this</span>.configX, validator:<span class="reserved">this</span>.cfg.checkNumber, suppressEvent:true, supercedes:[<span class="literal">"iframe"</span>] } );
<span class="reserved">this</span>.cfg.addProperty(<span class="literal">"y"</span>, { handler:<span class="reserved">this</span>.configY, validator:<span class="reserved">this</span>.cfg.checkNumber, suppressEvent:true, supercedes:[<span class="literal">"iframe"</span>] } );
<span class="reserved">this</span>.cfg.addProperty(<span class="literal">"xy"</span>,{ handler:<span class="reserved">this</span>.configXY, suppressEvent:true, supercedes:[<span class="literal">"iframe"</span>] } );
<span class="reserved">this</span>.cfg.addProperty(<span class="literal">"context"</span>, { handler:<span class="reserved">this</span>.configContext, suppressEvent:true, supercedes:[<span class="literal">"iframe"</span>] } );
<span class="reserved">this</span>.cfg.addProperty(<span class="literal">"fixedcenter"</span>, { value:false, handler:<span class="reserved">this</span>.configFixedCenter, validator:<span class="reserved">this</span>.cfg.checkBoolean, supercedes:[<span class="literal">"iframe"</span>,<span class="literal">"visible"</span>] } );
<span class="reserved">this</span>.cfg.addProperty(<span class="literal">"width"</span>, { handler:<span class="reserved">this</span>.configWidth, suppressEvent:true, supercedes:[<span class="literal">"iframe"</span>] } );
<span class="reserved">this</span>.cfg.addProperty(<span class="literal">"height"</span>, { handler:<span class="reserved">this</span>.configHeight, suppressEvent:true, supercedes:[<span class="literal">"iframe"</span>] } );
<span class="reserved">this</span>.cfg.addProperty(<span class="literal">"zIndex"</span>, { value:null, handler:<span class="reserved">this</span>.configzIndex } );
<span class="reserved">this</span>.cfg.addProperty(<span class="literal">"constraintoviewport"</span>, { value:false, handler:<span class="reserved">this</span>.configConstrainToViewport, validator:<span class="reserved">this</span>.cfg.checkBoolean, supercedes:[<span class="literal">"iframe"</span>,<span class="literal">"x"</span>,<span class="literal">"y"</span>,<span class="literal">"xy"</span>] } );
<span class="reserved">this</span>.cfg.addProperty(<span class="literal">"iframe"</span>, { value:(<span class="reserved">this</span>.browser == <span class="literal">"ie"</span> ? true : false), handler:<span class="reserved">this</span>.configIframe, validator:<span class="reserved">this</span>.cfg.checkBoolean, supercedes:[<span class="literal">"zIndex"</span>] } );
};
<span class="comment">/**
* Moves the Overlay to the specified position. This function is identical to calling this.cfg.setProperty("xy", [x,y]);
* <span class="attrib">@param</span> {int} x The Overlay's new x position
* <span class="attrib">@param</span> {int} y The Overlay's new y position
*/</span>
YAHOO.widget.Overlay.<span class="reserved">prototype</span>.moveTo = <span class="reserved">function</span>(x, y) {
<span class="reserved">this</span>.cfg.setProperty(<span class="literal">"xy"</span>,[x,y]);
};
<span class="comment">/**
* 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
*/</span>
YAHOO.widget.Overlay.<span class="reserved">prototype</span>.hideMacGeckoScrollbars = <span class="reserved">function</span>() {
YAHOO.util.Dom.removeClass(<span class="reserved">this</span>.element, <span class="literal">"show-scrollbars"</span>);
YAHOO.util.Dom.addClass(<span class="reserved">this</span>.element, <span class="literal">"hide-scrollbars"</span>);
};
<span class="comment">/**
* 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
*/</span>
YAHOO.widget.Overlay.<span class="reserved">prototype</span>.showMacGeckoScrollbars = <span class="reserved">function</span>() {
YAHOO.util.Dom.removeClass(<span class="reserved">this</span>.element, <span class="literal">"hide-scrollbars"</span>);
YAHOO.util.Dom.addClass(<span class="reserved">this</span>.element, <span class="literal">"show-scrollbars"</span>);
};
<span class="comment">// BEGIN BUILT-IN PROPERTY EVENT HANDLERS //</span>
<span class="comment">/**
* The default event handler fired when the "visible" property is changed. This method is responsible for firing showEvent and hideEvent.
*/</span>
YAHOO.widget.Overlay.<span class="reserved">prototype</span>.configVisible = <span class="reserved">function</span>(type, args, obj) {
var visible = args[0];
var currentVis = YAHOO.util.Dom.getStyle(<span class="reserved">this</span>.element, <span class="literal">"visibility"</span>);
var effect = <span class="reserved">this</span>.cfg.getProperty(<span class="literal">"effect"</span>);
var effectInstances = [];
<span class="reserved">if</span> (effect) {
<span class="reserved">if</span> (effect instanceof Array) {
<span class="reserved">for</span> (var i=0;i&lt;effect.length;i++) {
var eff = effect[i];
effectInstances[effectInstances.length] = eff.effect(<span class="reserved">this</span>, eff.duration);
}
} <span class="reserved">else</span> {
effectInstances[effectInstances.length] = effect.effect(<span class="reserved">this</span>, effect.duration);
}
}
var isMacGecko = (<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">if</span> (visible) { <span class="comment">// Show</span>
<span class="reserved">if</span> (isMacGecko) {
<span class="reserved">this</span>.showMacGeckoScrollbars();
}
<span class="reserved">if</span> (effect) { <span class="comment">// Animate in</span>
<span class="reserved">if</span> (visible) { <span class="comment">// Animate in if not showing</span>
<span class="reserved">if</span> (currentVis != <span class="literal">"visible"</span>) {
<span class="reserved">this</span>.beforeShowEvent.fire();
<span class="reserved">for</span> (var j=0;j&lt;effectInstances.length;j++) {
var e = effectInstances[j];
<span class="reserved">if</span> (j === 0 &amp;&amp; ! YAHOO.util.Config.alreadySubscribed(e.animateInCompleteEvent,<span class="reserved">this</span>.showEvent.fire,<span class="reserved">this</span>.showEvent)) {
e.animateInCompleteEvent.subscribe(<span class="reserved">this</span>.showEvent.fire,<span class="reserved">this</span>.showEvent,true); <span class="comment">// Delegate showEvent until end of animateInComplete</span>
}
e.animateIn();
}
}
}
} <span class="reserved">else</span> { <span class="comment">// Show</span>
<span class="reserved">if</span> (currentVis != <span class="literal">"visible"</span>) {
<span class="reserved">this</span>.beforeShowEvent.fire();
YAHOO.util.Dom.setStyle(<span class="reserved">this</span>.element, <span class="literal">"visibility"</span>, <span class="literal">"visible"</span>);
<span class="reserved">this</span>.cfg.refireEvent(<span class="literal">"iframe"</span>);
<span class="reserved">this</span>.showEvent.fire();
}
}
} <span class="reserved">else</span> { <span class="comment">// Hide</span>
<span class="reserved">if</span> (isMacGecko) {
<span class="reserved">this</span>.hideMacGeckoScrollbars();
}
<span class="reserved">if</span> (effect) { <span class="comment">// Animate out if showing</span>
<span class="reserved">if</span> (currentVis == <span class="literal">"visible"</span>) {
<span class="reserved">this</span>.beforeHideEvent.fire();
<span class="reserved">for</span> (var k=0;k&lt;effectInstances.length;k++) {
var h = effectInstances[k];
<span class="reserved">if</span> (k === 0 &amp;&amp; ! YAHOO.util.Config.alreadySubscribed(h.animateOutCompleteEvent,<span class="reserved">this</span>.hideEvent.fire,<span class="reserved">this</span>.hideEvent)) {
h.animateOutCompleteEvent.subscribe(<span class="reserved">this</span>.hideEvent.fire,<span class="reserved">this</span>.hideEvent,true); <span class="comment">// Delegate hideEvent until end of animateOutComplete</span>
}
h.animateOut();
}
}
} <span class="reserved">else</span> { <span class="comment">// Simple hide</span>
<span class="reserved">if</span> (currentVis == <span class="literal">"visible"</span>) {
<span class="reserved">this</span>.beforeHideEvent.fire();
YAHOO.util.Dom.setStyle(<span class="reserved">this</span>.element, <span class="literal">"visibility"</span>, <span class="literal">"hidden"</span>);
<span class="reserved">this</span>.cfg.refireEvent(<span class="literal">"iframe"</span>);
<span class="reserved">this</span>.hideEvent.fire();
}
}
}
};
<span class="comment">/**
* Center event handler used for centering on scroll/resize, but only if the Overlay is visible
*/</span>
YAHOO.widget.Overlay.<span class="reserved">prototype</span>.doCenterOnDOMEvent = <span class="reserved">function</span>() {
<span class="reserved">if</span> (<span class="reserved">this</span>.cfg.getProperty(<span class="literal">"visible"</span>)) {
<span class="reserved">this</span>.center();
}
};
<span class="comment">/**
* The default event handler fired when the "fixedcenter" property is changed.
*/</span>
YAHOO.widget.Overlay.<span class="reserved">prototype</span>.configFixedCenter = <span class="reserved">function</span>(type, args, obj) {
var val = args[0];
<span class="reserved">if</span> (val) {
<span class="reserved">this</span>.center();
<span class="reserved">if</span> (! YAHOO.util.Config.alreadySubscribed(<span class="reserved">this</span>.beforeShowEvent, <span class="reserved">this</span>.center, <span class="reserved">this</span>)) {
<span class="reserved">this</span>.beforeShowEvent.subscribe(<span class="reserved">this</span>.center, <span class="reserved">this</span>, true);
}
<span class="reserved">if</span> (! YAHOO.util.Config.alreadySubscribed(YAHOO.widget.Overlay.windowResizeEvent, <span class="reserved">this</span>.doCenterOnDOMEvent, <span class="reserved">this</span>)) {
YAHOO.widget.Overlay.windowResizeEvent.subscribe(<span class="reserved">this</span>.doCenterOnDOMEvent, <span class="reserved">this</span>, true);
}
<span class="reserved">if</span> (! YAHOO.util.Config.alreadySubscribed(YAHOO.widget.Overlay.windowScrollEvent, <span class="reserved">this</span>.doCenterOnDOMEvent, <span class="reserved">this</span>)) {
YAHOO.widget.Overlay.windowScrollEvent.subscribe( <span class="reserved">this</span>.doCenterOnDOMEvent, <span class="reserved">this</span>, true);
}
} <span class="reserved">else</span> {
YAHOO.widget.Overlay.windowResizeEvent.unsubscribe(<span class="reserved">this</span>.doCenterOnDOMEvent, <span class="reserved">this</span>);
YAHOO.widget.Overlay.windowScrollEvent.unsubscribe(<span class="reserved">this</span>.doCenterOnDOMEvent, <span class="reserved">this</span>);
}
};
<span class="comment">/**
* The default event handler fired when the "height" property is changed.
*/</span>
YAHOO.widget.Overlay.<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>.element;
YAHOO.util.Dom.setStyle(el, <span class="literal">"height"</span>, height);
<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.Overlay.<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>.element;
YAHOO.util.Dom.setStyle(el, <span class="literal">"width"</span>, width);
<span class="reserved">this</span>.cfg.refireEvent(<span class="literal">"iframe"</span>);
};
<span class="comment">/**
* The default event handler fired when the "zIndex" property is changed.
*/</span>
YAHOO.widget.Overlay.<span class="reserved">prototype</span>.configzIndex = <span class="reserved">function</span>(type, args, obj) {
var zIndex = args[0];
var el = <span class="reserved">this</span>.element;
<span class="reserved">if</span> (! zIndex) {
zIndex = YAHOO.util.Dom.getStyle(el, <span class="literal">"zIndex"</span>);
<span class="reserved">if</span> (! zIndex || isNaN(zIndex)) {
zIndex = 0;
}
}
<span class="reserved">if</span> (<span class="reserved">this</span>.iframe) {
<span class="reserved">if</span> (zIndex &lt;= 0) {
zIndex = 1;
}
YAHOO.util.Dom.setStyle(<span class="reserved">this</span>.iframe, <span class="literal">"zIndex"</span>, (zIndex-1));
}
YAHOO.util.Dom.setStyle(el, <span class="literal">"zIndex"</span>, zIndex);
<span class="reserved">this</span>.cfg.setProperty(<span class="literal">"zIndex"</span>, zIndex, true);
};
<span class="comment">/**
* The default event handler fired when the "xy" property is changed.
*/</span>
YAHOO.widget.Overlay.<span class="reserved">prototype</span>.configXY = <span class="reserved">function</span>(type, args, obj) {
var pos = args[0];
var x = pos[0];
var y = pos[1];
<span class="reserved">this</span>.cfg.setProperty(<span class="literal">"x"</span>, x);
<span class="reserved">this</span>.cfg.setProperty(<span class="literal">"y"</span>, y);
<span class="reserved">this</span>.beforeMoveEvent.fire([x,y]);
x = <span class="reserved">this</span>.cfg.getProperty(<span class="literal">"x"</span>);
y = <span class="reserved">this</span>.cfg.getProperty(<span class="literal">"y"</span>);
<span class="reserved">this</span>.cfg.refireEvent(<span class="literal">"iframe"</span>);
<span class="reserved">this</span>.moveEvent.fire([x,y]);
};
<span class="comment">/**
* The default event handler fired when the "x" property is changed.
*/</span>
YAHOO.widget.Overlay.<span class="reserved">prototype</span>.configX = <span class="reserved">function</span>(type, args, obj) {
var x = args[0];
var y = <span class="reserved">this</span>.cfg.getProperty(<span class="literal">"y"</span>);
<span class="reserved">this</span>.cfg.setProperty(<span class="literal">"x"</span>, x, true);
<span class="reserved">this</span>.cfg.setProperty(<span class="literal">"y"</span>, y, true);
<span class="reserved">this</span>.beforeMoveEvent.fire([x,y]);
x = <span class="reserved">this</span>.cfg.getProperty(<span class="literal">"x"</span>);
y = <span class="reserved">this</span>.cfg.getProperty(<span class="literal">"y"</span>);
YAHOO.util.Dom.setX(<span class="reserved">this</span>.element, x, true);
<span class="reserved">this</span>.cfg.setProperty(<span class="literal">"xy"</span>, [x, y], true);
<span class="reserved">this</span>.cfg.refireEvent(<span class="literal">"iframe"</span>);
<span class="reserved">this</span>.moveEvent.fire([x, y]);
};
<span class="comment">/**
* The default event handler fired when the "y" property is changed.
*/</span>
YAHOO.widget.Overlay.<span class="reserved">prototype</span>.configY = <span class="reserved">function</span>(type, args, obj) {
var x = <span class="reserved">this</span>.cfg.getProperty(<span class="literal">"x"</span>);
var y = args[0];
<span class="reserved">this</span>.cfg.setProperty(<span class="literal">"x"</span>, x, true);
<span class="reserved">this</span>.cfg.setProperty(<span class="literal">"y"</span>, y, true);
<span class="reserved">this</span>.beforeMoveEvent.fire([x,y]);
x = <span class="reserved">this</span>.cfg.getProperty(<span class="literal">"x"</span>);
y = <span class="reserved">this</span>.cfg.getProperty(<span class="literal">"y"</span>);
YAHOO.util.Dom.setY(<span class="reserved">this</span>.element, y, true);
<span class="reserved">this</span>.cfg.setProperty(<span class="literal">"xy"</span>, [x, y], true);
<span class="reserved">this</span>.cfg.refireEvent(<span class="literal">"iframe"</span>);
<span class="reserved">this</span>.moveEvent.fire([x, y]);
};
<span class="comment">/**
* Shows the iframe shim, if it has been enabled
*/</span>
YAHOO.widget.Overlay.<span class="reserved">prototype</span>.showIframe = <span class="reserved">function</span>() {
<span class="reserved">if</span> (<span class="reserved">this</span>.iframe) {
<span class="reserved">this</span>.iframe.style.display = <span class="literal">"block"</span>;
}
}
<span class="comment">/**
* Hides the iframe shim, if it has been enabled
*/</span>
YAHOO.widget.Overlay.<span class="reserved">prototype</span>.hideIframe = <span class="reserved">function</span>() {
<span class="reserved">if</span> (<span class="reserved">this</span>.iframe) {
<span class="reserved">this</span>.iframe.style.display = <span class="literal">"none"</span>;
}
}
<span class="comment">/**
* The default event handler fired when the "iframe" property is changed.
*/</span>
YAHOO.widget.Overlay.<span class="reserved">prototype</span>.configIframe = <span class="reserved">function</span>(type, args, obj) {
var val = args[0];
<span class="reserved">if</span> (val) { <span class="comment">// IFRAME shim is enabled</span>
<span class="reserved">if</span> (! YAHOO.util.Config.alreadySubscribed(<span class="reserved">this</span>.showEvent, <span class="reserved">this</span>.showIframe, <span class="reserved">this</span>)) {
<span class="reserved">this</span>.showEvent.subscribe(<span class="reserved">this</span>.showIframe, <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>.hideIframe, <span class="reserved">this</span>)) {
<span class="reserved">this</span>.hideEvent.subscribe(<span class="reserved">this</span>.hideIframe, <span class="reserved">this</span>, true);
}
var x = <span class="reserved">this</span>.cfg.getProperty(<span class="literal">"x"</span>);
var y = <span class="reserved">this</span>.cfg.getProperty(<span class="literal">"y"</span>);
<span class="reserved">if</span> (! x || ! y) {
<span class="reserved">this</span>.syncPosition();
x = <span class="reserved">this</span>.cfg.getProperty(<span class="literal">"x"</span>);
y = <span class="reserved">this</span>.cfg.getProperty(<span class="literal">"y"</span>);
}
<span class="reserved">if</span> (! isNaN(x) &amp;&amp; ! isNaN(y)) {
<span class="reserved">if</span> (! <span class="reserved">this</span>.iframe) {
<span class="reserved">this</span>.iframe = document.createElement(<span class="literal">"iframe"</span>);
<span class="reserved">if</span> (<span class="reserved">this</span>.isSecure) {
<span class="reserved">this</span>.iframe.src = <span class="reserved">this</span>.imageRoot + YAHOO.widget.Overlay.IFRAME_SRC;
}
var parent = <span class="reserved">this</span>.element.parentNode;
<span class="reserved">if</span> (parent) {
parent.appendChild(<span class="reserved">this</span>.iframe);
} <span class="reserved">else</span> {
document.body.appendChild(<span class="reserved">this</span>.iframe);
}
YAHOO.util.Dom.setStyle(<span class="reserved">this</span>.iframe, <span class="literal">"position"</span>, <span class="literal">"absolute"</span>);
YAHOO.util.Dom.setStyle(<span class="reserved">this</span>.iframe, <span class="literal">"border"</span>, <span class="literal">"none"</span>);
YAHOO.util.Dom.setStyle(<span class="reserved">this</span>.iframe, <span class="literal">"margin"</span>, <span class="literal">"0"</span>);
YAHOO.util.Dom.setStyle(<span class="reserved">this</span>.iframe, <span class="literal">"padding"</span>, <span class="literal">"0"</span>);
YAHOO.util.Dom.setStyle(<span class="reserved">this</span>.iframe, <span class="literal">"opacity"</span>, <span class="literal">"0"</span>);
<span class="reserved">if</span> (<span class="reserved">this</span>.cfg.getProperty(<span class="literal">"visible"</span>)) {
<span class="reserved">this</span>.showIframe();
} <span class="reserved">else</span> {
<span class="reserved">this</span>.hideIframe();
}
}
var iframeDisplay = YAHOO.util.Dom.getStyle(<span class="reserved">this</span>.iframe, <span class="literal">"display"</span>);
<span class="reserved">if</span> (iframeDisplay == <span class="literal">"none"</span>) {
<span class="reserved">this</span>.iframe.style.display = <span class="literal">"block"</span>;
}
YAHOO.util.Dom.setXY(<span class="reserved">this</span>.iframe, [x,y]);
var width = <span class="reserved">this</span>.element.clientWidth;
var height = <span class="reserved">this</span>.element.clientHeight;
YAHOO.util.Dom.setStyle(<span class="reserved">this</span>.iframe, <span class="literal">"width"</span>, (width+2) + <span class="literal">"px"</span>);
YAHOO.util.Dom.setStyle(<span class="reserved">this</span>.iframe, <span class="literal">"height"</span>, (height+2) + <span class="literal">"px"</span>);
<span class="reserved">if</span> (iframeDisplay == <span class="literal">"none"</span>) {
<span class="reserved">this</span>.iframe.style.display = <span class="literal">"none"</span>;
}
}
} <span class="reserved">else</span> {
<span class="reserved">if</span> (<span class="reserved">this</span>.iframe) {
<span class="reserved">this</span>.iframe.style.display = <span class="literal">"none"</span>;
}
<span class="reserved">this</span>.showEvent.unsubscribe(<span class="reserved">this</span>.showIframe, <span class="reserved">this</span>);
<span class="reserved">this</span>.hideEvent.unsubscribe(<span class="reserved">this</span>.hideIframe, <span class="reserved">this</span>);
}
};
<span class="comment">/**
* The default event handler fired when the "constraintoviewport" property is changed.
*/</span>
YAHOO.widget.Overlay.<span class="reserved">prototype</span>.configConstrainToViewport = <span class="reserved">function</span>(type, args, obj) {
var val = args[0];
<span class="reserved">if</span> (val) {
<span class="reserved">if</span> (! YAHOO.util.Config.alreadySubscribed(<span class="reserved">this</span>.beforeMoveEvent, <span class="reserved">this</span>.enforceConstraints, <span class="reserved">this</span>)) {
<span class="reserved">this</span>.beforeMoveEvent.subscribe(<span class="reserved">this</span>.enforceConstraints, <span class="reserved">this</span>, true);
}
} <span class="reserved">else</span> {
<span class="reserved">this</span>.beforeMoveEvent.unsubscribe(<span class="reserved">this</span>.enforceConstraints, <span class="reserved">this</span>);
}
};
<span class="comment">/**
* The default event handler fired when the "context" property is changed.
*/</span>
YAHOO.widget.Overlay.<span class="reserved">prototype</span>.configContext = <span class="reserved">function</span>(type, args, obj) {
var contextArgs = args[0];
<span class="reserved">if</span> (contextArgs) {
var contextEl = contextArgs[0];
var elementMagnetCorner = contextArgs[1];
var contextMagnetCorner = contextArgs[2];
<span class="reserved">if</span> (contextEl) {
<span class="reserved">if</span> (typeof contextEl == <span class="literal">"string"</span>) {
<span class="reserved">this</span>.cfg.setProperty(<span class="literal">"context"</span>, [document.getElementById(contextEl),elementMagnetCorner,contextMagnetCorner], true);
}
<span class="reserved">if</span> (elementMagnetCorner &amp;&amp; contextMagnetCorner) {
<span class="reserved">this</span>.align(elementMagnetCorner, contextMagnetCorner);
}
}
}
};
<span class="comment">// END BUILT-IN PROPERTY EVENT HANDLERS //</span>
<span class="comment">/**
* 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.
* <span class="attrib">@param</span> {string} elementAlign The string representing the corner of the Overlay that should be aligned to the context element
* <span class="attrib">@param</span> {string} contextAlign The corner of the context element that the elementAlign corner should stick to.
*/</span>
YAHOO.widget.Overlay.<span class="reserved">prototype</span>.align = <span class="reserved">function</span>(elementAlign, contextAlign) {
var contextArgs = <span class="reserved">this</span>.cfg.getProperty(<span class="literal">"context"</span>);
<span class="reserved">if</span> (contextArgs) {
var context = contextArgs[0];
var element = <span class="reserved">this</span>.element;
var me = <span class="reserved">this</span>;
<span class="reserved">if</span> (! elementAlign) {
elementAlign = contextArgs[1];
}
<span class="reserved">if</span> (! contextAlign) {
contextAlign = contextArgs[2];
}
<span class="reserved">if</span> (element &amp;&amp; context) {
var elementRegion = YAHOO.util.Dom.getRegion(element);
var contextRegion = YAHOO.util.Dom.getRegion(context);
var doAlign = <span class="reserved">function</span>(v,h) {
switch (elementAlign) {
case YAHOO.widget.Overlay.TOP_LEFT:
me.moveTo(h,v);
break;
case YAHOO.widget.Overlay.TOP_RIGHT:
me.moveTo(h-element.offsetWidth,v);
break;
case YAHOO.widget.Overlay.BOTTOM_LEFT:
me.moveTo(h,v-element.offsetHeight);
break;
case YAHOO.widget.Overlay.BOTTOM_RIGHT:
me.moveTo(h-element.offsetWidth,v-element.offsetHeight);
break;
}
};
switch (contextAlign) {
case YAHOO.widget.Overlay.TOP_LEFT:
doAlign(contextRegion.top, contextRegion.left);
break;
case YAHOO.widget.Overlay.TOP_RIGHT:
doAlign(contextRegion.top, contextRegion.right);
break;
case YAHOO.widget.Overlay.BOTTOM_LEFT:
doAlign(contextRegion.bottom, contextRegion.left);
break;
case YAHOO.widget.Overlay.BOTTOM_RIGHT:
doAlign(contextRegion.bottom, contextRegion.right);
break;
}
}
}
};
<span class="comment">/**
* The default event handler executed when the moveEvent is fired, if the "constraintoviewport" is set to true.
*/</span>
YAHOO.widget.Overlay.<span class="reserved">prototype</span>.enforceConstraints = <span class="reserved">function</span>(type, args, obj) {
var pos = args[0];
var x = pos[0];
var y = pos[1];
var offsetHeight = <span class="reserved">this</span>.element.offsetHeight;
var offsetWidth = <span class="reserved">this</span>.element.offsetWidth;
var viewPortWidth = YAHOO.util.Dom.getViewportWidth();
var viewPortHeight = YAHOO.util.Dom.getViewportHeight();
var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
var topConstraint = scrollY + 10;
var leftConstraint = scrollX + 10;
var bottomConstraint = scrollY + viewPortHeight - offsetHeight - 10;
var rightConstraint = scrollX + viewPortWidth - offsetWidth - 10;
<span class="reserved">if</span> (x &lt; leftConstraint) {
x = leftConstraint;
} <span class="reserved">else</span> <span class="reserved">if</span> (x &gt; rightConstraint) {
x = rightConstraint;
}
<span class="reserved">if</span> (y &lt; topConstraint) {
y = topConstraint;
} <span class="reserved">else</span> <span class="reserved">if</span> (y &gt; bottomConstraint) {
y = bottomConstraint;
}
<span class="reserved">this</span>.cfg.setProperty(<span class="literal">"x"</span>, x, true);
<span class="reserved">this</span>.cfg.setProperty(<span class="literal">"y"</span>, y, true);
<span class="reserved">this</span>.cfg.setProperty(<span class="literal">"xy"</span>, [x,y], true);
};
<span class="comment">/**
* Centers the container in the viewport.
*/</span>
YAHOO.widget.Overlay.<span class="reserved">prototype</span>.center = <span class="reserved">function</span>() {
var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
var viewPortWidth = YAHOO.util.Dom.getClientWidth();
var viewPortHeight = YAHOO.util.Dom.getClientHeight();
var elementWidth = <span class="reserved">this</span>.element.offsetWidth;
var elementHeight = <span class="reserved">this</span>.element.offsetHeight;
var x = (viewPortWidth / 2) - (elementWidth / 2) + scrollX;
var y = (viewPortHeight / 2) - (elementHeight / 2) + scrollY;
<span class="reserved">this</span>.element.style.left = parseInt(x, 10) + <span class="literal">"px"</span>;
<span class="reserved">this</span>.element.style.top = parseInt(y, 10) + <span class="literal">"px"</span>;
<span class="reserved">this</span>.syncPosition();
<span class="reserved">this</span>.cfg.refireEvent(<span class="literal">"iframe"</span>);
};
<span class="comment">/**
* 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 &amp; drop.
*/</span>
YAHOO.widget.Overlay.<span class="reserved">prototype</span>.syncPosition = <span class="reserved">function</span>() {
var pos = YAHOO.util.Dom.getXY(<span class="reserved">this</span>.element);
<span class="reserved">this</span>.cfg.setProperty(<span class="literal">"x"</span>, pos[0], true);
<span class="reserved">this</span>.cfg.setProperty(<span class="literal">"y"</span>, pos[1], true);
<span class="reserved">this</span>.cfg.setProperty(<span class="literal">"xy"</span>, pos, true);
};
<span class="comment">/**
* Event handler fired when the resize monitor element is resized.
*/</span>
YAHOO.widget.Overlay.<span class="reserved">prototype</span>.onDomResize = <span class="reserved">function</span>(e, obj) {
YAHOO.widget.Overlay.superclass.onDomResize.call(<span class="reserved">this</span>, e, obj);
<span class="reserved">this</span>.cfg.refireEvent(<span class="literal">"iframe"</span>);
};
<span class="comment">/**
* Removes the Overlay element from the DOM and sets all child elements to null.
*/</span>
YAHOO.widget.Overlay.<span class="reserved">prototype</span>.destroy = <span class="reserved">function</span>() {
<span class="reserved">if</span> (<span class="reserved">this</span>.iframe) {
<span class="reserved">this</span>.iframe.parentNode.removeChild(<span class="reserved">this</span>.iframe);
}
<span class="reserved">this</span>.iframe = null;
YAHOO.widget.Overlay.superclass.destroy.call(<span class="reserved">this</span>);
};
<span class="comment">/**
* Returns a string representation of the object.
* <span class="attrib">@type</span> string
*/</span>
YAHOO.widget.Overlay.<span class="reserved">prototype</span>.toString = <span class="reserved">function</span>() {
<span class="reserved">return</span> <span class="literal">"Overlay "</span> + <span class="reserved">this</span>.id;
};
<span class="comment">/**
* A singleton CustomEvent used for reacting to the DOM event for window scroll
* <span class="attrib">@type</span> YAHOO.util.CustomEvent
*/</span>
YAHOO.widget.Overlay.windowScrollEvent = new YAHOO.util.CustomEvent(<span class="literal">"windowScroll"</span>);
<span class="comment">/**
* A singleton CustomEvent used for reacting to the DOM event for window resize
* <span class="attrib">@type</span> YAHOO.util.CustomEvent
*/</span>
YAHOO.widget.Overlay.windowResizeEvent = new YAHOO.util.CustomEvent(<span class="literal">"windowResize"</span>);
<span class="comment">/**
* The DOM event handler used to fire the CustomEvent for window scroll
* <span class="attrib">@type</span> Function
*/</span>
YAHOO.widget.Overlay.windowScrollHandler = <span class="reserved">function</span>(e) {
YAHOO.widget.Overlay.windowScrollEvent.fire();
};
<span class="comment">/**
* The DOM event handler used to fire the CustomEvent for window resize
* <span class="attrib">@type</span> Function
*/</span>
YAHOO.widget.Overlay.windowResizeHandler = <span class="reserved">function</span>(e) {
YAHOO.widget.Overlay.windowResizeEvent.fire();
};
<span class="comment">/**
* <span class="attrib">@private</span>
*/</span>
YAHOO.widget.Overlay._initialized = null;
<span class="reserved">if</span> (YAHOO.widget.Overlay._initialized === null) {
YAHOO.util.Event.addListener(window, <span class="literal">"scroll"</span>, YAHOO.widget.Overlay.windowScrollHandler);
YAHOO.util.Event.addListener(window, <span class="literal">"resize"</span>, YAHOO.widget.Overlay.windowResizeHandler);
YAHOO.widget.Overlay._initialized = true;
}
</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