Commit c8bfdfd96a3d5a3acbb5b3f93a84c78f4174aa95
1 parent
81dbbd759f
Exists in
master
and in
1 other branch
event click object
Showing 5 changed files with 79 additions and 147 deletions Side-by-side Diff
app/scripts/controllers/main.js
... | ... | @@ -37,8 +37,8 @@ |
37 | 37 | |
38 | 38 | |
39 | 39 | $scope.showIllustration = function(tab){ |
40 | - $scope.isShowLeftPanel = tab; | |
41 | - switch (tab){ | |
40 | + $rootScope.isShowLeftPanel = tab; | |
41 | + switch (tab) { | |
42 | 42 | case 'illustration': { |
43 | 43 | $scope.IllustrationList = $illustration.getAll(); |
44 | 44 | $scope.illustrationSelectConfig = { |
45 | 45 | |
... | ... | @@ -46,10 +46,24 @@ |
46 | 46 | }; |
47 | 47 | break; |
48 | 48 | } |
49 | - // case: '' | |
49 | + case 'text': { | |
50 | + break; | |
51 | + } | |
50 | 52 | } |
51 | 53 | }; |
52 | 54 | |
55 | + //safeApply | |
56 | + $rootScope.safeApply = function(fn) { | |
57 | + var phase = this.$root.$$phase; | |
58 | + if(phase == '$apply' || phase == '$digest') { | |
59 | + if(fn && (typeof(fn) === 'function')) { | |
60 | + fn(); | |
61 | + } | |
62 | + } else { | |
63 | + this.$apply(fn); | |
64 | + } | |
65 | + }; | |
66 | + | |
53 | 67 | $scope.modalTShirtDesign = function() { |
54 | 68 | $('#tshirt-design').modal( |
55 | 69 | { |
... | ... | @@ -62,6 +76,8 @@ |
62 | 76 | $scope.modalClose = function(){ |
63 | 77 | $('#tshirt-design').modal('hide'); |
64 | 78 | }; |
79 | + | |
80 | + | |
65 | 81 | |
66 | 82 | |
67 | 83 | }); |
app/scripts/controllers/tshirtdesign.js
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 | |
... | ... | @@ -12,7 +11,10 @@ |
12 | 11 | 'object:moving': onIllustrationChange, |
13 | 12 | 'object:scaling': onIllustrationChange, |
14 | 13 | 'object:rotating': onIllustrationChange, |
15 | - 'object:selected': onllustrationSelected, | |
14 | + 'object:selected': onIllustrationSelected, | |
15 | + 'selected:deselected' : onIllustrationOut, | |
16 | + //'selected:out' : onIllustrationOut, | |
17 | + //'mouse:up' : onIllustrationOut, | |
16 | 18 | }); |
17 | 19 | function onIllustrationChange(options) { |
18 | 20 | // options.target.setCoords(); |
19 | 21 | |
20 | 22 | |
21 | 23 | |
... | ... | @@ -20,18 +22,39 @@ |
20 | 22 | // if (obj === options.target) return; |
21 | 23 | // obj.setOpacity(options.target.intersectsWithObject(obj) ? 0.5 : 1); |
22 | 24 | // }); |
25 | + | |
23 | 26 | } |
24 | 27 | |
28 | + function onIllustrationOut() { | |
29 | + console.log('out object'); | |
30 | + } | |
31 | + | |
25 | 32 | $scope.currentObject = null; |
26 | - function onllustrationSelected(options){ | |
27 | - $scope.currentObject = canvas.getActiveObject(); | |
28 | - console.log(canvas.getActiveObject()); | |
33 | + function onIllustrationSelected(options) { | |
34 | + var object = options.target; | |
35 | + $scope.typeObject = object.type; | |
36 | + switch ($scope.typeObject) { | |
37 | + case 'i-text' : | |
38 | + $('#input-design-text').focus(); | |
39 | + $rootScope.isShowLeftPanel = 'text'; | |
40 | + break; | |
41 | + | |
42 | + case 'path-group' : | |
43 | + $rootScope.isShowLeftPanel = 'illustration'; | |
44 | + break; | |
45 | + | |
46 | + default : | |
47 | + $rootScope.isShowLeftPanel = 'default'; | |
48 | + break; | |
49 | + } | |
50 | + $rootScope.safeApply(); | |
51 | + | |
29 | 52 | } |
30 | 53 | |
31 | 54 | // Illustration process |
32 | 55 | $scope.changeIllustrationCategory = function(currentIllustration){ |
33 | 56 | $scope.currentIllustrationCate = $illustration.getList(currentIllustration); |
34 | - console.log($scope.currentIllustrationCate); | |
57 | + //console.log($scope.currentIllustrationCate); | |
35 | 58 | }; |
36 | 59 | |
37 | 60 | $scope.insertSvg = function(item){ |
38 | 61 | |
39 | 62 | |
40 | 63 | |
... | ... | @@ -84,17 +107,22 @@ |
84 | 107 | '#ffffcc' |
85 | 108 | ]; |
86 | 109 | |
110 | + $scope.focusInputText = function() { | |
111 | + if($scope.typeObject != 'i-text') | |
112 | + $scope.iText = new fabric.IText(''); | |
113 | + }; | |
87 | 114 | |
88 | 115 | //Design text |
89 | 116 | $scope.inputText = function(e) { |
90 | - var text = e; | |
91 | - var iText = new fabric.IText(text); | |
117 | + var iText = $scope.iText; | |
118 | + iText.text = e; | |
92 | 119 | canvas.add(iText); |
93 | 120 | canvas.renderAll(); |
94 | 121 | canvas.setActiveObject(iText); |
95 | - } | |
122 | + }; | |
96 | 123 | |
97 | - | |
124 | + //init | |
125 | + //$scope.showIllustration('default'); | |
98 | 126 | }); |
99 | 127 | }); |
app/styles/main.css
... | ... | @@ -387,18 +387,21 @@ |
387 | 387 | /*Aside modal*/ |
388 | 388 | .aside{ |
389 | 389 | } |
390 | -.aside #choice-design-option{ | |
390 | + | |
391 | +.aside .box-design-option{ | |
391 | 392 | list-style: none; |
392 | 393 | padding-left: 0; |
393 | 394 | margin-top: 10px; |
395 | +} | |
396 | +.aside .box-design-option li{ | |
394 | 397 | |
395 | 398 | } |
396 | -.aside #choice-design-option li{ | |
399 | +.aside .box-design-option li{ | |
397 | 400 | border: 1px solid #cdcdcd; |
398 | 401 | position: relative; |
399 | 402 | cursor: pointer; |
400 | 403 | } |
401 | -.aside #choice-design-option li .hover{ | |
404 | +.aside .box-design-option li .hover{ | |
402 | 405 | background-color: #fddad4; |
403 | 406 | opacity: 0.6; |
404 | 407 | position: absolute; |
405 | 408 | |
406 | 409 | |
407 | 410 | |
408 | 411 | |
409 | 412 | |
410 | 413 | |
... | ... | @@ -406,47 +409,31 @@ |
406 | 409 | height: 100%; |
407 | 410 | display: none; |
408 | 411 | } |
409 | -.aside #choice-design-option li:hover .hover{ | |
412 | +.aside .box-design-option li:hover .hover{ | |
410 | 413 | display: block; |
411 | 414 | } |
412 | 415 | |
413 | -.aside #choice-design-option li .title{ | |
416 | +.aside .box-design-option li .title{ | |
414 | 417 | background: url("../images/bg1.png") repeat #cdcdcd; |
415 | 418 | padding: 3px 10px; |
416 | 419 | } |
417 | -.aside #choice-design-option li .title i.fa{ | |
420 | +.aside .box-design-option li .title i.fa{ | |
418 | 421 | color: #000000; |
419 | 422 | } |
420 | 423 | |
421 | -.aside #choice-design-option li .content{ | |
424 | +.aside .box-design-option li .content{ | |
422 | 425 | |
423 | 426 | } |
424 | -.aside #choice-design-option li .content i.fa{ | |
427 | +.aside .box-design-option li .content i.fa{ | |
425 | 428 | font-size: 30px; |
426 | 429 | color: #fe070f; |
427 | 430 | margin: 8px 0; |
428 | 431 | } |
429 | -.aside #choice-design-option li .content .des{ | |
432 | +.aside .box-design-option li .content .des{ | |
430 | 433 | padding: 3px 10px 3px 0; |
431 | 434 | } |
432 | 435 | |
433 | - | |
434 | -.aside #choice-illustration{ | |
435 | - list-style: none; | |
436 | - padding-left: 0; | |
437 | - margin-top: 10px; | |
438 | - | |
439 | -} | |
440 | -.aside #choice-illustration li{ | |
441 | - border: 1px solid #cdcdcd; | |
442 | - position: relative; | |
443 | -} | |
444 | - | |
445 | -.aside #choice-illustration li .title{ | |
446 | - background: url("../images/bg1.png") repeat #cdcdcd; | |
447 | - padding: 3px 10px; | |
448 | -} | |
449 | - | |
436 | +/*Design Choice Illustration*/ | |
450 | 437 | .aside #choice-illustration li .content { |
451 | 438 | padding: 10px 10px; |
452 | 439 | } |
app/views/design_part/text.html
... | ... | @@ -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
... | ... | @@ -34,117 +34,18 @@ |
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 | - items | |
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 | - Color to fill | |
123 | - </div> | |
124 | - <div class="content clearfix"> | |
125 | - <div class="color-patterns"> | |
126 | - <div class="color-pattern-item" ng-repeat="color in listColorPatterns track by $index" ng-click="changeColorPattern(color)" ng-style="{'background-color': color}"> | |
127 | - </div> | |
128 | - <div class="clearfix"></div> | |
129 | - </div> | |
130 | - </div> | |
131 | - </li> | |
132 | - <li> | |
133 | - <div class="hover"></div> | |
134 | - <div class="title"> | |
135 | - <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> | |
136 | - Layer option | |
137 | - </div> | |
138 | - <div class="content clearfix"> | |
139 | - | |
140 | - </div> | |
141 | - </li> | |
40 | + <!-- Illustration design--> | |
41 | + <ul class="box-design-option" id="choice-illustration" ng-show="isShowLeftPanel=='illustration'" ng-include="'views/design_part/illustration.html'"> | |
142 | 42 | </ul> |
143 | - | |
144 | 43 | <!-- Text design--> |
145 | - <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'"> | |
146 | 45 | </ul> |
147 | 46 | </div> |
47 | + | |
48 | + <!-- Design section --> | |
148 | 49 | <div class="design-content col-xs-8"> |
149 | 50 | <div class="content" ng-style="{'background-color' : tShirtColorCode}"> |
150 | 51 | <canvas id="main-design-container" width="510px" height="620px" class="selection-design lower-canvas"> |