TRUONG / T-Shats Frontend

1	define(['app'], function (app) {	1	define(['app'], function (app) {
2	'use strict';	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	$scope.showIllustration = function(tab){	38	$scope.showIllustration = function(tab){
5	$scope.isShowLeftPanel = tab;	39	$scope.isShowLeftPanel = tab;
6	switch (tab){	40	switch (tab){
7	case 'illustration': {	41	case 'illustration': {
8	$scope.IllustrationList = $illustration.getAll();	42	$scope.IllustrationList = $illustration.getAll();
9	$scope.illustrationSelectConfig = {	43	$scope.illustrationSelectConfig = {
10	allowClear:true	44	allowClear:true
11	}	45	};
12	break;	46	break;
13	}	47	}
14	// case: ''	48	// case: ''
15	}	49	}
16	}	50	};
17		51
18	$scope.modalTShirtDesign = function() {	52	$scope.modalTShirtDesign = function() {
19	// console.log($('#tshirt-design').length);
20	$('#tshirt-design').modal(	53	$('#tshirt-design').modal(
21	{	54	{
22	backdrop: 'static',	55	backdrop: 'static',
23	keyboard: false	56	keyboard: false
24	}	57	}
25	);	58	);
26	$scope.showIllustration('default');	59	$scope.showIllustration('default');
27	};	60	};
28	$scope.modalClose = function(){	61	$scope.modalClose = function(){
29	$('#tshirt-design').modal('hide');	62	$('#tshirt-design').modal('hide');
30	}	63	};
		64
		65
31	});	66	});
32	});	67	});

app/scripts/controllers/tshirtdesign.js

Diff comments View file @ 422e783

 define(['app'], function (app) {
 	'use strict';
-	app.controller('TshirtdesignCtrl', function ($scope, $illustration) {
+	app.controller('TshirtdesignCtrl', function ($scope, $rootScope, $illustration) {
-		//$scope.IllustrationList = $illustration.getAll();
 		var canvas = new fabric.Canvas('main-design-container');
 		fabric.Object.prototype.transparentCorners = false;
 		canvas.on('after:render', function() {
 		});
 		canvas.on({
 			'object:moving': onIllustrationChange,
 			'object:scaling': onIllustrationChange,
 			'object:rotating': onIllustrationChange,
 			'object:selected': onllustrationSelected,
 		});
 		function onIllustrationChange(options) {
 			// options.target.setCoords();
 			// canvas.forEachObject(function(obj) {
 			// if (obj === options.target) return;
 			// 	obj.setOpacity(options.target.intersectsWithObject(obj) ? 0.5 : 1);
 			// });
 		}
 		$scope.currentObject = null;
 		function onllustrationSelected(options){
 			$scope.currentObject = canvas.getActiveObject();
 			console.log(canvas.getActiveObject());
 		}
 		// Illustration process
 		$scope.changeIllustrationCategory = function(currentIllustration){
 			$scope.currentIllustrationCate = $illustration.getList(currentIllustration);
 			console.log($scope.currentIllustrationCate);
-		}
+		};
 		$scope.insertSvg = function(item){
 			fabric.loadSVGFromURL(item.path, function(objects, options) {
 				var shape = fabric.util.groupSVGElements(objects, options);
 				// shape.setFill('green');
 				canvas.add(shape.scale(0.6));
 				shape.set({ left: 150, top: 200 }).setCoords();
 				canvas.renderAll();
 				canvas.setActiveObject(shape);
 			});
-		}
+		};
 		// color pattern
 		$scope.changeColorPattern = function(color){
 			canvas.getActiveObject().set("fill", color);
             canvas.renderAll();
-		}
+		};
 		$scope.listColorPatterns = [
 			'#000000',
 			'#ffff00',
 			'#ff6600',
 			'#ff0000',
 			'#ff6262',
 			'#ffa19c',
 			'#ff9933',
 			'#c45d01',
 			'#5d2b03',
 			'#ffffcc',
 			'#000000',
 			'#ffff00',
 			'#ff6600',
 			'#ff0000',
 			'#ff6262',
 			'#ffa19c',
 			'#ff9933',
 			'#c45d01',
 			'#5d2b03',
 			'#ffffcc',
 			'#000000',
 			'#ffff00',
 			'#ff6600',
 			'#ff0000',
 			'#ff6262',
 			'#ffa19c',
 			'#ff9933',
 			'#c45d01',
 			'#5d2b03',
 			'#ffffcc',
 			'#ffffcc'
-		]
+		];
 	});

app/scripts/routes.js

Diff comments View file @ 422e783

 define([], function(){
     'use strict';
     return {
         defaultRoutePaths: '/',
         routes: {
             /* add more routes */
             '/': {
                 templateUrl: '/views/main.html',
                 dependencies: [
                     '/scripts/controllers/main.js',
                     '/scripts/controllers/tshirtdesign.js',
-                    '/scripts/services/illustration.js'
+                    '/scripts/services/illustration.js',
+                    '/scripts/services/tshirt.js'
                 ]
             }
         }
     };
 });

app/scripts/services/tshirt.js

Diff comments View file @ 422e783

File was created	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	});
	63

app/styles/main.css

Diff comments View file @ 422e783

 /* Space out content a bit */
 @import "../fonts/font.css";
 body {
   font-family: 'Hiragino Kaku Gothic Pro', sans-serif;
 }
 .padding-right-0{
   padding-right: 0!important;
 }
 .padding-left-0{
   padding-left: 0!important;
 }
 button.red{
   color: #ffffff;
   background-color: #ff0000;
   border: 1px solid #ff0000;
 }
 button.white{
   border: 1px solid #ff8080;
   color: #ff8080;
   background-color: #ffffff;
 }
 button.brown{
   background-color: #666666;
   border: 1px solid #666666;
   color: #ffffff;
   border-radius: 5px;
 }
 button.black{
   border: 1px solid #c9c9c9;
   background-color: #343434;
   color: #ffffff;
   padding: 1px 6px;
 }
 #tshirt-container{
   border-left: 1px solid #dcdcdc;
   border-right: 1px solid #dcdcdc;
 }
 /*HEADER*/
 header{
   border-bottom: 1px solid #dcdcdc;
 }
 header .logo{
   color: #ed1d24;
   font-size: 30px;
   text-transform: uppercase;
   font-weight: bold;
 }
 header .logo img{
   width: 60px;
 }
 /*NAVIGATION*/
 nav{
   border-bottom: 1px solid #dcdcdc;
   padding: 10px 0;
 }
 nav h2{
   font-size: 27px;
   margin: 0 0;
 }
 nav ul{
   list-style: none;
   padding-left: 0;
   margin-bottom: 0;
 }
 nav ul li{
   margin-left: 2px;
   float: left;
   padding: 6px 12px;
   background-color: #999999;
   position: relative;
 }
 nav ul li i.fa{
   position: absolute;
   color: #ffffff;
   font-size: 18px;
   right: -4px;
   top: 50%;
   transform: translateX(-50%) translateY(-50%);
   -webkit-transform: translateX(-50%) translateY(-50%);
 }
 nav ul li a{
   color: #ffffff;
 }
 nav ul li:hover a{
   text-decoration: none;
   color: #ffffff;
 }
 nav ul li.action{
   color: #ffffff;
   background-color: #ed1d24;
 }
 /*ASIDE*/
 aside{
   margin: 10px 0;
 }
 aside .break-down{
   padding: 0 0;
 }
 aside .break-down i.fa{
   font-size: 35px;
   color: #ff0000;
 }
 aside .break-line{
   height: 10px;
 }
 aside .break-line hr{
   border-top: 1px dotted #cccccc;
 }
 aside .step{
   margin: 0 0;
 }
 aside .step .title{
   font-size: 15px;
   line-height: 16px;
   font-weight: bold;
   margin-bottom: 3px;
 }
 aside .step .title-notice{
   font-size: 13px;
   line-height: 16px;
   margin-bottom: 3px;
 }
 aside .step .title-notice .require{
   font-size: 10px;
 }
 aside .step .step-box{
   border: 2px solid #dcdcdc;
   font-size: 12px;
 }
 /*Step 1*/
 aside .step .step-box .tshirt-design{
   border: 1px solid #cccccc;
   background-color: #f5f5f5;
   margin: 10px 10px;
 }
 aside .step .step-box .tshirt-design:hover{
   border: 1px solid #ff0000;
 }
 aside .step .step-box .tshirt-design button:hover{
   background-color: #fa7b7b;
   border: 1px solid #fa7b7b;
 }
 aside .step .step-box .tshirt-design div{
   float: left;
 }
 aside .step .step-box .tshirt-design .icon{
   padding: 4px 4px;
   border-right: 1px solid #cccccc;
 }
 aside .step .step-box .tshirt-design .icon img{
   height: 50px;
 }
 aside .step .step-box .tshirt-design .name{
   padding: 10px 10px;
 }
 aside .step .step-box .tshirt-design .action{
   padding: 10px 10px;
   float: right;
 }
 aside .step .step-box .tshirt-design .action button{
   padding: 8px 10px;
 }
 /*Step 2*/
 aside .step .step-box .tshirt-color{
   padding: 6px 10px;
   position: relative;
 }
 aside .step .step-box .tshirt-color ul.choice-color{
   float: left;
   list-style: none;
   padding-left: 0;
   width: 100%;
   margin-bottom: 3px;
 }
 aside .step .step-box .tshirt-color ul.choice-color li{
   margin: 0 10px 0 0;
   border: 1px solid #cccccc;
   padding: 2px 2px;
   float: left;
   cursor: pointer;
 }
 aside .step .step-box .tshirt-color ul.choice-color li.action{
   border: 1px solid #ff0000;
 }
 aside .step .step-box .tshirt-color ul.choice-color li:hover{
   border: 1px solid #ff0000;
 }
 aside .step .step-box .tshirt-color ul.choice-color li div{
   height: 30px;
   width: 30px;
 }
 aside .step .step-box .tshirt-color ul.choice-color li.white div{
   background-color: #ece7e4;
 }
 aside .step .step-box .tshirt-color ul.choice-color li.blue div{
   background-color: #e7dfd0;
 }
 aside .step .step-box .tshirt-color .color-name{
   width: 100%;
   font-size: 10px;
 }
 aside .step .step-box .tshirt-color .view-more{
   position: absolute;
   bottom: 6px;
   right: 10px;
 }
 /*Step 3*/
 aside .step .step-box .tshirt-saveorder{
   padding: 10px 10px 6px 10px;
 }
 aside .step .step-box .tshirt-saveorder .action{
   width: 50%;
   float: left;
 }
 aside .step .step-box .tshirt-saveorder .action:first-child{
   padding-right: 5px;
 }
 aside .step .step-box .tshirt-saveorder .action:last-child{
   padding-left: 5px;
 }
 aside .step .step-box .tshirt-saveorder .action button{
   padding: 8px 10px;
 }
 aside .step .step-box .tshirt-saveorder .action button .text{
   float: left;
   width: 80%;
   text-align: center;
   padding-left: 10px;
   vertical-align: bottom;
 }
 aside .step .step-box .tshirt-saveorder .action button .arrow{
   float: left;
   width: 20%;
   height: 40px;
   position: relative;
 }
 aside .step .step-box .tshirt-saveorder .action button .arrow i.fa{
   position: absolute;
   top: 50%;
   right: -6px;
   transform: translateX(-50%) translateY(-50%);
   -webkit-transform: translateX(-50%) translateY(-50%);
 }
 aside .step .step-box .tshirt-saveorder .notice{
   padding: 5px 0 0 0;
 }
 /*Step 4*/
 aside .step .title-notice{
 }
 aside .step .step-box .change-design{
   padding: 4px 4px;
 }
 aside .step .step-box .change-design table{
 }
 aside .step .step-box .change-design table tr{
   border-bottom: 1px dotted #cccccc;
 }
 aside .step .step-box .change-design table tr:last-child{
   border-bottom: 0;
 }
 /*Step 5- finish*/
 aside .step .finish-design{
   padding: 20px 0;
 }
 aside .step .finish-design button{
   width: 100%;
   padding: 8px 10px;
 }
 /*DESIGN CONTENT*/
 #tshirt-content{
   position: relative;
 }
 #tshirt-content .switch-border-design{
   position: absolute;
   top: 5px;
   right: 10px;
   color: red;
   font-size: 11px;
 }
 #tshirt-content .tshirt-image{
   padding: 20px 0 0 0;
 }
 #tshirt-content .tshirt-choice{
 }
 #tshirt-content .tshirt-choice ul{
   list-style: none;
   padding-left: 0;
   display: table;
   margin: auto;
 }
 #tshirt-content .tshirt-choice ul li{
   float: left;
   margin: 10px 10px;
+  cursor: pointer;
 }
 #tshirt-content .tshirt-choice ul li .image{
   border: 1px solid #cccccc;
   padding: 3px 3px;
 }
 #tshirt-content .tshirt-choice ul li.focus{
 }
 #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;
 }
 #tshirt-design .modal-dialog{
   width: 75%;
   margin: 0 auto;
 }
 #tshirt-design .modal-dialog .modal-content{
   background-color: transparent;
   border-radius: 0;
   border: 0;
   -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important;
   box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important;
 }
 #tshirt-design .modal-dialog .modal-content .modal-header{
   padding: 0 0 10px 0;
   border-bottom: 0;
   border-shadow: none!important;
 }
 #tshirt-design .modal-dialog .modal-content .modal-body{
   background-color: #f5f5f5;
   padding: 0 0;
 }
 #tshirt-design header{
   border-bottom: 1px solid #cccccc;
   background-color: #dddddd;
 }
 #tshirt-design header ul.nav{
   padding-left: 0;
   list-style: none;
 }
 #tshirt-design header ul.nav li{
   float: left;
   padding: 8px 26px;
   border-right: 1px solid #cccccc;
   font-size: 14px;
   cursor: pointer;
 }
 #tshirt-design header ul.nav li:hover, #tshirt-design header ul.nav li.active{
   background-color: red;
   color: #ffffff;
 }
 #tshirt-design header ul.nav li:hover i.fa, #tshirt-design header ul.nav li.active i.fa{
   color: #ffffff;
 }
 #tshirt-design header ul.nav li i.fa{
   color: #fe070f;
   font-size: 20px;
   margin-right: 10px;
 }
 #tshirt-design header .action{
 }
 #tshirt-design header .action button{
   padding: 2px 10px;
   margin: 6px 10px;
 }
 #tshirt-design header .action button:hover{
   background-color: red;
   color: #ffffff;
 }
 /*Aside modal*/
 .aside{
 }
 .aside #choice-design-option{
   list-style: none;
   padding-left: 0;
   margin-top: 10px;
 }
 .aside #choice-design-option li{
   border: 1px solid #cdcdcd;
   position: relative;
   cursor: pointer;
 }
 .aside #choice-design-option li .hover{
   background-color: #fddad4;
   opacity: 0.6;
   position: absolute;
   width: 100%;
   height: 100%;
   display: none;
 }
 .aside #choice-design-option li:hover .hover{
   display: block;
 }
 .aside #choice-design-option li .title{
   background: url("../images/bg1.png") repeat #cdcdcd;
   padding: 3px 10px;
 }
 .aside #choice-design-option li .title i.fa{
   color: #000000;
 }
 .aside #choice-design-option li .content{
 }
 .aside #choice-design-option li .content i.fa{
   font-size: 30px;
   color: #fe070f;
   margin: 8px 0;
 }
 .aside #choice-design-option li .content .des{
   padding: 3px 10px 3px 0;
 }
 .aside #choice-illustration{
   list-style: none;
   padding-left: 0;
   margin-top: 10px;
 }
 .aside #choice-illustration li{
   border: 1px solid #cdcdcd;
   position: relative;
 }
 .aside #choice-illustration li .title{
   background: url("../images/bg1.png") repeat #cdcdcd;
   padding: 3px 10px;
 }
 .aside #choice-illustration li .content {
   padding: 10px 10px;
 }
 .aside #choice-illustration li .content select{
   width: 100%;
 }
 .aside #choice-illustration li .content .illustration-list {
   width: 100%;
   border: #bbb solid 1px;
   background: #FFF;
   margin-top: 5px;
 }
 .aside #choice-illustration li .content .illustration-list .illstration-item{
   height: 65px;
   overflow: hidden;
   float: left;
   margin-left: 5px;
 }
 .aside #choice-illustration li .content .illustration-list .illstration-item:hover {
   outline: 2px solid #ed1d24;
 }
 .aside #choice-illustration li .content .illustration-list .illstration-item img {
   width: 62px;
   cursor: pointer;
 }
 .aside #choice-illustration li .content .color-patterns {
   width: 100%;
   border: #bbb solid 1px;
   background: #FFF;
   margin-top: 5px;
 }
 .aside #choice-illustration li .content .color-patterns .color-pattern-item{
   height: 20px;
   float: left;
   margin-left: 4px;
   margin-top: 2px;
   width: 20px;
   cursor: pointer;
   border: 1px solid #ddd;
 }
 .aside #choice-illustration li .content .color-patterns .color-pattern-item:hover {
   outline: 1px solid #ed1d24;
 }
 /*Design content*/
 .tshirt-design-container{
   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{
   border: 1px solid #ff0000;
   width: 100%;
   height: 620px;
 }
 .tshirt-design-container .agree-design{
   position: absolute;
   right: -16px;
   top: 40%;
 }
 .tshirt-design-container .trash-design{
   position: absolute;
   right: 5px;
   bottom: 0;
 }
 /*FOOTER*/
 footer{
   background-color: #333333;
 }
 footer ul.nav-footer{
   padding-left: 0;
   list-style: none;
 }
 footer ul.nav-footer li{
   float: left;
   padding: 3px 10px;
   border-right: 1px dotted #ffffff;
 }
 footer ul.nav-footer li a{
   color: #ffffff;
   font-size: 11px;
 }
 /* Customize container */
 @media (min-width: 768px) {
   .container {
     /*max-width: 730px;*/
   }
 }
 /* Responsive: Portrait tablets and up */
 @media screen and (min-width: 768px) {
   /* Remove the padding we set earlier */
 }

app/views/main.html

Diff comments View file @ 422e783

 <div ng-controller="MainCtrl" class="col-sm-10 col-sm-offset-1" id="tshirt-container">
   <div class="row">
     <header>
       <div class="logo">
         <img src="images/logo_mobile_world.png" alt="Logo Mobile World" />
         MOBILE WORLD
       </div>
     </header>
     <nav class="clearfix">
       <div class="col-sm-12">
         <h2 class="pull-left">加工箇所を選択してデザインしてください。</h2>
         <ul class="pull-right">
           <li><a href="#">商品に戻る</a><i class="fa fa-caret-left" aria-hidden="true"></i></li>
           <li><a href="#">加工方法に戻る</a><i class="fa fa-caret-left" aria-hidden="true"></i></li>
           <li class="action">デザインする</li>
         </ul>
       </div>
     </nav>
     <article class="clearfix">
         <aside class="col-sm-5">
           <div class="step">
             <div class="title">
               1. デザインを作る
             </div>
             <div class="step-box">
               <div class="tshirt-design clearfix">
                 <div class="icon">
                   <img src="images/t-shirt_icon/tshirt1.gif" alt="icon t-shirt" />
                 </div>
                 <div class="name">
                   背中背中 (28x22)
                 </div>
                 <div class="action">
                   <button class="red" ng-click="modalTShirtDesign()">
                     <i class="fa fa-caret-right" aria-hidden="true"></i> デザインを作る
                   </button>
                 </div>
               </div>
             </div>
           </div>
           <!--  BREAK DOWN-->
           <div class="text-center break-down">
             <img src="images/bg_step_arrow.gif" alt="arrow" />
           </div>
           <!-- STEP 2-->
           <div class="step">
             <div class="title">
               2.アイテムカラーを変更する
             </div>
             <div class="step-box clearfix">
               <div class="tshirt-color">
                 <ul class="choice-color clearfix">
-                  <li class="white action"><div></div></li>
+                  <li ng-repeat="(key,color) in tShirtColor" ng-click="choiceTShirtColor(key)" ng-class="key == tShirtColorKey ? 'action' : ''">
-                  <li class="blue"><div></div></li>
+                    <div ng-style="{'background-color' : color.code}"></div>
+                  </li>
                 </ul>
-                <div class="color-name">
+                <div class="color-name" ng-bind="tShirtColorName"></div>
-                  color: 00 WHITE
-                </div>
                 <div class="view-more">
                   在庫確認 <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
                 </div>
               </div>
             </div>
           </div>
           <!--  BREAK DOWN-->
           <div class="text-center break-down">
             <img src="images/bg_step_arrow.gif" alt="arrow" />
           </div>
           <!-- STEP 3-->
           <div class="step">
             <div class="step-box clearfix">
               <div class="tshirt-saveorder">
                 <div class="clearfix">
                   <div class="action">
                     <button class="white">
                       <div class="text">
                         このデザインを保存する
                       </div>
                       <div class="arrow">
                         <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
                       </div>
                     </button>
                   </div>
                   <div class="action">
                     <button class="red">
                       <div class="text">
                         このデザインで注文する
                       </div>
                       <div class="arrow clearfix">
                         <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
                       </div>
                     </button>
                   </div>
                 </div>
                 <div class="notice">
                   デザインを保存するには、ログインしてください
                 </div>
               </div>
             </div>
             <!-- BREAL LINE-->
             <div class="text-center break-line">
               <hr />
             </div>
             <!-- STEP 4-->
             <div class="step">
               <div class="title-notice">
                 商品・デザインの変更はこちら <span class="require">作業中のデザインは破棄されます</span>
               </div>
               <div class="step-box">
                 <div class="change-design">
                   <table>
                     <tr>
                       <td class="text-center">商品</td>
                       <td>MENドライカノコポロシャツ・ポケツキ半袖（ホワイト）</td>
                       <td class="text-right">
                         <button class="brown"><i class="fa fa-caret-right" aria-hidden="true"></i> 変更</button>
                       </td>
                     </tr>
                     <tr>
                       <td width="10%" class="text-center">加工方法</td>
                       <td width="70%">シルク：胸中央 (27×27)</td>
                       <td width="20%" class="text-right">
                         <button class="brown"><i class="fa fa-caret-right" aria-hidden="true"></i> 変更</button>
                       </td>
                     </tr>
                   </table>
                 </div>
               </div>
             </div>
             <!-- STEP 5- finish-->
             <div class="step">
               <div class="finish-design">
                 <button class="white">
                   自分で保存したデザインを呼び出す <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
                 </button>
               </div>
             </div>
           </div>
         </aside>
         <section id="tshirt-content" class="col-sm-7 text-center">
           <div class="switch-border-design">
             <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">
+                <div class="image" ng-click="choiceTShirtBackFront('front')">
-                  <img src="images/t-shirt_icon/tshirt1-front.png" alt="" />
+                  <img ng-src="{{ tShirtImgFront }}" alt="" />
                 </div>
               </li>
-              <li class="back">
+              <li ng-class="'back' === tShirtChoiceBackFrontKey ? 'focus' : ''">
                 <div>後</div>
-                <div class="image">
+                <div class="image"  ng-click="choiceTShirtBackFront('back')">
-                  <img src="images/t-shirt_icon/tshirt1-back.png" alt="" />
+                  <img ng-src="{{ tShirtImgBack }}" alt="" />
                 </div>
               </li>
             </ul>
           </div>
         </section>
     </article>
     <footer class="clearfix">
       <ul class="nav-footer">
         <li><a href="#">店舗検索</a></li>
         <li><a href="#">お客様窓口</a></li>
         <li><a href="#">企業情報</a></li>
         <li><a href="#">採用情報</a></li>
         <li><a href="#">プライバシーポリシー</a></li>
       </ul>
     </footer>
     <!--MODAL CONTENT-->
     <div ng-include="'views/tshirt-design.html'"></div>
   </div>
 </div>

app/views/tshirt-design.html

Diff comments View file @ 422e783

1	<!-- Modal -->	1	<!-- Modal -->
2	<div class="modal fade" id="tshirt-design" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" ng-controller="TshirtdesignCtrl">	2	<div class="modal fade" id="tshirt-design" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" ng-controller="TshirtdesignCtrl">
3		3
4	<div class="modal-dialog" role="document">	4	<div class="modal-dialog" role="document">
5	<div class="modal-content">	5	<div class="modal-content">
6	<div class="modal-header">	6	<div class="modal-header">
7	<button class="black" ng-click="modalClose()"><i class="fa fa-times" aria-hidden="true"></i> キャンセル</button>	7	<button class="black" ng-click="modalClose()"><i class="fa fa-times" aria-hidden="true"></i> キャンセル</button>
8	<button class="black"> <i class="fa fa-angle-right" aria-hidden="true"></i> はじめての方へ</button>	8	<button class="black"> <i class="fa fa-angle-right" aria-hidden="true"></i> はじめての方へ</button>
9	</div>	9	</div>
10	<div class="modal-body">	10	<div class="modal-body">
11	<header class="clearfix">	11	<header class="clearfix">
12	<ul class="nav pull-left">	12	<ul class="nav pull-left">
13	<li ng-class="{'active': isShowLeftPanel=='default'}" ng-click="showIllustration('default')">	13	<li ng-class="{'active': isShowLeftPanel=='default'}" ng-click="showIllustration('default')">
14	<i class="fa fa-jpy" aria-hidden="true"></i> 文字	14	<i class="fa fa-jpy" aria-hidden="true"></i> 文字
15	</li>	15	</li>
16	<li ng-class="{'active': isShowLeftPanel=='illustration'}" ng-click="showIllustration('illustration')">	16	<li ng-class="{'active': isShowLeftPanel=='illustration'}" ng-click="showIllustration('illustration')">
17	<i class="fa fa-btc" aria-hidden="true"></i> イラスト・イメージ	17	<i class="fa fa-btc" aria-hidden="true"></i> イラスト・イメージ
18	</li>	18	</li>
19	<li>	19	<li>
20	<i class="fa fa-money" aria-hidden="true"></i> 自分の画像・写真	20	<i class="fa fa-money" aria-hidden="true"></i> 自分の画像・写真
21	</li>	21	</li>
22	<li>	22	<li>
23	<i class="fa fa-minus-circle" aria-hidden="true"></i> 全消去	23	<i class="fa fa-minus-circle" aria-hidden="true"></i> 全消去
24	</li>	24	</li>
25	</ul>	25	</ul>
26	<div class="action pull-right">	26	<div class="action pull-right">
27	<button class="white">	27	<button class="white">
28	アルバムを開く	28	アルバムを開く
29	</button>	29	</button>
30	<button class="white">	30	<button class="white">
31	アルバムに入れる	31	アルバムに入れる
32	</button>	32	</button>
33	</div>	33	</div>
34	</header>	34	</header>
35	<section class="tshirt-design-container clearfix">	35	<section class="tshirt-design-container clearfix">
36	<div class="aside col-xs-4">	36	<div class="aside col-xs-4">
37	<ul id="choice-design-option" ng-show="isShowLeftPanel=='default'">	37	<ul id="choice-design-option" ng-show="isShowLeftPanel=='default'">
38	<li>	38	<li>
39	<div class="hover"></div>	39	<div class="hover"></div>
40	<div class="title">	40	<div class="title">
41	<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>	41	<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
42	文字を追加	42	文字を追加
43	</div>	43	</div>
44	<div class="content clearfix">	44	<div class="content clearfix">
45	<div class="col-xs-2 text-center">	45	<div class="col-xs-2 text-center">
46	<i class="fa fa-jpy" aria-hidden="true"></i>	46	<i class="fa fa-jpy" aria-hidden="true"></i>
47	</div>	47	</div>
48	<div class="col-xs-10 des padding-left-0">	48	<div class="col-xs-10 des padding-left-0">
49	書体を選んでお好きな文字を入力できます	49	書体を選んでお好きな文字を入力できます
50	</div>	50	</div>
51	</div>	51	</div>
52	</li>	52	</li>
53	<li>	53	<li>
54	<div class="hover"></div>	54	<div class="hover"></div>
55	<div class="title">	55	<div class="title">
56	<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>	56	<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
57	イラストやイメージを追加	57	イラストやイメージを追加
58	</div>	58	</div>
59	<div class="content clearfix">	59	<div class="content clearfix">
60	<div class="col-xs-2 text-center">	60	<div class="col-xs-2 text-center">
61	<i class="fa fa-btc" aria-hidden="true"></i>	61	<i class="fa fa-btc" aria-hidden="true"></i>
62	</div>	62	</div>
63	<div class="col-xs-10 des padding-left-0">	63	<div class="col-xs-10 des padding-left-0">
64	自由にお使いいただけるデザイン画像をご用意しました	64	自由にお使いいただけるデザイン画像をご用意しました
65	</div>	65	</div>
66	</div>	66	</div>
67	</li>	67	</li>
68	<li>	68	<li>
69	<div class="hover"></div>	69	<div class="hover"></div>
70	<div class="title">	70	<div class="title">
71	<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>	71	<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
72	自分の画像・写真を追加	72	自分の画像・写真を追加
73	</div>	73	</div>
74	<div class="content clearfix">	74	<div class="content clearfix">
75	<div class="col-xs-2 text-center">	75	<div class="col-xs-2 text-center">
76	<i class="fa fa-jpy" aria-hidden="true"></i>	76	<i class="fa fa-jpy" aria-hidden="true"></i>
77	</div>	77	</div>
78	<div class="col-xs-10 des padding-left-0">	78	<div class="col-xs-10 des padding-left-0">
79	ご自分で用意した画像をアップロードして使えます	79	ご自分で用意した画像をアップロードして使えます
80	</div>	80	</div>
81	</div>	81	</div>
82	</li>	82	</li>
83	<li>	83	<li>
84	<div class="hover"></div>	84	<div class="hover"></div>
85	<div class="title">	85	<div class="title">
86	<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>	86	<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
87	おすすめデザインを使う	87	おすすめデザインを使う
88	</div>	88	</div>
89	<div class="content clearfix">	89	<div class="content clearfix">
90	<div class="col-xs-2 text-center">	90	<div class="col-xs-2 text-center">
91	<i class="fa fa-jpy" aria-hidden="true"></i>	91	<i class="fa fa-jpy" aria-hidden="true"></i>
92	</div>	92	</div>
93	<div class="col-xs-10 des padding-left-0">	93	<div class="col-xs-10 des padding-left-0">
94	おすすめデザインデータをご自由にカスタマイズしてお使いください	94	おすすめデザインデータをご自由にカスタマイズしてお使いください
95	</div>	95	</div>
96	</div>	96	</div>
97	</li>	97	</li>
98	</ul>	98	</ul>
99	<ul id="choice-illustration" ng-show="isShowLeftPanel=='illustration'">	99	<ul id="choice-illustration" ng-show="isShowLeftPanel=='illustration'">
100	<li>	100	<li>
101	<div class="hover"></div>	101	<div class="hover"></div>
102	<div class="title">	102	<div class="title">
103	<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>	103	<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
104	items	104	items
105	</div>	105	</div>
106	<div class="content clearfix">	106	<div class="content clearfix">
107	<select id="illustration-select-category" ui-select2="illustrationSelectConfig" ng-model="currentIllustration" ng-change="changeIllustrationCategory(currentIllustration)" data-placeholder="Choose category" style="width: 100%">	107	<select id="illustration-select-category" ui-select2="illustrationSelectConfig" ng-model="currentIllustration" ng-change="changeIllustrationCategory(currentIllustration)" data-placeholder="Choose category" style="width: 100%">
108	<option ng-repeat="(key,cate) in IllustrationList" value="{{key}}">{{cate.name}}</option>	108	<option ng-repeat="(key,cate) in IllustrationList" value="{{key}}">{{cate.name}}</option>
109	</select>	109	</select>
110	<div class="illustration-list">	110	<div class="illustration-list">
111	<div class="illstration-item" ng-repeat="item in currentIllustrationCate.list" ng-click="insertSvg(item)">	111	<div class="illstration-item" ng-repeat="item in currentIllustrationCate.list" ng-click="insertSvg(item)">
112	<img ng-src="{{item.path}}"/>	112	<img ng-src="{{item.path}}"/>
113	</div>	113	</div>
114	<div class="clearfix"></div>	114	<div class="clearfix"></div>
115	</div>	115	</div>
116	</div>	116	</div>
117	</li>	117	</li>
118	<li>	118	<li>
119	<div class="hover"></div>	119	<div class="hover"></div>
120	<div class="title">	120	<div class="title">
121	<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>	121	<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
122	Color to fill	122	Color to fill
123	</div>	123	</div>
124	<div class="content clearfix">	124	<div class="content clearfix">
125	<div class="color-patterns">	125	<div class="color-patterns">
126	<div class="color-pattern-item" ng-repeat="color in listColorPatterns track by $index" ng-click="changeColorPattern(color)" ng-style="{'background-color': color}">	126	<div class="color-pattern-item" ng-repeat="color in listColorPatterns track by $index" ng-click="changeColorPattern(color)" ng-style="{'background-color': color}">
127	</div>	127	</div>
128	<div class="clearfix"></div>	128	<div class="clearfix"></div>
129	</div>	129	</div>
130	</div>	130	</div>
131	</li>	131	</li>
132	<li>	132	<li>
133	<div class="hover"></div>	133	<div class="hover"></div>
134	<div class="title">	134	<div class="title">
135	<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>	135	<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
136	Layer option	136	Layer option
137	</div>	137	</div>
138	<div class="content clearfix">	138	<div class="content clearfix">
139		139
140	</div>	140	</div>
141	</li>	141	</li>
142	</ul>	142	</ul>
143	</div>	143	</div>
144	<div class="design-content col-xs-8">	144	<div class="design-content col-xs-8">
145	<div class="content">	145	<div class="content" ng-style="{'background-color' : tShirtColorCode}">
146	<canvas id="main-design-container" width="400px" height="620px" class="selection-design lower-canvas">	146	<canvas id="main-design-container" width="510px" height="620px" class="selection-design lower-canvas">
147		147
148	</canvas>	148	</canvas>
149	</div>	149	</div>
150	<div class="agree-design">	150	<div class="agree-design">
151	<img src="images/agree-design.png" alt="agree design" />	151	<img src="images/agree-design.png" alt="agree design" />
152	</div>	152	</div>
153	<div class="trash-design">	153	<div class="trash-design">
154	<img src="images/trash.png" alt="trash design" />	154	<img src="images/trash.png" alt="trash design" />
155	</div>	155	</div>
156	</div>	156	</div>
157	</section>	157	</section>
158	</div>	158	</div>
159	</div>	159	</div>
160	</div>	160	</div>
161	</div>	161	</div>