diff --git a/app/scripts/controllers/main.js b/app/scripts/controllers/main.js index 16f0ef5..27eb708 100644 --- a/app/scripts/controllers/main.js +++ b/app/scripts/controllers/main.js @@ -37,8 +37,8 @@ define(['app'], function (app) { $scope.showIllustration = function(tab){ - $scope.isShowLeftPanel = tab; - switch (tab){ + $rootScope.isShowLeftPanel = tab; + switch (tab) { case 'illustration': { $scope.IllustrationList = $illustration.getAll(); $scope.illustrationSelectConfig = { @@ -46,7 +46,21 @@ define(['app'], function (app) { }; break; } - // case: '' + case 'text': { + break; + } + } + }; + + //safeApply + $rootScope.safeApply = function(fn) { + var phase = this.$root.$$phase; + if(phase == '$apply' || phase == '$digest') { + if(fn && (typeof(fn) === 'function')) { + fn(); + } + } else { + this.$apply(fn); } }; @@ -64,5 +78,7 @@ define(['app'], function (app) { }; + + }); }); diff --git a/app/scripts/controllers/tshirtdesign.js b/app/scripts/controllers/tshirtdesign.js index 760efa4..06dfdaa 100644 --- a/app/scripts/controllers/tshirtdesign.js +++ b/app/scripts/controllers/tshirtdesign.js @@ -1,8 +1,7 @@ define(['app'], function (app) { - 'use strict'; + //'use strict'; app.controller('TshirtdesignCtrl', function ($scope, $rootScope, $illustration) { - var canvas = new fabric.Canvas('main-design-container'); fabric.Object.prototype.transparentCorners = false; @@ -12,7 +11,10 @@ define(['app'], function (app) { 'object:moving': onIllustrationChange, 'object:scaling': onIllustrationChange, 'object:rotating': onIllustrationChange, - 'object:selected': onllustrationSelected, + 'object:selected': onIllustrationSelected, + 'selected:deselected' : onIllustrationOut, + //'selected:out' : onIllustrationOut, + //'mouse:up' : onIllustrationOut, }); function onIllustrationChange(options) { // options.target.setCoords(); @@ -20,18 +22,39 @@ define(['app'], function (app) { // if (obj === options.target) return; // obj.setOpacity(options.target.intersectsWithObject(obj) ? 0.5 : 1); // }); + + } + + function onIllustrationOut() { + console.log('out object'); } $scope.currentObject = null; - function onllustrationSelected(options){ - $scope.currentObject = canvas.getActiveObject(); - console.log(canvas.getActiveObject()); + function onIllustrationSelected(options) { + var object = options.target; + $scope.typeObject = object.type; + switch ($scope.typeObject) { + case 'i-text' : + $('#input-design-text').focus(); + $rootScope.isShowLeftPanel = 'text'; + break; + + case 'path-group' : + $rootScope.isShowLeftPanel = 'illustration'; + break; + + default : + $rootScope.isShowLeftPanel = 'default'; + break; + } + $rootScope.safeApply(); + } // Illustration process $scope.changeIllustrationCategory = function(currentIllustration){ $scope.currentIllustrationCate = $illustration.getList(currentIllustration); - console.log($scope.currentIllustrationCate); + //console.log($scope.currentIllustrationCate); }; $scope.insertSvg = function(item){ @@ -84,16 +107,21 @@ define(['app'], function (app) { '#ffffcc' ]; + $scope.focusInputText = function() { + if($scope.typeObject != 'i-text') + $scope.iText = new fabric.IText(''); + }; //Design text $scope.inputText = function(e) { - var text = e; - var iText = new fabric.IText(text); + var iText = $scope.iText; + iText.text = e; canvas.add(iText); canvas.renderAll(); canvas.setActiveObject(iText); - } - + }; + //init + //$scope.showIllustration('default'); }); }); diff --git a/app/styles/main.css b/app/styles/main.css index aa15943..4adaee4 100644 --- a/app/styles/main.css +++ b/app/styles/main.css @@ -387,18 +387,21 @@ aside .step .finish-design button{ /*Aside modal*/ .aside{ } -.aside #choice-design-option{ + +.aside .box-design-option{ list-style: none; padding-left: 0; margin-top: 10px; +} +.aside .box-design-option li{ } -.aside #choice-design-option li{ +.aside .box-design-option li{ border: 1px solid #cdcdcd; position: relative; cursor: pointer; } -.aside #choice-design-option li .hover{ +.aside .box-design-option li .hover{ background-color: #fddad4; opacity: 0.6; position: absolute; @@ -406,47 +409,31 @@ aside .step .finish-design button{ height: 100%; display: none; } -.aside #choice-design-option li:hover .hover{ +.aside .box-design-option li:hover .hover{ display: block; } -.aside #choice-design-option li .title{ +.aside .box-design-option li .title{ background: url("../images/bg1.png") repeat #cdcdcd; padding: 3px 10px; } -.aside #choice-design-option li .title i.fa{ +.aside .box-design-option li .title i.fa{ color: #000000; } -.aside #choice-design-option li .content{ +.aside .box-design-option li .content{ } -.aside #choice-design-option li .content i.fa{ +.aside .box-design-option li .content i.fa{ font-size: 30px; color: #fe070f; margin: 8px 0; } -.aside #choice-design-option li .content .des{ +.aside .box-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; -} - +/*Design Choice Illustration*/ .aside #choice-illustration li .content { padding: 10px 10px; } diff --git a/app/views/design_part/text.html b/app/views/design_part/text.html index 70e3e1d..b380eed 100644 --- a/app/views/design_part/text.html +++ b/app/views/design_part/text.html @@ -4,6 +4,6 @@ Text
- +
diff --git a/app/views/tshirt-design.html b/app/views/tshirt-design.html index ffd0e4c..513bd36 100644 --- a/app/views/tshirt-design.html +++ b/app/views/tshirt-design.html @@ -34,117 +34,18 @@
-
+ +