/ext-4.0.7/src/tip/QuickTip.js

https://bitbucket.org/srogerf/javascript · JavaScript · 294 lines · 196 code · 31 blank · 67 comment · 57 complexity · f323b6a1a13c436d21b7f0c221ed9834 MD5 · raw file

  1. /*
  2. This file is part of Ext JS 4
  3. Copyright (c) 2011 Sencha Inc
  4. Contact: http://www.sencha.com/contact
  5. GNU General Public License Usage
  6. This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file. Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
  7. If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
  8. */
  9. /**
  10. * @class Ext.tip.QuickTip
  11. * @extends Ext.tip.ToolTip
  12. * A specialized tooltip class for tooltips that can be specified in markup and automatically managed by the global
  13. * {@link Ext.tip.QuickTipManager} instance. See the QuickTipManager documentation for additional usage details and examples.
  14. * @xtype quicktip
  15. */
  16. Ext.define('Ext.tip.QuickTip', {
  17. extend: 'Ext.tip.ToolTip',
  18. alternateClassName: 'Ext.QuickTip',
  19. /**
  20. * @cfg {String/HTMLElement/Ext.Element} target The target HTMLElement, Ext.Element or id to associate with this Quicktip (defaults to the document).
  21. */
  22. /**
  23. * @cfg {Boolean} interceptTitles True to automatically use the element's DOM title value if available.
  24. */
  25. interceptTitles : false,
  26. // Force creation of header Component
  27. title: ' ',
  28. // private
  29. tagConfig : {
  30. namespace : "data-",
  31. attribute : "qtip",
  32. width : "qwidth",
  33. target : "target",
  34. title : "qtitle",
  35. hide : "hide",
  36. cls : "qclass",
  37. align : "qalign",
  38. anchor : "anchor"
  39. },
  40. // private
  41. initComponent : function(){
  42. var me = this;
  43. me.target = me.target || Ext.getDoc();
  44. me.targets = me.targets || {};
  45. me.callParent();
  46. },
  47. /**
  48. * Configures a new quick tip instance and assigns it to a target element. The following config values are
  49. * supported (for example usage, see the {@link Ext.tip.QuickTipManager} class header):
  50. * <div class="mdetail-params"><ul>
  51. * <li>autoHide</li>
  52. * <li>cls</li>
  53. * <li>dismissDelay (overrides the singleton value)</li>
  54. * <li>target (required)</li>
  55. * <li>text (required)</li>
  56. * <li>title</li>
  57. * <li>width</li></ul></div>
  58. * @param {Object} config The config object
  59. */
  60. register : function(config){
  61. var configs = Ext.isArray(config) ? config : arguments,
  62. i = 0,
  63. len = configs.length,
  64. target, j, targetLen;
  65. for (; i < len; i++) {
  66. config = configs[i];
  67. target = config.target;
  68. if (target) {
  69. if (Ext.isArray(target)) {
  70. for (j = 0, targetLen = target.length; j < targetLen; j++) {
  71. this.targets[Ext.id(target[j])] = config;
  72. }
  73. } else{
  74. this.targets[Ext.id(target)] = config;
  75. }
  76. }
  77. }
  78. },
  79. /**
  80. * Removes this quick tip from its element and destroys it.
  81. * @param {String/HTMLElement/Ext.Element} el The element from which the quick tip is to be removed or ID of the element.
  82. */
  83. unregister : function(el){
  84. delete this.targets[Ext.id(el)];
  85. },
  86. /**
  87. * Hides a visible tip or cancels an impending show for a particular element.
  88. * @param {String/HTMLElement/Ext.Element} el The element that is the target of the tip or ID of the element.
  89. */
  90. cancelShow: function(el){
  91. var me = this,
  92. activeTarget = me.activeTarget;
  93. el = Ext.get(el).dom;
  94. if (me.isVisible()) {
  95. if (activeTarget && activeTarget.el == el) {
  96. me.hide();
  97. }
  98. } else if (activeTarget && activeTarget.el == el) {
  99. me.clearTimer('show');
  100. }
  101. },
  102. /**
  103. * @private
  104. * Reads the tip text from the closest node to the event target which contains the attribute we
  105. * are configured to look for. Returns an object containing the text from the attribute, and the target element from
  106. * which the text was read.
  107. */
  108. getTipCfg: function(e) {
  109. var t = e.getTarget(),
  110. titleText = t.title,
  111. cfg;
  112. if (this.interceptTitles && titleText && Ext.isString(titleText)) {
  113. t.qtip = titleText;
  114. t.removeAttribute("title");
  115. e.preventDefault();
  116. return {
  117. text: titleText
  118. };
  119. }
  120. else {
  121. cfg = this.tagConfig;
  122. t = e.getTarget('[' + cfg.namespace + cfg.attribute + ']');
  123. if (t) {
  124. return {
  125. target: t,
  126. text: t.getAttribute(cfg.namespace + cfg.attribute)
  127. };
  128. }
  129. }
  130. },
  131. // private
  132. onTargetOver : function(e){
  133. var me = this,
  134. target = e.getTarget(),
  135. elTarget,
  136. cfg,
  137. ns,
  138. tipConfig,
  139. autoHide;
  140. if (me.disabled) {
  141. return;
  142. }
  143. // TODO - this causes "e" to be recycled in IE6/7 (EXTJSIV-1608) so ToolTip#setTarget
  144. // was changed to include freezeEvent. The issue seems to be a nested 'resize' event
  145. // that smashed Ext.EventObject.
  146. me.targetXY = e.getXY();
  147. if(!target || target.nodeType !== 1 || target == document || target == document.body){
  148. return;
  149. }
  150. if (me.activeTarget && ((target == me.activeTarget.el) || Ext.fly(me.activeTarget.el).contains(target))) {
  151. me.clearTimer('hide');
  152. me.show();
  153. return;
  154. }
  155. if (target) {
  156. Ext.Object.each(me.targets, function(key, value) {
  157. var targetEl = Ext.fly(value.target);
  158. if (targetEl && (targetEl.dom === target || targetEl.contains(target))) {
  159. elTarget = targetEl.dom;
  160. return false;
  161. }
  162. });
  163. if (elTarget) {
  164. me.activeTarget = me.targets[elTarget.id];
  165. me.activeTarget.el = target;
  166. me.anchor = me.activeTarget.anchor;
  167. if (me.anchor) {
  168. me.anchorTarget = target;
  169. }
  170. me.delayShow();
  171. return;
  172. }
  173. }
  174. elTarget = Ext.get(target);
  175. cfg = me.tagConfig;
  176. ns = cfg.namespace;
  177. tipConfig = me.getTipCfg(e);
  178. if (tipConfig) {
  179. // getTipCfg may look up the parentNode axis for a tip text attribute and will return the new target node.
  180. // Change our target element to match that from which the tip text attribute was read.
  181. if (tipConfig.target) {
  182. target = tipConfig.target;
  183. elTarget = Ext.get(target);
  184. }
  185. autoHide = elTarget.getAttribute(ns + cfg.hide);
  186. me.activeTarget = {
  187. el: target,
  188. text: tipConfig.text,
  189. width: +elTarget.getAttribute(ns + cfg.width) || null,
  190. autoHide: autoHide != "user" && autoHide !== 'false',
  191. title: elTarget.getAttribute(ns + cfg.title),
  192. cls: elTarget.getAttribute(ns + cfg.cls),
  193. align: elTarget.getAttribute(ns + cfg.align)
  194. };
  195. me.anchor = elTarget.getAttribute(ns + cfg.anchor);
  196. if (me.anchor) {
  197. me.anchorTarget = target;
  198. }
  199. me.delayShow();
  200. }
  201. },
  202. // private
  203. onTargetOut : function(e){
  204. var me = this;
  205. // If moving within the current target, and it does not have a new tip, ignore the mouseout
  206. if (me.activeTarget && e.within(me.activeTarget.el) && !me.getTipCfg(e)) {
  207. return;
  208. }
  209. me.clearTimer('show');
  210. if (me.autoHide !== false) {
  211. me.delayHide();
  212. }
  213. },
  214. // inherit docs
  215. showAt : function(xy){
  216. var me = this,
  217. target = me.activeTarget;
  218. if (target) {
  219. if (!me.rendered) {
  220. me.render(Ext.getBody());
  221. me.activeTarget = target;
  222. }
  223. if (target.title) {
  224. me.setTitle(target.title || '');
  225. me.header.show();
  226. } else {
  227. me.header.hide();
  228. }
  229. me.body.update(target.text);
  230. me.autoHide = target.autoHide;
  231. me.dismissDelay = target.dismissDelay || me.dismissDelay;
  232. if (me.lastCls) {
  233. me.el.removeCls(me.lastCls);
  234. delete me.lastCls;
  235. }
  236. if (target.cls) {
  237. me.el.addCls(target.cls);
  238. me.lastCls = target.cls;
  239. }
  240. me.setWidth(target.width);
  241. if (me.anchor) {
  242. me.constrainPosition = false;
  243. } else if (target.align) { // TODO: this doesn't seem to work consistently
  244. xy = me.el.getAlignToXY(target.el, target.align);
  245. me.constrainPosition = false;
  246. }else{
  247. me.constrainPosition = true;
  248. }
  249. }
  250. me.callParent([xy]);
  251. },
  252. // inherit docs
  253. hide: function(){
  254. delete this.activeTarget;
  255. this.callParent();
  256. }
  257. });