fix scrollable content

arielfaur · Jun 23, 2015 · 051a4ce · 051a4ce
1 parent f862c22
commit 051a4ce
Show file tree

Hide file tree

Showing 7 changed files with 153 additions and 35 deletions.
diff --git a/README.md b/README.md
@@ -65,14 +65,16 @@ Main wizard directive must be added to Ionic's ion-slide-box directive
 </ion-slide-box>
 ```
 
-
 ###ion-wizard-step
-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
-evaluated before allowing the user to move forward. If the condition fails the directive will trigger
-an event that can be used to inform the user or perform any other action from the controller.
+Apply this directive to an `ion-slide` to define each step of the wizard. If needed, a condition can be defined which
+will be evaluated before allowing the user to move forward. An event is generated if the condition fails
+that can be used to inform the user or perform any other action from the controller.
+Apply the `has-header` class to add some top padding in case there is a navigation bar.
 
 ```
-<ion-slide ion-wizard-step condition="user.LastName != undefined">...</ion-slide>
+<ion-slide ion-wizard-step condition="user.LastName != undefined" class="has-header">
+    ...
+</ion-slide>
 ```
 
 Then in your app controller:
@@ -93,6 +95,22 @@ angular.module('myApp.controllers')
     }]);
 ```
 
+###ion-wizard-content
+To make the content scrollable within a particular slide wrap the content in a `ion-wizard-content` directive.
+If there is a navigation bar apply the `has-header` class to this directive instead of the outer `ion-slide-box`.
+
+```
+<ion-slide-box ion-wizard>
+        <ion-slide ion-wizard-step>
+            <ion-wizard-content class="has-header">
+                <div class="row">
+                   ...
+                </div>
+            </ion-wizard-content>
+        </ion-slide>
+</ion-slide-box>
+```
+
 ##Sample view with a wizard definition
 
 ```

diff --git a/bower.json b/bower.json
@@ -1,7 +1,7 @@
 {
   "name": "ionic-wizard",
   "description": "A set of Angular/Ionic directives to create a wizard using Ionic's slide box component",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "homepage": "https://github.com/arielfaur/ionic-wizard",
   "license": "MIT",
   "devDependencies": {

diff --git a/dist/ion-wizard.js b/dist/ion-wizard.js
@@ -1,5 +1,7 @@
 angular.module('ionic.wizard', [])
-
+    .directive('ionWizardContent', ['ionContentDirective', function(ionContentDirective) {
+      return angular.extend({}, ionContentDirective[0], { scope: false });
+    }])
     .directive('ionWizard', ['$rootScope', '$ionicSlideBoxDelegate', function($rootScope, $ionicSlideBoxDelegate) {
         return{
             restrict: 'EA',
@@ -10,8 +12,8 @@ angular.module('ionic.wizard', [])
                     conditions.push(condition);
                 };
 
-                this.isStepValid = function(index) {
-                    return angular.isDefined(conditions[index]) ? conditions[index]() : true;
+                this.getCondition = function(index) {
+                    return conditions[index];
                 };
 
             }],
@@ -26,11 +28,12 @@ angular.module('ionic.wizard', [])
                     $ionicSlideBoxDelegate.previous();
                 });
                 scope.$on("wizard:Next", function() {
-                    if (controller.isStepValid(currentIndex)) {
+                    var fn = controller.getCondition(currentIndex);
+                    fn().then(function () {
                         $ionicSlideBoxDelegate.next();
-                    } else {
+                    }, function () {
                         $rootScope.$broadcast("wizard:StepFailed", {index: currentIndex});
-                    }
+                    })
                 });
 
                 scope.$on("slideBox.slideChanged", function(e, index) {
@@ -40,19 +43,34 @@ angular.module('ionic.wizard', [])
         }
 
     }])
-    .directive('ionWizardStep', [function() {
+    .directive('ionWizardStep', ['$q', function($q) {
         return {
             restrict: 'EA',
             scope: {
                 conditionFn: '&condition'
             },
             require: '^^ionWizard',
             link: function(scope, element, attrs, controller) {
-                controller.addCondition(attrs.condition ? scope.conditionFn : undefined);
+                var fn = function() {
+                    var deferred  = $q.defer();
+
+                    if (angular.isUndefined(attrs.condition)) {
+                        deferred.resolve();
+                    } else {
+                        if (scope.conditionFn()) {
+                            deferred.resolve();
+                        } else {
+                            deferred.reject();
+                        }
+                    }
+
+                    return deferred.promise;
+                };
+                controller.addCondition(fn);
             }
         }
     }])
-    .directive('ionWizardPrevious', ['$rootScope', '$ionicSlideBoxDelegate', function($rootScope, $ionicSlideBoxDelegate) {
+    .directive('ionWizardPrevious', ['$rootScope', '$ionicSlideBoxDelegate', function($rootScope) {
         return{
             restrict: 'EA',
             scope: {},
@@ -61,7 +79,6 @@ angular.module('ionic.wizard', [])
                 element.addClass('ng-hide');
 
                 element.on('click', function() {
-                    //$ionicSlideBoxDelegate.previous();
                     $rootScope.$broadcast("wizard:Previous");
                 });
 

diff --git a/example/www/js/ion-wizard.js b/example/www/js/ion-wizard.js
@@ -1,5 +1,7 @@
 angular.module('ionic.wizard', [])
-
+    .directive('ionWizardContent', ['ionContentDirective', function(ionContentDirective) {
+      return angular.extend({}, ionContentDirective[0], { scope: false });
+    }])
     .directive('ionWizard', ['$rootScope', '$ionicSlideBoxDelegate', function($rootScope, $ionicSlideBoxDelegate) {
         return{
             restrict: 'EA',
@@ -10,8 +12,8 @@ angular.module('ionic.wizard', [])
                     conditions.push(condition);
                 };
 
-                this.isStepValid = function(index) {
-                    return angular.isDefined(conditions[index]) ? conditions[index]() : true;
+                this.getCondition = function(index) {
+                    return conditions[index];
                 };
 
             }],
@@ -26,11 +28,12 @@ angular.module('ionic.wizard', [])
                     $ionicSlideBoxDelegate.previous();
                 });
                 scope.$on("wizard:Next", function() {
-                    if (controller.isStepValid(currentIndex)) {
+                    var fn = controller.getCondition(currentIndex);
+                    fn().then(function () {
                         $ionicSlideBoxDelegate.next();
-                    } else {
+                    }, function () {
                         $rootScope.$broadcast("wizard:StepFailed", {index: currentIndex});
-                    }
+                    })
                 });
 
                 scope.$on("slideBox.slideChanged", function(e, index) {
@@ -40,19 +43,34 @@ angular.module('ionic.wizard', [])
         }
 
     }])
-    .directive('ionWizardStep', [function() {
+    .directive('ionWizardStep', ['$q', function($q) {
         return {
             restrict: 'EA',
             scope: {
                 conditionFn: '&condition'
             },
             require: '^^ionWizard',
             link: function(scope, element, attrs, controller) {
-                controller.addCondition(attrs.condition ? scope.conditionFn : undefined);
+                var fn = function() {
+                    var deferred  = $q.defer();
+
+                    if (angular.isUndefined(attrs.condition)) {
+                        deferred.resolve();
+                    } else {
+                        if (scope.conditionFn()) {
+                            deferred.resolve();
+                        } else {
+                            deferred.reject();
+                        }
+                    }
+
+                    return deferred.promise;
+                };
+                controller.addCondition(fn);
             }
         }
     }])
-    .directive('ionWizardPrevious', ['$rootScope', '$ionicSlideBoxDelegate', function($rootScope, $ionicSlideBoxDelegate) {
+    .directive('ionWizardPrevious', ['$rootScope', '$ionicSlideBoxDelegate', function($rootScope) {
         return{
             restrict: 'EA',
             scope: {},
@@ -61,7 +79,6 @@ angular.module('ionic.wizard', [])
                 element.addClass('ng-hide');
 
                 element.on('click', function() {
-                    //$ionicSlideBoxDelegate.previous();
                     $rootScope.$broadcast("wizard:Previous");
                 });
 

diff --git a/example/www/templates/intro.html b/example/www/templates/intro.html
@@ -18,7 +18,7 @@
     </ion-nav-buttons>
     <ion-slide-box ion-wizard>
         <ion-slide ion-wizard-step>
-            <ion-content class="has-header">
+            <ion-wizard-content class="has-header">
             <div class="row">
                 <div class="col col-center">
                     <div class="card rounded">
@@ -75,9 +75,10 @@ <h2 class="positive">This slide is scrollable</h2>
                     </div>
                 </div>
             </div>
-            </ion-content>
+            </ion-wizard-content>
         </ion-slide>
-        <ion-slide ion-wizard-step condition="step2.name" class="has-header">
+        <ion-slide ion-wizard-step condition="step2.name">
+            <ion-wizard-content class="has-header">
             <div class="row">
                 <div class="col col-center">
                     <div class="item item-input-inset">
@@ -97,8 +98,65 @@ <h2 class="positive">Now you can move on! Click on the next button.</h2>
                     </div>
                 </div>
             </div>
+            <div class="row">
+                <div class="col col-center">
+                    <div class="card rounded">
+                        <div class="item">
+                            <h2 class="positive">This slide is scrollable</h2>
+                        </div>
+                        <div class="item item-text-wrap">
+                            <p>
+                                Click the buttons above
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col col-center">
+                    <div class="card rounded">
+                        <div class="item">
+                            <h2 class="positive">This slide is scrollable</h2>
+                        </div>
+                        <div class="item item-text-wrap">
+                            <p>
+                                Click the buttons above
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col col-center">
+                    <div class="card rounded">
+                        <div class="item">
+                            <h2 class="positive">This slide is scrollable</h2>
+                        </div>
+                        <div class="item item-text-wrap">
+                            <p>
+                                Click the buttons above
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col col-center">
+                    <div class="card rounded">
+                        <div class="item">
+                            <h2 class="positive">This slide is scrollable</h2>
+                        </div>
+                        <div class="item item-text-wrap">
+                            <p>
+                                Click the buttons above
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            </ion-wizard-content>
         </ion-slide>
-        <ion-slide ion-wizard-step class="has-header">
+        <ion-slide ion-wizard-step>
             <div class="row">
                 <div class="col col-center">
                     <h3 class="positive">Thanks for completing the wizard!</h3>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ionic-wizard",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "A set of Angular/Ionic directives to create a wizard using Ionic slide box component",
   "repository": "https://github.com/arielfaur/ionic-wizard",
   "license": "MIT",

diff --git a/tests/ion-wizard_test.js b/tests/ion-wizard_test.js
@@ -126,20 +126,28 @@ describe('Unit testing wizard directives', function() {
         it('Should pass when condition undefined on button click', function() {
             $rootScope.$broadcast('wizard:Next');
 
-            expect(controller.isStepValid(0)).toBeTruthy(); // first condition is undefined
-
+            var conditionFn = controller.getCondition(0);
+            conditionFn().then(function(result) {
+                expect(result).toBeTruthy(); // first condition is undefined
+            });
         });
 
         it('Should pass when condition is defined and truthy on button click', function() {
             $rootScope.$broadcast('wizard:Next');
 
-            expect(controller.isStepValid(1)).toBeTruthy(); // second condition is defined as truthy
+            var conditionFn = controller.getCondition(1);
+            conditionFn().then(function(result) {
+                expect(result).toBeTruthy(); // second condition is defined as truthy
+            });
         });
 
         it('Should not pass when condition is defined and falsy on button click', function() {
             $rootScope.$broadcast('wizard:Next');
 
-            expect(controller.isStepValid(2)).toBeFalsy();  // third condition is defined as falsy
+            var conditionFn = controller.getCondition(2);
+            conditionFn().then(function(result) {
+                expect(result).toBeFalsy(); // third condition is defined as falsyy
+            });
         });
     });