Commit 4d7dab16fa0162f1383f7e8dfa41e5667662a446
1 parent
0ba7cbbc4e
Exists in
master
and in
1 other branch
Clean code
Showing 3 changed files with 62 additions and 18 deletions Inline Diff
app/scripts/controllers/main.js
| 1 | define(['app'], function (app) { | 1 | define(['app'], function (app) { |
| 2 | 'use strict'; | 2 | 'use strict'; |
| 3 | app.controller('MainCtrl', function ($rootScope, $scope, $timeout, $illustration, $t_shirt, $routeParams) { | 3 | app.controller('MainCtrl', function ($rootScope, $scope, $timeout, $illustration, $t_shirt, $routeParams) { |
| 4 | // console.log($('nav').width()); | 4 | //Define and init var |
| 5 | $rootScope.API_URL = 'http://domain.com'; | 5 | $rootScope.API_URL = 'http://domain.com'; |
| 6 | $scope.designFrameView = 'views/tshirt-design.html?ver='+VERSION; | 6 | $scope.designFrameView = 'views/tshirt-design.html?ver='+VERSION; |
| 7 | $scope.designPartIllustration = 'views/design_part/illustration.html?ver='+VERSION; | 7 | $scope.designPartIllustration = 'views/design_part/illustration.html?ver='+VERSION; |
| 8 | $scope.designPartImage = 'views/design_part/image.html?ver='+VERSION; | 8 | $scope.designPartImage = 'views/design_part/image.html?ver='+VERSION; |
| 9 | $scope.designPartText = 'views/design_part/text.html?ver='+VERSION; | 9 | $scope.designPartText = 'views/design_part/text.html?ver='+VERSION; |
| 10 | $scope.designPartDefault = 'views/design_part/default.html?ver='+VERSION; | 10 | $scope.designPartDefault = 'views/design_part/default.html?ver='+VERSION; |
| 11 | |||
| 12 | //Action T-Shirt choice color and Back or Front | ||
| 13 | var currentTShirtKey = 0; | 11 | var currentTShirtKey = 0; |
| 12 | var placeTShirt; | ||
| 13 | var tShirtColorFirstKey = 0; | ||
| 14 | $scope.tShirtChoiceBackFrontKey = 'front'; | ||
| 15 | $scope.tShirtColorKey = tShirtColorFirstKey; | ||
| 16 | |||
| 17 | /** | ||
| 18 | * Get param route | ||
| 19 | * @type {any} | ||
| 20 | * @private | ||
| 21 | */ | ||
| 14 | var _routeParams = $routeParams; | 22 | var _routeParams = $routeParams; |
| 15 | if(typeof _routeParams.tShirt != 'undefined') | 23 | if(typeof _routeParams.tShirt != 'undefined') |
| 16 | currentTShirtKey = _routeParams.tShirt - 1; | 24 | currentTShirtKey = _routeParams.tShirt - 1; |
| 25 | if(typeof _routeParams.place != 'undefined') | ||
| 26 | placeTShirt = _routeParams.place; | ||
| 17 | 27 | ||
| 28 | |||
| 29 | /** | ||
| 30 | * Get all info TShirt | ||
| 31 | * @param: id | ||
| 32 | * @return: object | ||
| 33 | */ | ||
| 18 | $scope.tShirtColor = $t_shirt.getTShirtColor(currentTShirtKey); | 34 | $scope.tShirtColor = $t_shirt.getTShirtColor(currentTShirtKey); |
| 19 | //Set color name default | ||
| 20 | var tShirtColorFirstKey = 0; | ||
| 21 | $scope.tShirtChoiceBackFrontKey = 'front'; | ||
| 22 | $scope.tShirtColorKey = tShirtColorFirstKey; | ||
| 23 | $rootScope.tShirtColorCode = $scope.tShirtColor[tShirtColorFirstKey].code; | 35 | $rootScope.tShirtColorCode = $scope.tShirtColor[tShirtColorFirstKey].code; |
| 24 | $scope.tShirtColorName = $scope.tShirtColor[tShirtColorFirstKey].name; | 36 | $scope.tShirtColorName = $scope.tShirtColor[tShirtColorFirstKey].name; |
| 25 | $scope.tShirtImgFront = $scope.tShirtColor[tShirtColorFirstKey].img.front; | 37 | $scope.tShirtImgFront = $scope.tShirtColor[tShirtColorFirstKey].img.front; |
| 26 | $scope.tShirtImgBack = $scope.tShirtColor[tShirtColorFirstKey].img.back; | 38 | $scope.tShirtImgBack = $scope.tShirtColor[tShirtColorFirstKey].img.back; |
| 27 | $scope.tShirtImg = $scope.tShirtImgFront; | 39 | $scope.tShirtImg = $scope.tShirtImgFront; |
| 28 | |||
| 29 | 40 | ||
| 30 | //review design set position | 41 | /** |
| 42 | * Set preview size and position | ||
| 43 | */ | ||
| 31 | function setSizePreViewDesign() { | 44 | function setSizePreViewDesign() { |
| 32 | var _widthPreviewDesign = $('#preview-design').width(); | 45 | var _widthPreviewDesign = $('#preview-design').width(); |
| 33 | var _widthTShirtImage = $('.tshirt-image').width(); | 46 | var _widthTShirtImage = $('.tshirt-image').width(); |
| 34 | var leftReviewDesign = _widthTShirtImage/2 - (_widthPreviewDesign/2); | 47 | var leftReviewDesign = _widthTShirtImage/2 - (_widthPreviewDesign/2); |
| 35 | $('#preview-design').css({left: leftReviewDesign}); | 48 | $('#preview-design').css({left: leftReviewDesign}); |
| 36 | } | 49 | } |
| 37 | setSizePreViewDesign(); | 50 | setSizePreViewDesign(); |
| 38 | //event resize window | ||
| 39 | $(window).resize(function () { | 51 | $(window).resize(function () { |
| 40 | setSizePreViewDesign(); | 52 | setSizePreViewDesign(); |
| 41 | }); | 53 | }); |
| 42 | 54 | /** | |
| 55 | * Choice color t-shirt | ||
| 56 | * @param key | ||
| 57 | */ | ||
| 43 | $scope.choiceTShirtColor = function(key) { | 58 | $scope.choiceTShirtColor = function(key) { |
| 44 | $scope.tShirtColorKey = key; | 59 | $scope.tShirtColorKey = key; |
| 45 | $rootScope.tShirtColorCode = $scope.tShirtColor[key].code; | 60 | var tShirtColor = $scope.tShirtColor[key]; |
| 46 | $scope.tShirtColorName = $scope.tShirtColor[key].name; | 61 | $rootScope.tShirtColorCode = tShirtColor.code; |
| 47 | $scope.tShirtImgFront = $scope.tShirtColor[key].img.front; | 62 | $scope.tShirtColorName = tShirtColor.name; |
| 48 | $scope.tShirtImgBack = $scope.tShirtColor[key].img.back; | 63 | $scope.tShirtImgFront = tShirtColor.img.front; |
| 64 | $scope.tShirtImgBack = tShirtColor.img.back; | ||
| 49 | if($scope.tShirtChoiceBackFrontKey == 'front') { | 65 | if($scope.tShirtChoiceBackFrontKey == 'front') { |
| 50 | $scope.tShirtImg = $scope.tShirtImgFront; | 66 | $scope.tShirtImg = $scope.tShirtImgFront; |
| 51 | } else { | 67 | } else { |
| 52 | $scope.tShirtImg = $scope.tShirtImgBack; | 68 | $scope.tShirtImg = $scope.tShirtImgBack; |
| 53 | } | 69 | } |
| 54 | }; | 70 | }; |
| 71 | /** | ||
| 72 | * Choice back or front t-shirt | ||
| 73 | * @param choice | ||
| 74 | */ | ||
| 55 | $scope.choiceTShirtBackFront = function(choice) { | 75 | $scope.choiceTShirtBackFront = function(choice) { |
| 56 | if(choice == 'front') { | 76 | if(choice == 'front') { |
| 57 | $scope.tShirtImg = $scope.tShirtImgFront; | 77 | $scope.tShirtImg = $scope.tShirtImgFront; |
| 58 | } else { | 78 | } else { |
| 59 | $scope.tShirtImg = $scope.tShirtImgBack; | 79 | $scope.tShirtImg = $scope.tShirtImgBack; |
| 60 | } | 80 | } |
| 61 | $scope.tShirtChoiceBackFrontKey = choice; | 81 | $scope.tShirtChoiceBackFrontKey = choice; |
| 62 | }; | 82 | }; |
| 63 | 83 | ||
| 64 | //safeApply | 84 | //safeApply |
| 65 | $rootScope.safeApply = function(fn) { | 85 | $rootScope.safeApply = function(fn) { |
| 66 | var phase = this.$root.$$phase; | 86 | var phase = this.$root.$$phase; |
| 67 | if(phase == '$apply' || phase == '$digest') { | 87 | if(phase == '$apply' || phase == '$digest') { |
| 68 | if(fn && (typeof(fn) === 'function')) { | 88 | if(fn && (typeof(fn) === 'function')) { |
| 69 | fn(); | 89 | fn(); |
| 70 | } | 90 | } |
| 71 | } else { | 91 | } else { |
| 72 | this.$apply(fn); | 92 | this.$apply(fn); |
| 73 | } | 93 | } |
| 74 | }; | 94 | }; |
| 75 | 95 | /** | |
| 96 | * Open modal design | ||
| 97 | */ | ||
| 76 | $scope.modalTShirtDesign = function() { | 98 | $scope.modalTShirtDesign = function() { |
| 77 | $('#tshirt-design').modal( | 99 | $('#tshirt-design').modal( |
| 78 | { | 100 | { |
| 79 | backdrop: 'static', | 101 | backdrop: 'static', |
| 80 | keyboard: false | 102 | keyboard: false |
| 81 | } | 103 | } |
| 82 | ); | 104 | ); |
| 83 | 105 | ||
| 84 | }; | 106 | }; |
| 107 | /** |
app/scripts/routes.js
| 1 | define([], function(){ | 1 | define([], function(){ |
| 2 | 'use strict'; | 2 | 'use strict'; |
| 3 | return { | 3 | return { |
| 4 | defaultRoutePaths: '/1', | 4 | defaultRoutePaths: '/1', |
| 5 | routes: { | 5 | routes: { |
| 6 | '/:tShirt': { | 6 | '/:tShirt/:place': { |
| 7 | templateUrl: 'views/main.html', | 7 | templateUrl: 'views/main.html', |
| 8 | dependencies: [ | 8 | dependencies: [ |
| 9 | 'scripts/controllers/main.js', | 9 | 'scripts/controllers/main.js', |
| 10 | 'scripts/controllers/tshirtdesign.js', | 10 | 'scripts/controllers/tshirtdesign.js', |
| 11 | 'scripts/services/illustration.js', | 11 | 'scripts/services/illustration.js', |
| 12 | 'scripts/services/tshirt.js' | 12 | 'scripts/services/tshirt.js' |
| 13 | ] | 13 | ] |
| 14 | }, | 14 | }, |
| 15 | } | 15 | } |
| 16 | }; | 16 | }; |
| 17 | }); | 17 | }); |
app/scripts/services/tshirt.js
| 1 | define(['app'], function (app) { | 1 | define(['app'], function (app) { |
| 2 | 'use strict'; | 2 | 'use strict'; |
| 3 | 3 | ||
| 4 | app.factory('$t_shirt', function ($http, $rootScope) { | 4 | app.factory('$t_shirt', function ($http, $rootScope) { |
| 5 | var DATA = [ | 5 | var DATA = [ |
| 6 | { | 6 | { |
| 7 | info: { | 7 | info: { |
| 8 | name: 'T-Shirt 1', | 8 | name: 'T-Shirt 1', |
| 9 | description: '', | 9 | description: '', |
| 10 | price: '', | 10 | price: '', |
| 11 | gender: '', | 11 | gender: '', |
| 12 | image: '' | 12 | image: '' |
| 13 | }, | 13 | }, |
| 14 | place_design: {}, | 14 | place_design: { |
| 15 | 'place_1' : { | ||
| 16 | 'face' : 'front', | ||
| 17 | 'place' : 't_shirt_p_1' | ||
| 18 | }, | ||
| 19 | 'place_2' : { | ||
| 20 | 'face' : 'front', | ||
| 21 | 'place' : 't_shirt_p_2' | ||
| 22 | }, | ||
| 23 | 'place_3' : { | ||
| 24 | 'face' : 'front', | ||
| 25 | 'place' : 't_shirt_p_3' | ||
| 26 | } | ||
| 27 | }, | ||
| 15 | color: [ | 28 | color: [ |
| 16 | { | 29 | { |
| 17 | name: 'color: 2E GRAY', | 30 | name: 'color: 2E GRAY', |
| 18 | code: '#d0d0cd', | 31 | code: '#d0d0cd', |
| 19 | img: { | 32 | img: { |
| 20 | front: 'images/t-shirt/1/gray/front.png', | 33 | front: 'images/t-shirt/1/gray/front.png', |
| 21 | back: 'images/t-shirt/1/gray/back.png' | 34 | back: 'images/t-shirt/1/gray/back.png' |
| 22 | }, | 35 | }, |
| 23 | }, | 36 | }, |
| 24 | { | 37 | { |
| 25 | name: 'color: 00 BLACK', | 38 | name: 'color: 00 BLACK', |
| 26 | code: '#23282e', | 39 | code: '#23282e', |
| 27 | img: { | 40 | img: { |
| 28 | front: 'images/t-shirt/1/black/front.png', | 41 | front: 'images/t-shirt/1/black/front.png', |
| 29 | back: 'images/t-shirt/1/black/back.png' | 42 | back: 'images/t-shirt/1/black/back.png' |
| 30 | }, | 43 | }, |
| 31 | }, | 44 | }, |
| 32 | { | 45 | { |
| 33 | name: 'color: 3B ORANGE', | 46 | name: 'color: 3B ORANGE', |
| 34 | code: '#e2583b', | 47 | code: '#e2583b', |
| 35 | img: { | 48 | img: { |
| 36 | front: 'images/t-shirt/1/orange/front.png', | 49 | front: 'images/t-shirt/1/orange/front.png', |
| 37 | back: 'images/t-shirt/1/orange/back.png' | 50 | back: 'images/t-shirt/1/orange/back.png' |
| 38 | }, | 51 | }, |
| 39 | } | 52 | } |
| 40 | ] | 53 | ] |
| 41 | }, | 54 | }, |
| 42 | { | 55 | { |
| 43 | info: { | 56 | info: { |
| 44 | name: 'T-Shirt 2', | 57 | name: 'T-Shirt 2', |
| 45 | description: '', | 58 | description: '', |
| 46 | price: '', | 59 | price: '', |
| 47 | gender: '', | 60 | gender: '', |
| 48 | image: '' | 61 | image: '' |
| 49 | }, | 62 | }, |
| 50 | place_design: {}, | 63 | place_design: {}, |
| 51 | color: [ | 64 | color: [ |
| 52 | { | 65 | { |
| 53 | name: 'color:03 GRAY', | 66 | name: 'color:03 GRAY', |
| 54 | code: '#b2b4b2', | 67 | code: '#b2b4b2', |
| 55 | img: { | 68 | img: { |
| 56 | front: 'images/t-shirt/2/gray/front.png', | 69 | front: 'images/t-shirt/2/gray/front.png', |
| 57 | back: 'images/t-shirt/2/gray/back.png' | 70 | back: 'images/t-shirt/2/gray/back.png' |
| 58 | }, | 71 | }, |
| 59 | }, | 72 | }, |
| 60 | { | 73 | { |
| 61 | name: 'color:08 DARK GRAY', | 74 | name: 'color:08 DARK GRAY', |
| 62 | code: '#37383d', | 75 | code: '#37383d', |
| 63 | img: { | 76 | img: { |
| 64 | front: 'images/t-shirt/2/darkgray/front.png', | 77 | front: 'images/t-shirt/2/darkgray/front.png', |
| 65 | back: 'images/t-shirt/2/darkgray/back.png' | 78 | back: 'images/t-shirt/2/darkgray/back.png' |
| 66 | }, | 79 | }, |
| 67 | }, | 80 | }, |
| 68 | { | 81 | { |
| 69 | name: 'color:09 BLACK', | 82 | name: 'color:09 BLACK', |
| 70 | code: '#292929', | 83 | code: '#292929', |
| 71 | img: { | 84 | img: { |
| 72 | front: 'images/t-shirt/2/black/front.png', | 85 | front: 'images/t-shirt/2/black/front.png', |
| 73 | back: 'images/t-shirt/2/black/back.png' | 86 | back: 'images/t-shirt/2/black/back.png' |
| 74 | }, | 87 | }, |
| 75 | }, | 88 | }, |
| 76 | { | 89 | { |
| 77 | name: 'color:12 PINK', | 90 | name: 'color:12 PINK', |
| 78 | code: '#ca6965', | 91 | code: '#ca6965', |
| 79 | img: { | 92 | img: { |
| 80 | front: 'images/t-shirt/2/pink/front.png', | 93 | front: 'images/t-shirt/2/pink/front.png', |
| 81 | back: 'images/t-shirt/2/pink/back.png' | 94 | back: 'images/t-shirt/2/pink/back.png' |
| 82 | }, | 95 | }, |
| 83 | }, | 96 | }, |
| 84 | { | 97 | { |
| 85 | name: 'color:18 WINE', | 98 | name: 'color:18 WINE', |
| 86 | code: '#661e2e', | 99 | code: '#661e2e', |
| 87 | img: { | 100 | img: { |
| 88 | front: 'images/t-shirt/2/wine/front.png', | 101 | front: 'images/t-shirt/2/wine/front.png', |
| 89 | back: 'images/t-shirt/2/wine/back.png' | 102 | back: 'images/t-shirt/2/wine/back.png' |
| 90 | }, | 103 | }, |
| 91 | }, | 104 | }, |
| 92 | { | 105 | { |
| 93 | name: 'color:26 ORANGE', | 106 | name: 'color:26 ORANGE', |
| 94 | code: '#bf6037', | 107 | code: '#bf6037', |
| 95 | img: { | 108 | img: { |
| 96 | front: 'images/t-shirt/2/orange/front.png', | 109 | front: 'images/t-shirt/2/orange/front.png', |
| 97 | back: 'images/t-shirt/2/orange/back.png' | 110 | back: 'images/t-shirt/2/orange/back.png' |
| 98 | }, | 111 | }, |
| 99 | }, | 112 | }, |
| 100 | { | 113 | { |
| 101 | name: 'color:57 OLIVE', | 114 | name: 'color:57 OLIVE', |
| 102 | code: '#4c442e', | 115 | code: '#4c442e', |
| 103 | img: { | 116 | img: { |
| 104 | front: 'images/t-shirt/2/olive/front.png', | 117 | front: 'images/t-shirt/2/olive/front.png', |
| 105 | back: 'images/t-shirt/2/olive/back.png' | 118 | back: 'images/t-shirt/2/olive/back.png' |
| 106 | }, | 119 | }, |
| 107 | }, | 120 | }, |
| 108 | { | 121 | { |
| 109 | name: 'color:58 DARK GREEN', | 122 | name: 'color:58 DARK GREEN', |
| 110 | code: '#204344', | 123 | code: '#204344', |
| 111 | img: { | 124 | img: { |
| 112 | front: 'images/t-shirt/2/darkgreen/front.png', | 125 | front: 'images/t-shirt/2/darkgreen/front.png', |
| 113 | back: 'images/t-shirt/2/darkgreen/back.png' | 126 | back: 'images/t-shirt/2/darkgreen/back.png' |
| 114 | }, | 127 | }, |
| 115 | }, | 128 | }, |
| 116 | { | 129 | { |
| 117 | name: 'color:69 NAVY', | 130 | name: 'color:69 NAVY', |
| 118 | code: '#2a2d3c', | 131 | code: '#2a2d3c', |
| 119 | img: { | 132 | img: { |
| 120 | front: 'images/t-shirt/2/navi/front.png', | 133 | front: 'images/t-shirt/2/navi/front.png', |
| 121 | back: 'images/t-shirt/2/navi/back.png' | 134 | back: 'images/t-shirt/2/navi/back.png' |
| 122 | }, | 135 | }, |
| 123 | } | 136 | } |
| 124 | ] | 137 | ] |
| 125 | } | 138 | } |
| 126 | ]; | 139 | ]; |
| 127 | 140 | ||
| 128 | return { | 141 | return { |
| 129 | getTShirtColor : function(key) { | 142 | getTShirtColor : function(key) { |
| 130 | if (typeof DATA[key] == 'undefined'){ | 143 | if (typeof DATA[key] == 'undefined'){ |
| 131 | return []; | 144 | return []; |
| 132 | } | 145 | } |
| 133 | return DATA[key]['color']; | 146 | return DATA[key]['color']; |
| 147 | }, | ||
| 148 | getTShirtPlace : function(key, place) { | ||
| 149 | if(typeof DATA[key].place_design.place == 'undefined' || typeof DATA[key].place_design.place == 'null') | ||
| 150 | return []; | ||
| 151 | |||
| 152 | return DATA[key].place_design.place; | ||
| 134 | }, | 153 | }, |
| 135 | 154 | ||
| 136 | getAll: function(){ | 155 | getAll: function(){ |
| 137 | return DATA; | 156 | return DATA; |
| 138 | }, | 157 | }, |
| 139 | getList: function(category){ | 158 | getList: function(category){ |
| 140 | if (typeof DATA[category] == 'undefined'){ | 159 | if (typeof DATA[category] == 'undefined'){ |
| 141 | return []; | 160 | return []; |
| 142 | } | 161 | } |
| 143 | return DATA[category]; | 162 | return DATA[category]; |
| 144 | } | 163 | } |
| 145 | }; | 164 | }; |
| 146 | }); | 165 | }); |
| 147 | }); | 166 | }); |
| 148 | 167 |