process save/restore design

TRUONG
1 parent f2c8c5649e
Showing 5 changed files with 96 additions and 22 deletions Side-by-side Diff
app/index.html
app/scripts/controllers/tshirtdesign.js
app/scripts/services/favorite.js
app/styles/main.css
app/views/design_part/tshirt-saved.html
@@ -47,7 +47,7 @@
     <script src="bower_components/json3/lib/json3.min.js"></script>
     <![endif]-->
     <script type="text/javascript">
-        var VERSION = '27-11_03';
+        var VERSION = new Date().getTime();//'27-11_03';
         var require = {
           urlArgs: "ver="+VERSION,
         };
@@ -2,6 +2,9 @@
 	app.controller('TshirtdesignCtrl', function ($scope, $rootScope, $window, $timeout, $illustration, $favorite) {
 		$scope.savedFrameView = 'views/design_part/tshirt-saved.html?ver='+VERSION;
 		var canvas = new fabric.Canvas('main-design-container');
+		var diffX = 40, diffY = 40;
+		var _coorTrash_x = 567;
+		var _coorTrash_y = 545;
 		//Set width and height canvas
 		function setSizeCanvas() {
 			if(typeof $rootScope.placeTshirt.place == 'undefined')
  
@@ -36,9 +39,18 @@
 				default:
 					break;
 			}
-
+			
 			canvas.setWidth(_contentCanvasWidth);
 			canvas.setHeight(_contentCanvasHeight);
+			
+			var mainDsWidth = (_modalWidth*8/12)-30;
+			var mainDsHeight = (place == 't_shirt_p_1' ? 80 : 400) + _contentCanvasHeight;
+			// console.log(mainDsWidth, mainDsHeight);
+			diffX = 40;
+			diffY = (mainDsHeight - _contentCanvasHeight)/2;
+			_coorTrash_x = _contentCanvasWidth + 20;
+			_coorTrash_y = _contentCanvasHeight + diffY - 90;
+			console.log(_coorTrash_x, _coorTrash_y);
 		}
 		setSizeCanvas();
 		//Window resize event
@@ -168,7 +180,7 @@
 			$('.object-border').hide();
 			//
 		    var pointer = canvas.getPointer(options.e);
-			if (pointer.x >= 567 && pointer.y >= 545 && pointer.x <= 600 && pointer.y <= 600){
+			if (pointer.x >= _coorTrash_x && pointer.y >= _coorTrash_y && pointer.x <= _coorTrash_x+50 && pointer.y <= _coorTrash_y+70){
 				canvas.getActiveObject().remove();
 				$('.design-content .trash-design img').attr({'src':'images/trash.png'});
 				return;
@@ -213,7 +225,8 @@
 		function onIllustrationMoving(options) {
 			var object = options.target;
 			var pointer = canvas.getPointer(options.e);
-			if (pointer.x >= 567 && pointer.y >= 545 && pointer.x <= 600 && pointer.y <= 600){
+			// console.log(pointer.x, pointer.y);
+			if (pointer.x >= _coorTrash_x && pointer.y >= _coorTrash_y && pointer.x <= _coorTrash_x+50 && pointer.y <= _coorTrash_y+70){
 				$('.design-content .trash-design img').attr({'src':'images/trash-hover.png'});
 			}else{
 				$('.design-content .trash-design img').attr({'src':'images/trash.png'});
@@ -222,7 +235,6 @@
 			// console.log(object.oCoords,object.originalState);
 			object.setCoords();
 			var Coords = object.oCoords;
-			var diffX = 40, diffY=40;
 			var xAngle = Math.cos(object.getAngle() * (Math.PI / 180))/2;
 			var yAngle = Math.sin(object.getAngle() * (Math.PI / 180))/2;
 			$('#object-border-left').css({'height':Math.ceil(object.originalState.height*object.scaleY), top: Coords.tl.y+diffY, left: Coords.tl.x+diffX});
@@ -328,7 +340,7 @@
 			fabric.loadSVGFromURL(item.path, function(objects, options) {
 				var shape = fabric.util.groupSVGElements(objects, options);
 				canvas.add(shape.scale(0.6));
-				shape.set({ left: 150, top: 200 }).setCoords();
+				shape.set({ left: 150, top: 100 }).setCoords();
 				canvas.renderAll();
 				canvas.setActiveObject(shape);
 			});
  
@@ -616,10 +628,19 @@
 		}
  
 		$scope.showRecommend = function(){
+			$scope.recommendList = $favorite.getAll();
+			$scope.favoriteList = $favorite.getAll();
 			$('#tshirt-design-saved').modal({
 				backdrop: 'static',
 				keyboard: false
 			});
+			$timeout(function(){
+				$('.saved-item').tooltip({
+					animated: 'fade',
+					placement: 'bottom',
+					html: true
+				});
+			},1000);
 		}
  
 		$scope.closeSavedModal = function(){
@@ -627,8 +648,6 @@
 		}
  
 		$scope.openSavedTab = function(tab){
-			$scope.recommendList = $favorite.getAll();
-			$scope.favoriteList = $favorite.getAll();
 			$('#tshirt-design-saved .subframe-design .nav-tabs li').removeClass('active');
 			$('#tab-saved-'+tab).addClass('active');
 			$('#tshirt-design-saved .subframe-design .tab-content .tab-pane').removeClass('active');
  
  
@@ -643,15 +662,22 @@
 			},1000);
 		}
  
+		$favorite.loadFromRemote();
 		$scope.saveFavorite = function(){
 			var dataDump = {
 				thumb: canvas.toDataURL('png'),
-				data: canvas.toDatalessJSON()
+				data: canvas.toJSON()
 			}
 			$favorite.addToFavorite({
 				data: dataDump
 			})
 			console.log(dataDump);
+			alert('saved');
+		}
+		
+		$scope.restoreSaved = function(item){
+			$('#tshirt-design-saved').modal('hide');
+			canvas.loadFromJSON(item.data,canvas.renderAll.bind(canvas));
 		}
 	});
 });
 define(['app'], function (app) {
     'use strict';
  
-    app.factory('$favorite', function ($http, $rootScope) {
+    app.factory('$favorite', function ($http, $rootScope, $window) {
         var DATA = [];
  
         return {
@@ -613,7 +613,7 @@
   cursor: pointer;
 }
  
-.aside #choice-illustration li .content .illustration-list .footer-bar {
+.footer-bar {
     text-align: center;
     margin-top: 5px;
     bottom: 10px;
@@ -621,7 +621,7 @@
     width: 100%;
     padding-right: 20px;
 }
-.aside #choice-illustration li .content .illustration-list .footer-bar .footer-pagination {
+.footer-bar .footer-pagination {
   margin-right: 5px;
   cursor: pointer;
   font-size: 9px;
@@ -631,7 +631,7 @@
   padding: 2px 5px;
 }
  
-.aside #choice-illustration li .content .illustration-list .footer-bar .footer-pagination:hover {
+.footer-bar .footer-pagination:hover {
   background: #999999;
 }
 .tooltip-arrow,
  
  
  
@@ -821,17 +821,18 @@
 #tshirt-design-saved .subframe-design {
   width: 80%;
   margin: auto;
-  margin-top: 150px;
+  margin-top: 100px;
   border: 10px solid rgb(0, 0, 0);
   border: 20px solid rgba(0, 0, 0, .5);
   -webkit-background-clip: padding-box; /* for Safari */
   background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
+  background: #FFF;
 }
  
 #tshirt-design-saved .modal-content button.close {
-  margin-right: 100px;
+  margin-right: 103px;
   font-size: 41px;
-  margin-top: -10px;
+  margin-top: -8px;
 }
  
 #tshirt-design-saved .subframe-design .nav-tabs {
@@ -859,5 +860,40 @@
   background: #F5F5F5;
     width: 100%;
     min-height: 400px;
+}
+
+#tshirt-design-saved .saved-list {
+  width: 100%;
+  border: #bbb solid 1px;
+  background: #FFF;
+  margin-top: 5px;
+  min-height: 400px;
+  padding-bottom: 20px;
+}
+
+#tshirt-design-saved .saved-list .saved-item{
+  height: 100px;
+  overflow: hidden;
+  float: left;
+  margin-left: 6px;
+  margin-top: 5px;
+  margin-bottom: 5px;
+  padding: 2px;
+  background: #e2e2e2;
+  border: solid 2px #d7d7d7;
+  cursor: pointer;
+}
+
+#tshirt-design-saved .saved-list .saved-item:hover {
+  outline: 2px solid #ed1d24;
+}
+
+#tshirt-design-saved .saved-list .saved-item img {
+  width: 100px;
+  cursor: pointer;
+}
+
+#tshirt-design-saved .saved-list .footer-bar {
+  bottom: 20px;
 }
@@ -11,18 +11,30 @@
                 <div class="tab-content">
                     <div role="tabpanel" class="tab-pane active" id="content-saved-favorite">
                         <div class="saved-list" ng-init="currentFavoritePage=1;perFavoritePage=16">
-                            <div class="saved-item" ng-repeat="item in favoriteList | limitTo:perFavoritePage:((currentFavoritePage-1)*perFavoritePage)" ng-click="restoreSaved(item)" title="<img src='{{item.thumb}}' style='width:200px;background:#e2e2e2;margin:0;padding:0;margin-left:-8px;border:0'/>" data-toggle="tooltip">
-                                <img ng-src="{{item.path}}"/>
+                            <div class="saved-item" ng-repeat="item in favoriteList | limitTo:perFavoritePage:((currentFavoritePage-1)*perFavoritePage) track by $index" ng-click="restoreSaved(item)" title="<img src='{{item.thumb}}' style='width:200px;background:#e2e2e2;margin:0;padding:0;margin-left:-8px;border:0'/>" data-toggle="tooltip">
+                                <img ng-src="{{item.thumb}}"/>
                             </div>
                             <div class="clearfix"></div>
                             <div class="footer-bar">
-                                <div class="pull-left footer-pagination" ng-click="currentIllustrationPage=currentIllustrationPage-1" ng-show="currentIllustrationPage > 1">< Back</div>
-                                {{currentIllustrationPage}}/{{currentIllustrationCate.list.length/perIllustrationPage | number:0}}
-                                <div class="pull-right footer-pagination" ng-click="currentIllustrationPage=currentIllustrationPage+1" ng-show="currentIllustrationPage < (currentIllustrationCate.list.length/perIllustrationPage|number:0)">Next ></div>
+                                <div class="pull-left footer-pagination" ng-click="currentFavoritePage=currentFavoritePage-1" ng-show="currentFavoritePage > 1">< Back</div>
+                                {{currentFavoritePage}}/{{favoriteList.length/perFavoritePage | number:0}}
+                                <div class="pull-right footer-pagination" ng-click="currentFavoritePage=currentFavoritePage+1" ng-show="currentFavoritePage < (favoriteList.length/perFavoritePage|number:0)">Next ></div>
                             </div>
                         </div>
                     </div>
-                    <div role="tabpanel" class="tab-pane" id="content-saved-recommend">...</div>
+                    <div role="tabpanel" class="tab-pane" id="content-saved-recommend">
+                        <div class="saved-list" ng-init="currentRecommendPage=1;perRecommendPage=16">
+                            <div class="saved-item" ng-repeat="item in recommendList | limitTo:perRecommendPage:((currentRecommendPage-1)*perRecommendPage) track by $index" ng-click="restoreSaved(item)" title="<img src='{{item.thumb}}' style='width:200px;background:#e2e2e2;margin:0;padding:0;margin-left:-8px;border:0'/>" data-toggle="tooltip">
+                                <img ng-src="{{item.thumb}}"/>
+                            </div>
+                            <div class="clearfix"></div>
+                            <div class="footer-bar">
+                                <div class="pull-left footer-pagination" ng-click="currentRecommendPage=currentRecommendPage-1" ng-show="currentRecommendPage > 1">< Back</div>
+                                {{currentRecommendPage}}/{{recommendList.length/perRecommendPage | number:0}}
+                                <div class="pull-right footer-pagination" ng-click="currentRecommendPage=currentRecommendPage+1" ng-show="currentRecommendPage < (recommendList.length/perRecommendPage|number:0)">Next ></div>
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
...	...	@@ -47,7 +47,7 @@
47	47	<script src="bower_components/json3/lib/json3.min.js"></script>
48	48	<![endif]-->
49	49	<script type="text/javascript">
50		- var VERSION = '27-11_03';
	50	+ var VERSION = new Date().getTime();//'27-11_03';
51	51	var require = {
52	52	urlArgs: "ver="+VERSION,
53	53	};
...	...	@@ -2,6 +2,9 @@
2	2	app.controller('TshirtdesignCtrl', function ($scope, $rootScope, $window, $timeout, $illustration, $favorite) {
3	3	$scope.savedFrameView = 'views/design_part/tshirt-saved.html?ver='+VERSION;
4	4	var canvas = new fabric.Canvas('main-design-container');
	5	+ var diffX = 40, diffY = 40;
	6	+ var _coorTrash_x = 567;
	7	+ var _coorTrash_y = 545;
5	8	//Set width and height canvas
6	9	function setSizeCanvas() {
7	10	if(typeof $rootScope.placeTshirt.place == 'undefined')
8	11
...	...	@@ -36,9 +39,18 @@
36	39	default:
37	40	break;
38	41	}
39		-
	42	+
40	43	canvas.setWidth(_contentCanvasWidth);
41	44	canvas.setHeight(_contentCanvasHeight);
	45	+
	46	+ var mainDsWidth = (_modalWidth*8/12)-30;
	47	+ var mainDsHeight = (place == 't_shirt_p_1' ? 80 : 400) + _contentCanvasHeight;
	48	+ // console.log(mainDsWidth, mainDsHeight);
	49	+ diffX = 40;
	50	+ diffY = (mainDsHeight - _contentCanvasHeight)/2;
	51	+ _coorTrash_x = _contentCanvasWidth + 20;
	52	+ _coorTrash_y = _contentCanvasHeight + diffY - 90;
	53	+ console.log(_coorTrash_x, _coorTrash_y);
42	54	}
43	55	setSizeCanvas();
44	56	//Window resize event
...	...	@@ -168,7 +180,7 @@
168	180	$('.object-border').hide();
169	181	//
170	182	var pointer = canvas.getPointer(options.e);
171		- if (pointer.x >= 567 && pointer.y >= 545 && pointer.x <= 600 && pointer.y <= 600){
	183	+ if (pointer.x >= _coorTrash_x && pointer.y >= _coorTrash_y && pointer.x <= _coorTrash_x+50 && pointer.y <= _coorTrash_y+70){
172	184	canvas.getActiveObject().remove();
173	185	$('.design-content .trash-design img').attr({'src':'images/trash.png'});
174	186	return;
...	...	@@ -213,7 +225,8 @@
213	225	function onIllustrationMoving(options) {
214	226	var object = options.target;
215	227	var pointer = canvas.getPointer(options.e);
216		- if (pointer.x >= 567 && pointer.y >= 545 && pointer.x <= 600 && pointer.y <= 600){
	228	+ // console.log(pointer.x, pointer.y);
	229	+ if (pointer.x >= _coorTrash_x && pointer.y >= _coorTrash_y && pointer.x <= _coorTrash_x+50 && pointer.y <= _coorTrash_y+70){
217	230	$('.design-content .trash-design img').attr({'src':'images/trash-hover.png'});
218	231	}else{
219	232	$('.design-content .trash-design img').attr({'src':'images/trash.png'});
...	...	@@ -222,7 +235,6 @@
222	235	// console.log(object.oCoords,object.originalState);
223	236	object.setCoords();
224	237	var Coords = object.oCoords;
225		- var diffX = 40, diffY=40;
226	238	var xAngle = Math.cos(object.getAngle() * (Math.PI / 180))/2;
227	239	var yAngle = Math.sin(object.getAngle() * (Math.PI / 180))/2;
228	240	$('#object-border-left').css({'height':Math.ceil(object.originalState.height*object.scaleY), top: Coords.tl.y+diffY, left: Coords.tl.x+diffX});
...	...	@@ -328,7 +340,7 @@
328	340	fabric.loadSVGFromURL(item.path, function(objects, options) {
329	341	var shape = fabric.util.groupSVGElements(objects, options);
330	342	canvas.add(shape.scale(0.6));
331		- shape.set({ left: 150, top: 200 }).setCoords();
	343	+ shape.set({ left: 150, top: 100 }).setCoords();
332	344	canvas.renderAll();
333	345	canvas.setActiveObject(shape);
334	346	});
335	347
...	...	@@ -616,10 +628,19 @@
616	628	}
617	629
618	630	$scope.showRecommend = function(){
	631	+ $scope.recommendList = $favorite.getAll();
	632	+ $scope.favoriteList = $favorite.getAll();
619	633	$('#tshirt-design-saved').modal({
620	634	backdrop: 'static',
621	635	keyboard: false
622	636	});
	637	+ $timeout(function(){
	638	+ $('.saved-item').tooltip({
	639	+ animated: 'fade',
	640	+ placement: 'bottom',
	641	+ html: true
	642	+ });
	643	+ },1000);
623	644	}
624	645
625	646	$scope.closeSavedModal = function(){
...	...	@@ -627,8 +648,6 @@
627	648	}
628	649
629	650	$scope.openSavedTab = function(tab){
630		- $scope.recommendList = $favorite.getAll();
631		- $scope.favoriteList = $favorite.getAll();
632	651	$('#tshirt-design-saved .subframe-design .nav-tabs li').removeClass('active');
633	652	$('#tab-saved-'+tab).addClass('active');
634	653	$('#tshirt-design-saved .subframe-design .tab-content .tab-pane').removeClass('active');
635	654
636	655
...	...	@@ -643,15 +662,22 @@
643	662	},1000);
644	663	}
645	664
	665	+ $favorite.loadFromRemote();
646	666	$scope.saveFavorite = function(){
647	667	var dataDump = {
648	668	thumb: canvas.toDataURL('png'),
649		- data: canvas.toDatalessJSON()
	669	+ data: canvas.toJSON()
650	670	}
651	671	$favorite.addToFavorite({
652	672	data: dataDump
653	673	})
654	674	console.log(dataDump);
	675	+ alert('saved');
	676	+ }
	677	+
	678	+ $scope.restoreSaved = function(item){
	679	+ $('#tshirt-design-saved').modal('hide');
	680	+ canvas.loadFromJSON(item.data,canvas.renderAll.bind(canvas));
655	681	}
656	682	});
657	683	});
1	1	define(['app'], function (app) {
2	2	'use strict';
3	3
4		- app.factory('$favorite', function ($http, $rootScope) {
	4	+ app.factory('$favorite', function ($http, $rootScope, $window) {
5	5	var DATA = [];
6	6
7	7	return {
...	...	@@ -613,7 +613,7 @@
613	613	cursor: pointer;
614	614	}
615	615
616		-.aside #choice-illustration li .content .illustration-list .footer-bar {
	616	+.footer-bar {
617	617	text-align: center;
618	618	margin-top: 5px;
619	619	bottom: 10px;
...	...	@@ -621,7 +621,7 @@
621	621	width: 100%;
622	622	padding-right: 20px;
623	623	}
624		-.aside #choice-illustration li .content .illustration-list .footer-bar .footer-pagination {
	624	+.footer-bar .footer-pagination {
625	625	margin-right: 5px;
626	626	cursor: pointer;
627	627	font-size: 9px;
...	...	@@ -631,7 +631,7 @@
631	631	padding: 2px 5px;
632	632	}
633	633
634		-.aside #choice-illustration li .content .illustration-list .footer-bar .footer-pagination:hover {
	634	+.footer-bar .footer-pagination:hover {
635	635	background: #999999;
636	636	}
637	637	.tooltip-arrow,
638	638
639	639
640	640
...	...	@@ -821,17 +821,18 @@
821	821	#tshirt-design-saved .subframe-design {
822	822	width: 80%;
823	823	margin: auto;
824		- margin-top: 150px;
	824	+ margin-top: 100px;
825	825	border: 10px solid rgb(0, 0, 0);
826	826	border: 20px solid rgba(0, 0, 0, .5);
827	827	-webkit-background-clip: padding-box; /* for Safari */
828	828	background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
	829	+ background: #FFF;
829	830	}
830	831
831	832	#tshirt-design-saved .modal-content button.close {
832		- margin-right: 100px;
	833	+ margin-right: 103px;
833	834	font-size: 41px;
834		- margin-top: -10px;
	835	+ margin-top: -8px;
835	836	}
836	837
837	838	#tshirt-design-saved .subframe-design .nav-tabs {
...	...	@@ -859,5 +860,40 @@
859	860	background: #F5F5F5;
860	861	width: 100%;
861	862	min-height: 400px;
	863	+}
	864	+
	865	+#tshirt-design-saved .saved-list {
	866	+ width: 100%;
	867	+ border: #bbb solid 1px;
	868	+ background: #FFF;
	869	+ margin-top: 5px;
	870	+ min-height: 400px;
	871	+ padding-bottom: 20px;
	872	+}
	873	+
	874	+#tshirt-design-saved .saved-list .saved-item{
	875	+ height: 100px;
	876	+ overflow: hidden;
	877	+ float: left;
	878	+ margin-left: 6px;
	879	+ margin-top: 5px;
	880	+ margin-bottom: 5px;
	881	+ padding: 2px;
	882	+ background: #e2e2e2;
	883	+ border: solid 2px #d7d7d7;
	884	+ cursor: pointer;
	885	+}
	886	+
	887	+#tshirt-design-saved .saved-list .saved-item:hover {
	888	+ outline: 2px solid #ed1d24;
	889	+}
	890	+
	891	+#tshirt-design-saved .saved-list .saved-item img {
	892	+ width: 100px;
	893	+ cursor: pointer;
	894	+}
	895	+
	896	+#tshirt-design-saved .saved-list .footer-bar {
	897	+ bottom: 20px;
862	898	}
...	...	@@ -11,18 +11,30 @@
11	11	<div class="tab-content">
12	12	<div role="tabpanel" class="tab-pane active" id="content-saved-favorite">
13	13	<div class="saved-list" ng-init="currentFavoritePage=1;perFavoritePage=16">
14		- <div class="saved-item" ng-repeat="item in favoriteList \| limitTo:perFavoritePage:((currentFavoritePage-1)*perFavoritePage)" ng-click="restoreSaved(item)" title="<img src='{{item.thumb}}' style='width:200px;background:#e2e2e2;margin:0;padding:0;margin-left:-8px;border:0'/>" data-toggle="tooltip">
15		- <img ng-src="{{item.path}}"/>
	14	+ <div class="saved-item" ng-repeat="item in favoriteList \| limitTo:perFavoritePage:((currentFavoritePage-1)*perFavoritePage) track by $index" ng-click="restoreSaved(item)" title="<img src='{{item.thumb}}' style='width:200px;background:#e2e2e2;margin:0;padding:0;margin-left:-8px;border:0'/>" data-toggle="tooltip">
	15	+ <img ng-src="{{item.thumb}}"/>
16	16	</div>
17	17	<div class="clearfix"></div>
18	18	<div class="footer-bar">
19		- <div class="pull-left footer-pagination" ng-click="currentIllustrationPage=currentIllustrationPage-1" ng-show="currentIllustrationPage > 1">< Back</div>
20		- {{currentIllustrationPage}}/{{currentIllustrationCate.list.length/perIllustrationPage \| number:0}}
21		- <div class="pull-right footer-pagination" ng-click="currentIllustrationPage=currentIllustrationPage+1" ng-show="currentIllustrationPage < (currentIllustrationCate.list.length/perIllustrationPage\|number:0)">Next ></div>
	19	+ <div class="pull-left footer-pagination" ng-click="currentFavoritePage=currentFavoritePage-1" ng-show="currentFavoritePage > 1">< Back</div>
	20	+ {{currentFavoritePage}}/{{favoriteList.length/perFavoritePage \| number:0}}
	21	+ <div class="pull-right footer-pagination" ng-click="currentFavoritePage=currentFavoritePage+1" ng-show="currentFavoritePage < (favoriteList.length/perFavoritePage\|number:0)">Next ></div>
22	22	</div>
23	23	</div>
24	24	</div>
25		- <div role="tabpanel" class="tab-pane" id="content-saved-recommend">...</div>
	25	+ <div role="tabpanel" class="tab-pane" id="content-saved-recommend">
	26	+ <div class="saved-list" ng-init="currentRecommendPage=1;perRecommendPage=16">
	27	+ <div class="saved-item" ng-repeat="item in recommendList \| limitTo:perRecommendPage:((currentRecommendPage-1)*perRecommendPage) track by $index" ng-click="restoreSaved(item)" title="<img src='{{item.thumb}}' style='width:200px;background:#e2e2e2;margin:0;padding:0;margin-left:-8px;border:0'/>" data-toggle="tooltip">
	28	+ <img ng-src="{{item.thumb}}"/>
	29	+ </div>
	30	+ <div class="clearfix"></div>
	31	+ <div class="footer-bar">
	32	+ <div class="pull-left footer-pagination" ng-click="currentRecommendPage=currentRecommendPage-1" ng-show="currentRecommendPage > 1">< Back</div>
	33	+ {{currentRecommendPage}}/{{recommendList.length/perRecommendPage \| number:0}}
	34	+ <div class="pull-right footer-pagination" ng-click="currentRecommendPage=currentRecommendPage+1" ng-show="currentRecommendPage < (recommendList.length/perRecommendPage\|number:0)">Next ></div>
	35	+ </div>
	36	+ </div>
	37	+ </div>
26	38	</div>
27	39	</div>
28	40	</div>