webgui/www/extras/yui/docs/Region.js.html
2008-03-25 16:13:25 +00:00

336 lines
26 KiB
HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>API: dom Region.js (YUI Library)</title>
<link rel="stylesheet" type="text/css" href="assets/api.css">
<script type="text/javascript" src="assets/api-js"></script>
<script type="text/javascript" src="assets/ac-js"></script>
</head>
<body id="yahoo-com">
<div id="doc3" class="yui-t2">
<div id="hd">
<a href="http://developer.yahoo.com/yui/"><h1>Yahoo! UI Library</h1></a>
<h3>dom&nbsp; <span class="subtitle">2.5.1</span></h3>
<p>
<a href="./index.html">Yahoo! UI Library</a>
&gt; <a href="./module_dom.html">dom</a>
&gt; Region.js (source view)
</p>
</div>
<div id="bd">
<div id="yui-main">
<div class="yui-b">
<form name="yui-classopts-form">
<span id="classopts"><input type="checkbox" name="showprivate" id="showprivate" /> Show Private</span>
<span id="classopts"><input type="checkbox" name="showprotected" id="showprotected" /> Show Protected</span>
</form>
<div id="srcout">
<style>
#doc3 #classopts { display:none; }
</style>
<div class="highlight" ><pre><span class="c">/**</span>
<span class="c"> * A region is a representation of an object on a grid. It is defined</span>
<span class="c"> * by the top, right, bottom, left extents, so is rectangular by default. If </span>
<span class="c"> * other shapes are required, this class could be extended to support it.</span>
<span class="c"> * @namespace YAHOO.util</span>
<span class="c"> * @class Region</span>
<span class="c"> * @param {Int} t the top extent</span>
<span class="c"> * @param {Int} r the right extent</span>
<span class="c"> * @param {Int} b the bottom extent</span>
<span class="c"> * @param {Int} l the left extent</span>
<span class="c"> * @constructor</span>
<span class="c"> */</span>
<span class="nx">YAHOO</span><span class="o">.</span><span class="nx">util</span><span class="o">.</span><span class="nx">Region</span> <span class="o">=</span> <span class="k">function</span><span class="o">(</span><span class="nx">t</span><span class="o">,</span> <span class="nx">r</span><span class="o">,</span> <span class="nx">b</span><span class="o">,</span> <span class="nx">l</span><span class="o">)</span> <span class="o">{</span>
<span class="c">/**</span>
<span class="c"> * The region&#39;s top extent</span>
<span class="c"> * @property top</span>
<span class="c"> * @type Int</span>
<span class="c"> */</span>
<span class="k">this</span><span class="o">.</span><span class="nx">top</span> <span class="o">=</span> <span class="nx">t</span><span class="o">;</span>
<span class="c">/**</span>
<span class="c"> * The region&#39;s top extent as index, for symmetry with set/getXY</span>
<span class="c"> * @property 1</span>
<span class="c"> * @type Int</span>
<span class="c"> */</span>
<span class="k">this</span><span class="o">[</span><span class="m">1</span><span class="o">]</span> <span class="o">=</span> <span class="nx">t</span><span class="o">;</span>
<span class="c">/**</span>
<span class="c"> * The region&#39;s right extent</span>
<span class="c"> * @property right</span>
<span class="c"> * @type int</span>
<span class="c"> */</span>
<span class="k">this</span><span class="o">.</span><span class="nx">right</span> <span class="o">=</span> <span class="nx">r</span><span class="o">;</span>
<span class="c">/**</span>
<span class="c"> * The region&#39;s bottom extent</span>
<span class="c"> * @property bottom</span>
<span class="c"> * @type Int</span>
<span class="c"> */</span>
<span class="k">this</span><span class="o">.</span><span class="nx">bottom</span> <span class="o">=</span> <span class="nx">b</span><span class="o">;</span>
<span class="c">/**</span>
<span class="c"> * The region&#39;s left extent</span>
<span class="c"> * @property left</span>
<span class="c"> * @type Int</span>
<span class="c"> */</span>
<span class="k">this</span><span class="o">.</span><span class="nx">left</span> <span class="o">=</span> <span class="nx">l</span><span class="o">;</span>
<span class="c">/**</span>
<span class="c"> * The region&#39;s left extent as index, for symmetry with set/getXY</span>
<span class="c"> * @property 0</span>
<span class="c"> * @type Int</span>
<span class="c"> */</span>
<span class="k">this</span><span class="o">[</span><span class="m">0</span><span class="o">]</span> <span class="o">=</span> <span class="nx">l</span><span class="o">;</span>
<span class="o">};</span>
<span class="c">/**</span>
<span class="c"> * Returns true if this region contains the region passed in</span>
<span class="c"> * @method contains</span>
<span class="c"> * @param {Region} region The region to evaluate</span>
<span class="c"> * @return {Boolean} True if the region is contained with this region, </span>
<span class="c"> * else false</span>
<span class="c"> */</span>
<span class="nx">YAHOO</span><span class="o">.</span><span class="nx">util</span><span class="o">.</span><span class="nx">Region</span><span class="o">.</span><span class="nx">prototype</span><span class="o">.</span><span class="nx">contains</span> <span class="o">=</span> <span class="k">function</span><span class="o">(</span><span class="nx">region</span><span class="o">)</span> <span class="o">{</span>
<span class="k">return</span> <span class="o">(</span> <span class="nx">region</span><span class="o">.</span><span class="nx">left</span> <span class="o">&gt;=</span> <span class="k">this</span><span class="o">.</span><span class="nx">left</span> <span class="o">&amp;&amp;</span>
<span class="nx">region</span><span class="o">.</span><span class="nx">right</span> <span class="o">&lt;=</span> <span class="k">this</span><span class="o">.</span><span class="nx">right</span> <span class="o">&amp;&amp;</span>
<span class="nx">region</span><span class="o">.</span><span class="nx">top</span> <span class="o">&gt;=</span> <span class="k">this</span><span class="o">.</span><span class="nx">top</span> <span class="o">&amp;&amp;</span>
<span class="nx">region</span><span class="o">.</span><span class="nx">bottom</span> <span class="o">&lt;=</span> <span class="k">this</span><span class="o">.</span><span class="nx">bottom</span> <span class="o">);</span>
<span class="c">// this.logger.debug(&quot;does &quot; + this + &quot; contain &quot; + region + &quot; ... &quot; + ret);</span>
<span class="c"></span><span class="o">};</span>
<span class="c">/**</span>
<span class="c"> * Returns the area of the region</span>
<span class="c"> * @method getArea</span>
<span class="c"> * @return {Int} the region&#39;s area</span>
<span class="c"> */</span>
<span class="nx">YAHOO</span><span class="o">.</span><span class="nx">util</span><span class="o">.</span><span class="nx">Region</span><span class="o">.</span><span class="nx">prototype</span><span class="o">.</span><span class="nx">getArea</span> <span class="o">=</span> <span class="k">function</span><span class="o">()</span> <span class="o">{</span>
<span class="k">return</span> <span class="o">(</span> <span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">bottom</span> <span class="o">-</span> <span class="k">this</span><span class="o">.</span><span class="nx">top</span><span class="o">)</span> <span class="o">*</span> <span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">right</span> <span class="o">-</span> <span class="k">this</span><span class="o">.</span><span class="nx">left</span><span class="o">)</span> <span class="o">);</span>
<span class="o">};</span>
<span class="c">/**</span>
<span class="c"> * Returns the region where the passed in region overlaps with this one</span>
<span class="c"> * @method intersect</span>
<span class="c"> * @param {Region} region The region that intersects</span>
<span class="c"> * @return {Region} The overlap region, or null if there is no overlap</span>
<span class="c"> */</span>
<span class="nx">YAHOO</span><span class="o">.</span><span class="nx">util</span><span class="o">.</span><span class="nx">Region</span><span class="o">.</span><span class="nx">prototype</span><span class="o">.</span><span class="nx">intersect</span> <span class="o">=</span> <span class="k">function</span><span class="o">(</span><span class="nx">region</span><span class="o">)</span> <span class="o">{</span>
<span class="k">var</span> <span class="nx">t</span> <span class="o">=</span> <span class="nb">Math</span><span class="o">.</span><span class="nx">max</span><span class="o">(</span> <span class="k">this</span><span class="o">.</span><span class="nx">top</span><span class="o">,</span> <span class="nx">region</span><span class="o">.</span><span class="nx">top</span> <span class="o">);</span>
<span class="k">var</span> <span class="nx">r</span> <span class="o">=</span> <span class="nb">Math</span><span class="o">.</span><span class="nx">min</span><span class="o">(</span> <span class="k">this</span><span class="o">.</span><span class="nx">right</span><span class="o">,</span> <span class="nx">region</span><span class="o">.</span><span class="nx">right</span> <span class="o">);</span>
<span class="k">var</span> <span class="nx">b</span> <span class="o">=</span> <span class="nb">Math</span><span class="o">.</span><span class="nx">min</span><span class="o">(</span> <span class="k">this</span><span class="o">.</span><span class="nx">bottom</span><span class="o">,</span> <span class="nx">region</span><span class="o">.</span><span class="nx">bottom</span> <span class="o">);</span>
<span class="k">var</span> <span class="nx">l</span> <span class="o">=</span> <span class="nb">Math</span><span class="o">.</span><span class="nx">max</span><span class="o">(</span> <span class="k">this</span><span class="o">.</span><span class="nx">left</span><span class="o">,</span> <span class="nx">region</span><span class="o">.</span><span class="nx">left</span> <span class="o">);</span>
<span class="k">if</span> <span class="o">(</span><span class="nx">b</span> <span class="o">&gt;=</span> <span class="nx">t</span> <span class="o">&amp;&amp;</span> <span class="nx">r</span> <span class="o">&gt;=</span> <span class="nx">l</span><span class="o">)</span> <span class="o">{</span>
<span class="k">return</span> <span class="k">new</span> <span class="nx">YAHOO</span><span class="o">.</span><span class="nx">util</span><span class="o">.</span><span class="nx">Region</span><span class="o">(</span><span class="nx">t</span><span class="o">,</span> <span class="nx">r</span><span class="o">,</span> <span class="nx">b</span><span class="o">,</span> <span class="nx">l</span><span class="o">);</span>
<span class="o">}</span> <span class="k">else</span> <span class="o">{</span>
<span class="k">return</span> <span class="kc">null</span><span class="o">;</span>
<span class="o">}</span>
<span class="o">};</span>
<span class="c">/**</span>
<span class="c"> * Returns the region representing the smallest region that can contain both</span>
<span class="c"> * the passed in region and this region.</span>
<span class="c"> * @method union</span>
<span class="c"> * @param {Region} region The region that to create the union with</span>
<span class="c"> * @return {Region} The union region</span>
<span class="c"> */</span>
<span class="nx">YAHOO</span><span class="o">.</span><span class="nx">util</span><span class="o">.</span><span class="nx">Region</span><span class="o">.</span><span class="nx">prototype</span><span class="o">.</span><span class="nx">union</span> <span class="o">=</span> <span class="k">function</span><span class="o">(</span><span class="nx">region</span><span class="o">)</span> <span class="o">{</span>
<span class="k">var</span> <span class="nx">t</span> <span class="o">=</span> <span class="nb">Math</span><span class="o">.</span><span class="nx">min</span><span class="o">(</span> <span class="k">this</span><span class="o">.</span><span class="nx">top</span><span class="o">,</span> <span class="nx">region</span><span class="o">.</span><span class="nx">top</span> <span class="o">);</span>
<span class="k">var</span> <span class="nx">r</span> <span class="o">=</span> <span class="nb">Math</span><span class="o">.</span><span class="nx">max</span><span class="o">(</span> <span class="k">this</span><span class="o">.</span><span class="nx">right</span><span class="o">,</span> <span class="nx">region</span><span class="o">.</span><span class="nx">right</span> <span class="o">);</span>
<span class="k">var</span> <span class="nx">b</span> <span class="o">=</span> <span class="nb">Math</span><span class="o">.</span><span class="nx">max</span><span class="o">(</span> <span class="k">this</span><span class="o">.</span><span class="nx">bottom</span><span class="o">,</span> <span class="nx">region</span><span class="o">.</span><span class="nx">bottom</span> <span class="o">);</span>
<span class="k">var</span> <span class="nx">l</span> <span class="o">=</span> <span class="nb">Math</span><span class="o">.</span><span class="nx">min</span><span class="o">(</span> <span class="k">this</span><span class="o">.</span><span class="nx">left</span><span class="o">,</span> <span class="nx">region</span><span class="o">.</span><span class="nx">left</span> <span class="o">);</span>
<span class="k">return</span> <span class="k">new</span> <span class="nx">YAHOO</span><span class="o">.</span><span class="nx">util</span><span class="o">.</span><span class="nx">Region</span><span class="o">(</span><span class="nx">t</span><span class="o">,</span> <span class="nx">r</span><span class="o">,</span> <span class="nx">b</span><span class="o">,</span> <span class="nx">l</span><span class="o">);</span>
<span class="o">};</span>
<span class="c">/**</span>
<span class="c"> * toString</span>
<span class="c"> * @method toString</span>
<span class="c"> * @return string the region properties</span>
<span class="c"> */</span>
<span class="nx">YAHOO</span><span class="o">.</span><span class="nx">util</span><span class="o">.</span><span class="nx">Region</span><span class="o">.</span><span class="nx">prototype</span><span class="o">.</span><span class="nx">toString</span> <span class="o">=</span> <span class="k">function</span><span class="o">()</span> <span class="o">{</span>
<span class="k">return</span> <span class="o">(</span> <span class="s2">&quot;Region {&quot;</span> <span class="o">+</span>
<span class="s2">&quot;top: &quot;</span> <span class="o">+</span> <span class="k">this</span><span class="o">.</span><span class="nx">top</span> <span class="o">+</span>
<span class="s2">&quot;, right: &quot;</span> <span class="o">+</span> <span class="k">this</span><span class="o">.</span><span class="nx">right</span> <span class="o">+</span>
<span class="s2">&quot;, bottom: &quot;</span> <span class="o">+</span> <span class="k">this</span><span class="o">.</span><span class="nx">bottom</span> <span class="o">+</span>
<span class="s2">&quot;, left: &quot;</span> <span class="o">+</span> <span class="k">this</span><span class="o">.</span><span class="nx">left</span> <span class="o">+</span>
<span class="s2">&quot;}&quot;</span> <span class="o">);</span>
<span class="o">};</span>
<span class="c">/**</span>
<span class="c"> * Returns a region that is occupied by the DOM element</span>
<span class="c"> * @method getRegion</span>
<span class="c"> * @param {HTMLElement} el The element</span>
<span class="c"> * @return {Region} The region that the element occupies</span>
<span class="c"> * @static</span>
<span class="c"> */</span>
<span class="nx">YAHOO</span><span class="o">.</span><span class="nx">util</span><span class="o">.</span><span class="nx">Region</span><span class="o">.</span><span class="nx">getRegion</span> <span class="o">=</span> <span class="k">function</span><span class="o">(</span><span class="nx">el</span><span class="o">)</span> <span class="o">{</span>
<span class="k">var</span> <span class="nx">p</span> <span class="o">=</span> <span class="nx">YAHOO</span><span class="o">.</span><span class="nx">util</span><span class="o">.</span><span class="nx">Dom</span><span class="o">.</span><span class="nx">getXY</span><span class="o">(</span><span class="nx">el</span><span class="o">);</span>
<span class="k">var</span> <span class="nx">t</span> <span class="o">=</span> <span class="nx">p</span><span class="o">[</span><span class="m">1</span><span class="o">];</span>
<span class="k">var</span> <span class="nx">r</span> <span class="o">=</span> <span class="nx">p</span><span class="o">[</span><span class="m">0</span><span class="o">]</span> <span class="o">+</span> <span class="nx">el</span><span class="o">.</span><span class="nx">offsetWidth</span><span class="o">;</span>
<span class="k">var</span> <span class="nx">b</span> <span class="o">=</span> <span class="nx">p</span><span class="o">[</span><span class="m">1</span><span class="o">]</span> <span class="o">+</span> <span class="nx">el</span><span class="o">.</span><span class="nx">offsetHeight</span><span class="o">;</span>
<span class="k">var</span> <span class="nx">l</span> <span class="o">=</span> <span class="nx">p</span><span class="o">[</span><span class="m">0</span><span class="o">];</span>
<span class="k">return</span> <span class="k">new</span> <span class="nx">YAHOO</span><span class="o">.</span><span class="nx">util</span><span class="o">.</span><span class="nx">Region</span><span class="o">(</span><span class="nx">t</span><span class="o">,</span> <span class="nx">r</span><span class="o">,</span> <span class="nx">b</span><span class="o">,</span> <span class="nx">l</span><span class="o">);</span>
<span class="o">};</span>
<span class="c">/////////////////////////////////////////////////////////////////////////////</span>
<span class="c"></span>
<span class="c">/**</span>
<span class="c"> * A point is a region that is special in that it represents a single point on </span>
<span class="c"> * the grid.</span>
<span class="c"> * @namespace YAHOO.util</span>
<span class="c"> * @class Point</span>
<span class="c"> * @param {Int} x The X position of the point</span>
<span class="c"> * @param {Int} y The Y position of the point</span>
<span class="c"> * @constructor</span>
<span class="c"> * @extends YAHOO.util.Region</span>
<span class="c"> */</span>
<span class="nx">YAHOO</span><span class="o">.</span><span class="nx">util</span><span class="o">.</span><span class="nx">Point</span> <span class="o">=</span> <span class="k">function</span><span class="o">(</span><span class="nx">x</span><span class="o">,</span> <span class="nx">y</span><span class="o">)</span> <span class="o">{</span>
<span class="k">if</span> <span class="o">(</span><span class="nx">YAHOO</span><span class="o">.</span><span class="nx">lang</span><span class="o">.</span><span class="nx">isArray</span><span class="o">(</span><span class="nx">x</span><span class="o">))</span> <span class="o">{</span> <span class="c">// accept input from Dom.getXY, Event.getXY, etc.</span>
<span class="c"></span> <span class="nx">y</span> <span class="o">=</span> <span class="nx">x</span><span class="o">[</span><span class="m">1</span><span class="o">];</span> <span class="c">// dont blow away x yet</span>
<span class="c"></span> <span class="nx">x</span> <span class="o">=</span> <span class="nx">x</span><span class="o">[</span><span class="m">0</span><span class="o">];</span>
<span class="o">}</span>
<span class="c">/**</span>
<span class="c"> * The X position of the point, which is also the right, left and index zero (for Dom.getXY symmetry)</span>
<span class="c"> * @property x</span>
<span class="c"> * @type Int</span>
<span class="c"> */</span>
<span class="k">this</span><span class="o">.</span><span class="nx">x</span> <span class="o">=</span> <span class="k">this</span><span class="o">.</span><span class="nx">right</span> <span class="o">=</span> <span class="k">this</span><span class="o">.</span><span class="nx">left</span> <span class="o">=</span> <span class="k">this</span><span class="o">[</span><span class="m">0</span><span class="o">]</span> <span class="o">=</span> <span class="nx">x</span><span class="o">;</span>
<span class="c">/**</span>
<span class="c"> * The Y position of the point, which is also the top, bottom and index one (for Dom.getXY symmetry)</span>
<span class="c"> * @property y</span>
<span class="c"> * @type Int</span>
<span class="c"> */</span>
<span class="k">this</span><span class="o">.</span><span class="nx">y</span> <span class="o">=</span> <span class="k">this</span><span class="o">.</span><span class="nx">top</span> <span class="o">=</span> <span class="k">this</span><span class="o">.</span><span class="nx">bottom</span> <span class="o">=</span> <span class="k">this</span><span class="o">[</span><span class="m">1</span><span class="o">]</span> <span class="o">=</span> <span class="nx">y</span><span class="o">;</span>
<span class="o">};</span>
<span class="nx">YAHOO</span><span class="o">.</span><span class="nx">util</span><span class="o">.</span><span class="nx">Point</span><span class="o">.</span><span class="nx">prototype</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">YAHOO</span><span class="o">.</span><span class="nx">util</span><span class="o">.</span><span class="nx">Region</span><span class="o">();</span>
</pre></div>
</div>
</div>
</div>
<div class="yui-b">
<div class="nav">
<div class="module">
<h4>Modules</h4>
<ul class="content">
<li class=""><a href="module_animation.html">animation</a></li>
<li class=""><a href="module_autocomplete.html">autocomplete</a></li>
<li class=""><a href="module_button.html">button</a></li>
<li class=""><a href="module_calendar.html">calendar</a></li>
<li class=""><a href="module_charts.html">charts</a></li>
<li class=""><a href="module_colorpicker.html">colorpicker</a></li>
<li class=""><a href="module_connection.html">connection</a></li>
<li class=""><a href="module_container.html">container</a></li>
<li class=""><a href="module_cookie.html">cookie</a></li>
<li class=""><a href="module_datasource.html">datasource</a></li>
<li class=""><a href="module_datatable.html">datatable</a></li>
<li class="selected"><a href="module_dom.html">dom</a></li>
<li class=""><a href="module_dragdrop.html">dragdrop</a></li>
<li class=""><a href="module_editor.html">editor</a></li>
<li class=""><a href="module_element.html">element</a></li>
<li class=""><a href="module_event.html">event</a></li>
<li class=""><a href="module_get.html">get</a></li>
<li class=""><a href="module_history.html">history</a></li>
<li class=""><a href="module_imagecropper.html">imagecropper</a></li>
<li class=""><a href="module_imageloader.html">imageloader</a></li>
<li class=""><a href="module_json.html">json</a></li>
<li class=""><a href="module_layout.html">layout</a></li>
<li class=""><a href="module_logger.html">logger</a></li>
<li class=""><a href="module_menu.html">menu</a></li>
<li class=""><a href="module_profiler.html">profiler</a></li>
<li class=""><a href="module_profilerviewer.html">profilerviewer</a></li>
<li class=""><a href="module_resize.html">resize</a></li>
<li class=""><a href="module_selector.html">selector</a></li>
<li class=""><a href="module_slider.html">slider</a></li>
<li class=""><a href="module_tabview.html">tabview</a></li>
<li class=""><a href="module_treeview.html">treeview</a></li>
<li class=""><a href="module_uploader.html">uploader</a></li>
<li class=""><a href="module_yahoo.html">yahoo</a></li>
<li class=""><a href="module_yuiloader.html">yuiloader</a></li>
<li class=""><a href="module_yuitest.html">yuitest</a></li>
</ul>
</div>
<div class="module">
<h4>Classes</h4>
<ul class="content">
<li class=""><a href="YAHOO.util.Dom.html">YAHOO.util.Dom</a></li>
<li class=""><a href="YAHOO.util.Point.html">YAHOO.util.Point</a></li>
<li class=""><a href="YAHOO.util.Region.html">YAHOO.util.Region</a></li>
</ul>
</div>
<div class="module">
<h4>Files</h4>
<ul class="content">
<li class=""><a href="Dom.js.html">Dom.js</a></li>
<li class="selected"><a href="Region.js.html">Region.js</a></li>
</ul>
</div>
</div>
</div>
</div>
<div id="ft">
<hr />
Copyright &copy; 2007 Yahoo! Inc. All rights reserved.
</div>
</div>
</body>
</html>