Merge pull request #2597 from mgonto/master

Added angular-wizard with auto update [AUTHOR]
This commit is contained in:
Thomas Davis
2014-02-02 16:07:54 -08:00
6 changed files with 614 additions and 0 deletions
@@ -0,0 +1,168 @@
.steps-indicator {
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 30px;
padding: 0;
margin: 0;
list-style: none;
}
.steps-indicator:before {
position: absolute;
height: 1px;
background-color: #e6e6e6;
content: '';
}
.steps-indicator.steps-2:before {
right: calc(25%);
left: calc(25%);
}
.steps-indicator.steps-3:before {
right: calc(16.666666666666668%);
left: calc(16.666666666666668%);
}
.steps-indicator.steps-4:before {
right: calc(12.5%);
left: calc(12.5%);
}
.steps-indicator.steps-5:before {
right: calc(10%);
left: calc(10%);
}
.steps-indicator.steps-6:before {
right: calc(8.333333333333334%);
left: calc(8.333333333333334%);
}
.steps-indicator.steps-7:before {
right: calc(7.142857142857143%);
left: calc(7.142857142857143%);
}
.steps-indicator.steps-8:before {
right: calc(6.25%);
left: calc(6.25%);
}
.steps-indicator.steps-9:before {
right: calc(5.555555555555555%);
left: calc(5.555555555555555%);
}
.steps-indicator.steps-10:before {
right: calc(5%);
left: calc(5%);
}
.steps-indicator * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.steps-indicator li {
position: relative;
float: left;
padding: 0;
padding-top: 10px;
margin: 0;
line-height: 15px;
text-align: center;
}
.steps-indicator li a {
font-weight: bold;
color: #808080;
text-decoration: none;
text-transform: uppercase;
cursor: pointer;
transition: 0.25s;
}
.steps-indicator li a:before {
position: absolute;
top: -7px;
left: calc(43%);
width: 14px;
height: 14px;
background-color: #e6e6e6;
border-radius: 100%;
content: '';
transition: 0.25s;
}
.steps-indicator li a:hover {
color: #4d4d4d;
}
.steps-indicator.steps-2 li {
width: calc(50%);
}
.steps-indicator.steps-3 li {
width: calc(33.333333333333336%);
}
.steps-indicator.steps-4 li {
width: calc(25%);
}
.steps-indicator.steps-5 li {
width: calc(20%);
}
.steps-indicator.steps-6 li {
width: calc(16.666666666666668%);
}
.steps-indicator.steps-7 li {
width: calc(14.285714285714286%);
}
.steps-indicator.steps-8 li {
width: calc(12.5%);
}
.steps-indicator.steps-9 li {
width: calc(11.11111111111111%);
}
.steps-indicator.steps-10 li {
width: calc(10%);
}
.steps-indicator.steps-11 li {
width: calc(9.090909090909092%);
}
.steps-indicator li.default {
pointer-events: none;
}
.steps-indicator li.default a:hover {
color: #808080;
}
.steps-indicator li.current,
.steps-indicator li.editing {
pointer-events: none;
}
.steps-indicator li.current a:before {
background-color: #808080;
}
.steps-indicator li.done a:before {
background-color: #339933;
}
.steps-indicator li.editing a:before {
background-color: #ff0000;
}
+199
View File
@@ -0,0 +1,199 @@
/**
* Easy to use Wizard library for AngularJS
* @version v0.2.1 - 2014-01-31 * @link https://github.com/mgonto/angular-wizard
* @author Martin Gontovnikas <martin@gon.to>
* @license MIT License, http://www.opensource.org/licenses/MIT
*/
angular.module('templates-angularwizard', ['step.html', 'wizard.html']);
angular.module("step.html", []).run(["$templateCache", function($templateCache) {
$templateCache.put("step.html",
"<section ng-show=\"selected\" ng-class=\"{current: selected, done: completed}\" ng-transclude>\n" +
"</section>");
}]);
angular.module("wizard.html", []).run(["$templateCache", function($templateCache) {
$templateCache.put("wizard.html",
"<div>\n" +
" <div class=\"steps\" ng-transclude></div>\n" +
" <ul class=\"steps-indicator steps-{{steps.length}}\" ng-if=\"!hideIndicators\">\n" +
" <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 steps\">\n" +
" <a ng-click=\"goTo(step)\">{{step.title}}</a>\n" +
" </li>\n" +
" </ul>\n" +
"</div>");
}]);
angular.module('mgo-angular-wizard', ['templates-angularwizard']);
angular.module('mgo-angular-wizard').directive('step', function() {
return {
restrict: 'E',
replace: true,
transclude: true,
scope: {
title: '@'
},
require: '^wizard',
templateUrl: 'step.html',
link: function($scope, $element, $attrs, wizard) {
wizard.addStep($scope);
}
}
});
angular.module('mgo-angular-wizard').directive('wizard', function() {
return {
restrict: 'E',
replace: true,
transclude: true,
scope: {
currentStep: '=',
onFinish: '&',
hideIndicators: '=',
editMode: '=',
name: '@'
},
templateUrl: 'wizard.html',
controller: ['$scope', '$element', 'WizardHandler', function($scope, $element, WizardHandler) {
WizardHandler.addWizard($scope.name || WizardHandler.defaultName, this);
$scope.$on('$destroy', function() {
WizardHandler.removeWizard($scope.name || WizardHandler.defaultName);
});
$scope.steps = [];
$scope.$watch('currentStep', function(step) {
if (!step) return;
if ($scope.selectedStep && $scope.selectedStep.title !== $scope.currentStep) {
$scope.goTo(_.find($scope.steps, {title: $scope.currentStep}));
}
});
$scope.$watch('[editMode, steps.length]', function() {
var editMode = $scope.editMode;
if (_.isUndefined(editMode) || _.isNull(editMode)) return;
if (editMode) {
_.each($scope.steps, function(step) {
step.completed = true;
});
}
}, true);
this.addStep = function(step) {
$scope.steps.push(step);
if ($scope.steps.length === 1) {
$scope.goTo($scope.steps[0]);
}
}
$scope.goTo = function(step) {
unselectAll();
$scope.selectedStep = step;
if ($scope.currentStep) {
$scope.currentStep = step.title;
}
step.selected = true;
}
function unselectAll() {
_.each($scope.steps, function (step) {
step.selected = false;
});
$scope.selectedStep = null;
}
this.next = function(draft) {
var index = _.indexOf($scope.steps , $scope.selectedStep);
if (!draft) {
$scope.selectedStep.completed = true;
}
if (index === $scope.steps.length - 1) {
this.finish();
} else {
$scope.goTo($scope.steps[index + 1]);
}
}
this.goTo = function(step) {
var stepTo;
if (_.isNumber(step)) {
stepTo = $scope.steps[step];
} else {
stepTo = _.find($scope.steps, {title: step});
}
$scope.goTo(stepTo);
}
this.finish = function() {
$scope.onFinish && $scope.onFinish();
}
this.cancel = this.previous = function() {
var index = _.indexOf($scope.steps , $scope.selectedStep);
if (index === 0) {
throw new Error("Can't go back. It's already in step 0");
} else {
$scope.goTo($scope.steps[index - 1]);
}
}
}]
}
});
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');
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;
});
@@ -0,0 +1,179 @@
.steps-indicator {
/* ---- steps quantity ---- */
@color-default: #E6E6E6;
@color-current: #808080;
@color-done: #339933;
@color-editing: #FF0000;
position: absolute;
right: 0;
bottom: 0;
left: 0;
margin: 0;
padding: 0;
height: 30px;
list-style: none;
&:before {
background-color: @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: @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: @color-default;
content: '';
transition: 0.25s;
}
&:hover {
color: darken(@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: @color-current;
}
}
li.current,
li.editing {
pointer-events: none;
}
li.current a:before {
background-color: @color-current;
}
li.done a:before {
background-color: @color-done;
}
li.editing a:before {
background-color: @color-editing;
}
}
+1
View File
@@ -0,0 +1 @@
.steps-indicator{position:absolute;right:0;bottom:0;left:0;height:30px;padding:0;margin:0;list-style:none}.steps-indicator:before{position:absolute;height:1px;background-color:#e6e6e6;content:''}.steps-indicator.steps-2:before{right:calc(25%);left:calc(25%)}.steps-indicator.steps-3:before{right:calc(16.666666666666668%);left:calc(16.666666666666668%)}.steps-indicator.steps-4:before{right:calc(12.5%);left:calc(12.5%)}.steps-indicator.steps-5:before{right:calc(10%);left:calc(10%)}.steps-indicator.steps-6:before{right:calc(8.333333333333334%);left:calc(8.333333333333334%)}.steps-indicator.steps-7:before{right:calc(7.142857142857143%);left:calc(7.142857142857143%)}.steps-indicator.steps-8:before{right:calc(6.25%);left:calc(6.25%)}.steps-indicator.steps-9:before{right:calc(5.555555555555555%);left:calc(5.555555555555555%)}.steps-indicator.steps-10:before{right:calc(5%);left:calc(5%)}.steps-indicator *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.steps-indicator li{position:relative;float:left;padding:0;padding-top:10px;margin:0;line-height:15px;text-align:center}.steps-indicator li a{font-weight:bold;color:#808080;text-decoration:none;text-transform:uppercase;cursor:pointer;transition:.25s}.steps-indicator li a:before{position:absolute;top:-7px;left:calc(43%);width:14px;height:14px;background-color:#e6e6e6;border-radius:100%;content:'';transition:.25s}.steps-indicator li a:hover{color:#4d4d4d}.steps-indicator.steps-2 li{width:calc(50%)}.steps-indicator.steps-3 li{width:calc(33.333333333333336%)}.steps-indicator.steps-4 li{width:calc(25%)}.steps-indicator.steps-5 li{width:calc(20%)}.steps-indicator.steps-6 li{width:calc(16.666666666666668%)}.steps-indicator.steps-7 li{width:calc(14.285714285714286%)}.steps-indicator.steps-8 li{width:calc(12.5%)}.steps-indicator.steps-9 li{width:calc(11.11111111111111%)}.steps-indicator.steps-10 li{width:calc(10%)}.steps-indicator.steps-11 li{width:calc(9.090909090909092%)}.steps-indicator li.default{pointer-events:none}.steps-indicator li.default a:hover{color:#808080}.steps-indicator li.current,.steps-indicator li.editing{pointer-events:none}.steps-indicator li.current a:before{background-color:#808080}.steps-indicator li.done a:before{background-color:#393}.steps-indicator li.editing a:before{background-color:#f00}
+7
View File
@@ -0,0 +1,7 @@
/**
* Easy to use Wizard library for AngularJS
* @version v0.2.1 - 2014-01-31 * @link https://github.com/mgonto/angular-wizard
* @author Martin Gontovnikas <martin@gon.to>
* @license MIT License, http://www.opensource.org/licenses/MIT
*/
function wizardButtonDirective(a){angular.module("mgo-angular-wizard").directive(a,function(){return{restrict:"A",replace:!1,require:"^wizard",link:function(b,c,d,e){c.on("click",function(c){c.preventDefault(),b.$apply(function(){b.$eval(d[a]),e[a.replace("wz","").toLowerCase()]()})})}}})}angular.module("templates-angularwizard",["step.html","wizard.html"]),angular.module("step.html",[]).run(["$templateCache",function(a){a.put("step.html",'<section ng-show="selected" ng-class="{current: selected, done: completed}" ng-transclude>\n</section>')}]),angular.module("wizard.html",[]).run(["$templateCache",function(a){a.put("wizard.html",'<div>\n <div class="steps" ng-transclude></div>\n <ul class="steps-indicator steps-{{steps.length}}" ng-if="!hideIndicators">\n <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 steps">\n <a ng-click="goTo(step)">{{step.title}}</a>\n </li>\n </ul>\n</div>')}]),angular.module("mgo-angular-wizard",["templates-angularwizard"]),angular.module("mgo-angular-wizard").directive("step",function(){return{restrict:"E",replace:!0,transclude:!0,scope:{title:"@"},require:"^wizard",templateUrl:"step.html",link:function(a,b,c,d){d.addStep(a)}}}),angular.module("mgo-angular-wizard").directive("wizard",function(){return{restrict:"E",replace:!0,transclude:!0,scope:{currentStep:"=",onFinish:"&",hideIndicators:"=",editMode:"=",name:"@"},templateUrl:"wizard.html",controller:["$scope","$element","WizardHandler",function(a,b,c){function d(){_.each(a.steps,function(a){a.selected=!1}),a.selectedStep=null}c.addWizard(a.name||c.defaultName,this),a.$on("$destroy",function(){c.removeWizard(a.name||c.defaultName)}),a.steps=[],a.$watch("currentStep",function(b){b&&a.selectedStep&&a.selectedStep.title!==a.currentStep&&a.goTo(_.find(a.steps,{title:a.currentStep}))}),a.$watch("[editMode, steps.length]",function(){var b=a.editMode;_.isUndefined(b)||_.isNull(b)||b&&_.each(a.steps,function(a){a.completed=!0})},!0),this.addStep=function(b){a.steps.push(b),1===a.steps.length&&a.goTo(a.steps[0])},a.goTo=function(b){d(),a.selectedStep=b,a.currentStep&&(a.currentStep=b.title),b.selected=!0},this.next=function(b){var c=_.indexOf(a.steps,a.selectedStep);b||(a.selectedStep.completed=!0),c===a.steps.length-1?this.finish():a.goTo(a.steps[c+1])},this.goTo=function(b){var c;c=_.isNumber(b)?a.steps[b]:_.find(a.steps,{title:b}),a.goTo(c)},this.finish=function(){a.onFinish&&a.onFinish()},this.cancel=this.previous=function(){var b=_.indexOf(a.steps,a.selectedStep);if(0===b)throw new Error("Can't go back. It's already in step 0");a.goTo(a.steps[b-1])}}]}}),wizardButtonDirective("wzNext"),wizardButtonDirective("wzPrevious"),wizardButtonDirective("wzFinish"),wizardButtonDirective("wzCancel"),angular.module("mgo-angular-wizard").factory("WizardHandler",function(){var a={},b={};return a.defaultName="defaultWizard",a.addWizard=function(a,c){b[a]=c},a.removeWizard=function(a){delete b[a]},a.wizard=function(c){var d=c;return c||(d=a.defaultName),b[d]},a});
+60
View File
@@ -0,0 +1,60 @@
{
"name": "angular-wizard",
"npmName": "angular-wizard",
"npmFileMap": [
{
"basePath": "/dist/",
"files": [
"*"
]
}
],
"description": "Easy to use Wizard library for AngularJS",
"version": "0.2.1",
"filename": "angular-wizard.min.js",
"main": "./dist/angular-wizard.min.js",
"homepage": "https://github.com/mgonto/angular-wizard",
"author": "Martin Gontovnikas <martin@gon.to>",
"repository": {
"type": "git",
"url": "git://github.com/mgonto/angular-wizard.git"
},
"engines": {
"node": ">= 0.9"
},
"keywords": [
"angular",
"client",
"browser",
"wizard",
"form",
"steps"
],
"maintainers": [
{
"name": "Martin Gontovnikas",
"website": "http://gon.to/"
}
],
"dependencies": {},
"devDependencies": {
"grunt-bower": "*",
"grunt-bower-task": "*",
"grunt-zip": "*",
"grunt": "~0.4.1",
"grunt-recess": "~0.3.0",
"grunt-contrib-clean": "~0.4.1",
"grunt-contrib-copy": "~0.4.1",
"grunt-contrib-concat": "~0.3.0",
"grunt-contrib-uglify": "~0.2.0",
"grunt-karma": "~0.5.0",
"grunt-ngmin": "0.0.2",
"grunt-html2js": "~0.1.3",
"grunt-conventional-changelog": "~0.1.1",
"grunt-bump": "0.0.6"
},
"scripts": {
"test": "grunt travis --verbose"
},
"license": "MIT"
}