Commit c8bfdfd96a3d5a3acbb5b3f93a84c78f4174aa95

Authored by DANG
1 parent 81dbbd759f
Exists in master and in 1 other branch develop

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 });
... ... @@ -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">