Skip to content

Commit b365075

Browse files
author
Volodymyr Tymtsiv
committed
Add first step for 'Services' tutorial.
1 parent 69f5d20 commit b365075

4 files changed

Lines changed: 111 additions & 114 deletions

File tree

‎app/admin_components/adf-tutorial/service-tutorial.directive.js‎

Lines changed: 100 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
angular.module('dfTutorial')
44

5-
.directive('dfServiceTutorial', ['MOD_TUTORIALS_ASSET_PATH', function (MOD_TUTORIALS_ASSET_PATH) {
5+
.directive('dfServiceTutorial', ['MOD_TUTORIALS_ASSET_PATH', 'ngIntroService', function (MOD_TUTORIALS_ASSET_PATH, ngIntroService) {
66

77
return {
88
restrict: 'E',
@@ -12,6 +12,105 @@ angular.module('dfTutorial')
1212
templateUrl: MOD_TUTORIALS_ASSET_PATH + 'views/service-tutorial.html',
1313
link: function (scope, elem, attrs) {
1414

15+
scope.IntroOptions = {
16+
steps: [
17+
{
18+
element: document.querySelector('.tutorial-step-Services'),
19+
intro: "Open the 'Services' tab."
20+
},
21+
{
22+
element: '#step2',
23+
intro: 'Here is hello 2'
24+
}
25+
],
26+
showStepNumbers: true,
27+
showBullets: false,
28+
exitOnOverlayClick: false,
29+
exitOnEsc: true,
30+
nextLabel: 'next',
31+
prevLabel: '<span style="color:green">Previous</span>',
32+
skipLabel: 'Exit',
33+
doneLabel: 'Thanks'
34+
};
35+
36+
37+
// $scope.CompletedEvent = function () {
38+
// console.log('[directive] completed Event')
39+
// }
40+
// $scope.ExitEvent = function () {
41+
// console.log('[directive] exit Event')
42+
// }
43+
// $scope.ChangeEvent = function (element) {
44+
// console.log('[directive] change Event')
45+
// console.info(element);
46+
// }
47+
// $scope.BeforeChangeEvent = function (element) {
48+
// console.log('[directive] beforeChange Event')
49+
// console.info(element);
50+
// }
51+
// $scope.AfterChangeEvent = function (element) {
52+
// console.log('[directive] after change Event')
53+
// console.info(element);
54+
// }
55+
// $scope.clearAndStartNewIntro = function () {
56+
// $scope.IntroOptions = {
57+
// steps: [
58+
// {
59+
// element: document.querySelector('#step1'),
60+
// intro: "After being cleared, step 1"
61+
// },
62+
// {
63+
// element: '#step2',
64+
// intro: 'Setup and details :)',
65+
// position: 'right'
66+
// },
67+
// {
68+
// element: '.jumbotron',
69+
// intro: 'We added a small feature, adding <pre>ng-intro-disable-button</pre> your buttons will be disabled when introJs is open :) <br><p style="color:red">if you\'re using anchor tags, you should prevent ng-click manually. </p> <p> <a target="_blank" href="https://github.com/mendhak/angular-intro.js/wiki/How-to-prevent-a-ng-click-event-when-a-tag--a--is-disabled%3F">click here for more details.</a></p>'
70+
// }
71+
// ],
72+
// showStepNumbers: true,
73+
// showBullets: true,
74+
// exitOnOverlayClick: false,
75+
// exitOnEsc: false,
76+
// nextLabel: '<strong style="color:green">Next!</strong>',
77+
// prevLabel: '<span style="color:red">Previous</span>',
78+
// skipLabel: 'Skip',
79+
// doneLabel: 'Done'
80+
// };
81+
//
82+
//
83+
// ngIntroService.clear();
84+
// ngIntroService.setOptions($scope.IntroOptions);
85+
//
86+
// // ngIntroService.onComplete(function () {
87+
// // console.log('update some cookie or localstorage.')
88+
// // console.log(arguments)
89+
// // })
90+
// //
91+
// // ngIntroService.onExit(function () {
92+
// // console.log("[service] exit");
93+
// // })
94+
// //
95+
// // ngIntroService.onBeforeChange(function (element) {
96+
// // console.log("[service] before change");
97+
// // console.info(element);
98+
// // })
99+
// //
100+
// // ngIntroService.onChange(function (element) {
101+
// // console.log("[service] on change");
102+
// // console.info(element);
103+
// //
104+
// // })
105+
// //
106+
// // ngIntroService.onAfterChange(function (element) {
107+
// // console.log("[service] after Change");
108+
// // console.info(element);
109+
// // })
110+
//
111+
// ngIntroService.start();
112+
// }
113+
15114
}
16115
};
17116
}])

‎app/admin_components/adf-tutorial/tutorial.controller.js‎

Lines changed: 1 addition & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
angular.module('dfTutorial')
44

5-
.controller('TutorialController', ['ngIntroService', '$scope', function (ngIntroService, $scope) {
5+
.controller('TutorialController', ['$scope', function ($scope) {
66

77
$scope.$parent.title = 'Tutorials';
88

@@ -18,109 +18,6 @@ angular.module('dfTutorial')
1818
path: 'app-tutorial'
1919
}
2020
];
21-
22-
$scope.IntroOptions = {
23-
steps: [
24-
{
25-
element: document.querySelector('#step1'),
26-
intro: "Here is hello 1"
27-
},
28-
{
29-
element: '#step2',
30-
intro: 'Here is hello 2'
31-
}
32-
],
33-
showStepNumbers: true,
34-
showBullets: false,
35-
exitOnOverlayClick: true,
36-
exitOnEsc: true,
37-
nextLabel: 'next',
38-
prevLabel: '<span style="color:green">Previous</span>',
39-
skipLabel: 'Exit',
40-
doneLabel: 'Thanks'
41-
};
42-
43-
// ngIntroService.setOptions($scope.IntroOptions);
44-
45-
46-
// ngIntroService.start();
47-
48-
// $scope.CompletedEvent = function () {
49-
// console.log('[directive] completed Event')
50-
// }
51-
// $scope.ExitEvent = function () {
52-
// console.log('[directive] exit Event')
53-
// }
54-
// $scope.ChangeEvent = function (element) {
55-
// console.log('[directive] change Event')
56-
// console.info(element);
57-
// }
58-
// $scope.BeforeChangeEvent = function (element) {
59-
// console.log('[directive] beforeChange Event')
60-
// console.info(element);
61-
// }
62-
// $scope.AfterChangeEvent = function (element) {
63-
// console.log('[directive] after change Event')
64-
// console.info(element);
65-
// }
66-
// $scope.clearAndStartNewIntro = function () {
67-
// $scope.IntroOptions = {
68-
// steps: [
69-
// {
70-
// element: document.querySelector('#step1'),
71-
// intro: "After being cleared, step 1"
72-
// },
73-
// {
74-
// element: '#step2',
75-
// intro: 'Setup and details :)',
76-
// position: 'right'
77-
// },
78-
// {
79-
// element: '.jumbotron',
80-
// intro: 'We added a small feature, adding <pre>ng-intro-disable-button</pre> your buttons will be disabled when introJs is open :) <br><p style="color:red">if you\'re using anchor tags, you should prevent ng-click manually. </p> <p> <a target="_blank" href="https://github.com/mendhak/angular-intro.js/wiki/How-to-prevent-a-ng-click-event-when-a-tag--a--is-disabled%3F">click here for more details.</a></p>'
81-
// }
82-
// ],
83-
// showStepNumbers: true,
84-
// showBullets: true,
85-
// exitOnOverlayClick: false,
86-
// exitOnEsc: false,
87-
// nextLabel: '<strong style="color:green">Next!</strong>',
88-
// prevLabel: '<span style="color:red">Previous</span>',
89-
// skipLabel: 'Skip',
90-
// doneLabel: 'Done'
91-
// };
92-
//
93-
//
94-
// ngIntroService.clear();
95-
// ngIntroService.setOptions($scope.IntroOptions);
96-
//
97-
// // ngIntroService.onComplete(function () {
98-
// // console.log('update some cookie or localstorage.')
99-
// // console.log(arguments)
100-
// // })
101-
// //
102-
// // ngIntroService.onExit(function () {
103-
// // console.log("[service] exit");
104-
// // })
105-
// //
106-
// // ngIntroService.onBeforeChange(function (element) {
107-
// // console.log("[service] before change");
108-
// // console.info(element);
109-
// // })
110-
// //
111-
// // ngIntroService.onChange(function (element) {
112-
// // console.log("[service] on change");
113-
// // console.info(element);
114-
// //
115-
// // })
116-
// //
117-
// // ngIntroService.onAfterChange(function (element) {
118-
// // console.log("[service] after Change");
119-
// // console.info(element);
120-
// // })
121-
//
122-
// ngIntroService.start();
123-
// }
12421
}])
12522

12623

‎app/admin_components/adf-tutorial/views/service-tutorial.html‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<df-section-header data-title="'Services tutorial'"></df-section-header>
22

3-
<div class="container-narrow" ng-controller="TutorialController">
4-
<div ng-intro-options="IntroOptions" ng-intro-method="startServiceTutorial">
3+
<br>
4+
<p>Services are where you set up REST API connections to databases, file storage, email, remote web services, and more.
55

6-
<button ng-click="startServiceTutorial()">Demo</button>
7-
<p id="step1">Hello</p>
8-
<p id="step2">Hello2</p>
9-
</div>
10-
</div>
6+
</p>
7+
<button class="btn btn-primary"
8+
type="button" ng-intro-options="IntroOptions" ng-intro-method="startServiceTutorial"
9+
ng-click="startServiceTutorial()">Let's go through 'Services'
10+
</button>

‎app/admin_components/adf-utility/views/df-component-nav.html‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<div class="df-component-navbar">
2-
<ul class="nav nav-pills pull-right visible-md visible-lg">
3-
<li data-ng-repeat="link in options.links" data-ng-class="activeLink === link.name ? 'active' : ''">
2+
<ul class="nav nav-pills pull-right visible-md visible-lg" >
3+
<li class="tutorial-step-{{link.label}}" data-ng-repeat="link in options.links" data-ng-class="activeLink === link.name ? 'active' : ''">
44
<a href="#{{link.path}}" ng-click="reloadRoute(link.path)">{{link.label}}</a>
55
</li>
66
</ul>
@@ -15,6 +15,7 @@
1515
<div class="panel-heading">
1616
<button class="btn btn-default btn-xs" data-ng-click="closeMenu()">Cancel</button>
1717
</div>
18+
<!--//Todo Think about walkthrough guide when navbar is hidden and right burger menu is available -->
1819
<ul class="list-group">
1920
<li data-ng-repeat="link in options.links" class="list-group-item" data-ng-class="activeLink === link.name ? 'active' : ''">
2021
<a href="#{{link.path}}" ng-click="reloadRoute(link.path)" >{{link.label}}</a>

0 commit comments

Comments
 (0)