Commit 360081503c102b4ec25b9ccbc6da5c8b4b12e252
1 parent
d7aae10e26
Exists in
master
and in
1 other branch
Fix reponsive
Showing 3 changed files with 32 additions and 23 deletions Side-by-side Diff
app/scripts/controllers/main.js
| ... | ... | @@ -22,14 +22,17 @@ |
| 22 | 22 | $scope.tShirtImg = $scope.tShirtImgFront; |
| 23 | 23 | |
| 24 | 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 | - | |
| 25 | + function setSizePreViewDesign() { | |
| 26 | + var _widthPreviewDesign = $('#preview-design').width(); | |
| 27 | + var _widthTShirtImage = $('.tshirt-image').width(); | |
| 28 | + var leftReviewDesign = _widthTShirtImage/2 - (_widthPreviewDesign/2); | |
| 29 | + $('#preview-design').css({left: leftReviewDesign}); | |
| 30 | + } | |
| 31 | + setSizePreViewDesign(); | |
| 32 | + //event resize window | |
| 33 | + $(window).resize(function () { | |
| 34 | + setSizePreViewDesign(); | |
| 35 | + }); | |
| 33 | 36 | |
| 34 | 37 | $scope.choiceTShirtColor = function(key) { |
| 35 | 38 | $scope.tShirtColorKey = key; |
app/scripts/controllers/tshirtdesign.js
| ... | ... | @@ -4,20 +4,25 @@ |
| 4 | 4 | |
| 5 | 5 | var canvas = new fabric.Canvas('main-design-container'); |
| 6 | 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; | |
| 7 | + function setSizeCanvas() { | |
| 8 | + var _modalWidth = $('.modal-dialog').width(); | |
| 9 | + var _windowWidth = window.innerWidth; | |
| 10 | + if(_windowWidth > 762) { | |
| 11 | + var _contentCanvasWidth = _modalWidth*8/12 - 100; | |
| 12 | + } else { | |
| 13 | + var _contentCanvasWidth = _windowWidth-70; | |
| 14 | + } | |
| 15 | + | |
| 16 | + canvas.setWidth(_contentCanvasWidth); | |
| 17 | + canvas.setHeight(650); | |
| 13 | 18 | } |
| 19 | + setSizeCanvas(); | |
| 20 | + //Window resize event | |
| 21 | + $(window).resize(function () { | |
| 22 | + setSizeCanvas(); | |
| 23 | + }); | |
| 14 | 24 | |
| 15 | - console.log(canvas); | |
| 16 | - canvas.setWidth(_contentCanvasWidth); | |
| 17 | - canvas.setHeight(650); | |
| 18 | - canvas._onMouseDown = function () { | |
| 19 | - alert('in mouse up'); | |
| 20 | - }; | |
| 25 | + | |
| 21 | 26 | //Custom control |
| 22 | 27 | fabric.Object.prototype.transparentCorners = true; |
| 23 | 28 | fabric.Object.prototype.hasRotatingPoint = false; |
| ... | ... | @@ -57,6 +62,8 @@ |
| 57 | 62 | action: function(e, target) { |
| 58 | 63 | fabric.Object.prototype.selectable = false; |
| 59 | 64 | canvas.deactivateAll(); |
| 65 | + delete currentObj; | |
| 66 | + $scope.designTextValue = ''; | |
| 60 | 67 | $timeout(function(){ |
| 61 | 68 | fabric.Object.prototype.selectable = true; |
| 62 | 69 | },20); |
| ... | ... | @@ -185,7 +192,6 @@ |
| 185 | 192 | listObj[indexCurr] = object; |
| 186 | 193 | indexCurr++; |
| 187 | 194 | indexCurr2 = indexCurr - 1; |
| 188 | - // console.log(stateObj); | |
| 189 | 195 | refreshObj = true; |
| 190 | 196 | } |
| 191 | 197 |