Comments (11)
I solved this by writing to the database only the body of the function, and by assigning the eval of the value to the onNext property. Thank you anyway.
from hopscotch.
:D
Yeah. Luckily, we do not have a phone!
from hopscotch.
Hey.
http://linkedin.github.io/hopscotch/#defining-callbacks
In short, you would register those helpers and add them into a tour definition, either before launching a tour or creating this tour definition after receiving it from a backend.
I personally have an additional routine of "processing" all tours after I get them.
from hopscotch.
OMG, mate, it doesn't sound like a nice solution.
from hopscotch.
Check this out https://jsfiddle.net/cmk0ozaL/
When your application loads (or anytime before you start a tour), you register a "helper", it's just an id of some function
hopscotch.registerHelper("genericHelper", function() {
alert("hello");
});
And then you put onNext: ["genericHelper"] inside your tour definition.
You can have it in database or you can setup this dynamically (and have dynamic helpers names/quantity).
In this case when "next" happens, the genericHelper function will be executed. Or you may have bunch of helpers executed (according to a manual).
Generally developers tend not to keep functions in database :) You may keep their names there. But define and setup them on client side.
from hopscotch.
So, the "official" usage of a helper is one helper per function? Or could I still define dynamically the helper function?
Imagine the scenario where you'd need a function per db entry, well, one might say this beats the purpose of a function :D but since we are discussing this on hopscotch let me explain you what I am trying to do.
I guess I am not the first one who faced that problem, but some elements of the page are not available unless other actions first take place. For example a menu that appears after a mouseover event.
From the perspective of the one who builds the tour you would want to first trigger the mouseover and then show the step. Otherwise the step would show up in an irrelevant, to the element, position.
So, I thought a tailored function for each element, that I want to include in a step and is not visible by default, would be a good idea. Could you please tell me how you deal with that kind of elements?
Also, you said that my solution doesn't sound nice, is that for the case the user gets to set a function through an input, or is there any other drawback to this approach? Thank you for your time.
from hopscotch.
Okay. I will try to answer tomorrow :)
from hopscotch.
Alright you owe me now 25 minutes of my life :)
https://jsfiddle.net/cmk0ozaL/7/
This is how I'd handle this (but do not use element IDs! use only relative selectors in real application)
- You can define as many helpers as you want
- These helpers may operate particular elements on a page or elements which are current (previous, any) step's target, or they may be inside that target
- In your tour definition you may declare as many helpers as you want for each step and each event type (next/prev/end/start/...etc.)
- You will want to run "onNext" step synchronously to make target of next step to get its size. Or do everything manually (call hopscotch.nextStep() manually after the animation ends, but you better do this on "onCTA" handler I presume)
"Also, you said that my solution doesn't sound nice, is that for the case the user gets to set a function through an input, or is there any other drawback to this approach?"
Storing a function in DB and then doing "eval" of its string version back again sounds crazy, honestly.
This sounds like you are making some kind of onboarding tours creation interface. People should not write code in browser inputs and get it stored somewhere, because this is "wild" code. All code should be written "normally", it should be reviewed, tested and stored in that way so the browser interprets it correctly.
If you need an ability to add some custom logic inside tours NOT from source code I would suggest to develop some kind of "predefined" small pieces of such logic, like: "select a particular element", "hide/show/move subject element" and etc. So this tour developer will be able to choose and combine these pieces from your UI setting only for example elements selectors and other "static" inputs.
from hopscotch.
Thank you for every minute you spent. 👍 I am going to study your answer and follow it to the best degree I can.
As, for the last thing you mention, in my case users don't get to define by any means the tour or any of the functions that these tours might need. I, and a couple of other fellow developers are going to be creating the tours.
The pre-defined pieces of logic makes sense and is a nice median solution but still if I wanted to automate the procedure of creating a tour a bit more I would probably have to move some information for this logic to the database, (i.e. a filed to hold as value the kind of action, mouseover etc.) (a second field for the second action, or even worse an intermediate table with step_ids and action_type_id, etc.) , but surely this is much better than having to store raw functions. The only drawback to this solution is that there is much more time between the abstract concept to the actual implementation.
from hopscotch.
much more time between the abstract concept to the actual implementation.
That's for sure. I'm at the moment trying to implement some kind of a "framework" to be able to setup onboarding tours across our UI. The whole week I've spent and the more I think about it, the less believe it can be automated :(
There always appear a special freaking element which requires manual tweaking during the tour.
from hopscotch.
Not only that, but I am sure that you have already thought, that this framework should offer some flexibility to the tours when changes are made to the page.
After spending a considerable amount of time in this case of "Tours" I am not sure if it was worth the time. Sure it's a great UI feature, but still most of the end users won't follow any guided steps, they will just pick up the phone and call the support :/
from hopscotch.
Related Issues (20)
- SVGs for sprites?
- Using functions or helpers for target prop
- How to use this library using TypeScript in ng4? HOT 1
- How would I implement a way to cancel the tour if the user navigates away?
- Current step
- FeatureRequest: on-demand Tours
- Hopscotch with tabset
- Issue with going back between multi-site steps between pages
- nextOnTargetClick doesn't work while animating in.
- onStart and onEnd being executed as soon as I start the tour. HOT 1
- How to create multiple tours on one page? HOT 5
- sprite-green and sprite-orange don't work HOT 2
- Is it possible to fixe the "popup" on not fixed target
- Customizable theme (background color and text color)
- Visibility for templating and `setRenderer` HOT 1
- Add multiple pages for tour?
- Why previous and Next button displayed after some delay in safari 12.1?
- hopscotch and iframes
- Addclass not working HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from hopscotch.