Commit faf1542f8ef7d73272242c9a04f811327f1f62d9
1 parent
24a56c629f
Exists in
master
and in
1 other branch
fix lazy border width
Showing 7 changed files with 190 additions and 5 deletions Side-by-side Diff
app/index.html
app/scripts/controllers/tshirtdesign.js
| 1 | 1 | define(['app'], function (app) { |
| 2 | - app.controller('TshirtdesignCtrl', function ($scope, $rootScope, $window, $timeout, $illustration) { | |
| 2 | + app.controller('TshirtdesignCtrl', function ($scope, $rootScope, $window, $timeout, $illustration, $favorite) { | |
| 3 | + $scope.savedFrameView = 'views/design_part/tshirt-saved.html?ver='+VERSION; | |
| 3 | 4 | var canvas = new fabric.Canvas('main-design-container'); |
| 4 | 5 | //Set width and height canvas |
| 5 | 6 | function setSizeCanvas() { |
| ... | ... | @@ -221,7 +222,7 @@ |
| 221 | 222 | console.log(object.oCoords,object.originalState); |
| 222 | 223 | object.setCoords(); |
| 223 | 224 | var Coords = object.oCoords; |
| 224 | - var diffX = 55, diffY=50; | |
| 225 | + var diffX = 40, diffY=40; | |
| 225 | 226 | var xAngle = Math.cos(object.getAngle() * (Math.PI / 180))/2; |
| 226 | 227 | var yAngle = Math.sin(object.getAngle() * (Math.PI / 180))/2; |
| 227 | 228 | $('#object-border-left').css({'height':Math.ceil(object.originalState.height*object.scaleY), top: Coords.tl.y+diffY, left: Coords.tl.x+diffX}); |
| ... | ... | @@ -612,6 +613,45 @@ |
| 612 | 613 | $rootScope.outputImage = canvas.toDataURL('png'); |
| 613 | 614 | // console.log(); |
| 614 | 615 | $('#tshirt-design').modal('hide'); |
| 616 | + } | |
| 617 | + | |
| 618 | + $scope.showRecommend = function(){ | |
| 619 | + $('#tshirt-design-saved').modal({ | |
| 620 | + backdrop: 'static', | |
| 621 | + keyboard: false | |
| 622 | + }); | |
| 623 | + } | |
| 624 | + | |
| 625 | + $scope.closeSavedModal = function(){ | |
| 626 | + $('#tshirt-design-saved').modal('hide'); | |
| 627 | + } | |
| 628 | + | |
| 629 | + $scope.openSavedTab = function(tab){ | |
| 630 | + $scope.recommendList = $favorite.getAll(); | |
| 631 | + $scope.favoriteList = $favorite.getAll(); | |
| 632 | + $('#tshirt-design-saved .subframe-design .nav-tabs li').removeClass('active'); | |
| 633 | + $('#tab-saved-'+tab).addClass('active'); | |
| 634 | + $('#tshirt-design-saved .subframe-design .tab-content .tab-pane').removeClass('active'); | |
| 635 | + $('#content-saved-'+tab).addClass('active'); | |
| 636 | + | |
| 637 | + $timeout(function(){ | |
| 638 | + $('.saved-item').tooltip({ | |
| 639 | + animated: 'fade', | |
| 640 | + placement: 'bottom', | |
| 641 | + html: true | |
| 642 | + }); | |
| 643 | + },1000); | |
| 644 | + } | |
| 645 | + | |
| 646 | + $scope.saveFavorite = function(){ | |
| 647 | + var dataDump = { | |
| 648 | + thumb: canvas.toDataURL('png'), | |
| 649 | + data: canvas.toDatalessJSON() | |
| 650 | + } | |
| 651 | + $favorite.addToFavorite({ | |
| 652 | + data: dataDump | |
| 653 | + }) | |
| 654 | + console.log(dataDump); | |
| 615 | 655 | } |
| 616 | 656 | }); |
| 617 | 657 | }); |
app/scripts/routes.js
app/scripts/services/favorite.js
| 1 | +define(['app'], function (app) { | |
| 2 | + 'use strict'; | |
| 3 | + | |
| 4 | + app.factory('$favorite', function ($http, $rootScope) { | |
| 5 | + var DATA = []; | |
| 6 | + | |
| 7 | + return { | |
| 8 | + loadFromRemote: function (params,successHandle,errorHandle) { | |
| 9 | + /*** load from localstorage for test */ | |
| 10 | + if ($window.localStorage.listFavorite){ | |
| 11 | + DATA = JSON.parse($window.localStorage.listFavorite); | |
| 12 | + }else{ | |
| 13 | + DATA = []; | |
| 14 | + } | |
| 15 | + return; | |
| 16 | + /*** end test */ | |
| 17 | + | |
| 18 | + // return format: { status:0|1 , data:{} } | |
| 19 | + var httpObj = $http({ | |
| 20 | + url: $rootScope.API_URL+'/apiv1/favorite', | |
| 21 | + method: 'GET', | |
| 22 | + params: params || [] | |
| 23 | + }); | |
| 24 | + if (typeof successHandle == 'undefined'){ | |
| 25 | + successHandle = function(response){ | |
| 26 | + if (response.status==1){ | |
| 27 | + DATA = response.data; | |
| 28 | + } | |
| 29 | + } | |
| 30 | + } | |
| 31 | + httpObj.success(successHandle); | |
| 32 | + | |
| 33 | + if (typeof errorHandle != 'undefined'){ | |
| 34 | + httpObj.error(errorHandle); | |
| 35 | + } | |
| 36 | + }, | |
| 37 | + addToFavorite: function(params,successHandle,errorHandle) { | |
| 38 | + /*** load from localstorage for test */ | |
| 39 | + DATA.push(params.data); | |
| 40 | + $window.localStorage.listFavorite = JSON.stringify(DATA); | |
| 41 | + return; | |
| 42 | + /*** end test */ | |
| 43 | + | |
| 44 | + var httpObj = $http({ | |
| 45 | + url: $rootScope.API_URL+'/apiv1/favorite', | |
| 46 | + method: 'POST', | |
| 47 | + params: params || [] | |
| 48 | + }); | |
| 49 | + if (typeof successHandle == 'undefined'){ | |
| 50 | + successHandle = function(response){ | |
| 51 | + if (response.status==1){ | |
| 52 | + DATA = response.data; | |
| 53 | + } | |
| 54 | + } | |
| 55 | + } | |
| 56 | + httpObj.success(successHandle); | |
| 57 | + | |
| 58 | + if (typeof errorHandle != 'undefined'){ | |
| 59 | + httpObj.error(errorHandle); | |
| 60 | + } | |
| 61 | + }, | |
| 62 | + getAll: function(){ | |
| 63 | + return DATA; | |
| 64 | + } | |
| 65 | + }; | |
| 66 | + }); | |
| 67 | +}); |
app/styles/main.css
| ... | ... | @@ -815,4 +815,49 @@ |
| 815 | 815 | padding: 0 0; |
| 816 | 816 | } |
| 817 | 817 | } |
| 818 | + | |
| 819 | + | |
| 820 | + | |
| 821 | +#tshirt-design-saved .subframe-design { | |
| 822 | + width: 80%; | |
| 823 | + margin: auto; | |
| 824 | + margin-top: 150px; | |
| 825 | + border: 10px solid rgb(0, 0, 0); | |
| 826 | + border: 20px solid rgba(0, 0, 0, .5); | |
| 827 | + -webkit-background-clip: padding-box; /* for Safari */ | |
| 828 | + background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */ | |
| 829 | +} | |
| 830 | + | |
| 831 | +#tshirt-design-saved .modal-content button.close { | |
| 832 | + margin-right: 100px; | |
| 833 | + font-size: 41px; | |
| 834 | + margin-top: -10px; | |
| 835 | +} | |
| 836 | + | |
| 837 | +#tshirt-design-saved .subframe-design .nav-tabs { | |
| 838 | + background: rgba(0, 0, 0, .5); | |
| 839 | + border-bottom: 1px solid #F5F5F5; | |
| 840 | +} | |
| 841 | + | |
| 842 | +#tshirt-design-saved .subframe-design .nav-tabs li a { | |
| 843 | + text-decoration: none; | |
| 844 | + background-color: #CCC; | |
| 845 | + cursor: pointer; | |
| 846 | + margin-right: 10px; | |
| 847 | + padding: 2px 30px; | |
| 848 | + color: #000; | |
| 849 | + font-weight: 600; | |
| 850 | + border-bottom: 1px solid #F5F5F5 | |
| 851 | +} | |
| 852 | + | |
| 853 | +#tshirt-design-saved .subframe-design .nav-tabs li.active a { | |
| 854 | + background: #F5F5F5; | |
| 855 | + color: #fe070f; | |
| 856 | +} | |
| 857 | + | |
| 858 | +#tshirt-design-saved .subframe-design .tab-content { | |
| 859 | + background: #F5F5F5; | |
| 860 | + width: 100%; | |
| 861 | + min-height: 400px; | |
| 862 | +} |
app/views/design_part/tshirt-saved.html
| 1 | +<!-- Modal --> | |
| 2 | +<div class="modal" id="tshirt-design-saved" tabindex="2" role="dialog"> | |
| 3 | + <div class="modal-dialog" role="document"> | |
| 4 | + <div class="modal-content"> | |
| 5 | + <button type="button" class="close" ng-click="closeSavedModal()" aria-label="Close"><span aria-hidden="true">×</span></button> | |
| 6 | + <div class="subframe-design"> | |
| 7 | + <ul class="nav nav-tabs" role="tablist"> | |
| 8 | + <li role="presentation" id="tab-saved-favorite" class="active"><a ng-click="openSavedTab('favorite')" role="tab" data-toggle="tab">マイアルバム</a></li> | |
| 9 | + <li role="presentation" id="tab-saved-recommend"><a ng-click="openSavedTab('recommend')" role="tab" data-toggle="tab">おすすめ</a></li> | |
| 10 | + </ul> | |
| 11 | + <div class="tab-content"> | |
| 12 | + <div role="tabpanel" class="tab-pane active" id="content-saved-favorite"> | |
| 13 | + <div class="saved-list" ng-init="currentFavoritePage=1;perFavoritePage=16"> | |
| 14 | + <div class="saved-item" ng-repeat="item in favoriteList | limitTo:perFavoritePage:((currentFavoritePage-1)*perFavoritePage)" ng-click="restoreSaved(item)" title="<img src='{{item.thumb}}' style='width:200px;background:#e2e2e2;margin:0;padding:0;margin-left:-8px;border:0'/>" data-toggle="tooltip"> | |
| 15 | + <img ng-src="{{item.path}}"/> | |
| 16 | + </div> | |
| 17 | + <div class="clearfix"></div> | |
| 18 | + <div class="footer-bar"> | |
| 19 | + <div class="pull-left footer-pagination" ng-click="currentIllustrationPage=currentIllustrationPage-1" ng-show="currentIllustrationPage > 1">< Back</div> | |
| 20 | + {{currentIllustrationPage}}/{{currentIllustrationCate.list.length/perIllustrationPage | number:0}} | |
| 21 | + <div class="pull-right footer-pagination" ng-click="currentIllustrationPage=currentIllustrationPage+1" ng-show="currentIllustrationPage < (currentIllustrationCate.list.length/perIllustrationPage|number:0)">Next ></div> | |
| 22 | + </div> | |
| 23 | + </div> | |
| 24 | + </div> | |
| 25 | + <div role="tabpanel" class="tab-pane" id="content-saved-recommend">...</div> | |
| 26 | + </div> | |
| 27 | + </div> | |
| 28 | + </div> | |
| 29 | + </div> | |
| 30 | +</div> |
app/views/tshirt-design.html
| ... | ... | @@ -26,10 +26,10 @@ |
| 26 | 26 | </div> |
| 27 | 27 | |
| 28 | 28 | <div class="action pull-right"> |
| 29 | - <button class="white"> | |
| 29 | + <button class="white" ng-click="showRecommend()"> | |
| 30 | 30 | アルバムを開く |
| 31 | 31 | </button> |
| 32 | - <button class="white"> | |
| 32 | + <button class="white" ng-click="saveFavorite()"> | |
| 33 | 33 | アルバムに入れる |
| 34 | 34 | </button> |
| 35 | 35 | </div> |
| ... | ... | @@ -74,5 +74,7 @@ |
| 74 | 74 | </div> |
| 75 | 75 | </div> |
| 76 | 76 | </div> |
| 77 | + | |
| 78 | + <div ng-include="savedFrameView"></div> | |
| 77 | 79 | </div> |