From 3452e8dc8336c7a4151bcccdb9d3d4202f06f294 Mon Sep 17 00:00:00 2001 From: fat Date: Mon, 11 May 2015 23:32:37 -0700 Subject: rewritten tooltip + tether integration and death to our positioner jank --- js/src/tooltip.js | 619 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 619 insertions(+) create mode 100644 js/src/tooltip.js (limited to 'js/src/tooltip.js') diff --git a/js/src/tooltip.js b/js/src/tooltip.js new file mode 100644 index 000000000..4c09a5baf --- /dev/null +++ b/js/src/tooltip.js @@ -0,0 +1,619 @@ +import Util from './util' + + +/** + * -------------------------------------------------------------------------- + * Bootstrap (v4.0.0): tooltip.js + * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) + * -------------------------------------------------------------------------- + */ + +const ToolTip = (($) => { + + + /** + * ------------------------------------------------------------------------ + * Constants + * ------------------------------------------------------------------------ + */ + + const NAME = 'tooltip' + const VERSION = '4.0.0' + const DATA_KEY = 'bs.tooltip' + const JQUERY_NO_CONFLICT = $.fn[NAME] + const TRANSITION_DURATION = 150 + const CLASS_PREFIX = 'bs-tether' + + const Default = { + animation : true, + template : '', + trigger : 'hover focus', + title : '', + delay : 0, + html : false, + selector : false, + attachment : 'top', + offset : '0 0', + constraints : null + } + + const HorizontalMirror = { + LEFT : 'right', + CENTER : 'center', + RIGHT : 'left' + } + + const VerticalMirror = { + TOP : 'bottom', + MIDDLE : 'middle', + BOTTOM : 'top' + } + + const VerticalDefault = { + LEFT : 'middle', + CENTER : 'bottom', + RIGHT : 'middle' + } + + const HorizontalDefault = { + TOP : 'center', + MIDDLE : 'left', + BOTTOM : 'center' + } + + const HoverState = { + IN : 'in', + OUT : 'out' + } + + const Event = { + HIDE : 'hide.bs.tooltip', + HIDDEN : 'hidden.bs.tooltip', + SHOW : 'show.bs.tooltip', + SHOWN : 'shown.bs.tooltip', + INSERTED : 'inserted.bs.tooltip', + CLICK : 'click.bs.tooltip', + FOCUSIN : 'focusin.bs.tooltip', + FOCUSOUT : 'focusout.bs.tooltip', + MOUSEENTER : 'mouseenter.bs.tooltip', + MOUSELEAVE : 'mouseleave.bs.tooltip' + } + + const ClassName = { + FADE : 'fade', + IN : 'in' + } + + const Selector = { + TOOLTIP : '.tooltip', + TOOLTIP_INNER : '.tooltip-inner', + TOOLTIP_ARROW : '.tooltip-arrow' + } + + const TetherClass = { + element : false, + enabled : false + } + + const Trigger = { + HOVER : 'hover', + FOCUS : 'focus', + CLICK : 'click', + MANUAL : 'manual' + } + + + /** + * ------------------------------------------------------------------------ + * Class Definition + * ------------------------------------------------------------------------ + */ + + class Tooltip { + + constructor(element, config) { + + // private + this._isEnabled = true + this._timeout = 0 + this._hoverState = '' + this._activeTrigger = {} + + // protected + this.element = element + this.config = this._getConfig(config) + this.tip = null + this.tether = null + + this._setListeners() + + } + + + // getters + + static get VERSION() { + return VERSION + } + + static get Default() { + return Default + } + + + // public + + enable() { + this._isEnabled = true + } + + disable() { + this._isEnabled = false + } + + toggleEnabled() { + this._isEnabled = !this._isEnabled + } + + toggle(event) { + let context = this + + if (event) { + context = $(event.currentTarget).data(DATA_KEY) + + if (!context) { + context = new this.constructor( + event.currentTarget, + this._getDelegateConfig() + ) + $(event.currentTarget).data(DATA_KEY, context) + } + + context._activeTrigger.click = !context._activeTrigger.click + + if (context._isWithActiveTrigger()) { + context._enter(null, context) + } else { + context._leave(null, context) + } + + } else { + $(context.getTipElement()).hasClass(ClassName.IN) ? + context._leave(null, context) : + context._enter(null, context) + } + } + + destroy() { + clearTimeout(this._timeout) + this.hide(() => { + $(this.element) + .off(Selector.TOOLTIP) + .removeData(DATA_KEY) + }) + } + + show() { + let showEvent = $.Event(Event.SHOW) + + if (this.isWithContent() && this._isEnabled) { + $(this.element).trigger(showEvent) + + let isInTheDom = $.contains( + this.element.ownerDocument.documentElement, + this.element + ) + + if (showEvent.isDefaultPrevented() || !isInTheDom) { + return + } + + let tip = this.getTipElement() + let tipId = Util.getUID(NAME) + + tip.setAttribute('id', tipId) + this.element.setAttribute('aria-describedby', tipId) + + this.setContent() + + if (this.config.animation) { + $(tip).addClass(ClassName.FADE) + } + + let attachment = typeof this.config.attachment === 'function' ? + this.config.attachment.call(this, tip, this.element) : + this.config.attachment + + attachment = this.getAttachment(attachment) + + $(tip).data(DATA_KEY, this) + + this.element.parentNode.insertBefore(tip, this.element.nextSibling) + $(this.element).trigger(Event.INSERTED) + + this.tether = new Tether({ + element : this.tip, + target : this.element, + attachment : attachment, + classes : TetherClass, + classPrefix : CLASS_PREFIX, + offset : this.config.offset, + constraints : this.config.constraints + }) + + Util.reflow(tip) + this.tether.position() + + $(tip).addClass(ClassName.IN) + + let complete = () => { + let prevHoverState = this._hoverState + this._hoverState = null + + $(this.element).trigger(Event.SHOWN) + + if (prevHoverState === HoverState.OUT) { + this._leave(null, this) + } + } + + Util.supportsTransitionEnd() && $(this.tip).hasClass(ClassName.FADE) ? + $(this.tip) + .one(Util.TRANSITION_END, complete) + .emulateTransitionEnd(Tooltip._TRANSITION_DURATION) : + complete() + } + } + + hide(callback) { + let tip = this.getTipElement() + let hideEvent = $.Event(Event.HIDE) + let complete = () => { + if (this._hoverState !== HoverState.IN && tip.parentNode) { + tip.parentNode.removeChild(tip) + } + + this.element.removeAttribute('aria-describedby') + $(this.element).trigger(Event.HIDDEN) + this.cleanupTether() + + if (callback) { + callback() + } + } + + $(this.element).trigger(hideEvent) + + if (hideEvent.isDefaultPrevented()) { + return + } + + $(tip).removeClass(ClassName.IN) + + if (Util.supportsTransitionEnd() && + ($(this.tip).hasClass(ClassName.FADE))) { + + $(tip) + .one(Util.TRANSITION_END, complete) + .emulateTransitionEnd(TRANSITION_DURATION) + + } else { + complete() + } + + this._hoverState = '' + } + + + // protected + + isWithContent() { + return !!this.getTitle() + } + + getTipElement() { + return (this.tip = this.tip || $(this.config.template)[0]) + } + + getAttachment(attachmentString) { + let attachmentArray = attachmentString.split(' ') + let normalizedAttachment = {} + + if (!attachmentArray.length) { + throw new Error('Tooltip requires attachment') + } + + for (let attachment of attachmentArray) { + attachment = attachment.toUpperCase() + + if (HorizontalMirror[attachment]) { + normalizedAttachment.horizontal = HorizontalMirror[attachment] + } + + if (VerticalMirror[attachment]) { + normalizedAttachment.vertical = VerticalMirror[attachment] + } + } + + if (!normalizedAttachment.horizontal && + (!normalizedAttachment.vertical)) { + throw new Error('Tooltip requires valid attachment') + } + + if (!normalizedAttachment.horizontal) { + normalizedAttachment.horizontal = + HorizontalDefault[normalizedAttachment.vertical.toUpperCase()] + } + + if (!normalizedAttachment.vertical) { + normalizedAttachment.vertical = + VerticalDefault[normalizedAttachment.horizontal.toUpperCase()] + } + + return [ + normalizedAttachment.vertical, + normalizedAttachment.horizontal + ].join(' ') + } + + setContent() { + let tip = this.getTipElement() + let title = this.getTitle() + let method = this.config.html ? 'innerHTML' : 'innerText' + + $(tip).find(Selector.TOOLTIP_INNER)[0][method] = title + + $(tip) + .removeClass(ClassName.FADE) + .removeClass(ClassName.IN) + + this.cleanupTether() + } + + getTitle() { + let title = this.element.getAttribute('data-original-title') + + if (!title) { + title = typeof this.config.title === 'function' ? + this.config.title.call(this.element) : + this.config.title + } + + return title + } + + removeTetherClasses(i, css) { + return ((css.baseVal || css).match( + new RegExp(`(^|\\s)${CLASS_PREFIX}-\\S+`, 'g')) || [] + ).join(' ') + } + + cleanupTether() { + if (this.tether) { + this.tether.destroy() + + // clean up after tether's junk classes + // remove after they fix issue + // (https://github.com/HubSpot/tether/issues/36) + $(this.element).removeClass(this.removeTetherClasses) + $(this.tip).removeClass(this.removeTetherClasses) + } + } + + + // private + + _setListeners() { + let triggers = this.config.trigger.split(' ') + + triggers.forEach((trigger) => { + if (trigger === 'click') { + $(this.element).on( + Event.CLICK, + this.config.selector, + this.toggle.bind(this) + ) + + } else if (trigger !== Trigger.MANUAL) { + let eventIn = trigger == Trigger.HOVER ? + Event.MOUSEENTER : Event.FOCUSIN + let eventOut = trigger == Trigger.HOVER ? + Event.MOUSELEAVE : Event.FOCUSOUT + + $(this.element) + .on( + eventIn, + this.config.selector, + this._enter.bind(this) + ) + .on( + eventOut, + this.config.selector, + this._leave.bind(this) + ) + } + }) + + if (this.config.selector) { + this.config = $.extend({}, this.config, { + trigger : 'manual', + selector : '' + }) + } else { + this._fixTitle() + } + } + + _fixTitle() { + let titleType = typeof this.element.getAttribute('data-original-title') + if (this.element.getAttribute('title') || + (titleType !== 'string')) { + this.element.setAttribute( + 'data-original-title', + this.element.getAttribute('title') || '' + ) + this.element.setAttribute('title', '') + } + } + + _enter(event, context) { + context = context || $(event.currentTarget).data(DATA_KEY) + + if (!context) { + context = new this.constructor( + event.currentTarget, + this._getDelegateConfig() + ) + $(event.currentTarget).data(DATA_KEY, context) + } + + if (event) { + context._activeTrigger[ + event.type == 'focusin' ? Trigger.FOCUS : Trigger.HOVER + ] = true + } + + if ($(context.getTipElement()).hasClass(ClassName.IN) || + (context._hoverState === HoverState.IN)) { + context._hoverState = HoverState.IN + return + } + + clearTimeout(context._timeout) + + context._hoverState = HoverState.IN + + if (!context.config.delay || !context.config.delay.show) { + context.show() + return + } + + context._timeout = setTimeout(() => { + if (context._hoverState === HoverState.IN) { + context.show() + } + }, context.config.delay.show) + } + + _leave(event, context) { + context = context || $(event.currentTarget).data(DATA_KEY) + + if (!context) { + context = new this.constructor( + event.currentTarget, + this._getDelegateConfig() + ) + $(event.currentTarget).data(DATA_KEY, context) + } + + if (event) { + context._activeTrigger[ + event.type == 'focusout' ? Triger.FOCUS : Trigger.HOVER + ] = false + } + + if (context._isWithActiveTrigger()) { + return + } + + clearTimeout(context._timeout) + + context._hoverState = HoverState.OUT + + if (!context.config.delay || !context.config.delay.hide) { + context.hide() + return + } + + context._timeout = setTimeout(() => { + if (context._hoverState === HoverState.OUT) { + context.hide() + } + }, context.config.delay.hide) + } + + _isWithActiveTrigger() { + for (let trigger in this._activeTrigger) { + if (this._activeTrigger[trigger]) { + return true + } + } + + return false + } + + _getConfig(config) { + config = $.extend({}, Default, $(this.element).data(), config) + + if (config.delay && typeof config.delay === 'number') { + config.delay = { + show : config.delay, + hide : config.delay + } + } + + return config + } + + _getDelegateConfig() { + let config = {} + + if (this.config) { + for (let key in this.config) { + let value = this.config[key] + if (Default[key] !== value) { + config[key] = value + } + } + } + + return config + } + + + // static + + static _jQueryInterface(config) { + return this.each(function () { + let data = $(this).data(DATA_KEY) + let _config = typeof config === 'object' ? + config : null + + if (!data && /destroy|hide/.test(config)) { + return + } + + if (!data) { + data = new Tooltip(this, _config) + $(this).data(DATA_KEY, data) + } + + if (typeof config === 'string') { + data[config]() + } + }) + } + + } + + + /** + * ------------------------------------------------------------------------ + * jQuery + * ------------------------------------------------------------------------ + */ + + $.fn[NAME] = Tooltip._jQueryInterface + $.fn[NAME].Constructor = Tooltip + $.fn[NAME].noConflict = function () { + $.fn[NAME] = JQUERY_NO_CONFLICT + return Tooltip._jQueryInterface + } + + return Tooltip + +})(jQuery) + +export default Tooltip -- cgit v1.2.3 From a58febf71a5eac2161ce2db08c7d723755ed1163 Mon Sep 17 00:00:00 2001 From: fat Date: Tue, 12 May 2015 14:28:11 -0700 Subject: popover passing as well --- js/src/tooltip.js | 191 ++++++++++++++++++++++++------------------------------ 1 file changed, 84 insertions(+), 107 deletions(-) (limited to 'js/src/tooltip.js') diff --git a/js/src/tooltip.js b/js/src/tooltip.js index 4c09a5baf..a04085130 100644 --- a/js/src/tooltip.js +++ b/js/src/tooltip.js @@ -8,7 +8,7 @@ import Util from './util' * -------------------------------------------------------------------------- */ -const ToolTip = (($) => { +const Tooltip = (($) => { /** @@ -34,33 +34,16 @@ const ToolTip = (($) => { delay : 0, html : false, selector : false, - attachment : 'top', + placement : 'top', offset : '0 0', constraints : null } - const HorizontalMirror = { - LEFT : 'right', - CENTER : 'center', - RIGHT : 'left' - } - - const VerticalMirror = { - TOP : 'bottom', - MIDDLE : 'middle', - BOTTOM : 'top' - } - - const VerticalDefault = { - LEFT : 'middle', - CENTER : 'bottom', - RIGHT : 'middle' - } - - const HorizontalDefault = { - TOP : 'center', - MIDDLE : 'left', - BOTTOM : 'center' + const AttachmentMap = { + TOP : 'bottom center', + RIGHT : 'middle left', + BOTTOM : 'top center', + LEFT : 'middle right' } const HoverState = { @@ -88,8 +71,7 @@ const ToolTip = (($) => { const Selector = { TOOLTIP : '.tooltip', - TOOLTIP_INNER : '.tooltip-inner', - TOOLTIP_ARROW : '.tooltip-arrow' + TOOLTIP_INNER : '.tooltip-inner' } const TetherClass = { @@ -120,12 +102,12 @@ const ToolTip = (($) => { this._timeout = 0 this._hoverState = '' this._activeTrigger = {} + this._tether = null // protected this.element = element this.config = this._getConfig(config) this.tip = null - this.tether = null this._setListeners() @@ -142,6 +124,19 @@ const ToolTip = (($) => { return Default } + static get NAME() { + return NAME + } + + static get DATA_KEY() { + return DATA_KEY + } + + static get Event() { + return Event + } + + // public @@ -159,16 +154,17 @@ const ToolTip = (($) => { toggle(event) { let context = this + let dataKey = this.constructor.DATA_KEY if (event) { - context = $(event.currentTarget).data(DATA_KEY) + context = $(event.currentTarget).data(dataKey) if (!context) { context = new this.constructor( event.currentTarget, this._getDelegateConfig() ) - $(event.currentTarget).data(DATA_KEY, context) + $(event.currentTarget).data(dataKey, context) } context._activeTrigger.click = !context._activeTrigger.click @@ -190,13 +186,19 @@ const ToolTip = (($) => { clearTimeout(this._timeout) this.hide(() => { $(this.element) - .off(Selector.TOOLTIP) - .removeData(DATA_KEY) + .off(`.${this.constructor.NAME}`) + .removeData(this.constructor.DATA_KEY) + + if (this.tip) { + $(this.tip).detach() + } + + this.tip = null }) } show() { - let showEvent = $.Event(Event.SHOW) + let showEvent = $.Event(this.constructor.Event.SHOW) if (this.isWithContent() && this._isEnabled) { $(this.element).trigger(showEvent) @@ -211,7 +213,7 @@ const ToolTip = (($) => { } let tip = this.getTipElement() - let tipId = Util.getUID(NAME) + let tipId = Util.getUID(this.constructor.NAME) tip.setAttribute('id', tipId) this.element.setAttribute('aria-describedby', tipId) @@ -222,19 +224,20 @@ const ToolTip = (($) => { $(tip).addClass(ClassName.FADE) } - let attachment = typeof this.config.attachment === 'function' ? - this.config.attachment.call(this, tip, this.element) : - this.config.attachment + let placement = typeof this.config.placement === 'function' ? + this.config.placement.call(this, tip, this.element) : + this.config.placement - attachment = this.getAttachment(attachment) + let attachment = this._getAttachment(placement) - $(tip).data(DATA_KEY, this) + $(tip) + .data(this.constructor.DATA_KEY, this) + .appendTo(document.body) - this.element.parentNode.insertBefore(tip, this.element.nextSibling) - $(this.element).trigger(Event.INSERTED) + $(this.element).trigger(this.constructor.Event.INSERTED) - this.tether = new Tether({ - element : this.tip, + this._tether = new Tether({ + element : tip, target : this.element, attachment : attachment, classes : TetherClass, @@ -244,7 +247,7 @@ const ToolTip = (($) => { }) Util.reflow(tip) - this.tether.position() + this._tether.position() $(tip).addClass(ClassName.IN) @@ -252,7 +255,7 @@ const ToolTip = (($) => { let prevHoverState = this._hoverState this._hoverState = null - $(this.element).trigger(Event.SHOWN) + $(this.element).trigger(this.constructor.Event.SHOWN) if (prevHoverState === HoverState.OUT) { this._leave(null, this) @@ -269,14 +272,14 @@ const ToolTip = (($) => { hide(callback) { let tip = this.getTipElement() - let hideEvent = $.Event(Event.HIDE) + let hideEvent = $.Event(this.constructor.Event.HIDE) let complete = () => { if (this._hoverState !== HoverState.IN && tip.parentNode) { tip.parentNode.removeChild(tip) } this.element.removeAttribute('aria-describedby') - $(this.element).trigger(Event.HIDDEN) + $(this.element).trigger(this.constructor.Event.HIDDEN) this.cleanupTether() if (callback) { @@ -317,47 +320,6 @@ const ToolTip = (($) => { return (this.tip = this.tip || $(this.config.template)[0]) } - getAttachment(attachmentString) { - let attachmentArray = attachmentString.split(' ') - let normalizedAttachment = {} - - if (!attachmentArray.length) { - throw new Error('Tooltip requires attachment') - } - - for (let attachment of attachmentArray) { - attachment = attachment.toUpperCase() - - if (HorizontalMirror[attachment]) { - normalizedAttachment.horizontal = HorizontalMirror[attachment] - } - - if (VerticalMirror[attachment]) { - normalizedAttachment.vertical = VerticalMirror[attachment] - } - } - - if (!normalizedAttachment.horizontal && - (!normalizedAttachment.vertical)) { - throw new Error('Tooltip requires valid attachment') - } - - if (!normalizedAttachment.horizontal) { - normalizedAttachment.horizontal = - HorizontalDefault[normalizedAttachment.vertical.toUpperCase()] - } - - if (!normalizedAttachment.vertical) { - normalizedAttachment.vertical = - VerticalDefault[normalizedAttachment.horizontal.toUpperCase()] - } - - return [ - normalizedAttachment.vertical, - normalizedAttachment.horizontal - ].join(' ') - } - setContent() { let tip = this.getTipElement() let title = this.getTitle() @@ -384,43 +346,43 @@ const ToolTip = (($) => { return title } - removeTetherClasses(i, css) { - return ((css.baseVal || css).match( - new RegExp(`(^|\\s)${CLASS_PREFIX}-\\S+`, 'g')) || [] - ).join(' ') - } - cleanupTether() { - if (this.tether) { - this.tether.destroy() + if (this._tether) { + this._tether.destroy() // clean up after tether's junk classes // remove after they fix issue // (https://github.com/HubSpot/tether/issues/36) - $(this.element).removeClass(this.removeTetherClasses) - $(this.tip).removeClass(this.removeTetherClasses) + $(this.element).removeClass(this._removeTetherClasses) + $(this.tip).removeClass(this._removeTetherClasses) } } // private + _getAttachment(placement) { + return AttachmentMap[placement.toUpperCase()] + } + _setListeners() { let triggers = this.config.trigger.split(' ') triggers.forEach((trigger) => { if (trigger === 'click') { $(this.element).on( - Event.CLICK, + this.constructor.Event.CLICK, this.config.selector, this.toggle.bind(this) ) } else if (trigger !== Trigger.MANUAL) { let eventIn = trigger == Trigger.HOVER ? - Event.MOUSEENTER : Event.FOCUSIN + this.constructor.Event.MOUSEENTER : + this.constructor.Event.FOCUSIN let eventOut = trigger == Trigger.HOVER ? - Event.MOUSELEAVE : Event.FOCUSOUT + this.constructor.Event.MOUSELEAVE : + this.constructor.Event.FOCUSOUT $(this.element) .on( @@ -446,6 +408,12 @@ const ToolTip = (($) => { } } + _removeTetherClasses(i, css) { + return ((css.baseVal || css).match( + new RegExp(`(^|\\s)${CLASS_PREFIX}-\\S+`, 'g')) || [] + ).join(' ') + } + _fixTitle() { let titleType = typeof this.element.getAttribute('data-original-title') if (this.element.getAttribute('title') || @@ -459,14 +427,16 @@ const ToolTip = (($) => { } _enter(event, context) { - context = context || $(event.currentTarget).data(DATA_KEY) + let dataKey = this.constructor.DATA_KEY + + context = context || $(event.currentTarget).data(dataKey) if (!context) { context = new this.constructor( event.currentTarget, this._getDelegateConfig() ) - $(event.currentTarget).data(DATA_KEY, context) + $(event.currentTarget).data(dataKey, context) } if (event) { @@ -498,19 +468,21 @@ const ToolTip = (($) => { } _leave(event, context) { - context = context || $(event.currentTarget).data(DATA_KEY) + let dataKey = this.constructor.DATA_KEY + + context = context || $(event.currentTarget).data(dataKey) if (!context) { context = new this.constructor( event.currentTarget, this._getDelegateConfig() ) - $(event.currentTarget).data(DATA_KEY, context) + $(event.currentTarget).data(dataKey, context) } if (event) { context._activeTrigger[ - event.type == 'focusout' ? Triger.FOCUS : Trigger.HOVER + event.type == 'focusout' ? Trigger.FOCUS : Trigger.HOVER ] = false } @@ -545,7 +517,12 @@ const ToolTip = (($) => { } _getConfig(config) { - config = $.extend({}, Default, $(this.element).data(), config) + config = $.extend( + {}, + this.constructor.Default, + $(this.element).data(), + config + ) if (config.delay && typeof config.delay === 'number') { config.delay = { @@ -563,7 +540,7 @@ const ToolTip = (($) => { if (this.config) { for (let key in this.config) { let value = this.config[key] - if (Default[key] !== value) { + if (this.constructor.Default[key] !== value) { config[key] = value } } -- cgit v1.2.3 From ab1578465aee4a776412b48f16bfefca79381919 Mon Sep 17 00:00:00 2001 From: fat Date: Tue, 12 May 2015 16:52:54 -0700 Subject: grunt test-js, grunt dist-js now working --- js/src/tooltip.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'js/src/tooltip.js') diff --git a/js/src/tooltip.js b/js/src/tooltip.js index a04085130..1bd018c0f 100644 --- a/js/src/tooltip.js +++ b/js/src/tooltip.js @@ -373,7 +373,7 @@ const Tooltip = (($) => { $(this.element).on( this.constructor.Event.CLICK, this.config.selector, - this.toggle.bind(this) + $.proxy(this.toggle, this) ) } else if (trigger !== Trigger.MANUAL) { @@ -388,12 +388,12 @@ const Tooltip = (($) => { .on( eventIn, this.config.selector, - this._enter.bind(this) + $.proxy(this._enter, this) ) .on( eventOut, this.config.selector, - this._leave.bind(this) + $.proxy(this._leave, this) ) } }) -- cgit v1.2.3 From f8b2569ec8956a1f4d09fe6fc9865bd200ecde43 Mon Sep 17 00:00:00 2001 From: fat Date: Wed, 13 May 2015 12:48:34 -0700 Subject: implement global dispose method --- js/src/tooltip.js | 53 +++++++++++++++++++++++++++++++++-------------------- 1 file changed, 33 insertions(+), 20 deletions(-) (limited to 'js/src/tooltip.js') diff --git a/js/src/tooltip.js b/js/src/tooltip.js index 1bd018c0f..42639895e 100644 --- a/js/src/tooltip.js +++ b/js/src/tooltip.js @@ -20,6 +20,7 @@ const Tooltip = (($) => { const NAME = 'tooltip' const VERSION = '4.0.0' const DATA_KEY = 'bs.tooltip' + const EVENT_KEY = `.${DATA_KEY}` const JQUERY_NO_CONFLICT = $.fn[NAME] const TRANSITION_DURATION = 150 const CLASS_PREFIX = 'bs-tether' @@ -52,16 +53,16 @@ const Tooltip = (($) => { } const Event = { - HIDE : 'hide.bs.tooltip', - HIDDEN : 'hidden.bs.tooltip', - SHOW : 'show.bs.tooltip', - SHOWN : 'shown.bs.tooltip', - INSERTED : 'inserted.bs.tooltip', - CLICK : 'click.bs.tooltip', - FOCUSIN : 'focusin.bs.tooltip', - FOCUSOUT : 'focusout.bs.tooltip', - MOUSEENTER : 'mouseenter.bs.tooltip', - MOUSELEAVE : 'mouseleave.bs.tooltip' + HIDE : `hide${EVENT_KEY}`, + HIDDEN : `hidden${EVENT_KEY}`, + SHOW : `show${EVENT_KEY}`, + SHOWN : `shown${EVENT_KEY}`, + INSERTED : `inserted${EVENT_KEY}`, + CLICK : `click${EVENT_KEY}`, + FOCUSIN : `focusin${EVENT_KEY}`, + FOCUSOUT : `focusout${EVENT_KEY}`, + MOUSEENTER : `mouseenter${EVENT_KEY}`, + MOUSELEAVE : `mouseleave${EVENT_KEY}` } const ClassName = { @@ -136,6 +137,9 @@ const Tooltip = (($) => { return Event } + static get EVENT_KEY() { + return EVENT_KEY + } // public @@ -182,19 +186,28 @@ const Tooltip = (($) => { } } - destroy() { + dispose() { clearTimeout(this._timeout) - this.hide(() => { - $(this.element) - .off(`.${this.constructor.NAME}`) - .removeData(this.constructor.DATA_KEY) - if (this.tip) { - $(this.tip).detach() - } + this.cleanupTether() - this.tip = null - }) + $.removeData(this.element, this.constructor.DATA_KEY) + + $(this.element).off(this.constructor.EVENT_KEY) + + if (this.tip) { + $(this.tip).remove() + } + + this._isEnabled = null + this._timeout = null + this._hoverState = null + this._activeTrigger = null + this._tether = null + + this.element = null + this.config = null + this.tip = null } show() { -- cgit v1.2.3 From eaab1def7af7d7e1ab32ff69d043b46e2815ca22 Mon Sep 17 00:00:00 2001 From: fat Date: Wed, 13 May 2015 14:46:50 -0700 Subject: add simple type checker implementation --- js/src/tooltip.js | 25 ++++++++++++++++++++++++- 1 file changed, 24 insertions(+), 1 deletion(-) (limited to 'js/src/tooltip.js') diff --git a/js/src/tooltip.js b/js/src/tooltip.js index 42639895e..5d62e154a 100644 --- a/js/src/tooltip.js +++ b/js/src/tooltip.js @@ -37,7 +37,20 @@ const Tooltip = (($) => { selector : false, placement : 'top', offset : '0 0', - constraints : null + constraints : [] + } + + const DefaultType = { + animation : 'boolean', + template : 'string', + title : '(string|function)', + trigger : 'string', + delay : '(number|object)', + html : 'boolean', + selector : '(string|boolean)', + placement : '(string|function)', + offset : 'string', + constraints : 'array' } const AttachmentMap = { @@ -141,6 +154,10 @@ const Tooltip = (($) => { return EVENT_KEY } + static get DefaultType() { + return DefaultType + } + // public @@ -544,6 +561,12 @@ const Tooltip = (($) => { } } + Util.typeCheckConfig( + NAME, + config, + this.constructor.DefaultType + ) + return config } -- cgit v1.2.3