Change color t-shirt

DANG
1 parent b7e6d581d2
Showing 13 changed files with 131 additions and 32 deletions Side-by-side Diff
app/images/t-shirt/1/black/back.png
app/images/t-shirt/1/black/front.png
app/images/t-shirt/1/gray/back.png
app/images/t-shirt/1/gray/front.png
app/images/t-shirt/1/orange/back.png
app/images/t-shirt/1/orange/front.png
app/scripts/controllers/main.js
app/scripts/controllers/tshirtdesign.js
app/scripts/routes.js
app/scripts/services/tshirt.js
app/styles/main.css
app/views/main.html
app/views/tshirt-design.html
 define(['app'], function (app) {
 	'use strict';
-	app.controller('MainCtrl', function ($scope, $illustration) {
+	app.controller('MainCtrl', function ($rootScope, $scope, $illustration, $t_shirt) {
+		//Action T-Shirt choice color and Back or Front
+		$scope.tShirtColor = $t_shirt.getTShirtColor(0);
+		//Set color name default
+		var tShirtColorFirstKey = 0;
+		$scope.tShirtChoiceBackFrontKey = 'front';
+		$scope.tShirtColorKey = tShirtColorFirstKey;
+		$rootScope.tShirtColorCode = $scope.tShirtColor[tShirtColorFirstKey].code;
+		$scope.tShirtColorName = $scope.tShirtColor[tShirtColorFirstKey].name;
+		$scope.tShirtImgFront = $scope.tShirtColor[tShirtColorFirstKey].img.front;
+		$scope.tShirtImgBack = $scope.tShirtColor[tShirtColorFirstKey].img.back;
+		$scope.tShirtImg = $scope.tShirtImgFront;
+
+		$scope.choiceTShirtColor = function(key) {
+			$scope.tShirtColorKey = key;
+			$rootScope.tShirtColorCode = $scope.tShirtColor[key].code;
+			$scope.tShirtColorName = $scope.tShirtColor[key].name;
+			$scope.tShirtImgFront = $scope.tShirtColor[key].img.front;
+			$scope.tShirtImgBack = $scope.tShirtColor[key].img.back;
+			if($scope.tShirtChoiceBackFrontKey == 'front') {
+				$scope.tShirtImg = $scope.tShirtImgFront;
+			} else {
+				$scope.tShirtImg = $scope.tShirtImgBack;
+			}
+		};
+		$scope.choiceTShirtBackFront = function(choice) {
+			if(choice == 'front') {
+				$scope.tShirtImg = $scope.tShirtImgFront;
+			} else {
+				$scope.tShirtImg = $scope.tShirtImgBack;
+			}
+			$scope.tShirtChoiceBackFrontKey = choice;
+		};
+
+
 		$scope.showIllustration = function(tab){
 			$scope.isShowLeftPanel = tab;
 			switch (tab){
  
  
@@ -8,15 +42,14 @@
 					$scope.IllustrationList = $illustration.getAll();
 					$scope.illustrationSelectConfig = {
 						allowClear:true
-					}
+					};
 					break;
 				}
 				// case: ''
 			}
-		}
+		};
  
 		$scope.modalTShirtDesign = function() {
-			// console.log($('#tshirt-design').length);
 			$('#tshirt-design').modal(
 				{
 					backdrop: 'static',
@@ -27,7 +60,9 @@
 		};
 		$scope.modalClose = function(){
 			$('#tshirt-design').modal('hide');
-		}
+		};
+
+
 	});
 });
 define(['app'], function (app) {
 	'use strict';
  
-	app.controller('TshirtdesignCtrl', function ($scope, $illustration) {
-		//$scope.IllustrationList = $illustration.getAll();
+	app.controller('TshirtdesignCtrl', function ($scope, $rootScope, $illustration) {
  
 		var canvas = new fabric.Canvas('main-design-container');
 		fabric.Object.prototype.transparentCorners = false;
@@ -33,7 +32,7 @@
 		$scope.changeIllustrationCategory = function(currentIllustration){
 			$scope.currentIllustrationCate = $illustration.getList(currentIllustration);
 			console.log($scope.currentIllustrationCate);
-		}
+		};
  
 		$scope.insertSvg = function(item){
 			fabric.loadSVGFromURL(item.path, function(objects, options) {
  
@@ -44,13 +43,13 @@
 				canvas.renderAll();
 				canvas.setActiveObject(shape);
 			});
-		}
+		};
  
 		// color pattern
 		$scope.changeColorPattern = function(color){
 			canvas.getActiveObject().set("fill", color);
             canvas.renderAll();
-		}
+		};
 		$scope.listColorPatterns = [
 			'#000000',
 			'#ffff00',
@@ -62,7 +61,6 @@
 			'#c45d01',
 			'#5d2b03',
 			'#ffffcc',
-
 			'#000000',
 			'#ffff00',
 			'#ff6600',
@@ -73,7 +71,6 @@
 			'#c45d01',
 			'#5d2b03',
 			'#ffffcc',
-
 			'#000000',
 			'#ffff00',
 			'#ff6600',
  
@@ -84,9 +81,10 @@
 			'#c45d01',
 			'#5d2b03',
 			'#ffffcc',
-
 			'#ffffcc'
-		]
+		];
+
+
 	});
 });
@@ -9,7 +9,8 @@
                 dependencies: [
                     '/scripts/controllers/main.js',
                     '/scripts/controllers/tshirtdesign.js',
-                    '/scripts/services/illustration.js'
+                    '/scripts/services/illustration.js',
+                    '/scripts/services/tshirt.js'
                 ]
             }
         }
+define(['app'], function (app) {
+    'use strict';
+
+    app.factory('$t_shirt', function ($http, $rootScope) {
+        var DATA = [
+            {
+                info: {
+                    name: '',
+                    description: '',
+                    price: '',
+                    gender: '',
+                    image: ''
+                },
+                place_design: {},
+                color: [
+                    {
+                        name: 'color: 2E GRAY',
+                        code: '#d0d0cd',
+                        img: {
+                            front: 'images/t-shirt/1/gray/front.png',
+                            back: 'images/t-shirt/1/gray/back.png'
+                        },
+                    },
+                    {
+                        name: 'color: 00 BLACK',
+                        code: '#23282e',
+                        img: {
+                            front: 'images/t-shirt/1/black/front.png',
+                            back: 'images/t-shirt/1/black/back.png'
+                        },
+                    },
+                    {
+                        name: 'color: 3B ORANGE',
+                        code: '#e2583b',
+                        img: {
+                            front: 'images/t-shirt/1/orange/front.png',
+                            back: 'images/t-shirt/1/orange/back.png'
+                        },
+                    }
+                ]
+            }];
+
+        return {
+            getTShirtColor : function(key) {
+                if (typeof DATA[key] == 'undefined'){
+                    return [];
+                }
+                return DATA[key]['color'];
+            },
+
+            getAll: function(){
+                return DATA;
+            },
+            getList: function(category){
+                if (typeof DATA[category] == 'undefined'){
+                    return [];
+                }
+                return DATA[category];
+            }
+        };
+    });
+});
@@ -304,8 +304,8 @@
 }
 #tshirt-content .tshirt-choice ul li{
   float: left;
-
   margin: 10px 10px;
+  cursor: pointer;
 }
 #tshirt-content .tshirt-choice ul li .image{
   border: 1px solid #cccccc;
@@ -317,6 +317,10 @@
 #tshirt-content .tshirt-choice ul li.focus .image{
   border: 1px solid #ff0000;
 }
+#tshirt-content .tshirt-choice ul li .image img{
+  width: 50px;
+  height: auto;
+}
 /*MODAL Design*/
 #tshirt-design{
   background-color: #666666;
  
@@ -501,13 +505,13 @@
   position: relative;
 }
 .tshirt-design-container .design-content{
-  padding: 10px 50px 10px 25px;
+  padding: 10px 30px 10px 15px;
 }
 .tshirt-design-container .design-content .content{
   width: 100%;
   min-height: 650px;
   background-color: #f0efea;
-  padding: 40px 85px;
+  padding: 40px 40px;
   height: 100%;
 }
 .tshirt-design-container .design-content .content .selection-design{
@@ -52,12 +52,11 @@
             <div class="step-box clearfix">
               <div class="tshirt-color">
                 <ul class="choice-color clearfix">
-                  <li class="white action"><div></div></li>
-                  <li class="blue"><div></div></li>
+                  <li ng-repeat="(key,color) in tShirtColor" ng-click="choiceTShirtColor(key)" ng-class="key == tShirtColorKey ? 'action' : ''">
+                    <div ng-style="{'background-color' : color.code}"></div>
+                  </li>
                 </ul>
-                <div class="color-name">
-                  color: 00 WHITE
-                </div>
+                <div class="color-name" ng-bind="tShirtColorName"></div>
                 <div class="view-more">
                   在庫確認 <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
                 </div>
  
  
  
  
@@ -149,21 +148,21 @@
             <i class="fa fa-square-o" aria-hidden="true"></i> 枠線を消す
           </div>
           <div class="tshirt-image">
-            <img src="images/t-shirt/front.png" alt="" />
+            <img ng-src="{{ tShirtImg }}" alt="" />
           </div>
           <div class="tshirt-choice">
             <ul>
-              <li class="front focus">
+              <li ng-class="'front' === tShirtChoiceBackFrontKey ? 'focus' : ''">
                 <div>前</div>
-                <div class="image">
-                  <img src="images/t-shirt_icon/tshirt1-front.png" alt="" />
+                <div class="image" ng-click="choiceTShirtBackFront('front')">
+                  <img ng-src="{{ tShirtImgFront }}" alt="" />
                 </div>
  
               </li>
-              <li class="back">
+              <li ng-class="'back' === tShirtChoiceBackFrontKey ? 'focus' : ''">
                 <div>後</div>
-                <div class="image">
-                  <img src="images/t-shirt_icon/tshirt1-back.png" alt="" />
+                <div class="image"  ng-click="choiceTShirtBackFront('back')">
+                  <img ng-src="{{ tShirtImgBack }}" alt="" />
                 </div>
  
               </li>
@@ -142,8 +142,8 @@
                         </ul>
                     </div>
                     <div class="design-content col-xs-8">
-                        <div class="content">
-                            <canvas id="main-design-container" width="400px" height="620px" class="selection-design lower-canvas">
+                        <div class="content" ng-style="{'background-color' : tShirtColorCode}">
+                            <canvas id="main-design-container" width="510px" height="620px" class="selection-design lower-canvas">
  
                             </canvas>
                         </div>
1	1	define(['app'], function (app) {
2	2	'use strict';
3		- app.controller('MainCtrl', function ($scope, $illustration) {
	3	+ app.controller('MainCtrl', function ($rootScope, $scope, $illustration, $t_shirt) {
	4	+ //Action T-Shirt choice color and Back or Front
	5	+ $scope.tShirtColor = $t_shirt.getTShirtColor(0);
	6	+ //Set color name default
	7	+ var tShirtColorFirstKey = 0;
	8	+ $scope.tShirtChoiceBackFrontKey = 'front';
	9	+ $scope.tShirtColorKey = tShirtColorFirstKey;
	10	+ $rootScope.tShirtColorCode = $scope.tShirtColor[tShirtColorFirstKey].code;
	11	+ $scope.tShirtColorName = $scope.tShirtColor[tShirtColorFirstKey].name;
	12	+ $scope.tShirtImgFront = $scope.tShirtColor[tShirtColorFirstKey].img.front;
	13	+ $scope.tShirtImgBack = $scope.tShirtColor[tShirtColorFirstKey].img.back;
	14	+ $scope.tShirtImg = $scope.tShirtImgFront;
	15	+
	16	+ $scope.choiceTShirtColor = function(key) {
	17	+ $scope.tShirtColorKey = key;
	18	+ $rootScope.tShirtColorCode = $scope.tShirtColor[key].code;
	19	+ $scope.tShirtColorName = $scope.tShirtColor[key].name;
	20	+ $scope.tShirtImgFront = $scope.tShirtColor[key].img.front;
	21	+ $scope.tShirtImgBack = $scope.tShirtColor[key].img.back;
	22	+ if($scope.tShirtChoiceBackFrontKey == 'front') {
	23	+ $scope.tShirtImg = $scope.tShirtImgFront;
	24	+ } else {
	25	+ $scope.tShirtImg = $scope.tShirtImgBack;
	26	+ }
	27	+ };
	28	+ $scope.choiceTShirtBackFront = function(choice) {
	29	+ if(choice == 'front') {
	30	+ $scope.tShirtImg = $scope.tShirtImgFront;
	31	+ } else {
	32	+ $scope.tShirtImg = $scope.tShirtImgBack;
	33	+ }
	34	+ $scope.tShirtChoiceBackFrontKey = choice;
	35	+ };
	36	+
	37	+
4	38	$scope.showIllustration = function(tab){
5	39	$scope.isShowLeftPanel = tab;
6	40	switch (tab){
7	41
8	42
...	...	@@ -8,15 +42,14 @@
8	42	$scope.IllustrationList = $illustration.getAll();
9	43	$scope.illustrationSelectConfig = {
10	44	allowClear:true
11		- }
	45	+ };
12	46	break;
13	47	}
14	48	// case: ''
15	49	}
16		- }
	50	+ };
17	51
18	52	$scope.modalTShirtDesign = function() {
19		- // console.log($('#tshirt-design').length);
20	53	$('#tshirt-design').modal(
21	54	{
22	55	backdrop: 'static',
...	...	@@ -27,7 +60,9 @@
27	60	};
28	61	$scope.modalClose = function(){
29	62	$('#tshirt-design').modal('hide');
30		- }
	63	+ };
	64	+
	65	+
31	66	});
32	67	});
1	1	define(['app'], function (app) {
2	2	'use strict';
3	3
4		- app.controller('TshirtdesignCtrl', function ($scope, $illustration) {
5		- //$scope.IllustrationList = $illustration.getAll();
	4	+ app.controller('TshirtdesignCtrl', function ($scope, $rootScope, $illustration) {
6	5
7	6	var canvas = new fabric.Canvas('main-design-container');
8	7	fabric.Object.prototype.transparentCorners = false;
...	...	@@ -33,7 +32,7 @@
33	32	$scope.changeIllustrationCategory = function(currentIllustration){
34	33	$scope.currentIllustrationCate = $illustration.getList(currentIllustration);
35	34	console.log($scope.currentIllustrationCate);
36		- }
	35	+ };
37	36
38	37	$scope.insertSvg = function(item){
39	38	fabric.loadSVGFromURL(item.path, function(objects, options) {
40	39
...	...	@@ -44,13 +43,13 @@
44	43	canvas.renderAll();
45	44	canvas.setActiveObject(shape);
46	45	});
47		- }
	46	+ };
48	47
49	48	// color pattern
50	49	$scope.changeColorPattern = function(color){
51	50	canvas.getActiveObject().set("fill", color);
52	51	canvas.renderAll();
53		- }
	52	+ };
54	53	$scope.listColorPatterns = [
55	54	'#000000',
56	55	'#ffff00',
...	...	@@ -62,7 +61,6 @@
62	61	'#c45d01',
63	62	'#5d2b03',
64	63	'#ffffcc',
65		-
66	64	'#000000',
67	65	'#ffff00',
68	66	'#ff6600',
...	...	@@ -73,7 +71,6 @@
73	71	'#c45d01',
74	72	'#5d2b03',
75	73	'#ffffcc',
76		-
77	74	'#000000',
78	75	'#ffff00',
79	76	'#ff6600',
80	77
...	...	@@ -84,9 +81,10 @@
84	81	'#c45d01',
85	82	'#5d2b03',
86	83	'#ffffcc',
87		-
88	84	'#ffffcc'
89		- ]
	85	+ ];
	86	+
	87	+
90	88	});
91	89	});
...	...	@@ -9,7 +9,8 @@
9	9	dependencies: [
10	10	'/scripts/controllers/main.js',
11	11	'/scripts/controllers/tshirtdesign.js',
12		- '/scripts/services/illustration.js'
	12	+ '/scripts/services/illustration.js',
	13	+ '/scripts/services/tshirt.js'
13	14	]
14	15	}
15	16	}
	1	+define(['app'], function (app) {
	2	+ 'use strict';
	3	+
	4	+ app.factory('$t_shirt', function ($http, $rootScope) {
	5	+ var DATA = [
	6	+ {
	7	+ info: {
	8	+ name: '',
	9	+ description: '',
	10	+ price: '',
	11	+ gender: '',
	12	+ image: ''
	13	+ },
	14	+ place_design: {},
	15	+ color: [
	16	+ {
	17	+ name: 'color: 2E GRAY',
	18	+ code: '#d0d0cd',
	19	+ img: {
	20	+ front: 'images/t-shirt/1/gray/front.png',
	21	+ back: 'images/t-shirt/1/gray/back.png'
	22	+ },
	23	+ },
	24	+ {
	25	+ name: 'color: 00 BLACK',
	26	+ code: '#23282e',
	27	+ img: {
	28	+ front: 'images/t-shirt/1/black/front.png',
	29	+ back: 'images/t-shirt/1/black/back.png'
	30	+ },
	31	+ },
	32	+ {
	33	+ name: 'color: 3B ORANGE',
	34	+ code: '#e2583b',
	35	+ img: {
	36	+ front: 'images/t-shirt/1/orange/front.png',
	37	+ back: 'images/t-shirt/1/orange/back.png'
	38	+ },
	39	+ }
	40	+ ]
	41	+ }];
	42	+
	43	+ return {
	44	+ getTShirtColor : function(key) {
	45	+ if (typeof DATA[key] == 'undefined'){
	46	+ return [];
	47	+ }
	48	+ return DATA[key]['color'];
	49	+ },
	50	+
	51	+ getAll: function(){
	52	+ return DATA;
	53	+ },
	54	+ getList: function(category){
	55	+ if (typeof DATA[category] == 'undefined'){
	56	+ return [];
	57	+ }
	58	+ return DATA[category];
	59	+ }
	60	+ };
	61	+ });
	62	+});
...	...	@@ -304,8 +304,8 @@
304	304	}
305	305	#tshirt-content .tshirt-choice ul li{
306	306	float: left;
307		-
308	307	margin: 10px 10px;
	308	+ cursor: pointer;
309	309	}
310	310	#tshirt-content .tshirt-choice ul li .image{
311	311	border: 1px solid #cccccc;
...	...	@@ -317,6 +317,10 @@
317	317	#tshirt-content .tshirt-choice ul li.focus .image{
318	318	border: 1px solid #ff0000;
319	319	}
	320	+#tshirt-content .tshirt-choice ul li .image img{
	321	+ width: 50px;
	322	+ height: auto;
	323	+}
320	324	/MODAL Design/
321	325	#tshirt-design{
322	326	background-color: #666666;
323	327
...	...	@@ -501,13 +505,13 @@
501	505	position: relative;
502	506	}
503	507	.tshirt-design-container .design-content{
504		- padding: 10px 50px 10px 25px;
	508	+ padding: 10px 30px 10px 15px;
505	509	}
506	510	.tshirt-design-container .design-content .content{
507	511	width: 100%;
508	512	min-height: 650px;
509	513	background-color: #f0efea;
510		- padding: 40px 85px;
	514	+ padding: 40px 40px;
511	515	height: 100%;
512	516	}
513	517	.tshirt-design-container .design-content .content .selection-design{
...	...	@@ -52,12 +52,11 @@
52	52	<div class="step-box clearfix">
53	53	<div class="tshirt-color">
54	54	<ul class="choice-color clearfix">
55		- <li class="white action"><div></div></li>
56		- <li class="blue"><div></div></li>
	55	+ <li ng-repeat="(key,color) in tShirtColor" ng-click="choiceTShirtColor(key)" ng-class="key == tShirtColorKey ? 'action' : ''">
	56	+ <div ng-style="{'background-color' : color.code}"></div>
	57	+ </li>
57	58	</ul>
58		- <div class="color-name">
59		- color: 00 WHITE
60		- </div>
	59	+ <div class="color-name" ng-bind="tShirtColorName"></div>
61	60	<div class="view-more">
62	61	在庫確認 <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
63	62	</div>
64	63
65	64
66	65
67	66
...	...	@@ -149,21 +148,21 @@
149	148	<i class="fa fa-square-o" aria-hidden="true"></i> 枠線を消す
150	149	</div>
151	150	<div class="tshirt-image">
152		- <img src="images/t-shirt/front.png" alt="" />
	151	+ <img ng-src="{{ tShirtImg }}" alt="" />
153	152	</div>
154	153	<div class="tshirt-choice">
155	154	<ul>
156		- <li class="front focus">
	155	+ <li ng-class="'front' === tShirtChoiceBackFrontKey ? 'focus' : ''">
157	156	<div>前</div>
158		- <div class="image">
159		- <img src="images/t-shirt_icon/tshirt1-front.png" alt="" />
	157	+ <div class="image" ng-click="choiceTShirtBackFront('front')">
	158	+ <img ng-src="{{ tShirtImgFront }}" alt="" />
160	159	</div>
161	160
162	161	</li>
163		- <li class="back">
	162	+ <li ng-class="'back' === tShirtChoiceBackFrontKey ? 'focus' : ''">
164	163	<div>後</div>
165		- <div class="image">
166		- <img src="images/t-shirt_icon/tshirt1-back.png" alt="" />
	164	+ <div class="image" ng-click="choiceTShirtBackFront('back')">
	165	+ <img ng-src="{{ tShirtImgBack }}" alt="" />
167	166	</div>
168	167
169	168	</li>
...	...	@@ -142,8 +142,8 @@
142	142	</ul>
143	143	</div>
144	144	<div class="design-content col-xs-8">
145		- <div class="content">
146		- <canvas id="main-design-container" width="400px" height="620px" class="selection-design lower-canvas">
	145	+ <div class="content" ng-style="{'background-color' : tShirtColorCode}">
	146	+ <canvas id="main-design-container" width="510px" height="620px" class="selection-design lower-canvas">
147	147
148	148	</canvas>
149	149	</div>