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;*/ 305 /*float: right;*/
305 306
306 } 307 }
307 aside .step .step-box .tshirt-design .action button{ 308 aside .step .step-box .tshirt-design .action button{
308 padding: 6px 8px; 309 padding: 6px 8px;
309 width: 100%; 310 width: 100%;
310 } 311 }
311 /*Step 2*/ 312 /*Step 2*/
312 aside .step .step-box .tshirt-color{ 313 aside .step .step-box .tshirt-color{
313 padding: 6px 6px; 314 padding: 6px 6px;
314 height: 100%; 315 height: 100%;
315 position: relative; 316 position: relative;
316 } 317 }
317 318
318 aside .step .step-box .tshirt-color ul.choice-color{ 319 aside .step .step-box .tshirt-color ul.choice-color{
319 float: left; 320 float: left;
320 list-style: none; 321 list-style: none;
321 padding-left: 0; 322 padding-left: 0;
322 width: 100%; 323 width: 100%;
323 margin-bottom: 3px; 324 margin-bottom: 3px;
324 } 325 }
325 aside .step .step-box .tshirt-color ul.choice-color li{ 326 aside .step .step-box .tshirt-color ul.choice-color li{
326 margin: 0 6px 6px 0; 327 margin: 0 6px 6px 0;
327 border: 1px solid #cccccc; 328 border: 1px solid #cccccc;
328 padding: 2px 2px; 329 padding: 2px 2px;
329 float: left; 330 float: left;
330 cursor: pointer; 331 cursor: pointer;
331 } 332 }
332 aside .step .step-box .tshirt-color ul.choice-color li.action{ 333 aside .step .step-box .tshirt-color ul.choice-color li.action{
333 border: 1px solid #ff0000; 334 border: 1px solid #ff0000;
334 } 335 }
335 aside .step .step-box .tshirt-color ul.choice-color li:hover{ 336 aside .step .step-box .tshirt-color ul.choice-color li:hover{
336 border: 1px solid #ff0000; 337 border: 1px solid #ff0000;
337 } 338 }
338 aside .step .step-box .tshirt-color ul.choice-color li div{ 339 aside .step .step-box .tshirt-color ul.choice-color li div{
339 height: 26px; 340 height: 26px;
340 width: 26px; 341 width: 26px;
341 margin: 0; 342 margin: 0;
342 } 343 }
343 344
344 aside .step .step-box .tshirt-color ul.choice-color li.white div{ 345 aside .step .step-box .tshirt-color ul.choice-color li.white div{
345 background-color: #ece7e4; 346 background-color: #ece7e4;
346 } 347 }
347 aside .step .step-box .tshirt-color ul.choice-color li.blue div{ 348 aside .step .step-box .tshirt-color ul.choice-color li.blue div{
348 background-color: #e7dfd0; 349 background-color: #e7dfd0;
349 } 350 }
350 aside .step .step-box .choice-color-bottom{ 351 aside .step .step-box .choice-color-bottom{
351 position: absolute; 352 position: absolute;
352 bottom: 0; 353 bottom: 0;
353 left: 0; 354 left: 0;
354 width: 80%; 355 width: 80%;
355 margin: 0 10%; 356 margin: 0 10%;
356 } 357 }
357 aside .step .step-box .choice-color-bottom .color-name{ 358 aside .step .step-box .choice-color-bottom .color-name{
358 width: 100%; 359 width: 100%;
359 font-size: 12px; 360 font-size: 12px;
360 text-align: center; 361 text-align: center;
361 padding: 4px 0; 362 padding: 4px 0;
362 } 363 }
363 aside .step .step-box .choice-color-bottom .view-more{ 364 aside .step .step-box .choice-color-bottom .view-more{
364 text-align: right; 365 text-align: right;
365 } 366 }
366 /*Step 3*/ 367 /*Step 3*/
367 aside .step .step-box .tshirt-saveorder{ 368 aside .step .step-box .tshirt-saveorder{
368 padding: 10px 10px 10px 10px; 369 padding: 10px 10px 10px 10px;
369 } 370 }
370 aside .step .step-box .tshirt-saveorder .action{ 371 aside .step .step-box .tshirt-saveorder .action{
371 width: 50%; 372 width: 50%;
372 float: left; 373 float: left;
373 } 374 }
374 aside .step .step-box .tshirt-saveorder .action:first-child{ 375 aside .step .step-box .tshirt-saveorder .action:first-child{
375 padding-right: 5px; 376 padding-right: 5px;
376 } 377 }
377 aside .step .step-box .tshirt-saveorder .action:last-child{ 378 aside .step .step-box .tshirt-saveorder .action:last-child{
378 padding-left: 5px; 379 padding-left: 5px;
379 } 380 }
380 aside .step .step-box .tshirt-saveorder .action button{ 381 aside .step .step-box .tshirt-saveorder .action button{
381 padding: 4px 10px; 382 padding: 4px 10px;
382 width: 100%; 383 width: 100%;
383 } 384 }
384 385
385 386
386 /*Step 4*/ 387 /*Step 4*/
387 388
388 aside .step .step-box .change-design{ 389 aside .step .step-box .change-design{
389 /*padding: 4px 4px;*/ 390 /*padding: 4px 4px;*/
390 } 391 }
391 aside .step .step-box .change-design table{ 392 aside .step .step-box .change-design table{
392 width: 100%; 393 width: 100%;
393 } 394 }
394 aside .step .step-box .change-design table tr{ 395 aside .step .step-box .change-design table tr{
395 border-bottom: 1px dotted #cccccc; 396 border-bottom: 1px dotted #cccccc;
396 } 397 }
397 aside .step .step-box .change-design table tr td{ 398 aside .step .step-box .change-design table tr td{
398 padding: 4px 3px; 399 padding: 4px 3px;
399 } 400 }
400 aside .step .step-box .change-design table tr td:first-child{ 401 aside .step .step-box .change-design table tr td:first-child{
401 background-color: #ededed; 402 background-color: #ededed;
402 } 403 }
403 aside .step .step-box .change-design table tr td:last-child{ 404 aside .step .step-box .change-design table tr td:last-child{
404 background: url("../images/bgbutton2.png"); 405 background: url("../images/bgbutton2.png");
405 color: #ffffff; 406 color: #ffffff;
406 font-size: 15px; 407 font-size: 15px;
407 } 408 }
408 aside .step .step-box .change-design table tr:last-child{ 409 aside .step .step-box .change-design table tr:last-child{
409 border-bottom: 0; 410 border-bottom: 0;
410 } 411 }
411 412
412 /*Step 5- finish*/ 413 /*Step 5- finish*/
413 aside .step .finish-design{ 414 aside .step .finish-design{
414 padding: 20px 0; 415 padding: 20px 0;
415 } 416 }
416 aside .step .finish-design button{ 417 aside .step .finish-design button{
417 width: 100%; 418 width: 100%;
418 padding: 8px 10px; 419 padding: 8px 10px;
419 } 420 }
420 421
421 /*DESIGN CONTENT*/ 422 /*DESIGN CONTENT*/
422 #tshirt-content{ 423 #tshirt-content{
423 position: relative; 424 position: relative;
424 } 425 }
425 #tshirt-content .switch-border-design{ 426 #tshirt-content .switch-border-design{
426 position: absolute; 427 position: absolute;
427 top: 5px; 428 top: 5px;
428 right: 10px; 429 right: 10px;
429 color: red; 430 color: red;
430 font-size: 11px; 431 font-size: 11px;
431 cursor: pointer; 432 cursor: pointer;
432 z-index: 99; 433 z-index: 99;
433 } 434 }
434 #tshirt-content .tshirt-image{ 435 #tshirt-content .tshirt-image{
435 padding: 20px 0 0 0; 436 padding: 20px 0 0 0;
436 position: relative; 437 position: relative;
437 height: 100%; 438 height: 100%;
438 width: 100%; 439 width: 100%;
439 } 440 }
440 441
441 #tshirt-content .tshirt-image img{ 442 #tshirt-content .tshirt-image img{
442 width: 100%; 443 width: 100%;
443 } 444 }
444 445
445 #tshirt-content .tshirt-choice{ 446 #tshirt-content .tshirt-choice{
446 447
447 } 448 }
448 #tshirt-content .tshirt-choice ul{ 449 #tshirt-content .tshirt-choice ul{
449 list-style: none; 450 list-style: none;
450 padding-left: 0; 451 padding-left: 0;
451 display: table; 452 display: table;
452 margin: auto; 453 margin: auto;
453 } 454 }
454 #tshirt-content .tshirt-choice ul li{ 455 #tshirt-content .tshirt-choice ul li{
455 float: left; 456 float: left;
456 margin: 10px 10px; 457 margin: 10px 10px;
457 cursor: pointer; 458 cursor: pointer;
458 } 459 }
459 #tshirt-content .tshirt-choice ul li .image{ 460 #tshirt-content .tshirt-choice ul li .image{
460 border: 1px solid #cccccc; 461 border: 1px solid #cccccc;
461 padding: 3px 3px; 462 padding: 3px 3px;
462 } 463 }
463 #tshirt-content .tshirt-choice ul li.focus{ 464 #tshirt-content .tshirt-choice ul li.focus{
464 465
465 } 466 }
466 #tshirt-content .tshirt-choice ul li.focus .image{ 467 #tshirt-content .tshirt-choice ul li.focus .image{
467 border: 1px solid #ff0000; 468 border: 1px solid #ff0000;
468 } 469 }
469 #tshirt-content .tshirt-choice ul li .image img{ 470 #tshirt-content .tshirt-choice ul li .image img{
470 width: 50px; 471 width: 50px;
471 height: auto; 472 height: auto;
472 } 473 }
473 /*MODAL Design*/ 474 /*MODAL Design*/
474 #tshirt-design{ 475 #tshirt-design{
475 background-color: #666666; 476 background-color: #666666;
476 } 477 }
477 #tshirt-design .modal-dialog{ 478 #tshirt-design .modal-dialog{
478 /*width: 800px!important;*/ 479 /*width: 800px!important;*/
479 margin: 0 auto; 480 margin: 0 auto;
480 } 481 }
481 #tshirt-design .modal-dialog .modal-content{ 482 #tshirt-design .modal-dialog .modal-content{
482 background-color: transparent; 483 background-color: transparent;
483 border-radius: 0; 484 border-radius: 0;
484 border: 0; 485 border: 0;
485 -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important; 486 -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important;
486 box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important; 487 box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important;
487 } 488 }
488 #tshirt-design .modal-dialog .modal-content .modal-header{ 489 #tshirt-design .modal-dialog .modal-content .modal-header{
489 padding: 0 0 10px 0; 490 padding: 0 0 10px 0;
490 border-bottom: 0; 491 border-bottom: 0;
491 border-shadow: none!important; 492 border-shadow: none!important;
492 } 493 }
493 #tshirt-design .modal-dialog .modal-content .modal-body{ 494 #tshirt-design .modal-dialog .modal-content .modal-body{
494 background-color: #f5f5f5; 495 background-color: #f5f5f5;
495 padding: 0 0; 496 padding: 0 0;
496 } 497 }
497 #tshirt-design header{ 498 #tshirt-design header{
498 border-bottom: 1px solid #cccccc; 499 border-bottom: 1px solid #cccccc;
499 background-color: #dddddd; 500 background-color: #dddddd;
500 } 501 }
501 #tshirt-design header ul.nav{ 502 #tshirt-design header ul.nav{
502 padding-left: 0; 503 padding-left: 0;
503 list-style: none; 504 list-style: none;
504 } 505 }
505 #tshirt-design header ul.nav li{ 506 #tshirt-design header ul.nav li{
506 float: left; 507 float: left;
507 padding: 8px 26px; 508 padding: 8px 26px;
508 border-right: 1px solid #cccccc; 509 border-right: 1px solid #cccccc;
509 font-size: 14px; 510 font-size: 14px;
510 cursor: pointer; 511 cursor: pointer;
511 } 512 }
512 #tshirt-design header ul.nav li:hover, #tshirt-design header ul.nav li.active{ 513 #tshirt-design header ul.nav li:hover, #tshirt-design header ul.nav li.active{
513 background-color: #ff7200; 514 background-color: #ff7200;
514 color: #ffffff; 515 color: #ffffff;
515 } 516 }
516 #tshirt-design header ul.nav li:hover i.fa, #tshirt-design header ul.nav li.active i.fa{ 517 #tshirt-design header ul.nav li:hover i.fa, #tshirt-design header ul.nav li.active i.fa{
517 color: #ffffff; 518 color: #ffffff;
518 } 519 }
519 #tshirt-design header ul.nav li i.fa{ 520 #tshirt-design header ul.nav li i.fa{
520 color: #fc7500; 521 color: #fc7500;
521 font-size: 20px; 522 font-size: 20px;
522 margin-right: 10px; 523 margin-right: 10px;
523 } 524 }
524 #tshirt-design header .action{ 525 #tshirt-design header .action{
525 526
526 } 527 }
527 #tshirt-design header .action button{ 528 #tshirt-design header .action button{
528 padding: 2px 10px; 529 padding: 2px 10px;
529 margin: 6px 10px; 530 margin: 6px 10px;
530 } 531 }
531 #tshirt-design header .action button:hover{ 532 #tshirt-design header .action button:hover{
532 background-color: red; 533 background-color: red;
533 color: #ffffff; 534 color: #ffffff;
534 } 535 }
535 536
536 /*Aside modal*/ 537 /*Aside modal*/
537 .aside{ 538 .aside{
538 } 539 }
539 540
540 .aside .box-design-option{ 541 .aside .box-design-option{
541 list-style: none; 542 list-style: none;
542 padding-left: 0; 543 padding-left: 0;
543 margin-top: 10px; 544 margin-top: 10px;
544 } 545 }
545 546
546 .aside .box-design-option li{ 547 .aside .box-design-option li{
547 border: 1px solid #cdcdcd; 548 border: 1px solid #cdcdcd;
548 position: relative; 549 position: relative;
549 /*cursor: pointer;*/ 550 /*cursor: pointer;*/
550 margin-bottom: 10px; 551 margin-bottom: 10px;
551 } 552 }
552 .aside .box-design-option li .hover{ 553 .aside .box-design-option li .hover{
553 background-color: #fddad4; 554 background-color: #fddad4;
554 opacity: 0.6; 555 opacity: 0.6;
555 position: absolute; 556 position: absolute;
556 width: 100%; 557 width: 100%;
557 height: 100%; 558 height: 100%;
558 display: none; 559 display: none;
559 } 560 }
560 .aside .box-design-option li:hover .hover{ 561 .aside .box-design-option li:hover .hover{
561 display: block; 562 display: block;
562 } 563 }
563 564
564 .aside .box-design-option li .title{ 565 .aside .box-design-option li .title{
565 background: url("../images/bg1.png") repeat #cdcdcd; 566 background: url("../images/bg1.png") repeat #cdcdcd;
566 padding: 3px 10px; 567 padding: 3px 10px;
567 } 568 }
568 .aside .box-design-option li .title i.fa{ 569 .aside .box-design-option li .title i.fa{
569 color: #000000; 570 color: #000000;
570 } 571 }
571 572
572 .aside .box-design-option li .content{ 573 .aside .box-design-option li .content{
573 574
574 } 575 }
575 .aside .box-design-option li .content i.fa{ 576 .aside .box-design-option li .content i.fa{
576 font-size: 30px; 577 font-size: 30px;
577 color: #ff7200; 578 color: #ff7200;
578 margin: 8px 0; 579 margin: 8px 0;
579 } 580 }
580 .aside .box-design-option li .content .des{ 581 .aside .box-design-option li .content .des{
581 padding: 3px 10px 3px 0; 582 padding: 3px 10px 3px 0;
582 } 583 }
583 .aside .box-design-option li .content .color-patterns { 584 .aside .box-design-option li .content .color-patterns {
584 width: 100%; 585 width: 100%;
585 border: #bbb solid 1px; 586 border: #bbb solid 1px;
586 background: #FFF; 587 background: #FFF;
587 margin-top: 5px; 588 margin-top: 5px;
588 min-height: 65px; 589 min-height: 65px;
589 } 590 }
590 591
591 .aside .box-design-option li .content .color-patterns .color-pattern-item{ 592 .aside .box-design-option li .content .color-patterns .color-pattern-item{
592 height: 20px; 593 height: 20px;
593 float: left; 594 float: left;
594 margin-left: 4px; 595 margin-left: 4px;
595 margin-top: 2px; 596 margin-top: 2px;
596 width: 20px; 597 width: 20px;
597 cursor: pointer; 598 cursor: pointer;
598 border: 1px solid #ddd; 599 border: 1px solid #ddd;
599 } 600 }
600 601
601 .aside .box-design-option li .content .color-patterns .color-pattern-item:hover { 602 .aside .box-design-option li .content .color-patterns .color-pattern-item:hover {
602 outline: 1px solid #ed1d24; 603 outline: 1px solid #ed1d24;
603 } 604 }
604 605
605 .aside .box-design-option li .title .reset-color-patterns { 606 .aside .box-design-option li .title .reset-color-patterns {
606 cursor: pointer; 607 cursor: pointer;
607 } 608 }
608 609
609 .aside .box-design-option li .title .reset-color-patterns:hover { 610 .aside .box-design-option li .title .reset-color-patterns:hover {
610 opacity: 0.6; 611 opacity: 0.6;
611 } 612 }
612 613
613 .aside .box-design-option li .content .layer-item { 614 .aside .box-design-option li .content .layer-item {
614 text-align: center; 615 text-align: center;
615 border: 1px #ddd solid; 616 border: 1px #ddd solid;
616 background: #FFF; 617 background: #FFF;
617 padding: 5px; 618 padding: 5px;
618 font-size: 12px; 619 font-size: 12px;
619 cursor: pointer; 620 cursor: pointer;
620 } 621 }
621 622
622 .aside .box-design-option li .content .layer-item:hover { 623 .aside .box-design-option li .content .layer-item:hover {
623 background: #ffcccc; 624 background: #ffcccc;
624 } 625 }
625 626
626 627
627 /*Design Text*/ 628 /*Design Text*/
628 .aside #choice-text{ 629 .aside #choice-text{
629 630
630 } 631 }
631 .aside #choice-text .content{ 632 .aside #choice-text .content{
632 padding: 10px 10px; 633 padding: 10px 10px;
633 } 634 }
634 .aside #choice-text .content ul.font-family-box{ 635 .aside #choice-text .content ul.font-family-box{
635 list-style: none; 636 list-style: none;
636 margin: 10px 0; 637 margin: 10px 0;
637 padding-left: 0; 638 padding-left: 0;
638 height: 180px; 639 height: 180px;
639 width: 100%; 640 width: 100%;
640 overflow-y: scroll; 641 overflow-y: scroll;
641 border: 1px solid #c0c0c0; 642 border: 1px solid #c0c0c0;
642 } 643 }
643 644
644 .aside #choice-text .content .font-family-box li{ 645 .aside #choice-text .content .font-family-box li{
645 cursor: pointer; 646 cursor: pointer;
646 padding: 4px 8px; 647 padding: 4px 8px;
647 border: 0; 648 border: 0;
648 border-bottom: 1px solid #c0c0c0; 649 border-bottom: 1px solid #c0c0c0;
649 border-right: 1px solid #c0c0c0; 650 border-right: 1px solid #c0c0c0;
650 font-size: 16px; 651 font-size: 16px;
651 margin-bottom: 0; 652 margin-bottom: 0;
652 } 653 }
653 .aside #choice-text .content .font-family-box li.active{ 654 .aside #choice-text .content .font-family-box li.active{
654 border: 1px solid #fe070f; 655 border: 1px solid #fe070f;
655 } 656 }
656 .aside #choice-text .content .spacing-letter{ 657 .aside #choice-text .content .spacing-letter{
657 658
658 } 659 }
659 .aside #choice-text .content .spacing-letter .text-label{ 660 .aside #choice-text .content .spacing-letter .text-label{
660 font-size: 16px; 661 font-size: 16px;
661 padding: 4px 0; 662 padding: 4px 0;
662 } 663 }
663 .aside #choice-text .content .spacing-letter .box{ 664 .aside #choice-text .content .spacing-letter .box{
664 border: 1px solid #8c8c8c; 665 border: 1px solid #8c8c8c;
665 box-shadow: 0 0 5px #888888; 666 box-shadow: 0 0 5px #888888;
666 background-color: #f0f0f0; 667 background-color: #f0f0f0;
667 } 668 }
668 .aside #choice-text .content .spacing-letter .item{ 669 .aside #choice-text .content .spacing-letter .item{
669 float: left; 670 float: left;
670 } 671 }
671 .aside #choice-text .content .spacing-letter .item:hover{ 672 .aside #choice-text .content .spacing-letter .item:hover{
672 background-color: #fddad4; 673 background-color: #fddad4;
673 } 674 }
674 675
675 .aside #choice-text .content .spacing-letter .item i.fa{ 676 .aside #choice-text .content .spacing-letter .item i.fa{
676 font-size: 22px; 677 font-size: 22px;
677 margin: 0 0; 678 margin: 0 0;
678 color: #000000; 679 color: #000000;
679 } 680 }
680 .aside #choice-text .content .spacing-letter .item-text{ 681 .aside #choice-text .content .spacing-letter .item-text{
681 padding: 6px 20px; 682 padding: 6px 20px;
682 font-size: 13px; 683 font-size: 13px;
683 } 684 }
684 .aside #choice-text .content .spacing-letter .item-plus{ 685 .aside #choice-text .content .spacing-letter .item-plus{
685 border-right: 1px solid #8c8c8c; 686 border-right: 1px solid #8c8c8c;
686 } 687 }
687 .aside #choice-text .content .spacing-letter .item-minus{ 688 .aside #choice-text .content .spacing-letter .item-minus{
688 border-left: 1px solid #8c8c8c; 689 border-left: 1px solid #8c8c8c;
689 } 690 }
690 .aside #choice-text .content .spacing-letter .item-plus, .aside #choice-text .content .spacing-letter .item-minus { 691 .aside #choice-text .content .spacing-letter .item-plus, .aside #choice-text .content .spacing-letter .item-minus {
691 padding: 5px 6px 1px 6px; 692 padding: 5px 6px 1px 6px;
692 cursor: pointer; 693 cursor: pointer;
693 } 694 }
694 /*Design Choice Illustration*/ 695 /*Design Choice Illustration*/
695 .aside #choice-illustration li .content { 696 .aside #choice-illustration li .content {
696 padding: 10px 10px; 697 padding: 10px 10px;
697 } 698 }
698 699
699 .aside #choice-illustration li .content select{ 700 .aside #choice-illustration li .content select{
700 width: 100%; 701 width: 100%;
701 } 702 }
702 703
703 .aside #choice-illustration li .content .illustration-list { 704 .aside #choice-illustration li .content .illustration-list {
704 width: 100%; 705 width: 100%;
705 border: #bbb solid 1px; 706 border: #bbb solid 1px;
706 background: #FFF; 707 background: #FFF;
707 margin-top: 5px; 708 margin-top: 5px;
708 min-height: 310px; 709 min-height: 310px;
709 padding-bottom: 20px; 710 padding-bottom: 20px;
710 } 711 }
711 712
712 .aside #choice-illustration li .content .illustration-list .illstration-item{ 713 .aside #choice-illustration li .content .illustration-list .illstration-item{
713 height: 60px; 714 height: 60px;
714 overflow: hidden; 715 overflow: hidden;
715 float: left; 716 float: left;
716 margin-left: 6px; 717 margin-left: 6px;
717 margin-top: 5px; 718 margin-top: 5px;
718 margin-bottom: 5px; 719 margin-bottom: 5px;
719 padding: 2px; 720 padding: 2px;
720 background: #e2e2e2; 721 background: #e2e2e2;
721 border: solid 2px #d7d7d7; 722 border: solid 2px #d7d7d7;
722 cursor: pointer; 723 cursor: pointer;
723 } 724 }
724 725
725 .aside #choice-illustration li .content .illustration-list .illstration-item:hover { 726 .aside #choice-illustration li .content .illustration-list .illstration-item:hover {
726 outline: 2px solid #ed1d24; 727 outline: 2px solid #ed1d24;
727 } 728 }
728 729
729 .aside #choice-illustration li .content .illustration-list .illstration-item img { 730 .aside #choice-illustration li .content .illustration-list .illstration-item img {
730 width: 50px; 731 width: 50px;
731 cursor: pointer; 732 cursor: pointer;
732 } 733 }
733 734
734 .illustration-list .footer-bar, .saved-list .footer-bar { 735 .illustration-list .footer-bar, .saved-list .footer-bar {
735 text-align: center; 736 text-align: center;
736 margin-top: 5px; 737 margin-top: 5px;
737 bottom: 10px; 738 bottom: 10px;
738 position: absolute; 739 position: absolute;
739 width: 100%; 740 width: 100%;
740 padding-right: 20px; 741 padding-right: 20px;
741 } 742 }
742 .footer-bar .footer-pagination { 743 .footer-bar .footer-pagination {
743 margin-right: 5px; 744 margin-right: 5px;
744 cursor: pointer; 745 cursor: pointer;
745 font-size: 9px; 746 font-size: 9px;
746 color: #FFF; 747 color: #FFF;
747 background: #666666; 748 background: #666666;
748 text-transform: uppercase; 749 text-transform: uppercase;
749 padding: 2px 5px; 750 padding: 2px 5px;
750 } 751 }
751 752
752 .footer-bar .footer-pagination:hover { 753 .footer-bar .footer-pagination:hover {
753 background: #999999; 754 background: #999999;
754 } 755 }
755 .tooltip-arrow, 756 .tooltip-arrow,
756 .red-tooltip + .tooltip > .tooltip-inner { 757 .red-tooltip + .tooltip > .tooltip-inner {
757 background-color: #FFF; 758 background-color: #FFF;
758 margin:0; 759 margin:0;
759 padding:0; 760 padding:0;
760 } 761 }
761 762
762 /* Insert image*/ 763 /* Insert image*/
763 #btn-choose-image { 764 #btn-choose-image {
764 background: #ff0f00; 765 background: #ff0f00;
765 cursor: pointer; 766 cursor: pointer;
766 margin: 10px 0px; 767 margin: 10px 0px;
767 padding: 0 10px; 768 padding: 0 10px;
768 color: #FFF; 769 color: #FFF;
769 font-size: 12px; 770 font-size: 12px;
770 } 771 }
771 772
772 #btn-choose-image:hover { 773 #btn-choose-image:hover {
773 background: #f8aeae; 774 background: #f8aeae;
774 } 775 }
775 776
776 .aside #choice-image li .content { 777 .aside #choice-image li .content {
777 margin: 0 10px; 778 margin: 0 10px;
778 padding: 10px 0; 779 padding: 10px 0;
779 } 780 }
780 781
781 .aside #choice-image li .content .small-text { 782 .aside #choice-image li .content .small-text {
782 font-size:10px; 783 font-size:10px;
783 margin-bottom: 10px; 784 margin-bottom: 10px;
784 } 785 }
785 786
786 .aside #choice-image { 787 .aside #choice-image {
787 font-size: 13px; 788 font-size: 13px;
788 } 789 }
789 790
790 .aside #imgLoader{ 791 .aside #imgLoader{
791 display: none; 792 display: none;
792 } 793 }
793 794
794 .aside #choice-image li .content .list-images { 795 .aside #choice-image li .content .list-images {
795 height: 300px; 796 height: 300px;
796 background: #FFF; 797 background: #FFF;
797 border: 1px solid #DDD; 798 border: 1px solid #DDD;
798 } 799 }
799 800
800 .aside #choice-image li .content .list-images .recent-img{ 801 .aside #choice-image li .content .list-images .recent-img{
801 height: 60px; 802 height: 60px;
802 overflow: hidden; 803 overflow: hidden;
803 float: left; 804 float: left;
804 margin-left: 6px; 805 margin-left: 6px;
805 margin-top: 5px; 806 margin-top: 5px;
806 margin-bottom: 5px; 807 margin-bottom: 5px;
807 padding: 2px; 808 padding: 2px;
808 background: #e2e2e2; 809 background: #e2e2e2;
809 border: solid 2px #d7d7d7; 810 border: solid 2px #d7d7d7;
810 cursor: pointer; 811 cursor: pointer;
811 } 812 }
812 813
813 .aside #choice-image li .content .list-images .recent-img:hover { 814 .aside #choice-image li .content .list-images .recent-img:hover {
814 outline: 2px solid #ed1d24; 815 outline: 2px solid #ed1d24;
815 } 816 }
816 817
817 .aside #choice-image li .content .list-images .recent-img img { 818 .aside #choice-image li .content .list-images .recent-img img {
818 width: 50px; 819 width: 50px;
819 cursor: pointer; 820 cursor: pointer;
820 } 821 }
821 822
822 /*Design content*/ 823 /*Design content*/
823 .tshirt-design-container{ 824 .tshirt-design-container{
824 825
825 } 826 }
826 .tshirt-design-container .design-content{ 827 .tshirt-design-container .design-content{
827 padding: 10px 0; 828 padding: 10px 0;
828 } 829 }
829 .tshirt-design-container .design-content .content{ 830 .tshirt-design-container .design-content .content{
830 width: 100%; 831 width: 100%;
831 height: 100%; 832 height: 100%;
832 min-height: 600px; 833 min-height: 600px;
833 position: relative; 834 position: relative;
834 padding: 40px 40px; 835 padding: 40px 40px;
835 } 836 }
836 .tshirt-design-container .design-content .content .selection-design{ 837 .tshirt-design-container .design-content .content .selection-design{
837 border: 1px solid #ff0000; 838 border: 1px solid #ff0000;
838 } 839 }
839 .tshirt-design-container .agree-design{ 840 .tshirt-design-container .agree-design{
840 position: absolute; 841 position: absolute;
841 right: -16px; 842 right: -16px;
842 top: 40%; 843 top: 40%;
843 cursor: pointer; 844 cursor: pointer;
844 } 845 }
845 .tshirt-design-container .agree-design:hover{ 846 .tshirt-design-container .agree-design:hover{
846 opacity: 0.8; 847 opacity: 0.8;
847 } 848 }
848 .tshirt-design-container .trash-design{ 849 .tshirt-design-container .trash-design{
849 position: absolute; 850 position: absolute;
850 right: 5px; 851 right: 5px;
851 bottom: 0; 852 bottom: 0;
852 } 853 }
853 .tshirt-design-container .trash-design:hover{ 854 .tshirt-design-container .trash-design:hover{
854 opacity: 0.5; 855 opacity: 0.5;
855 } 856 }
856 857
857 .object-border{ 858 .object-border{
858 position: absolute; 859 position: absolute;
859 background-color: rgb(0, 108, 255); 860 background-color: rgb(0, 108, 255);
860 border: 0; 861 border: 0;
861 display:none; 862 display:none;
862 transform-origin: 0% 0%; 863 transform-origin: 0% 0%;
863 } 864 }
864 #object-border-top, #object-border-bottom{ 865 #object-border-top, #object-border-bottom{
865 height: 2px; 866 height: 2px;
866 } 867 }
867 #object-border-right, #object-border-left{ 868 #object-border-right, #object-border-left{
868 width: 2px; 869 width: 2px;
869 } 870 }
870 871
871 872
872 /*FOOTER*/ 873 /*FOOTER*/
873 footer{ 874 footer{
874 background-color: #333333; 875 background-color: #333333;
875 } 876 }
876 footer ul.nav-footer{ 877 footer ul.nav-footer{
877 padding-left: 0; 878 padding-left: 0;
878 list-style: none; 879 list-style: none;
879 float: left; 880 float: left;
880 width: 80%; 881 width: 80%;
881 margin-bottom: 0 882 margin-bottom: 0
882 } 883 }
883 footer ul.nav-footer li{ 884 footer ul.nav-footer li{
884 float: left; 885 float: left;
885 padding: 3px 10px; 886 padding: 3px 10px;
886 border-right: 1px dotted #ffffff; 887 border-right: 1px dotted #ffffff;
887 888
888 } 889 }
889 footer ul.nav-footer li a{ 890 footer ul.nav-footer li a{
890 color: #ffffff; 891 color: #ffffff;
891 font-size: 11px; 892 font-size: 11px;
892 } 893 }
893 footer .logo-bottom{ 894 footer .logo-bottom{
894 float: left; 895 float: left;
895 width: 20%; 896 width: 20%;
896 margin-bottom: 0; 897 margin-bottom: 0;
897 text-align: right; 898 text-align: right;
898 } 899 }
899 footer .logo-bottom img{ 900 footer .logo-bottom img{
900 height: 25px; 901 height: 25px;
901 max-width: 100%; 902 max-width: 100%;
902 } 903 }
903 .footer{ 904 .footer{
904 padding: 15px 0; 905 padding: 15px 0;
905 text-align: center; 906 text-align: center;
906 } 907 }
907 /* Customize container */ 908 /* Customize container */
908 @media (min-width: 768px) { 909 @media (min-width: 768px) {
909 .container { 910 .container {
910 /*max-width: 730px;*/ 911 /*max-width: 730px;*/
911 } 912 }
912 } 913 }
913 914
914 /* Responsive: Portrait tablets and up */ 915 /* Responsive: Portrait tablets and up */
915 @media screen and (min-width: 768px) { 916 @media screen and (min-width: 768px) {
916 /* Remove the padding we set earlier */ 917 /* Remove the padding we set earlier */
917 918
918 } 919 }
919 920
920 @media (min-width: 1024px) { 921 @media (min-width: 1024px) {
921 #tshirt-design .modal-dialog{ 922 #tshirt-design .modal-dialog{
922 min-width: 1000px; 923 min-width: 1000px;
923 width: 1000px; 924 width: 1000px;
924 } 925 }
925 } 926 }
926 /*Mobile responsive*/ 927 /*Mobile responsive*/
927 @media (max-width: 762px) { 928 @media (max-width: 762px) {
928 .modal-dialog{ 929 .modal-dialog{
929 margin: 0 0!important; 930 margin: 0 0!important;
930 } 931 }
931 #tshirt-design header .menu-nav{ 932 #tshirt-design header .menu-nav{
932 overflow-x: scroll!important; 933 overflow-x: scroll!important;
933 -webkit-overflow-scrolling: touch; 934 -webkit-overflow-scrolling: touch;
934 } 935 }
935 936
936 #tshirt-design header ul.nav { 937 #tshirt-design header ul.nav {
937 text-align: justify; 938 text-align: justify;
938 width: 680px; 939 width: 680px;
939 } 940 }
940 941
941 #tshirt-design header ul.nav li { 942 #tshirt-design header ul.nav li {
942 display: inline-block; /* 6 */ 943 display: inline-block; /* 6 */
943 } 944 }
944 945
945 .tshirt-design-container .design-content .content{ 946 .tshirt-design-container .design-content .content{
946 padding: 14px 14px; 947 padding: 14px 14px;
947 } 948 }
948 .tshirt-design-container .design-content{ 949 .tshirt-design-container .design-content{
949 padding: 0 0; 950 padding: 0 0;
950 } 951 }
951 /*Header*/ 952 /*Header*/
952 header .logo{ 953 header .logo{
953 text-align: left; 954 text-align: left;
954 } 955 }
955 header .top-control li{ 956 header .top-control li{
956 margin: 0 4px; 957 margin: 0 4px;
957 } 958 }
958 header .top-menu{ 959 header .top-menu{
959 display: table; 960 display: table;
960 margin: auto; 961 margin: auto;
961 } 962 }
962 header .social-share{ 963 header .social-share{
963 display: none; 964 display: none;
964 } 965 }
965 header .col-sm-6{ 966 header .col-sm-6{
966 padding: 0!important; 967 padding: 0!important;
967 } 968 }
968 header .user-control{ 969 header .user-control{
969 position: absolute; 970 position: absolute;
970 right: 0; 971 right: 0;
971 top: -120%; 972 top: -120%;
972 } 973 }
973 /*Footer*/ 974 /*Footer*/
974 footer ul.nav-footer{ 975 footer ul.nav-footer{
975 width: 100%; 976 width: 100%;
976 } 977 }
977 footer .logo-bottom{ 978 footer .logo-bottom{
978 display: none; 979 display: none;
979 } 980 }
980 } 981 }
981 982
982 983
983 984
984 #tshirt-design-saved .subframe-design { 985 #tshirt-design-saved .subframe-design {
985 width: 80%; 986 width: 80%;
986 margin: auto; 987 margin: auto;
987 margin-top: 100px; 988 margin-top: 100px;
988 border: 10px solid rgb(0, 0, 0); 989 border: 10px solid rgb(0, 0, 0);
989 border: 20px solid rgba(0, 0, 0, .5); 990 border: 20px solid rgba(0, 0, 0, .5);
990 -webkit-background-clip: padding-box; /* for Safari */ 991 -webkit-background-clip: padding-box; /* for Safari */
991 background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */ 992 background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
992 background: #FFF; 993 background: #FFF;
993 } 994 }
994 995
995 #tshirt-design-saved .modal-content button.close { 996 #tshirt-design-saved .modal-content button.close {
996 margin-right: 103px; 997 margin-right: 103px;
997 font-size: 41px; 998 font-size: 41px;
998 margin-top: -8px; 999 margin-top: -8px;
999 } 1000 }
1000 1001
1001 #tshirt-design-saved .subframe-design .nav-tabs { 1002 #tshirt-design-saved .subframe-design .nav-tabs {
1002 background: rgba(0, 0, 0, .5); 1003 background: rgba(0, 0, 0, .5);
1003 border-bottom: 1px solid #F5F5F5; 1004 border-bottom: 1px solid #F5F5F5;
1004 } 1005 }
1005 1006
1006 #tshirt-design-saved .subframe-design .nav-tabs li a { 1007 #tshirt-design-saved .subframe-design .nav-tabs li a {
1007 text-decoration: none; 1008 text-decoration: none;
1008 background-color: #CCC; 1009 background-color: #CCC;
1009 cursor: pointer; 1010 cursor: pointer;
1010 margin-right: 10px; 1011 margin-right: 10px;
1011 padding: 2px 30px; 1012 padding: 2px 30px;
1012 color: #000; 1013 color: #000;
1013 font-weight: 600; 1014 font-weight: 600;
1014 border-bottom: 1px solid #F5F5F5 1015 border-bottom: 1px solid #F5F5F5
1015 } 1016 }
1016 1017
1017 #tshirt-design-saved .subframe-design .nav-tabs li.active a { 1018 #tshirt-design-saved .subframe-design .nav-tabs li.active a {
1018 background: #F5F5F5; 1019 background: #F5F5F5;
1019 color: #fe070f; 1020 color: #fe070f;
1020 } 1021 }
1021 1022
1022 #tshirt-design-saved .subframe-design .tab-content { 1023 #tshirt-design-saved .subframe-design .tab-content {
1023 background: #F5F5F5; 1024 background: #F5F5F5;
1024 width: 100%; 1025 width: 100%;
1025 min-height: 400px; 1026 min-height: 400px;
1026 } 1027 }
1027 1028
1028 #tshirt-design-saved .saved-list { 1029 #tshirt-design-saved .saved-list {
1029 width: 100%; 1030 width: 100%;
1030 border: #bbb solid 1px; 1031 border: #bbb solid 1px;
1031 background: #FFF; 1032 background: #FFF;
1032 margin-top: 0px; 1033 margin-top: 0px;
1033 min-height: 400px; 1034 min-height: 400px;
1034 padding: 10px; 1035 padding: 10px;
1035 } 1036 }
1036 1037
1037 #tshirt-design-saved .saved-list .saved-item{ 1038 #tshirt-design-saved .saved-list .saved-item{
1038 width: 100px; 1039 width: 100px;
1039 height: 100px; 1040 height: 100px;
1040 overflow: hidden; 1041 overflow: hidden;
1041 float: left; 1042 float: left;
1042 margin-left: 6px; 1043 margin-left: 6px;
1043 margin-top: 5px; 1044 margin-top: 5px;
1044 margin-bottom: 5px; 1045 margin-bottom: 5px;
1045 padding: 2px; 1046 padding: 2px;
1046 background: #e2e2e2; 1047 background: #e2e2e2;
1047 border: solid 2px #d7d7d7; 1048 border: solid 2px #d7d7d7;
1048 cursor: pointer; 1049 cursor: pointer;
1049 } 1050 }
1050 1051
1051 #tshirt-design-saved .saved-list .saved-item:hover { 1052 #tshirt-design-saved .saved-list .saved-item:hover {
1052 outline: 2px solid #ed1d24; 1053 outline: 2px solid #ed1d24;
1053 } 1054 }
1054 1055
1055 #tshirt-design-saved .saved-list .saved-item img { 1056 #tshirt-design-saved .saved-list .saved-item img {
1056 width: 100px; 1057 width: 100px;
1057 cursor: pointer; 1058 cursor: pointer;
1058 } 1059 }
1059 #tshirt-design-saved .saved-list .saved-item button { 1060 #tshirt-design-saved .saved-list .saved-item button {
1060 background: #ff0f00; 1061 background: #ff0f00;
1061 color: #FFF; 1062 color: #FFF;
1062 border: 0; 1063 border: 0;
1063 position: absolute; 1064 position: absolute;
1064 margin-left: -5px; 1065 margin-left: -5px;
1065 margin-top: -5px; 1066 margin-top: -5px;
1066 padding: 0 5px; 1067 padding: 0 5px;
1067 } 1068 }
1068 #tshirt-design-saved .saved-list .saved-item button:hover { 1069 #tshirt-design-saved .saved-list .saved-item button:hover {
1069 background: #ffcccc; 1070 background: #ffcccc;
1070 } 1071 }
1071 1072
1072 #tshirt-design-saved .saved-list .footer-bar { 1073 #tshirt-design-saved .saved-list .footer-bar {
1073 bottom: 20px; 1074 bottom: 20px;
1074 width: 75%; 1075 width: 75%;
1075 } 1076 }