src/tip/QuickTip.js

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