Skip to content

Commit efb4071

Browse files
author
Volodymyr Tymtsiv
committed
Add Readme for 'Tutorials'.
1 parent 0addeef commit efb4071

1 file changed

Lines changed: 94 additions & 0 deletions

File tree

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
### Adding a new tutorial
2+
3+
To add a new tutorial you need to do the following:
4+
5+
1) Add a file with a scenario to tour_scenario folder which you want to implement
6+
2) Create a method in tutorial.controller.js which will start the tour.
7+
3) Create a button in main-tutorial.html.
8+
4) Add ng-click directive to the button with a method which will start the tour.
9+
10+
11+
Now let's look closer to these steps.
12+
13+
### Adding scenario
14+
15+
You need to create a file and declare all steps related to the tour.
16+
17+
Each step has a type. For each step, the element of the step will be highlighted.
18+
19+
There are four step types:
20+
21+
- click - To get the next step it is necessary to click on the element;
22+
- input - To get the next step it is necessary to type in the input what is described in the step and click 'next' button;
23+
- notice - Just highlight the element. To get the next step it is necessary to click 'next' button;
24+
- select - Just highlight the element
25+
26+
Each step could have a custom logic relate to step (some action which needs to do before or after the step is shown)
27+
They should be declared in `eventHandlers` array.
28+
29+
Also, each step could have buttons.
30+
31+
There are four type of buttons:
32+
33+
- next
34+
- back
35+
- skip
36+
- done
37+
38+
To declare a default behavior you just need to declare the button type.
39+
If necessary to add some custom behavior to the button you could declare `action` field in button which is a function. It will rewrite the default behavior of the button.
40+
41+
For instance:
42+
43+
```
44+
{
45+
type: 'back',
46+
action: function () {
47+
$("#info-tab").trigger("click");
48+
}
49+
}
50+
```
51+
52+
53+
### Creating a method in tutorial.controller.js
54+
55+
Example:
56+
```javascript
57+
$scope.startServiceTutorial = function () {
58+
TourBuilder.buildTour(createServiceScenario);
59+
};
60+
61+
```
62+
63+
Where `createServiceScenario` is the name of the variable in the scenario file.
64+
65+
66+
### Adding button and use the method from the controller
67+
68+
69+
Example:
70+
71+
```html
72+
<button class="btn btn-primary" type="button" ng-click="startServiceTutorial()">
73+
Let's create a Service
74+
</button>
75+
```
76+
77+
Where `startServiceTutorial` the method name of the new tour.
78+
79+
80+
81+
82+
83+
84+
85+
86+
87+
88+
89+
90+
91+
92+
93+
94+

0 commit comments

Comments
 (0)