43e66c7ac4
All checks were successful
Deploy Production (crewsportswear.com) / deploy (push) Successful in 1m57s
4147 lines
190 KiB
PHP
4147 lines
190 KiB
PHP
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||
<meta name="csrf_token" content="{{ csrf_token() }}" />
|
||
<title>Designer</title>
|
||
|
||
<!-- Latest compiled and minified CSS -->
|
||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
|
||
|
||
<!-- ---- Include the above in your HEAD tag -------- -->
|
||
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
|
||
|
||
<link href="{{asset('/designer/css/custom-style.css')}}" rel="stylesheet">
|
||
<link href="{{asset('/designer/css/tab-styles.css')}}" rel="stylesheet">
|
||
<link href="{{asset('/designer/css/input-range-style.css')}}" rel="stylesheet">
|
||
<link href="{{asset('/designer/css/spectrum.css')}}" rel="stylesheet">
|
||
<link href="{{asset('/designer/css/one-by-one-slider.css')}}" rel="stylesheet">
|
||
<link href="{{asset('/designer/custom-fonts/custom-fonts.php')}}" rel='stylesheet' type='text/css'>
|
||
|
||
<style>
|
||
.carousel-indicators > li,
|
||
.carousel-indicators > li.active{
|
||
width: 100px;
|
||
height: 25px;
|
||
border-radius: 0;
|
||
border: solid 1px grey;
|
||
background:white ;
|
||
text-indent: 0;
|
||
}
|
||
.carousel-indicators > li.active {
|
||
background: lightgrey;
|
||
}
|
||
.custom-navbar-brand>img {
|
||
display: block;
|
||
height: 36px;
|
||
margin-top: -9px;
|
||
}
|
||
.body-spacer{
|
||
padding: 20px;
|
||
}
|
||
.visualizer-container{
|
||
height: 510px;
|
||
width: 100%;
|
||
margin: auto;
|
||
}
|
||
.panel-default{
|
||
font-size: 12px;
|
||
}
|
||
|
||
.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover{
|
||
color: #000;
|
||
background-color: #f5f5f5;
|
||
}
|
||
.nav-pills>li>a{
|
||
border-radius: 2px;
|
||
}
|
||
#wrapper{
|
||
width: 1300px;
|
||
overflow: hidden;
|
||
margin: 0 auto;
|
||
}
|
||
#btn-body-gradient{
|
||
/* background: black; For browsers that do not support gradients */
|
||
background: -webkit-linear-gradient(black, white); /* For Safari 5.1 to 6.0 */
|
||
background: -o-linear-gradient(black, white); /* For Opera 11.1 to 12.0 */
|
||
background: -moz-linear-gradient(black, white); /* For Firefox 3.6 to 15 */
|
||
background: linear-gradient(black, white); /* Standard syntax */
|
||
-webkit-text-stroke-width: 1px;
|
||
-webkit-text-stroke-color: white;
|
||
border-radius: 0px;
|
||
border-color: #000000;
|
||
width: 45px;
|
||
height: 45px;
|
||
padding:5px;
|
||
}
|
||
|
||
#btn-body-pattern-gradient{
|
||
background: -webkit-linear-gradient(black, white); /* For Safari 5.1 to 6.0 */
|
||
background: -o-linear-gradient(black, white); /* For Opera 11.1 to 12.0 */
|
||
background: -moz-linear-gradient(black, white); /* For Firefox 3.6 to 15 */
|
||
background: linear-gradient(black, white); /* Standard syntax */
|
||
-webkit-text-stroke-width: 1px;
|
||
-webkit-text-stroke-color: white;
|
||
border-radius: 0px;
|
||
border-color: #000000;
|
||
width: 45px;
|
||
height: 45px;
|
||
padding:5px;
|
||
}
|
||
|
||
.patternThumbs, .patternTrimThumbs {
|
||
width: 45px;
|
||
height: 45px;
|
||
padding:5px;
|
||
border-radius: 0px;
|
||
border-color: #000000;
|
||
}
|
||
|
||
.patternBox{
|
||
margin-left: 8px;
|
||
margin-right: 8px;
|
||
}
|
||
|
||
.row-trim-gradient{
|
||
display:none;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
#row-body-gradient{
|
||
display:none;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
#addNewTextId{
|
||
display: none;
|
||
}
|
||
|
||
.canvas-container{
|
||
margin:auto;
|
||
}
|
||
|
||
.addMarginLeft{
|
||
margin-left:5px;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
#textProperties{
|
||
display: none;
|
||
}
|
||
|
||
.font-name-bottom{
|
||
background-color: #f3f3f3;
|
||
padding: 5px;
|
||
margin-top: 14px;
|
||
font-size: 10px
|
||
}
|
||
.custom-font-td:hover{
|
||
background-color: #f2f2f2; !important;
|
||
cursor: pointer;
|
||
}
|
||
.carousel-inner>.item>a>img, .carousel-inner>.item>img, .img-responsive, .clipart-thumnail a>img, .clipart-thumnail>img{
|
||
height: 100px;
|
||
}
|
||
.clipart-thumnail {
|
||
border: none;
|
||
}
|
||
|
||
.sendSelectedObjectToFront{
|
||
height: 45px;
|
||
width: 45px;
|
||
background-image: url("{{asset('/images/bring_forward.png')}}");
|
||
background-repeat: no-repeat;
|
||
background-size: cover;
|
||
}
|
||
.sendSelectedObjectBack{
|
||
height: 45px;
|
||
width: 45px;
|
||
background-image: url("{{asset('/images/send_backward.png')}}");
|
||
background-repeat: no-repeat;
|
||
background-size: cover;
|
||
}
|
||
|
||
.team-name-standard{
|
||
height: 45px;
|
||
width: 45px;
|
||
background-image: url("{{asset('/images/bring_forward.png')}}");
|
||
background-repeat: no-repeat;
|
||
background-size: cover;
|
||
}
|
||
.center-vertical{
|
||
height: 45px;
|
||
width: 45px;
|
||
background-image: url("{{asset('/images/align-v1.png')}}");
|
||
background-repeat: no-repeat;
|
||
background-size: cover;
|
||
}
|
||
|
||
.center-horizontal{
|
||
height: 45px;
|
||
width: 45px;
|
||
background-image: url("{{asset('/images/align-h1.png')}}");
|
||
background-repeat: no-repeat;
|
||
background-size: cover;
|
||
}
|
||
</style>
|
||
|
||
</head>
|
||
<body>
|
||
@include('layout.navbar')
|
||
<div class="body-spacer"></div>
|
||
<div id="wrapper">
|
||
<div class="container-fluid">
|
||
<div class="row">
|
||
<div class="col-lg-7 col-md-7 col-sm-12">
|
||
<div class="panel with-nav-tabs panel-default " style="min-height:300px; height: 602px;">
|
||
<div class="panel-heading">
|
||
<ul class="nav nav-tabs nav-justified" id="uniform_sides">
|
||
@foreach($templatepaths_arrays as $k => $template)
|
||
<li class="@if ($template->Side == 'Front') active @endif" data-tab="li_{{ $template->Side }}_{{ $template->Type }}" data-object-svg="objSVG_{{ $template->Type }}_{{ $template->Side }}" data-canvas-id="canvas_{{ $template->Type }}_{{ $template->Side }}" >
|
||
<a i href="#a_{{ $template->Side }}_{{ $template->Type }}" data-toggle="tab" class="svg">
|
||
{{ $template->Type }} {{ $template->Side }}
|
||
</a>
|
||
</li>
|
||
@endforeach
|
||
</ul>
|
||
</div>
|
||
<div class="panel-body">
|
||
<div class="tab-content">
|
||
@foreach($templatepaths_arrays as $k => $template)
|
||
<div class="tab-pane @if ($template->Side == 'Front') active @endif" id="a_{{ $template->Side }}_{{ $template->Type }}">
|
||
<div class="col-md-12" style="overflow: auto;">
|
||
<div class="visualizer-container divName">
|
||
<div id="objSVG_{{ $template->Type }}_{{ $template->Side }}" height="504px" style="position:absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);">
|
||
</div>
|
||
|
||
@if($template->Type == "Jersey" AND $template->Side == "Front")
|
||
<canvas id="canvas_{{ $template->Type }}_{{ $template->Side }}" width="219px" height="383px" style="margin-top:57px; margin-left: -4px;"></canvas>
|
||
@endif
|
||
|
||
@if($template->Type == "Jersey" AND $template->Side == "Back")
|
||
<canvas id="canvas_{{ $template->Type }}_{{ $template->Side }}" width="220px" height="385px" style="margin-top:13px;"></canvas>
|
||
@endif
|
||
|
||
@if($template->Type == "Shorts" AND $template->Side == "Right")
|
||
<canvas id="canvas_{{ $template->Type }}_{{ $template->Side }}" width="171px;" height="365px" style="margin-top:110px; margin-left: 0px;" ></canvas>
|
||
@endif
|
||
|
||
@if($template->Type == "Shorts" AND $template->Side == "Left")
|
||
<canvas id="canvas_{{ $template->Type }}_{{ $template->Side }}" width="171px" height="365px" style="margin-top:110px; margin-left: 0px;" ></canvas>
|
||
@endif
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
@endforeach
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-lg-5 col-md-5 col-sm-12">
|
||
<div class="panel with-nav-tabs panel-default">
|
||
<div class="panel-heading">
|
||
<ul class="nav nav-tabs nav-justified" id="side-controls">
|
||
<li class="active"><a href="#tab-change-color" id="tab-change-color1" data-toggle="tab"><b style="color:red;">Step 1</b><br>Uniform Color</a></li>
|
||
<li><a href="#tab-add-text" id="tab-add-text1" data-toggle="tab"><b style="color:red;">Step 2</b><br>Team Name</a></li>
|
||
<li><a href="#tab-add-number" id="tab-add-number1" data-toggle="tab"><b style="color:red;">Step 3</b><br>Name / Number</a></li>
|
||
<li><a href="#tab-clipart" id="tab-clipart1" data-toggle="tab"><i class="fa fa-shirtsinbulk" aria-hidden="true"></i><br>Add<br>Clipart(s)</a></li>
|
||
<li><a href="#tab-upload-image" id="tab-upload-image1" data-toggle="tab"><i class="fa fa-image" aria-hidden="true"></i><br>Add<br>Image(s)</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="panel-body" style="height: 441px; overflow:auto;">
|
||
<div class="tab-content">
|
||
<div class="tab-pane fade in active" id="tab-change-color">
|
||
<h4>Body Color</h4>
|
||
|
||
<ul class="nav nav-pills nav-stacked col-md-4">
|
||
<li class="active"><a href="#tab_basecolor" data-toggle="pill">Solid Color</a></li>
|
||
<li><a href="#tab_gradient" data-toggle="pill">Gradient</a></li>
|
||
<li><a href="#tab_bodypattern" data-toggle="pill">Pattern</a></li>
|
||
</ul>
|
||
<div class="tab-content col-md-8">
|
||
|
||
<div class="tab-pane active" id="tab_basecolor">
|
||
<input type="hidden" id="body-color-type" value="Solid">
|
||
<table class="table table-custom" >
|
||
<tr>
|
||
<td>Solid Color</td>
|
||
</tr>
|
||
<tr>
|
||
<td>
|
||
<input type="hidden" name="mainColor" id="mainColor"/>
|
||
<br><small><i>* Click on box to Choose Color</i></small>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
|
||
<div class="tab-pane" id="tab_gradient">
|
||
<table class="table table-custom" >
|
||
<tr>
|
||
<td>Choose Gradient Color</td>
|
||
</tr>
|
||
<tr>
|
||
<td>
|
||
<button type="button" class="btn" id="btn-body-gradient" title="Gradient Color"></button>
|
||
<br><small><i>* Click on box to choose Gradient Color</i></small>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
|
||
<div id="row-body-gradient">
|
||
<div class="row">
|
||
<div class="form-group col-md-12 col-sm-12 col-xs-12">
|
||
Gradient Color:
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="form-group col-md-2 col-sm-2 col-xs-2">
|
||
<input type="hidden" class="gradientColor pull-right" name="Body_Gradient_Color1" id="Body_Gradient_Color1" data-gradient-type="Body" value="rgb(0, 0, 0)" />
|
||
</div>
|
||
<div class="form-group col-md-10 col-sm-10 col-xs-10">
|
||
<input type="range" id="Offset_Body_Gradient_Color1" data-gradient-id="Body_Gradient_Color1" class="offsetGradientColor form-control input-sm" value="100" min="0" max="10" />
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="form-group col-md-2 col-sm-2 col-xs-2">
|
||
<input type="hidden" class="gradientColor pull-right" name="Body_Gradient_Color2" id="Body_Gradient_Color2" data-gradient-type="Body" value="rgb(255, 255, 255)" />
|
||
</div>
|
||
<div class="form-group col-md-10 col-sm-10 col-xs-10">
|
||
<input type="range" id="Offset_Body_Gradient_Color2" data-gradient-id="Body_Gradient_Color2" class="offsetGradientColor form-control input-sm" value="0" min="0" max="10" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tab-pane" id="tab_bodypattern">
|
||
<input type="hidden" id="body-pattern-color-type" value="Solid" />
|
||
<table class="table table-custom">
|
||
<tr>
|
||
<td>
|
||
Select Pattern
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="text-center">
|
||
<div class="carousel slide multi-item-carousel" id="theCarousel" data-interval="false">
|
||
<div class="carousel-inner">
|
||
@foreach ($pattern_arrays as $i => $val)
|
||
<div class="item @if ($i == 0) active @endif">
|
||
<div class="btn-group patternBox ">
|
||
<button type="button" data-pattern-path="{{ $val[0]->SVGPath }}" class="patternThumbs btn" data-id="{{ $val[0]->PatternId }}" style="background-image:url('{{ config('site_config.images_directory') }}{{ $val[0]->PatternThumbnail }}'); background-size:cover; background-repeat: no-repeat;" @if ($i == 0) disabled @endif> @if ($i == 0) <i class="fa fa-2 fa-check" aria-hidden="true"></i> @endif</button>
|
||
</div>
|
||
</div>
|
||
@endforeach
|
||
</div>
|
||
<a class="left carousel-control" href="#theCarousel" data-slide="prev" style="width:50px"><i class="fa fa-chevron-left custom-chevron-left"></i></a>
|
||
<a class="right carousel-control" href="#theCarousel" data-slide="next" style="width:50px"><i class="fa fa-chevron-right custom-chevron-right"></i></a>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
<div class="row">
|
||
<div id="patternColorChoices">
|
||
<input type="hidden" name="body-pattern-name" id="body-pattern-name" value="noPattern,0">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
@for($i = 1; $i <= $template_arrays[0]->Trim; $i++)
|
||
<div class="row">
|
||
<div class="form-group col-md-12 col-sm-12 col-xs-12">
|
||
<hr style="margin-top: 10px; margin-bottom: 1px;">
|
||
</div>
|
||
</div>
|
||
<h4>Trim {{ $i }}</h4>
|
||
<ul class="nav nav-pills nav-stacked col-md-4">
|
||
<li class="active"><a href="#tab_trim_basecolor{{ $i }}" data-toggle="pill">Base Color</a></li>
|
||
<li><a href="#tab_trimpattern{{ $i }}" data-toggle="pill">Pattern</a></li>
|
||
</ul>
|
||
|
||
<div class="tab-content col-md-8">
|
||
<div class="tab-pane active" id="tab_trim_basecolor{{ $i }}">
|
||
<input type="hidden" id="trim-{{ $i }}-color-type" value="Solid">
|
||
<table class="table table-custom">
|
||
<tr>
|
||
<td>Solid Color</td>
|
||
<!-- <td>Gradient Color</td> -->
|
||
</tr>
|
||
<tr>
|
||
<td>
|
||
<input type="hidden" class="trimColor" data-trim-num="{{ $i }}" name="trim{{ $i }}" id="Trim_{{ $i }}" value="rgb(204, 204, 204)" />
|
||
<br><small><i>* Click on box to Choose Color</i></small>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
<div class="row-trim-gradient" id="row-trim-{{ $i }}-gradient">
|
||
<b>Gradient Color:</b>
|
||
<div class="row">
|
||
<div class="form-group col-md-2 col-sm-2 col-xs-2">
|
||
<input type="hidden" class="gradientColor pull-right" name="Trim_{{ $i }}_Gradient_Color1" id="Trim_{{ $i }}_Gradient_Color1" data-gradient-type="Trim" data-trim-num="{{ $i }}" value="rgb(0, 0, 0)" />
|
||
</div>
|
||
<div class="form-group col-md-10 col-sm-10 col-xs-10">
|
||
<input type="range" id="Offset_Trim_{{ $i }}_Gradient_Color1" data-gradient-id="Trim_{{ $i }}_Gradient_Color1" class="offsetGradientColor form-control input-sm" value="100" min="0" max="10" />
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="form-group col-md-2 col-sm-2 col-xs-2">
|
||
<input type="hidden" class="gradientColor pull-right" name="Trim_{{ $i }}_Gradient_Color2" id="Trim_{{ $i }}_Gradient_Color2" data-gradient-type="Trim" data-trim-num="{{ $i }}" value="rgb(255, 255, 255)" />
|
||
</div>
|
||
<div class="form-group col-md-10 col-sm-10 col-xs-10">
|
||
<input type="range" id="Offset_Trim_{{ $i }}_Gradient_Color2" data-gradient-id="Trim_{{ $i }}_Gradient_Color2" class="offsetGradientColor form-control input-sm" value="0" min="0" max="10" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tab-pane" id="tab_trimpattern{{ $i }}">
|
||
<input type="hidden" id="trim-{{ $i }}-pattern-color-type" value="Solid">
|
||
<table class="table table-custom">
|
||
<tr>
|
||
<td>
|
||
Select Pattern
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="text-center">
|
||
<div class="carousel slide multi-item-carousel" id="theCarousel{{ $i }}" data-interval="false">
|
||
<div class="carousel-inner">
|
||
@foreach ($pattern_arrays as $r => $val)
|
||
<div class="item @if ($r == 0) active @endif">
|
||
<div class="btn-group patternBox ">
|
||
<button type="button" data-pattern-path="{{ $val[0]->SVGPath }}" class="patternTrimThumbs patternTrim{{ $i }} btn" data-id="{{ $val[0]->PatternId }}" data-trim="{{ $i }}" style="background-image:url('{{ config('site_config.images_directory') }}{{ $val[0]->PatternThumbnail }}'); background-size:cover; background-repeat: no-repeat;" @if ($r == 0) disabled @endif> @if ($r == 0) <i class="fa fa-2 fa-check" aria-hidden="true"></i> @endif</button>
|
||
</div>
|
||
</div>
|
||
@endforeach
|
||
</div>
|
||
<a class="left carousel-control" href="#theCarousel{{ $i }}" data-slide="prev" style="width:50px"><i class="fa fa-chevron-left custom-chevron-left"></i></a>
|
||
<a class="right carousel-control" href="#theCarousel{{ $i }}" data-slide="next" style="width:50px"><i class="fa fa-chevron-right custom-chevron-right"></i></a>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
<div class="row">
|
||
<div id="trim-{{ $i }}-pattern-color-choices">
|
||
<input type="hidden" name="Trim_{{ $i }}_patternName" id="Trim_{{ $i }}_patternName" value="noPattern,0" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
@endfor
|
||
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="tab-add-text">
|
||
<div id="addNewTextId">
|
||
<div class="row">
|
||
<div class="form-group col-sm-12">
|
||
<button type="button" class="btn btn-danger pull-right btn-sm remove addMarginLeft" title="Remove object"><i class="fa fa-trash" aria-hidden="true"></i></button>
|
||
<button type="button" onclick="addNewText();" class="btn btn-primary pull-right btn-sm"><i class="fa fa-plus" aria-hidden="true"></i> New Text</button>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="form-group col-sm-12">
|
||
<label>Enter team name here</label>
|
||
<textarea name="editedTextInput" id="editedTextInput" class="form-control" placeholder="Enter team name here"></textarea>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="enterTextId">
|
||
<div class="row">
|
||
<div class="form-group col-sm-12">
|
||
<label>Enter team name here</label>
|
||
<textarea name="textInput" id="textInput" class="form-control" placeholder="Enter team name here"></textarea>
|
||
<!--span id="errfirstName" style="color: #dd4b39"></span> !-->
|
||
</div>
|
||
|
||
<div class="form-group col-sm-12">
|
||
<button type="button" id="okBtn" onclick="addText();" class="btn btn-primary btn-block btn-sm">OK</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="textProperties">
|
||
@include('designer.text_properties')
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="tab-add-number">
|
||
<input type="hidden" id="countbtn" value="0" />
|
||
<div id="addNumberId" style="display:none;">
|
||
<div class="row">
|
||
<div class="form-group col-sm-12">
|
||
<button type="button" class="btn btn-danger pull-right btn-sm removeNameNumber addMarginLeft" title="Remove object"><i class="fa fa-trash" aria-hidden="true"></i></button>
|
||
<div id="NameNumberId"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="form-group col-sm-12">
|
||
<label>Edit Name / Number</label>
|
||
<textarea name="editedNumberInput" id="editedNumberInput" class="form-control" placeholder="Enter number here"></textarea>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="enterNumberId">
|
||
<div class="row">
|
||
<div class="form-group col-sm-12">
|
||
<button type="button" id="btnNumber" class="btn btn-warning btn-block btn-lg" onclick="addNameNumber();"><i class="fa fa-plus" aria-hidden="true"></i> Add Name and Number</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="numberProperties" style="display:none;">
|
||
@include('designer.text_properties')
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="tab-clipart">
|
||
<div id="tab-clipart-content">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="tab-upload-image">
|
||
<!-- <div class="row">
|
||
<div class="form-group col-md-12">
|
||
<button id="img-remove-btn" type="button" class="btn btn-danger pull-right btn-sm remove addMarginLeft" title="Remove object"><i class="fa fa-trash" aria-hidden="true"></i></button>
|
||
</div>
|
||
</div> -->
|
||
<div class="row">
|
||
<div class="form-group col-md-12">
|
||
<h4>Add Image(s)</h4>
|
||
<hr>
|
||
<input type="file" id="upload-images" class="form-control" placeholder="Choose Image">
|
||
</div>
|
||
</div>
|
||
<!-- <hr> -->
|
||
<div id="image-properties">
|
||
|
||
<div class="row">
|
||
<div class="col-md-6">
|
||
<h4>Image Properties</h4>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<button class="btn btn-sm btn-default pull-right addMarginLeft" id="btn-close-clipart-properties" title="Close Clipart Properties"><i class="fa fa-remove" aria-hidden="true"></i> Close</button>
|
||
<button id="img-remove-btn" type="button" class="btn btn-danger pull-right btn-sm remove addMarginLeft" title="Remove object"><i class="fa fa-trash" aria-hidden="true"></i></button>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="form-group col-md-3 col-sm-3 col-xs-3">
|
||
<label>Opacity</label>
|
||
</div>
|
||
<div class="form-group col-md-6 col-sm-6 col-xs-6">
|
||
|
||
<input type="range" class="form-control input-sm opacityTextSlider" value="1" min="0" max="10" />
|
||
</div>
|
||
<div class="form-group col-md-3 col-sm-3 col-xs-3">
|
||
<input type="text" style="margin-top:5px;" class="form-control input-sm text-center opacityTextValue" />
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="form-group col-md-3 col-sm-3 col-xs-3">
|
||
<label>Rotate</label>
|
||
</div>
|
||
<div class="form-group col-md-6 col-sm-6 col-xs-6">
|
||
|
||
<input type="range" class="form-control input-sm rotateTextSlider" value="0" min="-180" max="180" />
|
||
</div>
|
||
<div class="form-group col-md-3 col-sm-3 col-xs-3">
|
||
<input type="text" style="margin-top:5px;" class="form-control input-sm text-center rotateTextValue"/>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="form-group col-md-5 col-sm-6 col-xs-6">
|
||
<label>Layer Order</label><br>
|
||
<button class="btn btn-sm btn-default sendSelectedObjectToFront" title="Bring Forward"></button>
|
||
<button class="btn btn-sm btn-default sendSelectedObjectBack" title="Send Backward"></button>
|
||
</div>
|
||
<div class="form-group col-md-7 col-sm-6 col-xs-6">
|
||
<label>Position</label><br>
|
||
<button class="btn btn-sm btn-default " style="margin:2px;" onclick="centerOnly();">Center</button>
|
||
<button class="btn btn-sm btn-default" style="margin:2px;" onclick="centerVer();"> <img src="images/align-v1.png" height="16px;" /> Center Vertical</button>
|
||
<button class="btn btn-sm btn-default" style="margin:2px;" onclick="centerHor();" > <img src="images/align-h1.png" height="16px;" /> Center Horizontal</button>
|
||
</div>
|
||
</div>
|
||
<hr>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<div class="panel-footer">
|
||
<div class="row">
|
||
<div class="form-group col-md-12">
|
||
<a href="{{ url('user/my-designs') }}" type="button" class="btn btn-lg btn-default pull-right addMarginLeft"><i class="fa fa-remove" aria-hidden="true"></i> Cancel</a>
|
||
<button type="button" class="btn btn-lg btn-primary pull-right" data-toggle="modal" data-target="#modalDesignName"><i class="fa fa-floppy-o" aria-hidden="true"></i> Save Design</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- modals -->
|
||
<div class="modal fade" id="fontsModal" role="dialog">
|
||
<div class="modal-dialog modal-lg">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<button type="button" class="close" data-dismiss="modal">×</button>
|
||
<h4 class="modal-title">Fonts</h4>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="row">
|
||
<div class="col-md-12">
|
||
<table class="table table-bordered">
|
||
|
||
@foreach($fonts_array as $fonts)
|
||
|
||
@define $i++
|
||
|
||
@if ($i % 4 == 1)
|
||
<tr>
|
||
@endif
|
||
<td class="custom-font-td col-md-3 text-center" style="padding: 0px;" data-font-size="{{ $fonts->additionalSize }}" data-font-style="{{ $fonts->fontFamily }}" data-font-display="{{ $fonts->fontNameDisplay }}">
|
||
<div style="font-family:'{{ $fonts->fontFamily }}'; font-size:1.5em; padding: 5px;" class="add-text-content"></div>
|
||
<div class="font-name-bottom">{{ $fonts->fontNameDisplay }} <i class=""></i></div>
|
||
</td>
|
||
|
||
@if ($i % 4 == 0)
|
||
</tr>
|
||
@endif
|
||
@endforeach
|
||
|
||
<!-- //if the counter is not divisible by 3, we have an open row -->
|
||
@define $spacercells = 4 - ($i % 4);
|
||
@if ($spacercells < 4)
|
||
@define $j
|
||
@for($j=1; $j<=$spacercells; $j++)
|
||
<td></td>
|
||
|
||
@endfor
|
||
</tr>
|
||
@endif
|
||
|
||
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="modal fade" id="modalDesignName" tabindex="-1" data-backdrop="static" role="dialog" aria-labelledby="myModalLabel">
|
||
<div class="modal-dialog" role="document">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
|
||
<h4 class="modal-title">Design Name</h4>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="row">
|
||
<div class="col-xs-12">
|
||
<label>Name your design</label>
|
||
<textarea class="form-control" id="design_name"></textarea>
|
||
<br>
|
||
<button type="button" id="btn_submitDesignName" class="btn btn-lg btn-primary btn-block">Submit</button>
|
||
<br><br>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- end modals -->
|
||
|
||
<!-- Footer -->
|
||
@include('layout.footer')
|
||
<!-- End Footer -->
|
||
|
||
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
|
||
<!-- Latest compiled and minified JavaScript -->
|
||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
|
||
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.15/fabric.min.js"></script>
|
||
<script src="https://rawgit.com/EffEPi/fabric.curvedText/master/fabric.curvedText.js"></script>
|
||
<script src="{{asset('/designer/js/spectrum.js')}}"></script>
|
||
|
||
<script src="{{asset('/designer/js/custom-script.js')}}"></script>
|
||
|
||
<script>
|
||
|
||
$(document).ready(function() {
|
||
myCart();
|
||
$('#toTop').click(function() {
|
||
$('body,html').animate({scrollTop:0},800);
|
||
});
|
||
|
||
// $('#custom-navbar-brand').html('<img src="{{asset("/images/logo.png")}}">');
|
||
|
||
// calling functions
|
||
|
||
changeData();
|
||
colorPickerCustom();
|
||
templateColors('{{ $template_arrays[0]->TemplateCode }}');
|
||
loadClipartContent();
|
||
|
||
// end call
|
||
|
||
$('.multi-item-carousel .item').each(function(){
|
||
var next = $(this).next();
|
||
if (!next.length) {
|
||
next = $(this).siblings(':first');
|
||
}
|
||
|
||
next.children(':first-child').clone().appendTo($(this));
|
||
|
||
|
||
for (var i=0; i<2; i++){
|
||
|
||
next=next.next();
|
||
|
||
if (!next.length){
|
||
next=$(this).siblings(':first');
|
||
}
|
||
next.children(':first-child').clone().appendTo($(this));
|
||
}
|
||
|
||
});
|
||
|
||
initCanvas();
|
||
|
||
setTimeout(function(){
|
||
loadTemplateDesign();
|
||
}, 3000);
|
||
|
||
});
|
||
|
||
// design saving
|
||
$(document).on('button click', '#btn_submitDesignName', function(){
|
||
|
||
var design_name = $('#design_name').val();
|
||
if(design_name != ""){
|
||
submitSaveDesign(design_name);
|
||
}else{
|
||
alert("Please enter your design name.");
|
||
$('#design_name').focus();
|
||
}
|
||
|
||
});
|
||
|
||
function submitSaveDesign(design_name){
|
||
newformSaveDesign = document.createElement('form');
|
||
newformSaveDesign.name = 'formSaveDesign';
|
||
newformSaveDesign.method = 'POST';
|
||
newformSaveDesign.action = "{{url('designer/a/save-design')}}";
|
||
|
||
var SideAndPath = {!! json_encode($templatepaths_arrays) !!};
|
||
|
||
for (var i = 0; i < SideAndPath.length; i++) {
|
||
var sideName = SideAndPath[i]['Side'];
|
||
var type = SideAndPath[i]['Type'];
|
||
|
||
var contentName = "content_" + type + "_" + sideName;
|
||
//console.log(canvasName);
|
||
contentName = JSON.stringify(window['canvas_' + type + '_' + sideName].toObject(['idNumber'])); // = new fabric.Canvas(canvasName);
|
||
//console.log(contentName);
|
||
|
||
|
||
var inputName = "json_" + type + "_" + sideName;
|
||
var hiddenFieldContentDesign = "field_" + type + "_" + sideName;
|
||
|
||
hiddenFieldContentDesign = document.createElement("input");
|
||
hiddenFieldContentDesign.setAttribute("type", "hidden");
|
||
hiddenFieldContentDesign.setAttribute("name", inputName);
|
||
hiddenFieldContentDesign.setAttribute("value", contentName);
|
||
newformSaveDesign.appendChild(hiddenFieldContentDesign);
|
||
}
|
||
|
||
var hiddenFieldTemplateDetails = document.createElement("input");
|
||
hiddenFieldTemplateDetails.setAttribute("type", "hidden");
|
||
hiddenFieldTemplateDetails.setAttribute("name", "templateDetails");
|
||
hiddenFieldTemplateDetails.setAttribute("value", exportSVG());
|
||
newformSaveDesign.appendChild(hiddenFieldTemplateDetails);
|
||
|
||
var hiddenField_design_name = document.createElement("input");
|
||
hiddenField_design_name.setAttribute("type", "hidden");
|
||
hiddenField_design_name.setAttribute("name", "design_name");
|
||
hiddenField_design_name.setAttribute("value", design_name);
|
||
newformSaveDesign.appendChild(hiddenField_design_name);
|
||
|
||
var hiddenField_token = document.createElement("input");
|
||
hiddenField_token.setAttribute("type", "hidden");
|
||
hiddenField_token.setAttribute("name", "_token");
|
||
hiddenField_token.setAttribute("value", "<?= csrf_token(); ?>");
|
||
newformSaveDesign.appendChild(hiddenField_token);
|
||
|
||
document.body.appendChild(newformSaveDesign);
|
||
//console.log(exportSVG());
|
||
newformSaveDesign.submit();
|
||
}
|
||
|
||
function exportSVG(){
|
||
|
||
var finalJSON = [];
|
||
var arrayMainColor = [];
|
||
var arrayTrim = [];
|
||
var arrpatternColors = [];
|
||
var temp;
|
||
|
||
var arrayPatternColors = [];
|
||
var value = $('#body-pattern-name').val();
|
||
var p = value.split(',');
|
||
patternId = p[0];
|
||
patternNoOFColors = p[1];
|
||
|
||
if(patternNoOFColors > 0){
|
||
arrayPatternColors.push({
|
||
patternId : patternId,
|
||
patternColorType : $('#body-pattern-color-type').val(),
|
||
patternGradientColor1 : $('#Body_Pattern_Gradient_Color1').val(),
|
||
patternGradientColor2 : $('#Body_Pattern_Gradient_Color2').val(),
|
||
patternGradientOffset1 : $('#Offset_Body_Pattern_Gradient_Color1').val() * 10 + "%",
|
||
patternGradientOffset2 : $('#Offset_Body_Pattern_Gradient_Color2').val() * 10 + "%",
|
||
patternOpacity: $('#opacityPatternValue').val() / 10,
|
||
patternColors : arrpatternColors
|
||
|
||
});
|
||
for (i = 1; i <= patternNoOFColors; i++){
|
||
temp = {};
|
||
temp['PatternColor' + i] = $('#PatternColor'+i).val();
|
||
arrpatternColors.push(temp);
|
||
}
|
||
}
|
||
|
||
arrayMainColor.push({
|
||
type : $('#body-color-type').val(),
|
||
solidColor: $('#mainColor').val(),
|
||
// gradientColorId: 'gradientColor',
|
||
gradientColor1: $('#Body_Gradient_Color1').val(),
|
||
gradientColor2: $('#Body_Gradient_Color2').val(),
|
||
gradientColorOffset1: $('#Offset_Body_Gradient_Color1').val() * 10 + "%",
|
||
gradientColorOffset2: $('#Offset_Body_Gradient_Color2').val() * 10 + "%",
|
||
|
||
});
|
||
|
||
var numberOfTrimi = '{{ $template_arrays[0]->Trim }}';
|
||
|
||
for(var i = 0; i < numberOfTrimi; i++){
|
||
var trimCount = i + 1;
|
||
var SVGTrimId = "Trim_"+trimCount;
|
||
var TrimVar = "Trim"+trimCount;
|
||
var TrimPattern = "Trim"+trimCount+"_Pattern";
|
||
// Trim_2_PatternColor1
|
||
var getPatternValue = $('#Trim_'+trimCount+'_patternName').val();
|
||
var res = getPatternValue.split(',');
|
||
Trim_patternId = res[0];
|
||
Trim_patternNoOFColors = res[1];
|
||
|
||
var trimpatterncolor = "Trim"+trimCount+"_patternColor";
|
||
// console.log(Trim_patternId);
|
||
var patterncolor = getTrimPatternColor(Trim_patternNoOFColors, trimCount);
|
||
arrayTrim.push({
|
||
[TrimVar] : {
|
||
// color : $('#Trim_'+trimCount).val(),
|
||
type : $('#trim-'+trimCount+'-color-type').val(),
|
||
solidColor: $('#Trim_'+trimCount).val(),
|
||
// gradientColorId: 'gradientColor',
|
||
gradientColor1: $('#Trim_'+trimCount+'_Gradient_Color1').val(),
|
||
gradientColor2: $('#Trim_'+trimCount+'_Gradient_Color2').val(),
|
||
gradientColorOffset1: $('#Offset_Trim_'+trimCount+'_Gradient_Color1').val() * 10 + "%",
|
||
gradientColorOffset2: $('#Offset_Trim_'+trimCount+'_Gradient_Color2').val() * 10 + "%",
|
||
},
|
||
[TrimPattern] :{
|
||
patternId : Trim_patternId,
|
||
patternColorType : $('#trim-'+trimCount+'-pattern-color-type').val(),
|
||
// patternGradientId : 'gradientPattern',
|
||
patternGradientColor1 : $('#Trim_'+trimCount+'_Pattern_Gradient_Color1').val(),
|
||
patternGradientColor2 : $('#Trim_'+trimCount+'_Pattern_Gradient_Color2').val(),
|
||
patternGradientOffset1 : $('#Offset_Trim_'+trimCount+'_Pattern_Gradient_Color1').val() * 10 + "%",
|
||
patternGradientOffset2 : $('#Offset_Trim_'+trimCount+'_Pattern_Gradient_Color2').val() * 10 + "%",
|
||
// patternOpacity: $('#opacityPatternValue').val() / 10,
|
||
patternColors : patterncolor
|
||
},
|
||
|
||
// [trimpatterncolor] : {
|
||
// patterncolor
|
||
// }
|
||
|
||
});
|
||
;
|
||
|
||
}
|
||
|
||
|
||
|
||
finalJSON.push({
|
||
templateCode : '{{ $template_arrays[0]->TemplateCode }}',
|
||
mainColor : arrayMainColor,
|
||
patternColors : arrayPatternColors,
|
||
Trims: arrayTrim,
|
||
//contents: consolidatedContents,
|
||
});
|
||
|
||
// then to get the JSON string
|
||
var jsonString = JSON.stringify(finalJSON);
|
||
return jsonString;
|
||
|
||
// console.log(jsonString);
|
||
}
|
||
|
||
function getTrimPatternColor(patternColor, trimCount){
|
||
var trimcolor;
|
||
var Trim_Pattern_Color_Array = [];
|
||
for (k = 1; k <= patternColor; k++){
|
||
trimcolor = {};
|
||
trimcolor['PatternColor' + k] = $('#Trim_'+trimCount+'_PatternColor'+k).val();
|
||
Trim_Pattern_Color_Array.push(trimcolor);
|
||
// Trim_Pattern_Color_Array.push($('#Trim_'+trimCount+'_PatternColor'+k).val());
|
||
|
||
}
|
||
return Trim_Pattern_Color_Array;
|
||
// return false;
|
||
}
|
||
// end design saving
|
||
|
||
|
||
$("#uniform_sides li").click(function() {
|
||
onDeSelected();
|
||
if($(this).attr('data-canvas-id') == "canvas_Jersey_Front"){
|
||
canvas = canvas_Jersey_Front;
|
||
//console.log(canvas);
|
||
canvasID = "canvas_Jersey_Front";
|
||
canvas.calcOffset();
|
||
initCanvas();
|
||
|
||
}
|
||
|
||
if($(this).attr('data-canvas-id') == "canvas_Jersey_Back"){
|
||
canvas = canvas_Jersey_Back;
|
||
//console.log(canvas);
|
||
canvasID = "canvas_Jersey_Back";
|
||
canvas.calcOffset();
|
||
initCanvas();
|
||
|
||
}
|
||
|
||
if($(this).attr('data-canvas-id') == "canvas_Shorts_Left"){
|
||
canvas = canvas_Shorts_Left;
|
||
// console.log(canvas);
|
||
canvasID = "canvas_Shorts_Left";
|
||
canvas.calcOffset();
|
||
initCanvas();
|
||
|
||
}
|
||
|
||
if($(this).attr('data-canvas-id') == "canvas_Shorts_Right"){
|
||
canvas = canvas_Shorts_Right;
|
||
//console.log(canvas);
|
||
canvasID = "canvas_Shorts_Right";
|
||
canvas.calcOffset();
|
||
initCanvas();
|
||
|
||
}
|
||
});
|
||
|
||
// 1ST TAB <---####################################
|
||
$('#btn-body-gradient').on("click", function() {
|
||
|
||
$('#row-body-gradient').css({
|
||
'display':'block'
|
||
});
|
||
|
||
$(this).html('<i class="fa fa-2 fa-check" aria-hidden="true"></i>');
|
||
|
||
$('#body-color-type').val('Gradient');
|
||
|
||
var gradientId = $(this).attr('id');
|
||
|
||
var SideAndPath = {!! json_encode($templatepaths_arrays) !!};
|
||
|
||
for (var i = 0; i < SideAndPath.length; i++) {
|
||
var sideName = SideAndPath[i]['Side'];
|
||
var type = SideAndPath[i]['Type'];
|
||
var pathLocation = SideAndPath[i]['Path'];
|
||
|
||
var objectId = "objSVG_" + type + "_" + sideName;
|
||
var SVGColorId = type +"_"+sideName+"_"+"Color";
|
||
var getGradientId = sideName + "_" + type + "_Body_Gradient";
|
||
try{
|
||
document.getElementById(SVGColorId).setAttribute("fill", "url(#"+getGradientId+")");
|
||
}catch(e){
|
||
// error here
|
||
}
|
||
}
|
||
});
|
||
|
||
$(document).on('button click', '.patternThumbs', function(){
|
||
|
||
var patternSVGPath = $(this).attr('data-pattern-path');
|
||
|
||
var patternPath = "{{ config('site_config.images_directory') }}" + patternSVGPath;
|
||
|
||
var SideAndPath = {!! json_encode($templatepaths_arrays) !!};
|
||
|
||
for (var i = 0; i < SideAndPath.length; i++) {
|
||
var sideName = SideAndPath[i]['Side'];
|
||
var type = SideAndPath[i]['Type'];
|
||
|
||
var mainColorId = type + "_" + sideName + "_" + "Color";
|
||
var urlClippath = "url(#"+ mainColorId +"_Clippath_URL)";
|
||
var objectId = "objSVG_" + type + "_" + sideName;
|
||
var svgpatternidVal = mainColorId + "_Pattern";
|
||
var TypeAndSide = type + "_" + sideName;
|
||
|
||
if(patternSVGPath == ""){
|
||
var a = document.getElementById(objectId);
|
||
var svgDoc = a.contentDocument;
|
||
try{
|
||
document.getElementById(svgpatternidVal).innerHTML = "";
|
||
}catch(e){
|
||
//console.log(e);
|
||
}
|
||
}else{
|
||
loadPattern(patternPath, urlClippath, svgpatternidVal, objectId, TypeAndSide);
|
||
}
|
||
|
||
|
||
}
|
||
|
||
var getId = $(this).attr('data-id');
|
||
|
||
$.ajax({ //create an ajax request to load_page.php
|
||
|
||
type: "POST",
|
||
url: "{{url('designer/a/set-pattern')}}",
|
||
dataType: "html", //expect html to be returned
|
||
data: {
|
||
patternId : getId
|
||
},
|
||
beforeSend:function(xhr){
|
||
var token = $('meta[name="csrf_token"]').attr('content');
|
||
|
||
if (token) {
|
||
return xhr.setRequestHeader('X-CSRF-TOKEN', token);
|
||
}
|
||
xhr.setRequestHeader( 'X-Requested-With', 'XMLHttpRequest');
|
||
},
|
||
success: function(response){
|
||
|
||
if(getId != 'noPattern'){
|
||
|
||
$("#patternColorChoices").hide().html(response).fadeIn("slow");
|
||
|
||
loadPatternColor();
|
||
colorPickerCustom();
|
||
|
||
|
||
}else{
|
||
$("#patternColorChoices").html(response);
|
||
//backToNoPattern();
|
||
|
||
}
|
||
}
|
||
});
|
||
|
||
$(".patternThumbs").attr("disabled", false);
|
||
$(".patternThumbs").html('').fadeIn("slow");
|
||
$(this).attr("disabled", true);
|
||
$(this).html('<i class="fa fa-2 fa-check" aria-hidden="true"></i>');
|
||
|
||
$("#body-pattern-color-type").val("Solid");
|
||
|
||
});
|
||
|
||
$(document).on('button click', '.patternTrimThumbs', function(){
|
||
|
||
var patternSVGPath = $(this).attr('data-pattern-path');
|
||
var patternPath = "{{ config('site_config.images_directory') }}" + patternSVGPath;
|
||
var getTrimId = $(this).attr('data-trim');
|
||
|
||
var SideAndPath = {!! json_encode($templatepaths_arrays) !!};
|
||
|
||
for (var i = 0; i < SideAndPath.length; i++) {
|
||
var sideName = SideAndPath[i]['Side'];
|
||
var type = SideAndPath[i]['Type'];
|
||
|
||
var mainColorId = type + "_" + sideName + "_" + "Color";
|
||
var urlClippath = "url(#"+type + "_" + sideName +"_Trim_"+ getTrimId +"_Clippath_URL)";
|
||
var objectId = "objSVG_" + type + "_" + sideName;
|
||
var svgpatternidVal = type + "_" + sideName + "_Trim_" + getTrimId + "_Pattern";
|
||
var TypeAndSide = type + "_" + sideName + "_Trim_" + getTrimId;
|
||
|
||
if(patternSVGPath == ""){
|
||
var a = document.getElementById(objectId);
|
||
var svgDoc = a.contentDocument;
|
||
try{
|
||
document.getElementById(svgpatternidVal).innerHTML = "";
|
||
}catch(e){
|
||
//console.log(e);
|
||
}
|
||
}else{
|
||
loadPattern(patternPath, urlClippath, svgpatternidVal, objectId, TypeAndSide);
|
||
}
|
||
}
|
||
|
||
var getPatternId = $(this).attr('data-id');
|
||
|
||
$.ajax({ //create an ajax request to load_page.php
|
||
|
||
type: "POST",
|
||
url: "{{url('designer/a/set-trim-pattern')}}",
|
||
dataType: "html", //expect html to be returned
|
||
data: {
|
||
patternId : getPatternId,
|
||
trim : getTrimId,
|
||
},
|
||
beforeSend:function(xhr){
|
||
var token = $('meta[name="csrf_token"]').attr('content');
|
||
|
||
if (token) {
|
||
return xhr.setRequestHeader('X-CSRF-TOKEN', token);
|
||
}
|
||
xhr.setRequestHeader( 'X-Requested-With', 'XMLHttpRequest');
|
||
},
|
||
success: function(response){
|
||
|
||
if(getPatternId != 'noPattern'){
|
||
$("#trim-"+getTrimId+"-pattern-color-choices").hide().html(response).fadeIn("slow");
|
||
loadPatternColor();
|
||
colorPickerCustom();
|
||
}else{
|
||
$("#trim-"+getTrimId+"-pattern-color-choices").hide().html(response).fadeIn("slow");
|
||
|
||
}
|
||
}
|
||
});
|
||
|
||
$(".patternTrim"+getTrimId).attr("disabled", false);
|
||
$(".patternTrim"+getTrimId).html('').fadeIn("slow");
|
||
$(this).attr("disabled", true);
|
||
$(this).html('<i class="fa fa-2 fa-check" aria-hidden="true"></i>');
|
||
$('#trim-'+getTrimId+'-pattern-color-type').val('Solid');
|
||
|
||
});
|
||
|
||
|
||
$(document).on('select click', '#btn-body-pattern-gradient', function() {
|
||
var gradientId = $(this).attr('id');
|
||
$('#body-pattern-color-type').val('Gradient');
|
||
|
||
$("#row-body-pattern-gradient").css('display', 'block');
|
||
$(this).html('<i class="fa fa-2 fa-check" aria-hidden="true"></i>');
|
||
var SideAndPath = {!! json_encode($templatepaths_arrays) !!};
|
||
|
||
for (var i = 0; i < SideAndPath.length; i++) {
|
||
var sideName = SideAndPath[i]['Side'];
|
||
var type = SideAndPath[i]['Type'];
|
||
var pathLocation = SideAndPath[i]['Path'];
|
||
|
||
var objectId = "objSVG_" + type + "_" + sideName;
|
||
var patternColorId = type + "_" + sideName + "_PatternColor1";
|
||
// patternColorId = type + "_" + sideName + "_" + patternId;
|
||
var getGradientId = sideName + "_" + type + "_Body_Pattern_Gradient";
|
||
// Front_Jersey_PatternColor1
|
||
try{
|
||
document.getElementById(patternColorId).setAttribute("fill", "url(#"+getGradientId+")");
|
||
// document.getElementById(patternColorId).setAttribute("fill", onMoveColor);
|
||
}catch(e){
|
||
// error here
|
||
}
|
||
}
|
||
|
||
});
|
||
|
||
function colorPickerCustom(){
|
||
$('.sp-replacer').css({
|
||
'padding':'0px',
|
||
'height':'45px',
|
||
'width':'45px',
|
||
'radius': '2px'
|
||
});
|
||
|
||
$('.sp-preview').css({
|
||
'width':'45px',
|
||
'height':'45px',
|
||
'border':'none'
|
||
});
|
||
$('.sp-dd').css({
|
||
'display':'none'
|
||
});
|
||
}
|
||
|
||
function changeData() {
|
||
|
||
var SideAndPath = {!! json_encode($templatepaths_arrays) !!};
|
||
|
||
for (var i = 0; i < SideAndPath.length; i++) {
|
||
var sideName = SideAndPath[i]['Side'];
|
||
var type = SideAndPath[i]['Type'];
|
||
var pathLocation = SideAndPath[i]['Path'];
|
||
|
||
var objectId = "objSVG_" + type + "_" + sideName;
|
||
var SVGColorId = type +"_"+sideName+"_Color";
|
||
var gradientIds = sideName+"_"+type+"_Gradients";
|
||
var gradientPrefix = sideName+"_"+type+"_";
|
||
if(!document.getElementById(objectId))
|
||
return false;
|
||
var tempPath = "{{ config('site_config.images_directory') }}" + pathLocation;
|
||
loadTemplate(tempPath, objectId, gradientIds, gradientPrefix);
|
||
}
|
||
}
|
||
|
||
function loadTemplate(tempPath, objectId, gradientIds, gradientPrefix){
|
||
$.get(tempPath, null, function(data){
|
||
var svgNode = $("svg", data);
|
||
|
||
var docNode = document.adoptNode(svgNode[0]);
|
||
$('#'+objectId).html(docNode);
|
||
}, 'xml');
|
||
|
||
setTimeout(function() {
|
||
|
||
var template_array = {!! json_encode($template_arrays) !!};
|
||
var TrimCount = template_array[0]['Trim'];
|
||
var ListGradient = document.getElementById(gradientIds);
|
||
|
||
$.ajax({ //create an ajax request to load_page.php
|
||
|
||
type: "POST",
|
||
url: "{{url('designer/a/gradient-append')}}",
|
||
data : {
|
||
gradientPrefix: gradientPrefix,
|
||
TrimCount: TrimCount
|
||
},
|
||
beforeSend:function(xhr){
|
||
var token = $('meta[name="csrf_token"]').attr('content');
|
||
|
||
if (token) {
|
||
return xhr.setRequestHeader('X-CSRF-TOKEN', token);
|
||
}
|
||
xhr.setRequestHeader( 'X-Requested-With', 'XMLHttpRequest');
|
||
},
|
||
success: function(response) {
|
||
ListGradient.innerHTML = response;
|
||
}
|
||
});
|
||
|
||
}, 2000);
|
||
}
|
||
|
||
function loadPattern(svgpath, clipathval, svgpatternid, visualizerObject, TypeAndSide){
|
||
$.get(svgpath, null, function(data){
|
||
var svgNode = $("svg", data);
|
||
var arrPath = [];
|
||
|
||
var docNode = document.adoptNode(svgNode[0]);
|
||
// console.log(docNode);
|
||
for(var i = 0 ; i < docNode.querySelectorAll("path")['length'] ; i++){
|
||
j = i + 1;
|
||
k = "PatternColor" + j;
|
||
|
||
var pathPatterns = docNode.querySelectorAll("path")[i];
|
||
|
||
// for setting clippath
|
||
var att = document.createAttribute("clip-path");
|
||
att.value = clipathval;
|
||
pathPatterns.setAttributeNode(att);
|
||
|
||
// for set Pattern Id
|
||
var getPatternIdFromSVG = TypeAndSide +"_"+ pathPatterns.getAttributeNode('id').value
|
||
var att1 = document.createAttribute("id");
|
||
att1.value = getPatternIdFromSVG;
|
||
pathPatterns.setAttributeNode(att1);
|
||
|
||
// for PatternColor
|
||
// var patterColor = document.createAttribute("fill");
|
||
// patterColor.value = getPatternColor[i][k];
|
||
// pathPatterns.setAttributeNode(patterColor);
|
||
|
||
var s = new XMLSerializer();
|
||
var str = s.serializeToString(pathPatterns);
|
||
|
||
arrPath.push(str);
|
||
}
|
||
|
||
try{
|
||
|
||
var contents = JSON.stringify(arrPath);
|
||
var con = jQuery.parseJSON(contents);
|
||
|
||
var countContents = con.length;
|
||
if(countContents != 0){ // check if content
|
||
var jContent = $.map(con, function(value) {
|
||
return(value);
|
||
});
|
||
var patternHolder = document.getElementById(svgpatternid);
|
||
$(patternHolder).html(jContent.join(""));
|
||
|
||
}
|
||
}catch (e){
|
||
//no errpr
|
||
}
|
||
|
||
}, 'xml');
|
||
}
|
||
|
||
function templateColors(tc){
|
||
$.ajax({ //create an ajax request to load_page.php
|
||
type: "POST",
|
||
url: "{{url('designer/a/get-template-default-colors')}}",
|
||
data : {
|
||
templateCode : tc
|
||
},
|
||
// dataType: "JSON", //expect JSON to be returned
|
||
beforeSend:function(xhr){
|
||
var token = $('meta[name="csrf_token"]').attr('content');
|
||
|
||
if (token) {
|
||
return xhr.setRequestHeader('X-CSRF-TOKEN', token);
|
||
}
|
||
xhr.setRequestHeader( 'X-Requested-With', 'XMLHttpRequest');
|
||
},
|
||
success: function(response) {
|
||
var objColor = jQuery.parseJSON(response);
|
||
for (var i = 0; i < objColor.length; i++){
|
||
for (var key in objColor[i]) {
|
||
if(key == "default_mainColor"){
|
||
$("#mainColor").spectrum("set", objColor[i][key]);
|
||
|
||
}else{
|
||
$("input#Trim_"+key+".trimColor").spectrum("set", objColor[i][key]);
|
||
colorPickerCustom();
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
});
|
||
}
|
||
|
||
function activaTab(tab){
|
||
$('.nav-tabs a[href="#' + tab + '"]').tab('show');
|
||
};
|
||
//END 1ST TAB <---####################################
|
||
|
||
// FABRIC JS
|
||
var SideAndPath = {!! json_encode($templatepaths_arrays) !!};
|
||
|
||
for (var i = 0; i < SideAndPath.length; i++) {
|
||
var sideName = SideAndPath[i]['Side'];
|
||
var type = SideAndPath[i]['Type'];
|
||
|
||
var canvasName = "canvas_" + type + "_" + sideName;
|
||
window['canvas_' + type + '_' + sideName] = new fabric.Canvas(canvasName);
|
||
|
||
//loading canvas designs
|
||
|
||
if(sideName == "Front"){
|
||
var frontCanvasHandler = {!! json_encode($client_design_array[0]->ContentFrontJersey) !!};
|
||
canvas_Jersey_Front.loadFromJSON(frontCanvasHandler, function(objects, options) {
|
||
canvas_Jersey_Front.renderAll();
|
||
setTimeout(function(){
|
||
canvas_Jersey_Front.backgroundImage=0;
|
||
canvas_Jersey_Front.clear();
|
||
canvas_Jersey_Front.renderAll();
|
||
|
||
setTimeout(function(){
|
||
|
||
canvas_Jersey_Front.loadFromJSON(frontCanvasHandler, function(objects, options) {
|
||
canvas_Jersey_Front.renderAll();
|
||
// window['canvas_' + type + '_' + sideName].setActiveObject(c.item(0));
|
||
});
|
||
|
||
},3000);
|
||
|
||
},3000);
|
||
});
|
||
}
|
||
|
||
if(sideName == "Back"){
|
||
var backCanvasHandler = {!! json_encode($client_design_array[0]->ContentBackJersey) !!};
|
||
canvas_Jersey_Back.loadFromJSON(backCanvasHandler, function(objects, options) {
|
||
canvas_Jersey_Back.renderAll();
|
||
setTimeout(function(){
|
||
canvas_Jersey_Back.backgroundImage=0;
|
||
canvas_Jersey_Back.clear();
|
||
canvas_Jersey_Back.renderAll();
|
||
|
||
setTimeout(function(){
|
||
|
||
canvas_Jersey_Back.loadFromJSON(backCanvasHandler, function(objects, options) {
|
||
canvas_Jersey_Back.renderAll();
|
||
// window['canvas_' + type + '_' + sideName].setActiveObject(c.item(0));
|
||
});
|
||
|
||
},3000);
|
||
//console.log('done loading back')
|
||
},3000);
|
||
});
|
||
}
|
||
|
||
if(sideName == "Left"){
|
||
var leftCanvasHandler = {!! json_encode($client_design_array[0]->ContentLeftShorts) !!};
|
||
canvas_Shorts_Left.loadFromJSON(leftCanvasHandler, function(objects, options) {
|
||
canvas_Shorts_Left.renderAll();
|
||
setTimeout(function(){
|
||
canvas_Shorts_Left.backgroundImage=0;
|
||
canvas_Shorts_Left.clear();
|
||
canvas_Shorts_Left.renderAll();
|
||
|
||
setTimeout(function(){
|
||
|
||
canvas_Shorts_Left.loadFromJSON(leftCanvasHandler, function(objects, options) {
|
||
canvas_Shorts_Left.renderAll();
|
||
// window['canvas_' + type + '_' + sideName].setActiveObject(c.item(0));
|
||
});
|
||
|
||
},3000);
|
||
//console.log('done loading left')
|
||
},3000);
|
||
});
|
||
}
|
||
|
||
if(sideName == "Right"){
|
||
var rightCanvasHandler = {!! json_encode($client_design_array[0]->ContentRightShorts) !!};
|
||
canvas_Shorts_Right.loadFromJSON(rightCanvasHandler, function(objects, options) {
|
||
canvas_Shorts_Right.renderAll();
|
||
setTimeout(function(){
|
||
canvas_Shorts_Right.backgroundImage=0;
|
||
canvas_Shorts_Right.clear();
|
||
canvas_Shorts_Right.renderAll();
|
||
|
||
setTimeout(function(){
|
||
|
||
canvas_Shorts_Right.loadFromJSON(rightCanvasHandler, function(objects, options) {
|
||
canvas_Shorts_Right.renderAll();
|
||
// window['canvas_' + type + '_' + sideName].setActiveObject(c.item(0));
|
||
});
|
||
|
||
},3000);
|
||
//console.log('done loading back')
|
||
},3000);
|
||
});
|
||
}
|
||
|
||
}
|
||
/* ############################ */
|
||
var canvas = canvas_Jersey_Front;
|
||
var canvasID = "canvas_Jersey_Front";
|
||
/* ############################ */
|
||
|
||
$('#side-controls a').click(function (e) {
|
||
onDeSelected();
|
||
|
||
});
|
||
|
||
$("#uniform_sides li").click(function() {
|
||
onDeSelected();
|
||
if($(this).attr('data-canvas-id') == "canvas_Jersey_Front"){
|
||
canvas = canvas_Jersey_Front;
|
||
//console.log(canvas);
|
||
canvasID = "canvas_Jersey_Front";
|
||
canvas.calcOffset();
|
||
initCanvas();
|
||
|
||
}
|
||
|
||
if($(this).attr('data-canvas-id') == "canvas_Jersey_Back"){
|
||
canvas = canvas_Jersey_Back;
|
||
//console.log(canvas);
|
||
canvasID = "canvas_Jersey_Back";
|
||
canvas.calcOffset();
|
||
initCanvas();
|
||
|
||
}
|
||
|
||
if($(this).attr('data-canvas-id') == "canvas_Shorts_Left"){
|
||
canvas = canvas_Shorts_Left;
|
||
// console.log(canvas);
|
||
canvasID = "canvas_Shorts_Left";
|
||
canvas.calcOffset();
|
||
initCanvas();
|
||
|
||
}
|
||
|
||
if($(this).attr('data-canvas-id') == "canvas_Shorts_Right"){
|
||
canvas = canvas_Shorts_Right;
|
||
//console.log(canvas);
|
||
canvasID = "canvas_Shorts_Right";
|
||
canvas.calcOffset();
|
||
initCanvas();
|
||
|
||
}
|
||
});
|
||
|
||
function initCanvas(){
|
||
canvas.on('selection:cleared', onDeSelected);
|
||
canvas.on('object:selected', onSelected);
|
||
// canvas.on('object:scaling', onScaling);
|
||
// canvas.on('object:modified', onModified);
|
||
var snapZone = 4;
|
||
canvas.on('object:moving', function(options) {
|
||
var objectMiddle = options.target.left + options.target.getWidth() / 2;
|
||
if (objectMiddle > canvas.width / 2 - snapZone &&
|
||
objectMiddle < canvas.width / 2 + snapZone) {
|
||
options.target.set({
|
||
left: canvas.width / 2 - options.target.getWidth() / 2,
|
||
}).setCoords();
|
||
|
||
// console.log(canvasID)
|
||
$("#"+canvasID).css({ "border" : "1px solid #b1abfb" });
|
||
|
||
}
|
||
});
|
||
|
||
canvas.on('object:rotating', onRotating);
|
||
|
||
var _isDragging = false;
|
||
var _isMouseDown = false;
|
||
|
||
canvas.on('mouse:down', function () {
|
||
_isMouseDown = true;
|
||
// other stuff
|
||
});
|
||
|
||
canvas.on('mouse:move', function () {
|
||
_isDragging = _isMouseDown;
|
||
// other stuff
|
||
});
|
||
|
||
canvas.on('mouse:up', function(element) {
|
||
|
||
$("#"+canvasID).css({ "border" : "" });
|
||
|
||
_isMouseDown = false;
|
||
var isDragEnd = _isDragging;
|
||
_isDragging = false;
|
||
if (isDragEnd) {
|
||
try{
|
||
default_canvas_width = 219;
|
||
default_canvas_height = 383;
|
||
|
||
var obj = canvas.getActiveObject();
|
||
getWidth = obj.getWidth();
|
||
makeWidthToNegative = ~getWidth + 1;
|
||
|
||
getHeight = obj.getHeight();
|
||
makeHeightToNegative = ~getHeight + 1;
|
||
|
||
if(obj.left >= default_canvas_width){
|
||
obj.setLeft(default_canvas_width - getWidth);
|
||
obj.setCoords()
|
||
canvas.renderAll();
|
||
}
|
||
if(obj.left <= makeWidthToNegative){
|
||
obj.setLeft(1);
|
||
obj.setCoords()
|
||
canvas.renderAll();
|
||
}
|
||
|
||
if(obj.top >= default_canvas_height){
|
||
obj.setTop(default_canvas_height - getHeight);
|
||
obj.setCoords()
|
||
canvas.renderAll();
|
||
}
|
||
|
||
if(obj.top <= makeHeightToNegative){
|
||
obj.setTop(1);
|
||
obj.setCoords()
|
||
canvas.renderAll();
|
||
}
|
||
}catch(e){
|
||
|
||
}
|
||
|
||
} else {
|
||
// code for no drag mouse up
|
||
}
|
||
// code for both
|
||
});
|
||
|
||
canvas.on('object:scaling', function(event) {
|
||
if (event.target && event.target.type == "text") {
|
||
try{
|
||
var inFont = $('.btn-show-fonts').attr('data-font-size');
|
||
$(".text-font-size").val(((event.target.fontSize * event.target.scaleX) / inFont ).toFixed(2));
|
||
event.target._clearCache();
|
||
event.target.setCoords();
|
||
canvas.renderAll();
|
||
}catch(e){
|
||
// error
|
||
}
|
||
}
|
||
});
|
||
|
||
canvas.on('object:modified', function(event) {
|
||
if (event.target && event.target.type == "text") {
|
||
event.target.fontSize *= event.target.scaleX;
|
||
event.target.fontSize = event.target.fontSize.toFixed(2);
|
||
event.target.scaleX = 1;
|
||
event.target.scaleY = 1;
|
||
event.target._clearCache();
|
||
var inFont = $('.btn-show-fonts').attr('data-font-size');
|
||
$(".text-font-size").val(((event.target.fontSize * event.target.scaleX) / inFont ).toFixed(2));
|
||
event.target.setCoords();
|
||
canvas.renderAll();
|
||
}
|
||
});
|
||
}
|
||
|
||
function addNewText(){
|
||
onDeSelected();
|
||
}
|
||
|
||
function onSelected(){
|
||
|
||
var obj = canvas.getActiveObject();
|
||
// console.log("Height =", (obj.getScaleY() * obj.getHeight()).toFixed(2));
|
||
// console.log("Width = ", (obj.getScaleX() * obj.getWidth()).toFixed(2));
|
||
obj.set({
|
||
borderColor: '#71b7f3',
|
||
cornerColor: '#71b7f3',
|
||
cornerSize: 10,
|
||
transparentCorners: false
|
||
});
|
||
|
||
// console.log('left-', obj.left, 'top-', obj.top);
|
||
// console.log('font-', obj.fontSize);
|
||
|
||
if(obj != null){
|
||
|
||
var objType = canvas.getActiveObject().get('type');
|
||
var id = canvas.getActiveObject().get('idNumber');
|
||
// console.log(obj.type);
|
||
|
||
if(objType == "curvedText"){
|
||
if(obj.effect == "curved"){
|
||
$('#teamname_text_shape').html('Text Shape: <br><img src="{{ config('site_config.images_directory') }}text-shapes-logo/curve-logo.png" height="30px">');
|
||
}else if(obj.effect == "arc"){
|
||
$('#teamname_text_shape').html('Text Shape: <br><img src="{{ config('site_config.images_directory') }}text-shapes-logo/arch-logo.png" height="30px">');
|
||
}else{
|
||
$('#teamname_text_shape').html('Add text Shape');
|
||
}
|
||
}else{
|
||
$('#teamname_text_shape').html('Add text Shape');
|
||
}
|
||
|
||
if(objType == "i-text" || objType == "curvedText" || objType == "text"){
|
||
|
||
if(id){
|
||
$("#numberProperties").css({ "display" : "block" });
|
||
$('#tab-add-number1').tab('show');
|
||
|
||
$("#addNumberId").css({ "display" : "block" });
|
||
$("#enterNumberId").css({ "display" : "none" });
|
||
|
||
$('#editedNumberInput').val(obj.getText());
|
||
}else{
|
||
|
||
$("#textProperties").css({ "display" : "block" });
|
||
$('#tab-add-text1').tab('show');
|
||
|
||
$("#addNewTextId").css({ "display" : "block" });
|
||
$("#enterTextId").css({ "display" : "none" });
|
||
|
||
$('#editedTextInput').val(obj.getText());
|
||
}
|
||
var fontprop = getFontDisplay(obj.fontFamily);
|
||
$('.btn-show-fonts').html(fontprop.fontNameDisplay);
|
||
$('.btn-show-fonts').css('font-family', obj.fontFamily);
|
||
$('.btn-show-fonts').attr('data-font-size', fontprop.additionalSize);
|
||
$(".text-font-size").val((obj.fontSize / $(".btn-show-fonts").attr('data-font-size')).toFixed(2));
|
||
|
||
$('#reverse').prop('checked', obj.get('reverse'));
|
||
$('#radius').val(obj.get('radius'));
|
||
$('#spacing').val(obj.get('spacing'));
|
||
//$('#fill').val(obj.getFill());
|
||
//$('#effect').val(obj.getEffect());
|
||
|
||
$(".fontColor").spectrum("set", obj.getFill());
|
||
$(".strokeColor").spectrum("set", obj.getStroke());
|
||
$(".outlineThickness").val(obj.getStrokeWidth());
|
||
$('#font_size').val(obj.getFontSize() + " in");
|
||
$('.rotateTextSlider, .rotateTextValue').val(Math.round(obj.getAngle()));
|
||
$('.spacingTextSlider, .spacingTextValue').val(obj.getCharSpacing() / 2);
|
||
$('.opacityTextSlider, .opacityTextValue').val(obj.getOpacity() * 10);
|
||
|
||
/* if($('#strokeColor').val() == ""){
|
||
console.log("null");
|
||
}else{
|
||
console.log($('#strokeColor').val());
|
||
} */
|
||
}
|
||
|
||
if(objType == "image"){
|
||
$('#tab-upload-image1').tab('show');
|
||
$('.rotateTextSlider, .rotateTextValue').val(Math.round(obj.getAngle()));
|
||
$('.opacityTextSlider, .opacityTextValue').val(obj.getOpacity() * 10);
|
||
|
||
$("#img-remove-btn").css({ "display" : "block" });
|
||
$("#image-properties").css({ "display" : "block" });
|
||
}
|
||
|
||
if(objType == "path-group"){
|
||
|
||
$('.clipartColor').blur();
|
||
var obj = "";
|
||
var arrayPathId = [];
|
||
var k = 0;
|
||
|
||
$('#tab-clipart1').tab('show');
|
||
obj = canvas.getActiveObject();
|
||
$('#clipartProperties').html('');
|
||
var randomNumbers = Math.random();
|
||
for (var j in obj.paths) {
|
||
k = k + 1;
|
||
var id = obj.paths[j].get('id');
|
||
var fill = obj.paths[j].get('fill');
|
||
// console.log(id);
|
||
arrayPathId.push({
|
||
'id' : id,
|
||
'fill' : fill,
|
||
'ran_num' : randomNumbers
|
||
});
|
||
}
|
||
|
||
getClipartProperties(arrayPathId, randomNumbers);
|
||
|
||
setTimeout(function() {
|
||
$('.rotateTextSlider, .rotateTextValue').val(Math.round(obj.getAngle()));
|
||
$('.opacityTextSlider, .opacityTextValue').val(obj.getOpacity() * 10);
|
||
}, 1000);
|
||
|
||
return false;
|
||
}
|
||
|
||
$("#"+canvasID).css({ "border" : "1px solid #b1abfb" });
|
||
}
|
||
}
|
||
|
||
function onDeSelected(){
|
||
var obj = canvas.getActiveObject();
|
||
|
||
$("#textProperties").css({ "display" : "none" });
|
||
$("#addNewTextId").css({ "display" : "none" });
|
||
$("#enterTextId").css({ "display" : "block" })
|
||
$("#textShapeProperties").css({ "display" : "none" })
|
||
|
||
/* $("#numberProperties").css({ "display" : "none" });
|
||
$("#addNumberId").css({ "display" : "none" });
|
||
$("#enterNumberId").css({ "display" : "block" }) */
|
||
|
||
|
||
$("#btnNumber").attr('disabled', false);
|
||
$("#btnNumber").html('<i class="fa fa-2 fa-plus" aria-hidden="true"></i> Add Name and Number');
|
||
|
||
$("#img-remove-btn").css({ "display" : "none" });
|
||
$("#image-properties").css({ "display" : "none" });
|
||
|
||
$("#okBtn").html("OK");
|
||
$("#okBtn").attr('disabled', false);
|
||
|
||
$('#textInput').val('');
|
||
$('#numberInput').val('');
|
||
|
||
loadClipartContent();
|
||
|
||
canvas.discardActiveObject();
|
||
canvas.renderAll();
|
||
$("#"+canvasID).css({ "border" : "" });
|
||
|
||
}
|
||
|
||
function onRotating(){
|
||
var obj = canvas.getActiveObject();
|
||
/* obj.getAngle().toFixed(0);
|
||
canvas.renderAll(); */
|
||
var angleValue = obj.getAngle().toFixed(0);
|
||
if(angleValue > 180){
|
||
angleValue = 180 - angleValue;
|
||
}
|
||
$('.rotateTextValue, .rotateTextSlider').val(angleValue);
|
||
|
||
}
|
||
|
||
// arrow keys navigations
|
||
var processKeys = function (evt) {
|
||
evt = evt || window.event;
|
||
|
||
var movementDelta = 1;
|
||
|
||
var activeObject = canvas.getActiveObject();
|
||
var activeGroup = canvas.getActiveGroup();
|
||
|
||
if (evt.keyCode === 37) {
|
||
evt.preventDefault(); // Prevent the default action
|
||
if (activeObject) {
|
||
var a = activeObject.get('left') - movementDelta;
|
||
activeObject.set('left', a);
|
||
}
|
||
else if (activeGroup) {
|
||
var a = activeGroup.get('left') - movementDelta;
|
||
activeGroup.set('left', a);
|
||
}
|
||
|
||
} else if (evt.keyCode === 39) {
|
||
evt.preventDefault(); // Prevent the default action
|
||
if (activeObject) {
|
||
var a = activeObject.get('left') + movementDelta;
|
||
activeObject.set('left', a);
|
||
}
|
||
else if (activeGroup) {
|
||
var a = activeGroup.get('left') + movementDelta;
|
||
activeGroup.set('left', a);
|
||
}
|
||
|
||
} else if (evt.keyCode === 38) {
|
||
evt.preventDefault(); // Prevent the default action
|
||
if (activeObject) {
|
||
var a = activeObject.get('top') - movementDelta;
|
||
activeObject.set('top', a);
|
||
}
|
||
else if (activeGroup) {
|
||
var a = activeGroup.get('top') - movementDelta;
|
||
activeGroup.set('top', a);
|
||
}
|
||
|
||
} else if (evt.keyCode === 40) {
|
||
evt.preventDefault(); // Prevent the default action
|
||
if (activeObject) {
|
||
var a = activeObject.get('top') + movementDelta;
|
||
activeObject.set('top', a);
|
||
}
|
||
else if (activeGroup) {
|
||
var a = activeGroup.get('top') + movementDelta;
|
||
activeGroup.set('top', a);
|
||
}
|
||
}
|
||
|
||
if (activeObject) {
|
||
activeObject.setCoords();
|
||
canvas.renderAll();
|
||
} else if (activeGroup) {
|
||
activeGroup.setCoords();
|
||
canvas.renderAll();
|
||
}
|
||
$("#"+canvasID).css({ "border" : "1px solid #b1abfb" });
|
||
};
|
||
|
||
window.addEventListener("keydown", processKeys, false);
|
||
// end arrow keys navigations
|
||
|
||
//remove object
|
||
$(document).on('button click', '.remove', function() {
|
||
var object = canvas.getActiveObject();
|
||
if (!object){
|
||
alert('Please select the element to remove');
|
||
return '';
|
||
}
|
||
canvas.remove(object);
|
||
});
|
||
|
||
$(document).on('button click', '.copyObject', function(event){
|
||
event.preventDefault();
|
||
var copyData = canvas.getActiveObject().toObject(['id']);
|
||
fabric.util.enlivenObjects([copyData], function(objects) {
|
||
objects.forEach(function(o) {
|
||
o.set({
|
||
top: o.top + 10,
|
||
left: o.left + 10,
|
||
borderColor: '#71b7f3',
|
||
cornerColor: '#71b7f3',
|
||
cornerSize: 10,
|
||
transparentCorners: false
|
||
});
|
||
canvas.add(o);
|
||
canvas.setActiveObject(o);
|
||
});
|
||
canvas.renderAll();
|
||
});
|
||
});
|
||
|
||
function numberStandardPos(){
|
||
var obj = canvas.getActiveObject();
|
||
|
||
var id = canvas.getActiveObject().get('idNumber');
|
||
|
||
if(id == "NumberFront"){
|
||
obj.set({
|
||
top: 114.85 // default position for number
|
||
});
|
||
}else if(id == "NumberBack"){
|
||
obj.set({
|
||
top: 175.00 // default position for number
|
||
});
|
||
}else if(id == "LastNameBack"){
|
||
obj.set({
|
||
top: 50.28 // default position for number
|
||
});
|
||
}else if(id == "NumberLeftShorts"){
|
||
obj.set({
|
||
top: 278.35 // default position for number
|
||
});
|
||
}else if(id == "NumberRightShorts"){
|
||
obj.set({
|
||
top: 278.35, // default position for number
|
||
});
|
||
}
|
||
|
||
|
||
obj.centerH();
|
||
obj.setCoords();
|
||
canvas.renderAll();
|
||
}
|
||
|
||
function centerHor(){
|
||
var obj = canvas.getActiveObject();
|
||
obj.centerH();
|
||
obj.setCoords();
|
||
canvas.renderAll();
|
||
}
|
||
|
||
function centerVer(){
|
||
var obj = canvas.getActiveObject();
|
||
obj.centerV();
|
||
obj.setCoords();
|
||
canvas.renderAll();
|
||
}
|
||
|
||
//DROP DOWN STROKE
|
||
$(document).on('select change', '.outlineThickness', function() {
|
||
var strokeId = $(this).attr('data-outline');
|
||
|
||
//$('#fontSizeValue').val($(this).val());
|
||
var obj = canvas.getActiveObject();
|
||
if(obj){
|
||
|
||
if($('#'+strokeId).val() == ""){
|
||
alert("Choose outline color first.");
|
||
//$('strokeColor').focus();
|
||
$('.outlineThickness').val(0);
|
||
//return false;
|
||
}else{
|
||
if($(this).val() == 0){
|
||
obj.setStrokeWidth($(this).val());
|
||
obj.setStroke(null);
|
||
}else{
|
||
obj.setStrokeWidth($(this).val());
|
||
}
|
||
|
||
}
|
||
|
||
}
|
||
canvas.renderAll();
|
||
});
|
||
|
||
/// GRADIENT SLIDER
|
||
$(document).on('input change', '.offsetGradientColor', function() {
|
||
|
||
var SideAndPath = {!! json_encode($templatepaths_arrays) !!};
|
||
|
||
for (var i = 0; i < SideAndPath.length; i++) {
|
||
var sideName = SideAndPath[i]['Side'];
|
||
var type = SideAndPath[i]['Type'];
|
||
|
||
var objectId = "objSVG_" + type + "_" + sideName;
|
||
|
||
// console.log($(this).attr('data-gradient-id'));
|
||
try {
|
||
document.getElementById(sideName + "_" + type +"_" + $(this).attr('data-gradient-id')).setAttribute("offset", $(this).val() * 10 + "%");
|
||
}
|
||
catch (e) {
|
||
//console.log(e);
|
||
}
|
||
}
|
||
});
|
||
|
||
// OFFSETE GRADIENT PATTERN SLIDER
|
||
$(document).on('input change', '.offsetGradientPattern', function(){
|
||
|
||
var SideAndPath = {!! json_encode($templatepaths_arrays) !!};
|
||
|
||
for (var i = 0; i < SideAndPath.length; i++) {
|
||
var sideName = SideAndPath[i]['Side'];
|
||
var type = SideAndPath[i]['Type'];
|
||
|
||
var mainColorId = type + "_" + sideName + "_" + "Color";
|
||
|
||
var objectId = "objSVG_" + type + "_" + sideName;
|
||
|
||
try {
|
||
document.getElementById(sideName + "_" + type +"_" + $(this).attr('data-gradient-id')).setAttribute("offset", $(this).val() * 10 + "%");
|
||
}
|
||
catch (e) {
|
||
//console.log(e);
|
||
}
|
||
}
|
||
});
|
||
|
||
//PATTERN OPACITY SLIDER
|
||
$(document).on('input change', '#opacityPattern', function(){
|
||
//console.log($(this).val() * 1);
|
||
|
||
var SideAndPath = {!! json_encode($templatepaths_arrays) !!};
|
||
|
||
for (var i = 0; i < SideAndPath.length; i++) {
|
||
var sideName = SideAndPath[i]['Side'];
|
||
var type = SideAndPath[i]['Type'];
|
||
|
||
|
||
var mainColorId = type + "_" + sideName + "_" + "Color";
|
||
|
||
var objectId = "objSVG_" + type + "_" + sideName;
|
||
|
||
try {
|
||
document.getElementById(objectId).contentDocument.getElementById("patternColor1").setAttribute("opacity", $(this).val() / 10);
|
||
|
||
$('#opacityPatternValue').val($(this).val() * 1);
|
||
}
|
||
catch (e) {
|
||
//console.log(e);
|
||
}
|
||
}
|
||
});
|
||
|
||
//OPACITY SLIDER
|
||
$(document).on('input change', '.opacityTextSlider', function(){
|
||
//console.log($(this).val() / 10);
|
||
$('.opacityTextValue').val($(this).val());
|
||
var obj = canvas.getActiveObject();
|
||
if(obj){
|
||
obj.set({
|
||
opacity: $(this).val() / 10
|
||
});
|
||
}
|
||
canvas.renderAll();
|
||
});
|
||
|
||
//SPACING SLIDER
|
||
$(document).on('input change', '.spacingTextSlider', function() {
|
||
//console.log($(this).val());
|
||
$('.spacingTextValue').val($(this).val());
|
||
var obj = canvas.getActiveObject();
|
||
if(obj){
|
||
|
||
if(obj.type == "text"){
|
||
obj.set({
|
||
charSpacing: $(this).val() * 2
|
||
});
|
||
}else{
|
||
obj.set({
|
||
spacing: $(this).val() * 2
|
||
});
|
||
}
|
||
|
||
}
|
||
canvas.renderAll();
|
||
});
|
||
|
||
//RADIUS SLIDER
|
||
$(document).on('input change', '.radiusSlider', function() {
|
||
$('.radiusTextValue').val($(this).val());
|
||
var obj = canvas.getActiveObject();
|
||
if(obj){
|
||
obj.set({
|
||
radius: $(this).val()
|
||
});
|
||
}
|
||
canvas.renderAll();
|
||
});
|
||
|
||
//ROTATE SLIDER
|
||
$(document).on('input change', '.rotateTextSlider', function() {
|
||
//console.log($(this).val());
|
||
$('.rotateTextValue').val($(this).val());
|
||
var obj = canvas.getActiveObject();
|
||
if(obj){
|
||
obj.setAngle($(this).val());
|
||
}
|
||
canvas.renderAll();
|
||
});
|
||
|
||
$('.text-font-size').keyup(function() {
|
||
var inFont = $('.btn-show-fonts').attr('data-font-size');
|
||
var val = $(this).val() * inFont;
|
||
if (isNaN(val)) {
|
||
alert('please enter number');
|
||
$(this).val(20);
|
||
return false;
|
||
}
|
||
var activeObject = canvas.getActiveObject();
|
||
activeObject.fontSize = val;
|
||
activeObject._clearCache();
|
||
activeObject.setCoords();
|
||
canvas.renderAll();
|
||
});
|
||
|
||
$('#editedTextInput').keyup(function(){
|
||
var obj = canvas.getActiveObject();
|
||
if(obj){
|
||
obj.setText(this.value);
|
||
canvas.renderAll();
|
||
}
|
||
});
|
||
|
||
$('#editedNumberInput').keyup(function(){
|
||
var obj = canvas.getActiveObject();
|
||
if(obj){
|
||
obj.setText(this.value);
|
||
canvas.renderAll();
|
||
}
|
||
});
|
||
|
||
// front back function //
|
||
$(document).on('button click', '.sendSelectedObjectBack', function(){
|
||
|
||
var object = canvas.getActiveObject();
|
||
if (!object){
|
||
|
||
alert('Please select object.');
|
||
return
|
||
}
|
||
canvas.sendToBack(object);
|
||
object.setCoords();
|
||
canvas.renderAll();
|
||
|
||
});
|
||
|
||
$(document).on('button click', '.sendSelectedObjectToFront', function(){
|
||
|
||
var object = canvas.getActiveObject();
|
||
if (!object){
|
||
alert('Please select object.');
|
||
return '';
|
||
}
|
||
canvas.bringToFront(object);
|
||
object.setCoords();
|
||
canvas.renderAll();
|
||
|
||
});
|
||
//END FABRIC JS <---####################################
|
||
|
||
// 2ND TABS <---####################################
|
||
function addText() {
|
||
var userTextInput = $('#textInput').val();
|
||
|
||
if(userTextInput == "" || userTextInput == null){
|
||
$('#textInput').focus();
|
||
return false;
|
||
|
||
}
|
||
|
||
var oText = new fabric.Text(userTextInput, {
|
||
top: 94.35 , // 94.35 for the default
|
||
fontSize: 71.25, // 71.25 for default font size. equivalent 2.5"
|
||
fill: '#000000',
|
||
//fontFamily: 'Academic M54',
|
||
textAlign: 'center',
|
||
stroke: null,
|
||
strokeWidth: 0,
|
||
borderColor: '#71b7f3',
|
||
cornerColor: '#71b7f3',
|
||
cornerSize: 10,
|
||
transparentCorners: false,
|
||
//hasRotatingPoint: false,
|
||
centeredScaling: true,
|
||
hasControls: true,
|
||
lockScalingFlip: true,
|
||
lockUniScaling: true,
|
||
objectCaching : false
|
||
});
|
||
|
||
// var div_textProperties = document.getElementById('wait-msg-jfront');
|
||
// div_textProperties.style.display = 'block';
|
||
|
||
$("#okBtn").html("Please Wait");
|
||
$("#okBtn").attr('disabled', true);
|
||
canvas.add(oText);
|
||
setTimeout(function() {
|
||
//canvas.add(oText);
|
||
canvas.setActiveObject(oText);
|
||
oText.bringToFront();
|
||
oText.centerH();
|
||
oText.setCoords();
|
||
|
||
//var div_textProperties = document.getElementById('wait-msg-jfront');
|
||
// div_textProperties.style.display = 'none';
|
||
canvas.renderAll();
|
||
}, 1000);
|
||
|
||
}
|
||
|
||
function getFontDisplay(ff){
|
||
var data;
|
||
$.ajax({ //create an ajax request to load_page.php
|
||
type: "POST",
|
||
url : "{{url('designer/a/get-font-display')}}",
|
||
data : {
|
||
fontFamily : ff
|
||
},
|
||
async: false,
|
||
dataType : 'json',
|
||
cache: true,
|
||
beforeSend:function(xhr){
|
||
var token = $('meta[name="csrf_token"]').attr('content');
|
||
|
||
if (token) {
|
||
return xhr.setRequestHeader('X-CSRF-TOKEN', token);
|
||
}
|
||
xhr.setRequestHeader( 'X-Requested-With', 'XMLHttpRequest');
|
||
},
|
||
success: function(response){
|
||
data = response;
|
||
}
|
||
|
||
});
|
||
|
||
return data;
|
||
}
|
||
|
||
$(document).on('button click', '.btn-show-fonts', function() {
|
||
var obj = canvas.getActiveObject();
|
||
$('.add-text-content').html(obj.getText());
|
||
$('#fontsModal').modal('show');
|
||
});
|
||
|
||
$(document).on('button click', '.custom-font-td', function() {
|
||
|
||
$('.btn-show-fonts').css('font-family', $(this).attr('data-font-style'));
|
||
$('.btn-show-fonts').html($(this).attr('data-font-display'));
|
||
$('.btn-show-fonts').attr('data-font-style', $(this).attr('data-font-style'));
|
||
$('.btn-show-fonts').attr('data-font-size', $(this).attr('data-font-size'));
|
||
var data_font_size = $(this).attr('data-font-size');
|
||
// var current_font = $('.text-font-size').val();
|
||
|
||
var obj = canvas.getActiveObject();
|
||
|
||
if(obj){
|
||
obj.set({
|
||
fontFamily: $(this).attr('data-font-style')
|
||
});
|
||
|
||
default_text = obj.getText();
|
||
props = obj.toObject(['idNumber']);
|
||
delete props['type'];
|
||
props['borderColor'] = '#71b7f3',
|
||
props['cornerColor'] = '#71b7f3',
|
||
props['cornerSize'] = 10,
|
||
props['transparentCorners'] = false,
|
||
props['centeredScaling'] = true,
|
||
props['hasControls'] = true,
|
||
props['lockScalingFlip'] = true,
|
||
props['lockUniScaling'] = true,
|
||
props['objectCaching'] = false
|
||
|
||
setTimeout(function() {
|
||
obj.setCoords();
|
||
canvas.renderAll();
|
||
canvas.setActiveObject(obj);
|
||
|
||
}, 1000);
|
||
// return false;
|
||
}
|
||
$('#fontsModal').modal('hide');
|
||
});
|
||
//END 2ND TAB <---####################################
|
||
|
||
// 3RD TAB
|
||
|
||
function addFrontNumber(){
|
||
|
||
var defaultNumber = "00";
|
||
var currentCount = +$("#countbtn").val() + 1;
|
||
$('#countbtn').val(currentCount);
|
||
var defNumberFront = new fabric.Text(defaultNumber, {
|
||
idNumber:"NumberFront",
|
||
top: 114.85 , // 94.35 for the default
|
||
fontSize: 75.00, // 71.25 for default font size. equivalent 2.5"
|
||
fill: '#000000',
|
||
textAlign: 'center',
|
||
padding: 0,
|
||
//spacing: 20,
|
||
stroke: null,
|
||
strokeWidth: 0,
|
||
borderColor: '#71b7f3',
|
||
cornerColor: '#71b7f3',
|
||
cornerSize: 10,
|
||
transparentCorners: false,
|
||
//hasRotatingPoint: false,
|
||
centeredScaling: true,
|
||
hasControls: true,
|
||
lockScalingFlip: true,
|
||
lockUniScaling: true
|
||
});
|
||
|
||
activaTab('a_Front_Jersey');
|
||
canvas = canvas_Jersey_Front;
|
||
canvasID = "canvas_Jersey_Front";
|
||
|
||
setTimeout(function() {
|
||
canvas.add(defNumberFront);
|
||
canvas.setActiveObject(defNumberFront);
|
||
|
||
defNumberFront.bringToFront();
|
||
defNumberFront.centerH();
|
||
defNumberFront.setCoords();
|
||
$('#addFrontNumber').remove();
|
||
}, 1000);
|
||
canvas.renderAll();
|
||
}
|
||
|
||
function addBackNumber(){
|
||
|
||
var defaultNumber = "00";
|
||
var currentCount = +$("#countbtn").val() + 1;
|
||
$('#countbtn').val(currentCount);
|
||
|
||
var defNumberBack = new fabric.Text(defaultNumber, {
|
||
idNumber:"NumberBack",
|
||
top: 84.35, // 94.35 for the default
|
||
fontSize: 175.00,
|
||
fill: '#000000',
|
||
textAlign: 'center',
|
||
padding: 0,
|
||
//spacing: 20,
|
||
stroke: null,
|
||
strokeWidth: 0,
|
||
borderColor: '#71b7f3',
|
||
cornerColor: '#71b7f3',
|
||
cornerSize: 10,
|
||
transparentCorners: false,
|
||
//hasRotatingPoint: false,
|
||
centeredScaling: true,
|
||
hasControls: true,
|
||
lockScalingFlip: true,
|
||
lockUniScaling: true
|
||
});
|
||
|
||
activaTab('a_Back_Jersey');
|
||
canvas = canvas_Jersey_Back;
|
||
canvasID = "canvas_Jersey_Back";
|
||
|
||
setTimeout(function() {
|
||
canvas.add(defNumberBack);
|
||
canvas.setActiveObject(defNumberBack);
|
||
|
||
defNumberBack.bringToFront();
|
||
defNumberBack.centerH();
|
||
defNumberBack.setCoords();
|
||
$('#addBackNumber').remove();
|
||
}, 1000);
|
||
canvas.renderAll();
|
||
|
||
}
|
||
|
||
function addLastName(){
|
||
|
||
var defaultName = "LASTNAME";
|
||
var currentCount = +$("#countbtn").val() + 1;
|
||
$('#countbtn').val(currentCount);
|
||
|
||
var defNameBack = new fabric.Text(defaultName, {
|
||
idNumber:"LastNameBack",
|
||
top: 50.28 , // 94.35 for the default
|
||
fontSize: 32.50,// 71.25 for default font size. equivalent 2.5"
|
||
fill: '#000000',
|
||
textAlign: 'center',
|
||
padding: 0,
|
||
//spacing: 20,
|
||
stroke: null,
|
||
strokeWidth: 0,
|
||
borderColor: '#71b7f3',
|
||
cornerColor: '#71b7f3',
|
||
cornerSize: 10,
|
||
transparentCorners: false,
|
||
//hasRotatingPoint: false,
|
||
centeredScaling: true,
|
||
hasControls: true,
|
||
lockScalingFlip: true,
|
||
lockUniScaling: true
|
||
});
|
||
|
||
activaTab('a_Back_Jersey');
|
||
canvas = canvas_Jersey_Back;
|
||
canvasID = "canvas_Jersey_Back";
|
||
|
||
setTimeout(function() {
|
||
canvas.add(defNameBack);
|
||
canvas.setActiveObject(defNameBack);
|
||
|
||
defNameBack.bringToFront();
|
||
defNameBack.centerH();
|
||
defNameBack.setCoords();
|
||
$('#addLastName').remove();
|
||
|
||
|
||
}, 1000);
|
||
canvas.renderAll();
|
||
|
||
}
|
||
|
||
function addShortsNumberLeft(){
|
||
|
||
var defaultNumber = "00";
|
||
var currentCount = +$("#countbtn").val() + 1;
|
||
$('#countbtn').val(currentCount);
|
||
|
||
var defNameShortLeft = new fabric.Text(defaultNumber, {
|
||
idNumber:"NumberLeftShorts",
|
||
top: 278.35,
|
||
fontSize: 62.50,
|
||
fill: '#000000',
|
||
textAlign: 'center',
|
||
padding: 0,
|
||
stroke: null,
|
||
strokeWidth: 0,
|
||
borderColor: '#71b7f3',
|
||
cornerColor: '#71b7f3',
|
||
cornerSize: 10,
|
||
transparentCorners: false,
|
||
//hasRotatingPoint: false,
|
||
centeredScaling: true,
|
||
hasControls: true,
|
||
lockScalingFlip: true,
|
||
lockUniScaling: true
|
||
});
|
||
|
||
activaTab('a_Left_Shorts');
|
||
canvas = canvas_Shorts_Left;
|
||
canvasID = "canvas_Shorts_Left";
|
||
|
||
setTimeout(function() {
|
||
canvas.add(defNameShortLeft);
|
||
canvas.setActiveObject(defNameShortLeft);
|
||
|
||
defNameShortLeft.bringToFront();
|
||
defNameShortLeft.centerH();
|
||
defNameShortLeft.setCoords();
|
||
$('#addShortsNumberLeft').remove();
|
||
|
||
|
||
}, 1000);
|
||
canvas.renderAll();
|
||
}
|
||
|
||
function addShortsNumberRight(){
|
||
|
||
var defaultNumber = "00";
|
||
var currentCount = +$("#countbtn").val() + 1;
|
||
$('#countbtn').val(currentCount);
|
||
|
||
var defNameShortRight = new fabric.Text(defaultNumber, {
|
||
idNumber:"NumberRightShorts",
|
||
top: 278.35,
|
||
fontSize: 62.50,
|
||
fill: '#000000',
|
||
textAlign: 'center',
|
||
padding: 0,
|
||
stroke: null,
|
||
strokeWidth: 0,
|
||
borderColor: '#71b7f3',
|
||
cornerColor: '#71b7f3',
|
||
cornerSize: 10,
|
||
transparentCorners: false,
|
||
//hasRotatingPoint: false,
|
||
centeredScaling: true,
|
||
hasControls: true,
|
||
lockScalingFlip: true,
|
||
lockUniScaling: true
|
||
});
|
||
|
||
activaTab('a_Right_Shorts');
|
||
canvas = canvas_Shorts_Right;
|
||
canvasID = "canvas_Shorts_Right";
|
||
|
||
setTimeout(function() {
|
||
canvas.add(defNameShortRight);
|
||
canvas.setActiveObject(defNameShortRight);
|
||
|
||
defNameShortRight.bringToFront();
|
||
defNameShortRight.centerH();
|
||
defNameShortRight.setCoords();
|
||
$('#addShortsNumberRight').remove();
|
||
|
||
}, 1000);
|
||
canvas.renderAll();
|
||
|
||
}
|
||
|
||
function addNameNumber() {
|
||
var defaultNumber = "00";
|
||
var defaultName = "LASTNAME";
|
||
|
||
$('#countbtn').val("5");
|
||
$('#NameNumberId').html('');
|
||
|
||
var defNumberFront = new fabric.Text(defaultNumber, {
|
||
idNumber:"NumberFront",
|
||
top: 114.85 , // 94.35 for the default
|
||
fontSize: 75.00, // 71.25 for default font size. equivalent 2.5"
|
||
fill: '#000000',
|
||
textAlign: 'center',
|
||
padding: 0,
|
||
//spacing: 20,
|
||
stroke: null,
|
||
strokeWidth: 0,
|
||
borderColor: '#71b7f3',
|
||
cornerColor: '#71b7f3',
|
||
cornerSize: 10,
|
||
transparentCorners: false,
|
||
//hasRotatingPoint: false,
|
||
centeredScaling: true,
|
||
hasControls: true,
|
||
lockScalingFlip: true,
|
||
lockUniScaling: true
|
||
});
|
||
|
||
var defNumberBack = new fabric.Text(defaultNumber, {
|
||
idNumber:"NumberBack",
|
||
top: 84.35, // 94.35 for the default
|
||
fontSize: 175.00, // 71.25 for default font size. equivalent 2.5"
|
||
fill: '#000000',
|
||
textAlign: 'center',
|
||
padding: 0,
|
||
//spacing: 20,
|
||
stroke: null,
|
||
strokeWidth: 0,
|
||
borderColor: '#71b7f3',
|
||
cornerColor: '#71b7f3',
|
||
cornerSize: 10,
|
||
transparentCorners: false,
|
||
//hasRotatingPoint: false,
|
||
centeredScaling: true,
|
||
hasControls: true,
|
||
lockScalingFlip: true,
|
||
lockUniScaling: true
|
||
});
|
||
|
||
var defNameBack = new fabric.Text(defaultName, {
|
||
idNumber:"LastNameBack",
|
||
top: 50.28 , // 94.35 for the default
|
||
fontSize: 32.50, // 71.25 for default font size. equivalent 2.5"
|
||
fill: '#000000',
|
||
textAlign: 'center',
|
||
padding: 0,
|
||
//spacing: 20,
|
||
stroke: null,
|
||
strokeWidth: 0,
|
||
borderColor: '#71b7f3',
|
||
cornerColor: '#71b7f3',
|
||
cornerSize: 10,
|
||
transparentCorners: false,
|
||
//hasRotatingPoint: false,
|
||
centeredScaling: true,
|
||
hasControls: true,
|
||
lockScalingFlip: true,
|
||
lockUniScaling: true
|
||
});
|
||
|
||
var defNameShortLeft = new fabric.Text(defaultNumber, {
|
||
idNumber:"NumberLeftShorts",
|
||
top: 278.35,
|
||
fontSize: 62.50, // 71.25 for default font size. equivalent 2.5"
|
||
//height: fabric.util.parseUnit('1in'),
|
||
fill: '#000000',
|
||
textAlign: 'center',
|
||
padding: 0,
|
||
//spacing: 20,
|
||
stroke: null,
|
||
strokeWidth: 0,
|
||
borderColor: '#71b7f3',
|
||
cornerColor: '#71b7f3',
|
||
cornerSize: 10,
|
||
transparentCorners: false,
|
||
//hasRotatingPoint: false,
|
||
centeredScaling: true,
|
||
hasControls: true,
|
||
lockScalingFlip: true,
|
||
lockUniScaling: true
|
||
});
|
||
|
||
var defNameShortRight = new fabric.Text(defaultNumber, {
|
||
idNumber:"NumberRightShorts",
|
||
top: 278.35,
|
||
fontSize: 62.50, // 71.25 for default font size. equivalent 2.5"
|
||
//height: fabric.util.parseUnit('1in'),
|
||
fill: '#000000',
|
||
textAlign: 'center',
|
||
padding: 0,
|
||
//spacing: 20,
|
||
stroke: null,
|
||
strokeWidth: 0,
|
||
borderColor: '#71b7f3',
|
||
cornerColor: '#71b7f3',
|
||
cornerSize: 10,
|
||
transparentCorners: false,
|
||
//hasRotatingPoint: false,
|
||
centeredScaling: true,
|
||
hasControls: true,
|
||
lockScalingFlip: true,
|
||
lockUniScaling: true
|
||
});
|
||
|
||
// $("#btnNumber").html("Please Wait");
|
||
$("#btnNumber").attr('disabled', true);
|
||
activaTab('a_Front_Jersey');
|
||
canvas = canvas_Jersey_Front;
|
||
canvasID = "canvas_Jersey_Front";
|
||
|
||
setTimeout(function() {
|
||
canvas_Jersey_Front.add(defNumberFront);
|
||
canvas_Jersey_Front.setActiveObject(defNumberFront);
|
||
canvas_Jersey_Back.add(defNumberBack, defNameBack);
|
||
canvas_Shorts_Right.add(defNameShortRight);
|
||
canvas_Shorts_Left.add(defNameShortLeft);
|
||
|
||
/// FRONT JERSEY
|
||
defNumberFront.bringToFront();
|
||
defNumberFront.centerH();
|
||
defNumberFront.setCoords();
|
||
|
||
/// BACK JERSEY
|
||
defNumberBack.bringToFront();
|
||
defNumberBack.centerH();
|
||
defNumberBack.setCoords();
|
||
|
||
defNameBack.bringToFront();
|
||
defNameBack.centerH();
|
||
defNameBack.setCoords();
|
||
|
||
/// LEFT SHORTS
|
||
defNameShortLeft.bringToFront();
|
||
defNameShortLeft.centerH();
|
||
defNameShortLeft.setCoords();
|
||
|
||
/// RIGHT SHORTS
|
||
defNameShortRight.bringToFront();
|
||
defNameShortRight.centerH();
|
||
defNameShortRight.setCoords();
|
||
|
||
|
||
}, 1000);
|
||
canvas_Jersey_Front.renderAll();
|
||
canvas_Jersey_Back.renderAll();
|
||
canvas_Shorts_Right.renderAll();
|
||
canvas_Shorts_Left.renderAll();
|
||
}
|
||
|
||
$('.removeNameNumber').click(function(){
|
||
var obj = canvas.getActiveObject();
|
||
if (!obj){
|
||
alert('Please select the element to remove');
|
||
return '';
|
||
}
|
||
|
||
var id = canvas.getActiveObject().get('idNumber');
|
||
|
||
if(id == "NumberFront"){
|
||
$('#NameNumberId').append('<button type="button" id="addFrontNumber" onclick="addFrontNumber();" class="btn btn-primary pull-right btn-sm addMarginLeft"><i class="fa fa-plus" aria-hidden="true"></i> Front Number</button>');
|
||
canvas.remove(obj);
|
||
var currentCount = $('#countbtn').val();
|
||
$('#countbtn').val(currentCount - 1)
|
||
}else if(id == "NumberBack"){
|
||
$('#NameNumberId').append('<button type="button" id="addBackNumber" onclick="addBackNumber();" class="btn btn-primary pull-right btn-sm addMarginLeft"><i class="fa fa-plus" aria-hidden="true"></i> Back Number</button>');
|
||
canvas.remove(obj);
|
||
var currentCount = $('#countbtn').val();
|
||
$('#countbtn').val(currentCount - 1)
|
||
}else if(id == "LastNameBack"){
|
||
$('#NameNumberId').append('<button type="button" id="addLastName" onclick="addLastName();" class="btn btn-primary pull-right btn-sm addMarginLeft"><i class="fa fa-plus" aria-hidden="true"></i> Lastname</button>');
|
||
canvas.remove(obj);
|
||
var currentCount = $('#countbtn').val();
|
||
$('#countbtn').val(currentCount - 1)
|
||
}else if(id == "NumberLeftShorts"){
|
||
$('#NameNumberId').append('<button type="button" id="addShortsNumberLeft" onclick="addShortsNumberLeft();" class="btn btn-primary pull-right btn-sm addMarginLeft"><i class="fa fa-plus" aria-hidden="true"></i> Left Shorts Number</button>');
|
||
canvas.remove(obj);
|
||
var currentCount = $('#countbtn').val();
|
||
$('#countbtn').val(currentCount - 1)
|
||
}else if(id == "NumberRightShorts"){
|
||
$('#NameNumberId').append('<button type="button" id="addShortsNumberRight" onclick="addShortsNumberRight();" class="btn btn-primary pull-right btn-sm addMarginLeft"><i class="fa fa-plus" aria-hidden="true"></i> Right Shorts Number</button>');
|
||
canvas.remove(obj);
|
||
var currentCount = $('#countbtn').val();
|
||
$('#countbtn').val(currentCount - 1)
|
||
}
|
||
|
||
var currentCount = $('#countbtn').val();
|
||
|
||
if(currentCount == 0){
|
||
$("#numberProperties").css({ "display" : "none" });
|
||
$("#addNumberId").css({ "display" : "none" });
|
||
$("#enterNumberId").css({ "display" : "block" })
|
||
}
|
||
});
|
||
// END 3RD TAB
|
||
|
||
// 4TH TAB
|
||
function loadClipartContent(){
|
||
$.ajax({ //create an ajax request to load_page.php
|
||
type: "GET",
|
||
url: "{{url('designer/a/tab-clipart-content')}}",
|
||
dataType: "html", //expect html to be returned
|
||
success: function(response) {
|
||
// console.log(response);
|
||
$('#tab-clipart-content').html('');
|
||
|
||
$('#tab-clipart-content').html(response);
|
||
$(".clipartColor").blur();
|
||
|
||
// getFeaturedCliparts();
|
||
}
|
||
});
|
||
}
|
||
|
||
$(document).on('a click', '.clipart-category', function(){
|
||
getCliparts($(this).attr('data-id'), $(this).attr('data-type'), $(this).attr('data-title'));
|
||
return false;
|
||
});
|
||
|
||
function getCliparts(categoryId, req_type, cat_name){
|
||
$.ajax({ //create an ajax request to load_page.php
|
||
|
||
type: "POST",
|
||
url: "{{url('designer/a/get-cliparts')}}",
|
||
data: {
|
||
'categoryId' : categoryId,
|
||
'req_type' : req_type,
|
||
'cat_name' : cat_name
|
||
},
|
||
dataType: "html", //expect html to be returned
|
||
beforeSend:function(xhr){
|
||
var token = $('meta[name="csrf_token"]').attr('content');
|
||
|
||
if (token) {
|
||
return xhr.setRequestHeader('X-CSRF-TOKEN', token);
|
||
}
|
||
xhr.setRequestHeader( 'X-Requested-With', 'XMLHttpRequest');
|
||
},
|
||
success: function(response) {
|
||
$('#show-clipart-content').html(response).hide().fadeIn('slow');
|
||
}
|
||
});
|
||
}
|
||
|
||
$(document).on('button click', '#btn-close-clipart-properties', function(){
|
||
loadClipartContent();
|
||
onDeSelected();
|
||
});
|
||
|
||
$(document).on('a click', '.img-clipart', function() {
|
||
|
||
var getClipartLink = $(this).attr('data-link');
|
||
// alert($(this).attr('data-link'));
|
||
loadSVGClipart(getClipartLink);
|
||
return false;
|
||
});
|
||
|
||
function loadSVGClipart(dataUrl){
|
||
var k = 0;
|
||
var arrayPathId = [];
|
||
var svgUrl = "{{ config('site_config.images_directory') }}cliparts/" + dataUrl;
|
||
fabric.loadSVGFromURL(svgUrl, function(objects, options) {
|
||
var clipart = fabric.util.groupSVGElements(objects, options );
|
||
clipart.set({
|
||
svgPath: svgUrl,
|
||
width: clipart.width,
|
||
height: clipart.height,
|
||
borderColor: '#71b7f3',
|
||
cornerColor: '#71b7f3',
|
||
cornerSize: 10,
|
||
transparentCorners: false,
|
||
noScaleCache: false
|
||
//hasRotatingPoint: false,
|
||
// });
|
||
}).scaleToWidth(100);
|
||
canvas.add(clipart);
|
||
canvas.setActiveObject(clipart);
|
||
canvas.renderAll();
|
||
var obj = canvas.getActiveObject();
|
||
$('#clipartProperties').html('');
|
||
for (var j in obj.paths) {
|
||
k = k + 1;
|
||
var id = obj.paths[j].get('id');
|
||
var fill = obj.paths[j].get('fill');
|
||
arrayPathId.push({
|
||
'id' : id,
|
||
'fill' : fill
|
||
});
|
||
|
||
}
|
||
// getClipartProperties(arrayPathId);
|
||
});
|
||
}
|
||
|
||
function getClipartProperties(arrayPathId, randomNumbers) {
|
||
// console.log(arrayPathId);
|
||
$.ajax({ //create an ajax request to load_page.php
|
||
|
||
type: "POST",
|
||
url: "{{ url('designer/a/clipart-properties') }}",
|
||
data: {
|
||
PathId : arrayPathId
|
||
},
|
||
dataType: "html", //expect html to be returned
|
||
beforeSend:function(xhr){
|
||
var token = $('meta[name="csrf_token"]').attr('content');
|
||
|
||
if (token) {
|
||
return xhr.setRequestHeader('X-CSRF-TOKEN', token);
|
||
}
|
||
xhr.setRequestHeader( 'X-Requested-With', 'XMLHttpRequest');
|
||
},
|
||
success: function(response) {
|
||
// console.log(response);
|
||
$('#tab-clipart-content').html('');
|
||
$('#tab-clipart-content').html(response).hide().fadeIn("slow");
|
||
|
||
loadClipartColor(randomNumbers);
|
||
colorPickerCustom();
|
||
}
|
||
|
||
});
|
||
}
|
||
// END 4TH TAB
|
||
|
||
// 5TH TAB
|
||
// for upload image
|
||
document.getElementById('upload-images').onchange = function handleImage(e) {
|
||
|
||
var reader = new FileReader();
|
||
reader.onload = function (event) {
|
||
//console.log('fdsf');
|
||
var imgObj = new Image();
|
||
//console.log(imgObj);
|
||
imgObj.src = event.target.result;
|
||
imgObj.onload = function () {
|
||
// start fabricJS stuff
|
||
var image = new fabric.Image(imgObj);
|
||
image.set({
|
||
top:0,
|
||
left:0,
|
||
borderColor: '#71b7f3',
|
||
cornerColor: '#71b7f3',
|
||
opacity: 10,
|
||
cornerSize: 10,
|
||
transparentCorners: false,
|
||
// centeredScaling: true,
|
||
hasControls: true,
|
||
lockScalingFlip: true,
|
||
cache: false,
|
||
// width: 15.6
|
||
|
||
}).scale(0.1);
|
||
//image.scale(getRandomNum(0.1, 0.25)).setCoords();
|
||
|
||
|
||
canvas.add(image);
|
||
canvas.renderAll(image);
|
||
canvas.setActiveObject(image);
|
||
image.bringToFront();
|
||
image.center();
|
||
image.setCoords();
|
||
$('#upload-images').val("");
|
||
}
|
||
|
||
}
|
||
|
||
//console.log(e.target.files[0]);
|
||
reader.readAsDataURL(e.target.files[0]);
|
||
|
||
}
|
||
// end upload image
|
||
// END 5TH TAB
|
||
|
||
//################### C O L O R P A L E T T E S #######################///
|
||
$("#mainColor").spectrum({
|
||
color: "rgb(255, 255, 255)",
|
||
showInput: true,
|
||
className: "full-spectrum",
|
||
showInitial: true,
|
||
showPalette: true,
|
||
showSelectionPalette: true,
|
||
maxSelectionSize: 6,
|
||
preferredFormat: "rgb",
|
||
localStorageKey: "spectrum.demo",
|
||
|
||
move: function(color) {
|
||
|
||
var onMoveColor = color.toHexString(); // #ff0000
|
||
|
||
var SideAndPath = {!! json_encode($templatepaths_arrays) !!};
|
||
|
||
for (var i = 0; i < SideAndPath.length; i++) {
|
||
var sideName = SideAndPath[i]['Side'];
|
||
var type = SideAndPath[i]['Type'];
|
||
|
||
var mainColorId = type + "_" + sideName + "_" + "Color";
|
||
var objectId = "objSVG_" + type + "_" + sideName;
|
||
document.getElementById(mainColorId).setAttribute("fill", onMoveColor);
|
||
|
||
}
|
||
|
||
$('#row-body-gradient').css({
|
||
'display':'none'
|
||
});
|
||
|
||
$('#btn-body-gradient').html('');
|
||
|
||
$('#body-color-type').val('Solid');
|
||
},
|
||
|
||
show: function () {
|
||
// alert("dadas");
|
||
// console.log();
|
||
},
|
||
beforeShow: function () {
|
||
|
||
},
|
||
hide: function (color) {
|
||
var onHideColor = color.toHexString(); // #ff0000
|
||
|
||
var SideAndPath = {!! json_encode($templatepaths_arrays) !!};
|
||
|
||
for (var i = 0; i < SideAndPath.length; i++) {
|
||
var sideName = SideAndPath[i]['Side'];
|
||
var type = SideAndPath[i]['Type'];
|
||
|
||
var mainColorId = type + "_" + sideName + "_" + "Color";
|
||
|
||
var objectId = "objSVG_" + type + "_" + sideName;
|
||
//document.getElementById(objectId).contentDocument.getElementById(mainColorId).setAttribute("fill", onHideColor);
|
||
document.getElementById(mainColorId).setAttribute("fill", onHideColor);
|
||
|
||
}
|
||
|
||
$('#row-body-gradient').css({
|
||
'display':'none'
|
||
});
|
||
$('#btn-body-gradient').html('');
|
||
$('#body-color-type').val('Solid');
|
||
|
||
|
||
},
|
||
change: function(color) {
|
||
|
||
var onChangeColor = color.toHexString(); // #ff0000
|
||
|
||
var SideAndPath = {!! json_encode($templatepaths_arrays) !!};
|
||
|
||
for (var i = 0; i < SideAndPath.length; i++) {
|
||
var sideName = SideAndPath[i]['Side'];
|
||
var type = SideAndPath[i]['Type'];
|
||
|
||
var mainColorId = type + "_" + sideName + "_" + "Color";
|
||
|
||
var objectId = "objSVG_" + type + "_" + sideName;
|
||
//document.getElementById(objectId).contentDocument.getElementById(mainColorId).setAttribute("fill", onChangeColor);
|
||
document.getElementById(mainColorId).setAttribute("fill", onChangeColor);
|
||
|
||
|
||
}
|
||
|
||
$('#row-body-gradient').css({
|
||
'display':'none'
|
||
});
|
||
$('#btn-body-gradient').html('');
|
||
$('#body-color-type').val('Solid');
|
||
|
||
},
|
||
palette: [
|
||
["rgb(0, 0, 0)", "rgb(67, 67, 67)", "rgb(102, 102, 102)", "rgb(204, 204, 204)", "rgb(217, 217, 217)", "rgb(255, 255, 255)"],
|
||
["rgb(152, 0, 0)", "rgb(255, 0, 0)", "rgb(255, 153, 0)", "rgb(255, 255, 0)", "rgb(0, 255, 0)", "rgb(0, 255, 255)"],
|
||
["rgb(74, 134, 232)", "rgb(0, 0, 255)", "rgb(153, 0, 255)", "rgb(255, 0, 255)", "rgb(230, 184, 175)", "rgb(244, 204, 204)"],
|
||
["rgb(252, 229, 205)", "rgb(255, 242, 204)", "rgb(217, 234, 211)", "rgb(208, 224, 227)", "rgb(201, 218, 248)", "rgb(207, 226, 243)"],
|
||
["rgb(217, 210, 233)", "rgb(234, 209, 220)", "rgb(221, 126, 107)", "rgb(234, 153, 153)", "rgb(249, 203, 156)", "rgb(255, 229, 153)"],
|
||
["rgb(182, 215, 168)", "rgb(162, 196, 201)", "rgb(164, 194, 244)", "rgb(159, 197, 232)", "rgb(180, 167, 214)", "rgb(213, 166, 189)"]
|
||
]
|
||
});
|
||
|
||
$(".gradientColor").spectrum({
|
||
showInput: true,
|
||
className: "full-spectrum",
|
||
showInitial: true,
|
||
showPalette: true,
|
||
//allowEmpty: true,
|
||
showSelectionPalette: true,
|
||
maxSelectionSize: 6,
|
||
preferredFormat: "rgb",
|
||
localStorageKey: "spectrum.demo",
|
||
|
||
move: function(color) {
|
||
var onMoveColor = color.toHexString(); // #ff0000
|
||
|
||
var gradientId = $(this).attr('id');
|
||
var dataGradientType = $(this).attr('data-gradient-type');
|
||
|
||
if(dataGradientType == "Body"){
|
||
var top_gradient_color = $('#Body_Gradient_Color2').val(); // top color
|
||
var bot_gradient_color = $('#Body_Gradient_Color1').val(); // bottom color
|
||
var btnGradientId = "btn-body-gradient";
|
||
}else{
|
||
var dataTrimNum = $(this).attr('data-trim-num');
|
||
var top_gradient_color = $('#Trim_'+dataTrimNum+'_Gradient_Color2').val(); // top color
|
||
var bot_gradient_color = $('#Trim_'+dataTrimNum+'_Gradient_Color1').val(); // bottom color
|
||
var btnGradientId = "btn-trim-"+dataTrimNum+"-gradient";
|
||
}
|
||
|
||
document.getElementById(btnGradientId).style.background = "linear-gradient("+bot_gradient_color+","+top_gradient_color+")";
|
||
|
||
|
||
var SideAndPath = {!! json_encode($templatepaths_arrays) !!};
|
||
|
||
for (var i = 0; i < SideAndPath.length; i++) {
|
||
var sideName = SideAndPath[i]['Side'];
|
||
var type = SideAndPath[i]['Type'];
|
||
|
||
var objectId = "objSVG_" + type + "_" + sideName;
|
||
// btn-trim-1-gradient
|
||
document.getElementById(sideName + "_" + type + "_" + gradientId).setAttribute("stop-color", onMoveColor);
|
||
}
|
||
|
||
},
|
||
|
||
show: function () {
|
||
|
||
$(this).spectrum("set", $(this).val());
|
||
|
||
},
|
||
beforeShow: function () {
|
||
|
||
},
|
||
hide: function (color) {
|
||
var onHideColor = color.toHexString(); // #ff0000
|
||
|
||
var gradientId = $(this).attr('id');
|
||
|
||
var dataGradientType = $(this).attr('data-gradient-type');
|
||
|
||
if(dataGradientType == "Body"){
|
||
var top_gradient_color = $('#Body_Gradient_Color2').val(); // top color
|
||
var bot_gradient_color = $('#Body_Gradient_Color1').val(); // bottom color
|
||
var btnGradientId = "btn-body-gradient";
|
||
}else{
|
||
var dataTrimNum = $(this).attr('data-trim-num');
|
||
var top_gradient_color = $('#Trim_'+dataTrimNum+'_Gradient_Color2').val(); // top color
|
||
var bot_gradient_color = $('#Trim_'+dataTrimNum+'_Gradient_Color1').val(); // bottom color
|
||
var btnGradientId = "btn-trim-"+dataTrimNum+"-gradient";
|
||
}
|
||
|
||
document.getElementById(btnGradientId).style.background = "linear-gradient("+bot_gradient_color+","+top_gradient_color+")";
|
||
|
||
var SideAndPath = {!! json_encode($templatepaths_arrays) !!};
|
||
|
||
for (var i = 0; i < SideAndPath.length; i++) {
|
||
var sideName = SideAndPath[i]['Side'];
|
||
var type = SideAndPath[i]['Type'];
|
||
|
||
var objectId = "objSVG_" + type + "_" + sideName;
|
||
document.getElementById(sideName + "_" + type + "_" + gradientId).setAttribute("stop-color", onHideColor);
|
||
}
|
||
|
||
|
||
},
|
||
|
||
change: function(color) {
|
||
|
||
var onChangeColor = color.toHexString(); // #ff0000
|
||
|
||
|
||
var gradientId = $(this).attr('id');
|
||
var dataGradientType = $(this).attr('data-gradient-type');
|
||
|
||
if(dataGradientType == "Body"){
|
||
var top_gradient_color = $('#Body_Gradient_Color2').val(); // top color
|
||
var bot_gradient_color = $('#Body_Gradient_Color1').val(); // bottom color
|
||
var btnGradientId = "btn-body-gradient";
|
||
}else{
|
||
var dataTrimNum = $(this).attr('data-trim-num');
|
||
var top_gradient_color = $('#Trim_'+dataTrimNum+'_Gradient_Color2').val(); // top color
|
||
var bot_gradient_color = $('#Trim_'+dataTrimNum+'_Gradient_Color1').val(); // bottom color
|
||
var btnGradientId = "btn-trim-"+dataTrimNum+"-gradient";
|
||
}
|
||
|
||
document.getElementById(btnGradientId).style.background = "linear-gradient("+bot_gradient_color+","+top_gradient_color+")";
|
||
|
||
var SideAndPath = {!! json_encode($templatepaths_arrays) !!};
|
||
|
||
for (var i = 0; i < SideAndPath.length; i++) {
|
||
var sideName = SideAndPath[i]['Side'];
|
||
var type = SideAndPath[i]['Type'];
|
||
|
||
var objectId = "objSVG_" + type + "_" + sideName;
|
||
document.getElementById(sideName + "_" + type + "_" + gradientId).setAttribute("stop-color", onChangeColor);
|
||
}
|
||
|
||
},
|
||
palette: [
|
||
["rgb(0, 0, 0)", "rgb(67, 67, 67)", "rgb(102, 102, 102)", "rgb(204, 204, 204)", "rgb(217, 217, 217)", "rgb(255, 255, 255)"],
|
||
["rgb(152, 0, 0)", "rgb(255, 0, 0)", "rgb(255, 153, 0)", "rgb(255, 255, 0)", "rgb(0, 255, 0)", "rgb(0, 255, 255)"],
|
||
["rgb(74, 134, 232)", "rgb(0, 0, 255)", "rgb(153, 0, 255)", "rgb(255, 0, 255)", "rgb(230, 184, 175)", "rgb(244, 204, 204)"],
|
||
["rgb(252, 229, 205)", "rgb(255, 242, 204)", "rgb(217, 234, 211)", "rgb(208, 224, 227)", "rgb(201, 218, 248)", "rgb(207, 226, 243)"],
|
||
["rgb(217, 210, 233)", "rgb(234, 209, 220)", "rgb(221, 126, 107)", "rgb(234, 153, 153)", "rgb(249, 203, 156)", "rgb(255, 229, 153)"],
|
||
["rgb(182, 215, 168)", "rgb(162, 196, 201)", "rgb(164, 194, 244)", "rgb(159, 197, 232)", "rgb(180, 167, 214)", "rgb(213, 166, 189)"]
|
||
]
|
||
});
|
||
|
||
$(".trimColor").spectrum({
|
||
showInput: true,
|
||
className: "full-spectrum",
|
||
showInitial: true,
|
||
showPalette: true,
|
||
showSelectionPalette: true,
|
||
maxSelectionSize: 6,
|
||
preferredFormat: "rgb",
|
||
localStorageKey: "spectrum.demo",
|
||
move: function(color) {
|
||
var onMoveColor = color.toHexString(); // #ff0000
|
||
|
||
var trimId = $(this).attr('id');
|
||
var SideAndPath = {!! json_encode($templatepaths_arrays) !!};
|
||
|
||
for (var i = 0; i < SideAndPath.length; i++) {
|
||
var sideName = SideAndPath[i]['Side'];
|
||
var type = SideAndPath[i]['Type'];
|
||
|
||
var objectId = "objSVG_" + type + "_" + sideName;
|
||
try{
|
||
document.getElementById(type + "_" + sideName + "_" + trimId).setAttribute("fill", onMoveColor);
|
||
} catch(e){
|
||
|
||
}
|
||
|
||
|
||
}
|
||
|
||
var trimCount = $(this).attr('data-trim-num');
|
||
$('#row-trim-'+trimCount+'-gradient').css({
|
||
'display':'none'
|
||
});
|
||
$('#btn-trim-'+trimCount+'-gradient').html('');
|
||
$('#trim-'+trimCount+'-color-type').val('Solid');
|
||
|
||
},
|
||
show: function () {
|
||
|
||
},
|
||
beforeShow: function () {
|
||
|
||
},
|
||
hide: function (color) {
|
||
var onHideColor = color.toHexString(); // #ff0000
|
||
|
||
var trimId = $(this).attr('id');
|
||
var SideAndPath = {!! json_encode($templatepaths_arrays) !!};
|
||
|
||
for (var i = 0; i < SideAndPath.length; i++) {
|
||
var sideName = SideAndPath[i]['Side'];
|
||
var type = SideAndPath[i]['Type'];
|
||
|
||
var objectId = "objSVG_" + type + "_" + sideName;
|
||
|
||
try{
|
||
document.getElementById(type + "_" + sideName + "_" + trimId).setAttribute("fill", onHideColor);
|
||
} catch(e){
|
||
|
||
}
|
||
}
|
||
|
||
var trimCount = $(this).attr('data-trim-num');
|
||
$('#row-trim-'+trimCount+'-gradient').css({
|
||
'display':'none'
|
||
});
|
||
$('#btn-trim-'+trimCount+'-gradient').html('');
|
||
$('#trim-'+trimCount+'-color-type').val('Solid');
|
||
|
||
},
|
||
change: function(color) {
|
||
|
||
var onChangeColor = color.toHexString(); // #ff0000
|
||
|
||
var trimId = $(this).attr('id');
|
||
var SideAndPath = {!! json_encode($templatepaths_arrays) !!};
|
||
|
||
for (var i = 0; i < SideAndPath.length; i++) {
|
||
var sideName = SideAndPath[i]['Side'];
|
||
var type = SideAndPath[i]['Type'];
|
||
|
||
var objectId = "objSVG_" + type + "_" + sideName;
|
||
//document.getElementById(objectId).contentDocument.getElementById(trimId).setAttribute("fill", onChangeColor);
|
||
|
||
try{
|
||
document.getElementById(type + "_" + sideName + "_" + trimId).setAttribute("fill", onChangeColor);
|
||
} catch(e){
|
||
|
||
}
|
||
}
|
||
|
||
var trimCount = $(this).attr('data-trim-num');
|
||
$('#row-trim-'+trimCount+'-gradient').css({
|
||
'display':'none'
|
||
});
|
||
$('#btn-trim-'+trimCount+'-gradient').html('');
|
||
$('#trim-'+trimCount+'-color-type').val('Solid');
|
||
},
|
||
palette: [
|
||
["rgb(0, 0, 0)", "rgb(67, 67, 67)", "rgb(102, 102, 102)", "rgb(204, 204, 204)", "rgb(217, 217, 217)", "rgb(255, 255, 255)"],
|
||
["rgb(152, 0, 0)", "rgb(255, 0, 0)", "rgb(255, 153, 0)", "rgb(255, 255, 0)", "rgb(0, 255, 0)", "rgb(0, 255, 255)"],
|
||
["rgb(74, 134, 232)", "rgb(0, 0, 255)", "rgb(153, 0, 255)", "rgb(255, 0, 255)", "rgb(230, 184, 175)", "rgb(244, 204, 204)"],
|
||
["rgb(252, 229, 205)", "rgb(255, 242, 204)", "rgb(217, 234, 211)", "rgb(208, 224, 227)", "rgb(201, 218, 248)", "rgb(207, 226, 243)"],
|
||
["rgb(217, 210, 233)", "rgb(234, 209, 220)", "rgb(221, 126, 107)", "rgb(234, 153, 153)", "rgb(249, 203, 156)", "rgb(255, 229, 153)"],
|
||
["rgb(182, 215, 168)", "rgb(162, 196, 201)", "rgb(164, 194, 244)", "rgb(159, 197, 232)", "rgb(180, 167, 214)", "rgb(213, 166, 189)"]
|
||
]
|
||
});
|
||
|
||
$(".fontColor").spectrum({
|
||
color: "#3a53a4",
|
||
showInput: true,
|
||
className: "full-spectrum",
|
||
showInitial: true,
|
||
showPalette: true,
|
||
//allowEmpty: true,
|
||
showSelectionPalette: true,
|
||
maxSelectionSize: 6,
|
||
preferredFormat: "rgb",
|
||
localStorageKey: "spectrum.demo",
|
||
move: function(color) {
|
||
//console.log(color);
|
||
//var onMoveColor = color.toHexString(); // #ff0000
|
||
var onMoveColor = color;
|
||
var obj = canvas.getActiveObject();
|
||
if(obj){
|
||
obj.setFill(onMoveColor);
|
||
}
|
||
canvas.renderAll();
|
||
},
|
||
show: function () {
|
||
|
||
|
||
},
|
||
beforeShow: function () {
|
||
|
||
},
|
||
hide: function (color) {
|
||
var onHideColor = color.toHexString(); // #ff0000
|
||
var obj = canvas.getActiveObject();
|
||
if(obj){
|
||
obj.setFill(onHideColor);
|
||
}
|
||
canvas.renderAll();
|
||
|
||
|
||
},
|
||
change: function(color) {
|
||
|
||
var onChangeColor = color.toHexString(); // #ff0000
|
||
var obj = canvas.getActiveObject();
|
||
if(obj){
|
||
obj.setFill(onChangeColor);
|
||
}
|
||
canvas.renderAll();
|
||
|
||
},
|
||
palette: [
|
||
["rgb(0, 0, 0)", "rgb(67, 67, 67)", "rgb(102, 102, 102)", "rgb(204, 204, 204)", "rgb(217, 217, 217)", "rgb(255, 255, 255)"],
|
||
["rgb(152, 0, 0)", "rgb(255, 0, 0)", "rgb(255, 153, 0)", "rgb(255, 255, 0)", "rgb(0, 255, 0)", "rgb(0, 255, 255)"],
|
||
["rgb(74, 134, 232)", "rgb(0, 0, 255)", "rgb(153, 0, 255)", "rgb(255, 0, 255)", "rgb(230, 184, 175)", "rgb(244, 204, 204)"],
|
||
["rgb(252, 229, 205)", "rgb(255, 242, 204)", "rgb(217, 234, 211)", "rgb(208, 224, 227)", "rgb(201, 218, 248)", "rgb(207, 226, 243)"],
|
||
["rgb(217, 210, 233)", "rgb(234, 209, 220)", "rgb(221, 126, 107)", "rgb(234, 153, 153)", "rgb(249, 203, 156)", "rgb(255, 229, 153)"],
|
||
["rgb(182, 215, 168)", "rgb(162, 196, 201)", "rgb(164, 194, 244)", "rgb(159, 197, 232)", "rgb(180, 167, 214)", "rgb(213, 166, 189)"]
|
||
]
|
||
});
|
||
|
||
$(".strokeColor").spectrum({
|
||
color: null,
|
||
showInput: true,
|
||
className: "full-spectrum",
|
||
showInitial: true,
|
||
showPalette: true,
|
||
//allowEmpty: true,
|
||
showSelectionPalette: true,
|
||
maxSelectionSize: 6,
|
||
preferredFormat: "rgb",
|
||
localStorageKey: "spectrum.demo",
|
||
move: function(color) {
|
||
//console.log(color);
|
||
var onMoveColor = color.toHexString(); // #ff0000
|
||
//var onMoveColor = color;
|
||
//console.log(onMoveColor);
|
||
var obj = canvas.getActiveObject();
|
||
if(obj){
|
||
obj.setStroke(onMoveColor);
|
||
}
|
||
canvas.renderAll();
|
||
},
|
||
show: function () {
|
||
|
||
|
||
},
|
||
beforeShow: function () {
|
||
|
||
},
|
||
hide: function (color) {
|
||
var onHideColor = color.toHexString(); // #ff0000
|
||
//var onHideColor = color;
|
||
var obj = canvas.getActiveObject();
|
||
if(obj){
|
||
obj.setStroke(onHideColor);
|
||
|
||
if(onHideColor == ""){
|
||
$('.outlineThickness').val(0);
|
||
}
|
||
}
|
||
canvas.renderAll();
|
||
|
||
|
||
},
|
||
change: function(color) {
|
||
|
||
//var onChangeColor = color.toHexString(); // #ff0000
|
||
var onChangeColor = color;
|
||
var obj = canvas.getActiveObject();
|
||
if(obj){
|
||
obj.setStroke(onChangeColor);
|
||
if($('.outlineThickness').val() == 0){
|
||
obj.setStrokeWidth(1);
|
||
$('.outlineThickness').val(1);
|
||
}
|
||
|
||
if(onChangeColor == null){
|
||
$('.outlineThickness').val(0);
|
||
}
|
||
}
|
||
//console.log(color);
|
||
canvas.renderAll();
|
||
|
||
},
|
||
palette: [
|
||
["rgb(0, 0, 0)", "rgb(67, 67, 67)", "rgb(102, 102, 102)", "rgb(204, 204, 204)", "rgb(217, 217, 217)", "rgb(255, 255, 255)"],
|
||
["rgb(152, 0, 0)", "rgb(255, 0, 0)", "rgb(255, 153, 0)", "rgb(255, 255, 0)", "rgb(0, 255, 0)", "rgb(0, 255, 255)"],
|
||
["rgb(74, 134, 232)", "rgb(0, 0, 255)", "rgb(153, 0, 255)", "rgb(255, 0, 255)", "rgb(230, 184, 175)", "rgb(244, 204, 204)"],
|
||
["rgb(252, 229, 205)", "rgb(255, 242, 204)", "rgb(217, 234, 211)", "rgb(208, 224, 227)", "rgb(201, 218, 248)", "rgb(207, 226, 243)"],
|
||
["rgb(217, 210, 233)", "rgb(234, 209, 220)", "rgb(221, 126, 107)", "rgb(234, 153, 153)", "rgb(249, 203, 156)", "rgb(255, 229, 153)"],
|
||
["rgb(182, 215, 168)", "rgb(162, 196, 201)", "rgb(164, 194, 244)", "rgb(159, 197, 232)", "rgb(180, 167, 214)", "rgb(213, 166, 189)"]
|
||
]
|
||
});
|
||
|
||
function loadPatternColor(){
|
||
$(".patternColor").spectrum({
|
||
showInput: true,
|
||
className: "full-spectrum",
|
||
showInitial: true,
|
||
showPalette: true,
|
||
//allowEmpty: true,
|
||
showSelectionPalette: true,
|
||
maxSelectionSize: 6,
|
||
preferredFormat: "rgb",
|
||
localStorageKey: "spectrum.demo",
|
||
|
||
move: function(color) {
|
||
var onMoveColor = color.toHexString(); // #ff0000
|
||
var patternId = $(this).attr('id');
|
||
|
||
var SideAndPath = {!! json_encode($templatepaths_arrays) !!};
|
||
|
||
for (var i = 0; i < SideAndPath.length; i++) {
|
||
var sideName = SideAndPath[i]['Side'];
|
||
var type = SideAndPath[i]['Type'];
|
||
|
||
var patternColorId = type + "_" + sideName + "_" + patternId;
|
||
var objectId = "objSVG_" + type + "_" + sideName;
|
||
try {
|
||
|
||
document.getElementById(patternColorId).setAttribute("fill", onMoveColor);
|
||
}
|
||
catch (e) {
|
||
//console.log(e);
|
||
}
|
||
|
||
|
||
}
|
||
// $("#gPattern").css('display', 'none');
|
||
|
||
var getDataTrim = $(this).attr('data-trim-num');
|
||
|
||
if(typeof getDataTrim == 'undefined'){
|
||
$('#body-pattern-color-type').val('Solid');
|
||
$('#row-body-pattern-gradient').css('display', 'none');
|
||
$('#btn-body-pattern-gradient').html('');
|
||
}else{
|
||
$('#trim-'+getDataTrim+'-pattern-color-type').val('Solid');
|
||
$('#row-trim-'+getDataTrim+'-pattern-gradient').css('display', 'none');
|
||
$('#btn-trim-'+getDataTrim+'-pattern-gradient').html('');
|
||
// btn-trim-1-pattern-grandient
|
||
}
|
||
|
||
|
||
},
|
||
show: function () {
|
||
|
||
},
|
||
beforeShow: function () {
|
||
|
||
},
|
||
hide: function (color) {
|
||
var onHideColor = color.toHexString(); // #ff0000
|
||
var patternId = $(this).attr('id');
|
||
var SideAndPath = {!! json_encode($templatepaths_arrays) !!};
|
||
|
||
for (var i = 0; i < SideAndPath.length; i++) {
|
||
var sideName = SideAndPath[i]['Side'];
|
||
var type = SideAndPath[i]['Type'];
|
||
|
||
var patternColorId = type + "_" + sideName + "_" + patternId;
|
||
var mainColorId = type + "_" + sideName + "_" + "Color";
|
||
|
||
var objectId = "objSVG_" + type + "_" + sideName;
|
||
try {
|
||
// document.getElementById(objectId).contentDocument.getElementById(patternId).setAttribute("fill", onHideColor);
|
||
document.getElementById(patternColorId).setAttribute("fill", onHideColor);
|
||
}
|
||
catch (e) {
|
||
//console.log(e);
|
||
}
|
||
|
||
|
||
}
|
||
// $("#gPattern").css('display', 'none');
|
||
var getDataTrim = $(this).attr('data-trim-num');
|
||
|
||
if(typeof getDataTrim == 'undefined'){
|
||
$('#body-pattern-color-type').val('Solid');
|
||
}else{
|
||
$('#trim-'+getDataTrim+'-pattern-color-type').val('Solid');
|
||
}
|
||
|
||
},
|
||
change: function(color) {
|
||
|
||
var onChangeColor = color.toHexString(); // #ff0000
|
||
|
||
var patternId = $(this).attr('id');
|
||
|
||
var SideAndPath = {!! json_encode($templatepaths_arrays) !!};
|
||
|
||
for (var i = 0; i < SideAndPath.length; i++) {
|
||
var sideName = SideAndPath[i]['Side'];
|
||
var type = SideAndPath[i]['Type'];
|
||
|
||
var patternColorId = type + "_" + sideName + "_" + patternId;
|
||
var mainColorId = type + "_" + sideName + "_" + "Color";
|
||
|
||
var objectId = "objSVG_" + type + "_" + sideName;
|
||
try {
|
||
// document.getElementById(objectId).contentDocument.getElementById(patternId).setAttribute("fill", onChangeColor);
|
||
document.getElementById(patternColorId).setAttribute("fill", onChangeColor);
|
||
}
|
||
catch (e) {
|
||
//console.log(e);
|
||
}
|
||
}
|
||
// $("#gPattern").css('display', 'none');
|
||
var getDataTrim = $(this).attr('data-trim-num');
|
||
|
||
if(typeof getDataTrim == 'undefined'){
|
||
$('#body-pattern-color-type').val('Solid');
|
||
}else{
|
||
$('#trim-'+getDataTrim+'-pattern-color-type').val('Solid');
|
||
}
|
||
|
||
|
||
},
|
||
palette: [
|
||
["rgb(0, 0, 0)", "rgb(67, 67, 67)", "rgb(102, 102, 102)", "rgb(204, 204, 204)", "rgb(217, 217, 217)", "rgb(255, 255, 255)"],
|
||
["rgb(152, 0, 0)", "rgb(255, 0, 0)", "rgb(255, 153, 0)", "rgb(255, 255, 0)", "rgb(0, 255, 0)", "rgb(0, 255, 255)"],
|
||
["rgb(74, 134, 232)", "rgb(0, 0, 255)", "rgb(153, 0, 255)", "rgb(255, 0, 255)", "rgb(230, 184, 175)", "rgb(244, 204, 204)"],
|
||
["rgb(252, 229, 205)", "rgb(255, 242, 204)", "rgb(217, 234, 211)", "rgb(208, 224, 227)", "rgb(201, 218, 248)", "rgb(207, 226, 243)"],
|
||
["rgb(217, 210, 233)", "rgb(234, 209, 220)", "rgb(221, 126, 107)", "rgb(234, 153, 153)", "rgb(249, 203, 156)", "rgb(255, 229, 153)"],
|
||
["rgb(182, 215, 168)", "rgb(162, 196, 201)", "rgb(164, 194, 244)", "rgb(159, 197, 232)", "rgb(180, 167, 214)", "rgb(213, 166, 189)"]
|
||
]
|
||
});
|
||
|
||
$(".patternGradientColor").spectrum({
|
||
showInput: true,
|
||
className: "full-spectrum",
|
||
showInitial: true,
|
||
showPalette: true,
|
||
//allowEmpty: true,
|
||
showSelectionPalette: true,
|
||
maxSelectionSize: 6,
|
||
preferredFormat: "rgb",
|
||
localStorageKey: "spectrum.demo",
|
||
|
||
move: function(color) {
|
||
var onMoveColor = color.toHexString(); // #ff0000
|
||
var gradientId = $(this).attr('id');
|
||
// console.log(gradientId);
|
||
var SideAndPath = {!! json_encode($templatepaths_arrays) !!};
|
||
|
||
for (var i = 0; i < SideAndPath.length; i++) {
|
||
var sideName = SideAndPath[i]['Side'];
|
||
var type = SideAndPath[i]['Type'];
|
||
|
||
var objectId = "objSVG_" + type + "_" + sideName;
|
||
// btn-trim-1-gradient
|
||
document.getElementById(sideName + "_" + type + "_" + gradientId).setAttribute("stop-color", onMoveColor);
|
||
}
|
||
|
||
},
|
||
show: function () {
|
||
|
||
|
||
},
|
||
beforeShow: function () {
|
||
|
||
},
|
||
hide: function (color) {
|
||
var onHideColor = color.toHexString(); // #ff0000
|
||
var gradientId = $(this).attr('id');
|
||
var SideAndPath = {!! json_encode($templatepaths_arrays) !!};
|
||
|
||
for (var i = 0; i < SideAndPath.length; i++) {
|
||
var sideName = SideAndPath[i]['Side'];
|
||
var type = SideAndPath[i]['Type'];
|
||
|
||
var mainColorId = type + "_" + sideName + "_" + "Color";
|
||
|
||
var objectId = "objSVG_" + type + "_" + sideName;
|
||
document.getElementById(sideName + "_" + type + "_" + gradientId).setAttribute("stop-color", onHideColor);
|
||
|
||
}
|
||
},
|
||
change: function(color) {
|
||
|
||
var onChangeColor = color.toHexString(); // #ff0000
|
||
|
||
var gradientId = $(this).attr('id');
|
||
|
||
var SideAndPath = {!! json_encode($templatepaths_arrays) !!};
|
||
|
||
for (var i = 0; i < SideAndPath.length; i++) {
|
||
var sideName = SideAndPath[i]['Side'];
|
||
var type = SideAndPath[i]['Type'];
|
||
|
||
var mainColorId = type + "_" + sideName + "_" + "Color";
|
||
|
||
var objectId = "objSVG_" + type + "_" + sideName;
|
||
document.getElementById(sideName + "_" + type + "_" + gradientId).setAttribute("stop-color", onChangeColor);
|
||
}
|
||
|
||
},
|
||
palette: [
|
||
["rgb(0, 0, 0)", "rgb(67, 67, 67)", "rgb(102, 102, 102)", "rgb(204, 204, 204)", "rgb(217, 217, 217)", "rgb(255, 255, 255)"],
|
||
["rgb(152, 0, 0)", "rgb(255, 0, 0)", "rgb(255, 153, 0)", "rgb(255, 255, 0)", "rgb(0, 255, 0)", "rgb(0, 255, 255)"],
|
||
["rgb(74, 134, 232)", "rgb(0, 0, 255)", "rgb(153, 0, 255)", "rgb(255, 0, 255)", "rgb(230, 184, 175)", "rgb(244, 204, 204)"],
|
||
["rgb(252, 229, 205)", "rgb(255, 242, 204)", "rgb(217, 234, 211)", "rgb(208, 224, 227)", "rgb(201, 218, 248)", "rgb(207, 226, 243)"],
|
||
["rgb(217, 210, 233)", "rgb(234, 209, 220)", "rgb(221, 126, 107)", "rgb(234, 153, 153)", "rgb(249, 203, 156)", "rgb(255, 229, 153)"],
|
||
["rgb(182, 215, 168)", "rgb(162, 196, 201)", "rgb(164, 194, 244)", "rgb(159, 197, 232)", "rgb(180, 167, 214)", "rgb(213, 166, 189)"]
|
||
]
|
||
});
|
||
}
|
||
|
||
function loadClipartColor(randomNumber){
|
||
// console.log(randomNumber);
|
||
$(".clipartColor").spectrum({
|
||
showInput: true,
|
||
className: "full-spectrum",
|
||
showInitial: true,
|
||
showPalette: true,
|
||
//allowEmpty: true,
|
||
showSelectionPalette: true,
|
||
maxSelectionSize: 6,
|
||
preferredFormat: "rgb",
|
||
localStorageKey: "spectrum.demo",
|
||
|
||
move: function(color) {
|
||
try{
|
||
var onMoveColor = color.toHexString(); // #ff0000
|
||
var pathid = $(this).attr('data-id');
|
||
var getRandomNumber = $(this).attr('data-number');
|
||
// console.log(getRandomNumber);
|
||
var obj = canvas.getActiveObject();
|
||
for (var j in obj.paths) {
|
||
|
||
var id = obj.paths[j].get('id');
|
||
|
||
if(pathid == id && randomNumber == getRandomNumber){
|
||
obj.paths[j].setFill(onMoveColor);
|
||
canvas.renderAll();
|
||
}
|
||
}
|
||
}catch(e){
|
||
$('.clipartColor').blur();
|
||
}
|
||
|
||
},
|
||
|
||
show: function () {
|
||
|
||
|
||
},
|
||
beforeShow: function () {
|
||
|
||
},
|
||
|
||
hide: function (color) {
|
||
try{
|
||
var onHideColor = color.toHexString(); // #ff0000
|
||
var pathid = $(this).attr('data-id');
|
||
var getRandomNumber = $(this).attr('data-number');
|
||
var obj = canvas.getActiveObject();
|
||
for (var j in obj.paths) {
|
||
|
||
var id = obj.paths[j].get('id');
|
||
// console.log(onHideColor);
|
||
if(pathid == id && randomNumber == getRandomNumber){
|
||
obj.paths[j].setFill(onHideColor);
|
||
// console.log("random number true - hide");
|
||
|
||
canvas.renderAll();
|
||
}
|
||
}
|
||
}catch(e){
|
||
$('.clipartColor').blur();
|
||
}
|
||
|
||
},
|
||
|
||
change: function(color) {
|
||
try{
|
||
var onChangeColor = color.toHexString(); // #ff0000
|
||
var pathid = $(this).attr('data-id');
|
||
var getRandomNumber = $(this).attr('data-number');
|
||
var obj = canvas.getActiveObject();
|
||
|
||
for (var j in obj.paths) {
|
||
|
||
var id = obj.paths[j].get('id');
|
||
// console.log(onChangeColor);
|
||
if(pathid == id && randomNumber == getRandomNumber){
|
||
obj.paths[j].setFill(onChangeColor);
|
||
// console.log("random number true - change");
|
||
canvas.renderAll();
|
||
}
|
||
}
|
||
|
||
}catch(e){
|
||
$('.clipartColor').blur();
|
||
}
|
||
|
||
|
||
|
||
|
||
},
|
||
palette: [
|
||
["rgb(254, 254, 254)", "rgb(0, 0, 0)", "rgb(100, 106, 105)", "rgb(153, 153, 154)", "rgb(189, 187, 187)", "rgb(255, 0, 145)"],
|
||
["rgb(255, 175, 190)", "rgb(255, 140, 190))", "rgb(180, 70, 140)", "rgb(125, 45, 60)", "rgb(150, 0, 50)", "rgb(200, 15, 40)"],
|
||
["rgb(250, 75, 15)", "rgb(255, 130, 0)", "rgb(255, 180, 25)", "rgb(255, 200, 40)", "rgb(255, 220, 0)", "rgb(250, 235, 95)"],
|
||
["rgb(140, 105, 35)", "rgb(165, 225, 0)", "rgb(60, 165, 30)", "rgb(0, 105, 55)", "rgb(45, 80, 50)", "rgb(0, 115, 120)"],
|
||
["rgb(0, 155, 180)", "rgb(35, 175, 240)", "rgb(145, 190, 235)", "rgb(0, 95, 160)", "rgb(0, 60, 130)", "rgb(0, 50, 90)"],
|
||
["rgb(170, 125, 200)", "rgb(90, 50, 135)", "rgb(100, 30, 100)", "rgb(130, 80, 45)", "rgb(205, 160, 115)", "rgb(255, 190, 120)"]
|
||
]
|
||
});
|
||
}
|
||
//################### E N D C O L O R P A L E T T E S #######################//
|
||
|
||
|
||
function myCart(){
|
||
$.ajax({ //create an ajax request to load_page.php
|
||
|
||
type: "GET",
|
||
url: "{{url('cartcount')}}",
|
||
dataType: "html",
|
||
success: function(response){
|
||
$("#my-cart-count").html(response);
|
||
}
|
||
});
|
||
}
|
||
|
||
function loadTemplateDesign(){
|
||
var tmpdetails = {!! json_encode($client_design_array[0]->TemplateDesign) !!};
|
||
var obj = jQuery.parseJSON(tmpdetails);
|
||
var SideAndPath = {!! json_encode($templatepaths_arrays) !!};
|
||
|
||
///////////// for mainColor
|
||
var getMainColorType = obj[0].mainColor[0].type;
|
||
if(getMainColorType == "Solid"){
|
||
var setMainColor = obj[0].mainColor[0].solidColor;
|
||
|
||
|
||
for (var i = 0; i < SideAndPath.length; i++) {
|
||
var sideName = SideAndPath[i]['Side'];
|
||
var type = SideAndPath[i]['Type'];
|
||
|
||
var mainColorId = type + "_" + sideName + "_" + "Color";
|
||
|
||
document.getElementById(mainColorId).setAttribute("fill", setMainColor);
|
||
$("#mainColor").spectrum("set", setMainColor);
|
||
}
|
||
}else{
|
||
|
||
var gradientColor1 = obj[0].mainColor[0].gradientColor1;
|
||
var gradientColor2 = obj[0].mainColor[0].gradientColor2;
|
||
var gradientColorOffset1 = obj[0].mainColor[0].gradientColorOffset1;
|
||
var gradientColorOffset2 = obj[0].mainColor[0].gradientColorOffset2;
|
||
var gradientFor = "Body";
|
||
var trimCount = 0;
|
||
|
||
$('#row-body-gradient').css({
|
||
'display':'block'
|
||
});
|
||
|
||
$('#btn-body-gradient').html('<i class="fa fa-2 fa-check" aria-hidden="true"></i>');
|
||
|
||
$('#body-color-type').val('Gradient');
|
||
|
||
|
||
document.getElementById('btn-body-gradient').style.background = "linear-gradient("+gradientColor1+","+gradientColor2+")";
|
||
$('#Offset_Body_Gradient_Color1').val(gradientColorOffset1.replace(/%/g, "") / 10);
|
||
$('#Offset_Body_Gradient_Color2').val(gradientColorOffset2.replace(/%/g, "") / 10);
|
||
|
||
$("#Body_Gradient_Color1").val(gradientColor1);
|
||
$("#Body_Gradient_Color2").val(gradientColor2);
|
||
|
||
$("#Body_Gradient_Color1").next().parent().children().children().children()[0].setAttribute("style", "background-color:"+gradientColor1);
|
||
$("#Body_Gradient_Color2").next().parent().children().children().children()[0].setAttribute("style", "background-color:"+gradientColor2);
|
||
|
||
// console.log(gradientColor1, gradientColor2);
|
||
for (var i = 0; i < SideAndPath.length; i++) {
|
||
var sideName = SideAndPath[i]['Side'];
|
||
var type = SideAndPath[i]['Type'];
|
||
|
||
var SVGColorId = type +"_"+sideName+"_"+"Color";
|
||
var gradientId = sideName + "_" + type + "_Body_Gradient";
|
||
|
||
var gradientPrefix = sideName+"_"+type+"_";
|
||
var gradientIds = sideName+"_"+type+"_Gradients";
|
||
|
||
edit_loadGradientTemplate(gradientFor, gradientIds, gradientPrefix, gradientColor1, gradientColor2, gradientColorOffset1, gradientColorOffset2,trimCount);
|
||
|
||
try {
|
||
// document.getElementById(objectId).contentDocument.getElementById(SVGColorId).setAttribute("fill", "url(#"+gradientId+")");
|
||
document.getElementById(SVGColorId).setAttribute("fill", "url(#"+gradientId+")");
|
||
}catch(e){
|
||
//error here...
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
|
||
///////////// for patternColor
|
||
try{
|
||
var getMainBodyPatternId = obj[0].patternColors[0].patternId;
|
||
if((getMainBodyPatternId != "noPattern") || (getMainBodyPatternId != "")){
|
||
var pColors = obj[0].patternColors[0].patternColors['length'];
|
||
if(pColors > 0){ // check if pattern exist
|
||
var k, arrayPatternColor = [], arrayGradientColors = [];
|
||
|
||
for (i = 0 ; i < pColors ; i++){
|
||
l = i + 1;
|
||
k = "PatternColor" + l;
|
||
temp = {};
|
||
temp['PatternColor' + l] = obj[0].patternColors[0].patternColors[i][k];
|
||
arrayPatternColor.push(temp);
|
||
}
|
||
|
||
var gradientColor1 = obj[0].patternColors[0].patternGradientColor1;
|
||
var gradientColor2 = obj[0].patternColors[0].patternGradientColor2;
|
||
var gradientColorOffset1 = obj[0].patternColors[0].patternGradientOffset1;
|
||
var gradientColorOffset2 = obj[0].patternColors[0].patternGradientOffset2;
|
||
|
||
temp1 = {};
|
||
temp1['gradientColor1'] = gradientColor1;
|
||
temp1['gradientColor2'] = gradientColor2;
|
||
temp1['gradientColorOffset1'] = gradientColorOffset1;
|
||
temp1['gradientColorOffset2'] = gradientColorOffset2;
|
||
arrayGradientColors.push(temp1);
|
||
|
||
SideAndPath.forEach(function(value) {
|
||
var sideName = value['Side'];
|
||
var type = value['Type'];
|
||
|
||
var objectId = "objSVG_" + type + "_" + sideName;
|
||
var SVGColorId = type +"_"+sideName+"_"+"Color";
|
||
// console.log(edit_pattern_properties(getMainBodyPatternId), getMainBodyPatternId);
|
||
// edit_pattern_properties(getMainBodyPatternId);
|
||
var svgpath = edit_pattern_properties(getMainBodyPatternId).small;
|
||
// console.log(getMainBodyPatternId)
|
||
var clipathval = "url(#"+ SVGColorId +"_Clippath_URL)";
|
||
var svgpatternid = SVGColorId + "_Pattern";
|
||
var TypeAndSide = type + "_" + sideName;
|
||
var gradientColorId = "url(#"+sideName + "_" + type + "_Body_Pattern_Gradient)" ;
|
||
var gradientPrefix = sideName+"_"+type+"_";
|
||
var gradientIds = sideName+"_"+type+"_Gradients";
|
||
|
||
|
||
|
||
if(obj[0].patternColors[0].patternColorType == "Solid"){
|
||
// console.log('Solid');
|
||
edit_loadPattern(svgpath, clipathval, svgpatternid, objectId, TypeAndSide, arrayPatternColor);
|
||
edit_set_pattern(getMainBodyPatternId, "Normal", obj[0].patternColors[0].patternColorType, arrayPatternColor, arrayGradientColors);
|
||
|
||
}else{
|
||
// console.log('Grdeitn');
|
||
var gradientFor = "Body_Pattern";
|
||
var trimCount = 0;
|
||
|
||
edit_set_pattern(getMainBodyPatternId, "Normal", obj[0].patternColors[0].patternColorType, arrayPatternColor, arrayGradientColors);
|
||
|
||
edit_loadGradientTemplate(gradientFor, gradientIds, gradientPrefix, gradientColor1, gradientColor2, gradientColorOffset1, gradientColorOffset2, trimCount);
|
||
|
||
edit_loadPatternGradient(svgpath, clipathval, svgpatternid, objectId, TypeAndSide, gradientColorId);
|
||
|
||
$('#body-pattern-color-type').val('Gradient');
|
||
}
|
||
});
|
||
|
||
$('#body-pattern-name').val(getMainBodyPatternId + ","+ pColors);
|
||
$('button[data-id = "'+getMainBodyPatternId+'"]').attr("disabled", true);
|
||
$('button[data-id = "'+getMainBodyPatternId+'"]').html('<i class="fa fa-2 fa-check" aria-hidden="true"></i>');
|
||
|
||
}else{
|
||
// all overprint
|
||
}
|
||
}
|
||
}catch(e){
|
||
|
||
}
|
||
|
||
|
||
// for trims
|
||
var Trims = obj[0].Trims['length'];
|
||
if(Trims > 0){ // check if Trim exist
|
||
for (i = 0 ; i < Trims ; i++){
|
||
trimCount = i + 1;
|
||
trimNum = "Trim" + trimCount;
|
||
trimNumPattern = "Trim" + trimCount + "_Pattern";
|
||
SVGTrimId = "Trim_" + trimCount;
|
||
if(obj[0].Trims[i][trimNum].type == "Solid"){
|
||
var trim_solid_color = obj[0].Trims[i][trimNum].solidColor;
|
||
$("#Trim_"+trimCount).spectrum("set", trim_solid_color);
|
||
|
||
SideAndPath.forEach(function(value) {
|
||
var sideName = value['Side'];
|
||
var type = value['Type'];
|
||
|
||
var objectId = "objSVG_" + type + "_" + sideName;
|
||
var SVGColorId = type +"_"+sideName+"_Trim_"+ trimCount;
|
||
|
||
try{
|
||
// document.getElementById(objectId).contentDocument.getElementById(SVGColorId).setAttribute("fill", trim_solid_color);
|
||
|
||
document.getElementById(SVGColorId).setAttribute("fill", trim_solid_color);
|
||
}catch(e){
|
||
// error here..
|
||
}
|
||
|
||
});
|
||
}else{
|
||
// var gradientColor1 = obj[0].Trims[i][trimNum].gradientColor1;
|
||
// var gradientColor2 = obj[0].Trims[i][trimNum].gradientColor2;
|
||
// var gradientColorOffset1 = obj[0].Trims[i][trimNum].gradientColorOffset1;
|
||
// var gradientColorOffset2 = obj[0].Trims[i][trimNum].gradientColorOffset2;
|
||
// var gradientFor = "Trim";
|
||
|
||
// SideAndPath.forEach(function(value) {
|
||
// var sp = value;
|
||
// var finalsp = sp.split(',');
|
||
|
||
// var sideName = finalsp[0];
|
||
// var type = finalsp[1];
|
||
// var pathLocation = finalsp[2];
|
||
|
||
// var objectId = "objSVG_" + type + "_" + sideName;
|
||
// var SVGColorId = type +"_"+sideName+"_Trim_"+ trimCount;
|
||
// var gradientId = sideName + "_" + type + "_Trim_"+trimCount+"_Gradient";
|
||
|
||
// var gradientPrefix = sideName+"_"+type+"_";
|
||
// var gradientIds = sideName+"_"+type+"_Gradients";
|
||
|
||
// loadGradientTemplate(gradientFor, gradientIds, objectId, gradientPrefix, gradientColor1, gradientColor2, gradientColorOffset1, gradientColorOffset2, trimCount);
|
||
|
||
// try {
|
||
// document.getElementById(objectId).contentDocument.getElementById(SVGColorId).setAttribute("fill", "url(#"+gradientId+")");
|
||
// }catch(e){
|
||
// //error here...
|
||
// }
|
||
|
||
// });
|
||
}
|
||
|
||
|
||
try{
|
||
var getTrimPattern = obj[0].Trims[i][trimNumPattern].patternId;
|
||
|
||
if((getTrimPattern != "noPattern") || (getTrimPattern != "")){
|
||
var pColors = obj[0].Trims[i][trimNumPattern].patternColors['length'];
|
||
if(pColors > 0){
|
||
// console.log(pColors);
|
||
var k, arrayPatternColor = [];
|
||
for (a = 0 ; a < pColors ; a++){
|
||
l = a + 1;
|
||
k = "PatternColor" + l;
|
||
temp = {};
|
||
temp['PatternColor' + l] = obj[0].Trims[i][trimNumPattern].patternColors[a][k];
|
||
arrayPatternColor.push(temp);
|
||
}
|
||
// console.log(arrayPatternColor);
|
||
// console.log(obj[0].Trims[i][trimNumPattern].patternColorType);
|
||
SideAndPath.forEach(function(value) {
|
||
var sideName = value['Side'];
|
||
var type = value['Type'];
|
||
|
||
var objectId = "objSVG_" + type + "_" + sideName;
|
||
var SVGColorId = type +"_"+sideName+"_Trim_"+ trimCount;
|
||
|
||
var svgpath = edit_pattern_properties(getTrimPattern).small;
|
||
var clipathval = "url(#"+ SVGColorId +"_Clippath_URL)";
|
||
var svgpatternid = SVGColorId + "_Pattern";
|
||
var TypeAndSide = type + "_" + sideName;
|
||
|
||
var gradientColorId = "url(#"+sideName + "_" + type + "_Trim_"+trimCount+"_Pattern_Gradient)" ;
|
||
var gradientPrefix = sideName+"_"+type+"_";
|
||
var gradientIds = sideName+"_"+type+"_Gradients";
|
||
|
||
|
||
|
||
if(obj[0].Trims[i][trimNumPattern].patternColorType == "Solid"){
|
||
// var patternId = type +"_"+sideName+"_PatternColor"+i;
|
||
var sa = document.getElementById(objectId).contentDocument;
|
||
var getPatternColor = "red";
|
||
|
||
edit_loadPattern(svgpath, clipathval, svgpatternid, objectId, TypeAndSide, arrayPatternColor);
|
||
}
|
||
else{
|
||
var gradientColor1 = obj[0].Trims[i][trimNumPattern].patternGradientColor1;
|
||
var gradientColor2 = obj[0].Trims[i][trimNumPattern].patternGradientColor2;
|
||
var gradientColorOffset1 = obj[0].Trims[i][trimNumPattern].patternGradientOffset1;
|
||
var gradientColorOffset2 = obj[0].Trims[i][trimNumPattern].patternGradientOffset2;
|
||
var gradientFor = "Trim_Pattern";
|
||
// console.log(gradientColor1);
|
||
// var trimCount = 0;
|
||
edit_loadGradientTemplate(gradientFor, gradientIds, objectId, gradientPrefix, gradientColor1, gradientColor2, gradientColorOffset1, gradientColorOffset2, trimCount);
|
||
edit_loadPatternGradient(svgpath, clipathval, svgpatternid, objectId, TypeAndSide, gradientColorId);
|
||
}
|
||
});
|
||
}
|
||
}
|
||
|
||
}catch(e){
|
||
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
|
||
function edit_loadGradientTemplate(gradientFor, gradientIds, gradientPrefix, gradientColor1, gradientColor2, gradientColorOffset1, gradientColorOffset2, trimCount){
|
||
$.ajax({ //create an ajax request to load_page.php
|
||
|
||
type: "POST",
|
||
url: "{{ url('/designer/edit/a/edit-gradient-append') }}",
|
||
data : {
|
||
gradientFor : gradientFor,
|
||
gradientPrefix : gradientPrefix,
|
||
stop_color_1 : gradientColor1,
|
||
stop_color_2 : gradientColor2,
|
||
offset_1 : gradientColorOffset1,
|
||
offset_2 : gradientColorOffset2,
|
||
trimCount : trimCount
|
||
},
|
||
beforeSend:function(xhr){
|
||
var token = $('meta[name="csrf_token"]').attr('content');
|
||
|
||
if (token) {
|
||
return xhr.setRequestHeader('X-CSRF-TOKEN', token);
|
||
}
|
||
xhr.setRequestHeader( 'X-Requested-With', 'XMLHttpRequest');
|
||
},
|
||
success: function(response) {
|
||
|
||
try{
|
||
var g = document.getElementById(gradientIds);
|
||
var prevData = $(g).html();
|
||
$(g).html(response);
|
||
}catch(e){
|
||
|
||
}
|
||
|
||
}
|
||
});
|
||
}
|
||
|
||
function edit_loadPattern(svgpath, clipathval, svgpatternid, visualizerObject, TypeAndSide, getPatternColor){
|
||
|
||
$.get(svgpath, null, function(data){
|
||
var svgNode = $("svg", data);
|
||
var arrPath = [];
|
||
var docNode = document.adoptNode(svgNode[0]);
|
||
// console.log(docNode)
|
||
for(var i = 0 ; i < docNode.querySelectorAll("path")['length'] ; i++){
|
||
j = i + 1;
|
||
k = "PatternColor" + j;
|
||
|
||
var pathPatterns = docNode.querySelectorAll("path")[i];
|
||
|
||
// for setting clippath
|
||
var att = document.createAttribute("clip-path");
|
||
att.value = clipathval;
|
||
pathPatterns.setAttributeNode(att);
|
||
|
||
// for set Pattern Id
|
||
var getPatternIdFromSVG = TypeAndSide +"_"+ pathPatterns.getAttributeNode('id').value
|
||
var att1 = document.createAttribute("id");
|
||
att1.value = getPatternIdFromSVG;
|
||
pathPatterns.setAttributeNode(att1);
|
||
|
||
// for PatternColor
|
||
var patterColor = document.createAttribute("fill");
|
||
patterColor.value = getPatternColor[i][k];
|
||
pathPatterns.setAttributeNode(patterColor);
|
||
|
||
var s = new XMLSerializer();
|
||
var str = s.serializeToString(pathPatterns);
|
||
|
||
arrPath.push(str);
|
||
}
|
||
|
||
try{
|
||
var contents = JSON.stringify(arrPath);
|
||
var con = jQuery.parseJSON(contents);
|
||
//console.log(con);
|
||
var countContents = con.length;
|
||
if(countContents != 0){ // check if content
|
||
var jContent = $.map(con, function(value) {
|
||
return(value);
|
||
});
|
||
// var t = document.getElementById(visualizerObject);
|
||
// var m = t.contentDocument.getElementById(svgpatternid);
|
||
var m = document.getElementById(svgpatternid);
|
||
// console.log(m);
|
||
$(m).html(jContent.join(""));
|
||
|
||
}
|
||
}catch (e){
|
||
//no errpr
|
||
}
|
||
|
||
|
||
}, 'xml');
|
||
}
|
||
|
||
function edit_pattern_properties(id){
|
||
var data;
|
||
$.ajax({ //create an ajax request to load_page.php
|
||
type: "POST",
|
||
url : "{{ url('/designer/edit/a/edit-pattern-properties') }}",
|
||
data : {
|
||
patternId : id
|
||
},
|
||
async: false,
|
||
dataType : 'json',
|
||
beforeSend:function(xhr){
|
||
var token = $('meta[name="csrf_token"]').attr('content');
|
||
|
||
if (token) {
|
||
return xhr.setRequestHeader('X-CSRF-TOKEN', token);
|
||
}
|
||
xhr.setRequestHeader( 'X-Requested-With', 'XMLHttpRequest');
|
||
},
|
||
success: function(response){
|
||
// return ;
|
||
// callback(response.large);
|
||
data = response;
|
||
// console.log(response);
|
||
}
|
||
|
||
});
|
||
|
||
return data;
|
||
|
||
}
|
||
|
||
function edit_loadPatternGradient(svgpath, clipathval, svgpatternid, visualizerObject, TypeAndSide, getPatternColor){
|
||
console.log(svgpath);
|
||
$.get(svgpath, null, function(data){
|
||
var svgNode = $("svg", data);
|
||
// console.log(getPatternColor);
|
||
var docNode = document.adoptNode(svgNode[0]);
|
||
var pathPatterns = docNode.querySelectorAll("path")[0];
|
||
|
||
var att = document.createAttribute("clip-path");
|
||
att.value = clipathval;
|
||
pathPatterns.setAttributeNode(att);
|
||
|
||
// for set Pattern Id
|
||
var getPatternIdFromSVG = TypeAndSide +"_"+ pathPatterns.getAttributeNode('id').value
|
||
var att1 = document.createAttribute("id");
|
||
att1.value = getPatternIdFromSVG;
|
||
pathPatterns.setAttributeNode(att1);
|
||
|
||
// for PatternColor
|
||
var patterColor = document.createAttribute("fill");
|
||
patterColor.value = getPatternColor;
|
||
pathPatterns.setAttributeNode(patterColor);
|
||
|
||
|
||
try{
|
||
document.getElementById(svgpatternid).append(pathPatterns);
|
||
|
||
}catch (e){
|
||
//no errpr
|
||
}
|
||
|
||
|
||
}, 'xml');
|
||
}
|
||
|
||
function edit_set_pattern(getId, patternType, patternFor, pcolors, gradientColor){
|
||
$.ajax({ //create an ajax request to load_page.php
|
||
|
||
type: "POST",
|
||
url: "{{ url('/designer/edit/a/edit-set-pattern') }}",
|
||
dataType: "html", //expect html to be returned
|
||
data: {
|
||
patternId : getId,
|
||
patternType: patternType,
|
||
patternFor: patternFor,
|
||
pcolors : pcolors,
|
||
gradientColor: gradientColor
|
||
},
|
||
beforeSend:function(xhr){
|
||
var token = $('meta[name="csrf_token"]').attr('content');
|
||
|
||
if (token) {
|
||
return xhr.setRequestHeader('X-CSRF-TOKEN', token);
|
||
}
|
||
xhr.setRequestHeader( 'X-Requested-With', 'XMLHttpRequest');
|
||
},
|
||
success: function(response){
|
||
|
||
if(getId != 'noPattern'){
|
||
|
||
$("#patternColorChoices").hide().html(response).fadeIn("slow");
|
||
|
||
loadPatternColor();
|
||
colorPickerCustom();
|
||
|
||
}else{
|
||
$("#patternColorChoices").html(response);
|
||
//backToNoPattern();
|
||
}
|
||
}
|
||
});
|
||
}
|
||
</script>
|
||
</body>
|
||
|
||
</html> |