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

358 lines
No EOL
12 KiB
HTML
Raw Blame History

<html><head><title>QuickTips.js</title><link rel="stylesheet" type="text/css" href="../resources/style.css" media="screen"/></head><body><h1>QuickTips.js</h1><pre class="highlighted"><code><i>/**
* @class Ext.QuickTips
* Provides attractive and customizable tooltips <b>for</b> any element.
* @singleton
*/</i>
Ext.QuickTips = <b>function</b>(){
<b>var</b> el, tipBody, tipBodyText, tipTitle, tm, cfg, close, tagEls = {}, esc, removeCls = null, bdLeft, bdRight;
<b>var</b> ce, bd, xy, dd;
<b>var</b> visible = false, disabled = true, inited = false;
<b>var</b> showProc = 1, hideProc = 1, dismissProc = 1, locks = [];
<b>var</b> onOver = <b>function</b>(e){
<b>if</b>(disabled){
<b>return</b>;
}
<b>var</b> t = e.getTarget();
<b>if</b>(!t || t.nodeType !== 1 || t == document || t == document.body){
<b>return</b>;
}
<b>if</b>(ce &amp;&amp; t == ce.el){
clearTimeout(hideProc);
<b>return</b>;
}
<b>if</b>(t &amp;&amp; tagEls[t.id]){
tagEls[t.id].el = t;
showProc = show.defer(tm.showDelay, tm, [tagEls[t.id]]);
<b>return</b>;
}
<b>var</b> ttp, et = Ext.fly(t);
<b>var</b> ns = cfg.namespace;
<b>if</b>(tm.interceptTitles &amp;&amp; t.title){
ttp = t.title;
t.qtip = ttp;
t.removeAttribute(&quot;title&quot;);
e.preventDefault();
}<b>else</b>{
ttp = t.qtip || et.getAttributeNS(ns, cfg.attribute);
}
<b>if</b>(ttp){
showProc = show.defer(tm.showDelay, tm, [{
el: t,
text: ttp,
width: et.getAttributeNS(ns, cfg.width),
autoHide: et.getAttributeNS(ns, cfg.hide) != &quot;user&quot;,
title: et.getAttributeNS(ns, cfg.title),
cls: et.getAttributeNS(ns, cfg.cls)
}]);
}
};
<b>var</b> onOut = <b>function</b>(e){
clearTimeout(showProc);
<b>var</b> t = e.getTarget();
<b>if</b>(t &amp;&amp; ce &amp;&amp; ce.el == t &amp;&amp; (tm.autoHide &amp;&amp; ce.autoHide !== false)){
hideProc = setTimeout(hide, tm.hideDelay);
}
};
<b>var</b> onMove = <b>function</b>(e){
<b>if</b>(disabled){
<b>return</b>;
}
xy = e.getXY();
xy[1] += 18;
<b>if</b>(tm.trackMouse &amp;&amp; ce){
el.setXY(xy);
}
};
<b>var</b> onDown = <b>function</b>(e){
clearTimeout(showProc);
clearTimeout(hideProc);
<b>if</b>(!e.within(el)){
<b>if</b>(tm.hideOnClick){
hide();
tm.disable();
}
}
};
<b>var</b> onUp = <b>function</b>(e){
tm.enable();
};
<b>var</b> getPad = <b>function</b>(){
<b>return</b> bdLeft.getPadding('l')+bdRight.getPadding('r');
};
<b>var</b> show = <b>function</b>(o){
<b>if</b>(disabled){
<b>return</b>;
}
clearTimeout(dismissProc);
ce = o;
<b>if</b>(removeCls){ <i>// <b>in</b> case manually hidden</i>
el.removeClass(removeCls);
removeCls = null;
}
<b>if</b>(ce.cls){
el.addClass(ce.cls);
removeCls = ce.cls;
}
<b>if</b>(ce.title){
tipTitle.update(ce.title);
tipTitle.show();
}<b>else</b>{
tipTitle.update('');
tipTitle.hide();
}
el.dom.style.width = tm.maxWidth+'px';
<i>//tipBody.dom.style.width = '';</i>
tipBodyText.update(o.text);
<b>var</b> p = getPad(), w = ce.width;
<b>if</b>(!w){
<b>var</b> td = tipBodyText.dom;
<b>var</b> aw = Math.max(td.offsetWidth, td.clientWidth, td.scrollWidth);
<b>if</b>(aw &gt; tm.maxWidth){
w = tm.maxWidth;
}<b>else</b> if(aw &lt; tm.minWidth){
w = tm.minWidth;
}<b>else</b>{
w = aw;
}
}
<i>//tipBody.setWidth(w);</i>
el.setWidth(parseInt(w, 10) + p);
<b>if</b>(!ce.autoHide){
close.setDisplayed(true);
<b>if</b>(dd){
dd.unlock();
}
}<b>else</b>{
close.setDisplayed(false);
<b>if</b>(dd){
dd.lock();
}
}
<b>if</b>(xy){
el.avoidY = xy[1]-18;
el.setXY(xy);
}
<b>if</b>(tm.animate){
el.setOpacity(.1);
el.setStyle(&quot;visibility&quot;, &quot;visible&quot;);
el.fadeIn({callback: afterShow});
}<b>else</b>{
afterShow();
}
};
<b>var</b> afterShow = <b>function</b>(){
<b>if</b>(ce){
el.show();
esc.enable();
<b>if</b>(tm.autoDismiss &amp;&amp; ce.autoHide !== false){
dismissProc = setTimeout(hide, tm.autoDismissDelay);
}
}
};
<b>var</b> hide = <b>function</b>(noanim){
clearTimeout(dismissProc);
clearTimeout(hideProc);
ce = null;
<b>if</b>(el.isVisible()){
esc.disable();
<b>if</b>(noanim !== true &amp;&amp; tm.animate){
el.fadeOut({callback: afterHide});
}<b>else</b>{
afterHide();
}
}
};
<b>var</b> afterHide = <b>function</b>(){
el.hide();
<b>if</b>(removeCls){
el.removeClass(removeCls);
removeCls = null;
}
};
<b>return</b> {
<i>/**
* @cfg {Number} minWidth
* The minimum width of the quick tip (defaults to 40)
*/</i>
minWidth : 40,
<i>/**
* @cfg {Number} maxWidth
* The maximum width of the quick tip (defaults to 300)
*/</i>
maxWidth : 300,
<i>/**
* @cfg {Boolean} interceptTitles
* True to automatically use the element's DOM title value <b>if</b> available (defaults to false)
*/</i>
interceptTitles : false,
<i>/**
* @cfg {Boolean} trackMouse
* True to have the quick tip follow the mouse as it moves over the target element (defaults to false)
*/</i>
trackMouse : false,
<i>/**
* @cfg {Boolean} hideOnClick
* True to hide the quick tip <b>if</b> the user clicks anywhere <b>in</b> the document (defaults to true)
*/</i>
hideOnClick : true,
<i>/**
* @cfg {Number} showDelay
* Delay <b>in</b> milliseconds before the quick tip displays after the mouse enters the target element (defaults to 500)
*/</i>
showDelay : 500,
<i>/**
* @cfg {Number} hideDelay
* Delay <b>in</b> milliseconds before the quick tip hides when autoHide = true (defaults to 200)
*/</i>
hideDelay : 200,
<i>/**
* @cfg {Boolean} autoHide
* True to automatically hide the quick tip after the mouse exits the target element (defaults to true).
* Used <b>in</b> conjunction <b>with</b> hideDelay.
*/</i>
autoHide : true,
<i>/**
* @cfg {Boolean}
* True to automatically hide the quick tip after a set period of time, regardless of the user's actions
* (defaults to true). Used <b>in</b> conjunction <b>with</b> autoDismissDelay.
*/</i>
autoDismiss : true,
<i>/**
* @cfg {Number}
* Delay <b>in</b> milliseconds before the quick tip hides when autoDismiss = true (defaults to 5000)
*/</i>
autoDismissDelay : 5000,
<i>/**
* @cfg {Boolean} animate
* True to turn on fade animation. Defaults to false (ClearType/scrollbar flicker issues <b>in</b> IE7).
*/</i>
animate : false,
<i>// private</i>
init : <b>function</b>(){
tm = Ext.QuickTips;
cfg = tm.tagConfig;
<b>if</b>(!inited){
el = <b>new</b> Ext.Layer({cls:&quot;x-tip&quot;, shadow:&quot;drop&quot;, shim: true, constrain:true, shadowOffset:3});
el.fxDefaults = {stopFx: true};
<i>// maximum custom styling</i>
el.update('&lt;div class=&quot;x-tip-top-left&quot;&gt;&lt;div class=&quot;x-tip-top-right&quot;&gt;&lt;div class=&quot;x-tip-top&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;x-tip-bd-left&quot;&gt;&lt;div class=&quot;x-tip-bd-right&quot;&gt;&lt;div class=&quot;x-tip-bd&quot;&gt;&lt;div class=&quot;x-tip-close&quot;&gt;&lt;/div&gt;&lt;h3&gt;&lt;/h3&gt;&lt;div class=&quot;x-tip-bd-inner&quot;&gt;&lt;/div&gt;&lt;div class=&quot;x-clear&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;x-tip-ft-left&quot;&gt;&lt;div class=&quot;x-tip-ft-right&quot;&gt;&lt;div class=&quot;x-tip-ft&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;');
tipTitle = el.child('h3');
tipTitle.enableDisplayMode(&quot;block&quot;);
tipBody = el.child('div.x-tip-bd');
tipBodyText = el.child('div.x-tip-bd-inner');
bdLeft = el.child('div.x-tip-bd-left');
bdRight = el.child('div.x-tip-bd-right');
close = el.child('div.x-tip-close');
close.enableDisplayMode(&quot;block&quot;);
close.on(&quot;click&quot;, hide);
d = Ext.get(document);
d.on(&quot;mousedown&quot;, onDown);
d.on(&quot;mouseup&quot;, onUp);
d.on(&quot;mouseover&quot;, onOver);
d.on(&quot;mouseout&quot;, onOut);
d.on(&quot;mousemove&quot;, onMove);
esc = d.addKeyListener(27, hide);
esc.disable();
<b>if</b>(Ext.dd.DD){
dd = el.initDD(&quot;<b>default</b>&quot;, null, {
onDrag : <b>function</b>(){
el.sync();
}
});
dd.setHandleElId(tipTitle.id);
dd.lock();
}
inited = true;
}
<b>this</b>.enable();
},
<i>/**
* Configures a <b>new</b> quick tip instance and assigns it to a target element
* @param {Object} config The config object
*/</i>
register : <b>function</b>(config){
<b>var</b> cs = config instanceof Array ? config : arguments;
<b>for</b>(var i = 0, len = cs.length; i &lt; len; i++) {
<b>var</b> c = cs[i];
<b>var</b> target = c.target;
<b>if</b>(target){
<b>if</b>(target instanceof Array){
<b>for</b>(var j = 0, jlen = target.length; j &lt; jlen; j++){
tagEls[target[j]] = c;
}
}<b>else</b>{
tagEls[<b>typeof</b> target == 'string' ? target : Ext.id(target.id)] = c;
}
}
}
},
<i>/**
* Removes <b>this</b> quick tip from its element and destroys it
*/</i>
unregister : <b>function</b>(el){
<b>delete</b> tagEls[Ext.id(el)];
},
<i>/**
* Enable <b>this</b> quick tip
*/</i>
enable : <b>function</b>(){
<b>if</b>(inited){
locks.pop();
<b>if</b>(locks.length &lt; 1){
disabled = false;
}
}
},
<i>/**
* Disable <b>this</b> quick tip
*/</i>
disable : <b>function</b>(){
disabled = true;
clearTimeout(showProc);
clearTimeout(hideProc);
clearTimeout(dismissProc);
<b>if</b>(ce){
hide(true);
}
locks.push(1);
},
<i>/**
* Returns true <b>if</b> the quick tip is enabled, <b>else</b> false
*/</i>
isEnabled : <b>function</b>(){
<b>return</b> !disabled;
},
<i>// private</i>
tagConfig : {
namespace : &quot;ext&quot;,
attribute : &quot;qtip&quot;,
width : &quot;width&quot;,
target : &quot;target&quot;,
title : &quot;qtitle&quot;,
hide : &quot;hide&quot;,
cls : &quot;qclass&quot;
}
};
}();
<i>// backwards compat</i>
Ext.QuickTips.tips = Ext.QuickTips.register;</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