|
| 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