Name: enjoyhint
Owner: Open Roberta
Description: null
Created: 2016-05-09 18:58:30.0
Updated: 2016-05-09 18:58:31.0
Pushed: 2018-03-21 15:02:11.0
Homepage: null
Size: 8117
Language: JavaScript
GitHub Committers
| User | Most Recent Commit | # Commits |
|---|
Other Committers
| User | Most Recent Commit | # Commits |
|---|
EnjoyHint is a web-tool that provides the simplest way to create interactive tutorials and hints for your site or web-application. It can also be used to highlight and sign application elements.
EnjoyHint is free software distributed under the terms of MIT license.
EnjoyHint require the following plugins and libs:
You can install it through bower package manager:
r install enjoyhint
Alternative way:
k href="<pathontheserver>/enjoyhint/enjoyhint.css" rel="stylesheet">
ipt src="<pathontheserver>/enjoyhint/enjoyhint.min.js"></script>
itialize instance
enjoyhint_instance = new EnjoyHint({});
mple config.
ly one step - highlighting(with description) "New" button
de EnjoyHint after a click on the button.
enjoyhint_script_steps = [
'click .new_btn' : 'Click the "New" button to start creating your project'
t script config
yhint_instance.set(enjoyhint_script_steps);
n Enjoyhint script
yhint_instance.run();
The sequence of steps can be only linear for now. So, the script config is an array. Every element of this array is the config for some step.
Highlight some button and after you click on it, highlight some panel:
enjoyhint_script_steps = [
'click .some_btn' : 'Click on this btn'
'click .some_panel' : 'Click on this panel'
"event selector" : "description" - to describe a step you should set an event type, selecte element and add description for this element (hint)keyCode - the code of a button, which triggers the next EnjoyHint step upon a click. Defined by the ?key? event. (?key #block? : ?hello?).event_selector - if you need to attach an event (that was set in “event” property) to other selector, you can use this onetimeout - delay before the moment, when an element is highlightedshape - shape for highlighting (circle|rect)radius - if the shape of “circle” is specified, we can set the radius.margin - margin for the highlight shape (for Ex.:10)top - top margin for the shape of “rect” typeright - right margin for the shape of “rect” typebottom - bottom margin for the shape of “rect” typeleft - left margin for the shape of “rect” typescrollAnimationSpeed - sets the auto scroll speed (ms).nextButton - allows applying its classes and names for the button N?xt.skipButton - allows applying its classes and names for the button Skip. For the example :options = {
"next #block": 'Hello.',
"nextButton" : {className: "myNext", text: "NEXT"},
"skipButton" : {className: "mySkip", text: "SKIP"},
}
showSkip - shows or hides the Skip button (true|false)showNext - shows or hides the Next button (true|false)auto - for example, you need to click on the same button on the second step imediatelly after the first step and go to the next step after it. Then you can use “auto” in the “event_type” property and “click” in “event” property.
custom - this value is very usefull if you need to go to the next step by event in your app code. For example, you want to go to the next step only after some data have been loaded in your application. Then you should use the “custom” event_type and the “trigger” method of the EnjoyHint instance.ample of using custom event_type
t('/load/some_data', function(data){
igger method has only one argument: event_name.(equal to the value of event property in step config)
yhint_instance.trigger('custom_event_name');
next - when you set value of event_type to “next”, you will see the “Next” btn on this step.key - tells EnjoyHint to go to the next step when you click on the button defined by the keyCodeset - set current steps configuration. Arguments: configrun - run the current script. Has no argumentsresume - resume the script from the step where it was stopped. Has no argumentsgetCurrentStep - returns the current step indextrigger - After writing this code you can either move to the next step or finish with EnjoyHint (next|skip)Script Events:
onStart - fires on the first step.onEnd - fires after the last step in script.onSkip - fires after user has clicked skip.enjoyhint_instance = new EnjoyHint({
art:function(){
something
onBeforeStart - fires before the step is started.enjoyhint_script_steps = [
ctor:'.some_btn',//jquery selector
t:'click',
ription:'Click on this btn',
foreStart:function(){
do something