ngohungcuong.windy@gmail.com / T-Shats Frontend

Download as
Browse Code ยป

Commit 7e14f17860926ffe490fd6ac7207c31dbaf8619d

Authored by Dang YoungWorld
1 parent 0136530e3c
Exists in master and in 1 other branch develop

Fix reponsive

Showing 7 changed files with 33 additions and 47 deletions Inline Diff

app/scripts/controllers/main.js
Diff comments   View file @ 7e14f17
1 define(['app'], function (app) { 1 define(['app'], function (app) {
2 'use strict'; 2 'use strict';
3 app.controller('MainCtrl', function ($rootScope, $scope, $timeout, $illustration, $t_shirt, $routeParams) { 3 app.controller('MainCtrl', function ($rootScope, $scope, $timeout, $illustration, $t_shirt, $routeParams) {
4 //Define and init var 4 //Define and init var
5 $rootScope.API_URL = 'http://domain.com'; 5 $rootScope.API_URL = 'http://domain.com';
6 $scope.designFrameView = 'views/tshirt-design.html?ver='+VERSION; 6 $scope.designFrameView = 'views/tshirt-design.html?ver='+VERSION;
7 $scope.designPartIllustration = 'views/design_part/illustration.html?ver='+VERSION; 7 $scope.designPartIllustration = 'views/design_part/illustration.html?ver='+VERSION;
8 $scope.designPartImage = 'views/design_part/image.html?ver='+VERSION; 8 $scope.designPartImage = 'views/design_part/image.html?ver='+VERSION;
9 $scope.designPartText = 'views/design_part/text.html?ver='+VERSION; 9 $scope.designPartText = 'views/design_part/text.html?ver='+VERSION;
10 $scope.designPartDefault = 'views/design_part/default.html?ver='+VERSION; 10 $scope.designPartDefault = 'views/design_part/default.html?ver='+VERSION;
11 var currentTShirtKey = 0; 11 var currentTShirtKey = 0;
12 var placeTShirtKey = ''; 12 var placeTShirtKey = '';
13 var tShirtColorFirstKey = 0; 13 var tShirtColorFirstKey = 0;
14 $scope.tShirtChoiceBackFrontKey = 'front'; 14 $scope.tShirtChoiceBackFrontKey = 'front';
15 $scope.tShirtColorKey = tShirtColorFirstKey; 15 $scope.tShirtColorKey = tShirtColorFirstKey;
16 16
17 /** 17 /**
18 * Get param route 18 * Get param route
19 * @type {any} 19 * @type {any}
20 * @private 20 * @private
21 */ 21 */
22 var _routeParams = $routeParams; 22 var _routeParams = $routeParams;
23 if(typeof _routeParams.tShirt != 'undefined') 23 if(typeof _routeParams.tShirt != 'undefined')
24 currentTShirtKey = _routeParams.tShirt - 1; 24 currentTShirtKey = _routeParams.tShirt - 1;
25 if(typeof _routeParams.place != 'undefined') 25 if(typeof _routeParams.place != 'undefined')
26 placeTShirtKey = _routeParams.place; 26 placeTShirtKey = _routeParams.place;
27 console.log(placeTShirtKey);
28 27
29
30 /** 28 /**
31 * Get all info TShirt 29 * Get all info TShirt
32 * @param: id 30 * @param: id
33 * @return: object 31 * @return: object
34 */ 32 */
35 $scope.placeTshirt = $t_shirt.getTShirtPlace(currentTShirtKey, placeTShirtKey); 33 $rootScope.placeTshirt = $t_shirt.getTShirtPlace(currentTShirtKey, placeTShirtKey);
36 console.log($scope.placeTshirt);
37 $scope.tShirtColor = $t_shirt.getTShirtColor(currentTShirtKey); 34 $scope.tShirtColor = $t_shirt.getTShirtColor(currentTShirtKey);
38 $rootScope.tShirtColorCode = $scope.tShirtColor[tShirtColorFirstKey].code; 35 $rootScope.tShirtColorCode = $scope.tShirtColor[tShirtColorFirstKey].code;
39 $scope.tShirtColorName = $scope.tShirtColor[tShirtColorFirstKey].name; 36 $scope.tShirtColorName = $scope.tShirtColor[tShirtColorFirstKey].name;
40 $scope.tShirtImgFront = $scope.tShirtColor[tShirtColorFirstKey].img.front; 37 $scope.tShirtImgFront = $scope.tShirtColor[tShirtColorFirstKey].img.front;
41 $scope.tShirtImgBack = $scope.tShirtColor[tShirtColorFirstKey].img.back; 38 $scope.tShirtImgBack = $scope.tShirtColor[tShirtColorFirstKey].img.back;
42 $scope.tShirtImg = $scope.tShirtImgFront; 39 $scope.tShirtImg = $scope.tShirtImgFront;
43 40
44 /** 41 /**
45 * Set preview size and position 42 * Set preview size and position
46 */ 43 */
47 function setSizePreViewDesign() { 44 function setSizePreViewDesign() {
48 var _widthPreviewDesign = $('#preview-design').width();
49 var _widthTShirtImage = $('.tshirt-image').width(); 45 var _widthTShirtImage = $('.tshirt-image').width();
50 var leftReviewDesign = _widthTShirtImage/2 - (_widthPreviewDesign/2); 46 if(typeof $rootScope.placeTshirt.place == 'undefined')
51 $('#preview-design').css({left: leftReviewDesign}); 47 return;
48
49 var place = $rootScope.placeTshirt.place;
50 switch (place) {
51 case 't_shirt_p_1' :
52 var widthPreview = _widthTShirtImage/2.5;
53 var heihtPreview = _widthTShirtImage/2.5;
54 break;
55 case 't_shirt_p_2' :
56 var widthPreview = _widthTShirtImage/2.5;
57 var heihtPreview = _widthTShirtImage/4.5;
58 break;
59 default:
60 break;
61 }
62 $('#preview-design').css({width: widthPreview, height: heihtPreview});
52 } 63 }
53 setSizePreViewDesign(); 64 setSizePreViewDesign();
54 $(window).resize(function () { 65 $(window).resize(function () {
55 setSizePreViewDesign(); 66 setSizePreViewDesign();
56 }); 67 });
57 /** 68 /**
58 * Choice color t-shirt 69 * Choice color t-shirt
59 * @param key 70 * @param key
60 */ 71 */
61 $scope.choiceTShirtColor = function(key) { 72 $scope.choiceTShirtColor = function(key) {
62 $scope.tShirtColorKey = key; 73 $scope.tShirtColorKey = key;
63 var tShirtColor = $scope.tShirtColor[key]; 74 var tShirtColor = $scope.tShirtColor[key];
64 $rootScope.tShirtColorCode = tShirtColor.code; 75 $rootScope.tShirtColorCode = tShirtColor.code;
65 $scope.tShirtColorName = tShirtColor.name; 76 $scope.tShirtColorName = tShirtColor.name;
66 $scope.tShirtImgFront = tShirtColor.img.front; 77 $scope.tShirtImgFront = tShirtColor.img.front;
67 $scope.tShirtImgBack = tShirtColor.img.back; 78 $scope.tShirtImgBack = tShirtColor.img.back;
68 if($scope.tShirtChoiceBackFrontKey == 'front') { 79 if($scope.tShirtChoiceBackFrontKey == 'front') {
69 $scope.tShirtImg = $scope.tShirtImgFront; 80 $scope.tShirtImg = $scope.tShirtImgFront;
70 } else { 81 } else {
71 $scope.tShirtImg = $scope.tShirtImgBack; 82 $scope.tShirtImg = $scope.tShirtImgBack;
72 } 83 }
73 }; 84 };
74 /** 85 /**
75 * Choice back or front t-shirt 86 * Choice back or front t-shirt
76 * @param choice 87 * @param choice
77 */ 88 */
78 $scope.choiceTShirtBackFront = function(choice) { 89 $scope.choiceTShirtBackFront = function(choice) {
79 if(choice == 'front') { 90 if(choice == 'front') {
80 $scope.tShirtImg = $scope.tShirtImgFront; 91 $scope.tShirtImg = $scope.tShirtImgFront;
81 } else { 92 } else {
82 $scope.tShirtImg = $scope.tShirtImgBack; 93 $scope.tShirtImg = $scope.tShirtImgBack;
83 } 94 }
84 $scope.tShirtChoiceBackFrontKey = choice; 95 $scope.tShirtChoiceBackFrontKey = choice;
85 }; 96 };
86 97
87 //safeApply 98 //safeApply
88 $rootScope.safeApply = function(fn) { 99 $rootScope.safeApply = function(fn) {
89 var phase = this.$root.$$phase; 100 var phase = this.$root.$$phase;
90 if(phase == '$apply' || phase == '$digest') { 101 if(phase == '$apply' || phase == '$digest') {
91 if(fn && (typeof(fn) === 'function')) { 102 if(fn && (typeof(fn) === 'function')) {
92 fn(); 103 fn();
93 } 104 }
94 } else { 105 } else {
95 this.$apply(fn); 106 this.$apply(fn);
96 } 107 }
97 }; 108 };
98 /** 109 /**
99 * Open modal design 110 * Open modal design
100 */ 111 */
101 $scope.modalTShirtDesign = function() { 112 $scope.modalTShirtDesign = function() {
102 $('#tshirt-design').modal( 113 $('#tshirt-design').modal(
103 { 114 {
104 backdrop: 'static', 115 backdrop: 'static',
105 keyboard: false 116 keyboard: false
106 } 117 }
107 ); 118 );
108 119
109 }; 120 };
110 /** 121 /**
111 * Close modal design 122 * Close modal design
112 */ 123 */
113 $scope.modalClose = function(){ 124 $scope.modalClose = function(){
114 $('#tshirt-design').modal('hide'); 125 $('#tshirt-design').modal('hide');
115 }; 126 };
127
app/scripts/controllers/tshirtdesign.js
Diff comments   View file @ 7e14f17
1 define(['app'], function (app) { 1 define(['app'], function (app) {
2 //'use strict'; 2 //'use strict';
3 app.controller('TshirtdesignCtrl', function ($scope, $rootScope, $window, $timeout, $illustration) { 3 app.controller('TshirtdesignCtrl', function ($scope, $rootScope, $window, $timeout, $illustration) {
4 4
5 var canvas = new fabric.Canvas('main-design-container'); 5 var canvas = new fabric.Canvas('main-design-container');
6 //Set width and height canvas 6 //Set width and height canvas
7 function setSizeCanvas() { 7 function setSizeCanvas() {
8 console.log($rootScope.placeTshirt);
8 var _modalWidth = $('.modal-dialog').width(); 9 var _modalWidth = $('.modal-dialog').width();
9 var _windowWidth = window.innerWidth; 10 var _windowWidth = window.innerWidth;
10 if(_windowWidth > 762) { 11 if(_windowWidth > 762) {
11 var _contentCanvasWidth = _modalWidth*8/12 - 100; 12 var _contentCanvasWidth = _modalWidth*8/12 - 100;
12 } else { 13 } else {
13 var _contentCanvasWidth = _windowWidth-70; 14 var _contentCanvasWidth = _windowWidth-70;
14 } 15 }
15 16
16 canvas.setWidth(_contentCanvasWidth); 17 canvas.setWidth(_contentCanvasWidth);
17 canvas.setHeight(650); 18 canvas.setHeight(650);
18 } 19 }
19 setSizeCanvas(); 20 setSizeCanvas();
20 //Window resize event 21 //Window resize event
21 $(window).resize(function () { 22 $(window).resize(function () {
22 setSizeCanvas(); 23 setSizeCanvas();
23 }); 24 });
24 25
25 //Custom control 26 //Custom control
26 fabric.Object.prototype.transparentCorners = true; 27 fabric.Object.prototype.transparentCorners = true;
27 fabric.Object.prototype.hasRotatingPoint = false; 28 fabric.Object.prototype.hasRotatingPoint = false;
28 29
29 var ctrVisible = {tl: false, ml:false, bl:false, mb: false, br: true, mr: false, tr: true, mt: true, mtr: false}; 30 var ctrVisible = {tl: false, ml:false, bl:false, mb: false, br: true, mr: false, tr: true, mt: true, mtr: false};
30 for(key in ctrVisible) { 31 for(key in ctrVisible) {
31 fabric.Object.prototype.setControlVisible(key,ctrVisible[key]); 32 fabric.Object.prototype.setControlVisible(key,ctrVisible[key]);
32 } 33 }
33 34
34 fabric.Object.prototype.customiseCornerIcons({ 35 fabric.Object.prototype.customiseCornerIcons({
35 settings: { 36 settings: {
36 borderColor: '#0000ff', 37 borderColor: '#0000ff',
37 cornerSize: 25, 38 cornerSize: 25,
38 cornerShape: 'circle', 39 cornerShape: 'circle',
39 cornerBackgroundColor: '#0171b4', 40 cornerBackgroundColor: '#0171b4',
40 cornerPadding: 6 41 cornerPadding: 6
41 }, 42 },
42 mt: { 43 mt: {
43 icon: 'images/control-icon/ok.png' 44 icon: 'images/control-icon/ok.png'
44 }, 45 },
45 br: { 46 br: {
46 icon: 'images/control-icon/resize.png' 47 icon: 'images/control-icon/resize.png'
47 }, 48 },
48 tr: { 49 tr: {
49 icon: 'images/control-icon/rotate.png' 50 icon: 'images/control-icon/rotate.png'
50 } 51 }
51 }); 52 });
52 53
53 fabric.Canvas.prototype.customiseControls({ 54 fabric.Canvas.prototype.customiseControls({
54 mt: { 55 mt: {
55 cursor: 'pointer', 56 cursor: 'pointer',
56 action: function(e, target) { 57 action: function(e, target) {
57 fabric.Object.prototype.selectable = false; 58 fabric.Object.prototype.selectable = false;
58 canvas.deactivateAll(); 59 canvas.deactivateAll();
59 delete currentObj; 60 delete currentObj;
60 $scope.designTextValue = ''; 61 $scope.designTextValue = '';
61 $timeout(function(){ 62 $timeout(function(){
62 fabric.Object.prototype.selectable = true; 63 fabric.Object.prototype.selectable = true;
63 },20); 64 },20);
64 } 65 }
65 }, 66 },
66 br: { 67 br: {
67 68
68 }, 69 },
69 tr: { 70 tr: {
70 action: 'rotate', 71 action: 'rotate',
71 cursor: 'crosshair' 72 cursor: 'crosshair'
72 } 73 }
73 }); 74 });
74 75
75 canvas.on({ 76 canvas.on({
76 'object:added' : onIllustrationAdded, 77 'object:added' : onIllustrationAdded,
77 'object:moving' : onIllustrationMoving, 78 'object:moving' : onIllustrationMoving,
78 'object:scaling' : onIllustrationChange, 79 'object:scaling' : onIllustrationChange,
79 'object:rotating' : onIllustrationChange, 80 'object:rotating' : onIllustrationChange,
80 'object:selected' : onObjectSelected, 81 'object:selected' : onObjectSelected,
81 'object:modified' : onIllustrationModifield, 82 'object:modified' : onIllustrationModifield,
82 'selection:cleared' : onObjectOut, 83 'selection:cleared' : onObjectOut,
83 }); 84 });
84 85
85 var currentObj; 86 var currentObj;
86 var listObj = []; 87 var listObj = [];
87 var stateObj = []; 88 var stateObj = [];
88 var indexCurr = 0; 89 var indexCurr = 0;
89 var indexCurr2 = 0; 90 var indexCurr2 = 0;
90 var actionObj = false; 91 var actionObj = false;
91 var refreshObj = true; 92 var refreshObj = true;
92 var spacingNum = 0; 93 var spacingNum = 0;
93 $scope.itemFont = 0; 94 $scope.itemFont = 0;
94 95
95 $scope.showDesignTab = function(tab){ 96 $scope.showDesignTab = function(tab){
96 canvas.deactivateAll().renderAll(); 97 canvas.deactivateAll().renderAll();
97 $rootScope.isShowLeftPanel = tab; 98 $rootScope.isShowLeftPanel = tab;
98 switch (tab) { 99 switch (tab) {
99 case 'illustration': { 100 case 'illustration': {
100 $scope.IllustrationList = $illustration.getAll(); 101 $scope.IllustrationList = $illustration.getAll();
101 $rootScope.outputImage = false; 102 $rootScope.outputImage = false;
102 $scope.illustrationSelectConfig = { 103 $scope.illustrationSelectConfig = {
103 allowClear:true 104 allowClear:true
104 }; 105 };
105 $timeout(function(){ 106 $timeout(function(){
106 $('.illstration-item').tooltip({ 107 $('.illstration-item').tooltip({
107 animated: 'fade', 108 animated: 'fade',
108 placement: 'bottom', 109 placement: 'bottom',
109 html: true 110 html: true
110 }); 111 });
111 },1000); 112 },1000);
112 break; 113 break;
113 } 114 }
114 case 'text': { 115 case 'text': {
115 break; 116 break;
116 } 117 }
117 } 118 }
118 }; 119 };
119 $scope.showDesignTab('default'); 120 $scope.showDesignTab('default');
120 121
121 122
122 function onIllustrationAdded(options){ 123 function onIllustrationAdded(options){
123 var object = options.target; 124 var object = options.target;
124 125
125 if (actionObj === true) { 126 if (actionObj === true) {
126 stateObj = [stateObj[indexCurr2]]; 127 stateObj = [stateObj[indexCurr2]];
127 listObj = [listObj[indexCurr2]]; 128 listObj = [listObj[indexCurr2]];
128 129
129 actionObj = false; 130 actionObj = false;
130 console.log(stateObj); 131 console.log(stateObj);
131 indexCurr = 1; 132 indexCurr = 1;
132 } 133 }
133 object.saveState(); 134 object.saveState();
134 135
135 console.log(object.originalState); 136 console.log(object.originalState);
136 stateObj[indexCurr] = JSON.stringify(object.originalState); 137 stateObj[indexCurr] = JSON.stringify(object.originalState);
137 listObj[indexCurr] = object; 138 listObj[indexCurr] = object;
138 indexCurr++; 139 indexCurr++;
139 indexCurr2 = indexCurr - 1; 140 indexCurr2 = indexCurr - 1;
140 refreshObj = true; 141 refreshObj = true;
141 } 142 }
142 143
143 function onIllustrationModifield(options){ 144 function onIllustrationModifield(options){
144 $('.object-border').hide(); 145 $('.object-border').hide();
145 // 146 //
146 var pointer = canvas.getPointer(options.e); 147 var pointer = canvas.getPointer(options.e);
147 if (pointer.x >= 567 && pointer.y >= 620 && pointer.x <= 600 && pointer.y <= 670){ 148 if (pointer.x >= 567 && pointer.y >= 620 && pointer.x <= 600 && pointer.y <= 670){
148 canvas.getActiveObject().remove(); 149 canvas.getActiveObject().remove();
149 $('.design-content .trash-design img').attr({'src':'images/trash.png'}); 150 $('.design-content .trash-design img').attr({'src':'images/trash.png'});
150 return; 151 return;
151 } 152 }
152 153
153 // 154 //
154 var objOffset = canvas.getActiveObject().getBoundingRect(); 155 var objOffset = canvas.getActiveObject().getBoundingRect();
155 var cH = canvas.height, cW = canvas.width, H0 = 20, W0 = 20; 156 var cH = canvas.height, cW = canvas.width, H0 = 20, W0 = 20;
156 //console.log(objOffset,canvas.height,canvas.width); 157 //console.log(objOffset,canvas.height,canvas.width);
157 if (objOffset.left<W0-objOffset.width || objOffset.left>cW-W0 || objOffset.top<H0-objOffset.height || objOffset.top>cH-H0){ 158 if (objOffset.left<W0-objOffset.width || objOffset.left>cW-W0 || objOffset.top<H0-objOffset.height || objOffset.top>cH-H0){
158 if (confirm('ๅ‰Š้™คใ—ใฆใ‚‚ใ‚ˆใ‚ใ—ใ„ใงใ™ใ‹')){ 159 if (confirm('ๅ‰Š้™คใ—ใฆใ‚‚ใ‚ˆใ‚ใ—ใ„ใงใ™ใ‹')){
159 canvas.getActiveObject().remove(); 160 canvas.getActiveObject().remove();
160 }else{ 161 }else{
161 undoCanvas(); 162 undoCanvas();
162 return; 163 return;
163 } 164 }
164 } 165 }
165 166
166 var object = options.target; 167 var object = options.target;
167 if (actionObj === true) { 168 if (actionObj === true) {
168 stateObj = [stateObj[indexCurr2]]; 169 stateObj = [stateObj[indexCurr2]];
169 listObj = [listObj[indexCurr2]]; 170 listObj = [listObj[indexCurr2]];
170 171
171 actionObj = false; 172 actionObj = false;
172 console.log(stateObj); 173 console.log(stateObj);
173 indexCurr = 1; 174 indexCurr = 1;
174 } 175 }
175 176
176 object.saveState(); 177 object.saveState();
177 178
178 stateObj[indexCurr] = JSON.stringify(object.originalState); 179 stateObj[indexCurr] = JSON.stringify(object.originalState);
179 listObj[indexCurr] = object; 180 listObj[indexCurr] = object;
180 indexCurr++; 181 indexCurr++;
181 indexCurr2 = indexCurr - 1; 182 indexCurr2 = indexCurr - 1;
182 refreshObj = true; 183 refreshObj = true;
183 } 184 }
184 185
185 function onIllustrationChange(options) { 186 function onIllustrationChange(options) {
186 187
187 } 188 }
188 189
189 function onIllustrationMoving(options) { 190 function onIllustrationMoving(options) {
190 var object = options.target; 191 var object = options.target;
191 var pointer = canvas.getPointer(options.e); 192 var pointer = canvas.getPointer(options.e);
192 if (pointer.x >= 567 && pointer.y >= 620 && pointer.x <= 600 && pointer.y <= 670){ 193 if (pointer.x >= 567 && pointer.y >= 620 && pointer.x <= 600 && pointer.y <= 670){
193 $('.design-content .trash-design img').attr({'src':'images/trash-hover.png'}); 194 $('.design-content .trash-design img').attr({'src':'images/trash-hover.png'});
194 }else{ 195 }else{
195 $('.design-content .trash-design img').attr({'src':'images/trash.png'}); 196 $('.design-content .trash-design img').attr({'src':'images/trash.png'});
196 } 197 }
197 198
198 console.log(object.oCoords,object.originalState); 199 console.log(object.oCoords,object.originalState);
199 object.setCoords(); 200 object.setCoords();
200 var Coords = object.oCoords; 201 var Coords = object.oCoords;
201 var diffX = 55, diffY=50; 202 var diffX = 55, diffY=50;
202 var xAngle = Math.cos(object.getAngle() * (Math.PI / 180))/2; 203 var xAngle = Math.cos(object.getAngle() * (Math.PI / 180))/2;
203 var yAngle = Math.sin(object.getAngle() * (Math.PI / 180))/2; 204 var yAngle = Math.sin(object.getAngle() * (Math.PI / 180))/2;
204 $('#object-border-left').css({'height':Math.ceil(object.originalState.height*object.scaleY), top: Coords.tl.y+diffY, left: Coords.tl.x+diffX}); 205 $('#object-border-left').css({'height':Math.ceil(object.originalState.height*object.scaleY), top: Coords.tl.y+diffY, left: Coords.tl.x+diffX});
205 $('#object-border-right').css({'height':Math.ceil(object.originalState.height*object.scaleY), top: Coords.tr.y+diffY, left: Coords.tr.x+diffX}); 206 $('#object-border-right').css({'height':Math.ceil(object.originalState.height*object.scaleY), top: Coords.tr.y+diffY, left: Coords.tr.x+diffX});
206 $('#object-border-top').css({'width':Math.ceil(object.originalState.width*object.scaleX), top: Coords.tl.y+diffY, left: Coords.tl.x+diffX}); 207 $('#object-border-top').css({'width':Math.ceil(object.originalState.width*object.scaleX), top: Coords.tl.y+diffY, left: Coords.tl.x+diffX});
207 $('#object-border-bottom').css({'width':Math.ceil(object.originalState.width*object.scaleX), top: Coords.bl.y+diffY, left: Coords.bl.x+diffX}); 208 $('#object-border-bottom').css({'width':Math.ceil(object.originalState.width*object.scaleX), top: Coords.bl.y+diffY, left: Coords.bl.x+diffX});
208 $('.object-border').css({ 209 $('.object-border').css({
209 '-ms-transform': 'rotate('+object.getAngle()+'deg)', /* IE 9 */ 210 '-ms-transform': 'rotate('+object.getAngle()+'deg)', /* IE 9 */
210 '-webkit-transform': 'rotate('+object.getAngle()+'deg)', /* Safari */ 211 '-webkit-transform': 'rotate('+object.getAngle()+'deg)', /* Safari */
211 'transform': 'rotate('+object.getAngle()+'deg)' /* Standard syntax */ 212 'transform': 'rotate('+object.getAngle()+'deg)' /* Standard syntax */
212 }); 213 });
213 $('.object-border').show(); 214 $('.object-border').show();
214 } 215 }
215 216
216 function onObjectOut() { 217 function onObjectOut() {
217 delete currentObj; 218 delete currentObj;
218 $scope.designTextValue = ''; 219 $scope.designTextValue = '';
219 } 220 }
220 221
221 function undoCanvas() { 222 function undoCanvas() {
222 if (indexCurr <= 0) { 223 if (indexCurr <= 0) {
223 indexCurr = 0; 224 indexCurr = 0;
224 return; 225 return;
225 } 226 }
226 227
227 if (refreshObj === true) { 228 if (refreshObj === true) {
228 indexCurr--; 229 indexCurr--;
229 refreshObj = false; 230 refreshObj = false;
230 } 231 }
231 232
232 console.log('undo'); 233 console.log('undo');
233 234
234 indexCurr2 = indexCurr - 1; 235 indexCurr2 = indexCurr - 1;
235 currentObj = listObj[indexCurr2]; 236 currentObj = listObj[indexCurr2];
236 if (currentObj){ 237 if (currentObj){
237 currentObj.setOptions(JSON.parse(indexCurr[indexCurr2])); 238 currentObj.setOptions(JSON.parse(indexCurr[indexCurr2]));
238 } 239 }
239 240
240 indexCurr--; 241 indexCurr--;
241 currentObj.setCoords(); 242 currentObj.setCoords();
242 canvas.renderAll(); 243 canvas.renderAll();
243 actionObj = true; 244 actionObj = true;
244 } 245 }
245 246
246 function redoCanvas() { 247 function redoCanvas() {
247 actionObj = true; 248 actionObj = true;
248 if (indexCurr >= stateObj.length - 1) { 249 if (indexCurr >= stateObj.length - 1) {
249 return; 250 return;
250 } 251 }
251 252
252 console.log('redo'); 253 console.log('redo');
253 254
254 indexCurr2 = indexCurr + 1; 255 indexCurr2 = indexCurr + 1;
255 currentObj = listObj[indexCurr2]; 256 currentObj = listObj[indexCurr2];
256 currentObj.setOptions(JSON.parse(indexCurr[indexCurr2])); 257 currentObj.setOptions(JSON.parse(indexCurr[indexCurr2]));
257 258
258 indexCurr++; 259 indexCurr++;
259 currentObj.setCoords(); 260 currentObj.setCoords();
260 canvas.renderAll(); 261 canvas.renderAll();
261 } 262 }
262 263
263 $scope.canvasClearAll = function(){ 264 $scope.canvasClearAll = function(){
264 if (confirm('้…็ฝฎใ•ใ‚ŒใŸใ™ในใฆใฎๆ–‡ๅญ—ใ‚„็”ปๅƒใ‚’ๆถˆๅŽปใ—ใพใ™')){ 265 if (confirm('้…็ฝฎใ•ใ‚ŒใŸใ™ในใฆใฎๆ–‡ๅญ—ใ‚„็”ปๅƒใ‚’ๆถˆๅŽปใ—ใพใ™')){
265 canvas.clear(); 266 canvas.clear();
266 } 267 }
267 } 268 }
268 269
269 function onObjectSelected(options) { 270 function onObjectSelected(options) {
270 var currentObj = options.target; 271 var currentObj = options.target;
271 272
272 $scope.typeObject = currentObj.type; 273 $scope.typeObject = currentObj.type;
273 switch ($scope.typeObject) { 274 switch ($scope.typeObject) {
274 case 'i-text' : 275 case 'i-text' :
275 $rootScope.isShowLeftPanel = 'text'; 276 $rootScope.isShowLeftPanel = 'text';
276 var text = currentObj.text; 277 var text = currentObj.text;
277 if(text != '') { 278 if(text != '') {
278 $scope.designText = text; 279 $scope.designText = text;
279 $scope.designTextValue = text; 280 $scope.designTextValue = text;
280 } 281 }
281 break; 282 break;
282 283
283 case 'path-group' : 284 case 'path-group' :
284 $rootScope.isShowLeftPanel = 'illustration'; 285 $rootScope.isShowLeftPanel = 'illustration';
285 break; 286 break;
286 287
287 case 'image': 288 case 'image':
288 $rootScope.isShowLeftPanel = 'image'; 289 $rootScope.isShowLeftPanel = 'image';
289 break; 290 break;
290 291
291 default : 292 default :
292 $rootScope.isShowLeftPanel = 'default'; 293 $rootScope.isShowLeftPanel = 'default';
293 break; 294 break;
294 } 295 }
295 $rootScope.safeApply(); 296 $rootScope.safeApply();
296 } 297 }
297 298
298 // Illustration process 299 // Illustration process
299 $scope.changeIllustrationCategory = function(currentIllustration){ 300 $scope.changeIllustrationCategory = function(currentIllustration){
300 $scope.currentIllustrationCate = $illustration.getList(currentIllustration); 301 $scope.currentIllustrationCate = $illustration.getList(currentIllustration);
301 }; 302 };
302 303
303 $scope.insertSvg = function(item){ 304 $scope.insertSvg = function(item){
304 fabric.loadSVGFromURL(item.path, function(objects, options) { 305 fabric.loadSVGFromURL(item.path, function(objects, options) {
305 var shape = fabric.util.groupSVGElements(objects, options); 306 var shape = fabric.util.groupSVGElements(objects, options);
306 canvas.add(shape.scale(0.6)); 307 canvas.add(shape.scale(0.6));
307 shape.set({ left: 150, top: 200 }).setCoords(); 308 shape.set({ left: 150, top: 200 }).setCoords();
308 canvas.renderAll(); 309 canvas.renderAll();
309 canvas.setActiveObject(shape); 310 canvas.setActiveObject(shape);
310 }); 311 });
311 }; 312 };
312 313
313 // color pattern 314 // color pattern
314 $scope.listColorPatterns = [ 315 $scope.listColorPatterns = [
315 '#000000','#ffff00','#ff6600','#ff0000','#ff6262','#ffa19c','#ff9933','#c45d01','#5d2b03','#ffffcc', 316 '#000000','#ffff00','#ff6600','#ff0000','#ff6262','#ffa19c','#ff9933','#c45d01','#5d2b03','#ffffcc',
316 '#ffff99','#ffd500','#c0db50','#21a52a','#00663f','#abfcab','#36ffaa','#89eaea','#00938c','#005450', 317 '#ffff99','#ffd500','#c0db50','#21a52a','#00663f','#abfcab','#36ffaa','#89eaea','#00938c','#005450',
317 '#0badff','#006cff','#839aff','#0410a0','#ffb2ff','#f93fff','#6600ca','#ff6699','#999999','#666666', 318 '#0badff','#006cff','#839aff','#0410a0','#ffb2ff','#f93fff','#6600ca','#ff6699','#999999','#666666',
318 '#333333' 319 '#333333'
319 ]; 320 ];
320 321
321 $scope.changeColorPattern = function(color){ 322 $scope.changeColorPattern = function(color){
322 var obj = canvas.getActiveObject(); 323 var obj = canvas.getActiveObject();
323 if (!color){ 324 if (!color){
324 color = 'none'; 325 color = 'none';
325 } 326 }
326 if (obj instanceof fabric.PathGroup) { 327 if (obj instanceof fabric.PathGroup) {
327 obj.getObjects().forEach(function(o) { 328 obj.getObjects().forEach(function(o) {
328 o.fill = color; 329 o.fill = color;
329 }); 330 });
330 } 331 }
331 else { 332 else {
332 obj.fill = color; 333 obj.fill = color;
333 } 334 }
334 canvas.renderAll(); 335 canvas.renderAll();
335 }; 336 };
336 337
337 //Font 338 //Font
338 $scope.listFontFamily = [ 339 $scope.listFontFamily = [
339 { 340 {
340 name : 'GN Aki iro Sesami Cookies', 341 name : 'GN Aki iro Sesami Cookies',
341 slug : 'gn_aki_iro_sesami_cookies', 342 slug : 'gn_aki_iro_sesami_cookies',
342 }, 343 },
343 { 344 {
344 name : 'GN-Fuyu-iro_Script_Bold', 345 name : 'GN-Fuyu-iro_Script_Bold',
345 slug : 'gn_fuyu_iro_script_bold' 346 slug : 'gn_fuyu_iro_script_bold'
346 }, 347 },
347 { 348 {
348 name : 'GN Killgothic U Kanana', 349 name : 'GN Killgothic U Kanana',
349 slug : 'gn_killgothic_u_kanana' 350 slug : 'gn_killgothic_u_kanana'
350 }, 351 },
351 { 352 {
352 name : 'GN-Kin-iro_Alphabet_Cookies', 353 name : 'GN-Kin-iro_Alphabet_Cookies',
353 slug : 'gn_kin_iro_alphabet_cookies' 354 slug : 'gn_kin_iro_alphabet_cookies'
354 355
355 }, 356 },
356 { 357 {
357 name : 'GN-Kin-iro_SansSerif', 358 name : 'GN-Kin-iro_SansSerif',
358 slug : 'gn_kin_iro_sansserif' 359 slug : 'gn_kin_iro_sansserif'
359 360
360 }, 361 },
361 { 362 {
362 name : 'GN-Koharuiro_Sunray', 363 name : 'GN-Koharuiro_Sunray',
363 slug : 'gn_koharuiro_sunray' 364 slug : 'gn_koharuiro_sunray'
364 365
365 }, 366 },
366 { 367 {
367 name : 'GN-Kyu-pin', 368 name : 'GN-Kyu-pin',
368 slug : 'gn_kyu_pin' 369 slug : 'gn_kyu_pin'
369 }, 370 },
370 { 371 {
371 name : 'gn_natsu_iro_schedule', 372 name : 'gn_natsu_iro_schedule',
372 slug : 'gn_natsu_iro_schedule' 373 slug : 'gn_natsu_iro_schedule'
373 374
374 }, 375 },
375 { 376 {
376 name : 'gnkana_kiniro_sansserif_l', 377 name : 'gnkana_kiniro_sansserif_l',
377 slug : 'gnkana_kiniro_sansserif_l' 378 slug : 'gnkana_kiniro_sansserif_l'
378 379
379 }, 380 },
380 { 381 {
381 name : 'gnkana_kiniro_sansserif_st', 382 name : 'gnkana_kiniro_sansserif_st',
382 slug : 'gnkana_kiniro_sansserif_st' 383 slug : 'gnkana_kiniro_sansserif_st'
383 }, 384 },
384 { 385 {
385 name : 'gnkana_kon_iro_nightfall', 386 name : 'gnkana_kon_iro_nightfall',
386 slug : 'gnkana_kon_iro_nightfall' 387 slug : 'gnkana_kon_iro_nightfall'
387 388
388 }, 389 },
389 { 390 {
390 name : 'ms_gothic', 391 name : 'ms_gothic',
391 slug : 'ms_gothic' 392 slug : 'ms_gothic'
392 393
393 }, 394 },
394 { 395 {
395 name : 'msmincho', 396 name : 'msmincho',
396 slug : 'msmincho' 397 slug : 'msmincho'
397 }, 398 },
398 { 399 {
399 name : 'ufonts_com_ms_pgothic', 400 name : 'ufonts_com_ms_pgothic',
400 slug : 'ufonts_com_ms_pgothic' 401 slug : 'ufonts_com_ms_pgothic'
401 } 402 }
402 ]; 403 ];
403 404
404 // layer process 405 // layer process
405 $scope.layerProcess = function(mode) { 406 $scope.layerProcess = function(mode) {
406 // console.log('layerProcess'); 407 // console.log('layerProcess');
407 var activeObject = canvas.getActiveObject(); 408 var activeObject = canvas.getActiveObject();
408
409 console.log(activeObject);
410 409
411 if (activeObject){ 410 if (activeObject){
412 switch (mode) { 411 switch (mode) {
413 case 1: 412 case 1:
414 activeObject.bringForward(); 413 activeObject.bringForward();
415 break; 414 break;
416 case 2: 415 case 2:
417 activeObject.sendBackwards(); 416 activeObject.sendBackwards();
418 break; 417 break;
419 case 3: 418 case 3:
420 activeObject.bringToFront(); 419 activeObject.bringToFront();
421 break; 420 break;
422 case 4: 421 case 4:
423 activeObject.sendToBack(); 422 activeObject.sendToBack();
424 break; 423 break;
425 } 424 }
426 canvas.deactivateAll().renderAll(); 425 canvas.deactivateAll().renderAll();
427 } 426 }
428 }; 427 };
429 428
430 $scope.focusInputText = function(text) { 429 $scope.focusInputText = function(text) {
431 currentObj = canvas.getActiveObject(); 430 currentObj = canvas.getActiveObject();
432 if(typeof currentObj == 'undefined' || currentObj == null) { 431 if(typeof currentObj == 'undefined' || currentObj == null) {
433 $scope.iText = new fabric.IText('', { 432 $scope.iText = new fabric.IText('', {
434 left: 150, 433 left: 150,
435 top: 200, 434 top: 200,
436 fontFamily: typeof $scope.itemFont != 'undefined' ? $scope.listFontFamily[$scope.itemFont].slug : $scope.listFontFamily[0].slug, 435 fontFamily: typeof $scope.itemFont != 'undefined' ? $scope.listFontFamily[$scope.itemFont].slug : $scope.listFontFamily[0].slug,
437 fontWeight: 'normal', 436 fontWeight: 'normal',
438 textAlign: 'center', 437 textAlign: 'center',
439 fontSize: 28, 438 fontSize: 28,
440 fill: 'black', 439 fill: 'black',
441 editable: false 440 editable: false
442 }); 441 });
443 } else { 442 } else {
444 if(currentObj.type != 'i-text') { 443 if(currentObj.type != 'i-text') {
445 $scope.iText = new fabric.IText('', { 444 $scope.iText = new fabric.IText('', {
446 left: 150, 445 left: 150,
447 top: 200, 446 top: 200,
448 fontFamily: typeof $scope.itemFont != 'undefined' ? $scope.listFontFamily[$scope.itemFont].slug : $scope.listFontFamily[0].slug, 447 fontFamily: typeof $scope.itemFont != 'undefined' ? $scope.listFontFamily[$scope.itemFont].slug : $scope.listFontFamily[0].slug,
449 fontWeight: 'normal', 448 fontWeight: 'normal',
450 textAlign: 'center', 449 textAlign: 'center',
451 fontSize: 28, 450 fontSize: 28,
452 fill: 'black', 451 fill: 'black',
453 editable: false 452 editable: false
454 }); 453 });
455 } else{ 454 } else{
456 $scope.iText = currentObj; 455 $scope.iText = currentObj;
457 } 456 }
458 } 457 }
459 }; 458 };
460 459
461 //Design text 460 //Design text
462 $scope.inputText = function(e) { 461 $scope.inputText = function(e) {
463 if(typeof $scope.iText != "undefined") { 462 if(typeof $scope.iText != "undefined") {
464 var iText = $scope.iText; 463 var iText = $scope.iText;
465 iText.text = e; 464 iText.text = e;
466 canvas.add(iText); 465 canvas.add(iText);
467 canvas.renderAll(); 466 canvas.renderAll();
468 canvas.setActiveObject(iText); 467 canvas.setActiveObject(iText);
469 } 468 }
470 }; 469 };
471 $scope.setFontFamily = function(font,index) { 470 $scope.setFontFamily = function(font,index) {
472 $scope.itemFont = index; 471 $scope.itemFont = index;
473 if(canvas.getActiveObject()) { 472 if(canvas.getActiveObject()) {
474 var currentObj = canvas.getActiveObject(); 473 var currentObj = canvas.getActiveObject();
475 if(currentObj.type == 'i-text') { 474 if(currentObj.type == 'i-text') {
476 currentObj.set('fontFamily', font); 475 currentObj.set('fontFamily', font);
477 canvas.renderAll(); 476 canvas.renderAll();
478 canvas.setActiveObject(currentObj); 477 canvas.setActiveObject(currentObj);
479 } 478 }
480 479
481 } 480 }
482 }; 481 };
483 //Set letter spacing text 482 //Set letter spacing text
484 $scope.setLetterSpacingText = function(e) { 483 $scope.setLetterSpacingText = function(e) {
485 if(canvas.getActiveObject()) { 484 if(canvas.getActiveObject()) {
486 var currentObj = canvas.getActiveObject(); 485 var currentObj = canvas.getActiveObject();
487 if(currentObj.type == 'i-text') { 486 if(currentObj.type == 'i-text') {
488 if(e == 'plus') 487 if(e == 'plus')
489 spacingNum = spacingNum + 30; 488 spacingNum = spacingNum + 30;
490 else if (spacingNum >= -30){ 489 else if (spacingNum >= -30){
491 spacingNum = spacingNum - 30; 490 spacingNum = spacingNum - 30;
492 } 491 }
493 if(e == 'default') 492 if(e == 'default')
494 spacingNum = 0; 493 spacingNum = 0;
495 494
496 currentObj.set('charSpacing', spacingNum); 495 currentObj.set('charSpacing', spacingNum);
497 canvas.renderAll(); 496 canvas.renderAll();
498 canvas.setActiveObject(currentObj); 497 canvas.setActiveObject(currentObj);
499 } 498 }
500 } 499 }
501 }; 500 };
502 501
503 502
504 /**** process insert image */ 503 /**** process insert image */
505 if (typeof($window.localStorage.recentImages) != 'undefined'){ 504 if (typeof($window.localStorage.recentImages) != 'undefined'){
506 $scope.recentImages = JSON.parse($window.localStorage.recentImages); 505 $scope.recentImages = JSON.parse($window.localStorage.recentImages);
507 }else{ 506 }else{
508 $scope.recentImages = {}; 507 $scope.recentImages = {};
509 } 508 }
510 509
511 var addToRecentImage = function(name, data){ 510 var addToRecentImage = function(name, data){
512 if (typeof($window.localStorage.recentImages) != 'undefined'){ 511 if (typeof($window.localStorage.recentImages) != 'undefined'){
513 $scope.recentImages = JSON.parse($window.localStorage.recentImages); 512 $scope.recentImages = JSON.parse($window.localStorage.recentImages);
514 }else{ 513 }else{
515 $scope.recentImages = {}; 514 $scope.recentImages = {};
516 } 515 }
517 516
518 if (typeof($scope.recentImages[name]) == 'undefined'){ 517 if (typeof($scope.recentImages[name]) == 'undefined'){
519 var ii=0; 518 var ii=0;
520 var II = 0; 519 var II = 0;
521 for(var item in $scope.recentImages){ 520 for(var item in $scope.recentImages){
522 if (II==0){ 521 if (II==0){
523 II = item; 522 II = item;
524 } 523 }
525 ii++; 524 ii++;
526 } 525 }
527 if (ii>16 && II!=0){ 526 if (ii>16 && II!=0){
528 delete $scope.recentImages[II]; 527 delete $scope.recentImages[II];
529 } 528 }
530 $scope.recentImages[name] = data; 529 $scope.recentImages[name] = data;
531 $window.localStorage.recentImages = JSON.stringify($scope.recentImages); 530 $window.localStorage.recentImages = JSON.stringify($scope.recentImages);
532 } 531 }
533 } 532 }
534 $scope.chooseImage = function(e){//console.log(e); 533 $scope.chooseImage = function(e){//console.log(e);
535 if (e.target.files[0] && e.target.files[0].size > 5*1024*1024){ 534 if (e.target.files[0] && e.target.files[0].size > 5*1024*1024){
536 alert('ใ‚ขใƒƒใƒ—ใƒญใƒผใƒ‰ใงใใพใ›ใ‚“ใงใ—ใŸ'); 535 alert('ใ‚ขใƒƒใƒ—ใƒญใƒผใƒ‰ใงใใพใ›ใ‚“ใงใ—ใŸ');
537 return; 536 return;
538 } 537 }
539 var reader = new FileReader(); 538 var reader = new FileReader();
540 reader.onload = function (event) { 539 reader.onload = function (event) {
541 addToRecentImage ($('#imgLoader').val(), event.target.result); 540 addToRecentImage ($('#imgLoader').val(), event.target.result);
542 var imgObj = new Image();//console.log($('#imgLoader').val()); 541 var imgObj = new Image();//console.log($('#imgLoader').val());
543 imgObj.src = event.target.result; 542 imgObj.src = event.target.result;
544 imgObj.onload = function () { 543 imgObj.onload = function () {
545 // start fabricJS stuff 544 // start fabricJS stuff
546 545
547 var image = new fabric.Image(imgObj); 546 var image = new fabric.Image(imgObj);
548 image.set({ 547 image.set({
549 left: 50, 548 left: 50,
550 top: 50 549 top: 50
551 }); 550 });
552 //image.scale(getRandomNum(0.1, 0.25)).setCoords(); 551 //image.scale(getRandomNum(0.1, 0.25)).setCoords();
553 image.scaleToWidth(200); 552 image.scaleToWidth(200);
554 canvas.add(image); 553 canvas.add(image);
555 } 554 }
556 } 555 }
557 reader.readAsDataURL(e.target.files[0]); 556 reader.readAsDataURL(e.target.files[0]);
558 } 557 }
559 558
560 $scope.insertRecentImage = function(data){ 559 $scope.insertRecentImage = function(data){
561 var imgObj = new Image(); 560 var imgObj = new Image();
562 imgObj.src = data; 561 imgObj.src = data;
563 imgObj.onload = function () { 562 imgObj.onload = function () {
564 // start fabricJS stuff 563 // start fabricJS stuff
565 564
566 var image = new fabric.Image(imgObj); 565 var image = new fabric.Image(imgObj);
567 image.set({ 566 image.set({
568 left: 50, 567 left: 50,
569 top: 50 568 top: 50
570 }); 569 });
571 image.scaleToWidth(200); 570 image.scaleToWidth(200);
572 canvas.add(image); 571 canvas.add(image);
573 } 572 }
574 } 573 }
575 574
576 //Traslation text 575 //Traslation text
577 $scope.rotateText = function(style) { 576 $scope.rotateText = function(style) {
578 if(canvas.getActiveObject()) { 577 if(canvas.getActiveObject()) {
579 var currentObj = canvas.getActiveObject(); 578 var currentObj = canvas.getActiveObject();
580 if(currentObj.type == 'i-text') { 579 if(currentObj.type == 'i-text') {
581 currentObj.set('rotate', Math.PI / 4); 580 currentObj.set('rotate', Math.PI / 4);
582 canvas.renderAll(); 581 canvas.renderAll();
583 canvas.setActiveObject(currentObj); 582 canvas.setActiveObject(currentObj);
584 } 583 }
585 } 584 }
586 }; 585 };
587 586
588 587
589 /* Process output */ 588 /* Process output */
590 $scope.outputDesign = function(){ 589 $scope.outputDesign = function(){
591 $rootScope.outputImage = canvas.toDataURL('png'); 590 $rootScope.outputImage = canvas.toDataURL('png');
592 // console.log(); 591 // console.log();
593 $('#tshirt-design').modal('hide'); 592 $('#tshirt-design').modal('hide');
594 } 593 }
595 }); 594 });
596 }); 595 });
app/scripts/services/tshirt.js
Diff comments   View file @ 7e14f17
1 define(['app'], function (app) { 1 define(['app'], function (app) {
2 'use strict'; 2 'use strict';
3 3
4 app.factory('$t_shirt', function ($http, $rootScope) { 4 app.factory('$t_shirt', function ($http, $rootScope) {
5 var DATA = [ 5 var DATA = [
6 { 6 {
7 info: { 7 info: {
8 name: 'T-Shirt 1', 8 name: 'T-Shirt 1',
9 description: '', 9 description: '',
10 price: '', 10 price: '',
11 gender: '', 11 gender: '',
12 image: '' 12 image: ''
13 }, 13 },
14 place_design: { 14 place_design: {
15 place_1 : { 15 place_1 : {
16 'face' : 'front', 16 'face' : 'front',
17 'place' : 't_shirt_p_1' 17 'place' : 't_shirt_p_1'
18 }, 18 },
19 place_2 : { 19 place_2 : {
20 'face' : 'back', 20 'face' : 'front',
21 'place' : 't_shirt_p_2' 21 'place' : 't_shirt_p_2'
22 }, 22 },
23 place_3 : { 23 place_3 : {
24 'face' : 'front', 24 'face' : 'front',
25 'place' : 't_shirt_p_3' 25 'place' : 't_shirt_p_3'
26 } 26 }
27 }, 27 },
28 color: [ 28 color: [
29 { 29 {
30 name: 'color: 2E GRAY', 30 name: 'color: 2E GRAY',
31 code: '#d0d0cd', 31 code: '#d0d0cd',
32 img: { 32 img: {
33 front: 'images/t-shirt/1/gray/front.png', 33 front: 'images/t-shirt/1/gray/front.png',
34 back: 'images/t-shirt/1/gray/back.png' 34 back: 'images/t-shirt/1/gray/back.png'
35 }, 35 },
36 }, 36 },
37 { 37 {
38 name: 'color: 00 BLACK', 38 name: 'color: 00 BLACK',
39 code: '#23282e', 39 code: '#23282e',
40 img: { 40 img: {
41 front: 'images/t-shirt/1/black/front.png', 41 front: 'images/t-shirt/1/black/front.png',
42 back: 'images/t-shirt/1/black/back.png' 42 back: 'images/t-shirt/1/black/back.png'
43 }, 43 },
44 }, 44 },
45 { 45 {
46 name: 'color: 3B ORANGE', 46 name: 'color: 3B ORANGE',
47 code: '#e2583b', 47 code: '#e2583b',
48 img: { 48 img: {
49 front: 'images/t-shirt/1/orange/front.png', 49 front: 'images/t-shirt/1/orange/front.png',
50 back: 'images/t-shirt/1/orange/back.png' 50 back: 'images/t-shirt/1/orange/back.png'
51 }, 51 },
52 } 52 }
53 ] 53 ]
54 }, 54 },
55 { 55 {
56 info: { 56 info: {
57 name: 'T-Shirt 2', 57 name: 'T-Shirt 2',
58 description: '', 58 description: '',
59 price: '', 59 price: '',
60 gender: '', 60 gender: '',
61 image: '' 61 image: ''
62 }, 62 },
63 place_design: { 63 place_design: {
64 place_1 : { 64 place_1 : {
65 'face' : 'front', 65 'face' : 'front',
66 'place' : 't_shirt_p_1' 66 'place' : 't_shirt_p_1'
67 }, 67 },
68 place_2 : { 68 place_2 : {
69 'face' : 'front', 69 'face' : 'front',
70 'place' : 't_shirt_p_2' 70 'place' : 't_shirt_p_2'
71 } 71 }
72 }, 72 },
73 color: [ 73 color: [
74 { 74 {
75 name: 'color:03 GRAY', 75 name: 'color:03 GRAY',
76 code: '#b2b4b2', 76 code: '#b2b4b2',
77 img: { 77 img: {
78 front: 'images/t-shirt/2/gray/front.png', 78 front: 'images/t-shirt/2/gray/front.png',
79 back: 'images/t-shirt/2/gray/back.png' 79 back: 'images/t-shirt/2/gray/back.png'
80 }, 80 },
81 }, 81 },
82 { 82 {
83 name: 'color:08 DARK GRAY', 83 name: 'color:08 DARK GRAY',
84 code: '#37383d', 84 code: '#37383d',
85 img: { 85 img: {
86 front: 'images/t-shirt/2/darkgray/front.png', 86 front: 'images/t-shirt/2/darkgray/front.png',
87 back: 'images/t-shirt/2/darkgray/back.png' 87 back: 'images/t-shirt/2/darkgray/back.png'
88 }, 88 },
89 }, 89 },
90 { 90 {
91 name: 'color:09 BLACK', 91 name: 'color:09 BLACK',
92 code: '#292929', 92 code: '#292929',
93 img: { 93 img: {
94 front: 'images/t-shirt/2/black/front.png', 94 front: 'images/t-shirt/2/black/front.png',
95 back: 'images/t-shirt/2/black/back.png' 95 back: 'images/t-shirt/2/black/back.png'
96 }, 96 },
97 }, 97 },
98 { 98 {
99 name: 'color:12 PINK', 99 name: 'color:12 PINK',
100 code: '#ca6965', 100 code: '#ca6965',
101 img: { 101 img: {
102 front: 'images/t-shirt/2/pink/front.png', 102 front: 'images/t-shirt/2/pink/front.png',
103 back: 'images/t-shirt/2/pink/back.png' 103 back: 'images/t-shirt/2/pink/back.png'
104 }, 104 },
105 }, 105 },
106 { 106 {
107 name: 'color:18 WINE', 107 name: 'color:18 WINE',
108 code: '#661e2e', 108 code: '#661e2e',
109 img: { 109 img: {
110 front: 'images/t-shirt/2/wine/front.png', 110 front: 'images/t-shirt/2/wine/front.png',
111 back: 'images/t-shirt/2/wine/back.png' 111 back: 'images/t-shirt/2/wine/back.png'
112 }, 112 },
113 }, 113 },
114 { 114 {
115 name: 'color:26 ORANGE', 115 name: 'color:26 ORANGE',
116 code: '#bf6037', 116 code: '#bf6037',
117 img: { 117 img: {
118 front: 'images/t-shirt/2/orange/front.png', 118 front: 'images/t-shirt/2/orange/front.png',
119 back: 'images/t-shirt/2/orange/back.png' 119 back: 'images/t-shirt/2/orange/back.png'
120 }, 120 },
121 }, 121 },
122 { 122 {
123 name: 'color:57 OLIVE', 123 name: 'color:57 OLIVE',
124 code: '#4c442e', 124 code: '#4c442e',
125 img: { 125 img: {
126 front: 'images/t-shirt/2/olive/front.png', 126 front: 'images/t-shirt/2/olive/front.png',
127 back: 'images/t-shirt/2/olive/back.png' 127 back: 'images/t-shirt/2/olive/back.png'
128 }, 128 },
129 }, 129 },
130 { 130 {
131 name: 'color:58 DARK GREEN', 131 name: 'color:58 DARK GREEN',
132 code: '#204344', 132 code: '#204344',
133 img: { 133 img: {
134 front: 'images/t-shirt/2/darkgreen/front.png', 134 front: 'images/t-shirt/2/darkgreen/front.png',
135 back: 'images/t-shirt/2/darkgreen/back.png' 135 back: 'images/t-shirt/2/darkgreen/back.png'
136 }, 136 },
137 }, 137 },
138 { 138 {
139 name: 'color:69 NAVY', 139 name: 'color:69 NAVY',
140 code: '#2a2d3c', 140 code: '#2a2d3c',
141 img: { 141 img: {
142 front: 'images/t-shirt/2/navi/front.png', 142 front: 'images/t-shirt/2/navi/front.png',
143 back: 'images/t-shirt/2/navi/back.png' 143 back: 'images/t-shirt/2/navi/back.png'
144 }, 144 },
145 } 145 }
146 ] 146 ]
147 } 147 }
148 ]; 148 ];
149 149
150 return { 150 return {
151 getTShirtColor : function(key) { 151 getTShirtColor : function(key) {
152 if (typeof DATA[key] == 'undefined'){ 152 if (typeof DATA[key] == 'undefined'){
153 return []; 153 return [];
154 } 154 }
155 return DATA[key]['color']; 155 return DATA[key]['color'];
156 }, 156 },
157 getTShirtPlace : function(key, place) { 157 getTShirtPlace : function(key, place) {
158 if(typeof DATA[key].place_design[place] == 'undefined' || typeof DATA[key].place_design[place] == 'null') 158 if(typeof DATA[key].place_design[place] == 'undefined' || typeof DATA[key].place_design[place] == 'null')
159 return []; 159 return [];
160 160
161 return DATA[key].place_design[place]; 161 return DATA[key].place_design[place];
162 }, 162 },
163 163
164 getAll: function(){ 164 getAll: function(){
165 return DATA; 165 return DATA;
166 }, 166 },
167 getList: function(category){ 167 getList: function(category){
168 if (typeof DATA[category] == 'undefined'){ 168 if (typeof DATA[category] == 'undefined'){
169 return []; 169 return [];
170 } 170 }
171 return DATA[category]; 171 return DATA[category];
172 } 172 }
173 }; 173 };
174 }); 174 });
175 }); 175 });
176 176
1 /* Space out content a bit */ 1 /* Space out content a bit */
2 @import "../fonts/font.css"; 2 @import "../fonts/font.css";
3 @import "../fonts/font_canvas/font-canvas.css"; 3 @import "../fonts/font_canvas/font-canvas.css";
4 @import "placedesign.css"; 4 @import "placedesign.css";
5 html{ 5 html{
6 height:100%; 6 height:100%;
7 width:100%; 7 width:100%;
8 } 8 }
9 body { 9 body {
10 font-family: 'Hiragino Kaku Gothic Pro', sans-serif; 10 font-family: 'Hiragino Kaku Gothic Pro', sans-serif;
11 height:100%; 11 height:100%;
12 width:100%; 12 width:100%;
13 } 13 }
14 /*Scroll bar style*/ 14 /*Scroll bar style*/
15 ::-webkit-scrollbar { 15 ::-webkit-scrollbar {
16 -webkit-appearance: none; 16 -webkit-appearance: none;
17 width: 7px; 17 width: 7px;
18 } 18 }
19 ::-webkit-scrollbar-track { 19 ::-webkit-scrollbar-track {
20 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 20 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
21 } 21 }
22 22
23 ::-webkit-scrollbar-thumb { 23 ::-webkit-scrollbar-thumb {
24 border-radius: 4px; 24 border-radius: 4px;
25 background-color: rgba(0,0,0,.5); 25 background-color: rgba(0,0,0,.5);
26 -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5); 26 -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
27 } 27 }
28 /*End scroll bar style*/ 28 /*End scroll bar style*/
29 .padding-right-0{ 29 .padding-right-0{
30 padding-right: 0!important; 30 padding-right: 0!important;
31 } 31 }
32 .padding-left-0{ 32 .padding-left-0{
33 padding-left: 0!important; 33 padding-left: 0!important;
34 } 34 }
35 button.red{ 35 button.red{
36 color: #ffffff; 36 color: #ffffff;
37 background-color: #ff0000; 37 background-color: #ff0000;
38 border: 1px solid #ff0000; 38 border: 1px solid #ff0000;
39 39
40 } 40 }
41 button.white{ 41 button.white{
42 border: 1px solid #ff8080; 42 border: 1px solid #ff8080;
43 color: #ff8080; 43 color: #ff8080;
44 background-color: #ffffff; 44 background-color: #ffffff;
45 } 45 }
46 button.brown{ 46 button.brown{
47 background-color: #666666; 47 background-color: #666666;
48 border: 1px solid #666666; 48 border: 1px solid #666666;
49 color: #ffffff; 49 color: #ffffff;
50 border-radius: 5px; 50 border-radius: 5px;
51 } 51 }
52 button.black{ 52 button.black{
53 border: 1px solid #c9c9c9; 53 border: 1px solid #c9c9c9;
54 background-color: #343434; 54 background-color: #343434;
55 color: #ffffff; 55 color: #ffffff;
56 padding: 1px 6px; 56 padding: 1px 6px;
57 } 57 }
58 #tshirt-container{ 58 #tshirt-container{
59 border-left: 1px solid #dcdcdc; 59 border-left: 1px solid #dcdcdc;
60 border-right: 1px solid #dcdcdc; 60 border-right: 1px solid #dcdcdc;
61 } 61 }
62 /*HEADER*/ 62 /*HEADER*/
63 header{ 63 header{
64 border-bottom: 1px solid #dcdcdc; 64 border-bottom: 1px solid #dcdcdc;
65 } 65 }
66 header .logo{ 66 header .logo{
67 color: #ed1d24; 67 color: #ed1d24;
68 font-size: 30px; 68 font-size: 30px;
69 text-transform: uppercase; 69 text-transform: uppercase;
70 font-weight: bold; 70 font-weight: bold;
71 } 71 }
72 header .logo img{ 72 header .logo img{
73 width: 60px; 73 width: 60px;
74 } 74 }
75 /*NAVIGATION*/ 75 /*NAVIGATION*/
76 nav{ 76 nav{
77 border-bottom: 1px solid #dcdcdc; 77 border-bottom: 1px solid #dcdcdc;
78 padding: 10px 0; 78 padding: 10px 0;
79 } 79 }
80 nav h2{ 80 nav h2{
81 font-size: 27px; 81 font-size: 27px;
82 margin: 0 0; 82 margin: 0 0;
83 } 83 }
84 nav ul{ 84 nav ul{
85 list-style: none; 85 list-style: none;
86 padding-left: 0; 86 padding-left: 0;
87 margin-bottom: 0; 87 margin-bottom: 0;
88 88
89 } 89 }
90 nav ul li{ 90 nav ul li{
91 margin-left: 2px; 91 margin-left: 2px;
92 float: left; 92 float: left;
93 padding: 6px 12px; 93 padding: 6px 12px;
94 background-color: #999999; 94 background-color: #999999;
95 position: relative; 95 position: relative;
96 } 96 }
97 nav ul li i.fa{ 97 nav ul li i.fa{
98 position: absolute; 98 position: absolute;
99 color: #ffffff; 99 color: #ffffff;
100 font-size: 18px; 100 font-size: 18px;
101 right: -4px; 101 right: -4px;
102 top: 50%; 102 top: 50%;
103 transform: translateX(-50%) translateY(-50%); 103 transform: translateX(-50%) translateY(-50%);
104 -webkit-transform: translateX(-50%) translateY(-50%); 104 -webkit-transform: translateX(-50%) translateY(-50%);
105 } 105 }
106 nav ul li a{ 106 nav ul li a{
107 color: #ffffff; 107 color: #ffffff;
108 } 108 }
109 nav ul li:hover a{ 109 nav ul li:hover a{
110 text-decoration: none; 110 text-decoration: none;
111 color: #ffffff; 111 color: #ffffff;
112 } 112 }
113 nav ul li.action{ 113 nav ul li.action{
114 color: #ffffff; 114 color: #ffffff;
115 background-color: #ed1d24; 115 background-color: #ed1d24;
116 } 116 }
117 /*ASIDE*/ 117 /*ASIDE*/
118 aside{ 118 aside{
119 margin: 10px 0; 119 margin: 10px 0;
120 } 120 }
121 121
122 aside .break-down{ 122 aside .break-down{
123 padding: 0 0; 123 padding: 0 0;
124 } 124 }
125 aside .break-down i.fa{ 125 aside .break-down i.fa{
126 font-size: 35px; 126 font-size: 35px;
127 color: #ff0000; 127 color: #ff0000;
128 } 128 }
129 aside .break-line{ 129 aside .break-line{
130 height: 10px; 130 height: 10px;
131 } 131 }
132 aside .break-line hr{ 132 aside .break-line hr{
133 border-top: 1px dotted #cccccc; 133 border-top: 1px dotted #cccccc;
134 } 134 }
135 aside .step{ 135 aside .step{
136 margin: 0 0; 136 margin: 0 0;
137 } 137 }
138 aside .step .title{ 138 aside .step .title{
139 font-size: 15px; 139 font-size: 15px;
140 line-height: 16px; 140 line-height: 16px;
141 font-weight: bold; 141 font-weight: bold;
142 margin-bottom: 3px; 142 margin-bottom: 3px;
143 } 143 }
144 aside .step .title-notice{ 144 aside .step .title-notice{
145 font-size: 13px; 145 font-size: 13px;
146 line-height: 16px; 146 line-height: 16px;
147 margin-bottom: 3px; 147 margin-bottom: 3px;
148 } 148 }
149 aside .step .title-notice .require{ 149 aside .step .title-notice .require{
150 font-size: 10px; 150 font-size: 10px;
151 } 151 }
152 aside .step .step-box{ 152 aside .step .step-box{
153 border: 2px solid #dcdcdc; 153 border: 2px solid #dcdcdc;
154 font-size: 12px; 154 font-size: 12px;
155 155
156 } 156 }
157 /*Step 1*/ 157 /*Step 1*/
158 aside .step .step-box .tshirt-design{ 158 aside .step .step-box .tshirt-design{
159 border: 1px solid #cccccc; 159 border: 1px solid #cccccc;
160 background-color: #f5f5f5; 160 background-color: #f5f5f5;
161 margin: 10px 10px; 161 margin: 10px 10px;
162 } 162 }
163 aside .step .step-box .tshirt-design:hover{ 163 aside .step .step-box .tshirt-design:hover{
164 border: 1px solid #ff0000; 164 border: 1px solid #ff0000;
165 } 165 }
166 aside .step .step-box .tshirt-design button:hover{ 166 aside .step .step-box .tshirt-design button:hover{
167 background-color: #fa7b7b; 167 background-color: #fa7b7b;
168 border: 1px solid #fa7b7b; 168 border: 1px solid #fa7b7b;
169 } 169 }
170 aside .step .step-box .tshirt-design div{ 170 aside .step .step-box .tshirt-design div{
171 float: left; 171 float: left;
172 } 172 }
173 aside .step .step-box .tshirt-design .icon{ 173 aside .step .step-box .tshirt-design .icon{
174 padding: 4px 4px; 174 padding: 4px 4px;
175 border-right: 1px solid #cccccc; 175 border-right: 1px solid #cccccc;
176 176
177 } 177 }
178 aside .step .step-box .tshirt-design .icon img{ 178 aside .step .step-box .tshirt-design .icon img{
179 height: 50px; 179 height: 50px;
180 } 180 }
181 aside .step .step-box .tshirt-design .name{ 181 aside .step .step-box .tshirt-design .name{
182 padding: 10px 10px; 182 padding: 10px 10px;
183 183
184 } 184 }
185 aside .step .step-box .tshirt-design .action{ 185 aside .step .step-box .tshirt-design .action{
186 padding: 10px 10px; 186 padding: 10px 10px;
187 float: right; 187 float: right;
188 188
189 } 189 }
190 aside .step .step-box .tshirt-design .action button{ 190 aside .step .step-box .tshirt-design .action button{
191 padding: 8px 10px; 191 padding: 8px 10px;
192 } 192 }
193 /*Step 2*/ 193 /*Step 2*/
194 aside .step .step-box .tshirt-color{ 194 aside .step .step-box .tshirt-color{
195 padding: 6px 10px; 195 padding: 6px 10px;
196 position: relative; 196 position: relative;
197 } 197 }
198 aside .step .step-box .tshirt-color ul.choice-color{ 198 aside .step .step-box .tshirt-color ul.choice-color{
199 float: left; 199 float: left;
200 list-style: none; 200 list-style: none;
201 padding-left: 0; 201 padding-left: 0;
202 width: 100%; 202 width: 100%;
203 margin-bottom: 3px; 203 margin-bottom: 3px;
204 } 204 }
205 aside .step .step-box .tshirt-color ul.choice-color li{ 205 aside .step .step-box .tshirt-color ul.choice-color li{
206 margin: 0 8px 4px 0; 206 margin: 0 8px 4px 0;
207 border: 1px solid #cccccc; 207 border: 1px solid #cccccc;
208 padding: 2px 2px; 208 padding: 2px 2px;
209 float: left; 209 float: left;
210 cursor: pointer; 210 cursor: pointer;
211 } 211 }
212 aside .step .step-box .tshirt-color ul.choice-color li.action{ 212 aside .step .step-box .tshirt-color ul.choice-color li.action{
213 border: 1px solid #ff0000; 213 border: 1px solid #ff0000;
214 } 214 }
215 aside .step .step-box .tshirt-color ul.choice-color li:hover{ 215 aside .step .step-box .tshirt-color ul.choice-color li:hover{
216 border: 1px solid #ff0000; 216 border: 1px solid #ff0000;
217 } 217 }
218 aside .step .step-box .tshirt-color ul.choice-color li div{ 218 aside .step .step-box .tshirt-color ul.choice-color li div{
219 height: 30px; 219 height: 30px;
220 width: 30px; 220 width: 30px;
221 } 221 }
222 222
223 aside .step .step-box .tshirt-color ul.choice-color li.white div{ 223 aside .step .step-box .tshirt-color ul.choice-color li.white div{
224 background-color: #ece7e4; 224 background-color: #ece7e4;
225 } 225 }
226 aside .step .step-box .tshirt-color ul.choice-color li.blue div{ 226 aside .step .step-box .tshirt-color ul.choice-color li.blue div{
227 background-color: #e7dfd0; 227 background-color: #e7dfd0;
228 } 228 }
229 aside .step .step-box .tshirt-color .color-name{ 229 aside .step .step-box .tshirt-color .color-name{
230 width: 100%; 230 width: 100%;
231 font-size: 10px; 231 font-size: 10px;
232 } 232 }
233 aside .step .step-box .tshirt-color .view-more{ 233 aside .step .step-box .tshirt-color .view-more{
234 position: absolute; 234 position: absolute;
235 bottom: 6px; 235 bottom: 6px;
236 right: 10px; 236 right: 10px;
237 } 237 }
238 /*Step 3*/ 238 /*Step 3*/
239 aside .step .step-box .tshirt-saveorder{ 239 aside .step .step-box .tshirt-saveorder{
240 padding: 10px 10px 6px 10px; 240 padding: 10px 10px 6px 10px;
241 } 241 }
242 aside .step .step-box .tshirt-saveorder .action{ 242 aside .step .step-box .tshirt-saveorder .action{
243 width: 50%; 243 width: 50%;
244 float: left; 244 float: left;
245 } 245 }
246 aside .step .step-box .tshirt-saveorder .action:first-child{ 246 aside .step .step-box .tshirt-saveorder .action:first-child{
247 padding-right: 5px; 247 padding-right: 5px;
248 } 248 }
249 aside .step .step-box .tshirt-saveorder .action:last-child{ 249 aside .step .step-box .tshirt-saveorder .action:last-child{
250 padding-left: 5px; 250 padding-left: 5px;
251 } 251 }
252 aside .step .step-box .tshirt-saveorder .action button{ 252 aside .step .step-box .tshirt-saveorder .action button{
253 padding: 8px 10px; 253 padding: 8px 10px;
254 254
255 } 255 }
256 aside .step .step-box .tshirt-saveorder .action button .text{ 256 aside .step .step-box .tshirt-saveorder .action button .text{
257 float: left; 257 float: left;
258 width: 80%; 258 width: 80%;
259 text-align: center; 259 text-align: center;
260 padding-left: 10px; 260 padding-left: 10px;
261 vertical-align: bottom; 261 vertical-align: bottom;
262 } 262 }
263 aside .step .step-box .tshirt-saveorder .action button .arrow{ 263 aside .step .step-box .tshirt-saveorder .action button .arrow{
264 float: left; 264 float: left;
265 width: 20%; 265 width: 20%;
266 height: 40px; 266 height: 40px;
267 position: relative; 267 position: relative;
268 } 268 }
269 aside .step .step-box .tshirt-saveorder .action button .arrow i.fa{ 269 aside .step .step-box .tshirt-saveorder .action button .arrow i.fa{
270 position: absolute; 270 position: absolute;
271 top: 50%; 271 top: 50%;
272 right: -6px; 272 right: -6px;
273 transform: translateX(-50%) translateY(-50%); 273 transform: translateX(-50%) translateY(-50%);
274 -webkit-transform: translateX(-50%) translateY(-50%); 274 -webkit-transform: translateX(-50%) translateY(-50%);
275 } 275 }
276 aside .step .step-box .tshirt-saveorder .notice{ 276 aside .step .step-box .tshirt-saveorder .notice{
277 padding: 5px 0 0 0; 277 padding: 5px 0 0 0;
278 } 278 }
279 /*Step 4*/ 279 /*Step 4*/
280 aside .step .title-notice{ 280 aside .step .title-notice{
281 281
282 } 282 }
283 aside .step .step-box .change-design{ 283 aside .step .step-box .change-design{
284 padding: 4px 4px; 284 padding: 4px 4px;
285 } 285 }
286 aside .step .step-box .change-design table{ 286 aside .step .step-box .change-design table{
287 287
288 } 288 }
289 aside .step .step-box .change-design table tr{ 289 aside .step .step-box .change-design table tr{
290 border-bottom: 1px dotted #cccccc; 290 border-bottom: 1px dotted #cccccc;
291 } 291 }
292 aside .step .step-box .change-design table tr:last-child{ 292 aside .step .step-box .change-design table tr:last-child{
293 border-bottom: 0; 293 border-bottom: 0;
294 } 294 }
295 295
296 /*Step 5- finish*/ 296 /*Step 5- finish*/
297 aside .step .finish-design{ 297 aside .step .finish-design{
298 padding: 20px 0; 298 padding: 20px 0;
299 } 299 }
300 aside .step .finish-design button{ 300 aside .step .finish-design button{
301 width: 100%; 301 width: 100%;
302 padding: 8px 10px; 302 padding: 8px 10px;
303 } 303 }
304 304
305 /*DESIGN CONTENT*/ 305 /*DESIGN CONTENT*/
306 #tshirt-content{ 306 #tshirt-content{
307 position: relative; 307 position: relative;
308 } 308 }
309 #tshirt-content .switch-border-design{ 309 #tshirt-content .switch-border-design{
310 position: absolute; 310 position: absolute;
311 top: 5px; 311 top: 5px;
312 right: 10px; 312 right: 10px;
313 color: red; 313 color: red;
314 font-size: 11px; 314 font-size: 11px;
315 } 315 }
316 #tshirt-content .tshirt-image{ 316 #tshirt-content .tshirt-image{
317 padding: 20px 0 0 0; 317 padding: 20px 0 0 0;
318 position: relative; 318 position: relative;
319 height: 100%; 319 height: 100%;
320 width: 100%; 320 width: 100%;
321 } 321 }
322 322
323 #tshirt-content .tshirt-image img{ 323 #tshirt-content .tshirt-image img{
324 width: 100%; 324 width: 100%;
325 } 325 }
326 326
327 #tshirt-content .tshirt-choice{ 327 #tshirt-content .tshirt-choice{
328 328
329 } 329 }
330 #tshirt-content .tshirt-choice ul{ 330 #tshirt-content .tshirt-choice ul{
331 list-style: none; 331 list-style: none;
332 padding-left: 0; 332 padding-left: 0;
333 display: table; 333 display: table;
334 margin: auto; 334 margin: auto;
335 } 335 }
336 #tshirt-content .tshirt-choice ul li{ 336 #tshirt-content .tshirt-choice ul li{
337 float: left; 337 float: left;
338 margin: 10px 10px; 338 margin: 10px 10px;
339 cursor: pointer; 339 cursor: pointer;
340 } 340 }
341 #tshirt-content .tshirt-choice ul li .image{ 341 #tshirt-content .tshirt-choice ul li .image{
342 border: 1px solid #cccccc; 342 border: 1px solid #cccccc;
343 padding: 3px 3px; 343 padding: 3px 3px;
344 } 344 }
345 #tshirt-content .tshirt-choice ul li.focus{ 345 #tshirt-content .tshirt-choice ul li.focus{
346 346
347 } 347 }
348 #tshirt-content .tshirt-choice ul li.focus .image{ 348 #tshirt-content .tshirt-choice ul li.focus .image{
349 border: 1px solid #ff0000; 349 border: 1px solid #ff0000;
350 } 350 }
351 #tshirt-content .tshirt-choice ul li .image img{ 351 #tshirt-content .tshirt-choice ul li .image img{
352 width: 50px; 352 width: 50px;
353 height: auto; 353 height: auto;
354 } 354 }
355 /*MODAL Design*/ 355 /*MODAL Design*/
356 #tshirt-design{ 356 #tshirt-design{
357 background-color: #666666; 357 background-color: #666666;
358 } 358 }
359 #tshirt-design .modal-dialog{ 359 #tshirt-design .modal-dialog{
360 /*width: 800px!important;*/ 360 /*width: 800px!important;*/
361 margin: 0 auto; 361 margin: 0 auto;
362 } 362 }
363 #tshirt-design .modal-dialog .modal-content{ 363 #tshirt-design .modal-dialog .modal-content{
364 background-color: transparent; 364 background-color: transparent;
365 border-radius: 0; 365 border-radius: 0;
366 border: 0; 366 border: 0;
367 -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important; 367 -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important;
368 box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important; 368 box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important;
369 } 369 }
370 #tshirt-design .modal-dialog .modal-content .modal-header{ 370 #tshirt-design .modal-dialog .modal-content .modal-header{
371 padding: 0 0 10px 0; 371 padding: 0 0 10px 0;
372 border-bottom: 0; 372 border-bottom: 0;
373 border-shadow: none!important; 373 border-shadow: none!important;
374 } 374 }
375 #tshirt-design .modal-dialog .modal-content .modal-body{ 375 #tshirt-design .modal-dialog .modal-content .modal-body{
376 background-color: #f5f5f5; 376 background-color: #f5f5f5;
377 padding: 0 0; 377 padding: 0 0;
378 } 378 }
379 #tshirt-design header{ 379 #tshirt-design header{
380 border-bottom: 1px solid #cccccc; 380 border-bottom: 1px solid #cccccc;
381 background-color: #dddddd; 381 background-color: #dddddd;
382 } 382 }
383 #tshirt-design header ul.nav{ 383 #tshirt-design header ul.nav{
384 padding-left: 0; 384 padding-left: 0;
385 list-style: none; 385 list-style: none;
386 } 386 }
387 #tshirt-design header ul.nav li{ 387 #tshirt-design header ul.nav li{
388 float: left; 388 float: left;
389 padding: 8px 26px; 389 padding: 8px 26px;
390 border-right: 1px solid #cccccc; 390 border-right: 1px solid #cccccc;
391 font-size: 14px; 391 font-size: 14px;
392 cursor: pointer; 392 cursor: pointer;
393 } 393 }
394 #tshirt-design header ul.nav li:hover, #tshirt-design header ul.nav li.active{ 394 #tshirt-design header ul.nav li:hover, #tshirt-design header ul.nav li.active{
395 background-color: red; 395 background-color: red;
396 color: #ffffff; 396 color: #ffffff;
397 } 397 }
398 #tshirt-design header ul.nav li:hover i.fa, #tshirt-design header ul.nav li.active i.fa{ 398 #tshirt-design header ul.nav li:hover i.fa, #tshirt-design header ul.nav li.active i.fa{
399 color: #ffffff; 399 color: #ffffff;
400 } 400 }
401 #tshirt-design header ul.nav li i.fa{ 401 #tshirt-design header ul.nav li i.fa{
402 color: #fe070f; 402 color: #fe070f;
403 font-size: 20px; 403 font-size: 20px;
404 margin-right: 10px; 404 margin-right: 10px;
405 } 405 }
406 #tshirt-design header .action{ 406 #tshirt-design header .action{
407 407
408 } 408 }
409 #tshirt-design header .action button{ 409 #tshirt-design header .action button{
410 padding: 2px 10px; 410 padding: 2px 10px;
411 margin: 6px 10px; 411 margin: 6px 10px;
412 } 412 }
413 #tshirt-design header .action button:hover{ 413 #tshirt-design header .action button:hover{
414 background-color: red; 414 background-color: red;
415 color: #ffffff; 415 color: #ffffff;
416 } 416 }
417 417
418 /*Aside modal*/ 418 /*Aside modal*/
419 .aside{ 419 .aside{
420 } 420 }
421 421
422 .aside .box-design-option{ 422 .aside .box-design-option{
423 list-style: none; 423 list-style: none;
424 padding-left: 0; 424 padding-left: 0;
425 margin-top: 10px; 425 margin-top: 10px;
426 } 426 }
427 427
428 .aside .box-design-option li{ 428 .aside .box-design-option li{
429 border: 1px solid #cdcdcd; 429 border: 1px solid #cdcdcd;
430 position: relative; 430 position: relative;
431 /*cursor: pointer;*/ 431 /*cursor: pointer;*/
432 margin-bottom: 10px; 432 margin-bottom: 10px;
433 } 433 }
434 .aside .box-design-option li .hover{ 434 .aside .box-design-option li .hover{
435 background-color: #fddad4; 435 background-color: #fddad4;
436 opacity: 0.6; 436 opacity: 0.6;
437 position: absolute; 437 position: absolute;
438 width: 100%; 438 width: 100%;
439 height: 100%; 439 height: 100%;
440 display: none; 440 display: none;
441 } 441 }
442 .aside .box-design-option li:hover .hover{ 442 .aside .box-design-option li:hover .hover{
443 display: block; 443 display: block;
444 } 444 }
445 445
446 .aside .box-design-option li .title{ 446 .aside .box-design-option li .title{
447 background: url("../images/bg1.png") repeat #cdcdcd; 447 background: url("../images/bg1.png") repeat #cdcdcd;
448 padding: 3px 10px; 448 padding: 3px 10px;
449 } 449 }
450 .aside .box-design-option li .title i.fa{ 450 .aside .box-design-option li .title i.fa{
451 color: #000000; 451 color: #000000;
452 } 452 }
453 453
454 .aside .box-design-option li .content{ 454 .aside .box-design-option li .content{
455 455
456 } 456 }
457 .aside .box-design-option li .content i.fa{ 457 .aside .box-design-option li .content i.fa{
458 font-size: 30px; 458 font-size: 30px;
459 color: #fe070f; 459 color: #fe070f;
460 margin: 8px 0; 460 margin: 8px 0;
461 } 461 }
462 .aside .box-design-option li .content .des{ 462 .aside .box-design-option li .content .des{
463 padding: 3px 10px 3px 0; 463 padding: 3px 10px 3px 0;
464 } 464 }
465 .aside .box-design-option li .content .color-patterns { 465 .aside .box-design-option li .content .color-patterns {
466 width: 100%; 466 width: 100%;
467 border: #bbb solid 1px; 467 border: #bbb solid 1px;
468 background: #FFF; 468 background: #FFF;
469 margin-top: 5px; 469 margin-top: 5px;
470 min-height: 65px; 470 min-height: 65px;
471 } 471 }
472 472
473 .aside .box-design-option li .content .color-patterns .color-pattern-item{ 473 .aside .box-design-option li .content .color-patterns .color-pattern-item{