@fusioncharts/fusiontime/src/_internal/components/custom-range-selector/time-box.js

FusionCharts JavaScript time-series charting framework

"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule=true;exports.default=void 0;var _inheritsLoose2=_interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _componentInterface=require("@fusioncharts/core/src/component-interface");var _lib=require("@fusioncharts/core/src/lib");var _trustedPolicy=_interopRequireDefault(require("@fusioncharts/utils/src/trusted-policy"));var SEMICOLON=":",BLANK="",TIMEBOX_CONFIG_LABEL="Time: ",DEFAULT_PADDING=10,DEFAULT_INPUT_BOX_WIDTH=_lib.isIE11?38:32,ARROW_SVG='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4.95 10"><defs><style>.cls-2 {fill: #444;}</style></defs><polygon class="cls-2" points="1.41 4.67 2.48 3.18 3.54 4.67 1.41 4.67" /><polygon class="cls-2" points="3.54 5.33 2.48 6.82 1.41 5.33 3.54 5.33" /></svg>',SELECT_BG_IMAGE="url(data:image/svg+xml;base64,"+btoa(ARROW_SVG)+") no-repeat 100% 100%",formatDate=function formatDate(x){return(x<10?"0"+x:x)+""},getOptionsString=function getOptionsString(total,selected){if(selected===void 0){selected=-1}var i,text=BLANK;for(i=0;i<=total;i++){if(i===selected){text+='<option value="'+formatDate(i)+'" selected>'+formatDate(i)+"</option>"}else{text+='<option value="'+formatDate(i)+'">'+formatDate(i)+"</option>"}}return text},getMultiplier=function getMultiplier(fSize){if(fSize<21){return 2}else if(fSize<31){return 1.67}else if(fSize<51){return 1.5}return 1.25};var TimeBox=function(_SmartRenderer){function TimeBox(){return _SmartRenderer.apply(this,arguments)||this}(0,_inheritsLoose2.default)(TimeBox,_SmartRenderer);var _proto=TimeBox.prototype;_proto.__setDefaultConfig=function __setDefaultConfig(){var timeBoxConfig=this.config;timeBoxConfig.enabled=true;timeBoxConfig.label=TIMEBOX_CONFIG_LABEL;timeBoxConfig._labelStyle={"font-size":"12px","font-weight":"normal","font-style":"normal",color:"#5f5f5f"};timeBoxConfig._selectStyle={"font-size":"12px",border:"0",outline:"1px solid #efefef","outline-offset":"-1px",color:"#5f5f5f",width:DEFAULT_INPUT_BOX_WIDTH+_lib.PXSTRING,"padding-left":_lib.isIE11||_lib.isFirefox?"0px":"5px","padding-right":_lib.isIE11||_lib.isFirefox?"0px":"5px","padding-top":"5px","padding-bottom":"5px",background:SELECT_BG_IMAGE,"background-color":"#FFFFFF","-webkit-appearance":"none","-moz-appearance":"none","-o-appearance":"none","border-radius":"0px",appearance:"none"};if(_lib.isIE11){delete timeBoxConfig._selectStyle.background}};_proto.configureAttributes=function configureAttributes(inputConfig){if(inputConfig===void 0){inputConfig={}}var timeBox=this,config=timeBox.config,styleDef=timeBox.getFromEnv("getStyleDef"),baseTextStyle=timeBox.getFromEnv("baseTextStyle");Object.assign(config,inputConfig);config._finalLabelStyle=Object.assign({},config._labelStyle,baseTextStyle,styleDef(config.labelStyle));config._finalSelectStyle=Object.assign({},config._selectStyle,baseTextStyle,styleDef(config.selectStyle));delete config._finalSelectStyle["line-height"]};_proto.getDimension=function getDimension(){var timeBox=this,timeBoxConfig=timeBox.config,labelDim,getCleanNumber=timeBox.getFromEnv("fontParser"),fSize=getCleanNumber(timeBoxConfig._finalSelectStyle["font-size"]),smartLabel=timeBox.getFromEnv("smartLabel"),colonWidth,multiplier=getMultiplier(fSize);smartLabel.setStyle(timeBoxConfig._finalLabelStyle);labelDim=timeBoxConfig.labelDim=smartLabel.getOriSize(timeBoxConfig.label);colonWidth=smartLabel.getOriSize(":").width;timeBoxConfig.inputBoxWidth=Math.max(getCleanNumber(timeBoxConfig._finalSelectStyle.width),fSize*2.6);timeBoxConfig.inputBoxHeight=fSize*multiplier;timeBoxConfig.spacingMultiplier=fSize>30?2:1;timeBoxConfig._finalSelectStyle.width=timeBoxConfig.inputBoxWidth+_lib.PXSTRING;return{width:labelDim.width+3*colonWidth+3*timeBoxConfig.inputBoxWidth+2*DEFAULT_PADDING,height:Math.max(labelDim.height,timeBoxConfig.inputBoxHeight)}};_proto.setTranslation=function setTranslation(x,y){this.config.position={x:x,y:y}};_proto.getTime=function getTime(){var timeBox=this,hourElem,minuteElem,secondElem;hourElem=timeBox.getGraphicalElement("hour-box","hour-box");minuteElem=timeBox.getGraphicalElement("minute-box","minute-box");secondElem=timeBox.getGraphicalElement("second-box","second-box");return{hours:+hourElem.element.value,minutes:+minuteElem.element.value,seconds:+secondElem.element.value}};_proto.draw=function draw(){var timeBox=this,timeBoxConfig=timeBox.config,position=timeBoxConfig.position,labelDim=timeBoxConfig.labelDim,curTime=timeBoxConfig.time||{},xPos=position.x,heightDiff=Math.abs(labelDim.height-timeBoxConfig.inputBoxHeight)/2;timeBox.addGraphicalElement({el:"html",attr:{x:xPos,y:position.y,type:"label",text:timeBoxConfig.label},component:timeBox,css:timeBoxConfig._finalLabelStyle,container:{id:"box-container",label:"box-container",isParent:true},label:"time-label",id:"time-label"});xPos+=labelDim.width+DEFAULT_PADDING/2;timeBox.addGraphicalElement({el:"html",attr:{x:xPos,y:position.y-heightDiff,type:"select",innerHTML:_trustedPolicy.default.createHTML(getOptionsString(23,curTime.hours)),class:"fc__select__time"},component:timeBox,css:timeBoxConfig._finalSelectStyle,container:{id:"box-container",label:"box-container",isParent:true},label:"hour-box",id:"hour-box"});xPos+=timeBoxConfig.inputBoxWidth;timeBox.addGraphicalElement({el:"html",attr:{x:xPos+3,y:position.y,type:"label",text:SEMICOLON},component:timeBox,css:timeBoxConfig._finalLabelStyle,container:{id:"box-container",label:"box-container",isParent:true},label:"semicolon-minute",id:"semicolon-minute"});xPos+=timeBoxConfig.spacingMultiplier*DEFAULT_PADDING;timeBox.addGraphicalElement({el:"html",attr:{x:xPos,y:position.y-heightDiff,type:"select",innerHTML:_trustedPolicy.default.createHTML(getOptionsString(59,curTime.minutes)),class:"fc__select__time"},component:timeBox,css:timeBoxConfig._finalSelectStyle,container:{id:"box-container",label:"box-container",isParent:true},label:"minute-box",id:"minute-box"});xPos+=timeBoxConfig.inputBoxWidth;timeBox.addGraphicalElement({el:"html",attr:{x:xPos+3,y:position.y,type:"label",text:SEMICOLON},component:timeBox,css:timeBoxConfig._finalLabelStyle,container:{id:"box-container",label:"box-container",isParent:true},label:"semicolon-second",id:"semicolon-second"});xPos+=timeBoxConfig.spacingMultiplier*DEFAULT_PADDING;timeBox.addGraphicalElement({el:"html",attr:{x:xPos,y:position.y-heightDiff,type:"select",innerHTML:_trustedPolicy.default.createHTML(getOptionsString(59,curTime.seconds)),class:"fc__select__time"},component:timeBox,css:timeBoxConfig._finalSelectStyle,container:{id:"box-container",label:"box-container",isParent:true},label:"second-box",id:"second-box"})};return TimeBox}(_componentInterface.SmartRenderer);var _default=exports.default=TimeBox;