-
Notifications
You must be signed in to change notification settings - Fork 0
/
demo.html
executable file
·141 lines (130 loc) · 7.52 KB
/
demo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!doctype html>
<html ng-app="wizardTest">
<head>
<title>ngWizard Demo Page</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.js"></script>
<script src="angular-wizard.js"></script>
<script>
angular
.module('wizardTest', [ 'ngWizard' ])
.controller('WizardController', [ '$scope', 'Wizard', 'WizardPage', function($scope, Wizard, WizardPage) {
var wizardPages = [
new WizardPage("first", "First Page", {
prev: null,
canPrev: false,
canNext: true,
next: 'second'
}, false),
new WizardPage("second", "Second Page", {
prev: 'first',
canPrev: true,
canNext: true,
next: 'third'
}, true),
new WizardPage("third", "Third Page", {
prev: 'second',
canPrev: true,
canNext: false,
next: null
}, true),
];
// The delay (in seconds) before allowing the user to click "Next"
var initDelay = 0;
// Create a new Wizard to display
$scope.wizard = new Wizard(wizardPages, initDelay);
// You can wrap this in a function to clear the wizard state between uses
$scope.resetWizard = function() {
$scope.wizard = new Wizard(wizardPages, initDelay);
}
}]);
</script>
</head>
<body>
<div ng-view ng-controller="WizardController" class="container">
<div class="row">
<div class="col-md-12">
<h1>ngWizard Demo Page</h1>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#wizardModal" ng-click="resetWizard()">
Launch demo wizard
</button>
<!-- Wizard Popup (Modal) -->
<div class="modal fade" id="wizardModal" tabindex="-1" role="dialog" aria-labelledby="wizardModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="wizardModalLabel">Wizard Demonstration</h4>
</div>
<div class="modal-body">
<div class="row">
<!-- Wizard Page selector -->
<div class="col-md-12">
<!-- Navigation here (work in progress) -->
<!--<ul class="nav nav-pills nav-justified">
<li role="presentation" ng-repeat="page in wizard.pages" ng-class="{ 'active': wizard.currentPage.key === page.key }">
<button class="btn btn-link" ng-disabled="page.disabled" ng-click="wizard.setCurrentPage(page)">{{ page.displayName }}</button>
</li>
</ul>-->
<!-- Wizard progress bar here -->
<div class="progress">
<div class="progress-bar" ng-class="{ 'progress-bar-success':wizard.percentage === 100 }" role="progressbar" aria-valuenow="{{ wizard.percentage }}" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: {{ wizard.percentage }}%;">
{{ wizard.percentage }}%
</div>
</div>
<!-- Wizard Pages shown here -->
<div ng-if="wizard.currentPage.key === 'first'">
<h4>First Page</h4>
<p>This is the first page of the wizard!</p>
<p>You can use this page to introduce the user to the operation that you are about to perform.</p>
</div>
<div ng-if="wizard.currentPage.key === 'second'">
<h4>Second Page</h4>
<p>This is the second page of the wizard!</p>
<p>You can use this page to collect data necessary to perform the operation described on the previous page.</p>
<p><strong>NOTE:</strong> Make sure to get the user's permission / confirmation before changing any of their data.</p>
</div>
<div ng-show="wizard.currentPage.key === 'third'">
<h4>Final Page</h4>
<p>This is the final page of the wizard!</p>
<p>This is where you can notify the user about the success (or failure) of the requested operation.</p>
<p><strong>NOTE:</strong> In the case of failure, you may wish to provide the user with a method of going back to adjust their input.</p>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<div ng-if="wizard.canNextPage()">
<!-- "Cancel" button (close modal with success === false) -->
<button class="btn btn-danger pull-left" ng-if="wizard.canNextPage()" data-dismiss="modal" aria-label="Close"><i class="fa fa-times"></i> Cancel</button>
<!-- Previous Page -->
<button class="btn btn-primary" ng-disabled="!wizard.canPrevPage()" ng-click="wizard.prevPage()"><i class="fa fa-arrow-circle-left"></i> Back</button>
<!-- Next Page -->
<button class="btn btn-primary" ng-disabled="wizard.currentTimer > 0 || !wizard.canNextPage()" ng-click="wizard.nextPage()">
Next <span ng-show="wizard.currentTimer > 0">({{ wizard.currentTimer }})</span>
<i ng-show="wizard.currentTimer === 0" class="fa fa-arrow-circle-right"></i>
<i ng-show="wizard.currentTimer > 0" class='fa fa-spinner fa-spin'></i>
</button>
</div>
<div ng-if="wizard.currentPage.nextPage === null">
<!-- "Finish" button (close modal with success === true) -->
<button class="btn btn-success" ng-disabled="!wizard.canPrevPage()" data-dismiss="modal" aria-label="Close" ng-click="wizard.success = true">Finish <i class="fa fa-check-circle"></i></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<pre>{{ wizard | json }}</pre>
</div>
</div>
</div>
</body>
</html>