TRUONG / T-Shats Frontend

Download as
Browse Code ยป

Commit 97d46dae2bc7953e638b27a7aaa995a128484369

Authored by Dang YoungWorld
1 parent 2f1fcd7ad6
Exists in master

update font text

Showing 3 changed files with 226 additions and 37 deletions Inline Diff

1 <!doctype html> 1 <!doctype html>
2 <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" id="ng-app" ng-app=""> <![endif]--> 2 <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" id="ng-app" ng-app=""> <![endif]-->
3 <!--[if IE 8]> <html class="no-js lt-ie9" id="ng-app" ng-app=""> <![endif]--> 3 <!--[if IE 8]> <html class="no-js lt-ie9" id="ng-app" ng-app=""> <![endif]-->
4 <!--[if gt IE 8]><!--> <html class="no-js" ng-app> <!--<![endif]--> 4 <!--[if gt IE 8]><!--> <html class="no-js" ng-app> <!--<![endif]-->
5 <head> 5 <head>
6 <meta charset="utf-8"> 6 <meta charset="utf-8">
7 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta http-equiv="X-UA-Compatible" content="IE=edge">
8 <title></title> 8 <title></title>
9 <meta name="description" content=""> 9 <meta name="description" content="">
10 <meta name="viewport" content="width=device-width"> 10 <meta name="viewport" content="width=device-width">
11 <!-- Place favicon.ico and apple-touch-icon.png in the root directory --> 11 <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
12 <!-- build:css styles/vendor.css --> 12 <!-- build:css styles/vendor.css -->
13 <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" /> 13 <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
14 <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css" /> 14 <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css" />
15 <link rel="stylesheet" href="bower_components/select2/select2.css"> 15 <link rel="stylesheet" href="bower_components/select2/select2.css">
16 <!-- bower:css --> 16 <!-- bower:css -->
17 <!-- endbower --> 17 <!-- endbower -->
18 <!-- endbuild --> 18 <!-- endbuild -->
19 <!-- build:css({.tmp,app}) styles/main.css --> 19 <!-- build:css({.tmp,app}) styles/main.css -->
20 <link rel="stylesheet" href="styles/main.css"> 20 <link rel="stylesheet" href="styles/main.css">
21 <!-- endbuild --> 21 <!-- endbuild -->
22 </head> 22 </head>
23 <body ng-app="tshatsApp"> 23 <body ng-app="tshatsApp">
24 <!--[if lt IE 7]> 24 <!--[if lt IE 7]>
25 <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> 25 <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
26 <![endif]--> 26 <![endif]-->
27 27
28 <!-- Add your site or application content here --> 28 <!-- Add your site or application content here -->
29 <div class="container" ng-view></div> 29 <div class="container" ng-view></div>
30 30
31 <!-- Google Analytics: change UA-XXXXX-X to be your site's ID --> 31 <!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
32 <script> 32 <script>
33 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ 33 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
34 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), 34 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
35 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) 35 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
36 })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); 36 })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
37 37
38 ga('create', 'UA-XXXXX-X'); 38 ga('create', 'UA-XXXXX-X');
39 ga('send', 'pageview'); 39 ga('send', 'pageview');
40 </script> 40 </script>
41 <script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script> 41 <script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
42 <script type="text/javascript" src="bower_components/fabric.js/dist/fabric.min.js"></script> 42 <script type="text/javascript" src="bower_components/fabric.js/dist/fabric.min.js"></script>
43 <script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script> 43 <script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
44 <script type="text/javascript" src="bower_components/fabric-customise-controls/dist/customiseControls.min.js"></script> 44 <script type="text/javascript" src="bower_components/fabric-customise-controls/dist/customiseControls.min.js"></script>
45 <!--[if lt IE 9]> 45 <!--[if lt IE 9]>
46 <script src="bower_components/es5-shim/es5-shim.js"></script> 46 <script src="bower_components/es5-shim/es5-shim.js"></script>
47 <script src="bower_components/json3/lib/json3.min.js"></script> 47 <script src="bower_components/json3/lib/json3.min.js"></script>
48 <![endif]--> 48 <![endif]-->
49 <script type="text/javascript"> 49 <script type="text/javascript">
50 var VERSION = '30-11_03'; 50 var VERSION = '30-11_04';
51 var require = { 51 var require = {
52 urlArgs: "ver="+VERSION, 52 urlArgs: "ver="+VERSION,
53 }; 53 };
54 </script> 54 </script>
55 <script src="bower_components/requirejs/require.js" data-main="scripts/main"></script> 55 <script src="bower_components/requirejs/require.js" data-main="scripts/main"></script>
56 </body> 56 </body>
57 </html> 57 </html>
58 58
app/scripts/controllers/tshirtdesign.js
Diff comments   View file @ 97d46da
1 define(['app'], function (app) { 1 define(['app'], function (app) {
2 app.controller('TshirtdesignCtrl', function ($scope, $rootScope, $window, $timeout, $illustration, $favorite) { 2 app.controller('TshirtdesignCtrl', function ($scope, $rootScope, $window, $timeout, $illustration, $favorite) {
3 $scope.Math = window.Math; 3 $scope.Math = window.Math;
4 $scope.savedFrameView = 'views/design_part/tshirt-saved.html?ver='+VERSION; 4 $scope.savedFrameView = 'views/design_part/tshirt-saved.html?ver='+VERSION;
5 var canvas = new fabric.Canvas('main-design-container'); 5 var canvas = new fabric.Canvas('main-design-container');
6 var diffX = 40, diffY = 40; 6 var diffX = 40, diffY = 40;
7 var _coorTrash_x = 567; 7 var _coorTrash_x = 567;
8 var _coorTrash_y = 545; 8 var _coorTrash_y = 545;
9 var ObjectOrd=0; 9 var ObjectOrd=0;
10 //Set width and height canvas 10 //Set width and height canvas
11 function setSizeCanvas() { 11 function setSizeCanvas() {
12 if(typeof $rootScope.placeTshirt.place == 'undefined') 12 if(typeof $rootScope.placeTshirt.place == 'undefined')
13 return; 13 return;
14 14
15 var _modalWidth = $('.modal-dialog').width(); 15 var _modalWidth = $('.modal-dialog').width();
16 var _windowWidth = window.innerWidth; 16 var _windowWidth = window.innerWidth;
17 var place = $rootScope.placeTshirt.place; 17 var place = $rootScope.placeTshirt.place;
18 18
19 switch (place) { 19 switch (place) {
20 case 't_shirt_p_1' : 20 case 't_shirt_p_1' :
21 $scope.designCanvasClass = 'design-content-t_shirt_p_1'; 21 $scope.designCanvasClass = 'design-content-t_shirt_p_1';
22 if(_windowWidth > 762) { 22 if(_windowWidth > 762) {
23 var _contentCanvasWidth = (_modalWidth*8/12)/1.2; 23 var _contentCanvasWidth = (_modalWidth*8/12)/1.2;
24 var _contentCanvasHeight = _contentCanvasWidth; 24 var _contentCanvasHeight = _contentCanvasWidth;
25 } else { 25 } else {
26 var _contentCanvasWidth = _windowWidth-70; 26 var _contentCanvasWidth = _windowWidth-70;
27 var _contentCanvasHeight = _contentCanvasWidth; 27 var _contentCanvasHeight = _contentCanvasWidth;
28 } 28 }
29 break; 29 break;
30 case 't_shirt_p_2' : 30 case 't_shirt_p_2' :
31 $scope.designCanvasClass = 'design-content-t_shirt_p_2'; 31 $scope.designCanvasClass = 'design-content-t_shirt_p_2';
32 if(_windowWidth > 762) { 32 if(_windowWidth > 762) {
33 var _contentCanvasWidth = (_modalWidth*8/12)/1.2; 33 var _contentCanvasWidth = (_modalWidth*8/12)/1.2;
34 var _contentCanvasHeight = (_modalWidth*8/12)/2.2; 34 var _contentCanvasHeight = (_modalWidth*8/12)/2.2;
35 35
36 } else { 36 } else {
37 var _contentCanvasWidth = _windowWidth-70; 37 var _contentCanvasWidth = _windowWidth-70;
38 var _contentCanvasHeight = (_windowWidth)/2.5; 38 var _contentCanvasHeight = (_windowWidth)/2.5;
39 } 39 }
40 break; 40 break;
41 default: 41 default:
42 break; 42 break;
43 } 43 }
44 44
45 canvas.setWidth(_contentCanvasWidth); 45 canvas.setWidth(_contentCanvasWidth);
46 canvas.setHeight(_contentCanvasHeight); 46 canvas.setHeight(_contentCanvasHeight);
47 47
48 var mainDsWidth = (_modalWidth*8/12)-30; 48 var mainDsWidth = (_modalWidth*8/12)-30;
49 var mainDsHeight = (place == 't_shirt_p_1' ? 80 : 400) + _contentCanvasHeight; 49 var mainDsHeight = (place == 't_shirt_p_1' ? 80 : 400) + _contentCanvasHeight;
50 // console.log(mainDsWidth, mainDsHeight); 50 // console.log(mainDsWidth, mainDsHeight);
51 diffX = 40; 51 diffX = 40;
52 diffY = (mainDsHeight - _contentCanvasHeight)/2; 52 diffY = (mainDsHeight - _contentCanvasHeight)/2;
53 _coorTrash_x = _contentCanvasWidth + 20; 53 _coorTrash_x = _contentCanvasWidth + 20;
54 _coorTrash_y = _contentCanvasHeight + diffY - 90; 54 _coorTrash_y = _contentCanvasHeight + diffY - 90;
55 console.log(_coorTrash_x, _coorTrash_y); 55 console.log(_coorTrash_x, _coorTrash_y);
56 } 56 }
57 setSizeCanvas(); 57 setSizeCanvas();
58 //Window resize event 58 //Window resize event
59 $(window).resize(function () { 59 $(window).resize(function () {
60 setSizeCanvas(); 60 setSizeCanvas();
61 }); 61 });
62 62
63 //Custom control 63 //Custom control
64 fabric.Object.prototype.transparentCorners = true; 64 fabric.Object.prototype.transparentCorners = true;
65 fabric.Object.prototype.hasRotatingPoint = false; 65 fabric.Object.prototype.hasRotatingPoint = false;
66 canvas.selection = false; 66 canvas.selection = false;
67 67
68 var ctrVisible = {tl: false, ml:false, bl:false, mb: false, br: true, mr: false, tr: true, mt: true, mtr: false}; 68 var ctrVisible = {tl: false, ml:false, bl:false, mb: false, br: true, mr: false, tr: true, mt: true, mtr: false};
69 for(key in ctrVisible) { 69 for(key in ctrVisible) {
70 fabric.Object.prototype.setControlVisible(key,ctrVisible[key]); 70 fabric.Object.prototype.setControlVisible(key,ctrVisible[key]);
71 } 71 }
72 72
73 fabric.Object.prototype.customiseCornerIcons({ 73 fabric.Object.prototype.customiseCornerIcons({
74 settings: { 74 settings: {
75 borderColor: '#0000ff', 75 borderColor: '#0000ff',
76 cornerSize: 25, 76 cornerSize: 25,
77 cornerShape: 'circle', 77 cornerShape: 'circle',
78 cornerBackgroundColor: '#0171b4', 78 cornerBackgroundColor: '#0171b4',
79 cornerPadding: 6 79 cornerPadding: 6
80 }, 80 },
81 mt: { 81 mt: {
82 icon: 'images/control-icon/ok.png' 82 icon: 'images/control-icon/ok.png'
83 }, 83 },
84 br: { 84 br: {
85 icon: 'images/control-icon/resize.png' 85 icon: 'images/control-icon/resize.png'
86 }, 86 },
87 tr: { 87 tr: {
88 icon: 'images/control-icon/rotate.png' 88 icon: 'images/control-icon/rotate.png'
89 } 89 }
90 }); 90 });
91 91
92 fabric.Canvas.prototype.customiseControls({ 92 fabric.Canvas.prototype.customiseControls({
93 mt: { 93 mt: {
94 cursor: 'pointer', 94 cursor: 'pointer',
95 action: function(e, target) { 95 action: function(e, target) {
96 fabric.Object.prototype.selectable = false; 96 fabric.Object.prototype.selectable = false;
97 canvas.deactivateAll().renderAll(); 97 canvas.deactivateAll().renderAll();
98 delete currentObj; 98 delete currentObj;
99 $scope.designTextValue = ''; 99 $scope.designTextValue = '';
100 $timeout(function(){ 100 $timeout(function(){
101 fabric.Object.prototype.selectable = true; 101 fabric.Object.prototype.selectable = true;
102 },20); 102 },20);
103 } 103 }
104 }, 104 },
105 br: { 105 br: {
106 106
107 }, 107 },
108 tr: { 108 tr: {
109 action: 'rotate', 109 action: 'rotate',
110 cursor: 'crosshair' 110 cursor: 'crosshair'
111 } 111 }
112 }); 112 });
113 113
114 canvas.on({ 114 canvas.on({
115 'object:added' : onIllustrationAdded, 115 'object:added' : onIllustrationAdded,
116 'object:moving' : onIllustrationMoving, 116 'object:moving' : onIllustrationMoving,
117 'object:scaling' : onIllustrationChange, 117 'object:scaling' : onIllustrationChange,
118 'object:rotating' : onIllustrationChange, 118 'object:rotating' : onIllustrationChange,
119 'object:selected' : onObjectSelected, 119 'object:selected' : onObjectSelected,
120 'object:modified' : onIllustrationModifield, 120 'object:modified' : onIllustrationModifield,
121 'selection:cleared' : onObjectOut, 121 'selection:cleared' : onObjectOut,
122 }); 122 });
123 123
124 var currentObj; 124 var currentObj;
125 var listObj = []; 125 var listObj = [];
126 var stateObj = []; 126 var stateObj = [];
127 var indexCurr = 0; 127 var indexCurr = 0;
128 var indexCurr2 = 0; 128 var indexCurr2 = 0;
129 var actionObj = false; 129 var actionObj = false;
130 var refreshObj = true; 130 var refreshObj = true;
131 var spacingNum = 0; 131 var spacingNum = 0;
132 $scope.itemFont = 0; 132 $scope.itemFont = 0;
133 133
134 $scope.showDesignTab = function(tab){ 134 $scope.showDesignTab = function(tab){
135 canvas.deactivateAll().renderAll(); 135 canvas.deactivateAll().renderAll();
136 $rootScope.isShowLeftPanel = tab; 136 $rootScope.isShowLeftPanel = tab;
137 switch (tab) { 137 switch (tab) {
138 case 'illustration': { 138 case 'illustration': {
139 $scope.IllustrationList = $illustration.getAll(); 139 $scope.IllustrationList = $illustration.getAll();
140 $rootScope.outputImage = false; 140 $rootScope.outputImage = false;
141 $scope.illustrationSelectConfig = { 141 $scope.illustrationSelectConfig = {
142 allowClear:true 142 allowClear:true
143 }; 143 };
144 $timeout(function(){ 144 $timeout(function(){
145 $('.illstration-item').tooltip({ 145 $('.illstration-item').tooltip({
146 animated: 'fade', 146 animated: 'fade',
147 placement: 'bottom', 147 placement: 'bottom',
148 html: true 148 html: true
149 }); 149 });
150 },1000); 150 },1000);
151 break; 151 break;
152 } 152 }
153 case 'text': { 153 case 'text': {
154 break; 154 break;
155 } 155 }
156 } 156 }
157 }; 157 };
158 $scope.showDesignTab('default'); 158 $scope.showDesignTab('default');
159 159
160 160
161 function onIllustrationAdded(options){ 161 function onIllustrationAdded(options){
162 var object = options.target; 162 var object = options.target;
163 163
164 if (actionObj === true) { 164 if (actionObj === true) {
165 stateObj = [stateObj[indexCurr2]]; 165 stateObj = [stateObj[indexCurr2]];
166 listObj = [listObj[indexCurr2]]; 166 listObj = [listObj[indexCurr2]];
167 167
168 actionObj = false; 168 actionObj = false;
169 console.log(stateObj); 169 console.log(stateObj);
170 indexCurr = 1; 170 indexCurr = 1;
171 } 171 }
172 object.saveState(); 172 object.saveState();
173 173
174 // console.log(object.originalState); 174 // console.log(object.originalState);
175 stateObj[indexCurr] = JSON.stringify(object.originalState); 175 stateObj[indexCurr] = JSON.stringify(object.originalState);
176 listObj[indexCurr] = object; 176 listObj[indexCurr] = object;
177 indexCurr++; 177 indexCurr++;
178 indexCurr2 = indexCurr - 1; 178 indexCurr2 = indexCurr - 1;
179 refreshObj = true; 179 refreshObj = true;
180 } 180 }
181 181
182 function onIllustrationModifield(options){ 182 function onIllustrationModifield(options){
183 $('.object-border').hide(); 183 $('.object-border').hide();
184 // 184 //
185 var pointer = canvas.getPointer(options.e); 185 var pointer = canvas.getPointer(options.e);
186 if (pointer.x >= _coorTrash_x && pointer.y >= _coorTrash_y && pointer.x <= _coorTrash_x+50 && pointer.y <= _coorTrash_y+70){ 186 if (pointer.x >= _coorTrash_x && pointer.y >= _coorTrash_y && pointer.x <= _coorTrash_x+50 && pointer.y <= _coorTrash_y+70){
187 canvas.getActiveObject().remove(); 187 canvas.getActiveObject().remove();
188 $('.design-content .trash-design img').attr({'src':'images/trash.png'}); 188 $('.design-content .trash-design img').attr({'src':'images/trash.png'});
189 return; 189 return;
190 } 190 }
191 191
192 // 192 //
193 try{ 193 try{
194 var objOffset = canvas.getActiveObject().getBoundingRect(); 194 var objOffset = canvas.getActiveObject().getBoundingRect();
195 var cH = canvas.height, cW = canvas.width, H0 = 20, W0 = 20; 195 var cH = canvas.height, cW = canvas.width, H0 = 20, W0 = 20;
196 //console.log(objOffset,canvas.height,canvas.width); 196 //console.log(objOffset,canvas.height,canvas.width);
197 if (objOffset.left<W0-objOffset.width || objOffset.left>cW-W0 || objOffset.top<H0-objOffset.height || objOffset.top>cH-H0){ 197 if (objOffset.left<W0-objOffset.width || objOffset.left>cW-W0 || objOffset.top<H0-objOffset.height || objOffset.top>cH-H0){
198 if (confirm('ๅ‰Š้™คใ—ใฆใ‚‚ใ‚ˆใ‚ใ—ใ„ใงใ™ใ‹')){ 198 if (confirm('ๅ‰Š้™คใ—ใฆใ‚‚ใ‚ˆใ‚ใ—ใ„ใงใ™ใ‹')){
199 canvas.getActiveObject().remove(); 199 canvas.getActiveObject().remove();
200 }else{ 200 }else{
201 undoCanvas(); 201 undoCanvas();
202 return; 202 return;
203 } 203 }
204 } 204 }
205 }catch (e){ 205 }catch (e){
206 // 206 //
207 } 207 }
208 208
209 var object = options.target; 209 var object = options.target;
210 if (actionObj === true) { 210 if (actionObj === true) {
211 stateObj = [stateObj[indexCurr2]]; 211 stateObj = [stateObj[indexCurr2]];
212 listObj = [listObj[indexCurr2]]; 212 listObj = [listObj[indexCurr2]];
213 213
214 actionObj = false; 214 actionObj = false;
215 console.log(stateObj); 215 console.log(stateObj);
216 indexCurr = 1; 216 indexCurr = 1;
217 } 217 }
218 218
219 object.saveState(); 219 object.saveState();
220 220
221 stateObj[indexCurr] = JSON.stringify(object.originalState); 221 stateObj[indexCurr] = JSON.stringify(object.originalState);
222 listObj[indexCurr] = object; 222 listObj[indexCurr] = object;
223 indexCurr++; 223 indexCurr++;
224 indexCurr2 = indexCurr - 1; 224 indexCurr2 = indexCurr - 1;
225 refreshObj = true; 225 refreshObj = true;
226 } 226 }
227 227
228 function onIllustrationChange(options) { 228 function onIllustrationChange(options) {
229 229
230 } 230 }
231 231
232 function onIllustrationMoving(options) { 232 function onIllustrationMoving(options) {
233 var object = options.target; 233 var object = options.target;
234 var pointer = canvas.getPointer(options.e); 234 var pointer = canvas.getPointer(options.e);
235 // console.log(pointer.x, pointer.y); 235 // console.log(pointer.x, pointer.y);
236 if (pointer.x >= _coorTrash_x && pointer.y >= _coorTrash_y && pointer.x <= _coorTrash_x+50 && pointer.y <= _coorTrash_y+70){ 236 if (pointer.x >= _coorTrash_x && pointer.y >= _coorTrash_y && pointer.x <= _coorTrash_x+50 && pointer.y <= _coorTrash_y+70){
237 $('.design-content .trash-design img').attr({'src':'images/trash-hover.png'}); 237 $('.design-content .trash-design img').attr({'src':'images/trash-hover.png'});
238 }else{ 238 }else{
239 $('.design-content .trash-design img').attr({'src':'images/trash.png'}); 239 $('.design-content .trash-design img').attr({'src':'images/trash.png'});
240 } 240 }
241 241
242 // console.log(object.oCoords,object.originalState); 242 // console.log(object.oCoords,object.originalState);
243 object.setCoords(); 243 object.setCoords();
244 var Coords = object.oCoords; 244 var Coords = object.oCoords;
245 var xAngle = Math.cos(object.getAngle() * (Math.PI / 180))/2; 245 var xAngle = Math.cos(object.getAngle() * (Math.PI / 180))/2;
246 var yAngle = Math.sin(object.getAngle() * (Math.PI / 180))/2; 246 var yAngle = Math.sin(object.getAngle() * (Math.PI / 180))/2;
247 $('#object-border-left').css({'height':Math.ceil(object.originalState.height*object.scaleY), top: Coords.tl.y+diffY, left: Coords.tl.x+diffX}); 247 $('#object-border-left').css({'height':Math.ceil(object.originalState.height*object.scaleY), top: Coords.tl.y+diffY, left: Coords.tl.x+diffX});
248 $('#object-border-right').css({'height':Math.ceil(object.originalState.height*object.scaleY), top: Coords.tr.y+diffY, left: Coords.tr.x+diffX}); 248 $('#object-border-right').css({'height':Math.ceil(object.originalState.height*object.scaleY), top: Coords.tr.y+diffY, left: Coords.tr.x+diffX});
249 $('#object-border-top').css({'width':Math.ceil(object.originalState.width*object.scaleX), top: Coords.tl.y+diffY, left: Coords.tl.x+diffX}); 249 $('#object-border-top').css({'width':Math.ceil(object.originalState.width*object.scaleX), top: Coords.tl.y+diffY, left: Coords.tl.x+diffX});
250 $('#object-border-bottom').css({'width':Math.ceil(object.originalState.width*object.scaleX), top: Coords.bl.y+diffY, left: Coords.bl.x+diffX}); 250 $('#object-border-bottom').css({'width':Math.ceil(object.originalState.width*object.scaleX), top: Coords.bl.y+diffY, left: Coords.bl.x+diffX});
251 $('.object-border').css({ 251 $('.object-border').css({
252 '-ms-transform': 'rotate('+object.getAngle()+'deg)', /* IE 9 */ 252 '-ms-transform': 'rotate('+object.getAngle()+'deg)', /* IE 9 */
253 '-webkit-transform': 'rotate('+object.getAngle()+'deg)', /* Safari */ 253 '-webkit-transform': 'rotate('+object.getAngle()+'deg)', /* Safari */
254 'transform': 'rotate('+object.getAngle()+'deg)' /* Standard syntax */ 254 'transform': 'rotate('+object.getAngle()+'deg)' /* Standard syntax */
255 }); 255 });
256 $('.object-border').show(); 256 $('.object-border').show();
257 } 257 }
258 258
259 function onObjectOut() { 259 function onObjectOut() {
260 console.log('onObjectOut'); 260 console.log('onObjectOut');
261 canvas.deactivateAll().renderAll(); 261 canvas.deactivateAll().renderAll();
262 delete currentObj; 262 delete currentObj;
263 $scope.designTextValue = ''; 263 $scope.designTextValue = '';
264 $scope.safeApply(); 264 $scope.safeApply();
265 } 265 }
266 266
267 function undoCanvas() { 267 function undoCanvas() {
268 if (indexCurr <= 0) { 268 if (indexCurr <= 0) {
269 indexCurr = 0; 269 indexCurr = 0;
270 return; 270 return;
271 } 271 }
272 272
273 if (refreshObj === true) { 273 if (refreshObj === true) {
274 indexCurr--; 274 indexCurr--;
275 refreshObj = false; 275 refreshObj = false;
276 } 276 }
277 277
278 console.log('undo'); 278 console.log('undo');
279 279
280 indexCurr2 = indexCurr - 1; 280 indexCurr2 = indexCurr - 1;
281 currentObj = listObj[indexCurr2]; 281 currentObj = listObj[indexCurr2];
282 if (currentObj){ 282 if (currentObj){
283 currentObj.setOptions(JSON.parse(indexCurr[indexCurr2])); 283 currentObj.setOptions(JSON.parse(indexCurr[indexCurr2]));
284 } 284 }
285 285
286 indexCurr--; 286 indexCurr--;
287 currentObj.setCoords(); 287 currentObj.setCoords();
288 canvas.renderAll(); 288 canvas.renderAll();
289 actionObj = true; 289 actionObj = true;
290 } 290 }
291 291
292 function redoCanvas() { 292 function redoCanvas() {
293 actionObj = true; 293 actionObj = true;
294 if (indexCurr >= stateObj.length - 1) { 294 if (indexCurr >= stateObj.length - 1) {
295 return; 295 return;
296 } 296 }
297 297
298 console.log('redo'); 298 console.log('redo');
299 299
300 indexCurr2 = indexCurr + 1; 300 indexCurr2 = indexCurr + 1;
301 currentObj = listObj[indexCurr2]; 301 currentObj = listObj[indexCurr2];
302 currentObj.setOptions(JSON.parse(indexCurr[indexCurr2])); 302 currentObj.setOptions(JSON.parse(indexCurr[indexCurr2]));
303 303
304 indexCurr++; 304 indexCurr++;
305 currentObj.setCoords(); 305 currentObj.setCoords();
306 canvas.renderAll(); 306 canvas.renderAll();
307 } 307 }
308 308
309 $scope.canvasClearAll = function(){ 309 $scope.canvasClearAll = function(){
310 if (confirm('้…็ฝฎใ•ใ‚ŒใŸใ™ในใฆใฎๆ–‡ๅญ—ใ‚„็”ปๅƒใ‚’ๆถˆๅŽปใ—ใพใ™')){ 310 if (confirm('้…็ฝฎใ•ใ‚ŒใŸใ™ในใฆใฎๆ–‡ๅญ—ใ‚„็”ปๅƒใ‚’ๆถˆๅŽปใ—ใพใ™')){
311 canvas.clear(); 311 canvas.clear();
312 ObjectOrd = 0; 312 ObjectOrd = 0;
313 } 313 }
314 } 314 }
315 315
316 function onObjectSelected(options) { 316 function onObjectSelected(options) {
317 var currentObj = options.target; 317 var currentObj = options.target;
318 if (typeof currentObj.toOrd != 'function'){ 318 if (typeof currentObj.toOrd != 'function'){
319 var currentObjOrd = ++ObjectOrd; 319 var currentObjOrd = ++ObjectOrd;
320 currentObj.toOrd = function(){ 320 currentObj.toOrd = function(){
321 return currentObjOrd; 321 return currentObjOrd;
322 } 322 }
323 } 323 }
324 console.log(currentObj.toOrd()); 324 console.log(currentObj.toOrd());
325 $scope.typeObject = currentObj.type; 325 $scope.typeObject = currentObj.type;
326 switch ($scope.typeObject) { 326 switch ($scope.typeObject) {
327 case 'i-text' : 327 case 'i-text' :
328 $rootScope.isShowLeftPanel = 'text'; 328 $rootScope.isShowLeftPanel = 'text';
329 var text = currentObj.text; 329 var text = currentObj.text;
330 if(text != '') { 330 if(text != '') {
331 $scope.designText = text; 331 $scope.designText = text;
332 $scope.designTextValue = text; 332 $scope.designTextValue = text;
333 } 333 }
334 break; 334 break;
335 335
336 case 'path-group' : 336 case 'path-group' :
337 $rootScope.isShowLeftPanel = 'illustration'; 337 $rootScope.isShowLeftPanel = 'illustration';
338 break; 338 break;
339 339
340 case 'image': 340 case 'image':
341 $rootScope.isShowLeftPanel = 'image'; 341 $rootScope.isShowLeftPanel = 'image';
342 break; 342 break;
343 343
344 default : 344 default :
345 $rootScope.isShowLeftPanel = 'default'; 345 $rootScope.isShowLeftPanel = 'default';
346 break; 346 break;
347 } 347 }
348 $rootScope.safeApply(); 348 $rootScope.safeApply();
349 } 349 }
350 350
351 // Illustration process 351 // Illustration process
352 $scope.changeIllustrationCategory = function(currentIllustration){ 352 $scope.changeIllustrationCategory = function(currentIllustration){
353 $scope.currentIllustrationCate = $illustration.getList(currentIllustration); 353 $scope.currentIllustrationCate = $illustration.getList(currentIllustration);
354 }; 354 };
355 355
356 var arrSvgOriginal = []; 356 var arrSvgOriginal = [];
357 $scope.insertSvg = function(item){ 357 $scope.insertSvg = function(item){
358 fabric.loadSVGFromURL(item.path, function(objects, options) { 358 fabric.loadSVGFromURL(item.path, function(objects, options) {
359 var shape = fabric.util.groupSVGElements(objects, options); 359 var shape = fabric.util.groupSVGElements(objects, options);
360 var currentObjOrd = ++ObjectOrd; 360 var currentObjOrd = ++ObjectOrd;
361 arrSvgOriginal[currentObjOrd] = item.path; 361 arrSvgOriginal[currentObjOrd] = item.path;
362 shape.toOrd = function(){ 362 shape.toOrd = function(){
363 return currentObjOrd; 363 return currentObjOrd;
364 } 364 }
365 canvas.add(shape.scale(0.6)); 365 canvas.add(shape.scale(0.6));
366 shape.set({ left: 150, top: 100 }).setCoords(); 366 shape.set({ left: 150, top: 100 }).setCoords();
367 canvas.renderAll(); 367 canvas.renderAll();
368 canvas.setActiveObject(shape); 368 canvas.setActiveObject(shape);
369 }); 369 });
370 }; 370 };
371 371
372 // color pattern 372 // color pattern
373 $scope.listColorPatterns = [ 373 $scope.listColorPatterns = [
374 '#000000','#ffff00','#ff6600','#ff0000','#ff6262','#ffa19c','#ff9933','#c45d01','#5d2b03','#ffffcc', 374 '#000000','#ffff00','#ff6600','#ff0000','#ff6262','#ffa19c','#ff9933','#c45d01','#5d2b03','#ffffcc',
375 '#ffff99','#ffd500','#c0db50','#21a52a','#00663f','#abfcab','#36ffaa','#89eaea','#00938c','#005450', 375 '#ffff99','#ffd500','#c0db50','#21a52a','#00663f','#abfcab','#36ffaa','#89eaea','#00938c','#005450',
376 '#0badff','#006cff','#839aff','#0410a0','#ffb2ff','#f93fff','#6600ca','#ff6699','#999999','#666666', 376 '#0badff','#006cff','#839aff','#0410a0','#ffb2ff','#f93fff','#6600ca','#ff6699','#999999','#666666',
377 '#333333' 377 '#333333'
378 ]; 378 ];
379 379
380 $scope.changeColorPattern = function(color){ 380 $scope.changeColorPattern = function(color){
381 var obj = canvas.getActiveObject(); 381 var obj = canvas.getActiveObject();
382 if (!color){ 382 if (!color){
383 color = 'none'; 383 color = 'none';
384 // console.log(obj.toOrd(), arrSvgOriginal[obj.toOrd()]); 384 // console.log(obj.toOrd(), arrSvgOriginal[obj.toOrd()]);
385 if (typeof obj.toOrd == 'function' && typeof arrSvgOriginal[obj.toOrd()] != 'undefined'){ 385 if (typeof obj.toOrd == 'function' && typeof arrSvgOriginal[obj.toOrd()] != 'undefined'){
386 var currentObjOrd = obj.toOrd(); 386 var currentObjOrd = obj.toOrd();
387 fabric.loadSVGFromURL(arrSvgOriginal[obj.toOrd()], function(objects, options) { 387 fabric.loadSVGFromURL(arrSvgOriginal[obj.toOrd()], function(objects, options) {
388 var shape = fabric.util.groupSVGElements(objects, options); 388 var shape = fabric.util.groupSVGElements(objects, options);
389 shape.toOrd = function(){ 389 shape.toOrd = function(){
390 return currentObjOrd; 390 return currentObjOrd;
391 } 391 }
392 obj.setCoords(); 392 obj.setCoords();
393 shape.setScaleX(obj.getScaleX()); 393 shape.setScaleX(obj.getScaleX());
394 shape.setScaleY(obj.getScaleY()); 394 shape.setScaleY(obj.getScaleY());
395 shape.set('top',obj.getTop()); 395 shape.set('top',obj.getTop());
396 shape.set('left',obj.getLeft()); 396 shape.set('left',obj.getLeft());
397 shape.set('angle',obj.getAngle()); 397 shape.set('angle',obj.getAngle());
398 // shape.set('height',obj.getHeight()); 398 // shape.set('height',obj.getHeight());
399 // shape.set('width',obj.getWidth()); 399 // shape.set('width',obj.getWidth());
400 canvas.add(shape); 400 canvas.add(shape);
401 shape.setCoords(); 401 shape.setCoords();
402 // shape.set({ left: 150, top: 100 }).setCoords(); 402 // shape.set({ left: 150, top: 100 }).setCoords();
403 canvas.renderAll(); 403 canvas.renderAll();
404 canvas.setActiveObject(shape); 404 canvas.setActiveObject(shape);
405 obj.remove(); 405 obj.remove();
406 }); 406 });
407 } 407 }
408 }else{ 408 }else{
409 if (obj instanceof fabric.PathGroup) { 409 if (obj instanceof fabric.PathGroup) {
410 obj.getObjects().forEach(function(o) { 410 obj.getObjects().forEach(function(o) {
411 o.fill = color; 411 o.fill = color;
412 }); 412 });
413 } 413 }
414 else { 414 else {
415 obj.fill = color; 415 obj.fill = color;
416 } 416 }
417 canvas.renderAll(); 417 canvas.renderAll();
418 } 418 }
419 }; 419 };
420 420
421 //Font 421 //Font
422 $scope.listFontFamily = [ 422 $scope.listFontFamily = [
423 // {
424 // name : 'GN Aki iro Sesami Cookies',
425 // slug : 'gn_aki_iro_sesami_cookies',
426 // },
427 // {
428 // name : 'GN-Fuyu-iro_Script_Bold',
429 // slug : 'gn_fuyu_iro_script_bold'
430 // },
431 // {
432 // name : 'GN Killgothic U Kanana',
433 // slug : 'gn_killgothic_u_kanana'
434 // },
435 // {
436 // name : 'GN-Kin-iro_Alphabet_Cookies',
437 // slug : 'gn_kin_iro_alphabet_cookies'
438 //
439 // },
440 // {
441 // name : 'GN-Kin-iro_SansSerif',
442 // slug : 'gn_kin_iro_sansserif'
443 //
444 // },
445 // {
446 // name : 'GN-Koharuiro_Sunray',
447 // slug : 'gn_koharuiro_sunray'
448 //
449 // },
450 // {
451 // name : 'GN-Kyu-pin',
452 // slug : 'gn_kyu_pin'
453 // },
454 // {
455 // name : 'gn_natsu_iro_schedule',
456 // slug : 'gn_natsu_iro_schedule'
457 //
458 // },
459 // {
460 // name : 'gnkana_kiniro_sansserif_l',
461 // slug : 'gnkana_kiniro_sansserif_l'
462 //
463 // },
464 // {
465 // name : 'gnkana_kiniro_sansserif_st',
466 // slug : 'gnkana_kiniro_sansserif_st'
467 // },
468 // {
469 // name : 'gnkana_kon_iro_nightfall',
470 // slug : 'gnkana_kon_iro_nightfall'
471 //
472 // },
473 // {
474 // name : 'ms_gothic',
475 // slug : 'ms_gothic'
476 //
477 // },
478 // {
479 // name : 'msmincho',
480 // slug : 'msmincho'
481 // },
482 // {
483 // name : 'ufonts_com_ms_pgothic',
484 // slug : 'ufonts_com_ms_pgothic'
485 // }
423 { 486 {
424 name : 'GN Aki iro Sesami Cookies', 487 name: 'Roboto',
425 slug : 'gn_aki_iro_sesami_cookies', 488 slug: "'Roboto', sans-serif"
426 }, 489 },
427 { 490 {
428 name : 'GN-Fuyu-iro_Script_Bold', 491 name: 'Bungee',
429 slug : 'gn_fuyu_iro_script_bold' 492 slug: "'Bungee', cursive"
430 }, 493 },
431 { 494 {
432 name : 'GN Killgothic U Kanana', 495 name: 'Aref Ruqaa',
433 slug : 'gn_killgothic_u_kanana' 496 slug: "'Aref Ruqaa', serif"
434 }, 497 },
435 { 498 {
436 name : 'GN-Kin-iro_Alphabet_Cookies', 499 name: 'Open Sans',
437 slug : 'gn_kin_iro_alphabet_cookies' 500 slug: "'Open Sans', sans-serif"
438
439 }, 501 },
440 { 502 {
441 name : 'GN-Kin-iro_SansSerif', 503 name: 'Lato',
442 slug : 'gn_kin_iro_sansserif' 504 slug: "'Lato', sans-serif"
443
444 }, 505 },
445 { 506 {
446 name : 'GN-Koharuiro_Sunray', 507 name: 'Slabo 27px',
447 slug : 'gn_koharuiro_sunray' 508 slug: "'Slabo 27px', serif"
448
449 }, 509 },
450 { 510 {
451 name : 'GN-Kyu-pin', 511 name: 'Oswald',
452 slug : 'gn_kyu_pin' 512 slug: "'Oswald', sans-serif"
453 }, 513 },
454 { 514 {
455 name : 'gn_natsu_iro_schedule', 515 name: 'Yrsa',
456 slug : 'gn_natsu_iro_schedule' 516 slug: "'Yrsa', serif"
457
458 }, 517 },
459 { 518 {
460 name : 'gnkana_kiniro_sansserif_l', 519 name: 'Source Sans Pro',
461 slug : 'gnkana_kiniro_sansserif_l' 520 slug: "'Source Sans Pro', sans-serif"
462
463 }, 521 },
464 { 522 {
465 name : 'gnkana_kiniro_sansserif_st', 523 name: 'Montserrat',
466 slug : 'gnkana_kiniro_sansserif_st' 524 slug: "'Montserrat', sans-serif"
467 }, 525 },
468 { 526 {
469 name : 'gnkana_kon_iro_nightfall', 527 name: 'Raleway',
470 slug : 'gnkana_kon_iro_nightfall' 528 slug: "'Raleway', sans-serif"
471
472 }, 529 },
473 { 530 {
474 name : 'ms_gothic', 531 name: 'Merriweather',
475 slug : 'ms_gothic' 532 slug: "'Merriweather', serif"
476
477 }, 533 },
478 { 534 {
479 name : 'msmincho', 535 name: 'Open Sans Condensed',
480 slug : 'msmincho' 536 slug: "'Open Sans Condensed', sans-serif"
481 }, 537 },
482 { 538 {
483 name : 'ufonts_com_ms_pgothic', 539 name: 'Maitree',
484 slug : 'ufonts_com_ms_pgothic' 540 slug: "'Maitree', serif"
541 },
542 {
543 name: 'Lora',
544 slug: "'Lora', serif"
545 },
546 {
547 name: 'Playfair Display',
548 slug: "'Playfair Display', serif"
549 },
550 {
551 name: 'Noto Sans',
552 slug: "''Noto Sans', sans-serif', sans-serif"
553 },
554 {
555 name: 'PT Sans Narrow',
556 slug: "'PT Sans Narrow', sans-serif"
557 },
558 {
559 name: 'Titillium Web',
560 slug: "'Titillium Web', sans-serif"
561 },
562 {
563 name: 'Muli',
564 slug: "'Muli', sans-serif"
565 },
566 {
567 name: 'Inconsolata',
568 slug: "'Inconsolata', monospace"
569 },
570 {
571 name: 'Indie Flower',
572 slug: "'Indie Flower', cursive"
573 },
574 {
575 name: 'Bitter',
576 slug: "'Bitter', serif"
577 },
578 {
579 name: 'Dosis',
580 slug: "'Dosis', sans-serif"
581 },
582 {
583 name: 'Oxygen',
584 slug: "'Oxygen', sans-serif"
585 },
586 {
587 name: 'Hind',
588 slug: "'Hind', sans-serif"
589 },
590 {
591 name: 'Tillana',
592 slug: "'Tillana', cursive"
593 },
594 {
595 name: 'Fjalla One',
596 slug: "'Fjalla One', sans-serif"
597 },
598 {
599 name: 'Cabin',
600 slug: "'Cabin', sans-serif"
601 },
602 {
603 name: 'Nunito',
604 slug: "'Nunito', sans-serif"
605 },
606 {
607 name: 'Anton',
608 slug: "'Anton', sans-serif"
609 },
610 {
611 name: 'Lobster',
612 slug: "'Lobster', cursive"
613 },
614 {
615 name: 'Yanone Kaffeesatz',
616 slug: "'Yanone Kaffeesatz', sans-serif"
617 },
618 {
619 name: 'Reem Kufi',
620 slug: "'Reem Kufi', sans-serif"
621 },
622 {
623 name: 'Merriweather Sans',
624 slug: "'Merriweather Sans', sans-serif"
625 },
626 {
627 name: 'Bree Serif',
628 slug: "'Bree Serif', serif"
629 },
630 {
631 name: 'Josefin Sans',
632 slug: "'Josefin Sans', sans-serif"
633 },
634 {
635 name: 'Abel',
636 slug: "'Abel', sans-serif"
637 },
638 {
639 name: 'Crimson Text',
640 slug: "'Crimson Text', serif"
641 },
642 {
643 name: 'Gloria Hallelujah',
644 slug: "'Gloria Hallelujah', cursive"
645 },
646 {
647 name: 'Bungee Inline',
648 slug: "'Bungee Inline', cursive"
649 },
650 {
651 name: 'Amatic SC',
652 slug: "'Amatic SC', cursive"
653 },
654 {
655 name: 'Shadows Into Light',
656 slug: "'Shadows Into Light', cursive"
657 },
658 {
659 name: 'Dancing Script',
660 slug: "'Dancing Script', cursive"
661 },
662 {
663 name: 'Orbitron',
664 slug: "'Orbitron', sans-serif"
665 },
666 {
667 name: 'Source Code Pro',
668 slug: "'Source Code Pro', monospace"
669 },
670 {
671 name: 'Permanent Marker',
672 slug: "'Permanent Marker', cursive"
485 } 673 }
486 ]; 674 ];
487 675
488 // layer process 676 // layer process
489 $scope.layerProcess = function(mode) { 677 $scope.layerProcess = function(mode) {
490 // console.log('layerProcess'); 678 // console.log('layerProcess');
491 var activeObject = canvas.getActiveObject(); 679 var activeObject = canvas.getActiveObject();
492 680
493 if (activeObject){ 681 if (activeObject){
494 switch (mode) { 682 switch (mode) {
495 case 1: 683 case 1:
496 activeObject.bringForward(); 684 activeObject.bringForward();
497 break; 685 break;
498 case 2: 686 case 2:
499 activeObject.sendBackwards(); 687 activeObject.sendBackwards();
500 break; 688 break;
501 case 3: 689 case 3:
502 activeObject.bringToFront(); 690 activeObject.bringToFront();
503 break; 691 break;
504 case 4: 692 case 4:
505 activeObject.sendToBack(); 693 activeObject.sendToBack();
506 break; 694 break;
507 } 695 }
508 canvas.deactivateAll().renderAll(); 696 canvas.deactivateAll().renderAll();
509 } 697 }
510 }; 698 };
511 699
512 700
513 //Design text 701 //Design text
514 $scope.inputText = function(e) { 702 $scope.inputText = function(e) {
515 currentObj = canvas.getActiveObject(); 703 currentObj = canvas.getActiveObject();
516 var _iText = new fabric.IText('', { 704 var _iText = new fabric.IText('', {
517 left: 150, 705 left: 150,
518 top: 200, 706 top: 200,
519 fontFamily: typeof $scope.itemFont != 'undefined' ? $scope.listFontFamily[$scope.itemFont].slug : $scope.listFontFamily[0].slug, 707 fontFamily: typeof $scope.itemFont != 'undefined' ? $scope.listFontFamily[$scope.itemFont].slug : $scope.listFontFamily[0].slug,
520 fontWeight: 'normal', 708 fontWeight: 'normal',
521 textAlign: 'center', 709 textAlign: 'center',
522 fontSize: 28, 710 fontSize: 28,
523 fill: 'black', 711 fill: 'black',
524 editable: false 712 editable: false
525 }); 713 });
526 if(typeof currentObj != 'undefined' && currentObj != null) { 714 if(typeof currentObj != 'undefined' && currentObj != null) {
527 _iText.set({ 715 _iText.set({
528 left: currentObj.left, 716 left: currentObj.left,
529 top: currentObj.top, 717 top: currentObj.top,
530 fontFamily: currentObj.fontFamily, 718 fontFamily: currentObj.fontFamily,
531 fontSize: currentObj.fontSize, 719 fontSize: currentObj.fontSize,
532 fill: currentObj.fill 720 fill: currentObj.fill
533 }) 721 })
534 } 722 }
535 723
536 724
537 if(canvas.getActiveObject()) 725 if(canvas.getActiveObject())
538 canvas.getActiveObject().remove(); 726 canvas.getActiveObject().remove();
539 727
540 _iText.set('text', e); 728 _iText.set('text', e);
541 canvas.add(_iText); 729 canvas.add(_iText);
542 canvas.setActiveObject(_iText); 730 canvas.setActiveObject(_iText);
543 canvas.renderAll(); 731 canvas.renderAll();
544 732
545 }; 733 };
546 $scope.setFontFamily = function(font,index) { 734 $scope.setFontFamily = function(font,index) {
547 $scope.itemFont = index; 735 $scope.itemFont = index;
548 if(canvas.getActiveObject()) { 736 if(canvas.getActiveObject()) {
549 var currentObj = canvas.getActiveObject(); 737 var currentObj = canvas.getActiveObject();
550 if(currentObj.type == 'i-text') { 738 if(currentObj.type == 'i-text') {
551 currentObj.set('fontFamily', font); 739 currentObj.set('fontFamily', font);
552 canvas.renderAll(); 740 canvas.renderAll();
553 canvas.setActiveObject(currentObj); 741 canvas.setActiveObject(currentObj);
554 } 742 }
555 743
556 } 744 }
557 }; 745 };
558 //Set letter spacing text 746 //Set letter spacing text
559 $scope.setLetterSpacingText = function(e) { 747 $scope.setLetterSpacingText = function(e) {
560 if(canvas.getActiveObject()) { 748 if(canvas.getActiveObject()) {
561 var currentObj = canvas.getActiveObject(); 749 var currentObj = canvas.getActiveObject();
562 if(currentObj.type == 'i-text') { 750 if(currentObj.type == 'i-text') {
563 if(e == 'plus') 751 if(e == 'plus')
564 spacingNum = spacingNum + 30; 752 spacingNum = spacingNum + 30;
565 else if (spacingNum >= -30){ 753 else if (spacingNum >= -30){
566 spacingNum = spacingNum - 30; 754 spacingNum = spacingNum - 30;
567 } 755 }
568 if(e == 'default') 756 if(e == 'default')
569 spacingNum = 0; 757 spacingNum = 0;
570 758
571 currentObj.set('charSpacing', spacingNum); 759 currentObj.set('charSpacing', spacingNum);
572 canvas.renderAll(); 760 canvas.renderAll();
573 canvas.setActiveObject(currentObj); 761 canvas.setActiveObject(currentObj);
574 } 762 }
575 } 763 }
576 }; 764 };
577 765
578 766
579 /**** process insert image */ 767 /**** process insert image */
580 if (typeof($window.localStorage.recentImages) != 'undefined'){ 768 if (typeof($window.localStorage.recentImages) != 'undefined'){
581 $scope.recentImages = JSON.parse($window.localStorage.recentImages); 769 $scope.recentImages = JSON.parse($window.localStorage.recentImages);
582 }else{ 770 }else{
583 $scope.recentImages = {}; 771 $scope.recentImages = {};
584 } 772 }
585 773
586 var addToRecentImage = function(name, data){ 774 var addToRecentImage = function(name, data){
587 if (typeof($window.localStorage.recentImages) != 'undefined'){ 775 if (typeof($window.localStorage.recentImages) != 'undefined'){
588 $scope.recentImages = JSON.parse($window.localStorage.recentImages); 776 $scope.recentImages = JSON.parse($window.localStorage.recentImages);
589 }else{ 777 }else{
590 $scope.recentImages = {}; 778 $scope.recentImages = {};
591 } 779 }
592 780
593 if (typeof($scope.recentImages[name]) == 'undefined'){ 781 if (typeof($scope.recentImages[name]) == 'undefined'){
594 var ii=0; 782 var ii=0;
595 var II = 0; 783 var II = 0;
596 for(var item in $scope.recentImages){ 784 for(var item in $scope.recentImages){
597 if (II==0){ 785 if (II==0){
598 II = item; 786 II = item;
599 } 787 }
600 ii++; 788 ii++;
601 } 789 }
602 if (ii>16 && II!=0){ 790 if (ii>16 && II!=0){
603 delete $scope.recentImages[II]; 791 delete $scope.recentImages[II];
604 } 792 }
605 $scope.recentImages[name] = data; 793 $scope.recentImages[name] = data;
606 $window.localStorage.recentImages = JSON.stringify($scope.recentImages); 794 $window.localStorage.recentImages = JSON.stringify($scope.recentImages);
607 } 795 }
608 } 796 }
609 $scope.chooseImage = function(e){//console.log(e); 797 $scope.chooseImage = function(e){//console.log(e);
610 if (e.target.files[0] && e.target.files[0].size > 5*1024*1024){ 798 if (e.target.files[0] && e.target.files[0].size > 5*1024*1024){
611 alert('ใ‚ขใƒƒใƒ—ใƒญใƒผใƒ‰ใงใใพใ›ใ‚“ใงใ—ใŸ'); 799 alert('ใ‚ขใƒƒใƒ—ใƒญใƒผใƒ‰ใงใใพใ›ใ‚“ใงใ—ใŸ');
612 return; 800 return;
613 } 801 }
614 var reader = new FileReader(); 802 var reader = new FileReader();
615 reader.onload = function (event) { 803 reader.onload = function (event) {
616 addToRecentImage ($('#imgLoader').val(), event.target.result); 804 addToRecentImage ($('#imgLoader').val(), event.target.result);
617 var imgObj = new Image();//console.log($('#imgLoader').val()); 805 var imgObj = new Image();//console.log($('#imgLoader').val());
618 imgObj.src = event.target.result; 806 imgObj.src = event.target.result;
619 imgObj.onload = function () { 807 imgObj.onload = function () {
620 // start fabricJS stuff 808 // start fabricJS stuff
621 809
622 var image = new fabric.Image(imgObj); 810 var image = new fabric.Image(imgObj);
623 image.set({ 811 image.set({
624 left: 50, 812 left: 50,
625 top: 50 813 top: 50
626 }); 814 });
627 //image.scale(getRandomNum(0.1, 0.25)).setCoords(); 815 //image.scale(getRandomNum(0.1, 0.25)).setCoords();
628 image.scaleToWidth(200); 816 image.scaleToWidth(200);
629 canvas.add(image); 817 canvas.add(image);
630 } 818 }
631 } 819 }
632 reader.readAsDataURL(e.target.files[0]); 820 reader.readAsDataURL(e.target.files[0]);
633 } 821 }
634 822
635 $scope.insertRecentImage = function(data){ 823 $scope.insertRecentImage = function(data){
636 var imgObj = new Image(); 824 var imgObj = new Image();
637 imgObj.src = data; 825 imgObj.src = data;
638 imgObj.onload = function () { 826 imgObj.onload = function () {
639 // start fabricJS stuff 827 // start fabricJS stuff
640 828
641 var image = new fabric.Image(imgObj); 829 var image = new fabric.Image(imgObj);
642 image.set({ 830 image.set({
643 left: 50, 831 left: 50,
644 top: 50 832 top: 50
645 }); 833 });
646 image.scaleToWidth(200); 834 image.scaleToWidth(200);
647 canvas.add(image); 835 canvas.add(image);
648 } 836 }
649 } 837 }
650 838
651 //Traslation text 839 //Traslation text
652 $scope.rotateText = function(style) { 840 $scope.rotateText = function(style) {
653 if(canvas.getActiveObject()) { 841 if(canvas.getActiveObject()) {
654 var currentObj = canvas.getActiveObject(); 842 var currentObj = canvas.getActiveObject();
655 if(currentObj.type == 'i-text') { 843 if(currentObj.type == 'i-text') {
656 currentObj.set('rotate', Math.PI / 4); 844 currentObj.set('rotate', Math.PI / 4);
657 canvas.renderAll(); 845 canvas.renderAll();
658 canvas.setActiveObject(currentObj); 846 canvas.setActiveObject(currentObj);
659 } 847 }
660 } 848 }
661 }; 849 };
662 850
663 851
664 /* Process output */ 852 /* Process output */
665 $scope.outputDesign = function(){ 853 $scope.outputDesign = function(){
666 $rootScope.outputImage = canvas.toDataURL('png'); 854 $rootScope.outputImage = canvas.toDataURL('png');
667 // console.log(); 855 // console.log();
668 $('#tshirt-design').modal('hide'); 856 $('#tshirt-design').modal('hide');
669 } 857 }
670 858
671 $scope.showRecommend = function(){ 859 $scope.showRecommend = function(){
672 $scope.recommendList = $favorite.getAll(); 860 $scope.recommendList = $favorite.getAll();
673 $scope.favoriteList = $favorite.getAll(); 861 $scope.favoriteList = $favorite.getAll();
674 $('#tshirt-design-saved').modal({ 862 $('#tshirt-design-saved').modal({
675 backdrop: 'static', 863 backdrop: 'static',
676 keyboard: false 864 keyboard: false
677 }); 865 });
678 $timeout(function(){ 866 $timeout(function(){
679 $('.saved-item').tooltip({ 867 $('.saved-item').tooltip({
680 animated: 'fade', 868 animated: 'fade',
681 placement: 'bottom', 869 placement: 'bottom',
682 html: true 870 html: true
683 }); 871 });
684 },1000); 872 },1000);
685 } 873 }
686 874
687 $scope.closeSavedModal = function(){ 875 $scope.closeSavedModal = function(){
688 $('#tshirt-design-saved').modal('hide'); 876 $('#tshirt-design-saved').modal('hide');
689 } 877 }
690 878
691 $scope.openSavedTab = function(tab){ 879 $scope.openSavedTab = function(tab){
692 $('#tshirt-design-saved .subframe-design .nav-tabs li').removeClass('active'); 880 $('#tshirt-design-saved .subframe-design .nav-tabs li').removeClass('active');
693 $('#tab-saved-'+tab).addClass('active'); 881 $('#tab-saved-'+tab).addClass('active');
694 $('#tshirt-design-saved .subframe-design .tab-content .tab-pane').removeClass('active'); 882 $('#tshirt-design-saved .subframe-design .tab-content .tab-pane').removeClass('active');
695 $('#content-saved-'+tab).addClass('active'); 883 $('#content-saved-'+tab).addClass('active');
696 884
697 $timeout(function(){ 885 $timeout(function(){
698 $('.saved-item img').tooltip({ 886 $('.saved-item img').tooltip({
699 animated: 'fade', 887 animated: 'fade',
700 placement: 'bottom', 888 placement: 'bottom',
701 html: true 889 html: true
702 }); 890 });
703 },500); 891 },500);
704 } 892 }
705 893
706 $favorite.loadFromRemote(); 894 $favorite.loadFromRemote();
707 $scope.saveFavorite = function(){ 895 $scope.saveFavorite = function(){
708 if (!confirm('Do you want to put current design to your favorite?')){ 896 if (!confirm('Do you want to put current design to your favorite?')){
709 return; 897 return;
710 } 898 }
711 var dataDump = { 899 var dataDump = {
712 thumb: canvas.toDataURL('png'), 900 thumb: canvas.toDataURL('png'),
713 data: JSON.stringify(canvas) 901 data: JSON.stringify(canvas)
714 } 902 }
715 $favorite.addToFavorite({ 903 $favorite.addToFavorite({
716 data: dataDump 904 data: dataDump
717 }) 905 })
718 // console.log(JSON.stringify(dataDump)); 906 // console.log(JSON.stringify(dataDump));
719 alert('saved'); 907 alert('saved');
720 } 908 }
721 909
722 $scope.restoreSaved = function(item){ 910 $scope.restoreSaved = function(item){
723 if (!confirm('this may be clear all current design frame, are you sure ?')){ 911 if (!confirm('this may be clear all current design frame, are you sure ?')){
724 return; 912 return;
725 } 913 }
726 $('#tshirt-design-saved').modal('hide'); 914 $('#tshirt-design-saved').modal('hide');
727 canvas.loadFromJSON(item.data,canvas.renderAll.bind(canvas)); 915 canvas.loadFromJSON(item.data,canvas.renderAll.bind(canvas));
728 ObjectOrd = 0; 916 ObjectOrd = 0;
729 canvas.forEachObject(function(obj){ 917 canvas.forEachObject(function(obj){
730 var currentObjOrd = ++ObjectOrd; 918 var currentObjOrd = ++ObjectOrd;
731 obj.toOrd = function(){ 919 obj.toOrd = function(){
732 return currentObjOrd; 920 return currentObjOrd;
733 } 921 }
734 }); 922 });
735 } 923 }
736 924
737 $scope.deleteFavorite = function(idx){ 925 $scope.deleteFavorite = function(idx){
738 if (confirm('are you sure?')){ 926 if (confirm('are you sure?')){
739 $favorite.removeFromFavorite({ 927 $favorite.removeFromFavorite({
740 idx: idx 928 idx: idx
741 }); 929 });
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 url('https://fonts.googleapis.com/css?family=Abel|Amatic+SC|Anton|Aref+Ruqaa|Bitter|Bree+Serif|Bungee|Bungee+Inline|Cabin|Crimson+Text|Dancing+Script|Dosis|Fjalla+One|Gloria+Hallelujah|Hind|Inconsolata|Indie+Flower|Josefin+Sans|Lato|Lobster|Lora|Maitree|Merriweather|Merriweather+Sans|Montserrat|Muli|Noto+Sans|Nunito|Open+Sans|Open+Sans+Condensed:300|Orbitron|Oswald|Oxygen|PT+Sans+Narrow|Permanent+Marker|Playfair+Display|Raleway|Reem+Kufi|Roboto|Shadows+Into+Light|Slabo+27px|Source+Code+Pro|Source+Sans+Pro|Tillana|Titillium+Web|Yanone+Kaffeesatz|Yrsa');
4 @import "placedesign.css"; 5 @import "placedesign.css";
5 html{ 6 html{
6 height:100%; 7 height:100%;
7 width:100%; 8 width:100%;
8 } 9 }
9 body { 10 body {
10 font-family: 'Hiragino Kaku Gothic Pro', sans-serif; 11 font-family: 'Hiragino Kaku Gothic Pro', sans-serif;
11 height:100%; 12 height:100%;
12 width:100%; 13 width:100%;
13 } 14 }
14 /*Scroll bar style*/ 15 /*Scroll bar style*/
15 ::-webkit-scrollbar { 16 ::-webkit-scrollbar {
16 -webkit-appearance: none; 17 -webkit-appearance: none;
17 width: 7px; 18 width: 7px;
18 } 19 }
19 ::-webkit-scrollbar-track { 20 ::-webkit-scrollbar-track {
20 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 21 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
21 } 22 }
22 23
23 ::-webkit-scrollbar-thumb { 24 ::-webkit-scrollbar-thumb {
24 border-radius: 4px; 25 border-radius: 4px;
25 background-color: rgba(0,0,0,.5); 26 background-color: rgba(0,0,0,.5);
26 -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5); 27 -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
27 } 28 }
28 /*End scroll bar style*/ 29 /*End scroll bar style*/
29 .padding-right-0{ 30 .padding-right-0{
30 padding-right: 0!important; 31 padding-right: 0!important;
31 } 32 }
32 .padding-left-0{ 33 .padding-left-0{
33 padding-left: 0!important; 34 padding-left: 0!important;
34 } 35 }
35 button.red{ 36 button.red{
36 color: #ffffff; 37 color: #ffffff;
37 background-color: #ff0000; 38 background-color: #ff0000;
38 border: 1px solid #ff0000; 39 border: 1px solid #ff0000;
39 } 40 }
40 button.yellow1{ 41 button.yellow1{
41 background:url("../images/bgbutton1.png") repeat #ff801d; 42 background:url("../images/bgbutton1.png") repeat #ff801d;
42 color: #ffffff; 43 color: #ffffff;
43 border: 1px solid #ff801d; 44 border: 1px solid #ff801d;
44 } 45 }
45 button.yellow2{ 46 button.yellow2{
46 background:url("../images/bgbutton2.png") repeat #ff801d; 47 background:url("../images/bgbutton2.png") repeat #ff801d;
47 color: #ffffff; 48 color: #ffffff;
48 border: 1px solid #ff801d; 49 border: 1px solid #ff801d;
49 } 50 }
50 button.white{ 51 button.white{
51 border: 1px solid #ff801d; 52 border: 1px solid #ff801d;
52 color: #ff801d; 53 color: #ff801d;
53 background-color: #ffffff; 54 background-color: #ffffff;
54 } 55 }
55 button.brown{ 56 button.brown{
56 background-color: #666666; 57 background-color: #666666;
57 border: 1px solid #666666; 58 border: 1px solid #666666;
58 color: #ffffff; 59 color: #ffffff;
59 border-radius: 5px; 60 border-radius: 5px;
60 } 61 }
61 button.black{ 62 button.black{
62 border: 1px solid #c9c9c9; 63 border: 1px solid #c9c9c9;
63 background-color: #343434; 64 background-color: #343434;
64 color: #ffffff; 65 color: #ffffff;
65 padding: 1px 6px; 66 padding: 1px 6px;
66 } 67 }
67 button.none{ 68 button.none{
68 border: 0; 69 border: 0;
69 background-color: transparent; 70 background-color: transparent;
70 } 71 }
71 #tshirt-container{ 72 #tshirt-container{
72 border-left: 1px solid #dcdcdc; 73 border-left: 1px solid #dcdcdc;
73 border-right: 1px solid #dcdcdc; 74 border-right: 1px solid #dcdcdc;
74 } 75 }
75 /*HEADER*/ 76 /*HEADER*/
76 header{ 77 header{
77 border-bottom: 1px solid #dcdcdc; 78 border-bottom: 1px solid #dcdcdc;
78 } 79 }
79 header .logo{ 80 header .logo{
80 padding-left: 0!important; 81 padding-left: 0!important;
81 } 82 }
82 header .logo img{ 83 header .logo img{
83 height: 60px; 84 height: 60px;
84 } 85 }
85 header .social-share{ 86 header .social-share{
86 list-style: none; 87 list-style: none;
87 background-color: #eeeeee; 88 background-color: #eeeeee;
88 display: table; 89 display: table;
89 padding-left: 0; 90 padding-left: 0;
90 margin-bottom: 0; 91 margin-bottom: 0;
91 } 92 }
92 header .social-share li{ 93 header .social-share li{
93 float: left; 94 float: left;
94 margin: 15px 15px; 95 margin: 15px 15px;
95 background-color: #c5c5c5; 96 background-color: #c5c5c5;
96 width: 30px; 97 width: 30px;
97 height: 30px; 98 height: 30px;
98 -moz-border-radius: 15px; 99 -moz-border-radius: 15px;
99 -webkit-border-radius: 15px; 100 -webkit-border-radius: 15px;
100 border-radius: 15px; 101 border-radius: 15px;
101 text-align: center; 102 text-align: center;
102 padding: 6px 0; 103 padding: 6px 0;
103 } 104 }
104 header .social-share li i{ 105 header .social-share li i{
105 font-size: 20px; 106 font-size: 20px;
106 color: #ffffff; 107 color: #ffffff;
107 } 108 }
108 header .top-menu{ 109 header .top-menu{
109 list-style: none; 110 list-style: none;
110 padding-left: 0; 111 padding-left: 0;
111 margin-bottom: 5px; 112 margin-bottom: 5px;
112 } 113 }
113 header .top-menu li{ 114 header .top-menu li{
114 float: left; 115 float: left;
115 padding: 6px 0; 116 padding: 6px 0;
116 117
117 } 118 }
118 header .top-menu li a{ 119 header .top-menu li a{
119 color: #000000; 120 color: #000000;
120 padding: 0 10px; 121 padding: 0 10px;
121 border-right: 1px solid #000000; 122 border-right: 1px solid #000000;
122 font-size: 12px; 123 font-size: 12px;
123 } 124 }
124 header .top-menu li:last-child a{ 125 header .top-menu li:last-child a{
125 border-right: 0; 126 border-right: 0;
126 } 127 }
127 header .top-control{ 128 header .top-control{
128 list-style: none; 129 list-style: none;
129 padding-left: 0; 130 padding-left: 0;
130 margin-bottom: 0; 131 margin-bottom: 0;
131 } 132 }
132 header .top-control li{ 133 header .top-control li{
133 float: left; 134 float: left;
134 margin: 0 10px; 135 margin: 0 10px;
135 } 136 }
136 header .top-control li .bt-yellow{ 137 header .top-control li .bt-yellow{
137 background-color: #fe6a00; 138 background-color: #fe6a00;
138 color: #ffffff; 139 color: #ffffff;
139 padding: 3px 10px; 140 padding: 3px 10px;
140 font-size: 12px; 141 font-size: 12px;
141 } 142 }
142 header .user-control{ 143 header .user-control{
143 background-color: #888888; 144 background-color: #888888;
144 text-align: center; 145 text-align: center;
145 } 146 }
146 header .user-control div{ 147 header .user-control div{
147 font-size: 12px; 148 font-size: 12px;
148 color: #ffffff; 149 color: #ffffff;
149 } 150 }
150 header .user-control div:first-child{ 151 header .user-control div:first-child{
151 padding: 10px 10px; 152 padding: 10px 10px;
152 } 153 }
153 header .user-control div:last-child{ 154 header .user-control div:last-child{
154 background-color: #fe6a00; 155 background-color: #fe6a00;
155 padding: 3px 10px; 156 padding: 3px 10px;
156 } 157 }
157 /*NAVIGATION*/ 158 /*NAVIGATION*/
158 nav{ 159 nav{
159 border-bottom: 1px solid #dcdcdc; 160 border-bottom: 1px solid #dcdcdc;
160 padding: 5px 0; 161 padding: 5px 0;
161 } 162 }
162 nav h2{ 163 nav h2{
163 font-size: 27px; 164 font-size: 27px;
164 margin: 20px 0; 165 margin: 20px 0;
165 166
166 } 167 }
167 nav ul{ 168 nav ul{
168 list-style: none; 169 list-style: none;
169 padding-left: 0; 170 padding-left: 0;
170 margin-bottom: 0; 171 margin-bottom: 0;
171 172
172 } 173 }
173 nav ul li{ 174 nav ul li{
174 float: left; 175 float: left;
175 } 176 }
176 nav ul li.line{ 177 nav ul li.line{
177 border-bottom: 2px dashed #000000; 178 border-bottom: 2px dashed #000000;
178 width: 34px; 179 width: 34px;
179 height: 34px; 180 height: 34px;
180 } 181 }
181 nav ul li.line-action{ 182 nav ul li.line-action{
182 border-bottom: 2px dashed #fe6a00; 183 border-bottom: 2px dashed #fe6a00;
183 } 184 }
184 nav ul li.circle{ 185 nav ul li.circle{
185 width: 70px; 186 width: 70px;
186 height: 70px; 187 height: 70px;
187 -moz-border-radius: 35px; 188 -moz-border-radius: 35px;
188 -webkit-border-radius: 35px; 189 -webkit-border-radius: 35px;
189 border-radius: 35px; 190 border-radius: 35px;
190 text-align: center; 191 text-align: center;
191 font-size: 12px; 192 font-size: 12px;
192 /*margin-left: 26px;*/ 193 /*margin-left: 26px;*/
193 194
194 background-color: #999999; 195 background-color: #999999;
195 position: relative; 196 position: relative;
196 display: inline; 197 display: inline;
197 cursor: pointer; 198 cursor: pointer;
198 } 199 }
199 200
200 nav ul li.circle a{ 201 nav ul li.circle a{
201 color: #ffffff; 202 color: #ffffff;
202 position: absolute; 203 position: absolute;
203 top: 50%; 204 top: 50%;
204 left: 50%; 205 left: 50%;
205 transform: translateX(-50%) translateY(-50%); 206 transform: translateX(-50%) translateY(-50%);
206 -webkit-transform: translateX(-50%) translateY(-50%); 207 -webkit-transform: translateX(-50%) translateY(-50%);
207 } 208 }
208 nav ul li:hover a{ 209 nav ul li:hover a{
209 text-decoration: none; 210 text-decoration: none;
210 color: #ffffff; 211 color: #ffffff;
211 } 212 }
212 nav ul li.action{ 213 nav ul li.action{
213 background-color: #fe6a00; 214 background-color: #fe6a00;
214 } 215 }
215 /*ASIDE*/ 216 /*ASIDE*/
216 aside{ 217 aside{
217 margin: 10px 0; 218 margin: 10px 0;
218 } 219 }
219 aside .break-left{ 220 aside .break-left{
220 position: absolute; 221 position: absolute;
221 left: 50%; 222 left: 50%;
222 top: 50%; 223 top: 50%;
223 transform: translateX(-50%) translateY(-50%); 224 transform: translateX(-50%) translateY(-50%);
224 -webkit-transform: translateX(-50%) translateY(-50%); 225 -webkit-transform: translateX(-50%) translateY(-50%);
225 } 226 }
226 aside .break-down{ 227 aside .break-down{
227 padding: 0 0; 228 padding: 0 0;
228 } 229 }
229 aside .break-down i.fa{ 230 aside .break-down i.fa{
230 font-size: 35px; 231 font-size: 35px;
231 color: #ff0000; 232 color: #ff0000;
232 } 233 }
233 aside .break-line{ 234 aside .break-line{
234 height: 10px; 235 height: 10px;
235 } 236 }
236 aside .break-line hr{ 237 aside .break-line hr{
237 border-top: 1px dotted #cccccc; 238 border-top: 1px dotted #cccccc;
238 } 239 }
239 aside .step{ 240 aside .step{
240 margin: 0 0; 241 margin: 0 0;
241 } 242 }
242 aside .step .title{ 243 aside .step .title{
243 font-size: 15px; 244 font-size: 15px;
244 line-height: 16px; 245 line-height: 16px;
245 font-weight: bold; 246 font-weight: bold;
246 margin-bottom: 3px; 247 margin-bottom: 3px;
247 } 248 }
248 aside .step .title span:first-child { 249 aside .step .title span:first-child {
249 float: left; 250 float: left;
250 width: 28% 251 width: 28%
251 } 252 }
252 aside .step .title span:last-child{ 253 aside .step .title span:last-child{
253 float: left; 254 float: left;
254 width: 72%; 255 width: 72%;
255 padding: 6px 0; 256 padding: 6px 0;
256 } 257 }
257 258
258 aside .step .title span:last-child { 259 aside .step .title span:last-child {
259 260
260 } 261 }
261 aside .step .title-notice{ 262 aside .step .title-notice{
262 font-size: 13px; 263 font-size: 13px;
263 line-height: 16px; 264 line-height: 16px;
264 margin-bottom: 5px; 265 margin-bottom: 5px;
265 } 266 }
266 aside .step .title-notice .require{ 267 aside .step .title-notice .require{
267 font-size: 10px; 268 font-size: 10px;
268 } 269 }
269 aside .step .step-box{ 270 aside .step .step-box{
270 border: 2px solid #dcdcdc; 271 border: 2px solid #dcdcdc;
271 font-size: 12px; 272 font-size: 12px;
272 position: relative; 273 position: relative;
273 } 274 }
274 /*Step 1*/ 275 /*Step 1*/
275 aside .step .step-box .tshirt-design{ 276 aside .step .step-box .tshirt-design{
276 margin: 4px 4px; 277 margin: 4px 4px;
277 } 278 }
278 aside .step .step-box .tshirt-design:hover{ 279 aside .step .step-box .tshirt-design:hover{
279 /*border: 1px solid #ff0000;*/ 280 /*border: 1px solid #ff0000;*/
280 } 281 }
281 aside .step .step-box .tshirt-design button:hover{ 282 aside .step .step-box .tshirt-design button:hover{
282 background-color: #fa7b7b; 283 background-color: #fa7b7b;
283 border: 1px solid #fa7b7b; 284 border: 1px solid #fa7b7b;
284 } 285 }
285 aside .step .step-box .tshirt-design div{ 286 aside .step .step-box .tshirt-design div{
286 /*float: left;*/ 287 /*float: left;*/
287 } 288 }
288 aside .step .step-box .tshirt-design .icon{ 289 aside .step .step-box .tshirt-design .icon{
289 padding: 4px 4px; 290 padding: 4px 4px;
290 text-align: center; 291 text-align: center;
291 width: 100%; 292 width: 100%;
292 } 293 }
293 aside .step .step-box .tshirt-design .icon img{ 294 aside .step .step-box .tshirt-design .icon img{
294 max-width: 100%; 295 max-width: 100%;
295 } 296 }
296 297
297 aside .step .step-box .tshirt-design .name{ 298 aside .step .step-box .tshirt-design .name{
298 padding: 2px 4px; 299 padding: 2px 4px;
299 text-align: center; 300 text-align: center;
300 301
301 } 302 }
302 aside .step .step-box .tshirt-design .action{ 303 aside .step .step-box .tshirt-design .action{
303 /*padding: 10px 10px;*/ 304 /*padding: 10px 10px;*/
304 /*float: right