diff --git a/.codeclimate.yml b/.codeclimate.yml index 26bdfc23d..366d1d28c 100644 --- a/.codeclimate.yml +++ b/.codeclimate.yml @@ -26,6 +26,9 @@ ratings: - "**.jsx" - "**.scss" exclude_paths: + - coverage/**/* + - cypress/**/* + - es/**/* - lib/**/* - node_modules/**/* - - tests/**/* + - test/**/* diff --git a/lib/index.js b/lib/index.js deleted file mode 100644 index fd6b4f6f2..000000000 --- a/lib/index.js +++ /dev/null @@ -1,1470 +0,0 @@ -'use strict'; - -exports.__esModule = true; - -var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; - -var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; - -var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); - -var _react = require('react'); - -var _react2 = _interopRequireDefault(_react); - -var _propTypes = require('prop-types'); - -var _propTypes2 = _interopRequireDefault(_propTypes); - -var _scroll = require('scroll'); - -var _scroll2 = _interopRequireDefault(_scroll); - -var _nestedProperty = require('nested-property'); - -var _nestedProperty2 = _interopRequireDefault(_nestedProperty); - -var _utils = require('./utils'); - -var _Beacon = require('./Beacon'); - -var _Beacon2 = _interopRequireDefault(_Beacon); - -var _Tooltip = require('./Tooltip'); - -var _Tooltip2 = _interopRequireDefault(_Tooltip); - -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } - -function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } - -function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } - -function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } - -var defaultState = { - action: '', - index: 0, - isRunning: false, - isTourSkipped: false, - shouldRedraw: true, - shouldRenderTooltip: false, - shouldRun: false, - standaloneData: false, // The standalone tooltip data - xPos: -1000, - yPos: -1000 -}; - -var callbackTypes = { - STEP_BEFORE: 'step:before', - BEACON_BEFORE: 'beacon:before', - BEACON_TRIGGER: 'beacon:trigger', - TOOLTIP_BEFORE: 'tooltip:before', - STEP_AFTER: 'step:after', - STANDALONE_BEFORE: 'standalone:before', - STANDALONE_AFTER: 'standalone:after', - OVERLAY: 'overlay:click', - HOLE: 'hole:click', - FINISHED: 'finished', - TARGET_NOT_FOUND: 'error:target_not_found' -}; - -var DEFAULTS = { - position: 'top', - minWidth: 290 -}; - -var hasTouch = false; - -var Joyride = function (_React$Component) { - _inherits(Joyride, _React$Component); - - function Joyride(props) { - _classCallCheck(this, Joyride); - - var _this = _possibleConstructorReturn(this, (Joyride.__proto__ || Object.getPrototypeOf(Joyride)).call(this, props)); - - _this.handleKeyboardNavigation = function (e) { - var _this$state = _this.state, - index = _this$state.index, - shouldRenderTooltip = _this$state.shouldRenderTooltip; - var steps = _this.props.steps; - - var intKey = window.Event ? e.which : e.keyCode; - var hasSteps = void 0; - - if (shouldRenderTooltip) { - if ([32, 38, 40].indexOf(intKey) > -1) { - e.preventDefault(); - } - - if (intKey === 27) { - _this.toggleTooltip({ show: false, index: index + 1, action: 'esc' }); - } else if ([13, 32].indexOf(intKey) > -1) { - hasSteps = Boolean(steps[index + 1]); - _this.toggleTooltip({ show: hasSteps, index: index + 1, action: 'next' }); - } - } - }; - - _this.handleClickStandaloneTrigger = function (e) { - e.preventDefault(); - var _this$state2 = _this.state, - isRunning = _this$state2.isRunning, - standaloneData = _this$state2.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(); - } - } - }; - - _this.handleClickBeacon = function (e) { - e.preventDefault(); - var index = _this.state.index; - var steps = _this.props.steps; - - - _this.triggerCallback({ - action: e.type, - index: index, - type: callbackTypes.BEACON_TRIGGER, - step: steps[index] - }); - - _this.toggleTooltip({ show: true, index: index, action: 'beacon:' + e.type }); - }; - - _this.handleClickTooltip = function (e) { - var _this$state3 = _this.state, - index = _this$state3.index, - shouldRun = _this$state3.shouldRun; - var _this$props = _this.props, - steps = _this$props.steps, - type = _this$props.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] - }); - } - } - }; - - _this.handleRenderTooltip = function () { - _this.calcPlacement(); - }; - - _this.state = _extends({}, defaultState); - - _this.listeners = { - tooltips: {} - }; - return _this; - } - - _createClass(Joyride, [{ - key: 'componentDidMount', - value: function componentDidMount() { - var _this2 = this; - - var _props = this.props, - autoStart = _props.autoStart, - keyboardNavigation = _props.keyboardNavigation, - resizeDebounce = _props.resizeDebounce, - resizeDebounceDelay = _props.resizeDebounceDelay, - run = _props.run, - steps = _props.steps, - type = _props.type; - - - (0, _utils.logger)({ - type: 'joyride:initialized', - msg: [this.props], - debug: this.props.debug - }); - - var stepsAreValid = this.checkStepsValidity(steps); - if (steps && stepsAreValid && run) { - this.start(autoStart); - } - - if (resizeDebounce) { - var timeoutId = void 0; - - this.listeners.resize = function () { - clearTimeout(timeoutId); - timeoutId = setTimeout(function () { - timeoutId = null; - _this2.calcPlacement(); - }, resizeDebounceDelay); - }; - } else { - this.listeners.resize = function () { - _this2.calcPlacement(); - }; - } - window.addEventListener('resize', this.listeners.resize); - - /* istanbul ignore else */ - if (keyboardNavigation && type === 'continuous') { - this.listeners.keyboard = this.handleKeyboardNavigation; - document.body.addEventListener('keydown', this.listeners.keyboard); - } - - window.addEventListener('touchstart', function setHasTouch() { - hasTouch = true; - // Remove event listener once fired, otherwise it'll kill scrolling - // performance - window.removeEventListener('touchstart', setHasTouch); - }, false); - } - }, { - key: 'componentWillReceiveProps', - value: function componentWillReceiveProps(nextProps) { - (0, _utils.logger)({ - type: 'joyride:willReceiveProps', - msg: [nextProps], - debug: nextProps.debug - }); - - var _state = this.state, - isRunning = _state.isRunning, - shouldRun = _state.shouldRun, - standaloneData = _state.standaloneData; - var _props2 = this.props, - keyboardNavigation = _props2.keyboardNavigation, - run = _props2.run, - steps = _props2.steps, - stepIndex = _props2.stepIndex; - - var stepsChanged = nextProps.steps !== steps; - var stepIndexChanged = nextProps.stepIndex !== stepIndex && nextProps.stepIndex !== this.state.index; - var runChanged = nextProps.run !== run; - var shouldStart = false; - var didStop = false; - - if (stepsChanged && this.checkStepsValidity(nextProps.steps)) { - // Removed all steps, so reset - if (!nextProps.steps || !nextProps.steps.length) { - this.reset(); - } - // Start the joyride if steps were added for the first time, and run prop is true - else if (!steps.length && nextProps.run) { - shouldStart = true; - } - } - - /* istanbul ignore else */ - if (runChanged) { - // run prop was changed to off, so stop the joyride - if (run && !nextProps.run) { - this.stop(); - didStop = true; - } - // run prop was changed to on, so start the joyride - else if (!run && nextProps.run) { - shouldStart = true; - } - // Was not playing, but should, and isn't a standaloneData - else if (!isRunning && shouldRun && !standaloneData) { - shouldStart = true; - } - } - - /* istanbul ignore else */ - if (stepIndexChanged) { - var hasStep = nextProps.steps[nextProps.stepIndex]; - var shouldDisplay = hasStep && nextProps.autoStart; - if (runChanged && shouldStart) { - this.start(nextProps.autoStart, nextProps.steps, nextProps.stepIndex); - } - // Next prop is set to run, and the index has changed, but for some reason joyride is not running - // (maybe this is because of a target not mounted, and the app wants to skip to another step) - else if (nextProps.run && !isRunning) { - this.start(nextProps.autoStart, nextProps.steps, nextProps.stepIndex); - } else if (!didStop) { - this.toggleTooltip({ show: shouldDisplay, index: nextProps.stepIndex, steps: nextProps.steps, action: 'jump' }); - } - } - // Did not change the index, but need to start up the joyride - else if (shouldStart) { - this.start(nextProps.autoStart, nextProps.steps); - } - - // Update keyboard listeners if necessary - /* istanbul ignore else */ - if (!this.listeners.keyboard && (!keyboardNavigation && nextProps.keyboardNavigation || keyboardNavigation) && nextProps.type === 'continuous') { - this.listeners.keyboard = this.handleKeyboardNavigation; - document.body.addEventListener('keydown', this.listeners.keyboard); - } else if (this.listeners.keyboard && keyboardNavigation && (!nextProps.keyboardNavigation || nextProps.type !== 'continuous')) { - document.body.removeEventListener('keydown', this.listeners.keyboard); - delete this.listeners.keyboard; - } - } - }, { - key: 'componentWillUpdate', - value: function componentWillUpdate(nextProps, nextState) { - var _state2 = this.state, - index = _state2.index, - isRunning = _state2.isRunning, - shouldRenderTooltip = _state2.shouldRenderTooltip, - standaloneData = _state2.standaloneData; - var steps = this.props.steps; - var nextSteps = nextProps.steps; - - var step = steps[index]; - var nextStep = nextSteps[nextState.index]; - var hasRenderedTarget = Boolean(this.getStepTargetElement(nextStep)); - - // Standalone tooltip is being turned on - if (!standaloneData && nextState.standaloneData) { - this.triggerCallback({ - type: callbackTypes.STANDALONE_BEFORE, - step: nextState.standaloneData - }); - } - // Standalone tooltip is being turned off - else if (standaloneData && !nextState.standaloneData) { - this.triggerCallback({ - type: callbackTypes.STANDALONE_AFTER, - step: standaloneData - }); - } - - // Tried to start, but something went wrong and we're not actually running - if (nextState.action === 'start' && !nextState.isRunning) { - // There's a step to use, but there's no target in the DOM - if (nextStep && !hasRenderedTarget) { - console.warn('Target not mounted', nextStep, nextState.action); //eslint-disable-line no-console - this.triggerCallback({ - action: 'start', - index: nextState.index, - type: callbackTypes.TARGET_NOT_FOUND, - step: nextStep - }); - } - } - - // Started running from the beginning (the current index is 0) - if (!isRunning && nextState.isRunning && nextState.index === 0) { - this.triggerCallback({ - action: 'start', - index: nextState.index, - type: callbackTypes.STEP_BEFORE, - step: nextStep - }); - - // Not showing a tooltip yet, so we're going to show a beacon instead - /* istanbul ignore else */ - if (!nextState.shouldRenderTooltip) { - this.triggerCallback({ - action: 'start', - index: nextState.index, - type: callbackTypes.BEACON_BEFORE, - step: nextStep - }); - } - } - - // Joyride was running (it might still be), and the index has been changed - if (isRunning && nextState.index !== index) { - this.triggerCallback({ - action: nextState.action, - index: index, - type: callbackTypes.STEP_AFTER, - step: step - }); - - // Attempted to advance to a step with a target that cannot be found - /* istanbul ignore else */ - if (nextStep && !hasRenderedTarget) { - console.warn('Target not mounted', nextStep, nextState.action); //eslint-disable-line no-console - this.triggerCallback({ - action: nextState.action, - index: nextState.index, - type: callbackTypes.TARGET_NOT_FOUND, - step: nextStep - }); - } - // There's a next step and the index is > 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 - if (nextState.isRunning && (shouldRenderTooltip !== nextState.shouldRenderTooltip || nextState.index !== index)) { - // Going to show a tooltip - 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 (!nextState.isRunning && 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() { - 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 - * - * @private - * - * @param {boolean} [autorun] - Starts with the first tooltip opened - * @param {Array} [steps] - Array of steps, defaults to this.props.steps - * @param {number} [startIndex] - Optional step index to start joyride at - */ - - }, { - key: 'start', - value: function start(autorun) { - var steps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.props.steps; - var startIndex = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : this.state.index; - - var hasMountedTarget = Boolean(this.getStepTargetElement(steps[startIndex])); - var shouldRenderTooltip = autorun === true && hasMountedTarget; - - (0, _utils.logger)({ - type: 'joyride:start', - msg: ['autorun:', autorun === true], - debug: this.props.debug - }); - - this.setState({ - action: 'start', - index: startIndex, - isRunning: Boolean(steps.length) && hasMountedTarget, - shouldRenderTooltip: shouldRenderTooltip, - shouldRun: !steps.length - }); - } - - /** - * Stop the tour - * - * @private - */ - - }, { - key: 'stop', - value: function stop() { - (0, _utils.logger)({ - type: 'joyride:stop', - debug: this.props.debug - }); - - this.setState({ - isRunning: false, - shouldRenderTooltip: false - }); - } - - /** - * Move to the next step, if there is one. If there is no next step, hide the tooltip. - */ - - }, { - key: 'next', - value: function next() { - var _state4 = this.state, - index = _state4.index, - shouldRenderTooltip = _state4.shouldRenderTooltip; - var steps = this.props.steps; - - var nextIndex = index + 1; - - var shouldDisplay = Boolean(steps[nextIndex]) && shouldRenderTooltip; - - (0, _utils.logger)({ - type: 'joyride:next', - msg: ['new index:', nextIndex], - debug: this.props.debug - }); - this.toggleTooltip({ show: shouldDisplay, index: nextIndex, action: 'next' }); - } - - /** - * Move to the previous step, if there is one. If there is no previous step, hide the tooltip. - */ - - }, { - key: 'back', - value: function back() { - var _state5 = this.state, - index = _state5.index, - shouldRenderTooltip = _state5.shouldRenderTooltip; - var steps = this.props.steps; - - var previousIndex = index - 1; - - var shouldDisplay = Boolean(steps[previousIndex]) && shouldRenderTooltip; - - (0, _utils.logger)({ - type: 'joyride:back', - msg: ['new index:', previousIndex], - debug: this.props.debug - }); - this.toggleTooltip({ show: shouldDisplay, index: previousIndex, action: 'next' }); - } - - /** - * Reset Tour - * - * @param {boolean} [restart] - Starts the new tour right away - */ - - }, { - key: 'reset', - value: function reset(restart) { - var _state6 = this.state, - index = _state6.index, - isRunning = _state6.isRunning; - - var shouldRestart = restart === true; - - var newState = _extends({}, defaultState, { - isRunning: shouldRestart, - shouldRenderTooltip: this.props.autoStart - }); - - (0, _utils.logger)({ - type: 'joyride:reset', - msg: ['restart:', shouldRestart], - debug: this.props.debug - }); - // Force a re-render if necessary - if (shouldRestart && isRunning === shouldRestart && index === 0) { - this.forceUpdate(); - } - - this.setState(newState); - } - - /** - * Retrieve the current progress of your tour - * - * @returns {{index: number, percentageComplete: number, step: (object|null)}} - */ - - }, { - key: 'getProgress', - value: function getProgress() { - var index = this.state.index; - var steps = this.props.steps; - - - (0, _utils.logger)({ - type: 'joyride:getProgress', - msg: ['steps:', steps], - debug: this.props.debug - }); - - return { - index: index, - percentageComplete: parseFloat((index / steps.length * 100).toFixed(2).replace('.00', '')), - step: steps[index] - }; - } - - /** - * 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'; - - /* istanbul ignore else */ - if (eventType === 'hover') { - this.listeners.tooltips[key + 'mouseenter'] = { event: 'mouseenter', cb: this.handleClickStandaloneTrigger }; - this.listeners.tooltips[key + 'mouseleave'] = { event: 'mouseleave', cb: this.handleClickStandaloneTrigger }; - - 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.handleClickStandaloneTrigger }; - el.addEventListener('click', this.listeners.tooltips[key + 'click'].cb); - } - - /** - * Parse the incoming steps - * - * @deprecated - * - * @param {Array|Object} steps - * @returns {Array} - */ - - }, { - key: 'parseSteps', - value: function parseSteps(steps) { - console.warn('joyride.parseSteps() is deprecated. It is no longer necessary to parse steps before providing them to Joyride'); //eslint-disable-line no-console - - return steps; - } - - /** - * Verify that a step is valid - * - * @param {Object} step - A step object - * @returns {boolean} - True if the step is valid, false otherwise - */ - - }, { - 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: _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) { - /* 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 - * @param {Object} step - A step object - * @returns {Element} - A DOM element (if found) - */ - - }, { - key: 'getStepTargetElement', - value: function getStepTargetElement(step) { - var isValidStep = this.checkStepValidity(step); - if (!isValidStep) { - return null; - } - - var el = document.querySelector((0, _utils.sanitizeSelector)(step.selector)); - - if (!el) { - (0, _utils.logger)({ - type: 'joyride:getStepTargetElement', - msg: 'Target not rendered. For best results only add steps after they are mounted.', - warn: true, - debug: this.props.debug - }); - - return null; - } - - return el; - } - - /** - * Get an element actual dimensions with margin - * - * @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 || 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, - offsetParentSelector = _props4.offsetParentSelector, - scrollOffset = _props4.scrollOffset, - steps = _props4.steps; - - var step = steps[index]; - var target = this.getStepTargetElement(step); - var offsetParent = document.querySelector((0, _utils.sanitizeSelector)(offsetParentSelector)); - - if (!target) { - return 0; - } - - var rect = (0, _utils.getOffsetBoundingClientRect)(target, offsetParent); - 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; - - /* 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 - * @param {Event} e - Keyboard event - */ - - - /** - * Tooltip event listener - * - * @private - * @param {Event} e - Click event - */ - - - /** - * Beacon click event listener - * - * @private - * @param {Event} e - Click event - */ - - - /** - * Tooltip click event listener - * - * @private - * @param {Event} e - Click event - */ - - }, { - key: 'toggleTooltip', - - - /** - * Toggle Tooltip's visibility - * - * @private - * @param {Object} options - Immediately destructured argument object - * @param {Boolean} options.show - Render the tooltip or the beacon - * @param {Number} options.index - The tour's new index - * @param {string} [options.action] - The action being undertaken. - * @param {Array} [options.steps] - The array of step objects that is going to be rendered - */ - value: function toggleTooltip(_ref3) { - var show = _ref3.show, - _ref3$index = _ref3.index, - index = _ref3$index === undefined ? this.state.index : _ref3$index, - action = _ref3.action, - _ref3$steps = _ref3.steps, - steps = _ref3$steps === undefined ? this.props.steps : _ref3$steps; - - var nextStep = steps[index]; - var hasMountedTarget = Boolean(this.getStepTargetElement(nextStep)); - - this.setState({ - action: action, - index: index, - // Stop playing if there is no next step or can't find the target - isRunning: nextStep && hasMountedTarget ? this.state.isRunning : false, - // If we are not showing now, or there is no target, we'll need to redraw eventually - shouldRedraw: !show || !hasMountedTarget, - shouldRenderTooltip: show && hasMountedTarget, - xPos: -1000, - yPos: -1000 - }); - } - - /** - * Position absolute elements next to its target - * - * @private - */ - - }, { - key: 'calcPlacement', - value: function calcPlacement() { - var _state9 = this.state, - index = _state9.index, - isRunning = _state9.isRunning, - standaloneData = _state9.standaloneData, - shouldRenderTooltip = _state9.shouldRenderTooltip; - var _props5 = this.props, - offsetParentSelector = _props5.offsetParentSelector, - steps = _props5.steps, - tooltipOffset = _props5.tooltipOffset; - - var step = standaloneData || steps[index] || {}; - var displayTooltip = standaloneData ? true : shouldRenderTooltip; - var target = this.getStepTargetElement(step); - var offsetParent = document.querySelector((0, _utils.sanitizeSelector)(offsetParentSelector)); - - (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 scrollingElement = (0, _utils.getRootEl)().getBoundingClientRect(); - var scrollTop = step.isFixed === true ? 0 : scrollingElement.top; - var component = this.getElementDimensions(); - var rect = (0, _utils.getOffsetBoundingClientRect)(target, offsetParent); - - // 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; - } - - /* 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 overflowing elements. - * - * @private - * @param {Object} step - * - * @returns {string} - */ - - }, { - key: 'calcPosition', - value: function calcPosition(step) { - var _props6 = this.props, - offsetParentSelector = _props6.offsetParentSelector, - tooltipOffset = _props6.tooltipOffset; - - var scrollingElement = (0, _utils.getRootEl)(); - var scrollingElementRect = scrollingElement.getBoundingClientRect(); - var target = this.getStepTargetElement(step); - var offsetParent = document.querySelector((0, _utils.sanitizeSelector)(offsetParentSelector)); - var rect = (0, _utils.getOffsetBoundingClientRect)(target, offsetParent); - - var _getElementDimensions = this.getElementDimensions(), - height = _getElementDimensions.height, - _getElementDimensions2 = _getElementDimensions.width, - width = _getElementDimensions2 === undefined ? DEFAULTS.minWidth : _getElementDimensions2; - - var position = step.position || DEFAULTS.position; - - if (/^left/.test(position) && rect.left - (width + tooltipOffset) < 0) { - position = 'top'; - } else if (/^right/.test(position) && rect.left + rect.width + (width + tooltipOffset) > scrollingElementRect.width) { - position = 'bottom'; - } - - if (/^top/.test(position) && (rect.top + scrollingElement.scrollTop - (height + tooltipOffset) < 0 || step.isFixed && rect.top - height < 0)) { - position = 'bottom'; - } else if (/^bottom/.test(position) && (rect.top + scrollingElement.scrollTop + (height + tooltipOffset) > (0, _utils.getDocHeight)() || step.isFixed && rect.top + rect.height + height > scrollingElementRect.height)) { - position = 'top'; - } - - return position; - } - - /** - * Get the render stage. - * - * @private - * @returns {string} - */ - - }, { - key: 'getRenderStage', - value: function getRenderStage() { - var _state10 = this.state, - shouldRedraw = _state10.shouldRedraw, - xPos = _state10.xPos; - - - if (shouldRedraw) { - return ':redraw'; - } else if (xPos < 0) { - return ':pre-render'; - } - - return ''; - } - - /** - * Prevent tooltip to render outside the window - * - * @private - * @param {Number} value - The axis position - * @param {String} axis - The Axis X or Y - * @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 docHeight = (0, _utils.getDocHeight)(); - 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 _state11 = this.state, - index = _state11.index, - shouldRedraw = _state11.shouldRedraw, - shouldRenderTooltip = _state11.shouldRenderTooltip, - standaloneData = _state11.standaloneData, - xPos = _state11.xPos, - yPos = _state11.yPos; - var _props7 = this.props, - disableOverlay = _props7.disableOverlay, - holePadding = _props7.holePadding, - locale = _props7.locale, - offsetParentSelector = _props7.offsetParentSelector, - 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, - offsetParentSelector: offsetParentSelector, - 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.handleClickTooltip, - onRender: this.handleRenderTooltip - }); - } else { - component = _react2.default.createElement(_Beacon2.default, { - step: step, - xPos: xPos, - yPos: yPos, - onTrigger: this.handleClickBeacon, - eventType: step.type || 'click' - }); - } - - return component; - } - }, { - key: 'render', - value: function render() { - var _state12 = this.state, - index = _state12.index, - isRunning = _state12.isRunning, - standaloneData = _state12.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); - -Joyride.propTypes = { - allowClicksThruHole: _propTypes2.default.bool, - autoStart: _propTypes2.default.bool, - callback: _propTypes2.default.func, - debug: _propTypes2.default.bool, - disableOverlay: _propTypes2.default.bool, - holePadding: _propTypes2.default.number, - keyboardNavigation: _propTypes2.default.bool, - locale: _propTypes2.default.object, - offsetParentSelector: _propTypes2.default.string, - resizeDebounce: _propTypes2.default.bool, - resizeDebounceDelay: _propTypes2.default.number, - run: _propTypes2.default.bool, - scrollOffset: _propTypes2.default.number, - scrollToFirstStep: _propTypes2.default.bool, - scrollToSteps: _propTypes2.default.bool, - showBackButton: _propTypes2.default.bool, - showOverlay: _propTypes2.default.bool, - showSkipButton: _propTypes2.default.bool, - showStepsProgress: _propTypes2.default.bool, - stepIndex: _propTypes2.default.number, - steps: _propTypes2.default.array, - tooltipOffset: _propTypes2.default.number, - type: _propTypes2.default.string -}; -Joyride.defaultProps = { - allowClicksThruHole: false, - autoStart: false, - debug: false, - disableOverlay: false, - holePadding: 5, - keyboardNavigation: true, - locale: { - back: 'Back', - close: 'Close', - last: 'Last', - next: 'Next', - skip: 'Skip' - }, - offsetParentSelector: 'body', - resizeDebounce: false, - resizeDebounceDelay: 200, - run: false, - scrollOffset: 20, - scrollToFirstStep: false, - scrollToSteps: true, - showBackButton: true, - showOverlay: true, - showSkipButton: false, - showStepsProgress: false, - stepIndex: 0, - steps: [], - tooltipOffset: 15, - type: 'single' -}; -exports.default = Joyride; \ No newline at end of file diff --git a/lib/react-joyride-compiled.css b/lib/react-joyride-compiled.css deleted file mode 100644 index 11a6e055e..000000000 --- a/lib/react-joyride-compiled.css +++ /dev/null @@ -1,279 +0,0 @@ -.joyride-beacon { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background-color: transparent; - border: 0; - cursor: pointer; - display: inline-block; - line-height: 1; - padding: 0; - height: 36px; - position: relative; - width: 36px; - z-index: 1500; } - .joyride-beacon:active, .joyride-beacon:focus, .joyride-beacon:hover { - outline: none; } - .joyride-beacon__inner { - -webkit-animation: joyride-beacon-inner 1.2s infinite ease-in-out; - animation: joyride-beacon-inner 1.2s infinite ease-in-out; - background-color: #f04; - border-radius: 50%; - display: block; - height: 50%; - left: 50%; - opacity: 0.7; - position: absolute; - top: 50%; - -webkit-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); - width: 50%; } - .joyride-beacon__outer { - -webkit-animation: joyride-beacon-outer 1.2s infinite ease-in-out; - animation: joyride-beacon-outer 1.2s infinite ease-in-out; - background-color: rgba(255, 0, 68, 0.2); - border: 2px solid #f04; - border-radius: 50%; - -webkit-box-sizing: border-box; - box-sizing: border-box; - display: block; - height: 100%; - left: 0; - opacity: 0.9; - position: absolute; - top: 0; - -webkit-transform: translateY(-50%); - transform: translateY(-50%); - -webkit-transform-origin: center; - transform-origin: center; - width: 100%; } - -.joyride-overlay { - bottom: 0; - left: 0; - position: absolute; - right: 0; - top: 0; - z-index: 1500; } - -.joyride-hole { - border-radius: 4px; - -webkit-box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5), 0 0 15px rgba(0, 0, 0, 0.5); - box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5), 0 0 15px rgba(0, 0, 0, 0.5); - position: absolute; } - .joyride-hole.safari { - -webkit-box-shadow: 0 0 999px 9999px rgba(0, 0, 0, 0.5), 0 0 15px rgba(0, 0, 0, 0.5); - box-shadow: 0 0 999px 9999px rgba(0, 0, 0, 0.5), 0 0 15px rgba(0, 0, 0, 0.5); } - -.joyride-tooltip { - background-color: #fff; - border-radius: 4px; - color: #555; - cursor: default; - -webkit-filter: drop-shadow(-1px -2px 3px rgba(0, 0, 0, 0.3)) drop-shadow(1px 2px 3px rgba(0, 0, 0, 0.3)); - filter: drop-shadow(-1px -2px 3px rgba(0, 0, 0, 0.3)) drop-shadow(1px 2px 3px rgba(0, 0, 0, 0.3)); - opacity: 0; - padding: 20px; - pointer-events: auto; - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - width: 290px; - z-index: 1510; } - .joyride-tooltip--animate { - -webkit-animation: joyride-tooltip 0.4s forwards; - animation: joyride-tooltip 0.4s forwards; - -webkit-animation-timing-function: cubic-bezier(0, 1.05, 0.55, 1.18); - animation-timing-function: cubic-bezier(0, 1.05, 0.55, 1.18); } - .joyride-tooltip__triangle { - background-repeat: no-repeat; - position: absolute; } - .joyride-tooltip.bottom, .joyride-tooltip.bottom-left, .joyride-tooltip.bottom-right { - margin-top: 18px; } - .joyride-tooltip.bottom .joyride-tooltip__triangle, .joyride-tooltip.bottom-left .joyride-tooltip__triangle, .joyride-tooltip.bottom-right .joyride-tooltip__triangle { - background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2236px%22%20height%3D%2218px%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%23fff%22%20transform%3D%22scale%282.25%29%20rotate%28180 8 4%29%22%3E%3C%2Fpolygon%3E%3C%2Fsvg%3E"); - height: 18px; - left: 50%; - top: -16px; - -webkit-transform: translateX(-50%); - transform: translateX(-50%); - width: 36px; } - .joyride-tooltip.top, .joyride-tooltip.top-left, .joyride-tooltip.top-right { - margin-bottom: 18px; } - .joyride-tooltip.top .joyride-tooltip__triangle, .joyride-tooltip.top-left .joyride-tooltip__triangle, .joyride-tooltip.top-right .joyride-tooltip__triangle { - background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2236px%22%20height%3D%2218px%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%23fff%22%20transform%3D%22scale%282.25%29%20rotate%280%29%22%3E%3C%2Fpolygon%3E%3C%2Fsvg%3E"); - bottom: -16px; - height: 18px; - left: 50%; - -webkit-transform: translateX(-50%); - transform: translateX(-50%); - width: 36px; } - .joyride-tooltip.bottom-left .joyride-tooltip__triangle, .joyride-tooltip.top-left .joyride-tooltip__triangle { - left: 3%; - -webkit-transform: translateX(0); - transform: translateX(0); } - @media screen and (min-width: 480px) { - .joyride-tooltip.bottom-left .joyride-tooltip__triangle, .joyride-tooltip.top-left .joyride-tooltip__triangle { - left: 2%; } } - .joyride-tooltip.bottom-right .joyride-tooltip__triangle, .joyride-tooltip.top-right .joyride-tooltip__triangle { - left: auto; - right: 3%; - -webkit-transform: translateX(0); - transform: translateX(0); } - @media screen and (min-width: 480px) { - .joyride-tooltip.bottom-right .joyride-tooltip__triangle, .joyride-tooltip.top-right .joyride-tooltip__triangle { - right: 2%; } } - .joyride-tooltip.left { - margin-right: 18px; } - .joyride-tooltip.left .joyride-tooltip__triangle { - background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218px%22%20height%3D%2236px%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%23fff%22%20transform%3D%22scale%282.25%29%20rotate%28270 8 8%29%22%3E%3C%2Fpolygon%3E%3C%2Fsvg%3E"); - height: 36px; - right: -16px; - width: 18px; } - .joyride-tooltip.right { - margin-left: 18px; } - .joyride-tooltip.right .joyride-tooltip__triangle { - background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218px%22%20height%3D%2236px%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%23fff%22%20transform%3D%22scale%282.25%29%20rotate%2890 4 4%29%22%3E%3C%2Fpolygon%3E%3C%2Fsvg%3E"); - height: 36px; - left: -16px; - width: 18px; } - .joyride-tooltip__close { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background-color: transparent; - border: 0; - cursor: pointer; - display: inline-block; - line-height: 1; - padding: 0; - background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2212px%22%20height%3D%2212px%22%20viewBox%3D%220%200%2016%2016%22%20version%3D%221.1%22%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M14.117.323l-6.073%206.075-5.449-6.075c-.431-.431-1.131-.431-1.562%200-.431.431-.431%201.131%200%201.562l5.449%206.075-6.159%206.159c-.431.431-.431%201.134%200%201.562.431.431%201.131.431%201.562%200l6.075-6.073%205.449%206.073c.429.431%201.131.431%201.56%200%20.431-.429.431-1.131%200-1.562l-5.452-6.073%206.159-6.161c.431-.431.431-1.131%200-1.562-.431-.431-1.129-.431-1.56%200z%22%20fill%3D%22rgba(85, 85, 85, 0.5)%22%2F%3E%3C%2Fsvg%3E"); - background-repeat: no-repeat; - background-size: contain; - height: 12px; - position: absolute; - right: 10px; - text-decoration: none; - top: 10px; - width: 12px; - z-index: 10; - display: block; } - .joyride-tooltip__close:active, .joyride-tooltip__close:focus, .joyride-tooltip__close:hover { - outline: none; } - .joyride-tooltip__close:hover, .joyride-tooltip__close:focus { - color: rgba(60, 60, 60, 0.5); - outline: none; } - .joyride-tooltip__close--header { - right: 20px; - top: 20px; } - .joyride-tooltip__header { - border-bottom: 1px solid #f04; - color: #555; - font-size: 20px; - padding-bottom: 6px; - padding-right: 18px; - position: relative; } - .joyride-tooltip__header ~ .joyride-tooltip__main { - padding: 12px 0 18px; } - .joyride-tooltip__main { - font-size: 16px; - padding-bottom: 18px; - padding-right: 18px; } - .joyride-tooltip__footer { - text-align: right; } - .joyride-tooltip__button { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background-color: transparent; - border: 0; - cursor: pointer; - display: inline-block; - line-height: 1; - padding: 0; } - .joyride-tooltip__button:active, .joyride-tooltip__button:focus, .joyride-tooltip__button:hover { - outline: none; } - .joyride-tooltip__button--primary { - background-color: #f04; - border-radius: 4px; - color: #fff; - padding: 6px 12px; - -webkit-transition: background-color 0.2s ease-in-out; - transition: background-color 0.2s ease-in-out; } - .joyride-tooltip__button--primary:active, .joyride-tooltip__button--primary:focus, .joyride-tooltip__button--primary:hover { - background-color: #ff1f5a; - color: #fff; } - .joyride-tooltip__button--secondary { - color: #f04; - margin-right: 10px; } - .joyride-tooltip__button--skip { - color: #ccc; - float: left; - margin-right: 10px; } - .joyride-tooltip--standalone .joyride-tooltip__main { - padding-bottom: 0; } - .joyride-tooltip--standalone .joyride-tooltip__footer { - display: none; } - @media screen and (min-width: 480px) { - .joyride-tooltip { - width: 360px; } } - @media screen and (min-width: 960px) { - .joyride-tooltip { - width: 450px; } } - -@-webkit-keyframes joyride-tooltip { - 0% { - -webkit-transform: scale(0.1); - transform: scale(0.1); } - 100% { - opacity: 1; - -webkit-transform: perspective(1px) scale(1); - transform: perspective(1px) scale(1); } } - -@keyframes joyride-tooltip { - 0% { - -webkit-transform: scale(0.1); - transform: scale(0.1); } - 100% { - opacity: 1; - -webkit-transform: perspective(1px) scale(1); - transform: perspective(1px) scale(1); } } - -@-webkit-keyframes joyride-beacon-inner { - 20% { - opacity: 0.9; } - 90% { - opacity: 0.7; } } - -@keyframes joyride-beacon-inner { - 20% { - opacity: 0.9; } - 90% { - opacity: 0.7; } } - -@-webkit-keyframes joyride-beacon-outer { - 0% { - -webkit-transform: scale(1); - transform: scale(1); } - 45% { - opacity: 0.7; - -webkit-transform: scale(0.75); - transform: scale(0.75); } - 100% { - opacity: 0.9; - -webkit-transform: scale(1); - transform: scale(1); } } - -@keyframes joyride-beacon-outer { - 0% { - -webkit-transform: scale(1); - transform: scale(1); } - 45% { - opacity: 0.7; - -webkit-transform: scale(0.75); - transform: scale(0.75); } - 100% { - opacity: 0.9; - -webkit-transform: scale(1); - transform: scale(1); } } - -/*# sourceMappingURL=data:application/json;base64,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c0IsRUFBRTtFQUMxQjtJQUNFLFdBQVc7SUFDWCw2Q0FBcUM7WUFBckMscUNBQXFDLEVBQUUsRUFBRTs7QUFFN0M7RUFDRTtJQUNFLGFBQWEsRUFBRTtFQUNqQjtJQUNFLGFBQWEsRUFBRSxFQUFFOztBQUpyQjtFQUNFO0lBQ0UsYUFBYSxFQUFFO0VBQ2pCO0lBQ0UsYUFBYSxFQUFFLEVBQUU7O0FBRXJCO0VBQ0U7SUFDRSw0QkFBb0I7WUFBcEIsb0JBQW9CLEVBQUU7RUFDeEI7SUFDRSxhQUFhO0lBQ2IsK0JBQXVCO1lBQXZCLHVCQUF1QixFQUFFO0VBQzNCO0lBQ0UsYUFBYTtJQUNiLDRCQUFvQjtZQUFwQixvQkFBb0IsRUFBRSxFQUFFOztBQVI1QjtFQUNFO0lBQ0UsNEJBQW9CO1lBQXBCLG9CQUFvQixFQUFFO0VBQ3hCO0lBQ0UsYUFBYTtJQUNiLCtCQUF1QjtZQUF2Qix1QkFBdUIsRUFBRTtFQUMzQjtJQUNFLGFBQWE7SUFDYiw0QkFBb0I7WUFBcEIsb0JBQW9CLEVBQUUsRUFBRSIsImZpbGUiOiJyZWFjdC1qb3lyaWRlLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi5qb3lyaWRlLWJlYWNvbiB7XG4gIGFwcGVhcmFuY2U6IG5vbmU7XG4gIGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50O1xuICBib3JkZXI6IDA7XG4gIGN1cnNvcjogcG9pbnRlcjtcbiAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xuICBsaW5lLWhlaWdodDogMTtcbiAgcGFkZGluZzogMDtcbiAgaGVpZ2h0OiAzNnB4O1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIHdpZHRoOiAzNnB4O1xuICB6LWluZGV4OiAxNTAwOyB9XG4gIC5qb3lyaWRlLWJlYWNvbjphY3RpdmUsIC5qb3lyaWRlLWJlYWNvbjpmb2N1cywgLmpveXJpZGUtYmVhY29uOmhvdmVyIHtcbiAgICBvdXRsaW5lOiBub25lOyB9XG4gIC5qb3lyaWRlLWJlYWNvbl9faW5uZXIge1xuICAgIGFuaW1hdGlvbjogam95cmlkZS1iZWFjb24taW5uZXIgMS4ycyBpbmZpbml0ZSBlYXNlLWluLW91dDtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjZjA0O1xuICAgIGJvcmRlci1yYWRpdXM6IDUwJTtcbiAgICBkaXNwbGF5OiBibG9jaztcbiAgICBoZWlnaHQ6IDUwJTtcbiAgICBsZWZ0OiA1MCU7XG4gICAgb3BhY2l0eTogMC43O1xuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICB0b3A6IDUwJTtcbiAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZSgtNTAlLCAtNTAlKTtcbiAgICB3aWR0aDogNTAlOyB9XG4gIC5qb3lyaWRlLWJlYWNvbl9fb3V0ZXIge1xuICAgIGFuaW1hdGlvbjogam95cmlkZS1iZWFjb24tb3V0ZXIgMS4ycyBpbmZpbml0ZSBlYXNlLWluLW91dDtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiByZ2JhKDI1NSwgMCwgNjgsIDAuMik7XG4gICAgYm9yZGVyOiAycHggc29saWQgI2YwNDtcbiAgICBib3JkZXItcmFkaXVzOiA1MCU7XG4gICAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgICBkaXNwbGF5OiBibG9jaztcbiAgICBoZWlnaHQ6IDEwMCU7XG4gICAgbGVmdDogMDtcbiAgICBvcGFjaXR5OiAwLjk7XG4gICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgIHRvcDogMDtcbiAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoLTUwJSk7XG4gICAgdHJhbnNmb3JtLW9yaWdpbjogY2VudGVyO1xuICAgIHdpZHRoOiAxMDAlOyB9XG5cbi5qb3lyaWRlLW92ZXJsYXkge1xuICBib3R0b206IDA7XG4gIGxlZnQ6IDA7XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgcmlnaHQ6IDA7XG4gIHRvcDogMDtcbiAgei1pbmRleDogMTUwMDsgfVxuXG4uam95cmlkZS1ob2xlIHtcbiAgYm9yZGVyLXJhZGl1czogNHB4O1xuICBib3gtc2hhZG93OiAwIDAgMCA5OTk5cHggcmdiYSgwLCAwLCAwLCAwLjUpLCAwIDAgMTVweCByZ2JhKDAsIDAsIDAsIDAuNSk7XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTsgfVxuICAuam95cmlkZS1ob2xlLnNhZmFyaSB7XG4gICAgYm94LXNoYWRvdzogMCAwIDk5OXB4IDk5OTlweCByZ2JhKDAsIDAsIDAsIDAuNSksIDAgMCAxNXB4IHJnYmEoMCwgMCwgMCwgMC41KTsgfVxuXG4uam95cmlkZS10b29sdGlwIHtcbiAgYmFja2dyb3VuZC1jb2xvcjogI2ZmZjtcbiAgYm9yZGVyLXJhZGl1czogNHB4O1xuICBjb2xvcjogIzU1NTtcbiAgY3Vyc29yOiBkZWZhdWx0O1xuICBmaWx0ZXI6IGRyb3Atc2hhZG93KC0xcHggLTJweCAzcHggcmdiYSgwLCAwLCAwLCAwLjMpKSBkcm9wLXNoYWRvdygxcHggMnB4IDNweCByZ2JhKDAsIDAsIDAsIDAuMykpO1xuICBvcGFjaXR5OiAwO1xuICBwYWRkaW5nOiAyMHB4O1xuICBwb2ludGVyLWV2ZW50czogYXV0bztcbiAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCgwLCAwLCAwKTtcbiAgd2lkdGg6IDI5MHB4O1xuICB6LWluZGV4OiAxNTEwOyB9XG4gIC5qb3lyaWRlLXRvb2x0aXAtLWFuaW1hdGUge1xuICAgIGFuaW1hdGlvbjogam95cmlkZS10b29sdGlwIDAuNHMgZm9yd2FyZHM7XG4gICAgYW5pbWF0aW9uLXRpbWluZy1mdW5jdGlvbjogY3ViaWMtYmV6aWVyKDAsIDEuMDUsIDAuNTUsIDEuMTgpOyB9XG4gIC5qb3lyaWRlLXRvb2x0aXBfX3RyaWFuZ2xlIHtcbiAgICBiYWNrZ3JvdW5kLXJlcGVhdDogbm8tcmVwZWF0O1xuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTsgfVxuICAuam95cmlkZS10b29sdGlwLmJvdHRvbSwgLmpveXJpZGUtdG9vbHRpcC5ib3R0b20tbGVmdCwgLmpveXJpZGUtdG9vbHRpcC5ib3R0b20tcmlnaHQge1xuICAgIG1hcmdpbi10b3A6IDE4cHg7IH1cbiAgICAuam95cmlkZS10b29sdGlwLmJvdHRvbSAuam95cmlkZS10b29sdGlwX190cmlhbmdsZSwgLmpveXJpZGUtdG9vbHRpcC5ib3R0b20tbGVmdCAuam95cmlkZS10b29sdGlwX190cmlhbmdsZSwgLmpveXJpZGUtdG9vbHRpcC5ib3R0b20tcmlnaHQgLmpveXJpZGUtdG9vbHRpcF9fdHJpYW5nbGUge1xuICAgICAgYmFja2dyb3VuZC1pbWFnZTogdXJsKFwiZGF0YTppbWFnZS9zdmcreG1sLCUzQ3N2ZyUyMHdpZHRoJTNEJTIyMzZweCUyMiUyMGhlaWdodCUzRCUyMjE4cHglMjIlMjB2ZXJzaW9uJTNEJTIyMS4xJTIyJTIweG1sbnMlM0QlMjJodHRwJTNBJTJGJTJGd3d3LnczLm9yZyUyRjIwMDAlMkZzdmclMjIlM0UlM0Nwb2x5Z29uJTIwcG9pbnRzJTNEJTIyMCUyQyUyMDAlMjA4JTJDJTIwOCUyMDE2JTJDMCUyMiUyMGZpbGwlM0QlMjIlMjNmZmYlMjIlMjB0cmFuc2Zvcm0lM0QlMjJzY2FsZSUyODIuMjUlMjklMjByb3RhdGUlMjgxODAgOCA0JTI5JTIyJTNFJTNDJTJGcG9seWdvbiUzRSUzQyUyRnN2ZyUzRVwiKTtcbiAgICAgIGhlaWdodDogMThweDtcbiAgICAgIGxlZnQ6IDUwJTtcbiAgICAgIHRvcDogLTE2cHg7XG4gICAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVgoLTUwJSk7XG4gICAgICB3aWR0aDogMzZweDsgfVxuICAuam95cmlkZS10b29sdGlwLnRvcCwgLmpveXJpZGUtdG9vbHRpcC50b3AtbGVmdCwgLmpveXJpZGUtdG9vbHRpcC50b3AtcmlnaHQge1xuICAgIG1hcmdpbi1ib3R0b206IDE4cHg7IH1cbiAgICAuam95cmlkZS10b29sdGlwLnRvcCAuam95cmlkZS10b29sdGlwX190cmlhbmdsZSwgLmpveXJpZGUtdG9vbHRpcC50b3AtbGVmdCAuam95cmlkZS10b29sdGlwX190cmlhbmdsZSwgLmpveXJpZGUtdG9vbHRpcC50b3AtcmlnaHQgLmpveXJpZGUtdG9vbHRpcF9fdHJpYW5nbGUge1xuICAgICAgYmFja2dyb3VuZC1pbWFnZTogdXJsKFwiZGF0YTppbWFnZS9zdmcreG1sLCUzQ3N2ZyUyMHdpZHRoJTNEJTIyMzZweCUyMiUyMGhlaWdodCUzRCUyMjE4cHglMjIlMjB2ZXJzaW9uJTNEJTIyMS4xJTIyJTIweG1sbnMlM0QlMjJodHRwJTNBJTJGJTJGd3d3LnczLm9yZyUyRjIwMDAlMkZzdmclMjIlM0UlM0Nwb2x5Z29uJTIwcG9pbnRzJTNEJTIyMCUyQyUyMDAlMjA4JTJDJTIwOCUyMDE2JTJDMCUyMiUyMGZpbGwlM0QlMjIlMjNmZmYlMjIlMjB0cmFuc2Zvcm0lM0QlMjJzY2FsZSUyODIuMjUlMjklMjByb3RhdGUlMjgwJTI5JTIyJTNFJTNDJTJGcG9seWdvbiUzRSUzQyUyRnN2ZyUzRVwiKTtcbiAgICAgIGJvdHRvbTogLTE2cHg7XG4gICAgICBoZWlnaHQ6IDE4cHg7XG4gICAgICBsZWZ0OiA1MCU7XG4gICAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVgoLTUwJSk7XG4gICAgICB3aWR0aDogMzZweDsgfVxuICAuam95cmlkZS10b29sdGlwLmJvdHRvbS1sZWZ0IC5qb3lyaWRlLXRvb2x0aXBfX3RyaWFuZ2xlLCAuam95cmlkZS10b29sdGlwLnRvcC1sZWZ0IC5qb3lyaWRlLXRvb2x0aXBfX3RyaWFuZ2xlIHtcbiAgICBsZWZ0OiAzJTtcbiAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVgoMCk7IH1cbiAgICBAbWVkaWEgc2NyZWVuIGFuZCAobWluLXdpZHRoOiA0ODBweCkge1xuICAgICAgLmpveXJpZGUtdG9vbHRpcC5ib3R0b20tbGVmdCAuam95cmlkZS10b29sdGlwX190cmlhbmdsZSwgLmpveXJpZGUtdG9vbHRpcC50b3AtbGVmdCAuam95cmlkZS10b29sdGlwX190cmlhbmdsZSB7XG4gICAgICAgIGxlZnQ6IDIlOyB9IH1cbiAgLmpveXJpZGUtdG9vbHRpcC5ib3R0b20tcmlnaHQgLmpveXJpZGUtdG9vbHRpcF9fdHJpYW5nbGUsIC5qb3lyaWRlLXRvb2x0aXAudG9wLXJpZ2h0IC5qb3lyaWRlLXRvb2x0aXBfX3RyaWFuZ2xlIHtcbiAgICBsZWZ0OiBhdXRvO1xuICAgIHJpZ2h0OiAzJTtcbiAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVgoMCk7IH1cbiAgICBAbWVkaWEgc2NyZWVuIGFuZCAobWluLXdpZHRoOiA0ODBweCkge1xuICAgICAgLmpveXJpZGUtdG9vbHRpcC5ib3R0b20tcmlnaHQgLmpveXJpZGUtdG9vbHRpcF9fdHJpYW5nbGUsIC5qb3lyaWRlLXRvb2x0aXAudG9wLXJpZ2h0IC5qb3lyaWRlLXRvb2x0aXBfX3RyaWFuZ2xlIHtcbiAgICAgICAgcmlnaHQ6IDIlOyB9IH1cbiAgLmpveXJpZGUtdG9vbHRpcC5sZWZ0IHtcbiAgICBtYXJnaW4tcmlnaHQ6IDE4cHg7IH1cbiAgICAuam95cmlkZS10b29sdGlwLmxlZnQgLmpveXJpZGUtdG9vbHRpcF9fdHJpYW5nbGUge1xuICAgICAgYmFja2dyb3VuZC1pbWFnZTogdXJsKFwiZGF0YTppbWFnZS9zdmcreG1sLCUzQ3N2ZyUyMHdpZHRoJTNEJTIyMThweCUyMiUyMGhlaWdodCUzRCUyMjM2cHglMjIlMjB2ZXJzaW9uJTNEJTIyMS4xJTIyJTIweG1sbnMlM0QlMjJodHRwJTNBJTJGJTJGd3d3LnczLm9yZyUyRjIwMDAlMkZzdmclMjIlM0UlM0Nwb2x5Z29uJTIwcG9pbnRzJTNEJTIyMCUyQyUyMDAlMjA4JTJDJTIwOCUyMDE2JTJDMCUyMiUyMGZpbGwlM0QlMjIlMjNmZmYlMjIlMjB0cmFuc2Zvcm0lM0QlMjJzY2FsZSUyODIuMjUlMjklMjByb3RhdGUlMjgyNzAgOCA4JTI5JTIyJTNFJTNDJTJGcG9seWdvbiUzRSUzQyUyRnN2ZyUzRVwiKTtcbiAgICAgIGhlaWdodDogMzZweDtcbiAgICAgIHJpZ2h0OiAtMTZweDtcbiAgICAgIHdpZHRoOiAxOHB4OyB9XG4gIC5qb3lyaWRlLXRvb2x0aXAucmlnaHQge1xuICAgIG1hcmdpbi1sZWZ0OiAxOHB4OyB9XG4gICAgLmpveXJpZGUtdG9vbHRpcC5yaWdodCAuam95cmlkZS10b29sdGlwX190cmlhbmdsZSB7XG4gICAgICBiYWNrZ3JvdW5kLWltYWdlOiB1cmwoXCJkYXRhOmltYWdlL3N2Zyt4bWwsJTNDc3ZnJTIwd2lkdGglM0QlMjIxOHB4JTIyJTIwaGVpZ2h0JTNEJTIyMzZweCUyMiUyMHZlcnNpb24lM0QlMjIxLjElMjIlMjB4bWxucyUzRCUyMmh0dHAlM0ElMkYlMkZ3d3cudzMub3JnJTJGMjAwMCUyRnN2ZyUyMiUzRSUzQ3BvbHlnb24lMjBwb2ludHMlM0QlMjIwJTJDJTIwMCUyMDglMkMlMjA4JTIwMTYlMkMwJTIyJTIwZmlsbCUzRCUyMiUyM2ZmZiUyMiUyMHRyYW5zZm9ybSUzRCUyMnNjYWxlJTI4Mi4yNSUyOSUyMHJvdGF0ZSUyODkwIDQgNCUyOSUyMiUzRSUzQyUyRnBvbHlnb24lM0UlM0MlMkZzdmclM0VcIik7XG4gICAgICBoZWlnaHQ6IDM2cHg7XG4gICAgICBsZWZ0OiAtMTZweDtcbiAgICAgIHdpZHRoOiAxOHB4OyB9XG4gIC5qb3lyaWRlLXRvb2x0aXBfX2Nsb3NlIHtcbiAgICBhcHBlYXJhbmNlOiBub25lO1xuICAgIGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50O1xuICAgIGJvcmRlcjogMDtcbiAgICBjdXJzb3I6IHBvaW50ZXI7XG4gICAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xuICAgIGxpbmUtaGVpZ2h0OiAxO1xuICAgIHBhZGRpbmc6IDA7XG4gICAgYmFja2dyb3VuZC1pbWFnZTogdXJsKFwiZGF0YTppbWFnZS9zdmcreG1sLCUzQ3N2ZyUyMHdpZHRoJTNEJTIyMTJweCUyMiUyMGhlaWdodCUzRCUyMjEycHglMjIlMjB2aWV3Qm94JTNEJTIyMCUyMDAlMjAxNiUyMDE2JTIyJTIwdmVyc2lvbiUzRCUyMjEuMSUyMiUyMCUyMHhtbG5zJTNEJTIyaHR0cCUzQSUyRiUyRnd3dy53My5vcmclMkYyMDAwJTJGc3ZnJTIyJTNFJTNDcGF0aCUyMGQlM0QlMjJNMTQuMTE3LjMyM2wtNi4wNzMlMjA2LjA3NS01LjQ0OS02LjA3NWMtLjQzMS0uNDMxLTEuMTMxLS40MzEtMS41NjIlMjAwLS40MzEuNDMxLS40MzElMjAxLjEzMSUyMDAlMjAxLjU2Mmw1LjQ0OSUyMDYuMDc1LTYuMTU5JTIwNi4xNTljLS40MzEuNDMxLS40MzElMjAxLjEzNCUyMDAlMjAxLjU2Mi40MzEuNDMxJTIwMS4xMzEuNDMxJTIwMS41NjIlMjAwbDYuMDc1LTYuMDczJTIwNS40NDklMjA2LjA3M2MuNDI5LjQzMSUyMDEuMTMxLjQzMSUyMDEuNTYlMjAwJTIwLjQzMS0uNDI5LjQzMS0xLjEzMSUyMDAtMS41NjJsLTUuNDUyLTYuMDczJTIwNi4xNTktNi4xNjFjLjQzMS0uNDMxLjQzMS0xLjEzMSUyMDAtMS41NjItLjQzMS0uNDMxLTEuMTI5LS40MzEtMS41NiUyMDB6JTIyJTIwZmlsbCUzRCUyMnJnYmEoODUsIDg1LCA4NSwgMC41KSUyMiUyRiUzRSUzQyUyRnN2ZyUzRVwiKTtcbiAgICBiYWNrZ3JvdW5kLXJlcGVhdDogbm8tcmVwZWF0O1xuICAgIGJhY2tncm91bmQtc2l6ZTogY29udGFpbjtcbiAgICBoZWlnaHQ6IDEycHg7XG4gICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgIHJpZ2h0OiAxMHB4O1xuICAgIHRleHQtZGVjb3JhdGlvbjogbm9uZTtcbiAgICB0b3A6IDEwcHg7XG4gICAgd2lkdGg6IDEycHg7XG4gICAgei1pbmRleDogMTA7XG4gICAgZGlzcGxheTogYmxvY2s7IH1cbiAgICAuam95cmlkZS10b29sdGlwX19jbG9zZTphY3RpdmUsIC5qb3lyaWRlLXRvb2x0aXBfX2Nsb3NlOmZvY3VzLCAuam95cmlkZS10b29sdGlwX19jbG9zZTpob3ZlciB7XG4gICAgICBvdXRsaW5lOiBub25lOyB9XG4gICAgLmpveXJpZGUtdG9vbHRpcF9fY2xvc2U6aG92ZXIsIC5qb3lyaWRlLXRvb2x0aXBfX2Nsb3NlOmZvY3VzIHtcbiAgICAgIGNvbG9yOiByZ2JhKDYwLCA2MCwgNjAsIDAuNSk7XG4gICAgICBvdXRsaW5lOiBub25lOyB9XG4gICAgLmpveXJpZGUtdG9vbHRpcF9fY2xvc2UtLWhlYWRlciB7XG4gICAgICByaWdodDogMjBweDtcbiAgICAgIHRvcDogMjBweDsgfVxuICAuam95cmlkZS10b29sdGlwX19oZWFkZXIge1xuICAgIGJvcmRlci1ib3R0b206IDFweCBzb2xpZCAjZjA0O1xuICAgIGNvbG9yOiAjNTU1O1xuICAgIGZvbnQtc2l6ZTogMjBweDtcbiAgICBwYWRkaW5nLWJvdHRvbTogNnB4O1xuICAgIHBhZGRpbmctcmlnaHQ6IDE4cHg7XG4gICAgcG9zaXRpb246IHJlbGF0aXZlOyB9XG4gICAgLmpveXJpZGUtdG9vbHRpcF9faGVhZGVyIH4gLmpveXJpZGUtdG9vbHRpcF9fbWFpbiB7XG4gICAgICBwYWRkaW5nOiAxMnB4IDAgMThweDsgfVxuICAuam95cmlkZS10b29sdGlwX19tYWluIHtcbiAgICBmb250LXNpemU6IDE2cHg7XG4gICAgcGFkZGluZy1ib3R0b206IDE4cHg7XG4gICAgcGFkZGluZy1yaWdodDogMThweDsgfVxuICAuam95cmlkZS10b29sdGlwX19mb290ZXIge1xuICAgIHRleHQtYWxpZ246IHJpZ2h0OyB9XG4gIC5qb3lyaWRlLXRvb2x0aXBfX2J1dHRvbiB7XG4gICAgYXBwZWFyYW5jZTogbm9uZTtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDtcbiAgICBib3JkZXI6IDA7XG4gICAgY3Vyc29yOiBwb2ludGVyO1xuICAgIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbiAgICBsaW5lLWhlaWdodDogMTtcbiAgICBwYWRkaW5nOiAwOyB9XG4gICAgLmpveXJpZGUtdG9vbHRpcF9fYnV0dG9uOmFjdGl2ZSwgLmpveXJpZGUtdG9vbHRpcF9fYnV0dG9uOmZvY3VzLCAuam95cmlkZS10b29sdGlwX19idXR0b246aG92ZXIge1xuICAgICAgb3V0bGluZTogbm9uZTsgfVxuICAgIC5qb3lyaWRlLXRvb2x0aXBfX2J1dHRvbi0tcHJpbWFyeSB7XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjZjA0O1xuICAgICAgYm9yZGVyLXJhZGl1czogNHB4O1xuICAgICAgY29sb3I6ICNmZmY7XG4gICAgICBwYWRkaW5nOiA2cHggMTJweDtcbiAgICAgIHRyYW5zaXRpb246IGJhY2tncm91bmQtY29sb3IgMC4ycyBlYXNlLWluLW91dDsgfVxuICAgICAgLmpveXJpZGUtdG9vbHRpcF9fYnV0dG9uLS1wcmltYXJ5OmFjdGl2ZSwgLmpveXJpZGUtdG9vbHRpcF9fYnV0dG9uLS1wcmltYXJ5OmZvY3VzLCAuam95cmlkZS10b29sdGlwX19idXR0b24tLXByaW1hcnk6aG92ZXIge1xuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmYxZjVhO1xuICAgICAgICBjb2xvcjogI2ZmZjsgfVxuICAgIC5qb3lyaWRlLXRvb2x0aXBfX2J1dHRvbi0tc2Vjb25kYXJ5IHtcbiAgICAgIGNvbG9yOiAjZjA0O1xuICAgICAgbWFyZ2luLXJpZ2h0OiAxMHB4OyB9XG4gICAgLmpveXJpZGUtdG9vbHRpcF9fYnV0dG9uLS1za2lwIHtcbiAgICAgIGNvbG9yOiAjY2NjO1xuICAgICAgZmxvYXQ6IGxlZnQ7XG4gICAgICBtYXJnaW4tcmlnaHQ6IDEwcHg7IH1cbiAgLmpveXJpZGUtdG9vbHRpcC0tc3RhbmRhbG9uZSAuam95cmlkZS10b29sdGlwX19tYWluIHtcbiAgICBwYWRkaW5nLWJvdHRvbTogMDsgfVxuICAuam95cmlkZS10b29sdGlwLS1zdGFuZGFsb25lIC5qb3lyaWRlLXRvb2x0aXBfX2Zvb3RlciB7XG4gICAgZGlzcGxheTogbm9uZTsgfVxuICBAbWVkaWEgc2NyZWVuIGFuZCAobWluLXdpZHRoOiA0ODBweCkge1xuICAgIC5qb3lyaWRlLXRvb2x0aXAge1xuICAgICAgd2lkdGg6IDM2MHB4OyB9IH1cbiAgQG1lZGlhIHNjcmVlbiBhbmQgKG1pbi13aWR0aDogOTYwcHgpIHtcbiAgICAuam95cmlkZS10b29sdGlwIHtcbiAgICAgIHdpZHRoOiA0NTBweDsgfSB9XG5cbkBrZXlmcmFtZXMgam95cmlkZS10b29sdGlwIHtcbiAgMCUge1xuICAgIHRyYW5zZm9ybTogc2NhbGUoMC4xKTsgfVxuICAxMDAlIHtcbiAgICBvcGFjaXR5OiAxO1xuICAgIHRyYW5zZm9ybTogcGVyc3BlY3RpdmUoMXB4KSBzY2FsZSgxKTsgfSB9XG5cbkBrZXlmcmFtZXMgam95cmlkZS1iZWFjb24taW5uZXIge1xuICAyMCUge1xuICAgIG9wYWNpdHk6IDAuOTsgfVxuICA5MCUge1xuICAgIG9wYWNpdHk6IDAuNzsgfSB9XG5cbkBrZXlmcmFtZXMgam95cmlkZS1iZWFjb24tb3V0ZXIge1xuICAwJSB7XG4gICAgdHJhbnNmb3JtOiBzY2FsZSgxKTsgfVxuICA0NSUge1xuICAgIG9wYWNpdHk6IDAuNztcbiAgICB0cmFuc2Zvcm06IHNjYWxlKDAuNzUpOyB9XG4gIDEwMCUge1xuICAgIG9wYWNpdHk6IDAuOTtcbiAgICB0cmFuc2Zvcm06IHNjYWxlKDEpOyB9IH1cbiJdfQ== */ \ No newline at end of file diff --git a/lib/react-joyride.scss b/lib/react-joyride.scss deleted file mode 100644 index 8eaff3abd..000000000 --- a/lib/react-joyride.scss +++ /dev/null @@ -1,378 +0,0 @@ -$joyride-color: #f04 !default; -$joyride-zindex: 1500 !default; -$joyride-overlay-color: rgba(#000, 0.5) !default; - -$joyride-beacon-color: $joyride-color !default; -$joyride-beacon-size: 36px !default; - -$joyride-hole-border-radius: 4px !default; -$joyride-hole-shadow: 0 0 15px rgba(#000, 0.5) !default; - -$joyride-tooltip-animation: joyride-tooltip 0.4s forwards; -$joyride-tooltip-animation-timing: cubic-bezier(0, 1.05, 0.55, 1.18); - -$joyride-tooltip-arrow-size: 36px !default; -$joyride-tooltip-bg-color: #fff !default; -$joyride-tooltip-border-radius: 4px !default; -$joyride-tooltip-color: #555 !default; -$joyride-tooltip-font-size: 16px !default; -$joyride-tooltip-padding: 20px !default; -$joyride-tooltip-shadow: (x: 1px, y: 2px, blur: 3px, color: rgba(#000, 0.3)) !default; -$joyride-tooltip-width: (290px, 360px, 450px) !default; - -$joyride-close: (color: rgba($joyride-tooltip-color, 0.5), size: 12px, top: 10px, right: 10px) !default; -$joyride-close-visible: true !default; -$joyride-close-image: 'data:image/svg+xml,%3Csvg%20width%3D%22#{map-get($joyride-close, 'size')}%22%20height%3D%22#{map-get($joyride-close, 'size')}%22%20viewBox%3D%220%200%2016%2016%22%20version%3D%221.1%22%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M14.117.323l-6.073%206.075-5.449-6.075c-.431-.431-1.131-.431-1.562%200-.431.431-.431%201.131%200%201.562l5.449%206.075-6.159%206.159c-.431.431-.431%201.134%200%201.562.431.431%201.131.431%201.562%200l6.075-6.073%205.449%206.073c.429.431%201.131.431%201.56%200%20.431-.429.431-1.131%200-1.562l-5.452-6.073%206.159-6.161c.431-.431.431-1.131%200-1.562-.431-.431-1.129-.431-1.56%200z%22%20fill%3D%22#{map-get($joyride-close, 'color')}%22%2F%3E%3C%2Fsvg%3E'; - -$joyride-header-color: $joyride-tooltip-color !default; -$joyride-header-font-size: 20px !default; -$joyride-header-border-color: $joyride-color !default; -$joyride-header-border-width: 1px !default; - -$joyride-button-bg-color: $joyride-color !default; -$joyride-button-color: #fff !default; -$joyride-button-border-radius: 4px !default; - -$joyride-back-button-color: $joyride-color !default; -$joyride-skip-button-color: #ccc !default; - -$joyride-tooltip-arrow-height: $joyride-tooltip-arrow-size / 2; -$joyride-tooltip-arrow-scale: ($joyride-tooltip-arrow-size / ($joyride-tooltip-arrow-size * 0 + 1)) / 16; // strip-units crazy hack - -@function joyride-arrow($location: top, $bg-color: $joyride-tooltip-bg-color) { - $height: $joyride-tooltip-arrow-height; - $width: $joyride-tooltip-arrow-size; - $rotate: '0'; - $arrow-color: '%23' + str-slice(#{$bg-color}, 2); - - @if $location == bottom { - $rotate: '180 8 4'; - } @else if $location == left { - $height: $joyride-tooltip-arrow-size; - $width: $joyride-tooltip-arrow-height; - $rotate: '270 8 8'; - } @else if $location == right { - $height: $joyride-tooltip-arrow-size; - $width: $joyride-tooltip-arrow-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#{$arrow-color}%22%20transform%3D%22scale%28#{$joyride-tooltip-arrow-scale}%29%20rotate%28#{$rotate}%29%22%3E%3C%2Fpolygon%3E%3C%2Fsvg%3E'; -} - -@mixin reset-button() { - appearance: none; - background-color: transparent; - border: 0; - cursor: pointer; - display: inline-block; - line-height: 1; - padding: 0; - - &:active, - &:focus, - &:hover { - outline: none; - } -} - -.joyride { - &-beacon { - @include reset-button(); - height: $joyride-beacon-size; - position: relative; - width: $joyride-beacon-size; - z-index: $joyride-zindex; - - &__inner { - animation: joyride-beacon-inner 1.2s infinite ease-in-out; - background-color: $joyride-beacon-color; - border-radius: 50%; - display: block; - height: 50%; - left: 50%; - opacity: 0.7; - position: absolute; - top: 50%; - transform: translate(-50%, -50%); - width: 50%; - } - - &__outer { - animation: joyride-beacon-outer 1.2s infinite ease-in-out; - background-color: rgba($joyride-beacon-color, 0.2); - border: ($joyride-beacon-size / 18) solid $joyride-beacon-color; - border-radius: 50%; - box-sizing: border-box; - display: block; - height: 100%; - left: 0; - opacity: 0.9; - position: absolute; - top: 0; - transform: translateY(-50%); - transform-origin: center; - width: 100%; - } - } - - &-overlay { - bottom: 0; - left: 0; - position: absolute; - right: 0; - top: 0; - z-index: $joyride-zindex; - } - - &-hole { - border-radius: $joyride-hole-border-radius; - box-shadow: 0 0 0 9999px $joyride-overlay-color, $joyride-hole-shadow; - position: absolute; - - &.safari { - box-shadow: 0 0 999px 9999px $joyride-overlay-color, $joyride-hole-shadow; - } - } - - &-tooltip { - background-color: $joyride-tooltip-bg-color; - border-radius: $joyride-tooltip-border-radius; - color: $joyride-tooltip-color; - cursor: default; - filter: drop-shadow(#{-(map-get($joyride-tooltip-shadow, 'x'))} #{-(map-get($joyride-tooltip-shadow, 'y'))} #{map-get($joyride-tooltip-shadow, 'blur')} #{map-get($joyride-tooltip-shadow, 'color')}) drop-shadow(#{map-get($joyride-tooltip-shadow, 'x')} #{map-get($joyride-tooltip-shadow, 'y')} #{map-get($joyride-tooltip-shadow, 'blur')} #{map-get($joyride-tooltip-shadow, 'color')}); - opacity: 0; - padding: $joyride-tooltip-padding; - pointer-events: auto; - transform: translate3d(0, 0, 0); - width: nth($joyride-tooltip-width, 1); - z-index: $joyride-zindex + 10; - - &--animate { - animation: $joyride-tooltip-animation; - animation-timing-function: $joyride-tooltip-animation-timing; - } - - &__triangle { - background-repeat: no-repeat; - // overflow: hidden; - position: absolute; - } - - &.bottom, - &.bottom-left, - &.bottom-right { - margin-top: $joyride-tooltip-arrow-height; - - .joyride-tooltip__triangle { - background-image: url('#{joyride-arrow(bottom)}'); - height: $joyride-tooltip-arrow-height; - left: 50%; - top: -($joyride-tooltip-arrow-height - 2); - transform: translateX(-50%); - width: $joyride-tooltip-arrow-size; - } - } - - &.top, - &.top-left, - &.top-right { - margin-bottom: $joyride-tooltip-arrow-height; - - .joyride-tooltip__triangle { - background-image: url('#{joyride-arrow(top)}'); - bottom: -($joyride-tooltip-arrow-height - 2); - height: $joyride-tooltip-arrow-height; - left: 50%; - transform: translateX(-50%); - width: $joyride-tooltip-arrow-size; - } - } - - &.bottom-left, - &.top-left { - .joyride-tooltip__triangle { - left: 3%; - transform: translateX(0); - - @media screen and (min-width: 480px) { - left: 2%; - } - } - } - - &.bottom-right, - &.top-right { - .joyride-tooltip__triangle { - left: auto; - right: 3%; - transform: translateX(0); - - @media screen and (min-width: 480px) { - right: 2%; - } - } - } - - &.left { - margin-right: $joyride-tooltip-arrow-height; - - .joyride-tooltip__triangle { - background-image: url('#{joyride-arrow(left)}'); - height: $joyride-tooltip-arrow-size; - right: -($joyride-tooltip-arrow-height - 2); - width: $joyride-tooltip-arrow-height; - } - } - - &.right { - margin-left: $joyride-tooltip-arrow-height; - - .joyride-tooltip__triangle { - background-image: url('#{joyride-arrow(right)}'); - height: $joyride-tooltip-arrow-size; - left: -($joyride-tooltip-arrow-height - 2); - width: $joyride-tooltip-arrow-height; - } - } - - &__close { - @include reset-button(); - background-image: url($joyride-close-image); - background-repeat: no-repeat; - background-size: contain; - height: map-get($joyride-close, 'size'); - position: absolute; - right: map-get($joyride-close, 'right'); - text-decoration: none; - top: map-get($joyride-close, 'top'); - width: map-get($joyride-close, 'size'); - z-index: 10; - - &:hover, - &:focus { - color: darken(map-get($joyride-close, 'color'), 10); - outline: none; - } - - &--header { - right: $joyride-tooltip-padding; - top: $joyride-tooltip-padding; - } - - @if $joyride-close-visible { - display: block; - } @else { - display: none; - } - } - - &__header { - border-bottom: $joyride-header-border-width solid $joyride-header-border-color; - color: $joyride-header-color; - font-size: $joyride-header-font-size; - padding-bottom: 6px; - padding-right: 18px; - position: relative; - - ~ .joyride-tooltip__main { - padding: 12px 0 18px; - } - } - - &__main { - font-size: $joyride-tooltip-font-size; - padding-bottom: 18px; - padding-right: 18px; - } - - &__footer { - text-align: right; - } - - &__button { - @include reset-button(); - - &--primary { - background-color: $joyride-button-bg-color; - border-radius: $joyride-button-border-radius; - color: $joyride-button-color; - padding: 6px 12px; - transition: background-color 0.2s ease-in-out; - - &:active, - &:focus, - &:hover { - background-color: lighten($joyride-button-bg-color, 6); - color: $joyride-button-color; - } - } - - &--secondary { - color: $joyride-back-button-color; - margin-right: 10px; - } - - &--skip { - color: $joyride-skip-button-color; - float: left; - margin-right: 10px; - } - } - - &--standalone { - .joyride-tooltip__main { - padding-bottom: 0; - } - - .joyride-tooltip__footer { - display: none; - } - } - - @media screen and (min-width: 480px) { - width: nth($joyride-tooltip-width, 2); - } - - @media screen and (min-width: 960px) { - width: nth($joyride-tooltip-width, 3); - } - } -} - -@keyframes joyride-tooltip { - 0% { - transform: scale(0.1); - } - - 100% { - opacity: 1; - transform: perspective(1px) scale(1); - } -} - -@keyframes joyride-beacon-inner { - 20% { - opacity: 0.9; - } - - 90% { - opacity: 0.7; - } -} - -@keyframes joyride-beacon-outer { - 0% { - transform: scale(1); - } - - 45% { - opacity: 0.7; - transform: scale(0.75); - } - - 100% { - opacity: 0.9; - transform: scale(1); - } -}