Commit 682a3b12dbaf4ba5078d2f6466456061b11177ab
1 parent
0dc7327604
Exists in
master
and in
1 other branch
fix illustration style
Showing 17 changed files with 526 additions and 24 deletions Side-by-side Diff
- app/index.html
- app/scripts/controllers/main.js
- app/scripts/controllers/tshirtdesign.js
- app/scripts/services/illustration.js
- app/styles/main.css
- app/views/design_part/illustration.html
- dist/index.html
- dist/scripts/controllers/main.js
- dist/scripts/controllers/tshirtdesign.js
- dist/scripts/services/illustration.js
- dist/styles/36c320d8.main.css
- dist/styles/ba55f2e6.main.css
- dist/views/design_part/illustration.html
- dist/views/design_part/image.html
- dist/views/design_part/text.html
- dist/views/main.html
- dist/views/tshirt-design.html
app/index.html
app/scripts/controllers/main.js
| 1 | 1 | define(['app'], function (app) { |
| 2 | 2 | 'use strict'; |
| 3 | 3 | app.controller('MainCtrl', function ($rootScope, $scope, $illustration, $t_shirt) { |
| 4 | + $rootScope.API_URL = 'http://domain.com'; | |
| 4 | 5 | $scope.designFrameView = 'views/tshirt-design.html?ver='+VERSION; |
| 5 | 6 | $scope.designPartIllustration = 'views/design_part/illustration.html?ver='+VERSION; |
| 6 | 7 | $scope.designPartImage = 'views/design_part/image.html?ver='+VERSION; |
app/scripts/controllers/tshirtdesign.js
| ... | ... | @@ -177,18 +177,42 @@ |
| 177 | 177 | }; |
| 178 | 178 | |
| 179 | 179 | // color pattern |
| 180 | - $scope.changeColorPattern = function(color){ | |
| 181 | - if (canvas.getActiveObject()){ | |
| 182 | - canvas.getActiveObject().set("fill", color); | |
| 183 | - canvas.renderAll(); | |
| 184 | - } | |
| 185 | - }; | |
| 186 | 180 | $scope.listColorPatterns = [ |
| 187 | 181 | '#000000','#ffff00','#ff6600','#ff0000','#ff6262','#ffa19c','#ff9933','#c45d01','#5d2b03','#ffffcc', |
| 188 | 182 | '#ffff99','#ffd500','#c0db50','#21a52a','#00663f','#abfcab','#36ffaa','#89eaea','#00938c','#005450', |
| 189 | 183 | '#0badff','#006cff','#839aff','#0410a0','#ffb2ff','#f93fff','#6600ca','#ff6699','#999999','#666666', |
| 190 | 184 | '#333333' |
| 191 | 185 | ]; |
| 186 | + | |
| 187 | + $scope.changeColorPattern = function(color){ | |
| 188 | + if (canvas.getActiveObject()){ | |
| 189 | + canvas.getActiveObject().set("fill", color); | |
| 190 | + canvas.renderAll(); | |
| 191 | + } | |
| 192 | + }; | |
| 193 | + | |
| 194 | + // layer process | |
| 195 | + $scope.layerProcess = function(mode){ | |
| 196 | + var activeObject = canvas.getActiveObject() | |
| 197 | + if (activeObject){ | |
| 198 | + switch (mode) { | |
| 199 | + case 1: | |
| 200 | + activeObject.bringForward(); | |
| 201 | + break; | |
| 202 | + case 2: | |
| 203 | + activeObject.sendBackwards(); | |
| 204 | + break; | |
| 205 | + case 3: | |
| 206 | + activeObject.bringToFront(); | |
| 207 | + break; | |
| 208 | + case 4: | |
| 209 | + activeObject.sendToBack(); | |
| 210 | + break; | |
| 211 | + } | |
| 212 | + canvas.renderAll(); | |
| 213 | + } | |
| 214 | + } | |
| 215 | + | |
| 192 | 216 | $scope.listFontFamily = [ |
| 193 | 217 | { |
| 194 | 218 | name : 'GN-Aki-iro_Sesami_Cookies', |
app/scripts/services/illustration.js
| ... | ... | @@ -39,6 +39,70 @@ |
| 39 | 39 | { |
| 40 | 40 | name: 'item 4', |
| 41 | 41 | path: 'images/illustrations/item2.svg' |
| 42 | + }, | |
| 43 | + { | |
| 44 | + name: 'item 1', | |
| 45 | + path: 'images/illustrations/item1.svg' | |
| 46 | + }, | |
| 47 | + { | |
| 48 | + name: 'item 2', | |
| 49 | + path: 'images/illustrations/item2.svg' | |
| 50 | + }, | |
| 51 | + { | |
| 52 | + name: 'item 3', | |
| 53 | + path: 'images/illustrations/item3.svg' | |
| 54 | + }, | |
| 55 | + { | |
| 56 | + name: 'item 4', | |
| 57 | + path: 'images/illustrations/item4.svg' | |
| 58 | + }, | |
| 59 | + { | |
| 60 | + name: 'item 1', | |
| 61 | + path: 'images/illustrations/item3.svg' | |
| 62 | + }, | |
| 63 | + { | |
| 64 | + name: 'item 2', | |
| 65 | + path: 'images/illustrations/item1.svg' | |
| 66 | + }, | |
| 67 | + { | |
| 68 | + name: 'item 3', | |
| 69 | + path: 'images/illustrations/item4.svg' | |
| 70 | + }, | |
| 71 | + { | |
| 72 | + name: 'item 4', | |
| 73 | + path: 'images/illustrations/item2.svg' | |
| 74 | + }, | |
| 75 | + { | |
| 76 | + name: 'item 1', | |
| 77 | + path: 'images/illustrations/item1.svg' | |
| 78 | + }, | |
| 79 | + { | |
| 80 | + name: 'item 2', | |
| 81 | + path: 'images/illustrations/item2.svg' | |
| 82 | + }, | |
| 83 | + { | |
| 84 | + name: 'item 3', | |
| 85 | + path: 'images/illustrations/item3.svg' | |
| 86 | + }, | |
| 87 | + { | |
| 88 | + name: 'item 4', | |
| 89 | + path: 'images/illustrations/item4.svg' | |
| 90 | + }, | |
| 91 | + { | |
| 92 | + name: 'item 1', | |
| 93 | + path: 'images/illustrations/item3.svg' | |
| 94 | + }, | |
| 95 | + { | |
| 96 | + name: 'item 2', | |
| 97 | + path: 'images/illustrations/item1.svg' | |
| 98 | + }, | |
| 99 | + { | |
| 100 | + name: 'item 3', | |
| 101 | + path: 'images/illustrations/item4.svg' | |
| 102 | + }, | |
| 103 | + { | |
| 104 | + name: 'item 4', | |
| 105 | + path: 'images/illustrations/item2.svg' | |
| 42 | 106 | } |
| 43 | 107 | ] |
| 44 | 108 | }, |
| ... | ... | @@ -85,7 +149,7 @@ |
| 85 | 149 | loadFromRemote: function (params,successHandle,errorHandle) { |
| 86 | 150 | // return format: { status:0|1 , data:{} } |
| 87 | 151 | var httpObj = $http({ |
| 88 | - url: $rootScope+'/apiv1/illustration', | |
| 152 | + url: $rootScope.API_URL+'/apiv1/illustration', | |
| 89 | 153 | method: 'GET', |
| 90 | 154 | params: params || [] |
| 91 | 155 | }); |
app/styles/main.css
| ... | ... | @@ -402,7 +402,7 @@ |
| 402 | 402 | .aside .box-design-option li{ |
| 403 | 403 | border: 1px solid #cdcdcd; |
| 404 | 404 | position: relative; |
| 405 | - cursor: pointer; | |
| 405 | + /*cursor: pointer;*/ | |
| 406 | 406 | } |
| 407 | 407 | .aside .box-design-option li .hover{ |
| 408 | 408 | background-color: #fddad4; |
| ... | ... | @@ -474,6 +474,24 @@ |
| 474 | 474 | cursor: pointer; |
| 475 | 475 | } |
| 476 | 476 | |
| 477 | +.aside #choice-illustration li .content .illustration-list .footer-bar { | |
| 478 | + text-align: center; | |
| 479 | + margin-top: 5px; | |
| 480 | +} | |
| 481 | +.aside #choice-illustration li .content .illustration-list .footer-bar .footer-pagination { | |
| 482 | + margin-right: 5px; | |
| 483 | + cursor: pointer; | |
| 484 | + font-size: 9px; | |
| 485 | + color: #FFF; | |
| 486 | + background: #666666; | |
| 487 | + text-transform: uppercase; | |
| 488 | + padding: 2px 5px; | |
| 489 | +} | |
| 490 | + | |
| 491 | +.aside #choice-illustration li .content .illustration-list .footer-bar .footer-pagination:hover { | |
| 492 | + background: #999999; | |
| 493 | +} | |
| 494 | + | |
| 477 | 495 | .aside #choice-illustration li .content .color-patterns { |
| 478 | 496 | width: 100%; |
| 479 | 497 | border: #bbb solid 1px; |
| ... | ... | @@ -495,6 +513,18 @@ |
| 495 | 513 | outline: 1px solid #ed1d24; |
| 496 | 514 | } |
| 497 | 515 | |
| 516 | +.aside #choice-illustration li .content .layer-item { | |
| 517 | + text-align: center; | |
| 518 | + border: 1px #ddd solid; | |
| 519 | + background: #FFF; | |
| 520 | + padding: 5px; | |
| 521 | + font-size: 12px; | |
| 522 | + cursor: pointer; | |
| 523 | +} | |
| 524 | + | |
| 525 | +.aside #choice-illustration li .content .layer-item:hover { | |
| 526 | + background: #ffcccc; | |
| 527 | +} | |
| 498 | 528 | |
| 499 | 529 | /*Design content*/ |
| 500 | 530 | .tshirt-design-container{ |
app/views/design_part/illustration.html
| ... | ... | @@ -4,14 +4,19 @@ |
| 4 | 4 | イラスト・イメージ選択 |
| 5 | 5 | </div> |
| 6 | 6 | <div class="content clearfix"> |
| 7 | - <select id="illustration-select-category" ui-select2="illustrationSelectConfig" ng-model="currentIllustration" ng-change="changeIllustrationCategory(currentIllustration)" data-placeholder="Choose category" style="width: 100%"> | |
| 7 | + <select id="illustration-select-category" ui-select2="illustrationSelectConfig" ng-model="currentIllustration" ng-change="changeIllustrationCategory(currentIllustration);currentIllustrationPage=1;" data-placeholder="Choose category" style="width: 100%"> | |
| 8 | 8 | <option ng-repeat="(key,cate) in IllustrationList" value="{{key}}">{{cate.name}}</option> |
| 9 | 9 | </select> |
| 10 | - <div class="illustration-list"> | |
| 11 | - <div class="illstration-item" ng-repeat="item in currentIllustrationCate.list" ng-click="insertSvg(item)"> | |
| 10 | + <div class="illustration-list" ng-init="currentIllustrationPage=1;perIllustrationPage=16"> | |
| 11 | + <div class="illstration-item" ng-repeat="item in currentIllustrationCate.list | limitTo:perIllustrationPage:((currentIllustrationPage-1)*perIllustrationPage)" ng-click="insertSvg(item)"> | |
| 12 | 12 | <img ng-src="{{item.path}}"/> |
| 13 | 13 | </div> |
| 14 | 14 | <div class="clearfix"></div> |
| 15 | + <div class="footer-bar"> | |
| 16 | + <div class="pull-left footer-pagination" ng-click="currentIllustrationPage=currentIllustrationPage-1" ng-show="currentIllustrationPage > 1">< Back</div> | |
| 17 | + {{currentIllustrationPage}}/{{currentIllustrationCate.list.length/perIllustrationPage | number:0}} | |
| 18 | + <div class="pull-right footer-pagination" ng-click="currentIllustrationPage=currentIllustrationPage+1" ng-show="currentIllustrationPage < (currentIllustrationCate.list.length/perIllustrationPage|number:0)">Next ></div> | |
| 19 | + </div> | |
| 15 | 20 | </div> |
| 16 | 21 | </div> |
| 17 | 22 | </li> |
| ... | ... | @@ -35,7 +40,22 @@ |
| 35 | 40 | 重ね順変更 |
| 36 | 41 | </div> |
| 37 | 42 | <div class="content clearfix"> |
| 38 | - | |
| 43 | + <div class="col-xs-3 layer-item" ng-click="layerProcess(1)"> | |
| 44 | + <img src="images/layer-icon-1.png"/> | |
| 45 | + <div>前面へ</div> | |
| 46 | + </div> | |
| 47 | + <div class="col-xs-3 layer-item" ng-click="layerProcess(2)"> | |
| 48 | + <img src="images/layer-icon-2.png"/> | |
| 49 | + <div>背面へ</div> | |
| 50 | + </div> | |
| 51 | + <div class="col-xs-3 layer-item" ng-click="layerProcess(3)"> | |
| 52 | + <img src="images/layer-icon-3.png"/> | |
| 53 | + <div>最前面へ</div> | |
| 54 | + </div> | |
| 55 | + <div class="col-xs-3 layer-item" ng-click="layerProcess(4)"> | |
| 56 | + <img src="images/layer-icon-4.png"/> | |
| 57 | + <div>最前面へ</div> | |
| 58 | + </div> | |
| 39 | 59 | </div> |
| 40 | 60 | </li> |
dist/index.html
| 1 | -<!doctype html><!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" id="ng-app" ng-app=""> <![endif]--><!--[if IE 8]> <html class="no-js lt-ie9" id="ng-app" ng-app=""> <![endif]--><!--[if gt IE 8]><!--><html class="no-js" ng-app=""><!--<![endif]--><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title></title><meta name="description" content=""><meta name="viewport" content="width=device-width"><!-- Place favicon.ico and apple-touch-icon.png in the root directory --><link rel="stylesheet" href="styles/271347a9.vendor.css"><link rel="stylesheet" href="styles/ba55f2e6.main.css"><body ng-app="tshatsApp"><!--[if lt IE 7]> | |
| 1 | +<!doctype html><!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" id="ng-app" ng-app=""> <![endif]--><!--[if IE 8]> <html class="no-js lt-ie9" id="ng-app" ng-app=""> <![endif]--><!--[if gt IE 8]><!--><html class="no-js" ng-app=""><!--<![endif]--><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title></title><meta name="description" content=""><meta name="viewport" content="width=device-width"><!-- Place favicon.ico and apple-touch-icon.png in the root directory --><link rel="stylesheet" href="styles/271347a9.vendor.css"><link rel="stylesheet" href="styles/36c320d8.main.css"><body ng-app="tshatsApp"><!--[if lt IE 7]> | |
| 2 | 2 | <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> |
| 3 | 3 | <![endif]--><!-- Add your site or application content here --><div class="container" ng-view=""></div><!-- Google Analytics: change UA-XXXXX-X to be your site's ID --><script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ |
| 4 | 4 | (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), |
| ... | ... | @@ -9,7 +9,7 @@ |
| 9 | 9 | ga('send', 'pageview');</script><script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script><script type="text/javascript" src="bower_components/fabric.js/dist/fabric.min.js"></script><script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script><!--[if lt IE 9]> |
| 10 | 10 | <script src="bower_components/es5-shim/es5-shim.js"></script> |
| 11 | 11 | <script src="bower_components/json3/lib/json3.min.js"></script> |
| 12 | - <![endif]--><script type="text/javascript">var VERSION = '16-11_01'; | |
| 12 | + <![endif]--><script type="text/javascript">var VERSION = new Date().getTime(); | |
| 13 | 13 | var require = { |
| 14 | 14 | urlArgs: "ver="+VERSION, |
| 15 | 15 | };</script><script src="bower_components/requirejs/require.js" data-main="scripts/main"></script> |
dist/scripts/controllers/main.js
| 1 | -define(["app"],function(app){"use strict";app.controller("MainCtrl",function($rootScope,$scope,$illustration,$t_shirt){$scope.designFrameView="views/tshirt-design.html?ver="+VERSION,$scope.designPartIllustration="views/design_part/illustration.html?ver="+VERSION,$scope.designPartImage="views/design_part/image.html?ver="+VERSION,$scope.designPartText="views/design_part/text.html?ver="+VERSION,$scope.designPartDefault="views/design_part/default.html?ver="+VERSION,$scope.tShirtColor=$t_shirt.getTShirtColor(0);var tShirtColorFirstKey=0;$scope.tShirtChoiceBackFrontKey="front",$scope.tShirtColorKey=tShirtColorFirstKey,$rootScope.tShirtColorCode=$scope.tShirtColor[tShirtColorFirstKey].code,$scope.tShirtColorName=$scope.tShirtColor[tShirtColorFirstKey].name,$scope.tShirtImgFront=$scope.tShirtColor[tShirtColorFirstKey].img.front,$scope.tShirtImgBack=$scope.tShirtColor[tShirtColorFirstKey].img.back,$scope.tShirtImg=$scope.tShirtImgFront,$scope.choiceTShirtColor=function(key){$scope.tShirtColorKey=key,$rootScope.tShirtColorCode=$scope.tShirtColor[key].code,$scope.tShirtColorName=$scope.tShirtColor[key].name,$scope.tShirtImgFront=$scope.tShirtColor[key].img.front,$scope.tShirtImgBack=$scope.tShirtColor[key].img.back,"front"==$scope.tShirtChoiceBackFrontKey?$scope.tShirtImg=$scope.tShirtImgFront:$scope.tShirtImg=$scope.tShirtImgBack},$scope.choiceTShirtBackFront=function(choice){"front"==choice?$scope.tShirtImg=$scope.tShirtImgFront:$scope.tShirtImg=$scope.tShirtImgBack,$scope.tShirtChoiceBackFrontKey=choice},$scope.showDesignTab=function(tab){switch($rootScope.isShowLeftPanel=tab,tab){case"illustration":$scope.IllustrationList=$illustration.getAll(),$scope.illustrationSelectConfig={allowClear:!0};break;case"text":}},$rootScope.safeApply=function(fn){var phase=this.$root.$$phase;"$apply"==phase||"$digest"==phase?fn&&"function"==typeof fn&&fn():this.$apply(fn)},$scope.modalTShirtDesign=function(){$("#tshirt-design").modal({backdrop:"static",keyboard:!1}),$scope.showDesignTab("default")},$scope.modalClose=function(){$("#tshirt-design").modal("hide")}})}); | |
| 1 | +define(["app"],function(app){"use strict";app.controller("MainCtrl",function($rootScope,$scope,$illustration,$t_shirt){$rootScope.API_URL="http://domain.com",$scope.designFrameView="views/tshirt-design.html?ver="+VERSION,$scope.designPartIllustration="views/design_part/illustration.html?ver="+VERSION,$scope.designPartImage="views/design_part/image.html?ver="+VERSION,$scope.designPartText="views/design_part/text.html?ver="+VERSION,$scope.designPartDefault="views/design_part/default.html?ver="+VERSION,$scope.tShirtColor=$t_shirt.getTShirtColor(0);var tShirtColorFirstKey=0;$scope.tShirtChoiceBackFrontKey="front",$scope.tShirtColorKey=tShirtColorFirstKey,$rootScope.tShirtColorCode=$scope.tShirtColor[tShirtColorFirstKey].code,$scope.tShirtColorName=$scope.tShirtColor[tShirtColorFirstKey].name,$scope.tShirtImgFront=$scope.tShirtColor[tShirtColorFirstKey].img.front,$scope.tShirtImgBack=$scope.tShirtColor[tShirtColorFirstKey].img.back,$scope.tShirtImg=$scope.tShirtImgFront,$scope.choiceTShirtColor=function(key){$scope.tShirtColorKey=key,$rootScope.tShirtColorCode=$scope.tShirtColor[key].code,$scope.tShirtColorName=$scope.tShirtColor[key].name,$scope.tShirtImgFront=$scope.tShirtColor[key].img.front,$scope.tShirtImgBack=$scope.tShirtColor[key].img.back,"front"==$scope.tShirtChoiceBackFrontKey?$scope.tShirtImg=$scope.tShirtImgFront:$scope.tShirtImg=$scope.tShirtImgBack},$scope.choiceTShirtBackFront=function(choice){"front"==choice?$scope.tShirtImg=$scope.tShirtImgFront:$scope.tShirtImg=$scope.tShirtImgBack,$scope.tShirtChoiceBackFrontKey=choice},$scope.showDesignTab=function(tab){switch($rootScope.isShowLeftPanel=tab,tab){case"illustration":$scope.IllustrationList=$illustration.getAll(),$scope.illustrationSelectConfig={allowClear:!0};break;case"text":}},$rootScope.safeApply=function(fn){var phase=this.$root.$$phase;"$apply"==phase||"$digest"==phase?fn&&"function"==typeof fn&&fn():this.$apply(fn)},$scope.modalTShirtDesign=function(){$("#tshirt-design").modal({backdrop:"static",keyboard:!1}),$scope.showDesignTab("default")},$scope.modalClose=function(){$("#tshirt-design").modal("hide")}})}); |
dist/scripts/controllers/tshirtdesign.js
| 1 | -define(["app"],function(app){app.controller("TshirtdesignCtrl",function($scope,$rootScope,$illustration){function onIllustrationAdded(options){var object=options.target;console.log("object:added"),actionObj===!0&&(stateObj=[stateObj[indexCurr2]],listObj=[listObj[indexCurr2]],actionObj=!1,console.log(stateObj),indexCurr=1),object.saveState(),console.log(object.originalState),stateObj[indexCurr]=JSON.stringify(object.originalState),listObj[indexCurr]=object,indexCurr++,indexCurr2=indexCurr-1,refreshObj=!0}function onIllustrationModifield(options){var objOffset=canvas.getActiveObject().getBoundingRect(),cH=canvas.height,cW=canvas.width,H0=50,W0=50;if(objOffset.left<W0-objOffset.width||objOffset.left>cW-W0||objOffset.top<H0-objOffset.height||objOffset.top>cH-H0){if(!confirm("削除してもよろしいですか"))return void undoCanvas();canvas.getActiveObject().remove()}var object=options.target;console.log("object:modified"),actionObj===!0&&(stateObj=[stateObj[indexCurr2]],listObj=[listObj[indexCurr2]],actionObj=!1,console.log(stateObj),indexCurr=1),object.saveState(),stateObj[indexCurr]=JSON.stringify(object.originalState),listObj[indexCurr]=object,indexCurr++,indexCurr2=indexCurr-1,console.log(stateObj),refreshObj=!0}function onIllustrationChange(options){}function onIllustrationOut(){console.log("out object")}function undoCanvas(){return 0>=indexCurr?void(indexCurr=0):(refreshObj===!0&&(indexCurr--,refreshObj=!1),console.log("undo"),indexCurr2=indexCurr-1,currentObj=listObj[indexCurr2],currentObj&¤tObj.setOptions(JSON.parse(indexCurr[indexCurr2])),indexCurr--,currentObj.setCoords(),canvas.renderAll(),void(actionObj=!0))}function onIllustrationSelected(options){var object=options.target;switch($scope.typeObject=object.type,$scope.typeObject){case"i-text":$("#input-design-text").focus(),$rootScope.isShowLeftPanel="text";break;case"path-group":$rootScope.isShowLeftPanel="illustration";break;default:$rootScope.isShowLeftPanel="default"}$rootScope.safeApply()}var canvas=new fabric.Canvas("main-design-container");fabric.Object.prototype.transparentCorners=!1,canvas.on("after:render",function(){}),canvas.on({"object:added":onIllustrationAdded,"object:moving":onIllustrationChange,"object:scaling":onIllustrationChange,"object:rotating":onIllustrationChange,"object:selected":onIllustrationSelected,"object:modified":onIllustrationModifield,"selected:deselected":onIllustrationOut});var currentObj,listObj=[],stateObj=[],indexCurr=0,indexCurr2=0,actionObj=!1,refreshObj=!0;$scope.currentObject=null,$scope.changeIllustrationCategory=function(currentIllustration){$scope.currentIllustrationCate=$illustration.getList(currentIllustration)},$scope.insertSvg=function(item){fabric.loadSVGFromURL(item.path,function(objects,options){var shape=fabric.util.groupSVGElements(objects,options);canvas.add(shape.scale(.6)),shape.set({left:150,top:200}).setCoords(),canvas.renderAll(),canvas.setActiveObject(shape)})},$scope.changeColorPattern=function(color){canvas.getActiveObject()&&(canvas.getActiveObject().set("fill",color),canvas.renderAll())},$scope.listColorPatterns=["#000000","#ffff00","#ff6600","#ff0000","#ff6262","#ffa19c","#ff9933","#c45d01","#5d2b03","#ffffcc","#ffff99","#ffd500","#c0db50","#21a52a","#00663f","#abfcab","#36ffaa","#89eaea","#00938c","#005450","#0badff","#006cff","#839aff","#0410a0","#ffb2ff","#f93fff","#6600ca","#ff6699","#999999","#666666","#333333"],$scope.listFontFamily=[{name:"GN-Aki-iro_Sesami_Cookies",slug:"gn_aki_iro_sesami_cookies"},{name:"Tahoma",slug:"tahoma"},{name:"GN-Fuyu-iro_Script_Bold",slug:"gn_fuyu_iro_script_bold"},{name:"GN Killgothic U Kanana",slug:"gn_killgothic_u_kanana"}],$scope.focusInputText=function(){"i-text"!=$scope.typeObject&&($scope.iText=new fabric.IText("",{left:150,top:200,fontFamily:"Arial",fontWeight:"normal",fontSize:28,fill:"black"}))},$scope.inputText=function(e){var iText=$scope.iText;""!=e&&(iText.text=e,iText.set().setCoords(),canvas.add(iText),canvas.renderAll(),canvas.setActiveObject(iText))},$scope.setFontFamily=function(font){if(canvas.getActiveObject()){var currentObject=canvas.getActiveObject();"i-text"==currentObject.type&&(console.log(font),currentObject.set("fontFamily",font),currentObject.selectWord(),canvas.renderAll(),canvas.setActiveObject(currentObject))}}})}); | |
| 1 | +define(["app"],function(app){app.controller("TshirtdesignCtrl",function($scope,$rootScope,$illustration){function onIllustrationAdded(options){var object=options.target;console.log("object:added"),actionObj===!0&&(stateObj=[stateObj[indexCurr2]],listObj=[listObj[indexCurr2]],actionObj=!1,console.log(stateObj),indexCurr=1),object.saveState(),console.log(object.originalState),stateObj[indexCurr]=JSON.stringify(object.originalState),listObj[indexCurr]=object,indexCurr++,indexCurr2=indexCurr-1,refreshObj=!0}function onIllustrationModifield(options){var objOffset=canvas.getActiveObject().getBoundingRect(),cH=canvas.height,cW=canvas.width,H0=50,W0=50;if(objOffset.left<W0-objOffset.width||objOffset.left>cW-W0||objOffset.top<H0-objOffset.height||objOffset.top>cH-H0){if(!confirm("削除してもよろしいですか"))return void undoCanvas();canvas.getActiveObject().remove()}var object=options.target;console.log("object:modified"),actionObj===!0&&(stateObj=[stateObj[indexCurr2]],listObj=[listObj[indexCurr2]],actionObj=!1,console.log(stateObj),indexCurr=1),object.saveState(),stateObj[indexCurr]=JSON.stringify(object.originalState),listObj[indexCurr]=object,indexCurr++,indexCurr2=indexCurr-1,console.log(stateObj),refreshObj=!0}function onIllustrationChange(options){}function onIllustrationOut(){console.log("out object")}function undoCanvas(){return 0>=indexCurr?void(indexCurr=0):(refreshObj===!0&&(indexCurr--,refreshObj=!1),console.log("undo"),indexCurr2=indexCurr-1,currentObj=listObj[indexCurr2],currentObj&¤tObj.setOptions(JSON.parse(indexCurr[indexCurr2])),indexCurr--,currentObj.setCoords(),canvas.renderAll(),void(actionObj=!0))}function onIllustrationSelected(options){var object=options.target;switch($scope.typeObject=object.type,$scope.typeObject){case"i-text":$("#input-design-text").focus(),$rootScope.isShowLeftPanel="text";break;case"path-group":$rootScope.isShowLeftPanel="illustration";break;default:$rootScope.isShowLeftPanel="default"}$rootScope.safeApply()}var canvas=new fabric.Canvas("main-design-container");fabric.Object.prototype.transparentCorners=!1,canvas.on("after:render",function(){}),canvas.on({"object:added":onIllustrationAdded,"object:moving":onIllustrationChange,"object:scaling":onIllustrationChange,"object:rotating":onIllustrationChange,"object:selected":onIllustrationSelected,"object:modified":onIllustrationModifield,"selected:deselected":onIllustrationOut});var currentObj,listObj=[],stateObj=[],indexCurr=0,indexCurr2=0,actionObj=!1,refreshObj=!0;$scope.currentObject=null,$scope.changeIllustrationCategory=function(currentIllustration){$scope.currentIllustrationCate=$illustration.getList(currentIllustration)},$scope.insertSvg=function(item){fabric.loadSVGFromURL(item.path,function(objects,options){var shape=fabric.util.groupSVGElements(objects,options);canvas.add(shape.scale(.6)),shape.set({left:150,top:200}).setCoords(),canvas.renderAll(),canvas.setActiveObject(shape)})},$scope.listColorPatterns=["#000000","#ffff00","#ff6600","#ff0000","#ff6262","#ffa19c","#ff9933","#c45d01","#5d2b03","#ffffcc","#ffff99","#ffd500","#c0db50","#21a52a","#00663f","#abfcab","#36ffaa","#89eaea","#00938c","#005450","#0badff","#006cff","#839aff","#0410a0","#ffb2ff","#f93fff","#6600ca","#ff6699","#999999","#666666","#333333"],$scope.changeColorPattern=function(color){canvas.getActiveObject()&&(canvas.getActiveObject().set("fill",color),canvas.renderAll())},$scope.layerProcess=function(mode){var activeObject=canvas.getActiveObject();if(activeObject){switch(mode){case 1:activeObject.bringForward();break;case 2:activeObject.sendBackwards();break;case 3:activeObject.bringToFront();break;case 4:activeObject.sendToBack()}canvas.renderAll()}},$scope.listFontFamily=[{name:"GN-Aki-iro_Sesami_Cookies",slug:"gn_aki_iro_sesami_cookies"},{name:"Tahoma",slug:"tahoma"},{name:"GN-Fuyu-iro_Script_Bold",slug:"gn_fuyu_iro_script_bold"},{name:"GN Killgothic U Kanana",slug:"gn_killgothic_u_kanana"}],$scope.focusInputText=function(){"i-text"!=$scope.typeObject&&($scope.iText=new fabric.IText("",{left:150,top:200,fontFamily:"Arial",fontWeight:"normal",fontSize:28,fill:"black"}))},$scope.inputText=function(e){var iText=$scope.iText;""!=e&&(iText.text=e,iText.set().setCoords(),canvas.add(iText),canvas.renderAll(),canvas.setActiveObject(iText))},$scope.setFontFamily=function(font){if(canvas.getActiveObject()){var currentObject=canvas.getActiveObject();"i-text"==currentObject.type&&(console.log(font),currentObject.set("fontFamily",font),currentObject.selectWord(),canvas.renderAll(),canvas.setActiveObject(currentObject))}}})}); |
dist/scripts/services/illustration.js
| 1 | -define(["app"],function(app){"use strict";app.factory("$illustration",function($http,$rootScope){var DATA={cate1:{name:"category #1",list:[{name:"item 1",path:"images/illustrations/item1.svg"},{name:"item 2",path:"images/illustrations/item2.svg"},{name:"item 3",path:"images/illustrations/item3.svg"},{name:"item 4",path:"images/illustrations/item4.svg"},{name:"item 1",path:"images/illustrations/item3.svg"},{name:"item 2",path:"images/illustrations/item1.svg"},{name:"item 3",path:"images/illustrations/item4.svg"},{name:"item 4",path:"images/illustrations/item2.svg"}]},cate2:{name:"category #2",list:[{name:"item 1",path:"images/illustrations/item3.svg"},{name:"item 2",path:"images/illustrations/item1.svg"},{name:"item 3",path:"images/illustrations/item4.svg"},{name:"item 4",path:"images/illustrations/item2.svg"},{name:"item 1",path:"images/illustrations/item1.svg"},{name:"item 2",path:"images/illustrations/item2.svg"},{name:"item 3",path:"images/illustrations/item3.svg"},{name:"item 4",path:"images/illustrations/item4.svg"}]}};return{loadFromRemote:function(params,successHandle,errorHandle){var httpObj=$http({url:$rootScope+"/apiv1/illustration",method:"GET",params:params||[]});"undefined"==typeof successHandle&&(successHandle=function(response){1==response.status&&(DATA=response.data)}),httpObj.success(successHandle),"undefined"!=typeof errorHandle&&httpObj.error(errorHandle)},getAll:function(){return DATA},getList:function(category){return"undefined"==typeof DATA[category]?[]:DATA[category]}}})}); | |
| 1 | +define(["app"],function(app){"use strict";app.factory("$illustration",function($http,$rootScope){var DATA={cate1:{name:"category #1",list:[{name:"item 1",path:"images/illustrations/item1.svg"},{name:"item 2",path:"images/illustrations/item2.svg"},{name:"item 3",path:"images/illustrations/item3.svg"},{name:"item 4",path:"images/illustrations/item4.svg"},{name:"item 1",path:"images/illustrations/item3.svg"},{name:"item 2",path:"images/illustrations/item1.svg"},{name:"item 3",path:"images/illustrations/item4.svg"},{name:"item 4",path:"images/illustrations/item2.svg"},{name:"item 1",path:"images/illustrations/item1.svg"},{name:"item 2",path:"images/illustrations/item2.svg"},{name:"item 3",path:"images/illustrations/item3.svg"},{name:"item 4",path:"images/illustrations/item4.svg"},{name:"item 1",path:"images/illustrations/item3.svg"},{name:"item 2",path:"images/illustrations/item1.svg"},{name:"item 3",path:"images/illustrations/item4.svg"},{name:"item 4",path:"images/illustrations/item2.svg"},{name:"item 1",path:"images/illustrations/item1.svg"},{name:"item 2",path:"images/illustrations/item2.svg"},{name:"item 3",path:"images/illustrations/item3.svg"},{name:"item 4",path:"images/illustrations/item4.svg"},{name:"item 1",path:"images/illustrations/item3.svg"},{name:"item 2",path:"images/illustrations/item1.svg"},{name:"item 3",path:"images/illustrations/item4.svg"},{name:"item 4",path:"images/illustrations/item2.svg"}]},cate2:{name:"category #2",list:[{name:"item 1",path:"images/illustrations/item3.svg"},{name:"item 2",path:"images/illustrations/item1.svg"},{name:"item 3",path:"images/illustrations/item4.svg"},{name:"item 4",path:"images/illustrations/item2.svg"},{name:"item 1",path:"images/illustrations/item1.svg"},{name:"item 2",path:"images/illustrations/item2.svg"},{name:"item 3",path:"images/illustrations/item3.svg"},{name:"item 4",path:"images/illustrations/item4.svg"}]}};return{loadFromRemote:function(params,successHandle,errorHandle){var httpObj=$http({url:$rootScope.API_URL+"/apiv1/illustration",method:"GET",params:params||[]});"undefined"==typeof successHandle&&(successHandle=function(response){1==response.status&&(DATA=response.data)}),httpObj.success(successHandle),"undefined"!=typeof errorHandle&&httpObj.error(errorHandle)},getAll:function(){return DATA},getList:function(category){return"undefined"==typeof DATA[category]?[]:DATA[category]}}})}); |
dist/styles/36c320d8.main.css
| 1 | +body{font-family:'Hiragino Kaku Gothic Pro',sans-serif}import "../fonts/font_canvas/font-canvas.css";body{font-family:'Hiragino Kaku Gothic Pro',sans-serif}.padding-right-0{padding-right:0!important}.padding-left-0{padding-left:0!important}button.red{color:#fff;background-color:red;border:1px solid red}button.white{border:1px solid #ff8080;color:#ff8080;background-color:#fff}button.brown{background-color:#666;border:1px solid #666;color:#fff;border-radius:5px}button.black{border:1px solid #c9c9c9;background-color:#343434;color:#fff;padding:1px 6px}#tshirt-container{border-left:1px solid #dcdcdc;border-right:1px solid #dcdcdc}header{border-bottom:1px solid #dcdcdc}header .logo{color:#ed1d24;font-size:30px;text-transform:uppercase;font-weight:700}header .logo img{width:60px}nav{border-bottom:1px solid #dcdcdc;padding:10px 0}nav h2{font-size:27px;margin:0}nav ul{list-style:none;padding-left:0;margin-bottom:0}nav ul li{margin-left:2px;float:left;padding:6px 12px;background-color:#999;position:relative}nav ul li i.fa{position:absolute;color:#fff;font-size:18px;right:-4px;top:50%;transform:translateX(-50%) translateY(-50%);-webkit-transform:translateX(-50%) translateY(-50%)}nav ul li a{color:#fff}nav ul li:hover a{text-decoration:none;color:#fff}nav ul li.action{color:#fff;background-color:#ed1d24}aside{margin:10px 0}aside .break-down{padding:0}aside .break-down i.fa{font-size:35px;color:red}aside .break-line{height:10px}aside .break-line hr{border-top:1px dotted #ccc}aside .step{margin:0}aside .step .title{font-size:15px;line-height:16px;font-weight:700;margin-bottom:3px}aside .step .title-notice{font-size:13px;line-height:16px;margin-bottom:3px}aside .step .title-notice .require{font-size:10px}aside .step .step-box{border:2px solid #dcdcdc;font-size:12px}aside .step .step-box .tshirt-design{border:1px solid #ccc;background-color:#f5f5f5;margin:10px}aside .step .step-box .tshirt-design:hover{border:1px solid red}aside .step .step-box .tshirt-design button:hover{background-color:#fa7b7b;border:1px solid #fa7b7b}aside .step .step-box .tshirt-design div{float:left}aside .step .step-box .tshirt-design .icon{padding:4px;border-right:1px solid #ccc}aside .step .step-box .tshirt-design .icon img{height:50px}aside .step .step-box .tshirt-design .name{padding:10px}aside .step .step-box .tshirt-design .action{padding:10px;float:right}aside .step .step-box .tshirt-design .action button{padding:8px 10px}aside .step .step-box .tshirt-color{padding:6px 10px;position:relative}aside .step .step-box .tshirt-color ul.choice-color{float:left;list-style:none;padding-left:0;width:100%;margin-bottom:3px}aside .step .step-box .tshirt-color ul.choice-color li{margin:0 10px 0 0;border:1px solid #ccc;padding:2px;float:left;cursor:pointer}aside .step .step-box .tshirt-color ul.choice-color li.action,aside .step .step-box .tshirt-color ul.choice-color li:hover{border:1px solid red}aside .step .step-box .tshirt-color ul.choice-color li div{height:30px;width:30px}aside .step .step-box .tshirt-color ul.choice-color li.white div{background-color:#ece7e4}aside .step .step-box .tshirt-color ul.choice-color li.blue div{background-color:#e7dfd0}aside .step .step-box .tshirt-color .color-name{width:100%;font-size:10px}aside .step .step-box .tshirt-color .view-more{position:absolute;bottom:6px;right:10px}aside .step .step-box .tshirt-saveorder{padding:10px 10px 6px}aside .step .step-box .tshirt-saveorder .action{width:50%;float:left}aside .step .step-box .tshirt-saveorder .action:first-child{padding-right:5px}aside .step .step-box .tshirt-saveorder .action:last-child{padding-left:5px}aside .step .step-box .tshirt-saveorder .action button{padding:8px 10px}aside .step .step-box .tshirt-saveorder .action button .text{float:left;width:80%;text-align:center;padding-left:10px;vertical-align:bottom}aside .step .step-box .tshirt-saveorder .action button .arrow{float:left;width:20%;height:40px;position:relative}aside .step .step-box .tshirt-saveorder .action button .arrow i.fa{position:absolute;top:50%;right:-6px;transform:translateX(-50%) translateY(-50%);-webkit-transform:translateX(-50%) translateY(-50%)}aside .step .step-box .tshirt-saveorder .notice{padding:5px 0 0}aside .step .step-box .change-design{padding:4px}aside .step .step-box .change-design table tr{border-bottom:1px dotted #ccc}aside .step .step-box .change-design table tr:last-child{border-bottom:0}aside .step .finish-design{padding:20px 0}aside .step .finish-design button{width:100%;padding:8px 10px}#tshirt-content{position:relative}#tshirt-content .switch-border-design{position:absolute;top:5px;right:10px;color:red;font-size:11px}#tshirt-content .tshirt-image{padding:20px 0 0}#tshirt-content .tshirt-choice ul{list-style:none;padding-left:0;display:table;margin:auto}#tshirt-content .tshirt-choice ul li{float:left;margin:10px;cursor:pointer}#tshirt-content .tshirt-choice ul li .image{border:1px solid #ccc;padding:3px}#tshirt-content .tshirt-choice ul li.focus .image{border:1px solid red}#tshirt-content .tshirt-choice ul li .image img{width:50px;height:auto}#tshirt-design{background-color:#666}#tshirt-design .modal-dialog{width:75%;margin:0 auto}#tshirt-design .modal-dialog .modal-content{background-color:transparent;border-radius:0;border:0;-webkit-box-shadow:0 0 0 rgba(0,0,0,.5)!important;box-shadow:0 0 0 rgba(0,0,0,.5)!important}#tshirt-design .modal-dialog .modal-content .modal-header{padding:0 0 10px;border-bottom:0;border-shadow:none!important}#tshirt-design .modal-dialog .modal-content .modal-body{background-color:#f5f5f5;padding:0}#tshirt-design header{border-bottom:1px solid #ccc;background-color:#ddd}#tshirt-design header ul.nav{padding-left:0;list-style:none}#tshirt-design header ul.nav li{float:left;padding:8px 26px;border-right:1px solid #ccc;font-size:14px;cursor:pointer}#tshirt-design header ul.nav li.active,#tshirt-design header ul.nav li:hover{background-color:red;color:#fff}#tshirt-design header ul.nav li.active i.fa,#tshirt-design header ul.nav li:hover i.fa{color:#fff}#tshirt-design header ul.nav li i.fa{color:#fe070f;font-size:20px;margin-right:10px}#tshirt-design header .action button{padding:2px 10px;margin:6px 10px}#tshirt-design header .action button:hover{background-color:red;color:#fff}.aside .box-design-option{list-style:none;padding-left:0;margin-top:10px}.aside .box-design-option li{border:1px solid #cdcdcd;position:relative}.aside .box-design-option li .hover{background-color:#fddad4;opacity:.6;position:absolute;width:100%;height:100%;display:none}.aside .box-design-option li:hover .hover{display:block}.aside .box-design-option li .title{background:url(../images/bg1.png) repeat #cdcdcd;padding:3px 10px}.aside .box-design-option li .title i.fa{color:#000}.aside .box-design-option li .content i.fa{font-size:30px;color:#fe070f;margin:8px 0}.aside .box-design-option li .content .des{padding:3px 10px 3px 0}.aside #choice-illustration li .content{padding:10px}.aside #choice-illustration li .content select{width:100%}.aside #choice-illustration li .content .illustration-list{width:100%;border:#bbb solid 1px;background:#FFF;margin-top:5px}.aside #choice-illustration li .content .illustration-list .illstration-item{height:60px;overflow:hidden;float:left;margin-left:6px;margin-top:5px;margin-bottom:5px;padding:2px;background:#e2e2e2;border:solid 2px #d7d7d7;cursor:pointer}.aside #choice-illustration li .content .illustration-list .illstration-item:hover{outline:2px solid #ed1d24}.aside #choice-illustration li .content .illustration-list .illstration-item img{width:50px;cursor:pointer}.aside #choice-illustration li .content .illustration-list .footer-bar{text-align:center;margin-top:5px}.aside #choice-illustration li .content .illustration-list .footer-bar .footer-pagination{margin-right:5px;cursor:pointer;font-size:9px;color:#FFF;background:#666;text-transform:uppercase;padding:2px 5px}.aside #choice-illustration li .content .illustration-list .footer-bar .footer-pagination:hover{background:#999}.aside #choice-illustration li .content .color-patterns{width:100%;border:#bbb solid 1px;background:#FFF;margin-top:5px}.aside #choice-illustration li .content .color-patterns .color-pattern-item{height:20px;float:left;margin-left:4px;margin-top:2px;width:20px;cursor:pointer;border:1px solid #ddd}.aside #choice-illustration li .content .color-patterns .color-pattern-item:hover{outline:1px solid #ed1d24}.aside #choice-illustration li .content .layer-item{text-align:center;border:1px #ddd solid;background:#FFF;padding:5px;font-size:12px;cursor:pointer}.aside #choice-illustration li .content .layer-item:hover{background:#fcc}.tshirt-design-container{position:relative}.tshirt-design-container .design-content{padding:10px 30px 10px 15px}.tshirt-design-container .design-content .content{width:100%;min-height:650px;background-color:#f0efea;padding:40px;height:100%}.tshirt-design-container .design-content .content .selection-design{border:1px solid red;width:100%;height:620px}.tshirt-design-container .agree-design{position:absolute;right:-16px;top:40%}.tshirt-design-container .trash-design{position:absolute;right:5px;bottom:0}footer{background-color:#333}footer ul.nav-footer{padding-left:0;list-style:none}footer ul.nav-footer li{float:left;padding:3px 10px;border-right:1px dotted #fff}footer ul.nav-footer li a{color:#fff;font-size:11px} |
dist/styles/ba55f2e6.main.css
| 1 | -body{font-family:'Hiragino Kaku Gothic Pro',sans-serif}import "../fonts/font_canvas/font-canvas.css";body{font-family:'Hiragino Kaku Gothic Pro',sans-serif}.padding-right-0{padding-right:0!important}.padding-left-0{padding-left:0!important}button.red{color:#fff;background-color:red;border:1px solid red}button.white{border:1px solid #ff8080;color:#ff8080;background-color:#fff}button.brown{background-color:#666;border:1px solid #666;color:#fff;border-radius:5px}button.black{border:1px solid #c9c9c9;background-color:#343434;color:#fff;padding:1px 6px}#tshirt-container{border-left:1px solid #dcdcdc;border-right:1px solid #dcdcdc}header{border-bottom:1px solid #dcdcdc}header .logo{color:#ed1d24;font-size:30px;text-transform:uppercase;font-weight:700}header .logo img{width:60px}nav{border-bottom:1px solid #dcdcdc;padding:10px 0}nav h2{font-size:27px;margin:0}nav ul{list-style:none;padding-left:0;margin-bottom:0}nav ul li{margin-left:2px;float:left;padding:6px 12px;background-color:#999;position:relative}nav ul li i.fa{position:absolute;color:#fff;font-size:18px;right:-4px;top:50%;transform:translateX(-50%) translateY(-50%);-webkit-transform:translateX(-50%) translateY(-50%)}nav ul li a{color:#fff}nav ul li:hover a{text-decoration:none;color:#fff}nav ul li.action{color:#fff;background-color:#ed1d24}aside{margin:10px 0}aside .break-down{padding:0}aside .break-down i.fa{font-size:35px;color:red}aside .break-line{height:10px}aside .break-line hr{border-top:1px dotted #ccc}aside .step{margin:0}aside .step .title{font-size:15px;line-height:16px;font-weight:700;margin-bottom:3px}aside .step .title-notice{font-size:13px;line-height:16px;margin-bottom:3px}aside .step .title-notice .require{font-size:10px}aside .step .step-box{border:2px solid #dcdcdc;font-size:12px}aside .step .step-box .tshirt-design{border:1px solid #ccc;background-color:#f5f5f5;margin:10px}aside .step .step-box .tshirt-design:hover{border:1px solid red}aside .step .step-box .tshirt-design button:hover{background-color:#fa7b7b;border:1px solid #fa7b7b}aside .step .step-box .tshirt-design div{float:left}aside .step .step-box .tshirt-design .icon{padding:4px;border-right:1px solid #ccc}aside .step .step-box .tshirt-design .icon img{height:50px}aside .step .step-box .tshirt-design .name{padding:10px}aside .step .step-box .tshirt-design .action{padding:10px;float:right}aside .step .step-box .tshirt-design .action button{padding:8px 10px}aside .step .step-box .tshirt-color{padding:6px 10px;position:relative}aside .step .step-box .tshirt-color ul.choice-color{float:left;list-style:none;padding-left:0;width:100%;margin-bottom:3px}aside .step .step-box .tshirt-color ul.choice-color li{margin:0 10px 0 0;border:1px solid #ccc;padding:2px;float:left;cursor:pointer}aside .step .step-box .tshirt-color ul.choice-color li.action,aside .step .step-box .tshirt-color ul.choice-color li:hover{border:1px solid red}aside .step .step-box .tshirt-color ul.choice-color li div{height:30px;width:30px}aside .step .step-box .tshirt-color ul.choice-color li.white div{background-color:#ece7e4}aside .step .step-box .tshirt-color ul.choice-color li.blue div{background-color:#e7dfd0}aside .step .step-box .tshirt-color .color-name{width:100%;font-size:10px}aside .step .step-box .tshirt-color .view-more{position:absolute;bottom:6px;right:10px}aside .step .step-box .tshirt-saveorder{padding:10px 10px 6px}aside .step .step-box .tshirt-saveorder .action{width:50%;float:left}aside .step .step-box .tshirt-saveorder .action:first-child{padding-right:5px}aside .step .step-box .tshirt-saveorder .action:last-child{padding-left:5px}aside .step .step-box .tshirt-saveorder .action button{padding:8px 10px}aside .step .step-box .tshirt-saveorder .action button .text{float:left;width:80%;text-align:center;padding-left:10px;vertical-align:bottom}aside .step .step-box .tshirt-saveorder .action button .arrow{float:left;width:20%;height:40px;position:relative}aside .step .step-box .tshirt-saveorder .action button .arrow i.fa{position:absolute;top:50%;right:-6px;transform:translateX(-50%) translateY(-50%);-webkit-transform:translateX(-50%) translateY(-50%)}aside .step .step-box .tshirt-saveorder .notice{padding:5px 0 0}aside .step .step-box .change-design{padding:4px}aside .step .step-box .change-design table tr{border-bottom:1px dotted #ccc}aside .step .step-box .change-design table tr:last-child{border-bottom:0}aside .step .finish-design{padding:20px 0}aside .step .finish-design button{width:100%;padding:8px 10px}#tshirt-content{position:relative}#tshirt-content .switch-border-design{position:absolute;top:5px;right:10px;color:red;font-size:11px}#tshirt-content .tshirt-image{padding:20px 0 0}#tshirt-content .tshirt-choice ul{list-style:none;padding-left:0;display:table;margin:auto}#tshirt-content .tshirt-choice ul li{float:left;margin:10px;cursor:pointer}#tshirt-content .tshirt-choice ul li .image{border:1px solid #ccc;padding:3px}#tshirt-content .tshirt-choice ul li.focus .image{border:1px solid red}#tshirt-content .tshirt-choice ul li .image img{width:50px;height:auto}#tshirt-design{background-color:#666}#tshirt-design .modal-dialog{width:75%;margin:0 auto}#tshirt-design .modal-dialog .modal-content{background-color:transparent;border-radius:0;border:0;-webkit-box-shadow:0 0 0 rgba(0,0,0,.5)!important;box-shadow:0 0 0 rgba(0,0,0,.5)!important}#tshirt-design .modal-dialog .modal-content .modal-header{padding:0 0 10px;border-bottom:0;border-shadow:none!important}#tshirt-design .modal-dialog .modal-content .modal-body{background-color:#f5f5f5;padding:0}#tshirt-design header{border-bottom:1px solid #ccc;background-color:#ddd}#tshirt-design header ul.nav{padding-left:0;list-style:none}#tshirt-design header ul.nav li{float:left;padding:8px 26px;border-right:1px solid #ccc;font-size:14px;cursor:pointer}#tshirt-design header ul.nav li.active,#tshirt-design header ul.nav li:hover{background-color:red;color:#fff}#tshirt-design header ul.nav li.active i.fa,#tshirt-design header ul.nav li:hover i.fa{color:#fff}#tshirt-design header ul.nav li i.fa{color:#fe070f;font-size:20px;margin-right:10px}#tshirt-design header .action button{padding:2px 10px;margin:6px 10px}#tshirt-design header .action button:hover{background-color:red;color:#fff}.aside .box-design-option{list-style:none;padding-left:0;margin-top:10px}.aside .box-design-option li{border:1px solid #cdcdcd;position:relative;cursor:pointer}.aside .box-design-option li .hover{background-color:#fddad4;opacity:.6;position:absolute;width:100%;height:100%;display:none}.aside .box-design-option li:hover .hover{display:block}.aside .box-design-option li .title{background:url(../images/bg1.png) repeat #cdcdcd;padding:3px 10px}.aside .box-design-option li .title i.fa{color:#000}.aside .box-design-option li .content i.fa{font-size:30px;color:#fe070f;margin:8px 0}.aside .box-design-option li .content .des{padding:3px 10px 3px 0}.aside #choice-illustration li .content{padding:10px}.aside #choice-illustration li .content select{width:100%}.aside #choice-illustration li .content .illustration-list{width:100%;border:#bbb solid 1px;background:#FFF;margin-top:5px}.aside #choice-illustration li .content .illustration-list .illstration-item{height:60px;overflow:hidden;float:left;margin-left:6px;margin-top:5px;margin-bottom:5px;padding:2px;background:#e2e2e2;border:solid 2px #d7d7d7;cursor:pointer}.aside #choice-illustration li .content .illustration-list .illstration-item:hover{outline:2px solid #ed1d24}.aside #choice-illustration li .content .illustration-list .illstration-item img{width:50px;cursor:pointer}.aside #choice-illustration li .content .color-patterns{width:100%;border:#bbb solid 1px;background:#FFF;margin-top:5px}.aside #choice-illustration li .content .color-patterns .color-pattern-item{height:20px;float:left;margin-left:4px;margin-top:2px;width:20px;cursor:pointer;border:1px solid #ddd}.aside #choice-illustration li .content .color-patterns .color-pattern-item:hover{outline:1px solid #ed1d24}.tshirt-design-container{position:relative}.tshirt-design-container .design-content{padding:10px 30px 10px 15px}.tshirt-design-container .design-content .content{width:100%;min-height:650px;background-color:#f0efea;padding:40px;height:100%}.tshirt-design-container .design-content .content .selection-design{border:1px solid red;width:100%;height:620px}.tshirt-design-container .agree-design{position:absolute;right:-16px;top:40%}.tshirt-design-container .trash-design{position:absolute;right:5px;bottom:0}footer{background-color:#333}footer ul.nav-footer{padding-left:0;list-style:none}footer ul.nav-footer li{float:left;padding:3px 10px;border-right:1px dotted #fff}footer ul.nav-footer li a{color:#fff;font-size:11px} |
dist/views/design_part/illustration.html
| 1 | -<li><div class="title"><!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->イラスト・イメージ選択</div><div class="content clearfix"><select id="illustration-select-category" ui-select2="illustrationSelectConfig" ng-model="currentIllustration" ng-change="changeIllustrationCategory(currentIllustration)" data-placeholder="Choose category" style="width: 100%"><option ng-repeat="(key,cate) in IllustrationList" value="{{key}}">{{cate.name}}</select><div class="illustration-list"><div class="illstration-item" ng-repeat="item in currentIllustrationCate.list" ng-click="insertSvg(item)"><img ng-src="{{item.path}}"></div><div class="clearfix"></div></div></div></li><li><div class="title"><!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->カラー変更<div class="pull-right">元の色に戻す</div></div><div class="content clearfix"><div class="color-patterns"><div class="color-pattern-item" ng-repeat="color in listColorPatterns track by $index" ng-click="changeColorPattern(color)" ng-style="{'background-color': color}"></div><div class="clearfix"></div></div></div></li><li><div class="title"><!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->重ね順変更</div><div class="content clearfix"></div></li> | |
| 1 | +<li> | |
| 2 | + <div class="title"> | |
| 3 | + <!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>--> | |
| 4 | + イラスト・イメージ選択 | |
| 5 | + </div> | |
| 6 | + <div class="content clearfix"> | |
| 7 | + <select id="illustration-select-category" ui-select2="illustrationSelectConfig" ng-model="currentIllustration" ng-change="changeIllustrationCategory(currentIllustration);currentIllustrationPage=1;" data-placeholder="Choose category" style="width: 100%"> | |
| 8 | + <option ng-repeat="(key,cate) in IllustrationList" value="{{key}}">{{cate.name}}</option> | |
| 9 | + </select> | |
| 10 | + <div class="illustration-list" ng-init="currentIllustrationPage=1;perIllustrationPage=16"> | |
| 11 | + <div class="illstration-item" ng-repeat="item in currentIllustrationCate.list | limitTo:perIllustrationPage:((currentIllustrationPage-1)*perIllustrationPage)" ng-click="insertSvg(item)"> | |
| 12 | + <img ng-src="{{item.path}}"/> | |
| 13 | + </div> | |
| 14 | + <div class="clearfix"></div> | |
| 15 | + <div class="footer-bar"> | |
| 16 | + <div class="pull-left footer-pagination" ng-click="currentIllustrationPage=currentIllustrationPage-1" ng-show="currentIllustrationPage > 1">< Back</div> | |
| 17 | + {{currentIllustrationPage}}/{{currentIllustrationCate.list.length/perIllustrationPage | number:0}} | |
| 18 | + <div class="pull-right footer-pagination" ng-click="currentIllustrationPage=currentIllustrationPage+1" ng-show="currentIllustrationPage < (currentIllustrationCate.list.length/perIllustrationPage|number:0)">Next ></div> | |
| 19 | + </div> | |
| 20 | + </div> | |
| 21 | + </div> | |
| 22 | +</li> | |
| 23 | +<li> | |
| 24 | + <div class="title"> | |
| 25 | + <!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>--> | |
| 26 | + カラー変更 | |
| 27 | + <div class="pull-right">元の色に戻す</div> | |
| 28 | + </div> | |
| 29 | + <div class="content clearfix"> | |
| 30 | + <div class="color-patterns"> | |
| 31 | + <div class="color-pattern-item" ng-repeat="color in listColorPatterns track by $index" ng-click="changeColorPattern(color)" ng-style="{'background-color': color}"> | |
| 32 | + </div> | |
| 33 | + <div class="clearfix"></div> | |
| 34 | + </div> | |
| 35 | + </div> | |
| 36 | +</li> | |
| 37 | +<li> | |
| 38 | + <div class="title"> | |
| 39 | + <!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>--> | |
| 40 | + 重ね順変更 | |
| 41 | + </div> | |
| 42 | + <div class="content clearfix"> | |
| 43 | + <div class="col-xs-3 layer-item" ng-click="layerProcess(1)"> | |
| 44 | + <img src="images/layer-icon-1.png"/> | |
| 45 | + <div>前面へ</div> | |
| 46 | + </div> | |
| 47 | + <div class="col-xs-3 layer-item" ng-click="layerProcess(2)"> | |
| 48 | + <img src="images/layer-icon-2.png"/> | |
| 49 | + <div>背面へ</div> | |
| 50 | + </div> | |
| 51 | + <div class="col-xs-3 layer-item" ng-click="layerProcess(3)"> | |
| 52 | + <img src="images/layer-icon-3.png"/> | |
| 53 | + <div>最前面へ</div> | |
| 54 | + </div> | |
| 55 | + <div class="col-xs-3 layer-item" ng-click="layerProcess(4)"> | |
| 56 | + <img src="images/layer-icon-4.png"/> | |
| 57 | + <div>最前面へ</div> | |
| 58 | + </div> | |
| 59 | + </div> | |
| 60 | +</li> |
dist/views/design_part/image.html
| 1 | -<li><div class="title"><!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->イラスト・イメージ選択</div><div class="content clearfix"></div></li><li><div class="title"><!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->カラー変更<div class="pull-right">元の色に戻す</div></div><div class="content clearfix"></div></li><li><div class="title"><!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->重ね順変更</div><div class="content clearfix"></div></li> | |
| 1 | +<li> | |
| 2 | + <div class="title"> | |
| 3 | + <!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>--> | |
| 4 | + イラスト・イメージ選択 | |
| 5 | + </div> | |
| 6 | + <div class="content clearfix"> | |
| 7 | + | |
| 8 | + </div> | |
| 9 | +</li> | |
| 10 | +<li> | |
| 11 | + <div class="title"> | |
| 12 | + <!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>--> | |
| 13 | + カラー変更 | |
| 14 | + <div class="pull-right">元の色に戻す</div> | |
| 15 | + </div> | |
| 16 | + <div class="content clearfix"> | |
| 17 | + | |
| 18 | + </div> | |
| 19 | +</li> | |
| 20 | +<li> | |
| 21 | + <div class="title"> | |
| 22 | + <!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>--> | |
| 23 | + 重ね順変更 | |
| 24 | + </div> | |
| 25 | + <div class="content clearfix"> | |
| 26 | + | |
| 27 | + </div> | |
| 28 | +</li> |
dist/views/design_part/text.html
| 1 | -<li><div class="title"><i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Text</div><div class="content clearfix"><div><input type="text" class="form-control" id="input-design-text" ng-focus="focusInputText()" ng-change="inputText(design_text)" ng-model="design_text"></div><div><ul><li ng-repeat="item in listFontFamily" ng-click="setFontFamily(item.slug)" ng-style="{'font-family' : item.slug}">{{ item.name }}</li></ul></div><div><div></div></div><div><label>Letter Spacing</label><div class="group"><i class="fa fa-minus-square" aria-hidden="true"></i> Letter Spacing <i class="fa fa-plus-square" aria-hidden="true"></i></div></div></div></li> | |
| 1 | +<li> | |
| 2 | + <div class="title"> | |
| 3 | + <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> | |
| 4 | + Text | |
| 5 | + </div> | |
| 6 | + <div class="content clearfix"> | |
| 7 | + <div> | |
| 8 | + <input type="text" class="form-control" id="input-design-text" ng-focus="focusInputText()" ng-change="inputText(design_text)" ng-model="design_text"> | |
| 9 | + </div> | |
| 10 | + <div> | |
| 11 | + <ul> | |
| 12 | + <li ng-repeat="item in listFontFamily" ng-click="setFontFamily(item.slug)" ng-style="{'font-family' : item.slug}">{{ item.name }}</li> | |
| 13 | + </ul> | |
| 14 | + </div> | |
| 15 | + <div> | |
| 16 | + <div></div> | |
| 17 | + </div> | |
| 18 | + <div> | |
| 19 | + <label>Letter Spacing</label> | |
| 20 | + <div class="group"> | |
| 21 | + <i class="fa fa-minus-square" aria-hidden="true"></i> Letter Spacing <i class="fa fa-plus-square" aria-hidden="true"></i> | |
| 22 | + </div> | |
| 23 | + </div> | |
| 24 | + </div> | |
| 25 | +</li> |
dist/views/main.html
| 1 | -<div ng-controller="MainCtrl" class="col-sm-10 col-sm-offset-1" id="tshirt-container"><div class="row"><header><div class="logo"><img src="images/logo_mobile_world.png" alt="Logo Mobile World"> MOBILE WORLD</div></header><nav class="clearfix"><div class="col-sm-12"><h2 class="pull-left">加工箇所を選択してデザインしてください。</h2><ul class="pull-right"><li><a href="#">商品に戻る</a><i class="fa fa-caret-left" aria-hidden="true"></i></li><li><a href="#">加工方法に戻る</a><i class="fa fa-caret-left" aria-hidden="true"></i></li><li class="action">デザインする</li></ul></div></nav><article class="clearfix"><aside class="col-sm-5"><div class="step"><div class="title">1. デザインを作る</div><div class="step-box"><div class="tshirt-design clearfix"><div class="icon"><img src="images/t-shirt_icon/tshirt1.gif" alt="icon t-shirt"></div><div class="name">背中背中 (28x22)</div><div class="action"><button class="red" ng-click="modalTShirtDesign()"><i class="fa fa-caret-right" aria-hidden="true"></i> デザインを作る</button></div></div></div></div><!-- BREAK DOWN--><div class="text-center break-down"><img src="images/bg_step_arrow.gif" alt="arrow"></div><!-- STEP 2--><div class="step"><div class="title">2.アイテムカラーを変更する</div><div class="step-box clearfix"><div class="tshirt-color"><ul class="choice-color clearfix"><li ng-repeat="(key,color) in tShirtColor" ng-click="choiceTShirtColor(key)" ng-class="key == tShirtColorKey ? 'action' : ''"><div ng-style="{'background-color' : color.code}"></div></li></ul><div class="color-name" ng-bind="tShirtColorName"></div><div class="view-more">在庫確認 <i class="fa fa-chevron-circle-right" aria-hidden="true"></i></div></div></div></div><!-- BREAK DOWN--><div class="text-center break-down"><img src="images/bg_step_arrow.gif" alt="arrow"></div><!-- STEP 3--><div class="step"><div class="step-box clearfix"><div class="tshirt-saveorder"><div class="clearfix"><div class="action"><button class="white"><div class="text">このデザインを保存する</div><div class="arrow"><i class="fa fa-chevron-circle-right" aria-hidden="true"></i></div></button></div><div class="action"><button class="red"><div class="text">このデザインで注文する</div><div class="arrow clearfix"><i class="fa fa-chevron-circle-right" aria-hidden="true"></i></div></button></div></div><div class="notice">デザインを保存するには、ログインしてください</div></div></div><!-- BREAL LINE--><div class="text-center break-line"><hr></div><!-- STEP 4--><div class="step"><div class="title-notice">商品・デザインの変更はこちら <span class="require">作業中のデザインは破棄されます</span></div><div class="step-box"><div class="change-design"><table><tr><td class="text-center">商品<td>MENドライカノコポロシャツ・ポケツキ半袖（ホワイト）<td class="text-right"><button class="brown"><i class="fa fa-caret-right" aria-hidden="true"></i> 変更</button><tr><td width="10%" class="text-center">加工方法<td width="70%">シルク：胸中央 (27×27)<td width="20%" class="text-right"><button class="brown"><i class="fa fa-caret-right" aria-hidden="true"></i> 変更</button></table></div></div></div><!-- STEP 5- finish--><div class="step"><div class="finish-design"><button class="white">自分で保存したデザインを呼び出す <i class="fa fa-chevron-circle-right" aria-hidden="true"></i></button></div></div></div></aside><section id="tshirt-content" class="col-sm-7 text-center"><div class="switch-border-design"><i class="fa fa-square-o" aria-hidden="true"></i> 枠線を消す</div><div class="tshirt-image"><img ng-src="{{ tShirtImg }}" alt=""></div><div class="tshirt-choice"><ul><li ng-class="'front' === tShirtChoiceBackFrontKey ? 'focus' : ''"><div>前</div><div class="image" ng-click="choiceTShirtBackFront('front')"><img ng-src="{{ tShirtImgFront }}" alt=""></div></li><li ng-class="'back' === tShirtChoiceBackFrontKey ? 'focus' : ''"><div>後</div><div class="image" ng-click="choiceTShirtBackFront('back')"><img ng-src="{{ tShirtImgBack }}" alt=""></div></li></ul></div></section></article><footer class="clearfix"><ul class="nav-footer"><li><a href="#">店舗検索</a></li><li><a href="#">お客様窓口</a></li><li><a href="#">企業情報</a></li><li><a href="#">採用情報</a></li><li><a href="#">プライバシーポリシー</a></li></ul></footer><!--MODAL CONTENT--><div ng-include="designFrameView"></div></div></div> | |
| 1 | +<div ng-controller="MainCtrl" class="col-sm-10 col-sm-offset-1" id="tshirt-container"> | |
| 2 | + <div class="row"> | |
| 3 | + <header> | |
| 4 | + <div class="logo"> | |
| 5 | + <img src="images/logo_mobile_world.png" alt="Logo Mobile World" /> | |
| 6 | + MOBILE WORLD | |
| 7 | + </div> | |
| 8 | + </header> | |
| 9 | + <nav class="clearfix"> | |
| 10 | + <div class="col-sm-12"> | |
| 11 | + <h2 class="pull-left">加工箇所を選択してデザインしてください。</h2> | |
| 12 | + <ul class="pull-right"> | |
| 13 | + <li><a href="#">商品に戻る</a><i class="fa fa-caret-left" aria-hidden="true"></i></li> | |
| 14 | + <li><a href="#">加工方法に戻る</a><i class="fa fa-caret-left" aria-hidden="true"></i></li> | |
| 15 | + <li class="action">デザインする</li> | |
| 16 | + </ul> | |
| 17 | + </div> | |
| 18 | + </nav> | |
| 19 | + <article class="clearfix"> | |
| 20 | + <aside class="col-sm-5"> | |
| 21 | + <div class="step"> | |
| 22 | + <div class="title"> | |
| 23 | + 1. デザインを作る | |
| 24 | + </div> | |
| 25 | + <div class="step-box"> | |
| 26 | + <div class="tshirt-design clearfix"> | |
| 27 | + <div class="icon"> | |
| 28 | + <img src="images/t-shirt_icon/tshirt1.gif" alt="icon t-shirt" /> | |
| 29 | + </div> | |
| 30 | + <div class="name"> | |
| 31 | + 背中背中 (28x22) | |
| 32 | + </div> | |
| 33 | + <div class="action"> | |
| 34 | + <button class="red" ng-click="modalTShirtDesign()"> | |
| 35 | + <i class="fa fa-caret-right" aria-hidden="true"></i> デザインを作る | |
| 36 | + </button> | |
| 37 | + </div> | |
| 38 | + </div> | |
| 39 | + </div> | |
| 40 | + </div> | |
| 41 | + | |
| 42 | + <!-- BREAK DOWN--> | |
| 43 | + <div class="text-center break-down"> | |
| 44 | + <img src="images/bg_step_arrow.gif" alt="arrow" /> | |
| 45 | + </div> | |
| 46 | + | |
| 47 | + <!-- STEP 2--> | |
| 48 | + <div class="step"> | |
| 49 | + <div class="title"> | |
| 50 | + 2.アイテムカラーを変更する | |
| 51 | + </div> | |
| 52 | + <div class="step-box clearfix"> | |
| 53 | + <div class="tshirt-color"> | |
| 54 | + <ul class="choice-color clearfix"> | |
| 55 | + <li ng-repeat="(key,color) in tShirtColor" ng-click="choiceTShirtColor(key)" ng-class="key == tShirtColorKey ? 'action' : ''"> | |
| 56 | + <div ng-style="{'background-color' : color.code}"></div> | |
| 57 | + </li> | |
| 58 | + </ul> | |
| 59 | + <div class="color-name" ng-bind="tShirtColorName"></div> | |
| 60 | + <div class="view-more"> | |
| 61 | + 在庫確認 <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> | |
| 62 | + </div> | |
| 63 | + </div> | |
| 64 | + </div> | |
| 65 | + </div> | |
| 66 | + | |
| 67 | + <!-- BREAK DOWN--> | |
| 68 | + <div class="text-center break-down"> | |
| 69 | + <img src="images/bg_step_arrow.gif" alt="arrow" /> | |
| 70 | + </div> | |
| 71 | + | |
| 72 | + <!-- STEP 3--> | |
| 73 | + <div class="step"> | |
| 74 | + <div class="step-box clearfix"> | |
| 75 | + <div class="tshirt-saveorder"> | |
| 76 | + <div class="clearfix"> | |
| 77 | + <div class="action"> | |
| 78 | + <button class="white"> | |
| 79 | + <div class="text"> | |
| 80 | + このデザインを保存する | |
| 81 | + </div> | |
| 82 | + <div class="arrow"> | |
| 83 | + <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> | |
| 84 | + </div> | |
| 85 | + </button> | |
| 86 | + </div> | |
| 87 | + <div class="action"> | |
| 88 | + <button class="red"> | |
| 89 | + <div class="text"> | |
| 90 | + このデザインで注文する | |
| 91 | + </div> | |
| 92 | + <div class="arrow clearfix"> | |
| 93 | + <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> | |
| 94 | + </div> | |
| 95 | + </button> | |
| 96 | + </div> | |
| 97 | + </div> | |
| 98 | + <div class="notice"> | |
| 99 | + デザインを保存するには、ログインしてください | |
| 100 | + </div> | |
| 101 | + </div> | |
| 102 | + </div> | |
| 103 | + | |
| 104 | + <!-- BREAL LINE--> | |
| 105 | + <div class="text-center break-line"> | |
| 106 | + <hr /> | |
| 107 | + </div> | |
| 108 | + | |
| 109 | + <!-- STEP 4--> | |
| 110 | + <div class="step"> | |
| 111 | + <div class="title-notice"> | |
| 112 | + 商品・デザインの変更はこちら <span class="require">作業中のデザインは破棄されます</span> | |
| 113 | + </div> | |
| 114 | + <div class="step-box"> | |
| 115 | + <div class="change-design"> | |
| 116 | + <table> | |
| 117 | + <tr> | |
| 118 | + <td class="text-center">商品</td> | |
| 119 | + <td>MENドライカノコポロシャツ・ポケツキ半袖（ホワイト）</td> | |
| 120 | + <td class="text-right"> | |
| 121 | + <button class="brown"><i class="fa fa-caret-right" aria-hidden="true"></i> 変更</button> | |
| 122 | + </td> | |
| 123 | + </tr> | |
| 124 | + <tr> | |
| 125 | + <td width="10%" class="text-center">加工方法</td> | |
| 126 | + <td width="70%">シルク：胸中央 (27×27)</td> | |
| 127 | + <td width="20%" class="text-right"> | |
| 128 | + <button class="brown"><i class="fa fa-caret-right" aria-hidden="true"></i> 変更</button> | |
| 129 | + </td> | |
| 130 | + </tr> | |
| 131 | + </table> | |
| 132 | + </div> | |
| 133 | + </div> | |
| 134 | + </div> | |
| 135 | + <!-- STEP 5- finish--> | |
| 136 | + <div class="step"> | |
| 137 | + <div class="finish-design"> | |
| 138 | + <button class="white"> | |
| 139 | + 自分で保存したデザインを呼び出す <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> | |
| 140 | + </button> | |
| 141 | + </div> | |
| 142 | + | |
| 143 | + </div> | |
| 144 | + </div> | |
| 145 | + </aside> | |
| 146 | + <section id="tshirt-content" class="col-sm-7 text-center"> | |
| 147 | + <div class="switch-border-design"> | |
| 148 | + <i class="fa fa-square-o" aria-hidden="true"></i> 枠線を消す | |
| 149 | + </div> | |
| 150 | + <div class="tshirt-image"> | |
| 151 | + <img ng-src="{{ tShirtImg }}" alt="" /> | |
| 152 | + </div> | |
| 153 | + <div class="tshirt-choice"> | |
| 154 | + <ul> | |
| 155 | + <li ng-class="'front' === tShirtChoiceBackFrontKey ? 'focus' : ''"> | |
| 156 | + <div>前</div> | |
| 157 | + <div class="image" ng-click="choiceTShirtBackFront('front')"> | |
| 158 | + <img ng-src="{{ tShirtImgFront }}" alt="" /> | |
| 159 | + </div> | |
| 160 | + | |
| 161 | + </li> | |
| 162 | + <li ng-class="'back' === tShirtChoiceBackFrontKey ? 'focus' : ''"> | |
| 163 | + <div>後</div> | |
| 164 | + <div class="image" ng-click="choiceTShirtBackFront('back')"> | |
| 165 | + <img ng-src="{{ tShirtImgBack }}" alt="" /> | |
| 166 | + </div> | |
| 167 | + | |
| 168 | + </li> | |
| 169 | + </ul> | |
| 170 | + </div> | |
| 171 | + </section> | |
| 172 | + </article> | |
| 173 | + <footer class="clearfix"> | |
| 174 | + <ul class="nav-footer"> | |
| 175 | + <li><a href="#">店舗検索</a></li> | |
| 176 | + <li><a href="#">お客様窓口</a></li> | |
| 177 | + <li><a href="#">企業情報</a></li> | |
| 178 | + <li><a href="#">採用情報</a></li> | |
| 179 | + <li><a href="#">プライバシーポリシー</a></li> | |
| 180 | + </ul> | |
| 181 | + </footer> | |
| 182 | + | |
| 183 | + <!--MODAL CONTENT--> | |
| 184 | + <div ng-include="designFrameView"></div> | |
| 185 | + </div> | |
| 186 | + | |
| 187 | + | |
| 188 | +</div> |
dist/views/tshirt-design.html
| 1 | -<!-- Modal --><div class="modal fade" id="tshirt-design" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" ng-controller="TshirtdesignCtrl"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><button class="black" ng-click="modalClose()"><i class="fa fa-times" aria-hidden="true"></i> キャンセル</button> <button class="black"><i class="fa fa-angle-right" aria-hidden="true"></i> はじめての方へ</button></div><div class="modal-body"><header class="clearfix"><ul class="nav pull-left"><li ng-class="{'active': isShowLeftPanel=='text'}" ng-click="showDesignTab('text')"><i class="fa fa-jpy" aria-hidden="true"></i> 文字</li><li ng-class="{'active': isShowLeftPanel=='illustration'}" ng-click="showDesignTab('illustration')"><i class="fa fa-btc" aria-hidden="true"></i> イラスト・イメージ</li><li ng-class="{'active': isShowLeftPanel=='image'}" ng-click="showDesignTab('image')"><i class="fa fa-money" aria-hidden="true"></i> 自分の画像・写真</li><li><i class="fa fa-minus-circle" aria-hidden="true"></i> 全消去</li></ul><div class="action pull-right"><button class="white">アルバムを開く</button> <button class="white">アルバムに入れる</button></div></header><section class="tshirt-design-container clearfix"><div class="aside col-xs-4"><!-- Default--><ul class="box-design-option" id="choice-design-option" ng-show="isShowLeftPanel=='default' " ng-include="designPartDefault"></ul><!-- Illustration design--><ul class="box-design-option" id="choice-illustration" ng-show="isShowLeftPanel=='illustration'" ng-include="designPartIllustration"></ul><!-- Custom image design--><ul class="box-design-option" id="choice-image" ng-show="isShowLeftPanel=='image'" ng-include="designPartImage"></ul><!-- Text design--><ul class="box-design-option" id="choice-text" ng-show="isShowLeftPanel=='text'" ng-include="designPartText"></ul></div><div class="design-content col-xs-8"><div class="content" ng-style="{'background-color' : tShirtColorCode}"><canvas id="main-design-container" width="510px" height="620px" class="selection-design lower-canvas"></canvas></div><div class="agree-design"><img src="images/agree-design.png" alt="agree design"></div><div class="trash-design"><img src="images/trash.png" alt="trash design"></div></div></section></div></div></div></div> | |
| 1 | +<!-- Modal --> | |
| 2 | +<div class="modal fade" id="tshirt-design" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" ng-controller="TshirtdesignCtrl"> | |
| 3 | + | |
| 4 | + <div class="modal-dialog" role="document"> | |
| 5 | + <div class="modal-content"> | |
| 6 | + <div class="modal-header"> | |
| 7 | + <button class="black" ng-click="modalClose()"><i class="fa fa-times" aria-hidden="true"></i> キャンセル</button> | |
| 8 | + <button class="black"> <i class="fa fa-angle-right" aria-hidden="true"></i> はじめての方へ</button> | |
| 9 | + </div> | |
| 10 | + <div class="modal-body"> | |
| 11 | + <header class="clearfix"> | |
| 12 | + <ul class="nav pull-left"> | |
| 13 | + <li ng-class="{'active': isShowLeftPanel=='text'}" ng-click="showDesignTab('text')"> | |
| 14 | + <i class="fa fa-jpy" aria-hidden="true"></i> 文字 | |
| 15 | + </li> | |
| 16 | + <li ng-class="{'active': isShowLeftPanel=='illustration'}" ng-click="showDesignTab('illustration')"> | |
| 17 | + <i class="fa fa-btc" aria-hidden="true"></i> イラスト・イメージ | |
| 18 | + </li> | |
| 19 | + <li ng-class="{'active': isShowLeftPanel=='image'}" ng-click="showDesignTab('image')"> | |
| 20 | + <i class="fa fa-money" aria-hidden="true"></i> 自分の画像・写真 | |
| 21 | + </li> | |
| 22 | + <li> | |
| 23 | + <i class="fa fa-minus-circle" aria-hidden="true"></i> 全消去 | |
| 24 | + </li> | |
| 25 | + </ul> | |
| 26 | + <div class="action pull-right"> | |
| 27 | + <button class="white"> | |
| 28 | + アルバムを開く | |
| 29 | + </button> | |
| 30 | + <button class="white"> | |
| 31 | + アルバムに入れる | |
| 32 | + </button> | |
| 33 | + </div> | |
| 34 | + </header> | |
| 35 | + <section class="tshirt-design-container clearfix"> | |
| 36 | + <div class="aside col-xs-4"> | |
| 37 | + <!-- Default--> | |
| 38 | + <ul class="box-design-option" id="choice-design-option" ng-show="isShowLeftPanel=='default' " ng-include="designPartDefault"> | |
| 39 | + </ul> | |
| 40 | + <!-- Illustration design--> | |
| 41 | + <ul class="box-design-option" id="choice-illustration" ng-show="isShowLeftPanel=='illustration'" ng-include="designPartIllustration"> | |
| 42 | + </ul> | |
| 43 | + <!-- Custom image design--> | |
| 44 | + <ul class="box-design-option" id="choice-image" ng-show="isShowLeftPanel=='image'" ng-include="designPartImage"> | |
| 45 | + </ul> | |
| 46 | + <!-- Text design--> | |
| 47 | + <ul class="box-design-option" id="choice-text" ng-show="isShowLeftPanel=='text'" ng-include="designPartText"> | |
| 48 | + </ul> | |
| 49 | + </div> | |
| 50 | + <div class="design-content col-xs-8"> | |
| 51 | + <div class="content" ng-style="{'background-color' : tShirtColorCode}"> | |
| 52 | + <canvas id="main-design-container" width="510px" height="620px" class="selection-design lower-canvas"> | |
| 53 | + | |
| 54 | + </canvas> | |
| 55 | + </div> | |
| 56 | + <div class="agree-design"> | |
| 57 | + <img src="images/agree-design.png" alt="agree design" /> | |
| 58 | + </div> | |
| 59 | + <div class="trash-design"> | |
| 60 | + <img src="images/trash.png" alt="trash design" /> | |
| 61 | + </div> | |
| 62 | + </div> | |
| 63 | + </section> | |
| 64 | + </div> | |
| 65 | + </div> | |
| 66 | + </div> | |
| 67 | +</div> |