From 051a4cea2823714a79edd291cfda2b1ee3021a7e Mon Sep 17 00:00:00 2001 From: Ariel Faur Date: Tue, 23 Jun 2015 17:35:25 -0300 Subject: [PATCH] fix scrollable content --- README.md | 28 +++++++++++--- bower.json | 2 +- dist/ion-wizard.js | 37 +++++++++++++----- example/www/js/ion-wizard.js | 37 +++++++++++++----- example/www/templates/intro.html | 66 ++++++++++++++++++++++++++++++-- package.json | 2 +- tests/ion-wizard_test.js | 16 ++++++-- 7 files changed, 153 insertions(+), 35 deletions(-) diff --git a/README.md b/README.md index aefbcba..b528b3d 100644 --- a/README.md +++ b/README.md @@ -65,14 +65,16 @@ Main wizard directive must be added to Ionic's ion-slide-box directive ``` - ###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. ``` -... + + ... + ``` 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`. + +``` + + + +
+ ... +
+ + + +``` + ##Sample view with a wizard definition ``` diff --git a/bower.json b/bower.json index ad86ea0..9933ddf 100644 --- 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 index 6cb66e8..c2a4c5d 100644 --- 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,7 +43,7 @@ angular.module('ionic.wizard', []) } }]) - .directive('ionWizardStep', [function() { + .directive('ionWizardStep', ['$q', function($q) { return { restrict: 'EA', scope: { @@ -48,11 +51,26 @@ angular.module('ionic.wizard', []) }, 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 index 6cb66e8..c2a4c5d 100644 --- 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,7 +43,7 @@ angular.module('ionic.wizard', []) } }]) - .directive('ionWizardStep', [function() { + .directive('ionWizardStep', ['$q', function($q) { return { restrict: 'EA', scope: { @@ -48,11 +51,26 @@ angular.module('ionic.wizard', []) }, 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 index dff01f0..f26c605 100644 --- a/example/www/templates/intro.html +++ b/example/www/templates/intro.html @@ -18,7 +18,7 @@ - +
@@ -75,9 +75,10 @@

This slide is scrollable

- + - + +
@@ -97,8 +98,65 @@

Now you can move on! Click on the next button.

+
+
+
+
+

This slide is scrollable

+
+
+

+ Click the buttons above +

+
+
+
+
+
+
+
+
+

This slide is scrollable

+
+
+

+ Click the buttons above +

+
+
+
+
+
+
+
+
+

This slide is scrollable

+
+
+

+ Click the buttons above +

+
+
+
+
+
+
+
+
+

This slide is scrollable

+
+
+

+ Click the buttons above +

+
+
+
+
+ - +

Thanks for completing the wizard!

diff --git a/package.json b/package.json index 91c3b98..1ec03c6 100644 --- 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 index 401f837..f571462 100644 --- 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 + }); }); });