From 53828b4e78e6de96071f48664208286f0d9ee070 Mon Sep 17 00:00:00 2001
From: root <mr.truongld@gmail.com>
Date: Sun, 27 Nov 2016 16:01:35 +0000
Subject: [PATCH] process save/restore design

---
 app/index.html                          |  2 +-
 app/scripts/controllers/tshirtdesign.js | 42 +++++++++++++++++++++++------
 app/scripts/services/favorite.js        |  2 +-
 app/styles/main.css                     | 48 ++++++++++++++++++++++++++++-----
 app/views/design_part/tshirt-saved.html | 24 ++++++++++++-----
 5 files changed, 96 insertions(+), 22 deletions(-)

diff --git a/app/index.html b/app/index.html
index 055c0c2..1544a91 100644
--- a/app/index.html
+++ b/app/index.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,
         };
diff --git a/app/scripts/controllers/tshirtdesign.js b/app/scripts/controllers/tshirtdesign.js
index 1c93605..510ebd3 100644
--- a/app/scripts/controllers/tshirtdesign.js
+++ b/app/scripts/controllers/tshirtdesign.js
@@ -2,6 +2,9 @@ define(['app'], function (app) {
 	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 @@ define(['app'], function (app) {
 				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 @@ define(['app'], function (app) {
 			$('.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 @@ define(['app'], function (app) {
 		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 @@ define(['app'], function (app) {
 			// 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 @@ define(['app'], function (app) {
 			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 @@ define(['app'], function (app) {
 		}
 		
 		$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 @@ define(['app'], function (app) {
 		}
 		
 		$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 @@ define(['app'], function (app) {
 			},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));
 		}
 	});
 });
diff --git a/app/scripts/services/favorite.js b/app/scripts/services/favorite.js
index bda68da..2988a44 100644
--- a/app/scripts/services/favorite.js
+++ b/app/scripts/services/favorite.js
@@ -1,7 +1,7 @@
 define(['app'], function (app) {
     'use strict';
 
-    app.factory('$favorite', function ($http, $rootScope) {
+    app.factory('$favorite', function ($http, $rootScope, $window) {
         var DATA = [];
 
         return {
diff --git a/app/styles/main.css b/app/styles/main.css
index 8edff6b..f6a4fb4 100644
--- a/app/styles/main.css
+++ b/app/styles/main.css
@@ -613,7 +613,7 @@ aside .step .finish-design button{
   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 @@ aside .step .finish-design button{
     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 @@ aside .step .finish-design button{
   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 @@ footer ul.nav-footer li a{
 #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,4 +860,39 @@ footer ul.nav-footer li a{
   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;
 }
\ No newline at end of file
diff --git a/app/views/design_part/tshirt-saved.html b/app/views/design_part/tshirt-saved.html
index d9b69ee..3f3bee0 100644
--- a/app/views/design_part/tshirt-saved.html
+++ b/app/views/design_part/tshirt-saved.html
@@ -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 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 role="tabpanel" class="tab-pane" id="content-saved-recommend">...</div>
                 </div>
             </div>
         </div>
-- 
1.8.5.3