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"> |