diff --git a/lib/scripts/Beacon.js b/lib/scripts/Beacon.js index c69ab419a..dad201afd 100644 --- a/lib/scripts/Beacon.js +++ b/lib/scripts/Beacon.js @@ -1 +1 @@ -'use strict';Object.defineProperty(exports,"__esModule",{value:true});exports.default=undefined;var _createClass=function(){function defineProperties(target,props){for(var i=0;i 0 // (which means STEP_BEFORE wasn't sent as part of the start handler above) else if(nextStep&&nextState.index){this.triggerCallback({action:nextState.action,index:nextState.index,type:callbackTypes.STEP_BEFORE,step:nextStep});}}// Running, and a tooltip is being turned on/off or the index is changing @@ -27,7 +27,7 @@ if(nextState.isRunning&&(shouldRenderTooltip!==nextState.shouldRenderTooltip||ne if(nextState.shouldRenderTooltip){this.triggerCallback({action:nextState.action||(nextState.index===0?'autostart':''),index:nextState.index,type:callbackTypes.TOOLTIP_BEFORE,step:nextStep});}// Going to show a beacon else{this.triggerCallback({action:nextState.action,index:nextState.index,type:callbackTypes.BEACON_BEFORE,step:nextStep});}}// Joyride was changed to a step index which doesn't exist (hit the end) if(nextProps.run&&nextSteps.length&&index!==nextState.index&&!nextStep){this.triggerCallback({action:nextState.action,type:callbackTypes.FINISHED,steps:nextSteps,isTourSkipped:nextState.isTourSkipped});}}},{key:'componentDidUpdate',value:function componentDidUpdate(prevProps,prevState){var _state3=this.state,index=_state3.index,shouldRedraw=_state3.shouldRedraw,isRunning=_state3.isRunning,shouldRun=_state3.shouldRun,standaloneData=_state3.standaloneData;var _props3=this.props,scrollToFirstStep=_props3.scrollToFirstStep,scrollToSteps=_props3.scrollToSteps,steps=_props3.steps;var step=steps[index];var scrollTop=this.getScrollTop();var shouldScroll=(scrollToFirstStep||index>0||prevState.index>index)&&step&&!step.isFixed;// fixed steps don't need to scroll -if(shouldRedraw&&step){this.calcPlacement();}if(isRunning&&scrollToSteps&&shouldScroll&&scrollTop>=0){_scroll2.default.top((0,_utils.getRootEl)(),this.getScrollTop());}if(steps.length&&!isRunning&&shouldRun&&!standaloneData){this.start();}}},{key:'componentWillUnmount',value:function componentWillUnmount(){window.removeEventListener('resize',listeners.resize);if(listeners.keyboard){document.body.removeEventListener('keydown',listeners.keyboard);}if(Object.keys(listeners.tooltips).length){Object.keys(listeners.tooltips).map(function(key){return{el:document.querySelector(key),event:listeners.tooltips[key].event,cb:listeners.tooltips[key].cb,key:key};}).filter(function(_ref){var el=_ref.el;return!!el;}).forEach(function(_ref2){var el=_ref2.el,event=_ref2.event,cb=_ref2.cb,key=_ref2.key;el.removeEventListener(event,cb);delete listeners.tooltips[key];});}}/** +if(shouldRedraw&&step){this.calcPlacement();}if(isRunning&&scrollToSteps&&shouldScroll&&scrollTop>=0){_scroll2.default.top((0,_utils.getRootEl)(),this.getScrollTop());}if(steps.length&&!isRunning&&shouldRun&&!standaloneData){this.start();}}},{key:'componentWillUnmount',value:function componentWillUnmount(){var _this3=this;window.removeEventListener('resize',this.listeners.resize);/* istanbul ignore else */if(this.listeners.keyboard){document.body.removeEventListener('keydown',this.listeners.keyboard);}/* istanbul ignore else */if(Object.keys(this.listeners.tooltips).length){Object.keys(this.listeners.tooltips).map(function(key){return{el:document.querySelector(key),event:_this3.listeners.tooltips[key].event,cb:_this3.listeners.tooltips[key].cb,key:key};}).filter(function(_ref){var el=_ref.el;return!!el;}).forEach(function(_ref2){var el=_ref2.el,event=_ref2.event,cb=_ref2.cb,key=_ref2.key;el.removeEventListener(event,cb);delete _this3.listeners.tooltips[key];});}}/** * Starts the tour * * @param {boolean} [autorun] - Starts with the first tooltip opened @@ -52,7 +52,7 @@ if(shouldRestart&&isRunning===shouldRestart&&index===0){this.forceUpdate();}this * Add standalone tooltip events * * @param {Object} data - Similar shape to a 'step', but for a single tooltip - */},{key:'addTooltip',value:function addTooltip(data){if(!this.checkStepValidity(data)){(0,_utils.logger)({type:'joyride:addTooltip:FAIL',msg:['data:',data],debug:this.props.debug});return;}(0,_utils.logger)({type:'joyride:addTooltip',msg:['data:',data],debug:this.props.debug});var key=data.trigger||(0,_utils.sanitizeSelector)(data.selector);var el=document.querySelector(key);if(!el){return;}el.setAttribute('data-tooltip',JSON.stringify(data));var eventType=data.event||'click';if(eventType==='hover'){listeners.tooltips[key+'mouseenter']={event:'mouseenter',cb:this.onClickStandaloneTrigger};listeners.tooltips[key+'mouseleave']={event:'mouseleave',cb:this.onClickStandaloneTrigger};el.addEventListener('mouseenter',listeners.tooltips[key+'mouseenter'].cb);el.addEventListener('mouseleave',listeners.tooltips[key+'mouseleave'].cb);}listeners.tooltips[key+'click']={event:'click',cb:this.onClickStandaloneTrigger};el.addEventListener('click',listeners.tooltips[key+'click'].cb);}/** + */},{key:'addTooltip',value:function addTooltip(data){if(!this.checkStepValidity(data)){(0,_utils.logger)({type:'joyride:addTooltip:FAIL',msg:['data:',data],debug:this.props.debug});return;}(0,_utils.logger)({type:'joyride:addTooltip',msg:['data:',data],debug:this.props.debug});var key=data.trigger||(0,_utils.sanitizeSelector)(data.selector);var el=document.querySelector(key);if(!el){return;}el.setAttribute('data-tooltip',JSON.stringify(data));var eventType=data.event||'click';/* istanbul ignore else */if(eventType==='hover'){this.listeners.tooltips[key+'mouseenter']={event:'mouseenter',cb:this.onClickStandaloneTrigger};this.listeners.tooltips[key+'mouseleave']={event:'mouseleave',cb:this.onClickStandaloneTrigger};el.addEventListener('mouseenter',this.listeners.tooltips[key+'mouseenter'].cb);el.addEventListener('mouseleave',this.listeners.tooltips[key+'mouseleave'].cb);}this.listeners.tooltips[key+'click']={event:'click',cb:this.onClickStandaloneTrigger};el.addEventListener('click',this.listeners.tooltips[key+'click'].cb);}/** * Parse the incoming steps * * @deprecated @@ -64,14 +64,14 @@ if(shouldRestart&&isRunning===shouldRestart&&index===0){this.forceUpdate();}this * * @param {Object} step - A step object * @returns {boolean} - True if the step is valid, false otherwise - */},{key:'checkStepValidity',value:function checkStepValidity(step){var _this3=this;// Check that the step is the proper type + */},{key:'checkStepValidity',value:function checkStepValidity(step){var _this4=this;// Check that the step is the proper type if(!step||(typeof step==='undefined'?'undefined':_typeof(step))!=='object'||Array.isArray(step)){(0,_utils.logger)({type:'joyride:checkStepValidity',msg:'Did not provide a step object.',warn:true,debug:this.props.debug});return false;}// Check that all required step fields are present -var requiredFields=['selector'];var hasRequiredField=function hasRequiredField(requiredField){var hasField=Boolean(step[requiredField]);if(!hasField){(0,_utils.logger)({type:'joyride:checkStepValidity',msg:['Provided a step without the required '+requiredField+' property.','Step:',step],warn:true,debug:_this3.props.debug});}return hasField;};return requiredFields.every(hasRequiredField);}/** +var requiredFields=['selector'];var hasRequiredField=function hasRequiredField(requiredField){var hasField=Boolean(step[requiredField]);if(!hasField){(0,_utils.logger)({type:'joyride:checkStepValidity',msg:['Provided a step without the required '+requiredField+' property.','Step:',step],warn:true,debug:_this4.props.debug});}return hasField;};return requiredFields.every(hasRequiredField);}/** * Check one or more steps are valid * * @param {Object|Array} steps - A step object or array of step objects * @returns {boolean} - True if one or more stpes, and all steps are valid, false otherwise - */},{key:'checkStepsValidity',value:function checkStepsValidity(steps){if(!Array.isArray(steps)&&(typeof steps==='undefined'?'undefined':_typeof(steps))==='object'){return this.checkStepValidity(steps);}else if(steps.length>0){return steps.every(this.checkStepValidity);}return false;}/** + */},{key:'checkStepsValidity',value:function checkStepsValidity(steps){/* istanbul ignore else */if(!Array.isArray(steps)&&(typeof steps==='undefined'?'undefined':_typeof(steps))==='object'){return this.checkStepValidity(steps);}else if(steps.length>0){return steps.every(this.checkStepValidity);}return false;}/** * Find and return the targeted DOM element based on a step's 'selector'. * * @private @@ -82,17 +82,17 @@ var requiredFields=['selector'];var hasRequiredField=function hasRequiredField(r * * @private * @returns {{height: number, width: number}} - */},{key:'getElementDimensions',value:function getElementDimensions(){var _state7=this.state,shouldRenderTooltip=_state7.shouldRenderTooltip,standaloneData=_state7.standaloneData;var displayTooltip=standaloneData?true:shouldRenderTooltip;var el=document.querySelector(displayTooltip?'.joyride-tooltip':'.joyride-beacon');var height=0;var width=0;if(el){var styles=window.getComputedStyle(el);height=el.clientHeight+parseInt(styles.marginTop,10)+parseInt(styles.marginBottom,10);width=el.clientWidth+parseInt(styles.marginLeft,10)+parseInt(styles.marginRight,10);}return{height:height,width:width};}/** + */},{key:'getElementDimensions',value:function getElementDimensions(){var _state7=this.state,shouldRenderTooltip=_state7.shouldRenderTooltip,standaloneData=_state7.standaloneData;var displayTooltip=standaloneData?true:shouldRenderTooltip;var el=document.querySelector(displayTooltip?'.joyride-tooltip':'.joyride-beacon');var height=0;var width=0;if(el){var styles=window.getComputedStyle(el);height=el.clientHeight+parseInt(styles.marginTop||0,10)+parseInt(styles.marginBottom||0,10);width=el.clientWidth+parseInt(styles.marginLeft||0,10)+parseInt(styles.marginRight||0,10);}return{height:height,width:width};}/** * Get the scrollTop position * * @private * @returns {number} - */},{key:'getScrollTop',value:function getScrollTop(){var _state8=this.state,index=_state8.index,yPos=_state8.yPos;var _props4=this.props,scrollOffset=_props4.scrollOffset,steps=_props4.steps;var step=steps[index];var target=this.getStepTargetElement(step);if(!target){return 0;}var rect=target.getBoundingClientRect();var targetTop=rect.top+(window.pageYOffset||document.documentElement.scrollTop);var position=this.calcPosition(step);var scrollTo=0;if(/^top/.test(position)){scrollTo=Math.floor(yPos-scrollOffset);}else if(/^bottom|^left|^right/.test(position)){scrollTo=Math.floor(targetTop-scrollOffset);}return scrollTo;}/** + */},{key:'getScrollTop',value:function getScrollTop(){var _state8=this.state,index=_state8.index,yPos=_state8.yPos;var _props4=this.props,scrollOffset=_props4.scrollOffset,steps=_props4.steps;var step=steps[index];var target=this.getStepTargetElement(step);if(!target){return 0;}var rect=target.getBoundingClientRect();var targetTop=rect.top+(window.pageYOffset||document.documentElement.scrollTop);var position=this.calcPosition(step);var scrollTo=0;/* istanbul ignore else */if(/^top/.test(position)){scrollTo=Math.floor(yPos-scrollOffset);}else if(/^bottom|^left|^right/.test(position)){scrollTo=Math.floor(targetTop-scrollOffset);}return scrollTo;}/** * Trigger the callback. * * @private * @param {Object} options - */},{key:'triggerCallback',value:function triggerCallback(options){var callback=this.props.callback;if(typeof callback==='function'){(0,_utils.logger)({type:'joyride:triggerCallback',msg:[options],debug:this.props.debug});callback(options);}}/** + */},{key:'triggerCallback',value:function triggerCallback(options){var callback=this.props.callback;/* istanbul ignore else */if(typeof callback==='function'){(0,_utils.logger)({type:'joyride:triggerCallback',msg:[options],debug:this.props.debug});callback(options);}}/** * Keydown event listener * * @private @@ -102,7 +102,7 @@ var requiredFields=['selector'];var hasRequiredField=function hasRequiredField(r * * @private * @param {Event} e - Click event - */},{key:'onClickStandaloneTrigger',value:function onClickStandaloneTrigger(e){e.preventDefault();var _state10=this.state,isRunning=_state10.isRunning,standaloneData=_state10.standaloneData;var tooltipData=e.currentTarget.dataset.tooltip;if(['mouseenter','mouseleave'].includes(e.type)&&hasTouch){return;}if(tooltipData){tooltipData=JSON.parse(tooltipData);if(!standaloneData||standaloneData.selector!==tooltipData.selector){this.setState({isRunning:false,shouldRenderTooltip:false,shouldRun:isRunning,standaloneData:tooltipData,xPos:-1000,yPos:-1000});}else{document.querySelector('.joyride-tooltip__close').click();}}}/** + */},{key:'onClickStandaloneTrigger',value:function onClickStandaloneTrigger(e){e.preventDefault();var _state10=this.state,isRunning=_state10.isRunning,standaloneData=_state10.standaloneData;var tooltipData=e.currentTarget.dataset.tooltip;if(['mouseenter','mouseleave'].includes(e.type)&&hasTouch){return;}/* istanbul ignore else */if(tooltipData){tooltipData=JSON.parse(tooltipData);if(!standaloneData||standaloneData.selector!==tooltipData.selector){this.setState({isRunning:false,shouldRenderTooltip:false,shouldRun:isRunning,standaloneData:tooltipData,xPos:-1000,yPos:-1000});}else{document.querySelector('.joyride-tooltip__close').click();}}}/** * Beacon click event listener * * @private @@ -112,7 +112,7 @@ var requiredFields=['selector'];var hasRequiredField=function hasRequiredField(r * * @private * @param {Event} e - Click event - */},{key:'onClickTooltip',value:function onClickTooltip(e){var _state11=this.state,index=_state11.index,shouldRun=_state11.shouldRun;var _props5=this.props,steps=_props5.steps,type=_props5.type;var el=e.currentTarget.className.indexOf('joyride-')===0&&e.currentTarget.tagName==='A'?e.currentTarget:e.target;var dataType=el.dataset.type;if(el.className.indexOf('joyride-')===0){e.preventDefault();e.stopPropagation();var tooltip=document.querySelector('.joyride-tooltip');var newIndex=index+(dataType==='back'?-1:1);if(dataType==='skip'){this.setState({isTourSkipped:true});newIndex=steps.length+1;}if(tooltip.classList.contains('joyride-tooltip--standalone')){this.setState({isRunning:shouldRun,shouldRedraw:true,shouldRun:false,standaloneData:false});}else if(dataType){var shouldDisplay=['continuous','guided'].indexOf(type)>-1&&['close','skip'].indexOf(dataType)===-1&&Boolean(steps[newIndex]);this.toggleTooltip({show:shouldDisplay,index:newIndex,action:dataType});}if(e.target.className==='joyride-overlay'){this.triggerCallback({action:'click',type:callbackTypes.OVERLAY,step:steps[index]});}if(e.target.classList.contains('joyride-hole')){this.triggerCallback({action:'click',type:callbackTypes.HOLE,step:steps[index]});}}}},{key:'onRenderTooltip',value:function onRenderTooltip(){this.calcPlacement();}/** + */},{key:'onClickTooltip',value:function onClickTooltip(e){var _state11=this.state,index=_state11.index,shouldRun=_state11.shouldRun;var _props5=this.props,steps=_props5.steps,type=_props5.type;var el=e.currentTarget.className.includes('joyride-')&&['A','BUTTON'].includes(e.currentTarget.tagName)?e.currentTarget:e.target;var dataType=el.dataset.type;/* istanbul ignore else */if(el.className.indexOf('joyride-')===0){e.preventDefault();e.stopPropagation();var tooltip=document.querySelector('.joyride-tooltip');var newIndex=index+(dataType==='back'?-1:1);if(dataType==='skip'){this.setState({isTourSkipped:true});newIndex=steps.length+1;}/* istanbul ignore else */if(tooltip.classList.contains('joyride-tooltip--standalone')){this.setState({isRunning:shouldRun,shouldRedraw:true,shouldRun:false,standaloneData:false});}else if(dataType){var shouldDisplay=['continuous','guided'].indexOf(type)>-1&&['close','skip'].indexOf(dataType)===-1&&Boolean(steps[newIndex]);this.toggleTooltip({show:shouldDisplay,index:newIndex,action:dataType});}if(e.target.className==='joyride-overlay'){this.triggerCallback({action:'click',type:callbackTypes.OVERLAY,step:steps[index]});}if(e.target.classList.contains('joyride-hole')){this.triggerCallback({action:'click',type:callbackTypes.HOLE,step:steps[index]});}}}},{key:'onRenderTooltip',value:function onRenderTooltip(){this.calcPlacement();}/** * Toggle Tooltip's visibility * * @private @@ -127,9 +127,9 @@ shouldRedraw:!show||!hasMountedTarget,shouldRenderTooltip:show&&hasMountedTarget * Position absolute elements next to its target * * @private - */},{key:'calcPlacement',value:function calcPlacement(){var _state12=this.state,index=_state12.index,isRunning=_state12.isRunning,standaloneData=_state12.standaloneData,shouldRenderTooltip=_state12.shouldRenderTooltip;var _props6=this.props,steps=_props6.steps,tooltipOffset=_props6.tooltipOffset;var step=standaloneData||steps[index]||{};var displayTooltip=standaloneData?true:shouldRenderTooltip;var target=this.getStepTargetElement(step);(0,_utils.logger)({type:'joyride:calcPlacement'+this.getRenderStage(),msg:['step:',step],debug:this.props.debug});if(!target){return;}var placement={x:-1000,y:-1000};if(step&&(standaloneData||isRunning&&steps[index])){var offsetX=_nestedProperty2.default.get(step,'style.beacon.offsetX')||0;var offsetY=_nestedProperty2.default.get(step,'style.beacon.offsetY')||0;var position=this.calcPosition(step);var body=document.body.getBoundingClientRect();var scrollTop=step.isFixed===true?0:body.top;var component=this.getElementDimensions();var rect=target.getBoundingClientRect();// Calculate x position + */},{key:'calcPlacement',value:function calcPlacement(){var _state12=this.state,index=_state12.index,isRunning=_state12.isRunning,standaloneData=_state12.standaloneData,shouldRenderTooltip=_state12.shouldRenderTooltip;var _props6=this.props,steps=_props6.steps,tooltipOffset=_props6.tooltipOffset;var step=standaloneData||steps[index]||{};var displayTooltip=standaloneData?true:shouldRenderTooltip;var target=this.getStepTargetElement(step);(0,_utils.logger)({type:'joyride:calcPlacement'+this.getRenderStage(),msg:['step:',step],debug:this.props.debug});/* istanbul ignore else */if(!target){return;}var placement={x:-1000,y:-1000};/* istanbul ignore else */if(step&&(standaloneData||isRunning&&steps[index])){var offsetX=_nestedProperty2.default.get(step,'style.beacon.offsetX')||0;var offsetY=_nestedProperty2.default.get(step,'style.beacon.offsetY')||0;var position=this.calcPosition(step);var body=document.body.getBoundingClientRect();var scrollTop=step.isFixed===true?0:body.top;var component=this.getElementDimensions();var rect=target.getBoundingClientRect();// Calculate x position if(/^left/.test(position)){placement.x=rect.left-(displayTooltip?component.width+tooltipOffset:component.width/2+offsetX);}else if(/^right/.test(position)){placement.x=rect.left+rect.width-(displayTooltip?-tooltipOffset:component.width/2-offsetX);}else{placement.x=rect.left+(rect.width/2-component.width/2);}// Calculate y position -if(/^top/.test(position)){placement.y=rect.top-scrollTop-(displayTooltip?component.height+tooltipOffset:component.height/2+offsetY);}else if(/^bottom/.test(position)){placement.y=rect.top-scrollTop+(rect.height-(displayTooltip?-tooltipOffset:component.height/2-offsetY));}else{placement.y=rect.top-scrollTop;}if(/^bottom|^top/.test(position)){if(/left/.test(position)){placement.x=rect.left-(displayTooltip?tooltipOffset:component.width/2);}else if(/right/.test(position)){placement.x=rect.left+(rect.width-(displayTooltip?component.width-tooltipOffset:component.width/2));}}this.setState({shouldRedraw:false,xPos:this.preventWindowOverflow(Math.ceil(placement.x),'x',component.width,component.height),yPos:this.preventWindowOverflow(Math.ceil(placement.y),'y',component.width,component.height)});}}/** +if(/^top/.test(position)){placement.y=rect.top-scrollTop-(displayTooltip?component.height+tooltipOffset:component.height/2+offsetY);}else if(/^bottom/.test(position)){placement.y=rect.top-scrollTop+(rect.height-(displayTooltip?-tooltipOffset:component.height/2-offsetY));}else{placement.y=rect.top-scrollTop;}/* istanbul ignore else */if(/^bottom|^top/.test(position)){if(/left/.test(position)){placement.x=rect.left-(displayTooltip?tooltipOffset:component.width/2);}else if(/right/.test(position)){placement.x=rect.left+(rect.width-(displayTooltip?component.width-tooltipOffset:component.width/2));}}this.setState({shouldRedraw:false,xPos:this.preventWindowOverflow(Math.ceil(placement.x),'x',component.width,component.height),yPos:this.preventWindowOverflow(Math.ceil(placement.y),'y',component.width,component.height)});}}/** * Update position for small screens. * * @private @@ -150,9 +150,9 @@ if(/^top/.test(position)){placement.y=rect.top-scrollTop-(displayTooltip?compone * @param {Number} elWidth - The target element width * @param {Number} elHeight - The target element height * @returns {Number} - */},{key:'preventWindowOverflow',value:function preventWindowOverflow(value,axis,elWidth,elHeight){var winWidth=window.innerWidth;var body=document.body;var html=document.documentElement;var docHeight=Math.max(body.scrollHeight,body.offsetHeight,html.clientHeight,html.scrollHeight,html.offsetHeight);var newValue=value;if(axis==='x'){if(value+elWidth>=winWidth){newValue=winWidth-elWidth-15;}else if(value<15){newValue=15;}}else if(axis==='y'){if(value+elHeight>=docHeight){newValue=docHeight-elHeight-15;}else if(value<15){newValue=15;}}return newValue;}/** + */},{key:'preventWindowOverflow',value:function preventWindowOverflow(value,axis,elWidth,elHeight){var winWidth=window.innerWidth;var body=document.body;var html=document.documentElement;var docHeight=Math.max(body.scrollHeight,body.offsetHeight,html.clientHeight,html.scrollHeight,html.offsetHeight);var newValue=value;/* istanbul ignore else */if(axis==='x'){if(value+elWidth>=winWidth){newValue=winWidth-elWidth-15;}else if(value<15){newValue=15;}}else if(axis==='y'){if(value+elHeight>=docHeight){newValue=docHeight-elHeight-15;}else if(value<15){newValue=15;}}return newValue;}/** * Create a React Element * * @private * @returns {boolean|ReactComponent} - */},{key:'createComponent',value:function createComponent(){var _state14=this.state,index=_state14.index,shouldRedraw=_state14.shouldRedraw,shouldRenderTooltip=_state14.shouldRenderTooltip,standaloneData=_state14.standaloneData,xPos=_state14.xPos,yPos=_state14.yPos;var _props7=this.props,disableOverlay=_props7.disableOverlay,holePadding=_props7.holePadding,locale=_props7.locale,showBackButton=_props7.showBackButton,showOverlay=_props7.showOverlay,showSkipButton=_props7.showSkipButton,showStepsProgress=_props7.showStepsProgress,steps=_props7.steps,type=_props7.type;var currentStep=standaloneData||steps[index];var step=_extends({},currentStep);var target=this.getStepTargetElement(step);var component=void 0;var allowClicksThruHole=step&&step.allowClicksThruHole||this.props.allowClicksThruHole;var shouldShowOverlay=standaloneData?false:showOverlay;var buttons={primary:locale.close};(0,_utils.logger)({type:'joyride:createComponent'+this.getRenderStage(),msg:['component:',shouldRenderTooltip||standaloneData?'Tooltip':'Beacon','animate:',xPos>-1&&!shouldRedraw,'step:',step],debug:this.props.debug,warn:!target});if(!target){return false;}if(shouldRenderTooltip||standaloneData){var position=this.calcPosition(step);if(!standaloneData){if(['continuous','guided'].indexOf(type)>-1){buttons.primary=locale.last;if(steps[index+1]){if(showStepsProgress){var next=locale.next;if(typeof locale.next==='string'){next=_react2.default.createElement('span',null,locale.next);}buttons.primary=_react2.default.createElement('span',null,next,' ',_react2.default.createElement('span',null,index+1+'/'+steps.length));}else{buttons.primary=locale.next;}}if(showBackButton&&index>0){buttons.secondary=locale.back;}}if(showSkipButton){buttons.skip=locale.skip;}}component=_react2.default.createElement(_Tooltip2.default,{allowClicksThruHole:allowClicksThruHole,animate:xPos>-1&&!shouldRedraw,buttons:buttons,disableOverlay:disableOverlay,holePadding:holePadding,position:position,selector:(0,_utils.sanitizeSelector)(step.selector),showOverlay:shouldShowOverlay,step:step,standalone:Boolean(standaloneData),target:target,type:type,xPos:xPos,yPos:yPos,onClick:this.onClickTooltip,onRender:this.onRenderTooltip});}else{component=_react2.default.createElement(_Beacon2.default,{step:step,xPos:xPos,yPos:yPos,onTrigger:this.onClickBeacon,eventType:step.type||'click'});}return component;}},{key:'render',value:function render(){var _state15=this.state,index=_state15.index,isRunning=_state15.isRunning,standaloneData=_state15.standaloneData;var steps=this.props.steps;var hasStep=Boolean(steps[index]);var component=void 0;var standaloneComponent=void 0;if(isRunning&&hasStep){(0,_utils.logger)({type:'joyride:render'+this.getRenderStage(),msg:['step:',steps[index]],debug:this.props.debug});}else if(!isRunning&&standaloneData){(0,_utils.logger)({type:'joyride:render',msg:['tooltip:',standaloneData],debug:this.props.debug});}if(standaloneData){standaloneComponent=this.createComponent();}else if(isRunning&&hasStep){component=this.createComponent();}return _react2.default.createElement('div',{className:'joyride'},component,standaloneComponent);}}]);return Joyride;}(_react2.default.Component),_class.propTypes={allowClicksThruHole:_react2.default.PropTypes.bool,autoStart:_react2.default.PropTypes.bool,callback:_react2.default.PropTypes.func,debug:_react2.default.PropTypes.bool,disableOverlay:_react2.default.PropTypes.bool,holePadding:_react2.default.PropTypes.number,keyboardNavigation:_react2.default.PropTypes.bool,locale:_react2.default.PropTypes.object,resizeDebounce:_react2.default.PropTypes.bool,resizeDebounceDelay:_react2.default.PropTypes.number,run:_react2.default.PropTypes.bool,scrollOffset:_react2.default.PropTypes.number,scrollToFirstStep:_react2.default.PropTypes.bool,scrollToSteps:_react2.default.PropTypes.bool,showBackButton:_react2.default.PropTypes.bool,showOverlay:_react2.default.PropTypes.bool,showSkipButton:_react2.default.PropTypes.bool,showStepsProgress:_react2.default.PropTypes.bool,stepIndex:_react2.default.PropTypes.number,steps:_react2.default.PropTypes.array,tooltipOffset:_react2.default.PropTypes.number,type:_react2.default.PropTypes.string},_class.defaultProps={allowClicksThruHole:false,autoStart:false,debug:false,holePadding:5,keyboardNavigation:true,locale:{back:'Back',close:'Close',last:'Last',next:'Next',skip:'Skip'},resizeDebounce:false,resizeDebounceDelay:200,run:false,scrollToSteps:true,scrollOffset:20,scrollToFirstStep:false,showBackButton:true,showOverlay:true,showSkipButton:false,showStepsProgress:false,steps:[],tooltipOffset:15,type:'single'},_temp);exports.default=Joyride; \ No newline at end of file + */},{key:'createComponent',value:function createComponent(){var _state14=this.state,index=_state14.index,shouldRedraw=_state14.shouldRedraw,shouldRenderTooltip=_state14.shouldRenderTooltip,standaloneData=_state14.standaloneData,xPos=_state14.xPos,yPos=_state14.yPos;var _props7=this.props,disableOverlay=_props7.disableOverlay,holePadding=_props7.holePadding,locale=_props7.locale,showBackButton=_props7.showBackButton,showOverlay=_props7.showOverlay,showSkipButton=_props7.showSkipButton,showStepsProgress=_props7.showStepsProgress,steps=_props7.steps,type=_props7.type;var currentStep=standaloneData||steps[index];var step=_extends({},currentStep);var target=this.getStepTargetElement(step);var component=void 0;var allowClicksThruHole=step&&step.allowClicksThruHole||this.props.allowClicksThruHole;var shouldShowOverlay=standaloneData?false:showOverlay;var buttons={primary:locale.close};(0,_utils.logger)({type:'joyride:createComponent'+this.getRenderStage(),msg:['component:',shouldRenderTooltip||standaloneData?'Tooltip':'Beacon','animate:',xPos>-1&&!shouldRedraw,'step:',step],debug:this.props.debug,warn:!target});if(!target){return false;}if(shouldRenderTooltip||standaloneData){var position=this.calcPosition(step);/* istanbul ignore else */if(!standaloneData){/* istanbul ignore else */if(['continuous','guided'].indexOf(type)>-1){buttons.primary=locale.last;/* istanbul ignore else */if(steps[index+1]){if(showStepsProgress){var next=locale.next;if(typeof locale.next==='string'){next=_react2.default.createElement('span',null,locale.next);}buttons.primary=_react2.default.createElement('span',null,next,' ',_react2.default.createElement('span',null,index+1+'/'+steps.length));}else{buttons.primary=locale.next;}}if(showBackButton&&index>0){buttons.secondary=locale.back;}}if(showSkipButton){buttons.skip=locale.skip;}}component=_react2.default.createElement(_Tooltip2.default,{allowClicksThruHole:allowClicksThruHole,animate:xPos>-1&&!shouldRedraw,buttons:buttons,disableOverlay:disableOverlay,holePadding:holePadding,position:position,selector:(0,_utils.sanitizeSelector)(step.selector),showOverlay:shouldShowOverlay,step:step,standalone:Boolean(standaloneData),target:target,type:type,xPos:xPos,yPos:yPos,onClick:this.onClickTooltip,onRender:this.onRenderTooltip});}else{component=_react2.default.createElement(_Beacon2.default,{step:step,xPos:xPos,yPos:yPos,onTrigger:this.onClickBeacon,eventType:step.type||'click'});}return component;}},{key:'render',value:function render(){var _state15=this.state,index=_state15.index,isRunning=_state15.isRunning,standaloneData=_state15.standaloneData;var steps=this.props.steps;var hasStep=Boolean(steps[index]);var component=void 0;var standaloneComponent=void 0;if(isRunning&&hasStep){(0,_utils.logger)({type:'joyride:render'+this.getRenderStage(),msg:['step:',steps[index]],debug:this.props.debug});}else if(!isRunning&&standaloneData){(0,_utils.logger)({type:'joyride:render',msg:['tooltip:',standaloneData],debug:this.props.debug});}if(standaloneData){standaloneComponent=this.createComponent();}else if(isRunning&&hasStep){component=this.createComponent();}return _react2.default.createElement('div',{className:'joyride'},component,standaloneComponent);}}]);return Joyride;}(_react2.default.Component),_class.propTypes={allowClicksThruHole:_react2.default.PropTypes.bool,autoStart:_react2.default.PropTypes.bool,callback:_react2.default.PropTypes.func,debug:_react2.default.PropTypes.bool,disableOverlay:_react2.default.PropTypes.bool,holePadding:_react2.default.PropTypes.number,keyboardNavigation:_react2.default.PropTypes.bool,locale:_react2.default.PropTypes.object,resizeDebounce:_react2.default.PropTypes.bool,resizeDebounceDelay:_react2.default.PropTypes.number,run:_react2.default.PropTypes.bool,scrollOffset:_react2.default.PropTypes.number,scrollToFirstStep:_react2.default.PropTypes.bool,scrollToSteps:_react2.default.PropTypes.bool,showBackButton:_react2.default.PropTypes.bool,showOverlay:_react2.default.PropTypes.bool,showSkipButton:_react2.default.PropTypes.bool,showStepsProgress:_react2.default.PropTypes.bool,stepIndex:_react2.default.PropTypes.number,steps:_react2.default.PropTypes.array,tooltipOffset:_react2.default.PropTypes.number,type:_react2.default.PropTypes.string},_class.defaultProps={allowClicksThruHole:false,autoStart:false,debug:false,holePadding:5,keyboardNavigation:true,locale:{back:'Back',close:'Close',last:'Last',next:'Next',skip:'Skip'},resizeDebounce:false,resizeDebounceDelay:200,run:false,scrollToSteps:true,scrollOffset:20,scrollToFirstStep:false,showBackButton:true,showOverlay:true,showSkipButton:false,showStepsProgress:false,steps:[],tooltipOffset:15,type:'single'},_temp);exports.default=Joyride; \ No newline at end of file diff --git a/lib/scripts/Tooltip.js b/lib/scripts/Tooltip.js index f9fc8ebe9..05ef79464 100644 --- a/lib/scripts/Tooltip.js +++ b/lib/scripts/Tooltip.js @@ -1,4 +1,4 @@ -'use strict';Object.defineProperty(exports,"__esModule",{value:true});exports.default=undefined;var _extends=Object.assign||function(target){for(var i=1;i=hole.top&&offsetY<=hole.top+hole.height;var inHoleWidth=offsetX>=hole.left&&offsetX<=hole.left+hole.width;var inHole=inHoleWidth&&inHoleHeight;if(inHole&&!_this.state.mouseOverHole){_this.setState({mouseOverHole:true});}if(!inHole&&_this.state.mouseOverHole){_this.setState({mouseOverHole:false});}};_this.state={};return _this;}_createClass(JoyrideTooltip,[{key:'componentWillMount',value:function componentWillMount(){var opts=this.setOpts(this.props);var styles=this.setStyles(this.props.step.style,opts,this.props);this.setState({styles:styles,opts:opts});}},{key:'componentDidMount',value:function componentDidMount(){var onRender=this.props.onRender;this.forceUpdate();onRender();if(this.props.showOverlay&&this.props.allowClicksThruHole){document.addEventListener('mousemove',this.handleMouseMove,false);}}},{key:'componentWillReceiveProps',value:function componentWillReceiveProps(nextProps){var nextAllowClicksThruHole=nextProps.allowClicksThruHole,nextAnimate=nextProps.animate,nextStandalone=nextProps.standalone,nextStep=nextProps.step,nextHolePadding=nextProps.holePadding,nextPosition=nextProps.position,nextXPos=nextProps.xPos,nextYPos=nextProps.yPos,nextShowOverlay=nextProps.showOverlay;var _props=this.props,allowClicksThruHole=_props.allowClicksThruHole,animate=_props.animate,standalone=_props.standalone,step=_props.step,holePadding=_props.holePadding,position=_props.position,xPos=_props.xPos,yPos=_props.yPos,showOverlay=_props.showOverlay;if(nextAnimate!==animate||nextStandalone!==standalone||nextStep!==step||nextHolePadding!==holePadding||nextPosition!==position||nextXPos!==xPos||nextYPos!==yPos){var opts=this.setOpts(nextProps);var styles=this.setStyles(nextProps.step.style,opts,nextProps);this.setState({styles:styles,opts:opts});}// If showOverlay changed, we might need to allow clicks in the overlay hole +'use strict';Object.defineProperty(exports,"__esModule",{value:true});exports.default=undefined;var _extends=Object.assign||function(target){for(var i=1;i=hole.top&&offsetY<=hole.top+hole.height;var inHoleWidth=offsetX>=hole.left&&offsetX<=hole.left+hole.width;var inHole=inHoleWidth&&inHoleHeight;if(inHole&&!_this.state.mouseOverHole){_this.setState({mouseOverHole:true});}if(!inHole&&_this.state.mouseOverHole){_this.setState({mouseOverHole:false});}};_this.state={};return _this;}_createClass(JoyrideTooltip,[{key:'componentWillMount',value:function componentWillMount(){var opts=this.setOpts(this.props);var styles=this.setStyles(this.props.step.style,opts,this.props);this.setState({styles:styles,opts:opts});}},{key:'componentDidMount',value:function componentDidMount(){var onRender=this.props.onRender;this.forceUpdate();onRender();if(this.props.showOverlay&&this.props.allowClicksThruHole){document.addEventListener('mousemove',this.handleMouseMove,false);}}},{key:'componentWillReceiveProps',value:function componentWillReceiveProps(nextProps){var nextAllowClicksThruHole=nextProps.allowClicksThruHole,nextAnimate=nextProps.animate,nextStandalone=nextProps.standalone,nextStep=nextProps.step,nextHolePadding=nextProps.holePadding,nextPosition=nextProps.position,nextXPos=nextProps.xPos,nextYPos=nextProps.yPos,nextShowOverlay=nextProps.showOverlay;var _props=this.props,allowClicksThruHole=_props.allowClicksThruHole,animate=_props.animate,standalone=_props.standalone,step=_props.step,holePadding=_props.holePadding,position=_props.position,xPos=_props.xPos,yPos=_props.yPos,showOverlay=_props.showOverlay;/* istanbul ignore else */if(nextAnimate!==animate||nextStandalone!==standalone||nextStep!==step||nextHolePadding!==holePadding||nextPosition!==position||nextXPos!==xPos||nextYPos!==yPos){var opts=this.setOpts(nextProps);var styles=this.setStyles(nextProps.step.style,opts,nextProps);this.setState({styles:styles,opts:opts});}// If showOverlay changed, we might need to allow clicks in the overlay hole if(nextShowOverlay!==showOverlay){if(nextShowOverlay&&nextAllowClicksThruHole){document.addEventListener('mousemove',this.handleMouseMove,false);}else{document.removeEventListener('mousemove',this.handleMouseMove,false);}}// If allowClickInHole changed, we need to enable or disable clicking in the overlay hole if(nextAllowClicksThruHole!==allowClicksThruHole){if(nextAllowClicksThruHole){document.addEventListener('mousemove',this.handleMouseMove,false);}else{document.removeEventListener('mousemove',this.handleMouseMove,false);}}}},{key:'componentDidUpdate',value:function componentDidUpdate(prevProps){var _props2=this.props,onRender=_props2.onRender,selector=_props2.selector;if(prevProps.selector!==selector){this.forceUpdate();onRender();}}},{key:'componentWillUnmount',value:function componentWillUnmount(){document.removeEventListener('mousemove',this.handleMouseMove,false);}},{key:'getArrowPosition',value:function getArrowPosition(position){var arrowPosition=position;if(window.innerWidth<480){if(position<8){arrowPosition=8;}else if(position>92){arrowPosition=92;}}else if(window.innerWidth<1024){if(position<6){arrowPosition=6;}else if(position>94){arrowPosition=94;}}else if(position<5){arrowPosition=5;}else if(position>95){arrowPosition=95;}return arrowPosition;}},{key:'generateArrow',value:function generateArrow(){var opts=arguments.length>0&&arguments[0]!==undefined?arguments[0]:{};var width=void 0;var height=void 0;var rotate=void 0;opts.location=opts.location||'top';opts.color=opts.color||'#f04';opts.color=opts.color.replace('#','%23');opts.width=opts.width||36;opts.height=opts.width/2;opts.scale=opts.width/16;opts.rotate='0';height=opts.height;rotate=opts.rotate;width=opts.width;if(opts.location==='bottom'){rotate='180 8 4';}else if(opts.location==='left'){height=opts.width;width=opts.height;rotate='270 8 8';}else if(opts.location==='right'){height=opts.width;width=opts.height;rotate='90 4 4';}return'data:image/svg+xml,%3Csvg%20width%3D%22'+width+'%22%20height%3D%22'+height+'%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpolygon%20points%3D%220%2C%200%208%2C%208%2016%2C0%22%20fill%3D%22'+opts.color+'%22%20transform%3D%22scale%28'+opts.scale+'%29%20rotate%28'+rotate+'%29%22%3E%3C%2Fpolygon%3E%3C%2Fsvg%3E';}/** * Calculate styles based on those passed in with the step, or calculated opts, or props @@ -10,7 +10,7 @@ if(nextAllowClicksThruHole!==allowClicksThruHole){if(nextAllowClicksThruHole){do * @param {string} opts.positonBaseClass Base position of tooltip (top, bottom, left, right) * @param {Object} props Positioning properties: cssPosition, xPos, and yPos * @returns {Object} Calculated styles for arrow, buttons, header, hole, and tooltip - */},{key:'setStyles',value:function setStyles(stepStyles,opts,props){var holePadding=props.holePadding,step=props.step,xPos=props.xPos,yPos=props.yPos;var isFixed=step.isFixed===true;var styles={arrow:{left:opts.arrowPosition},buttons:{},header:{},hole:{},tooltip:{position:isFixed?'fixed':'absolute',top:Math.round(yPos),left:Math.round(xPos)}};styles.hole={top:Math.round(opts.rect.top-(isFixed?0:document.body.getBoundingClientRect().top)-holePadding),left:Math.round(opts.rect.left-holePadding),width:Math.round(opts.rect.width+holePadding*2),height:Math.round(opts.rect.height+holePadding*2)};if(isFixed){styles.hole.position='fixed';}styles.buttons={back:{},close:{},primary:{},skip:{}};/* Styling */if(stepStyles){if(stepStyles.backgroundColor){styles.arrow.backgroundImage='url("'+this.generateArrow({location:opts.positonBaseClass,color:stepStyles.backgroundColor})+'")';styles.tooltip.backgroundColor=stepStyles.backgroundColor;}if(stepStyles.borderRadius){styles.tooltip.borderRadius=stepStyles.borderRadius;}if(stepStyles.color){styles.buttons.primary.color=stepStyles.color;styles.buttons.close.color=stepStyles.color;styles.buttons.skip.color=stepStyles.color;styles.header.color=stepStyles.color;styles.tooltip.color=stepStyles.color;if(stepStyles.mainColor&&stepStyles.mainColor===stepStyles.color){styles.buttons.primary.color=stepStyles.backgroundColor;}}if(stepStyles.mainColor){styles.buttons.primary.backgroundColor=stepStyles.mainColor;styles.buttons.back.color=stepStyles.mainColor;styles.header.borderColor=stepStyles.mainColor;}if(stepStyles.textAlign){styles.tooltip.textAlign=stepStyles.textAlign;}if(stepStyles.width){styles.tooltip.width=stepStyles.width;}if(stepStyles.back){styles.buttons.back=_extends({},styles.buttons.back,stepStyles.back);}if(stepStyles.arrow){styles.arrow=_extends({},styles.arrow,stepStyles.arrow);}if(stepStyles.button){styles.buttons.primary=_extends({},styles.buttons.primary,stepStyles.button);}if(stepStyles.close){styles.buttons.close=_extends({},styles.buttons.close,stepStyles.close);}if(stepStyles.skip){styles.buttons.skip=_extends({},styles.buttons.skip,stepStyles.skip);}if(stepStyles.hole){styles.hole=_extends({},stepStyles.hole,styles.hole);}}return styles;}},{key:'setOpts',value:function setOpts(props){var animate=props.animate,position=props.position,standalone=props.standalone,target=props.target,xPos=props.xPos;var tooltip=document.querySelector('.joyride-tooltip');var opts={classes:['joyride-tooltip'],rect:target.getBoundingClientRect(),positionClass:position};opts.positonBaseClass=opts.positionClass.match(/-/)?opts.positionClass.split('-')[0]:opts.positionClass;if((/^bottom$/.test(opts.positionClass)||/^top$/.test(opts.positionClass))&&xPos>-1){opts.tooltip={width:450};if(tooltip){opts.tooltip=tooltip.getBoundingClientRect();}opts.targetMiddle=opts.rect.left+opts.rect.width/2;opts.arrowPosition=((opts.targetMiddle-xPos)/opts.tooltip.width*100).toFixed(2);opts.arrowPosition=this.getArrowPosition(opts.arrowPosition)+'%';}if(standalone){opts.classes.push('joyride-tooltip--standalone');}if(opts.positonBaseClass!==opts.positionClass){opts.classes.push(opts.positonBaseClass);}opts.classes.push(opts.positionClass);if(animate){opts.classes.push('joyride-tooltip--animate');}return opts;}},{key:'render',value:function render(){var _props3=this.props,buttons=_props3.buttons,disableOverlay=_props3.disableOverlay,onClick=_props3.onClick,selector=_props3.selector,showOverlay=_props3.showOverlay,step=_props3.step,target=_props3.target,type=_props3.type;if(!target){return undefined;}var opts=this.state.opts;var styles=this.state.styles;var output={};if(step.title){output.header=_react2.default.createElement('div',{className:'joyride-tooltip__header',style:styles.header},step.title);}if(buttons.skip){output.skip=_react2.default.createElement('button',{className:'joyride-tooltip__button joyride-tooltip__button--skip',style:styles.buttons.skip,'data-type':'skip',onClick:onClick},buttons.skip);}if(!step.text||typeof step.text==='string'){output.main=_react2.default.createElement('div',{className:'joyride-tooltip__main',dangerouslySetInnerHTML:{__html:step.text||''}});}else{output.main=_react2.default.createElement('div',{className:'joyride-tooltip__main'},step.text);}if(buttons.secondary){output.secondary=_react2.default.createElement('button',{className:'joyride-tooltip__button joyride-tooltip__button--secondary',style:styles.buttons.back,'data-type':'back',onClick:onClick},buttons.secondary);}if(step.event==='hover'){styles.buttons.close.opacity=0;}output.tooltipComponent=_react2.default.createElement('div',{className:opts.classes.join(' '),style:styles.tooltip,'data-target':selector},_react2.default.createElement('div',{className:'joyride-tooltip__triangle joyride-tooltip__triangle-'+opts.positionClass,style:styles.arrow}),_react2.default.createElement('button',{className:'joyride-tooltip__close'+(output.header?' joyride-tooltip__close--header':''),style:styles.buttons.close,'data-type':'close',onClick:onClick}),output.header,output.main,_react2.default.createElement('div',{className:'joyride-tooltip__footer'},output.skip,output.secondary,_react2.default.createElement('button',{className:'joyride-tooltip__button joyride-tooltip__button--primary',style:styles.buttons.primary,'data-type':['single','casual'].indexOf(type)>-1?'close':'next',onClick:onClick},buttons.primary)));if(showOverlay){output.hole=_react2.default.createElement('div',{className:'joyride-hole '+_utils.browser,style:styles.hole});}if(!showOverlay){return output.tooltipComponent;}var overlayStyles={cursor:disableOverlay?'default':'pointer',height:document.body.clientHeight,pointerEvents:this.state.mouseOverHole?'none':'auto'};return _react2.default.createElement('div',{className:'joyride-overlay',style:overlayStyles,'data-type':'close',onClick:!disableOverlay?onClick:undefined},output.hole,output.tooltipComponent);}}]);return JoyrideTooltip;}(_react2.default.Component),_class.propTypes={allowClicksThruHole:_react2.default.PropTypes.bool.isRequired,animate:_react2.default.PropTypes.bool.isRequired,buttons:_react2.default.PropTypes.object.isRequired,disableOverlay:_react2.default.PropTypes.bool,holePadding:_react2.default.PropTypes.number,onClick:_react2.default.PropTypes.func.isRequired,onRender:_react2.default.PropTypes.func.isRequired,// position of tooltip with respect to target + */},{key:'setStyles',value:function setStyles(stepStyles,opts,props){var holePadding=props.holePadding,step=props.step,xPos=props.xPos,yPos=props.yPos;var isFixed=step.isFixed===true;var styles={arrow:{left:opts.arrowPosition},buttons:{},header:{},hole:{},tooltip:{position:isFixed?'fixed':'absolute',top:Math.round(yPos),left:Math.round(xPos)}};styles.hole={top:Math.round(opts.rect.top-(isFixed?0:document.body.getBoundingClientRect().top)-holePadding),left:Math.round(opts.rect.left-holePadding),width:Math.round(opts.rect.width+holePadding*2),height:Math.round(opts.rect.height+holePadding*2)};if(isFixed){styles.hole.position='fixed';}styles.buttons={back:{},close:{},primary:{},skip:{}};/* Styling *//* istanbul ignore else */if(stepStyles){if(stepStyles.backgroundColor){styles.arrow.backgroundImage='url("'+this.generateArrow({location:opts.positonBaseClass,color:stepStyles.backgroundColor})+'")';styles.tooltip.backgroundColor=stepStyles.backgroundColor;}if(stepStyles.borderRadius){styles.tooltip.borderRadius=stepStyles.borderRadius;}if(stepStyles.color){styles.buttons.primary.color=stepStyles.color;styles.buttons.close.color=stepStyles.color;styles.buttons.skip.color=stepStyles.color;styles.header.color=stepStyles.color;styles.tooltip.color=stepStyles.color;if(stepStyles.mainColor&&stepStyles.mainColor===stepStyles.color){styles.buttons.primary.color=stepStyles.backgroundColor;}}if(stepStyles.mainColor){styles.buttons.primary.backgroundColor=stepStyles.mainColor;styles.buttons.back.color=stepStyles.mainColor;styles.header.borderColor=stepStyles.mainColor;}if(stepStyles.textAlign){styles.tooltip.textAlign=stepStyles.textAlign;}if(stepStyles.width){styles.tooltip.width=stepStyles.width;}if(stepStyles.back){styles.buttons.back=_extends({},styles.buttons.back,stepStyles.back);}if(stepStyles.arrow){styles.arrow=_extends({},styles.arrow,stepStyles.arrow);}if(stepStyles.button){styles.buttons.primary=_extends({},styles.buttons.primary,stepStyles.button);}if(stepStyles.close){styles.buttons.close=_extends({},styles.buttons.close,stepStyles.close);}if(stepStyles.skip){styles.buttons.skip=_extends({},styles.buttons.skip,stepStyles.skip);}if(stepStyles.hole){styles.hole=_extends({},stepStyles.hole,styles.hole);}}return styles;}},{key:'setOpts',value:function setOpts(props){var animate=props.animate,position=props.position,standalone=props.standalone,target=props.target,xPos=props.xPos;var tooltip=document.querySelector('.joyride-tooltip');var opts={classes:['joyride-tooltip'],rect:target.getBoundingClientRect(),positionClass:position};opts.positonBaseClass=opts.positionClass.match(/-/)?opts.positionClass.split('-')[0]:opts.positionClass;if((/^bottom$/.test(opts.positionClass)||/^top$/.test(opts.positionClass))&&xPos>-1){opts.tooltip={width:450};/* istanbul ignore else */if(tooltip){opts.tooltip=tooltip.getBoundingClientRect();}opts.targetMiddle=opts.rect.left+opts.rect.width/2;opts.arrowPosition=((opts.targetMiddle-xPos)/opts.tooltip.width*100).toFixed(2);opts.arrowPosition=this.getArrowPosition(opts.arrowPosition)+'%';}if(standalone){opts.classes.push('joyride-tooltip--standalone');}if(opts.positonBaseClass!==opts.positionClass){opts.classes.push(opts.positonBaseClass);}opts.classes.push(opts.positionClass);if(animate){opts.classes.push('joyride-tooltip--animate');}return opts;}},{key:'render',value:function render(){var _props3=this.props,buttons=_props3.buttons,disableOverlay=_props3.disableOverlay,onClick=_props3.onClick,selector=_props3.selector,showOverlay=_props3.showOverlay,step=_props3.step,target=_props3.target,type=_props3.type;if(!target){return undefined;}var opts=this.state.opts;var styles=this.state.styles;var output={};if(step.title){output.header=_react2.default.createElement('div',{className:'joyride-tooltip__header',style:styles.header},step.title);}if(buttons.skip){output.skip=_react2.default.createElement('button',{className:'joyride-tooltip__button joyride-tooltip__button--skip',style:styles.buttons.skip,'data-type':'skip',onClick:onClick},buttons.skip);}if(!step.text||typeof step.text==='string'){output.main=_react2.default.createElement('div',{className:'joyride-tooltip__main',dangerouslySetInnerHTML:{__html:step.text||''}});}else{output.main=_react2.default.createElement('div',{className:'joyride-tooltip__main'},step.text);}if(buttons.secondary){output.secondary=_react2.default.createElement('button',{className:'joyride-tooltip__button joyride-tooltip__button--secondary',style:styles.buttons.back,'data-type':'back',onClick:onClick},buttons.secondary);}if(step.event==='hover'){styles.buttons.close.opacity=0;}output.tooltipComponent=_react2.default.createElement('div',{className:opts.classes.join(' '),style:styles.tooltip,'data-target':selector},_react2.default.createElement('div',{className:'joyride-tooltip__triangle joyride-tooltip__triangle-'+opts.positionClass,style:styles.arrow}),_react2.default.createElement('button',{className:'joyride-tooltip__close'+(output.header?' joyride-tooltip__close--header':''),style:styles.buttons.close,'data-type':'close',onClick:onClick}),output.header,output.main,_react2.default.createElement('div',{className:'joyride-tooltip__footer'},output.skip,output.secondary,_react2.default.createElement('button',{className:'joyride-tooltip__button joyride-tooltip__button--primary',style:styles.buttons.primary,'data-type':['single','casual'].indexOf(type)>-1?'close':'next',onClick:onClick},buttons.primary)));if(showOverlay){output.hole=_react2.default.createElement('div',{className:'joyride-hole '+_utils.browser,style:styles.hole});}if(!showOverlay){return output.tooltipComponent;}var overlayStyles={cursor:disableOverlay?'default':'pointer',height:document.body.clientHeight,pointerEvents:this.state.mouseOverHole?'none':'auto'};return _react2.default.createElement('div',{className:'joyride-overlay',style:overlayStyles,'data-type':'close',onClick:!disableOverlay?onClick:undefined},output.hole,output.tooltipComponent);}}]);return JoyrideTooltip;}(_react2.default.Component),_class.propTypes={allowClicksThruHole:_react2.default.PropTypes.bool.isRequired,animate:_react2.default.PropTypes.bool.isRequired,buttons:_react2.default.PropTypes.object.isRequired,disableOverlay:_react2.default.PropTypes.bool,holePadding:_react2.default.PropTypes.number,onClick:_react2.default.PropTypes.func.isRequired,onRender:_react2.default.PropTypes.func.isRequired,// position of tooltip with respect to target position:_react2.default.PropTypes.oneOf(['top','top-left','top-right','bottom','bottom-left','bottom-right','right','left']).isRequired,// sanitized selector string selector:_react2.default.PropTypes.string.isRequired,showOverlay:_react2.default.PropTypes.bool.isRequired,standalone:_react2.default.PropTypes.bool,step:_react2.default.PropTypes.object.isRequired,// DOM element to target target:_react2.default.PropTypes.object.isRequired,type:_react2.default.PropTypes.string.isRequired,xPos:_react2.default.PropTypes.oneOfType([_react2.default.PropTypes.number,_react2.default.PropTypes.string]).isRequired,yPos:_react2.default.PropTypes.oneOfType([_react2.default.PropTypes.number,_react2.default.PropTypes.string]).isRequired},_class.defaultProps={buttons:{primary:'Close'},step:{},xPos:-1000,yPos:-1000},_temp);exports.default=JoyrideTooltip; \ No newline at end of file diff --git a/lib/scripts/utils.js b/lib/scripts/utils.js index be5f4bf61..1ca0621de 100644 --- a/lib/scripts/utils.js +++ b/lib/scripts/utils.js @@ -8,7 +8,7 @@ var shorthandRegex=/^#?([a-f\d])([a-f\d])([a-f\d])$/i;var newHex=hex.replace(sho * Get the current browser * * @returns {String} - */function getBrowser(){if(typeof window==='undefined'){return'node';}// Opera 8.0+ + */function getBrowser(){/* istanbul ignore if */if(typeof window==='undefined'){return'node';}// Opera 8.0+ var isOpera=Boolean(window.opera)||navigator.userAgent.indexOf(' OPR/')>=0;// Firefox 1.0+ var isFirefox=typeof InstallTrigger!=='undefined';// Chrome 1+ var isChrome=!!window.chrome&&!!window.chrome.webstore;// Safari <= 9 "[object HTMLElementConstructor]" @@ -17,7 +17,7 @@ var isIE=Boolean(document.documentMode);// At least IE6 return isOpera?'opera':isFirefox?'firefox':isChrome?'chrome':isSafari?'safari':isIE?'ie':'';}var browser=exports.browser=getBrowser();/** * Get DOM document root element * @returns {Element} - */function getRootEl(){return['ie','firefox'].indexOf(getBrowser())>-1?document.documentElement:document.body;}/** + */function getRootEl(){return['ie','firefox'].indexOf(browser)>-1?document.documentElement:document.body;}/** * Log method calls if debug is enabled * * @private @@ -28,11 +28,11 @@ return isOpera?'opera':isFirefox?'firefox':isChrome?'chrome':isSafari?'safari':i * @param {boolean} [arg.debug] - Nothing will be logged unless debug is true */function logger(_ref){var _ref$type=_ref.type,type=_ref$type===undefined?'joyride':_ref$type,msg=_ref.msg,_ref$warn=_ref.warn,warn=_ref$warn===undefined?false:_ref$warn,_ref$debug=_ref.debug,debug=_ref$debug===undefined?false:_ref$debug;var loggingFunction=warn?console.warn||console.error:console.log;//eslint-disable-line no-console if(debug){console.log('%c'+type,'color: #760bc5; font-weight: bold; font-size: 12px;');//eslint-disable-line no-console -if(msg){if(Array.isArray(msg)){loggingFunction.apply(console,msg);}else{loggingFunction.apply(console,[msg]);}}}}/** +/* istanbul ignore else */if(msg){if(Array.isArray(msg)){loggingFunction.apply(console,msg);}else{loggingFunction.apply(console,[msg]);}}}}/** * Check for deprecated selector styles, return stringified, safer versions * * @param {string|Object} selector - The selector provided in a step object * @returns {string} A cleaned-up selector string */function sanitizeSelector(selector){if(selector.dataset&&selector.dataset.reactid){console.warn('Deprecation warning: React 15.0 removed reactid. Update your code.');//eslint-disable-line no-console return'[data-reactid="'+selector.dataset.reactid+'"]';}else if(selector.dataset){console.error('Unsupported error: React 15.0+ doesn’t write reactid to the DOM anymore, please use a plain class in your step.',selector);//eslint-disable-line no-console -if(selector.className){return'.'+selector.className.replace(' ','.');}}return selector;} \ No newline at end of file +/* istanbul ignore else */if(selector.className){return'.'+selector.className.replace(' ','.');}}return selector;} \ No newline at end of file diff --git a/package.json b/package.json index ea907f3c1..fb5093383 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-joyride", - "version": "1.9.2", + "version": "1.9.3", "description": "Create walkthroughs and guided tours for your apps", "author": "Gil Barbara ", "repository": {