TRUONG / T-Shats Frontend

Browse Code »

Commit 2f4c317491d77c8ee85a615ec780b3609f8565fa

Authored by DANG 2016-11-24 01:35:14 +0900

1 parent e6d8ee863d

Exists in master and in 1 other branch

Fix text design and reposive

Showing 8 changed files with 189 additions and 103 deletions Inline Diff

app/bower_components/fabric-customise-controls/.bower.json
app/images/control-icon/trash.png
app/scripts/controllers/about.js
app/scripts/controllers/main.js
app/scripts/controllers/tshirtdesign.js
app/styles/main.css
app/views/design_part/text.html
app/views/tshirt-design.html

app/bower_components/fabric-customise-controls/.bower.json

Diff comments View file @ 2f4c317

 {
   "name": "fabric-customise-controls",
   "version": "0.1.8",
   "main": "dist/customiseControls.js",
   "ignore": [
     "source",
     "spec",
     ".bowerrc",
     ".gitignore",
     ".jscsrc",
     "bower.json",
     "gruntfile.js",
     "package.json",
     "README.md"
   ],
   "authors": [
     "Simon Kunz"
   ],
   "license": "MIT",
   "dependencies": {
     "fabric": "~1.6.6"
   },
   "homepage": "https://github.com/pixolith/fabricjs-customise-controls-extension",
   "_release": "0.1.8",
   "_resolution": {
     "type": "version",
     "tag": "0.1.8",
     "commit": "5586eb55027446026f22e086dc4bca8f5fa35f7f"
   },
   "_source": "https://github.com/pixolith/fabricjs-customise-controls-extension.git",
   "_target": "^0.1.8",
-  "_originalSource": "fabric-customise-controls"
+  "_originalSource": "fabric-customise-controls",
+  "_direct": true
 }

app/images/control-icon/trash.png

Diff comments View file @ 2f4c317

3.45 KB

app/scripts/controllers/about.js

Diff comments View file @ 2f4c317

1	define(['app'], function (app) {	1	define(['app'], function (app) {
2	'use strict';	2	'use strict';
3
4	app.controller('AboutCtrl', function ($scope) {	3	app.controller('AboutCtrl', function ($scope) {
5	$scope.awesomeThings = [	4	$scope.awesomeThings = [
6	'HTML5 Boilerplate',	5	'HTML5 Boilerplate',
7	'AngularJS',	6	'AngularJS',
8	'Karma'	7	'Karma'
9	];	8	];
10	});	9	});
11	});	10	});
12		11

app/scripts/controllers/main.js

Diff comments View file @ 2f4c317

 define(['app'], function (app) {
 	'use strict';
 	app.controller('MainCtrl', function ($rootScope, $scope, $timeout, $illustration, $t_shirt) {
+		// console.log($('nav').width());
 		$rootScope.API_URL = 'http://domain.com';
 		$scope.designFrameView = 'views/tshirt-design.html?ver='+VERSION;
 		$scope.designPartIllustration = 'views/design_part/illustration.html?ver='+VERSION;
 		$scope.designPartImage = 'views/design_part/image.html?ver='+VERSION;
 		$scope.designPartText = 'views/design_part/text.html?ver='+VERSION;
 		$scope.designPartDefault = 'views/design_part/default.html?ver='+VERSION;
 		//Action T-Shirt choice color and Back or Front
 		$scope.tShirtColor = $t_shirt.getTShirtColor(0);
 		//Set color name default
 		var tShirtColorFirstKey = 0;
 		$scope.tShirtChoiceBackFrontKey = 'front';
 		$scope.tShirtColorKey = tShirtColorFirstKey;
 		$rootScope.tShirtColorCode = $scope.tShirtColor[tShirtColorFirstKey].code;
 		$scope.tShirtColorName = $scope.tShirtColor[tShirtColorFirstKey].name;
 		$scope.tShirtImgFront = $scope.tShirtColor[tShirtColorFirstKey].img.front;
 		$scope.tShirtImgBack = $scope.tShirtColor[tShirtColorFirstKey].img.back;
 		$scope.tShirtImg = $scope.tShirtImgFront;
+		//review design set position
+		var _widthPreviewDesign = $('#preview-design').width();
+		var _widthTShirtImage = $('.tshirt-image').width();
+		console.log(_widthTShirtImage);
+		console.log(_widthPreviewDesign);
+		// $('#preview-design').css({width: _widthTShirtImage/2 - 60});
+		var leftReviewDesign = _widthTShirtImage/2 - (_widthPreviewDesign/2 - 10);
+		$('#preview-design').css({left: leftReviewDesign});
 		$scope.choiceTShirtColor = function(key) {
 			$scope.tShirtColorKey = key;
 			$rootScope.tShirtColorCode = $scope.tShirtColor[key].code;
 			$scope.tShirtColorName = $scope.tShirtColor[key].name;
 			$scope.tShirtImgFront = $scope.tShirtColor[key].img.front;
 			$scope.tShirtImgBack = $scope.tShirtColor[key].img.back;
 			if($scope.tShirtChoiceBackFrontKey == 'front') {
 				$scope.tShirtImg = $scope.tShirtImgFront;
 			} else {
 				$scope.tShirtImg = $scope.tShirtImgBack;
 			}
 		};
 		$scope.choiceTShirtBackFront = function(choice) {
 			if(choice == 'front') {
 				$scope.tShirtImg = $scope.tShirtImgFront;
 			} else {
 				$scope.tShirtImg = $scope.tShirtImgBack;
 			}
 			$scope.tShirtChoiceBackFrontKey = choice;
 		};
-		$scope.showDesignTab = function(tab){
-			$rootScope.isShowLeftPanel = tab;
-			switch (tab) {
-				case 'illustration': {
-					$scope.IllustrationList = $illustration.getAll();
-					$rootScope.outputImage = false;
-					$scope.illustrationSelectConfig = {
-						allowClear:true
-					};
-					$timeout(function(){
-						$('.illstration-item').tooltip({
-							animated: 'fade',
-						    placement: 'bottom',
-						    html: true
-						});
-						// console.log('here');
-					},1000);
-					break;
-				}
-				case 'text': {
-					break;
-				}
-			}
-		};
 		//safeApply
 		$rootScope.safeApply = function(fn) {
 			var phase = this.$root.$$phase;
 			if(phase == '$apply' || phase == '$digest') {
 				if(fn && (typeof(fn) === 'function')) {
 					fn();
 				}
 			} else {
 				this.$apply(fn);
 			}
 		};
 		$scope.modalTShirtDesign = function() {
 			$('#tshirt-design').modal(
 				{
 					backdrop: 'static',
 					keyboard: false
 				}
 			);

app/scripts/controllers/tshirtdesign.js

Diff comments View file @ 2f4c317

1	define(['app'], function (app) {	1	define(['app'], function (app) {
2	//'use strict';	2	//'use strict';
		3	app.controller('TshirtdesignCtrl', function ($scope, $rootScope, $window, $timeout, $illustration) {
3		4
4	app.controller('TshirtdesignCtrl', function ($scope, $rootScope, $window, $illustration) {
5	var canvas = new fabric.Canvas('main-design-container');	5	var canvas = new fabric.Canvas('main-design-container');
		6	//Set width and height canvas
		7	var _modalWidth = $('.modal-dialog').width();
		8	var _windowWidth = window.innerWidth;
		9	if(_windowWidth > 762) {
		10	var _contentCanvasWidth = _modalWidth*8/12 - 100;
		11	} else {
		12	var _contentCanvasWidth = _windowWidth-70;
		13	}
		14
		15
		16	canvas.setWidth(_contentCanvasWidth);
		17	canvas.setHeight(650);
		18
		19	//Custom control
6	fabric.Object.prototype.transparentCorners = false;	20	fabric.Object.prototype.transparentCorners = false;
7	fabric.Object.prototype.hasRotatingPoint = false;	21	fabric.Object.prototype.hasRotatingPoint = false;
8	var ctrVisible = {tl: false, ml:false, bl:false, mb: false, br: true, mr: false, tr: true, mt: true, mtr: false};	22	var ctrVisible = {tl: false, ml:false, bl:false, mb: false, br: true, mr: false, tr: true, mt: true, mtr: false};
9	for(key in ctrVisible) {	23	for(key in ctrVisible) {
10	fabric.Object.prototype.setControlVisible(key,ctrVisible[key]);	24	fabric.Object.prototype.setControlVisible(key,ctrVisible[key]);
11	}	25	}
12	fabric.Object.prototype.customiseCornerIcons({	26	fabric.Object.prototype.customiseCornerIcons({
13	settings: {	27	settings: {
14	borderColor: '#0000ff',	28	borderColor: '#0000ff',
15	cornerSize: 25,	29	cornerSize: 25,
16	cornerShape: 'circle',	30	cornerShape: 'circle',
17	cornerBackgroundColor: '#0171b4',	31	cornerBackgroundColor: '#0171b4',
18	cornerPadding: 6	32	cornerPadding: 6
19	},	33	},
20	mt: {	34	mt: {
21	icon: 'images/control-icon/ok.png'	35	icon: 'images/control-icon/trash.png'
22	},	36	},
23	br: {	37	br: {
24	icon: 'images/control-icon/resize.png'	38	icon: 'images/control-icon/resize.png'
25	},	39	},
26	tr: {	40	tr: {
27	icon: 'images/control-icon/rotate.png'	41	icon: 'images/control-icon/rotate.png'
28	}	42	}
29	});	43	});
30		44
31	fabric.Canvas.prototype.customiseControls({	45	fabric.Canvas.prototype.customiseControls({
32	mt: {	46	mt: {
33	cursor: 'pointer',	47	cursor: 'pointer',
34	action: function (e, target) {	48	// action: 'remove'
35	target.hasControls = false;	49	action: function(e, target) {
36	target.hasBorders = false;	50	currentObj = canvas.getActiveObject();
37	canvas.deactivateAll().renderAll();	51	if(confirm('削除してもよろしいですか?')) {
38	setTimeout(function() {	52	currentObj.remove();
39	target.hasControls = true;	53	}
40	target.hasBorders = true;	54
41	}, 1);
42	}	55	}
43	},	56	},
44	br: {	57	br: {
45		58
46	},	59	},
47	tr: {	60	tr: {
48	action: 'rotate',	61	action: 'rotate',
49	cursor: 'crosshair'	62	cursor: 'crosshair'
50	}	63	}
51	});	64	});
52		65
53	canvas.on('after:render', function() {	66	canvas.on('after:render', function() {
54	// console.log('after render');	67	// console.log('after render');
55	});	68	});
56	canvas.on({	69	canvas.on({
57	'mouse:up' : mouseUp,	70	'mouse:up' : mouseUp,
58	'object:added' : onIllustrationAdded,	71	'object:added' : onIllustrationAdded,
59	'object:moving' : onIllustrationMoving,	72	'object:moving' : onIllustrationMoving,
60	'object:scaling' : onIllustrationChange,	73	'object:scaling' : onIllustrationChange,
61	'object:rotating' : onIllustrationChange,	74	'object:rotating' : onIllustrationChange,
62	'object:selected' : onObjectSelected,	75	'object:selected' : onObjectSelected,
63	'object:modified' : onIllustrationModifield,	76	'object:modified' : onIllustrationModifield,
64	'selection:cleared' : onObjectOut,	77	'selection:cleared' : onObjectOut,
65	});	78	});
66		79
67	var currentObj;	80	var currentObj;
68	var listObj = [];	81	var listObj = [];
69	var stateObj = [];	82	var stateObj = [];
70	var indexCurr = 0;	83	var indexCurr = 0;
71	var indexCurr2 = 0;	84	var indexCurr2 = 0;
72	var actionObj = false;	85	var actionObj = false;
73	var refreshObj = true;	86	var refreshObj = true;
74	var spacingNum = 0;	87	var spacingNum = 0;
		88	$scope.itemFont = 0;
75		89
76	function mouseUp(e) {
77	currentObj = canvas.getActiveObject();
78	console.log(currentObj);
79	currentObj.activate();
80	}
81		90
		91	$scope.showDesignTab = function(tab){
		92	canvas.deactivateAll().renderAll();
		93	$rootScope.isShowLeftPanel = tab;
		94	switch (tab) {
		95	case 'illustration': {
		96	$scope.IllustrationList = $illustration.getAll();
		97	$rootScope.outputImage = false;
		98	$scope.illustrationSelectConfig = {
		99	allowClear:true
		100	};
		101	$timeout(function(){
		102	$('.illstration-item').tooltip({
		103	animated: 'fade',
		104	placement: 'bottom',
		105	html: true
		106	});
		107	// console.log('here');
		108	},1000);
		109	break;
		110	}
		111	case 'text': {
		112	break;
		113	}
		114	}
		115	};
		116	$scope.showDesignTab('default');
		117
82		118
83	function onIllustrationAdded(options){	119	function onIllustrationAdded(options){
84	var object = options.target;	120	var object = options.target;
85	// console.log('object:added');	121	// console.log('object:added');
86		122
87	if (actionObj === true) {	123	if (actionObj === true) {
88	stateObj = [stateObj[indexCurr2]];	124	stateObj = [stateObj[indexCurr2]];
89	listObj = [listObj[indexCurr2]];	125	listObj = [listObj[indexCurr2]];
90		126
91	actionObj = false;	127	actionObj = false;
92	console.log(stateObj);	128	console.log(stateObj);
93	indexCurr = 1;	129	indexCurr = 1;
94	}	130	}
95	object.saveState();	131	object.saveState();
96		132
97	console.log(object.originalState);	133	console.log(object.originalState);
98	stateObj[indexCurr] = JSON.stringify(object.originalState);	134	stateObj[indexCurr] = JSON.stringify(object.originalState);
99	listObj[indexCurr] = object;	135	listObj[indexCurr] = object;
100	indexCurr++;	136	indexCurr++;
101	indexCurr2 = indexCurr - 1;	137	indexCurr2 = indexCurr - 1;
102	refreshObj = true;	138	refreshObj = true;
103	}	139	}
104		140
105	function onIllustrationModifield(options){	141	function onIllustrationModifield(options){
106	//	142	//
107	var pointer = canvas.getPointer(options.e);	143	var pointer = canvas.getPointer(options.e);
108	if (pointer.x >= 567 && pointer.y >= 620 && pointer.x <= 600 && pointer.y <= 670){	144	if (pointer.x >= 567 && pointer.y >= 620 && pointer.x <= 600 && pointer.y <= 670){
109	canvas.getActiveObject().remove();	145	canvas.getActiveObject().remove();
110	$('.design-content .trash-design img').attr({'src':'images/trash.png'});	146	$('.design-content .trash-design img').attr({'src':'images/trash.png'});
111	return;	147	return;
112	}	148	}
113		149
114	//	150	//
115	var objOffset = canvas.getActiveObject().getBoundingRect();	151	var objOffset = canvas.getActiveObject().getBoundingRect();
116	var cH = canvas.height, cW = canvas.width, H0 = 20, W0 = 20;	152	var cH = canvas.height, cW = canvas.width, H0 = 20, W0 = 20;
117	//console.log(objOffset,canvas.height,canvas.width);	153	//console.log(objOffset,canvas.height,canvas.width);
118	if (objOffset.left<W0-objOffset.width \|\| objOffset.left>cW-W0 \|\| objOffset.top<H0-objOffset.height \|\| objOffset.top>cH-H0){	154	if (objOffset.left<W0-objOffset.width \|\| objOffset.left>cW-W0 \|\| objOffset.top<H0-objOffset.height \|\| objOffset.top>cH-H0){
119	if (confirm('削除してもよろしいですか')){	155	if (confirm('削除してもよろしいですか')){
120	canvas.getActiveObject().remove();	156	canvas.getActiveObject().remove();
121	}else{	157	}else{
122	undoCanvas();	158	undoCanvas();
123	return;	159	return;
124	}	160	}
125	}	161	}
126		162
127	var object = options.target;	163	var object = options.target;
128	// console.log('object:modified');	164	// console.log('object:modified');
129	if (actionObj === true) {	165	if (actionObj === true) {
130	stateObj = [stateObj[indexCurr2]];	166	stateObj = [stateObj[indexCurr2]];
131	listObj = [listObj[indexCurr2]];	167	listObj = [listObj[indexCurr2]];
132		168
133	actionObj = false;	169	actionObj = false;
134	console.log(stateObj);	170	console.log(stateObj);
135	indexCurr = 1;	171	indexCurr = 1;
136	}	172	}
137		173
138	object.saveState();	174	object.saveState();
139		175
140	stateObj[indexCurr] = JSON.stringify(object.originalState);	176	stateObj[indexCurr] = JSON.stringify(object.originalState);
141	listObj[indexCurr] = object;	177	listObj[indexCurr] = object;
142	indexCurr++;	178	indexCurr++;
143	indexCurr2 = indexCurr - 1;	179	indexCurr2 = indexCurr - 1;
144	// console.log(stateObj);	180	// console.log(stateObj);
145	refreshObj = true;	181	refreshObj = true;
146	}	182	}
147		183
148	function onIllustrationChange(options) {	184	function onIllustrationChange(options) {
149	// options.target.setCoords();	185	// options.target.setCoords();
150	// canvas.forEachObject(function(obj) {	186	// canvas.forEachObject(function(obj) {
151	// if (obj === options.target) return;	187	// if (obj === options.target) return;
152	// obj.setOpacity(options.target.intersectsWithObject(obj) ? 0.5 : 1);	188	// obj.setOpacity(options.target.intersectsWithObject(obj) ? 0.5 : 1);
153	// });	189	// });
154	}	190	}
155		191
156	function onIllustrationMoving(options) {	192	function onIllustrationMoving(options) {
157	var pointer = canvas.getPointer(options.e);	193	var pointer = canvas.getPointer(options.e);
158	if (pointer.x >= 567 && pointer.y >= 620 && pointer.x <= 600 && pointer.y <= 670){	194	if (pointer.x >= 567 && pointer.y >= 620 && pointer.x <= 600 && pointer.y <= 670){
159	$('.design-content .trash-design img').attr({'src':'images/trash-hover.png'});	195	$('.design-content .trash-design img').attr({'src':'images/trash-hover.png'});
160	}else{	196	}else{
161	$('.design-content .trash-design img').attr({'src':'images/trash.png'});	197	$('.design-content .trash-design img').attr({'src':'images/trash.png'});
162	}	198	}
163	}	199	}
164		200
165	function onObjectOut() {	201	function onObjectOut() {
166	delete currentObj;	202	delete currentObj;
167	$scope.designTextValue = '';	203	$scope.designTextValue = '';
168	}	204	}
169		205
170	function undoCanvas() {	206	function undoCanvas() {
171	if (indexCurr <= 0) {	207	if (indexCurr <= 0) {
172	indexCurr = 0;	208	indexCurr = 0;
173	return;	209	return;
174	}	210	}
175		211
176	if (refreshObj === true) {	212	if (refreshObj === true) {
177	indexCurr--;	213	indexCurr--;
178	refreshObj = false;	214	refreshObj = false;
179	}	215	}
180		216
181	console.log('undo');	217	console.log('undo');
182		218
183	indexCurr2 = indexCurr - 1;	219	indexCurr2 = indexCurr - 1;
184	currentObj = listObj[indexCurr2];	220	currentObj = listObj[indexCurr2];
185	if (currentObj){	221	if (currentObj){
186	currentObj.setOptions(JSON.parse(indexCurr[indexCurr2]));	222	currentObj.setOptions(JSON.parse(indexCurr[indexCurr2]));
187	}	223	}
188		224
189	indexCurr--;	225	indexCurr--;
190	currentObj.setCoords();	226	currentObj.setCoords();
191	canvas.renderAll();	227	canvas.renderAll();
192	actionObj = true;	228	actionObj = true;
193	}	229	}
194		230
195	function redoCanvas() {	231	function redoCanvas() {
196	actionObj = true;	232	actionObj = true;
197	if (indexCurr >= stateObj.length - 1) {	233	if (indexCurr >= stateObj.length - 1) {
198	return;	234	return;
199	}	235	}
200		236
201	console.log('redo');	237	console.log('redo');
202		238
203	indexCurr2 = indexCurr + 1;	239	indexCurr2 = indexCurr + 1;
204	currentObj = listObj[indexCurr2];	240	currentObj = listObj[indexCurr2];
205	currentObj.setOptions(JSON.parse(indexCurr[indexCurr2]));	241	currentObj.setOptions(JSON.parse(indexCurr[indexCurr2]));
206		242
207	indexCurr++;	243	indexCurr++;
208	currentObj.setCoords();	244	currentObj.setCoords();
209	canvas.renderAll();	245	canvas.renderAll();
210	}	246	}
211		247
212	$scope.canvasClearAll = function(){	248	$scope.canvasClearAll = function(){
213	if (confirm('配置されたすべての文字や画像を消去します')){	249	if (confirm('配置されたすべての文字や画像を消去します')){
214	canvas.clear();	250	canvas.clear();
215	}	251	}
216	}	252	}
217		253
218	function onObjectSelected(options) {	254	function onObjectSelected(options) {
219	var currentObj = options.target;	255	var currentObj = options.target;
220	//Set default	256
221	console.log('selected object');
222	// currentObj.hasControls = true;
223	// currentObj.hasBorders = true;
224	$scope.typeObject = currentObj.type;	257	$scope.typeObject = currentObj.type;
225	switch ($scope.typeObject) {	258	switch ($scope.typeObject) {
226	case 'i-text' :	259	case 'i-text' :
227	$rootScope.isShowLeftPanel = 'text';	260	$rootScope.isShowLeftPanel = 'text';
228	var text = currentObj.text;	261	var text = currentObj.text;
229	if(text != '') {	262	if(text != '') {
230	$scope.designText = text;	263	$scope.designText = text;
231	$scope.designTextValue = text;	264	$scope.designTextValue = text;
232	}	265	}
233	break;	266	break;
234		267
235	case 'path-group' :	268	case 'path-group' :
236	$rootScope.isShowLeftPanel = 'illustration';	269	$rootScope.isShowLeftPanel = 'illustration';
237	break;	270	break;
238		271
239	case 'image':	272	case 'image':
240	$rootScope.isShowLeftPanel = 'image';	273	$rootScope.isShowLeftPanel = 'image';
241	break;	274	break;
242		275
243	default :	276	default :
244	$rootScope.isShowLeftPanel = 'default';	277	$rootScope.isShowLeftPanel = 'default';
245	break;	278	break;
246	}	279	}
247	$rootScope.safeApply();	280	$rootScope.safeApply();
248	}	281	}
249		282
250	// Illustration process	283	// Illustration process
251	$scope.changeIllustrationCategory = function(currentIllustration){	284	$scope.changeIllustrationCategory = function(currentIllustration){
252	$scope.currentIllustrationCate = $illustration.getList(currentIllustration);	285	$scope.currentIllustrationCate = $illustration.getList(currentIllustration);
253	//console.log($scope.currentIllustrationCate);	286	//console.log($scope.currentIllustrationCate);
254	};	287	};
255		288
256	$scope.insertSvg = function(item){	289	$scope.insertSvg = function(item){
257	fabric.loadSVGFromURL(item.path, function(objects, options) {	290	fabric.loadSVGFromURL(item.path, function(objects, options) {
258	var shape = fabric.util.groupSVGElements(objects, options);	291	var shape = fabric.util.groupSVGElements(objects, options);
259	//shape.setFill('green');	292	//shape.setFill('green');
260	canvas.add(shape.scale(0.6));	293	canvas.add(shape.scale(0.6));
261	shape.set({ left: 150, top: 200 }).setCoords();	294	shape.set({ left: 150, top: 200 }).setCoords();
262	canvas.renderAll();	295	canvas.renderAll();
263	canvas.setActiveObject(shape);	296	canvas.setActiveObject(shape);
264	});	297	});
265	};	298	};
266		299
267	// color pattern	300	// color pattern
268	$scope.listColorPatterns = [	301	$scope.listColorPatterns = [
269	'#000000','#ffff00','#ff6600','#ff0000','#ff6262','#ffa19c','#ff9933','#c45d01','#5d2b03','#ffffcc',	302	'#000000','#ffff00','#ff6600','#ff0000','#ff6262','#ffa19c','#ff9933','#c45d01','#5d2b03','#ffffcc',
270	'#ffff99','#ffd500','#c0db50','#21a52a','#00663f','#abfcab','#36ffaa','#89eaea','#00938c','#005450',	303	'#ffff99','#ffd500','#c0db50','#21a52a','#00663f','#abfcab','#36ffaa','#89eaea','#00938c','#005450',
271	'#0badff','#006cff','#839aff','#0410a0','#ffb2ff','#f93fff','#6600ca','#ff6699','#999999','#666666',	304	'#0badff','#006cff','#839aff','#0410a0','#ffb2ff','#f93fff','#6600ca','#ff6699','#999999','#666666',
272	'#333333'	305	'#333333'
273	];	306	];
274		307
275	$scope.changeColorPattern = function(color){	308	$scope.changeColorPattern = function(color){
276	var obj = canvas.getActiveObject();	309	var obj = canvas.getActiveObject();
277	if (!color){	310	if (!color){
278	color = 'none';	311	color = 'none';
279	}	312	}
280	if (obj instanceof fabric.PathGroup) {	313	if (obj instanceof fabric.PathGroup) {
281	obj.getObjects().forEach(function(o) {	314	obj.getObjects().forEach(function(o) {
282	o.fill = color;	315	o.fill = color;
283	});	316	});
284	}	317	}
285	else {	318	else {
286	obj.fill = color;	319	obj.fill = color;
287	}	320	}
288	canvas.renderAll();	321	canvas.renderAll();
289	// if (canvas.getActiveObject()){	322	// if (canvas.getActiveObject()){
290	// canvas.getActiveObject().set("fill", color);	323	// canvas.getActiveObject().set("fill", color);
291	// canvas.renderAll();	324	// canvas.renderAll();
292	// }	325	// }
293	};	326	};
294		327
295	//Font	328	//Font
296	$scope.listFontFamily = [	329	$scope.listFontFamily = [
297	{	330	{
298	name : 'GN Aki iro Sesami Cookies',	331	name : 'GN Aki iro Sesami Cookies',
299	slug : 'gn_aki_iro_sesami_cookies',	332	slug : 'gn_aki_iro_sesami_cookies',
300	},	333	},
301	{	334	{
302	name : 'GN-Fuyu-iro_Script_Bold',	335	name : 'GN-Fuyu-iro_Script_Bold',
303	slug : 'gn_fuyu_iro_script_bold'	336	slug : 'gn_fuyu_iro_script_bold'
304	},	337	},
305	{	338	{
306	name : 'GN Killgothic U Kanana',	339	name : 'GN Killgothic U Kanana',
307	slug : 'gn_killgothic_u_kanana'	340	slug : 'gn_killgothic_u_kanana'
308	},	341	},
309	{	342	{
310	name : 'GN-Kin-iro_Alphabet_Cookies',	343	name : 'GN-Kin-iro_Alphabet_Cookies',
311	slug : 'gn_kin_iro_alphabet_cookies'	344	slug : 'gn_kin_iro_alphabet_cookies'
312		345
313	},	346	},
314	{	347	{
315	name : 'GN-Kin-iro_SansSerif',	348	name : 'GN-Kin-iro_SansSerif',
316	slug : 'gn_kin_iro_sansserif'	349	slug : 'gn_kin_iro_sansserif'
317		350
318	},	351	},
319	{	352	{
320	name : 'GN-Koharuiro_Sunray',	353	name : 'GN-Koharuiro_Sunray',
321	slug : 'gn_koharuiro_sunray'	354	slug : 'gn_koharuiro_sunray'
322		355
323	},	356	},
324	{	357	{
325	name : 'GN-Kyu-pin',	358	name : 'GN-Kyu-pin',
326	slug : 'gn_kyu_pin'	359	slug : 'gn_kyu_pin'
327	},	360	},
328	{	361	{
329	name : 'gn_natsu_iro_schedule',	362	name : 'gn_natsu_iro_schedule',
330	slug : 'gn_natsu_iro_schedule'	363	slug : 'gn_natsu_iro_schedule'
331		364
332	},	365	},
333	{	366	{
334	name : 'gnkana_kiniro_sansserif_l',	367	name : 'gnkana_kiniro_sansserif_l',
335	slug : 'gnkana_kiniro_sansserif_l'	368	slug : 'gnkana_kiniro_sansserif_l'
336		369
337	},	370	},
338	{	371	{
339	name : 'gnkana_kiniro_sansserif_st',	372	name : 'gnkana_kiniro_sansserif_st',
340	slug : 'gnkana_kiniro_sansserif_st'	373	slug : 'gnkana_kiniro_sansserif_st'
341	},	374	},
342	{	375	{
343	name : 'gnkana_kon_iro_nightfall',	376	name : 'gnkana_kon_iro_nightfall',
344	slug : 'gnkana_kon_iro_nightfall'	377	slug : 'gnkana_kon_iro_nightfall'
345		378
346	},	379	},
347	{	380	{
348	name : 'ms_gothic',	381	name : 'ms_gothic',
349	slug : 'ms_gothic'	382	slug : 'ms_gothic'
350		383
351	},	384	},
352	{	385	{
353	name : 'msmincho',	386	name : 'msmincho',
354	slug : 'msmincho'	387	slug : 'msmincho'
355	},	388	},
356	{	389	{
357	name : 'ufonts_com_ms_pgothic',	390	name : 'ufonts_com_ms_pgothic',
358	slug : 'ufonts_com_ms_pgothic'	391	slug : 'ufonts_com_ms_pgothic'
359	}	392	}
360	];	393	];
361		394
362	// layer process	395	// layer process
363	$scope.layerProcess = function(mode) {	396	$scope.layerProcess = function(mode) {
364	// console.log('layerProcess');	397	// console.log('layerProcess');
365	var activeObject = canvas.getActiveObject();	398	var activeObject = canvas.getActiveObject();
366		399
367	console.log(activeObject);	400	console.log(activeObject);
368		401
369	if (activeObject){	402	if (activeObject){
370	switch (mode) {	403	switch (mode) {
371	case 1:	404	case 1:
372	// canvas.bringForward(activeObject);	405	// canvas.bringForward(activeObject);
373	activeObject.bringForward();	406	activeObject.bringForward();
374	break;	407	break;
375	case 2:	408	case 2:
376	// canvas.sendBackwards(activeObject);	409	// canvas.sendBackwards(activeObject);
377	activeObject.sendBackwards();	410	activeObject.sendBackwards();
378	break;	411	break;
379	case 3:	412	case 3:
380	// canvas.bringToFront(activeObject);	413	// canvas.bringToFront(activeObject);
381	activeObject.bringToFront();	414	activeObject.bringToFront();
382	break;	415	break;
383	case 4:	416	case 4:
384	// canvas.sendToBack(activeObject);	417	// canvas.sendToBack(activeObject);
385	activeObject.sendToBack();	418	activeObject.sendToBack();
386	break;	419	break;
387	}	420	}
388	canvas.deactivateAll().renderAll();	421	canvas.deactivateAll().renderAll();
389	}	422	}
390	};	423	};
391		424
392	$scope.focusInputText = function(text) {	425	$scope.focusInputText = function(text) {
393	currentObj = canvas.getActiveObject();	426	currentObj = canvas.getActiveObject();
394	if(typeof currentObj == 'undefined' \|\| currentObj == null) {	427	if(typeof currentObj == 'undefined' \|\| currentObj == null) {
395	$scope.iText = new fabric.IText('', {	428	$scope.iText = new fabric.IText('', {
396	left: 150,	429	left: 150,
397	top: 200,	430	top: 200,
398	fontFamily: 'Arial',	431	fontFamily: 'Arial',
399	fontWeight: 'normal',	432	fontWeight: 'normal',
400	textAlign: 'center',	433	textAlign: 'center',
401	fontSize: 28,	434	fontSize: 28,
402	fill: 'black'	435	fill: 'black'
403	});	436	});
404	} else {	437	} else {
405	if(currentObj.type != 'i-text') {	438	if(currentObj.type != 'i-text') {
406	$scope.iText = new fabric.IText('', {	439	$scope.iText = new fabric.IText('', {
407	left: 150,	440	left: 150,
408	top: 200,	441	top: 200,
409	fontFamily: 'Arial',	442	fontFamily: 'Arial',
410	fontWeight: 'normal',	443	fontWeight: 'normal',
411	textAlign: 'center',	444	textAlign: 'center',
412	fontSize: 28,	445	fontSize: 28,
413	fill: 'black'	446	fill: 'black'
414	});	447	});
415	} else{	448	} else{
416	$scope.iText = currentObj;	449	$scope.iText = currentObj;
417	}	450	}
418	}	451	}
419	};	452	};
420		453
421	//Design text	454	//Design text
422	$scope.inputText = function(e) {	455	$scope.inputText = function(e) {
423	if(typeof $scope.iText != "undefined") {	456	if(typeof $scope.iText != "undefined") {
424	var iText = $scope.iText;	457	var iText = $scope.iText;
425	iText.text = e;	458	iText.text = e;
426	canvas.add(iText);	459	canvas.add(iText);
427	canvas.renderAll();	460	canvas.renderAll();
428	canvas.setActiveObject(iText);	461	canvas.setActiveObject(iText);
429	}	462	}
430	};	463	};
431	$scope.setFontFamily = function(font) {	464	$scope.setFontFamily = function(font,index) {
		465	$scope.itemFont = index;
432	if(canvas.getActiveObject()) {	466	if(canvas.getActiveObject()) {
433	var currentObj = canvas.getActiveObject();	467	var currentObj = canvas.getActiveObject();
434	if(currentObj.type == 'i-text') {	468	if(currentObj.type == 'i-text') {
435	currentObj.set('fontFamily', font);	469	currentObj.set('fontFamily', font);
436	canvas.renderAll();	470	canvas.renderAll();
437	canvas.setActiveObject(currentObj);	471	canvas.setActiveObject(currentObj);
438	}	472	}
439		473
440	}	474	}
441	};	475	};
442	//Set letter spacing text	476	//Set letter spacing text
443	$scope.setLetterSpacingText = function(e) {	477	$scope.setLetterSpacingText = function(e) {
444	if(canvas.getActiveObject()) {	478	if(canvas.getActiveObject()) {
445	var currentObj = canvas.getActiveObject();	479	var currentObj = canvas.getActiveObject();
446	if(currentObj.type == 'i-text') {	480	if(currentObj.type == 'i-text') {
447	if(e == 'plus')	481	if(e == 'plus')
448	spacingNum = spacingNum + 30;	482	spacingNum = spacingNum + 30;
449	else if (spacingNum >= 30){	483	else if (spacingNum >= -30){
450	spacingNum = spacingNum - 30;	484	spacingNum = spacingNum - 30;
451	}	485	}
452	currentObj.set('charSpacing', spacingNum);	486	currentObj.set('charSpacing', spacingNum);
453	canvas.renderAll();	487	canvas.renderAll();
454	canvas.setActiveObject(currentObj);	488	canvas.setActiveObject(currentObj);
455	}	489	}
456	}	490	}
457	}	491	};
		492
		493	$scope.setLetterSpacingTextDefault = function() {
		494	if(canvas.getActiveObject()) {
		495	var currentObj = canvas.getActiveObject();
		496	if(currentObj.type == 'i-text') {
		497	spacingNum = 0;
		498	currentObj.set('charSpacing', spacingNum);
		499	canvas.renderAll();
		500	canvas.setActiveObject(currentObj);
		501	}
		502	}
		503	};
458		504
459		505
460	/**** process insert image */	506	/**** process insert image */
461	if (typeof($window.localStorage.recentImages) != 'undefined'){	507	if (typeof($window.localStorage.recentImages) != 'undefined'){
462	$scope.recentImages = JSON.parse($window.localStorage.recentImages);	508	$scope.recentImages = JSON.parse($window.localStorage.recentImages);
463	}else{	509	}else{
464	$scope.recentImages = {};	510	$scope.recentImages = {};
465	}	511	}
466		512
467	var addToRecentImage = function(name, data){	513	var addToRecentImage = function(name, data){
468	if (typeof($window.localStorage.recentImages) != 'undefined'){	514	if (typeof($window.localStorage.recentImages) != 'undefined'){
469	$scope.recentImages = JSON.parse($window.localStorage.recentImages);	515	$scope.recentImages = JSON.parse($window.localStorage.recentImages);
470	}else{	516	}else{
471	$scope.recentImages = {};	517	$scope.recentImages = {};
472	}	518	}
473		519
474	if (typeof($scope.recentImages[name]) == 'undefined'){	520	if (typeof($scope.recentImages[name]) == 'undefined'){
475	var ii=0;	521	var ii=0;
476	var II = 0;	522	var II = 0;
477	for(var item in $scope.recentImages){	523	for(var item in $scope.recentImages){
478	if (II==0){	524	if (II==0){
479	II = item;	525	II = item;
480	}	526	}
481	ii++;	527	ii++;
482	}	528	}
483	if (ii>16 && II!=0){	529	if (ii>16 && II!=0){
484	delete $scope.recentImages[II];	530	delete $scope.recentImages[II];
485	}	531	}
486	$scope.recentImages[name] = data;	532	$scope.recentImages[name] = data;
487	$window.localStorage.recentImages = JSON.stringify($scope.recentImages);	533	$window.localStorage.recentImages = JSON.stringify($scope.recentImages);
488	}	534	}
489	}	535	}
490	$scope.chooseImage = function(e){//console.log(e);	536	$scope.chooseImage = function(e){//console.log(e);
491	if (e.target.files[0] && e.target.files[0].size > 510241024){	537	if (e.target.files[0] && e.target.files[0].size > 510241024){
492	alert('アップロードできませんでした');	538	alert('アップロードできませんでした');
493	return;	539	return;
494	}	540	}
495	var reader = new FileReader();	541	var reader = new FileReader();
496	reader.onload = function (event) {	542	reader.onload = function (event) {
497	addToRecentImage ($('#imgLoader').val(), event.target.result);	543	addToRecentImage ($('#imgLoader').val(), event.target.result);
498	var imgObj = new Image();//console.log($('#imgLoader').val());	544	var imgObj = new Image();//console.log($('#imgLoader').val());
499	imgObj.src = event.target.result;	545	imgObj.src = event.target.result;
500	imgObj.onload = function () {	546	imgObj.onload = function () {
501	// start fabricJS stuff	547	// start fabricJS stuff
502		548
503	var image = new fabric.Image(imgObj);	549	var image = new fabric.Image(imgObj);
504	image.set({	550	image.set({
505	left: 50,	551	left: 50,
506	top: 50	552	top: 50
507	});	553	});
		554	//image.scale(getRandomNum(0.1, 0.25)).setCoords();
508	image.scaleToWidth(200);	555	image.scaleToWidth(200);
509	canvas.add(image);	556	canvas.add(image);
510	}	557	}
511	}	558	}
512	reader.readAsDataURL(e.target.files[0]);	559	reader.readAsDataURL(e.target.files[0]);
513	}	560	}
514		561
515	$scope.insertRecentImage = function(data){	562	$scope.insertRecentImage = function(data){
516	var imgObj = new Image();	563	var imgObj = new Image();
517	imgObj.src = data;	564	imgObj.src = data;
518	imgObj.onload = function () {	565	imgObj.onload = function () {
519	// start fabricJS stuff	566	// start fabricJS stuff
520		567
521	var image = new fabric.Image(imgObj);	568	var image = new fabric.Image(imgObj);
522	image.set({	569	image.set({
523	left: 50,	570	left: 50,
524	top: 50	571	top: 50
525	});	572	});
526	image.scaleToWidth(200);	573	image.scaleToWidth(200);
527	canvas.add(image);	574	canvas.add(image);
528	}	575	}
529	}	576	}
530		577
531	//Traslation text	578	//Traslation text
532	$scope.rotateText = function(style) {	579	$scope.rotateText = function(style) {
533	if(canvas.getActiveObject()) {	580	if(canvas.getActiveObject()) {
534	var currentObj = canvas.getActiveObject();	581	var currentObj = canvas.getActiveObject();
535	if(currentObj.type == 'i-text') {	582	if(currentObj.type == 'i-text') {
536	currentObj.set('rotate', Math.PI / 4);	583	currentObj.set('rotate', Math.PI / 4);
537	canvas.renderAll();	584	canvas.renderAll();
538	canvas.setActiveObject(currentObj);	585	canvas.setActiveObject(currentObj);
539	}	586	}
540	}	587	}
541	};	588	};
542		589

app/styles/main.css

Diff comments View file @ 2f4c317

 /* Space out content a bit */
 @import "../fonts/font.css";
 @import "../fonts/font_canvas/font-canvas.css";
+html{
+  height:100%;
+  width:100%;
+}
 body {
   font-family: 'Hiragino Kaku Gothic Pro', sans-serif;
-  /*font-family: 'gn_aki_iro_sesami_cookies';*/
+  height:100%;
+  width:100%;
 }
 /*Scroll bar style*/
 ::-webkit-scrollbar {
   -webkit-appearance: none;
   width: 7px;
 }
+::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+}
 ::-webkit-scrollbar-thumb {
   border-radius: 4px;
   background-color: rgba(0,0,0,.5);
   -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
 }
 /*End scroll bar style*/
 .padding-right-0{
   padding-right: 0!important;
 }
 .padding-left-0{
   padding-left: 0!important;
 }
 button.red{
   color: #ffffff;
   background-color: #ff0000;
   border: 1px solid #ff0000;
 }
 button.white{
   border: 1px solid #ff8080;
   color: #ff8080;
   background-color: #ffffff;
 }
 button.brown{
   background-color: #666666;
   border: 1px solid #666666;
   color: #ffffff;
   border-radius: 5px;
 }
 button.black{
   border: 1px solid #c9c9c9;
   background-color: #343434;
   color: #ffffff;
   padding: 1px 6px;
 }
 #tshirt-container{
   border-left: 1px solid #dcdcdc;
   border-right: 1px solid #dcdcdc;
 }
 /*HEADER*/
 header{
   border-bottom: 1px solid #dcdcdc;
 }
 header .logo{
   color: #ed1d24;
   font-size: 30px;
   text-transform: uppercase;
   font-weight: bold;
 }
 header .logo img{
   width: 60px;
 }
 /*NAVIGATION*/
 nav{
   border-bottom: 1px solid #dcdcdc;
   padding: 10px 0;
 }
 nav h2{
   font-size: 27px;
   margin: 0 0;
 }
 nav ul{
   list-style: none;
   padding-left: 0;
   margin-bottom: 0;
 }
 nav ul li{
   margin-left: 2px;
   float: left;
   padding: 6px 12px;
   background-color: #999999;
   position: relative;
 }
 nav ul li i.fa{
   position: absolute;
   color: #ffffff;
   font-size: 18px;
   right: -4px;
   top: 50%;
   transform: translateX(-50%) translateY(-50%);
   -webkit-transform: translateX(-50%) translateY(-50%);
 }
 nav ul li a{
   color: #ffffff;
 }
 nav ul li:hover a{
   text-decoration: none;
   color: #ffffff;
 }
 nav ul li.action{
   color: #ffffff;
   background-color: #ed1d24;
 }
 /*ASIDE*/
 aside{
   margin: 10px 0;
 }
 aside .break-down{
   padding: 0 0;
 }
 aside .break-down i.fa{
   font-size: 35px;
   color: #ff0000;
 }
 aside .break-line{
   height: 10px;
 }
 aside .break-line hr{
   border-top: 1px dotted #cccccc;
 }
 aside .step{
   margin: 0 0;
 }
 aside .step .title{
   font-size: 15px;
   line-height: 16px;
   font-weight: bold;
   margin-bottom: 3px;
 }
 aside .step .title-notice{
   font-size: 13px;
   line-height: 16px;
   margin-bottom: 3px;
 }
 aside .step .title-notice .require{
   font-size: 10px;
 }
 aside .step .step-box{
   border: 2px solid #dcdcdc;
   font-size: 12px;
 }
 /*Step 1*/
 aside .step .step-box .tshirt-design{
   border: 1px solid #cccccc;
   background-color: #f5f5f5;
   margin: 10px 10px;
 }
 aside .step .step-box .tshirt-design:hover{
   border: 1px solid #ff0000;
 }
 aside .step .step-box .tshirt-design button:hover{
   background-color: #fa7b7b;
   border: 1px solid #fa7b7b;
 }
 aside .step .step-box .tshirt-design div{
   float: left;
 }
 aside .step .step-box .tshirt-design .icon{
   padding: 4px 4px;
   border-right: 1px solid #cccccc;
 }
 aside .step .step-box .tshirt-design .icon img{
   height: 50px;
 }
 aside .step .step-box .tshirt-design .name{
   padding: 10px 10px;
 }
 aside .step .step-box .tshirt-design .action{
   padding: 10px 10px;
   float: right;
 }
 aside .step .step-box .tshirt-design .action button{
   padding: 8px 10px;
 }
 /*Step 2*/
 aside .step .step-box .tshirt-color{
   padding: 6px 10px;
   position: relative;
 }
 aside .step .step-box .tshirt-color ul.choice-color{
   float: left;
   list-style: none;
   padding-left: 0;
   width: 100%;
   margin-bottom: 3px;
 }
 aside .step .step-box .tshirt-color ul.choice-color li{
   margin: 0 10px 0 0;
   border: 1px solid #cccccc;
   padding: 2px 2px;
   float: left;
   cursor: pointer;
 }
 aside .step .step-box .tshirt-color ul.choice-color li.action{
   border: 1px solid #ff0000;
 }
 aside .step .step-box .tshirt-color ul.choice-color li:hover{
   border: 1px solid #ff0000;
 }
 aside .step .step-box .tshirt-color ul.choice-color li div{
   height: 30px;
   width: 30px;
 }
 aside .step .step-box .tshirt-color ul.choice-color li.white div{
   background-color: #ece7e4;
 }
 aside .step .step-box .tshirt-color ul.choice-color li.blue div{
   background-color: #e7dfd0;
 }
 aside .step .step-box .tshirt-color .color-name{
   width: 100%;
   font-size: 10px;
 }
 aside .step .step-box .tshirt-color .view-more{
   position: absolute;
   bottom: 6px;
   right: 10px;
 }
 /*Step 3*/
 aside .step .step-box .tshirt-saveorder{
   padding: 10px 10px 6px 10px;
 }
 aside .step .step-box .tshirt-saveorder .action{
   width: 50%;
   float: left;
 }
 aside .step .step-box .tshirt-saveorder .action:first-child{
   padding-right: 5px;
 }
 aside .step .step-box .tshirt-saveorder .action:last-child{
   padding-left: 5px;
 }
 aside .step .step-box .tshirt-saveorder .action button{
   padding: 8px 10px;
 }
 aside .step .step-box .tshirt-saveorder .action button .text{
   float: left;
   width: 80%;
   text-align: center;
   padding-left: 10px;
   vertical-align: bottom;
 }
 aside .step .step-box .tshirt-saveorder .action button .arrow{
   float: left;
   width: 20%;
   height: 40px;
   position: relative;
 }
 aside .step .step-box .tshirt-saveorder .action button .arrow i.fa{
   position: absolute;
   top: 50%;
   right: -6px;
   transform: translateX(-50%) translateY(-50%);
   -webkit-transform: translateX(-50%) translateY(-50%);
 }
 aside .step .step-box .tshirt-saveorder .notice{
   padding: 5px 0 0 0;
 }
 /*Step 4*/
 aside .step .title-notice{
 }
 aside .step .step-box .change-design{
   padding: 4px 4px;
 }
 aside .step .step-box .change-design table{
 }
 aside .step .step-box .change-design table tr{
   border-bottom: 1px dotted #cccccc;
 }
 aside .step .step-box .change-design table tr:last-child{
   border-bottom: 0;
 }
 /*Step 5- finish*/
 aside .step .finish-design{
   padding: 20px 0;
 }
 aside .step .finish-design button{
   width: 100%;
   padding: 8px 10px;
 }
 /*DESIGN CONTENT*/
 #tshirt-content{
   position: relative;
 }
 #tshirt-content .switch-border-design{
   position: absolute;
   top: 5px;
   right: 10px;
   color: red;
   font-size: 11px;
 }
 #tshirt-content .tshirt-image{
   padding: 20px 0 0 0;
+  position: relative;
+  height: 100%;
+  width: 100%;
 }
 #tshirt-content .tshirt-image img{
   width: 100%;
 }
 #preview-design {
   position: absolute;
-  width: 150px;
+  width: 190px;
-  height: 182px;
+  height: 200px;
   border: dashed 2px #DDD;
-  bottom: 180px;
+  top: 180px;
-  left: 200px;
+  /*left: 200px;*/
+  cursor: pointer;
 }
 #preview-design img {
   width: 150px;
 }
 #tshirt-content .tshirt-choice{
 }
 #tshirt-content .tshirt-choice ul{
   list-style: none;
   padding-left: 0;
   display: table;
   margin: auto;
 }
 #tshirt-content .tshirt-choice ul li{
   float: left;
   margin: 10px 10px;
   cursor: pointer;
 }
 #tshirt-content .tshirt-choice ul li .image{
   border: 1px solid #cccccc;
   padding: 3px 3px;
 }
 #tshirt-content .tshirt-choice ul li.focus{
 }
 #tshirt-content .tshirt-choice ul li.focus .image{
   border: 1px solid #ff0000;
 }
 #tshirt-content .tshirt-choice ul li .image img{
   width: 50px;
   height: auto;
 }
 /*MODAL Design*/
 #tshirt-design{
   background-color: #666666;
 }
 #tshirt-design .modal-dialog{
-  width: 75%;
+  /*width: 800px!important;*/
   margin: 0 auto;
 }
 #tshirt-design .modal-dialog .modal-content{
   background-color: transparent;
   border-radius: 0;
   border: 0;
   -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important;
   box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important;
 }
 #tshirt-design .modal-dialog .modal-content .modal-header{
   padding: 0 0 10px 0;
   border-bottom: 0;
   border-shadow: none!important;
 }
 #tshirt-design .modal-dialog .modal-content .modal-body{
   background-color: #f5f5f5;
   padding: 0 0;
 }
 #tshirt-design header{
   border-bottom: 1px solid #cccccc;
   background-color: #dddddd;
 }
 #tshirt-design header ul.nav{
   padding-left: 0;
   list-style: none;
 }
 #tshirt-design header ul.nav li{
   float: left;
   padding: 8px 26px;
   border-right: 1px solid #cccccc;
   font-size: 14px;
   cursor: pointer;
 }
 #tshirt-design header ul.nav li:hover, #tshirt-design header ul.nav li.active{
   background-color: red;
   color: #ffffff;
 }
 #tshirt-design header ul.nav li:hover i.fa, #tshirt-design header ul.nav li.active i.fa{
   color: #ffffff;
 }
 #tshirt-design header ul.nav li i.fa{
   color: #fe070f;
   font-size: 20px;
   margin-right: 10px;
 }
 #tshirt-design header .action{
 }
 #tshirt-design header .action button{
   padding: 2px 10px;
   margin: 6px 10px;
 }
 #tshirt-design header .action button:hover{
   background-color: red;
   color: #ffffff;
 }
 /*Aside modal*/
 .aside{
 }
 .aside .box-design-option{
   list-style: none;
   padding-left: 0;
   margin-top: 10px;
 }
 .aside .box-design-option li{
   border: 1px solid #cdcdcd;
   position: relative;
   /*cursor: pointer;*/
   margin-bottom: 10px;
 }
 .aside .box-design-option li .hover{
   background-color: #fddad4;
   opacity: 0.6;
   position: absolute;
   width: 100%;
   height: 100%;
   display: none;
 }
 .aside .box-design-option li:hover .hover{
   display: block;
 }
 .aside .box-design-option li .title{
   background: url("../images/bg1.png") repeat #cdcdcd;
   padding: 3px 10px;
 }
 .aside .box-design-option li .title i.fa{
   color: #000000;
 }
 .aside .box-design-option li .content{
 }
 .aside .box-design-option li .content i.fa{
   font-size: 30px;
   color: #fe070f;
   margin: 8px 0;
 }
 .aside .box-design-option li .content .des{
   padding: 3px 10px 3px 0;
 }
 .aside .box-design-option li .content .color-patterns {
   width: 100%;
   border: #bbb solid 1px;
   background: #FFF;
   margin-top: 5px;
   min-height: 65px;
 }
 .aside .box-design-option li .content .color-patterns .color-pattern-item{
   height: 20px;
   float: left;
   margin-left: 4px;
   margin-top: 2px;
   width: 20px;
   cursor: pointer;
   border: 1px solid #ddd;
 }
 .aside .box-design-option li .content .color-patterns .color-pattern-item:hover {
   outline: 1px solid #ed1d24;
 }
 .aside .box-design-option li .title .reset-color-patterns {
   cursor: pointer;
 }
 .aside .box-design-option li .title .reset-color-patterns:hover {
   opacity: 0.6;
 }
 .aside .box-design-option li .content .layer-item {
   text-align: center;
   border: 1px #ddd solid;
   background: #FFF;
   padding: 5px;
   font-size: 12px;
   cursor: pointer;
 }
 .aside .box-design-option li .content .layer-item:hover {
   background: #ffcccc;
 }
 /*Design Text*/
 .aside #choice-text{
 }
 .aside #choice-text .content{
   padding: 10px 10px;
 }
 .aside #choice-text .content ul.font-family-box{
   list-style: none;
   margin: 10px 0;
   padding-left: 0;
   height: 180px;
   width: 100%;
   overflow-y: scroll;
   border: 1px solid #c0c0c0;
 }
 .aside #choice-text .content .font-family-box li{
   cursor: pointer;
   padding: 4px 8px;
   border: 0;
   border-bottom: 1px solid #c0c0c0;
   border-right: 1px solid #c0c0c0;
   font-size: 16px;
+  margin-bottom: 0;
 }
+.aside #choice-text .content .font-family-box li.active{
+  border: 1px solid #fe070f;
+}
 .aside #choice-text .content .spacing-letter{
 }
 .aside #choice-text .content .spacing-letter .text-label{
   font-size: 16px;
   padding: 4px 0;
 }
 .aside #choice-text .content .spacing-letter .box{
   border: 1px solid #8c8c8c;
   box-shadow: 0 0 5px #888888;
   background-color: #f0f0f0;
 }
 .aside #choice-text .content .spacing-letter .item{
   float: left;
 }
+.aside #choice-text .content .spacing-letter .item:hover{
+  background-color: #fddad4;
+}
 .aside #choice-text .content .spacing-letter .item i.fa{
   font-size: 22px;
   margin: 0 0;
   color: #000000;
 }
 .aside #choice-text .content .spacing-letter .item-text{
   padding: 6px 20px;
-  font-size: 12px;
+  font-size: 13px;
 }
 .aside #choice-text .content .spacing-letter .item-plus{
   border-right: 1px solid #8c8c8c;
 }
 .aside #choice-text .content .spacing-letter .item-minus{
   border-left: 1px solid #8c8c8c;
 }
 .aside #choice-text .content .spacing-letter .item-plus, .aside #choice-text .content .spacing-letter .item-minus {
   padding: 5px 6px 1px 6px;
   cursor: pointer;
 }
 /*Design Choice Illustration*/
 .aside #choice-illustration li .content {
   padding: 10px 10px;
 }
 .aside #choice-illustration li .content select{
   width: 100%;
 }
 .aside #choice-illustration li .content .illustration-list {
   width: 100%;
   border: #bbb solid 1px;
   background: #FFF;
   margin-top: 5px;
   min-height: 310px;
   padding-bottom: 20px;
 }
 .aside #choice-illustration li .content .illustration-list .illstration-item{
   height: 60px;
   overflow: hidden;
   float: left;
   margin-left: 6px;
   margin-top: 5px;
   margin-bottom: 5px;
   padding: 2px;
   background: #e2e2e2;
   border: solid 2px #d7d7d7;
   cursor: pointer;
 }
 .aside #choice-illustration li .content .illustration-list .illstration-item:hover {
   outline: 2px solid #ed1d24;
 }
 .aside #choice-illustration li .content .illustration-list .illstration-item img {
   width: 50px;
   cursor: pointer;
 }
 .aside #choice-illustration li .content .illustration-list .footer-bar {
     text-align: center;
     margin-top: 5px;
     bottom: 10px;
     position: absolute;
     width: 100%;
     padding-right: 20px;
 }
 .aside #choice-illustration li .content .illustration-list .footer-bar .footer-pagination {
   margin-right: 5px;
   cursor: pointer;
   font-size: 9px;
   color: #FFF;
   background: #666666;
   text-transform: uppercase;
   padding: 2px 5px;
 }
 .aside #choice-illustration li .content .illustration-list .footer-bar .footer-pagination:hover {
   background: #999999;
 }
 .tooltip-arrow,
 .red-tooltip + .tooltip > .tooltip-inner {
   background-color: #FFF;
   margin:0;
   padding:0;
 }
 /* Insert image*/
 #btn-choose-image {
   background: #ff0f00;
   cursor: pointer;
   margin: 10px 0px;
   padding: 0 10px;
   color: #FFF;
   font-size: 12px;
 }
 #btn-choose-image:hover {
   background: #f8aeae;
 }
 .aside #choice-image li .content {
   margin: 0 10px;
   padding: 10px 0;
 }
 .aside #choice-image li .content .small-text {
   font-size:10px;
   margin-bottom: 10px;
 }
 .aside #choice-image {
   font-size: 13px;
 }
 .aside #imgLoader{
   display: none;
 }
 .aside #choice-image li .content .list-images {
   height: 300px;
   background: #FFF;
   border: 1px solid #DDD;
 }
 .aside #choice-image li .content .list-images .recent-img{
   height: 60px;
   overflow: hidden;
   float: left;
   margin-left: 6px;
   margin-top: 5px;
   margin-bottom: 5px;
   padding: 2px;
   background: #e2e2e2;
   border: solid 2px #d7d7d7;
   cursor: pointer;
 }
 .aside #choice-image li .content .list-images .recent-img:hover {
   outline: 2px solid #ed1d24;
 }
 .aside #choice-image li .content .list-images .recent-img img {
   width: 50px;
   cursor: pointer;
 }
 /*Design content*/
 .tshirt-design-container{
   position: relative;
 }
 .tshirt-design-container .design-content{
-  padding: 10px 30px 10px 15px;
+  padding: 10px 0;
+  /*width: 100%;*/
 }
 .tshirt-design-container .design-content .content{
   width: 100%;
+  height: 100%;
   min-height: 650px;
   background-color: #f0efea;
   padding: 40px 40px;
-  height: 100%;
+  /*display: table-cell;*/
 }
 .tshirt-design-container .design-content .content .selection-design{
   border: 1px solid #ff0000;
   width: 100%;
   height: 620px;
 }
 .tshirt-design-container .agree-design{
   position: absolute;
   right: -16px;
   top: 40%;
   cursor: pointer;
 }
 .tshirt-design-container .agree-design:hover{
   opacity: 0.8;
 }
 .tshirt-design-container .trash-design{
   position: absolute;
   right: 5px;
   bottom: 0;
 }
 .tshirt-design-container .trash-design:hover{
   opacity: 0.5;
 }
 /*FOOTER*/
 footer{
   background-color: #333333;
 }
 footer ul.nav-footer{
   padding-left: 0;
   list-style: none;
 }
 footer ul.nav-footer li{
   float: left;
   padding: 3px 10px;
   border-right: 1px dotted #ffffff;
 }
 footer ul.nav-footer li a{
   color: #ffffff;
   font-size: 11px;
 }
 /* Customize container */
 @media (min-width: 768px) {
   .container {
     /*max-width: 730px;*/
   }
 }
 /* Responsive: Portrait tablets and up */
 @media screen and (min-width: 768px) {
   /* Remove the padding we set earlier */
 }
 @media (min-width: 1024px) {
   #tshirt-design .modal-dialog{
     min-width: 1000px;
+    width: 1000px;
   }
 }
 @media (max-width: 1200px) {
   #preview-design {
     left: 155px;
   }
 }
 @media (max-width: 990px) {
   #preview-design {
-    left: 115px;
+    /*left: 115px;*/
-    width: 120px;
+    width: 110px;
-    height: 162px;
+    height: 200px;
-    bottom: 150px;
+    top: 100px;
+  }
+}
+@media (max-width: 762px) {
+  .modal-dialog{
+    /*width: 100%!important;*/
+    margin: 0 0!important;
+  }
+  #tshirt-design header .menu-nav{
+    overflow-x: scroll!important;
+    -webkit-overflow-scrolling: touch;
+  }
+  #tshirt-design header ul.nav {
+    text-align: justify;
+    width: 680px;
+  }
+  #tshirt-design header ul.nav li {
+    display: inline-block; /* 6 */
+  }
+  .tshirt-design-container .design-content .content{
+    padding: 14px 14px;
+  }
+  .tshirt-design-container .design-content{
+    padding: 0 0;
   }
 }

app/views/design_part/text.html

Diff comments View file @ 2f4c317

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	<div>	7	<div>
8	<input type="text" class="form-control" placeholder="ここに入力してください。" id="input-design-text" ng-focus="focusInputText(designText)" ng-change="inputText(designText)" ng-model="designText" ng-value="designTextValue">	8	<input type="text" class="form-control" placeholder="ここに入力してください。" id="input-design-text" ng-focus="focusInputText(designText)" ng-change="inputText(designText)" ng-model="designText" ng-value="designTextValue">
9	</div>	9	</div>
10	<div>	10	<div>
11	<ul class="font-family-box">	11	<ul class="font-family-box">
12	<li ng-repeat="item in listFontFamily" ng-click="setFontFamily(item.slug)" ng-style="{'font-family' : item.slug}">{{ item.name }}</li>	12	<li ng-repeat="(index,item) in listFontFamily" ng-click="setFontFamily(item.slug, index)" ng-style="{'font-family' : item.slug}" ng-class="{active: itemFont == index}">{{ item.name }}</li>
13	</ul>	13	</ul>
14	</div>	14	</div>
15	<div>	15
16	<div ng-click="rotateText('1')">文字を変形する</div>
17	</div>
18	<div class="clearfix spacing-letter ">	16	<div class="clearfix spacing-letter ">
19	<div class="pull-left text-label">	17	<div class="pull-left text-label">
20	文字間隔 :	18	文字間隔 :
21	</div>	19	</div>
22	<div class="pull-right">	20	<div class="pull-right">
23	<div class="box clearfix">	21	<div class="box clearfix">
24	<div class="item item-plus" ng-click="setLetterSpacingText('plus')">	22	<div class="item item-plus" ng-click="setLetterSpacingText('plus')">
25	<i class="fa fa-plus-square-o" aria-hidden="true"></i>	23	<i class="fa fa-plus-square-o" aria-hidden="true"></i>
26	</div>	24	</div>
27	<div class="item item-text">	25	<div class="item item-text" style="cursor: pointer" ng-click="setLetterSpacingTextDefault()">
28	リセット	26	リセット
29	</div>	27	</div>
30	<div class="item item-minus" ng-click="setLetterSpacingText('minus')">	28	<div class="item item-minus" ng-click="setLetterSpacingText('minus')">
31	<i class="fa fa-minus-square-o" aria-hidden="true"></i>	29	<i class="fa fa-minus-square-o" aria-hidden="true"></i>
32	</div>	30	</div>
33	</div>	31	</div>
34	</div>	32	</div>
35	</div>	33	</div>
36	</div>	34	</div>
37	</li>	35	</li>
38	<li>	36	<li>
39	<div class="title">	37	<div class="title">
40	<!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->	38	<!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->
41	カラー変更	39	カラー変更
42	<!--<div class="pull-right">元の色に戻す</div>-->	40	<!--<div class="pull-right">元の色に戻す</div>-->
43	</div>	41	</div>
44	<div class="content clearfix">	42	<div class="content clearfix">
45	<div class="color-patterns">	43	<div class="color-patterns">
46	<div class="color-pattern-item" ng-repeat="color in listColorPatterns track by $index" ng-click="changeColorPattern(color)" ng-style="{'background-color': color}">	44	<div class="color-pattern-item" ng-repeat="color in listColorPatterns track by $index" ng-click="changeColorPattern(color)" ng-style="{'background-color': color}">
47	</div>	45	</div>
48	<div class="clearfix"></div>	46	<div class="clearfix"></div>
49	</div>	47	</div>
50	</div>	48	</div>
51	</li>	49	</li>
52		50
53	<li>	51	<li>
54	<div class="title">	52	<div class="title">
55	<!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->	53	<!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->
56	重ね順変更	54	重ね順変更
57	</div>	55	</div>
58	<div class="content clearfix">	56	<div class="content clearfix">
59	<div class="col-xs-3 layer-item" ng-click="layerProcess(1)">	57	<div class="col-xs-3 layer-item" ng-click="layerProcess(1)">
60	<img src="images/layer-icon-1.png"/>	58	<img src="images/layer-icon-1.png"/>
61	<div>前面へ</div>	59	<div>前面へ</div>
62	</div>	60	</div>
63	<div class="col-xs-3 layer-item" ng-click="layerProcess(2)">	61	<div class="col-xs-3 layer-item" ng-click="layerProcess(2)">
64	<img src="images/layer-icon-2.png"/>	62	<img src="images/layer-icon-2.png"/>
65	<div>背面へ</div>	63	<div>背面へ</div>
66	</div>	64	</div>
67	<div class="col-xs-3 layer-item" ng-click="layerProcess(3)">	65	<div class="col-xs-3 layer-item" ng-click="layerProcess(3)">
68	<img src="images/layer-icon-3.png"/>	66	<img src="images/layer-icon-3.png"/>
69	<div>最前面へ</div>	67	<div>最前面へ</div>
70	</div>	68	</div>
71	<div class="col-xs-3 layer-item" ng-click="layerProcess(4)">	69	<div class="col-xs-3 layer-item" ng-click="layerProcess(4)">
72	<img src="images/layer-icon-4.png"/>	70	<img src="images/layer-icon-4.png"/>
73	<div>最前面へ</div>	71	<div>最前面へ</div>
74	</div>	72	</div>
75	</div>	73	</div>
76	</li>	74	</li>
77		75

app/views/tshirt-design.html

Diff comments View file @ 2f4c317

1	<!-- Modal -->	1	<!-- Modal -->
2	<div class="modal fade" id="tshirt-design" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" ng-controller="TshirtdesignCtrl">	2	<div class="modal fade" id="tshirt-design" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" ng-controller="TshirtdesignCtrl">
3		3
4	<div class="modal-dialog" role="document">	4	<div class="modal-dialog" role="document">
5	<div class="modal-content">	5	<div class="modal-content">
6	<div class="modal-header">	6	<div class="modal-header">
7	<button class="black" ng-click="modalClose()"><i class="fa fa-times" aria-hidden="true"></i> キャンセル</button>	7	<button class="black" ng-click="modalClose()"><i class="fa fa-times" aria-hidden="true"></i> キャンセル</button>
8	<button class="black"> <i class="fa fa-angle-right" aria-hidden="true"></i> はじめての方へ</button>	8	<button class="black"> <i class="fa fa-angle-right" aria-hidden="true"></i> はじめての方へ</button>
9	</div>	9	</div>
10	<div class="modal-body">	10	<div class="modal-body">
11	<header class="clearfix">	11	<header class="clearfix">
12	<ul class="nav pull-left">	12	<div class="menu-nav">
13	<li ng-class="{'active': isShowLeftPanel=='text'}" ng-click="showDesignTab('text')">	13	<ul class="nav pull-left">
14	<i class="fa fa-jpy" aria-hidden="true"></i> 文字	14	<li ng-class="{'active': isShowLeftPanel=='text'}" ng-click="showDesignTab('text')">
15	</li>	15	<i class="fa fa-jpy" aria-hidden="true"></i> 文字
16	<li ng-class="{'active': isShowLeftPanel=='illustration'}" ng-click="showDesignTab('illustration')">	16	</li>
17	<i class="fa fa-btc" aria-hidden="true"></i> イラスト・イメージ	17	<li ng-class="{'active': isShowLeftPanel=='illustration'}" ng-click="showDesignTab('illustration')">
18	</li>	18	<i class="fa fa-btc" aria-hidden="true"></i> イラスト・イメージ
19	<li ng-class="{'active': isShowLeftPanel=='image'}" ng-click="showDesignTab('image')">	19	</li>
20	<i class="fa fa-money" aria-hidden="true"></i> 自分の画像・写真	20	<li ng-class="{'active': isShowLeftPanel=='image'}" ng-click="showDesignTab('image')">
21	</li>	21	<i class="fa fa-money" aria-hidden="true"></i> 自分の画像・写真
22	<li ng-click="canvasClearAll()">	22	</li>
23	<i class="fa fa-minus-circle" aria-hidden="true"></i> 全消去	23	<li ng-click="canvasClearAll()">
24	</li>	24	<i class="fa fa-minus-circle" aria-hidden="true"></i> 全消去
25	</ul>	25	</li>
		26	</ul>
		27	</div>
		28
26	<div class="action pull-right">	29	<div class="action pull-right">
27	<button class="white">	30	<button class="white">
28	アルバムを開く	31	アルバムを開く
29	</button>	32	</button>
30	<button class="white">	33	<button class="white">
31	アルバムに入れる	34	アルバムに入れる
32	</button>	35	</button>
33	</div>	36	</div>
34	</header>	37	</header>
35	<section class="tshirt-design-container clearfix">	38	<section class="tshirt-design-container clearfix">
36	<div class="aside col-sm-4">	39	<div class="aside col-sm-4">
37	<!-- Default-->	40	<!-- Default-->
38	<ul class="box-design-option" id="choice-design-option" ng-show="isShowLeftPanel=='default' " ng-include="designPartDefault">	41	<ul class="box-design-option" id="choice-design-option" ng-show="isShowLeftPanel=='default' " ng-include="designPartDefault">
39	</ul>	42	</ul>
40	<!-- Illustration design-->	43	<!-- Illustration design-->
41	<ul class="box-design-option" id="choice-illustration" ng-show="isShowLeftPanel=='illustration'" ng-include="designPartIllustration">	44	<ul class="box-design-option" id="choice-illustration" ng-show="isShowLeftPanel=='illustration'" ng-include="designPartIllustration">
42	</ul>	45	</ul>
43	<!-- Custom image design-->	46	<!-- Custom image design-->
44	<ul class="box-design-option" id="choice-image" ng-show="isShowLeftPanel=='image'" ng-include="designPartImage">	47	<ul class="box-design-option" id="choice-image" ng-show="isShowLeftPanel=='image'" ng-include="designPartImage">
45	</ul>	48	</ul>
46	<!-- Text design-->	49	<!-- Text design-->
47	<ul class="box-design-option" id="choice-text" ng-show="isShowLeftPanel=='text'" ng-include="designPartText">	50	<ul class="box-design-option" id="choice-text" ng-show="isShowLeftPanel=='text'" ng-include="designPartText">
48	</ul>	51	</ul>
49	</div>	52	</div>
50	<div class="design-content col-sm-8">	53	<div class="col-sm-8">
51	<div class="content" ng-style="{'background-color' : tShirtColorCode}">	54	<div class="design-content " id="main-design-content">
52	<canvas id="main-design-container" width="510px" height="620px" class="selection-design lower-canvas">	55	<!--<button ng-click="objectDone()" >OK</button>-->
53		56	<div class="content" id="main-design" ng-style="{'background-color' : tShirtColorCode}">
54	</canvas>	57	<canvas id="main-design-container" class="selection-design lower-canvas" style="width: 100%">
		58	</canvas>
		59	</div>
		60	<div class="agree-design" ng-click="outputDesign()">
		61	<img src="images/agree-design.png" alt="agree design" />
		62	</div>
		63	<div class="trash-design">
		64	<!--<span ng-click="undoCanvas()" class="fa fa-undo"> Undo</span><br>-->
		65	<!--<span ng-click="redoCanvas()" class="fa fa-repeat"> Redo</span><br>-->
		66	<img src="images/trash.png" alt="trash design" />
		67	</div>
55	</div>	68	</div>
56	<div class="agree-design" ng-click="outputDesign()">
57	<img src="images/agree-design.png" alt="agree design" />
58	</div>
59	<div class="trash-design">
60	<!--<span ng-click="undoCanvas()" class="fa fa-undo"> Undo</span><br>-->
61	<!--<span ng-click="redoCanvas()" class="fa fa-repeat"> Redo</span><br>-->
62	<img src="images/trash.png" alt="trash design" />
63	</div>