Skip to content

Commit beb6fc7

Browse files
author
scates
committed
Adding wizard initial build
1 parent ca4d77d commit beb6fc7

File tree

4 files changed

+235
-5
lines changed

4 files changed

+235
-5
lines changed

‎Gruntfile.js‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,17 @@ module.exports = function(grunt) {
1717
pkg: grunt.file.readJSON('package.json'),
1818
concat: {
1919
js: {
20-
src: ['src/angularify.semantic.js', 'src/accordion/accordion.js',
21-
'src/checkbox/checkbox.js', 'src/dimmer/dimmer.js',
22-
'src/dropdown/dropdown.js', 'src/modal/modal.js',
20+
src: ['src/angularify.semantic.js',
21+
'src/accordion/accordion.js',
22+
'src/checkbox/checkbox.js',
23+
'src/dimmer/dimmer.js',
24+
'src/dropdown/dropdown.js',
25+
'src/modal/modal.js',
2326
'src/popup/popup.js',
24-
'src/sidebar/sidebar.js', 'src/rating/rating.js'
27+
'src/sidebar/sidebar.js',
28+
'src/rating/rating.js',
29+
'src/wizard/wizard.js',
30+
'src/wizard/wizardButtons.js'
2531
],
2632
dest: '<%= dist %>/<%= filename %>.js'
2733
}

‎src/angularify.semantic.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,5 @@ angular.module('angularify.semantic', ['angularify.semantic.accordion',
55
'angularify.semantic.modal',
66
'angularify.semantic.popup',
77
'angularify.semantic.rating',
8-
'angularify.semantic.sidebar']);
8+
'angularify.semantic.sidebar',
9+
'angularify.semantic.wizard']);

‎src/wizard/README.md‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
angularify.semantic.wizard
2+
===============================
3+
4+
`angularify.semantic.wizard` - wizard/steps directive for angular.js.
5+
6+
CREDIT
7+
--------------------
8+
9+
This Wizard is a port of the angular-wizard by mgonto from [github](https://github.com/mgonto/angular-wizard)
10+
11+
Usage
12+
--------------------
13+
```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>
28+
</wizard>
29+
```
30+
31+
32+
`wizard` - can have following attributes:
33+
34+
* `fullwidth` - Go fullwidth for the steps bar;
35+
36+
37+
`wizard-pane` - can have the following attributes
38+
39+
* `title` - Title of the Step in the wizard
40+
41+
`Buttons` - There are 4 types of buttons that go in forms to move a wizards direction
42+
43+
* `wz-next` - next page
44+
* `wz-previous` - previous page
45+
* `wz-finish` - finish Wizard
46+
* `wz-cancel` - cancel wizard

‎src/wizard/wizard.js‎

Lines changed: 177 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,177 @@
1+
/* globals _:false */
2+
'use strict';
3+
angular.module('angularify.semantic.wizard', [])
4+
5+
6+
7+
.controller('WizardController', ['$scope',
8+
function($scope) {
9+
$scope.steps = [];
10+
$scope.currentStep = null;
11+
$scope.stepsLength = "";
12+
$scope.$watch('currentStep', function(step) {
13+
if (!step) return;
14+
var stepTitle = $scope.selectedStep.title || $scope.selectedStep.wzTitle;
15+
if ($scope.selectedStep && stepTitle !== $scope.currentStep) {
16+
$scope.goTo(_.findWhere($scope.steps, {
17+
title: $scope.currentStep
18+
}));
19+
}
20+
});
21+
22+
$scope.$watch('[editMode, steps.length]', function() {
23+
var editMode = $scope.editMode;
24+
if (_.isUndefined(editMode) || _.isNull(editMode)) return;
25+
26+
if (editMode) {
27+
_.each($scope.steps, function(step) {
28+
step.completed = true;
29+
});
30+
}
31+
}, true);
32+
33+
34+
35+
36+
this.addStep = function(step) {
37+
$scope.steps.push(step);
38+
if ($scope.steps.length === 1) {
39+
$scope.goTo($scope.steps[0]);
40+
}
41+
};
42+
43+
$scope.goTo = function(step) {
44+
unselectAll();
45+
$scope.selectedStep = step;
46+
if (!_.isUndefined($scope.currentStep)) {
47+
$scope.currentStep = step.title || step.wzTitle;
48+
}
49+
step.selected = true;
50+
$scope.$emit('wizard:stepChanged', {
51+
step: step,
52+
index: _.indexOf($scope.steps, step)
53+
});
54+
};
55+
56+
function unselectAll() {
57+
_.each($scope.steps, function(step) {
58+
step.selected = false;
59+
});
60+
$scope.selectedStep = null;
61+
}
62+
63+
this.next = function(draft) {
64+
var index = _.indexOf($scope.steps, $scope.selectedStep);
65+
if (!draft) {
66+
$scope.selectedStep.completed = true;
67+
}
68+
if (index === $scope.steps.length - 1) {
69+
this.finish();
70+
} else {
71+
$scope.goTo($scope.steps[index + 1]);
72+
}
73+
};
74+
75+
this.goTo = function(step) {
76+
var stepTo;
77+
if (_.isNumber(step)) {
78+
stepTo = $scope.steps[step];
79+
} else {
80+
stepTo = _.findWhere($scope.steps, {
81+
title: step
82+
});
83+
}
84+
$scope.goTo(stepTo);
85+
};
86+
87+
this.finish = function() {
88+
if ($scope.onFinish) {
89+
$scope.onFinish();
90+
}
91+
};
92+
93+
this.cancel = this.previous = function() {
94+
var index = _.indexOf($scope.steps, $scope.selectedStep);
95+
if (index === 0) {
96+
throw new Error('Cant go back. Its already in step 0');
97+
} else {
98+
$scope.goTo($scope.steps[index - 1]);
99+
}
100+
};
101+
}
102+
])
103+
.directive('wizard', function() {
104+
return {
105+
restrict: 'EA',
106+
replace: true,
107+
transclude: true,
108+
scope: {
109+
fullwidth: "@"
110+
},
111+
controller: 'WizardController',
112+
template: '<div><div class="ui steps {{stepsLength}} small"><div class="ui step" ng-repeat="step in steps" ng-click="!step.completed || goTo(step)" ng-class="{disabled: !step.completed && !step.selected, active: step.selected && !step.completed, done: step.completed && !step.selected, editing: step.selected && step.completed}">{{step.title}}</div></div><div ng-transclude></div></div>',
113+
link: function(scope, element, attrs, WizardController) {
114+
if (scope.fullwidth === 'true') {
115+
var widthmatrix = {
116+
0: '',
117+
1: 'one',
118+
2: 'two',
119+
3: 'three',
120+
4: 'four',
121+
5: 'five',
122+
6: 'six',
123+
7: 'seven',
124+
8: 'eight',
125+
9: 'nine',
126+
10: 'ten'
127+
};
128+
scope.stepsLength = widthmatrix[scope.steps.length];
129+
}
130+
131+
}
132+
};
133+
})
134+
.directive('wizardPane', function() {
135+
return {
136+
restrict: 'EA',
137+
replace: true,
138+
transclude: true,
139+
require: '^wizard',
140+
controller: 'WizardController',
141+
scope: {
142+
title: '@'
143+
},
144+
template: '<div class="ui segment" ng-transclude ng-show="selected"></div>',
145+
link: function(scope, element, attrs, WizardController) {
146+
147+
WizardController.addStep(scope);
148+
}
149+
};
150+
});
151+
152+
153+
function wizardButtonDirective(action) {
154+
angular.module('angularify.semantic.wizard')
155+
.directive(action, function() {
156+
return {
157+
restrict: 'A',
158+
replace: false,
159+
require: '^wizard',
160+
link: function($scope, $element, $attrs, wizard) {
161+
162+
$element.on('click', function(e) {
163+
e.preventDefault();
164+
$scope.$apply(function() {
165+
$scope.$eval($attrs[action]);
166+
wizard[action.replace("wz", "").toLowerCase()]();
167+
});
168+
});
169+
}
170+
};
171+
});
172+
}
173+
174+
wizardButtonDirective('wzNext');
175+
wizardButtonDirective('wzPrevious');
176+
wizardButtonDirective('wzFinish');
177+
wizardButtonDirective('wzCancel');

0 commit comments

Comments
 (0)