Commit 682a3b12dbaf4ba5078d2f6466456061b11177ab
1 parent
0dc7327604
Exists in
master
and in
1 other branch
fix illustration style
Showing 17 changed files with 526 additions and 24 deletions Inline Diff
- app/index.html
- app/scripts/controllers/main.js
- app/scripts/controllers/tshirtdesign.js
- app/scripts/services/illustration.js
- app/styles/main.css
- app/views/design_part/illustration.html
- dist/index.html
- dist/scripts/controllers/main.js
- dist/scripts/controllers/tshirtdesign.js
- dist/scripts/services/illustration.js
- dist/styles/36c320d8.main.css
- dist/styles/ba55f2e6.main.css
- dist/views/design_part/illustration.html
- dist/views/design_part/image.html
- dist/views/design_part/text.html
- dist/views/main.html
- dist/views/tshirt-design.html
app/index.html
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 = '16-11_01'; | 49 | var VERSION = new Date().getTime(); |
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 |
app/scripts/controllers/main.js
1 | define(['app'], function (app) { | 1 | define(['app'], function (app) { |
2 | 'use strict'; | 2 | 'use strict'; |
3 | app.controller('MainCtrl', function ($rootScope, $scope, $illustration, $t_shirt) { | 3 | app.controller('MainCtrl', function ($rootScope, $scope, $illustration, $t_shirt) { |
4 | $rootScope.API_URL = 'http://domain.com'; | ||
4 | $scope.designFrameView = 'views/tshirt-design.html?ver='+VERSION; | 5 | $scope.designFrameView = 'views/tshirt-design.html?ver='+VERSION; |
5 | $scope.designPartIllustration = 'views/design_part/illustration.html?ver='+VERSION; | 6 | $scope.designPartIllustration = 'views/design_part/illustration.html?ver='+VERSION; |
6 | $scope.designPartImage = 'views/design_part/image.html?ver='+VERSION; | 7 | $scope.designPartImage = 'views/design_part/image.html?ver='+VERSION; |
7 | $scope.designPartText = 'views/design_part/text.html?ver='+VERSION; | 8 | $scope.designPartText = 'views/design_part/text.html?ver='+VERSION; |
8 | $scope.designPartDefault = 'views/design_part/default.html?ver='+VERSION; | 9 | $scope.designPartDefault = 'views/design_part/default.html?ver='+VERSION; |
9 | 10 | ||
10 | //Action T-Shirt choice color and Back or Front | 11 | //Action T-Shirt choice color and Back or Front |
11 | $scope.tShirtColor = $t_shirt.getTShirtColor(0); | 12 | $scope.tShirtColor = $t_shirt.getTShirtColor(0); |
12 | //Set color name default | 13 | //Set color name default |
13 | var tShirtColorFirstKey = 0; | 14 | var tShirtColorFirstKey = 0; |
14 | $scope.tShirtChoiceBackFrontKey = 'front'; | 15 | $scope.tShirtChoiceBackFrontKey = 'front'; |
15 | $scope.tShirtColorKey = tShirtColorFirstKey; | 16 | $scope.tShirtColorKey = tShirtColorFirstKey; |
16 | $rootScope.tShirtColorCode = $scope.tShirtColor[tShirtColorFirstKey].code; | 17 | $rootScope.tShirtColorCode = $scope.tShirtColor[tShirtColorFirstKey].code; |
17 | $scope.tShirtColorName = $scope.tShirtColor[tShirtColorFirstKey].name; | 18 | $scope.tShirtColorName = $scope.tShirtColor[tShirtColorFirstKey].name; |
18 | $scope.tShirtImgFront = $scope.tShirtColor[tShirtColorFirstKey].img.front; | 19 | $scope.tShirtImgFront = $scope.tShirtColor[tShirtColorFirstKey].img.front; |
19 | $scope.tShirtImgBack = $scope.tShirtColor[tShirtColorFirstKey].img.back; | 20 | $scope.tShirtImgBack = $scope.tShirtColor[tShirtColorFirstKey].img.back; |
20 | $scope.tShirtImg = $scope.tShirtImgFront; | 21 | $scope.tShirtImg = $scope.tShirtImgFront; |
21 | 22 | ||
22 | $scope.choiceTShirtColor = function(key) { | 23 | $scope.choiceTShirtColor = function(key) { |
23 | $scope.tShirtColorKey = key; | 24 | $scope.tShirtColorKey = key; |
24 | $rootScope.tShirtColorCode = $scope.tShirtColor[key].code; | 25 | $rootScope.tShirtColorCode = $scope.tShirtColor[key].code; |
25 | $scope.tShirtColorName = $scope.tShirtColor[key].name; | 26 | $scope.tShirtColorName = $scope.tShirtColor[key].name; |
26 | $scope.tShirtImgFront = $scope.tShirtColor[key].img.front; | 27 | $scope.tShirtImgFront = $scope.tShirtColor[key].img.front; |
27 | $scope.tShirtImgBack = $scope.tShirtColor[key].img.back; | 28 | $scope.tShirtImgBack = $scope.tShirtColor[key].img.back; |
28 | if($scope.tShirtChoiceBackFrontKey == 'front') { | 29 | if($scope.tShirtChoiceBackFrontKey == 'front') { |
29 | $scope.tShirtImg = $scope.tShirtImgFront; | 30 | $scope.tShirtImg = $scope.tShirtImgFront; |
30 | } else { | 31 | } else { |
31 | $scope.tShirtImg = $scope.tShirtImgBack; | 32 | $scope.tShirtImg = $scope.tShirtImgBack; |
32 | } | 33 | } |
33 | }; | 34 | }; |
34 | $scope.choiceTShirtBackFront = function(choice) { | 35 | $scope.choiceTShirtBackFront = function(choice) { |
35 | if(choice == 'front') { | 36 | if(choice == 'front') { |
36 | $scope.tShirtImg = $scope.tShirtImgFront; | 37 | $scope.tShirtImg = $scope.tShirtImgFront; |
37 | } else { | 38 | } else { |
38 | $scope.tShirtImg = $scope.tShirtImgBack; | 39 | $scope.tShirtImg = $scope.tShirtImgBack; |
39 | } | 40 | } |
40 | $scope.tShirtChoiceBackFrontKey = choice; | 41 | $scope.tShirtChoiceBackFrontKey = choice; |
41 | }; | 42 | }; |
42 | 43 | ||
43 | 44 | ||
44 | $scope.showDesignTab = function(tab){ | 45 | $scope.showDesignTab = function(tab){ |
45 | $rootScope.isShowLeftPanel = tab; | 46 | $rootScope.isShowLeftPanel = tab; |
46 | switch (tab) { | 47 | switch (tab) { |
47 | case 'illustration': { | 48 | case 'illustration': { |
48 | $scope.IllustrationList = $illustration.getAll(); | 49 | $scope.IllustrationList = $illustration.getAll(); |
49 | $scope.illustrationSelectConfig = { | 50 | $scope.illustrationSelectConfig = { |
50 | allowClear:true | 51 | allowClear:true |
51 | }; | 52 | }; |
52 | break; | 53 | break; |
53 | } | 54 | } |
54 | case 'text': { | 55 | case 'text': { |
55 | break; | 56 | break; |
56 | } | 57 | } |
57 | } | 58 | } |
58 | }; | 59 | }; |
59 | 60 | ||
60 | //safeApply | 61 | //safeApply |
61 | $rootScope.safeApply = function(fn) { | 62 | $rootScope.safeApply = function(fn) { |
62 | var phase = this.$root.$$phase; | 63 | var phase = this.$root.$$phase; |
63 | if(phase == '$apply' || phase == '$digest') { | 64 | if(phase == '$apply' || phase == '$digest') { |
64 | if(fn && (typeof(fn) === 'function')) { | 65 | if(fn && (typeof(fn) === 'function')) { |
65 | fn(); | 66 | fn(); |
66 | } | 67 | } |
67 | } else { | 68 | } else { |
68 | this.$apply(fn); | 69 | this.$apply(fn); |
69 | } | 70 | } |
70 | }; | 71 | }; |
71 | 72 | ||
72 | $scope.modalTShirtDesign = function() { | 73 | $scope.modalTShirtDesign = function() { |
73 | $('#tshirt-design').modal( | 74 | $('#tshirt-design').modal( |
74 | { | 75 | { |
75 | backdrop: 'static', | 76 | backdrop: 'static', |
76 | keyboard: false | 77 | keyboard: false |
77 | } | 78 | } |
78 | ); | 79 | ); |
79 | $scope.showDesignTab('default'); | 80 | $scope.showDesignTab('default'); |
80 | }; | 81 | }; |
81 | $scope.modalClose = function(){ | 82 | $scope.modalClose = function(){ |
82 | $('#tshirt-design').modal('hide'); | 83 | $('#tshirt-design').modal('hide'); |
83 | }; | 84 | }; |
84 | 85 | ||
85 | 86 | ||
86 | 87 | ||
87 | 88 | ||
88 | }); | 89 | }); |
89 | }); | 90 | }); |
90 | 91 |
app/scripts/controllers/tshirtdesign.js
1 | define(['app'], function (app) { | 1 | define(['app'], function (app) { |
2 | //'use strict'; | 2 | //'use strict'; |
3 | 3 | ||
4 | app.controller('TshirtdesignCtrl', function ($scope, $rootScope, $illustration) { | 4 | app.controller('TshirtdesignCtrl', function ($scope, $rootScope, $illustration) { |
5 | var canvas = new fabric.Canvas('main-design-container'); | 5 | var canvas = new fabric.Canvas('main-design-container'); |
6 | fabric.Object.prototype.transparentCorners = false; | 6 | fabric.Object.prototype.transparentCorners = false; |
7 | 7 | ||
8 | canvas.on('after:render', function() { | 8 | canvas.on('after:render', function() { |
9 | }); | 9 | }); |
10 | canvas.on({ | 10 | canvas.on({ |
11 | 'object:added': onIllustrationAdded, | 11 | 'object:added': onIllustrationAdded, |
12 | 'object:moving': onIllustrationChange, | 12 | 'object:moving': onIllustrationChange, |
13 | 'object:scaling': onIllustrationChange, | 13 | 'object:scaling': onIllustrationChange, |
14 | 'object:rotating': onIllustrationChange, | 14 | 'object:rotating': onIllustrationChange, |
15 | 'object:selected': onIllustrationSelected, | 15 | 'object:selected': onIllustrationSelected, |
16 | 'object:modified': onIllustrationModifield, | 16 | 'object:modified': onIllustrationModifield, |
17 | 'selected:deselected' : onIllustrationOut, | 17 | 'selected:deselected' : onIllustrationOut, |
18 | //'selected:out' : onIllustrationOut, | 18 | //'selected:out' : onIllustrationOut, |
19 | //'mouse:up' : onIllustrationOut, | 19 | //'mouse:up' : onIllustrationOut, |
20 | }); | 20 | }); |
21 | 21 | ||
22 | var currentObj; | 22 | var currentObj; |
23 | var listObj = []; | 23 | var listObj = []; |
24 | var stateObj = []; | 24 | var stateObj = []; |
25 | var indexCurr = 0; | 25 | var indexCurr = 0; |
26 | var indexCurr2 = 0; | 26 | var indexCurr2 = 0; |
27 | var actionObj = false; | 27 | var actionObj = false; |
28 | var refreshObj = true; | 28 | var refreshObj = true; |
29 | 29 | ||
30 | function onIllustrationAdded(options){ | 30 | function onIllustrationAdded(options){ |
31 | var object = options.target; | 31 | var object = options.target; |
32 | console.log('object:added'); | 32 | console.log('object:added'); |
33 | 33 | ||
34 | if (actionObj === true) { | 34 | if (actionObj === true) { |
35 | stateObj = [stateObj[indexCurr2]]; | 35 | stateObj = [stateObj[indexCurr2]]; |
36 | listObj = [listObj[indexCurr2]]; | 36 | listObj = [listObj[indexCurr2]]; |
37 | 37 | ||
38 | actionObj = false; | 38 | actionObj = false; |
39 | console.log(stateObj); | 39 | console.log(stateObj); |
40 | indexCurr = 1; | 40 | indexCurr = 1; |
41 | } | 41 | } |
42 | object.saveState(); | 42 | object.saveState(); |
43 | 43 | ||
44 | console.log(object.originalState); | 44 | console.log(object.originalState); |
45 | stateObj[indexCurr] = JSON.stringify(object.originalState); | 45 | stateObj[indexCurr] = JSON.stringify(object.originalState); |
46 | listObj[indexCurr] = object; | 46 | listObj[indexCurr] = object; |
47 | indexCurr++; | 47 | indexCurr++; |
48 | indexCurr2 = indexCurr - 1; | 48 | indexCurr2 = indexCurr - 1; |
49 | refreshObj = true; | 49 | refreshObj = true; |
50 | } | 50 | } |
51 | 51 | ||
52 | function onIllustrationModifield(options){ | 52 | function onIllustrationModifield(options){ |
53 | var objOffset = canvas.getActiveObject().getBoundingRect(); | 53 | var objOffset = canvas.getActiveObject().getBoundingRect(); |
54 | var cH = canvas.height, cW = canvas.width, H0 = 50, W0 = 50; | 54 | var cH = canvas.height, cW = canvas.width, H0 = 50, W0 = 50; |
55 | //console.log(objOffset,canvas.height,canvas.width); | 55 | //console.log(objOffset,canvas.height,canvas.width); |
56 | if (objOffset.left<W0-objOffset.width || objOffset.left>cW-W0 || objOffset.top<H0-objOffset.height || objOffset.top>cH-H0){ | 56 | if (objOffset.left<W0-objOffset.width || objOffset.left>cW-W0 || objOffset.top<H0-objOffset.height || objOffset.top>cH-H0){ |
57 | if (confirm('削除してもよろしいですか')){ | 57 | if (confirm('削除してもよろしいですか')){ |
58 | canvas.getActiveObject().remove(); | 58 | canvas.getActiveObject().remove(); |
59 | }else{ | 59 | }else{ |
60 | undoCanvas(); | 60 | undoCanvas(); |
61 | return; | 61 | return; |
62 | } | 62 | } |
63 | } | 63 | } |
64 | 64 | ||
65 | var object = options.target; | 65 | var object = options.target; |
66 | console.log('object:modified'); | 66 | console.log('object:modified'); |
67 | if (actionObj === true) { | 67 | if (actionObj === true) { |
68 | stateObj = [stateObj[indexCurr2]]; | 68 | stateObj = [stateObj[indexCurr2]]; |
69 | listObj = [listObj[indexCurr2]]; | 69 | listObj = [listObj[indexCurr2]]; |
70 | 70 | ||
71 | actionObj = false; | 71 | actionObj = false; |
72 | console.log(stateObj); | 72 | console.log(stateObj); |
73 | indexCurr = 1; | 73 | indexCurr = 1; |
74 | } | 74 | } |
75 | 75 | ||
76 | object.saveState(); | 76 | object.saveState(); |
77 | 77 | ||
78 | stateObj[indexCurr] = JSON.stringify(object.originalState); | 78 | stateObj[indexCurr] = JSON.stringify(object.originalState); |
79 | listObj[indexCurr] = object; | 79 | listObj[indexCurr] = object; |
80 | indexCurr++; | 80 | indexCurr++; |
81 | indexCurr2 = indexCurr - 1; | 81 | indexCurr2 = indexCurr - 1; |
82 | console.log(stateObj); | 82 | console.log(stateObj); |
83 | refreshObj = true; | 83 | refreshObj = true; |
84 | } | 84 | } |
85 | 85 | ||
86 | function onIllustrationChange(options) { | 86 | function onIllustrationChange(options) { |
87 | // options.target.setCoords(); | 87 | // options.target.setCoords(); |
88 | // canvas.forEachObject(function(obj) { | 88 | // canvas.forEachObject(function(obj) { |
89 | // if (obj === options.target) return; | 89 | // if (obj === options.target) return; |
90 | // obj.setOpacity(options.target.intersectsWithObject(obj) ? 0.5 : 1); | 90 | // obj.setOpacity(options.target.intersectsWithObject(obj) ? 0.5 : 1); |
91 | // }); | 91 | // }); |
92 | 92 | ||
93 | } | 93 | } |
94 | 94 | ||
95 | function onIllustrationOut() { | 95 | function onIllustrationOut() { |
96 | console.log('out object'); | 96 | console.log('out object'); |
97 | } | 97 | } |
98 | 98 | ||
99 | function undoCanvas() { | 99 | function undoCanvas() { |
100 | if (indexCurr <= 0) { | 100 | if (indexCurr <= 0) { |
101 | indexCurr = 0; | 101 | indexCurr = 0; |
102 | return; | 102 | return; |
103 | } | 103 | } |
104 | 104 | ||
105 | if (refreshObj === true) { | 105 | if (refreshObj === true) { |
106 | indexCurr--; | 106 | indexCurr--; |
107 | refreshObj = false; | 107 | refreshObj = false; |
108 | } | 108 | } |
109 | 109 | ||
110 | console.log('undo'); | 110 | console.log('undo'); |
111 | 111 | ||
112 | indexCurr2 = indexCurr - 1; | 112 | indexCurr2 = indexCurr - 1; |
113 | currentObj = listObj[indexCurr2]; | 113 | currentObj = listObj[indexCurr2]; |
114 | if (currentObj){ | 114 | if (currentObj){ |
115 | currentObj.setOptions(JSON.parse(indexCurr[indexCurr2])); | 115 | currentObj.setOptions(JSON.parse(indexCurr[indexCurr2])); |
116 | } | 116 | } |
117 | 117 | ||
118 | indexCurr--; | 118 | indexCurr--; |
119 | currentObj.setCoords(); | 119 | currentObj.setCoords(); |
120 | canvas.renderAll(); | 120 | canvas.renderAll(); |
121 | actionObj = true; | 121 | actionObj = true; |
122 | } | 122 | } |
123 | 123 | ||
124 | function redoCanvas() { | 124 | function redoCanvas() { |
125 | actionObj = true; | 125 | actionObj = true; |
126 | if (indexCurr >= stateObj.length - 1) { | 126 | if (indexCurr >= stateObj.length - 1) { |
127 | return; | 127 | return; |
128 | } | 128 | } |
129 | 129 | ||
130 | console.log('redo'); | 130 | console.log('redo'); |
131 | 131 | ||
132 | indexCurr2 = indexCurr + 1; | 132 | indexCurr2 = indexCurr + 1; |
133 | currentObj = listObj[indexCurr2]; | 133 | currentObj = listObj[indexCurr2]; |
134 | currentObj.setOptions(JSON.parse(indexCurr[indexCurr2])); | 134 | currentObj.setOptions(JSON.parse(indexCurr[indexCurr2])); |
135 | 135 | ||
136 | indexCurr++; | 136 | indexCurr++; |
137 | currentObj.setCoords(); | 137 | currentObj.setCoords(); |
138 | canvas.renderAll(); | 138 | canvas.renderAll(); |
139 | } | 139 | } |
140 | 140 | ||
141 | $scope.currentObject = null; | 141 | $scope.currentObject = null; |
142 | function onIllustrationSelected(options) { | 142 | function onIllustrationSelected(options) { |
143 | var object = options.target; | 143 | var object = options.target; |
144 | $scope.typeObject = object.type; | 144 | $scope.typeObject = object.type; |
145 | switch ($scope.typeObject) { | 145 | switch ($scope.typeObject) { |
146 | case 'i-text' : | 146 | case 'i-text' : |
147 | $('#input-design-text').focus(); | 147 | $('#input-design-text').focus(); |
148 | $rootScope.isShowLeftPanel = 'text'; | 148 | $rootScope.isShowLeftPanel = 'text'; |
149 | break; | 149 | break; |
150 | 150 | ||
151 | case 'path-group' : | 151 | case 'path-group' : |
152 | $rootScope.isShowLeftPanel = 'illustration'; | 152 | $rootScope.isShowLeftPanel = 'illustration'; |
153 | break; | 153 | break; |
154 | 154 | ||
155 | default : | 155 | default : |
156 | $rootScope.isShowLeftPanel = 'default'; | 156 | $rootScope.isShowLeftPanel = 'default'; |
157 | break; | 157 | break; |
158 | } | 158 | } |
159 | $rootScope.safeApply(); | 159 | $rootScope.safeApply(); |
160 | } | 160 | } |
161 | 161 | ||
162 | // Illustration process | 162 | // Illustration process |
163 | $scope.changeIllustrationCategory = function(currentIllustration){ | 163 | $scope.changeIllustrationCategory = function(currentIllustration){ |
164 | $scope.currentIllustrationCate = $illustration.getList(currentIllustration); | 164 | $scope.currentIllustrationCate = $illustration.getList(currentIllustration); |
165 | //console.log($scope.currentIllustrationCate); | 165 | //console.log($scope.currentIllustrationCate); |
166 | }; | 166 | }; |
167 | 167 | ||
168 | $scope.insertSvg = function(item){ | 168 | $scope.insertSvg = function(item){ |
169 | fabric.loadSVGFromURL(item.path, function(objects, options) { | 169 | fabric.loadSVGFromURL(item.path, function(objects, options) { |
170 | var shape = fabric.util.groupSVGElements(objects, options); | 170 | var shape = fabric.util.groupSVGElements(objects, options); |
171 | // shape.setFill('green'); | 171 | // shape.setFill('green'); |
172 | canvas.add(shape.scale(0.6)); | 172 | canvas.add(shape.scale(0.6)); |
173 | shape.set({ left: 150, top: 200 }).setCoords(); | 173 | shape.set({ left: 150, top: 200 }).setCoords(); |
174 | canvas.renderAll(); | 174 | canvas.renderAll(); |
175 | canvas.setActiveObject(shape); | 175 | canvas.setActiveObject(shape); |
176 | }); | 176 | }); |
177 | }; | 177 | }; |
178 | 178 | ||
179 | // color pattern | 179 | // color pattern |
180 | $scope.changeColorPattern = function(color){ | ||
181 | if (canvas.getActiveObject()){ | ||
182 | canvas.getActiveObject().set("fill", color); | ||
183 | canvas.renderAll(); | ||
184 | } | ||
185 | }; | ||
186 | $scope.listColorPatterns = [ | 180 | $scope.listColorPatterns = [ |
187 | '#000000','#ffff00','#ff6600','#ff0000','#ff6262','#ffa19c','#ff9933','#c45d01','#5d2b03','#ffffcc', | 181 | '#000000','#ffff00','#ff6600','#ff0000','#ff6262','#ffa19c','#ff9933','#c45d01','#5d2b03','#ffffcc', |
188 | '#ffff99','#ffd500','#c0db50','#21a52a','#00663f','#abfcab','#36ffaa','#89eaea','#00938c','#005450', | 182 | '#ffff99','#ffd500','#c0db50','#21a52a','#00663f','#abfcab','#36ffaa','#89eaea','#00938c','#005450', |
189 | '#0badff','#006cff','#839aff','#0410a0','#ffb2ff','#f93fff','#6600ca','#ff6699','#999999','#666666', | 183 | '#0badff','#006cff','#839aff','#0410a0','#ffb2ff','#f93fff','#6600ca','#ff6699','#999999','#666666', |
190 | '#333333' | 184 | '#333333' |
191 | ]; | 185 | ]; |
186 | |||
187 | $scope.changeColorPattern = function(color){ | ||
188 | if (canvas.getActiveObject()){ | ||
189 | canvas.getActiveObject().set("fill", color); | ||
190 | canvas.renderAll(); | ||
191 | } | ||
192 | }; | ||
193 | |||
194 | // layer process | ||
195 | $scope.layerProcess = function(mode){ | ||
196 | var activeObject = canvas.getActiveObject() | ||
197 | if (activeObject){ | ||
198 | switch (mode) { | ||
199 | case 1: | ||
200 | activeObject.bringForward(); | ||
201 | break; | ||
202 | case 2: | ||
203 | activeObject.sendBackwards(); | ||
204 | break; | ||
205 | case 3: | ||
206 | activeObject.bringToFront(); | ||
207 | break; | ||
208 | case 4: | ||
209 | activeObject.sendToBack(); | ||
210 | break; | ||
211 | } | ||
212 | canvas.renderAll(); | ||
213 | } | ||
214 | } | ||
215 | |||
192 | $scope.listFontFamily = [ | 216 | $scope.listFontFamily = [ |
193 | { | 217 | { |
194 | name : 'GN-Aki-iro_Sesami_Cookies', | 218 | name : 'GN-Aki-iro_Sesami_Cookies', |
195 | slug : 'gn_aki_iro_sesami_cookies', | 219 | slug : 'gn_aki_iro_sesami_cookies', |
196 | }, | 220 | }, |
197 | { | 221 | { |
198 | name : 'Tahoma', | 222 | name : 'Tahoma', |
199 | slug : 'tahoma', | 223 | slug : 'tahoma', |
200 | }, | 224 | }, |
201 | { | 225 | { |
202 | name : 'GN-Fuyu-iro_Script_Bold', | 226 | name : 'GN-Fuyu-iro_Script_Bold', |
203 | slug : 'gn_fuyu_iro_script_bold' | 227 | slug : 'gn_fuyu_iro_script_bold' |
204 | }, | 228 | }, |
205 | { | 229 | { |
206 | name : 'GN Killgothic U Kanana', | 230 | name : 'GN Killgothic U Kanana', |
207 | slug : 'gn_killgothic_u_kanana' | 231 | slug : 'gn_killgothic_u_kanana' |
208 | 232 | ||
209 | } | 233 | } |
210 | ]; | 234 | ]; |
211 | 235 | ||
212 | $scope.focusInputText = function() { | 236 | $scope.focusInputText = function() { |
213 | if($scope.typeObject != 'i-text') | 237 | if($scope.typeObject != 'i-text') |
214 | $scope.iText = new fabric.IText('', { | 238 | $scope.iText = new fabric.IText('', { |
215 | left: 150, | 239 | left: 150, |
216 | top: 200, | 240 | top: 200, |
217 | fontFamily: 'Arial', | 241 | fontFamily: 'Arial', |
218 | fontWeight: 'normal', | 242 | fontWeight: 'normal', |
219 | fontSize: 28, | 243 | fontSize: 28, |
220 | fill: 'black' | 244 | fill: 'black' |
221 | }); | 245 | }); |
222 | }; | 246 | }; |
223 | 247 | ||
224 | //Design text | 248 | //Design text |
225 | $scope.inputText = function(e) { | 249 | $scope.inputText = function(e) { |
226 | var iText = $scope.iText; | 250 | var iText = $scope.iText; |
227 | if(e != '') { | 251 | if(e != '') { |
228 | iText.text = e; | 252 | iText.text = e; |
229 | iText.set().setCoords(); | 253 | iText.set().setCoords(); |
230 | canvas.add(iText); | 254 | canvas.add(iText); |
231 | canvas.renderAll(); | 255 | canvas.renderAll(); |
232 | canvas.setActiveObject(iText); | 256 | canvas.setActiveObject(iText); |
233 | } | 257 | } |
234 | }; | 258 | }; |
235 | $scope.setFontFamily = function(font) { | 259 | $scope.setFontFamily = function(font) { |
236 | if(canvas.getActiveObject()) { | 260 | if(canvas.getActiveObject()) { |
237 | var currentObject = canvas.getActiveObject(); | 261 | var currentObject = canvas.getActiveObject(); |
238 | if(currentObject.type == 'i-text') { | 262 | if(currentObject.type == 'i-text') { |
239 | console.log(font); | 263 | console.log(font); |
240 | 264 | ||
241 | currentObject.set('fontFamily', font); | 265 | currentObject.set('fontFamily', font); |
242 | currentObject.selectWord(); | 266 | currentObject.selectWord(); |
243 | 267 | ||
244 | canvas.renderAll(); | 268 | canvas.renderAll(); |
245 | // currentObject.getActiveObject(); | 269 | // currentObject.getActiveObject(); |
246 | canvas.setActiveObject(currentObject); | 270 | canvas.setActiveObject(currentObject); |
247 | } | 271 | } |
248 | 272 |
app/scripts/services/illustration.js
1 | define(['app'], function (app) { | 1 | define(['app'], function (app) { |
2 | 'use strict'; | 2 | 'use strict'; |
3 | 3 | ||
4 | app.factory('$illustration', function ($http, $rootScope) { | 4 | app.factory('$illustration', function ($http, $rootScope) { |
5 | // data format: {'id_cate1': {name: '', list: [item1,item2]}, ...} | 5 | // data format: {'id_cate1': {name: '', list: [item1,item2]}, ...} |
6 | // item format: {name: '', path: ''} | 6 | // item format: {name: '', path: ''} |
7 | var DATA = { | 7 | var DATA = { |
8 | 'cate1': { | 8 | 'cate1': { |
9 | name: 'category #1', | 9 | name: 'category #1', |
10 | list: [ | 10 | list: [ |
11 | { | 11 | { |
12 | name: 'item 1', | 12 | name: 'item 1', |
13 | path: 'images/illustrations/item1.svg' | 13 | path: 'images/illustrations/item1.svg' |
14 | }, | 14 | }, |
15 | { | 15 | { |
16 | name: 'item 2', | 16 | name: 'item 2', |
17 | path: 'images/illustrations/item2.svg' | 17 | path: 'images/illustrations/item2.svg' |
18 | }, | 18 | }, |
19 | { | 19 | { |
20 | name: 'item 3', | 20 | name: 'item 3', |
21 | path: 'images/illustrations/item3.svg' | 21 | path: 'images/illustrations/item3.svg' |
22 | }, | 22 | }, |
23 | { | 23 | { |
24 | name: 'item 4', | 24 | name: 'item 4', |
25 | path: 'images/illustrations/item4.svg' | 25 | path: 'images/illustrations/item4.svg' |
26 | }, | 26 | }, |
27 | { | 27 | { |
28 | name: 'item 1', | 28 | name: 'item 1', |
29 | path: 'images/illustrations/item3.svg' | 29 | path: 'images/illustrations/item3.svg' |
30 | }, | 30 | }, |
31 | { | 31 | { |
32 | name: 'item 2', | 32 | name: 'item 2', |
33 | path: 'images/illustrations/item1.svg' | 33 | path: 'images/illustrations/item1.svg' |
34 | }, | 34 | }, |
35 | { | 35 | { |
36 | name: 'item 3', | 36 | name: 'item 3', |
37 | path: 'images/illustrations/item4.svg' | 37 | path: 'images/illustrations/item4.svg' |
38 | }, | 38 | }, |
39 | { | 39 | { |
40 | name: 'item 4', | 40 | name: 'item 4', |
41 | path: 'images/illustrations/item2.svg' | 41 | path: 'images/illustrations/item2.svg' |
42 | }, | ||
43 | { | ||
44 | name: 'item 1', | ||
45 | path: 'images/illustrations/item1.svg' | ||
46 | }, | ||
47 | { | ||
48 | name: 'item 2', | ||
49 | path: 'images/illustrations/item2.svg' | ||
50 | }, | ||
51 | { | ||
52 | name: 'item 3', | ||
53 | path: 'images/illustrations/item3.svg' | ||
54 | }, | ||
55 | { | ||
56 | name: 'item 4', | ||
57 | path: 'images/illustrations/item4.svg' | ||
58 | }, | ||
59 | { | ||
60 | name: 'item 1', | ||
61 | path: 'images/illustrations/item3.svg' | ||
62 | }, | ||
63 | { | ||
64 | name: 'item 2', | ||
65 | path: 'images/illustrations/item1.svg' | ||
66 | }, | ||
67 | { | ||
68 | name: 'item 3', | ||
69 | path: 'images/illustrations/item4.svg' | ||
70 | }, | ||
71 | { | ||
72 | name: 'item 4', | ||
73 | path: 'images/illustrations/item2.svg' | ||
74 | }, | ||
75 | { | ||
76 | name: 'item 1', | ||
77 | path: 'images/illustrations/item1.svg' | ||
78 | }, | ||
79 | { | ||
80 | name: 'item 2', | ||
81 | path: 'images/illustrations/item2.svg' | ||
82 | }, | ||
83 | { | ||
84 | name: 'item 3', | ||
85 | path: 'images/illustrations/item3.svg' | ||
86 | }, | ||
87 | { | ||
88 | name: 'item 4', | ||
89 | path: 'images/illustrations/item4.svg' | ||
90 | }, | ||
91 | { | ||
92 | name: 'item 1', | ||
93 | path: 'images/illustrations/item3.svg' | ||
94 | }, | ||
95 | { | ||
96 | name: 'item 2', | ||
97 | path: 'images/illustrations/item1.svg' | ||
98 | }, | ||
99 | { | ||
100 | name: 'item 3', | ||
101 | path: 'images/illustrations/item4.svg' | ||
102 | }, | ||
103 | { | ||
104 | name: 'item 4', | ||
105 | path: 'images/illustrations/item2.svg' | ||
42 | } | 106 | } |
43 | ] | 107 | ] |
44 | }, | 108 | }, |
45 | 'cate2': { | 109 | 'cate2': { |
46 | name: 'category #2', | 110 | name: 'category #2', |
47 | list: [ | 111 | list: [ |
48 | { | 112 | { |
49 | name: 'item 1', | 113 | name: 'item 1', |
50 | path: 'images/illustrations/item3.svg' | 114 | path: 'images/illustrations/item3.svg' |
51 | }, | 115 | }, |
52 | { | 116 | { |
53 | name: 'item 2', | 117 | name: 'item 2', |
54 | path: 'images/illustrations/item1.svg' | 118 | path: 'images/illustrations/item1.svg' |
55 | }, | 119 | }, |
56 | { | 120 | { |
57 | name: 'item 3', | 121 | name: 'item 3', |
58 | path: 'images/illustrations/item4.svg' | 122 | path: 'images/illustrations/item4.svg' |
59 | }, | 123 | }, |
60 | { | 124 | { |
61 | name: 'item 4', | 125 | name: 'item 4', |
62 | path: 'images/illustrations/item2.svg' | 126 | path: 'images/illustrations/item2.svg' |
63 | }, | 127 | }, |
64 | { | 128 | { |
65 | name: 'item 1', | 129 | name: 'item 1', |
66 | path: 'images/illustrations/item1.svg' | 130 | path: 'images/illustrations/item1.svg' |
67 | }, | 131 | }, |
68 | { | 132 | { |
69 | name: 'item 2', | 133 | name: 'item 2', |
70 | path: 'images/illustrations/item2.svg' | 134 | path: 'images/illustrations/item2.svg' |
71 | }, | 135 | }, |
72 | { | 136 | { |
73 | name: 'item 3', | 137 | name: 'item 3', |
74 | path: 'images/illustrations/item3.svg' | 138 | path: 'images/illustrations/item3.svg' |
75 | }, | 139 | }, |
76 | { | 140 | { |
77 | name: 'item 4', | 141 | name: 'item 4', |
78 | path: 'images/illustrations/item4.svg' | 142 | path: 'images/illustrations/item4.svg' |
79 | } | 143 | } |
80 | ] | 144 | ] |
81 | } | 145 | } |
82 | }; | 146 | }; |
83 | 147 | ||
84 | return { | 148 | return { |
85 | loadFromRemote: function (params,successHandle,errorHandle) { | 149 | loadFromRemote: function (params,successHandle,errorHandle) { |
86 | // return format: { status:0|1 , data:{} } | 150 | // return format: { status:0|1 , data:{} } |
87 | var httpObj = $http({ | 151 | var httpObj = $http({ |
88 | url: $rootScope+'/apiv1/illustration', | 152 | url: $rootScope.API_URL+'/apiv1/illustration', |
89 | method: 'GET', | 153 | method: 'GET', |
90 | params: params || [] | 154 | params: params || [] |
91 | }); | 155 | }); |
92 | if (typeof successHandle == 'undefined'){ | 156 | if (typeof successHandle == 'undefined'){ |
93 | successHandle = function(response){ | 157 | successHandle = function(response){ |
94 | if (response.status==1){ | 158 | if (response.status==1){ |
95 | DATA = response.data; | 159 | DATA = response.data; |
96 | } | 160 | } |
97 | } | 161 | } |
98 | } | 162 | } |
99 | httpObj.success(successHandle); | 163 | httpObj.success(successHandle); |
100 | 164 | ||
101 | if (typeof errorHandle != 'undefined'){ | 165 | if (typeof errorHandle != 'undefined'){ |
102 | httpObj.error(errorHandle); | 166 | httpObj.error(errorHandle); |
103 | } | 167 | } |
104 | }, | 168 | }, |
105 | getAll: function(){ | 169 | getAll: function(){ |
106 | return DATA; | 170 | return DATA; |
107 | }, | 171 | }, |
108 | getList: function(category){ | 172 | getList: function(category){ |
109 | if (typeof DATA[category] == 'undefined'){ | 173 | if (typeof DATA[category] == 'undefined'){ |
110 | return []; | 174 | return []; |
111 | } | 175 | } |
112 | return DATA[category]; | 176 | return DATA[category]; |
113 | } | 177 | } |
114 | }; | 178 | }; |
115 | }); | 179 | }); |
116 | }); | 180 | }); |
117 | 181 |
app/styles/main.css
1 | /* Space out content a bit */ | 1 | /* Space out content a bit */ |
2 | @import "../fonts/font.css"; | 2 | @import "../fonts/font.css"; |
3 | @import "../fonts/font_canvas/font-canvas.css"; | 3 | @import "../fonts/font_canvas/font-canvas.css"; |
4 | body { | 4 | body { |
5 | font-family: 'Hiragino Kaku Gothic Pro', sans-serif; | 5 | font-family: 'Hiragino Kaku Gothic Pro', sans-serif; |
6 | /*font-family: 'gn_aki_iro_sesami_cookies';*/ | 6 | /*font-family: 'gn_aki_iro_sesami_cookies';*/ |
7 | } | 7 | } |
8 | 8 | ||
9 | .padding-right-0{ | 9 | .padding-right-0{ |
10 | padding-right: 0!important; | 10 | padding-right: 0!important; |
11 | } | 11 | } |
12 | .padding-left-0{ | 12 | .padding-left-0{ |
13 | padding-left: 0!important; | 13 | padding-left: 0!important; |
14 | } | 14 | } |
15 | button.red{ | 15 | button.red{ |
16 | color: #ffffff; | 16 | color: #ffffff; |
17 | background-color: #ff0000; | 17 | background-color: #ff0000; |
18 | border: 1px solid #ff0000; | 18 | border: 1px solid #ff0000; |
19 | 19 | ||
20 | } | 20 | } |
21 | button.white{ | 21 | button.white{ |
22 | border: 1px solid #ff8080; | 22 | border: 1px solid #ff8080; |
23 | color: #ff8080; | 23 | color: #ff8080; |
24 | background-color: #ffffff; | 24 | background-color: #ffffff; |
25 | } | 25 | } |
26 | button.brown{ | 26 | button.brown{ |
27 | background-color: #666666; | 27 | background-color: #666666; |
28 | border: 1px solid #666666; | 28 | border: 1px solid #666666; |
29 | color: #ffffff; | 29 | color: #ffffff; |
30 | border-radius: 5px; | 30 | border-radius: 5px; |
31 | } | 31 | } |
32 | button.black{ | 32 | button.black{ |
33 | border: 1px solid #c9c9c9; | 33 | border: 1px solid #c9c9c9; |
34 | background-color: #343434; | 34 | background-color: #343434; |
35 | color: #ffffff; | 35 | color: #ffffff; |
36 | padding: 1px 6px; | 36 | padding: 1px 6px; |
37 | } | 37 | } |
38 | #tshirt-container{ | 38 | #tshirt-container{ |
39 | border-left: 1px solid #dcdcdc; | 39 | border-left: 1px solid #dcdcdc; |
40 | border-right: 1px solid #dcdcdc; | 40 | border-right: 1px solid #dcdcdc; |
41 | } | 41 | } |
42 | /*HEADER*/ | 42 | /*HEADER*/ |
43 | header{ | 43 | header{ |
44 | border-bottom: 1px solid #dcdcdc; | 44 | border-bottom: 1px solid #dcdcdc; |
45 | } | 45 | } |
46 | header .logo{ | 46 | header .logo{ |
47 | color: #ed1d24; | 47 | color: #ed1d24; |
48 | font-size: 30px; | 48 | font-size: 30px; |
49 | text-transform: uppercase; | 49 | text-transform: uppercase; |
50 | font-weight: bold; | 50 | font-weight: bold; |
51 | } | 51 | } |
52 | header .logo img{ | 52 | header .logo img{ |
53 | width: 60px; | 53 | width: 60px; |
54 | } | 54 | } |
55 | /*NAVIGATION*/ | 55 | /*NAVIGATION*/ |
56 | nav{ | 56 | nav{ |
57 | border-bottom: 1px solid #dcdcdc; | 57 | border-bottom: 1px solid #dcdcdc; |
58 | padding: 10px 0; | 58 | padding: 10px 0; |
59 | } | 59 | } |
60 | nav h2{ | 60 | nav h2{ |
61 | font-size: 27px; | 61 | font-size: 27px; |
62 | margin: 0 0; | 62 | margin: 0 0; |
63 | } | 63 | } |
64 | nav ul{ | 64 | nav ul{ |
65 | list-style: none; | 65 | list-style: none; |
66 | padding-left: 0; | 66 | padding-left: 0; |
67 | margin-bottom: 0; | 67 | margin-bottom: 0; |
68 | 68 | ||
69 | } | 69 | } |
70 | nav ul li{ | 70 | nav ul li{ |
71 | margin-left: 2px; | 71 | margin-left: 2px; |
72 | float: left; | 72 | float: left; |
73 | padding: 6px 12px; | 73 | padding: 6px 12px; |
74 | background-color: #999999; | 74 | background-color: #999999; |
75 | position: relative; | 75 | position: relative; |
76 | } | 76 | } |
77 | nav ul li i.fa{ | 77 | nav ul li i.fa{ |
78 | position: absolute; | 78 | position: absolute; |
79 | color: #ffffff; | 79 | color: #ffffff; |
80 | font-size: 18px; | 80 | font-size: 18px; |
81 | right: -4px; | 81 | right: -4px; |
82 | top: 50%; | 82 | top: 50%; |
83 | transform: translateX(-50%) translateY(-50%); | 83 | transform: translateX(-50%) translateY(-50%); |
84 | -webkit-transform: translateX(-50%) translateY(-50%); | 84 | -webkit-transform: translateX(-50%) translateY(-50%); |
85 | } | 85 | } |
86 | nav ul li a{ | 86 | nav ul li a{ |
87 | color: #ffffff; | 87 | color: #ffffff; |
88 | } | 88 | } |
89 | nav ul li:hover a{ | 89 | nav ul li:hover a{ |
90 | text-decoration: none; | 90 | text-decoration: none; |
91 | color: #ffffff; | 91 | color: #ffffff; |
92 | } | 92 | } |
93 | nav ul li.action{ | 93 | nav ul li.action{ |
94 | color: #ffffff; | 94 | color: #ffffff; |
95 | background-color: #ed1d24; | 95 | background-color: #ed1d24; |
96 | } | 96 | } |
97 | /*ASIDE*/ | 97 | /*ASIDE*/ |
98 | aside{ | 98 | aside{ |
99 | margin: 10px 0; | 99 | margin: 10px 0; |
100 | } | 100 | } |
101 | 101 | ||
102 | aside .break-down{ | 102 | aside .break-down{ |
103 | padding: 0 0; | 103 | padding: 0 0; |
104 | } | 104 | } |
105 | aside .break-down i.fa{ | 105 | aside .break-down i.fa{ |
106 | font-size: 35px; | 106 | font-size: 35px; |
107 | color: #ff0000; | 107 | color: #ff0000; |
108 | } | 108 | } |
109 | aside .break-line{ | 109 | aside .break-line{ |
110 | height: 10px; | 110 | height: 10px; |
111 | } | 111 | } |
112 | aside .break-line hr{ | 112 | aside .break-line hr{ |
113 | border-top: 1px dotted #cccccc; | 113 | border-top: 1px dotted #cccccc; |
114 | } | 114 | } |
115 | aside .step{ | 115 | aside .step{ |
116 | margin: 0 0; | 116 | margin: 0 0; |
117 | } | 117 | } |
118 | aside .step .title{ | 118 | aside .step .title{ |
119 | font-size: 15px; | 119 | font-size: 15px; |
120 | line-height: 16px; | 120 | line-height: 16px; |
121 | font-weight: bold; | 121 | font-weight: bold; |
122 | margin-bottom: 3px; | 122 | margin-bottom: 3px; |
123 | } | 123 | } |
124 | aside .step .title-notice{ | 124 | aside .step .title-notice{ |
125 | font-size: 13px; | 125 | font-size: 13px; |
126 | line-height: 16px; | 126 | line-height: 16px; |
127 | margin-bottom: 3px; | 127 | margin-bottom: 3px; |
128 | } | 128 | } |
129 | aside .step .title-notice .require{ | 129 | aside .step .title-notice .require{ |
130 | font-size: 10px; | 130 | font-size: 10px; |
131 | } | 131 | } |
132 | aside .step .step-box{ | 132 | aside .step .step-box{ |
133 | border: 2px solid #dcdcdc; | 133 | border: 2px solid #dcdcdc; |
134 | font-size: 12px; | 134 | font-size: 12px; |
135 | 135 | ||
136 | } | 136 | } |
137 | /*Step 1*/ | 137 | /*Step 1*/ |
138 | aside .step .step-box .tshirt-design{ | 138 | aside .step .step-box .tshirt-design{ |
139 | border: 1px solid #cccccc; | 139 | border: 1px solid #cccccc; |
140 | background-color: #f5f5f5; | 140 | background-color: #f5f5f5; |
141 | margin: 10px 10px; | 141 | margin: 10px 10px; |
142 | } | 142 | } |
143 | aside .step .step-box .tshirt-design:hover{ | 143 | aside .step .step-box .tshirt-design:hover{ |
144 | border: 1px solid #ff0000; | 144 | border: 1px solid #ff0000; |
145 | } | 145 | } |
146 | aside .step .step-box .tshirt-design button:hover{ | 146 | aside .step .step-box .tshirt-design button:hover{ |
147 | background-color: #fa7b7b; | 147 | background-color: #fa7b7b; |
148 | border: 1px solid #fa7b7b; | 148 | border: 1px solid #fa7b7b; |
149 | } | 149 | } |
150 | aside .step .step-box .tshirt-design div{ | 150 | aside .step .step-box .tshirt-design div{ |
151 | float: left; | 151 | float: left; |
152 | } | 152 | } |
153 | aside .step .step-box .tshirt-design .icon{ | 153 | aside .step .step-box .tshirt-design .icon{ |
154 | padding: 4px 4px; | 154 | padding: 4px 4px; |
155 | border-right: 1px solid #cccccc; | 155 | border-right: 1px solid #cccccc; |
156 | 156 | ||
157 | } | 157 | } |
158 | aside .step .step-box .tshirt-design .icon img{ | 158 | aside .step .step-box .tshirt-design .icon img{ |
159 | height: 50px; | 159 | height: 50px; |
160 | } | 160 | } |
161 | aside .step .step-box .tshirt-design .name{ | 161 | aside .step .step-box .tshirt-design .name{ |
162 | padding: 10px 10px; | 162 | padding: 10px 10px; |
163 | 163 | ||
164 | } | 164 | } |
165 | aside .step .step-box .tshirt-design .action{ | 165 | aside .step .step-box .tshirt-design .action{ |
166 | padding: 10px 10px; | 166 | padding: 10px 10px; |
167 | float: right; | 167 | float: right; |
168 | 168 | ||
169 | } | 169 | } |
170 | aside .step .step-box .tshirt-design .action button{ | 170 | aside .step .step-box .tshirt-design .action button{ |
171 | padding: 8px 10px; | 171 | padding: 8px 10px; |
172 | } | 172 | } |
173 | /*Step 2*/ | 173 | /*Step 2*/ |
174 | aside .step .step-box .tshirt-color{ | 174 | aside .step .step-box .tshirt-color{ |
175 | padding: 6px 10px; | 175 | padding: 6px 10px; |
176 | position: relative; | 176 | position: relative; |
177 | } | 177 | } |
178 | aside .step .step-box .tshirt-color ul.choice-color{ | 178 | aside .step .step-box .tshirt-color ul.choice-color{ |
179 | float: left; | 179 | float: left; |
180 | list-style: none; | 180 | list-style: none; |
181 | padding-left: 0; | 181 | padding-left: 0; |
182 | width: 100%; | 182 | width: 100%; |
183 | margin-bottom: 3px; | 183 | margin-bottom: 3px; |
184 | } | 184 | } |
185 | aside .step .step-box .tshirt-color ul.choice-color li{ | 185 | aside .step .step-box .tshirt-color ul.choice-color li{ |
186 | margin: 0 10px 0 0; | 186 | margin: 0 10px 0 0; |
187 | border: 1px solid #cccccc; | 187 | border: 1px solid #cccccc; |
188 | padding: 2px 2px; | 188 | padding: 2px 2px; |
189 | float: left; | 189 | float: left; |
190 | cursor: pointer; | 190 | cursor: pointer; |
191 | } | 191 | } |
192 | aside .step .step-box .tshirt-color ul.choice-color li.action{ | 192 | aside .step .step-box .tshirt-color ul.choice-color li.action{ |
193 | border: 1px solid #ff0000; | 193 | border: 1px solid #ff0000; |
194 | } | 194 | } |
195 | aside .step .step-box .tshirt-color ul.choice-color li:hover{ | 195 | aside .step .step-box .tshirt-color ul.choice-color li:hover{ |
196 | border: 1px solid #ff0000; | 196 | border: 1px solid #ff0000; |
197 | } | 197 | } |
198 | aside .step .step-box .tshirt-color ul.choice-color li div{ | 198 | aside .step .step-box .tshirt-color ul.choice-color li div{ |
199 | height: 30px; | 199 | height: 30px; |
200 | width: 30px; | 200 | width: 30px; |
201 | } | 201 | } |
202 | 202 | ||
203 | aside .step .step-box .tshirt-color ul.choice-color li.white div{ | 203 | aside .step .step-box .tshirt-color ul.choice-color li.white div{ |
204 | background-color: #ece7e4; | 204 | background-color: #ece7e4; |
205 | } | 205 | } |
206 | aside .step .step-box .tshirt-color ul.choice-color li.blue div{ | 206 | aside .step .step-box .tshirt-color ul.choice-color li.blue div{ |
207 | background-color: #e7dfd0; | 207 | background-color: #e7dfd0; |
208 | } | 208 | } |
209 | aside .step .step-box .tshirt-color .color-name{ | 209 | aside .step .step-box .tshirt-color .color-name{ |
210 | width: 100%; | 210 | width: 100%; |
211 | font-size: 10px; | 211 | font-size: 10px; |
212 | } | 212 | } |
213 | aside .step .step-box .tshirt-color .view-more{ | 213 | aside .step .step-box .tshirt-color .view-more{ |
214 | position: absolute; | 214 | position: absolute; |
215 | bottom: 6px; | 215 | bottom: 6px; |
216 | right: 10px; | 216 | right: 10px; |
217 | } | 217 | } |
218 | /*Step 3*/ | 218 | /*Step 3*/ |
219 | aside .step .step-box .tshirt-saveorder{ | 219 | aside .step .step-box .tshirt-saveorder{ |
220 | padding: 10px 10px 6px 10px; | 220 | padding: 10px 10px 6px 10px; |
221 | } | 221 | } |
222 | aside .step .step-box .tshirt-saveorder .action{ | 222 | aside .step .step-box .tshirt-saveorder .action{ |
223 | width: 50%; | 223 | width: 50%; |
224 | float: left; | 224 | float: left; |
225 | } | 225 | } |
226 | aside .step .step-box .tshirt-saveorder .action:first-child{ | 226 | aside .step .step-box .tshirt-saveorder .action:first-child{ |
227 | padding-right: 5px; | 227 | padding-right: 5px; |
228 | } | 228 | } |
229 | aside .step .step-box .tshirt-saveorder .action:last-child{ | 229 | aside .step .step-box .tshirt-saveorder .action:last-child{ |
230 | padding-left: 5px; | 230 | padding-left: 5px; |
231 | } | 231 | } |
232 | aside .step .step-box .tshirt-saveorder .action button{ | 232 | aside .step .step-box .tshirt-saveorder .action button{ |
233 | padding: 8px 10px; | 233 | padding: 8px 10px; |
234 | 234 | ||
235 | } | 235 | } |
236 | aside .step .step-box .tshirt-saveorder .action button .text{ | 236 | aside .step .step-box .tshirt-saveorder .action button .text{ |
237 | float: left; | 237 | float: left; |
238 | width: 80%; | 238 | width: 80%; |
239 | text-align: center; | 239 | text-align: center; |
240 | padding-left: 10px; | 240 | padding-left: 10px; |
241 | vertical-align: bottom; | 241 | vertical-align: bottom; |
242 | } | 242 | } |
243 | aside .step .step-box .tshirt-saveorder .action button .arrow{ | 243 | aside .step .step-box .tshirt-saveorder .action button .arrow{ |
244 | float: left; | 244 | float: left; |
245 | width: 20%; | 245 | width: 20%; |
246 | height: 40px; | 246 | height: 40px; |
247 | position: relative; | 247 | position: relative; |
248 | } | 248 | } |
249 | aside .step .step-box .tshirt-saveorder .action button .arrow i.fa{ | 249 | aside .step .step-box .tshirt-saveorder .action button .arrow i.fa{ |
250 | position: absolute; | 250 | position: absolute; |
251 | top: 50%; | 251 | top: 50%; |
252 | right: -6px; | 252 | right: -6px; |
253 | transform: translateX(-50%) translateY(-50%); | 253 | transform: translateX(-50%) translateY(-50%); |
254 | -webkit-transform: translateX(-50%) translateY(-50%); | 254 | -webkit-transform: translateX(-50%) translateY(-50%); |
255 | } | 255 | } |
256 | aside .step .step-box .tshirt-saveorder .notice{ | 256 | aside .step .step-box .tshirt-saveorder .notice{ |
257 | padding: 5px 0 0 0; | 257 | padding: 5px 0 0 0; |
258 | } | 258 | } |
259 | /*Step 4*/ | 259 | /*Step 4*/ |
260 | aside .step .title-notice{ | 260 | aside .step .title-notice{ |
261 | 261 | ||
262 | } | 262 | } |
263 | aside .step .step-box .change-design{ | 263 | aside .step .step-box .change-design{ |
264 | padding: 4px 4px; | 264 | padding: 4px 4px; |
265 | } | 265 | } |
266 | aside .step .step-box .change-design table{ | 266 | aside .step .step-box .change-design table{ |
267 | 267 | ||
268 | } | 268 | } |
269 | aside .step .step-box .change-design table tr{ | 269 | aside .step .step-box .change-design table tr{ |
270 | border-bottom: 1px dotted #cccccc; | 270 | border-bottom: 1px dotted #cccccc; |
271 | } | 271 | } |
272 | aside .step .step-box .change-design table tr:last-child{ | 272 | aside .step .step-box .change-design table tr:last-child{ |
273 | border-bottom: 0; | 273 | border-bottom: 0; |
274 | } | 274 | } |
275 | 275 | ||
276 | /*Step 5- finish*/ | 276 | /*Step 5- finish*/ |
277 | aside .step .finish-design{ | 277 | aside .step .finish-design{ |
278 | padding: 20px 0; | 278 | padding: 20px 0; |
279 | } | 279 | } |
280 | aside .step .finish-design button{ | 280 | aside .step .finish-design button{ |
281 | width: 100%; | 281 | width: 100%; |
282 | padding: 8px 10px; | 282 | padding: 8px 10px; |
283 | } | 283 | } |
284 | 284 | ||
285 | /*DESIGN CONTENT*/ | 285 | /*DESIGN CONTENT*/ |
286 | #tshirt-content{ | 286 | #tshirt-content{ |
287 | position: relative; | 287 | position: relative; |
288 | } | 288 | } |
289 | #tshirt-content .switch-border-design{ | 289 | #tshirt-content .switch-border-design{ |
290 | position: absolute; | 290 | position: absolute; |
291 | top: 5px; | 291 | top: 5px; |
292 | right: 10px; | 292 | right: 10px; |
293 | color: red; | 293 | color: red; |
294 | font-size: 11px; | 294 | font-size: 11px; |
295 | } | 295 | } |
296 | #tshirt-content .tshirt-image{ | 296 | #tshirt-content .tshirt-image{ |
297 | padding: 20px 0 0 0; | 297 | padding: 20px 0 0 0; |
298 | } | 298 | } |
299 | #tshirt-content .tshirt-choice{ | 299 | #tshirt-content .tshirt-choice{ |
300 | 300 | ||
301 | } | 301 | } |
302 | #tshirt-content .tshirt-choice ul{ | 302 | #tshirt-content .tshirt-choice ul{ |
303 | list-style: none; | 303 | list-style: none; |
304 | padding-left: 0; | 304 | padding-left: 0; |
305 | display: table; | 305 | display: table; |
306 | margin: auto; | 306 | margin: auto; |
307 | } | 307 | } |
308 | #tshirt-content .tshirt-choice ul li{ | 308 | #tshirt-content .tshirt-choice ul li{ |
309 | float: left; | 309 | float: left; |
310 | margin: 10px 10px; | 310 | margin: 10px 10px; |
311 | cursor: pointer; | 311 | cursor: pointer; |
312 | } | 312 | } |
313 | #tshirt-content .tshirt-choice ul li .image{ | 313 | #tshirt-content .tshirt-choice ul li .image{ |
314 | border: 1px solid #cccccc; | 314 | border: 1px solid #cccccc; |
315 | padding: 3px 3px; | 315 | padding: 3px 3px; |
316 | } | 316 | } |
317 | #tshirt-content .tshirt-choice ul li.focus{ | 317 | #tshirt-content .tshirt-choice ul li.focus{ |
318 | 318 | ||
319 | } | 319 | } |
320 | #tshirt-content .tshirt-choice ul li.focus .image{ | 320 | #tshirt-content .tshirt-choice ul li.focus .image{ |
321 | border: 1px solid #ff0000; | 321 | border: 1px solid #ff0000; |
322 | } | 322 | } |
323 | #tshirt-content .tshirt-choice ul li .image img{ | 323 | #tshirt-content .tshirt-choice ul li .image img{ |
324 | width: 50px; | 324 | width: 50px; |
325 | height: auto; | 325 | height: auto; |
326 | } | 326 | } |
327 | /*MODAL Design*/ | 327 | /*MODAL Design*/ |
328 | #tshirt-design{ | 328 | #tshirt-design{ |
329 | background-color: #666666; | 329 | background-color: #666666; |
330 | } | 330 | } |
331 | #tshirt-design .modal-dialog{ | 331 | #tshirt-design .modal-dialog{ |
332 | width: 75%; | 332 | width: 75%; |
333 | margin: 0 auto; | 333 | margin: 0 auto; |
334 | } | 334 | } |
335 | #tshirt-design .modal-dialog .modal-content{ | 335 | #tshirt-design .modal-dialog .modal-content{ |
336 | background-color: transparent; | 336 | background-color: transparent; |
337 | border-radius: 0; | 337 | border-radius: 0; |
338 | border: 0; | 338 | border: 0; |
339 | -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important; | 339 | -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important; |
340 | box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important; | 340 | box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important; |
341 | } | 341 | } |
342 | #tshirt-design .modal-dialog .modal-content .modal-header{ | 342 | #tshirt-design .modal-dialog .modal-content .modal-header{ |
343 | padding: 0 0 10px 0; | 343 | padding: 0 0 10px 0; |
344 | border-bottom: 0; | 344 | border-bottom: 0; |
345 | border-shadow: none!important; | 345 | border-shadow: none!important; |
346 | } | 346 | } |
347 | #tshirt-design .modal-dialog .modal-content .modal-body{ | 347 | #tshirt-design .modal-dialog .modal-content .modal-body{ |
348 | background-color: #f5f5f5; | 348 | background-color: #f5f5f5; |
349 | padding: 0 0; | 349 | padding: 0 0; |
350 | } | 350 | } |
351 | #tshirt-design header{ | 351 | #tshirt-design header{ |
352 | border-bottom: 1px solid #cccccc; | 352 | border-bottom: 1px solid #cccccc; |
353 | background-color: #dddddd; | 353 | background-color: #dddddd; |
354 | } | 354 | } |
355 | #tshirt-design header ul.nav{ | 355 | #tshirt-design header ul.nav{ |
356 | padding-left: 0; | 356 | padding-left: 0; |
357 | list-style: none; | 357 | list-style: none; |
358 | } | 358 | } |
359 | #tshirt-design header ul.nav li{ | 359 | #tshirt-design header ul.nav li{ |
360 | float: left; | 360 | float: left; |
361 | padding: 8px 26px; | 361 | padding: 8px 26px; |
362 | border-right: 1px solid #cccccc; | 362 | border-right: 1px solid #cccccc; |
363 | font-size: 14px; | 363 | font-size: 14px; |
364 | cursor: pointer; | 364 | cursor: pointer; |
365 | } | 365 | } |
366 | #tshirt-design header ul.nav li:hover, #tshirt-design header ul.nav li.active{ | 366 | #tshirt-design header ul.nav li:hover, #tshirt-design header ul.nav li.active{ |
367 | background-color: red; | 367 | background-color: red; |
368 | color: #ffffff; | 368 | color: #ffffff; |
369 | } | 369 | } |
370 | #tshirt-design header ul.nav li:hover i.fa, #tshirt-design header ul.nav li.active i.fa{ | 370 | #tshirt-design header ul.nav li:hover i.fa, #tshirt-design header ul.nav li.active i.fa{ |
371 | color: #ffffff; | 371 | color: #ffffff; |
372 | } | 372 | } |
373 | #tshirt-design header ul.nav li i.fa{ | 373 | #tshirt-design header ul.nav li i.fa{ |
374 | color: #fe070f; | 374 | color: #fe070f; |
375 | font-size: 20px; | 375 | font-size: 20px; |
376 | margin-right: 10px; | 376 | margin-right: 10px; |
377 | } | 377 | } |
378 | #tshirt-design header .action{ | 378 | #tshirt-design header .action{ |
379 | 379 | ||
380 | } | 380 | } |
381 | #tshirt-design header .action button{ | 381 | #tshirt-design header .action button{ |
382 | padding: 2px 10px; | 382 | padding: 2px 10px; |
383 | margin: 6px 10px; | 383 | margin: 6px 10px; |
384 | } | 384 | } |
385 | #tshirt-design header .action button:hover{ | 385 | #tshirt-design header .action button:hover{ |
386 | background-color: red; | 386 | background-color: red; |
387 | color: #ffffff; | 387 | color: #ffffff; |
388 | } | 388 | } |
389 | 389 | ||
390 | /*Aside modal*/ | 390 | /*Aside modal*/ |
391 | .aside{ | 391 | .aside{ |
392 | } | 392 | } |
393 | 393 | ||
394 | .aside .box-design-option{ | 394 | .aside .box-design-option{ |
395 | list-style: none; | 395 | list-style: none; |
396 | padding-left: 0; | 396 | padding-left: 0; |
397 | margin-top: 10px; | 397 | margin-top: 10px; |
398 | } | 398 | } |
399 | .aside .box-design-option li{ | 399 | .aside .box-design-option li{ |
400 | 400 | ||
401 | } | 401 | } |
402 | .aside .box-design-option li{ | 402 | .aside .box-design-option li{ |
403 | border: 1px solid #cdcdcd; | 403 | border: 1px solid #cdcdcd; |
404 | position: relative; | 404 | position: relative; |
405 | cursor: pointer; | 405 | /*cursor: pointer;*/ |
406 | } | 406 | } |
407 | .aside .box-design-option li .hover{ | 407 | .aside .box-design-option li .hover{ |
408 | background-color: #fddad4; | 408 | background-color: #fddad4; |
409 | opacity: 0.6; | 409 | opacity: 0.6; |
410 | position: absolute; | 410 | position: absolute; |
411 | width: 100%; | 411 | width: 100%; |
412 | height: 100%; | 412 | height: 100%; |
413 | display: none; | 413 | display: none; |
414 | } | 414 | } |
415 | .aside .box-design-option li:hover .hover{ | 415 | .aside .box-design-option li:hover .hover{ |
416 | display: block; | 416 | display: block; |
417 | } | 417 | } |
418 | 418 | ||
419 | .aside .box-design-option li .title{ | 419 | .aside .box-design-option li .title{ |
420 | background: url("../images/bg1.png") repeat #cdcdcd; | 420 | background: url("../images/bg1.png") repeat #cdcdcd; |
421 | padding: 3px 10px; | 421 | padding: 3px 10px; |
422 | } | 422 | } |
423 | .aside .box-design-option li .title i.fa{ | 423 | .aside .box-design-option li .title i.fa{ |
424 | color: #000000; | 424 | color: #000000; |
425 | } | 425 | } |
426 | 426 | ||
427 | .aside .box-design-option li .content{ | 427 | .aside .box-design-option li .content{ |
428 | 428 | ||
429 | } | 429 | } |
430 | .aside .box-design-option li .content i.fa{ | 430 | .aside .box-design-option li .content i.fa{ |
431 | font-size: 30px; | 431 | font-size: 30px; |
432 | color: #fe070f; | 432 | color: #fe070f; |
433 | margin: 8px 0; | 433 | margin: 8px 0; |
434 | } | 434 | } |
435 | .aside .box-design-option li .content .des{ | 435 | .aside .box-design-option li .content .des{ |
436 | padding: 3px 10px 3px 0; | 436 | padding: 3px 10px 3px 0; |
437 | } | 437 | } |
438 | 438 | ||
439 | /*Design Choice Illustration*/ | 439 | /*Design Choice Illustration*/ |
440 | .aside #choice-illustration li .content { | 440 | .aside #choice-illustration li .content { |
441 | padding: 10px 10px; | 441 | padding: 10px 10px; |
442 | } | 442 | } |
443 | 443 | ||
444 | .aside #choice-illustration li .content select{ | 444 | .aside #choice-illustration li .content select{ |
445 | width: 100%; | 445 | width: 100%; |
446 | } | 446 | } |
447 | 447 | ||
448 | .aside #choice-illustration li .content .illustration-list { | 448 | .aside #choice-illustration li .content .illustration-list { |
449 | width: 100%; | 449 | width: 100%; |
450 | border: #bbb solid 1px; | 450 | border: #bbb solid 1px; |
451 | background: #FFF; | 451 | background: #FFF; |
452 | margin-top: 5px; | 452 | margin-top: 5px; |
453 | } | 453 | } |
454 | 454 | ||
455 | .aside #choice-illustration li .content .illustration-list .illstration-item{ | 455 | .aside #choice-illustration li .content .illustration-list .illstration-item{ |
456 | height: 60px; | 456 | height: 60px; |
457 | overflow: hidden; | 457 | overflow: hidden; |
458 | float: left; | 458 | float: left; |
459 | margin-left: 6px; | 459 | margin-left: 6px; |
460 | margin-top: 5px; | 460 | margin-top: 5px; |
461 | margin-bottom: 5px; | 461 | margin-bottom: 5px; |
462 | padding: 2px; | 462 | padding: 2px; |
463 | background: #e2e2e2; | 463 | background: #e2e2e2; |
464 | border: solid 2px #d7d7d7; | 464 | border: solid 2px #d7d7d7; |
465 | cursor: pointer; | 465 | cursor: pointer; |
466 | } | 466 | } |
467 | 467 | ||
468 | .aside #choice-illustration li .content .illustration-list .illstration-item:hover { | 468 | .aside #choice-illustration li .content .illustration-list .illstration-item:hover { |
469 | outline: 2px solid #ed1d24; | 469 | outline: 2px solid #ed1d24; |
470 | } | 470 | } |
471 | 471 | ||
472 | .aside #choice-illustration li .content .illustration-list .illstration-item img { | 472 | .aside #choice-illustration li .content .illustration-list .illstration-item img { |
473 | width: 50px; | 473 | width: 50px; |
474 | cursor: pointer; | 474 | cursor: pointer; |
475 | } | 475 | } |
476 | 476 | ||
477 | .aside #choice-illustration li .content .illustration-list .footer-bar { | ||
478 | text-align: center; | ||
479 | margin-top: 5px; | ||
480 | } | ||
481 | .aside #choice-illustration li .content .illustration-list .footer-bar .footer-pagination { | ||
482 | margin-right: 5px; | ||
483 | cursor: pointer; | ||
484 | font-size: 9px; | ||
485 | color: #FFF; | ||
486 | background: #666666; | ||
487 | text-transform: uppercase; | ||
488 | padding: 2px 5px; | ||
489 | } | ||
490 | |||
491 | .aside #choice-illustration li .content .illustration-list .footer-bar .footer-pagination:hover { | ||
492 | background: #999999; | ||
493 | } | ||
494 | |||
477 | .aside #choice-illustration li .content .color-patterns { | 495 | .aside #choice-illustration li .content .color-patterns { |
478 | width: 100%; | 496 | width: 100%; |
479 | border: #bbb solid 1px; | 497 | border: #bbb solid 1px; |
480 | background: #FFF; | 498 | background: #FFF; |
481 | margin-top: 5px; | 499 | margin-top: 5px; |
482 | } | 500 | } |
483 | 501 | ||
484 | .aside #choice-illustration li .content .color-patterns .color-pattern-item{ | 502 | .aside #choice-illustration li .content .color-patterns .color-pattern-item{ |
485 | height: 20px; | 503 | height: 20px; |
486 | float: left; | 504 | float: left; |
487 | margin-left: 4px; | 505 | margin-left: 4px; |
488 | margin-top: 2px; | 506 | margin-top: 2px; |
489 | width: 20px; | 507 | width: 20px; |
490 | cursor: pointer; | 508 | cursor: pointer; |
491 | border: 1px solid #ddd; | 509 | border: 1px solid #ddd; |
492 | } | 510 | } |
493 | 511 | ||
494 | .aside #choice-illustration li .content .color-patterns .color-pattern-item:hover { | 512 | .aside #choice-illustration li .content .color-patterns .color-pattern-item:hover { |
495 | outline: 1px solid #ed1d24; | 513 | outline: 1px solid #ed1d24; |
496 | } | 514 | } |
497 | 515 | ||
516 | .aside #choice-illustration li .content .layer-item { | ||
517 | text-align: center; | ||
518 | border: 1px #ddd solid; | ||
519 | background: #FFF; | ||
520 | padding: 5px; | ||
521 | font-size: 12px; | ||
522 | cursor: pointer; | ||
523 | } | ||
524 | |||
525 | .aside #choice-illustration li .content .layer-item:hover { | ||
526 | background: #ffcccc; | ||
527 | } | ||
498 | 528 | ||
499 | /*Design content*/ | 529 | /*Design content*/ |
500 | .tshirt-design-container{ | 530 | .tshirt-design-container{ |
501 | position: relative; | 531 | position: relative; |
502 | } | 532 | } |
503 | .tshirt-design-container .design-content{ | 533 | .tshirt-design-container .design-content{ |
504 | padding: 10px 30px 10px 15px; | 534 | padding: 10px 30px 10px 15px; |
505 | } | 535 | } |
506 | .tshirt-design-container .design-content .content{ | 536 | .tshirt-design-container .design-content .content{ |
507 | width: 100%; | 537 | width: 100%; |
508 | min-height: 650px; | 538 | min-height: 650px; |
509 | background-color: #f0efea; | 539 | background-color: #f0efea; |
510 | padding: 40px 40px; | 540 | padding: 40px 40px; |
511 | height: 100%; | 541 | height: 100%; |
512 | } | 542 | } |
513 | .tshirt-design-container .design-content .content .selection-design{ | 543 | .tshirt-design-container .design-content .content .selection-design{ |
514 | border: 1px solid #ff0000; | 544 | border: 1px solid #ff0000; |
515 | width: 100%; | 545 | width: 100%; |
516 | height: 620px; | 546 | height: 620px; |
517 | } | 547 | } |
518 | .tshirt-design-container .agree-design{ | 548 | .tshirt-design-container .agree-design{ |
519 | position: absolute; | 549 | position: absolute; |
520 | right: -16px; | 550 | right: -16px; |
521 | top: 40%; | 551 | top: 40%; |
522 | } | 552 | } |
523 | .tshirt-design-container .trash-design{ | 553 | .tshirt-design-container .trash-design{ |
524 | position: absolute; | 554 | position: absolute; |
525 | right: 5px; | 555 | right: 5px; |
526 | bottom: 0; | 556 | bottom: 0; |
527 | } | 557 | } |
528 | 558 | ||
529 | 559 | ||
530 | /*FOOTER*/ | 560 | /*FOOTER*/ |
531 | footer{ | 561 | footer{ |
532 | background-color: #333333; | 562 | background-color: #333333; |
533 | } | 563 | } |
534 | footer ul.nav-footer{ | 564 | footer ul.nav-footer{ |
535 | padding-left: 0; | 565 | padding-left: 0; |
536 | list-style: none; | 566 | list-style: none; |
537 | } | 567 | } |
538 | footer ul.nav-footer li{ | 568 | footer ul.nav-footer li{ |
539 | float: left; | 569 | float: left; |
540 | padding: 3px 10px; | 570 | padding: 3px 10px; |
541 | border-right: 1px dotted #ffffff; | 571 | border-right: 1px dotted #ffffff; |
542 | 572 | ||
543 | } | 573 | } |
544 | footer ul.nav-footer li a{ | 574 | footer ul.nav-footer li a{ |
545 | color: #ffffff; | 575 | color: #ffffff; |
546 | font-size: 11px; | 576 | font-size: 11px; |
547 | } | 577 | } |
548 | /* Customize container */ | 578 | /* Customize container */ |
549 | @media (min-width: 768px) { | 579 | @media (min-width: 768px) { |
550 | .container { | 580 | .container { |
551 | /*max-width: 730px;*/ | 581 | /*max-width: 730px;*/ |
552 | } | 582 | } |
553 | } | 583 | } |
554 | 584 | ||
555 | /* Responsive: Portrait tablets and up */ | 585 | /* Responsive: Portrait tablets and up */ |
556 | @media screen and (min-width: 768px) { | 586 | @media screen and (min-width: 768px) { |
557 | /* Remove the padding we set earlier */ | 587 | /* Remove the padding we set earlier */ |
558 | 588 | ||
559 | } | 589 | } |
560 | 590 |
app/views/design_part/illustration.html
1 | <li> | 1 | <li> |
2 | <div class="title"> | 2 | <div class="title"> |
3 | <!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>--> | 3 | <!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>--> |
4 | イラスト・イメージ選択 | 4 | イラスト・イメージ選択 |
5 | </div> | 5 | </div> |
6 | <div class="content clearfix"> | 6 | <div class="content clearfix"> |
7 | <select id="illustration-select-category" ui-select2="illustrationSelectConfig" ng-model="currentIllustration" ng-change="changeIllustrationCategory(currentIllustration)" data-placeholder="Choose category" style="width: 100%"> | 7 | <select id="illustration-select-category" ui-select2="illustrationSelectConfig" ng-model="currentIllustration" ng-change="changeIllustrationCategory(currentIllustration);currentIllustrationPage=1;" data-placeholder="Choose category" style="width: 100%"> |
8 | <option ng-repeat="(key,cate) in IllustrationList" value="{{key}}">{{cate.name}}</option> | 8 | <option ng-repeat="(key,cate) in IllustrationList" value="{{key}}">{{cate.name}}</option> |
9 | </select> | 9 | </select> |
10 | <div class="illustration-list"> | 10 | <div class="illustration-list" ng-init="currentIllustrationPage=1;perIllustrationPage=16"> |
11 | <div class="illstration-item" ng-repeat="item in currentIllustrationCate.list" ng-click="insertSvg(item)"> | 11 | <div class="illstration-item" ng-repeat="item in currentIllustrationCate.list | limitTo:perIllustrationPage:((currentIllustrationPage-1)*perIllustrationPage)" ng-click="insertSvg(item)"> |
12 | <img ng-src="{{item.path}}"/> | 12 | <img ng-src="{{item.path}}"/> |
13 | </div> | 13 | </div> |
14 | <div class="clearfix"></div> | 14 | <div class="clearfix"></div> |
15 | <div class="footer-bar"> | ||
16 | <div class="pull-left footer-pagination" ng-click="currentIllustrationPage=currentIllustrationPage-1" ng-show="currentIllustrationPage > 1">< Back</div> | ||
17 | {{currentIllustrationPage}}/{{currentIllustrationCate.list.length/perIllustrationPage | number:0}} | ||
18 | <div class="pull-right footer-pagination" ng-click="currentIllustrationPage=currentIllustrationPage+1" ng-show="currentIllustrationPage < (currentIllustrationCate.list.length/perIllustrationPage|number:0)">Next ></div> | ||
19 | </div> | ||
15 | </div> | 20 | </div> |
16 | </div> | 21 | </div> |
17 | </li> | 22 | </li> |
18 | <li> | 23 | <li> |
19 | <div class="title"> | 24 | <div class="title"> |
20 | <!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>--> | 25 | <!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>--> |
21 | カラー変更 | 26 | カラー変更 |
22 | <div class="pull-right">元の色に戻す</div> | 27 | <div class="pull-right">元の色に戻す</div> |
23 | </div> | 28 | </div> |
24 | <div class="content clearfix"> | 29 | <div class="content clearfix"> |
25 | <div class="color-patterns"> | 30 | <div class="color-patterns"> |
26 | <div class="color-pattern-item" ng-repeat="color in listColorPatterns track by $index" ng-click="changeColorPattern(color)" ng-style="{'background-color': color}"> | 31 | <div class="color-pattern-item" ng-repeat="color in listColorPatterns track by $index" ng-click="changeColorPattern(color)" ng-style="{'background-color': color}"> |
27 | </div> | 32 | </div> |
28 | <div class="clearfix"></div> | 33 | <div class="clearfix"></div> |
29 | </div> | 34 | </div> |
30 | </div> | 35 | </div> |
31 | </li> | 36 | </li> |
32 | <li> | 37 | <li> |
33 | <div class="title"> | 38 | <div class="title"> |
34 | <!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>--> | 39 | <!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>--> |
35 | 重ね順変更 | 40 | 重ね順変更 |
36 | </div> | 41 | </div> |
37 | <div class="content clearfix"> | 42 | <div class="content clearfix"> |
38 | 43 | <div class="col-xs-3 layer-item" ng-click="layerProcess(1)"> | |
44 | <img src="images/layer-icon-1.png"/> | ||
45 | <div>前面へ</div> | ||
46 | </div> | ||
47 | <div class="col-xs-3 layer-item" ng-click="layerProcess(2)"> | ||
48 | <img src="images/layer-icon-2.png"/> | ||
49 | <div>背面へ</div> | ||
50 | </div> | ||
51 | <div class="col-xs-3 layer-item" ng-click="layerProcess(3)"> | ||
52 | <img src="images/layer-icon-3.png"/> | ||
53 | <div>最前面へ</div> | ||
54 | </div> | ||
55 | <div class="col-xs-3 layer-item" ng-click="layerProcess(4)"> | ||
56 | <img src="images/layer-icon-4.png"/> | ||
57 | <div>最前面へ</div> | ||
58 | </div> | ||
39 | </div> | 59 | </div> |
40 | </li> | 60 | </li> |
dist/index.html
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/ba55f2e6.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/36c320d8.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 = '16-11_01'; | 12 | <![endif]--><script type="text/javascript">var VERSION = new Date().getTime(); |
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/main.js
1 | define(["app"],function(app){"use strict";app.controller("MainCtrl",function($rootScope,$scope,$illustration,$t_shirt){$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,$scope.tShirtColor=$t_shirt.getTShirtColor(0);var tShirtColorFirstKey=0;$scope.tShirtChoiceBackFrontKey="front",$scope.tShirtColorKey=tShirtColorFirstKey,$rootScope.tShirtColorCode=$scope.tShirtColor[tShirtColorFirstKey].code,$scope.tShirtColorName=$scope.tShirtColor[tShirtColorFirstKey].name,$scope.tShirtImgFront=$scope.tShirtColor[tShirtColorFirstKey].img.front,$scope.tShirtImgBack=$scope.tShirtColor[tShirtColorFirstKey].img.back,$scope.tShirtImg=$scope.tShirtImgFront,$scope.choiceTShirtColor=function(key){$scope.tShirtColorKey=key,$rootScope.tShirtColorCode=$scope.tShirtColor[key].code,$scope.tShirtColorName=$scope.tShirtColor[key].name,$scope.tShirtImgFront=$scope.tShirtColor[key].img.front,$scope.tShirtImgBack=$scope.tShirtColor[key].img.back,"front"==$scope.tShirtChoiceBackFrontKey?$scope.tShirtImg=$scope.tShirtImgFront:$scope.tShirtImg=$scope.tShirtImgBack},$scope.choiceTShirtBackFront=function(choice){"front"==choice?$scope.tShirtImg=$scope.tShirtImgFront:$scope.tShirtImg=$scope.tShirtImgBack,$scope.tShirtChoiceBackFrontKey=choice},$scope.showDesignTab=function(tab){switch($rootScope.isShowLeftPanel=tab,tab){case"illustration":$scope.IllustrationList=$illustration.getAll(),$scope.illustrationSelectConfig={allowClear:!0};break;case"text":}},$rootScope.safeApply=function(fn){var phase=this.$root.$$phase;"$apply"==phase||"$digest"==phase?fn&&"function"==typeof fn&&fn():this.$apply(fn)},$scope.modalTShirtDesign=function(){$("#tshirt-design").modal({backdrop:"static",keyboard:!1}),$scope.showDesignTab("default")},$scope.modalClose=function(){$("#tshirt-design").modal("hide")}})}); | 1 | define(["app"],function(app){"use strict";app.controller("MainCtrl",function($rootScope,$scope,$illustration,$t_shirt){$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,$scope.tShirtColor=$t_shirt.getTShirtColor(0);var tShirtColorFirstKey=0;$scope.tShirtChoiceBackFrontKey="front",$scope.tShirtColorKey=tShirtColorFirstKey,$rootScope.tShirtColorCode=$scope.tShirtColor[tShirtColorFirstKey].code,$scope.tShirtColorName=$scope.tShirtColor[tShirtColorFirstKey].name,$scope.tShirtImgFront=$scope.tShirtColor[tShirtColorFirstKey].img.front,$scope.tShirtImgBack=$scope.tShirtColor[tShirtColorFirstKey].img.back,$scope.tShirtImg=$scope.tShirtImgFront,$scope.choiceTShirtColor=function(key){$scope.tShirtColorKey=key,$rootScope.tShirtColorCode=$scope.tShirtColor[key].code,$scope.tShirtColorName=$scope.tShirtColor[key].name,$scope.tShirtImgFront=$scope.tShirtColor[key].img.front,$scope.tShirtImgBack=$scope.tShirtColor[key].img.back,"front"==$scope.tShirtChoiceBackFrontKey?$scope.tShirtImg=$scope.tShirtImgFront:$scope.tShirtImg=$scope.tShirtImgBack},$scope.choiceTShirtBackFront=function(choice){"front"==choice?$scope.tShirtImg=$scope.tShirtImgFront:$scope.tShirtImg=$scope.tShirtImgBack,$scope.tShirtChoiceBackFrontKey=choice},$scope.showDesignTab=function(tab){switch($rootScope.isShowLeftPanel=tab,tab){case"illustration":$scope.IllustrationList=$illustration.getAll(),$scope.illustrationSelectConfig={allowClear:!0};break;case"text":}},$rootScope.safeApply=function(fn){var phase=this.$root.$$phase;"$apply"==phase||"$digest"==phase?fn&&"function"==typeof fn&&fn():this.$apply(fn)},$scope.modalTShirtDesign=function(){$("#tshirt-design").modal({backdrop:"static",keyboard:!1}),$scope.showDesignTab("default")},$scope.modalClose=function(){$("#tshirt-design").modal("hide")}})}); |
dist/scripts/controllers/tshirtdesign.js
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 onIllustrationOut(){console.log("out object")}function undoCanvas(){return 0>=indexCurr?void(indexCurr=0):(refreshObj===!0&&(indexCurr--,refreshObj=!1),console.log("undo"),indexCurr2=indexCurr-1,currentObj=listObj[indexCurr2],currentObj&¤tObj.setOptions(JSON.parse(indexCurr[indexCurr2])),indexCurr--,currentObj.setCoords(),canvas.renderAll(),void(actionObj=!0))}function onIllustrationSelected(options){var object=options.target;switch($scope.typeObject=object.type,$scope.typeObject){case"i-text":$("#input-design-text").focus(),$rootScope.isShowLeftPanel="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(){}),canvas.on({"object:added":onIllustrationAdded,"object:moving":onIllustrationChange,"object:scaling":onIllustrationChange,"object:rotating":onIllustrationChange,"object:selected":onIllustrationSelected,"object:modified":onIllustrationModifield,"selected:deselected":onIllustrationOut});var currentObj,listObj=[],stateObj=[],indexCurr=0,indexCurr2=0,actionObj=!1,refreshObj=!0;$scope.currentObject=null,$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.changeColorPattern=function(color){canvas.getActiveObject()&&(canvas.getActiveObject().set("fill",color),canvas.renderAll())},$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:"Tahoma",slug:"tahoma"},{name:"GN-Fuyu-iro_Script_Bold",slug:"gn_fuyu_iro_script_bold"},{name:"GN Killgothic U Kanana",slug:"gn_killgothic_u_kanana"}],$scope.focusInputText=function(){"i-text"!=$scope.typeObject&&($scope.iText=new fabric.IText("",{left:150,top:200,fontFamily:"Arial",fontWeight:"normal",fontSize:28,fill:"black"}))},$scope.inputText=function(e){var iText=$scope.iText;""!=e&&(iText.text=e,iText.set().setCoords(),canvas.add(iText),canvas.renderAll(),canvas.setActiveObject(iText))},$scope.setFontFamily=function(font){if(canvas.getActiveObject()){var currentObject=canvas.getActiveObject();"i-text"==currentObject.type&&(console.log(font),currentObject.set("fontFamily",font),currentObject.selectWord(),canvas.renderAll(),canvas.setActiveObject(currentObject))}}})}); | 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 onIllustrationOut(){console.log("out object")}function undoCanvas(){return 0>=indexCurr?void(indexCurr=0):(refreshObj===!0&&(indexCurr--,refreshObj=!1),console.log("undo"),indexCurr2=indexCurr-1,currentObj=listObj[indexCurr2],currentObj&¤tObj.setOptions(JSON.parse(indexCurr[indexCurr2])),indexCurr--,currentObj.setCoords(),canvas.renderAll(),void(actionObj=!0))}function onIllustrationSelected(options){var object=options.target;switch($scope.typeObject=object.type,$scope.typeObject){case"i-text":$("#input-design-text").focus(),$rootScope.isShowLeftPanel="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(){}),canvas.on({"object:added":onIllustrationAdded,"object:moving":onIllustrationChange,"object:scaling":onIllustrationChange,"object:rotating":onIllustrationChange,"object:selected":onIllustrationSelected,"object:modified":onIllustrationModifield,"selected:deselected":onIllustrationOut});var currentObj,listObj=[],stateObj=[],indexCurr=0,indexCurr2=0,actionObj=!1,refreshObj=!0;$scope.currentObject=null,$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.changeColorPattern=function(color){canvas.getActiveObject()&&(canvas.getActiveObject().set("fill",color),canvas.renderAll())},$scope.layerProcess=function(mode){var activeObject=canvas.getActiveObject();if(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.listFontFamily=[{name:"GN-Aki-iro_Sesami_Cookies",slug:"gn_aki_iro_sesami_cookies"},{name:"Tahoma",slug:"tahoma"},{name:"GN-Fuyu-iro_Script_Bold",slug:"gn_fuyu_iro_script_bold"},{name:"GN Killgothic U Kanana",slug:"gn_killgothic_u_kanana"}],$scope.focusInputText=function(){"i-text"!=$scope.typeObject&&($scope.iText=new fabric.IText("",{left:150,top:200,fontFamily:"Arial",fontWeight:"normal",fontSize:28,fill:"black"}))},$scope.inputText=function(e){var iText=$scope.iText;""!=e&&(iText.text=e,iText.set().setCoords(),canvas.add(iText),canvas.renderAll(),canvas.setActiveObject(iText))},$scope.setFontFamily=function(font){if(canvas.getActiveObject()){var currentObject=canvas.getActiveObject();"i-text"==currentObject.type&&(console.log(font),currentObject.set("fontFamily",font),currentObject.selectWord(),canvas.renderAll(),canvas.setActiveObject(currentObject))}}})}); |
dist/scripts/services/illustration.js
1 | define(["app"],function(app){"use strict";app.factory("$illustration",function($http,$rootScope){var DATA={cate1:{name:"category #1",list:[{name:"item 1",path:"images/illustrations/item1.svg"},{name:"item 2",path:"images/illustrations/item2.svg"},{name:"item 3",path:"images/illustrations/item3.svg"},{name:"item 4",path:"images/illustrations/item4.svg"},{name:"item 1",path:"images/illustrations/item3.svg"},{name:"item 2",path:"images/illustrations/item1.svg"},{name:"item 3",path:"images/illustrations/item4.svg"},{name:"item 4",path:"images/illustrations/item2.svg"}]},cate2:{name:"category #2",list:[{name:"item 1",path:"images/illustrations/item3.svg"},{name:"item 2",path:"images/illustrations/item1.svg"},{name:"item 3",path:"images/illustrations/item4.svg"},{name:"item 4",path:"images/illustrations/item2.svg"},{name:"item 1",path:"images/illustrations/item1.svg"},{name:"item 2",path:"images/illustrations/item2.svg"},{name:"item 3",path:"images/illustrations/item3.svg"},{name:"item 4",path:"images/illustrations/item4.svg"}]}};return{loadFromRemote:function(params,successHandle,errorHandle){var httpObj=$http({url:$rootScope+"/apiv1/illustration",method:"GET",params:params||[]});"undefined"==typeof successHandle&&(successHandle=function(response){1==response.status&&(DATA=response.data)}),httpObj.success(successHandle),"undefined"!=typeof errorHandle&&httpObj.error(errorHandle)},getAll:function(){return DATA},getList:function(category){return"undefined"==typeof DATA[category]?[]:DATA[category]}}})}); | 1 | define(["app"],function(app){"use strict";app.factory("$illustration",function($http,$rootScope){var DATA={cate1:{name:"category #1",list:[{name:"item 1",path:"images/illustrations/item1.svg"},{name:"item 2",path:"images/illustrations/item2.svg"},{name:"item 3",path:"images/illustrations/item3.svg"},{name:"item 4",path:"images/illustrations/item4.svg"},{name:"item 1",path:"images/illustrations/item3.svg"},{name:"item 2",path:"images/illustrations/item1.svg"},{name:"item 3",path:"images/illustrations/item4.svg"},{name:"item 4",path:"images/illustrations/item2.svg"},{name:"item 1",path:"images/illustrations/item1.svg"},{name:"item 2",path:"images/illustrations/item2.svg"},{name:"item 3",path:"images/illustrations/item3.svg"},{name:"item 4",path:"images/illustrations/item4.svg"},{name:"item 1",path:"images/illustrations/item3.svg"},{name:"item 2",path:"images/illustrations/item1.svg"},{name:"item 3",path:"images/illustrations/item4.svg"},{name:"item 4",path:"images/illustrations/item2.svg"},{name:"item 1",path:"images/illustrations/item1.svg"},{name:"item 2",path:"images/illustrations/item2.svg"},{name:"item 3",path:"images/illustrations/item3.svg"},{name:"item 4",path:"images/illustrations/item4.svg"},{name:"item 1",path:"images/illustrations/item3.svg"},{name:"item 2",path:"images/illustrations/item1.svg"},{name:"item 3",path:"images/illustrations/item4.svg"},{name:"item 4",path:"images/illustrations/item2.svg"}]},cate2:{name:"category #2",list:[{name:"item 1",path:"images/illustrations/item3.svg"},{name:"item 2",path:"images/illustrations/item1.svg"},{name:"item 3",path:"images/illustrations/item4.svg"},{name:"item 4",path:"images/illustrations/item2.svg"},{name:"item 1",path:"images/illustrations/item1.svg"},{name:"item 2",path:"images/illustrations/item2.svg"},{name:"item 3",path:"images/illustrations/item3.svg"},{name:"item 4",path:"images/illustrations/item4.svg"}]}};return{loadFromRemote:function(params,successHandle,errorHandle){var httpObj=$http({url:$rootScope.API_URL+"/apiv1/illustration",method:"GET",params:params||[]});"undefined"==typeof successHandle&&(successHandle=function(response){1==response.status&&(DATA=response.data)}),httpObj.success(successHandle),"undefined"!=typeof errorHandle&&httpObj.error(errorHandle)},getAll:function(){return DATA},getList:function(category){return"undefined"==typeof DATA[category]?[]:DATA[category]}}})}); |
dist/styles/36c320d8.main.css
File was created | 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}.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 #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}.aside #choice-illustration li .content .color-patterns{width:100%;border:#bbb solid 1px;background:#FFF;margin-top:5px}.aside #choice-illustration 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 #choice-illustration li .content .color-patterns .color-pattern-item:hover{outline:1px solid #ed1d24}.aside #choice-illustration li .content .layer-item{text-align:center;border:1px #ddd solid;background:#FFF;padding:5px;font-size:12px;cursor:pointer}.aside #choice-illustration li .content .layer-item:hover{background:#fcc}.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} |
dist/styles/ba55f2e6.main.css
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}.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;cursor:pointer}.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 #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 .color-patterns{width:100%;border:#bbb solid 1px;background:#FFF;margin-top:5px}.aside #choice-illustration 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 #choice-illustration li .content .color-patterns .color-pattern-item:hover{outline:1px solid #ed1d24}.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/illustration.html
1 | <li><div class="title"><!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->イラスト・イメージ選択</div><div class="content clearfix"><select id="illustration-select-category" ui-select2="illustrationSelectConfig" ng-model="currentIllustration" ng-change="changeIllustrationCategory(currentIllustration)" data-placeholder="Choose category" style="width: 100%"><option ng-repeat="(key,cate) in IllustrationList" value="{{key}}">{{cate.name}}</select><div class="illustration-list"><div class="illstration-item" ng-repeat="item in currentIllustrationCate.list" ng-click="insertSvg(item)"><img ng-src="{{item.path}}"></div><div class="clearfix"></div></div></div></li><li><div class="title"><!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->カラー変更<div class="pull-right">元の色に戻す</div></div><div class="content clearfix"><div class="color-patterns"><div class="color-pattern-item" ng-repeat="color in listColorPatterns track by $index" ng-click="changeColorPattern(color)" ng-style="{'background-color': color}"></div><div class="clearfix"></div></div></div></li><li><div class="title"><!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->重ね順変更</div><div class="content clearfix"></div></li> | 1 | <li> |
2 | <div class="title"> | ||
3 | <!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>--> | ||
4 | イラスト・イメージ選択 | ||
5 | </div> | ||
6 | <div class="content clearfix"> | ||
7 | <select id="illustration-select-category" ui-select2="illustrationSelectConfig" ng-model="currentIllustration" ng-change="changeIllustrationCategory(currentIllustration);currentIllustrationPage=1;" data-placeholder="Choose category" style="width: 100%"> | ||
8 | <option ng-repeat="(key,cate) in IllustrationList" value="{{key}}">{{cate.name}}</option> | ||
9 | </select> | ||
10 | <div class="illustration-list" ng-init="currentIllustrationPage=1;perIllustrationPage=16"> | ||
11 | <div class="illstration-item" ng-repeat="item in currentIllustrationCate.list | limitTo:perIllustrationPage:((currentIllustrationPage-1)*perIllustrationPage)" ng-click="insertSvg(item)"> | ||
12 | <img ng-src="{{item.path}}"/> | ||
13 | </div> | ||
14 | <div class="clearfix"></div> | ||
15 | <div class="footer-bar"> | ||
16 | <div class="pull-left footer-pagination" ng-click="currentIllustrationPage=currentIllustrationPage-1" ng-show="currentIllustrationPage > 1">< Back</div> | ||
17 | {{currentIllustrationPage}}/{{currentIllustrationCate.list.length/perIllustrationPage | number:0}} | ||
18 | <div class="pull-right footer-pagination" ng-click="currentIllustrationPage=currentIllustrationPage+1" ng-show="currentIllustrationPage < (currentIllustrationCate.list.length/perIllustrationPage|number:0)">Next ></div> | ||
19 | </div> | ||
20 | </div> | ||
21 | </div> | ||
22 | </li> | ||
23 | <li> | ||
24 | <div class="title"> | ||
25 | <!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>--> | ||
26 | カラー変更 | ||
27 | <div class="pull-right">元の色に戻す</div> | ||
28 | </div> | ||
29 | <div class="content clearfix"> | ||
30 | <div class="color-patterns"> | ||
31 | <div class="color-pattern-item" ng-repeat="color in listColorPatterns track by $index" ng-click="changeColorPattern(color)" ng-style="{'background-color': color}"> | ||
32 | </div> | ||
33 | <div class="clearfix"></div> | ||
34 | </div> | ||
35 | </div> | ||
36 | </li> | ||
37 | <li> | ||
38 | <div class="title"> | ||
39 | <!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>--> | ||
40 | 重ね順変更 | ||
41 | </div> | ||
42 | <div class="content clearfix"> | ||
43 | <div class="col-xs-3 layer-item" ng-click="layerProcess(1)"> | ||
44 | <img src="images/layer-icon-1.png"/> | ||
45 | <div>前面へ</div> | ||
46 | </div> | ||
47 | <div class="col-xs-3 layer-item" ng-click="layerProcess(2)"> | ||
48 | <img src="images/layer-icon-2.png"/> | ||
49 | <div>背面へ</div> | ||
50 | </div> | ||
51 | <div class="col-xs-3 layer-item" ng-click="layerProcess(3)"> | ||
52 | <img src="images/layer-icon-3.png"/> | ||
53 | <div>最前面へ</div> | ||
54 | </div> | ||
55 | <div class="col-xs-3 layer-item" ng-click="layerProcess(4)"> | ||
56 | <img src="images/layer-icon-4.png"/> | ||
57 | <div>最前面へ</div> | ||
58 | </div> | ||
59 | </div> | ||
60 | </li> |
dist/views/design_part/image.html
1 | <li><div class="title"><!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->イラスト・イメージ選択</div><div class="content clearfix"></div></li><li><div class="title"><!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->カラー変更<div class="pull-right">元の色に戻す</div></div><div class="content clearfix"></div></li><li><div class="title"><!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->重ね順変更</div><div class="content clearfix"></div></li> | 1 | <li> |
2 | <div class="title"> | ||
3 | <!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>--> | ||
4 | イラスト・イメージ選択 | ||
5 | </div> | ||
6 | <div class="content clearfix"> | ||
7 | |||
8 | </div> | ||
9 | </li> | ||
10 | <li> | ||
11 | <div class="title"> | ||
12 | <!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>--> | ||
13 | カラー変更 | ||
14 | <div class="pull-right">元の色に戻す</div> | ||
15 | </div> | ||
16 | <div class="content clearfix"> | ||
17 | |||
18 | </div> | ||
19 | </li> | ||
20 | <li> | ||
21 | <div class="title"> | ||
22 | <!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>--> | ||
23 | 重ね順変更 | ||
24 | </div> | ||
25 | <div class="content clearfix"> | ||
26 | |||
27 | </div> | ||
28 | </li> |
dist/views/design_part/text.html
1 | <li><div class="title"><i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Text</div><div class="content clearfix"><div><input type="text" class="form-control" id="input-design-text" ng-focus="focusInputText()" ng-change="inputText(design_text)" ng-model="design_text"></div><div><ul><li ng-repeat="item in listFontFamily" ng-click="setFontFamily(item.slug)" ng-style="{'font-family' : item.slug}">{{ item.name }}</li></ul></div><div><div></div></div><div><label>Letter Spacing</label><div class="group"><i class="fa fa-minus-square" aria-hidden="true"></i> Letter Spacing <i class="fa fa-plus-square" aria-hidden="true"></i></div></div></div></li> | 1 | <li> |
2 | <div class="title"> | ||
3 | <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> | ||
4 | Text | ||
5 | </div> | ||
6 | <div class="content clearfix"> | ||
7 | <div> | ||
8 | <input type="text" class="form-control" id="input-design-text" ng-focus="focusInputText()" ng-change="inputText(design_text)" ng-model="design_text"> | ||
9 | </div> | ||
10 | <div> | ||
11 | <ul> | ||
12 | <li ng-repeat="item in listFontFamily" ng-click="setFontFamily(item.slug)" ng-style="{'font-family' : item.slug}">{{ item.name }}</li> | ||
13 | </ul> | ||
14 | </div> | ||
15 | <div> | ||
16 | <div></div> | ||
17 | </div> | ||
18 | <div> | ||
19 | <label>Letter Spacing</label> | ||
20 | <div class="group"> | ||
21 | <i class="fa fa-minus-square" aria-hidden="true"></i> Letter Spacing <i class="fa fa-plus-square" aria-hidden="true"></i> | ||
22 | </div> | ||
23 | </div> | ||
24 | </div> | ||
25 | </li> | ||
26 |
dist/views/main.html
1 | <div ng-controller="MainCtrl" class="col-sm-10 col-sm-offset-1" id="tshirt-container"><div class="row"><header><div class="logo"><img src="images/logo_mobile_world.png" alt="Logo Mobile World"> MOBILE WORLD</div></header><nav class="clearfix"><div class="col-sm-12"><h2 class="pull-left">加工箇所を選択してデザインしてください。</h2><ul class="pull-right"><li><a href="#">商品に戻る</a><i class="fa fa-caret-left" aria-hidden="true"></i></li><li><a href="#">加工方法に戻る</a><i class="fa fa-caret-left" aria-hidden="true"></i></li><li class="action">デザインする</li></ul></div></nav><article class="clearfix"><aside class="col-sm-5"><div class="step"><div class="title">1. デザインを作る</div><div class="step-box"><div class="tshirt-design clearfix"><div class="icon"><img src="images/t-shirt_icon/tshirt1.gif" alt="icon t-shirt"></div><div class="name">背中背中 (28x22)</div><div class="action"><button class="red" ng-click="modalTShirtDesign()"><i class="fa fa-caret-right" aria-hidden="true"></i> デザインを作る</button></div></div></div></div><!-- BREAK DOWN--><div class="text-center break-down"><img src="images/bg_step_arrow.gif" alt="arrow"></div><!-- STEP 2--><div class="step"><div class="title">2.アイテムカラーを変更する</div><div class="step-box clearfix"><div class="tshirt-color"><ul class="choice-color clearfix"><li ng-repeat="(key,color) in tShirtColor" ng-click="choiceTShirtColor(key)" ng-class="key == tShirtColorKey ? 'action' : ''"><div ng-style="{'background-color' : color.code}"></div></li></ul><div class="color-name" ng-bind="tShirtColorName"></div><div class="view-more">在庫確認 <i class="fa fa-chevron-circle-right" aria-hidden="true"></i></div></div></div></div><!-- BREAK DOWN--><div class="text-center break-down"><img src="images/bg_step_arrow.gif" alt="arrow"></div><!-- STEP 3--><div class="step"><div class="step-box clearfix"><div class="tshirt-saveorder"><div class="clearfix"><div class="action"><button class="white"><div class="text">このデザインを保存する</div><div class="arrow"><i class="fa fa-chevron-circle-right" aria-hidden="true"></i></div></button></div><div class="action"><button class="red"><div class="text">このデザインで注文する</div><div class="arrow clearfix"><i class="fa fa-chevron-circle-right" aria-hidden="true"></i></div></button></div></div><div class="notice">デザインを保存するには、ログインしてください</div></div></div><!-- BREAL LINE--><div class="text-center break-line"><hr></div><!-- STEP 4--><div class="step"><div class="title-notice">商品・デザインの変更はこちら <span class="require">作業中のデザインは破棄されます</span></div><div class="step-box"><div class="change-design"><table><tr><td class="text-center">商品<td>MENドライカノコポロシャツ・ポケツキ半袖(ホワイト)<td class="text-right"><button class="brown"><i class="fa fa-caret-right" aria-hidden="true"></i> 変更</button><tr><td width="10%" class="text-center">加工方法<td width="70%">シルク:胸中央 (27×27)<td width="20%" class="text-right"><button class="brown"><i class="fa fa-caret-right" aria-hidden="true"></i> 変更</button></table></div></div></div><!-- STEP 5- finish--><div class="step"><div class="finish-design"><button class="white">自分で保存したデザインを呼び出す <i class="fa fa-chevron-circle-right" aria-hidden="true"></i></button></div></div></div></aside><section id="tshirt-content" class="col-sm-7 text-center"><div class="switch-border-design"><i class="fa fa-square-o" aria-hidden="true"></i> 枠線を消す</div><div class="tshirt-image"><img ng-src="{{ tShirtImg }}" alt=""></div><div class="tshirt-choice"><ul><li ng-class="'front' === tShirtChoiceBackFrontKey ? 'focus' : ''"><div>前</div><div class="image" ng-click="choiceTShirtBackFront('front')"><img ng-src="{{ tShirtImgFront }}" alt=""></div></li><li ng-class="'back' === tShirtChoiceBackFrontKey ? 'focus' : ''"><div>後</div><div class="image" ng-click="choiceTShirtBackFront('back')"><img ng-src="{{ tShirtImgBack }}" alt=""></div></li></ul></div></section></article><footer class="clearfix"><ul class="nav-footer"><li><a href="#">店舗検索</a></li><li><a href="#">お客様窓口</a></li><li><a href="#">企業情報</a></li><li><a href="#">採用情報</a></li><li><a href="#">プライバシーポリシー</a></li></ul></footer><!--MODAL CONTENT--><div ng-include="designFrameView"></div></div></div> | 1 | <div ng-controller="MainCtrl" class="col-sm-10 col-sm-offset-1" id="tshirt-container"> |
2 | <div class="row"> | ||
3 | <header> | ||
4 | <div class="logo"> | ||
5 | <img src="images/logo_mobile_world.png" alt="Logo Mobile World" /> | ||
6 | MOBILE WORLD | ||
7 | </div> | ||
8 | </header> | ||
9 | <nav class="clearfix"> | ||
10 | <div class="col-sm-12"> | ||
11 | <h2 class="pull-left">加工箇所を選択してデザインしてください。</h2> | ||
12 | <ul class="pull-right"> | ||
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> | ||
15 | <li class="action">デザインする</li> | ||
16 | </ul> | ||
17 | </div> | ||
18 | </nav> | ||
19 | <article class="clearfix"> | ||
20 | <aside class="col-sm-5"> | ||
21 | <div class="step"> | ||
22 | <div class="title"> | ||
23 | 1. デザインを作る | ||
24 | </div> | ||
25 | <div class="step-box"> | ||
26 | <div class="tshirt-design clearfix"> | ||
27 | <div class="icon"> | ||
28 | <img src="images/t-shirt_icon/tshirt1.gif" alt="icon t-shirt" /> | ||
29 | </div> | ||
30 | <div class="name"> | ||
31 | 背中背中 (28x22) | ||
32 | </div> | ||
33 | <div class="action"> | ||
34 | <button class="red" ng-click="modalTShirtDesign()"> | ||
35 | <i class="fa fa-caret-right" aria-hidden="true"></i> デザインを作る | ||
36 | </button> | ||
37 | </div> | ||
38 | </div> | ||
39 | </div> | ||
40 | </div> | ||
41 | |||
42 | <!-- BREAK DOWN--> | ||
43 | <div class="text-center break-down"> | ||
44 | <img src="images/bg_step_arrow.gif" alt="arrow" /> | ||
45 | </div> | ||
46 | |||
47 | <!-- STEP 2--> | ||
48 | <div class="step"> | ||
49 | <div class="title"> | ||
50 | 2.アイテムカラーを変更する | ||
51 | </div> | ||
52 | <div class="step-box clearfix"> | ||
53 | <div class="tshirt-color"> | ||
54 | <ul class="choice-color clearfix"> | ||
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> | ||
57 | </li> | ||
58 | </ul> | ||
59 | <div class="color-name" ng-bind="tShirtColorName"></div> | ||
60 | <div class="view-more"> | ||
61 | 在庫確認 <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> | ||
62 | </div> | ||
63 | </div> | ||
64 | </div> | ||
65 | </div> | ||
66 | |||
67 | <!-- BREAK DOWN--> | ||
68 | <div class="text-center break-down"> | ||
69 | <img src="images/bg_step_arrow.gif" alt="arrow" /> | ||
70 | </div> | ||
71 | |||
72 | <!-- STEP 3--> | ||
73 | <div class="step"> | ||
74 | <div class="step-box clearfix"> | ||
75 | <div class="tshirt-saveorder"> | ||
76 | <div class="clearfix"> | ||
77 | <div class="action"> | ||
78 | <button class="white"> | ||
79 | <div class="text"> | ||
80 | このデザインを保存する | ||
81 | </div> | ||
82 | <div class="arrow"> | ||
83 | <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> | ||
84 | </div> | ||
85 | </button> | ||
86 | </div> | ||
87 | <div class="action"> | ||
88 | <button class="red"> | ||
89 | <div class="text"> | ||
90 | このデザインで注文する | ||
91 | </div> | ||
92 | <div class="arrow clearfix"> | ||
93 | <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> | ||
94 | </div> | ||
95 | </button> | ||
96 | </div> | ||
97 | </div> | ||
98 | <div class="notice"> | ||
99 | デザインを保存するには、ログインしてください | ||
100 | </div> | ||
101 | </div> | ||
102 | </div> | ||
103 | |||
104 | <!-- BREAL LINE--> | ||
105 | <div class="text-center break-line"> | ||
106 | <hr /> | ||
107 | </div> | ||
108 | |||
109 | <!-- STEP 4--> | ||
110 | <div class="step"> | ||
111 | <div class="title-notice"> | ||
112 | 商品・デザインの変更はこちら <span class="require">作業中のデザインは破棄されます</span> | ||
113 | </div> | ||
114 | <div class="step-box"> | ||
115 | <div class="change-design"> | ||
116 | <table> | ||
117 | <tr> | ||
118 | <td class="text-center">商品</td> | ||
119 | <td>MENドライカノコポロシャツ・ポケツキ半袖(ホワイト)</td> | ||
120 | <td class="text-right"> | ||
121 | <button class="brown"><i class="fa fa-caret-right" aria-hidden="true"></i> 変更</button> | ||
122 | </td> | ||
123 | </tr> | ||
124 | <tr> | ||
125 | <td width="10%" class="text-center">加工方法</td> | ||
126 | <td width="70%">シルク:胸中央 (27×27)</td> | ||
127 | <td width="20%" class="text-right"> | ||
128 | <button class="brown"><i class="fa fa-caret-right" aria-hidden="true"></i> 変更</button> | ||
129 | </td> | ||
130 | </tr> | ||
131 | </table> | ||
132 | </div> | ||
133 | </div> | ||
134 | </div> | ||
135 | <!-- STEP 5- finish--> | ||
136 | <div class="step"> | ||
137 | <div class="finish-design"> | ||
138 | <button class="white"> | ||
139 | 自分で保存したデザインを呼び出す <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> | ||
140 | </button> | ||
141 | </div> | ||
142 | |||
143 | </div> | ||
144 | </div> | ||
145 | </aside> | ||
146 | <section id="tshirt-content" class="col-sm-7 text-center"> | ||
147 | <div class="switch-border-design"> | ||
148 | <i class="fa fa-square-o" aria-hidden="true"></i> 枠線を消す | ||
149 | </div> | ||
150 | <div class="tshirt-image"> | ||
151 | <img ng-src="{{ tShirtImg }}" alt="" /> | ||
152 | </div> | ||
153 | <div class="tshirt-choice"> | ||
154 | <ul> | ||
155 | <li ng-class="'front' === tShirtChoiceBackFrontKey ? 'focus' : ''"> | ||
156 | <div>前</div> | ||
157 | <div class="image" ng-click="choiceTShirtBackFront('front')"> | ||
158 | <img ng-src="{{ tShirtImgFront }}" alt="" /> | ||
159 | </div> | ||
160 | |||
161 | </li> | ||
162 | <li ng-class="'back' === tShirtChoiceBackFrontKey ? 'focus' : ''"> | ||
163 | <div>後</div> | ||
164 | <div class="image" ng-click="choiceTShirtBackFront('back')"> | ||
165 | <img ng-src="{{ tShirtImgBack }}" alt="" /> | ||
166 | </div> | ||
167 | |||
168 | </li> | ||
169 | </ul> | ||
170 | </div> | ||
171 | </section> | ||
172 | </article> | ||
173 | <footer class="clearfix"> | ||
174 | <ul class="nav-footer"> | ||
175 | <li><a href="#">店舗検索</a></li> | ||
176 | <li><a href="#">お客様窓口</a></li> | ||
177 | <li><a href="#">企業情報</a></li> | ||
178 | <li><a href="#">採用情報</a></li> | ||
179 | <li><a href="#">プライバシーポリシー</a></li> | ||
180 | </ul> | ||
181 | </footer> | ||
182 | |||
183 | <!--MODAL CONTENT--> | ||
184 | <div ng-include="designFrameView"></div> | ||
185 | </div> | ||
186 | |||
187 | |||
188 | </div> | ||
189 |
dist/views/tshirt-design.html
1 | <!-- 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"><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><i class="fa fa-minus-circle" aria-hidden="true"></i> 全消去</li></ul><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-xs-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="design-content col-xs-8"><div class="content" ng-style="{'background-color' : tShirtColorCode}"><canvas id="main-design-container" width="510px" height="620px" class="selection-design lower-canvas"></canvas></div><div class="agree-design"><img src="images/agree-design.png" alt="agree design"></div><div class="trash-design"><img src="images/trash.png" alt="trash design"></div></div></section></div></div></div></div> | 1 | <!-- Modal --> |
2 | <div class="modal fade" id="tshirt-design" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" ng-controller="TshirtdesignCtrl"> | ||
3 | |||
4 | <div class="modal-dialog" role="document"> | ||
5 | <div class="modal-content"> | ||
6 | <div class="modal-header"> | ||
7 | <button class="black" ng-click="modalClose()"><i class="fa fa-times" aria-hidden="true"></i> キャンセル</button> | ||
8 | <button class="black"> <i class="fa fa-angle-right" aria-hidden="true"></i> はじめての方へ</button> | ||
9 | </div> | ||
10 | <div class="modal-body"> | ||
11 | <header class="clearfix"> | ||
12 | <ul class="nav pull-left"> | ||
13 | <li ng-class="{'active': isShowLeftPanel=='text'}" ng-click="showDesignTab('text')"> | ||
14 | <i class="fa fa-jpy" aria-hidden="true"></i> 文字 | ||
15 | </li> | ||
16 | <li ng-class="{'active': isShowLeftPanel=='illustration'}" ng-click="showDesignTab('illustration')"> | ||
17 | <i class="fa fa-btc" aria-hidden="true"></i> イラスト・イメージ | ||
18 | </li> | ||
19 | <li ng-class="{'active': isShowLeftPanel=='image'}" ng-click="showDesignTab('image')"> | ||
20 | <i class="fa fa-money" aria-hidden="true"></i> 自分の画像・写真 | ||
21 | </li> | ||
22 | <li> | ||
23 | <i class="fa fa-minus-circle" aria-hidden="true"></i> 全消去 | ||
24 | </li> | ||
25 | </ul> | ||
26 | <div class="action pull-right"> | ||
27 | <button class="white"> | ||
28 | アルバムを開く | ||
29 | </button> | ||
30 | <button class="white"> | ||
31 | アルバムに入れる | ||
32 | </button> | ||
33 | </div> | ||
34 | </header> | ||
35 | <section class="tshirt-design-container clearfix"> | ||
36 | <div class="aside col-xs-4"> | ||
37 | <!-- Default--> | ||
38 | <ul class="box-design-option" id="choice-design-option" ng-show="isShowLeftPanel=='default' " ng-include="designPartDefault"> | ||
39 | </ul> | ||
40 | <!-- Illustration design--> | ||
41 | <ul class="box-design-option" id="choice-illustration" ng-show="isShowLeftPanel=='illustration'" ng-include="designPartIllustration"> | ||
42 | </ul> | ||
43 | <!-- Custom image design--> | ||
44 | <ul class="box-design-option" id="choice-image" ng-show="isShowLeftPanel=='image'" ng-include="designPartImage"> | ||
45 | </ul> | ||
46 | <!-- Text design--> | ||
47 | <ul class="box-design-option" id="choice-text" ng-show="isShowLeftPanel=='text'" ng-include="designPartText"> | ||
48 | </ul> | ||
49 | </div> | ||
50 | <div class="design-content col-xs-8"> | ||
51 | <div class="content" ng-style="{'background-color' : tShirtColorCode}"> | ||
52 | <canvas id="main-design-container" width="510px" height="620px" class="selection-design lower-canvas"> | ||
53 | |||
54 | </canvas> | ||
55 | </div> | ||
56 | <div class="agree-design"> | ||
57 | <img src="images/agree-design.png" alt="agree design" /> | ||
58 | </div> | ||
59 | <div class="trash-design"> | ||
60 | <img src="images/trash.png" alt="trash design" /> | ||
61 | </div> | ||
62 | </div> | ||
63 | </section> | ||
64 | </div> | ||
65 | </div> | ||
66 | </div> | ||
67 | </div> |