oqapi/webgui
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
webgui/www/extras/extjs/docs/output/Layer.jss.html

448 lines
No EOL
15 KiB
HTML
Raw Blame History

<html><head><title>Layer.js</title><link rel="stylesheet" type="text/css" href="../resources/style.css" media="screen"/></head><body><h1>Layer.js</h1><pre class="highlighted"><code><i>/**
* @class Ext.Layer
* @extends Ext.Element
* An extended Element object that supports a shadow and shim, constrain to viewport and
* automatic maintaining of shadow/shim positions.
* @cfg {Boolean} shim False to disable the iframe shim <b>in</b> browsers which need one (defaults to true)
* @cfg {String/Boolean} shadow True to create a shadow element <b>with</b> default class &quot;x-layer-shadow&quot; or
* you can pass a string <b>with</b> a css class name. False turns off the shadow.
* @cfg {Object} dh DomHelper object config to create element <b>with</b> (defaults to {tag: &quot;div&quot;, cls: &quot;x-layer&quot;}).
* @cfg {Boolean} constrain False to disable constrain to viewport (defaults to true)
* @cfg {String} cls CSS class to add to the element
* @cfg {Number} zindex Starting z-index (defaults to 11000!)
* @cfg {Number} shadowOffset Number of pixels to offset the shadow (defaults to 3)
* @constructor
* @param {Object} config
* @param {String/HTMLElement} existingEl (optional) Uses an existing dom element. If the element is not found it creates it.
*/</i>
(<b>function</b>(){
Ext.Layer = <b>function</b>(config, existingEl){
config = config || {};
<b>var</b> dh = Ext.DomHelper;
<b>var</b> cp = config.parentEl, pel = cp ? Ext.getDom(cp) : document.body;
<b>if</b>(existingEl){
<b>this</b>.dom = Ext.getDom(existingEl);
}
<b>if</b>(!<b>this</b>.dom){
<b>var</b> o = config.dh || {tag: &quot;div&quot;, cls: &quot;x-layer&quot;};
<b>this</b>.dom = dh.append(pel, o);
}
<b>if</b>(config.cls){
<b>this</b>.addClass(config.cls);
}
<b>this</b>.constrain = config.constrain !== false;
<b>this</b>.visibilityMode = Ext.Element.VISIBILITY;
<b>if</b>(config.id){
<b>this</b>.id = <b>this</b>.dom.id = config.id;
}<b>else</b>{
<b>this</b>.id = Ext.id(<b>this</b>.dom);
}
<b>this</b>.zindex = config.zindex || <b>this</b>.getZIndex();
<b>this</b>.position(&quot;absolute&quot;, <b>this</b>.zindex);
<b>if</b>(config.shadow){
<b>this</b>.shadowOffset = config.shadowOffset || 4;
<b>this</b>.shadow = <b>new</b> Ext.Shadow({
offset : <b>this</b>.shadowOffset,
mode : config.shadow
});
}<b>else</b>{
<b>this</b>.shadowOffset = 0;
}
<b>this</b>.useShim = config.shim !== false &amp;&amp; Ext.useShims;
<b>this</b>.useDisplay = config.useDisplay;
<b>this</b>.hide();
};
<b>var</b> supr = Ext.Element.prototype;
<i>// shims are shared among layer to keep from having 100 iframes</i>
<b>var</b> shims = [];
Ext.extend(Ext.Layer, Ext.Element, {
getZIndex : <b>function</b>(){
<b>return</b> this.zindex || parseInt(<b>this</b>.getStyle(&quot;z-index&quot;), 10) || 11000;
},
getShim : <b>function</b>(){
<b>if</b>(!<b>this</b>.useShim){
<b>return</b> null;
}
<b>if</b>(this.shim){
<b>return</b> this.shim;
}
<b>var</b> shim = shims.shift();
<b>if</b>(!shim){
shim = <b>this</b>.createShim();
shim.enableDisplayMode('block');
shim.dom.style.display = 'none';
shim.dom.style.visibility = 'visible';
}
<b>var</b> pn = <b>this</b>.dom.parentNode;
<b>if</b>(shim.dom.parentNode != pn){
pn.insertBefore(shim.dom, <b>this</b>.dom);
}
shim.setStyle('z-index', <b>this</b>.getZIndex()-2);
<b>this</b>.shim = shim;
<b>return</b> shim;
},
hideShim : <b>function</b>(){
<b>if</b>(this.shim){
<b>this</b>.shim.setDisplayed(false);
shims.push(<b>this</b>.shim);
<b>delete</b> this.shim;
}
},
disableShadow : <b>function</b>(){
<b>if</b>(this.shadow){
<b>this</b>.shadowDisabled = true;
<b>this</b>.shadow.hide();
<b>this</b>.lastShadowOffset = <b>this</b>.shadowOffset;
<b>this</b>.shadowOffset = 0;
}
},
enableShadow : <b>function</b>(show){
<b>if</b>(this.shadow){
<b>this</b>.shadowDisabled = false;
<b>this</b>.shadowOffset = <b>this</b>.lastShadowOffset;
<b>delete</b> this.lastShadowOffset;
<b>if</b>(show){
<b>this</b>.sync(true);
}
}
},
<i>// private</i>
<i>// <b>this</b> code can execute repeatedly <b>in</b> milliseconds (i.e. during a drag) so</i>
<i>// code size was sacrificed <b>for</b> effeciency (e.g. no getBox/setBox, no XY calls)</i>
sync : <b>function</b>(doShow){
<b>var</b> sw = <b>this</b>.shadow;
<b>if</b>(!<b>this</b>.updating &amp;&amp; <b>this</b>.isVisible() &amp;&amp; (sw || <b>this</b>.useShim)){
<b>var</b> sh = <b>this</b>.getShim();
<b>var</b> w = <b>this</b>.getWidth(),
h = <b>this</b>.getHeight();
<b>var</b> l = <b>this</b>.getLeft(true),
t = <b>this</b>.getTop(true);
<b>if</b>(sw &amp;&amp; !<b>this</b>.shadowDisabled){
<b>if</b>(doShow &amp;&amp; !sw.isVisible()){
sw.show(<b>this</b>);
}<b>else</b>{
sw.realign(l, t, w, h);
}
<b>if</b>(sh){
<b>if</b>(doShow){
sh.show();
}
<i>// fit the shim behind the shadow, so it is shimmed too</i>
<b>var</b> a = sw.adjusts, s = sh.dom.style;
s.left = (Math.min(l, l+a.l))+&quot;px&quot;;
s.top = (Math.min(t, t+a.t))+&quot;px&quot;;
s.width = (w+a.w)+&quot;px&quot;;
s.height = (h+a.h)+&quot;px&quot;;
}
}<b>else</b> if(sh){
<b>if</b>(doShow){
sh.show();
}
sh.setSize(w, h);
sh.setLeftTop(l, t);
}
}
},
<i>// private</i>
destroy : <b>function</b>(){
<b>this</b>.hideShim();
<b>if</b>(this.shadow){
<b>this</b>.shadow.hide();
}
<b>this</b>.removeAllListeners();
<b>var</b> pn = <b>this</b>.dom.parentNode;
<b>if</b>(pn){
pn.removeChild(<b>this</b>.dom);
}
Ext.Element.uncache(<b>this</b>.id);
},
remove : <b>function</b>(){
<b>this</b>.destroy();
},
<i>// private</i>
beginUpdate : <b>function</b>(){
<b>this</b>.updating = true;
},
<i>// private</i>
endUpdate : <b>function</b>(){
<b>this</b>.updating = false;
<b>this</b>.sync(true);
},
<i>// private</i>
hideUnders : <b>function</b>(negOffset){
<b>if</b>(this.shadow){
<b>this</b>.shadow.hide();
}
<b>this</b>.hideShim();
},
<i>// private</i>
constrainXY : <b>function</b>(){
<b>if</b>(this.constrain){
<b>var</b> vw = Ext.lib.Dom.getViewWidth(),
vh = Ext.lib.Dom.getViewHeight();
<b>var</b> s = Ext.get(document).getScroll();
<b>var</b> xy = <b>this</b>.getXY();
<b>var</b> x = xy[0], y = xy[1];
<b>var</b> w = <b>this</b>.dom.offsetWidth+<b>this</b>.shadowOffset, h = <b>this</b>.dom.offsetHeight+<b>this</b>.shadowOffset;
<i>// only move it <b>if</b> it needs it</i>
<b>var</b> moved = false;
<i>// first validate right/bottom</i>
<b>if</b>((x + w) &gt; vw+s.left){
x = vw - w - <b>this</b>.shadowOffset;
moved = true;
}
<b>if</b>((y + h) &gt; vh+s.top){
y = vh - h - <b>this</b>.shadowOffset;
moved = true;
}
<i>// then make sure top/left isn't negative</i>
<b>if</b>(x &lt; s.left){
x = s.left;
moved = true;
}
<b>if</b>(y &lt; s.top){
y = s.top;
moved = true;
}
<b>if</b>(moved){
<b>if</b>(this.avoidY){
<b>var</b> ay = <b>this</b>.avoidY;
<b>if</b>(y &lt;= ay &amp;&amp; (y+h) &gt;= ay){
y = ay-h-5;
}
}
xy = [x, y];
<b>this</b>.storeXY(xy);
supr.setXY.call(<b>this</b>, xy);
<b>this</b>.sync();
}
}
},
isVisible : <b>function</b>(){
<b>return</b> this.visible;
},
<i>// private</i>
showAction : <b>function</b>(){
<b>this</b>.visible = true; <i>// track visibility to prevent getStyle calls</i>
<b>if</b>(this.useDisplay === true){
<b>this</b>.setDisplayed(&quot;&quot;);
}<b>else</b> if(<b>this</b>.lastXY){
supr.setXY.call(<b>this</b>, <b>this</b>.lastXY);
}<b>else</b> if(<b>this</b>.lastLT){
supr.setLeftTop.call(<b>this</b>, <b>this</b>.lastLT[0], <b>this</b>.lastLT[1]);
}
},
<i>// private</i>
hideAction : <b>function</b>(){
<b>this</b>.visible = false;
<b>if</b>(this.useDisplay === true){
<b>this</b>.setDisplayed(false);
}<b>else</b>{
<b>this</b>.setLeftTop(-10000,-10000);
}
},
<i>// overridden Element method</i>
setVisible : <b>function</b>(v, a, d, c, e){
<b>if</b>(v){
<b>this</b>.showAction();
}
<b>if</b>(a &amp;&amp; v){
<b>var</b> cb = <b>function</b>(){
<b>this</b>.sync(true);
<b>if</b>(c){
c();
}
}.createDelegate(<b>this</b>);
supr.setVisible.call(<b>this</b>, true, true, d, cb, e);
}<b>else</b>{
<b>if</b>(!v){
<b>this</b>.hideUnders(true);
}
<b>var</b> cb = c;
<b>if</b>(a){
cb = <b>function</b>(){
<b>this</b>.hideAction();
<b>if</b>(c){
c();
}
}.createDelegate(<b>this</b>);
}
supr.setVisible.call(<b>this</b>, v, a, d, cb, e);
<b>if</b>(v){
<b>this</b>.sync(true);
}<b>else</b> if(!a){
<b>this</b>.hideAction();
}
}
},
storeXY : <b>function</b>(xy){
<b>delete</b> this.lastLT;
<b>this</b>.lastXY = xy;
},
storeLeftTop : <b>function</b>(left, top){
<b>delete</b> this.lastXY;
<b>this</b>.lastLT = [left, top];
},
<i>// private</i>
beforeFx : <b>function</b>(){
<b>this</b>.beforeAction();
<b>return</b> Ext.Layer.superclass.beforeFx.apply(<b>this</b>, arguments);
},
<i>// private</i>
afterFx : <b>function</b>(){
Ext.Layer.superclass.afterFx.apply(<b>this</b>, arguments);
<b>this</b>.sync(<b>this</b>.isVisible());
},
<i>// private</i>
beforeAction : <b>function</b>(){
<b>if</b>(!<b>this</b>.updating &amp;&amp; <b>this</b>.shadow){
<b>this</b>.shadow.hide();
}
},
<i>// overridden Element method</i>
setLeft : <b>function</b>(left){
<b>this</b>.storeLeftTop(left, <b>this</b>.getTop(true));
supr.setLeft.apply(<b>this</b>, arguments);
<b>this</b>.sync();
},
setTop : <b>function</b>(top){
<b>this</b>.storeLeftTop(<b>this</b>.getLeft(true), top);
supr.setTop.apply(<b>this</b>, arguments);
<b>this</b>.sync();
},
setLeftTop : <b>function</b>(left, top){
<b>this</b>.storeLeftTop(left, top);
supr.setLeftTop.apply(<b>this</b>, arguments);
<b>this</b>.sync();
},
setXY : <b>function</b>(xy, a, d, c, e){
<b>this</b>.fixDisplay();
<b>this</b>.beforeAction();
<b>this</b>.storeXY(xy);
<b>var</b> cb = <b>this</b>.createCB(c);
supr.setXY.call(<b>this</b>, xy, a, d, cb, e);
<b>if</b>(!a){
cb();
}
},
<i>// private</i>
createCB : <b>function</b>(c){
<b>var</b> el = <b>this</b>;
<b>return</b> function(){
el.constrainXY();
el.sync(true);
<b>if</b>(c){
c();
}
};
},
<i>// overridden Element method</i>
setX : <b>function</b>(x, a, d, c, e){
<b>this</b>.setXY([x, <b>this</b>.getY()], a, d, c, e);
},
<i>// overridden Element method</i>
setY : <b>function</b>(y, a, d, c, e){
<b>this</b>.setXY([<b>this</b>.getX(), y], a, d, c, e);
},
<i>// overridden Element method</i>
setSize : <b>function</b>(w, h, a, d, c, e){
<b>this</b>.beforeAction();
<b>var</b> cb = <b>this</b>.createCB(c);
supr.setSize.call(<b>this</b>, w, h, a, d, cb, e);
<b>if</b>(!a){
cb();
}
},
<i>// overridden Element method</i>
setWidth : <b>function</b>(w, a, d, c, e){
<b>this</b>.beforeAction();
<b>var</b> cb = <b>this</b>.createCB(c);
supr.setWidth.call(<b>this</b>, w, a, d, cb, e);
<b>if</b>(!a){
cb();
}
},
<i>// overridden Element method</i>
setHeight : <b>function</b>(h, a, d, c, e){
<b>this</b>.beforeAction();
<b>var</b> cb = <b>this</b>.createCB(c);
supr.setHeight.call(<b>this</b>, h, a, d, cb, e);
<b>if</b>(!a){
cb();
}
},
<i>// overridden Element method</i>
setBounds : <b>function</b>(x, y, w, h, a, d, c, e){
<b>this</b>.beforeAction();
<b>var</b> cb = <b>this</b>.createCB(c);
<b>if</b>(!a){
<b>this</b>.storeXY([x, y]);
supr.setXY.call(<b>this</b>, [x, y]);
supr.setSize.call(<b>this</b>, w, h, a, d, cb, e);
cb();
}<b>else</b>{
supr.setBounds.call(<b>this</b>, x, y, w, h, a, d, cb, e);
}
<b>return</b> this;
},
<i>/**
* Set the z-index of <b>this</b> layer and adjusts any shadow and shim z-indexes. The layer z-index is automatically
* incremented by two more than the value passed <b>in</b> so that it always shows above any shadow or shim (the shadow
* element, <b>if</b> any, will be assigned z-index + 1, and the shim element, <b>if</b> any, will be assigned the unmodified z-index).
* @param {Number} zindex The <b>new</b> z-index to set
* @<b>return</b> {<b>this</b>} The Layer
*/</i>
setZIndex : <b>function</b>(zindex){
<b>this</b>.zindex = zindex;
<b>this</b>.setStyle(&quot;z-index&quot;, zindex + 2);
<b>if</b>(this.shadow){
<b>this</b>.shadow.setZIndex(zindex + 1);
}
<b>if</b>(this.shim){
<b>this</b>.shim.setStyle(&quot;z-index&quot;, zindex);
}
}
});
})();</code></pre><hr><div style="font-size:10px;text-align:center;color:gray;">Ext - Copyright &copy; 2006-2007 Ext JS, LLC<br />All rights reserved.</div>
</body></html>
Reference in a new issue View git blame Copy permalink