gilbarbara / react-joyride Goto Github PK
View Code? Open in Web Editor NEWCreate guided tours in your apps
Home Page: https://react-joyride.com/
License: MIT License
Create guided tours in your apps
Home Page: https://react-joyride.com/
License: MIT License
add center position (no arrow, above the element?)
Is there a way I can manipulate the position of the beacon or the tooltip for exact pixels?
Hi, I'm trying to add an anchor link to the description of the tooltip.
For more information click <a href='/how-it-works' target='_blank'>here</a>
It's displayed and everything. But the link won't work.
It seems as if anchor links in descriptions don't propagate events. I had to add an onclick
tag with an window.open
.
The problems are (1) you can click through the overlay to something like a link hidden underneath when scrolling from the initial viewpoint. The overlay should be intercepting that and not trigger the link, even when scrolled down. (2) when you scroll down and click on the overlay, joyride should become disabled. It doesn’t. It only becomes disabled if you click inside the part of the overlay visible before you scroll down.
If you could give me some pointers on where to look we might be able to fix it and submit a patch as we need this for our project.
Ref #57
First off i want to thank you for the support and quick fixes. We are using this plugin in a project and so far so good. Another small issue or bug appeared.
When i call the .reset(true) method I get this js error
TypeError: this._renderLayer is not a function
if (restart && this.state.play === restart && this.state.index === 0) {
this._renderLayer();
}
Looks like the _renderLayer() method does not exist.
Currently, the joyride plugin always includes an overlay element (which can either be made invisible or not), and the overlay itself has a 'close' click handler that makes the tooltips close if you click anywhere on the overlay (effectively, anywhere on the screen other than the tooltip itself). The result is that tooltips sometimes get closed before a user reads them -- e.g., because the user clicks somewhere else on the screen and doesn't expect the tooltip to close unless he/she actually clicks the 'x' to close it. It would be nice to allow users of this plugin the option of setting things up so that there is no overlay element, meaning that the user can still interact with other parts of a page without closing the tooltip. It would also be nice to allow users to set things up so that the only thing that closes a tooltip is explicitly clicking on the 'x' (or the "next" or "skip" buttons, etc.). @gilbarbara, any thoughts about this?
I've implemented this locally in my own fork because I needed there to be no overlay and I needed the tooltips to close only when the 'x' was clicked, so I'm happy to submit a PR or discuss code.
I just tried to add joyride component and log refs
<Joyride ref="joyride" steps={[]} debug={true} />
When I log this.refs.joyride
I get undefined
I use a redux.
How to properly integrate it with component?
First, thanks for the library, it looks awesome! I'd like to see the sources of the demo in order to understand better how to use it.
Is it possible to use only tooltips, so to import them from from react-joyride/lib/scripts/Tooltip
, or we still need the main component to be rendered? It would be great to have an example of using standalone tooltips.
Is there a way to intercept the next step to render when a user clicks on next. I need to perform an action before the next step gets rendered.
Here's what happens: I create a beacon based on some event, but the user ignores my beacon and moves to a different route, in which the selector that the beacon was tied to no longer exists.
Ideally, the beacon would disappear when the user has left the screen in which the beacon is relevant.
But a second problem (easier to fix) is that if the user then clicks the beacon it throws an error.
Cannot read property 'getBoundingClientRect' of null
react-joyride/lib/scripts/Component.js
Line 522 in 524125c
I'd be happy to submit a simple PR to guard against this failure. I don't have any ideas, offhand, how to make the beacon disappear altogether when the user has moved to a different route, which I'd consider to be the more complete solution.
As far as I can tell, state.position is never set, which makes the tooltip rendering break. I think if you just remove the line from the Component.js, everything will work.
Even though I assign a function to stepCallback
, the function never seems to be called. Looking through the source, I don't see any spot where it would be. Is calling this method intentionally unimplemented at the moment? If so, it would be good to mention that in the docs. If not, then there's a different problem.
I'd be happy to submit a PR either way.
Can be reproduced with at least 2 steps.
First of all, thanks so much for this module! It looks great, and works pretty well! ...up to a point 😝
Here's a video of the behavior I'm seeing. It's possible I missed setting some option. I hope the fix is that easy!
Description of the problem:
The first two steps of the tour highlight elements that are visible on the page with no scrolling. These are focused and scrolled to and highlighted just fine. It looks awesome!
The last step of the tour highlights an item that's at the very bottom of a long page. This is where things get weird! The joyride-hole
element is placed perfectly, but it's nowhere close to being in view! Instead, the joyride-tooltip
is visible, but its placement is completely incorrect. It seems that it's placed at the bottom of the visible portion of the page when scrolled the whole way up, rather than actually down next to the joyride-hole
.
Here's a low-quality gif, in addition to the high-quality video linked above:
@gilbarbara, in my PR #20, I mentioned that I was having some issues with positioning of elements in the joyride. After doing some investigating, it seems that the check at line 193 in the most recent version (https://github.com/gilbarbara/react-joyride/blob/master/lib/scripts/Mixin.js#L193) prevents visible tooltips from updating their position when the window is resized. As far as I can tell, the check that prevents this was initially added in commit 9f932e9 ("fix autorun"). Whenever the tooltip has an X position that is greater than -1, it gets the animate
class via props. But calcPlacement
does not reposition any element that both has the animate
class and has an X position greater than -1, with the result that tooltips never reposition themselves.
Changing line 193 so that it only checks if step
exists (which is what it used to do before 9f932e9) seems to fix this issue. Did you make the change in 9f932e9 in order to prevent updating state too frequently on resizing?
Hey,
So I'm trying to bold certain words within a string in the Tour popovers. Is there a way to do this?
Hey @gilbarbara,
Thanks for this library. It works great, however it does not support server side rendering. It would be totally ok to only show the tooltips on the client. The issue is the library cannot be required on the server due to accessing the window
object on require
or import
.
Thanks,
Thomas
Is there a way to change styling of tooltip for only last step.
In my case I would like the step button to not show in the last step but show on all other steps.
I also would like to give the last button a different colour.
Is that possible.
I am still using version 0.7.6
and getting the following error Unable to get property 'type' of undefined or null reference
when clicking on next to go from one step to the next. This error only occurs in IE 10, works fine in IE 11, Safari, Chrome , Opera and Firefox.
Did anyone report a similar issue before? Can you recreate the issue in IE10? Or is it something just from my side?
I would like to ask is it possible to remove the beacon?
For example if the joyride tooltip is closed in the middle of the steps the beacon doesn't show and the next time the joyride is triggered it starts from the beginning.
Hi, I want to do addSteps
and reset
from redux acitions, is there a way of exposing these methods somehow (i.e. import {parseSteps, reset} from 'react-joyride'
) instead of having them on JoyRider instance and having to use this.refs
all the time ?
So I'm specifying different positions for steps in continuous mode (an extremely common use case for a tool like this) and it doesn't seem to be working. Specifically, only the position for the first step seems to go through, and that first step's position somehow "overrides" the subsequent steps (e.g. if I specify 'bottom' for the firs step's position, it appears in 'bottom' for all latter steps, regardless of which position I had specified).
However, when I do this for "single" mode, they do appear in the positions I have specified.
error given was: ReferenceError: window is not defined
[1] at Object. (path/to/project/node_modules/react-joyride/node_modules/scroll/node_modules/raf-component/index.js:5:28)
Anyone deal with this issue?
Is there a function similar to this.joyrideStart()
but to stop/close the joyride ?
Hi, thanks for this excellent mixin. followed the getting started and I don't see any beacon. I added the css and the mixin plus the call to joyrideAddSteps. Thanks for any help you can offer.
On mobile devices,
Looks like there is some error with the way, how document height is calculated
Hello. I see that you closed #27 a while ago, but I've noticed some weird behavior with it. Perhaps it's my fault again, as it was in #32.
The issue is with position: bottom
tour steps, which most of mine are. For these steps, Firefox scrolls the whole way to the top of the page, rather than to the top of the tooltip.
You can see this in action at http://entire.life, by taking the tour in the "Take a Tour" section.
Thanks again for this super beautiful plugin!
subject in a title
We'd like to call disableJoyride()
if a user clicks outside of the tutorial, instead of just going to the next step.
How to fix working at IE9 ?
Seems as if the complete callback event never gets fired. Even the demo does not seem to work once you are at the last step.
fix top position
This library is really great, but I have one issue.
I am using react-boostrap and I try to make a tour between tabs.
I change the active tab in the stepCallback
function, but tooltip is not displayed correctly.
I guess it's because the stepCallback
is invoked right after the tooltip is displayed and the target UI element is not visible yet.
This issue could be solved if you add a new callback beforeStepCallback()
or add custom handlers for next
and prev
buttons.
Usually, the joyride instance is made for scrolling the body. I have the following situation. I render a popup, then I use joyride on some elements within the popup.
It mostly works, with a few exceptions. I block the body scroll when opening the popup, then I use a scroll within that popup as needed. The auto scroll is made for document.body only. Making the scroll target configurable would be nice.
This next issue has me a bit stumped. I don't render the popup within the same div as the joyride instance. So, when I scroll, it doesn't follow the target because of the different scroll containers. I thought, maybe if I render a joyride instance within the popup, it could work. But since there are relative positions in the popup, the calculations from _calcPlacement come out wrong.
Making the auto scroll configurable is easy, but playing with positions inside a container that's not targeting the body is way too hard. Do you have any suggestions?
also test in other browsers
Having this issue on mobile phones on landscape view. First step positions properly then I click on next and it scrolls to the element but the tooltip stays above.
In the _preventWindowOverflow() method I modified this line 571:
yPos: this._preventWindowOverflow(Math.ceil(placement.y), 'y', component.width, component.height),
to this:
yPos: placement.y,
Works fine. The question is does it need to run through this _preventWindowOverflow()? If yes then the logic is not working as expected.
This logic that calculates the position wrong
if (value + elHeight >= docHeight) {
newValue = docHeight - elHeight - 15;
}
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.