Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-joyride
Advanced tools
react-joyride - npm Package Compare versions
Comparing version 1.4.2 to 1.4.4
@@ -1,1 +0,1 @@ | ||
| module.exports = require('./lib/scripts/Component.js'); | ||
| module.exports = require('./lib/scripts/Joyride.js'); |
@@ -1,96 +0,1 @@ | ||
| var React = require('react'), | ||
| hexToRGB = require('./utils.js').hexToRgb; | ||
| var isTouch = false; | ||
| if (typeof window !== 'undefined') { | ||
| isTouch = 'ontouchstart' in window || navigator.msMaxTouchPoints; | ||
| } | ||
| var Beacon = React.createClass({ | ||
| displayName: 'JoyrideBeacon', | ||
| propTypes: { | ||
| cssPosition: React.PropTypes.string.isRequired, | ||
| eventType: React.PropTypes.string.isRequired, | ||
| onTrigger: React.PropTypes.func.isRequired, | ||
| xPos: React.PropTypes.oneOfType([ | ||
| React.PropTypes.number, | ||
| React.PropTypes.string | ||
| ]).isRequired, | ||
| yPos: React.PropTypes.oneOfType([ | ||
| React.PropTypes.number, | ||
| React.PropTypes.string | ||
| ]).isRequired | ||
| }, | ||
| getDefaultProps: function() { | ||
| return { | ||
| cssPosition: 'absolute', | ||
| xPos: -1000, | ||
| yPos: -1000 | ||
| }; | ||
| }, | ||
| render: function() { | ||
| var props = this.props, | ||
| stepStyles = props.step.style || {}, | ||
| rgb, | ||
| styles = { | ||
| beacon: { | ||
| left: props.xPos, | ||
| position: props.cssPosition === 'fixed' ? 'fixed' : 'absolute', | ||
| top: props.yPos | ||
| }, | ||
| inner: {}, | ||
| outer: {} | ||
| }; | ||
| if (stepStyles.beacon) { | ||
| if (typeof stepStyles.beacon === 'string') { | ||
| rgb = hexToRGB(stepStyles.beacon); | ||
| styles.inner.backgroundColor = stepStyles.beacon; | ||
| styles.outer = { | ||
| backgroundColor: 'rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', 0.2)', | ||
| borderColor: stepStyles.beacon | ||
| }; | ||
| } | ||
| else { | ||
| if (stepStyles.beacon.inner) { | ||
| styles.inner.backgroundColor = stepStyles.beacon.inner; | ||
| } | ||
| if (stepStyles.beacon.outer) { | ||
| rgb = hexToRGB(stepStyles.beacon.outer); | ||
| styles.outer = { | ||
| backgroundColor: 'rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', 0.4)', | ||
| borderColor: stepStyles.beacon.outer | ||
| }; | ||
| } | ||
| } | ||
| } | ||
| return ( | ||
| React.createElement('a', { | ||
| href: '#', | ||
| className: 'joyride-beacon', | ||
| style: styles.beacon, | ||
| onClick: props.eventType === 'click' || isTouch ? props.onTrigger : null, | ||
| onMouseEnter: props.eventType === 'hover' && !isTouch ? props.onTrigger : null | ||
| }, | ||
| React.createElement('span', { | ||
| className: 'joyride-beacon__inner', | ||
| style: styles.inner | ||
| }), | ||
| React.createElement('span', { | ||
| className: 'joyride-beacon__outer', | ||
| style: styles.outer | ||
| }) | ||
| ) | ||
| ); | ||
| } | ||
| }); | ||
| module.exports = Beacon; | ||
| 'use strict';Object.defineProperty(exports,"__esModule",{value:true});exports.default=undefined;var _getPrototypeOf=require('babel-runtime/core-js/object/get-prototype-of');var _getPrototypeOf2=_interopRequireDefault(_getPrototypeOf);var _classCallCheck2=require('babel-runtime/helpers/classCallCheck');var _classCallCheck3=_interopRequireDefault(_classCallCheck2);var _createClass2=require('babel-runtime/helpers/createClass');var _createClass3=_interopRequireDefault(_createClass2);var _possibleConstructorReturn2=require('babel-runtime/helpers/possibleConstructorReturn');var _possibleConstructorReturn3=_interopRequireDefault(_possibleConstructorReturn2);var _inherits2=require('babel-runtime/helpers/inherits');var _inherits3=_interopRequireDefault(_inherits2);var _class,_temp;var _react=require('react');var _react2=_interopRequireDefault(_react);var _utils=require('./utils');function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj};}var isTouch=false;if(typeof window!=='undefined'){isTouch='ontouchstart'in window||navigator.msMaxTouchPoints;}var Beacon=(_temp=_class=function(_React$Component){(0,_inherits3.default)(Beacon,_React$Component);function Beacon(props){(0,_classCallCheck3.default)(this,Beacon);var _this=(0,_possibleConstructorReturn3.default)(this,(0,_getPrototypeOf2.default)(Beacon).call(this,props));_this.displayName='JoyrideBeacon';return _this;}(0,_createClass3.default)(Beacon,[{key:'render',value:function render(){var props=this.props;var styles={beacon:{left:props.xPos,position:props.cssPosition==='fixed'?'fixed':'absolute',top:props.yPos},inner:{},outer:{}};var stepStyles=props.step.style||{};var rgb=void 0;if(stepStyles.beacon){if(typeof stepStyles.beacon==='string'){rgb=(0,_utils.hexToRGB)(stepStyles.beacon);styles.inner.backgroundColor=stepStyles.beacon;styles.outer={backgroundColor:'rgba('+rgb.r+', '+rgb.g+', '+rgb.b+', 0.2)',borderColor:stepStyles.beacon};}else{if(stepStyles.beacon.inner){styles.inner.backgroundColor=stepStyles.beacon.inner;}if(stepStyles.beacon.outer){rgb=(0,_utils.hexToRGB)(stepStyles.beacon.outer);styles.outer={backgroundColor:'rgba('+rgb.r+', '+rgb.g+', '+rgb.b+', 0.4)',borderColor:stepStyles.beacon.outer};}}}return _react2.default.createElement('a',{href:'#',className:'joyride-beacon',style:styles.beacon,onClick:props.eventType==='click'||isTouch?props.onTrigger:null,onMouseEnter:props.eventType==='hover'&&!isTouch?props.onTrigger:null},_react2.default.createElement('span',{className:'joyride-beacon__inner',style:styles.inner}),_react2.default.createElement('span',{className:'joyride-beacon__outer',style:styles.outer}));}}]);return Beacon;}(_react2.default.Component),_class.propTypes={cssPosition:_react2.default.PropTypes.string.isRequired,eventType:_react2.default.PropTypes.string.isRequired,onTrigger:_react2.default.PropTypes.func.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={cssPosition:'absolute',xPos:-1000,yPos:-1000},_temp);exports.default=Beacon; |
@@ -1,307 +0,1 @@ | ||
| var React = require('react'), | ||
| assign = require('object-assign'); | ||
| var Tooltip = React.createClass({ | ||
| displayName: 'JoyrideTooltip', | ||
| propTypes: { | ||
| animate: React.PropTypes.bool.isRequired, | ||
| browser: React.PropTypes.string.isRequired, | ||
| buttons: React.PropTypes.object.isRequired, | ||
| cssPosition: React.PropTypes.string.isRequired, | ||
| disableOverlay: React.PropTypes.bool, | ||
| onClick: React.PropTypes.func.isRequired, | ||
| showOverlay: React.PropTypes.bool.isRequired, | ||
| standalone: React.PropTypes.bool, | ||
| step: React.PropTypes.object.isRequired, | ||
| type: React.PropTypes.string.isRequired, | ||
| xPos: React.PropTypes.oneOfType([ | ||
| React.PropTypes.number, | ||
| React.PropTypes.string | ||
| ]).isRequired, | ||
| yPos: React.PropTypes.oneOfType([ | ||
| React.PropTypes.number, | ||
| React.PropTypes.string | ||
| ]).isRequired | ||
| }, | ||
| getDefaultProps: function() { | ||
| return { | ||
| browser: 'chrome', | ||
| buttons: { | ||
| primary: 'Close' | ||
| }, | ||
| cssPosition: 'absolute', | ||
| step: {}, | ||
| xPos: -1000, | ||
| yPos: -1000 | ||
| }; | ||
| }, | ||
| _getArrowPosition: function(position) { | ||
| var arrowPosition; | ||
| if (window.innerWidth < 480) { | ||
| arrowPosition = (position < 8 ? 8 : (position > 92 ? 92 : position)); | ||
| } | ||
| else if (window.innerWidth < 1024) { | ||
| arrowPosition = (position < 6 ? 6 : (position > 94 ? 94 : position)); | ||
| } | ||
| else { | ||
| arrowPosition = (position < 5 ? 5 : (position > 95 ? 95 : position)); | ||
| } | ||
| return arrowPosition; | ||
| }, | ||
| _generateArrow: function(opts) { | ||
| var width, | ||
| height, | ||
| rotate; | ||
| opts = opts || {}; | ||
| 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'; | ||
| }, | ||
| _setStyles: function(opts, styles, stepStyles) { | ||
| styles.hole = { | ||
| top: Math.round((opts.target.top - document.body.getBoundingClientRect().top) - 5), | ||
| left: Math.round(opts.target.left - 5), | ||
| width: Math.round(opts.target.width + 10), | ||
| height: Math.round(opts.target.height + 10) | ||
| }; | ||
| 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 = assign(styles.buttons.back, stepStyles.back); | ||
| } | ||
| if (stepStyles.button) { | ||
| styles.buttons.primary = assign(styles.buttons.primary, stepStyles.button); | ||
| } | ||
| if (stepStyles.close) { | ||
| styles.buttons.close = assign(styles.buttons.close, stepStyles.close); | ||
| } | ||
| if (stepStyles.skip) { | ||
| styles.buttons.skip = assign(styles.buttons.skip, stepStyles.skip); | ||
| } | ||
| if (stepStyles.hole) { | ||
| styles.hole = assign(stepStyles.hole, styles.hole); | ||
| } | ||
| } | ||
| return styles; | ||
| }, | ||
| render: function() { | ||
| var props = this.props, | ||
| step = props.step, | ||
| opts = { | ||
| classes: ['joyride-tooltip'], | ||
| target: document.querySelector(step.selector).getBoundingClientRect(), | ||
| positionClass: step.position | ||
| }, | ||
| styles = { | ||
| arrow: {}, | ||
| buttons: {}, | ||
| header: {}, | ||
| hole: {}, | ||
| tooltip: { | ||
| position: this.props.cssPosition === 'fixed' ? 'fixed' : 'absolute', | ||
| top: Math.round(this.props.yPos), | ||
| left: Math.round(this.props.xPos) | ||
| } | ||
| }; | ||
| opts.positonBaseClass = opts.positionClass.match(/-/) ? opts.positionClass.split('-')[0] : opts.positionClass; | ||
| if ((/^bottom$/.test(opts.positionClass) || /^top$/.test(opts.positionClass)) && props.xPos > -1) { | ||
| opts.tooltip = document.querySelector('.joyride-tooltip').getBoundingClientRect(); | ||
| opts.targetMiddle = (opts.target.left + opts.target.width / 2); | ||
| opts.arrowPosition = (((opts.targetMiddle - props.xPos) / opts.tooltip.width) * 100).toFixed(2); | ||
| opts.arrowPosition = this._getArrowPosition(opts.arrowPosition) + '%'; | ||
| styles.arrow.left = opts.arrowPosition; | ||
| } | ||
| styles = this._setStyles(opts, styles, step.style); | ||
| if (props.standalone) { | ||
| opts.classes.push('joyride-tooltip--standalone'); | ||
| } | ||
| if (opts.positonBaseClass) { | ||
| opts.classes.push(opts.positonBaseClass); | ||
| } | ||
| opts.classes.push(opts.positionClass); | ||
| if (props.animate) { | ||
| opts.classes.push('joyride-tooltip--animate'); | ||
| } | ||
| if (step.title) { | ||
| opts.header = ( | ||
| React.createElement('div', { | ||
| className: 'joyride-tooltip__header', | ||
| style: styles.header | ||
| }, step.title) | ||
| ); | ||
| } | ||
| opts.tooltipElement = React.createElement('div', { | ||
| className: opts.classes.join(' '), | ||
| style: styles.tooltip, | ||
| 'data-target': step.selector | ||
| }, | ||
| React.createElement('div', { | ||
| className: 'joyride-tooltip__triangle joyride-tooltip__triangle-' + opts.positionClass, | ||
| style: styles.arrow | ||
| }), | ||
| React.createElement('a', { | ||
| href: '#', | ||
| className: 'joyride-tooltip__close' + (opts.header ? ' joyride-tooltip__close--header' : ''), | ||
| style: styles.buttons.close, | ||
| 'data-type': 'close', | ||
| onClick: props.onClick | ||
| }, '×'), | ||
| opts.header, | ||
| (!step.text || typeof step.text === 'string' ? | ||
| React.createElement('div', { | ||
| className: 'joyride-tooltip__main', | ||
| dangerouslySetInnerHTML: { __html: step.text || '' } | ||
| }) : | ||
| React.createElement('div', { | ||
| className: 'joyride-tooltip__main' | ||
| }, step.text)), | ||
| React.createElement('div', { | ||
| className: 'joyride-tooltip__footer' | ||
| }, | ||
| (props.buttons.skip ? | ||
| React.createElement('a', { | ||
| href: '#', | ||
| className: 'joyride-tooltip__button joyride-tooltip__button--skip', | ||
| style: styles.buttons.skip, | ||
| 'data-type': 'skip', | ||
| onClick: props.onClick | ||
| }, props.buttons.skip) | ||
| : false), | ||
| (props.buttons.secondary ? | ||
| React.createElement('a', { | ||
| href: '#', | ||
| className: 'joyride-tooltip__button joyride-tooltip__button--secondary', | ||
| style: styles.buttons.back, | ||
| 'data-type': 'back', | ||
| onClick: props.onClick | ||
| }, props.buttons.secondary) | ||
| : false), | ||
| React.createElement('a', { | ||
| href: '#', | ||
| className: 'joyride-tooltip__button joyride-tooltip__button--primary', | ||
| style: styles.buttons.primary, | ||
| 'data-type': props.type === 'single' ? 'close' : 'next', | ||
| onClick: props.onClick | ||
| }, props.buttons.primary) | ||
| ) | ||
| ); | ||
| if (props.showOverlay) { | ||
| opts.hole = React.createElement('div', { | ||
| className: 'joyride-hole ' + props.browser, | ||
| style: styles.hole | ||
| }); | ||
| } | ||
| if (!props.showOverlay) { | ||
| return opts.tooltipElement; | ||
| } | ||
| return React.createElement('div', { | ||
| className: 'joyride-overlay', | ||
| style: { | ||
| cursor: props.disableOverlay ? 'default': 'pointer', | ||
| height: document.body.clientHeight | ||
| }, | ||
| 'data-type': 'close', | ||
| onClick: !props.disableOverlay ? props.onClick: undefined | ||
| }, | ||
| opts.hole, | ||
| opts.tooltipElement | ||
| ); | ||
| } | ||
| }); | ||
| module.exports = Tooltip; | ||
| 'use strict';Object.defineProperty(exports,"__esModule",{value:true});exports.default=undefined;var _extends2=require('babel-runtime/helpers/extends');var _extends3=_interopRequireDefault(_extends2);var _getPrototypeOf=require('babel-runtime/core-js/object/get-prototype-of');var _getPrototypeOf2=_interopRequireDefault(_getPrototypeOf);var _classCallCheck2=require('babel-runtime/helpers/classCallCheck');var _classCallCheck3=_interopRequireDefault(_classCallCheck2);var _createClass2=require('babel-runtime/helpers/createClass');var _createClass3=_interopRequireDefault(_createClass2);var _possibleConstructorReturn2=require('babel-runtime/helpers/possibleConstructorReturn');var _possibleConstructorReturn3=_interopRequireDefault(_possibleConstructorReturn2);var _inherits2=require('babel-runtime/helpers/inherits');var _inherits3=_interopRequireDefault(_inherits2);var _class,_temp;var _react=require('react');var _react2=_interopRequireDefault(_react);function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj};}var Tooltip=(_temp=_class=function(_React$Component){(0,_inherits3.default)(Tooltip,_React$Component);function Tooltip(props){(0,_classCallCheck3.default)(this,Tooltip);var _this=(0,_possibleConstructorReturn3.default)(this,(0,_getPrototypeOf2.default)(Tooltip).call(this,props));_this.displayName='JoyrideTooltip';return _this;}(0,_createClass3.default)(Tooltip,[{key:'getArrowPosition',value:function getArrowPosition(position){var arrowPosition=void 0;if(window.innerWidth<480){arrowPosition=position<8?8:position>92?92:position;}else if(window.innerWidth<1024){arrowPosition=position<6?6:position>94?94:position;}else{arrowPosition=position<5?5:position>95?95:position;}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';}},{key:'setStyles',value:function setStyles(opts,styles,stepStyles){styles.hole={top:Math.round(opts.target.top-document.body.getBoundingClientRect().top-5),left:Math.round(opts.target.left-5),width:Math.round(opts.target.width+10),height:Math.round(opts.target.height+10)};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=(0,_extends3.default)({},styles.buttons.back,stepStyles.back);}if(stepStyles.button){styles.buttons.primary=(0,_extends3.default)({},styles.buttons.primary,stepStyles.button);}if(stepStyles.close){styles.buttons.close=(0,_extends3.default)({},styles.buttons.close,stepStyles.close);}if(stepStyles.skip){styles.buttons.skip=(0,_extends3.default)({},styles.buttons.skip,stepStyles.skip);}if(stepStyles.hole){styles.hole=(0,_extends3.default)({},stepStyles.hole,styles.hole);}}return styles;}},{key:'render',value:function render(){var props=this.props;var step=props.step;var opts={classes:['joyride-tooltip'],target:document.querySelector(step.selector).getBoundingClientRect(),positionClass:step.position};var output={};var styles={arrow:{},buttons:{},header:{},hole:{},tooltip:{position:this.props.cssPosition==='fixed'?'fixed':'absolute',top:Math.round(this.props.yPos),left:Math.round(this.props.xPos)}};opts.positonBaseClass=opts.positionClass.match(/-/)?opts.positionClass.split('-')[0]:opts.positionClass;if((/^bottom$/.test(opts.positionClass)||/^top$/.test(opts.positionClass))&&props.xPos>-1){opts.tooltip=document.querySelector('.joyride-tooltip').getBoundingClientRect();opts.targetMiddle=opts.target.left+opts.target.width/2;opts.arrowPosition=((opts.targetMiddle-props.xPos)/opts.tooltip.width*100).toFixed(2);opts.arrowPosition=this.getArrowPosition(opts.arrowPosition)+'%';styles.arrow.left=opts.arrowPosition;}styles=this.setStyles(opts,styles,step.style);if(props.standalone){opts.classes.push('joyride-tooltip--standalone');}if(opts.positonBaseClass){opts.classes.push(opts.positonBaseClass);}opts.classes.push(opts.positionClass);if(props.animate){opts.classes.push('joyride-tooltip--animate');}if(step.title){output.header=_react2.default.createElement('div',{className:'joyride-tooltip__header',style:styles.header},step.title);}if(props.buttons.skip){output.skip=_react2.default.createElement('a',{href:'#',className:'joyride-tooltip__button joyride-tooltip__button--skip',style:styles.buttons.skip,'data-type':'skip',onClick:props.onClick},props.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(props.buttons.secondary){output.secondary=_react2.default.createElement('a',{href:'#',className:'joyride-tooltip__button joyride-tooltip__button--secondary',style:styles.buttons.back,'data-type':'back',onClick:props.onClick},props.buttons.secondary);}output.tooltipElement=_react2.default.createElement('div',{className:opts.classes.join(' '),style:styles.tooltip,'data-target':step.selector},_react2.default.createElement('div',{className:'joyride-tooltip__triangle joyride-tooltip__triangle-'+opts.positionClass,style:styles.arrow}),_react2.default.createElement('a',{href:'#',className:'joyride-tooltip__close'+(output.header?' joyride-tooltip__close--header':''),style:styles.buttons.close,'data-type':'close',onClick:props.onClick},'×'),output.header,output.main,_react2.default.createElement('div',{className:'joyride-tooltip__footer'},output.skip,output.secondary,_react2.default.createElement('a',{href:'#',className:'joyride-tooltip__button joyride-tooltip__button--primary',style:styles.buttons.primary,'data-type':['single','casual'].indexOf(props.type)>-1?'close':'next',onClick:props.onClick},props.buttons.primary)));if(props.showOverlay){output.hole=_react2.default.createElement('div',{className:'joyride-hole '+props.browser,style:styles.hole});}if(!props.showOverlay){return output.tooltipElement;}return _react2.default.createElement('div',{className:'joyride-overlay',style:{cursor:props.disableOverlay?'default':'pointer',height:document.body.clientHeight},'data-type':'close',onClick:!props.disableOverlay?props.onClick:undefined},output.hole,output.tooltipElement);}}]);return Tooltip;}(_react2.default.Component),_class.propTypes={animate:_react2.default.PropTypes.bool.isRequired,browser:_react2.default.PropTypes.string.isRequired,buttons:_react2.default.PropTypes.object.isRequired,cssPosition:_react2.default.PropTypes.string.isRequired,disableOverlay:_react2.default.PropTypes.bool,onClick:_react2.default.PropTypes.func.isRequired,showOverlay:_react2.default.PropTypes.bool.isRequired,standalone:_react2.default.PropTypes.bool,step:_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={browser:'chrome',buttons:{primary:'Close'},cssPosition:'absolute',step:{},xPos:-1000,yPos:-1000},_temp);exports.default=Tooltip; |
@@ -1,16 +0,2 @@ | ||
| module.exports = { | ||
| hexToRgb: function(hex) { | ||
| // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF") | ||
| var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; | ||
| hex = hex.replace(shorthandRegex, function(m, r, g, b) { | ||
| return r + r + g + g + b + b; | ||
| }); | ||
| var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); | ||
| return result ? { | ||
| r: parseInt(result[1], 16), | ||
| g: parseInt(result[2], 16), | ||
| b: parseInt(result[3], 16) | ||
| } : null; | ||
| } | ||
| }; | ||
| "use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.hexToRGB=hexToRGB;function hexToRGB(hex){// Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF") | ||
| var shorthandRegex=/^#?([a-f\d])([a-f\d])([a-f\d])$/i;var newHex=hex.replace(shorthandRegex,function(m,r,g,b){return r+r+g+g+b+b;});var result=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(newHex);return result?{r:parseInt(result[1],16),g:parseInt(result[2],16),b:parseInt(result[3],16)}:null;} |
| { | ||
| "name": "react-joyride", | ||
| "version": "1.4.2", | ||
| "version": "1.4.4", | ||
| "description": "Create walkthroughs and guided tours for your apps", | ||
@@ -25,4 +25,3 @@ "author": "Gil Barbara <gilbarbara@gmail.com>", | ||
| "dependencies": { | ||
| "object-assign": "^4.0", | ||
| "scroll": "1.0" | ||
| "scroll": "^2.0" | ||
| }, | ||
@@ -34,38 +33,41 @@ "peerDependencies": { | ||
| "devDependencies": { | ||
| "babel-eslint": "^6.0", | ||
| "babel-preset-es2015": "^6.6", | ||
| "babel-core": "^6.10", | ||
| "babel-eslint": "^6.1", | ||
| "babel-plugin-add-module-exports": "^0.2", | ||
| "babel-plugin-transform-decorators-legacy": "^1.3", | ||
| "babel-plugin-transform-inline-environment-variables": "^6.8", | ||
| "babel-plugin-transform-object-assign": "^6.8", | ||
| "babel-plugin-transform-runtime": "^6.9", | ||
| "babel-preset-es2015": "^6.9", | ||
| "babel-preset-react": "^6.5", | ||
| "babel-register": "^6.7", | ||
| "babel-preset-stage-1": "^6.5", | ||
| "babel-register": "^6.9", | ||
| "core-decorators": "^0.12", | ||
| "del": "^2.2", | ||
| "eslint": "^2.7", | ||
| "eslint-plugin-react": "^5.0", | ||
| "expect": "^1.16", | ||
| "eslint": "^2.13", | ||
| "eslint-config-airbnb": "^9.0", | ||
| "eslint-plugin-import": "^1.9", | ||
| "eslint-plugin-jsx-a11y": "^1.5", | ||
| "eslint-plugin-react": "^5.2", | ||
| "expect": "^1.20", | ||
| "gulp": "^3.9", | ||
| "gulp-autoprefixer": "^3.1", | ||
| "gulp-babel": "^6.1", | ||
| "gulp-eslint": "^2.0", | ||
| "gulp-load-plugins": "^1.2", | ||
| "gulp-mocha": "^2.2", | ||
| "gulp-plumber": "^1.1", | ||
| "gulp-rename": "^1.2", | ||
| "gulp-sass": "^2.2", | ||
| "jsdom": "^8.3", | ||
| "merge-stream": "^1.0", | ||
| "mocha": "^2.4", | ||
| "react": "^15.0", | ||
| "react-addons-test-utils": "^15.0", | ||
| "react-dom": "^15.0", | ||
| "run-sequence": "^1.1" | ||
| "gulp-sass": "^2.3", | ||
| "jsdom": "^9.2", | ||
| "mocha": "^2.5", | ||
| "react": "^15.1", | ||
| "react-addons-test-utils": "^15.1", | ||
| "react-dom": "^15.1", | ||
| "run-sequence": "^1.2" | ||
| }, | ||
| "babel": { | ||
| "presets": [ | ||
| "es2015", | ||
| "react" | ||
| ] | ||
| }, | ||
| "scripts": { | ||
| "start": "gulp serve", | ||
| "lint": "gulp lint", | ||
| "lint": "eslint src test", | ||
| "build": "gulp build", | ||
| "test": "gulp test", | ||
| "test-watch": "./node_modules/.bin/_mocha -R min --watch --compilers js:babel-register $(find app/scripts/__tests__ -name *.spec.js)" | ||
| "prepublish": "npm run build", | ||
| "test": "./node_modules/.bin/_mocha --compilers js:babel-register --recursive --require ./test/setup.js" | ||
| }, | ||
@@ -72,0 +74,0 @@ "engines": { |
@@ -256,3 +256,3 @@ React Joyride | ||
| As of version 1.x you can style tooltips independently with these options: `backgroundColor`, `borderRadius`, `color`, `mainColor`, `textAlign` and `width`. | ||
| You can style tooltips independently with these options: `backgroundColor`, `borderRadius`, `color`, `mainColor`, `textAlign` and `width`. | ||
@@ -289,2 +289,5 @@ Also you can style `button`, `skip`, `back`, `close` and `hole` individually using standard style options. And `beacon` inner and outer colors. | ||
| }, | ||
| hole: { | ||
| backgroundColor: 'RGBA(201, 23, 33, 0.2)', | ||
| } | ||
| ... | ||
@@ -291,0 +294,0 @@ }, |
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Dependency count
- decreased by-25%
3
- Number of package files
- increased by7.69%
14
- Number of lines in readme file
- increased by0.89%
340
Worsened metrics
- Total package byte prevSize
- decreased by-1.93%
66807
- Dev dependency count
- increased by43.48%
33
- Lines of code
- decreased by-72.14%
358
- Number of low quality alerts
- increased by200%
3
- Number of medium supply chain risk alerts
- increased byInfinity%
1
Dependency changes
+ Addedscroll@2.0.3(transitive)
- Removedobject-assign@^4.0
- Removedease-component@1.0.0(transitive)
- Removedscroll@1.0.1(transitive)
Updatedscroll@^2.0