QuickTip.html 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>The source code</title>
  6. <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  7. <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  8. <style type="text/css">
  9. .highlight { display: block; background-color: #ddd; }
  10. </style>
  11. <script type="text/javascript">
  12. function highlight() {
  13. document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14. }
  15. </script>
  16. </head>
  17. <body onload="prettyPrint(); highlight();">
  18. <pre class="prettyprint lang-js"><span id='Ext-tip-QuickTip'>/**
  19. </span> * A specialized tooltip class for tooltips that can be specified in markup and automatically managed
  20. * by the global {@link Ext.tip.QuickTipManager} instance. See the QuickTipManager documentation for
  21. * additional usage details and examples.
  22. */
  23. Ext.define('Ext.tip.QuickTip', {
  24. extend: 'Ext.tip.ToolTip',
  25. alias: 'widget.quicktip',
  26. alternateClassName: 'Ext.QuickTip',
  27. <span id='Ext-tip-QuickTip-cfg-target'> /**
  28. </span> * @cfg {String/HTMLElement/Ext.Element} target
  29. * The target HTMLElement, Ext.Element or id to associate with this Quicktip.
  30. *
  31. * Defaults to the document.
  32. */
  33. <span id='Ext-tip-QuickTip-cfg-interceptTitles'> /**
  34. </span> * @cfg {Boolean} interceptTitles
  35. * True to automatically use the element's DOM title value if available.
  36. */
  37. interceptTitles : false,
  38. // Force creation of header Component
  39. title: '&amp;#160;',
  40. // private
  41. tagConfig : {
  42. namespace : &quot;data-&quot;,
  43. attribute : &quot;qtip&quot;,
  44. width : &quot;qwidth&quot;,
  45. target : &quot;target&quot;,
  46. title : &quot;qtitle&quot;,
  47. hide : &quot;hide&quot;,
  48. cls : &quot;qclass&quot;,
  49. align : &quot;qalign&quot;,
  50. anchor : &quot;anchor&quot;
  51. },
  52. // private
  53. initComponent : function(){
  54. var me = this;
  55. me.target = me.target || Ext.getDoc();
  56. me.targets = me.targets || {};
  57. me.callParent();
  58. },
  59. <span id='Ext-tip-QuickTip-method-register'> /**
  60. </span> * Configures a new quick tip instance and assigns it to a target element.
  61. *
  62. * For example usage, see the {@link Ext.tip.QuickTipManager} class header.
  63. *
  64. * @param {Object} config The config object with the following properties:
  65. * @param config.autoHide
  66. * @param config.cls
  67. * @param config.dismissDelay overrides the singleton value
  68. * @param config.target required
  69. * @param config.text required
  70. * @param config.title
  71. * @param config.width
  72. */
  73. register : function(config){
  74. var configs = Ext.isArray(config) ? config : arguments,
  75. i = 0,
  76. len = configs.length,
  77. target, j, targetLen;
  78. for (; i &lt; len; i++) {
  79. config = configs[i];
  80. target = config.target;
  81. if (target) {
  82. if (Ext.isArray(target)) {
  83. for (j = 0, targetLen = target.length; j &lt; targetLen; j++) {
  84. this.targets[Ext.id(target[j])] = config;
  85. }
  86. } else{
  87. this.targets[Ext.id(target)] = config;
  88. }
  89. }
  90. }
  91. },
  92. <span id='Ext-tip-QuickTip-method-unregister'> /**
  93. </span> * Removes this quick tip from its element and destroys it.
  94. * @param {String/HTMLElement/Ext.Element} el The element from which the quick tip
  95. * is to be removed or ID of the element.
  96. */
  97. unregister : function(el){
  98. delete this.targets[Ext.id(el)];
  99. },
  100. <span id='Ext-tip-QuickTip-method-cancelShow'> /**
  101. </span> * Hides a visible tip or cancels an impending show for a particular element.
  102. * @param {String/HTMLElement/Ext.Element} el The element that is the target of
  103. * the tip or ID of the element.
  104. */
  105. cancelShow: function(el){
  106. var me = this,
  107. activeTarget = me.activeTarget;
  108. el = Ext.get(el).dom;
  109. if (me.isVisible()) {
  110. if (activeTarget &amp;&amp; activeTarget.el == el) {
  111. me.hide();
  112. }
  113. } else if (activeTarget &amp;&amp; activeTarget.el == el) {
  114. me.clearTimer('show');
  115. }
  116. },
  117. <span id='Ext-tip-QuickTip-method-getTipCfg'> /**
  118. </span> * @private
  119. * Reads the tip text from the closest node to the event target which contains the
  120. * attribute we are configured to look for. Returns an object containing the text
  121. * from the attribute, and the target element from which the text was read.
  122. */
  123. getTipCfg: function(e) {
  124. var t = e.getTarget(),
  125. titleText = t.title,
  126. cfg;
  127. if (this.interceptTitles &amp;&amp; titleText &amp;&amp; Ext.isString(titleText)) {
  128. t.qtip = titleText;
  129. t.removeAttribute(&quot;title&quot;);
  130. e.preventDefault();
  131. return {
  132. text: titleText
  133. };
  134. }
  135. else {
  136. cfg = this.tagConfig;
  137. t = e.getTarget('[' + cfg.namespace + cfg.attribute + ']');
  138. if (t) {
  139. return {
  140. target: t,
  141. text: t.getAttribute(cfg.namespace + cfg.attribute)
  142. };
  143. }
  144. }
  145. },
  146. // private
  147. onTargetOver : function(e){
  148. var me = this,
  149. target = e.getTarget(me.delegate),
  150. hasShowDelay,
  151. delay,
  152. elTarget,
  153. cfg,
  154. ns,
  155. tipConfig,
  156. autoHide,
  157. targets, targetEl, value, key;
  158. if (me.disabled) {
  159. return;
  160. }
  161. // TODO - this causes &quot;e&quot; to be recycled in IE6/7 (EXTJSIV-1608) so ToolTip#setTarget
  162. // was changed to include freezeEvent. The issue seems to be a nested 'resize' event
  163. // that smashed Ext.EventObject.
  164. me.targetXY = e.getXY();
  165. // If the over target was filtered out by the delegate selector, or is not an HTMLElement, or is the &lt;html&gt; or the &lt;body&gt;, then return
  166. if(!target || target.nodeType !== 1 || target == document.documentElement || target == document.body){
  167. return;
  168. }
  169. if (me.activeTarget &amp;&amp; ((target == me.activeTarget.el) || Ext.fly(me.activeTarget.el).contains(target))) {
  170. me.clearTimer('hide');
  171. me.show();
  172. return;
  173. }
  174. if (target) {
  175. targets = me.targets;
  176. for (key in targets) {
  177. if (targets.hasOwnProperty(key)) {
  178. value = targets[key];
  179. targetEl = Ext.fly(value.target);
  180. if (targetEl &amp;&amp; (targetEl.dom === target || targetEl.contains(target))) {
  181. elTarget = targetEl.dom;
  182. break;
  183. }
  184. }
  185. }
  186. if (elTarget) {
  187. me.activeTarget = me.targets[elTarget.id];
  188. me.activeTarget.el = target;
  189. me.anchor = me.activeTarget.anchor;
  190. if (me.anchor) {
  191. me.anchorTarget = target;
  192. }
  193. hasShowDelay = Ext.isDefined(me.activeTarget.showDelay);
  194. if (hasShowDelay) {
  195. delay = me.showDelay;
  196. me.showDelay = me.activeTarget.showDelay;
  197. }
  198. me.delayShow();
  199. if (hasShowDelay) {
  200. me.showDelay = delay;
  201. }
  202. return;
  203. }
  204. }
  205. // Should be a fly.
  206. elTarget = Ext.fly(target, '_quicktip-target');
  207. cfg = me.tagConfig;
  208. ns = cfg.namespace;
  209. tipConfig = me.getTipCfg(e);
  210. if (tipConfig) {
  211. // getTipCfg may look up the parentNode axis for a tip text attribute and will return the new target node.
  212. // Change our target element to match that from which the tip text attribute was read.
  213. if (tipConfig.target) {
  214. target = tipConfig.target;
  215. elTarget = Ext.fly(target, '_quicktip-target');
  216. }
  217. autoHide = elTarget.getAttribute(ns + cfg.hide);
  218. me.activeTarget = {
  219. el: target,
  220. text: tipConfig.text,
  221. width: +elTarget.getAttribute(ns + cfg.width) || null,
  222. autoHide: autoHide != &quot;user&quot; &amp;&amp; autoHide !== 'false',
  223. title: elTarget.getAttribute(ns + cfg.title),
  224. cls: elTarget.getAttribute(ns + cfg.cls),
  225. align: elTarget.getAttribute(ns + cfg.align)
  226. };
  227. me.anchor = elTarget.getAttribute(ns + cfg.anchor);
  228. if (me.anchor) {
  229. me.anchorTarget = target;
  230. }
  231. hasShowDelay = Ext.isDefined(me.activeTarget.showDelay);
  232. if (hasShowDelay) {
  233. delay = me.showDelay;
  234. me.showDelay = me.activeTarget.showDelay;
  235. }
  236. me.delayShow();
  237. if (hasShowDelay) {
  238. me.showDelay = delay;
  239. }
  240. }
  241. },
  242. // private
  243. onTargetOut : function(e){
  244. var me = this,
  245. active = me.activeTarget,
  246. hasHideDelay,
  247. delay;
  248. // If moving within the current target, and it does not have a new tip, ignore the mouseout
  249. // EventObject.within is the only correct way to determine this.
  250. if (active &amp;&amp; e.within(me.activeTarget.el) &amp;&amp; !me.getTipCfg(e)) {
  251. return;
  252. }
  253. me.clearTimer('show');
  254. delete me.activeTarget;
  255. if (me.autoHide !== false) {
  256. hasHideDelay = active &amp;&amp; Ext.isDefined(active.hideDelay);
  257. if (hasHideDelay) {
  258. delay = me.hideDelay;
  259. me.hideDelay = active.hideDelay;
  260. }
  261. me.delayHide();
  262. if (hasHideDelay) {
  263. me.hideDelay = delay;
  264. }
  265. }
  266. },
  267. // inherit docs
  268. showAt : function(xy){
  269. var me = this,
  270. target = me.activeTarget,
  271. cls;
  272. if (target) {
  273. if (!me.rendered) {
  274. me.render(Ext.getBody());
  275. me.activeTarget = target;
  276. }
  277. me.suspendLayouts();
  278. if (target.title) {
  279. me.setTitle(target.title);
  280. me.header.show();
  281. } else {
  282. me.header.hide();
  283. }
  284. me.update(target.text);
  285. me.autoHide = target.autoHide;
  286. me.dismissDelay = target.dismissDelay || me.dismissDelay;
  287. if (target.mouseOffset) {
  288. xy[0] += target.mouseOffset[0];
  289. xy[1] += target.mouseOffset[1];
  290. }
  291. cls = me.lastCls;
  292. if (cls) {
  293. me.removeCls(cls);
  294. delete me.lastCls;
  295. }
  296. cls = target.cls;
  297. if (cls) {
  298. me.addCls(cls);
  299. me.lastCls = cls;
  300. }
  301. me.setWidth(target.width);
  302. if (me.anchor) {
  303. me.constrainPosition = false;
  304. } else if (target.align) { // TODO: this doesn't seem to work consistently
  305. xy = me.el.getAlignToXY(target.el, target.align);
  306. me.constrainPosition = false;
  307. }else{
  308. me.constrainPosition = true;
  309. }
  310. me.resumeLayouts(true);
  311. }
  312. me.callParent([xy]);
  313. },
  314. // inherit docs
  315. hide: function(){
  316. delete this.activeTarget;
  317. this.callParent();
  318. }
  319. });</pre>
  320. </body>
  321. </html>