orient.js

  1. /** 
  2.  * @module orient
  3.  * @desc The orient module provides functions to determine the optimum orientation of a tooltip
  4.  * if auto-sizing is set to true, and to set the proper CSS values for the tooltip's div elements. 
  5.  */
  7. import {ttDiv, beforeRule, afterRule} from './init.js';
  8. import {windowHeight, windowWidth, getElementCoordinates, overlap, parseSize} from './utils.js';
  10. /**
  11.  * @function position
  12.  * @desc Sets the position of the tooltip relative to the HTML element with which it is associated.
  13.  * @param {string} targetElement The unique id of the HTML element that owns the tooltip.
  14.  * @param {Tip} target The object containing all of the current tooltip's options and content.
  15.  */
  16. export function position (targetElement, target, orientation) {
  17.     
  18.     const targetCoordinates = getElementCoordinates(targetElement);
  19.     const divWidth = ttDiv.getBoundingClientRect()['width'];
  20.     const divHeight = ttDiv.getBoundingClientRect()['height'];
  21.     const halfDivHeight = divHeight / 2;
  22.     const halfDivWidth = divWidth / 2;
  23.     const borderRadius = parseSize(target.borderRadius(), 'width', ttDiv);
  24.     const arrowSize = parseSize(target.arrowSize(), 'width', ttDiv);
  26.     afterRule.borderWidth = arrowSize + 'px';
  28.     let top;
  29.     let left;
  30.     let verticalAdjust;
  31.     let horizontalAdjust;
  32.     let sizeAdjust;
  34.     let adjustVertical = function (top) {
  35.         let topAdjust = top;
  36.         let arrowAdjust = halfDivHeight;
  38.         if (top < 0) { 
  39.             topAdjust = 0;
  40.             arrowAdjust = Math.max(arrowSize + borderRadius, top + halfDivHeight);
  41.         } else if (top + divHeight > windowHeight) {
  42.             topAdjust = windowHeight - divHeight;
  43.             arrowAdjust = Math.min(divHeight - borderRadius - arrowSize, halfDivHeight +  top - topAdjust);
  44.         };
  46.         return {topAdjust: Math.round(topAdjust), arrowAdjust: Math.round(arrowAdjust)};
  47.     }
  49.     let adjustHorizontal = function (left) {
  50.         let leftAdjust = left;
  51.         let arrowAdjust = halfDivWidth;
  53.         if (left < 0) { 
  54.             leftAdjust = 0;
  55.             arrowAdjust = Math.max(arrowSize + borderRadius, left + halfDivWidth);
  56.         } else if (left + divWidth > windowWidth) {
  57.             leftAdjust = windowWidth - divWidth;
  58.             arrowAdjust = Math.min(divWidth - borderRadius - arrowSize, halfDivWidth + left - leftAdjust);
  59.         };
  61.         return {leftAdjust: Math.round(leftAdjust), arrowAdjust: Math.round(arrowAdjust)};
  62.     }
  64.     switch (orientation) {
  65.         case 'top': {
  66.             top = targetCoordinates.top - arrowSize - divHeight;
  67.             if (top < 0) {
  68.                 beforeRule.height = Math.round(divHeight + top) + 'px';
  69.                 top = 0;
  70.             };
  71.             left = (targetCoordinates.width / 2) + targetCoordinates.left - halfDivWidth;
  72.             horizontalAdjust = adjustHorizontal(left);
  74.             beforeRule.top = Math.round(top) + 'px';
  75.             beforeRule.left = horizontalAdjust.leftAdjust + 'px';
  77.             afterRule.top = '99.5%';    //  '100%';
  78.             afterRule.left = horizontalAdjust.arrowAdjust + 'px';
  79.             afterRule.bottom = '';
  80.             afterRule.right = '';   
  81.             afterRule.marginLeft = -arrowSize + 'px';
  82.             afterRule.marginTop = '';
  83.             afterRule.borderColor = target.backgroundColor() + ' transparent transparent transparent';
  84.             break;
  85.         };
  86.         case 'bottom': {
  87.             top = targetCoordinates.top + targetCoordinates.height + arrowSize;
  88.             sizeAdjust = windowHeight - divHeight + top + arrowSize;
  89.             beforeRule.height = (sizeAdjust < 0) ? (divHeight + sizeAdjust) + 'px' : beforeRule.height;
  90.             left = (targetCoordinates.width / 2) + targetCoordinates.left - halfDivWidth;
  91.             horizontalAdjust = adjustHorizontal(left);
  92.             
  93.             beforeRule.top = Math.round(top) + 'px'; 
  94.             beforeRule.left = horizontalAdjust.leftAdjust + 'px'; 
  96.             afterRule.top = '';
  97.             afterRule.left = horizontalAdjust.arrowAdjust + 'px';
  98.             afterRule.bottom = '99.5%'; //'100%';
  99.             afterRule.right = '';
  100.             afterRule.marginLeft = -arrowSize + 'px';
  101.             afterRule.marginTop = '';
  102.             afterRule.borderColor = 'transparent transparent ' + target.backgroundColor() + ' transparent';
  103.             break;
  104.         };
  105.         case 'left': {
  106.             top =  (targetCoordinates.height / 2) + targetCoordinates.top - halfDivHeight;
  107.             left =  targetCoordinates.left - divWidth - arrowSize;
  108.             if (left < 0) {
  109.                 beforeRule.width = Math.round(divWidth + left) + 'px';
  110.                 left = 0;
  111.             };
  112.             verticalAdjust = adjustVertical(top);
  113.             
  114.             beforeRule.top = verticalAdjust.topAdjust + 'px';
  115.             beforeRule.left = Math.round(left) + 'px';
  117.             afterRule.top = verticalAdjust.arrowAdjust + 'px';
  118.             afterRule.left = '99.5%';   //'100%';
  119.             afterRule.bottom = '';
  120.             afterRule.right = '';
  121.             afterRule.marginLeft = '';
  122.             afterRule.marginTop = -arrowSize + 'px';
  123.             afterRule.borderColor = 'transparent transparent transparent ' + target.backgroundColor();
  124.             break;
  125.         };
  126.         case 'right': {
  127.             top = (targetCoordinates.height / 2) + targetCoordinates.top - halfDivHeight;
  128.             left = targetCoordinates.left + targetCoordinates.width + arrowSize;
  129.             sizeAdjust = windowWidth - divWidth + left + arrowSize;
  130.             beforeRule.width = (sizeAdjust < 0) ? (divWidth + sizeAdjust) + 'px' : beforeRule.width;
  131.             verticalAdjust = adjustVertical(top);
  132.             
  133.             beforeRule.top = verticalAdjust.topAdjust + 'px'; 
  134.             beforeRule.left = Math.round(left) + 'px';
  136.             afterRule.top = verticalAdjust.arrowAdjust + 'px';
  137.             afterRule.left = '';
  138.             afterRule.bottom = '';
  139.             afterRule.right = '99.5%';  //'100%';
  140.             afterRule.marginLeft = '';
  141.             afterRule.marginTop = -arrowSize + 'px';
  142.             afterRule.borderColor = 'transparent ' + target.backgroundColor() + ' transparent transparent';
  143.             break;
  144.         };
  145.     };
  146. }
  148. /**
  149.  * @function optimumOrientation
  150.  * @desc  Determines the best side upon which to place the tooltip.
  151.  * If [auto-positioning]{@link Tip#autoPosition} is on, the
  152.  * [preferred-orientation]{@link Tip#prefferedOrientation}
  153.  * setting will be honored unless there is insufficient viewport space.
  154.  * in this case, the position with the most available space will be used.
  155.  * @param {string} targetElement The DOM element that is associated with the tooltip.
  156.  * @param {Tip} target The [Tip]{@link Tip} class object containing all of the current tooltip's options and content.
  157.  * @returns {string} One of ['left' | 'right' | 'top' | 'bottom'].
  158.  * @since v2.2.0
  159.  */
  161. export function optimumOrientation (targetElement, target) {
  163.     const elementCoordinates = getElementCoordinates(targetElement);
  164.     const arrowSize = parseSize(target.arrowSize(), 'width', ttDiv);
  166.     const midX = elementCoordinates.left + (elementCoordinates.width / 2);
  167.     const midY = elementCoordinates.top + (elementCoordinates.height / 2);
  169.     const divWidth = ttDiv.getBoundingClientRect()['width'];
  170.     const divHeight = ttDiv.getBoundingClientRect()['height'];
  171.     const halfDivHeight = divHeight / 2;
  172.     const halfDivWidth = divWidth / 2;
  174.     const leftOverlap = overlap ('left',
  175.         {
  176.             x0: elementCoordinates.left - arrowSize - divWidth,
  177.             x1: elementCoordinates.left - arrowSize,
  178.             y0: midY - halfDivHeight,
  179.             y1: midY + halfDivHeight
  180.         });
  181.     const rightOverlap = overlap ('right',
  182.         {
  183.             x0: elementCoordinates.left + elementCoordinates.width + arrowSize,
  184.             x1: elementCoordinates.left + elementCoordinates.width + arrowSize + divWidth, 
  185.             y0: midY - halfDivHeight,
  186.             y1: midY + halfDivHeight
  187.         });
  188.     const topOverlap = overlap ('top',
  189.         {
  190.             x0: midX - halfDivWidth,
  191.             x1: midX + halfDivWidth,
  192.             y0: elementCoordinates.top - arrowSize - divHeight, 
  193.             y1: elementCoordinates.top - arrowSize
  194.         });
  195.     const bottomOverlap = overlap ('bottom',
  196.         {
  197.             x0: midX - halfDivWidth,
  198.             x1: midX + halfDivWidth,
  199.             y0: elementCoordinates.top + elementCoordinates.height + arrowSize,
  200.             y1: elementCoordinates.top + elementCoordinates.height + arrowSize + divHeight
  201.         });
  203.     switch (target.preferredOrientation()) {
  204.         case 'left': { if (leftOverlap.overlap == 1) return 'left'; break; };
  205.         case 'right': { if (rightOverlap.overlap == 1) return 'right'; break; };
  206.         case 'top': { if (topOverlap.overlap == 1) return 'top'; break; };
  207.         case 'bottom': { if (bottomOverlap.overlap == 1) return 'bottom'; break; };
  208.     };
  210.     // if there is no preferred orientation or all overlaps are less than 1
  211.     let overlaps = [leftOverlap, rightOverlap, topOverlap, bottomOverlap];
  213.     //if all of the overlaps are less than 1 return the greatest
  214.     if (leftOverlap.overlap < 1 && rightOverlap.overlap < 1 && topOverlap.overlap < 1 && bottomOverlap.overlap < 1) {
  215.         return overlaps[overlaps.reduce((prev, current, index, array) => {
  216.             if (current.overlap > array[prev].overlap) {return index} else {return prev};
  217.         }, 0)].side;
  218.     };
  220.     // remove all overlaps that are less than 1
  221.     overlaps = overlaps.reduce((prev, current) => {
  222.         if (current.overlap == 1) {return prev.concat(current)} else {return prev};
  223.     }, []);
  225.     if (overlaps.length == 1) { return overlaps[0].side; }; // only one left;
  227.     return overlaps[overlaps.reduce((prev, current, index, array) => {
  228.         if (current.spacing[current.side] >= array[prev].spacing[prev.side]) {return index} else { return prev} ;
  229.     }, 0)].side;
  230. }
  232. /**
  233.  * @function getOrientation
  234.  * @desc Selects the appropriate orientation by deconflicting [auto-positioning]{@link Tip#autoPosition},
  235.  * [prefererd-orientation]{@link Tip#preferredOrientation, and [orientation]{@link Tip#orientation}
  236.  * settings in the Tip{} class object.
  237.  * @param {string} targetElement The DOM element that is associated with the tooltip.
  238.  * @param {Tip} target The [Tip]{@link Tip} class object containing all of the current tooltip's options and content.
  239.  * @returns {string} One of ['left' | 'right' | 'top' | 'bottom'].
  240.  * @since v2.1.2
  241.  */
  242. export function getOrientation (targetElement, target) {
  243.     if (target.orientation() != undefined) return target.orientation();
  244.     if (target.autoPosition()) return optimumOrientation (targetElement, target);
  245.     if (target.preferredOrientation() != 'none') return target.preferredOrientation();
  246.     return 'right';
  247. }