Skip to content

Commit 9e1d34a

Browse files
jspdownjspdown
committed
Merge pull request #18 from jspdown/fix/click-on-step-wizard
Click on a previous step makes it active
2 parents f6aa052 + 7fc0a69 commit 9e1d34a

File tree

6 files changed

+223
-57
lines changed

6 files changed

+223
-57
lines changed

‎karma.conf.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ basePath = '.';
33
files = [
44
JASMINE,
55
JASMINE_ADAPTER,
6+
'bower_components/jquery/dist/jquery.min.js',
67
'bower_components/angular/angular.min.js',
78
'bower_components/angular-mocks/angular-mocks.js',
89
'src/**/*.js',

‎src/wizard/README.md‎

Lines changed: 22 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -11,27 +11,35 @@ This Wizard is a port of the angular-wizard by mgonto from [github](https://gith
1111
Usage
1212
--------------------
1313
```html
14-
<wizard fullwidth="true">
15-
<wizard-pane title="Step1">
16-
<h1>Step 1</h1>
17-
<form name="step1form">
18-
<input type="text">
19-
<input type="submit" wz-next>
20-
</form>
21-
</wizard-pane>
22-
<wizard-pane title="Step2">
23-
<h1>Step 2</h1>
24-
<form name="step2form">
25-
<input type="text">
26-
<input type="submit" wz-finish>
27-
</wizard-pane>
14+
<wizard fullwidth="true" on-finish="finished()" current-step="currentStep">
15+
<wizard-pane title="Step1">
16+
<h1>Step 1</h1>
17+
<form name="step1form">
18+
<div class="ui input">
19+
<input type="text">
20+
</div>
21+
<button type="submit" class="ui button" wd-next>Next</button>
22+
</form>
23+
</wizard-pane>
24+
<wizard-pane title="Step2">
25+
<h1>Step 2</h1>
26+
<form name="step2form">
27+
<div class="ui input">
28+
<input type="text">
29+
</div>
30+
<button type="submit" class="ui button" wd-finish>Finish</button>
31+
<button type="submit" class="ui button" wd-previous>Previous</button>
32+
</form>
33+
</wizard-pane>
2834
</wizard>
2935
```
3036

3137

3238
`wizard` - can have following attributes:
3339

3440
* `fullwidth` - Go fullwidth for the steps bar;
41+
* `current-step` - Updated each time a new step is selected
42+
* `on-finish` - Function to call when a button with `wd-finish` will be clicked
3543

3644

3745
`wizard-pane` - can have the following attributes

‎src/wizard/doc/controllers.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
2+
angular
3+
.module('dropdownApp', ['angularify.semantic.wizard'])
4+
.controller('RootCtrl', RootCtrl);
5+
6+
function RootCtrl ($scope) {
7+
$scope.currentStep = '';
8+
9+
$scope.callme = function () {
10+
console.log('finished');
11+
}
12+
}
13+

‎src/wizard/doc/demo.html‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<!DOCTYPE HTML>
2+
<html ng-app="dropdownApp">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Semantic UI + Angular.JS</title>
6+
<link href="../../../bower_components/semantic/dist/semantic.min.css" rel="stylesheet" type="text/css" />
7+
</head>
8+
<body ng-controller="RootCtrl">
9+
<h2>Wizard</h2>
10+
11+
<p class="ui info message">
12+
Current step: <strong>{{ currentStep }}</strong>
13+
</p>
14+
15+
<p class="ui message" ng-show="isFinished">
16+
Finished!
17+
</p>
18+
19+
<wizard fullwidth="true" on-finish="isFinished = true" current-step="currentStep">
20+
<wizard-pane title="Step1">
21+
<h1>Step 1</h1>
22+
<form name="step1form">
23+
<div class="ui input">
24+
<input type="text">
25+
</div>
26+
<button type="submit" class="ui button" wz-next>Next</button>
27+
</form>
28+
</wizard-pane>
29+
<wizard-pane title="Step2">
30+
<h1>Step 2</h1>
31+
<form name="step2form">
32+
<div class="ui input">
33+
<input type="text">
34+
</div>
35+
<button type="submit" class="ui button" wz-next>Next</button>
36+
</form>
37+
</wizard-pane>
38+
<wizard-pane title="Step3">
39+
<h1>Step 3</h1>
40+
<form name="step3form">
41+
<div class="ui input">
42+
<input type="text">
43+
</div>
44+
<button type="submit" class="ui button" wz-finish>Finish</button>
45+
<button type="submit" class="ui button" wz-previous>Previous</button>
46+
</form>
47+
</wizard-pane>
48+
</wizard>
49+
50+
<script src="../../../bower_components/angular/angular.min.js" type="text/javascript"></script>
51+
<script src="../wizard.js" type="text/javascript"></script>
52+
<script src="controllers.js" type="text/javascript"></script>
53+
</body>
54+
</html>

‎src/wizard/test/wizard.spec.js‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
describe('wizard', function () {
2+
3+
beforeEach(module('angularify.semantic.wizard'));
4+
5+
describe('controller', function () {
6+
var controller,
7+
scope;
8+
9+
beforeEach(inject(function ($controller, $rootScope) {
10+
scope = $rootScope.$new();
11+
controller = $controller('WizardController', { $scope: scope });
12+
}));
13+
14+
describe('with 2 steps', function() {
15+
it("should contain 2 steps", function () {
16+
controller.addStep({ title: 'step1' });
17+
controller.addStep({ title: 'step2' });
18+
expect(scope.steps.length).toBe(2);
19+
});
20+
});
21+
});
22+
23+
describe('directive (wizard)', function () {
24+
var controller,
25+
scope,
26+
elm;
27+
28+
beforeEach(inject(function ($rootScope, $compile) {
29+
scope = $rootScope;
30+
elm = angular.element('<wizard fullwidth="true">' +
31+
'<wizard-pane title="Step1"><h1>Step 1</h1></wizard-pane>' +
32+
'<wizard-pane title="Step2"><h1>Step 2</h1></wizard-pane>' +
33+
'<wizard-pane title="Step3"><h1>Step 3</h1></wizard-pane>' +
34+
'</wizard>');
35+
$compile(elm)(scope);
36+
scope.$digest();
37+
}));
38+
39+
it('should create a .steps div', function () {
40+
expect(elm.find('.steps').length).toBe(1);
41+
});
42+
43+
it('should create a have class `three`', function () {
44+
expect(elm.find('.steps').hasClass('three')).toBeTruthy();
45+
});
46+
47+
it('should contain 3 wizard pane', function () {
48+
expect(elm.find('.ui.segment').length).toBe(3);
49+
});
50+
});
51+
52+
describe('directive (wizard-pane)', function () {
53+
var controller,
54+
scope,
55+
elm,
56+
subElm;
57+
58+
beforeEach(inject(function ($rootScope, $compile) {
59+
scope = $rootScope;
60+
elm = angular.element('<wizard fullwidth="true"></wizard>');
61+
subElm = angular.element('<wizard-pane title="Step1"><h1>Step 1</h1></wizard-pane>');
62+
63+
elm.append(subElm);
64+
65+
$compile(elm)(scope);
66+
scope.$digest();
67+
}));
68+
69+
70+
it('should contain a h1', function () {
71+
expect(elm.find('h1').length).toBe(1);
72+
});
73+
});
74+
});

0 commit comments

Comments
 (0)