diff options
Diffstat (limited to 'www/lib/angular-wizard/src')
| -rw-r--r-- | www/lib/angular-wizard/src/angular-wizard.less | 179 | ||||
| -rw-r--r-- | www/lib/angular-wizard/src/angularModule.js | 1 | ||||
| -rw-r--r-- | www/lib/angular-wizard/src/step.html | 2 | ||||
| -rw-r--r-- | www/lib/angular-wizard/src/step.js | 23 | ||||
| -rw-r--r-- | www/lib/angular-wizard/src/wizard.html | 8 | ||||
| -rw-r--r-- | www/lib/angular-wizard/src/wizard.js | 340 | ||||
| -rw-r--r-- | www/lib/angular-wizard/src/wizardButtons.js | 26 | ||||
| -rw-r--r-- | www/lib/angular-wizard/src/wizardHandler.js | 26 |
8 files changed, 605 insertions, 0 deletions
diff --git a/www/lib/angular-wizard/src/angular-wizard.less b/www/lib/angular-wizard/src/angular-wizard.less new file mode 100644 index 00000000..5f13666a --- /dev/null +++ b/www/lib/angular-wizard/src/angular-wizard.less @@ -0,0 +1,179 @@ +@wz-color-default: #E6E6E6; +@wz-color-current: #808080; +@wz-color-done: #339933; +@wz-color-editing: #FF0000; + +.steps-indicator { + /* ---- steps quantity ---- */ + + + right: 0; + bottom: 0; + left: 0; + margin: 0; + padding: 20px 0 0 0; + height: 30px; + list-style: none; + + + + &:before { + background-color: @wz-color-default; + content: ''; + position: absolute; + height: 1px; + } + + &.steps-2:before { + left: ~'calc(100% / 2 / 2)'; + right: ~'calc(100% / 2 / 2)'; + } + + &.steps-3:before { + left: ~'calc(100% / 3 / 2)'; + right: ~'calc(100% / 3 / 2)'; + } + + &.steps-4:before { + left: ~'calc(100% / 4 / 2)'; + right: ~'calc(100% / 4 / 2)'; + } + + &.steps-5:before { + left: ~'calc(100% / 5 / 2)'; + right: ~'calc(100% / 5 / 2)'; + } + + &.steps-6:before { + left: ~'calc(100% / 6 / 2)'; + right: ~'calc(100% / 6 / 2)'; + } + + &.steps-7:before { + left: ~'calc(100% / 7 / 2)'; + right: ~'calc(100% / 7 / 2)'; + } + + &.steps-8:before { + left: ~'calc(100% / 8 / 2)'; + right: ~'calc(100% / 8 / 2)'; + } + + &.steps-9:before { + left: ~'calc(100% / 9 / 2)'; + right: ~'calc(100% / 9 / 2)'; + } + + &.steps-10:before { + left: ~'calc(100% / 10 / 2)'; + right: ~'calc(100% / 10 / 2)'; + } + + /* --- http://www.paulirish.com/2012/box-sizing-border-box-ftw/ ---- */ + * { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + } + + + li { + position: relative; + float: left; + margin: 0; + padding: 0; + padding-top: 10px; + text-align: center; + line-height: 15px; + + a { + color: @wz-color-current; + text-decoration: none; + text-transform: uppercase; + font-weight: bold; + transition: 0.25s; + cursor: pointer; + + &:before { + position: absolute; + top: -7px; + left: ~'calc(50% - 7px)'; + width: 14px; + height: 14px; + border-radius: 100%; + background-color: @wz-color-default; + content: ''; + transition: 0.25s; + } + + &:hover { + color: darken(@wz-color-current, 20%); + } + } + } + + &.steps-2 li { + width: ~'calc(100% / 2)'; + } + + &.steps-3 li { + width: ~'calc(100% / 3)'; + } + + &.steps-4 li { + width: ~'calc(100% / 4)'; + } + + &.steps-5 li { + width: ~'calc(100% / 5)'; + } + + &.steps-6 li { + width: ~'calc(100% / 6)'; + } + + &.steps-7 li { + width: ~'calc(100% / 7)'; + } + + &.steps-8 li { + width: ~'calc(100% / 8)'; + } + + &.steps-9 li { + width: ~'calc(100% / 9)'; + } + + &.steps-10 li { + width: ~'calc(100% / 10)'; + } + + &.steps-11 li { + width: ~'calc(100% / 11)'; + } + + li.default { + pointer-events: none; + + a:hover { + color: @wz-color-current; + } + } + + li.current, + li.editing { + pointer-events: none; + } + + li.current a:before { + background-color: @wz-color-current; + } + + li.done a:before { + background-color: @wz-color-done; + } + + li.editing a:before { + background-color: @wz-color-editing; + } +} diff --git a/www/lib/angular-wizard/src/angularModule.js b/www/lib/angular-wizard/src/angularModule.js new file mode 100644 index 00000000..816d5bec --- /dev/null +++ b/www/lib/angular-wizard/src/angularModule.js @@ -0,0 +1 @@ +angular.module('mgo-angular-wizard', ['templates-angularwizard']);
diff --git a/www/lib/angular-wizard/src/step.html b/www/lib/angular-wizard/src/step.html new file mode 100644 index 00000000..59f13f29 --- /dev/null +++ b/www/lib/angular-wizard/src/step.html @@ -0,0 +1,2 @@ +<section ng-show="selected" ng-class="{current: selected, done: completed}" class="step" ng-transclude> +</section>
\ No newline at end of file diff --git a/www/lib/angular-wizard/src/step.js b/www/lib/angular-wizard/src/step.js new file mode 100644 index 00000000..2a266255 --- /dev/null +++ b/www/lib/angular-wizard/src/step.js @@ -0,0 +1,23 @@ +angular.module('mgo-angular-wizard').directive('wzStep', function() { + return { + restrict: 'EA', + replace: true, + transclude: true, + scope: { + wzTitle: '@', + canenter : '=', + canexit : '=', + disabled: '@?wzDisabled', + description: '@', + wzData: '=' + }, + require: '^wizard', + templateUrl: function(element, attributes) { + return attributes.template || "step.html"; + }, + link: function($scope, $element, $attrs, wizard) { + $scope.title = $scope.wzTitle; + wizard.addStep($scope); + } + }; +}); diff --git a/www/lib/angular-wizard/src/wizard.html b/www/lib/angular-wizard/src/wizard.html new file mode 100644 index 00000000..0e8c660b --- /dev/null +++ b/www/lib/angular-wizard/src/wizard.html @@ -0,0 +1,8 @@ +<div> + <div class="steps" ng-transclude></div> + <ul class="steps-indicator steps-{{getEnabledSteps().length}}" ng-if="!hideIndicators"> + <li ng-class="{default: !step.completed && !step.selected, current: step.selected && !step.completed, done: step.completed && !step.selected, editing: step.selected && step.completed}" ng-repeat="step in getEnabledSteps()"> + <a ng-click="goTo(step)">{{step.title || step.wzTitle}}</a> + </li> + </ul> +</div> diff --git a/www/lib/angular-wizard/src/wizard.js b/www/lib/angular-wizard/src/wizard.js new file mode 100644 index 00000000..f8200004 --- /dev/null +++ b/www/lib/angular-wizard/src/wizard.js @@ -0,0 +1,340 @@ +//wizard directive +angular.module('mgo-angular-wizard').directive('wizard', function() { + return { + restrict: 'EA', + replace: true, + transclude: true, + scope: { + currentStep: '=', + onFinish: '&', + hideIndicators: '=', + editMode: '=', + name: '@' + }, + templateUrl: function(element, attributes) { + return attributes.template || "wizard.html"; + }, + + //controller for wizard directive, treat this just like an angular controller + controller: ['$scope', '$element', '$log', 'WizardHandler', '$q', function($scope, $element, $log, WizardHandler, $q) { + //this variable allows directive to load without having to pass any step validation + var firstRun = true; + //creating instance of wizard, passing this as second argument allows access to functions attached to this via Service + WizardHandler.addWizard($scope.name || WizardHandler.defaultName, this); + + $scope.$on('$destroy', function() { + WizardHandler.removeWizard($scope.name || WizardHandler.defaultName); + }); + + //steps array where all the scopes of each step are added + $scope.steps = []; + + var stepIdx = function(step) { + var idx = 0; + var res = -1; + angular.forEach($scope.getEnabledSteps(), function(currStep) { + if (currStep === step) { + res = idx; + } + idx++; + }); + return res; + }; + + var stepByTitle = function(titleToFind) { + var foundStep = null; + angular.forEach($scope.getEnabledSteps(), function(step) { + if (step.wzTitle === titleToFind) { + foundStep = step; + } + }); + return foundStep; + }; + + //access to context object for step validation + $scope.context = {}; + + //watching changes to currentStep + $scope.$watch('currentStep', function(step) { + //checking to make sure currentStep is truthy value + if (!step) return; + //setting stepTitle equal to current step title or default title + var stepTitle = $scope.selectedStep.wzTitle; + if ($scope.selectedStep && stepTitle !== $scope.currentStep) { + //invoking goTo() with step title as argument + $scope.goTo(stepByTitle($scope.currentStep)); + } + + }); + + //watching steps array length and editMode value, if edit module is undefined or null the nothing is done + //if edit mode is truthy, then all steps are marked as completed + $scope.$watch('[editMode, steps.length]', function() { + var editMode = $scope.editMode; + if (angular.isUndefined(editMode) || (editMode === null)) return; + + if (editMode) { + angular.forEach($scope.getEnabledSteps(), function(step) { + step.completed = true; + }); + } else { + var completedStepsIndex = $scope.currentStepNumber() - 1; + angular.forEach($scope.getEnabledSteps(), function(step, stepIndex) { + if(stepIndex >= completedStepsIndex) { + step.completed = false; + } + }); + } + }, true); + + //called each time step directive is loaded + this.addStep = function(step) { + //pushing the scope of directive onto step array + $scope.steps.push(step); + //if this is first step being pushed then goTo that first step + if ($scope.getEnabledSteps().length === 1) { + //goTo first step + $scope.goTo($scope.getEnabledSteps()[0]); + } + }; + + this.context = $scope.context; + + $scope.getStepNumber = function(step) { + return stepIdx(step) + 1; + }; + + $scope.goTo = function(step) { + //if this is the first time the wizard is loading it bi-passes step validation + if(firstRun){ + //deselect all steps so you can set fresh below + unselectAll(); + $scope.selectedStep = step; + //making sure current step is not undefined + if (!angular.isUndefined($scope.currentStep)) { + $scope.currentStep = step.wzTitle; + } + //setting selected step to argument passed into goTo() + step.selected = true; + //emit event upwards with data on goTo() invoktion + $scope.$emit('wizard:stepChanged', {step: step, index: stepIdx(step)}); + //setting variable to false so all other step changes must pass validation + firstRun = false; + } else { + //createing variables to capture current state that goTo() was invoked from and allow booleans + var thisStep; + //getting data for step you are transitioning out of + if($scope.currentStepNumber() > 0){ + thisStep = $scope.currentStepNumber() - 1; + } else if ($scope.currentStepNumber() === 0){ + thisStep = 0; + } + //$log.log('steps[thisStep] Data: ', $scope.getEnabledSteps()[thisStep].canexit); + $q.all([canExitStep($scope.getEnabledSteps()[thisStep], step), canEnterStep(step)]).then(function(data) { + if(data[0] && data[1]){ + //deselect all steps so you can set fresh below + unselectAll(); + + //$log.log('value for canExit argument: ', $scope.currentStep.canexit); + $scope.selectedStep = step; + //making sure current step is not undefined + if(!angular.isUndefined($scope.currentStep)){ + $scope.currentStep = step.wzTitle; + } + //setting selected step to argument passed into goTo() + step.selected = true; + //emit event upwards with data on goTo() invoktion + $scope.$emit('wizard:stepChanged', {step: step, index: stepIdx(step)}); + //$log.log('current step number: ', $scope.currentStepNumber()); + } + }); + } + }; + + function canEnterStep(step) { + var defer, + canEnter; + //If no validation function is provided, allow the user to enter the step + if(step.canenter === undefined){ + return true; + } + //If canenter is a boolean value instead of a function, return the value + if(typeof step.canenter === 'boolean'){ + return step.canenter; + } + //Check to see if the canenter function is a promise which needs to be returned + canEnter = step.canenter($scope.context); + if(angular.isFunction(canEnter.then)){ + defer = $q.defer(); + canEnter.then(function(response){ + defer.resolve(response); + }); + return defer.promise; + } else { + return canEnter === true; + } + } + + function canExitStep(step, stepTo) { + var defer, + canExit; + //Exiting the step should be allowed if no validation function was provided or if the user is moving backwards + if(typeof(step.canexit) === 'undefined' || $scope.getStepNumber(stepTo) < $scope.currentStepNumber()){ + return true; + } + //If canexit is a boolean value instead of a function, return the value + if(typeof step.canexit === 'boolean'){ + return step.canexit; + } + //Check to see if the canexit function is a promise which needs to be returned + canExit = step.canexit($scope.context); + if(angular.isFunction(canExit.then)){ + defer = $q.defer(); + canExit.then(function(response){ + defer.resolve(response); + }); + return defer.promise; + } else { + return canExit === true; + } + } + + $scope.currentStepNumber = function() { + //retreive current step number + return stepIdx($scope.selectedStep) + 1; + }; + + $scope.getEnabledSteps = function() { + return $scope.steps.filter(function(step){ + return step.disabled !== 'true'; + }); + }; + + //unSelect All Steps + function unselectAll() { + //traverse steps array and set each "selected" property to false + angular.forEach($scope.getEnabledSteps(), function (step) { + step.selected = false; + }); + //set selectedStep variable to null + $scope.selectedStep = null; + } + + //ALL METHODS ATTACHED TO this ARE ACCESSIBLE VIA WizardHandler.wizard().methodName() + + this.currentStepTitle = function(){ + return $scope.selectedStep.wzTitle; + }; + + this.currentStepDescription = function(){ + return $scope.selectedStep.description; + }; + + this.currentStep = function(){ + return $scope.selectedStep; + }; + + this.totalStepCount = function() { + return $scope.getEnabledSteps().length; + } + + //Access to enabled steps from outside + this.getEnabledSteps = function(){ + return $scope.getEnabledSteps(); + }; + + //Access to current step number from outside + this.currentStepNumber = function(){ + return $scope.currentStepNumber(); + }; + //method used for next button within step + this.next = function(callback) { + var enabledSteps = $scope.getEnabledSteps(); + //setting variable equal to step you were on when next() was invoked + var index = stepIdx($scope.selectedStep); + //checking to see if callback is a function + if(angular.isFunction(callback)){ + if(callback()){ + if (index === enabledSteps.length - 1) { + this.finish(); + } else { + //invoking goTo() with step number next in line + $scope.goTo(enabledSteps[index + 1]); + } + } else { + return; + } + } + if (!callback) { + //completed property set on scope which is used to add class/remove class from progress bar + $scope.selectedStep.completed = true; + } + //checking to see if this is the last step. If it is next behaves the same as finish() + if (index === enabledSteps.length - 1) { + this.finish(); + } else { + //invoking goTo() with step number next in line + $scope.goTo(enabledSteps[index + 1]); + } + + }; + + //used to traverse to any step, step number placed as argument + this.goTo = function(step) { + var enabledSteps = $scope.getEnabledSteps(); + var stepTo; + //checking that step is a Number + if (angular.isNumber(step)) { + stepTo = enabledSteps[step]; + } else { + //finding the step associated with the title entered as goTo argument + stepTo = stepByTitle(step); + } + //going to step + $scope.goTo(stepTo); + }; + + //calls finish() which calls onFinish() which is declared on an attribute and linked to controller via wizard directive. + this.finish = function() { + if ($scope.onFinish) { + $scope.onFinish(); + } + }; + + this.previous = function() { + //getting index of current step + var index = stepIdx($scope.selectedStep); + //ensuring you aren't trying to go back from the first step + if (index === 0) { + throw new Error("Can't go back. It's already in step 0"); + } else { + //go back one step from current step + $scope.goTo($scope.getEnabledSteps()[index - 1]); + } + }; + + //cancel is alias for previous. + this.cancel = function() { + //getting index of current step + var index = stepIdx($scope.selectedStep); + //ensuring you aren't trying to go back from the first step + if (index === 0) { + throw new Error("Can't go back. It's already in step 0"); + } else { + //go back one step from current step + $scope.goTo($scope.getEnabledSteps()[0]); + } + }; + + //reset + this.reset = function(){ + //traverse steps array and set each "completed" property to false + angular.forEach($scope.getEnabledSteps(), function (step) { + step.completed = false; + }); + //go to first step + this.goTo(0); + }; + }] + }; +});
\ No newline at end of file diff --git a/www/lib/angular-wizard/src/wizardButtons.js b/www/lib/angular-wizard/src/wizardButtons.js new file mode 100644 index 00000000..0afb46f8 --- /dev/null +++ b/www/lib/angular-wizard/src/wizardButtons.js @@ -0,0 +1,26 @@ +function wizardButtonDirective(action) { + angular.module('mgo-angular-wizard') + .directive(action, function() { + return { + restrict: 'A', + replace: false, + require: '^wizard', + link: function($scope, $element, $attrs, wizard) { + + $element.on("click", function(e) { + e.preventDefault(); + $scope.$apply(function() { + $scope.$eval($attrs[action]); + wizard[action.replace("wz", "").toLowerCase()](); + }); + }); + } + }; + }); +} + +wizardButtonDirective('wzNext'); +wizardButtonDirective('wzPrevious'); +wizardButtonDirective('wzFinish'); +wizardButtonDirective('wzCancel'); +wizardButtonDirective('wzReset'); diff --git a/www/lib/angular-wizard/src/wizardHandler.js b/www/lib/angular-wizard/src/wizardHandler.js new file mode 100644 index 00000000..8957c941 --- /dev/null +++ b/www/lib/angular-wizard/src/wizardHandler.js @@ -0,0 +1,26 @@ +angular.module('mgo-angular-wizard').factory('WizardHandler', function() { + var service = {}; + + var wizards = {}; + + service.defaultName = "defaultWizard"; + + service.addWizard = function(name, wizard) { + wizards[name] = wizard; + }; + + service.removeWizard = function(name) { + delete wizards[name]; + }; + + service.wizard = function(name) { + var nameToUse = name; + if (!name) { + nameToUse = service.defaultName; + } + + return wizards[nameToUse]; + }; + + return service; +}); |