Refactoring demo page code and comments.

caiyan1 · Oct 17, 2013 · 878f00e · 878f00e
1 parent b9c60f1
commit 878f00e
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 43 deletions.
diff --git a/index.html b/index.html
@@ -32,18 +32,18 @@ <h2>Angularjs ngAnimation <small>by Augus</small></h2>
   <!-- /Github buttons -->
 
 	<div class="sidebar">
-    <div class="btn block" ng-click="playAll(0)"><i class="icon-play-circled2"></i> Play All</div>
-		<div ng-repeat="animation in animations" class="btn block" ng-click="add(animation)" ng-class="{'active' : animation == currentAnimation}">{{animation}}</div>
+    <div class="btn block" ng-click="autoPlayAnimation(0)"><i class="icon-play-circled2"></i> Play All</div>
+		<div ng-repeat="animation in animations" class="btn block" ng-click="addItem(animation)" ng-class="{'active' : animation == currentAnimation}">{{animation}}</div>
 	</div>
 
   <div class="controls">
     <div class="btn" ng-class="{'active' : layoutMode == 0}" ng-click="switchGridMode()"><i class="icon-th-large"></i> Grid</div>
     <div class="btn" ng-class="{'active' : layoutMode == 1}" ng-click="switchListMode()"><i class="icon-th-list"></i> List</div>
-    <div class="btn red" ng-click="clean()"><i class="icon-trash"></i> Clean</div>
+    <div class="btn red" ng-click="cleanList()"><i class="icon-trash"></i> Clean</div>
   </div>
 
 	<ul class="item-container" ng-class="{'list' : layoutMode == 0}">
-		<li class="item" ng-class="animation" ng-repeat="item in list" ng-click="remove(item)">{{item.title}}</li>
+		<li class="item" ng-class="animation" ng-repeat="item in list" ng-click="removeItem(item)">{{item.title}}</li>
 	</ul>
 
 </body>

diff --git a/js/app.js b/js/app.js
@@ -2,6 +2,7 @@ var app = angular.module('app', ['ngAnimate']);
 
 function AppController ($scope, $rootScope, $http, $timeout) {
 
+	// grid(0), list (1)
 	$scope.layoutMode = 0;
 	$scope.list = [];
 	$scope.currentAnimation;
@@ -21,64 +22,39 @@ function AppController ($scope, $rootScope, $http, $timeout) {
 						"bouncy-slide-down", 
 						"rotate-in"];
 
-	/* ------------------------------------------- */
-	/* Add Iems
-	/* ------------------------------------------- */
-	$scope.add = function (animation) {
+	$scope.addItem = function (animation) {
 		$scope.animation = animation;
 		for (var i = 0; i < 6; i++) {
-			pushDelay($scope.list, { title : "item" }, i, 100);
+			$timeout(function () {
+				$scope.list.push({ title : "item" });
+			}, 100 * i);
 		};		
 	}
 
-	/* ------------------------------------------- */
-	/* Remove Item
-	/* ------------------------------------------- */
-	$scope.remove = function (item) {
+	$scope.removeItem = function (item) {
 		var index = $scope.list.indexOf(item);
 		$scope.list.remove(index);
 	}
 
-	/* ------------------------------------------- */
-	/* Clean All Items
-	/* ------------------------------------------- */
-	$scope.clean = function () {
+	$scope.cleanList = function () {
 		for (var i = 0; i < $scope.list.length; i++) {
-			removeDelay($scope.list, i, 100);
+			$timeout(function () {
+				$scope.list.pop();
+			}, 100 * i);
 		};
 	}
 
-	/* ------------------------------------------- */
-	/* Array Push Delay
-	/* ------------------------------------------- */
-	function pushDelay (array, item, i, duration) {
-		$timeout(function () {
-			array.push(item);
-		}, duration * i);
-	}
-
-	/* ------------------------------------------- */
-	/* Array Pop Delay
-	/* ------------------------------------------- */
-	function removeDelay (array, i, duration) {
-		$timeout(function () {
-			array.pop();
-		}, duration * i);
-	}
-
-	/* ------------------------------------------- */
-	/* Play All Animations
-	/* ------------------------------------------- */	
-	$scope.playAll = function (index) {
+	// Play all animation, it will auto clean item list.
+	$scope.autoPlayAnimation = function (index) {
 		var animation = $scope.animations[index];
 		if (animation) {
 			$scope.currentAnimation = animation;
-			$scope.add(animation);
+			$scope.addItem(animation);
 			$timeout(function () {
-				$scope.clean();
+				$scope.cleanList();
 			}, 1000);
 			$timeout(function () {
-				$scope.playAll(++index);
+				$scope.autoPlayAnimation(++index);
 			}, 2000);
 		}
 		else {