angular steps frototype

katmai7 · Sep 25, 2014 · 85fdc74 · 85fdc74
1 parent 3469af8
commit 85fdc74
Show file tree

Hide file tree

Showing 8 changed files with 426 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,3 @@
+/.idea
+/node_modules
+/dist
diff --git a/angular.js b/angular.js
diff --git a/index.html b/index.html
@@ -0,0 +1,43 @@
+<!doctype html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title>Appinion</title>
+        <meta name="description" content="">
+        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+    </head>
+    <body ng-app="steps">
+        <div ng-controller="stepController"></div>
+        <steps>
+        <step-item title="First step title">First step text!!!
+            <div class="block" ng-class="{ 'has-error' : step1.body.$invalid && !step1.body.$pristine}">
+                <label class="control-label">Question text</label>
+                <input type="text" name="body" placeholder="Question" class="form-control" ng-model="editQuestion.body" required="" ng-maxlength="140">
+                <p ng-show="step1.body.$error.required && !step1.body.$pristine" class="help-block">Title is required.</p>
+                <p ng-show="step1.body.$error.maxlength && !step1.body.$pristine" class="help-block">Title cannot be longer than 140 characters.</p>
+            </div>
+        </step-item>
+        <step-item title="Second step title">Second step text!!!
+            <div class="block" ng-class="{ 'has-error' : step1.body.$invalid && !step1.body.$pristine}">
+                <label class="control-label">Question text</label>
+                <!-- <input type="text" name="body" placeholder="Question" class="form-control" ng-model="editQuestion.body" required="" ng-maxlength="140"> -->
+                <p ng-show="step1.body.$error.required && !step1.body.$pristine" class="help-block">Title is required.</p>
+                <p ng-show="step1.body.$error.maxlength && !step1.body.$pristine" class="help-block">Title cannot be longer than 140 characters.</p>
+            </div>
+        </step-item>
+        <step-item title="Third step title">Third step text!!!</step-item>
+        </steps>
+
+        <script src="angular.js"></script>
+        <script src="src/angularModule.js"></script>
+        <script src="src/steps.js"></script>
+        <script src="src/steps-item.js"></script>
+        <script type="text/javascript">
+        angular.module('steps', ['vig-angular-steps']);
+        angular.module('steps').controller('stepController', ['$scope',
+        function($scope){
+        }
+        ]);
+        </script>
+    </body>
+</html>
diff --git a/src/angularModule.js b/src/angularModule.js
@@ -0,0 +1,3 @@
+'use strict';
+
+angular.module('vig-angular-steps', []);
diff --git a/src/steps-item.html b/src/steps-item.html
@@ -0,0 +1,3 @@
+<ng-form name="step-{{stepNum}}" ng-switch-when="{{stepNum + 1}}" ng-transclude>
+
+</ng-form>
diff --git a/src/steps-item.js b/src/steps-item.js
@@ -0,0 +1,40 @@
+'use strict';
+
+angular.module('vig-angular-steps').directive('stepItem', function($compile) {
+	return {
+		restrict: 'EA',
+		template: '<ng-form ng-if="stepNum == settings.currentStep" name="step-{{stepNum}}">{{test}}<div ng-transclude>' + '</div></ng-form>',
+		scope: {
+			title: '@',
+			current: '@'
+		},
+		transclude: true,
+		// replace: true,
+		priority: 1500,
+		require: '^steps',
+		controller: ['$scope',
+			function($scope) {
+				console.log('child scope');
+
+			}
+		],
+		compile: function compile(cElement, cAttrs, transclude) {
+			console.log('Child  compile')
+			// console.log(cElement[0].outerHTML)
+			return {
+				pre: function preLink($scope, element, attrs, steps) {
+					$scope.stepNum = steps.addStep($scope);
+
+					$scope.settings = steps.getSettings();
+
+					console.log('Child  prelink')
+					// console.log(element[0].outerHTML)
+				},
+				post: function($scope, element, attrs, steps) {
+					console.log('Child  postLink')
+					// console.log(element[0].outerHTML)
+				}
+			}
+		}
+	};
+});
diff --git a/src/steps.html b/src/steps.html
@@ -0,0 +1,19 @@
+<form name="wizzard">
+    <div class="wizard clearfix">
+        <ul class="steps">
+            <li ng-class="{active: currentStep === {{$index + 1}}}" ng-repeat="step in steps">
+                <span class="badge" ng-class="{'badge-info':currentStep === {{$index + 1}}, 'badge-success': currentStep > {{$index + 1}}}">{{$index + 1}}</span>
+                {{step.title}}
+            </li>
+        </ul>
+        <div class="actions visible-lg-block">
+            <button type="button" class="btn btn-white btn-xs btn-prev" ng-click="prevStep()" ng-disabled="currentStep == 0 || wizzard.$invalid">Prev</button>
+            <button type="button" class="btn btn-white btn-xs btn-next" ng-click="nextStep()" ng-disabled="currentStep == {{steps.length}} || wizzard.$invalid">Next</button>
+            {{wizzard.$invalid}}
+            {{currentStep}}
+        </div>
+    </div>
+    <div class="step-content" ng-switch="currentStep">
+        <div ng-transclude></div>
+    </div>
+</form>
diff --git a/src/steps.js b/src/steps.js
@@ -0,0 +1,100 @@
+'use strict';
+
+angular.module('vig-angular-steps').directive('steps', function($compile) {
+	return {
+		restrict: 'EA',
+		// templateUrl: function(element, attrs) {
+		// 	return attrs.template || "src/steps.html";
+		// },
+		template: '<form name="stepsform">'
+				    +'<div class="wizard clearfix">'
+				        +'<ul class="steps">'
+				            +'<li ng-class="{active: settings.currentStep === {{$index + 1}} }" ng-repeat="step in steps" ng-click="goToStep($index + 1, stepsform.$valid)">'
+				                +'<span  class="badge" ng-class="{\'badge-info\':settings.currentStep === {{$index + 1}}, \'badge-success\': settings.currentStep > {{$index + 1}} }">{{$index + 1}}</span>'
+				                +'{{step.title}}'
+				            +'</li>'
+				        +'</ul>'
+				        +'<div class="actions visible-lg-block">'
+				            +'<button type="button" class="btn btn-white btn-xs btn-prev" ng-click="prevStep()" ng-disabled="settings.currentStep == 1 || stepsform.$invalid">Prev</button>'
+				            +'<button type="button" class="btn btn-white btn-xs btn-next" ng-click="nextStep()" ng-disabled="settings.currentStep == steps.length || stepsform.$invalid">Next</button>'
+				        +'</div>'
+				    +'</div>'
+				    +'<div class="step-content" ng-transclude>'
+				    +'</div>'
+				+'</form>',
+		scope: {
+			settings: '=?'
+		},
+		transclude: true,
+		priority: 2000,
+		compile: function compile(cElement, cAttrs, transclude) {
+			console.log('Parent compile')
+			// console.log(cElement[0].outerHTML)
+			return {
+				pre: function preLink($scope, element, attrs) {
+					console.log('parent preLink')
+					// console.log(element[0].outerHTML)
+
+				},
+				post: function postLink($scope, element, attrs) {
+					// $compile(element.contents(), transclude)($scope);
+					console.log('parent postlink')
+					// console.log(element[0].outerHTML)
+				}
+			}
+		},
+		controller: ['$scope', '$element',
+			function($scope, $element) {
+
+				//default settings
+				if(!$scope.settings){
+					$scope.settings = {
+						currentStep : 1,
+						formName : 'steps'
+					};
+				}
+
+				//number of steps
+				$scope.steps = [];
+
+				this.addStep = function(step) {
+					$scope.steps.push(step);
+					if ($scope.steps.length === 1) {
+						$scope.goToStep($scope.steps[0]);
+					}
+
+					return $scope.steps.length;
+				};
+
+				this.getSettings = function() {
+					return $scope.settings;
+				};
+
+				$scope.goToStep = function(stepNum, canSet) {
+					console.log('click click');
+					console.log(stepNum);
+					canSet = typeof canSet != undefined? canSet : true;
+					if (stepNum !== $scope.settings.currentStep 
+						&& (stepNum <= $scope.steps.length && stepNum > 0) 
+						&& canSet) {
+						$scope.settings.currentStep = stepNum;
+					}
+				};
+
+				$scope.nextStep = function() {
+					if ($scope.settings.currentStep < $scope.steps.length) {
+						$scope.settings.currentStep += 1;
+						console.log($scope.settings.currentStep)
+					}
+				};
+
+				$scope.prevStep = function() {
+					if ($scope.settings.currentStep > 1) {
+						$scope.settings.currentStep -= 1;
+					}
+				};
+
+			}
+		]
+	};
+});
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		'use strict';

		angular.module('vig-angular-steps', []);
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		<ng-form name="step-{{stepNum}}" ng-switch-when="{{stepNum + 1}}" ng-transclude>

		</ng-form>