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:
- jQuery > 1.7
- KineticJS v5.1.0 (included into js file)
You can install it through npm package manager:
npm install enjoyhint.js
Alternative way:
- Download the latest version of EnjoyHint
- Extract the archive with EnjoyHint.
- Move the EnjoyHint directory to somewhere on your webserver
- Insert next lines into your page's <head> tag:
<link href="<pathontheserver>/enjoyhint/enjoyhint.css" rel="stylesheet">
<script src="<pathontheserver>/enjoyhint/enjoyhint.min.js"></script>//initialize instance
var enjoyhint_instance = new EnjoyHint({});
//simple config.
//Only one step - highlighting(with description) "New" button
//hide EnjoyHint after a click on the button.
var enjoyhint_script_steps = [
{
'click .new_btn' : 'Click the "New" button to start creating your project'
}
];
//set script config
enjoyhint_instance.set(enjoyhint_script_steps);
//run Enjoyhint script
enjoyhint_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:
var enjoyhint_script_steps = [
{
'click .some_btn' : 'Click on this btn'
},
{
'click .some_panel' : 'Click on this panel'
}
];container- scrollable container (defaultbody)animation_time- time between scroll animation and arrow render (default ms800)show_close- shows or hides the Close button (true|false)scroll_option- scroll options (scroll_to|scroll_into_view_top|defaultscroll_into_view_bottom)debug_step- show debug step on console log (true|false)
//initialize instance
var enjoyhint_instance = new EnjoyHint({
container: '.main-panel'
});Script Events:
onStart- fires on the first step.onEnd- fires after the last step in script.onSkip- fires after user has clicked skip, or close.onNext- fires at the start of each step.
var enjoyhint_instance = new EnjoyHint({
onStart:function(){
//do something
}
});"event selector" : "description"- to describe a step you should set an event type, selecte element and add description for this element (hint)event_type- the non-standard eventdescription- the description for the selector elementkeyCode- 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).label_offset_x- adjust the horizontal position of the label.label_offset_y- adjust the vertical position of the label.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 :
var 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- Triggers event on selector automatically, and continues to the next step. 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.
enjoyhint_instance.set( [ {
'auto selector' : 'This is what happens when you click this button.',
event: 'click'
} ] );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.
enjoyhint_instance.set( [ {
'custom selector' : 'This element is loading',
event: 'custom_event_name',
onBeforeStart: function () {
$.get('/load/some_data', function(data){
enjoyhint_instance.trigger('custom_event_name');
});
}
} ] );next- Wait for next button to be pushed.key- Wait for button defined by thekeyCodestep parameter to be triggered on element.no-skip- Do not show Next or Skip, you need make an event to move to next step.
enjoyhint_instance.set( [ {
'no-skip .select-panel': 'This step will move to next step in 2s.',
onBeforeStart: function () {
setTimeout(function () {
enjoyhint_instance.trigger('next');
}, 2000);
}
} ] );stop()- End scriptreRunScript(current_step)- Restart script at current_step.set(steps_array)- Set current steps configuration.setCurrentStep(current_step)- Set the step to resume at.run()- Run the current script.resume()- Resume the script from the step where it was stopped.getCurrentStep()- Returns the current step index.trigger( "next" | "skip" | "ignore_step" | custom_event_name )- Trigger the relevant script action.previousStep()- Go to the most recent valid step. Useful for implementing a back button.ignoreCurrentStep()- Ignore current step. Useful for implement auto-next step.
Step Events:
onBeforeStart- fires before the step is started.
var enjoyhint_script_steps = [
{
selector:'.some_btn',//jquery selector
event:'click',
description:'Click on this btn',
onBeforeStart:function(){
//do something
}
}
];- Fix issues on invalid elements
- Fix arrow render issue when scrolling
- Add ignoreCurrentStep()
- Add property label_offset_x
- Add property label_offset_y
- Add no-skip event
- Add debug_step as a parameter
- Add scroll_option as a parameter
- Add show_close as a parameter
- Prevent y axis overflow when hint is near the bottom of the screen
- Add previousStep()
- Make reRunScript work correctly (de-register event handlers)
- Draw the arrow with a cubic path so that when the arrow turns sharply, it turns near it's head
- Be more careful with calls to .off()
- Improve Documentation
- Add animation_time as a parameter
- Allow .trigger() to trigger custom events
- Add dist folder to improve build process
- Disable element click when next button shown
- Allow multiple run() on one instance
- Fix
getBoundingClientRect()error bug - Change label CSS text-align from
centertoleft
- Add instance option
container
- Fix auto scroll to the element
- Fix demo page scroll error
- Change z-indexes from 10xx to 20xx