]> git.ipfire.org Git - ipfire.org.git/blame - src/scss/bootstrap-4.0.0-alpha.6/js/dist/tooltip.js
Introduce autotools
[ipfire.org.git] / src / scss / bootstrap-4.0.0-alpha.6 / js / dist / tooltip.js
CommitLineData
91e44d91
S
1var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
2
3var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
4
5function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
6
7/**
8 * --------------------------------------------------------------------------
9 * Bootstrap (v4.0.0-alpha.6): tooltip.js
10 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
11 * --------------------------------------------------------------------------
12 */
13
14var Tooltip = function ($) {
15
16 /**
17 * Check for Tether dependency
18 * Tether - http://tether.io/
19 */
20 if (typeof Tether === 'undefined') {
21 throw new Error('Bootstrap tooltips require Tether (http://tether.io/)');
22 }
23
24 /**
25 * ------------------------------------------------------------------------
26 * Constants
27 * ------------------------------------------------------------------------
28 */
29
30 var NAME = 'tooltip';
31 var VERSION = '4.0.0-alpha.6';
32 var DATA_KEY = 'bs.tooltip';
33 var EVENT_KEY = '.' + DATA_KEY;
34 var JQUERY_NO_CONFLICT = $.fn[NAME];
35 var TRANSITION_DURATION = 150;
36 var CLASS_PREFIX = 'bs-tether';
37
38 var Default = {
39 animation: true,
40 template: '<div class="tooltip" role="tooltip">' + '<div class="tooltip-inner"></div></div>',
41 trigger: 'hover focus',
42 title: '',
43 delay: 0,
44 html: false,
45 selector: false,
46 placement: 'top',
47 offset: '0 0',
48 constraints: [],
49 container: false
50 };
51
52 var DefaultType = {
53 animation: 'boolean',
54 template: 'string',
55 title: '(string|element|function)',
56 trigger: 'string',
57 delay: '(number|object)',
58 html: 'boolean',
59 selector: '(string|boolean)',
60 placement: '(string|function)',
61 offset: 'string',
62 constraints: 'array',
63 container: '(string|element|boolean)'
64 };
65
66 var AttachmentMap = {
67 TOP: 'bottom center',
68 RIGHT: 'middle left',
69 BOTTOM: 'top center',
70 LEFT: 'middle right'
71 };
72
73 var HoverState = {
74 SHOW: 'show',
75 OUT: 'out'
76 };
77
78 var Event = {
79 HIDE: 'hide' + EVENT_KEY,
80 HIDDEN: 'hidden' + EVENT_KEY,
81 SHOW: 'show' + EVENT_KEY,
82 SHOWN: 'shown' + EVENT_KEY,
83 INSERTED: 'inserted' + EVENT_KEY,
84 CLICK: 'click' + EVENT_KEY,
85 FOCUSIN: 'focusin' + EVENT_KEY,
86 FOCUSOUT: 'focusout' + EVENT_KEY,
87 MOUSEENTER: 'mouseenter' + EVENT_KEY,
88 MOUSELEAVE: 'mouseleave' + EVENT_KEY
89 };
90
91 var ClassName = {
92 FADE: 'fade',
93 SHOW: 'show'
94 };
95
96 var Selector = {
97 TOOLTIP: '.tooltip',
98 TOOLTIP_INNER: '.tooltip-inner'
99 };
100
101 var TetherClass = {
102 element: false,
103 enabled: false
104 };
105
106 var Trigger = {
107 HOVER: 'hover',
108 FOCUS: 'focus',
109 CLICK: 'click',
110 MANUAL: 'manual'
111 };
112
113 /**
114 * ------------------------------------------------------------------------
115 * Class Definition
116 * ------------------------------------------------------------------------
117 */
118
119 var Tooltip = function () {
120 function Tooltip(element, config) {
121 _classCallCheck(this, Tooltip);
122
123 // private
124 this._isEnabled = true;
125 this._timeout = 0;
126 this._hoverState = '';
127 this._activeTrigger = {};
128 this._isTransitioning = false;
129 this._tether = null;
130
131 // protected
132 this.element = element;
133 this.config = this._getConfig(config);
134 this.tip = null;
135
136 this._setListeners();
137 }
138
139 // getters
140
141 // public
142
143 Tooltip.prototype.enable = function enable() {
144 this._isEnabled = true;
145 };
146
147 Tooltip.prototype.disable = function disable() {
148 this._isEnabled = false;
149 };
150
151 Tooltip.prototype.toggleEnabled = function toggleEnabled() {
152 this._isEnabled = !this._isEnabled;
153 };
154
155 Tooltip.prototype.toggle = function toggle(event) {
156 if (event) {
157 var dataKey = this.constructor.DATA_KEY;
158 var context = $(event.currentTarget).data(dataKey);
159
160 if (!context) {
161 context = new this.constructor(event.currentTarget, this._getDelegateConfig());
162 $(event.currentTarget).data(dataKey, context);
163 }
164
165 context._activeTrigger.click = !context._activeTrigger.click;
166
167 if (context._isWithActiveTrigger()) {
168 context._enter(null, context);
169 } else {
170 context._leave(null, context);
171 }
172 } else {
173
174 if ($(this.getTipElement()).hasClass(ClassName.SHOW)) {
175 this._leave(null, this);
176 return;
177 }
178
179 this._enter(null, this);
180 }
181 };
182
183 Tooltip.prototype.dispose = function dispose() {
184 clearTimeout(this._timeout);
185
186 this.cleanupTether();
187
188 $.removeData(this.element, this.constructor.DATA_KEY);
189
190 $(this.element).off(this.constructor.EVENT_KEY);
191 $(this.element).closest('.modal').off('hide.bs.modal');
192
193 if (this.tip) {
194 $(this.tip).remove();
195 }
196
197 this._isEnabled = null;
198 this._timeout = null;
199 this._hoverState = null;
200 this._activeTrigger = null;
201 this._tether = null;
202
203 this.element = null;
204 this.config = null;
205 this.tip = null;
206 };
207
208 Tooltip.prototype.show = function show() {
209 var _this = this;
210
211 if ($(this.element).css('display') === 'none') {
212 throw new Error('Please use show on visible elements');
213 }
214
215 var showEvent = $.Event(this.constructor.Event.SHOW);
216 if (this.isWithContent() && this._isEnabled) {
217 if (this._isTransitioning) {
218 throw new Error('Tooltip is transitioning');
219 }
220 $(this.element).trigger(showEvent);
221
222 var isInTheDom = $.contains(this.element.ownerDocument.documentElement, this.element);
223
224 if (showEvent.isDefaultPrevented() || !isInTheDom) {
225 return;
226 }
227
228 var tip = this.getTipElement();
229 var tipId = Util.getUID(this.constructor.NAME);
230
231 tip.setAttribute('id', tipId);
232 this.element.setAttribute('aria-describedby', tipId);
233
234 this.setContent();
235
236 if (this.config.animation) {
237 $(tip).addClass(ClassName.FADE);
238 }
239
240 var placement = typeof this.config.placement === 'function' ? this.config.placement.call(this, tip, this.element) : this.config.placement;
241
242 var attachment = this._getAttachment(placement);
243
244 var container = this.config.container === false ? document.body : $(this.config.container);
245
246 $(tip).data(this.constructor.DATA_KEY, this).appendTo(container);
247
248 $(this.element).trigger(this.constructor.Event.INSERTED);
249
250 this._tether = new Tether({
251 attachment: attachment,
252 element: tip,
253 target: this.element,
254 classes: TetherClass,
255 classPrefix: CLASS_PREFIX,
256 offset: this.config.offset,
257 constraints: this.config.constraints,
258 addTargetClasses: false
259 });
260
261 Util.reflow(tip);
262 this._tether.position();
263
264 $(tip).addClass(ClassName.SHOW);
265
266 var complete = function complete() {
267 var prevHoverState = _this._hoverState;
268 _this._hoverState = null;
269 _this._isTransitioning = false;
270
271 $(_this.element).trigger(_this.constructor.Event.SHOWN);
272
273 if (prevHoverState === HoverState.OUT) {
274 _this._leave(null, _this);
275 }
276 };
277
278 if (Util.supportsTransitionEnd() && $(this.tip).hasClass(ClassName.FADE)) {
279 this._isTransitioning = true;
280 $(this.tip).one(Util.TRANSITION_END, complete).emulateTransitionEnd(Tooltip._TRANSITION_DURATION);
281 return;
282 }
283
284 complete();
285 }
286 };
287
288 Tooltip.prototype.hide = function hide(callback) {
289 var _this2 = this;
290
291 var tip = this.getTipElement();
292 var hideEvent = $.Event(this.constructor.Event.HIDE);
293 if (this._isTransitioning) {
294 throw new Error('Tooltip is transitioning');
295 }
296 var complete = function complete() {
297 if (_this2._hoverState !== HoverState.SHOW && tip.parentNode) {
298 tip.parentNode.removeChild(tip);
299 }
300
301 _this2.element.removeAttribute('aria-describedby');
302 $(_this2.element).trigger(_this2.constructor.Event.HIDDEN);
303 _this2._isTransitioning = false;
304 _this2.cleanupTether();
305
306 if (callback) {
307 callback();
308 }
309 };
310
311 $(this.element).trigger(hideEvent);
312
313 if (hideEvent.isDefaultPrevented()) {
314 return;
315 }
316
317 $(tip).removeClass(ClassName.SHOW);
318
319 this._activeTrigger[Trigger.CLICK] = false;
320 this._activeTrigger[Trigger.FOCUS] = false;
321 this._activeTrigger[Trigger.HOVER] = false;
322
323 if (Util.supportsTransitionEnd() && $(this.tip).hasClass(ClassName.FADE)) {
324 this._isTransitioning = true;
325 $(tip).one(Util.TRANSITION_END, complete).emulateTransitionEnd(TRANSITION_DURATION);
326 } else {
327 complete();
328 }
329
330 this._hoverState = '';
331 };
332
333 // protected
334
335 Tooltip.prototype.isWithContent = function isWithContent() {
336 return Boolean(this.getTitle());
337 };
338
339 Tooltip.prototype.getTipElement = function getTipElement() {
340 return this.tip = this.tip || $(this.config.template)[0];
341 };
342
343 Tooltip.prototype.setContent = function setContent() {
344 var $tip = $(this.getTipElement());
345
346 this.setElementContent($tip.find(Selector.TOOLTIP_INNER), this.getTitle());
347
348 $tip.removeClass(ClassName.FADE + ' ' + ClassName.SHOW);
349
350 this.cleanupTether();
351 };
352
353 Tooltip.prototype.setElementContent = function setElementContent($element, content) {
354 var html = this.config.html;
355 if ((typeof content === 'undefined' ? 'undefined' : _typeof(content)) === 'object' && (content.nodeType || content.jquery)) {
356 // content is a DOM node or a jQuery
357 if (html) {
358 if (!$(content).parent().is($element)) {
359 $element.empty().append(content);
360 }
361 } else {
362 $element.text($(content).text());
363 }
364 } else {
365 $element[html ? 'html' : 'text'](content);
366 }
367 };
368
369 Tooltip.prototype.getTitle = function getTitle() {
370 var title = this.element.getAttribute('data-original-title');
371
372 if (!title) {
373 title = typeof this.config.title === 'function' ? this.config.title.call(this.element) : this.config.title;
374 }
375
376 return title;
377 };
378
379 Tooltip.prototype.cleanupTether = function cleanupTether() {
380 if (this._tether) {
381 this._tether.destroy();
382 }
383 };
384
385 // private
386
387 Tooltip.prototype._getAttachment = function _getAttachment(placement) {
388 return AttachmentMap[placement.toUpperCase()];
389 };
390
391 Tooltip.prototype._setListeners = function _setListeners() {
392 var _this3 = this;
393
394 var triggers = this.config.trigger.split(' ');
395
396 triggers.forEach(function (trigger) {
397 if (trigger === 'click') {
398 $(_this3.element).on(_this3.constructor.Event.CLICK, _this3.config.selector, function (event) {
399 return _this3.toggle(event);
400 });
401 } else if (trigger !== Trigger.MANUAL) {
402 var eventIn = trigger === Trigger.HOVER ? _this3.constructor.Event.MOUSEENTER : _this3.constructor.Event.FOCUSIN;
403 var eventOut = trigger === Trigger.HOVER ? _this3.constructor.Event.MOUSELEAVE : _this3.constructor.Event.FOCUSOUT;
404
405 $(_this3.element).on(eventIn, _this3.config.selector, function (event) {
406 return _this3._enter(event);
407 }).on(eventOut, _this3.config.selector, function (event) {
408 return _this3._leave(event);
409 });
410 }
411
412 $(_this3.element).closest('.modal').on('hide.bs.modal', function () {
413 return _this3.hide();
414 });
415 });
416
417 if (this.config.selector) {
418 this.config = $.extend({}, this.config, {
419 trigger: 'manual',
420 selector: ''
421 });
422 } else {
423 this._fixTitle();
424 }
425 };
426
427 Tooltip.prototype._fixTitle = function _fixTitle() {
428 var titleType = _typeof(this.element.getAttribute('data-original-title'));
429 if (this.element.getAttribute('title') || titleType !== 'string') {
430 this.element.setAttribute('data-original-title', this.element.getAttribute('title') || '');
431 this.element.setAttribute('title', '');
432 }
433 };
434
435 Tooltip.prototype._enter = function _enter(event, context) {
436 var dataKey = this.constructor.DATA_KEY;
437
438 context = context || $(event.currentTarget).data(dataKey);
439
440 if (!context) {
441 context = new this.constructor(event.currentTarget, this._getDelegateConfig());
442 $(event.currentTarget).data(dataKey, context);
443 }
444
445 if (event) {
446 context._activeTrigger[event.type === 'focusin' ? Trigger.FOCUS : Trigger.HOVER] = true;
447 }
448
449 if ($(context.getTipElement()).hasClass(ClassName.SHOW) || context._hoverState === HoverState.SHOW) {
450 context._hoverState = HoverState.SHOW;
451 return;
452 }
453
454 clearTimeout(context._timeout);
455
456 context._hoverState = HoverState.SHOW;
457
458 if (!context.config.delay || !context.config.delay.show) {
459 context.show();
460 return;
461 }
462
463 context._timeout = setTimeout(function () {
464 if (context._hoverState === HoverState.SHOW) {
465 context.show();
466 }
467 }, context.config.delay.show);
468 };
469
470 Tooltip.prototype._leave = function _leave(event, context) {
471 var dataKey = this.constructor.DATA_KEY;
472
473 context = context || $(event.currentTarget).data(dataKey);
474
475 if (!context) {
476 context = new this.constructor(event.currentTarget, this._getDelegateConfig());
477 $(event.currentTarget).data(dataKey, context);
478 }
479
480 if (event) {
481 context._activeTrigger[event.type === 'focusout' ? Trigger.FOCUS : Trigger.HOVER] = false;
482 }
483
484 if (context._isWithActiveTrigger()) {
485 return;
486 }
487
488 clearTimeout(context._timeout);
489
490 context._hoverState = HoverState.OUT;
491
492 if (!context.config.delay || !context.config.delay.hide) {
493 context.hide();
494 return;
495 }
496
497 context._timeout = setTimeout(function () {
498 if (context._hoverState === HoverState.OUT) {
499 context.hide();
500 }
501 }, context.config.delay.hide);
502 };
503
504 Tooltip.prototype._isWithActiveTrigger = function _isWithActiveTrigger() {
505 for (var trigger in this._activeTrigger) {
506 if (this._activeTrigger[trigger]) {
507 return true;
508 }
509 }
510
511 return false;
512 };
513
514 Tooltip.prototype._getConfig = function _getConfig(config) {
515 config = $.extend({}, this.constructor.Default, $(this.element).data(), config);
516
517 if (config.delay && typeof config.delay === 'number') {
518 config.delay = {
519 show: config.delay,
520 hide: config.delay
521 };
522 }
523
524 Util.typeCheckConfig(NAME, config, this.constructor.DefaultType);
525
526 return config;
527 };
528
529 Tooltip.prototype._getDelegateConfig = function _getDelegateConfig() {
530 var config = {};
531
532 if (this.config) {
533 for (var key in this.config) {
534 if (this.constructor.Default[key] !== this.config[key]) {
535 config[key] = this.config[key];
536 }
537 }
538 }
539
540 return config;
541 };
542
543 // static
544
545 Tooltip._jQueryInterface = function _jQueryInterface(config) {
546 return this.each(function () {
547 var data = $(this).data(DATA_KEY);
548 var _config = (typeof config === 'undefined' ? 'undefined' : _typeof(config)) === 'object' && config;
549
550 if (!data && /dispose|hide/.test(config)) {
551 return;
552 }
553
554 if (!data) {
555 data = new Tooltip(this, _config);
556 $(this).data(DATA_KEY, data);
557 }
558
559 if (typeof config === 'string') {
560 if (data[config] === undefined) {
561 throw new Error('No method named "' + config + '"');
562 }
563 data[config]();
564 }
565 });
566 };
567
568 _createClass(Tooltip, null, [{
569 key: 'VERSION',
570 get: function get() {
571 return VERSION;
572 }
573 }, {
574 key: 'Default',
575 get: function get() {
576 return Default;
577 }
578 }, {
579 key: 'NAME',
580 get: function get() {
581 return NAME;
582 }
583 }, {
584 key: 'DATA_KEY',
585 get: function get() {
586 return DATA_KEY;
587 }
588 }, {
589 key: 'Event',
590 get: function get() {
591 return Event;
592 }
593 }, {
594 key: 'EVENT_KEY',
595 get: function get() {
596 return EVENT_KEY;
597 }
598 }, {
599 key: 'DefaultType',
600 get: function get() {
601 return DefaultType;
602 }
603 }]);
604
605 return Tooltip;
606 }();
607
608 /**
609 * ------------------------------------------------------------------------
610 * jQuery
611 * ------------------------------------------------------------------------
612 */
613
614 $.fn[NAME] = Tooltip._jQueryInterface;
615 $.fn[NAME].Constructor = Tooltip;
616 $.fn[NAME].noConflict = function () {
617 $.fn[NAME] = JQUERY_NO_CONFLICT;
618 return Tooltip._jQueryInterface;
619 };
620
621 return Tooltip;
622}(jQuery); /* global Tether */
623//# sourceMappingURL=tooltip.js.map