TRUONG / T-Shats Frontend

Browse Code »

Commit 7e14f17860926ffe490fd6ac7207c31dbaf8619d

Authored by Dang YoungWorld 2016-11-26 13:01:50 +0900

1 parent 0136530e3c

Exists in master and in 1 other branch

Fix reponsive

Showing 7 changed files with 33 additions and 47 deletions Inline Diff

app/scripts/controllers/main.js
app/scripts/controllers/tshirtdesign.js
app/scripts/services/tshirt.js
app/styles/main.css
app/styles/placedesign.css
app/views/main.html
app/views/tshirt-design.html

app/scripts/controllers/main.js

Diff comments View file @ 7e14f17

 define(['app'], function (app) {
 	'use strict';
 	app.controller('MainCtrl', function ($rootScope, $scope, $timeout, $illustration, $t_shirt, $routeParams) {
 		//Define and init var
 		$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;
 		var currentTShirtKey = 0;
 		var placeTShirtKey = '';
 		var tShirtColorFirstKey = 0;
 		$scope.tShirtChoiceBackFrontKey = 'front';
 		$scope.tShirtColorKey = tShirtColorFirstKey;
 		/**
 		 * Get param route
 		 * @type {any}
 		 * @private
 		 */
 		var _routeParams = $routeParams;
 		if(typeof _routeParams.tShirt != 'undefined')
 			currentTShirtKey = _routeParams.tShirt - 1;
 		if(typeof _routeParams.place != 'undefined')
 			placeTShirtKey = _routeParams.place;
-		console.log(placeTShirtKey);
 		/**
 		 * Get all info TShirt
 		 * @param: id
 		 * @return: object
 		 */
-		$scope.placeTshirt = $t_shirt.getTShirtPlace(currentTShirtKey, placeTShirtKey);
+		$rootScope.placeTshirt = $t_shirt.getTShirtPlace(currentTShirtKey, placeTShirtKey);
-		console.log($scope.placeTshirt);
 		$scope.tShirtColor = $t_shirt.getTShirtColor(currentTShirtKey);
 		$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;
 		/**
 		 * Set preview size and position
 		 */
 		function setSizePreViewDesign() {
-			var _widthPreviewDesign = $('#preview-design').width();
 			var _widthTShirtImage = $('.tshirt-image').width();
-			var leftReviewDesign = _widthTShirtImage/2 - (_widthPreviewDesign/2);
+			if(typeof $rootScope.placeTshirt.place == 'undefined')
-			$('#preview-design').css({left: leftReviewDesign});
+				return;
+			var place = $rootScope.placeTshirt.place;
+			switch (place) {
+				case 't_shirt_p_1' :
+					var widthPreview = _widthTShirtImage/2.5;
+					var heihtPreview = _widthTShirtImage/2.5;
+					break;
+				case 't_shirt_p_2' :
+					var widthPreview = _widthTShirtImage/2.5;
+					var heihtPreview = _widthTShirtImage/4.5;
+					break;
+				default:
+					break;
+			}
+			$('#preview-design').css({width: widthPreview, height: heihtPreview});
 		}
 		setSizePreViewDesign();
 		$(window).resize(function () {
 			setSizePreViewDesign();
 		});
 		/**
 		 * Choice color t-shirt
 		 * @param key
 		 */
 		$scope.choiceTShirtColor = function(key) {
 			$scope.tShirtColorKey = key;
 			var tShirtColor = $scope.tShirtColor[key];
 			$rootScope.tShirtColorCode = tShirtColor.code;
 			$scope.tShirtColorName = tShirtColor.name;
 			$scope.tShirtImgFront = tShirtColor.img.front;
 			$scope.tShirtImgBack = tShirtColor.img.back;
 			if($scope.tShirtChoiceBackFrontKey == 'front') {
 				$scope.tShirtImg = $scope.tShirtImgFront;
 			} else {
 				$scope.tShirtImg = $scope.tShirtImgBack;
 			}
 		};
 		/**
 		 * Choice back or front t-shirt
 		 * @param choice
 		 */
 		$scope.choiceTShirtBackFront = function(choice) {
 			if(choice == 'front') {
 				$scope.tShirtImg = $scope.tShirtImgFront;
 			} else {
 				$scope.tShirtImg = $scope.tShirtImgBack;
 			}
 			$scope.tShirtChoiceBackFrontKey = choice;
 		};
 		//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);
 			}
 		};
 		/**
 		 * Open modal design
 		 */
 		$scope.modalTShirtDesign = function() {
 			$('#tshirt-design').modal(
 				{
 					backdrop: 'static',
 					keyboard: false
 				}
 			);
 		};
 		/**
 		 * Close modal design
 		 */
 		$scope.modalClose = function(){
 			$('#tshirt-design').modal('hide');
 		};

app/scripts/controllers/tshirtdesign.js

Diff comments View file @ 7e14f17

 define(['app'], function (app) {
 	//'use strict';
 	app.controller('TshirtdesignCtrl', function ($scope, $rootScope, $window, $timeout, $illustration) {
 		var canvas = new fabric.Canvas('main-design-container');
 		//Set width and height canvas
 		function setSizeCanvas() {
+			console.log($rootScope.placeTshirt);
 			var _modalWidth = $('.modal-dialog').width();
 			var _windowWidth = window.innerWidth;
 			if(_windowWidth > 762) {
 				var _contentCanvasWidth = _modalWidth*8/12 - 100;
 			} else {
 				var _contentCanvasWidth = _windowWidth-70;
 			}
 			canvas.setWidth(_contentCanvasWidth);
 			canvas.setHeight(650);
 		}
 		setSizeCanvas();
 		//Window resize event
 		$(window).resize(function () {
 			setSizeCanvas();
 		});
 		//Custom control
 		fabric.Object.prototype.transparentCorners = true;
 		fabric.Object.prototype.hasRotatingPoint = false;
 		var ctrVisible = {tl: false, ml:false, bl:false, mb: false, br: true, mr: false, tr: true, mt: true, mtr: false};
 		for(key in ctrVisible) {
 			fabric.Object.prototype.setControlVisible(key,ctrVisible[key]);
 		}
 		fabric.Object.prototype.customiseCornerIcons({
 			settings: {
 				borderColor: '#0000ff',
 				cornerSize: 25,
 				cornerShape: 'circle',
 				cornerBackgroundColor: '#0171b4',
 				cornerPadding: 6
 			},
 			mt: {
 				icon: 'images/control-icon/ok.png'
 			},
 			br: {
 				icon: 'images/control-icon/resize.png'
 			},
 			tr: {
 				icon: 'images/control-icon/rotate.png'
 			}
 		});
 		fabric.Canvas.prototype.customiseControls({
 			mt: {
 				cursor: 'pointer',
 				action: function(e, target) {
 					fabric.Object.prototype.selectable = false;
 					canvas.deactivateAll();
 					delete currentObj;
 					$scope.designTextValue = '';
 					$timeout(function(){
 						fabric.Object.prototype.selectable = true;
 					},20);
 				}
 			},
 			br: {
 			},
 			tr: {
 				action: 'rotate',
 				cursor: 'crosshair'
 			}
 		});
 		canvas.on({
 			'object:added'      : onIllustrationAdded,
 			'object:moving'     : onIllustrationMoving,
 			'object:scaling'    : onIllustrationChange,
 			'object:rotating'   : onIllustrationChange,
 			'object:selected'   : onObjectSelected,
 			'object:modified'   : onIllustrationModifield,
 			'selection:cleared' : onObjectOut,
 		});
 		var currentObj;
 		var listObj = [];
 		var stateObj = [];
 		var indexCurr = 0;
 		var indexCurr2 = 0;
 		var actionObj = false;
 		var refreshObj = true;
 		var spacingNum = 0;
 		$scope.itemFont = 0;
 		$scope.showDesignTab = function(tab){
 			canvas.deactivateAll().renderAll();
 			$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
 						});
 					},1000);
 					break;
 				}
 				case 'text': {
 					break;
 				}
 			}
 		};
 		$scope.showDesignTab('default');
 		function onIllustrationAdded(options){
 			var object = options.target;
 		    if (actionObj === true) {
 		        stateObj = [stateObj[indexCurr2]];
 		        listObj = [listObj[indexCurr2]];
 		        actionObj = false;
 		        console.log(stateObj);
 		        indexCurr = 1;
 		    }
 		    object.saveState();
 		    console.log(object.originalState);
 		    stateObj[indexCurr] = JSON.stringify(object.originalState);
 		    listObj[indexCurr] = object;
 		    indexCurr++;
 		    indexCurr2 = indexCurr - 1;
 		    refreshObj = true;
 		}
 		function onIllustrationModifield(options){
 			$('.object-border').hide();
 			//
 		    var pointer = canvas.getPointer(options.e);
 			if (pointer.x >= 567 && pointer.y >= 620 && pointer.x <= 600 && pointer.y <= 670){
 				canvas.getActiveObject().remove();
 				$('.design-content .trash-design img').attr({'src':'images/trash.png'});
 				return;
 			}
 			//
 			var objOffset = canvas.getActiveObject().getBoundingRect();
 			var cH = canvas.height, cW = canvas.width, H0 = 20, W0 = 20;
 			//console.log(objOffset,canvas.height,canvas.width);
 			if (objOffset.left<W0-objOffset.width || objOffset.left>cW-W0 || objOffset.top<H0-objOffset.height || objOffset.top>cH-H0){
 				if (confirm('削除してもよろしいですか')){
 					canvas.getActiveObject().remove();
 				}else{
 					undoCanvas();
 					return;
 				}
 			}
 			var object = options.target;
 		    if (actionObj === true) {
 		        stateObj = [stateObj[indexCurr2]];
 		        listObj = [listObj[indexCurr2]];
 		        actionObj = false;
 		        console.log(stateObj);
 		        indexCurr = 1;
 		    }
 		    object.saveState();
 		    stateObj[indexCurr] = JSON.stringify(object.originalState);
 		    listObj[indexCurr] = object;
 		    indexCurr++;
 		    indexCurr2 = indexCurr - 1;
 		    refreshObj = true;
 		}
 		function onIllustrationChange(options) {
 		}
 		function onIllustrationMoving(options) {
 			var object = options.target;
 			var pointer = canvas.getPointer(options.e);
 			if (pointer.x >= 567 && pointer.y >= 620 && pointer.x <= 600 && pointer.y <= 670){
 				$('.design-content .trash-design img').attr({'src':'images/trash-hover.png'});
 			}else{
 				$('.design-content .trash-design img').attr({'src':'images/trash.png'});
 			}
 			console.log(object.oCoords,object.originalState);
 			object.setCoords();
 			var Coords = object.oCoords;
 			var diffX = 55, diffY=50;
 			var xAngle = Math.cos(object.getAngle() * (Math.PI / 180))/2;
 			var yAngle = Math.sin(object.getAngle() * (Math.PI / 180))/2;
 			$('#object-border-left').css({'height':Math.ceil(object.originalState.height*object.scaleY), top: Coords.tl.y+diffY, left: Coords.tl.x+diffX});
 			$('#object-border-right').css({'height':Math.ceil(object.originalState.height*object.scaleY), top: Coords.tr.y+diffY, left: Coords.tr.x+diffX});
 			$('#object-border-top').css({'width':Math.ceil(object.originalState.width*object.scaleX), top: Coords.tl.y+diffY, left: Coords.tl.x+diffX});
 			$('#object-border-bottom').css({'width':Math.ceil(object.originalState.width*object.scaleX), top: Coords.bl.y+diffY, left: Coords.bl.x+diffX});
 			$('.object-border').css({
 				'-ms-transform': 'rotate('+object.getAngle()+'deg)', /* IE 9 */
     			'-webkit-transform': 'rotate('+object.getAngle()+'deg)', /* Safari */
     			'transform': 'rotate('+object.getAngle()+'deg)' /* Standard syntax */
 			});
 			$('.object-border').show();
 		}
 		function onObjectOut() {
 			delete currentObj;
 			$scope.designTextValue = '';
 		}
 		function undoCanvas() {
 		    if (indexCurr <= 0) {
 		        indexCurr = 0;
 		        return;
 		    }
 		    if (refreshObj === true) {
 		        indexCurr--;
 		        refreshObj = false;
 		    }
 		    console.log('undo');
 		    indexCurr2 = indexCurr - 1;
 		    currentObj = listObj[indexCurr2];
 		    if (currentObj){
 		    	currentObj.setOptions(JSON.parse(indexCurr[indexCurr2]));
 		    }
 		    indexCurr--;
 		    currentObj.setCoords();
 		    canvas.renderAll();
 		    actionObj = true;
 		}
 		function redoCanvas() {
 		    actionObj = true;
 		    if (indexCurr >= stateObj.length - 1) {
 		        return;
 		    }
 		    console.log('redo');
 		    indexCurr2 = indexCurr + 1;
 		    currentObj = listObj[indexCurr2];
 		    currentObj.setOptions(JSON.parse(indexCurr[indexCurr2]));
 		    indexCurr++;
 		    currentObj.setCoords();
 		    canvas.renderAll();
 		}
 		$scope.canvasClearAll = function(){
 			if (confirm('配置されたすべての文字や画像を消去します')){
 				canvas.clear();
 			}
 		}
 		function onObjectSelected(options) {
 			var currentObj = options.target;
 			$scope.typeObject = currentObj.type;
 			switch ($scope.typeObject) {
 				case 'i-text' :
 					$rootScope.isShowLeftPanel = 'text';
 					var text = currentObj.text;
 					if(text != '') {
 						$scope.designText = text;
 						$scope.designTextValue = text;
 					}
 					break;
 				case 'path-group' :
 					$rootScope.isShowLeftPanel = 'illustration';
 					break;
 				case 'image':
 					$rootScope.isShowLeftPanel = 'image';
 					break;
 				default :
 					$rootScope.isShowLeftPanel = 'default';
 					break;
 			}
 			$rootScope.safeApply();
 		}
 		// Illustration process
 		$scope.changeIllustrationCategory = function(currentIllustration){
 			$scope.currentIllustrationCate = $illustration.getList(currentIllustration);
 		};
 		$scope.insertSvg = function(item){
 			fabric.loadSVGFromURL(item.path, function(objects, options) {
 				var shape = fabric.util.groupSVGElements(objects, options);
 				canvas.add(shape.scale(0.6));
 				shape.set({ left: 150, top: 200 }).setCoords();
 				canvas.renderAll();
 				canvas.setActiveObject(shape);
 			});
 		};
 		// color pattern
 		$scope.listColorPatterns = [
 			'#000000','#ffff00','#ff6600','#ff0000','#ff6262','#ffa19c','#ff9933','#c45d01','#5d2b03','#ffffcc',
 			'#ffff99','#ffd500','#c0db50','#21a52a','#00663f','#abfcab','#36ffaa','#89eaea','#00938c','#005450',
 			'#0badff','#006cff','#839aff','#0410a0','#ffb2ff','#f93fff','#6600ca','#ff6699','#999999','#666666',
 			'#333333'
 		];
 		$scope.changeColorPattern = function(color){
 			var obj = canvas.getActiveObject();
 			if (!color){
 				color = 'none';
 			}
 			if (obj instanceof fabric.PathGroup) {
 			  obj.getObjects().forEach(function(o) {
 			  	o.fill = color;
 			  });
 			}
 			else {
 			  obj.fill = color;
 			}
 			canvas.renderAll();
 		};
 		//Font
 		$scope.listFontFamily = [
 			{
 				name : 'GN Aki iro Sesami Cookies',
 				slug : 'gn_aki_iro_sesami_cookies',
 			},
 			{
 				name : 'GN-Fuyu-iro_Script_Bold',
 				slug : 'gn_fuyu_iro_script_bold'
 			},
 			{
 				name : 'GN Killgothic U Kanana',
 				slug : 'gn_killgothic_u_kanana'
 			},
 			{
 				name : 'GN-Kin-iro_Alphabet_Cookies',
 				slug : 'gn_kin_iro_alphabet_cookies'
 			},
 			{
 				name : 'GN-Kin-iro_SansSerif',
 				slug : 'gn_kin_iro_sansserif'
 			},
 			{
 				name : 'GN-Koharuiro_Sunray',
 				slug : 'gn_koharuiro_sunray'
 			},
 			{
 				name : 'GN-Kyu-pin',
 				slug : 'gn_kyu_pin'
 			},
 			{
 				name : 'gn_natsu_iro_schedule',
 				slug : 'gn_natsu_iro_schedule'
 			},
 			{
 				name : 'gnkana_kiniro_sansserif_l',
 				slug : 'gnkana_kiniro_sansserif_l'
 			},
 			{
 				name : 'gnkana_kiniro_sansserif_st',
 				slug : 'gnkana_kiniro_sansserif_st'
 			},
 			{
 				name : 'gnkana_kon_iro_nightfall',
 				slug : 'gnkana_kon_iro_nightfall'
 			},
 			{
 				name : 'ms_gothic',
 				slug : 'ms_gothic'
 			},
 			{
 				name : 'msmincho',
 				slug : 'msmincho'
 			},
 			{
 				name : 'ufonts_com_ms_pgothic',
 				slug : 'ufonts_com_ms_pgothic'
 			}
 		];
 		// layer process
 		$scope.layerProcess = function(mode) {
 			// console.log('layerProcess');
 			var activeObject = canvas.getActiveObject();
-			console.log(activeObject);
 			if (activeObject){
 				switch (mode) {
 					case 1:
 						activeObject.bringForward();
 						break;
 					case 2:
 						activeObject.sendBackwards();
 						break;
 					case 3:
 						activeObject.bringToFront();
 						break;
 					case 4:
 						activeObject.sendToBack();
 						break;
 				}
 				canvas.deactivateAll().renderAll();
 			}
 		};
 		$scope.focusInputText = function(text) {
 			currentObj = canvas.getActiveObject();
 			if(typeof currentObj == 'undefined' || currentObj == null) {
 				$scope.iText = new fabric.IText('', {
 					left: 150,
 					top: 200,
 					fontFamily: typeof $scope.itemFont != 'undefined' ? $scope.listFontFamily[$scope.itemFont].slug : $scope.listFontFamily[0].slug,
 					fontWeight: 'normal',
 					textAlign:  'center',
 					fontSize: 28,
 					fill: 'black',
 					editable: false
 				});
 			} else {
 				if(currentObj.type != 'i-text') {
 					$scope.iText = new fabric.IText('', {
 						left: 150,
 						top: 200,
 						fontFamily: typeof $scope.itemFont != 'undefined' ? $scope.listFontFamily[$scope.itemFont].slug : $scope.listFontFamily[0].slug,
 						fontWeight: 'normal',
 						textAlign:  'center',
 						fontSize: 28,
 						fill: 'black',
 						editable: false
 					});
 				} else{
 					$scope.iText = currentObj;
 				}
 			}
 		};
 		//Design text
 		$scope.inputText = function(e) {
 			if(typeof $scope.iText != "undefined") {
 				var iText = $scope.iText;
 				iText.text = e;
 				canvas.add(iText);
 				canvas.renderAll();
 				canvas.setActiveObject(iText);
 			}
 		};
 		$scope.setFontFamily = function(font,index) {
 			$scope.itemFont = index;
 			if(canvas.getActiveObject()) {
 				var currentObj = canvas.getActiveObject();
 				if(currentObj.type == 'i-text') {
 					currentObj.set('fontFamily', font);
 					canvas.renderAll();
 					canvas.setActiveObject(currentObj);
 				}
 			}
 		};
 		//Set letter spacing text
 		$scope.setLetterSpacingText = function(e) {
 			if(canvas.getActiveObject()) {
 				var currentObj = canvas.getActiveObject();
 				if(currentObj.type == 'i-text') {
 					if(e == 'plus')
 						spacingNum = spacingNum + 30;
 					else if (spacingNum >= -30){
 						spacingNum = spacingNum - 30;
 					}
 					if(e == 'default')
 						spacingNum = 0;
 					currentObj.set('charSpacing', spacingNum);
 					canvas.renderAll();
 					canvas.setActiveObject(currentObj);
 				}
 			}
 		};
 		/**** process insert image */
 		if (typeof($window.localStorage.recentImages) != 'undefined'){
 			$scope.recentImages = JSON.parse($window.localStorage.recentImages);
 		}else{
 			$scope.recentImages = {};
 		}
 		var addToRecentImage = function(name, data){
 			if (typeof($window.localStorage.recentImages) != 'undefined'){
 				$scope.recentImages = JSON.parse($window.localStorage.recentImages);
 			}else{
 				$scope.recentImages = {};
 			}
 			if (typeof($scope.recentImages[name]) == 'undefined'){
 				var ii=0;
 				var II = 0;
 				for(var item in $scope.recentImages){
 					if (II==0){
 						II = item;
 					}
 					ii++;
 				}
 				if (ii>16 && II!=0){
 					delete $scope.recentImages[II];
 				}
 				$scope.recentImages[name] = data;
 				$window.localStorage.recentImages = JSON.stringify($scope.recentImages);
 			}
 		}
 		$scope.chooseImage = function(e){//console.log(e);
 			if (e.target.files[0] && e.target.files[0].size > 5*1024*1024){
 				alert('アップロードできませんでした');
 				return;
 			}
 			var reader = new FileReader();
 		    reader.onload = function (event) {
 		    	addToRecentImage ($('#imgLoader').val(), event.target.result);
 		        var imgObj = new Image();//console.log($('#imgLoader').val());
 		        imgObj.src = event.target.result;
 		        imgObj.onload = function () {
 		            // start fabricJS stuff
 		            var image = new fabric.Image(imgObj);
 		            image.set({
 		                left: 50,
 		                top: 50
 		            });
 		            //image.scale(getRandomNum(0.1, 0.25)).setCoords();
 		            image.scaleToWidth(200);
 		            canvas.add(image);
 		        }
 		    }
     		reader.readAsDataURL(e.target.files[0]);
 		}
 		$scope.insertRecentImage = function(data){
 	        var imgObj = new Image();
 	        imgObj.src = data;
 	        imgObj.onload = function () {
 	            // start fabricJS stuff
 	            var image = new fabric.Image(imgObj);
 	            image.set({
 	                left: 50,
 	                top: 50
 	            });
 	            image.scaleToWidth(200);
 	            canvas.add(image);
 	        }
 		}
 		//Traslation text
 		$scope.rotateText =  function(style) {
 			if(canvas.getActiveObject()) {
 				var currentObj = canvas.getActiveObject();
 				if(currentObj.type == 'i-text') {
 					currentObj.set('rotate', Math.PI / 4);
 					canvas.renderAll();
 					canvas.setActiveObject(currentObj);
 				}
 			}
 		};
 		/* Process output */
 		$scope.outputDesign = function(){
 			$rootScope.outputImage = canvas.toDataURL('png');
 			// console.log();
 			$('#tshirt-design').modal('hide');
 		}
 	});
 });

app/scripts/services/tshirt.js

Diff comments View file @ 7e14f17

1	define(['app'], function (app) {	1	define(['app'], function (app) {
2	'use strict';	2	'use strict';
3		3
4	app.factory('$t_shirt', function ($http, $rootScope) {	4	app.factory('$t_shirt', function ($http, $rootScope) {
5	var DATA = [	5	var DATA = [
6	{	6	{
7	info: {	7	info: {
8	name: 'T-Shirt 1',	8	name: 'T-Shirt 1',
9	description: '',	9	description: '',
10	price: '',	10	price: '',
11	gender: '',	11	gender: '',
12	image: ''	12	image: ''
13	},	13	},
14	place_design: {	14	place_design: {
15	place_1 : {	15	place_1 : {
16	'face' : 'front',	16	'face' : 'front',
17	'place' : 't_shirt_p_1'	17	'place' : 't_shirt_p_1'
18	},	18	},
19	place_2 : {	19	place_2 : {
20	'face' : 'back',	20	'face' : 'front',
21	'place' : 't_shirt_p_2'	21	'place' : 't_shirt_p_2'
22	},	22	},
23	place_3 : {	23	place_3 : {
24	'face' : 'front',	24	'face' : 'front',
25	'place' : 't_shirt_p_3'	25	'place' : 't_shirt_p_3'
26	}	26	}
27	},	27	},
28	color: [	28	color: [
29	{	29	{
30	name: 'color: 2E GRAY',	30	name: 'color: 2E GRAY',
31	code: '#d0d0cd',	31	code: '#d0d0cd',
32	img: {	32	img: {
33	front: 'images/t-shirt/1/gray/front.png',	33	front: 'images/t-shirt/1/gray/front.png',
34	back: 'images/t-shirt/1/gray/back.png'	34	back: 'images/t-shirt/1/gray/back.png'
35	},	35	},
36	},	36	},
37	{	37	{
38	name: 'color: 00 BLACK',	38	name: 'color: 00 BLACK',
39	code: '#23282e',	39	code: '#23282e',
40	img: {	40	img: {
41	front: 'images/t-shirt/1/black/front.png',	41	front: 'images/t-shirt/1/black/front.png',
42	back: 'images/t-shirt/1/black/back.png'	42	back: 'images/t-shirt/1/black/back.png'
43	},	43	},
44	},	44	},
45	{	45	{
46	name: 'color: 3B ORANGE',	46	name: 'color: 3B ORANGE',
47	code: '#e2583b',	47	code: '#e2583b',
48	img: {	48	img: {
49	front: 'images/t-shirt/1/orange/front.png',	49	front: 'images/t-shirt/1/orange/front.png',
50	back: 'images/t-shirt/1/orange/back.png'	50	back: 'images/t-shirt/1/orange/back.png'
51	},	51	},
52	}	52	}
53	]	53	]
54	},	54	},
55	{	55	{
56	info: {	56	info: {
57	name: 'T-Shirt 2',	57	name: 'T-Shirt 2',
58	description: '',	58	description: '',
59	price: '',	59	price: '',
60	gender: '',	60	gender: '',
61	image: ''	61	image: ''
62	},	62	},
63	place_design: {	63	place_design: {
64	place_1 : {	64	place_1 : {
65	'face' : 'front',	65	'face' : 'front',
66	'place' : 't_shirt_p_1'	66	'place' : 't_shirt_p_1'
67	},	67	},
68	place_2 : {	68	place_2 : {
69	'face' : 'front',	69	'face' : 'front',
70	'place' : 't_shirt_p_2'	70	'place' : 't_shirt_p_2'
71	}	71	}
72	},	72	},
73	color: [	73	color: [
74	{	74	{
75	name: 'color:03 GRAY',	75	name: 'color:03 GRAY',
76	code: '#b2b4b2',	76	code: '#b2b4b2',
77	img: {	77	img: {
78	front: 'images/t-shirt/2/gray/front.png',	78	front: 'images/t-shirt/2/gray/front.png',
79	back: 'images/t-shirt/2/gray/back.png'	79	back: 'images/t-shirt/2/gray/back.png'
80	},	80	},
81	},	81	},
82	{	82	{
83	name: 'color:08 DARK GRAY',	83	name: 'color:08 DARK GRAY',
84	code: '#37383d',	84	code: '#37383d',
85	img: {	85	img: {
86	front: 'images/t-shirt/2/darkgray/front.png',	86	front: 'images/t-shirt/2/darkgray/front.png',
87	back: 'images/t-shirt/2/darkgray/back.png'	87	back: 'images/t-shirt/2/darkgray/back.png'
88	},	88	},
89	},	89	},
90	{	90	{
91	name: 'color:09 BLACK',	91	name: 'color:09 BLACK',
92	code: '#292929',	92	code: '#292929',
93	img: {	93	img: {
94	front: 'images/t-shirt/2/black/front.png',	94	front: 'images/t-shirt/2/black/front.png',
95	back: 'images/t-shirt/2/black/back.png'	95	back: 'images/t-shirt/2/black/back.png'
96	},	96	},
97	},	97	},
98	{	98	{
99	name: 'color:12 PINK',	99	name: 'color:12 PINK',
100	code: '#ca6965',	100	code: '#ca6965',
101	img: {	101	img: {
102	front: 'images/t-shirt/2/pink/front.png',	102	front: 'images/t-shirt/2/pink/front.png',
103	back: 'images/t-shirt/2/pink/back.png'	103	back: 'images/t-shirt/2/pink/back.png'
104	},	104	},
105	},	105	},
106	{	106	{
107	name: 'color:18 WINE',	107	name: 'color:18 WINE',
108	code: '#661e2e',	108	code: '#661e2e',
109	img: {	109	img: {
110	front: 'images/t-shirt/2/wine/front.png',	110	front: 'images/t-shirt/2/wine/front.png',
111	back: 'images/t-shirt/2/wine/back.png'	111	back: 'images/t-shirt/2/wine/back.png'
112	},	112	},
113	},	113	},
114	{	114	{
115	name: 'color:26 ORANGE',	115	name: 'color:26 ORANGE',
116	code: '#bf6037',	116	code: '#bf6037',
117	img: {	117	img: {
118	front: 'images/t-shirt/2/orange/front.png',	118	front: 'images/t-shirt/2/orange/front.png',
119	back: 'images/t-shirt/2/orange/back.png'	119	back: 'images/t-shirt/2/orange/back.png'
120	},	120	},
121	},	121	},
122	{	122	{
123	name: 'color:57 OLIVE',	123	name: 'color:57 OLIVE',
124	code: '#4c442e',	124	code: '#4c442e',
125	img: {	125	img: {
126	front: 'images/t-shirt/2/olive/front.png',	126	front: 'images/t-shirt/2/olive/front.png',
127	back: 'images/t-shirt/2/olive/back.png'	127	back: 'images/t-shirt/2/olive/back.png'
128	},	128	},
129	},	129	},
130	{	130	{
131	name: 'color:58 DARK GREEN',	131	name: 'color:58 DARK GREEN',
132	code: '#204344',	132	code: '#204344',
133	img: {	133	img: {
134	front: 'images/t-shirt/2/darkgreen/front.png',	134	front: 'images/t-shirt/2/darkgreen/front.png',
135	back: 'images/t-shirt/2/darkgreen/back.png'	135	back: 'images/t-shirt/2/darkgreen/back.png'
136	},	136	},
137	},	137	},
138	{	138	{
139	name: 'color:69 NAVY',	139	name: 'color:69 NAVY',
140	code: '#2a2d3c',	140	code: '#2a2d3c',
141	img: {	141	img: {
142	front: 'images/t-shirt/2/navi/front.png',	142	front: 'images/t-shirt/2/navi/front.png',
143	back: 'images/t-shirt/2/navi/back.png'	143	back: 'images/t-shirt/2/navi/back.png'
144	},	144	},
145	}	145	}
146	]	146	]
147	}	147	}
148	];	148	];
149		149
150	return {	150	return {
151	getTShirtColor : function(key) {	151	getTShirtColor : function(key) {
152	if (typeof DATA[key] == 'undefined'){	152	if (typeof DATA[key] == 'undefined'){
153	return [];	153	return [];
154	}	154	}
155	return DATA[key]['color'];	155	return DATA[key]['color'];
156	},	156	},
157	getTShirtPlace : function(key, place) {	157	getTShirtPlace : function(key, place) {
158	if(typeof DATA[key].place_design[place] == 'undefined' \|\| typeof DATA[key].place_design[place] == 'null')	158	if(typeof DATA[key].place_design[place] == 'undefined' \|\| typeof DATA[key].place_design[place] == 'null')
159	return [];	159	return [];
160		160
161	return DATA[key].place_design[place];	161	return DATA[key].place_design[place];
162	},	162	},
163		163
164	getAll: function(){	164	getAll: function(){
165	return DATA;	165	return DATA;
166	},	166	},
167	getList: function(category){	167	getList: function(category){
168	if (typeof DATA[category] == 'undefined'){	168	if (typeof DATA[category] == 'undefined'){
169	return [];	169	return [];
170	}	170	}
171	return DATA[category];	171	return DATA[category];
172	}	172	}
173	};	173	};
174	});	174	});
175	});	175	});
176		176

app/styles/main.css

Diff comments View file @ 7e14f17

 /* Space out content a bit */
 @import "../fonts/font.css";
 @import "../fonts/font_canvas/font-canvas.css";
 @import "placedesign.css";
 html{
   height:100%;
   width:100%;
 }
 body {
   font-family: 'Hiragino Kaku Gothic Pro', sans-serif;
   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 8px 4px 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%;
 }
 #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: 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: 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 0;
   /*width: 100%;*/
 }
 .tshirt-design-container .design-content .content{
   width: 100%;
   height: 100%;
   min-height: 650px;
   background-color: #f0efea;
   padding: 40px 40px;
   /*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;
 }
 .object-border{
   position: absolute;
   background-color: rgb(0, 108, 255);
   border: 0;
   display:none;
   transform-origin: 0% 0%;
 }
 #object-border-top, #object-border-bottom{
   height: 2px;
 }
 #object-border-right, #object-border-left{
   width: 2px;
 }
 /*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) {
-}
-@media (max-width: 990px) {
-}
-@media (max-width: 762px) and (min-width: 600px) {
-}
 @media (max-width: 762px) {
   .modal-dialog{
     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/styles/placedesign.css

Diff comments View file @ 7e14f17

1	#preview-design {	1	#preview-design {
2	position: absolute;	2	position: absolute;
3	width: 190px;
4	height: 200px;
5	border: dashed 2px #DDD;	3	border: dashed 2px #DDD;
6	top: 180px;
7	/left: 200px;/
8	cursor: pointer;	4	cursor: pointer;
9	}	5	}
10		6
11	#preview-design img {	7	#preview-design img {
12	width: 150px;	8	width: 150px;
13	}	9	}
14		10
15	@media (max-width: 1200px) {
16	#preview-design {
17	left: 155px;
18	}
19	}
20
21	@media (max-width: 990px) {
22	#preview-design {
23	/left: 115px;/
24	width: 110px;
25	height: 160px;
26	top: 110px;
27	}
28	}
29
30	.t_shirt_p_1{	11	.t_shirt_p_1{
31		12	left: 50%;
		13	top: 50%;

app/views/main.html

Diff comments View file @ 7e14f17

1	<div ng-controller="MainCtrl" class="col-sm-10 col-sm-offset-1" id="tshirt-container">	1	<div ng-controller="MainCtrl" class="col-sm-10 col-sm-offset-1" id="tshirt-container">
2	<div class="row">	2	<div class="row">
3	<header>	3	<header>
4	<div class="logo">	4	<div class="logo">
5	<img src="images/logo_mobile_world.png" alt="Logo Mobile World" />	5	<img src="images/logo_mobile_world.png" alt="Logo Mobile World" />
6	MOBILE WORLD	6	MOBILE WORLD
7	</div>	7	</div>
8	</header>	8	</header>
9	<nav class="clearfix">	9	<nav class="clearfix">
10	<div class="col-sm-12">	10	<div class="col-sm-12">
11	<h2 class="pull-left">加工箇所を選択してデザインしてください。</h2>	11	<h2 class="pull-left">加工箇所を選択してデザインしてください。</h2>
12	<ul class="pull-right">	12	<ul class="pull-right">
13	<li><a href="#">商品に戻る</a><i class="fa fa-caret-left" aria-hidden="true"></i></li>	13	<li><a href="#">商品に戻る</a><i class="fa fa-caret-left" aria-hidden="true"></i></li>
14	<li><a href="#">加工方法に戻る</a><i class="fa fa-caret-left" aria-hidden="true"></i></li>	14	<li><a href="#">加工方法に戻る</a><i class="fa fa-caret-left" aria-hidden="true"></i></li>
15	<li class="action">デザインする</li>	15	<li class="action">デザインする</li>
16	</ul>	16	</ul>
17	</div>	17	</div>
18	</nav>	18	</nav>
19	<article class="clearfix">	19	<article class="clearfix">
20	<aside class="col-sm-5">	20	<aside class="col-sm-5">
21	<div class="step">	21	<div class="step">
22	<div class="title">	22	<div class="title">
23	1. デザインを作る	23	1. デザインを作る
24	</div>	24	</div>
25	<div class="step-box">	25	<div class="step-box">
26	<div class="tshirt-design clearfix">	26	<div class="tshirt-design clearfix">
27	<div class="icon">	27	<div class="icon">
28	<img src="images/t-shirt_icon/tshirt1.gif" alt="icon t-shirt" />	28	<img src="images/t-shirt_icon/tshirt1.gif" alt="icon t-shirt" />
29	</div>	29	</div>
30	<div class="name">	30	<div class="name">
31	背中背中 (28x22)	31	背中背中 (28x22)
32	</div>	32	</div>
33	<div class="action">	33	<div class="action">
34	<button class="red" ng-click="modalTShirtDesign()">	34	<button class="red" ng-click="modalTShirtDesign()">
35	<i class="fa fa-caret-right" aria-hidden="true"></i> デザインを作る	35	<i class="fa fa-caret-right" aria-hidden="true"></i> デザインを作る
36	</button>	36	</button>
37	</div>	37	</div>
38	</div>	38	</div>
39	</div>	39	</div>
40	</div>	40	</div>
41		41
42	<!-- BREAK DOWN-->	42	<!-- BREAK DOWN-->
43	<div class="text-center break-down">	43	<div class="text-center break-down">
44	<img src="images/bg_step_arrow.gif" alt="arrow" />	44	<img src="images/bg_step_arrow.gif" alt="arrow" />
45	</div>	45	</div>
46		46
47	<!-- STEP 2-->	47	<!-- STEP 2-->
48	<div class="step">	48	<div class="step">
49	<div class="title">	49	<div class="title">
50	2.アイテムカラーを変更する	50	2.アイテムカラーを変更する
51	</div>	51	</div>
52	<div class="step-box clearfix">	52	<div class="step-box clearfix">
53	<div class="tshirt-color">	53	<div class="tshirt-color">
54	<ul class="choice-color clearfix">	54	<ul class="choice-color clearfix">
55	<li ng-repeat="(key,color) in tShirtColor" ng-click="choiceTShirtColor(key)" ng-class="key == tShirtColorKey ? 'action' : ''">	55	<li ng-repeat="(key,color) in tShirtColor" ng-click="choiceTShirtColor(key)" ng-class="key == tShirtColorKey ? 'action' : ''">
56	<div ng-style="{'background-color' : color.code}"></div>	56	<div ng-style="{'background-color' : color.code}"></div>
57	</li>	57	</li>
58	</ul>	58	</ul>
59	<div class="color-name" ng-bind="tShirtColorName"></div>	59	<div class="color-name" ng-bind="tShirtColorName"></div>
60	<div class="view-more">	60	<div class="view-more">
61	在庫確認 <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>	61	在庫確認 <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
62	</div>	62	</div>
63	</div>	63	</div>
64	</div>	64	</div>
65	</div>	65	</div>
66		66
67	<!-- BREAK DOWN-->	67	<!-- BREAK DOWN-->
68	<div class="text-center break-down">	68	<div class="text-center break-down">
69	<img src="images/bg_step_arrow.gif" alt="arrow" />	69	<img src="images/bg_step_arrow.gif" alt="arrow" />
70	</div>	70	</div>
71		71
72	<!-- STEP 3-->	72	<!-- STEP 3-->
73	<div class="step">	73	<div class="step">
74	<div class="step-box clearfix">	74	<div class="step-box clearfix">
75	<div class="tshirt-saveorder">	75	<div class="tshirt-saveorder">
76	<div class="clearfix">	76	<div class="clearfix">
77	<div class="action">	77	<div class="action">
78	<button class="white">	78	<button class="white">
79	<div class="text">	79	<div class="text">
80	このデザインを保存する	80	このデザインを保存する
81	</div>	81	</div>
82	<div class="arrow">	82	<div class="arrow">
83	<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>	83	<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
84	</div>	84	</div>
85	</button>	85	</button>
86	</div>	86	</div>
87	<div class="action">	87	<div class="action">
88	<button class="red">	88	<button class="red">
89	<div class="text">	89	<div class="text">
90	このデザインで注文する	90	このデザインで注文する
91	</div>	91	</div>
92	<div class="arrow clearfix">	92	<div class="arrow clearfix">
93	<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>	93	<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
94	</div>	94	</div>
95	</button>	95	</button>
96	</div>	96	</div>
97	</div>	97	</div>
98	<div class="notice">	98	<div class="notice">
99	デザインを保存するには、ログインしてください	99	デザインを保存するには、ログインしてください
100	</div>	100	</div>
101	</div>	101	</div>
102	</div>	102	</div>
103		103
104	<!-- BREAL LINE-->	104	<!-- BREAL LINE-->
105	<div class="text-center break-line">	105	<div class="text-center break-line">
106	<hr />	106	<hr />
107	</div>	107	</div>
108		108
109	<!-- STEP 4-->	109	<!-- STEP 4-->
110	<div class="step">	110	<div class="step">
111	<div class="title-notice">	111	<div class="title-notice">
112	商品・デザインの変更はこちら <span class="require">作業中のデザインは破棄されます</span>	112	商品・デザインの変更はこちら <span class="require">作業中のデザインは破棄されます</span>
113	</div>	113	</div>
114	<div class="step-box">	114	<div class="step-box">
115	<div class="change-design">	115	<div class="change-design">
116	<table>	116	<table>
117	<tr>	117	<tr>
118	<td class="text-center">商品</td>	118	<td class="text-center">商品</td>
119	<td>MENドライカノコポロシャツ・ポケツキ半袖（ホワイト）</td>	119	<td>MENドライカノコポロシャツ・ポケツキ半袖（ホワイト）</td>
120	<td class="text-right">	120	<td class="text-right">
121	<button class="brown"><i class="fa fa-caret-right" aria-hidden="true"></i> 変更</button>	121	<button class="brown"><i class="fa fa-caret-right" aria-hidden="true"></i> 変更</button>
122	</td>	122	</td>
123	</tr>	123	</tr>
124	<tr>	124	<tr>
125	<td width="10%" class="text-center">加工方法</td>	125	<td width="10%" class="text-center">加工方法</td>
126	<td width="70%">シルク：胸中央 (27×27)</td>	126	<td width="70%">シルク：胸中央 (27×27)</td>
127	<td width="20%" class="text-right">	127	<td width="20%" class="text-right">
128	<button class="brown"><i class="fa fa-caret-right" aria-hidden="true"></i> 変更</button>	128	<button class="brown"><i class="fa fa-caret-right" aria-hidden="true"></i> 変更</button>
129	</td>	129	</td>
130	</tr>	130	</tr>
131	</table>	131	</table>
132	</div>	132	</div>
133	</div>	133	</div>
134	</div>	134	</div>
135	<!-- STEP 5- finish-->	135	<!-- STEP 5- finish-->
136	<div class="step">	136	<div class="step">
137	<div class="finish-design">	137	<div class="finish-design">
138	<button class="white">	138	<button class="white">
139	自分で保存したデザインを呼び出す <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>	139	自分で保存したデザインを呼び出す <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
140	</button>	140	</button>
141	</div>	141	</div>
142		142
143	</div>	143	</div>
144	</div>	144	</div>
145	</aside>	145	</aside>
146	<section id="tshirt-content" class="col-sm-7 text-center">	146	<section id="tshirt-content" class="col-sm-7 text-center">
147	<div class="switch-border-design">	147	<div class="switch-border-design">
148	<i class="fa fa-square-o" aria-hidden="true"></i> 枠線を消す	148	<i class="fa fa-square-o" aria-hidden="true"></i> 枠線を消す
149	</div>	149	</div>
150	<div class="tshirt-image">	150	<div class="tshirt-image">
151	<img ng-src="{{ tShirtImg }}" alt="" />	151	<img ng-src="{{ tShirtImg }}" alt="" />
152	<div id="preview-design" ng-show="placeTshirt.face === tShirtChoiceBackFrontKey" class="{{ placeTshirt.place }}" ng-click="modalTShirtDesign()">	152	<div class="{{ placeTshirt.place }}" id="preview-design" ng-show="placeTshirt.face === tShirtChoiceBackFrontKey" ng-click="modalTShirtDesign()">
153	<img ng-src="{{outputImage}}" ng-show="outputImage"/>	153	<img ng-src="{{outputImage}}" ng-show="outputImage"/>
154	</div>	154	</div>
155	</div>	155	</div>
156	<div class="tshirt-choice">	156	<div class="tshirt-choice">
157	<ul>	157	<ul>
158	<li ng-class="'front' === tShirtChoiceBackFrontKey ? 'focus' : ''">	158	<li ng-class="'front' === tShirtChoiceBackFrontKey ? 'focus' : ''">
159	<div>前</div>	159	<div>前</div>
160	<div class="image" ng-click="choiceTShirtBackFront('front')">	160	<div class="image" ng-click="choiceTShirtBackFront('front')">
161	<img ng-src="{{ tShirtImgFront }}" alt="" />	161	<img ng-src="{{ tShirtImgFront }}" alt="" />
162	</div>	162	</div>
163		163
164	</li>	164	</li>
165	<li ng-class="'back' === tShirtChoiceBackFrontKey ? 'focus' : ''">	165	<li ng-class="'back' === tShirtChoiceBackFrontKey ? 'focus' : ''">
166	<div>後</div>	166	<div>後</div>
167	<div class="image" ng-click="choiceTShirtBackFront('back')">	167	<div class="image" ng-click="choiceTShirtBackFront('back')">
168	<img ng-src="{{ tShirtImgBack }}" alt="" />	168	<img ng-src="{{ tShirtImgBack }}" alt="" />
169	</div>	169	</div>
170		170
171	</li>	171	</li>
172	</ul>	172	</ul>
173	</div>	173	</div>
174	</section>	174	</section>
175	</article>	175	</article>
176	<footer class="clearfix">	176	<footer class="clearfix">
177	<ul class="nav-footer">	177	<ul class="nav-footer">
178	<li><a href="#">店舗検索</a></li>	178	<li><a href="#">店舗検索</a></li>
179	<li><a href="#">お客様窓口</a></li>	179	<li><a href="#">お客様窓口</a></li>
180	<li><a href="#">企業情報</a></li>	180	<li><a href="#">企業情報</a></li>
181	<li><a href="#">採用情報</a></li>	181	<li><a href="#">採用情報</a></li>
182	<li><a href="#">プライバシーポリシー</a></li>	182	<li><a href="#">プライバシーポリシー</a></li>
183	</ul>	183	</ul>
184	</footer>	184	</footer>
185		185
186	<!--MODAL CONTENT-->	186	<!--MODAL CONTENT-->
187	<div ng-include="designFrameView"></div>	187	<div ng-include="designFrameView"></div>
188	</div>	188	</div>
189		189
190		190
191	</div>	191	</div>
192		192

app/views/tshirt-design.html

Diff comments View file @ 7e14f17

 <!-- Modal -->
 <div class="modal fade" id="tshirt-design" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" ng-controller="TshirtdesignCtrl">
     <div class="modal-dialog" role="document">
         <div class="modal-content">
             <div class="modal-header">
                 <button class="black" ng-click="modalClose()"><i class="fa fa-times" aria-hidden="true"></i> キャンセル</button>
                 <button class="black"> <i class="fa fa-angle-right" aria-hidden="true"></i> はじめての方へ</button>
             </div>
             <div class="modal-body">
                 <header class="clearfix">
                     <div class="menu-nav">
                         <ul class="nav pull-left">
                             <li ng-class="{'active': isShowLeftPanel=='text'}" ng-click="showDesignTab('text')">
                                 <i class="fa fa-jpy" aria-hidden="true"></i> 文字
                             </li>
                             <li ng-class="{'active': isShowLeftPanel=='illustration'}" ng-click="showDesignTab('illustration')">
                                 <i class="fa fa-btc" aria-hidden="true"></i> イラスト・イメージ
                             </li>
                             <li ng-class="{'active': isShowLeftPanel=='image'}" ng-click="showDesignTab('image')">
                                 <i class="fa fa-money" aria-hidden="true"></i> 自分の画像・写真
                             </li>
                             <li ng-click="canvasClearAll()">
                                 <i class="fa fa-minus-circle" aria-hidden="true"></i> 全消去
                             </li>
                         </ul>
                     </div>
                     <div class="action pull-right">
                         <button class="white">
                             アルバムを開く
                         </button>
                         <button class="white">
                             アルバムに入れる
                         </button>
                     </div>
                 </header>
                 <section class="tshirt-design-container clearfix">
                     <div class="aside col-sm-4">
                         <!-- Default-->
                         <ul class="box-design-option" id="choice-design-option" ng-show="isShowLeftPanel=='default' " ng-include="designPartDefault">
                         </ul>
                         <!-- Illustration design-->
                         <ul class="box-design-option" id="choice-illustration" ng-show="isShowLeftPanel=='illustration'" ng-include="designPartIllustration">
                         </ul>
                         <!-- Custom image design-->
                         <ul class="box-design-option" id="choice-image" ng-show="isShowLeftPanel=='image'" ng-include="designPartImage">
                         </ul>
                         <!-- Text design-->
                         <ul class="box-design-option" id="choice-text" ng-show="isShowLeftPanel=='text'" ng-include="designPartText">
                         </ul>
                     </div>
                     <div class="col-sm-8">
                         <div class="design-content " id="main-design-content">
-                            <!--<button ng-click="objectDone()" >OK</button>-->
                             <div class="content" id="main-design" ng-style="{'background-color' : tShirtColorCode}">
                                 <div class="object-border" id="object-border-top"></div>
                                 <div class="object-border" id="object-border-right"></div>
                                 <div class="object-border" id="object-border-bottom"></div>
                                 <div class="object-border" id="object-border-left"></div>
                                 <canvas id="main-design-container" class="selection-design lower-canvas" style="width: 100%">
                                 </canvas>
                             </div>
                             <div class="agree-design" ng-click="outputDesign()">
                                 <img src="images/agree-design.png" alt="agree design" />
                             </div>
                             <div class="trash-design">
-                                <!--<span ng-click="undoCanvas()" class="fa fa-undo"> Undo</span><br>-->
-                                <!--<span ng-click="redoCanvas()" class="fa fa-repeat"> Redo</span><br>-->
                                 <img src="images/trash.png" alt="trash design" />
                             </div>
                         </div>
                         <img style="display:none" src="images/trash-hover.png" alt="trash-hover cache" />
                     </div>
                 </section>
             </div>
         </div>
     </div>
 </div>