react-joyride - npm Package Compare versions

Comparing version 1.4.1 to 1.4.2

lib/scripts/Component.js

@@ -359,3 +359,3 @@ var React   = require('react'),
         step      = props.steps[state.index],
-        position  = step.position,
+        position  = this._calcPosition(step),
         target    = document.querySelector(step.selector),
@@ -563,3 +563,3 @@ targetTop = target.getBoundingClientRect().top + document.body.scrollTop,
     if (step && ((state.tooltip || (state.play && props.steps[state.index])) && state.xPos < 0)) {
-      position = step.position;
+      position = this._calcPosition(step);
       body = document.body.getBoundingClientRect();
@@ -569,10 +569,2 @@ target = document.querySelector(step.selector).getBoundingClientRect();
 
-      // Change the step position in the tooltip won't fit in the window
-      if (/^left/.test(position) && target.left - (component.width + props.tooltipOffset) < 0) {
-        position = 'top';
-      }
-      else if (/^right/.test(position) && target.left + target.width + (component.width + props.tooltipOffset) > body.width) {
-        position = 'bottom';
-      }
-
       // Calculate x position
@@ -618,2 +610,25 @@ if (/^left/.test(position)) {
   /**
+   * Update position for small screens.
+   * @param {Object} step
+   * @private
+   */
+  _calcPosition: function(step) {
+    var props = this.props;
+    var showTooltip = this.state.tooltip ? true : this.state.showTooltip;
+    var position = step.position;
+    var body = document.body.getBoundingClientRect();
+    var target = document.querySelector(step.selector).getBoundingClientRect();
+    var component = this._getElementDimensions((showTooltip ? '.joyride-tooltip' : '.joyride-beacon'));
+
+    if (/^left/.test(position) && target.left - (component.width + props.tooltipOffset) < 0) {
+      position = 'top';
+    }
+    else if (/^right/.test(position) && (target.left + target.width + (component.width + props.tooltipOffset)) > body.width) {
+      position = 'bottom';
+    }
+
+    return position;
+  },
+
+  /**
    * Prevent tooltip to render outside the window
@@ -679,2 +694,4 @@ * @param {Number} value - The axis position
       if (state.showTooltip || state.tooltip) {
+        currentStep.position = state.position || currentStep.position;
+
         if (!state.tooltip) {
@@ -685,7 +702,17 @@ if (props.type === 'continuous' || props.type === 'guided') {
             if (props.steps[state.index + 1]) {
-              buttons.primary = props.locale.next;
 
+
               if (props.showStepsProgress) {
-                buttons.primary += ' ' + (state.index + 1) + '/' + props.steps.length;
+                var next = props.locale.next;
+                if (typeof props.locale.next === 'string') {
+                  next = React.createElement('span', {}, props.locale.next);
+                }
+                buttons.primary = React.createElement('span', {},
+                  next,
+                  React.createElement('span', {}, ' ' + (state.index + 1) + '/' + props.steps.length)
+                );
               }
+              else {
+                buttons.primary = props.locale.next;
+              }
             }
@@ -692,0 +719,0 @@

package.json

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

README.md

@@ -75,2 +75,6 @@ React Joyride
 }
+
+addTooltip(data) {
+	this.refs.joyride.addTooltip(data);
+}
 ```
@@ -82,3 +86,3 @@
 componentDidMount: function () {
-	this.addSteps({...}); // or this.props.addTooltip({...});
+	this.addSteps({...}); // or this.addTooltip({...});
 	this.refs.joyride.start();
@@ -94,3 +98,3 @@
 		<Joyride ref="joyride" .../>
-		<ChildComponent addSteps={this.addSteps} addTooltip={this.props.addTooltip} />
+		<ChildComponent addSteps={this.addSteps} addTooltip={this.addTooltip} />
 	);
@@ -97,0 +101,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

68122

increased by1.42%

Lines of code

1285

increased by1.82%

Number of lines in readme file

337

increased by1.2%

No dependency changes