react-joyride - npm Package Compare versions

Comparing version 0.6.3 to 0.6.4

lib/scripts/Mixin.js

@@ -7,12 +7,13 @@ var React   = require('react/addons'),
 var joyride = {
-    steps: []
-};
+    browser: undefined,
+    initialized: false,
+    steps: [],
 
-var browser = function () {
+    getBrowser: function () {
     // Return cached result if avalible, else get result then cache it.
-    if (browser.prototype._cachedResult) {
-        return browser.prototype._cachedResult;
+    if (this.browser) {
+        return this.browser;
     }
 
-    var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
+    var isOpera = Boolean(window.opera) || navigator.userAgent.indexOf(' OPR/') >= 0;
     // Opera 8.0+ (UA detection to detect Blink/v8-powered Opera)
@@ -22,6 +23,6 @@ var isFirefox = typeof InstallTrigger !== 'undefined';// Firefox 1.0+
     // At least Safari 3+: "[object HTMLElementConstructor]"
-    var isChrome = !!window.chrome && !isOpera;// Chrome 1+
-    var isIE = /*@cc_on!@*/false || !!document.documentMode; // At least IE6
+    var isChrome = Boolean(window.chrome) && !isOpera;// Chrome 1+
+    var isIE = /*@cc_on!@*/false || Boolean(document.documentMode); // At least IE6
 
-    return (browser.prototype._cachedResult =
+    return (this.browser =
         isOpera ? 'opera' :
@@ -33,2 +34,40 @@ isFirefox ? 'firefox' :
                             '');
+    },
+    getElementDimensions: function (el) {
+        // Get the DOM Node if you pass in a string
+        el = (typeof el === 'string') ? document.querySelector(el) : el;
+
+        var styles = window.getComputedStyle(el),
+            height = el.clientHeight + parseInt(styles.marginTop, 10) + parseInt(styles.marginBottom, 10),
+            width  = el.clientWidth + parseInt(styles.marginLeft, 10) + parseInt(styles.marginRight, 10);
+
+        return {
+            height: height,
+            width: width
+        };
+    },
+    preventWindowOverflow: function (value, axis, elWidth, elHeight) {
+        var winWidth  = window.innerWidth,
+            docHeight = document.body.offsetHeight,
+            newValue  = value;
+
+        if (axis === 'x') {
+            if (value + elWidth >= winWidth) {
+                newValue = winWidth - elWidth - 15;
+            }
+            else if (value < 0) {
+                newValue = 15;
+            }
+        }
+        else if (axis === 'y') {
+            if (value + elHeight >= docHeight) {
+                newValue = docHeight - elHeight - 15;
+            }
+            else if (value < 0) {
+                newValue = 15;
+            }
+        }
+
+        return newValue;
+    }
 };
@@ -46,2 +85,3 @@
             },
+            joyrideOverridePosition: false,
             joyridePlay: false,
@@ -182,3 +222,3 @@ joyrideScrollToSteps: true,
         var state    = this.state,
-            type     = e.currentTarget.dataset.type,
+            type     = e.currentTarget.getAttribute('data-type'),
             newIndex = state.joyrideCurrentIndex + (type === 'back' ? -1 : 1);
@@ -196,5 +236,3 @@
                 joyrideYPos: -1000
-            }, function () {
-                this._scrollToNextStep();
-            }.bind(this));
+            });
         }
@@ -215,16 +253,15 @@ },
 
-        if (step && (!component.classList.contains('animate') || state.joyrideXPos < 0)) {
+        if (step && (!/animate/.test(component.className) || state.joyrideXPos < 0)) {
             position = step.position;
             body = document.body.getBoundingClientRect();
             target = document.querySelector(step.selector).getBoundingClientRect();
-            component = this._getAbsoluteSize(component);
+            component = joyride.getElementDimensions((state.joyrideShowTooltip ? '.joyride-tooltip' : '.joyride-beacon'));
 
-            if (window.innerWidth < 768) {
-                if (/^left/.test(position)) {
-                    position = 'top';
-                }
-                else if (/^right/.test(position)) {
-                    position = 'bottom';
-                }
+            // Change the step position in the tooltip won't fit in the window
+            if (/^left/.test(position) && target.left - (component.width + state.joyrideTooltipOffset) < 0) {
+                position = 'top';
             }
+            else if (/^right/.test(position) && target.left + target.width + (component.width + state.joyrideTooltipOffset) > body.width) {
+                position = 'bottom';
+            }
 
@@ -263,4 +300,5 @@ // Calculate x position
             this.setState({
-                joyrideXPos: this._preventWindowOverflow(Math.ceil(placement.x), 'x', component.width, component.height),
-                joyrideYPos: this._preventWindowOverflow(Math.ceil(placement.y), 'y', component.width, component.height)
+                joyrideXPos: joyride.preventWindowOverflow(Math.ceil(placement.x), 'x', component.width, component.height),
+                joyrideYPos: joyride.preventWindowOverflow(Math.ceil(placement.y), 'y', component.width, component.height),
+                joyrideOverridePosition: step.position !== position ? position : false
             });
@@ -270,69 +308,22 @@ }
 
-    _preventWindowOverflow: function (value, axis, elWidth, elHeight) {
-        var winWidth = window.innerWidth;
-        var docHeight = document.body.offsetHeight;
+    _getScrollTop: function () {
+        var step      = joyride.steps[this.state.joyrideCurrentIndex],
+            position  = this.state.joyrideOverridePosition || step.position,
+            target    = document.querySelector(step.selector),
+            targetTop = target.getBoundingClientRect().top + document.body.scrollTop,
+            scrollTop = 0;
 
-        if (axis === 'x') {
-            if (value + elWidth >= winWidth) {
-                value = winWidth - elWidth - 15;
-            }
-            else if (value < 0) {
-                value = 15;
-            }
-        }
-        else if (axis === 'y') {
-            if (value + elHeight >= docHeight) {
-                value = docHeight - elHeight - 15;
-            }
-            else if (value < 0) {
-                value = 15;
-            }
-        }
-
-        return value;
-    },
-
-    _getPosition: function () {
-        var step       = joyride.steps[this.state.joyrideCurrentIndex],
-            position   = step.position,
-            target     = document.querySelector(step.selector),
-            elPosition = target.getBoundingClientRect().top + document.body.scrollTop;
-
-        if (window.innerWidth < 768) {
-            if (/^left/.test(position)) {
-                position = 'top';
-            }
-            else if (/^right/.test(position)) {
-                position = 'bottom';
-            }
-        }
-
         if (/^top/.test(position)) {
-            position = this.state.joyrideYPos - this.state.joyrideScrollOffset;
+            scrollTop = Math.floor(this.state.joyrideYPos - this.state.joyrideScrollOffset);
         }
         else if (/^bottom|^left|^right/.test(position)) {
-            position = elPosition - this.state.joyrideScrollOffset;
+            scrollTop = Math.floor(targetTop - this.state.joyrideScrollOffset);
         }
 
-        return position;
+        return scrollTop;
     },
 
-    _getAbsoluteSize: function (el) {
-        // Get the DOM Node if you pass in a string
-        el = (typeof el === 'string') ? document.querySelector(el) : el;
-
-        var styles = window.getComputedStyle(el),
-            height = el.clientHeight + parseInt(styles.marginTop, 10) + parseInt(styles.marginBottom, 10),
-            width  = el.clientWidth + parseInt(styles.marginLeft, 10) + parseInt(styles.marginRight, 10);
-
-        return {
-            height: height,
-            width: width
-        };
-    },
-
-
     _scrollToNextStep: function (cb) {
         if (joyride.steps[this.state.joyrideCurrentIndex] && this.state.joyrideScrollToSteps) {
-            scroll.top(document.body, this._getPosition(), cb);
+            scroll.top(document.body, this._getScrollTop(), cb);
         }
@@ -342,4 +333,12 @@ },
     _renderLayer: function () {
-        React.render(this._renderCurrentStep(), this._target);
-        this._calculatePlacement();
+        var component = this._renderCurrentStep();
+        if (!joyride.initialized) {
+            joyride.initialized = true;
+            React.renderToString(component);
+        }
+
+        React.render(component, this._target, function () {
+            this._calculatePlacement();
+            this._scrollToNextStep();
+        }.bind(this));
     },
@@ -381,5 +380,6 @@
                     animate: state.joyrideXPos > -1,
-                    browser: browser(),
+                    browser: joyride.getBrowser(),
                     buttons: buttons,
                     cssPosition: cssPosition,
+                    overridePosition: state.joyrideOverridePosition,
                     showOverlay: state.joyrideShowOverlay,
@@ -386,0 +386,0 @@ step: currentStep,

lib/scripts/Tooltip.js

@@ -12,2 +12,6 @@ var React = require('react/addons');
         onClick: React.PropTypes.func.isRequired,
+        overridePosition: React.PropTypes.oneOfType([
+            React.PropTypes.string,
+            React.PropTypes.bool
+        ]).isRequired,
         showOverlay: React.PropTypes.bool.isRequired,
@@ -41,7 +45,10 @@ step: React.PropTypes.object.isRequired,
 
-        if (window.innerWidth <= 360) {
-            arrowPosition = (position < 4 ? 4 : (position > 92 ? 92 : position));
+        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 < 3 ? 3 : (position > 96 ? 96 : position));
+            arrowPosition = (position < 5 ? 5 : (position > 95 ? 95 : position));
         }
@@ -55,4 +62,4 @@
             opts  = {
-                el: document.querySelector(props.step.selector).getBoundingClientRect(),
-                positionClass: props.step.position,
+                target: document.querySelector(props.step.selector).getBoundingClientRect(),
+                positionClass: props.overridePosition || props.step.position,
                 tooltipStyles: {
@@ -66,6 +73,6 @@ position: this.props.cssPosition === 'fixed' ? 'fixed' : 'absolute',
         opts.holeStyles = {
-            top: Math.round((opts.el.top - document.body.getBoundingClientRect().top) - 5),
-            left: Math.round(opts.el.left - 5),
-            width: Math.round(opts.el.width + 10),
-            height: Math.round(opts.el.height + 10)
+            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)
         };
@@ -89,14 +96,5 @@
 
-        if (window.innerWidth < 768) {
-            if (/^left/.test(opts.positionClass)) {
-                opts.positionClass = 'top';
-            }
-            else if (/^right/.test(opts.positionClass)) {
-                opts.positionClass = 'bottom';
-            }
-        }
-
         if ((/^bottom$/.test(opts.positionClass) || /^top$/.test(opts.positionClass)) && props.xPos > -1) {
             opts.tooltip = document.querySelector('.joyride-tooltip').getBoundingClientRect();
-            opts.targetMiddle = (opts.el.left + opts.el.width / 2);
+            opts.targetMiddle = (opts.target.left + opts.target.width / 2);
             opts.arrowPosition = (((opts.targetMiddle - props.xPos) / opts.tooltip.width) * 100).toFixed(2);
@@ -103,0 +101,0 @@ opts.arrowPosition = this._getArrowPosition(opts.arrowPosition) + '%';

package.json

 {
   "name": "react-joyride",
-  "version": "0.6.3",
+  "version": "0.6.4",
   "description": "Create walkthroughs and guided tours for your apps",
@@ -5,0 +5,0 @@ "author": "Gil Barbara <[e-mail]>",

README.md

@@ -61,13 +61,22 @@ React Joyride
 
-- `joyrideLocale` (object): The strings used in the tooltip. Defaults to `{ back: 'Back', close: 'Close', last: 'Last', next: 'Next' }`
-- `joyrideScrollOffset` (number): The scrollTop offset used in `joyrideScrollToSteps`. Defaults to `20`
-- `joyrideScrollToSteps` (bool): Scroll the page to the next step if needed. Defaults to `true`
-- `joyrideShowBackButton` (bool): Display a back button. Defaults to `true`
-- `joyrideShowOverlay` (bool): Display an overlay with holes above your steps. Defaults to `true`
-- `joyrideShowStepsProgress` (bool): Display the tour progress in the next button (1/5) in `guided` tours. Defaults to `false`
-- `joyrideTooltipOffset`: (number) The tooltip offset from the target. Defaults to `30`
-- `joyrideType` (string): The type of your presentation. It can be `guided` (played sequencially with the Next button) or `single`. Defaults to `guided`
-- `joyrideCompleteCallback` (function): It will be called after an user has completed all the steps in your tour and passes all steps. Defaults to `undefined`
-- `joyrideStepCallback` (function): It will be called after each step and passes the completed step. Defaults to `undefined`
+`joyrideLocale` {object}: The strings used in the tooltip. Defaults to `{ back: 'Back', close: 'Close', last: 'Last', next: 'Next' }`
 
+`joyrideScrollOffset` {number}: The scrollTop offset used in `joyrideScrollToSteps`. Defaults to `20`
+
+`joyrideScrollToSteps` {bool}: Scroll the page to the next step if needed. Defaults to `true`
+
+`joyrideShowBackButton` {bool}: Display a back button. Defaults to `true`
+
+`joyrideShowOverlay` {bool}: Display an overlay with holes above your steps. Defaults to `true`
+
+`joyrideShowStepsProgress` {bool}: Display the tour progress in the next button (1/5) in `guided` tours. Defaults to `false`
+
+`joyrideTooltipOffset` {number}: The tooltip offset from the target. Defaults to `30`
+
+`joyrideType` {string}: The type of your presentation. It can be `guided` (played sequencially with the Next button) or `single`. Defaults to `guided`
+
+`joyrideCompleteCallback` {function}: It will be called after an user has completed all the steps in your tour and passes all steps. Defaults to `undefined`
+
+`joyrideStepCallback` {function}: It will be called after each step and passes the completed step. Defaults to `undefined`
+
 You can change these in `componentWillMount`. All optional.
@@ -74,0 +83,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

46407

increased by1.25%

Lines of code

753

increased by0.27%

Number of lines in readme file

208

increased by4.52%

No dependency changes