TRUONG / T-Shats Frontend

Download as
Browse Code »

Commit 9e6e89dc74a75077253661d8e640c7e7b971262e

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

build

Showing 5 changed files with 31 additions and 9 deletions Inline Diff

1 <!doctype html> 1 <!doctype html>
2 <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" id="ng-app" ng-app=""> <![endif]--> 2 <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" id="ng-app" ng-app=""> <![endif]-->
3 <!--[if IE 8]> <html class="no-js lt-ie9" id="ng-app" ng-app=""> <![endif]--> 3 <!--[if IE 8]> <html class="no-js lt-ie9" id="ng-app" ng-app=""> <![endif]-->
4 <!--[if gt IE 8]><!--> <html class="no-js" ng-app> <!--<![endif]--> 4 <!--[if gt IE 8]><!--> <html class="no-js" ng-app> <!--<![endif]-->
5 <head> 5 <head>
6 <meta charset="utf-8"> 6 <meta charset="utf-8">
7 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta http-equiv="X-UA-Compatible" content="IE=edge">
8 <title></title> 8 <title></title>
9 <meta name="description" content=""> 9 <meta name="description" content="">
10 <meta name="viewport" content="width=device-width"> 10 <meta name="viewport" content="width=device-width">
11 <!-- Place favicon.ico and apple-touch-icon.png in the root directory --> 11 <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
12 <!-- build:css styles/vendor.css --> 12 <!-- build:css styles/vendor.css -->
13 <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" /> 13 <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
14 <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css" /> 14 <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css" />
15 <link rel="stylesheet" href="bower_components/select2/select2.css"> 15 <link rel="stylesheet" href="bower_components/select2/select2.css">
16 <!-- bower:css --> 16 <!-- bower:css -->
17 <!-- endbower --> 17 <!-- endbower -->
18 <!-- endbuild --> 18 <!-- endbuild -->
19 <!-- build:css({.tmp,app}) styles/main.css --> 19 <!-- build:css({.tmp,app}) styles/main.css -->
20 <link rel="stylesheet" href="styles/main.css"> 20 <link rel="stylesheet" href="styles/main.css">
21 <!-- endbuild --> 21 <!-- endbuild -->
22 </head> 22 </head>
23 <body ng-app="tshatsApp"> 23 <body ng-app="tshatsApp">
24 <!--[if lt IE 7]> 24 <!--[if lt IE 7]>
25 <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> 25 <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
26 <![endif]--> 26 <![endif]-->
27 27
28 <!-- Add your site or application content here --> 28 <!-- Add your site or application content here -->
29 <div class="container" ng-view></div> 29 <div class="container" ng-view></div>
30 30
31 <!-- Google Analytics: change UA-XXXXX-X to be your site's ID --> 31 <!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
32 <script> 32 <script>
33 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ 33 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
34 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), 34 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
35 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) 35 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
36 })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); 36 })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
37 37
38 ga('create', 'UA-XXXXX-X'); 38 ga('create', 'UA-XXXXX-X');
39 ga('send', 'pageview'); 39 ga('send', 'pageview');
40 </script> 40 </script>
41 <script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script> 41 <script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
42 <script type="text/javascript" src="bower_components/fabric.js/dist/fabric.min.js"></script> 42 <script type="text/javascript" src="bower_components/fabric.js/dist/fabric.min.js"></script>
43 <script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script> 43 <script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
44 <!--[if lt IE 9]> 44 <!--[if lt IE 9]>
45 <script src="bower_components/es5-shim/es5-shim.js"></script> 45 <script src="bower_components/es5-shim/es5-shim.js"></script>
46 <script src="bower_components/json3/lib/json3.min.js"></script> 46 <script src="bower_components/json3/lib/json3.min.js"></script>
47 <![endif]--> 47 <![endif]-->
48 <script type="text/javascript"> 48 <script type="text/javascript">
49 var VERSION = '17-11_03'; 49 var VERSION = '17-11_04';
50 var require = { 50 var require = {
51 urlArgs: "ver="+VERSION, 51 urlArgs: "ver="+VERSION,
52 }; 52 };
53 </script> 53 </script>
54 <script src="bower_components/requirejs/require.js" data-main="scripts/main"></script> 54 <script src="bower_components/requirejs/require.js" data-main="scripts/main"></script>
55 </body> 55 </body>
56 </html> 56 </html>
57 57
1 <!doctype html><!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" id="ng-app" ng-app=""> <![endif]--><!--[if IE 8]> <html class="no-js lt-ie9" id="ng-app" ng-app=""> <![endif]--><!--[if gt IE 8]><!--><html class="no-js" ng-app=""><!--<![endif]--><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title></title><meta name="description" content=""><meta name="viewport" content="width=device-width"><!-- Place favicon.ico and apple-touch-icon.png in the root directory --><link rel="stylesheet" href="styles/271347a9.vendor.css"><link rel="stylesheet" href="styles/e87ab03f.main.css"><body ng-app="tshatsApp"><!--[if lt IE 7]> 1 <!doctype html><!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" id="ng-app" ng-app=""> <![endif]--><!--[if IE 8]> <html class="no-js lt-ie9" id="ng-app" ng-app=""> <![endif]--><!--[if gt IE 8]><!--><html class="no-js" ng-app=""><!--<![endif]--><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title></title><meta name="description" content=""><meta name="viewport" content="width=device-width"><!-- Place favicon.ico and apple-touch-icon.png in the root directory --><link rel="stylesheet" href="styles/271347a9.vendor.css"><link rel="stylesheet" href="styles/598e506e.main.css"><body ng-app="tshatsApp"><!--[if lt IE 7]>
2 <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> 2 <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
3 <![endif]--><!-- Add your site or application content here --><div class="container" ng-view=""></div><!-- Google Analytics: change UA-XXXXX-X to be your site's ID --><script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ 3 <![endif]--><!-- Add your site or application content here --><div class="container" ng-view=""></div><!-- Google Analytics: change UA-XXXXX-X to be your site's ID --><script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
4 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), 4 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
5 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) 5 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
6 })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); 6 })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
7 7
8 ga('create', 'UA-XXXXX-X'); 8 ga('create', 'UA-XXXXX-X');
9 ga('send', 'pageview');</script><script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script><script type="text/javascript" src="bower_components/fabric.js/dist/fabric.min.js"></script><script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script><!--[if lt IE 9]> 9 ga('send', 'pageview');</script><script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script><script type="text/javascript" src="bower_components/fabric.js/dist/fabric.min.js"></script><script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script><!--[if lt IE 9]>
10 <script src="bower_components/es5-shim/es5-shim.js"></script> 10 <script src="bower_components/es5-shim/es5-shim.js"></script>
11 <script src="bower_components/json3/lib/json3.min.js"></script> 11 <script src="bower_components/json3/lib/json3.min.js"></script>
12 <![endif]--><script type="text/javascript">var VERSION = '17-11_03'; 12 <![endif]--><script type="text/javascript">var VERSION = '17-11_04';
13 var require = { 13 var require = {
14 urlArgs: "ver="+VERSION, 14 urlArgs: "ver="+VERSION,
15 };</script><script src="bower_components/requirejs/require.js" data-main="scripts/main"></script> 15 };</script><script src="bower_components/requirejs/require.js" data-main="scripts/main"></script>
dist/scripts/controllers/tshirtdesign.js
Diff comments   View file @ 9e6e89d
1 define(["app"],function(app){app.controller("TshirtdesignCtrl",function($scope,$rootScope,$illustration){function onIllustrationAdded(options){var object=options.target;console.log("object:added"),actionObj===!0&&(stateObj=[stateObj[indexCurr2]],listObj=[listObj[indexCurr2]],actionObj=!1,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=!0}function onIllustrationModifield(options){var objOffset=canvas.getActiveObject().getBoundingRect(),cH=canvas.height,cW=canvas.width,H0=50,W0=50;if(objOffset.left<W0-objOffset.width||objOffset.left>cW-W0||objOffset.top<H0-objOffset.height||objOffset.top>cH-H0){if(!confirm("削除してもよろしいですか"))return void undoCanvas();canvas.getActiveObject().remove()}var object=options.target;console.log("object:modified"),actionObj===!0&&(stateObj=[stateObj[indexCurr2]],listObj=[listObj[indexCurr2]],actionObj=!1,console.log(stateObj),indexCurr=1),object.saveState(),stateObj[indexCurr]=JSON.stringify(object.originalState),listObj[indexCurr]=object,indexCurr++,indexCurr2=indexCurr-1,console.log(stateObj),refreshObj=!0}function onIllustrationChange(options){}function onObjectOut(){delete currentObj,$scope.designTextValue=""}function undoCanvas(){return 0>=indexCurr?void(indexCurr=0):(refreshObj===!0&&(indexCurr--,refreshObj=!1),console.log("undo"),indexCurr2=indexCurr-1,currentObj=listObj[indexCurr2],currentObj&&currentObj.setOptions(JSON.parse(indexCurr[indexCurr2])),indexCurr--,currentObj.setCoords(),canvas.renderAll(),void(actionObj=!0))}function onObjectSelected(options){var currentObj=options.target;switch(console.log(currentObj.text),$scope.typeObject=currentObj.type,$scope.typeObject){case"i-text":$rootScope.isShowLeftPanel="text";var text=currentObj.text;""!=text&&($scope.designText=text,$scope.designTextValue=text);break;case"path-group":$rootScope.isShowLeftPanel="illustration";break;default:$rootScope.isShowLeftPanel="default"}$rootScope.safeApply()}var canvas=new fabric.Canvas("main-design-container");fabric.Object.prototype.transparentCorners=!1,canvas.on("after:render",function(){console.log("after render")}),canvas.on({"object:added":onIllustrationAdded,"object:moving":onIllustrationChange,"object:scaling":onIllustrationChange,"object:rotating":onIllustrationChange,"object:selected":onObjectSelected,"object:modified":onIllustrationModifield,"selection:cleared":onObjectOut});var currentObj,listObj=[],stateObj=[],indexCurr=0,indexCurr2=0,actionObj=!1,refreshObj=!0,spacingNum=0;$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(.6)),shape.set({left:150,top:200}).setCoords(),canvas.renderAll(),canvas.setActiveObject(shape)})},$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.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"}],$scope.changeColorPattern=function(color){canvas.getActiveObject()&&(canvas.getActiveObject().set("fill",color),canvas.renderAll())},$scope.layerProcess=function(mode){var activeObject=canvas.getActiveObject();if(console.log(activeObject),activeObject){switch(mode){case 1:activeObject.bringForward();break;case 2:activeObject.sendBackwards();break;case 3:activeObject.bringToFront();break;case 4:activeObject.sendToBack()}canvas.renderAll()}},$scope.focusInputText=function(text){currentObj=canvas.getActiveObject(),"undefined"==typeof currentObj||null==currentObj?$scope.iText=new fabric.IText("",{left:150,top:200,fontFamily:"Arial",fontWeight:"normal",textAlign:"center",fontSize:28,fill:"black"}):"i-text"!=currentObj.type?$scope.iText=new fabric.IText("",{left:150,top:200,fontFamily:"Arial",fontWeight:"normal",textAlign:"center",fontSize:28,fill:"black"}):$scope.iText=currentObj},$scope.inputText=function(e){if("undefined"!=typeof $scope.iText){var iText=$scope.iText;iText.text=e,canvas.add(iText),canvas.renderAll(),canvas.setActiveObject(iText)}},$scope.setFontFamily=function(font){if(canvas.getActiveObject()){var currentObj=canvas.getActiveObject();"i-text"==currentObj.type&&(currentObj.set("fontFamily",font),canvas.renderAll(),canvas.setActiveObject(currentObj))}},$scope.setLetterSpacingText=function(e){if(canvas.getActiveObject()){var currentObj=canvas.getActiveObject();"i-text"==currentObj.type&&("plus"==e?spacingNum+=30:spacingNum>=30&&(spacingNum-=30),currentObj.set("charSpacing",spacingNum),canvas.renderAll(),canvas.setActiveObject(currentObj))}},$scope.rotateText=function(style){if(canvas.getActiveObject()){var currentObj=canvas.getActiveObject();"i-text"==currentObj.type&&(currentObj.set("rotate",Math.PI/4),canvas.renderAll(),canvas.setActiveObject(currentObj))}}})}); 1 define(["app"],function(app){app.controller("TshirtdesignCtrl",function($scope,$rootScope,$illustration){function onIllustrationAdded(options){var object=options.target;console.log("object:added"),actionObj===!0&&(stateObj=[stateObj[indexCurr2]],listObj=[listObj[indexCurr2]],actionObj=!1,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=!0}function onIllustrationModifield(options){var objOffset=canvas.getActiveObject().getBoundingRect(),cH=canvas.height,cW=canvas.width,H0=50,W0=50;if(objOffset.left<W0-objOffset.width||objOffset.left>cW-W0||objOffset.top<H0-objOffset.height||objOffset.top>cH-H0){if(!confirm("削除してもよろしいですか"))return void undoCanvas();canvas.getActiveObject().remove()}var object=options.target;console.log("object:modified"),actionObj===!0&&(stateObj=[stateObj[indexCurr2]],listObj=[listObj[indexCurr2]],actionObj=!1,console.log(stateObj),indexCurr=1),object.saveState(),stateObj[indexCurr]=JSON.stringify(object.originalState),listObj[indexCurr]=object,indexCurr++,indexCurr2=indexCurr-1,console.log(stateObj),refreshObj=!0}function onIllustrationChange(options){}function onObjectOut(){delete currentObj,$scope.designTextValue=""}function undoCanvas(){return 0>=indexCurr?void(indexCurr=0):(refreshObj===!0&&(indexCurr--,refreshObj=!1),console.log("undo"),indexCurr2=indexCurr-1,currentObj=listObj[indexCurr2],currentObj&&currentObj.setOptions(JSON.parse(indexCurr[indexCurr2])),indexCurr--,currentObj.setCoords(),canvas.renderAll(),void(actionObj=!0))}function onObjectSelected(options){var currentObj=options.target;switch(console.log(currentObj.text),$scope.typeObject=currentObj.type,$scope.typeObject){case"i-text":$rootScope.isShowLeftPanel="text";var text=currentObj.text;""!=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"}$rootScope.safeApply()}var canvas=new fabric.Canvas("main-design-container");fabric.Object.prototype.transparentCorners=!1,canvas.on("after:render",function(){console.log("after render")}),canvas.on({"object:added":onIllustrationAdded,"object:moving":onIllustrationChange,"object:scaling":onIllustrationChange,"object:rotating":onIllustrationChange,"object:selected":onObjectSelected,"object:modified":onIllustrationModifield,"selection:cleared":onObjectOut});var currentObj,listObj=[],stateObj=[],indexCurr=0,indexCurr2=0,actionObj=!1,refreshObj=!0,spacingNum=0;$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(.6)),shape.set({left:150,top:200}).setCoords(),canvas.renderAll(),canvas.setActiveObject(shape)})},$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.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"}],$scope.changeColorPattern=function(color){canvas.getActiveObject()&&(canvas.getActiveObject().set("fill",color),canvas.renderAll())},$scope.layerProcess=function(mode){var activeObject=canvas.getActiveObject();if(console.log(activeObject),activeObject){switch(mode){case 1:activeObject.bringForward();break;case 2:activeObject.sendBackwards();break;case 3:activeObject.bringToFront();break;case 4:activeObject.sendToBack()}canvas.renderAll()}},$scope.focusInputText=function(text){currentObj=canvas.getActiveObject(),"undefined"==typeof currentObj||null==currentObj?$scope.iText=new fabric.IText("",{left:150,top:200,fontFamily:"Arial",fontWeight:"normal",textAlign:"center",fontSize:28,fill:"black"}):"i-text"!=currentObj.type?$scope.iText=new fabric.IText("",{left:150,top:200,fontFamily:"Arial",fontWeight:"normal",textAlign:"center",fontSize:28,fill:"black"}):$scope.iText=currentObj},$scope.inputText=function(e){if("undefined"!=typeof $scope.iText){var iText=$scope.iText;iText.text=e,canvas.add(iText),canvas.renderAll(),canvas.setActiveObject(iText)}},$scope.setFontFamily=function(font){if(canvas.getActiveObject()){var currentObj=canvas.getActiveObject();"i-text"==currentObj.type&&(currentObj.set("fontFamily",font),canvas.renderAll(),canvas.setActiveObject(currentObj))}},$scope.setLetterSpacingText=function(e){if(canvas.getActiveObject()){var currentObj=canvas.getActiveObject();"i-text"==currentObj.type&&("plus"==e?spacingNum+=30:spacingNum>=30&&(spacingNum-=30),currentObj.set("charSpacing",spacingNum),canvas.renderAll(),canvas.setActiveObject(currentObj))}},$scope.chooseImage=function(e){console.log(e);var reader=new FileReader;reader.onload=function(event){console.log("fdsf");var imgObj=new Image;imgObj.src=event.target.result,imgObj.onload=function(){var image=new fabric.Image(imgObj);image.set({left:50,top:50}),image.scaleToWidth(200),canvas.add(image)}},reader.readAsDataURL(e.target.files[0])},$scope.rotateText=function(style){if(canvas.getActiveObject()){var currentObj=canvas.getActiveObject();"i-text"==currentObj.type&&(currentObj.set("rotate",Math.PI/4),canvas.renderAll(),canvas.setActiveObject(currentObj))}}})});
dist/styles/e87ab03f.main.css
View file @ 9e6e89d
1 body{font-family:'Hiragino Kaku Gothic Pro',sans-serif}import "../fonts/font_canvas/font-canvas.css";body{font-family:'Hiragino Kaku Gothic Pro',sans-serif}::-webkit-scrollbar{-webkit-appearance:none;width:7px}::-webkit-scrollbar-thumb{border-radius:4px;background-color:rgba(0,0,0,.5);-webkit-box-shadow:0 0 1px rgba(255,255,255,.5)}.padding-right-0{padding-right:0!important}.padding-left-0{padding-left:0!important}button.red{color:#fff;background-color:red;border:1px solid red}button.white{border:1px solid #ff8080;color:#ff8080;background-color:#fff}button.brown{background-color:#666;border:1px solid #666;color:#fff;border-radius:5px}button.black{border:1px solid #c9c9c9;background-color:#343434;color:#fff;padding:1px 6px}#tshirt-container{border-left:1px solid #dcdcdc;border-right:1px solid #dcdcdc}header{border-bottom:1px solid #dcdcdc}header .logo{color:#ed1d24;font-size:30px;text-transform:uppercase;font-weight:700}header .logo img{width:60px}nav{border-bottom:1px solid #dcdcdc;padding:10px 0}nav h2{font-size:27px;margin: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:#999;position:relative}nav ul li i.fa{position:absolute;color:#fff;font-size:18px;right:-4px;top:50%;transform:translateX(-50%) translateY(-50%);-webkit-transform:translateX(-50%) translateY(-50%)}nav ul li a{color:#fff}nav ul li:hover a{text-decoration:none;color:#fff}nav ul li.action{color:#fff;background-color:#ed1d24}aside{margin:10px 0}aside .break-down{padding:0}aside .break-down i.fa{font-size:35px;color:red}aside .break-line{height:10px}aside .break-line hr{border-top:1px dotted #ccc}aside .step{margin:0}aside .step .title{font-size:15px;line-height:16px;font-weight:700;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}aside .step .step-box .tshirt-design{border:1px solid #ccc;background-color:#f5f5f5;margin:10px}aside .step .step-box .tshirt-design:hover{border:1px solid red}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;border-right:1px solid #ccc}aside .step .step-box .tshirt-design .icon img{height:50px}aside .step .step-box .tshirt-design .name{padding:10px}aside .step .step-box .tshirt-design .action{padding:10px;float:right}aside .step .step-box .tshirt-design .action button{padding:8px 10px}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 #ccc;padding:2px;float:left;cursor:pointer}aside .step .step-box .tshirt-color ul.choice-color li.action,aside .step .step-box .tshirt-color ul.choice-color li:hover{border:1px solid red}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}aside .step .step-box .tshirt-saveorder{padding:10px 10px 6px}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}aside .step .step-box .change-design{padding:4px}aside .step .step-box .change-design table tr{border-bottom:1px dotted #ccc}aside .step .step-box .change-design table tr:last-child{border-bottom:0}aside .step .finish-design{padding:20px 0}aside .step .finish-design button{width:100%;padding:8px 10px}#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}#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;cursor:pointer}#tshirt-content .tshirt-choice ul li .image{border:1px solid #ccc;padding:3px}#tshirt-content .tshirt-choice ul li.focus .image{border:1px solid red}#tshirt-content .tshirt-choice ul li .image img{width:50px;height:auto}#tshirt-design{background-color:#666}#tshirt-design .modal-dialog{width:75%;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;border-bottom:0;border-shadow:none!important}#tshirt-design .modal-dialog .modal-content .modal-body{background-color:#f5f5f5;padding:0}#tshirt-design header{border-bottom:1px solid #ccc;background-color:#ddd}#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 #ccc;font-size:14px;cursor:pointer}#tshirt-design header ul.nav li.active,#tshirt-design header ul.nav li:hover{background-color:red;color:#fff}#tshirt-design header ul.nav li.active i.fa,#tshirt-design header ul.nav li:hover i.fa{color:#fff}#tshirt-design header ul.nav li i.fa{color:#fe070f;font-size:20px;margin-right:10px}#tshirt-design header .action button{padding:2px 10px;margin:6px 10px}#tshirt-design header .action button:hover{background-color:red;color:#fff}.aside .box-design-option{list-style:none;padding-left:0;margin-top:10px}.aside .box-design-option li{border:1px solid #cdcdcd;position:relative}.aside .box-design-option li .hover{background-color:#fddad4;opacity:.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:#000}.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}.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 .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:#fcc}.aside #choice-text .content{padding: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 silver}.aside #choice-text .content .font-family-box li{cursor:pointer;padding:4px 8px;border:0;border-bottom:1px solid silver;border-right:1px solid silver;font-size:16px}.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 #888;background-color:#f0f0f0}.aside #choice-text .content .spacing-letter .item{float:left}.aside #choice-text .content .spacing-letter .item i.fa{font-size:22px;margin:0;color:#000}.aside #choice-text .content .spacing-letter .item-text{padding:6px 20px;font-size:12px}.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-minus,.aside #choice-text .content .spacing-letter .item-plus{padding:5px 6px 1px;cursor:pointer}.aside #choice-illustration li .content{padding: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}.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}.aside #choice-illustration li .content .illustration-list .footer-bar .footer-pagination{margin-right:5px;cursor:pointer;font-size:9px;color:#FFF;background:#666;text-transform:uppercase;padding:2px 5px}.aside #choice-illustration li .content .illustration-list .footer-bar .footer-pagination:hover{background:#999}.tshirt-design-container{position:relative}.tshirt-design-container .design-content{padding:10px 30px 10px 15px}.tshirt-design-container .design-content .content{width:100%;min-height:650px;background-color:#f0efea;padding:40px;height:100%}.tshirt-design-container .design-content .content .selection-design{border:1px solid red;width:100%;height:620px}.tshirt-design-container .agree-design{position:absolute;right:-16px;top:40%}.tshirt-design-container .trash-design{position:absolute;right:5px;bottom:0}footer{background-color:#333}footer ul.nav-footer{padding-left:0;list-style:none}footer ul.nav-footer li{float:left;padding:3px 10px;border-right:1px dotted #fff}footer ul.nav-footer li a{color:#fff;font-size:11px} File was deleted
dist/views/design_part/image.html
Diff comments   View file @ 9e6e89d
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 7 <input type="file" id="imgLoader" onchange="angular.element(this).scope().chooseImage(event)">
8 <div id="btn-choose-image" onclick="$('#imgLoader').click()">＞　ファイルを選択してアップロード</div>
9 <div class="small-text">ファイルサイズ5MBまで（JPEG、PNG）</div>
10 <div>アップ済み画像・写真リスト</div>
11 <div class="list-images"></div>
8 </div> 12 </div>
9 </li> 13 </li>
14
10 <li> 15 <li>
11 <div class="title"> 16 <div class="title">
12 <!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>--> 17 <!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->
13 カラー変更 18 カラー変更
14 <div class="pull-right">元の色に戻す</div> 19 <div class="pull-right">元の色に戻す</div>
15 </div> 20 </div>
16 <div class="content clearfix"> 21 <div class="content clearfix">
17 22 <div class="color-patterns">
23
24 </div>
18 </div> 25 </div>
19 </li> 26 </li>
27
20 <li> 28 <li>
21 <div class="title"> 29 <div class="title">
22 <!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>--> 30 <!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->
23 重ね順変更 31 重ね順変更
24 </div> 32 </div>
25 <div class="content clearfix"> 33 <div class="content clearfix">
26 34 <div class="col-xs-3 layer-item" ng-click="layerProcess(1)">
35 <img src="images/layer-icon-1.png"/>
36 <div>前面へ</div>
37 </div>
38 <div class="col-xs-3 layer-item" ng-click="layerProcess(2)">
39 <img src="images/layer-icon-2.png"/>
40 <div>背面へ</div>
41 </div>
42 <div class="col-xs-3 layer-item" ng-click="layerProcess(3)">
43 <img src="images/layer-icon-3.png"/>
44 <div>最前面へ</div>
45 </div>
46 <div class="col-xs-3 layer-item" ng-click="layerProcess(4)">
47 <img src="images/layer-icon-4.png"/>
48 <div>最前面へ</div>
49 </div>
27 </div> 50 </div>
28 </li> 51 </li>