You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
**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.
6
4
7
5
EnjoyHint is free software distributed under the terms of MIT license.
8
6
9
7
Check out this [issue tracker demo with EnjoyHint](http://xbsoftware.com/products/enjoyhint/) and a [TODO app demo](http://xbsoftware.github.io/enjoyhint/) ([downloadable package](http://xbsoftware.github.io/enjoyhint/enjoyhint_todo_demo.zip))
10
8
11
-
Dependencies
12
-
=========
9
+
#### Dependencies
13
10
EnjoyHint require the following plugins and libs:
14
11
15
-
1. Jquery >1.7
16
-
2. kineticJS v5.1.0(included into js file)
12
+
* jQuery > 1.7
13
+
* KineticJS v5.1.0(included into js file)
17
14
18
-
Installation
19
-
=========
20
-
1. Download the latest version of EnjoyHint
21
-
2. Extract the archive with EnjoyHint.
22
-
3. Move the EnjoyHint directory to somewhere on your webserver
23
-
4. Insert next lines into your page's \<head\> tag:
15
+
#### Installation
16
+
You can install it through `bower` package manager:
17
+
```
18
+
bower install enjoyhint
24
19
```
20
+
Alternative way:
21
+
- Download the latest version of EnjoyHint
22
+
- Extract the archive with EnjoyHint.
23
+
- Move the EnjoyHint directory to somewhere on your webserver
24
+
- Insert next lines into your page's \<head\> tag:
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.
59
55
60
-
Example.
56
+
#### Example of script configuration
61
57
Highlight some button and after you click on it, highlight some panel:
62
-
```
58
+
```javascript
63
59
var enjoyhint_script_steps = [
64
60
{
65
-
selector:'.some_btn',//jquery selector
66
-
event:'click',
67
-
description:'Click on this btn'
61
+
selector:'.some_btn',//jquery selector
62
+
event:'click',
63
+
description:'Click on this btn'
68
64
},
69
65
{
70
-
selector:'.some_panel',//jquery selector
71
-
event:'click',
72
-
description:'Click on this panel'
66
+
selector:'.some_panel',//jquery selector
67
+
event:'click',
68
+
description:'Click on this panel'
73
69
}
74
70
];
75
71
```
76
72
77
-
78
-
Properties of the step configuration:
79
-
**selector** - jquery selector of the DOM-element, that will be highlighted
80
-
**event** - a jquery event that is set for the element defined in the selector. When it fires, the next step is triggered.
81
-
**key_code** - key code for any "key*" event. Event fires only if key code of the pressed key is equal to this property.
82
-
**event_selector** - if you need to attach an event (that was set in "event" property) to other selector, you can use this one
83
-
**description** - description for the highlighted element
84
-
**timeout** - delay before the moment, when an element is highlighted
85
-
**shape** - shape for highlighting (circle|rect)
86
-
**margin** - margin for the highlight shape (for Ex.:10)
87
-
**top** - top margin for the shape of "rect" type
88
-
**right** - right margin for the shape of "rect" type
89
-
**bottom** - bottom margin for the shape of "rect" type
90
-
**left** - left margin for the shape of "rect" type
91
-
**event_type** - type of event that will get you to the next step(auto|custom|next)
92
-
93
-
Event Types descriptions:
73
+
#### Properties of the step configuration
74
+
*`selector` - jquery selector of the DOM-element, that will be highlighted
75
+
*`event` - a jquery event that is set for the element defined in the selector. When it fires, the next step is triggered.
76
+
*`key_code` - key code for any "key*" event. Event fires only if key code of the pressed key is equal to this property.
77
+
*`event_selector` - if you need to attach an event (that was set in "event" property) to other selector, you can use this one
78
+
*`description` - description for the highlighted element
79
+
*`timeout` - delay before the moment, when an element is highlighted
80
+
*`shape` - shape for highlighting (circle|rect)
81
+
*`margin` - margin for the highlight shape (for Ex.:10)
82
+
*`top` - top margin for the shape of "rect" type
83
+
*`right` - right margin for the shape of "rect" type
84
+
*`bottom` - bottom margin for the shape of "rect" type
85
+
*`left` - left margin for the shape of "rect" type
86
+
*`event_type` - type of event that will get you to the next step(auto|custom|next)
87
+
88
+
#### Event Types descriptions:
94
89
**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.
95
-
96
-
**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.
97
-
```
90
+
*`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.
91
+
```javascript
98
92
//Example of using custom event_type
99
93
$.get('/load/some_data', function(data){
100
94
//trigger method has only one argument: event_name.(equal to the value of event property in step config)
101
95
enjoyhint_instance.trigger('custom_event_name');
102
96
});
103
97
```
104
-
**next** - when you set value of event_type to "next", you will see the "Next" btn on this step.
105
-
106
-
98
+
*`next` - when you set value of event_type to "next", you will see the "Next" btn on this step.
107
99
108
-
Methods
109
-
=========
110
-
**setScript** - set current steps configuration. Arguments: config
111
-
**runScript** - run the current script. Has no arguments
112
-
**resumeScript** - resume the script from the step where it was stopped. Has no arguments
113
-
**getCurrentStep** - returns the current step index
114
-
115
-
116
-
Events
117
-
=========
100
+
#### Methods
101
+
*`setScript` - set current steps configuration. Arguments: config
102
+
*`runScript` - run the current script. Has no arguments
103
+
*`resumeScript` - resume the script from the step where it was stopped. Has no arguments
104
+
*`getCurrentStep` - returns the current step index
118
105
106
+
#### Events
119
107
**Script Events**:
120
-
121
-
122
-
onStart - fires on the first step
123
-
onEnd - fires after the last step in script
124
-
```
108
+
*`onStart` - fires on the first step.
109
+
*`onEnd` - fires after the last step in script.
110
+
```javascript
125
111
var enjoyhint_instance =newEnjoyHint({
126
112
onStart:function(){
127
113
//do something
128
114
}
129
115
});
130
116
```
131
-
132
117
**Step Events**:
133
-
134
-
onBeforeStart - fires before the step is started
135
-
136
-
```
118
+
*`onBeforeStart` - fires before the step is started.
119
+
```javascript
137
120
var enjoyhint_script_steps = [
138
121
{
139
122
selector:'.some_btn',//jquery selector
@@ -145,4 +128,3 @@ var enjoyhint_script_steps = [
0 commit comments