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

FusionCharts JavaScript charting framework

"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule=true;exports.default=void 0;var _lib=require("@fusioncharts/core/src/lib");var _trustedPolicy=_interopRequireDefault(require("@fusioncharts/utils/src/trusted-policy"));var _dompurify=_interopRequireDefault(require("dompurify"));var FC_TOOLTIP_CLASS="fc__tooltip",GUTTER_12=12,ZERO=0,TOOLTIP_ELEMENT_CONFIG={className:"fusioncharts-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=_trustedPolicy.default.createHTML(this.text);universe.appendChild(this.setDefaultStyle());return div};_proto.setDefaultStyle=function setDefaultStyle(){var div=this.element;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){var htmlReplacementMap={"&lt;":"<","&gt;":">","&quot;":'"',"&#034;":'"',"&#039;":"'"};var ltgtquotRegex=/&lt;|&gt;|&quot;|&#034;|&#039;/g,tmpText=text.replace(ltgtquotRegex,(function(match){return htmlReplacementMap[match]})),sanitizedText=_dompurify.default.sanitize(tmpText);if(this.text!==text){this.text=text;this.element.innerHTML=_trustedPolicy.default.createHTML(sanitizedText)}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,tooltipPosition){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,universeTop=(this.restrictWithinCanvas.top?universeBounds.top:ZERO)+GUTTER_12,element=this.element,offsetWidth=element.offsetWidth,offsetHeight=element.offsetHeight,style=element.style,isBelowCanvas=y-(offsetHeight+10)>universeTop,isAboveCanvas=y+offsetHeight<universeBottom;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(tooltipPosition==="top"&&isBelowCanvas){style.top=y-(offsetHeight+10)+"px"}else if(tooltipPosition==="bottom"&&isAboveCanvas){style.top=y+"px"}else{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=_trustedPolicy.default.createHTML(_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=exports.default=ToolTip;