Skip to content

Commit 051a4ce

Browse files
author
Ariel Faur
committed
fix scrollable content
1 parent f862c22 commit 051a4ce

7 files changed

Lines changed: 153 additions & 35 deletions

File tree

‎README.md‎

Lines changed: 23 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -65,14 +65,16 @@ Main wizard directive must be added to Ionic's ion-slide-box directive
6565
</ion-slide-box>
6666
```
6767

68-
6968
###ion-wizard-step
70-
This directive must be added to each ion-slide to define each step of the wizard. If needed, a condition can be added that will be
71-
evaluated before allowing the user to move forward. If the condition fails the directive will trigger
72-
an event that can be used to inform the user or perform any other action from the controller.
69+
Apply this directive to an `ion-slide` to define each step of the wizard. If needed, a condition can be defined which
70+
will be evaluated before allowing the user to move forward. An event is generated if the condition fails
71+
that can be used to inform the user or perform any other action from the controller.
72+
Apply the `has-header` class to add some top padding in case there is a navigation bar.
7373

7474
```
75-
<ion-slide ion-wizard-step condition="user.LastName != undefined">...</ion-slide>
75+
<ion-slide ion-wizard-step condition="user.LastName != undefined" class="has-header">
76+
...
77+
</ion-slide>
7678
```
7779

7880
Then in your app controller:
@@ -93,6 +95,22 @@ angular.module('myApp.controllers')
9395
}]);
9496
```
9597

98+
###ion-wizard-content
99+
To make the content scrollable within a particular slide wrap the content in a `ion-wizard-content` directive.
100+
If there is a navigation bar apply the `has-header` class to this directive instead of the outer `ion-slide-box`.
101+
102+
```
103+
<ion-slide-box ion-wizard>
104+
<ion-slide ion-wizard-step>
105+
<ion-wizard-content class="has-header">
106+
<div class="row">
107+
...
108+
</div>
109+
</ion-wizard-content>
110+
</ion-slide>
111+
</ion-slide-box>
112+
```
113+
96114
##Sample view with a wizard definition
97115

98116
```

‎bower.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "ionic-wizard",
33
"description": "A set of Angular/Ionic directives to create a wizard using Ionic's slide box component",
4-
"version": "1.0.2",
4+
"version": "1.0.3",
55
"homepage": "https://github.com/arielfaur/ionic-wizard",
66
"license": "MIT",
77
"devDependencies": {

‎dist/ion-wizard.js‎

Lines changed: 27 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
angular.module('ionic.wizard', [])
2-
2+
.directive('ionWizardContent', ['ionContentDirective', function(ionContentDirective) {
3+
return angular.extend({}, ionContentDirective[0], { scope: false });
4+
}])
35
.directive('ionWizard', ['$rootScope', '$ionicSlideBoxDelegate', function($rootScope, $ionicSlideBoxDelegate) {
46
return{
57
restrict: 'EA',
@@ -10,8 +12,8 @@ angular.module('ionic.wizard', [])
1012
conditions.push(condition);
1113
};
1214

13-
this.isStepValid = function(index) {
14-
return angular.isDefined(conditions[index]) ? conditions[index]() : true;
15+
this.getCondition = function(index) {
16+
return conditions[index];
1517
};
1618

1719
}],
@@ -26,11 +28,12 @@ angular.module('ionic.wizard', [])
2628
$ionicSlideBoxDelegate.previous();
2729
});
2830
scope.$on("wizard:Next", function() {
29-
if (controller.isStepValid(currentIndex)) {
31+
var fn = controller.getCondition(currentIndex);
32+
fn().then(function () {
3033
$ionicSlideBoxDelegate.next();
31-
} else {
34+
}, function () {
3235
$rootScope.$broadcast("wizard:StepFailed", {index: currentIndex});
33-
}
36+
})
3437
});
3538

3639
scope.$on("slideBox.slideChanged", function(e, index) {
@@ -40,19 +43,34 @@ angular.module('ionic.wizard', [])
4043
}
4144

4245
}])
43-
.directive('ionWizardStep', [function() {
46+
.directive('ionWizardStep', ['$q', function($q) {
4447
return {
4548
restrict: 'EA',
4649
scope: {
4750
conditionFn: '&condition'
4851
},
4952
require: '^^ionWizard',
5053
link: function(scope, element, attrs, controller) {
51-
controller.addCondition(attrs.condition ? scope.conditionFn : undefined);
54+
var fn = function() {
55+
var deferred = $q.defer();
56+
57+
if (angular.isUndefined(attrs.condition)) {
58+
deferred.resolve();
59+
} else {
60+
if (scope.conditionFn()) {
61+
deferred.resolve();
62+
} else {
63+
deferred.reject();
64+
}
65+
}
66+
67+
return deferred.promise;
68+
};
69+
controller.addCondition(fn);
5270
}
5371
}
5472
}])
55-
.directive('ionWizardPrevious', ['$rootScope', '$ionicSlideBoxDelegate', function($rootScope, $ionicSlideBoxDelegate) {
73+
.directive('ionWizardPrevious', ['$rootScope', '$ionicSlideBoxDelegate', function($rootScope) {
5674
return{
5775
restrict: 'EA',
5876
scope: {},
@@ -61,7 +79,6 @@ angular.module('ionic.wizard', [])
6179
element.addClass('ng-hide');
6280

6381
element.on('click', function() {
64-
//$ionicSlideBoxDelegate.previous();
6582
$rootScope.$broadcast("wizard:Previous");
6683
});
6784

‎example/www/js/ion-wizard.js‎

Lines changed: 27 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
angular.module('ionic.wizard', [])
2-
2+
.directive('ionWizardContent', ['ionContentDirective', function(ionContentDirective) {
3+
return angular.extend({}, ionContentDirective[0], { scope: false });
4+
}])
35
.directive('ionWizard', ['$rootScope', '$ionicSlideBoxDelegate', function($rootScope, $ionicSlideBoxDelegate) {
46
return{
57
restrict: 'EA',
@@ -10,8 +12,8 @@ angular.module('ionic.wizard', [])
1012
conditions.push(condition);
1113
};
1214

13-
this.isStepValid = function(index) {
14-
return angular.isDefined(conditions[index]) ? conditions[index]() : true;
15+
this.getCondition = function(index) {
16+
return conditions[index];
1517
};
1618

1719
}],
@@ -26,11 +28,12 @@ angular.module('ionic.wizard', [])
2628
$ionicSlideBoxDelegate.previous();
2729
});
2830
scope.$on("wizard:Next", function() {
29-
if (controller.isStepValid(currentIndex)) {
31+
var fn = controller.getCondition(currentIndex);
32+
fn().then(function () {
3033
$ionicSlideBoxDelegate.next();
31-
} else {
34+
}, function () {
3235
$rootScope.$broadcast("wizard:StepFailed", {index: currentIndex});
33-
}
36+
})
3437
});
3538

3639
scope.$on("slideBox.slideChanged", function(e, index) {
@@ -40,19 +43,34 @@ angular.module('ionic.wizard', [])
4043
}
4144

4245
}])
43-
.directive('ionWizardStep', [function() {
46+
.directive('ionWizardStep', ['$q', function($q) {
4447
return {
4548
restrict: 'EA',
4649
scope: {
4750
conditionFn: '&condition'
4851
},
4952
require: '^^ionWizard',
5053
link: function(scope, element, attrs, controller) {
51-
controller.addCondition(attrs.condition ? scope.conditionFn : undefined);
54+
var fn = function() {
55+
var deferred = $q.defer();
56+
57+
if (angular.isUndefined(attrs.condition)) {
58+
deferred.resolve();
59+
} else {
60+
if (scope.conditionFn()) {
61+
deferred.resolve();
62+
} else {
63+
deferred.reject();
64+
}
65+
}
66+
67+
return deferred.promise;
68+
};
69+
controller.addCondition(fn);
5270
}
5371
}
5472
}])
55-
.directive('ionWizardPrevious', ['$rootScope', '$ionicSlideBoxDelegate', function($rootScope, $ionicSlideBoxDelegate) {
73+
.directive('ionWizardPrevious', ['$rootScope', '$ionicSlideBoxDelegate', function($rootScope) {
5674
return{
5775
restrict: 'EA',
5876
scope: {},
@@ -61,7 +79,6 @@ angular.module('ionic.wizard', [])
6179
element.addClass('ng-hide');
6280

6381
element.on('click', function() {
64-
//$ionicSlideBoxDelegate.previous();
6582
$rootScope.$broadcast("wizard:Previous");
6683
});
6784

‎example/www/templates/intro.html‎

Lines changed: 62 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
</ion-nav-buttons>
1919
<ion-slide-box ion-wizard>
2020
<ion-slide ion-wizard-step>
21-
<ion-content class="has-header">
21+
<ion-wizard-content class="has-header">
2222
<div class="row">
2323
<div class="col col-center">
2424
<div class="card rounded">
@@ -75,9 +75,10 @@ <h2 class="positive">This slide is scrollable</h2>
7575
</div>
7676
</div>
7777
</div>
78-
</ion-content>
78+
</ion-wizard-content>
7979
</ion-slide>
80-
<ion-slide ion-wizard-step condition="step2.name" class="has-header">
80+
<ion-slide ion-wizard-step condition="step2.name">
81+
<ion-wizard-content class="has-header">
8182
<div class="row">
8283
<div class="col col-center">
8384
<div class="item item-input-inset">
@@ -97,8 +98,65 @@ <h2 class="positive">Now you can move on! Click on the next button.</h2>
9798
</div>
9899
</div>
99100
</div>
101+
<div class="row">
102+
<div class="col col-center">
103+
<div class="card rounded">
104+
<div class="item">
105+
<h2 class="positive">This slide is scrollable</h2>
106+
</div>
107+
<div class="item item-text-wrap">
108+
<p>
109+
Click the buttons above
110+
</p>
111+
</div>
112+
</div>
113+
</div>
114+
</div>
115+
<div class="row">
116+
<div class="col col-center">
117+
<div class="card rounded">
118+
<div class="item">
119+
<h2 class="positive">This slide is scrollable</h2>
120+
</div>
121+
<div class="item item-text-wrap">
122+
<p>
123+
Click the buttons above
124+
</p>
125+
</div>
126+
</div>
127+
</div>
128+
</div>
129+
<div class="row">
130+
<div class="col col-center">
131+
<div class="card rounded">
132+
<div class="item">
133+
<h2 class="positive">This slide is scrollable</h2>
134+
</div>
135+
<div class="item item-text-wrap">
136+
<p>
137+
Click the buttons above
138+
</p>
139+
</div>
140+
</div>
141+
</div>
142+
</div>
143+
<div class="row">
144+
<div class="col col-center">
145+
<div class="card rounded">
146+
<div class="item">
147+
<h2 class="positive">This slide is scrollable</h2>
148+
</div>
149+
<div class="item item-text-wrap">
150+
<p>
151+
Click the buttons above
152+
</p>
153+
</div>
154+
</div>
155+
</div>
156+
</div>
157+
</ion-wizard-content>
100158
</ion-slide>
101-
<ion-slide ion-wizard-step class="has-header">
159+
<ion-slide ion-wizard-step>
102160
<div class="row">
103161
<div class="col col-center">
104162
<h3 class="positive">Thanks for completing the wizard!</h3>

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "ionic-wizard",
3-
"version": "1.0.2",
3+
"version": "1.0.3",
44
"description": "A set of Angular/Ionic directives to create a wizard using Ionic slide box component",
55
"repository": "https://github.com/arielfaur/ionic-wizard",
66
"license": "MIT",

‎tests/ion-wizard_test.js‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -126,20 +126,28 @@ describe('Unit testing wizard directives', function() {
126126
it('Should pass when condition undefined on button click', function() {
127127
$rootScope.$broadcast('wizard:Next');
128128

129-
expect(controller.isStepValid(0)).toBeTruthy(); // first condition is undefined
130-
129+
var conditionFn = controller.getCondition(0);
130+
conditionFn().then(function(result) {
131+
expect(result).toBeTruthy(); // first condition is undefined
132+
});
131133
});
132134

133135
it('Should pass when condition is defined and truthy on button click', function() {
134136
$rootScope.$broadcast('wizard:Next');
135137

136-
expect(controller.isStepValid(1)).toBeTruthy(); // second condition is defined as truthy
138+
var conditionFn = controller.getCondition(1);
139+
conditionFn().then(function(result) {
140+
expect(result).toBeTruthy(); // second condition is defined as truthy
141+
});
137142
});
138143

139144
it('Should not pass when condition is defined and falsy on button click', function() {
140145
$rootScope.$broadcast('wizard:Next');
141146

142-
expect(controller.isStepValid(2)).toBeFalsy(); // third condition is defined as falsy
147+
var conditionFn = controller.getCondition(2);
148+
conditionFn().then(function(result) {
149+
expect(result).toBeFalsy(); // third condition is defined as falsyy
150+
});
143151
});
144152
});
145153

0 commit comments

Comments
 (0)