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

Download as
Browse Code ยป

Commit 2f4c317491d77c8ee85a615ec780b3609f8565fa

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

Fix text design and reposive

Showing 8 changed files with 189 additions and 103 deletions Side-by-side Diff

app/bower_components/fabric-customise-controls/.bower.json
Diff comments   View file @ 2f4c317
... ... @@ -29,6 +29,7 @@
29 29 },
30 30 "_source": "https://github.com/pixolith/fabricjs-customise-controls-extension.git",
31 31 "_target": "^0.1.8",
32   - "_originalSource": "fabric-customise-controls"
  32 + "_originalSource": "fabric-customise-controls",
  33 + "_direct": true
33 34 }
app/images/control-icon/trash.png
Diff comments   View file @ 2f4c317

3.45 KB
app/scripts/controllers/about.js
Diff comments   View file @ 2f4c317
1 1 define(['app'], function (app) {
2 2 'use strict';
3   -
4 3 app.controller('AboutCtrl', function ($scope) {
5 4 $scope.awesomeThings = [
6 5 'HTML5 Boilerplate',
app/scripts/controllers/main.js
Diff comments   View file @ 2f4c317
1 1 define(['app'], function (app) {
2 2 'use strict';
3 3 app.controller('MainCtrl', function ($rootScope, $scope, $timeout, $illustration, $t_shirt) {
  4 + // console.log($('nav').width());
4 5 $rootScope.API_URL = 'http://domain.com';
5 6 $scope.designFrameView = 'views/tshirt-design.html?ver='+VERSION;
6 7 $scope.designPartIllustration = 'views/design_part/illustration.html?ver='+VERSION;
... ... @@ -20,6 +21,16 @@
20 21 $scope.tShirtImgBack = $scope.tShirtColor[tShirtColorFirstKey].img.back;
21 22 $scope.tShirtImg = $scope.tShirtImgFront;
22 23  
  24 + //review design set position
  25 + var _widthPreviewDesign = $('#preview-design').width();
  26 + var _widthTShirtImage = $('.tshirt-image').width();
  27 + console.log(_widthTShirtImage);
  28 + console.log(_widthPreviewDesign);
  29 + // $('#preview-design').css({width: _widthTShirtImage/2 - 60});
  30 + var leftReviewDesign = _widthTShirtImage/2 - (_widthPreviewDesign/2 - 10);
  31 + $('#preview-design').css({left: leftReviewDesign});
  32 +
  33 +
23 34 $scope.choiceTShirtColor = function(key) {
24 35 $scope.tShirtColorKey = key;
25 36 $rootScope.tShirtColorCode = $scope.tShirtColor[key].code;
26 37  
... ... @@ -42,31 +53,8 @@
42 53 };
43 54  
44 55  
45   - $scope.showDesignTab = function(tab){
46   - $rootScope.isShowLeftPanel = tab;
47   - switch (tab) {
48   - case 'illustration': {
49   - $scope.IllustrationList = $illustration.getAll();
50   - $rootScope.outputImage = false;
51   - $scope.illustrationSelectConfig = {
52   - allowClear:true
53   - };
54   - $timeout(function(){
55   - $('.illstration-item').tooltip({
56   - animated: 'fade',
57   - placement: 'bottom',
58   - html: true
59   - });
60   - // console.log('here');
61   - },1000);
62   - break;
63   - }
64   - case 'text': {
65   - break;
66   - }
67   - }
68   - };
69 56  
  57 +
70 58 //safeApply
71 59 $rootScope.safeApply = function(fn) {
72 60 var phase = this.$root.$$phase;
73 61  
... ... @@ -86,15 +74,11 @@
86 74 keyboard: false
87 75 }
88 76 );
89   - $scope.showDesignTab('default');
  77 +
90 78 };
91 79 $scope.modalClose = function(){
92 80 $('#tshirt-design').modal('hide');
93 81 };
94   -
95   -
96   -
97   -
98 82 });
99 83 });
app/scripts/controllers/tshirtdesign.js
Diff comments   View file @ 2f4c317
1 1 define(['app'], function (app) {
2 2 //'use strict';
  3 + app.controller('TshirtdesignCtrl', function ($scope, $rootScope, $window, $timeout, $illustration) {
3 4  
4   - app.controller('TshirtdesignCtrl', function ($scope, $rootScope, $window, $illustration) {
5 5 var canvas = new fabric.Canvas('main-design-container');
  6 + //Set width and height canvas
  7 + var _modalWidth = $('.modal-dialog').width();
  8 + var _windowWidth = window.innerWidth;
  9 + if(_windowWidth > 762) {
  10 + var _contentCanvasWidth = _modalWidth*8/12 - 100;
  11 + } else {
  12 + var _contentCanvasWidth = _windowWidth-70;
  13 + }
  14 +
  15 +
  16 + canvas.setWidth(_contentCanvasWidth);
  17 + canvas.setHeight(650);
  18 +
  19 + //Custom control
6 20 fabric.Object.prototype.transparentCorners = false;
7 21 fabric.Object.prototype.hasRotatingPoint = false;
8 22 var ctrVisible = {tl: false, ml:false, bl:false, mb: false, br: true, mr: false, tr: true, mt: true, mtr: false};
... ... @@ -18,7 +32,7 @@
18 32 cornerPadding: 6
19 33 },
20 34 mt: {
21   - icon: 'images/control-icon/ok.png'
  35 + icon: 'images/control-icon/trash.png'
22 36 },
23 37 br: {
24 38 icon: 'images/control-icon/resize.png'
... ... @@ -31,14 +45,13 @@
31 45 fabric.Canvas.prototype.customiseControls({
32 46 mt: {
33 47 cursor: 'pointer',
34   - action: function (e, target) {
35   - target.hasControls = false;
36   - target.hasBorders = false;
37   - canvas.deactivateAll().renderAll();
38   - setTimeout(function() {
39   - target.hasControls = true;
40   - target.hasBorders = true;
41   - }, 1);
  48 + // action: 'remove'
  49 + action: function(e, target) {
  50 + currentObj = canvas.getActiveObject();
  51 + if(confirm('ๅ‰Š้™คใ—ใฆใ‚‚ใ‚ˆใ‚ใ—ใ„ใงใ™ใ‹?')) {
  52 + currentObj.remove();
  53 + }
  54 +
42 55 }
43 56 },
44 57 br: {
45 58  
46 59  
... ... @@ -72,13 +85,36 @@
72 85 var actionObj = false;
73 86 var refreshObj = true;
74 87 var spacingNum = 0;
  88 + $scope.itemFont = 0;
75 89  
76   - function mouseUp(e) {
77   - currentObj = canvas.getActiveObject();
78   - console.log(currentObj);
79   - currentObj.activate();
80   - }
81 90  
  91 + $scope.showDesignTab = function(tab){
  92 + canvas.deactivateAll().renderAll();
  93 + $rootScope.isShowLeftPanel = tab;
  94 + switch (tab) {
  95 + case 'illustration': {
  96 + $scope.IllustrationList = $illustration.getAll();
  97 + $rootScope.outputImage = false;
  98 + $scope.illustrationSelectConfig = {
  99 + allowClear:true
  100 + };
  101 + $timeout(function(){
  102 + $('.illstration-item').tooltip({
  103 + animated: 'fade',
  104 + placement: 'bottom',
  105 + html: true
  106 + });
  107 + // console.log('here');
  108 + },1000);
  109 + break;
  110 + }
  111 + case 'text': {
  112 + break;
  113 + }
  114 + }
  115 + };
  116 + $scope.showDesignTab('default');
  117 +
82 118  
83 119 function onIllustrationAdded(options){
84 120 var object = options.target;
... ... @@ -217,10 +253,7 @@
217 253  
218 254 function onObjectSelected(options) {
219 255 var currentObj = options.target;
220   - //Set default
221   - console.log('selected object');
222   - // currentObj.hasControls = true;
223   - // currentObj.hasBorders = true;
  256 +
224 257 $scope.typeObject = currentObj.type;
225 258 switch ($scope.typeObject) {
226 259 case 'i-text' :
... ... @@ -428,7 +461,8 @@
428 461 canvas.setActiveObject(iText);
429 462 }
430 463 };
431   - $scope.setFontFamily = function(font) {
  464 + $scope.setFontFamily = function(font,index) {
  465 + $scope.itemFont = index;
432 466 if(canvas.getActiveObject()) {
433 467 var currentObj = canvas.getActiveObject();
434 468 if(currentObj.type == 'i-text') {
... ... @@ -446,7 +480,7 @@
446 480 if(currentObj.type == 'i-text') {
447 481 if(e == 'plus')
448 482 spacingNum = spacingNum + 30;
449   - else if (spacingNum >= 30){
  483 + else if (spacingNum >= -30){
450 484 spacingNum = spacingNum - 30;
451 485 }
452 486 currentObj.set('charSpacing', spacingNum);
... ... @@ -454,7 +488,19 @@
454 488 canvas.setActiveObject(currentObj);
455 489 }
456 490 }
457   - }
  491 + };
  492 +
  493 + $scope.setLetterSpacingTextDefault = function() {
  494 + if(canvas.getActiveObject()) {
  495 + var currentObj = canvas.getActiveObject();
  496 + if(currentObj.type == 'i-text') {
  497 + spacingNum = 0;
  498 + currentObj.set('charSpacing', spacingNum);
  499 + canvas.renderAll();
  500 + canvas.setActiveObject(currentObj);
  501 + }
  502 + }
  503 + };
458 504  
459 505  
460 506 /**** process insert image */
461 507  
... ... @@ -463,14 +509,14 @@
463 509 }else{
464 510 $scope.recentImages = {};
465 511 }
466   -
  512 +
467 513 var addToRecentImage = function(name, data){
468 514 if (typeof($window.localStorage.recentImages) != 'undefined'){
469 515 $scope.recentImages = JSON.parse($window.localStorage.recentImages);
470 516 }else{
471 517 $scope.recentImages = {};
472 518 }
473   -
  519 +
474 520 if (typeof($scope.recentImages[name]) == 'undefined'){
475 521 var ii=0;
476 522 var II = 0;
477 523  
478 524  
... ... @@ -505,19 +551,20 @@
505 551 left: 50,
506 552 top: 50
507 553 });
  554 + //image.scale(getRandomNum(0.1, 0.25)).setCoords();
508 555 image.scaleToWidth(200);
509 556 canvas.add(image);
510 557 }
511 558 }
512 559 reader.readAsDataURL(e.target.files[0]);
513 560 }
514   -
  561 +
515 562 $scope.insertRecentImage = function(data){
516 563 var imgObj = new Image();
517 564 imgObj.src = data;
518 565 imgObj.onload = function () {
519 566 // start fabricJS stuff
520   -
  567 +
521 568 var image = new fabric.Image(imgObj);
522 569 image.set({
523 570 left: 50,
... ... @@ -527,7 +574,7 @@
527 574 canvas.add(image);
528 575 }
529 576 }
530   -
  577 +
531 578 //Traslation text
532 579 $scope.rotateText = function(style) {
533 580 if(canvas.getActiveObject()) {
1 1 /* Space out content a bit */
2 2 @import "../fonts/font.css";
3 3 @import "../fonts/font_canvas/font-canvas.css";
  4 +html{
  5 + height:100%;
  6 + width:100%;
  7 +}
4 8 body {
5 9 font-family: 'Hiragino Kaku Gothic Pro', sans-serif;
6   - /*font-family: 'gn_aki_iro_sesami_cookies';*/
  10 + height:100%;
  11 + width:100%;
7 12 }
8 13 /*Scroll bar style*/
9 14 ::-webkit-scrollbar {
10 15