@froalacharts/features/src/tooltip-controller/tooltip-component.js

Froala Charts - A collection of interactive charts to build data visualizations for web and mobile applications.

"use strict";exports.__esModule=true;exports["default"]=void 0;var _lib=require("@froalacharts/core/src/lib");var FC_TOOLTIP_CLASS="fc__tooltip",GUTTER_12=12,ZERO=0,TOOLTIP_ELEMENT_CONFIG={className:"froalacharts-div",fontColor:"#545454",padding:"3px",fontSize:"10px",overflow:"hidden",borderWidth:"1px",borderColor:"#000000",whiteSpace:"nowrap",whiteSpaceNormal:"normal",position:"absolute",borderStyle:"solid",backgroundColor:"#ffffff",userSelect:"none",visibility:"hidden",pointerEvents:"none",boxShadow:"1px 1px 3px rgba(64,64,64,0.4)",boxShadowNone:"none",willChange:"left, top",willChangeAuto:"auto"};var _getContainerBounds=function _getContainerBounds(container){var containerBounds=container.getBoundingClientRect();return{left:0,top:0,right:containerBounds.width||containerBounds.right-containerBounds.left,bottom:containerBounds.height||containerBounds.bottom-containerBounds.top}};var ToolTip=function(){function ToolTip(universe,relativeBounds){var tooltip=this;tooltip.text=_lib.BLANKSTRING;tooltip.x=0;tooltip.y=0;tooltip.visibleWidth=0;tooltip.universe=universe;tooltip.setUniverseBounds(relativeBounds||_getContainerBounds(universe));tooltip.data={active:false,target:false};tooltip.createElement(universe);tooltip.previousStyle={};tooltip.restrictWithinCanvas={left:false,right:false,top:false,bottom:false}}var _proto=ToolTip.prototype;_proto.setUniverseBounds=function setUniverseBounds(universeBounds){this.universeBounds=universeBounds||this.universe&&_getContainerBounds(this.universe)};_proto.setRestrictionWithinCanvas=function setRestrictionWithinCanvas(obj){if(obj===void 0){obj={}}Object.assign(this.restrictWithinCanvas,obj)};_proto.getRestrictionWithinCanvas=function getRestrictionWithinCanvas(){return this.restrictWithinCanvas};_proto.createElement=function createElement(universe){var div=this.element=document.createElement("div");div.setAttribute("class",FC_TOOLTIP_CLASS);div.className+=" "+TOOLTIP_ELEMENT_CONFIG.className;div.innerHTML=this.text;universe.appendChild(this.setDefaultStyle());return div};_proto.setDefaultStyle=function setDefaultStyle(){var div=this.element;div.setAttribute("style","");div.style.color=TOOLTIP_ELEMENT_CONFIG.fontColor;div.style.padding=TOOLTIP_ELEMENT_CONFIG.padding;div.style.fontSize=TOOLTIP_ELEMENT_CONFIG.fontSize;div.style.overflow=TOOLTIP_ELEMENT_CONFIG.overflow;div.style.borderWidth=TOOLTIP_ELEMENT_CONFIG.borderWidth;div.style.borderColor=TOOLTIP_ELEMENT_CONFIG.borderColor;div.style.whiteSpace=TOOLTIP_ELEMENT_CONFIG.whiteSpace;div.style.position=TOOLTIP_ELEMENT_CONFIG.position;div.style.borderStyle=TOOLTIP_ELEMENT_CONFIG.borderStyle;div.style.backgroundColor=TOOLTIP_ELEMENT_CONFIG.backgroundColor;div.style["user-select"]=TOOLTIP_ELEMENT_CONFIG.userSelect;div.style["-ms-user-select"]=TOOLTIP_ELEMENT_CONFIG.userSelect;div.style["-moz-user-select"]=TOOLTIP_ELEMENT_CONFIG.userSelect;div.style["-webkit-user-select"]=TOOLTIP_ELEMENT_CONFIG.userSelect;div.style["-webkit-touch-callout"]=TOOLTIP_ELEMENT_CONFIG.userSelect;div.style.top=this.x+"px";div.style.left=this.y+"px";div.style.visibility=TOOLTIP_ELEMENT_CONFIG.visibility;div.style["pointer-events"]=TOOLTIP_ELEMENT_CONFIG.pointerEvents;return div};_proto.setData=function setData(key,val){this.data[key]=val};_proto.getData=function getData(key){return this.data[key]};_proto.setStyle=function setStyle(styleObj){var style=this.element.style,key;this.setDefaultStyle();for(key in styleObj){style[key]=styleObj[key]}};_proto.show=function show(text){if(this.text!==text){this.text=text;this.element.innerHTML=this.text}this.setData("active",true);this.element.style.visibility!=="visible"&&(this.element.style.visibility="visible");this.element.style["will-change"]=TOOLTIP_ELEMENT_CONFIG.willChange;this.element.style["max-width"]=this.universeBounds.right-this.universeBounds.left-GUTTER_12+"px"};_proto.update=function update(x,y){if(x===void 0){x=this.x}if(y===void 0){y=this.y}var universeBounds=this.universeBounds,universeBottom=(this.restrictWithinCanvas.bottom?universeBounds.bottom:this.universe.clientHeight)-GUTTER_12,universeRight=(this.restrictWithinCanvas.right?universeBounds.right:this.universe.clientWidth)-GUTTER_12,universeLeft=(this.restrictWithinCanvas.left?universeBounds.left:ZERO)+GUTTER_12,element=this.element,offsetWidth=element.offsetWidth,offsetHeight=element.offsetHeight,style=element.style;if(x+offsetWidth<universeRight){style.left=x+"px";style.whiteSpace=TOOLTIP_ELEMENT_CONFIG.whiteSpace}else if(offsetWidth<universeRight){if(x-offsetWidth>=universeLeft){style.left=x-offsetWidth-GUTTER_12+"px"}else{style.left=universeRight-offsetWidth+"px";style.whiteSpace=TOOLTIP_ELEMENT_CONFIG.whiteSpaceNormal}}else{style.left=universeBounds.left+"px";style.whiteSpace=TOOLTIP_ELEMENT_CONFIG.whiteSpaceNormal}if(y+offsetHeight<universeBottom){style.top=y+"px"}else if(offsetHeight<universeBottom&&y-offsetHeight<=universeBottom){style.top=y-offsetHeight+"px"}else{style.top=universeBottom-offsetHeight+"px"}};_proto.hide=function hide(){this.y=0;this.x=0;this.x=_lib.BLANKSTRING;this.setData("active",false);this.setData("target",false);this.element.style.visibility=TOOLTIP_ELEMENT_CONFIG.visibility;this.element.style["will-change"]=TOOLTIP_ELEMENT_CONFIG.willChangeAuto;this.element.innerHTML=_lib.BLANKSTRING;this.text=_lib.UNDEF};_proto.dispose=function dispose(){this.hide();this.universe.removeChild(this.element);this.universe=_lib.UNDEF;this.disposed=true};return ToolTip}();var _default=ToolTip;exports["default"]=_default;