4f68a0933c
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
280 lines
18 KiB
HTML
280 lines
18 KiB
HTML
<!doctype html public "-//W3C//DTD HTML 4.0 Frameset//EN""http://www.w3.org/TR/REC-html40/frameset.dtd">
|
|
<html>
|
|
<head>
|
|
<title>
|
|
Overview
|
|
</title>
|
|
<link rel ="stylesheet" type="text/css" href="stylesheet.css" title="Style">
|
|
<script>
|
|
function asd() {
|
|
|
|
parent.document.title="Resizable.js Overview";
|
|
|
|
}
|
|
</script>
|
|
</head>
|
|
<body bgcolor="white" onload="asd();" style="margin:15px;">
|
|
<center>
|
|
|
|
<h2>Resizable.js</h2>
|
|
|
|
</center>
|
|
|
|
|
|
|
|
|
|
<h4>Summary</h4>
|
|
<p>
|
|
|
|
|
|
|
|
</p>
|
|
|
|
|
|
<table border="1" cellpadding="3" cellspacing="0" width="100%">
|
|
<tr bgcolor="#CCCCFF" class="TableHeadingColor">
|
|
<td colspan="2" class="title-cell">
|
|
|
|
<b>Class Summary</b>
|
|
|
|
</td>
|
|
</tr>
|
|
|
|
<tr bgcolor="white" class="TableRowColor">
|
|
<td width="15%"><b><a href="YAHOO.ext.Resizable.html">YAHOO.ext.Resizable</a></b></td>
|
|
<td>Makes an element resizable.</td>
|
|
</tr>
|
|
|
|
</table>
|
|
<hr/>
|
|
|
|
|
|
<!-- ========== METHOD SUMMARY =========== -->
|
|
|
|
<!-- ========== END METHOD SUMMARY =========== -->
|
|
|
|
|
|
<pre class="sourceview"><span class="comment">/**
|
|
* <span class="attrib">@class</span>
|
|
* Makes an element resizable.
|
|
*/</span>
|
|
YAHOO.ext.Resizable = <span class="reserved">function</span>(el, config){
|
|
<span class="comment">// in case global fcn not defined</span>
|
|
var getEl = YAHOO.ext.Element.get;
|
|
|
|
<span class="reserved">this</span>.el = getEl(el, true);
|
|
<span class="reserved">this</span>.el.autoBoxAdjust = true;
|
|
<span class="comment">// if the element isn't positioned, make it relative</span>
|
|
<span class="reserved">if</span>(<span class="reserved">this</span>.el.getStyle(<span class="literal">'position'</span>) != <span class="literal">'absolute'</span>){
|
|
<span class="reserved">this</span>.el.setStyle(<span class="literal">'position'</span>, <span class="literal">'relative'</span>);
|
|
}
|
|
|
|
<span class="comment">// create the handles and proxy</span>
|
|
var dh = YAHOO.ext.DomHelper;
|
|
var tpl = dh.createTemplate({tag: <span class="literal">'div'</span>, cls: <span class="literal">'yresizable-handle yresizable-handle-{0}'</span>, html: <span class="literal">'&nbsp;'</span>});
|
|
<span class="reserved">this</span>.east = getEl(tpl.append(<span class="reserved">this</span>.el.dom, [<span class="literal">'east'</span>]), true);
|
|
<span class="reserved">this</span>.south = getEl(tpl.append(<span class="reserved">this</span>.el.dom, [<span class="literal">'south'</span>]), true);
|
|
<span class="reserved">if</span>(config && config.multiDirectional){
|
|
<span class="reserved">this</span>.west = getEl(tpl.append(<span class="reserved">this</span>.el.dom, [<span class="literal">'west'</span>]), true);
|
|
<span class="reserved">this</span>.north = getEl(tpl.append(<span class="reserved">this</span>.el.dom, [<span class="literal">'north'</span>]), true);
|
|
}
|
|
<span class="reserved">this</span>.corner = getEl(tpl.append(<span class="reserved">this</span>.el.dom, [<span class="literal">'southeast'</span>]), true);
|
|
<span class="reserved">this</span>.proxy = getEl(dh.insertBefore(document.body.firstChild, {tag: <span class="literal">'div'</span>, cls: <span class="literal">'yresizable-proxy'</span>, id: <span class="reserved">this</span>.el.id + <span class="literal">'-rzproxy'</span>}), true);
|
|
<span class="reserved">this</span>.proxy.autoBoxAdjust = true;
|
|
|
|
<span class="comment">// wrapped event handlers to add and remove when sizing</span>
|
|
<span class="reserved">this</span>.moveHandler = YAHOO.ext.EventManager.wrap(<span class="reserved">this</span>.onMouseMove, <span class="reserved">this</span>, true);
|
|
<span class="reserved">this</span>.upHandler = YAHOO.ext.EventManager.wrap(<span class="reserved">this</span>.onMouseUp, <span class="reserved">this</span>, true);
|
|
<span class="reserved">this</span>.selHandler = YAHOO.ext.EventManager.wrap(<span class="reserved">this</span>.cancelSelection, <span class="reserved">this</span>, true);
|
|
|
|
<span class="comment">// public events</span>
|
|
<span class="reserved">this</span>.events = {
|
|
<span class="literal">'beforeresize'</span> : new YAHOO.util.CustomEvent(),
|
|
<span class="literal">'resize'</span> : new YAHOO.util.CustomEvent()
|
|
};
|
|
|
|
<span class="comment">/** <span class="attrib">@private</span> */</span>
|
|
<span class="reserved">this</span>.dir = null;
|
|
|
|
<span class="comment">// properties</span>
|
|
<span class="reserved">this</span>.resizeChild = false;
|
|
<span class="reserved">this</span>.adjustments = [0, 0];
|
|
<span class="reserved">this</span>.minWidth = 5;
|
|
<span class="reserved">this</span>.minHeight = 5;
|
|
<span class="reserved">this</span>.maxWidth = 10000;
|
|
<span class="reserved">this</span>.maxHeight = 10000;
|
|
<span class="reserved">this</span>.enabled = true;
|
|
<span class="reserved">this</span>.animate = false;
|
|
<span class="reserved">this</span>.duration = .35;
|
|
<span class="reserved">this</span>.dynamic = false;
|
|
<span class="reserved">this</span>.multiDirectional = false;
|
|
<span class="reserved">this</span>.disableTrackOver = false;
|
|
<span class="reserved">this</span>.easing = YAHOO.util.Easing ? YAHOO.util.Easing.easeOutStrong : null;
|
|
|
|
YAHOO.ext.util.Config.apply(<span class="reserved">this</span>, config);
|
|
|
|
<span class="comment">// listen for mouse down on the handles</span>
|
|
var mdown = <span class="reserved">this</span>.onMouseDown.createDelegate(<span class="reserved">this</span>);
|
|
<span class="reserved">this</span>.east.mon(<span class="literal">'mousedown'</span>, mdown);
|
|
<span class="reserved">this</span>.south.mon(<span class="literal">'mousedown'</span>, mdown);
|
|
<span class="reserved">if</span>(<span class="reserved">this</span>.multiDirectional){
|
|
<span class="reserved">this</span>.west.mon(<span class="literal">'mousedown'</span>, mdown);
|
|
<span class="reserved">this</span>.north.mon(<span class="literal">'mousedown'</span>, mdown);
|
|
}
|
|
<span class="reserved">this</span>.corner.mon(<span class="literal">'mousedown'</span>, mdown);
|
|
|
|
<span class="reserved">if</span>(!<span class="reserved">this</span>.disableTrackOver){
|
|
<span class="comment">// track mouse overs</span>
|
|
var mover = <span class="reserved">this</span>.onMouseOver.createDelegate(<span class="reserved">this</span>);
|
|
<span class="comment">// track mouse outs</span>
|
|
var mout = <span class="reserved">this</span>.onMouseOut.createDelegate(<span class="reserved">this</span>);
|
|
|
|
<span class="reserved">this</span>.east.mon(<span class="literal">'mouseover'</span>, mover);
|
|
<span class="reserved">this</span>.east.mon(<span class="literal">'mouseout'</span>, mout);
|
|
<span class="reserved">this</span>.south.mon(<span class="literal">'mouseover'</span>, mover);
|
|
<span class="reserved">this</span>.south.mon(<span class="literal">'mouseout'</span>, mout);
|
|
<span class="reserved">if</span>(<span class="reserved">this</span>.multiDirectional){
|
|
<span class="reserved">this</span>.west.mon(<span class="literal">'mouseover'</span>, mover);
|
|
<span class="reserved">this</span>.west.mon(<span class="literal">'mouseout'</span>, mout);
|
|
<span class="reserved">this</span>.north.mon(<span class="literal">'mouseover'</span>, mover);
|
|
<span class="reserved">this</span>.north.mon(<span class="literal">'mouseout'</span>, mout);
|
|
}
|
|
<span class="reserved">this</span>.corner.mon(<span class="literal">'mouseover'</span>, mover);
|
|
<span class="reserved">this</span>.corner.mon(<span class="literal">'mouseout'</span>, mout);
|
|
}
|
|
<span class="reserved">this</span>.updateChildSize();
|
|
};
|
|
|
|
YAHOO.extendX(YAHOO.ext.Resizable, YAHOO.ext.util.Observable, {
|
|
resizeTo : <span class="reserved">function</span>(width, height){
|
|
<span class="reserved">this</span>.el.setSize(width, height);
|
|
<span class="reserved">this</span>.fireEvent(<span class="literal">'resize'</span>, <span class="reserved">this</span>, width, height, null);
|
|
},
|
|
|
|
cancelSelection : <span class="reserved">function</span>(e){
|
|
e.preventDefault();
|
|
},
|
|
|
|
startSizing : <span class="reserved">function</span>(e){
|
|
<span class="reserved">this</span>.fireEvent(<span class="literal">'beforeresize'</span>, <span class="reserved">this</span>, e);
|
|
<span class="reserved">if</span>(<span class="reserved">this</span>.enabled){ <span class="comment">// 2nd enabled check in case disabled before beforeresize handler</span>
|
|
e.preventDefault();
|
|
<span class="reserved">this</span>.startBox = <span class="reserved">this</span>.el.getBox();
|
|
<span class="reserved">this</span>.startPoint = e.getXY();
|
|
<span class="reserved">this</span>.offsets = [(<span class="reserved">this</span>.startBox.x + <span class="reserved">this</span>.startBox.width) - <span class="reserved">this</span>.startPoint[0],
|
|
(<span class="reserved">this</span>.startBox.y + <span class="reserved">this</span>.startBox.height) - <span class="reserved">this</span>.startPoint[1]];
|
|
<span class="reserved">this</span>.proxy.setBox(<span class="reserved">this</span>.startBox);
|
|
<span class="reserved">if</span>(!<span class="reserved">this</span>.dynamic){
|
|
<span class="reserved">this</span>.proxy.show();
|
|
}
|
|
YAHOO.util.Event.on(document.body, <span class="literal">'selectstart'</span>, <span class="reserved">this</span>.selHandler);
|
|
YAHOO.util.Event.on(document.body, <span class="literal">'mousemove'</span>, <span class="reserved">this</span>.moveHandler);
|
|
YAHOO.util.Event.on(document.body, <span class="literal">'mouseup'</span>, <span class="reserved">this</span>.upHandler);
|
|
}
|
|
},
|
|
|
|
onMouseDown : <span class="reserved">function</span>(e){
|
|
<span class="reserved">if</span>(<span class="reserved">this</span>.enabled){
|
|
var t = e.getTarget();
|
|
<span class="reserved">if</span>(t == <span class="reserved">this</span>.corner.dom){
|
|
<span class="reserved">this</span>.dir = <span class="literal">'both'</span>;
|
|
<span class="reserved">this</span>.proxy.setStyle(<span class="literal">'cursor'</span>, <span class="reserved">this</span>.corner.getStyle(<span class="literal">'cursor'</span>));
|
|
<span class="reserved">this</span>.startSizing(e);
|
|
}<span class="reserved">else</span> <span class="reserved">if</span>(t == <span class="reserved">this</span>.east.dom){
|
|
<span class="reserved">this</span>.dir = <span class="literal">'east'</span>;
|
|
<span class="reserved">this</span>.proxy.setStyle(<span class="literal">'cursor'</span>, <span class="reserved">this</span>.east.getStyle(<span class="literal">'cursor'</span>));
|
|
<span class="reserved">this</span>.startSizing(e);
|
|
}<span class="reserved">else</span> <span class="reserved">if</span>(t == <span class="reserved">this</span>.south.dom){
|
|
<span class="reserved">this</span>.dir = <span class="literal">'south'</span>;
|
|
<span class="reserved">this</span>.proxy.setStyle(<span class="literal">'cursor'</span>, <span class="reserved">this</span>.south.getStyle(<span class="literal">'cursor'</span>));
|
|
<span class="reserved">this</span>.startSizing(e);
|
|
}<span class="reserved">else</span> <span class="reserved">if</span>(t == <span class="reserved">this</span>.west.dom){
|
|
<span class="reserved">this</span>.dir = <span class="literal">'west'</span>;
|
|
<span class="reserved">this</span>.proxy.setStyle(<span class="literal">'cursor'</span>, <span class="reserved">this</span>.west.getStyle(<span class="literal">'cursor'</span>));
|
|
<span class="reserved">this</span>.startSizing(e);
|
|
}<span class="reserved">else</span> <span class="reserved">if</span>(t == <span class="reserved">this</span>.north.dom){
|
|
<span class="reserved">this</span>.dir = <span class="literal">'north'</span>;
|
|
<span class="reserved">this</span>.proxy.setStyle(<span class="literal">'cursor'</span>, <span class="reserved">this</span>.north.getStyle(<span class="literal">'cursor'</span>));
|
|
<span class="reserved">this</span>.startSizing(e);
|
|
}
|
|
}
|
|
},
|
|
|
|
onMouseUp : <span class="reserved">function</span>(e){
|
|
YAHOO.util.Event.removeListener(document.body, <span class="literal">'selectstart'</span>, <span class="reserved">this</span>.selHandler);
|
|
YAHOO.util.Event.removeListener(document.body, <span class="literal">'mousemove'</span>, <span class="reserved">this</span>.moveHandler);
|
|
YAHOO.util.Event.removeListener(document.body, <span class="literal">'mouseup'</span>, <span class="reserved">this</span>.upHandler);
|
|
var size = <span class="reserved">this</span>.resizeElement();
|
|
<span class="reserved">this</span>.fireEvent(<span class="literal">'resize'</span>, <span class="reserved">this</span>, size.width, size.height, e);
|
|
},
|
|
|
|
updateChildSize : <span class="reserved">function</span>(){
|
|
<span class="reserved">if</span>(<span class="reserved">this</span>.resizeChild && <span class="reserved">this</span>.el.dom.firstChild && <span class="reserved">this</span>.el.dom.offsetWidth){
|
|
var el = <span class="reserved">this</span>.el;
|
|
var adj = <span class="reserved">this</span>.adjustments;
|
|
setTimeout(<span class="reserved">function</span>(){
|
|
var c = YAHOO.ext.Element.get(el.dom.firstChild, true);
|
|
var b = el.getBox(true);
|
|
c.setSize(b.width+adj[0], b.height+adj[1]);
|
|
}, 1);
|
|
}
|
|
},
|
|
|
|
resizeElement : <span class="reserved">function</span>(){
|
|
var box = <span class="reserved">this</span>.proxy.getBox();
|
|
<span class="reserved">this</span>.el.setBox(box, false, <span class="reserved">this</span>.animate, <span class="reserved">this</span>.duration, null, <span class="reserved">this</span>.easing);
|
|
<span class="reserved">this</span>.updateChildSize();
|
|
<span class="reserved">this</span>.proxy.hide();
|
|
<span class="reserved">return</span> box;
|
|
},
|
|
|
|
onMouseMove : <span class="reserved">function</span>(e){
|
|
<span class="reserved">if</span>(<span class="reserved">this</span>.enabled){
|
|
var xy = e.getXY();
|
|
<span class="reserved">if</span>(<span class="reserved">this</span>.dir == <span class="literal">'both'</span> || <span class="reserved">this</span>.dir == <span class="literal">'east'</span> || <span class="reserved">this</span>.dir == <span class="literal">'south'</span>){
|
|
var w = Math.min(Math.max(<span class="reserved">this</span>.minWidth, xy[0]-<span class="reserved">this</span>.startBox.x+<span class="reserved">this</span>.offsets[0]),<span class="reserved">this</span>.maxWidth);
|
|
var h = Math.min(Math.max(<span class="reserved">this</span>.minHeight, xy[1]-<span class="reserved">this</span>.startBox.y+<span class="reserved">this</span>.offsets[1]), <span class="reserved">this</span>.maxHeight);
|
|
<span class="reserved">if</span>(<span class="reserved">this</span>.dir == <span class="literal">'both'</span>){
|
|
<span class="reserved">this</span>.proxy.setSize(w, h);
|
|
}<span class="reserved">else</span> <span class="reserved">if</span>(<span class="reserved">this</span>.dir == <span class="literal">'east'</span>){
|
|
<span class="reserved">this</span>.proxy.setWidth(w);
|
|
}<span class="reserved">else</span> <span class="reserved">if</span>(<span class="reserved">this</span>.dir == <span class="literal">'south'</span>){
|
|
<span class="reserved">this</span>.proxy.setHeight(h);
|
|
}
|
|
}<span class="reserved">else</span>{
|
|
var x = <span class="reserved">this</span>.startBox.x + (xy[0]-<span class="reserved">this</span>.startPoint[0]);
|
|
var y = <span class="reserved">this</span>.startBox.y + (xy[1]-<span class="reserved">this</span>.startPoint[1]);
|
|
var w = <span class="reserved">this</span>.startBox.width+(<span class="reserved">this</span>.startBox.x-x);
|
|
var h = <span class="reserved">this</span>.startBox.height+(<span class="reserved">this</span>.startBox.y-y);
|
|
<span class="reserved">if</span>(<span class="reserved">this</span>.dir == <span class="literal">'west'</span> && w <= <span class="reserved">this</span>.maxWidth && w >= <span class="reserved">this</span>.minWidth){
|
|
<span class="reserved">this</span>.proxy.setX(x);
|
|
<span class="reserved">this</span>.proxy.setWidth(w);
|
|
}<span class="reserved">else</span> <span class="reserved">if</span>(<span class="reserved">this</span>.dir == <span class="literal">'north'</span> && h <= <span class="reserved">this</span>.maxHeight && h >= <span class="reserved">this</span>.minHeight){
|
|
<span class="reserved">this</span>.proxy.setY(y);
|
|
<span class="reserved">this</span>.proxy.setHeight(h);
|
|
}
|
|
}
|
|
<span class="reserved">if</span>(<span class="reserved">this</span>.dynamic){
|
|
<span class="reserved">this</span>.resizeElement();
|
|
}
|
|
}
|
|
},
|
|
|
|
onMouseOver : <span class="reserved">function</span>(){
|
|
<span class="reserved">if</span>(<span class="reserved">this</span>.enabled) <span class="reserved">this</span>.el.addClass(<span class="literal">'yresizable-over'</span>);
|
|
},
|
|
|
|
onMouseOut : <span class="reserved">function</span>(){
|
|
<span class="reserved">this</span>.el.removeClass(<span class="literal">'yresizable-over'</span>);
|
|
}
|
|
});</pre>
|
|
<hr>
|
|
|
|
|
|
<hr>
|
|
<font size="-1">
|
|
|
|
</font>
|
|
<div class="jsdoc_ctime">Documentation generated by <a href="http://jsdoc.sourceforge.net/" target="_parent">JSDoc</a> on Sat Oct 14 06:07:10 2006</div>
|
|
</body>
|
|
</html>
|