├── README.md ├── app.js ├── bower.json ├── LICENSE ├── index.html ├── styles.css └── wizard.js /README.md: -------------------------------------------------------------------------------- 1 | # angular-ui-fuelux-wizard 2 | 3 | [![Join the chat at https://gitter.im/farhan2986/angular-ui-fuelux-wizard](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/farhan2986/angular-ui-fuelux-wizard?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) 4 | fully customizable fuelux angular directive 5 | -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | var app = angular.module('demoApp', ['fuelux.wizard']); 4 | 5 | app.controller('WizardController', ['$scope','$interval', function($scope, $interval){ 6 | $scope.stepCurrent = 0; 7 | $scope.log = function(event){ 8 | console.log(event); 9 | //if(event.direction=='next') return true; 10 | } 11 | $interval(function(){$scope.stepCurrent = Math.floor(Math.random(0, 5)*5);}, 2000); 12 | 13 | $scope.$watch('stepCurrent', function(stepValue) { 14 | console.log("stepCurrent updated ", stepValue, $scope.stepCurrent); 15 | }); 16 | }]); 17 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-ui-fuelux-wizard", 3 | "version": "1.0.0", 4 | "homepage": "https://github.com/farhan2986/angular-ui-fuelux-wizard", 5 | "authors": [ 6 | "farhan2986" 7 | ], 8 | "description": "angular directive for fuelux-wizard", 9 | "main": "wizard.js", 10 | "moduleType": [ 11 | "node" 12 | ], 13 | "keywords": [ 14 | "fuelux-wizard", 15 | "angular", 16 | "customizable" 17 | ], 18 | "license": "MIT", 19 | "ignore": [ 20 | "**/.*", 21 | "node_modules", 22 | "bower_components", 23 | "test", 24 | "tests" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Farhan Shahid 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Wizard 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 | 24 |
25 | 26 | 27 |
28 |
29 |
30 |
31 |
step 1
32 |
step 2
33 |
step 3
34 |
step 4
35 |
step 5
36 |
37 |
38 |
39 |
40 | 41 | 42 |
43 |
44 |
45 | 46 | 47 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | .fuelux .wizard { 2 | background-color: #f9f9f9; 3 | border: 1px solid #d4d4d4; 4 | -webkit-border-radius: 4px; 5 | -moz-border-radius: 4px; 6 | border-radius: 4px; 7 | *zoom: 1; 8 | -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065); 9 | -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065); 10 | box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065); 11 | } 12 | 13 | .fuelux .wizard:before, 14 | .fuelux .wizard:after { 15 | display: table; 16 | line-height: 0; 17 | content: ""; 18 | } 19 | 20 | .fuelux .wizard:after { clear: both;} 21 | 22 | .fuelux .wizard ul { 23 | padding: 0; 24 | margin: 0; 25 | list-style: none outside none; 26 | } 27 | 28 | .fuelux .wizard ul li { 29 | position: relative; 30 | float: left; 31 | height: 46px; 32 | padding: 0 5px 0 20px; 33 | margin: 0; 34 | font-size: 16px; 35 | line-height: 46px !important; 36 | color: #999999; 37 | cursor: default; 38 | background: #ededed; 39 | } 40 | 41 | .fuelux .wizard ul li .chevron { 42 | position: absolute; 43 | top: 0; 44 | right: -14px; 45 | display: block; 46 | border: 24px solid transparent; 47 | border-right: 0; 48 | border-left: 14px solid #d4d4d4; 49 | } 50 | 51 | .fuelux .wizard ul li .chevron:before { 52 | position: absolute; 53 | top: -24px; 54 | right: 1px; 55 | display: block; 56 | border: 24px solid transparent; 57 | border-right: 0; 58 | border-left: 14px solid #ededed; 59 | content: ""; 60 | } 61 | 62 | .fuelux .wizard ul li.complete { 63 | color: #468847; 64 | background: #f3f4f5; 65 | } 66 | 67 | .fuelux .wizard ul li.complete:hover { 68 | cursor: pointer; 69 | background: #e7eff8; 70 | } 71 | 72 | .fuelux .wizard ul li.complete:hover .chevron:before { border-left: 14px solid #e7eff8;} 73 | 74 | .fuelux .wizard ul li.complete .chevron:before { border-left: 14px solid #f3f4f5;} 75 | 76 | .fuelux .wizard ul li.active { 77 | color: #3a87ad; 78 | background: #f1f6fc; 79 | } 80 | 81 | .fuelux .wizard ul li.active .chevron:before { border-left: 14px solid #f1f6fc;} 82 | 83 | .fuelux .wizard ul li .badge { margin-right: 8px;} 84 | 85 | .fuelux .wizard ul li:nth-child(1) { 86 | z-index: 10; 87 | padding-left: 20px; 88 | border-radius: 4px 0 0 4px; 89 | } 90 | 91 | .fuelux .wizard ul li:nth-child(2) { z-index: 9;} 92 | .fuelux .wizard ul li:nth-child(3) { z-index: 8;} 93 | .fuelux .wizard ul li:nth-child(4) { z-index: 7;} 94 | .fuelux .wizard ul li:nth-child(5) { z-index: 6;} 95 | .fuelux .wizard ul li:nth-child(6) { z-index: 5;} 96 | .fuelux .wizard ul li:nth-child(7) { z-index: 4;} 97 | .fuelux .wizard ul li:nth-child(8) { z-index: 3;} 98 | .fuelux .wizard ul li:nth-child(9) { z-index: 2;} 99 | .fuelux .wizard ul li:nth-child(10) { z-index: 1;} 100 | 101 | .fuelux .wizard .actions { 102 | float: right; 103 | padding-right: 15px; 104 | line-height: 44px; 105 | vertical-align: middle; 106 | } 107 | 108 | .fuelux .wizard .actions a { 109 | margin-right: 8px; 110 | font-size: 12px; 111 | line-height: 45px; 112 | } 113 | 114 | .fuelux .wizard .actions .btn-prev i { margin-right: 5px;} 115 | 116 | .fuelux .wizard .actions .btn-next i { margin-left: 5px;} 117 | 118 | .fuelux .step-content{ 119 | padding: 5px 0px 0px 0px !important; 120 | height: auto !important; 121 | overflow: auto; 122 | overflow-x: hidden; 123 | position: relative !important; 124 | background-color: transparent !important; 125 | } 126 | .fuelux .step-content .step-pane { 127 | display: none; 128 | padding: 0px 20px; 129 | } 130 | .fuelux .bottom-prev-next{ padding: 5px 20px;} 131 | .fuelux .bottom-prev-next button{ margin-left: 2px;} 132 | 133 | .fuelux .step-content .active { display: block;} 134 | 135 | .fuelux .step-content .active .btn-group .active { display: inline-block;} 136 | .badge-info{background-color: #3A87AD;} 137 | .badge-success{background-color: #468847;} 138 | -------------------------------------------------------------------------------- /wizard.js: -------------------------------------------------------------------------------- 1 | 2 | angular.module("fuelux.wizard", []) 3 | .directive('wizard', ['$compile', '$parse', function($compile, $parse){ 4 | return {terminal: true, priority:1000, 5 | restrict: 'A', 6 | scope: true,//{change: '&', changed: '&', wizard:'='}, 7 | link: function(scope, ele, attrs){ 8 | ele.removeAttr("wizard"); 9 | var steps = document.querySelectorAll(".wizard > .steps > li"); 10 | var stepContents = document.querySelectorAll(".step-content > .step-pane"); 11 | 12 | scope.attrWiz = attrs.wizard; 13 | scope.currentStepIndex = (+ scope.$eval(scope.attrWiz)); 14 | scope.currentStepIndex = scope.currentStepIndex>0?scope.currentStepIndex:0; 15 | for(var step=0; step < steps.length; step++){//register steps 16 | scope.steps.push({currentStep:false}); 17 | stepEle = angular.element(steps[step]).attr('ng-class', '{active:steps['+step+'].currentStep, complete:'+step+'