react-joyride - npm Package Compare versions

Comparing version 0.6.1 to 0.6.2

lib/scripts/Beacon.js

@@ -35,3 +35,8 @@ var React = require('react/addons');
         return (
-            React.createElement('a', { href: '#', className: 'joyride-beacon', style: styles, onClick: this.props.handleClick },
+            React.createElement('a', {
+                    href: '#',
+                    className: 'joyride-beacon',
+                    style: styles,
+                    onClick: this.props.handleClick
+                },
                 React.createElement('span', { className: 'inner' }),
@@ -38,0 +43,0 @@ React.createElement('span', { className: 'outer' })

lib/scripts/Mixin.js

@@ -10,2 +10,25 @@ var React   = require('react/addons'),
 
+var browser = function () {
+    // Return cached result if avalible, else get result then cache it.
+    if (browser.prototype._cachedResult) {
+        return browser.prototype._cachedResult;
+    }
+
+    var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
+    // Opera 8.0+ (UA detection to detect Blink/v8-powered Opera)
+    var isFirefox = typeof InstallTrigger !== 'undefined';// Firefox 1.0+
+    var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
+    // At least Safari 3+: "[object HTMLElementConstructor]"
+    var isChrome = !!window.chrome && !isOpera;// Chrome 1+
+    var isIE = /*@cc_on!@*/false || !!document.documentMode; // At least IE6
+
+    return (browser.prototype._cachedResult =
+        isOpera ? 'opera' :
+            isFirefox ? 'firefox' :
+                isSafari ? 'safari' :
+                    isChrome ? 'chrome' :
+                        isIE ? 'ie' :
+                            '');
+};
+
 var Mixin = {
@@ -23,2 +46,3 @@ getInitialState: function () {
             joyrideScrollToSteps: true,
+            joyrideScrollOffset: 20,
             joyrideShowBackButton: true,
@@ -28,3 +52,3 @@ joyrideShowOverlay: true,
             joyrideShowTooltip: false,
-            joyrideTooltipOffset: 30,
+            joyrideTooltipOffset: 15,
             joyrideType: 'guided',
@@ -179,6 +203,6 @@ joyrideCompleteCallback: undefined,
             step      = joyride.steps[state.joyrideCurrentIndex],
+            component = document.querySelector((state.joyrideShowTooltip ? '.joyride-tooltip' : '.joyride-beacon')),
             position,
             body,
             target,
-            component = document.querySelector((state.joyrideShowTooltip ? '.joyride-tooltip' : '.joyride-beacon')),
             placement = {
@@ -193,3 +217,3 @@ x: -1000,
             target = document.querySelector(step.selector).getBoundingClientRect();
-            component = component.getBoundingClientRect();
+            component = this._getAbsoluteSize(component);
 
@@ -247,16 +271,16 @@ if (window.innerWidth < 768) {
 
-        if (axis.toLowerCase() === 'x') {
-            if (value + elWidth > winWidth) {
-                value = winWidth - elWidth - 10;
+        if (axis === 'x') {
+            if (value + elWidth >= winWidth) {
+                value = winWidth - elWidth - 15;
             }
             else if (value < 0) {
-                value = 10;
+                value = 15;
             }
         }
-        else if (axis.toLowerCase() === 'y') {
-            if (value + elHeight > docHeight) {
-                value = docHeight - elHeight - 10;
+        else if (axis === 'y') {
+            if (value + elHeight >= docHeight) {
+                value = docHeight - elHeight - 15;
             }
             else if (value < 0) {
-                value = 10;
+                value = 15;
             }
@@ -271,3 +295,4 @@ }
             position   = step.position,
-            elPosition = document.querySelector(step.selector).getBoundingClientRect().top - document.body.getBoundingClientRect().top;
+            target     = document.querySelector(step.selector),
+            elPosition = target.getBoundingClientRect().top + document.body.scrollTop;
 
@@ -284,6 +309,6 @@ if (window.innerWidth < 768) {
         if (/^top/.test(position)) {
-            position = this.state.joyrideYPos - 20;
+            position = this.state.joyrideYPos - this.state.joyrideScrollOffset;
         }
         else if (/^bottom|^left|^right/.test(position)) {
-            position = elPosition - 20;
+            position = elPosition - this.state.joyrideScrollOffset;
         }
@@ -294,2 +319,17 @@
 
+    _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,
+            width
+        };
+    },
+
+
     _scrollToNextStep: function (cb) {
@@ -340,8 +380,9 @@ if (joyride.steps[this.state.joyrideCurrentIndex] && this.state.joyrideScrollToSteps) {
                     animate: state.joyrideXPos > -1,
+                    browser: browser(),
+                    buttons: buttons,
                     cssPosition: cssPosition,
+                    showOverlay: state.joyrideShowOverlay,
+                    step: currentStep,
                     xPos: state.joyrideXPos,
                     yPos: state.joyrideYPos,
-                    step: currentStep,
-                    buttons: buttons,
-                    showOverlay: state.joyrideShowOverlay,
                     onClick: this._onClickTooltip
@@ -348,0 +389,0 @@ });

lib/scripts/Tooltip.js

@@ -8,2 +8,3 @@ var React = require('react/addons');
         animate: React.PropTypes.bool.isRequired,
+        browser: React.PropTypes.string.isRequired,
         buttons: React.PropTypes.object.isRequired,
@@ -26,2 +27,3 @@ cssPosition: React.PropTypes.string.isRequired,
         return {
+            browser: 'chrome',
             buttons: {
@@ -37,2 +39,15 @@ primary: 'Close'
 
+    _getArrowPosition: function (position) {
+        var arrowPosition;
+
+        if (window.innerWidth <= 360) {
+            arrowPosition = (position < 4 ? 4 : (position > 92 ? 92 : position));
+        }
+        else {
+            arrowPosition = (position < 3 ? 3 : (position > 96 ? 96 : position));
+        }
+
+        return arrowPosition;
+    },
+
     render: function () {
@@ -68,3 +83,3 @@ var props = this.props,
             opts.hole = React.createElement('div', {
-                className: 'joyride-hole',
+                className: 'joyride-hole ' + props.browser,
                 style: opts.holeStyles
@@ -87,3 +102,3 @@ });
             opts.arrowPosition = (((opts.targetMiddle - props.xPos) / opts.tooltip.width) * 100).toFixed(2);
-            opts.arrowPosition = (opts.arrowPosition < 5 ? 5 : (opts.arrowPosition > 95 ? 95 : opts.arrowPosition)) + '%';
+            opts.arrowPosition = this._getArrowPosition(opts.arrowPosition) + '%';
 
@@ -106,3 +121,3 @@ opts.arrowPosition = {
                 React.createElement('div', {
-                        className: 'joyride-tooltip' + (props.animate ? ' animate' : ''),
+                        className: 'joyride-tooltip ' + opts.positionClass + (props.animate ? ' animate' : ''),
                         style: opts.tooltipStyles
@@ -109,0 +124,0 @@ },

package.json

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

README.md

@@ -62,2 +62,3 @@ 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`
@@ -64,0 +65,0 @@ - `joyrideShowBackButton` (bool): Display a back button. Defaults to `true`

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

45820

increased by6%

Number of package files

12

increased by9.09%

Lines of code

751

increased by8.53%

Number of lines in readme file

199

increased by0.51%

No dependency changes