TRUONG / T-Shats Frontend

Compare View

switch
from
...
to
 
Commits (2)

Changes

Showing 6 changed files 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 = new Date().getTime();//'27-11_04'; 50 var VERSION = '28-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 @ b380096
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 //Set width and height canvas
9 //Set width and height canvas 10 function setSizeCanvas() {
10 function setSizeCanvas() { 11 if(typeof $rootScope.placeTshirt.place == 'undefined')
11 if(typeof $rootScope.placeTshirt.place == 'undefined') 12 return;
12 return; 13
13 14 var _modalWidth = $('.modal-dialog').width();
14 var _modalWidth = $('.modal-dialog').width(); 15 var _windowWidth = window.innerWidth;
15 var _windowWidth = window.innerWidth; 16 var place = $rootScope.placeTshirt.place;
16 var place = $rootScope.placeTshirt.place; 17
17 18 switch (place) {
18 switch (place) { 19 case 't_shirt_p_1' :
19 case 't_shirt_p_1' : 20 $scope.designCanvasClass = 'design-content-t_shirt_p_1';
20 $scope.designCanvasClass = 'design-content-t_shirt_p_1'; 21 if(_windowWidth > 762) {
21 if(_windowWidth > 762) { 22 var _contentCanvasWidth = (_modalWidth*8/12)/1.2;
22 var _contentCanvasWidth = (_modalWidth*8/12)/1.2; 23 var _contentCanvasHeight = _contentCanvasWidth;
23 var _contentCanvasHeight = _contentCanvasWidth; 24 } else {
24 } else { 25 var _contentCanvasWidth = _windowWidth-70;
25 var _contentCanvasWidth = _windowWidth-70; 26 var _contentCanvasHeight = _contentCanvasWidth;
26 var _contentCanvasHeight = _contentCanvasWidth; 27 }
27 } 28 break;
28 break; 29 case 't_shirt_p_2' :
29 case 't_shirt_p_2' : 30 $scope.designCanvasClass = 'design-content-t_shirt_p_2';
30 $scope.designCanvasClass = 'design-content-t_shirt_p_2'; 31 if(_windowWidth > 762) {
31 if(_windowWidth > 762) { 32 var _contentCanvasWidth = (_modalWidth*8/12)/1.2;
32 var _contentCanvasWidth = (_modalWidth*8/12)/1.2; 33 var _contentCanvasHeight = (_modalWidth*8/12)/2.2;
33 var _contentCanvasHeight = (_modalWidth*8/12)/2.2; 34
34 35 } else {
35 } else { 36 var _contentCanvasWidth = _windowWidth-70;
36 var _contentCanvasWidth = _windowWidth-70; 37 var _contentCanvasHeight = (_windowWidth)/2.5;
37 var _contentCanvasHeight = (_windowWidth)/2.5; 38 }
38 } 39 break;
39 break; 40 default:
40 default: 41 break;
41 break; 42 }
42 } 43
43 44 canvas.setWidth(_contentCanvasWidth);
44 canvas.setWidth(_contentCanvasWidth); 45 canvas.setHeight(_contentCanvasHeight);
45 canvas.setHeight(_contentCanvasHeight); 46
46 47 var mainDsWidth = (_modalWidth*8/12)-30;
47 var mainDsWidth = (_modalWidth*8/12)-30; 48 var mainDsHeight = (place == 't_shirt_p_1' ? 80 : 400) + _contentCanvasHeight;
48 var mainDsHeight = (place == 't_shirt_p_1' ? 80 : 400) + _contentCanvasHeight; 49 // console.log(mainDsWidth, mainDsHeight);
49 // console.log(mainDsWidth, mainDsHeight); 50 diffX = 40;
50 diffX = 40; 51 diffY = (mainDsHeight - _contentCanvasHeight)/2;
51 diffY = (mainDsHeight - _contentCanvasHeight)/2; 52 _coorTrash_x = _contentCanvasWidth + 20;
52 _coorTrash_x = _contentCanvasWidth + 20; 53 _coorTrash_y = _contentCanvasHeight + diffY - 90;
53 _coorTrash_y = _contentCanvasHeight + diffY - 90; 54 console.log(_coorTrash_x, _coorTrash_y);
54 console.log(_coorTrash_x, _coorTrash_y); 55 }
55 } 56 setSizeCanvas();
56 setSizeCanvas(); 57 //Window resize event
57 //Window resize event 58 $(window).resize(function () {
58 $(window).resize(function () { 59 setSizeCanvas();
59 setSizeCanvas(); 60 });
60 }); 61
61 62 //Custom control
62 //Custom control 63 fabric.Object.prototype.transparentCorners = true;
63 fabric.Object.prototype.transparentCorners = true; 64 fabric.Object.prototype.hasRotatingPoint = false;
64 fabric.Object.prototype.hasRotatingPoint = false; 65
65 66 var ctrVisible = {tl: false, ml:false, bl:false, mb: false, br: true, mr: false, tr: true, mt: true, mtr: false};
66 var ctrVisible = {tl: false, ml:false, bl:false, mb: false, br: true, mr: false, tr: true, mt: true, mtr: false}; 67 for(key in ctrVisible) {
67 for(key in ctrVisible) { 68 fabric.Object.prototype.setControlVisible(key,ctrVisible[key]);
68 fabric.Object.prototype.setControlVisible(key,ctrVisible[key]); 69 }
69 } 70
70 71 fabric.Object.prototype.customiseCornerIcons({
71 fabric.Object.prototype.customiseCornerIcons({ 72 settings: {
72 settings: { 73 borderColor: '#0000ff',
73 borderColor: '#0000ff', 74 cornerSize: 25,
74 cornerSize: 25, 75 cornerShape: 'circle',
75 cornerShape: 'circle', 76 cornerBackgroundColor: '#0171b4',
76 cornerBackgroundColor: '#0171b4', 77 cornerPadding: 6
77 cornerPadding: 6 78 },
78 }, 79 mt: {
79 mt: { 80 icon: 'images/control-icon/ok.png'
80 icon: 'images/control-icon/ok.png' 81 },
81 }, 82 br: {
82 br: { 83 icon: 'images/control-icon/resize.png'
83 icon: 'images/control-icon/resize.png' 84 },
84 }, 85 tr: {
85 tr: { 86 icon: 'images/control-icon/rotate.png'
86 icon: 'images/control-icon/rotate.png' 87 }
87 } 88 });
88 }); 89
89 90 fabric.Canvas.prototype.customiseControls({
90 fabric.Canvas.prototype.customiseControls({ 91 mt: {
91 mt: { 92 cursor: 'pointer',
92 cursor: 'pointer', 93 action: function(e, target) {
93 action: function(e, target) { 94 fabric.Object.prototype.selectable = false;
94 fabric.Object.prototype.selectable = false; 95 canvas.deactivateAll();
95 canvas.deactivateAll(); 96 delete currentObj;
96 delete currentObj; 97 $scope.designTextValue = '';
97 $scope.designTextValue = ''; 98 $timeout(function(){
98 $timeout(function(){ 99 fabric.Object.prototype.selectable = true;
99 fabric.Object.prototype.selectable = true; 100 },20);
100 },20); 101 }
101 } 102 },
102 }, 103 br: {
103 br: { 104
104 105 },
105 }, 106 tr: {
106 tr: { 107 action: 'rotate',
107 action: 'rotate', 108 cursor: 'crosshair'
108 cursor: 'crosshair' 109 }
109 } 110 });
110 }); 111
111 112 canvas.on({
112 canvas.on({ 113 'object:added' : onIllustrationAdded,
113 'object:added' : onIllustrationAdded, 114 'object:moving' : onIllustrationMoving,
114 'object:moving' : onIllustrationMoving, 115 'object:scaling' : onIllustrationChange,
115 'object:scaling' : onIllustrationChange, 116 'object:rotating' : onIllustrationChange,
116 'object:rotating' : onIllustrationChange, 117 'object:selected' : onObjectSelected,
117 'object:selected' : onObjectSelected, 118 'object:modified' : onIllustrationModifield,
118 'object:modified' : onIllustrationModifield, 119 'selection:cleared' : onObjectOut,
119 'selection:cleared' : onObjectOut, 120 });
120 }); 121
121 122 var currentObj;
122 var currentObj; 123 var listObj = [];
123 var listObj = []; 124 var stateObj = [];
124 var stateObj = []; 125 var indexCurr = 0;
125 var indexCurr = 0; 126 var indexCurr2 = 0;
126 var indexCurr2 = 0; 127 var actionObj = false;
127 var actionObj = false; 128 var refreshObj = true;
128 var refreshObj = true; 129 var spacingNum = 0;
129 var spacingNum = 0; 130 $scope.itemFont = 0;
130 $scope.itemFont = 0; 131
131 132 $scope.showDesignTab = function(tab){
132 $scope.showDesignTab = function(tab){ 133 canvas.deactivateAll().renderAll();
133 canvas.deactivateAll().renderAll(); 134 $rootScope.isShowLeftPanel = tab;
134 $rootScope.isShowLeftPanel = tab; 135 switch (tab) {
135 switch (tab) { 136 case 'illustration': {
136 case 'illustration': { 137 $scope.IllustrationList = $illustration.getAll();
137 $scope.IllustrationList = $illustration.getAll(); 138 $rootScope.outputImage = false;
138 $rootScope.outputImage = false; 139 $scope.illustrationSelectConfig = {
139 $scope.illustrationSelectConfig = { 140 allowClear:true
140 allowClear:true 141 };
141 }; 142 $timeout(function(){
142 $timeout(function(){ 143 $('.illstration-item').tooltip({
143 $('.illstration-item').tooltip({ 144 animated: 'fade',
144 animated: 'fade', 145 placement: 'bottom',
145 placement: 'bottom', 146 html: true
146 html: true 147 });
147 }); 148 },1000);
148 },1000); 149 break;
149 break; 150 }
150 } 151 case 'text': {
151 case 'text': { 152 break;
152 break; 153 }
153 } 154 }
154 } 155 };
155 }; 156 $scope.showDesignTab('default');
156 $scope.showDesignTab('default'); 157
157 158
158 159 function onIllustrationAdded(options){
159 function onIllustrationAdded(options){ 160 var object = options.target;
160 var object = options.target; 161
161 162 if (actionObj === true) {
162 if (actionObj === true) { 163 stateObj = [stateObj[indexCurr2]];
163 stateObj = [stateObj[indexCurr2]]; 164 listObj = [listObj[indexCurr2]];
164 listObj = [listObj[indexCurr2]]; 165
165 166 actionObj = false;
166 actionObj = false; 167 console.log(stateObj);
167 console.log(stateObj); 168 indexCurr = 1;
168 indexCurr = 1; 169 }
169 } 170 object.saveState();
170 object.saveState(); 171
171 172 console.log(object.originalState);
172 console.log(object.originalState); 173 stateObj[indexCurr] = JSON.stringify(object.originalState);
173 stateObj[indexCurr] = JSON.stringify(object.originalState); 174 listObj[indexCurr] = object;
174 listObj[indexCurr] = object; 175 indexCurr++;
175 indexCurr++; 176 indexCurr2 = indexCurr - 1;
176 indexCurr2 = indexCurr - 1; 177 refreshObj = true;
177 refreshObj = true; 178 }
178 } 179
179 180 function onIllustrationModifield(options){
180 function onIllustrationModifield(options){ 181 $('.object-border').hide();
181 $('.object-border').hide(); 182 //
182 // 183 var pointer = canvas.getPointer(options.e);
183 var pointer = canvas.getPointer(options.e); 184 if (pointer.x >= _coorTrash_x && pointer.y >= _coorTrash_y && pointer.x <= _coorTrash_x+50 && pointer.y <= _coorTrash_y+70){
184 if (pointer.x >= _coorTrash_x && pointer.y >= _coorTrash_y && pointer.x <= _coorTrash_x+50 && pointer.y <= _coorTrash_y+70){ 185 canvas.getActiveObject().remove();
185 canvas.getActiveObject().remove(); 186 $('.design-content .trash-design img').attr({'src':'images/trash.png'});
186 $('.design-content .trash-design img').attr({'src':'images/trash.png'}); 187 return;
187 return; 188 }
188 } 189
189 190 //
190 // 191 var objOffset = canvas.getActiveObject().getBoundingRect();
191 var objOffset = canvas.getActiveObject().getBoundingRect(); 192 var cH = canvas.height, cW = canvas.width, H0 = 20, W0 = 20;
192 var cH = canvas.height, cW = canvas.width, H0 = 20, W0 = 20; 193 //console.log(objOffset,canvas.height,canvas.width);
193 //console.log(objOffset,canvas.height,canvas.width); 194 if (objOffset.left<W0-objOffset.width || objOffset.left>cW-W0 || objOffset.top<H0-objOffset.height || objOffset.top>cH-H0){
194 if (objOffset.left<W0-objOffset.width || objOffset.left>cW-W0 || objOffset.top<H0-objOffset.height || objOffset.top>cH-H0){ 195 if (confirm('削除してもよろしいですか')){
195 if (confirm('削除してもよろしいですか')){ 196 canvas.getActiveObject().remove();
196 canvas.getActiveObject().remove(); 197 }else{
197 }else{ 198 undoCanvas();
198 undoCanvas(); 199 return;
199 return; 200 }
200 } 201 }
201 } 202
202 203 var object = options.target;
203 var object = options.target; 204 if (actionObj === true) {
204 if (actionObj === true) { 205 stateObj = [stateObj[indexCurr2]];
205 stateObj = [stateObj[indexCurr2]]; 206 listObj = [listObj[indexCurr2]];
206 listObj = [listObj[indexCurr2]]; 207
207 208 actionObj = false;
208 actionObj = false; 209 console.log(stateObj);
209 console.log(stateObj); 210 indexCurr = 1;
210 indexCurr = 1; 211 }
211 } 212
212 213 object.saveState();
213 object.saveState(); 214
214 215 stateObj[indexCurr] = JSON.stringify(object.originalState);
215 stateObj[indexCurr] = JSON.stringify(object.originalState); 216 listObj[indexCurr] = object;
216 listObj[indexCurr] = object; 217 indexCurr++;
217 indexCurr++; 218 indexCurr2 = indexCurr - 1;
218 indexCurr2 = indexCurr - 1; 219 refreshObj = true;
219 refreshObj = true; 220 }
220 } 221
221 222 function onIllustrationChange(options) {
222 function onIllustrationChange(options) { 223
223 224 }
224 } 225
225 226 function onIllustrationMoving(options) {
226 function onIllustrationMoving(options) { 227 var object = options.target;
227 var object = options.target; 228 var pointer = canvas.getPointer(options.e);
228 var pointer = canvas.getPointer(options.e); 229 // console.log(pointer.x, pointer.y);
229 // console.log(pointer.x, pointer.y); 230 if (pointer.x >= _coorTrash_x && pointer.y >= _coorTrash_y && pointer.x <= _coorTrash_x+50 && pointer.y <= _coorTrash_y+70){
230 if (pointer.x >= _coorTrash_x && pointer.y >= _coorTrash_y && pointer.x <= _coorTrash_x+50 && pointer.y <= _coorTrash_y+70){ 231 $('.design-content .trash-design img').attr({'src':'images/trash-hover.png'});
231 $('.design-content .trash-design img').attr({'src':'images/trash-hover.png'}); 232 }else{
232 }else{ 233 $('.design-content .trash-design img').attr({'src':'images/trash.png'});
233 $('.design-content .trash-design img').attr({'src':'images/trash.png'}); 234 }
234 } 235
235 236 // console.log(object.oCoords,object.originalState);
236 // console.log(object.oCoords,object.originalState); 237 object.setCoords();
237 object.setCoords(); 238 var Coords = object.oCoords;
238 var Coords = object.oCoords; 239 var xAngle = Math.cos(object.getAngle() * (Math.PI / 180))/2;
239 var xAngle = Math.cos(object.getAngle() * (Math.PI / 180))/2; 240 var yAngle = Math.sin(object.getAngle() * (Math.PI / 180))/2;
240 var yAngle = Math.sin(object.getAngle() * (Math.PI / 180))/2; 241 $('#object-border-left').css({'height':Math.ceil(object.originalState.height*object.scaleY), top: Coords.tl.y+diffY, left: Coords.tl.x+diffX});
241 $('#object-border-left').css({'height':Math.ceil(object.originalState.height*object.scaleY), top: Coords.tl.y+diffY, left: Coords.tl.x+diffX}); 242 $('#object-border-right').css({'height':Math.ceil(object.originalState.height*object.scaleY), top: Coords.tr.y+diffY, left: Coords.tr.x+diffX});
242 $('#object-border-right').css({'height':Math.ceil(object.originalState.height*object.scaleY), top: Coords.tr.y+diffY, left: Coords.tr.x+diffX}); 243 $('#object-border-top').css({'width':Math.ceil(object.originalState.width*object.scaleX), top: Coords.tl.y+diffY, left: Coords.tl.x+diffX});
243 $('#object-border-top').css({'width':Math.ceil(object.originalState.width*object.scaleX), top: Coords.tl.y+diffY, left: Coords.tl.x+diffX}); 244 $('#object-border-bottom').css({'width':Math.ceil(object.originalState.width*object.scaleX), top: Coords.bl.y+diffY, left: Coords.bl.x+diffX});
244 $('#object-border-bottom').css({'width':Math.ceil(object.originalState.width*object.scaleX), top: Coords.bl.y+diffY, left: Coords.bl.x+diffX}); 245 $('.object-border').css({
245 $('.object-border').css({ 246 '-ms-transform': 'rotate('+object.getAngle()+'deg)', /* IE 9 */
246 '-ms-transform': 'rotate('+object.getAngle()+'deg)', /* IE 9 */ 247 '-webkit-transform': 'rotate('+object.getAngle()+'deg)', /* Safari */
247 '-webkit-transform': 'rotate('+object.getAngle()+'deg)', /* Safari */ 248 'transform': 'rotate('+object.getAngle()+'deg)' /* Standard syntax */
248 'transform': 'rotate('+object.getAngle()+'deg)' /* Standard syntax */ 249 });
249 }); 250 $('.object-border').show();
250 $('.object-border').show(); 251 }
251 } 252
252 253 function onObjectOut() {
253 function onObjectOut() { 254 delete currentObj;
254 delete currentObj; 255 $scope.designTextValue = '';
255 $scope.designTextValue = ''; 256 }
256 } 257
257 258 function undoCanvas() {
258 function undoCanvas() { 259 if (indexCurr <= 0) {
259 if (indexCurr <= 0) { 260 indexCurr = 0;
260 indexCurr = 0; 261 return;
261 return; 262 }
262 } 263
263 264 if (refreshObj === true) {
264 if (refreshObj === true) { 265 indexCurr--;
265 indexCurr--; 266 refreshObj = false;
266 refreshObj = false; 267 }
267 } 268
268 269 console.log('undo');
269 console.log('undo'); 270
270 271 indexCurr2 = indexCurr - 1;
271 indexCurr2 = indexCurr - 1; 272 currentObj = listObj[indexCurr2];
272 currentObj = listObj[indexCurr2]; 273 if (currentObj){
273 if (currentObj){ 274 currentObj.setOptions(JSON.parse(indexCurr[indexCurr2]));
274 currentObj.setOptions(JSON.parse(indexCurr[indexCurr2])); 275 }
275 } 276
276 277 indexCurr--;
277 indexCurr--; 278 currentObj.setCoords();
278 currentObj.setCoords(); 279 canvas.renderAll();
279 canvas.renderAll(); 280 actionObj = true;
280 actionObj = true; 281 }
281 } 282
282 283 function redoCanvas() {
283 function redoCanvas() { 284 actionObj = true;
284 actionObj = true; 285 if (indexCurr >= stateObj.length - 1) {
285 if (indexCurr >= stateObj.length - 1) { 286 return;
286 return; 287 }
287 } 288
288 289 console.log('redo');
289 console.log('redo'); 290
290 291 indexCurr2 = indexCurr + 1;
291 indexCurr2 = indexCurr + 1; 292 currentObj = listObj[indexCurr2];
292 currentObj = listObj[indexCurr2]; 293 currentObj.setOptions(JSON.parse(indexCurr[indexCurr2]));
293 currentObj.setOptions(JSON.parse(indexCurr[indexCurr2])); 294
294 295 indexCurr++;
295 indexCurr++; 296 currentObj.setCoords();
296 currentObj.setCoords(); 297 canvas.renderAll();
297 canvas.renderAll(); 298 }
298 } 299
299 300 $scope.canvasClearAll = function(){
300 $scope.canvasClearAll = function(){ 301 if (confirm('配置されたすべての文字や画像を消去します')){
301 if (confirm('配置されたすべての文字や画像を消去します')){ 302 canvas.clear();
302 canvas.clear(); 303 }
303 } 304 }
304 } 305
305 306 function onObjectSelected(options) {
306 function onObjectSelected(options) { 307 var currentObj = options.target;
307 var currentObj = options.target; 308
308 309 $scope.typeObject = currentObj.type;
309 $scope.typeObject = currentObj.type; 310 switch ($scope.typeObject) {
310 switch ($scope.typeObject) { 311 case 'i-text' :
311 case 'i-text' : 312 $rootScope.isShowLeftPanel = 'text';
312 $rootScope.isShowLeftPanel = 'text'; 313 var text = currentObj.text;
313 var text = currentObj.text; 314 if(text != '') {
314 if(text != '') { 315 $scope.designText = text;
315 $scope.designText = text; 316 $scope.designTextValue = text;
316 $scope.designTextValue = text; 317 }
317 } 318 break;
318 break; 319
319 320 case 'path-group' :
320 case 'path-group' : 321 $rootScope.isShowLeftPanel = 'illustration';
321 $rootScope.isShowLeftPanel = 'illustration'; 322 break;
322 break; 323
323 324 case 'image':
324 case 'image': 325 $rootScope.isShowLeftPanel = 'image';
325 $rootScope.isShowLeftPanel = 'image'; 326 break;
326 break; 327
327 328 default :
328 default : 329 $rootScope.isShowLeftPanel = 'default';
329 $rootScope.isShowLeftPanel = 'default'; 330 break;
330 break; 331 }
331 } 332 $rootScope.safeApply();
332 $rootScope.safeApply(); 333 }
333 } 334
334 335 // Illustration process
335 // Illustration process 336 $scope.changeIllustrationCategory = function(currentIllustration){
336 $scope.changeIllustrationCategory = function(currentIllustration){ 337 $scope.currentIllustrationCate = $illustration.getList(currentIllustration);
337 $scope.currentIllustrationCate = $illustration.getList(currentIllustration); 338 };
338 }; 339
339 340 $scope.insertSvg = function(item){
340 $scope.insertSvg = function(item){ 341 fabric.loadSVGFromURL(item.path, function(objects, options) {
341 fabric.loadSVGFromURL(item.path, function(objects, options) { 342 var shape = fabric.util.groupSVGElements(objects, options);
342 var shape = fabric.util.groupSVGElements(objects, options); 343 canvas.add(shape.scale(0.6));
343 canvas.add(shape.scale(0.6)); 344 shape.set({ left: 150, top: 100 }).setCoords();
344 shape.set({ left: 150, top: 100 }).setCoords(); 345 canvas.renderAll();
345 canvas.renderAll(); 346 canvas.setActiveObject(shape);
346 canvas.setActiveObject(shape); 347 });
347 }); 348 };
348 }; 349
349 350 // color pattern
350 // color pattern 351 $scope.listColorPatterns = [
351 $scope.listColorPatterns = [ 352 '#000000','#ffff00','#ff6600','#ff0000','#ff6262','#ffa19c','#ff9933','#c45d01','#5d2b03','#ffffcc',
352 '#000000','#ffff00','#ff6600','#ff0000','#ff6262','#ffa19c','#ff9933','#c45d01','#5d2b03','#ffffcc', 353 '#ffff99','#ffd500','#c0db50','#21a52a','#00663f','#abfcab','#36ffaa','#89eaea','#00938c','#005450',
353 '#ffff99','#ffd500','#c0db50','#21a52a','#00663f','#abfcab','#36ffaa','#89eaea','#00938c','#005450', 354 '#0badff','#006cff','#839aff','#0410a0','#ffb2ff','#f93fff','#6600ca','#ff6699','#999999','#666666',
354 '#0badff','#006cff','#839aff','#0410a0','#ffb2ff','#f93fff','#6600ca','#ff6699','#999999','#666666', 355 '#333333'
355 '#333333' 356 ];
356 ]; 357
357 358 $scope.changeColorPattern = function(color){
358 $scope.changeColorPattern = function(color){ 359 var obj = canvas.getActiveObject();
359 var obj = canvas.getActiveObject(); 360 if (!color){
360 if (!color){ 361 color = 'none';
361 color = 'none'; 362 }
362 } 363 if (obj instanceof fabric.PathGroup) {
363 if (obj instanceof fabric.PathGroup) { 364 obj.getObjects().forEach(function(o) {
364 obj.getObjects().forEach(function(o) { 365 o.fill = color;
365 o.fill = color; 366 });
366 }); 367 }
367 } 368 else {
368 else { 369 obj.fill = color;
369 obj.fill = color; 370 }
370 } 371 canvas.renderAll();
371 canvas.renderAll(); 372 };
372 }; 373
373 374 //Font
374 //Font 375 $scope.listFontFamily = [
375 $scope.listFontFamily = [ 376 {
376 { 377 name : 'GN Aki iro Sesami Cookies',
377 name : 'GN Aki iro Sesami Cookies', 378 slug : 'gn_aki_iro_sesami_cookies',
378 slug : 'gn_aki_iro_sesami_cookies', 379 },
379 }, 380 {
380 { 381 name : 'GN-Fuyu-iro_Script_Bold',
381 name : 'GN-Fuyu-iro_Script_Bold', 382 slug : 'gn_fuyu_iro_script_bold'
382 slug : 'gn_fuyu_iro_script_bold' 383 },
383 }, 384 {
384 { 385 name : 'GN Killgothic U Kanana',
385 name : 'GN Killgothic U Kanana', 386 slug : 'gn_killgothic_u_kanana'
386 slug : 'gn_killgothic_u_kanana' 387 },
387 }, 388 {
388 { 389 name : 'GN-Kin-iro_Alphabet_Cookies',
389 name : 'GN-Kin-iro_Alphabet_Cookies', 390 slug : 'gn_kin_iro_alphabet_cookies'
390 slug : 'gn_kin_iro_alphabet_cookies' 391
391 392 },
392 }, 393 {
393 { 394 name : 'GN-Kin-iro_SansSerif',
394 name : 'GN-Kin-iro_SansSerif', 395 slug : 'gn_kin_iro_sansserif'
395 slug : 'gn_kin_iro_sansserif' 396
396 397 },
397 }, 398 {
398 { 399 name : 'GN-Koharuiro_Sunray',
399 name : 'GN-Koharuiro_Sunray', 400 slug : 'gn_koharuiro_sunray'
400 slug : 'gn_koharuiro_sunray' 401
401 402 },
402 }, 403 {
403 { 404 name : 'GN-Kyu-pin',
404 name : 'GN-Kyu-pin', 405 slug : 'gn_kyu_pin'
405 slug : 'gn_kyu_pin' 406 },
406 }, 407 {
407 { 408 name : 'gn_natsu_iro_schedule',
408 name : 'gn_natsu_iro_schedule', 409 slug : 'gn_natsu_iro_schedule'
409 slug : 'gn_natsu_iro_schedule' 410
410 411 },
411 }, 412 {
412 { 413 name : 'gnkana_kiniro_sansserif_l',
413 name : 'gnkana_kiniro_sansserif_l', 414 slug : 'gnkana_kiniro_sansserif_l'
414 slug : 'gnkana_kiniro_sansserif_l' 415
415 416 },
416 }, 417 {
417 { 418 name : 'gnkana_kiniro_sansserif_st',
418 name : 'gnkana_kiniro_sansserif_st', 419 slug : 'gnkana_kiniro_sansserif_st'
419 slug : 'gnkana_kiniro_sansserif_st' 420 },
420 }, 421 {
421 { 422 name : 'gnkana_kon_iro_nightfall',
422 name : 'gnkana_kon_iro_nightfall', 423 slug : 'gnkana_kon_iro_nightfall'
423 slug : 'gnkana_kon_iro_nightfall' 424
424 425 },
425 }, 426 {
426 { 427 name : 'ms_gothic',
427 name : 'ms_gothic', 428 slug : 'ms_gothic'
428 slug : 'ms_gothic' 429
429 430 },
430 }, 431 {
431 { 432 name : 'msmincho',
432 name : 'msmincho', 433 slug : 'msmincho'
433 slug : 'msmincho' 434 },
434 }, 435 {
435 { 436 name : 'ufonts_com_ms_pgothic',
436 name : 'ufonts_com_ms_pgothic', 437 slug : 'ufonts_com_ms_pgothic'
437 slug : 'ufonts_com_ms_pgothic' 438 }
438 } 439 ];
439 ]; 440
440 441 // layer process
441 // layer process 442 $scope.layerProcess = function(mode) {
442 $scope.layerProcess = function(mode) { 443 // console.log('layerProcess');
443 // console.log('layerProcess'); 444 var activeObject = canvas.getActiveObject();
444 var activeObject = canvas.getActiveObject(); 445
445 446 if (activeObject){
446 if (activeObject){ 447 switch (mode) {
447 switch (mode) { 448 case 1:
448 case 1: 449 activeObject.bringForward();
449 activeObject.bringForward(); 450 break;
450 break; 451 case 2:
451 case 2: 452 activeObject.sendBackwards();
452 activeObject.sendBackwards(); 453 break;
453 break; 454 case 3:
454 case 3: 455 activeObject.bringToFront();
455 activeObject.bringToFront(); 456 break;
456 break; 457 case 4:
457 case 4: 458 activeObject.sendToBack();
458 activeObject.sendToBack(); 459 break;
459 break; 460 }
460 } 461 canvas.deactivateAll().renderAll();
461 canvas.deactivateAll().renderAll(); 462 }
462 } 463 };
463 }; 464
464 465 $scope.focusInputText = function(text) {
465 $scope.focusInputText = function(text) { 466 currentObj = canvas.getActiveObject();
466 currentObj = canvas.getActiveObject(); 467 if(typeof currentObj == 'undefined' || currentObj == null) {
467 if(typeof currentObj == 'undefined' || currentObj == null) { 468 $scope.iText = new fabric.IText('', {
468 $scope.iText = new fabric.IText('', { 469 left: 150,
469 left: 150, 470 top: 200,
470 top: 200, 471 fontFamily: typeof $scope.itemFont != 'undefined' ? $scope.listFontFamily[$scope.itemFont].slug : $scope.listFontFamily[0].slug,
471 fontFamily: typeof $scope.itemFont != 'undefined' ? $scope.listFontFamily[$scope.itemFont].slug : $scope.listFontFamily[0].slug, 472 fontWeight: 'normal',
472 fontWeight: 'normal', 473 textAlign: 'center',
473 textAlign: 'center', 474 fontSize: 28,
474 fontSize: 28, 475 fill: 'black',
475 fill: 'black', 476 editable: false
476 editable: false 477 });
477 }); 478 } else {
478 } else { 479 if(currentObj.type != 'i-text') {
479 if(currentObj.type != 'i-text') { 480 $scope.iText = new fabric.IText('', {
480 $scope.iText = new fabric.IText('', { 481 left: 150,
481 left: 150, 482 top: 200,
482 top: 200, 483 fontFamily: typeof $scope.itemFont != 'undefined' ? $scope.listFontFamily[$scope.itemFont].slug : $scope.listFontFamily[0].slug,
483 fontFamily: typeof $scope.itemFont != 'undefined' ? $scope.listFontFamily[$scope.itemFont].slug : $scope.listFontFamily[0].slug, 484 fontWeight: 'normal',
484 fontWeight: 'normal', 485 textAlign: 'center',
485 textAlign: 'center', 486 fontSize: 28,
486 fontSize: 28, 487 fill: 'black',
487 fill: 'black', 488 editable: false
488 editable: false 489 });
489 }); 490 } else{
490 } else{ 491 $scope.iText = currentObj;
491 $scope.iText = currentObj; 492 }
492 } 493 }
493 } 494 };
494 }; 495
495 496 //Design text
496 //Design text 497 $scope.inputText = function(e) {
497 $scope.inputText = function(e) { 498 if(typeof $scope.iText != "undefined") {
498 if(typeof $scope.iText != "undefined") { 499 var iText = $scope.iText;
499 var iText = $scope.iText; 500 iText.text = e;
500 iText.text = e; 501 canvas.add(iText);
501 canvas.add(iText); 502 canvas.renderAll();
502 canvas.renderAll(); 503 canvas.setActiveObject(iText);
503 canvas.setActiveObject(iText); 504 }
504 } 505 };
505 }; 506 $scope.setFontFamily = function(font,index) {
506 $scope.setFontFamily = function(font,index) { 507 $scope.itemFont = index;
507 $scope.itemFont = index; 508 if(canvas.getActiveObject()) {
508 if(canvas.getActiveObject()) { 509 var currentObj = canvas.getActiveObject();
509 var currentObj = canvas.getActiveObject(); 510 if(currentObj.type == 'i-text') {
510 if(currentObj.type == 'i-text') { 511 currentObj.set('fontFamily', font);
511 currentObj.set('fontFamily', font); 512 canvas.renderAll();
512 canvas.renderAll(); 513 canvas.setActiveObject(currentObj);
513 canvas.setActiveObject(currentObj); 514 }
514 } 515
515 516 }
516 } 517 };
517 }; 518 //Set letter spacing text
518 //Set letter spacing text 519 $scope.setLetterSpacingText = function(e) {
519 $scope.setLetterSpacingText = function(e) { 520 if(canvas.getActiveObject()) {
520 if(canvas.getActiveObject()) { 521 var currentObj = canvas.getActiveObject();
521 var currentObj = canvas.getActiveObject(); 522 if(currentObj.type == 'i-text') {
522 if(currentObj.type == 'i-text') { 523 if(e == 'plus')
523 if(e == 'plus') 524 spacingNum = spacingNum + 30;
524 spacingNum = spacingNum + 30; 525 else if (spacingNum >= -30){
525 else if (spacingNum >= -30){ 526 spacingNum = spacingNum - 30;
526 spacingNum = spacingNum - 30; 527 }
527 } 528 if(e == 'default')
528 if(e == 'default') 529 spacingNum = 0;
529 spacingNum = 0; 530
530 531 currentObj.set('charSpacing', spacingNum);
531 currentObj.set('charSpacing', spacingNum); 532 canvas.renderAll();
532 canvas.renderAll(); 533 canvas.setActiveObject(currentObj);
533 canvas.setActiveObject(currentObj); 534 }
534 } 535 }
535 } 536 };
536 }; 537
537 538
538 539 /**** process insert image */
539 /**** process insert image */ 540 if (typeof($window.localStorage.recentImages) != 'undefined'){
540 if (typeof($window.localStorage.recentImages) != 'undefined'){ 541 $scope.recentImages = JSON.parse($window.localStorage.recentImages);
541 $scope.recentImages = JSON.parse($window.localStorage.recentImages); 542 }else{
542 }else{ 543 $scope.recentImages = {};
543 $scope.recentImages = {}; 544 }
544 } 545
545 546 var addToRecentImage = function(name, data){
546 var addToRecentImage = function(name, data){ 547 if (typeof($window.localStorage.recentImages) != 'undefined'){
547 if (typeof($window.localStorage.recentImages) != 'undefined'){ 548 $scope.recentImages = JSON.parse($window.localStorage.recentImages);
548 $scope.recentImages = JSON.parse($window.localStorage.recentImages); 549 }else{
549 }else{ 550 $scope.recentImages = {};
550 $scope.recentImages = {}; 551 }
551 } 552
552 553 if (typeof($scope.recentImages[name]) == 'undefined'){
553 if (typeof($scope.recentImages[name]) == 'undefined'){ 554 var ii=0;
554 var ii=0; 555 var II = 0;
555 var II = 0; 556 for(var item in $scope.recentImages){
556 for(var item in $scope.recentImages){ 557 if (II==0){
557 if (II==0){ 558 II = item;
558 II = item; 559 }
559 } 560 ii++;
560 ii++; 561 }
561 } 562 if (ii>16 && II!=0){
562 if (ii>16 && II!=0){ 563 delete $scope.recentImages[II];
563 delete $scope.recentImages[II]; 564 }
564 } 565 $scope.recentImages[name] = data;
565 $scope.recentImages[name] = data; 566 $window.localStorage.recentImages = JSON.stringify($scope.recentImages);
566 $window.localStorage.recentImages = JSON.stringify($scope.recentImages); 567 }
567 } 568 }
568 } 569 $scope.chooseImage = function(e){//console.log(e);
569 $scope.chooseImage = function(e){//console.log(e); 570 if (e.target.files[0] && e.target.files[0].size > 5*1024*1024){
570 if (e.target.files[0] && e.target.files[0].size > 5*1024*1024){ 571 alert('アップロードできませんでした');
571 alert('アップロードできませんでした'); 572 return;
572 return; 573 }
573 } 574 var reader = new FileReader();
574 var reader = new FileReader(); 575 reader.onload = function (event) {
575 reader.onload = function (event) { 576 addToRecentImage ($('#imgLoader').val(), event.target.result);
576 addToRecentImage ($('#imgLoader').val(), event.target.result); 577 var imgObj = new Image();//console.log($('#imgLoader').val());
577 var imgObj = new Image();//console.log($('#imgLoader').val()); 578 imgObj.src = event.target.result;
578 imgObj.src = event.target.result; 579 imgObj.onload = function () {
579 imgObj.onload = function () { 580 // start fabricJS stuff
580 // start fabricJS stuff 581
581 582 var image = new fabric.Image(imgObj);
582 var image = new fabric.Image(imgObj); 583 image.set({
583 image.set({ 584 left: 50,
584 left: 50, 585 top: 50
585 top: 50 586 });
586 }); 587 //image.scale(getRandomNum(0.1, 0.25)).setCoords();
587 //image.scale(getRandomNum(0.1, 0.25)).setCoords(); 588 image.scaleToWidth(200);
588 image.scaleToWidth(200); 589 canvas.add(image);
589 canvas.add(image); 590 }
590 } 591 }
591 } 592 reader.readAsDataURL(e.target.files[0]);
592 reader.readAsDataURL(e.target.files[0]); 593 }
593 } 594
594 595 $scope.insertRecentImage = function(data){
595 $scope.insertRecentImage = function(data){ 596 var imgObj = new Image();
596 var imgObj = new Image(); 597 imgObj.src = data;
597 imgObj.src = data; 598 imgObj.onload = function () {
598 imgObj.onload = function () { 599 // start fabricJS stuff
599 // start fabricJS stuff 600
600 601 var image = new fabric.Image(imgObj);
601 var image = new fabric.Image(imgObj); 602 image.set({
602 image.set({ 603 left: 50,
603 left: 50, 604 top: 50
604 top: 50 605 });
605 }); 606 image.scaleToWidth(200);
606 image.scaleToWidth(200); 607 canvas.add(image);
607 canvas.add(image); 608 }
608 } 609 }
609 } 610
610 611 //Traslation text
611 //Traslation text 612 $scope.rotateText = function(style) {
612 $scope.rotateText = function(style) { 613 if(canvas.getActiveObject()) {
613 if(canvas.getActiveObject()) { 614 var currentObj = canvas.getActiveObject();
614 var currentObj = canvas.getActiveObject(); 615 if(currentObj.type == 'i-text') {
615 if(currentObj.type == 'i-text') { 616 currentObj.set('rotate', Math.PI / 4);
616 currentObj.set('rotate', Math.PI / 4); 617 canvas.renderAll();
617 canvas.renderAll(); 618 canvas.setActiveObject(currentObj);
618 canvas.setActiveObject(currentObj); 619 }
619 } 620 }
620 } 621 };
621 }; 622
622 623
623 624 /* Process output */
624 /* Process output */ 625 $scope.outputDesign = function(){
625 $scope.outputDesign = function(){ 626 $rootScope.outputImage = canvas.toDataURL('png');
626 $rootScope.outputImage = canvas.toDataURL('png'); 627 // console.log();
627 // console.log(); 628 $('#tshirt-design').modal('hide');
628 $('#tshirt-design').modal('hide'); 629 }
629 } 630
630 631 $scope.showRecommend = function(){
631 $scope.showRecommend = function(){ 632 $scope.recommendList = $favorite.getAll();
632 $scope.recommendList = $favorite.getAll(); 633 $scope.favoriteList = $favorite.getAll();
633 $scope.favoriteList = $favorite.getAll(); 634 $('#tshirt-design-saved').modal({
634 $('#tshirt-design-saved').modal({ 635 backdrop: 'static',
635 backdrop: 'static', 636 keyboard: false
636 keyboard: false 637 });
637 }); 638 $timeout(function(){
638 $timeout(function(){ 639 $('.saved-item').tooltip({
639 $('.saved-item').tooltip({ 640 animated: 'fade',
640 animated: 'fade', 641 placement: 'bottom',
641 placement: 'bottom', 642 html: true
642 html: true 643 });
643 }); 644 },1000);
644 },1000); 645 }
645 } 646
646 647 $scope.closeSavedModal = function(){
647 $scope.closeSavedModal = function(){ 648 $('#tshirt-design-saved').modal('hide');
648 $('#tshirt-design-saved').modal('hide'); 649 }
649 } 650
650 651 $scope.openSavedTab = function(tab){
651 $scope.openSavedTab = function(tab){ 652 $('#tshirt-design-saved .subframe-design .nav-tabs li').removeClass('active');
652 $('#tshirt-design-saved .subframe-design .nav-tabs li').removeClass('active'); 653 $('#tab-saved-'+tab).addClass('active');
653 $('#tab-saved-'+tab).addClass('active'); 654 $('#tshirt-design-saved .subframe-design .tab-content .tab-pane').removeClass('active');
654 $('#tshirt-design-saved .subframe-design .tab-content .tab-pane').removeClass('active'); 655 $('#content-saved-'+tab).addClass('active');
655 $('#content-saved-'+tab).addClass('active'); 656
656 657 $timeout(function(){
657 $timeout(function(){ 658 $('.saved-item img').tooltip({
658 $('.saved-item img').tooltip({ 659 animated: 'fade',
659 animated: 'fade', 660 placement: 'bottom',
660 placement: 'bottom', 661 html: true
661 html: true 662 });
662 }); 663 },500);
663 },500); 664 }
664 } 665
665 666 $favorite.loadFromRemote();
666 $favorite.loadFromRemote(); 667 $scope.saveFavorite = function(){
668 if (!confirm('Do you want to put current design to your favorite?')){
669 return;
670 }
667 $scope.saveFavorite = function(){ 671 var dataDump = {
668 if (!confirm('Do you want to put current design to your favorite?')){ 672 thumb: canvas.toDataURL('png'),
669 return; 673 data: JSON.stringify(canvas)
670 } 674 }
671 var dataDump = { 675 $favorite.addToFavorite({
672 thumb: canvas.toDataURL('png'), 676 data: dataDump
673 data: JSON.stringify(canvas) 677 })
674 } 678 // console.log(JSON.stringify(dataDump));
675 $favorite.addToFavorite({ 679 alert('saved');
676 data: dataDump 680 }
677 }) 681
678 // console.log(JSON.stringify(dataDump)); 682 $scope.restoreSaved = function(item){
683 if (!confirm('this may be clear all current design frame, are you sure ?')){
684 return;
685 }
679 alert('saved'); 686 $('#tshirt-design-saved').modal('hide');
680 } 687 canvas.loadFromJSON(item.data,canvas.renderAll.bind(canvas));
681 688 }
689
690 $scope.deleteFavorite = function(idx){
691 if (confirm('are you sure?')){
692 $favorite.removeFromFavorite({
693 idx: idx
694 });
695 $scope.recommendList = $favorite.getAll();
696 $scope.favoriteList = $favorite.getAll();
697 }
698 }
682 $scope.restoreSaved = function(item){ 699 });
683 if (!confirm('this may be clear all current design frame, are you sure ?')){ 700 });
684 return; 701
app/scripts/services/favorite.js
Diff comments   View file @ b380096
1 define(['app'], function (app) { 1 define(['app'], function (app) {
2 'use strict'; 2 'use strict';
3 3
4 app.factory('$favorite', function ($http, $rootScope, $window) { 4 app.factory('$favorite', function ($http, $rootScope, $window) {
5 var DATA = []; 5 var DATA = [];
6 6
7 return { 7 return {
8 loadFromRemote: function (params,successHandle,errorHandle) { 8 loadFromRemote: function (params,successHandle,errorHandle) {
9 /*** load from localstorage for test */ 9 /*** load from localstorage for test */
10 if ($window.localStorage.listFavorite){ 10 if ($window.localStorage.listFavorite){
11 DATA = JSON.parse($window.localStorage.listFavorite); 11 DATA = JSON.parse($window.localStorage.listFavorite);
12 }else{ 12 }else{
13 DATA = []; 13 DATA = [];
14 } 14 }
15 return; 15 return;
16 /*** end test */ 16 /*** end test */
17 17
18 // return format: { status:0|1 , data:{} } 18 // return format: { status:0|1 , data:{} }
19 var httpObj = $http({ 19 var httpObj = $http({
20 url: $rootScope.API_URL+'/apiv1/favorite', 20 url: $rootScope.API_URL+'/apiv1/favorite',
21 method: 'GET', 21 method: 'GET',
22 params: params || [] 22 params: params || []
23 }); 23 });
24 if (typeof successHandle == 'undefined'){ 24 if (typeof successHandle == 'undefined'){
25 successHandle = function(response){ 25 successHandle = function(response){
26 if (response.status==1){ 26 if (response.status==1){
27 DATA = response.data; 27 DATA = response.data;
28 } 28 }
29 } 29 }
30 } 30 }
31 httpObj.success(successHandle); 31 httpObj.success(successHandle);
32 32
33 if (typeof errorHandle != 'undefined'){ 33 if (typeof errorHandle != 'undefined'){
34 httpObj.error(errorHandle); 34 httpObj.error(errorHandle);
35 } 35 }
36 }, 36 },
37 addToFavorite: function(params,successHandle,errorHandle) { 37 addToFavorite: function(params,successHandle,errorHandle) {
38 /*** load from localstorage for test */ 38 /*** load from localstorage for test */
39 DATA.push(params.data); 39 DATA.push(params.data);
40 $window.localStorage.listFavorite = JSON.stringify(DATA); 40 $window.localStorage.listFavorite = JSON.stringify(DATA);
41 return; 41 return;
42 /*** end test */ 42 /*** end test */
43 43
44 var httpObj = $http({ 44 var httpObj = $http({
45 url: $rootScope.API_URL+'/apiv1/favorite', 45 url: $rootScope.API_URL+'/apiv1/favorite',
46 method: 'POST', 46 method: 'POST',
47 params: params || [] 47 params: params || []
48 }); 48 });
49 if (typeof successHandle == 'undefined'){ 49 if (typeof successHandle == 'undefined'){
50 successHandle = function(response){ 50 successHandle = function(response){
51 if (response.status==1){ 51 if (response.status==1){
52 DATA = response.data; 52 DATA = response.data;
53 } 53 }
54 } 54 }
55 } 55 }
56 httpObj.success(successHandle); 56 httpObj.success(successHandle);
57 57
58 if (typeof errorHandle != 'undefined'){ 58 if (typeof errorHandle != 'undefined'){
59 httpObj.error(errorHandle); 59 httpObj.error(errorHandle);
60 } 60 }
61 }, 61 },
62 removeFromFavorite: function(params,successHandle,errorHandle) {
63 /*** load from localstorage for test */
64 DATA.splice(params.idx,1);
65 $window.localStorage.listFavorite = JSON.stringify(DATA);
66 return;
67 /*** end test */
68
69 var httpObj = $http({
70 url: $rootScope.API_URL+'/apiv1/favorite',
71 method: 'POST',
72 params: params || []
73 });
74 if (typeof successHandle == 'undefined'){
75 successHandle = function(response){
76 if (response.status==1){
77 DATA = response.data;
78 }
79 }
80 }
81 httpObj.success(successHandle);
82
83 if (typeof errorHandle != 'undefined'){
84 httpObj.error(errorHandle);
85 }
86 },
62 removeFromFavorite: function(params,successHandle,errorHandle) { 87 getAll: function(){
63 /*** load from localstorage for test */ 88 return DATA;
64 DATA.splice(params.idx,1); 89 }
65 $window.localStorage.listFavorite = JSON.stringify(DATA); 90 };
66 return; 91 });
67 /*** end test */ 92 });
68 93
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 .illustration-list .footer-bar, .saved-list .footer-bar { 616 .illustration-list .footer-bar, .saved-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 .footer-bar .footer-pagination { 624 .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 .footer-bar .footer-pagination:hover { 634 .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 818
819 819
820 820
821 #tshirt-design-saved .subframe-design { 821 #tshirt-design-saved .subframe-design {
822 width: 80%; 822 width: 80%;
823 margin: auto; 823 margin: auto;
824 margin-top: 100px; 824 margin-top: 100px;
825 border: 10px solid rgb(0, 0, 0); 825 border: 10px solid rgb(0, 0, 0);
826 border: 20px solid rgba(0, 0, 0, .5); 826 border: 20px solid rgba(0, 0, 0, .5);
827 -webkit-background-clip: padding-box; /* for Safari */ 827 -webkit-background-clip: padding-box; /* for Safari */
828 background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */ 828 background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
829 background: #FFF; 829 background: #FFF;
830 } 830 }
831 831
832 #tshirt-design-saved .modal-content button.close { 832 #tshirt-design-saved .modal-content button.close {
833 margin-right: 103px; 833 margin-right: 103px;
834 font-size: 41px; 834 font-size: 41px;
835 margin-top: -8px; 835 margin-top: -8px;
836 } 836 }
837 837
838 #tshirt-design-saved .subframe-design .nav-tabs { 838 #tshirt-design-saved .subframe-design .nav-tabs {
839 background: rgba(0, 0, 0, .5); 839 background: rgba(0, 0, 0, .5);
840 border-bottom: 1px solid #F5F5F5; 840 border-bottom: 1px solid #F5F5F5;
841 } 841 }
842 842
843 #tshirt-design-saved .subframe-design .nav-tabs li a { 843 #tshirt-design-saved .subframe-design .nav-tabs li a {
844 text-decoration: none; 844 text-decoration: none;
845 background-color: #CCC; 845 background-color: #CCC;
846 cursor: pointer; 846 cursor: pointer;
847 margin-right: 10px; 847 margin-right: 10px;
848 padding: 2px 30px; 848 padding: 2px 30px;
849 color: #000; 849 color: #000;
850 font-weight: 600; 850 font-weight: 600;
851 border-bottom: 1px solid #F5F5F5 851 border-bottom: 1px solid #F5F5F5
852 } 852 }
853 853
854 #tshirt-design-saved .subframe-design .nav-tabs li.active a { 854 #tshirt-design-saved .subframe-design .nav-tabs li.active a {
855 background: #F5F5F5; 855 background: #F5F5F5;
856 color: #fe070f; 856 color: #fe070f;
857 } 857 }
858 858
859 #tshirt-design-saved .subframe-design .tab-content { 859 #tshirt-design-saved .subframe-design .tab-content {
860 background: #F5F5F5; 860 background: #F5F5F5;
861 width: 100%; 861 width: 100%;
862 min-height: 400px; 862 min-height: 400px;
863 } 863 }
864 864
865 #tshirt-design-saved .saved-list { 865 #tshirt-design-saved .saved-list {
866 width: 100%; 866 width: 100%;
867 border: #bbb solid 1px; 867 border: #bbb solid 1px;
868 background: #FFF; 868 background: #FFF;
869 margin-top: 0px; 869 margin-top: 0px;
870 min-height: 400px; 870 min-height: 400px;
871 padding: 10px; 871 padding: 10px;
872 } 872 }
873 873
874 #tshirt-design-saved .saved-list .saved-item{ 874 #tshirt-design-saved .saved-list .saved-item{
875 width: 100px;
875 width: 100px; 876 height: 100px;
876 height: 100px; 877 overflow: hidden;
877 overflow: hidden; 878 float: left;
878 float: left; 879 margin-left: 6px;
879 margin-left: 6px; 880 margin-top: 5px;
880 margin-top: 5px; 881 margin-bottom: 5px;
881 margin-bottom: 5px; 882 padding: 2px;
882 padding: 2px; 883 background: #e2e2e2;
883 background: #e2e2e2; 884 border: solid 2px #d7d7d7;
884 border: solid 2px #d7d7d7; 885 cursor: pointer;
885 cursor: pointer; 886 }
886 } 887
887 888 #tshirt-design-saved .saved-list .saved-item:hover {
888 #tshirt-design-saved .saved-list .saved-item:hover { 889 outline: 2px solid #ed1d24;
889 outline: 2px solid #ed1d24; 890 }
890 } 891
891 892 #tshirt-design-saved .saved-list .saved-item img {
892 #tshirt-design-saved .saved-list .saved-item img { 893 width: 100px;
893 width: 100px; 894 cursor: pointer;
894 cursor: pointer; 895 }
896 #tshirt-design-saved .saved-list .saved-item button {
897 background: #ff0f00;
898 color: #FFF;
899 border: 0;
900 position: absolute;
901 margin-left: -5px;
902 margin-top: -5px;
903 padding: 0 5px;
904 }
905 #tshirt-design-saved .saved-list .saved-item button:hover {
906 background: #ffcccc;
907 }
895 } 908
896 #tshirt-design-saved .saved-list .saved-item button { 909 #tshirt-design-saved .saved-list .footer-bar {
897 background: #ff0f00; 910 bottom: 20px;
911 width: 75%;
898 color: #FFF; 912 }
app/views/design_part/illustration.html
Diff comments   View file @ b380096
1 <li> 1 <li>
2 <div class="title"> 2 <div class="title">
3 <!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>--> 3 <!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->
4 イラスト・イメージ選択 4 イラスト・イメージ選択
5 </div> 5 </div>
6 <div class="content clearfix"> 6 <div class="content clearfix">
7 <select id="illustration-select-category" ui-select2="illustrationSelectConfig" ng-model="currentIllustration" ng-change="changeIllustrationCategory(currentIllustration);currentIllustrationPage=1;" data-placeholder="Choose category" style="width: 100%"> 7 <select id="illustration-select-category" ui-select2="illustrationSelectConfig" ng-model="currentIllustration" ng-change="changeIllustrationCategory(currentIllustration);currentIllustrationPage=1;" data-placeholder="Choose category" style="width: 100%">
8 <option ng-repeat="(key,cate) in IllustrationList" value="{{key}}">{{cate.name}}</option> 8 <option ng-repeat="(key,cate) in IllustrationList" value="{{key}}">{{cate.name}}</option>
9 </select> 9 </select>
10 <div class="illustration-list" ng-init="currentIllustrationPage=1;perIllustrationPage=16"> 10 <div class="illustration-list" ng-init="currentIllustrationPage=1;perIllustrationPage=16">
11 <div class="illstration-item" ng-repeat="item in currentIllustrationCate.list | limitTo:perIllustrationPage:((currentIllustrationPage-1)*perIllustrationPage)" ng-click="insertSvg(item)" title="<img src='{{item.path}}' style='width:200px;background:#e2e2e2;margin:0;padding:0;margin-left:-8px;border:0'/>" data-toggle="tooltip"> 11 <div class="illstration-item" ng-repeat="item in currentIllustrationCate.list | limitTo:perIllustrationPage:((currentIllustrationPage-1)*perIllustrationPage)" ng-click="insertSvg(item)" title="<img src='{{item.path}}' style='width:200px;background:#e2e2e2;margin:0;padding:0;margin-left:-8px;border:0'/>" data-toggle="tooltip">
12 <img ng-src="{{item.path}}"/> 12 <img ng-src="{{item.path}}"/>
13 </div> 13 </div>
14 <div class="clearfix"></div> 14 <div class="clearfix"></div>
15 <div class="footer-bar"> 15 <div class="footer-bar">
16 <div class="pull-left footer-pagination" ng-click="currentIllustrationPage=currentIllustrationPage-1" ng-show="currentIllustrationPage > 1">< Back</div> 16 <div class="pull-left footer-pagination" ng-click="currentIllustrationPage=currentIllustrationPage-1" ng-show="currentIllustrationPage > 1">< Back</div>
17 {{currentIllustrationPage}}/{{Math.ceil(currentIllustrationCate.list.length/perIllustrationPage)}} 17 {{currentIllustrationPage}}/{{Math.ceil(currentIllustrationCate.list.length/perIllustrationPage)}}
18 <div class="pull-right footer-pagination" ng-click="currentIllustrationPage=currentIllustrationPage+1" ng-show="currentIllustrationPage < Math.ceil(currentIllustrationCate.list.length/perIllustrationPage)">Next ></div> 18 <div class="pull-right footer-pagination" ng-click="currentIllustrationPage=currentIllustrationPage+1" ng-show="currentIllustrationPage < Math.ceil(currentIllustrationCate.list.length/perIllustrationPage)">Next ></div>
19 </div> 19 </div>
20 </div> 20 </div>
21 </div> 21 </div>
22 </li> 22 </li>
23 <li> 23 <li>
24 <div class="title"> 24 <div class="title">
25 <!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>--> 25 <!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->
26 カラー変更 26 カラー変更
27 <div class="pull-right reset-color-patterns" ng-click="changeColorPattern()"> 27 <div class="pull-right reset-color-patterns" ng-click="changeColorPattern()">
28 元の色に戻す 28 元の色に戻す
29 <img src="images/no-color.png"/> 29 <img src="images/no-color.png"/>
30 </div> 30 </div>
31 </div> 31 </div>
32 <div class="content clearfix"> 32 <div class="content clearfix">
33 <div class="color-patterns"> 33 <div class="color-patterns">
34 <div class="color-pattern-item" ng-repeat="color in listColorPatterns track by $index" ng-click="changeColorPattern(color)" ng-style="{'background-color': color}"> 34 <div class="color-pattern-item" ng-repeat="color in listColorPatterns track by $index" ng-click="changeColorPattern(color)" ng-style="{'background-color': color}">
35 </div> 35 </div>
36 <div class="clearfix"></div> 36 <div class="clearfix"></div>
37 </div> 37 </div>
38 </div> 38 </div>
39 </li> 39 </li>
40 <li> 40 <li>
41 <div class="title"> 41 <div class="title">
42 <!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>--> 42 <!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->
43 重ね順変更 43 重ね順変更
44 </div> 44 </div>
45 <div class="content clearfix"> 45 <div class="content clearfix">
46 <div class="col-xs-3 layer-item" ng-click="layerProcess(1)"> 46 <div class="col-xs-3 layer-item" ng-click="layerProcess(1)">
47 <img src="images/layer-icon-1.png"/> 47 <img src="images/layer-icon-1.png"/>
48 <div>前面へ</div> 48 <div>前面へ</div>
49 </div> 49 </div>
50 <div class="col-xs-3 layer-item" ng-click="layerProcess(2)"> 50 <div class="col-xs-3 layer-item" ng-click="layerProcess(2)">
51 <img src="images/layer-icon-2.png"/> 51 <img src="images/layer-icon-2.png"/>
52 <div>背面へ</div> 52 <div>背面へ</div>
53 </div> 53 </div>
54 <div class="col-xs-3 layer-item" ng-click="layerProcess(3)"> 54 <div class="col-xs-3 layer-item" ng-click="layerProcess(3)">
55 <img src="images/layer-icon-3.png"/> 55 <img src="images/layer-icon-3.png"/>
56 <div>最前面へ</div> 56 <div>最前面へ</div>
57 </div> 57 </div>
58 <div class="col-xs-3 layer-item" ng-click="layerProcess(4)"> 58 <div class="col-xs-3 layer-item" ng-click="layerProcess(4)">
59 <img src="images/layer-icon-4.png"/> 59 <img src="images/layer-icon-4.png"/>
60 <div>最前面へ</div> 60 <div>最前面へ</div>
61 </div> 61 </div>
62 </div> 62 </div>
63 </li> 63 </li>
app/views/design_part/tshirt-saved.html
Diff comments   View file @ b380096
1 <!-- Modal --> 1 <!-- Modal -->
2 <div class="modal" id="tshirt-design-saved" tabindex="2" role="dialog"> 2 <div class="modal" id="tshirt-design-saved" tabindex="2" role="dialog">
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 <button type="button" class="close" ng-click="closeSavedModal()" aria-label="Close"><span aria-hidden="true">&times;</span></button> 5 <button type="button" class="close" ng-click="closeSavedModal()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
6 <div class="subframe-design"> 6 <div class="subframe-design">
7 <ul class="nav nav-tabs" role="tablist"> 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> 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> 9 <li role="presentation" id="tab-saved-recommend"><a ng-click="openSavedTab('recommend')" role="tab" data-toggle="tab">おすすめ</a></li>
10 </ul> 10 </ul>
11 <div class="tab-content"> 11 <div class="tab-content">
12 <div role="tabpanel" class="tab-pane active" id="content-saved-favorite"> 12 <div role="tabpanel" class="tab-pane active" id="content-saved-favorite">
13 <div class="saved-list" ng-init="currentFavoritePage=1;perFavoritePage=18"> 13 <div class="saved-list" ng-init="currentFavoritePage=1;perFavoritePage=18">
14 <div class="saved-item" ng-repeat="item in (favoriteList | limitTo:perFavoritePage:((currentFavoritePage-1)*perFavoritePage)) track by $index"> 14 <div class="saved-item" ng-repeat="item in (favoriteList | limitTo:perFavoritePage:((currentFavoritePage-1)*perFavoritePage)) track by $index">
15 <button ng-click="deleteFavorite($index)">X</button> 15 <button ng-click="deleteFavorite($index)">X</button>
16 <img ng-click="restoreSaved(item)" ng-src="{{item.thumb}}" title="<img src='{{item.thumb}}' style='width:200px;background:#e2e2e2;margin:0;padding:0;margin-left:-8px;border:0'/>" data-toggle="tooltip"/>
16 <img ng-click="restoreSaved(item)" ng-src="{{item.thumb}}" title="<img src='{{item.thumb}}' style='width:200px;background:#e2e2e2;margin:0;padding:0;margin-left:-8px;border:0'/>" data-toggle="tooltip"/> 17 </div>
17 </div> 18 <div class="clearfix"></div>
18 <div class="clearfix"></div> 19 <div class="footer-bar">
19 <div class="footer-bar"> 20 <div class="pull-left footer-pagination" ng-click="currentFavoritePage=currentFavoritePage-1" ng-show="currentFavoritePage > 1">< Back</div>
20 <div class="pull-left footer-pagination" ng-click="currentFavoritePage=currentFavoritePage-1" ng-show="currentFavoritePage > 1">< Back</div> 21 {{currentFavoritePage}}/{{Math.ceil(favoriteList.length/perFavoritePage)}}
21 {{currentFavoritePage}}/{{Math.ceil(favoriteList.length/perFavoritePage)}} 22 <div class="pull-right footer-pagination" ng-click="currentFavoritePage=currentFavoritePage+1" ng-show="currentFavoritePage < Math.ceil(favoriteList.length/perFavoritePage)">Next ></div>
22 <div class="pull-right footer-pagination" ng-click="currentFavoritePage=currentFavoritePage+1" ng-show="currentFavoritePage < Math.ceil(favoriteList.length/perFavoritePage)">Next ></div> 23 </div>
23 </div> 24 </div>
24 </div> 25 </div>
25 </div> 26 <div role="tabpanel" class="tab-pane" id="content-saved-recommend">
26 <div role="tabpanel" class="tab-pane" id="content-saved-recommend"> 27 <div class="saved-list" ng-init="currentRecommendPage=1;perRecommendPage=18">
27 <div class="saved-list" ng-init="currentRecommendPage=1;perRecommendPage=18"> 28 <div class="saved-item" ng-repeat="item in (recommendList | limitTo:perRecommendPage:((currentRecommendPage-1)*perRecommendPage)) track by $index" 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">
28 <div class="saved-item" ng-repeat="item in (recommendList | limitTo:perRecommendPage:((currentRecommendPage-1)*perRecommendPage)) track by $index" 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"> 29 <img ng-src="{{item.thumb}}"/>
29 <img ng-src="{{item.thumb}}"/> 30 </div>
30 </div> 31 <div class="clearfix"></div>
31 <div class="clearfix"></div> 32 <div class="footer-bar">
32 <div class="footer-bar"> 33 <div class="pull-left footer-pagination" ng-click="currentRecommendPage=currentRecommendPage-1" ng-show="currentRecommendPage > 1">< Back</div>
33 <div class="pull-left footer-pagination" ng-click="currentRecommendPage=currentRecommendPage-1" ng-show="currentRecommendPage > 1">< Back</div> 34 {{currentRecommendPage}}/{{Math.ceil(recommendList.length/perRecommendPage)}}
34 {{currentRecommendPage}}/{{Math.ceil(recommendList.length/perRecommendPage)}} 35 <div class="pull-right footer-pagination" ng-click="currentRecommendPage=currentRecommendPage+1" ng-show="currentRecommendPage < Math.ceil(recommendList.length/perRecommendPage)">Next ></div>
35 <div class="pull-right footer-pagination" ng-click="currentRecommendPage=currentRecommendPage+1" ng-show="currentRecommendPage < Math.ceil(recommendList.length/perRecommendPage)">Next ></div> 36 </div>
36 </div> 37 </div>
37 </div> 38 </div>
38 </div> 39 </div>
39 </div> 40 </div>
40 </div> 41 </div>
41 </div> 42 </div>
42 </div> 43 </div>