TRUONG / T-Shats Frontend

Download as
Browse Code »

Commit faf1542f8ef7d73272242c9a04f811327f1f62d9

Authored by TRUONG
1 parent 24a56c629f
Exists in master and in 1 other branch develop

fix lazy border width

Showing 7 changed files with 190 additions and 5 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 = '26-11_01'; 50 var VERSION = '27-11_01';
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 @ faf1542
1 define(['app'], function (app) { 1 define(['app'], function (app) {
2 app.controller('TshirtdesignCtrl', function ($scope, $rootScope, $window, $timeout, $illustration) { 2 app.controller('TshirtdesignCtrl', function ($scope, $rootScope, $window, $timeout, $illustration, $favorite) {
3 $scope.savedFrameView = 'views/design_part/tshirt-saved.html?ver='+VERSION;
3 var canvas = new fabric.Canvas('main-design-container'); 4 var canvas = new fabric.Canvas('main-design-container');
4 //Set width and height canvas 5 //Set width and height canvas
5 function setSizeCanvas() { 6 function setSizeCanvas() {
6 if(typeof $rootScope.placeTshirt.place == 'undefined') 7 if(typeof $rootScope.placeTshirt.place == 'undefined')
7 return; 8 return;
8 9
9 var _modalWidth = $('.modal-dialog').width(); 10 var _modalWidth = $('.modal-dialog').width();
10 var _windowWidth = window.innerWidth; 11 var _windowWidth = window.innerWidth;
11 var place = $rootScope.placeTshirt.place; 12 var place = $rootScope.placeTshirt.place;
12 13
13 switch (place) { 14 switch (place) {
14 case 't_shirt_p_1' : 15 case 't_shirt_p_1' :
15 $scope.designCanvasClass = 'design-content-t_shirt_p_1'; 16 $scope.designCanvasClass = 'design-content-t_shirt_p_1';
16 if(_windowWidth > 762) { 17 if(_windowWidth > 762) {
17 var _contentCanvasWidth = (_modalWidth*8/12)/1.2; 18 var _contentCanvasWidth = (_modalWidth*8/12)/1.2;
18 var _contentCanvasHeight = _contentCanvasWidth; 19 var _contentCanvasHeight = _contentCanvasWidth;
19 } else { 20 } else {
20 var _contentCanvasWidth = _windowWidth-70; 21 var _contentCanvasWidth = _windowWidth-70;
21 var _contentCanvasHeight = _contentCanvasWidth; 22 var _contentCanvasHeight = _contentCanvasWidth;
22 } 23 }
23 break; 24 break;
24 case 't_shirt_p_2' : 25 case 't_shirt_p_2' :
25 $scope.designCanvasClass = 'design-content-t_shirt_p_2'; 26 $scope.designCanvasClass = 'design-content-t_shirt_p_2';
26 if(_windowWidth > 762) { 27 if(_windowWidth > 762) {
27 var _contentCanvasWidth = (_modalWidth*8/12)/1.2; 28 var _contentCanvasWidth = (_modalWidth*8/12)/1.2;
28 var _contentCanvasHeight = (_modalWidth*8/12)/2.2; 29 var _contentCanvasHeight = (_modalWidth*8/12)/2.2;
29 30
30 } else { 31 } else {
31 var _contentCanvasWidth = _windowWidth-70; 32 var _contentCanvasWidth = _windowWidth-70;
32 var _contentCanvasHeight = (_windowWidth)/2.5; 33 var _contentCanvasHeight = (_windowWidth)/2.5;
33 } 34 }
34 break; 35 break;
35 default: 36 default:
36 break; 37 break;
37 } 38 }
38 39
39 canvas.setWidth(_contentCanvasWidth); 40 canvas.setWidth(_contentCanvasWidth);
40 canvas.setHeight(_contentCanvasHeight); 41 canvas.setHeight(_contentCanvasHeight);
41 } 42 }
42 setSizeCanvas(); 43 setSizeCanvas();
43 //Window resize event 44 //Window resize event
44 $(window).resize(function () { 45 $(window).resize(function () {
45 setSizeCanvas(); 46 setSizeCanvas();
46 }); 47 });
47 48
48 //Custom control 49 //Custom control
49 fabric.Object.prototype.transparentCorners = true; 50 fabric.Object.prototype.transparentCorners = true;
50 fabric.Object.prototype.hasRotatingPoint = false; 51 fabric.Object.prototype.hasRotatingPoint = false;
51 52
52 var ctrVisible = {tl: false, ml:false, bl:false, mb: false, br: true, mr: false, tr: true, mt: true, mtr: false}; 53 var ctrVisible = {tl: false, ml:false, bl:false, mb: false, br: true, mr: false, tr: true, mt: true, mtr: false};
53 for(key in ctrVisible) { 54 for(key in ctrVisible) {
54 fabric.Object.prototype.setControlVisible(key,ctrVisible[key]); 55 fabric.Object.prototype.setControlVisible(key,ctrVisible[key]);
55 } 56 }
56 57
57 fabric.Object.prototype.customiseCornerIcons({ 58 fabric.Object.prototype.customiseCornerIcons({
58 settings: { 59 settings: {
59 borderColor: '#0000ff', 60 borderColor: '#0000ff',
60 cornerSize: 25, 61 cornerSize: 25,
61 cornerShape: 'circle', 62 cornerShape: 'circle',
62 cornerBackgroundColor: '#0171b4', 63 cornerBackgroundColor: '#0171b4',
63 cornerPadding: 6 64 cornerPadding: 6
64 }, 65 },
65 mt: { 66 mt: {
66 icon: 'images/control-icon/ok.png' 67 icon: 'images/control-icon/ok.png'
67 }, 68 },
68 br: { 69 br: {
69 icon: 'images/control-icon/resize.png' 70 icon: 'images/control-icon/resize.png'
70 }, 71 },
71 tr: { 72 tr: {
72 icon: 'images/control-icon/rotate.png' 73 icon: 'images/control-icon/rotate.png'
73 } 74 }
74 }); 75 });
75 76
76 fabric.Canvas.prototype.customiseControls({ 77 fabric.Canvas.prototype.customiseControls({
77 mt: { 78 mt: {
78 cursor: 'pointer', 79 cursor: 'pointer',
79 action: function(e, target) { 80 action: function(e, target) {
80 fabric.Object.prototype.selectable = false; 81 fabric.Object.prototype.selectable = false;
81 canvas.deactivateAll(); 82 canvas.deactivateAll();
82 delete currentObj; 83 delete currentObj;
83 $scope.designTextValue = ''; 84 $scope.designTextValue = '';
84 $timeout(function(){ 85 $timeout(function(){
85 fabric.Object.prototype.selectable = true; 86 fabric.Object.prototype.selectable = true;
86 },20); 87 },20);
87 } 88 }
88 }, 89 },
89 br: { 90 br: {
90 91
91 }, 92 },
92 tr: { 93 tr: {
93 action: 'rotate', 94 action: 'rotate',
94 cursor: 'crosshair' 95 cursor: 'crosshair'
95 } 96 }
96 }); 97 });
97 98
98 canvas.on({ 99 canvas.on({
99 'object:added' : onIllustrationAdded, 100 'object:added' : onIllustrationAdded,
100 'object:moving' : onIllustrationMoving, 101 'object:moving' : onIllustrationMoving,
101 'object:scaling' : onIllustrationChange, 102 'object:scaling' : onIllustrationChange,
102 'object:rotating' : onIllustrationChange, 103 'object:rotating' : onIllustrationChange,
103 'object:selected' : onObjectSelected, 104 'object:selected' : onObjectSelected,
104 'object:modified' : onIllustrationModifield, 105 'object:modified' : onIllustrationModifield,
105 'selection:cleared' : onObjectOut, 106 'selection:cleared' : onObjectOut,
106 }); 107 });
107 108
108 var currentObj; 109 var currentObj;
109 var listObj = []; 110 var listObj = [];
110 var stateObj = []; 111 var stateObj = [];
111 var indexCurr = 0; 112 var indexCurr = 0;
112 var indexCurr2 = 0; 113 var indexCurr2 = 0;
113 var actionObj = false; 114 var actionObj = false;
114 var refreshObj = true; 115 var refreshObj = true;
115 var spacingNum = 0; 116 var spacingNum = 0;
116 $scope.itemFont = 0; 117 $scope.itemFont = 0;
117 118
118 $scope.showDesignTab = function(tab){ 119 $scope.showDesignTab = function(tab){
119 canvas.deactivateAll().renderAll(); 120 canvas.deactivateAll().renderAll();
120 $rootScope.isShowLeftPanel = tab; 121 $rootScope.isShowLeftPanel = tab;
121 switch (tab) { 122 switch (tab) {
122 case 'illustration': { 123 case 'illustration': {
123 $scope.IllustrationList = $illustration.getAll(); 124 $scope.IllustrationList = $illustration.getAll();
124 $rootScope.outputImage = false; 125 $rootScope.outputImage = false;
125 $scope.illustrationSelectConfig = { 126 $scope.illustrationSelectConfig = {
126 allowClear:true 127 allowClear:true
127 }; 128 };
128 $timeout(function(){ 129 $timeout(function(){
129 $('.illstration-item').tooltip({ 130 $('.illstration-item').tooltip({
130 animated: 'fade', 131 animated: 'fade',
131 placement: 'bottom', 132 placement: 'bottom',
132 html: true 133 html: true
133 }); 134 });
134 },1000); 135 },1000);
135 break; 136 break;
136 } 137 }
137 case 'text': { 138 case 'text': {
138 break; 139 break;
139 } 140 }
140 } 141 }
141 }; 142 };
142 $scope.showDesignTab('default'); 143 $scope.showDesignTab('default');
143 144
144 145
145 function onIllustrationAdded(options){ 146 function onIllustrationAdded(options){
146 var object = options.target; 147 var object = options.target;
147 148
148 if (actionObj === true) { 149 if (actionObj === true) {
149 stateObj = [stateObj[indexCurr2]]; 150 stateObj = [stateObj[indexCurr2]];
150 listObj = [listObj[indexCurr2]]; 151 listObj = [listObj[indexCurr2]];
151 152
152 actionObj = false; 153 actionObj = false;
153 console.log(stateObj); 154 console.log(stateObj);
154 indexCurr = 1; 155 indexCurr = 1;
155 } 156 }
156 object.saveState(); 157 object.saveState();
157 158
158 console.log(object.originalState); 159 console.log(object.originalState);
159 stateObj[indexCurr] = JSON.stringify(object.originalState); 160 stateObj[indexCurr] = JSON.stringify(object.originalState);
160 listObj[indexCurr] = object; 161 listObj[indexCurr] = object;
161 indexCurr++; 162 indexCurr++;
162 indexCurr2 = indexCurr - 1; 163 indexCurr2 = indexCurr - 1;
163 refreshObj = true; 164 refreshObj = true;
164 } 165 }
165 166
166 function onIllustrationModifield(options){ 167 function onIllustrationModifield(options){
167 $('.object-border').hide(); 168 $('.object-border').hide();
168 // 169 //
169 var pointer = canvas.getPointer(options.e); 170 var pointer = canvas.getPointer(options.e);
170 if (pointer.x >= 567 && pointer.y >= 620 && pointer.x <= 600 && pointer.y <= 670){ 171 if (pointer.x >= 567 && pointer.y >= 620 && pointer.x <= 600 && pointer.y <= 670){
171 canvas.getActiveObject().remove(); 172 canvas.getActiveObject().remove();
172 $('.design-content .trash-design img').attr({'src':'images/trash.png'}); 173 $('.design-content .trash-design img').attr({'src':'images/trash.png'});
173 return; 174 return;
174 } 175 }
175 176
176 // 177 //
177 var objOffset = canvas.getActiveObject().getBoundingRect(); 178 var objOffset = canvas.getActiveObject().getBoundingRect();
178 var cH = canvas.height, cW = canvas.width, H0 = 20, W0 = 20; 179 var cH = canvas.height, cW = canvas.width, H0 = 20, W0 = 20;
179 //console.log(objOffset,canvas.height,canvas.width); 180 //console.log(objOffset,canvas.height,canvas.width);
180 if (objOffset.left<W0-objOffset.width || objOffset.left>cW-W0 || objOffset.top<H0-objOffset.height || objOffset.top>cH-H0){ 181 if (objOffset.left<W0-objOffset.width || objOffset.left>cW-W0 || objOffset.top<H0-objOffset.height || objOffset.top>cH-H0){
181 if (confirm('削除してもよろしいですか')){ 182 if (confirm('削除してもよろしいですか')){
182 canvas.getActiveObject().remove(); 183 canvas.getActiveObject().remove();
183 }else{ 184 }else{
184 undoCanvas(); 185 undoCanvas();
185 return; 186 return;
186 } 187 }
187 } 188 }
188 189
189 var object = options.target; 190 var object = options.target;
190 if (actionObj === true) { 191 if (actionObj === true) {
191 stateObj = [stateObj[indexCurr2]]; 192 stateObj = [stateObj[indexCurr2]];
192 listObj = [listObj[indexCurr2]]; 193 listObj = [listObj[indexCurr2]];
193 194
194 actionObj = false; 195 actionObj = false;
195 console.log(stateObj); 196 console.log(stateObj);
196 indexCurr = 1; 197 indexCurr = 1;
197 } 198 }
198 199
199 object.saveState(); 200 object.saveState();
200 201
201 stateObj[indexCurr] = JSON.stringify(object.originalState); 202 stateObj[indexCurr] = JSON.stringify(object.originalState);
202 listObj[indexCurr] = object; 203 listObj[indexCurr] = object;
203 indexCurr++; 204 indexCurr++;
204 indexCurr2 = indexCurr - 1; 205 indexCurr2 = indexCurr - 1;
205 refreshObj = true; 206 refreshObj = true;
206 } 207 }
207 208
208 function onIllustrationChange(options) { 209 function onIllustrationChange(options) {
209 210
210 } 211 }
211 212
212 function onIllustrationMoving(options) { 213 function onIllustrationMoving(options) {
213 var object = options.target; 214 var object = options.target;
214 var pointer = canvas.getPointer(options.e); 215 var pointer = canvas.getPointer(options.e);
215 if (pointer.x >= 567 && pointer.y >= 620 && pointer.x <= 600 && pointer.y <= 670){ 216 if (pointer.x >= 567 && pointer.y >= 620 && pointer.x <= 600 && pointer.y <= 670){
216 $('.design-content .trash-design img').attr({'src':'images/trash-hover.png'}); 217 $('.design-content .trash-design img').attr({'src':'images/trash-hover.png'});
217 }else{ 218 }else{
218 $('.design-content .trash-design img').attr({'src':'images/trash.png'}); 219 $('.design-content .trash-design img').attr({'src':'images/trash.png'});
219 } 220 }
220 221
221 console.log(object.oCoords,object.originalState); 222 console.log(object.oCoords,object.originalState);
222 object.setCoords(); 223 object.setCoords();
223 var Coords = object.oCoords; 224 var Coords = object.oCoords;
224 var diffX = 55, diffY=50; 225 var diffX = 40, diffY=40;
225 var xAngle = Math.cos(object.getAngle() * (Math.PI / 180))/2; 226 var xAngle = Math.cos(object.getAngle() * (Math.PI / 180))/2;
226 var yAngle = Math.sin(object.getAngle() * (Math.PI / 180))/2; 227 var yAngle = Math.sin(object.getAngle() * (Math.PI / 180))/2;
227 $('#object-border-left').css({'height':Math.ceil(object.originalState.height*object.scaleY), top: Coords.tl.y+diffY, left: Coords.tl.x+diffX}); 228 $('#object-border-left').css({'height':Math.ceil(object.originalState.height*object.scaleY), top: Coords.tl.y+diffY, left: Coords.tl.x+diffX});
228 $('#object-border-right').css({'height':Math.ceil(object.originalState.height*object.scaleY), top: Coords.tr.y+diffY, left: Coords.tr.x+diffX}); 229 $('#object-border-right').css({'height':Math.ceil(object.originalState.height*object.scaleY), top: Coords.tr.y+diffY, left: Coords.tr.x+diffX});
229 $('#object-border-top').css({'width':Math.ceil(object.originalState.width*object.scaleX), top: Coords.tl.y+diffY, left: Coords.tl.x+diffX}); 230 $('#object-border-top').css({'width':Math.ceil(object.originalState.width*object.scaleX), top: Coords.tl.y+diffY, left: Coords.tl.x+diffX});
230 $('#object-border-bottom').css({'width':Math.ceil(object.originalState.width*object.scaleX), top: Coords.bl.y+diffY, left: Coords.bl.x+diffX}); 231 $('#object-border-bottom').css({'width':Math.ceil(object.originalState.width*object.scaleX), top: Coords.bl.y+diffY, left: Coords.bl.x+diffX});
231 $('.object-border').css({ 232 $('.object-border').css({
232 '-ms-transform': 'rotate('+object.getAngle()+'deg)', /* IE 9 */ 233 '-ms-transform': 'rotate('+object.getAngle()+'deg)', /* IE 9 */
233 '-webkit-transform': 'rotate('+object.getAngle()+'deg)', /* Safari */ 234 '-webkit-transform': 'rotate('+object.getAngle()+'deg)', /* Safari */
234 'transform': 'rotate('+object.getAngle()+'deg)' /* Standard syntax */ 235 'transform': 'rotate('+object.getAngle()+'deg)' /* Standard syntax */
235 }); 236 });
236 $('.object-border').show(); 237 $('.object-border').show();
237 } 238 }
238 239
239 function onObjectOut() { 240 function onObjectOut() {
240 delete currentObj; 241 delete currentObj;
241 $scope.designTextValue = ''; 242 $scope.designTextValue = '';
242 } 243 }
243 244
244 function undoCanvas() { 245 function undoCanvas() {
245 if (indexCurr <= 0) { 246 if (indexCurr <= 0) {
246 indexCurr = 0; 247 indexCurr = 0;
247 return; 248 return;
248 } 249 }
249 250
250 if (refreshObj === true) { 251 if (refreshObj === true) {
251 indexCurr--; 252 indexCurr--;
252 refreshObj = false; 253 refreshObj = false;
253 } 254 }
254 255
255 console.log('undo'); 256 console.log('undo');
256 257
257 indexCurr2 = indexCurr - 1; 258 indexCurr2 = indexCurr - 1;
258 currentObj = listObj[indexCurr2]; 259 currentObj = listObj[indexCurr2];
259 if (currentObj){ 260 if (currentObj){
260 currentObj.setOptions(JSON.parse(indexCurr[indexCurr2])); 261 currentObj.setOptions(JSON.parse(indexCurr[indexCurr2]));
261 } 262 }
262 263
263 indexCurr--; 264 indexCurr--;
264 currentObj.setCoords(); 265 currentObj.setCoords();
265 canvas.renderAll(); 266 canvas.renderAll();
266 actionObj = true; 267 actionObj = true;
267 } 268 }
268 269
269 function redoCanvas() { 270 function redoCanvas() {
270 actionObj = true; 271 actionObj = true;
271 if (indexCurr >= stateObj.length - 1) { 272 if (indexCurr >= stateObj.length - 1) {
272 return; 273 return;
273 } 274 }
274 275
275 console.log('redo'); 276 console.log('redo');
276 277
277 indexCurr2 = indexCurr + 1; 278 indexCurr2 = indexCurr + 1;
278 currentObj = listObj[indexCurr2]; 279 currentObj = listObj[indexCurr2];
279 currentObj.setOptions(JSON.parse(indexCurr[indexCurr2])); 280 currentObj.setOptions(JSON.parse(indexCurr[indexCurr2]));
280 281
281 indexCurr++; 282 indexCurr++;
282 currentObj.setCoords(); 283 currentObj.setCoords();
283 canvas.renderAll(); 284 canvas.renderAll();
284 } 285 }
285 286
286 $scope.canvasClearAll = function(){ 287 $scope.canvasClearAll = function(){
287 if (confirm('配置されたすべての文字や画像を消去します')){ 288 if (confirm('配置されたすべての文字や画像を消去します')){
288 canvas.clear(); 289 canvas.clear();
289 } 290 }
290 } 291 }
291 292
292 function onObjectSelected(options) { 293 function onObjectSelected(options) {
293 var currentObj = options.target; 294 var currentObj = options.target;
294 295
295 $scope.typeObject = currentObj.type; 296 $scope.typeObject = currentObj.type;
296 switch ($scope.typeObject) { 297 switch ($scope.typeObject) {
297 case 'i-text' : 298 case 'i-text' :
298 $rootScope.isShowLeftPanel = 'text'; 299 $rootScope.isShowLeftPanel = 'text';
299 var text = currentObj.text; 300 var text = currentObj.text;
300 if(text != '') { 301 if(text != '') {
301 $scope.designText = text; 302 $scope.designText = text;
302 $scope.designTextValue = text; 303 $scope.designTextValue = text;
303 } 304 }
304 break; 305 break;
305 306
306 case 'path-group' : 307 case 'path-group' :
307 $rootScope.isShowLeftPanel = 'illustration'; 308 $rootScope.isShowLeftPanel = 'illustration';
308 break; 309 break;
309 310
310 case 'image': 311 case 'image':
311 $rootScope.isShowLeftPanel = 'image'; 312 $rootScope.isShowLeftPanel = 'image';
312 break; 313 break;
313 314
314 default : 315 default :
315 $rootScope.isShowLeftPanel = 'default'; 316 $rootScope.isShowLeftPanel = 'default';
316 break; 317 break;
317 } 318 }
318 $rootScope.safeApply(); 319 $rootScope.safeApply();
319 } 320 }
320 321
321 // Illustration process 322 // Illustration process
322 $scope.changeIllustrationCategory = function(currentIllustration){ 323 $scope.changeIllustrationCategory = function(currentIllustration){
323 $scope.currentIllustrationCate = $illustration.getList(currentIllustration); 324 $scope.currentIllustrationCate = $illustration.getList(currentIllustration);
324 }; 325 };
325 326
326 $scope.insertSvg = function(item){ 327 $scope.insertSvg = function(item){
327 fabric.loadSVGFromURL(item.path, function(objects, options) { 328 fabric.loadSVGFromURL(item.path, function(objects, options) {
328 var shape = fabric.util.groupSVGElements(objects, options); 329 var shape = fabric.util.groupSVGElements(objects, options);
329 canvas.add(shape.scale(0.6)); 330 canvas.add(shape.scale(0.6));
330 shape.set({ left: 150, top: 200 }).setCoords(); 331 shape.set({ left: 150, top: 200 }).setCoords();
331 canvas.renderAll(); 332 canvas.renderAll();
332 canvas.setActiveObject(shape); 333 canvas.setActiveObject(shape);
333 }); 334 });
334 }; 335 };
335 336
336 // color pattern 337 // color pattern
337 $scope.listColorPatterns = [ 338 $scope.listColorPatterns = [
338 '#000000','#ffff00','#ff6600','#ff0000','#ff6262','#ffa19c','#ff9933','#c45d01','#5d2b03','#ffffcc', 339 '#000000','#ffff00','#ff6600','#ff0000','#ff6262','#ffa19c','#ff9933','#c45d01','#5d2b03','#ffffcc',
339 '#ffff99','#ffd500','#c0db50','#21a52a','#00663f','#abfcab','#36ffaa','#89eaea','#00938c','#005450', 340 '#ffff99','#ffd500','#c0db50','#21a52a','#00663f','#abfcab','#36ffaa','#89eaea','#00938c','#005450',
340 '#0badff','#006cff','#839aff','#0410a0','#ffb2ff','#f93fff','#6600ca','#ff6699','#999999','#666666', 341 '#0badff','#006cff','#839aff','#0410a0','#ffb2ff','#f93fff','#6600ca','#ff6699','#999999','#666666',
341 '#333333' 342 '#333333'
342 ]; 343 ];
343 344
344 $scope.changeColorPattern = function(color){ 345 $scope.changeColorPattern = function(color){
345 var obj = canvas.getActiveObject(); 346 var obj = canvas.getActiveObject();
346 if (!color){ 347 if (!color){
347 color = 'none'; 348 color = 'none';
348 } 349 }
349 if (obj instanceof fabric.PathGroup) { 350 if (obj instanceof fabric.PathGroup) {
350 obj.getObjects().forEach(function(o) { 351 obj.getObjects().forEach(function(o) {
351 o.fill = color; 352 o.fill = color;
352 }); 353 });
353 } 354 }
354 else { 355 else {
355 obj.fill = color; 356 obj.fill = color;
356 } 357 }
357 canvas.renderAll(); 358 canvas.renderAll();
358 }; 359 };
359 360
360 //Font 361 //Font
361 $scope.listFontFamily = [ 362 $scope.listFontFamily = [
362 { 363 {
363 name : 'GN Aki iro Sesami Cookies', 364 name : 'GN Aki iro Sesami Cookies',
364 slug : 'gn_aki_iro_sesami_cookies', 365 slug : 'gn_aki_iro_sesami_cookies',
365 }, 366 },
366 { 367 {
367 name : 'GN-Fuyu-iro_Script_Bold', 368 name : 'GN-Fuyu-iro_Script_Bold',
368 slug : 'gn_fuyu_iro_script_bold' 369 slug : 'gn_fuyu_iro_script_bold'
369 }, 370 },
370 { 371 {
371 name : 'GN Killgothic U Kanana', 372 name : 'GN Killgothic U Kanana',
372 slug : 'gn_killgothic_u_kanana' 373 slug : 'gn_killgothic_u_kanana'
373 }, 374 },
374 { 375 {
375 name : 'GN-Kin-iro_Alphabet_Cookies', 376 name : 'GN-Kin-iro_Alphabet_Cookies',
376 slug : 'gn_kin_iro_alphabet_cookies' 377 slug : 'gn_kin_iro_alphabet_cookies'
377 378
378 }, 379 },
379 { 380 {
380 name : 'GN-Kin-iro_SansSerif', 381 name : 'GN-Kin-iro_SansSerif',
381 slug : 'gn_kin_iro_sansserif' 382 slug : 'gn_kin_iro_sansserif'
382 383
383 }, 384 },
384 { 385 {
385 name : 'GN-Koharuiro_Sunray', 386 name : 'GN-Koharuiro_Sunray',
386 slug : 'gn_koharuiro_sunray' 387 slug : 'gn_koharuiro_sunray'
387 388
388 }, 389 },
389 { 390 {
390 name : 'GN-Kyu-pin', 391 name : 'GN-Kyu-pin',
391 slug : 'gn_kyu_pin' 392 slug : 'gn_kyu_pin'
392 }, 393 },
393 { 394 {
394 name : 'gn_natsu_iro_schedule', 395 name : 'gn_natsu_iro_schedule',
395 slug : 'gn_natsu_iro_schedule' 396 slug : 'gn_natsu_iro_schedule'
396 397
397 }, 398 },
398 { 399 {
399 name : 'gnkana_kiniro_sansserif_l', 400 name : 'gnkana_kiniro_sansserif_l',
400 slug : 'gnkana_kiniro_sansserif_l' 401 slug : 'gnkana_kiniro_sansserif_l'
401 402
402 }, 403 },
403 { 404 {
404 name : 'gnkana_kiniro_sansserif_st', 405 name : 'gnkana_kiniro_sansserif_st',
405 slug : 'gnkana_kiniro_sansserif_st' 406 slug : 'gnkana_kiniro_sansserif_st'
406 }, 407 },
407 { 408 {
408 name : 'gnkana_kon_iro_nightfall', 409 name : 'gnkana_kon_iro_nightfall',
409 slug : 'gnkana_kon_iro_nightfall' 410 slug : 'gnkana_kon_iro_nightfall'
410 411
411 }, 412 },
412 { 413 {
413 name : 'ms_gothic', 414 name : 'ms_gothic',
414 slug : 'ms_gothic' 415 slug : 'ms_gothic'
415 416
416 }, 417 },
417 { 418 {
418 name : 'msmincho', 419 name : 'msmincho',
419 slug : 'msmincho' 420 slug : 'msmincho'
420 }, 421 },
421 { 422 {
422 name : 'ufonts_com_ms_pgothic', 423 name : 'ufonts_com_ms_pgothic',
423 slug : 'ufonts_com_ms_pgothic' 424 slug : 'ufonts_com_ms_pgothic'
424 } 425 }
425 ]; 426 ];
426 427
427 // layer process 428 // layer process
428 $scope.layerProcess = function(mode) { 429 $scope.layerProcess = function(mode) {
429 // console.log('layerProcess'); 430 // console.log('layerProcess');
430 var activeObject = canvas.getActiveObject(); 431 var activeObject = canvas.getActiveObject();
431 432
432 if (activeObject){ 433 if (activeObject){
433 switch (mode) { 434 switch (mode) {
434 case 1: 435 case 1:
435 activeObject.bringForward(); 436 activeObject.bringForward();
436 break; 437 break;
437 case 2: 438 case 2:
438 activeObject.sendBackwards(); 439 activeObject.sendBackwards();
439 break; 440 break;
440 case 3: 441 case 3:
441 activeObject.bringToFront(); 442 activeObject.bringToFront();
442 break; 443 break;
443 case 4: 444 case 4:
444 activeObject.sendToBack(); 445 activeObject.sendToBack();
445 break; 446 break;
446 } 447 }
447 canvas.deactivateAll().renderAll(); 448 canvas.deactivateAll().renderAll();
448 } 449 }
449 }; 450 };
450 451
451 $scope.focusInputText = function(text) { 452 $scope.focusInputText = function(text) {
452 currentObj = canvas.getActiveObject(); 453 currentObj = canvas.getActiveObject();
453 if(typeof currentObj == 'undefined' || currentObj == null) { 454 if(typeof currentObj == 'undefined' || currentObj == null) {
454 $scope.iText = new fabric.IText('', { 455 $scope.iText = new fabric.IText('', {
455 left: 150, 456 left: 150,
456 top: 200, 457 top: 200,
457 fontFamily: typeof $scope.itemFont != 'undefined' ? $scope.listFontFamily[$scope.itemFont].slug : $scope.listFontFamily[0].slug, 458 fontFamily: typeof $scope.itemFont != 'undefined' ? $scope.listFontFamily[$scope.itemFont].slug : $scope.listFontFamily[0].slug,
458 fontWeight: 'normal', 459 fontWeight: 'normal',
459 textAlign: 'center', 460 textAlign: 'center',
460 fontSize: 28, 461 fontSize: 28,
461 fill: 'black', 462 fill: 'black',
462 editable: false 463 editable: false
463 }); 464 });
464 } else { 465 } else {
465 if(currentObj.type != 'i-text') { 466 if(currentObj.type != 'i-text') {
466 $scope.iText = new fabric.IText('', { 467 $scope.iText = new fabric.IText('', {
467 left: 150, 468 left: 150,
468 top: 200, 469 top: 200,
469 fontFamily: typeof $scope.itemFont != 'undefined' ? $scope.listFontFamily[$scope.itemFont].slug : $scope.listFontFamily[0].slug, 470 fontFamily: typeof $scope.itemFont != 'undefined' ? $scope.listFontFamily[$scope.itemFont].slug : $scope.listFontFamily[0].slug,
470 fontWeight: 'normal', 471 fontWeight: 'normal',
471 textAlign: 'center', 472 textAlign: 'center',
472 fontSize: 28, 473 fontSize: 28,
473 fill: 'black', 474 fill: 'black',
474 editable: false 475 editable: false
475 }); 476 });
476 } else{ 477 } else{
477 $scope.iText = currentObj; 478 $scope.iText = currentObj;
478 } 479 }
479 } 480 }
480 }; 481 };
481 482
482 //Design text 483 //Design text
483 $scope.inputText = function(e) { 484 $scope.inputText = function(e) {
484 if(typeof $scope.iText != "undefined") { 485 if(typeof $scope.iText != "undefined") {
485 var iText = $scope.iText; 486 var iText = $scope.iText;
486 iText.text = e; 487 iText.text = e;
487 canvas.add(iText); 488 canvas.add(iText);
488 canvas.renderAll(); 489 canvas.renderAll();
489 canvas.setActiveObject(iText); 490 canvas.setActiveObject(iText);
490 } 491 }
491 }; 492 };
492 $scope.setFontFamily = function(font,index) { 493 $scope.setFontFamily = function(font,index) {
493 $scope.itemFont = index; 494 $scope.itemFont = index;
494 if(canvas.getActiveObject()) { 495 if(canvas.getActiveObject()) {
495 var currentObj = canvas.getActiveObject(); 496 var currentObj = canvas.getActiveObject();
496 if(currentObj.type == 'i-text') { 497 if(currentObj.type == 'i-text') {
497 currentObj.set('fontFamily', font); 498 currentObj.set('fontFamily', font);
498 canvas.renderAll(); 499 canvas.renderAll();
499 canvas.setActiveObject(currentObj); 500 canvas.setActiveObject(currentObj);
500 } 501 }
501 502
502 } 503 }
503 }; 504 };
504 //Set letter spacing text 505 //Set letter spacing text
505 $scope.setLetterSpacingText = function(e) { 506 $scope.setLetterSpacingText = function(e) {
506 if(canvas.getActiveObject()) { 507 if(canvas.getActiveObject()) {
507 var currentObj = canvas.getActiveObject(); 508 var currentObj = canvas.getActiveObject();
508 if(currentObj.type == 'i-text') { 509 if(currentObj.type == 'i-text') {
509 if(e == 'plus') 510 if(e == 'plus')
510 spacingNum = spacingNum + 30; 511 spacingNum = spacingNum + 30;
511 else if (spacingNum >= -30){ 512 else if (spacingNum >= -30){
512 spacingNum = spacingNum - 30; 513 spacingNum = spacingNum - 30;
513 } 514 }
514 if(e == 'default') 515 if(e == 'default')
515 spacingNum = 0; 516 spacingNum = 0;
516 517
517 currentObj.set('charSpacing', spacingNum); 518 currentObj.set('charSpacing', spacingNum);
518 canvas.renderAll(); 519 canvas.renderAll();
519 canvas.setActiveObject(currentObj); 520 canvas.setActiveObject(currentObj);
520 } 521 }
521 } 522 }
522 }; 523 };
523 524
524 525
525 /**** process insert image */ 526 /**** process insert image */
526 if (typeof($window.localStorage.recentImages) != 'undefined'){ 527 if (typeof($window.localStorage.recentImages) != 'undefined'){
527 $scope.recentImages = JSON.parse($window.localStorage.recentImages); 528 $scope.recentImages = JSON.parse($window.localStorage.recentImages);
528 }else{ 529 }else{
529 $scope.recentImages = {}; 530 $scope.recentImages = {};
530 } 531 }
531 532
532 var addToRecentImage = function(name, data){ 533 var addToRecentImage = function(name, data){
533 if (typeof($window.localStorage.recentImages) != 'undefined'){ 534 if (typeof($window.localStorage.recentImages) != 'undefined'){
534 $scope.recentImages = JSON.parse($window.localStorage.recentImages); 535 $scope.recentImages = JSON.parse($window.localStorage.recentImages);
535 }else{ 536 }else{
536 $scope.recentImages = {}; 537 $scope.recentImages = {};
537 } 538 }
538 539
539 if (typeof($scope.recentImages[name]) == 'undefined'){ 540 if (typeof($scope.recentImages[name]) == 'undefined'){
540 var ii=0; 541 var ii=0;
541 var II = 0; 542 var II = 0;
542 for(var item in $scope.recentImages){ 543 for(var item in $scope.recentImages){
543 if (II==0){ 544 if (II==0){
544 II = item; 545 II = item;
545 } 546 }
546 ii++; 547 ii++;
547 } 548 }
548 if (ii>16 && II!=0){ 549 if (ii>16 && II!=0){
549 delete $scope.recentImages[II]; 550 delete $scope.recentImages[II];
550 } 551 }
551 $scope.recentImages[name] = data; 552 $scope.recentImages[name] = data;
552 $window.localStorage.recentImages = JSON.stringify($scope.recentImages); 553 $window.localStorage.recentImages = JSON.stringify($scope.recentImages);
553 } 554 }
554 } 555 }
555 $scope.chooseImage = function(e){//console.log(e); 556 $scope.chooseImage = function(e){//console.log(e);
556 if (e.target.files[0] && e.target.files[0].size > 5*1024*1024){ 557 if (e.target.files[0] && e.target.files[0].size > 5*1024*1024){
557 alert('アップロードできませんでした'); 558 alert('アップロードできませんでした');
558 return; 559 return;
559 } 560 }
560 var reader = new FileReader(); 561 var reader = new FileReader();
561 reader.onload = function (event) { 562 reader.onload = function (event) {
562 addToRecentImage ($('#imgLoader').val(), event.target.result); 563 addToRecentImage ($('#imgLoader').val(), event.target.result);
563 var imgObj = new Image();//console.log($('#imgLoader').val()); 564 var imgObj = new Image();//console.log($('#imgLoader').val());
564 imgObj.src = event.target.result; 565 imgObj.src = event.target.result;
565 imgObj.onload = function () { 566 imgObj.onload = function () {
566 // start fabricJS stuff 567 // start fabricJS stuff
567 568
568 var image = new fabric.Image(imgObj); 569 var image = new fabric.Image(imgObj);
569 image.set({ 570 image.set({
570 left: 50, 571 left: 50,
571 top: 50 572 top: 50
572 }); 573 });
573 //image.scale(getRandomNum(0.1, 0.25)).setCoords(); 574 //image.scale(getRandomNum(0.1, 0.25)).setCoords();
574 image.scaleToWidth(200); 575 image.scaleToWidth(200);
575 canvas.add(image); 576 canvas.add(image);
576 } 577 }
577 } 578 }
578 reader.readAsDataURL(e.target.files[0]); 579 reader.readAsDataURL(e.target.files[0]);
579 } 580 }
580 581
581 $scope.insertRecentImage = function(data){ 582 $scope.insertRecentImage = function(data){
582 var imgObj = new Image(); 583 var imgObj = new Image();
583 imgObj.src = data; 584 imgObj.src = data;
584 imgObj.onload = function () { 585 imgObj.onload = function () {
585 // start fabricJS stuff 586 // start fabricJS stuff
586 587
587 var image = new fabric.Image(imgObj); 588 var image = new fabric.Image(imgObj);
588 image.set({ 589 image.set({
589 left: 50, 590 left: 50,
590 top: 50 591 top: 50
591 }); 592 });
592 image.scaleToWidth(200); 593 image.scaleToWidth(200);
593 canvas.add(image); 594 canvas.add(image);
594 } 595 }
595 } 596 }
596 597
597 //Traslation text 598 //Traslation text
598 $scope.rotateText = function(style) { 599 $scope.rotateText = function(style) {
599 if(canvas.getActiveObject()) { 600 if(canvas.getActiveObject()) {
600 var currentObj = canvas.getActiveObject(); 601 var currentObj = canvas.getActiveObject();
601 if(currentObj.type == 'i-text') { 602 if(currentObj.type == 'i-text') {
602 currentObj.set('rotate', Math.PI / 4); 603 currentObj.set('rotate', Math.PI / 4);
603 canvas.renderAll(); 604 canvas.renderAll();
604 canvas.setActiveObject(currentObj); 605 canvas.setActiveObject(currentObj);
605 } 606 }
606 } 607 }
607 }; 608 };
608 609
609 610
610 /* Process output */ 611 /* Process output */
611 $scope.outputDesign = function(){ 612 $scope.outputDesign = function(){
612 $rootScope.outputImage = canvas.toDataURL('png'); 613 $rootScope.outputImage = canvas.toDataURL('png');
613 // console.log(); 614 // console.log();
614 $('#tshirt-design').modal('hide'); 615 $('#tshirt-design').modal('hide');
616 }
617
618 $scope.showRecommend = function(){
619 $('#tshirt-design-saved').modal({
620 backdrop: 'static',
621 keyboard: false
622 });
623 }
624
625 $scope.closeSavedModal = function(){
626 $('#tshirt-design-saved').modal('hide');
627 }
628
629 $scope.openSavedTab = function(tab){
630 $scope.recommendList = $favorite.getAll();
631 $scope.favoriteList = $favorite.getAll();
632 $('#tshirt-design-saved .subframe-design .nav-tabs li').removeClass('active');
633 $('#tab-saved-'+tab).addClass('active');
634 $('#tshirt-design-saved .subframe-design .tab-content .tab-pane').removeClass('active');
635 $('#content-saved-'+tab).addClass('active');
636
637 $timeout(function(){
638 $('.saved-item').tooltip({
639 animated: 'fade',
640 placement: 'bottom',
641 html: true
642 });
643 },1000);
644 }
645
646 $scope.saveFavorite = function(){
647 var dataDump = {
648 thumb: canvas.toDataURL('png'),
649 data: canvas.toDatalessJSON()
650 }
651 $favorite.addToFavorite({
652 data: dataDump
653 })
654 console.log(dataDump);
615 } 655 }
616 }); 656 });
617 }); 657 });
618 658
app/scripts/routes.js
Diff comments   View file @ faf1542
1 define([], function(){ 1 define([], function(){
2 'use strict'; 2 'use strict';
3 return { 3 return {
4 defaultRoutePaths: '/1/place_1', 4 defaultRoutePaths: '/1/place_1',
5 routes: { 5 routes: {
6 '/:tShirt/:place': { 6 '/:tShirt/:place': {
7 templateUrl: 'views/main.html', 7 templateUrl: 'views/main.html',
8 dependencies: [ 8 dependencies: [
9 'scripts/controllers/main.js', 9 'scripts/controllers/main.js',
10 'scripts/controllers/tshirtdesign.js', 10 'scripts/controllers/tshirtdesign.js',
11 'scripts/services/illustration.js', 11 'scripts/services/illustration.js',
12 'scripts/services/favorite.js',
12 'scripts/services/tshirt.js' 13 'scripts/services/tshirt.js'
13 ] 14 ]
14 }, 15 },
15 } 16 }
16 }; 17 };
17 }); 18 });
app/scripts/services/favorite.js
Diff comments   View file @ faf1542
File was created 1 define(['app'], function (app) {
2 'use strict';
3
4 app.factory('$favorite', function ($http, $rootScope) {
5 var DATA = [];
6
7 return {
8 loadFromRemote: function (params,successHandle,errorHandle) {
9 /*** load from localstorage for test */
10 if ($window.localStorage.listFavorite){
11 DATA = JSON.parse($window.localStorage.listFavorite);
12 }else{
13 DATA = [];
14 }
15 return;
16 /*** end test */
17
18 // return format: { status:0|1 , data:{} }
19 var httpObj = $http({
20 url: $rootScope.API_URL+'/apiv1/favorite',
21 method: 'GET',
22 params: params || []
23 });
24 if (typeof successHandle == 'undefined'){
25 successHandle = function(response){
26 if (response.status==1){
27 DATA = response.data;
28 }
29 }
30 }
31 httpObj.success(successHandle);
32
33 if (typeof errorHandle != 'undefined'){
34 httpObj.error(errorHandle);
35 }
36 },
37 addToFavorite: function(params,successHandle,errorHandle) {
38 /*** load from localstorage for test */
39 DATA.push(params.data);
40 $window.localStorage.listFavorite = JSON.stringify(DATA);
41 return;
42 /*** end test */
43
44 var httpObj = $http({
45 url: $rootScope.API_URL+'/apiv1/favorite',
46 method: 'POST',
47 params: params || []
48 });
49 if (typeof successHandle == 'undefined'){
50 successHandle = function(response){
51 if (response.status==1){
52 DATA = response.data;
53 }
54 }
55 }
56 httpObj.success(successHandle);
57
58 if (typeof errorHandle != 'undefined'){
59 httpObj.error(errorHandle);
60 }
61 },
62 getAll: function(){
63 return DATA;
64 }
65 };
66 });
67 });
68
1 /* Space out content a bit */ 1 /* Space out content a bit */
2 @import "../fonts/font.css"; 2 @import "../fonts/font.css";
3 @import "../fonts/font_canvas/font-canvas.css"; 3 @import "../fonts/font_canvas/font-canvas.css";
4 @import "placedesign.css"; 4 @import "placedesign.css";
5 html{ 5 html{
6 height:100%; 6 height:100%;
7 width:100%; 7 width:100%;
8 } 8 }
9 body { 9 body {
10 font-family: 'Hiragino Kaku Gothic Pro', sans-serif; 10 font-family: 'Hiragino Kaku Gothic Pro', sans-serif;
11 height:100%; 11 height:100%;
12 width:100%; 12 width:100%;
13 } 13 }
14 /*Scroll bar style*/ 14 /*Scroll bar style*/
15 ::-webkit-scrollbar { 15 ::-webkit-scrollbar {
16 -webkit-appearance: none; 16 -webkit-appearance: none;
17 width: 7px; 17 width: 7px;
18 } 18 }
19 ::-webkit-scrollbar-track { 19 ::-webkit-scrollbar-track {
20 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 20 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
21 } 21 }
22 22
23 ::-webkit-scrollbar-thumb { 23 ::-webkit-scrollbar-thumb {
24 border-radius: 4px; 24 border-radius: 4px;
25 background-color: rgba(0,0,0,.5); 25 background-color: rgba(0,0,0,.5);
26 -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5); 26 -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
27 } 27 }
28 /*End scroll bar style*/ 28 /*End scroll bar style*/
29 .padding-right-0{ 29 .padding-right-0{
30 padding-right: 0!important; 30 padding-right: 0!important;
31 } 31 }
32 .padding-left-0{ 32 .padding-left-0{
33 padding-left: 0!important; 33 padding-left: 0!important;
34 } 34 }
35 button.red{ 35 button.red{
36 color: #ffffff; 36 color: #ffffff;
37 background-color: #ff0000; 37 background-color: #ff0000;
38 border: 1px solid #ff0000; 38 border: 1px solid #ff0000;
39 39
40 } 40 }
41 button.white{ 41 button.white{
42 border: 1px solid #ff8080; 42 border: 1px solid #ff8080;
43 color: #ff8080; 43 color: #ff8080;
44 background-color: #ffffff; 44 background-color: #ffffff;
45 } 45 }
46 button.brown{ 46 button.brown{
47 background-color: #666666; 47 background-color: #666666;
48 border: 1px solid #666666; 48 border: 1px solid #666666;
49 color: #ffffff; 49 color: #ffffff;
50 border-radius: 5px; 50 border-radius: 5px;
51 } 51 }
52 button.black{ 52 button.black{
53 border: 1px solid #c9c9c9; 53 border: 1px solid #c9c9c9;
54 background-color: #343434; 54 background-color: #343434;
55 color: #ffffff; 55 color: #ffffff;
56 padding: 1px 6px; 56 padding: 1px 6px;
57 } 57 }
58 #tshirt-container{ 58 #tshirt-container{
59 border-left: 1px solid #dcdcdc; 59 border-left: 1px solid #dcdcdc;
60 border-right: 1px solid #dcdcdc; 60 border-right: 1px solid #dcdcdc;
61 } 61 }
62 /*HEADER*/ 62 /*HEADER*/
63 header{ 63 header{
64 border-bottom: 1px solid #dcdcdc; 64 border-bottom: 1px solid #dcdcdc;
65 } 65 }
66 header .logo{ 66 header .logo{
67 color: #ed1d24; 67 color: #ed1d24;
68 font-size: 30px; 68 font-size: 30px;
69 text-transform: uppercase; 69 text-transform: uppercase;
70 font-weight: bold; 70 font-weight: bold;
71 } 71 }
72 header .logo img{ 72 header .logo img{
73 width: 60px; 73 width: 60px;
74 } 74 }
75 /*NAVIGATION*/ 75 /*NAVIGATION*/
76 nav{ 76 nav{
77 border-bottom: 1px solid #dcdcdc; 77 border-bottom: 1px solid #dcdcdc;
78 padding: 10px 0; 78 padding: 10px 0;
79 } 79 }
80 nav h2{ 80 nav h2{
81 font-size: 27px; 81 font-size: 27px;
82 margin: 0 0; 82 margin: 0 0;
83 } 83 }
84 nav ul{ 84 nav ul{
85 list-style: none; 85 list-style: none;
86 padding-left: 0; 86 padding-left: 0;
87 margin-bottom: 0; 87 margin-bottom: 0;
88 88
89 } 89 }
90 nav ul li{ 90 nav ul li{
91 margin-left: 2px; 91 margin-left: 2px;
92 float: left; 92 float: left;
93 padding: 6px 12px; 93 padding: 6px 12px;
94 background-color: #999999; 94 background-color: #999999;
95 position: relative; 95 position: relative;
96 } 96 }
97 nav ul li i.fa{ 97 nav ul li i.fa{
98 position: absolute; 98 position: absolute;
99 color: #ffffff; 99 color: #ffffff;
100 font-size: 18px; 100 font-size: 18px;
101 right: -4px; 101 right: -4px;
102 top: 50%; 102 top: 50%;
103 transform: translateX(-50%) translateY(-50%); 103 transform: translateX(-50%) translateY(-50%);
104 -webkit-transform: translateX(-50%) translateY(-50%); 104 -webkit-transform: translateX(-50%) translateY(-50%);
105 } 105 }
106 nav ul li a{ 106 nav ul li a{
107 color: #ffffff; 107 color: #ffffff;
108 } 108 }
109 nav ul li:hover a{ 109 nav ul li:hover a{
110 text-decoration: none; 110 text-decoration: none;
111 color: #ffffff; 111 color: #ffffff;
112 } 112 }
113 nav ul li.action{ 113 nav ul li.action{
114 color: #ffffff; 114 color: #ffffff;
115 background-color: #ed1d24; 115 background-color: #ed1d24;
116 } 116 }
117 /*ASIDE*/ 117 /*ASIDE*/
118 aside{ 118 aside{
119 margin: 10px 0; 119 margin: 10px 0;
120 } 120 }
121 121
122 aside .break-down{ 122 aside .break-down{
123 padding: 0 0; 123 padding: 0 0;
124 } 124 }
125 aside .break-down i.fa{ 125 aside .break-down i.fa{
126 font-size: 35px; 126 font-size: 35px;
127 color: #ff0000; 127 color: #ff0000;
128 } 128 }
129 aside .break-line{ 129 aside .break-line{
130 height: 10px; 130 height: 10px;
131 } 131 }
132 aside .break-line hr{ 132 aside .break-line hr{
133 border-top: 1px dotted #cccccc; 133 border-top: 1px dotted #cccccc;
134 } 134 }
135 aside .step{ 135 aside .step{
136 margin: 0 0; 136 margin: 0 0;
137 } 137 }
138 aside .step .title{ 138 aside .step .title{
139 font-size: 15px; 139 font-size: 15px;
140 line-height: 16px; 140 line-height: 16px;
141 font-weight: bold; 141 font-weight: bold;
142 margin-bottom: 3px; 142 margin-bottom: 3px;
143 } 143 }
144 aside .step .title-notice{ 144 aside .step .title-notice{
145 font-size: 13px; 145 font-size: 13px;
146 line-height: 16px; 146 line-height: 16px;
147 margin-bottom: 3px; 147 margin-bottom: 3px;
148 } 148 }
149 aside .step .title-notice .require{ 149 aside .step .title-notice .require{
150 font-size: 10px; 150 font-size: 10px;
151 } 151 }
152 aside .step .step-box{ 152 aside .step .step-box{
153 border: 2px solid #dcdcdc; 153 border: 2px solid #dcdcdc;
154 font-size: 12px; 154 font-size: 12px;
155 155
156 } 156 }
157 /*Step 1*/ 157 /*Step 1*/
158 aside .step .step-box .tshirt-design{ 158 aside .step .step-box .tshirt-design{
159 border: 1px solid #cccccc; 159 border: 1px solid #cccccc;
160 background-color: #f5f5f5; 160 background-color: #f5f5f5;
161 margin: 10px 10px; 161 margin: 10px 10px;
162 } 162 }
163 aside .step .step-box .tshirt-design:hover{ 163 aside .step .step-box .tshirt-design:hover{
164 border: 1px solid #ff0000; 164 border: 1px solid #ff0000;
165 } 165 }
166 aside .step .step-box .tshirt-design button:hover{ 166 aside .step .step-box .tshirt-design button:hover{
167 background-color: #fa7b7b; 167 background-color: #fa7b7b;
168 border: 1px solid #fa7b7b; 168 border: 1px solid #fa7b7b;
169 } 169 }
170 aside .step .step-box .tshirt-design div{ 170 aside .step .step-box .tshirt-design div{
171 float: left; 171 float: left;
172 } 172 }
173 aside .step .step-box .tshirt-design .icon{ 173 aside .step .step-box .tshirt-design .icon{
174 padding: 4px 4px; 174 padding: 4px 4px;
175 border-right: 1px solid #cccccc; 175 border-right: 1px solid #cccccc;
176 176
177 } 177 }
178 aside .step .step-box .tshirt-design .icon img{ 178 aside .step .step-box .tshirt-design .icon img{
179 height: 50px; 179 height: 50px;
180 } 180 }
181 aside .step .step-box .tshirt-design .name{ 181 aside .step .step-box .tshirt-design .name{
182 padding: 10px 10px; 182 padding: 10px 10px;
183 183
184 } 184 }
185 aside .step .step-box .tshirt-design .action{ 185 aside .step .step-box .tshirt-design .action{
186 padding: 10px 10px; 186 padding: 10px 10px;
187 float: right; 187 float: right;
188 188
189 } 189 }
190 aside .step .step-box .tshirt-design .action button{ 190 aside .step .step-box .tshirt-design .action button{
191 padding: 8px 10px; 191 padding: 8px 10px;
192 } 192 }
193 /*Step 2*/ 193 /*Step 2*/
194 aside .step .step-box .tshirt-color{ 194 aside .step .step-box .tshirt-color{
195 padding: 6px 10px; 195 padding: 6px 10px;
196 position: relative; 196 position: relative;
197 } 197 }
198 aside .step .step-box .tshirt-color ul.choice-color{ 198 aside .step .step-box .tshirt-color ul.choice-color{
199 float: left; 199 float: left;
200 list-style: none; 200 list-style: none;
201 padding-left: 0; 201 padding-left: 0;
202 width: 100%; 202 width: 100%;
203 margin-bottom: 3px; 203 margin-bottom: 3px;
204 } 204 }
205 aside .step .step-box .tshirt-color ul.choice-color li{ 205 aside .step .step-box .tshirt-color ul.choice-color li{
206 margin: 0 8px 4px 0; 206 margin: 0 8px 4px 0;
207 border: 1px solid #cccccc; 207 border: 1px solid #cccccc;
208 padding: 2px 2px; 208 padding: 2px 2px;
209 float: left; 209 float: left;
210 cursor: pointer; 210 cursor: pointer;
211 } 211 }
212 aside .step .step-box .tshirt-color ul.choice-color li.action{ 212 aside .step .step-box .tshirt-color ul.choice-color li.action{
213 border: 1px solid #ff0000; 213 border: 1px solid #ff0000;
214 } 214 }
215 aside .step .step-box .tshirt-color ul.choice-color li:hover{ 215 aside .step .step-box .tshirt-color ul.choice-color li:hover{
216 border: 1px solid #ff0000; 216 border: 1px solid #ff0000;
217 } 217 }
218 aside .step .step-box .tshirt-color ul.choice-color li div{ 218 aside .step .step-box .tshirt-color ul.choice-color li div{
219 height: 30px; 219 height: 30px;
220 width: 30px; 220 width: 30px;
221 } 221 }
222 222
223 aside .step .step-box .tshirt-color ul.choice-color li.white div{ 223 aside .step .step-box .tshirt-color ul.choice-color li.white div{
224 background-color: #ece7e4; 224 background-color: #ece7e4;
225 } 225 }
226 aside .step .step-box .tshirt-color ul.choice-color li.blue div{ 226 aside .step .step-box .tshirt-color ul.choice-color li.blue div{
227 background-color: #e7dfd0; 227 background-color: #e7dfd0;
228 } 228 }
229 aside .step .step-box .tshirt-color .color-name{ 229 aside .step .step-box .tshirt-color .color-name{
230 width: 100%; 230 width: 100%;
231 font-size: 10px; 231 font-size: 10px;
232 } 232 }
233 aside .step .step-box .tshirt-color .view-more{ 233 aside .step .step-box .tshirt-color .view-more{
234 position: absolute; 234 position: absolute;
235 bottom: 6px; 235 bottom: 6px;
236 right: 10px; 236 right: 10px;
237 } 237 }
238 /*Step 3*/ 238 /*Step 3*/
239 aside .step .step-box .tshirt-saveorder{ 239 aside .step .step-box .tshirt-saveorder{
240 padding: 10px 10px 6px 10px; 240 padding: 10px 10px 6px 10px;
241 } 241 }
242 aside .step .step-box .tshirt-saveorder .action{ 242 aside .step .step-box .tshirt-saveorder .action{
243 width: 50%; 243 width: 50%;
244 float: left; 244 float: left;
245 } 245 }
246 aside .step .step-box .tshirt-saveorder .action:first-child{ 246 aside .step .step-box .tshirt-saveorder .action:first-child{
247 padding-right: 5px; 247 padding-right: 5px;
248 } 248 }
249 aside .step .step-box .tshirt-saveorder .action:last-child{ 249 aside .step .step-box .tshirt-saveorder .action:last-child{
250 padding-left: 5px; 250 padding-left: 5px;
251 } 251 }
252 aside .step .step-box .tshirt-saveorder .action button{ 252 aside .step .step-box .tshirt-saveorder .action button{
253 padding: 8px 10px; 253 padding: 8px 10px;
254 254
255 } 255 }
256 aside .step .step-box .tshirt-saveorder .action button .text{ 256 aside .step .step-box .tshirt-saveorder .action button .text{
257 float: left; 257 float: left;
258 width: 80%; 258 width: 80%;
259 text-align: center; 259 text-align: center;
260 padding-left: 10px; 260 padding-left: 10px;
261 vertical-align: bottom; 261 vertical-align: bottom;
262 } 262 }
263 aside .step .step-box .tshirt-saveorder .action button .arrow{ 263 aside .step .step-box .tshirt-saveorder .action button .arrow{
264 float: left; 264 float: left;
265 width: 20%; 265 width: 20%;
266 height: 40px; 266 height: 40px;
267 position: relative; 267 position: relative;
268 } 268 }
269 aside .step .step-box .tshirt-saveorder .action button .arrow i.fa{ 269 aside .step .step-box .tshirt-saveorder .action button .arrow i.fa{
270 position: absolute; 270 position: absolute;
271 top: 50%; 271 top: 50%;
272 right: -6px; 272 right: -6px;
273 transform: translateX(-50%) translateY(-50%); 273 transform: translateX(-50%) translateY(-50%);
274 -webkit-transform: translateX(-50%) translateY(-50%); 274 -webkit-transform: translateX(-50%) translateY(-50%);
275 } 275 }
276 aside .step .step-box .tshirt-saveorder .notice{ 276 aside .step .step-box .tshirt-saveorder .notice{
277 padding: 5px 0 0 0; 277 padding: 5px 0 0 0;
278 } 278 }
279 /*Step 4*/ 279 /*Step 4*/
280 aside .step .title-notice{ 280 aside .step .title-notice{
281 281
282 } 282 }
283 aside .step .step-box .change-design{ 283 aside .step .step-box .change-design{
284 padding: 4px 4px; 284 padding: 4px 4px;
285 } 285 }
286 aside .step .step-box .change-design table{ 286 aside .step .step-box .change-design table{
287 287
288 } 288 }
289 aside .step .step-box .change-design table tr{ 289 aside .step .step-box .change-design table tr{
290 border-bottom: 1px dotted #cccccc; 290 border-bottom: 1px dotted #cccccc;
291 } 291 }
292 aside .step .step-box .change-design table tr:last-child{ 292 aside .step .step-box .change-design table tr:last-child{
293 border-bottom: 0; 293 border-bottom: 0;
294 } 294 }
295 295
296 /*Step 5- finish*/ 296 /*Step 5- finish*/
297 aside .step .finish-design{ 297 aside .step .finish-design{
298 padding: 20px 0; 298 padding: 20px 0;
299 } 299 }
300 aside .step .finish-design button{ 300 aside .step .finish-design button{
301 width: 100%; 301 width: 100%;
302 padding: 8px 10px; 302 padding: 8px 10px;
303 } 303 }
304 304
305 /*DESIGN CONTENT*/ 305 /*DESIGN CONTENT*/
306 #tshirt-content{ 306 #tshirt-content{
307 position: relative; 307 position: relative;
308 } 308 }
309 #tshirt-content .switch-border-design{ 309 #tshirt-content .switch-border-design{
310 position: absolute; 310 position: absolute;
311 top: 5px; 311 top: 5px;
312 right: 10px; 312 right: 10px;
313 color: red; 313 color: red;
314 font-size: 11px; 314 font-size: 11px;
315 } 315 }
316 #tshirt-content .tshirt-image{ 316 #tshirt-content .tshirt-image{
317 padding: 20px 0 0 0; 317 padding: 20px 0 0 0;
318 position: relative; 318 position: relative;
319 height: 100%; 319 height: 100%;
320 width: 100%; 320 width: 100%;
321 } 321 }
322 322
323 #tshirt-content .tshirt-image img{ 323 #tshirt-content .tshirt-image img{
324 width: 100%; 324 width: 100%;
325 } 325 }
326 326
327 #tshirt-content .tshirt-choice{ 327 #tshirt-content .tshirt-choice{
328 328
329 } 329 }
330 #tshirt-content .tshirt-choice ul{ 330 #tshirt-content .tshirt-choice ul{
331 list-style: none; 331 list-style: none;
332 padding-left: 0; 332 padding-left: 0;
333 display: table; 333 display: table;
334 margin: auto; 334 margin: auto;
335 } 335 }
336 #tshirt-content .tshirt-choice ul li{ 336 #tshirt-content .tshirt-choice ul li{
337 float: left; 337 float: left;
338 margin: 10px 10px; 338 margin: 10px 10px;
339 cursor: pointer; 339 cursor: pointer;
340 } 340 }
341 #tshirt-content .tshirt-choice ul li .image{ 341 #tshirt-content .tshirt-choice ul li .image{
342 border: 1px solid #cccccc; 342 border: 1px solid #cccccc;
343 padding: 3px 3px; 343 padding: 3px 3px;
344 } 344 }
345 #tshirt-content .tshirt-choice ul li.focus{ 345 #tshirt-content .tshirt-choice ul li.focus{
346 346
347 } 347 }
348 #tshirt-content .tshirt-choice ul li.focus .image{ 348 #tshirt-content .tshirt-choice ul li.focus .image{
349 border: 1px solid #ff0000; 349 border: 1px solid #ff0000;
350 } 350 }
351 #tshirt-content .tshirt-choice ul li .image img{ 351 #tshirt-content .tshirt-choice ul li .image img{
352 width: 50px; 352 width: 50px;
353 height: auto; 353 height: auto;
354 } 354 }
355 /*MODAL Design*/ 355 /*MODAL Design*/
356 #tshirt-design{ 356 #tshirt-design{
357 background-color: #666666; 357 background-color: #666666;
358 } 358 }
359 #tshirt-design .modal-dialog{ 359 #tshirt-design .modal-dialog{
360 /*width: 800px!important;*/ 360 /*width: 800px!important;*/
361 margin: 0 auto; 361 margin: 0 auto;
362 } 362 }
363 #tshirt-design .modal-dialog .modal-content{ 363 #tshirt-design .modal-dialog .modal-content{
364 background-color: transparent; 364 background-color: transparent;
365 border-radius: 0; 365 border-radius: 0;
366 border: 0; 366 border: 0;
367 -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important; 367 -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important;
368 box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important; 368 box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important;
369 } 369 }
370 #tshirt-design .modal-dialog .modal-content .modal-header{ 370 #tshirt-design .modal-dialog .modal-content .modal-header{
371 padding: 0 0 10px 0; 371 padding: 0 0 10px 0;
372 border-bottom: 0; 372 border-bottom: 0;
373 border-shadow: none!important; 373 border-shadow: none!important;
374 } 374 }
375 #tshirt-design .modal-dialog .modal-content .modal-body{ 375 #tshirt-design .modal-dialog .modal-content .modal-body{
376 background-color: #f5f5f5; 376 background-color: #f5f5f5;
377 padding: 0 0; 377 padding: 0 0;
378 } 378 }
379 #tshirt-design header{ 379 #tshirt-design header{
380 border-bottom: 1px solid #cccccc; 380 border-bottom: 1px solid #cccccc;
381 background-color: #dddddd; 381 background-color: #dddddd;
382 } 382 }
383 #tshirt-design header ul.nav{ 383 #tshirt-design header ul.nav{
384 padding-left: 0; 384 padding-left: 0;
385 list-style: none; 385 list-style: none;
386 } 386 }
387 #tshirt-design header ul.nav li{ 387 #tshirt-design header ul.nav li{
388 float: left; 388 float: left;
389 padding: 8px 26px; 389 padding: 8px 26px;
390 border-right: 1px solid #cccccc; 390 border-right: 1px solid #cccccc;
391 font-size: 14px; 391 font-size: 14px;
392 cursor: pointer; 392 cursor: pointer;
393 } 393 }
394 #tshirt-design header ul.nav li:hover, #tshirt-design header ul.nav li.active{ 394 #tshirt-design header ul.nav li:hover, #tshirt-design header ul.nav li.active{
395 background-color: red; 395 background-color: red;
396 color: #ffffff; 396 color: #ffffff;
397 } 397 }
398 #tshirt-design header ul.nav li:hover i.fa, #tshirt-design header ul.nav li.active i.fa{ 398 #tshirt-design header ul.nav li:hover i.fa, #tshirt-design header ul.nav li.active i.fa{
399 color: #ffffff; 399 color: #ffffff;
400 } 400 }
401 #tshirt-design header ul.nav li i.fa{ 401 #tshirt-design header ul.nav li i.fa{
402 color: #fe070f; 402 color: #fe070f;
403 font-size: 20px; 403 font-size: 20px;
404 margin-right: 10px; 404 margin-right: 10px;
405 } 405 }
406 #tshirt-design header .action{ 406 #tshirt-design header .action{
407 407
408 } 408 }
409 #tshirt-design header .action button{ 409 #tshirt-design header .action button{
410 padding: 2px 10px; 410 padding: 2px 10px;
411 margin: 6px 10px; 411 margin: 6px 10px;
412 } 412 }
413 #tshirt-design header .action button:hover{ 413 #tshirt-design header .action button:hover{
414 background-color: red; 414 background-color: red;
415 color: #ffffff; 415 color: #ffffff;
416 } 416 }
417 417
418 /*Aside modal*/ 418 /*Aside modal*/
419 .aside{ 419 .aside{
420 } 420 }
421 421
422 .aside .box-design-option{ 422 .aside .box-design-option{
423 list-style: none; 423 list-style: none;
424 padding-left: 0; 424 padding-left: 0;
425 margin-top: 10px; 425 margin-top: 10px;
426 } 426 }
427 427
428 .aside .box-design-option li{ 428 .aside .box-design-option li{
429 border: 1px solid #cdcdcd; 429 border: 1px solid #cdcdcd;
430 position: relative; 430 position: relative;
431 /*cursor: pointer;*/ 431 /*cursor: pointer;*/
432 margin-bottom: 10px; 432 margin-bottom: 10px;
433 } 433 }
434 .aside .box-design-option li .hover{ 434 .aside .box-design-option li .hover{
435 background-color: #fddad4; 435 background-color: #fddad4;
436 opacity: 0.6; 436 opacity: 0.6;
437 position: absolute; 437 position: absolute;
438 width: 100%; 438 width: 100%;
439 height: 100%; 439 height: 100%;
440 display: none; 440 display: none;
441 } 441 }
442 .aside .box-design-option li:hover .hover{ 442 .aside .box-design-option li:hover .hover{
443 display: block; 443 display: block;
444 } 444 }
445 445
446 .aside .box-design-option li .title{ 446 .aside .box-design-option li .title{
447 background: url("../images/bg1.png") repeat #cdcdcd; 447 background: url("../images/bg1.png") repeat #cdcdcd;
448 padding: 3px 10px; 448 padding: 3px 10px;
449 } 449 }
450 .aside .box-design-option li .title i.fa{ 450 .aside .box-design-option li .title i.fa{
451 color: #000000; 451 color: #000000;
452 } 452 }
453 453
454 .aside .box-design-option li .content{ 454 .aside .box-design-option li .content{
455 455
456 } 456 }
457 .aside .box-design-option li .content i.fa{ 457 .aside .box-design-option li .content i.fa{
458 font-size: 30px; 458 font-size: 30px;
459 color: #fe070f; 459 color: #fe070f;
460 margin: 8px 0; 460 margin: 8px 0;
461 } 461 }
462 .aside .box-design-option li .content .des{ 462 .aside .box-design-option li .content .des{
463 padding: 3px 10px 3px 0; 463 padding: 3px 10px 3px 0;
464 } 464 }
465 .aside .box-design-option li .content .color-patterns { 465 .aside .box-design-option li .content .color-patterns {
466 width: 100%; 466 width: 100%;
467 border: #bbb solid 1px; 467 border: #bbb solid 1px;
468 background: #FFF; 468 background: #FFF;
469 margin-top: 5px; 469 margin-top: 5px;
470 min-height: 65px; 470 min-height: 65px;
471 } 471 }
472 472
473 .aside .box-design-option li .content .color-patterns .color-pattern-item{ 473 .aside .box-design-option li .content .color-patterns .color-pattern-item{
474 height: 20px; 474 height: 20px;
475 float: left; 475 float: left;
476 margin-left: 4px; 476 margin-left: 4px;
477 margin-top: 2px; 477 margin-top: 2px;
478 width: 20px; 478 width: 20px;
479 cursor: pointer; 479 cursor: pointer;
480 border: 1px solid #ddd; 480 border: 1px solid #ddd;
481 } 481 }
482 482
483 .aside .box-design-option li .content .color-patterns .color-pattern-item:hover { 483 .aside .box-design-option li .content .color-patterns .color-pattern-item:hover {
484 outline: 1px solid #ed1d24; 484 outline: 1px solid #ed1d24;
485 } 485 }
486 486
487 .aside .box-design-option li .title .reset-color-patterns { 487 .aside .box-design-option li .title .reset-color-patterns {
488 cursor: pointer; 488 cursor: pointer;
489 } 489 }
490 490
491 .aside .box-design-option li .title .reset-color-patterns:hover { 491 .aside .box-design-option li .title .reset-color-patterns:hover {
492 opacity: 0.6; 492 opacity: 0.6;
493 } 493 }
494 494
495 .aside .box-design-option li .content .layer-item { 495 .aside .box-design-option li .content .layer-item {
496 text-align: center; 496 text-align: center;
497 border: 1px #ddd solid; 497 border: 1px #ddd solid;
498 background: #FFF; 498 background: #FFF;
499 padding: 5px; 499 padding: 5px;
500 font-size: 12px; 500 font-size: 12px;
501 cursor: pointer; 501 cursor: pointer;
502 } 502 }
503 503
504 .aside .box-design-option li .content .layer-item:hover { 504 .aside .box-design-option li .content .layer-item:hover {
505 background: #ffcccc; 505 background: #ffcccc;
506 } 506 }
507 507
508 508
509 /*Design Text*/ 509 /*Design Text*/
510 .aside #choice-text{ 510 .aside #choice-text{
511 511
512 } 512 }
513 .aside #choice-text .content{ 513 .aside #choice-text .content{
514 padding: 10px 10px; 514 padding: 10px 10px;
515 } 515 }
516 .aside #choice-text .content ul.font-family-box{ 516 .aside #choice-text .content ul.font-family-box{
517 list-style: none; 517 list-style: none;
518 margin: 10px 0; 518 margin: 10px 0;
519 padding-left: 0; 519 padding-left: 0;
520 height: 180px; 520 height: 180px;
521 width: 100%; 521 width: 100%;
522 overflow-y: scroll; 522 overflow-y: scroll;
523 border: 1px solid #c0c0c0; 523 border: 1px solid #c0c0c0;
524 } 524 }
525 525
526 .aside #choice-text .content .font-family-box li{ 526 .aside #choice-text .content .font-family-box li{
527 cursor: pointer; 527 cursor: pointer;
528 padding: 4px 8px; 528 padding: 4px 8px;
529 border: 0; 529 border: 0;
530 border-bottom: 1px solid #c0c0c0; 530 border-bottom: 1px solid #c0c0c0;
531 border-right: 1px solid #c0c0c0; 531 border-right: 1px solid #c0c0c0;
532 font-size: 16px; 532 font-size: 16px;
533 margin-bottom: 0; 533 margin-bottom: 0;
534 } 534 }
535 .aside #choice-text .content .font-family-box li.active{ 535 .aside #choice-text .content .font-family-box li.active{
536 border: 1px solid #fe070f; 536 border: 1px solid #fe070f;
537 } 537 }
538 .aside #choice-text .content .spacing-letter{ 538 .aside #choice-text .content .spacing-letter{
539 539
540 } 540 }
541 .aside #choice-text .content .spacing-letter .text-label{ 541 .aside #choice-text .content .spacing-letter .text-label{
542 font-size: 16px; 542 font-size: 16px;
543 padding: 4px 0; 543 padding: 4px 0;
544 } 544 }
545 .aside #choice-text .content .spacing-letter .box{ 545 .aside #choice-text .content .spacing-letter .box{
546 border: 1px solid #8c8c8c; 546 border: 1px solid #8c8c8c;
547 box-shadow: 0 0 5px #888888; 547 box-shadow: 0 0 5px #888888;
548 background-color: #f0f0f0; 548 background-color: #f0f0f0;
549 } 549 }
550 .aside #choice-text .content .spacing-letter .item{ 550 .aside #choice-text .content .spacing-letter .item{
551 float: left; 551 float: left;
552 } 552 }
553 .aside #choice-text .content .spacing-letter .item:hover{ 553 .aside #choice-text .content .spacing-letter .item:hover{
554 background-color: #fddad4; 554 background-color: #fddad4;
555 } 555 }
556 556
557 .aside #choice-text .content .spacing-letter .item i.fa{ 557 .aside #choice-text .content .spacing-letter .item i.fa{
558 font-size: 22px; 558 font-size: 22px;
559 margin: 0 0; 559 margin: 0 0;
560 color: #000000; 560 color: #000000;
561 } 561 }
562 .aside #choice-text .content .spacing-letter .item-text{ 562 .aside #choice-text .content .spacing-letter .item-text{
563 padding: 6px 20px; 563 padding: 6px 20px;
564 font-size: 13px; 564 font-size: 13px;
565 } 565 }
566 .aside #choice-text .content .spacing-letter .item-plus{ 566 .aside #choice-text .content .spacing-letter .item-plus{
567 border-right: 1px solid #8c8c8c; 567 border-right: 1px solid #8c8c8c;
568 } 568 }
569 .aside #choice-text .content .spacing-letter .item-minus{ 569 .aside #choice-text .content .spacing-letter .item-minus{
570 border-left: 1px solid #8c8c8c; 570 border-left: 1px solid #8c8c8c;
571 } 571 }
572 .aside #choice-text .content .spacing-letter .item-plus, .aside #choice-text .content .spacing-letter .item-minus { 572 .aside #choice-text .content .spacing-letter .item-plus, .aside #choice-text .content .spacing-letter .item-minus {
573 padding: 5px 6px 1px 6px; 573 padding: 5px 6px 1px 6px;
574 cursor: pointer; 574 cursor: pointer;
575 } 575 }
576 /*Design Choice Illustration*/ 576 /*Design Choice Illustration*/
577 .aside #choice-illustration li .content { 577 .aside #choice-illustration li .content {
578 padding: 10px 10px; 578 padding: 10px 10px;
579 } 579 }
580 580
581 .aside #choice-illustration li .content select{ 581 .aside #choice-illustration li .content select{
582 width: 100%; 582 width: 100%;
583 } 583 }
584 584
585 .aside #choice-illustration li .content .illustration-list { 585 .aside #choice-illustration li .content .illustration-list {
586 width: 100%; 586 width: 100%;
587 border: #bbb solid 1px; 587 border: #bbb solid 1px;
588 background: #FFF; 588 background: #FFF;
589 margin-top: 5px; 589 margin-top: 5px;
590 min-height: 310px; 590 min-height: 310px;
591 padding-bottom: 20px; 591 padding-bottom: 20px;
592 } 592 }
593 593
594 .aside #choice-illustration li .content .illustration-list .illstration-item{ 594 .aside #choice-illustration li .content .illustration-list .illstration-item{
595 height: 60px; 595 height: 60px;
596 overflow: hidden; 596 overflow: hidden;
597 float: left; 597 float: left;
598 margin-left: 6px; 598 margin-left: 6px;
599 margin-top: 5px; 599 margin-top: 5px;
600 margin-bottom: 5px; 600 margin-bottom: 5px;
601 padding: 2px; 601 padding: 2px;
602 background: #e2e2e2; 602 background: #e2e2e2;
603 border: solid 2px #d7d7d7; 603 border: solid 2px #d7d7d7;
604 cursor: pointer; 604 cursor: pointer;
605 } 605 }
606 606
607 .aside #choice-illustration li .content .illustration-list .illstration-item:hover { 607 .aside #choice-illustration li .content .illustration-list .illstration-item:hover {
608 outline: 2px solid #ed1d24; 608 outline: 2px solid #ed1d24;
609 } 609 }
610 610
611 .aside #choice-illustration li .content .illustration-list .illstration-item img { 611 .aside #choice-illustration li .content .illustration-list .illstration-item img {
612 width: 50px; 612 width: 50px;
613 cursor: pointer; 613 cursor: pointer;
614 } 614 }
615 615
616 .aside #choice-illustration li .content .illustration-list .footer-bar { 616 .aside #choice-illustration li .content .illustration-list .footer-bar {
617 text-align: center; 617 text-align: center;
618 margin-top: 5px; 618 margin-top: 5px;
619 bottom: 10px; 619 bottom: 10px;
620 position: absolute; 620 position: absolute;
621 width: 100%; 621 width: 100%;
622 padding-right: 20px; 622 padding-right: 20px;
623 } 623 }
624 .aside #choice-illustration li .content .illustration-list .footer-bar .footer-pagination { 624 .aside #choice-illustration li .content .illustration-list .footer-bar .footer-pagination {
625 margin-right: 5px; 625 margin-right: 5px;
626 cursor: pointer; 626 cursor: pointer;
627 font-size: 9px; 627 font-size: 9px;
628 color: #FFF; 628 color: #FFF;
629 background: #666666; 629 background: #666666;
630 text-transform: uppercase; 630 text-transform: uppercase;
631 padding: 2px 5px; 631 padding: 2px 5px;
632 } 632 }
633 633
634 .aside #choice-illustration li .content .illustration-list .footer-bar .footer-pagination:hover { 634 .aside #choice-illustration li .content .illustration-list .footer-bar .footer-pagination:hover {
635 background: #999999; 635 background: #999999;
636 } 636 }
637 .tooltip-arrow, 637 .tooltip-arrow,
638 .red-tooltip + .tooltip > .tooltip-inner { 638 .red-tooltip + .tooltip > .tooltip-inner {
639 background-color: #FFF; 639 background-color: #FFF;
640 margin:0; 640 margin:0;
641 padding:0; 641 padding:0;
642 } 642 }
643 643
644 /* Insert image*/ 644 /* Insert image*/
645 #btn-choose-image { 645 #btn-choose-image {
646 background: #ff0f00; 646 background: #ff0f00;
647 cursor: pointer; 647 cursor: pointer;
648 margin: 10px 0px; 648 margin: 10px 0px;
649 padding: 0 10px; 649 padding: 0 10px;
650 color: #FFF; 650 color: #FFF;
651 font-size: 12px; 651 font-size: 12px;
652 } 652 }
653 653
654 #btn-choose-image:hover { 654 #btn-choose-image:hover {
655 background: #f8aeae; 655 background: #f8aeae;
656 } 656 }
657 657
658 .aside #choice-image li .content { 658 .aside #choice-image li .content {
659 margin: 0 10px; 659 margin: 0 10px;
660 padding: 10px 0; 660 padding: 10px 0;
661 } 661 }
662 662
663 .aside #choice-image li .content .small-text { 663 .aside #choice-image li .content .small-text {
664 font-size:10px; 664 font-size:10px;
665 margin-bottom: 10px; 665 margin-bottom: 10px;
666 } 666 }
667 667
668 .aside #choice-image { 668 .aside #choice-image {
669 font-size: 13px; 669 font-size: 13px;
670 } 670 }
671 671
672 .aside #imgLoader{ 672 .aside #imgLoader{
673 display: none; 673 display: none;
674 } 674 }
675 675
676 .aside #choice-image li .content .list-images { 676 .aside #choice-image li .content .list-images {
677 height: 300px; 677 height: 300px;
678 background: #FFF; 678 background: #FFF;
679 border: 1px solid #DDD; 679 border: 1px solid #DDD;
680 } 680 }
681 681
682 .aside #choice-image li .content .list-images .recent-img{ 682 .aside #choice-image li .content .list-images .recent-img{
683 height: 60px; 683 height: 60px;
684 overflow: hidden; 684 overflow: hidden;
685 float: left; 685 float: left;
686 margin-left: 6px; 686 margin-left: 6px;
687 margin-top: 5px; 687 margin-top: 5px;
688 margin-bottom: 5px; 688 margin-bottom: 5px;
689 padding: 2px; 689 padding: 2px;
690 background: #e2e2e2; 690 background: #e2e2e2;
691 border: solid 2px #d7d7d7; 691 border: solid 2px #d7d7d7;
692 cursor: pointer; 692 cursor: pointer;
693 } 693 }
694 694
695 .aside #choice-image li .content .list-images .recent-img:hover { 695 .aside #choice-image li .content .list-images .recent-img:hover {
696 outline: 2px solid #ed1d24; 696 outline: 2px solid #ed1d24;
697 } 697 }
698 698
699 .aside #choice-image li .content .list-images .recent-img img { 699 .aside #choice-image li .content .list-images .recent-img img {
700 width: 50px; 700 width: 50px;
701 cursor: pointer; 701 cursor: pointer;
702 } 702 }
703 703
704 /*Design content*/ 704 /*Design content*/
705 .tshirt-design-container{ 705 .tshirt-design-container{
706 706
707 } 707 }
708 .tshirt-design-container .design-content{ 708 .tshirt-design-container .design-content{
709 padding: 10px 0; 709 padding: 10px 0;
710 /*min-height: 580px;*/ 710 /*min-height: 580px;*/
711 } 711 }
712 .tshirt-design-container .design-content .content{ 712 .tshirt-design-container .design-content .content{
713 width: 100%; 713 width: 100%;
714 height: 100%; 714 height: 100%;
715 min-height: 600px; 715 min-height: 600px;
716 position: relative; 716 position: relative;
717 padding: 40px 40px; 717 padding: 40px 40px;
718 } 718 }
719 .tshirt-design-container .design-content .content .selection-design{ 719 .tshirt-design-container .design-content .content .selection-design{
720 border: 1px solid #ff0000; 720 border: 1px solid #ff0000;
721 } 721 }
722 .tshirt-design-container .agree-design{ 722 .tshirt-design-container .agree-design{
723 position: absolute; 723 position: absolute;
724 right: -16px; 724 right: -16px;
725 top: 40%; 725 top: 40%;
726 cursor: pointer; 726 cursor: pointer;
727 } 727 }
728 .tshirt-design-container .agree-design:hover{ 728 .tshirt-design-container .agree-design:hover{
729 opacity: 0.8; 729 opacity: 0.8;
730 } 730 }
731 .tshirt-design-container .trash-design{ 731 .tshirt-design-container .trash-design{
732 position: absolute; 732 position: absolute;
733 right: 5px; 733 right: 5px;
734 bottom: 0; 734 bottom: 0;
735 } 735 }
736 .tshirt-design-container .trash-design:hover{ 736 .tshirt-design-container .trash-design:hover{
737 opacity: 0.5; 737 opacity: 0.5;
738 } 738 }
739 739
740 .object-border{ 740 .object-border{
741 position: absolute; 741 position: absolute;
742 background-color: rgb(0, 108, 255); 742 background-color: rgb(0, 108, 255);
743 border: 0; 743 border: 0;
744 display:none; 744 display:none;
745 transform-origin: 0% 0%; 745 transform-origin: 0% 0%;
746 } 746 }
747 #object-border-top, #object-border-bottom{ 747 #object-border-top, #object-border-bottom{
748 height: 2px; 748 height: 2px;
749 } 749 }
750 #object-border-right, #object-border-left{ 750 #object-border-right, #object-border-left{
751 width: 2px; 751 width: 2px;
752 } 752 }
753 753
754 754
755 /*FOOTER*/ 755 /*FOOTER*/
756 footer{ 756 footer{
757 background-color: #333333; 757 background-color: #333333;
758 } 758 }
759 footer ul.nav-footer{ 759 footer ul.nav-footer{
760 padding-left: 0; 760 padding-left: 0;
761 list-style: none; 761 list-style: none;
762 } 762 }
763 footer ul.nav-footer li{ 763 footer ul.nav-footer li{
764 float: left; 764 float: left;
765 padding: 3px 10px; 765 padding: 3px 10px;
766 border-right: 1px dotted #ffffff; 766 border-right: 1px dotted #ffffff;
767 767
768 } 768 }
769 footer ul.nav-footer li a{ 769 footer ul.nav-footer li a{
770 color: #ffffff; 770 color: #ffffff;
771 font-size: 11px; 771 font-size: 11px;
772 } 772 }
773 /* Customize container */ 773 /* Customize container */
774 @media (min-width: 768px) { 774 @media (min-width: 768px) {
775 .container { 775 .container {
776 /*max-width: 730px;*/ 776 /*max-width: 730px;*/
777 } 777 }
778 } 778 }
779 779
780 /* Responsive: Portrait tablets and up */ 780 /* Responsive: Portrait tablets and up */
781 @media screen and (min-width: 768px) { 781 @media screen and (min-width: 768px) {
782 /* Remove the padding we set earlier */ 782 /* Remove the padding we set earlier */
783 783
784 } 784 }
785 785
786 @media (min-width: 1024px) { 786 @media (min-width: 1024px) {
787 #tshirt-design .modal-dialog{ 787 #tshirt-design .modal-dialog{
788 min-width: 1000px; 788 min-width: 1000px;
789 width: 1000px; 789 width: 1000px;
790 } 790 }
791 } 791 }
792 792
793 @media (max-width: 762px) { 793 @media (max-width: 762px) {
794 .modal-dialog{ 794 .modal-dialog{
795 margin: 0 0!important; 795 margin: 0 0!important;
796 } 796 }
797 #tshirt-design header .menu-nav{ 797 #tshirt-design header .menu-nav{
798 overflow-x: scroll!important; 798 overflow-x: scroll!important;
799 -webkit-overflow-scrolling: touch; 799 -webkit-overflow-scrolling: touch;
800 } 800 }
801 801
802 #tshirt-design header ul.nav { 802 #tshirt-design header ul.nav {
803 text-align: justify; 803 text-align: justify;
804 width: 680px; 804 width: 680px;
805 } 805 }
806 806
807 #tshirt-design header ul.nav li { 807 #tshirt-design header ul.nav li {
808 display: inline-block; /* 6 */ 808 display: inline-block; /* 6 */
809 } 809 }
810 810
811 .tshirt-design-container .design-content .content{ 811 .tshirt-design-container .design-content .content{
812 padding: 14px 14px; 812 padding: 14px 14px;
813 } 813 }
814 .tshirt-design-container .design-content{ 814 .tshirt-design-container .design-content{
815 padding: 0 0; 815 padding: 0 0;
816 } 816 }
817 } 817 }
818
819
820
821 #tshirt-design-saved .subframe-design {
822 width: 80%;
823 margin: auto;
824 margin-top: 150px;
825 border: 10px solid rgb(0, 0, 0);
826 border: 20px solid rgba(0, 0, 0, .5);
827 -webkit-background-clip: padding-box; /* for Safari */
828 background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
829 }
830
831 #tshirt-design-saved .modal-content button.close {
832 margin-right: 100px;
833 font-size: 41px;
834 margin-top: -10px;
835 }
836
837 #tshirt-design-saved .subframe-design .nav-tabs {
838 background: rgba(0, 0, 0, .5);
839 border-bottom: 1px solid #F5F5F5;
840 }
841
842 #tshirt-design-saved .subframe-design .nav-tabs li a {
843 text-decoration: none;
844 background-color: #CCC;
845 cursor: pointer;
846 margin-right: 10px;
847 padding: 2px 30px;
848 color: #000;
849 font-weight: 600;
850 border-bottom: 1px solid #F5F5F5
851 }
852
853 #tshirt-design-saved .subframe-design .nav-tabs li.active a {
854 background: #F5F5F5;
855 color: #fe070f;
856 }
857
858 #tshirt-design-saved .subframe-design .tab-content {
859 background: #F5F5F5;
860 width: 100%;
861 min-height: 400px;
862 }
app/views/design_part/tshirt-saved.html
Diff comments   View file @ faf1542
File was created 1 <!-- Modal -->
2 <div class="modal" id="tshirt-design-saved" tabindex="2" role="dialog">
3 <div class="modal-dialog" role="document">
4 <div class="modal-content">
5 <button type="button" class="close" ng-click="closeSavedModal()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
6 <div class="subframe-design">
7 <ul class="nav nav-tabs" role="tablist">
8 <li role="presentation" id="tab-saved-favorite" class="active"><a ng-click="openSavedTab('favorite')" role="tab" data-toggle="tab">マイアルバム</a></li>
9 <li role="presentation" id="tab-saved-recommend"><a ng-click="openSavedTab('recommend')" role="tab" data-toggle="tab">おすすめ</a></li>
10 </ul>
11 <div class="tab-content">
12 <div role="tabpanel" class="tab-pane active" id="content-saved-favorite">
13 <div class="saved-list" ng-init="currentFavoritePage=1;perFavoritePage=16">
14 <div class="saved-item" ng-repeat="item in favoriteList | limitTo:perFavoritePage:((currentFavoritePage-1)*perFavoritePage)" ng-click="restoreSaved(item)" title="<img src='{{item.thumb}}' style='width:200px;background:#e2e2e2;margin:0;padding:0;margin-left:-8px;border:0'/>" data-toggle="tooltip">
15 <img ng-src="{{item.path}}"/>
16 </div>
17 <div class="clearfix"></div>
18 <div class="footer-bar">
19 <div class="pull-left footer-pagination" ng-click="currentIllustrationPage=currentIllustrationPage-1" ng-show="currentIllustrationPage > 1">< Back</div>
20 {{currentIllustrationPage}}/{{currentIllustrationCate.list.length/perIllustrationPage | number:0}}
21 <div class="pull-right footer-pagination" ng-click="currentIllustrationPage=currentIllustrationPage+1" ng-show="currentIllustrationPage < (currentIllustrationCate.list.length/perIllustrationPage|number:0)">Next ></div>
22 </div>
23 </div>
24 </div>
25 <div role="tabpanel" class="tab-pane" id="content-saved-recommend">...</div>
26 </div>
27 </div>
28 </div>
29 </div>
30 </div>
app/views/tshirt-design.html
Diff comments   View file @ faf1542
1 <!-- Modal --> 1 <!-- Modal -->
2 <div class="modal fade" id="tshirt-design" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" ng-controller="TshirtdesignCtrl"> 2 <div class="modal fade" id="tshirt-design" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" ng-controller="TshirtdesignCtrl">
3 <div class="modal-dialog" role="document"> 3 <div class="modal-dialog" role="document">
4 <div class="modal-content"> 4 <div class="modal-content">
5 <div class="modal-header"> 5 <div class="modal-header">
6 <button class="black" ng-click="modalClose()"><i class="fa fa-times" aria-hidden="true"></i> キャンセル</button> 6 <button class="black" ng-click="modalClose()"><i class="fa fa-times" aria-hidden="true"></i> キャンセル</button>
7 <button class="black"> <i class="fa fa-angle-right" aria-hidden="true"></i> はじめての方へ</button> 7 <button class="black"> <i class="fa fa-angle-right" aria-hidden="true"></i> はじめての方へ</button>
8 </div> 8 </div>
9 <div class="modal-body"> 9 <div class="modal-body">
10 <header class="clearfix"> 10 <header class="clearfix">
11 <div class="menu-nav"> 11 <div class="menu-nav">
12 <ul class="nav pull-left"> 12 <ul class="nav pull-left">
13 <li ng-class="{'active': isShowLeftPanel=='text'}" ng-click="showDesignTab('text')"> 13 <li ng-class="{'active': isShowLeftPanel=='text'}" ng-click="showDesignTab('text')">
14 <i class="fa fa-jpy" aria-hidden="true"></i> 文字 14 <i class="fa fa-jpy" aria-hidden="true"></i> 文字
15 </li> 15 </li>
16 <li ng-class="{'active': isShowLeftPanel=='illustration'}" ng-click="showDesignTab('illustration')"> 16 <li ng-class="{'active': isShowLeftPanel=='illustration'}" ng-click="showDesignTab('illustration')">
17 <i class="fa fa-btc" aria-hidden="true"></i> イラスト・イメージ 17 <i class="fa fa-btc" aria-hidden="true"></i> イラスト・イメージ
18 </li> 18 </li>
19 <li ng-class="{'active': isShowLeftPanel=='image'}" ng-click="showDesignTab('image')"> 19 <li ng-class="{'active': isShowLeftPanel=='image'}" ng-click="showDesignTab('image')">
20 <i class="fa fa-money" aria-hidden="true"></i> 自分の画像・写真 20 <i class="fa fa-money" aria-hidden="true"></i> 自分の画像・写真
21 </li> 21 </li>
22 <li ng-click="canvasClearAll()"> 22 <li ng-click="canvasClearAll()">
23 <i class="fa fa-minus-circle" aria-hidden="true"></i> 全消去 23 <i class="fa fa-minus-circle" aria-hidden="true"></i> 全消去
24 </li> 24 </li>
25 </ul> 25 </ul>
26 </div> 26 </div>
27 27
28 <div class="action pull-right"> 28 <div class="action pull-right">
29 <button class="white"> 29 <button class="white" ng-click="showRecommend()">
30 アルバムを開く 30 アルバムを開く
31 </button> 31 </button>
32 <button class="white"> 32 <button class="white" ng-click="saveFavorite()">
33 アルバムに入れる 33 アルバムに入れる
34 </button> 34 </button>
35 </div> 35 </div>
36 </header> 36 </header>
37 <section class="tshirt-design-container clearfix"> 37 <section class="tshirt-design-container clearfix">
38 <div class="aside col-sm-4"> 38 <div class="aside col-sm-4">
39 <!-- Default--> 39 <!-- Default-->
40 <ul class="box-design-option" id="choice-design-option" ng-show="isShowLeftPanel=='default' " ng-include="designPartDefault"> 40 <ul class="box-design-option" id="choice-design-option" ng-show="isShowLeftPanel=='default' " ng-include="designPartDefault">
41 </ul> 41 </ul>
42 <!-- Illustration design--> 42 <!-- Illustration design-->
43 <ul class="box-design-option" id="choice-illustration" ng-show="isShowLeftPanel=='illustration'" ng-include="designPartIllustration"> 43 <ul class="box-design-option" id="choice-illustration" ng-show="isShowLeftPanel=='illustration'" ng-include="designPartIllustration">
44 </ul> 44 </ul>
45 <!-- Custom image design--> 45 <!-- Custom image design-->
46 <ul class="box-design-option" id="choice-image" ng-show="isShowLeftPanel=='image'" ng-include="designPartImage"> 46 <ul class="box-design-option" id="choice-image" ng-show="isShowLeftPanel=='image'" ng-include="designPartImage">
47 </ul> 47 </ul>
48 <!-- Text design--> 48 <!-- Text design-->
49 <ul class="box-design-option" id="choice-text" ng-show="isShowLeftPanel=='text'" ng-include="designPartText"> 49 <ul class="box-design-option" id="choice-text" ng-show="isShowLeftPanel=='text'" ng-include="designPartText">
50 </ul> 50 </ul>
51 </div> 51 </div>
52 <div class="col-sm-8"> 52 <div class="col-sm-8">
53 <div class="design-content" id="main-design-content"> 53 <div class="design-content" id="main-design-content">
54 <div class="content" id="main-design" ng-style="{'background-color' : tShirtColorCode}" ng-class="designCanvasClass"> 54 <div class="content" id="main-design" ng-style="{'background-color' : tShirtColorCode}" ng-class="designCanvasClass">
55 <div class="object-border" id="object-border-top"></div> 55 <div class="object-border" id="object-border-top"></div>
56 <div class="object-border" id="object-border-right"></div> 56 <div class="object-border" id="object-border-right"></div>
57 <div class="object-border" id="object-border-bottom"></div> 57 <div class="object-border" id="object-border-bottom"></div>
58 <div class="object-border" id="object-border-left"></div> 58 <div class="object-border" id="object-border-left"></div>
59 <canvas id="main-design-container" class="selection-design lower-canvas"> 59 <canvas id="main-design-container" class="selection-design lower-canvas">
60 60
61 </canvas> 61 </canvas>
62 </div> 62 </div>
63 <div class="agree-design" ng-click="outputDesign()"> 63 <div class="agree-design" ng-click="outputDesign()">
64 <img src="images/agree-design.png" alt="agree design" /> 64 <img src="images/agree-design.png" alt="agree design" />
65 </div> 65 </div>
66 <div class="trash-design"> 66 <div class="trash-design">
67 <img src="images/trash.png" alt="trash design" /> 67 <img src="images/trash.png" alt="trash design" />
68 </div> 68 </div>
69 </div> 69 </div>
70 <img style="display:none" src="images/trash-hover.png" alt="trash-hover cache" /> 70 <img style="display:none" src="images/trash-hover.png" alt="trash-hover cache" />
71 </div> 71 </div>
72 72
73 </section> 73 </section>
74 </div> 74 </div>
75 </div> 75 </div>
76 </div> 76 </div>
77
78 <div ng-include="savedFrameView"></div>
77 </div> 79 </div>