https://s.lexicography.online/js/tooltip-native.esm.js

1/*!
2  * Native JavaScript for Bootstrap Tooltip v3.0.13 (https://thednp.github.io/bootstrap.native/)
3  * Copyright 2015-2020 © dnp_theme
4  * Licensed under MIT (https://github.com/thednp/bootstrap.native/blob/master/LICENSE)
5  */
6var mouseHoverEvents = ('onmouseleave' in document) ? [ 'mouseenter', 'mouseleave'] : [ 'mouseover', 'mouseout' ];
7
8var mouseClickEvents = { down: 'mousedown', up: 'mouseup' };
9
10var supportPassive = (function () {
11  var result = false;
12  try {
13    var opts = Object.defineProperty({}, 'passive', {
14      get: function() {
15        result = true;
16      }
17    });
18    document.addEventListener('DOMContentLoaded', function wrap(){
19      document.removeEventListener('DOMContentLoaded', wrap, opts);
20    }, opts);
21  } catch (e) {}
22  return result;
23})();
24
25var passiveHandler = supportPassive ? { passive: true } : false;
26
27var transitionEndEvent = 'webkitTransition' in document.head.style ? 'webkitTransitionEnd' : 'transitionend';
28
29var supportTransition = 'webkitTransition' in document.head.style || 'transition' in document.head.style;
30
31var transitionDuration = 'webkitTransition' in document.head.style ? 'webkitTransitionDuration' : 'transitionDuration';
32
33var transitionProperty = 'webkitTransition' in document.head.style ? 'webkitTransitionProperty' : 'transitionProperty';
34
35function getElementTransitionDuration(element) {
36  var computedStyle = getComputedStyle(element),
37      property = computedStyle[transitionProperty],
38      duration = supportTransition && property && property !== 'none'
39               ? parseFloat(computedStyle[transitionDuration]) : 0;
40  return !isNaN(duration) ? duration * 1000 : 0;
41}
42
43function emulateTransitionEnd(element,handler){
44  var called = 0, duration = getElementTransitionDuration(element);
45  duration ? element.addEventListener( transitionEndEvent, function transitionEndWrapper(e){
46              !called && handler(e), called = 1;
47              element.removeEventListener( transitionEndEvent, transitionEndWrapper);
48            })
49           : setTimeout(function() { !called && handler(), called = 1; }, 17);
50}
51
52function queryElement(selector, parent) {
53  var lookUp = parent && parent instanceof Element ? parent : document;
54  return selector instanceof Element ? selector : lookUp.querySelector(selector);
55}
56
57function bootstrapCustomEvent(eventName, componentName, related) {
58  var OriginalCustomEvent = new CustomEvent( eventName + '.bs.' + componentName, {cancelable: true});
59  OriginalCustomEvent.relatedTarget = related;
60  return OriginalCustomEvent;
61}
62
63function dispatchCustomEvent(customEvent){
64  this && this.dispatchEvent(customEvent);
65}
66
67function getScroll() {
68  return {
69    y : window.pageYOffset || document.documentElement.scrollTop,
70    x : window.pageXOffset || document.documentElement.scrollLeft
71  }
72}
73
74function styleTip(link,element,position,parent) {
75  var tipPositions = /\b(top|bottom|left|right)+/,
76      elementDimensions = { w : element.offsetWidth, h: element.offsetHeight },
77      windowWidth = (document.documentElement.clientWidth || document.body.clientWidth),
78      windowHeight = (document.documentElement.clientHeight || document.body.clientHeight),
79      rect = link.getBoundingClientRect(),
80      scroll = parent === document.body ? getScroll() : { x: parent.offsetLeft + parent.scrollLeft, y: parent.offsetTop + parent.scrollTop },
81      linkDimensions = { w: rect.right - rect.left, h: rect.bottom - rect.top },
82      isPopover = element.classList.contains('popover'),
83      arrow = element.getElementsByClassName('arrow')[0],
84      halfTopExceed = rect.top + linkDimensions.h/2 - elementDimensions.h/2 < 0,
85      halfLeftExceed = rect.left + linkDimensions.w/2 - elementDimensions.w/2 < 0,
86      halfRightExceed = rect.left + elementDimensions.w/2 + linkDimensions.w/2 >= windowWidth,
87      halfBottomExceed = rect.top + elementDimensions.h/2 + linkDimensions.h/2 >= windowHeight,
88      topExceed = rect.top - elementDimensions.h < 0,
89      leftExceed = rect.left - elementDimensions.w < 0,
90      bottomExceed = rect.top + elementDimensions.h + linkDimensions.h >= windowHeight,
91      rightExceed = rect.left + elementDimensions.w + linkDimensions.w >= windowWidth;
92  position = (position === 'left' || position === 'right') && leftExceed && rightExceed ? 'top' : position;
93  position = position === 'top' && topExceed ? 'bottom' : position;
94  position = position === 'bottom' && bottomExceed ? 'top' : position;
95  position = position === 'left' && leftExceed ? 'right' : position;
96  position = position === 'right' && rightExceed ? 'left' : position;
97  var topPosition,
98    leftPosition,
99    arrowTop,
100    arrowLeft,
101    arrowWidth,
102    arrowHeight;
103  element.className.indexOf(position) === -1 && (element.className = element.className.replace(tipPositions,position));
104  arrowWidth = arrow.offsetWidth; arrowHeight = arrow.offsetHeight;
105  if ( position === 'left' || position === 'right' ) {
106    if ( position === 'left' ) {
107      leftPosition = rect.left + scroll.x - elementDimensions.w - ( isPopover ? arrowWidth : 0 );
108    } else {
109      leftPosition = rect.left + scroll.x + linkDimensions.w;
110    }
111    if (halfTopExceed) {
112      topPosition = rect.top + scroll.y;
113      arrowTop = linkDimensions.h/2 - arrowWidth;
114    } else if (halfBottomExceed) {
115      topPosition = rect.top + scroll.y - elementDimensions.h + linkDimensions.h;
116      arrowTop = elementDimensions.h - linkDimensions.h/2 - arrowWidth;
117    } else {
118      topPosition = rect.top + scroll.y - elementDimensions.h/2 + linkDimensions.h/2;
119      arrowTop = elementDimensions.h/2 - (isPopover ? arrowHeight*0.9 : arrowHeight/2);
120    }
121  } else if ( position === 'top' || position === 'bottom' ) {
122    if ( position === 'top') {
123      topPosition =  rect.top + scroll.y - elementDimensions.h - ( isPopover ? arrowHeight : 0 );
124    } else {
125      topPosition = rect.top + scroll.y + linkDimensions.h;
126    }
127    if (halfLeftExceed) {
128      leftPosition = 0;
129      arrowLeft = rect.left + linkDimensions.w/2 - arrowWidth;
130    } else if (halfRightExceed) {
131      leftPosition = windowWidth - elementDimensions.w*1.01;
132      arrowLeft = elementDimensions.w - ( windowWidth - rect.left ) + linkDimensions.w/2 - arrowWidth/2;
133    } else {
134      leftPosition = rect.left + scroll.x - elementDimensions.w/2 + linkDimensions.w/2;
135      arrowLeft = elementDimensions.w/2 - ( isPopover ? arrowWidth : arrowWidth/2 );
136    }
137  }
138  element.style.top = topPosition + 'px';
139  element.style.left = leftPosition + 'px';
140  arrowTop && (arrow.style.top = arrowTop + 'px');
141  arrowLeft && (arrow.style.left = arrowLeft + 'px');
142}
143
144function Tooltip(element,options) {
145  options = options || {};
146  var self = this,
147      tooltip = null, timer = 0, titleString,
148      animationData,
149      placementData,
150      delayData,
151      containerData,
152      showCustomEvent,
153      shownCustomEvent,
154      hideCustomEvent,
155      hiddenCustomEvent,
156      containerElement,
157      containerDataElement,
158      modal,

159      navbarFixedTop,
160      navbarFixedBottom,
161      placementClass,
162      ops = {};
163  function getTitle() {
164    return element.getAttribute('title')
165        || element.getAttribute('data-title')
166        || element.getAttribute('data-original-title')
167  }
168  function removeToolTip() {
169    ops.container.removeChild(tooltip);
170    tooltip = null; timer = null;
171  }
172  function createToolTip() {
173    titleString = getTitle();
174    if ( titleString ) {
175      tooltip = document.createElement('div');
176      if (ops.template) {
177        var tooltipMarkup = document.createElement('div');
178        tooltipMarkup.innerHTML = ops.template.trim();
179        tooltip.className = tooltipMarkup.firstChild.className;
180        tooltip.innerHTML = tooltipMarkup.firstChild.innerHTML;
181        queryElement('.tooltip-inner',tooltip).innerHTML = titleString.trim();
182      } else {
183        var tooltipArrow = document.createElement('div');
184        tooltipArrow.classList.add('arrow');
185        tooltip.appendChild(tooltipArrow);
186        var tooltipInner = document.createElement('div');
187        tooltipInner.classList.add('tooltip-inner');
188        tooltip.appendChild(tooltipInner);
189        tooltipInner.innerHTML = titleString;
190      }
191      tooltip.style.left = '0';
192      tooltip.style.top = '0';
193      tooltip.setAttribute('role','tooltip');
194      !tooltip.classList.contains('tooltip') && tooltip.classList.add('tooltip');
195      !tooltip.classList.contains(ops.animation) && tooltip.classList.add(ops.animation);
196      !tooltip.classList.contains(placementClass) && tooltip.classList.add(placementClass);
197      ops.container.appendChild(tooltip);
198    }
199  }
200  function updateTooltip() {
201    styleTip(element, tooltip, ops.placement, ops.container);
202  }
203  function showTooltip() {
204    !tooltip.classList.contains('show') && ( tooltip.classList.add('show') );
205  }
206  function touchHandler(e){
207    if ( tooltip && tooltip.contains(e.target) || e.target === element || element.contains(e.target)) ; else {
208      self.hide();
209    }
210  }
211  function toggleAction(action){
212    action = action ? 'addEventListener' : 'removeEventListener';
213    document[action]( 'touchstart', touchHandler, passiveHandler );
214    window[action]( 'resize', self.hide, passiveHandler );
215  }
216  function showAction() {
217    toggleAction(1);
218    dispatchCustomEvent.call(element, shownCustomEvent);
219  }
220  function hideAction() {
221    toggleAction();
222    removeToolTip();
223    dispatchCustomEvent.call(element, hiddenCustomEvent);
224  }
225  function toggleEvents(action) {
226    action = action ? 'addEventListener' : 'removeEventListener';
227    element[action](mouseClickEvents.down, self.show,false);
228    element[action](mouseHoverEvents[0], self.show,false);
229    element[action](mouseHoverEvents[1], self.hide,false);
230  }
231  self.show = function () {
232    clearTimeout(timer);
233    timer = setTimeout( function () {
234      if (tooltip === null) {
235        dispatchCustomEvent.call(element, showCustomEvent);
236        if (showCustomEvent.defaultPrevented) { return; }
237        if(createToolTip() !== false) {
238          updateTooltip();
239          showTooltip();
240          !!ops.animation ? emulateTransitionEnd(tooltip, showAction) : showAction();
241        }
242      }
243    }, 20 );
244  };
245  self.hide = function () {
246    clearTimeout(timer);
247    timer = setTimeout( function () {
248      if (tooltip && tooltip.classList.contains('show')) {
249        dispatchCustomEvent.call(element, hideCustomEvent);
250        if (hideCustomEvent.defaultPrevented) { return; }
251        tooltip.classList.remove('show');
252        !!ops.animation ? emulateTransitionEnd(tooltip, hideAction) : hideAction();
253      }
254    }, ops.delay);
255  };
256  self.toggle = function () {
257    if (!tooltip) { self.show(); }
258    else { self.hide(); }
259  };
260  self.dispose = function () {
261    toggleEvents();
262    self.hide();
263    element.setAttribute('title', element.getAttribute('data-original-title'));
264    element.removeAttribute('data-original-title');
265    delete element.Tooltip;
266  };
267  element = queryElement(element);
268  element.Tooltip && element.Tooltip.dispose();
269  animationData = element.getAttribute('data-animation');
270  placementData = element.getAttribute('data-placement');
271  delayData = element.getAttribute('data-delay');
272  containerData = element.getAttribute('data-container');
273  showCustomEvent = bootstrapCustomEvent('show', 'tooltip');
274  shownCustomEvent = bootstrapCustomEvent('shown', 'tooltip');
275  hideCustomEvent = bootstrapCustomEvent('hide', 'tooltip');
276  hiddenCustomEvent = bootstrapCustomEvent('hidden', 'tooltip');
277  containerElement = queryElement(options.container);
278  containerDataElement = queryElement(containerData);
279  modal = element.closest('.modal');

280  navbarFixedTop = element.closest('.fixed-top');
281  navbarFixedBottom = element.closest('.fixed-bottom');
282  ops.animation = options.animation && options.animation !== 'fade' ? options.animation : animationData || 'fade';
283  ops.placement = options.placement ? options.placement : placementData || 'top';
284  ops.template = options.template ? options.template : null;
285  ops.delay = parseInt(options.delay || delayData) || 200;
286  ops.container = containerElement ? containerElement
287                          : containerDataElement ? containerDataElement
288                          : navbarFixedTop ? navbarFixedTop
289                          : navbarFixedBottom ? navbarFixedBottom
290                          : modal ? modal : document.body;
291  placementClass = "bs-tooltip-" + (ops.placement);
292  titleString = getTitle();
293  if ( !titleString ) { return; }
294  if (!element.Tooltip) {
295    element.setAttribute('data-original-title',titleString);
296    element.removeAttribute('title');
297    toggleEvents(1);
298  }
299  element.Tooltip = self;
300}
301
302export default Tooltip;