ngohungcuong.windy@gmail.com / T-Shats Frontend

Download as
Browse Code »

Commit 1d6ddfa62a5df9074474072382595d1e2d607269

Authored by TRUONG
2 parents aff3eb043c c8bfdfd96a
Exists in master and in 1 other branch develop

merge 

Merge branch 'master' of timesfun.net:TRUONG/t-shats

Showing 21 changed files Side-by-side Diff

app/bower_components/bootstrap/.bower.json
Diff comments   View file @ 1d6ddfa
... ... @@ -39,7 +39,7 @@
39 39 "commit": "0b9c4a4007c44201dce9a6cc1a38407005c26c86"
40 40 },
41 41 "_source": "https://github.com/twbs/bootstrap.git",
42   - "_target": "~3.3.7",
  42 + "_target": "^3.3.7",
43 43 "_originalSource": "bootstrap"
44 44 }
app/bower_components/jquery/.bower.json
Diff comments   View file @ 1d6ddfa
... ... @@ -20,7 +20,7 @@
20 20 "commit": "1b30f3ad466ebf2714d47eda34dbd7fdf6849fe3"
21 21 },
22 22 "_source": "https://github.com/jquery/jquery-dist.git",
23   - "_target": "~3.1.1",
  23 + "_target": "^3.1.1",
24 24 "_originalSource": "jquery"
25 25 }
... ... @@ -46,7 +46,7 @@
46 46 <script src="bower_components/json3/lib/json3.min.js"></script>
47 47 <![endif]-->
48 48 <script type="text/javascript">
49   - var VERSION = new Date().getTime();
  49 + var VERSION = '15-11_01';
50 50 var require = {
51 51 urlArgs: "ver="+VERSION,
52 52 };
app/scripts/controllers/main.js
Diff comments   View file @ 1d6ddfa
... ... @@ -2,6 +2,8 @@
2 2 'use strict';
3 3 app.controller('MainCtrl', function ($rootScope, $scope, $illustration, $t_shirt) {
4 4 $scope.designFrameView = 'views/tshirt-design.html?ver='+VERSION;
  5 + $scope.designPartIllustration = 'views/design_part/illustration.html?ver='+VERSION;
  6 +
5 7 //Action T-Shirt choice color and Back or Front
6 8 $scope.tShirtColor = $t_shirt.getTShirtColor(0);
7 9 //Set color name default
... ... @@ -37,8 +39,8 @@
37 39  
38 40  
39 41 $scope.showIllustration = function(tab){
40   - $scope.isShowLeftPanel = tab;
41   - switch (tab){
  42 + $rootScope.isShowLeftPanel = tab;
  43 + switch (tab) {
42 44 case 'illustration': {
43 45 $scope.IllustrationList = $illustration.getAll();
44 46 $scope.illustrationSelectConfig = {
45 47  
... ... @@ -46,10 +48,24 @@
46 48 };
47 49 break;
48 50 }
49   - // case: ''
  51 + case 'text': {
  52 + break;
  53 + }
50 54 }
51 55 };
52 56  
  57 + //safeApply
  58 + $rootScope.safeApply = function(fn) {
  59 + var phase = this.$root.$$phase;
  60 + if(phase == '$apply' || phase == '$digest') {
  61 + if(fn && (typeof(fn) === 'function')) {
  62 + fn();
  63 + }
  64 + } else {
  65 + this.$apply(fn);
  66 + }
  67 + };
  68 +
53 69 $scope.modalTShirtDesign = function() {
54 70 $('#tshirt-design').modal(
55 71 {
... ... @@ -62,6 +78,8 @@
62 78 $scope.modalClose = function(){
63 79 $('#tshirt-design').modal('hide');
64 80 };
  81 +
  82 +
65 83  
66 84  
67 85 });
app/scripts/controllers/tshirtdesign.js
Diff comments   View file @ 1d6ddfa
1 1 define(['app'], function (app) {
2   - 'use strict';
  2 + //'use strict';
3 3  
4 4 app.controller('TshirtdesignCtrl', function ($scope, $rootScope, $illustration) {
5   -
6 5 var canvas = new fabric.Canvas('main-design-container');
7 6 fabric.Object.prototype.transparentCorners = false;
8 7  
... ... @@ -13,8 +12,11 @@
13 12 'object:moving': onIllustrationChange,
14 13 'object:scaling': onIllustrationChange,
15 14 'object:rotating': onIllustrationChange,
16   - 'object:selected': onllustrationSelected,
17   - 'object:modified': onllustrationModifield
  15 + 'object:selected': onIllustrationSelected,
  16 + 'object:modified': onIllustrationModifield,
  17 + 'selected:deselected' : onIllustrationOut,
  18 + //'selected:out' : onIllustrationOut,
  19 + //'mouse:up' : onIllustrationOut,
18 20 });
19 21  
20 22 var currentObj;
21 23  
... ... @@ -47,10 +49,10 @@
47 49 refreshObj = true;
48 50 }
49 51  
50   - function onllustrationModifield(options){
  52 + function onIllustrationModifield(options){
51 53 var objOffset = canvas.getActiveObject().getBoundingRect();
52 54 var cH = canvas.height, cW = canvas.width, H0 = 50, W0 = 50;
53   - console.log(objOffset,canvas.height,canvas.width);
  55 + //console.log(objOffset,canvas.height,canvas.width);
54 56 if (objOffset.left<W0-objOffset.width || objOffset.left>cW-W0 || objOffset.top<H0-objOffset.height || objOffset.top>cH-H0){
55 57 if (confirm('削除してもよろしいですか')){
56 58 canvas.getActiveObject().remove();
57 59  
58 60  
... ... @@ -87,12 +89,13 @@
87 89 // if (obj === options.target) return;
88 90 // obj.setOpacity(options.target.intersectsWithObject(obj) ? 0.5 : 1);
89 91 // });
  92 +
90 93 }
91 94  
92   - function onllustrationSelected(options){
93   - //console.log(canvas.getActiveObject());
  95 + function onIllustrationOut() {
  96 + console.log('out object');
94 97 }
95   -
  98 +
96 99 function undoCanvas() {
97 100 if (indexCurr <= 0) {
98 101 indexCurr = 0;
99 102  
100 103  
... ... @@ -134,11 +137,32 @@
134 137 currentObj.setCoords();
135 138 canvas.renderAll();
136 139 }
  140 +
  141 + $scope.currentObject = null;
  142 + function onIllustrationSelected(options) {
  143 + var object = options.target;
  144 + $scope.typeObject = object.type;
  145 + switch ($scope.typeObject) {
  146 + case 'i-text' :
  147 + $('#input-design-text').focus();
  148 + $rootScope.isShowLeftPanel = 'text';
  149 + break;
137 150  
  151 + case 'path-group' :
  152 + $rootScope.isShowLeftPanel = 'illustration';
  153 + break;
  154 +
  155 + default :
  156 + $rootScope.isShowLeftPanel = 'default';
  157 + break;
  158 + }
  159 + $rootScope.safeApply();
  160 + }
  161 +
138 162 // Illustration process
139 163 $scope.changeIllustrationCategory = function(currentIllustration){
140 164 $scope.currentIllustrationCate = $illustration.getList(currentIllustration);
141   - console.log($scope.currentIllustrationCate);
  165 + //console.log($scope.currentIllustrationCate);
142 166 };
143 167  
144 168 $scope.insertSvg = function(item){
145 169  
146 170  
147 171  
... ... @@ -166,17 +190,22 @@
166 190 '#333333'
167 191 ];
168 192  
  193 + $scope.focusInputText = function() {
  194 + if($scope.typeObject != 'i-text')
  195 + $scope.iText = new fabric.IText('');
  196 + };
169 197  
170 198 //Design text
171 199 $scope.inputText = function(e) {
172   - var text = e;
173   - var iText = new fabric.IText(text);
  200 + var iText = $scope.iText;
  201 + iText.text = e;
174 202 canvas.add(iText);
175 203 canvas.renderAll();
176 204 canvas.setActiveObject(iText);
177   - }
  205 + };
178 206  
179   -
  207 + //init
  208 + //$scope.showIllustration('default');
180 209 });
181 210 });
... ... @@ -386,20 +386,22 @@
386 386  
387 387 /*Aside modal*/
388 388 .aside{
389   - padding-left: 0;
390 389 }
391   -.aside #choice-design-option{
  390 +
  391 +.aside .box-design-option{
392 392 list-style: none;
393 393 padding-left: 0;
394 394 margin-top: 10px;
  395 +}
  396 +.aside .box-design-option li{
395 397  
396 398 }
397   -.aside #choice-design-option li{
  399 +.aside .box-design-option li{
398 400 border: 1px solid #cdcdcd;
399 401 position: relative;
400 402 cursor: pointer;
401 403 }
402   -.aside #choice-design-option li .hover{
  404 +.aside .box-design-option li .hover{
403 405 background-color: #fddad4;
404 406 opacity: 0.6;
405 407 position: absolute;
406 408  
407 409  
408 410  
409 411  
410 412  
411 413  
412 414  
... ... @@ -407,55 +409,33 @@
407 409 height: 100%;
408 410 display: none;
409 411 }
410   -.aside #choice-design-option li:hover .hover{
  412 +.aside .box-design-option li:hover .hover{
411 413 display: block;
412 414 }
413 415  
414   -.aside #choice-design-option li .title{
  416 +.aside .box-design-option li .title{
415 417 background: url("../images/bg1.png") repeat #cdcdcd;
416 418 padding: 3px 10px;
417 419 }
418   -.aside #choice-design-option li .title i.fa{
  420 +.aside .box-design-option li .title i.fa{
419 421 color: #000000;
420 422 }
421 423  
422   -.aside #choice-design-option li .content{
  424 +.aside .box-design-option li .content{
423 425  
424 426 }
425   -.aside #choice-design-option li .content i.fa{
  427 +.aside .box-design-option li .content i.fa{
426 428 font-size: 30px;
427 429 color: #fe070f;
428 430 margin: 8px 0;
429 431 }
430   -.aside #choice-design-option li .content .des{
  432 +.aside .box-design-option li .content .des{
431 433 padding: 3px 10px 3px 0;
432 434 }
433 435  
434   -
435   -.aside #choice-illustration{
436   - list-style: none;
437   - padding-left: 0;
438   - margin-top: 10px;
439   -
440   -}
441   -.aside #choice-illustration li{
442   - border: 1px #cdcdcd double;
443   - border-radius: 5px;
444   - position: relative;
445   - padding: 5px 10px;
446   - margin-bottom: 20px;
447   -}
448   -
449   -.aside #choice-illustration li .title{
450   - /*background: url("../images/bg1.png") repeat #cdcdcd;*/
451   - padding: 3px 10px;
452   - font-size: 13px;
453   - color: #ff0f00;
454   - font-weight: 600;
455   -}
456   -
  436 +/*Design Choice Illustration*/
457 437 .aside #choice-illustration li .content {
458   - /*padding: 10px 10px;*/
  438 + padding: 10px 10px;
459 439 }
460 440  
461 441 .aside #choice-illustration li .content select{
462 442  
... ... @@ -470,14 +450,10 @@
470 450 }
471 451  
472 452 .aside #choice-illustration li .content .illustration-list .illstration-item{
473   - height: 61px;
  453 + height: 65px;
474 454 overflow: hidden;
475 455 float: left;
476   - margin-left: 10px;
477   - margin-top: 10px;
478   - background: #e2e2e2;
479   - border: #d7d7d7 solid 1px;
480   - padding: 2px;
  456 + margin-left: 5px;
481 457 }
482 458  
483 459 .aside #choice-illustration li .content .illustration-list .illstration-item:hover {
... ... @@ -485,7 +461,7 @@
485 461 }
486 462  
487 463 .aside #choice-illustration li .content .illustration-list .illstration-item img {
488   - width: 53px;
  464 + width: 62px;
489 465 cursor: pointer;
490 466 }
491 467  
app/views/design_part/default.html
Diff comments   View file @ 1d6ddfa
  1 +<li>
  2 + <div class="hover"></div>
  3 + <div class="title">
  4 + <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
  5 + 文字を追加
  6 + </div>
  7 + <div class="content clearfix">
  8 + <div class="col-xs-2 text-center">
  9 + <i class="fa fa-jpy" aria-hidden="true"></i>
  10 + </div>
  11 + <div class="col-xs-10 des padding-left-0">
  12 + 書体を選んでお好きな文字を入力できます
  13 + </div>
  14 + </div>
  15 +</li>
  16 +<li>
  17 + <div class="hover"></div>
  18 + <div class="title">
  19 + <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
  20 + イラストやイメージを追加
  21 + </div>
  22 + <div class="content clearfix">
  23 + <div class="col-xs-2 text-center">
  24 + <i class="fa fa-btc" aria-hidden="true"></i>
  25 + </div>
  26 + <div class="col-xs-10 des padding-left-0">
  27 + 自由にお使いいただけるデザイン画像をご用意しました
  28 + </div>
  29 + </div>
  30 +</li>
  31 +<li>
  32 + <div class="hover"></div>
  33 + <div class="title">
  34 + <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
  35 + 自分の画像・写真を追加
  36 + </div>
  37 + <div class="content clearfix">
  38 + <div class="col-xs-2 text-center">
  39 + <i class="fa fa-jpy" aria-hidden="true"></i>
  40 + </div>
  41 + <div class="col-xs-10 des padding-left-0">
  42 + ご自分で用意した画像をアップロードして使えます
  43 + </div>
  44 + </div>
  45 +</li>
  46 +<li>
  47 + <div class="hover"></div>
  48 + <div class="title">
  49 + <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
  50 + おすすめデザインを使う
  51 + </div>
  52 + <div class="content clearfix">
  53 + <div class="col-xs-2 text-center">
  54 + <i class="fa fa-jpy" aria-hidden="true"></i>
  55 + </div>
  56 + <div class="col-xs-10 des padding-left-0">
  57 + おすすめデザインデータをご自由にカスタマイズしてお使いください
  58 + </div>
  59 + </div>
  60 +</li>
app/views/design_part/illustration.html
Diff comments   View file @ 1d6ddfa
  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)" 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">
  11 + <div class="illstration-item" ng-repeat="item in currentIllustrationCate.list" ng-click="insertSvg(item)">
  12 + <img ng-src="{{item.path}}"/>
  13 + </div>
  14 + <div class="clearfix"></div>
  15 + </div>
  16 + </div>
  17 +</li>
  18 +<li>
  19 + <div class="title">
  20 + <!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->
  21 + カラー変更
  22 + <div class="pull-right">元の色に戻す</div>
  23 + </div>
  24 + <div class="content clearfix">
  25 + <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}">
  27 + </div>
  28 + <div class="clearfix"></div>
  29 + </div>
  30 + </div>
  31 +</li>
  32 +<li>
  33 + <div class="title">
  34 + <!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->
  35 + 重ね順変更
  36 + </div>
  37 + <div class="content clearfix">
  38 +
  39 + </div>
  40 +</li>
app/views/design_part/text.html
Diff comments   View file @ 1d6ddfa
... ... @@ -4,7 +4,7 @@
4 4 Text
5 5 </div>
6 6 <div class="content clearfix">
7   - <input type="text" class="form-control" ng-keyup="inputText(design_text)" ng-model="design_text">
  7 + <input type="text" class="form-control" id="input-design-text" ng-focus="focusInputText()" ng-keyup="inputText(design_text)" ng-model="design_text">
8 8 </div>
9 9 </li>
app/views/tshirt-design.html
Diff comments   View file @ 1d6ddfa
... ... @@ -34,116 +34,14 @@
34 34 </header>
35 35 <section class="tshirt-design-container clearfix">
36 36 <div class="aside col-xs-4">
37   - <ul id="choice-design-option" ng-show="isShowLeftPanel=='default'">
38   - <li>
39   - <div class="hover"></div>
40   - <div class="title">
41   - <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
42   - 文字を追加
43   - </div>
44   - <div class="content clearfix">
45   - <div class="col-xs-2 text-center">
46   - <i class="fa fa-jpy" aria-hidden="true"></i>
47   - </div>
48   - <div class="col-xs-10 des padding-left-0">
49   - 書体を選んでお好きな文字を入力できます
50   - </div>
51   - </div>
52   - </li>
53   - <li>
54   - <div class="hover"></div>
55   - <div class="title">
56   - <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
57   - イラストやイメージを追加
58   - </div>
59   - <div class="content clearfix">
60   - <div class="col-xs-2 text-center">
61   - <i class="fa fa-btc" aria-hidden="true"></i>
62   - </div>
63   - <div class="col-xs-10 des padding-left-0">
64   - 自由にお使いいただけるデザイン画像をご用意しました
65   - </div>
66   - </div>
67   - </li>
68   - <li>
69   - <div class="hover"></div>
70   - <div class="title">
71   - <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
72   - 自分の画像・写真を追加
73   - </div>
74   - <div class="content clearfix">
75   - <div class="col-xs-2 text-center">
76   - <i class="fa fa-jpy" aria-hidden="true"></i>
77   - </div>
78   - <div class="col-xs-10 des padding-left-0">
79   - ご自分で用意した画像をアップロードして使えます
80   - </div>
81   - </div>
82   - </li>
83   - <li>
84   - <div class="hover"></div>
85   - <div class="title">
86   - <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
87   - おすすめデザインを使う
88   - </div>
89   - <div class="content clearfix">
90   - <div class="col-xs-2 text-center">
91   - <i class="fa fa-jpy" aria-hidden="true"></i>
92   - </div>
93   - <div class="col-xs-10 des padding-left-0">
94   - おすすめデザインデータをご自由にカスタマイズしてお使いください
95   - </div>
96   - </div>
97   - </li>
  37 + <!-- Default-->
  38 + <ul class="box-design-option" id="choice-design-option" ng-show="isShowLeftPanel=='default' " ng-include="'views/design_part/default.html'">
98 39 </ul>
99   - <ul id="choice-illustration" ng-show="isShowLeftPanel=='illustration'">
100   - <li>
101   - <div class="hover"></div>
102   - <div class="title">
103   - <!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->
104   - イラスト・イメージ選択
105   - </div>
106   - <div class="content clearfix">
107   - <select id="illustration-select-category" ui-select2="illustrationSelectConfig" ng-model="currentIllustration" ng-change="changeIllustrationCategory(currentIllustration)" data-placeholder="Choose category" style="width: 100%">
108   - <option ng-repeat="(key,cate) in IllustrationList" value="{{key}}">{{cate.name}}</option>
109   - </select>
110   - <div class="illustration-list">
111   - <div class="illstration-item" ng-repeat="item in currentIllustrationCate.list" ng-click="insertSvg(item)">
112   - <img ng-src="{{item.path}}"/>
113   - </div>
114   - <div class="clearfix"></div>
115   - </div>
116   - </div>
117   - </li>
118   - <li>
119   - <div class="hover"></div>
120   - <div class="title">
121   - <!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->
122   - カラー変更
123   - <div class="pull-right">元の色に戻す</div>
124   - </div>
125   - <div class="content clearfix">
126   - <div class="color-patterns">
127   - <div class="color-pattern-item" ng-repeat="color in listColorPatterns track by $index" ng-click="changeColorPattern(color)" ng-style="{'background-color': color}">
128   - </div>
129   - <div class="clearfix"></div>
130   - </div>
131   - </div>
132   - </li>
133   - <li>
134   - <div class="hover"></div>
135   - <div class="title">
136   - <!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->
137   - 重ね順変更
138   - </div>
139   - <div class="content clearfix">
140   -
141   - </div>
142   - </li>
  40 + <!-- Illustration design-->
  41 + <ul class="box-design-option" id="choice-illustration" ng-show="isShowLeftPanel=='illustration'" ng-include="designPartIllustration">
143 42 </ul>
144   -
145 43 <!-- Text design-->
146   - <ul id="choice-text" ng-show="isShowLeftPanel=='text'" ng-include="'views/design_part/text.html'">
  44 + <ul class="box-design-option" id="choice-text" ng-show="isShowLeftPanel=='text'" ng-include="'views/design_part/text.html'">
147 45 </ul>
148 46 </div>
149 47 <div class="design-content col-xs-8">
dist/bower_components/bootstrap/.bower.json
Diff comments   View file @ 1d6ddfa
... ... @@ -39,7 +39,7 @@
39 39 "commit": "0b9c4a4007c44201dce9a6cc1a38407005c26c86"
40 40 },
41 41 "_source": "https://github.com/twbs/bootstrap.git",
42   - "_target": "~3.3.7",
  42 + "_target": "^3.3.7",
43 43 "_originalSource": "bootstrap"
44 44 }
dist/bower_components/jquery/.bower.json
Diff comments   View file @ 1d6ddfa
... ... @@ -20,7 +20,7 @@
20 20 "commit": "1b30f3ad466ebf2714d47eda34dbd7fdf6849fe3"
21 21 },
22 22 "_source": "https://github.com/jquery/jquery-dist.git",
23   - "_target": "~3.1.1",
  23 + "_target": "^3.1.1",
24 24 "_originalSource": "jquery"
25 25 }
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/16689cdc.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/5b59cf42.main.css"><body ng-app="tshatsApp"><!--[if lt IE 7]>
2 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 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 4 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
... ... @@ -9,7 +9,7 @@
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 10 <script src="bower_components/es5-shim/es5-shim.js"></script>
11 11 <script src="bower_components/json3/lib/json3.min.js"></script>
12   - <![endif]--><script type="text/javascript">var VERSION = '13-11_01';
  12 + <![endif]--><script type="text/javascript">var VERSION = '15-11_01';
13 13 var require = {
14 14 urlArgs: "ver="+VERSION,
15 15 };</script><script src="bower_components/requirejs/require.js" data-main="scripts/main"></script>
dist/scripts/controllers/main.js
Diff comments   View file @ 1d6ddfa
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.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.showIllustration=function(tab){switch($scope.isShowLeftPanel=tab,tab){case"illustration":$scope.IllustrationList=$illustration.getAll(),$scope.illustrationSelectConfig={allowClear:!0}}},$scope.modalTShirtDesign=function(){$("#tshirt-design").modal({backdrop:"static",keyboard:!1}),$scope.showIllustration("default")},$scope.modalClose=function(){$("#tshirt-design").modal("hide")}})});
  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.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.showIllustration=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.showIllustration("default")},$scope.modalClose=function(){$("#tshirt-design").modal("hide")}})});
dist/scripts/controllers/tshirtdesign.js
Diff comments   View file @ 1d6ddfa
1   -define(["app"],function(app){"use strict";app.controller("TshirtdesignCtrl",function($scope,$rootScope,$illustration){function onIllustrationChange(options){}function onllustrationSelected(options){$scope.currentObject=canvas.getActiveObject(),console.log(canvas.getActiveObject())}var canvas=new fabric.Canvas("main-design-container");fabric.Object.prototype.transparentCorners=!1,canvas.on("after:render",function(){}),canvas.on({"object:moving":onIllustrationChange,"object:scaling":onIllustrationChange,"object:rotating":onIllustrationChange,"object:selected":onllustrationSelected}),$scope.currentObject=null,$scope.changeIllustrationCategory=function(currentIllustration){$scope.currentIllustrationCate=$illustration.getList(currentIllustration),console.log($scope.currentIllustrationCate)},$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().set("fill",color),canvas.renderAll()},$scope.listColorPatterns=["#000000","#ffff00","#ff6600","#ff0000","#ff6262","#ffa19c","#ff9933","#c45d01","#5d2b03","#ffffcc","#000000","#ffff00","#ff6600","#ff0000","#ff6262","#ffa19c","#ff9933","#c45d01","#5d2b03","#ffffcc","#000000","#ffff00","#ff6600","#ff0000","#ff6262","#ffa19c","#ff9933","#c45d01","#5d2b03","#ffffcc","#ffffcc"],$scope.inputText=function(e){var text=e,iText=new fabric.IText(text);canvas.add(iText),canvas.renderAll(),canvas.setActiveObject(iText)}})});
  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&&currentObj.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.focusInputText=function(){"i-text"!=$scope.typeObject&&($scope.iText=new fabric.IText(""))},$scope.inputText=function(e){var iText=$scope.iText;iText.text=e,canvas.add(iText),canvas.renderAll(),canvas.setActiveObject(iText)}})});
dist/styles/16689cdc.main.css
View file @ 1d6ddfa
1   -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 #choice-design-option{list-style:none;padding-left:0;margin-top:10px}.aside #choice-design-option li{border:1px solid #cdcdcd;position:relative;cursor:pointer}.aside #choice-design-option li .hover{background-color:#fddad4;opacity:.6;position:absolute;width:100%;height:100%;display:none}.aside #choice-design-option li:hover .hover{display:block}.aside #choice-design-option li .title{background:url(../images/bg1.png) repeat #cdcdcd;padding:3px 10px}.aside #choice-design-option li .title i.fa{color:#000}.aside #choice-design-option li .content i.fa{font-size:30px;color:#fe070f;margin:8px 0}.aside #choice-design-option li .content .des{padding:3px 10px 3px 0}.aside #choice-illustration{list-style:none;padding-left:0;margin-top:10px}.aside #choice-illustration li{border:1px solid #cdcdcd;position:relative}.aside #choice-illustration li .title{background:url(../images/bg1.png) repeat #cdcdcd;padding:3px 10px}.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:65px;overflow:hidden;float:left;margin-left:5px}.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:62px;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}
dist/styles/5b59cf42.main.css
Diff comments   View file @ 1d6ddfa
  1 +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:65px;overflow:hidden;float:left;margin-left:5px}.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:62px;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}
dist/views/design_part/default.html
Diff comments   View file @ 1d6ddfa
  1 +<li><div class="hover"></div><div class="title"><i class="fa fa-chevron-circle-right" aria-hidden="true"></i> 文字を追加</div><div class="content clearfix"><div class="col-xs-2 text-center"><i class="fa fa-jpy" aria-hidden="true"></i></div><div class="col-xs-10 des padding-left-0">書体を選んでお好きな文字を入力できます</div></div></li><li><div class="hover"></div><div class="title"><i class="fa fa-chevron-circle-right" aria-hidden="true"></i> イラストやイメージを追加</div><div class="content clearfix"><div class="col-xs-2 text-center"><i class="fa fa-btc" aria-hidden="true"></i></div><div class="col-xs-10 des padding-left-0">自由にお使いいただけるデザイン画像をご用意しました</div></div></li><li><div class="hover"></div><div class="title"><i class="fa fa-chevron-circle-right" aria-hidden="true"></i> 自分の画像・写真を追加</div><div class="content clearfix"><div class="col-xs-2 text-center"><i class="fa fa-jpy" aria-hidden="true"></i></div><div class="col-xs-10 des padding-left-0">ご自分で用意した画像をアップロードして使えます</div></div></li><li><div class="hover"></div><div class="title"><i class="fa fa-chevron-circle-right" aria-hidden="true"></i> おすすめデザインを使う</div><div class="content clearfix"><div class="col-xs-2 text-center"><i class="fa fa-jpy" aria-hidden="true"></i></div><div class="col-xs-10 des padding-left-0">おすすめデザインデータをご自由にカスタマイズしてお使いください</div></div></li>
dist/views/design_part/illustration.html
Diff comments   View file @ 1d6ddfa
  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>
dist/views/design_part/text.html
Diff comments   View file @ 1d6ddfa
1   -<li><div class="title"><i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Text</div><div class="content clearfix"><input type="text" class="form-control" ng-keyup="inputText(design_text)" ng-model="design_text"></div></li>
  1 +<li><div class="title"><i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Text</div><div class="content clearfix"><input type="text" class="form-control" id="input-design-text" ng-focus="focusInputText()" ng-keyup="inputText(design_text)" ng-model="design_text"></div></li>
dist/views/tshirt-design.html
Diff comments   View file @ 1d6ddfa
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="showIllustration('text')"><i class="fa fa-jpy" aria-hidden="true"></i> 文字</li><li ng-class="{'active': isShowLeftPanel=='illustration'}" ng-click="showIllustration('illustration')"><i class="fa fa-btc" aria-hidden="true"></i> イラスト・イメージ</li><li><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"><ul id="choice-design-option" ng-show="isShowLeftPanel=='default'"><li><div class="hover"></div><div class="title"><i class="fa fa-chevron-circle-right" aria-hidden="true"></i> 文字を追加</div><div class="content clearfix"><div class="col-xs-2 text-center"><i class="fa fa-jpy" aria-hidden="true"></i></div><div class="col-xs-10 des padding-left-0">書体を選んでお好きな文字を入力できます</div></div></li><li><div class="hover"></div><div class="title"><i class="fa fa-chevron-circle-right" aria-hidden="true"></i> イラストやイメージを追加</div><div class="content clearfix"><div class="col-xs-2 text-center"><i class="fa fa-btc" aria-hidden="true"></i></div><div class="col-xs-10 des padding-left-0">自由にお使いいただけるデザイン画像をご用意しました</div></div></li><li><div class="hover"></div><div class="title"><i class="fa fa-chevron-circle-right" aria-hidden="true"></i> 自分の画像・写真を追加</div><div class="content clearfix"><div class="col-xs-2 text-center"><i class="fa fa-jpy" aria-hidden="true"></i></div><div class="col-xs-10 des padding-left-0">ご自分で用意した画像をアップロードして使えます</div></div></li><li><div class="hover"></div><div class="title"><i class="fa fa-chevron-circle-right" aria-hidden="true"></i> おすすめデザインを使う</div><div class="content clearfix"><div class="col-xs-2 text-center"><i class="fa fa-jpy" aria-hidden="true"></i></div><div class="col-xs-10 des padding-left-0">おすすめデザインデータをご自由にカスタマイズしてお使いください</div></div></li></ul><ul id="choice-illustration" ng-show="isShowLeftPanel=='illustration'"><li><div class="hover"></div><div class="title"><i class="fa fa-chevron-circle-right" aria-hidden="true"></i> items</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="hover"></div><div class="title"><i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Color to fill</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="hover"></div><div class="title"><i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Layer option</div><div class="content clearfix"></div></li></ul><!-- Text design--><ul id="choice-text" ng-show="isShowLeftPanel=='text'" ng-include="'views/design_part/text.html'"></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 --><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="showIllustration('text')"><i class="fa fa-jpy" aria-hidden="true"></i> 文字</li><li ng-class="{'active': isShowLeftPanel=='illustration'}" ng-click="showIllustration('illustration')"><i class="fa fa-btc" aria-hidden="true"></i> イラスト・イメージ</li><li><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="'views/design_part/default.html'"></ul><!-- Illustration design--><ul class="box-design-option" id="choice-illustration" ng-show="isShowLeftPanel=='illustration'" ng-include="designPartIllustration"></ul><!-- Text design--><ul class="box-design-option" id="choice-text" ng-show="isShowLeftPanel=='text'" ng-include="'views/design_part/text.html'"></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>