webmaster/crewsportswear
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update designer with sleeves and all over print

Browse Source
This commit is contained in:
Frank John Begornia
2019-06-03 18:00:37 +08:00
parent 30962d3b4e
commit 03f9649f9b
7 changed files with 598 additions and 210 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
app/Http/Controllers/designer/DesignerController.php
View File

@@ -382,9 +382,9 @@ class DesignerController extends Controller {
<div class="row">
<div class="form-group col-md-12">
<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 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" 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" class="btn btn-danger pull-right btn-sm addMarginLeft pasteObject" title="Paste object(s)"><i class="fa fa-paste" aria-hidden="true"></i></button> -->
<button type="button" class="btn btn-danger pull-right btn-sm addMarginLeft copyObject" title="Duplicate object"><i class="fa fa-copy" aria-hidden="true"></i></button>
<!-- <button type="button" class="btn btn-danger pull-right btn-sm addMarginLeft copyObject" title="Duplicate object"><i class="fa fa-copy" aria-hidden="true"></i></button> -->
</div>
</div>
@@ -442,9 +442,13 @@ class DesignerController extends Controller {
<!-- <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> -->
<button class="btn btn-sm btn-default btn-send-middle" style="margin:2px;" onclick="centerOnly();"></button>
<!-- <button class="btn btn-sm btn-default btn-send-middle" style="margin:2px;" onclick="centerOnly();"></button>
<button class="btn btn-sm btn-default center-vertical" style="margin:2px;" onclick="centerVer();"></button>
<button class="btn btn-sm btn-default center-horizontal" style="margin:2px;" onclick="centerHor();" ></button>
<button class="btn btn-sm btn-default center-horizontal" style="margin:2px;" onclick="centerHor();" ></button> -->
<button class="btn btn-sm btn-default" style="min-width:35px;" title="Center Vertical" onclick="centerVer();"><i class="fa fa-arrows-v"></i></button>
<button class="btn btn-sm btn-default" style="min-width:35px;" title="Center Horizontal" onclick="centerHor();" ><i class="fa fa-arrows-h"></i></button>
<button class="btn btn-sm btn-default flip-vertically" style="min-width:35px;" title="Flip Vertically"><i class="fa fa-angle-double-up"></i></button>
<button class="btn btn-sm btn-default flip-horizontally" style="min-width:35px;" title="Flip Horizontally"><i class="fa fa-angle-double-right"></i></button>
</div>
</div>
@@ -462,37 +466,37 @@ class DesignerController extends Controller {
$getTemPlateCode = $tempDecode[0]->templateCode;
$designCode = sha1(time() . "-" .date('ymd'));
if(isset($post['json_Jersey_Front'])){
$json_Jersey_Front = $post['json_Jersey_Front'];
if(isset($post['json_Front'])){
$json_Front = $post['json_Front'];
}else{
$json_Jersey_Front = null;
$json_Front = null;
}
if(isset($post['json_Jersey_Back'])){
$json_Jersey_Back = $post['json_Jersey_Back'];
if(isset($post['json_Back'])){
$json_Back = $post['json_Back'];
}else{
$json_Jersey_Back = null;
$json_Back = null;
}
if(isset($post['json_Shorts_Left'])){
$json_Shorts_Left = $post['json_Shorts_Left'];
if(isset($post['json_Left'])){
$json_Left = $post['json_Left'];
}else{
$json_Shorts_Left = null;
$json_Left = null;
}
if(isset($post['json_Shorts_Right'])){
$json_Shorts_Right = $post['json_Shorts_Right'];
if(isset($post['json_Right'])){
$json_Right = $post['json_Right'];
}else{
$json_Shorts_Right = null;
$json_Right = null;
}
if(isset($post['json_Shirts_Front'])){
$json_Jersey_Front = $post['json_Shirts_Front'];
}
// if(isset($post['json_Shirts_Front'])){
// $json_Jersey_Front = $post['json_Shirts_Front'];
// }
if(isset($post['json_Shirts_Back'])){
$json_Jersey_Back = $post['json_Shirts_Back'];
}
// if(isset($post['json_Shirts_Back'])){
// $json_Jersey_Back = $post['json_Shirts_Back'];
// }
try {
$design_info = array(
@@ -501,10 +505,10 @@ class DesignerController extends Controller {
'TemplateCode' => $getTemPlateCode,
'DesignCode' => $designCode,
'TemplateDesign'=> $post['templateDetails'],
'ContentFrontJersey' => $json_Jersey_Front,
'ContentBackJersey' => $json_Jersey_Back,
'ContentLeftShorts' => $json_Shorts_Left,
'ContentRightShorts' => $json_Shorts_Right
'ContentFront' => $json_Front,
'ContentBack' => $json_Back,
'ContentLeft' => $json_Left,
'ContentRight' => $json_Right
);
}
@@ -547,12 +551,15 @@ class DesignerController extends Controller {
// var_dump($this->getProductCode());
$templatepaths_arrays = $newDesignerModel->selectTemplatePathsByTemplateCode($client_design_array[0]->TemplateCode);
$array_cat_name = $newMainModel->selectCategoryName($client_design_array[0]->TemplateCode);
// var_dump($array_cat_name);
$array_cat_name = $newMainModel->selectCategoryName($client_design_array[0]->TemplateCode);
$array_templates = $newDesignerModel->selectTemplate(md5($client_design_array[0]->TemplateCode));
// var_dump($array_templates);
return view('designer.design_preview')
->with('client_design_array', $client_design_array)
->with('templatepaths_arrays', $templatepaths_arrays)
->with('teamstore_array', $teamstore_array)
->with('array_cat_name', $array_cat_name);
->with('array_cat_name', $array_cat_name)
->with('array_templates', $array_templates);
}
protected function getProductCode()

88
public/designer/js/aligning_guidelines.js Normal file
View File

@@ -0,0 +1,88 @@
/**
* Augments canvas by assigning to `onObjectMove` and `onAfterRender`.
* This kind of sucks because other code using those methods will stop functioning.
* Need to fix it by replacing callbacks with pub/sub kind of subscription model.
* (or maybe use existing fabric.util.fire/observe (if it won't be too slow))
*/
function initCenteringGuidelines(canvas) {
var canvasWidth = canvas.getWidth(),
canvasHeight = canvas.getHeight(),
canvasWidthCenter = canvasWidth / 2,
canvasHeightCenter = canvasHeight / 2,
canvasWidthCenterMap = { },
canvasHeightCenterMap = { },
centerLineMargin = 4,
centerLineColor = 'rgba(255,0,241,0.5)',
centerLineWidth = 1,
ctx = canvas.getSelectionContext(),
viewportTransform;
for (var i = canvasWidthCenter - centerLineMargin, len = canvasWidthCenter + centerLineMargin; i <= len; i++) {
canvasWidthCenterMap[Math.round(i)] = true;
}
for (var i = canvasHeightCenter - centerLineMargin, len = canvasHeightCenter + centerLineMargin; i <= len; i++) {
canvasHeightCenterMap[Math.round(i)] = true;
}
function showVerticalCenterLine() {
showCenterLine(canvasWidthCenter + 0.5, 0, canvasWidthCenter + 0.5, canvasHeight);
}
function showHorizontalCenterLine() {
showCenterLine(0, canvasHeightCenter + 0.5, canvasWidth, canvasHeightCenter + 0.5);
}
function showCenterLine(x1, y1, x2, y2) {
ctx.save();
ctx.strokeStyle = centerLineColor;
ctx.lineWidth = centerLineWidth;
ctx.beginPath();
ctx.moveTo(x1 * viewportTransform[0], y1 * viewportTransform[3]);
ctx.lineTo(x2 * viewportTransform[0], y2 * viewportTransform[3]);
ctx.stroke();
ctx.restore();
}
var afterRenderActions = [],
isInVerticalCenter,
isInHorizontalCenter;
canvas.on('mouse:down', function () {
viewportTransform = canvas.viewportTransform;
});
canvas.on('object:moving', function(e) {
var object = e.target,
objectCenter = object.getCenterPoint(),
transform = canvas._currentTransform;
if (!transform) return;
isInVerticalCenter = Math.round(objectCenter.x) in canvasWidthCenterMap,
isInHorizontalCenter = Math.round(objectCenter.y) in canvasHeightCenterMap;
if (isInHorizontalCenter || isInVerticalCenter) {
object.setPositionByOrigin(new fabric.Point((isInVerticalCenter ? canvasWidthCenter : objectCenter.x), (isInHorizontalCenter ? canvasHeightCenter : objectCenter.y)), 'center', 'center');
}
});
canvas.on('before:render', function() {
canvas.clearContext(canvas.contextTop);
});
canvas.on('after:render', function() {
if (isInVerticalCenter) {
showVerticalCenterLine();
}
if (isInHorizontalCenter) {
showHorizontalCenterLine();
}
});
canvas.on('mouse:up', function() {
// clear these values, to stop drawing guidelines once mouse is up
isInVerticalCenter = isInHorizontalCenter = null;
canvas.renderAll();
});
}

11
resources/views/app.blade.php
View File

@@ -68,8 +68,17 @@
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script>
$(document).ready(function(){
$('.reveal-password').click(function(e){
var $pwd = $(".pwd");
if ($pwd.attr('type') === 'password') {
$pwd.attr('type', 'text');
$(this).html('<i class="fa fa-eye-slash"></i>');
} else {
$pwd.attr('type', 'password');
$(this).html('<i class="fa fa-eye"></i>');
}
});
// console.log($('.data-errors').length);
if($('.data-errors').length > 0){
$('#team-store-login').modal('show')
return false;

105
resources/views/designer/design_preview.blade.php
View File

@@ -69,6 +69,12 @@
.table>thead>tr>th{
border-bottom:none;
}
.hide-bullets {
list-style:none;
margin-left: -40px;
margin-top:20px;
display: -webkit-inline-box;
}
</style>
</head>
@@ -81,31 +87,26 @@
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="panel panel-default">
<div class="panel-heading">
<h4>My Design
<h4>{{ $client_design_array[0]->DesignName }}
<button class="btn btn-default btn-md pull-right" id="btn-reload-design" title="Reload Design"><i class="fa fa-refresh"></i></button>
</h4>
<div class="clearfix"></div>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-6 text-center">
<div class="col-md-12 text-center">
@foreach($templatepaths_arrays as $k => $template)
@if($k == 0)
<img id="{{ strtolower($template->Side) }}-image-thumb" src="{{asset('/public/images/loading-please-wait.gif')}}" class="img img-responsive img-loader">
<img id="{{ strtolower($template->Side) }}-image-thumb" src="{{asset('/public/images/loading-please-wait.gif')}}" class="img img-responsive img-loader main-thumbnail">
@endif
@endforeach
</div>
<div class="col-md-6 text-center">
<!-- </div> -->
</div>
<div class="row">
@foreach($templatepaths_arrays as $k => $template)
<div class="col-md-3 text-center">
@if($k != 0)
<img id="{{ strtolower($template->Side) }}-image-thumb" src="{{asset('/public/images/loading-please-wait.gif')}}" class="img img-responsive img-loader">
@endif
</div>
@endforeach
</div>
<div class="col-md-12 text-center">
<ul class="hide-bullets">
</ul>
</div>
</div>
@@ -118,45 +119,6 @@
</div>
</div>
</div>
<!-- {{ Auth::user()->role }} -->
<!-- <div class="col-md-5 col-sm-5 col-xs-12">
<form id="frm-roster">
<div class="panel panel-default">
<div class="panel-heading">
<h4>Design Details</h4>
</div>
<input type="hidden" class="form-control" id="design_code" name="designCode" value="{{ $client_design_array[0]->DesignCode }}">
<input type="hidden" class="form-control" id="template_code" name="template_code" value="{{ $client_design_array[0]->TemplateCode }}">
<input type="hidden" class="form-control" id="design_name" name="design_name" value="{{ $client_design_array[0]->DesignName }}">
<div class="panel-body panel-design-details" id="orderListPanel">
<div class="row">
<div class="col-sm-12">
<div class="text-center" style="margin-top: 5em;">
@if(Auth::user()->role == "store_owner")
<div class="form-group">
<button type="button" class="btn btn-success btn-lg btn-sell" style="width:150px;"><i class="fa fa-cart-plus"></i> Sell</button>
</div>
@endif
<div class="form-group">
<button type="button" class="btn btn-info btn-lg btn-buy" style="width:150px;"><i class="fa fa-list-ol"></i> Add Roster</button>
</div>
</div>
</div>
</div>
</div>
<div class="panel-footer">
<div id="dd_footer_button">
<a href="{{ url('user/my-designs') }}" type="button" class="btn btn-default pull-right"><i class="fa fa-arrow-left"></i> Go to My Designs</a>
</div>
<div class="clearfix"></div>
</div>
</div>
</form>
</div> -->
</div>
</div>
</div>
@@ -359,16 +321,30 @@
// }
});
$(document).on('a click', '.a_thumbnail', function(){
$('.main-thumbnail').attr('src', $(this).find("img").attr('src'));
$('.a_thumbnail').removeClass('active');
$(this).addClass('active');
});
});
function generateThumbnails(){
var ip = "{{ config('site_config.prod_private_server_ip') }}";
var port = "{{ $array_cat_name[0]->Port }}";
var template_format = "{{ $array_templates[0]->TemplateFormat }}";
var gen_url;
if(template_format == "png"){
gen_url = ip+":"+port+"/ap/{{ $client_design_array[0]->DesignCode }}";
}else{
gen_url = ip+":"+port+"/tb/{{ $client_design_array[0]->DesignCode }}";
}
$.ajax({ //create an ajax request to load_page.php
type: "GET",
url: ip+":"+port+"/tb/{{ $client_design_array[0]->DesignCode }}",
url: gen_url,
dataType: "jsonp", //expect html to be returned
beforeSend: function() {
console.log('loading images');
@@ -378,13 +354,36 @@
var SideAndPath = {!! json_encode($templatepaths_arrays) !!};
for (var i = 0; i < SideAndPath.length; i++) {
if(i == 0){
var sideName = SideAndPath[i]['Side'];
var type = SideAndPath[i]['Type'];
$('#'+sideName.toLowerCase()+'-image-thumb').attr('src', response['thumb_'+sideName.toLowerCase()]);
$('#'+sideName.toLowerCase()+'-image-thumb').removeClass("img-loader");
$('#'+sideName.toLowerCase()+'-image-thumb').addClass("img-thumb-custom");
}
}
for (var j = 0; j < SideAndPath.length; j++) {
var sideName = SideAndPath[j]['Side'];
var type = SideAndPath[j]['Type'];
if(j == 0){
$('.hide-bullets').append('<div class="text-center"> ' +
'<li style="padding:10px" class="item-thumb"> ' +
'<a class="thumbnail a_thumbnail active" style="min-width: 130px;"> ' +
'<img style="height: 100px;" src="'+response['thumb_'+sideName.toLowerCase()]+'" class="img img-responsive">' +
'</a> ' +
'</li> ' +
'</div>');
}else{
$('.hide-bullets').append('<div class="text-center"> ' +
'<li style="padding:10px" class="item-thumb"> ' +
'<a class="thumbnail a_thumbnail" style="min-width: 130px;"> ' +
'<img style="height: 100px;" src="'+response['thumb_'+sideName.toLowerCase()]+'" class="img img-responsive">' +
'</a> ' +
'</li> ' +
'</div>');
}
}
}
});

420
resources/views/designer/designer.blade.php
View File

@@ -44,7 +44,7 @@
padding: 20px;
}
.visualizer-container{
height: 510px;
height: 520px;
width: 100%;
margin: auto;
}
@@ -213,7 +213,7 @@
@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 }}
{{ $template->Side }}
</a>
</li>
@endforeach
@@ -225,31 +225,46 @@
<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 id="objSVG_{{ $template->Type }}_{{ $template->Side }}" style="position:absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);">
</div>
@if(($template->Type == "Jersey" || $template->Type == "Shirts") && $template->Side == "Front")
<canvas id="canvas_{{ $template->Type }}_{{ $template->Side }}" width="222px" height="380px" style="margin-top:42px; margin-left: 0px;"></canvas>
<!-- Basketball Uniform -->
@if($template->Type == "Jersey" && $template->Side == "Front")
<canvas id="canvas_{{ $template->Type }}_{{ $template->Side }}" width="222px" height="380px" style="margin-top:47px; margin-left: 0px;"></canvas>
@endif
@if(($template->Type == "Jersey" || $template->Type == "Shirts") && $template->Side == "Back")
<canvas id="canvas_{{ $template->Type }}_{{ $template->Side }}" width="221.107px" height="379.04px" style="margin-top:16px; margin-left:-1px;"></canvas>
@if($template->Type == "Jersey" && $template->Side == "Back")
<canvas id="canvas_{{ $template->Type }}_{{ $template->Side }}" width="221.107px" height="379.04px" style="margin-top:22px; margin-left:0px;"></canvas>
@endif
@if($template->Type == "Shorts" && $template->Side == "Right")
<canvas id="canvas_{{ $template->Type }}_{{ $template->Side }}" width="157.933px" height="315.863px" style="margin-top:175px; margin-left: 0px;" ></canvas>
<canvas id="canvas_{{ $template->Type }}_{{ $template->Side }}" width="157.933px" height="315.863px" style="margin-top:180px; margin-left: 0px;" ></canvas>
@endif
@if($template->Type == "Shorts" && $template->Side == "Left")
<canvas id="canvas_{{ $template->Type }}_{{ $template->Side }}" width="157.933px" height="315.863px" style="margin-top:175px; margin-left: 0px;" ></canvas>
<canvas id="canvas_{{ $template->Type }}_{{ $template->Side }}" width="157.933px" height="315.863px" style="margin-top:180px; margin-left: 0px;" ></canvas>
@endif
@if($template->Type == "Shirts" && $template->Side == "Right")
<canvas id="canvas_{{ $template->Type }}_{{ $template->Side }}" width="157.933px" height="315.863px" style="margin-top:188px; margin-left: 0px;" ></canvas>
<!-- Shirts -->
@if($template->Type == "Shirts" && $template->Side == "Front" && $template->TemplateFormat == "svg")
<canvas id="canvas_{{ $template->Type }}_{{ $template->Side }}" width="222px" height="380px" style="margin-top:59px; margin-left: 0px;"></canvas>
@endif
@if($template->Type == "Shirts" && $template->Side == "Back" && $template->TemplateFormat == "svg")
<canvas id="canvas_{{ $template->Type }}_{{ $template->Side }}" width="221.107px" height="379.04px" style="margin-top:23px; margin-left:-1px;"></canvas>
@endif
@if($template->Type == "Shirts" && $template->Side == "Left")
<canvas id="canvas_{{ $template->Type }}_{{ $template->Side }}" width="157.933px" height="315.863px" style="margin-top:188px; margin-left: 0px;" ></canvas>
@if($template->Type == "Shirts" && $template->Side == "Right" && $template->TemplateFormat == "svg")
<canvas id="canvas_{{ $template->Type }}_{{ $template->Side }}" width="96px" height="112px" style="margin-top:257px; margin-left: -17px;" ></canvas>
@endif
@if($template->Type == "Shirts" && $template->Side == "Left" && $template->TemplateFormat == "svg")
<canvas id="canvas_{{ $template->Type }}_{{ $template->Side }}" width="96px" height="112px" style="margin-top:257px; margin-left: 17px;" ></canvas>
@endif
<!-- Shirts All over Print -->
@if($template->Type == "Shirts" && $template->Side == "Front" && $template->TemplateFormat == "png")
<canvas id="canvas_{{ $template->Type }}_{{ $template->Side }}" width="512px" height="512px" style="position:absolute; top: 50%; left: 50%;"></canvas>
@endif
@if($template->Type == "Shirts" && $template->Side == "Back" && $template->TemplateFormat == "png")
<canvas id="canvas_{{ $template->Type }}_{{ $template->Side }}" width="512px" height="512px" style="position:absolute; top: 50%; left: 50%;"></canvas>
@endif
</div>
@@ -265,31 +280,56 @@
<div class="panel with-nav-tabs panel-default">
<div class="panel-heading">
<ul class="nav nav-tabs nav-justified" id="side-controls">
@if($template->Type != "Shirts")
<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>
@elseif($template->Type == "Shirts")
<li class="active"><a href="#tab-change-color" id="tab-change-color1" data-toggle="tab"><br><br>Body Color</a></li>
<li><a href="#tab-add-text" id="tab-add-text1" data-toggle="tab"><i class="fa fa-font"></i><br><br>Text</a></li>
@endif
<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="row">
<div class="form-group col-sm-12">
<!-- <div class="row"> -->
<!-- <div class="col-sm-12"> -->
<div class="well">
<div class="form-inline">
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" id="grid_lines" data-toggle="toggle" data-on="Enabled" data-off="Disabled" data-size="small">
<i class="fa fa-th"></i> Grid Line
</label>
<input type="checkbox" id="grid_lines" data-toggle="toggle" style="width:75px;" data-width="100px" data-on="<i class='fa fa-check-circle'></i> Grid" data-off="<i class='fa fa-ban'></i> Grid" data-size="small">
</div>
</div>
<div class="form-group">
<div style="margin-right:10px;"></div>
</div>
<div class="form-group upper-buttons">
<button id="copy" class="btn btn-default btn-sm" title="Copy"><i class="fa fa-clone"></i></button>
<button id="paste" class="btn btn-default btn-sm" title="Paste" disabled="disabled"><i class="fa fa-clipboard"></i></button>
<button class="btn btn-default btn-sm remove" title="Delete" disabled="disabled"><i class="fa fa-trash" aria-hidden="true"></i></button>
<button class="btn btn-default btn-sm btn-lock-object" data-status="unlock" title="Lock" disabled="disabled"><i class="fa fa-unlock-alt"></i></button>
<!-- <button type="button" class="btn btn-default btn-sm remove" title="Remove object"><i class="fa fa-trash" aria-hidden="true"></i></button> -->
<!-- <button id="flip_x">flip X</button>
<button id="flip_y">flip Y</button> -->
</div>
</div>
</div>
<!-- </div>
</div> -->
<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>
@if($template_arrays[0]->WithGradient != 'no')
<li><a href="#tab_gradient" data-toggle="pill">Gradient</a></li>
@endif
<li><a href="#tab_bodypattern" data-toggle="pill">Pattern</a></li>
</ul>
<div class="tab-content col-md-8">
@@ -390,11 +430,15 @@
@if($template->Type == "Shirts")
@if($i == 1)
<h4>Neck Line</h4>
<h4>Right Sleeve</h4>
@endif
@if($i == 2)
<h4>Sleeves</h4>
<h4>Left Sleeve</h4>
@endif
@if($i == 3)
<h4>Neck Line</h4>
@endif
@else
@@ -482,7 +526,7 @@
<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" 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>
@@ -507,7 +551,6 @@
</div>
</div>
</div>
<div id="textProperties">
@include('designer.text_properties')
</div>
@@ -569,8 +612,8 @@
</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>
<button type="button" class="btn btn-danger pull-right btn-sm addMarginLeft copyObject" title="Duplicate object"><i class="fa fa-copy" aria-hidden="true"></i></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> -->
<!-- <button type="button" class="btn btn-danger pull-right btn-sm addMarginLeft copyObject" title="Duplicate object"><i class="fa fa-copy" aria-hidden="true"></i></button> -->
</div>
</div>
<div class="row">
@@ -605,9 +648,13 @@
</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 btn-send-middle" style="margin:2px;" onclick="centerOnly();"></button>
<!-- <button class="btn btn-sm btn-default btn-send-middle" style="margin:2px;" onclick="centerOnly();"></button>
<button class="btn btn-sm btn-default center-horizontal" style="margin:2px;" onclick="centerVer();"></button>
<button class="btn btn-sm btn-default center-horizontal" style="margin:2px;" onclick="centerHor();" ></button>
<button class="btn btn-sm btn-default center-horizontal" style="margin:2px;" onclick="centerHor();" ></button> -->
<button class="btn btn-sm btn-default" style="min-width:35px;" title="Center Vertical" onclick="centerVer();"><i class="fa fa-arrows-v"></i></button>
<button class="btn btn-sm btn-default" style="min-width:35px;" title="Center Horizontal" onclick="centerHor();" ><i class="fa fa-arrows-h"></i></button>
<button class="btn btn-sm btn-default flip-vertically" style="min-width:35px;" title="Flip Vertically"><i class="fa fa-angle-double-up"></i></button>
<button class="btn btn-sm btn-default flip-horizontally" style="min-width:35px;" title="Flip Horizontally"><i class="fa fa-angle-double-right"></i></button>
</div>
</div>
<hr>
@@ -794,7 +841,8 @@
<script src="{{asset('/public/designer/js/custom-script.js')}}"></script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script src="https://rawgit.com/fabricjs/fabric.js/master/lib/centering_guidelines.js"></script>
<script src="https://rawgit.com/fabricjs/fabric.js/master/lib/aligning_guidelines.js"></script>
<script>
$(document).ready(function() {
@@ -812,17 +860,118 @@
var sideName = SideAndPath[i]['Side'];
var type = SideAndPath[i]['Type'];
try{
if($(this).prop('checked')){
document.getElementById(sideName + '_Grid_Lines').setAttribute("display", "");
}else{
document.getElementById(sideName + '_Grid_Lines').setAttribute("display", "none");
}
}catch(e){
}
}
});
$("#copy").click(function(){
copy();
});
$("#paste").click(function(){
paste();
});
$(".btn-lock-object").click(function(){
if($(this).data('status') == 'unlock'){
lockObject();
}else{
unLockObject();
}
});
$(document).on('button click', '.flip-horizontally', function(){
// console.log('flipx');
var object = canvas.getActiveObject();
object.toggle('flipX');
canvas.renderAll();
});
$(document).on('button click', '.flip-vertically', function(){
var object = canvas.getActiveObject();
object.toggle('flipY');
canvas.renderAll();
});
$(document).keyup(function(e) {
if (e.key === "Escape") { // escape key maps to keycode `27`
//console.log('escape');
onDeSelected();
}
});
var copiedObject,
copiedObjects = new Array();
function copy(){
copiedObjects = new Array();
if(canvas.getActiveGroup()){
//console.log(canvas.getActiveGroup().getObjects());
canvas.getActiveGroup().getObjects().forEach(function(o){
var object = fabric.util.object.clone(o);
copiedObjects.push(object);
});
$('#paste').attr("disabled", false);
}
else if(canvas.getActiveObject()){
// var object = fabric.util.object.clone(canvas.getActiveObject());
var object = canvas.getActiveObject().toObject(['id']);
copiedObject = object;
copiedObjects = new Array();
$('#paste').attr("disabled", false);
}
}
function paste(){
if(copiedObjects.length > 0){
for(var i in copiedObjects){
copiedObjects[i]=fabric.util.object.clone(copiedObjects[i]);
//copiedObjects[i].set("top", copiedObjects[i].top+100);
//copiedObjects[i].set("left", copiedObjects[i].left+100);
canvas.add(copiedObjects[i]);
canvas.item(canvas.size() - 1).hasControls = true;
}
}
else if(copiedObject){
// copiedObject= fabric.util.object.clone(copiedObject);
// copiedObject.set("top", 150);
// copiedObject.set("left", 150);
// canvas.add(copiedObject);
// canvas.item(canvas.size() - 1).hasControls = true;
fabric.util.enlivenObjects([copiedObject], function(objects) {
objects.forEach(function(o) {
o.set({
// top: o.top + 1,
// left: o.left + 1,
borderColor: '#71b7f3',
cornerColor: '#71b7f3',
cornerSize: 10,
transparentCorners: false
});
canvas.add(o);
canvas.setActiveObject(o);
});
canvas.renderAll();
});
}
canvas.renderAll();
}
$("#frm-login").validate({
rules: {
email: {
@@ -905,14 +1054,13 @@
var sideName = SideAndPath[i]['Side'];
var type = SideAndPath[i]['Type'];
var contentName = "content_" + type + "_" + sideName;
console.log(canvasName);
var contentName = "content_" + sideName;
//console.log(contentName);
contentName = JSON.stringify(window['canvas_' + type + '_' + sideName].toObject(['idNumber', 'id'])); // = new fabric.Canvas(canvasName);
//console.log(contentName);
var inputName = "json_" + type + "_" + sideName;
var hiddenFieldContentDesign = "field_" + type + "_" + sideName;
var inputName = "json_" + sideName;
var hiddenFieldContentDesign = "field_" + sideName;
hiddenFieldContentDesign = document.createElement("input");
hiddenFieldContentDesign.setAttribute("type", "hidden");
@@ -1032,8 +1180,6 @@
// }
});
;
}
finalJSON.push({
@@ -1310,22 +1456,42 @@
function changeData() {
var SideAndPath = {!! json_encode($templatepaths_arrays) !!};
var canvas;
for (var i = 0; i < SideAndPath.length; i++) {
var sideName = SideAndPath[i]['Side'];
var type = SideAndPath[i]['Type'];
var pathLocation = SideAndPath[i]['Path'];
var templateFormat = SideAndPath[i]['TemplateFormat'];
var objectId = "objSVG_" + type + "_" + sideName;
var SVGColorId = type +"_"+sideName+"_Color";
var gradientIds = sideName+"_"+type+"_Gradients";
var gradientPrefix = sideName+"_"+type+"_";
var tempPath = "{{ config('site_config.uploads') }}" + pathLocation;
// console.log(tempPath)
if(!document.getElementById(objectId))
return false;
var tempPath = "{{ config('site_config.uploads') }}" + pathLocation;
// console.log(tempPath);
if(templateFormat == 'png'){
var canvasName = "canvas_" + type + "_" + sideName;
// $('#'+objectId).html('<canvas id="canvas_'+type+'_'+sideName+'" width="512px" height="512px" style="border: 1px solid red;"></canvas>');
// window['canvas_' + type + '_' + sideName] = new fabric.Canvas(canvasName);
// window['canvas_' + type + '_' + sideName].setOverlayImage(tempPath, window['canvas_' + type + '_' + sideName].renderAll.bind(canvas), {
// width: window['canvas_' + type + '_' + sideName].width,
// height: window['canvas_' + type + '_' + sideName].height
// });
}
if(templateFormat == 'svg'){
console.log('asdasda');
loadTemplate(tempPath, objectId, gradientIds, gradientPrefix);
}
}
}
@@ -1470,8 +1636,20 @@
for (var i = 0; i < SideAndPath.length; i++) {
var sideName = SideAndPath[i]['Side'];
var type = SideAndPath[i]['Type'];
var pathLocation = SideAndPath[i]['Path'];
var canvasName = "canvas_" + type + "_" + sideName;
var tempPath = "{{ config('site_config.uploads') }}" + pathLocation;
window['canvas_' + type + '_' + sideName] = new fabric.Canvas(canvasName);
var templateFormat = SideAndPath[i]['TemplateFormat'];
if(templateFormat == 'png'){
window['canvas_' + type + '_' + sideName].setOverlayImage(tempPath, window['canvas_' + type + '_' + sideName].renderAll.bind(window['canvas_' + type + '_' + sideName]), {
width: window['canvas_' + type + '_' + sideName].width,
height: window['canvas_' + type + '_' + sideName].height
});
}
}
@@ -1479,7 +1657,10 @@
var canvas = window['canvas_' + SideAndPath[0]['Type'] + '_' + SideAndPath[0]['Side']]; //canvas_Jersey_Front;
var canvasID = 'canvas_' + SideAndPath[0]['Type'] + '_' + SideAndPath[0]['Side'];
/* ############################ */
initCenteringGuidelines(canvas);
initAligningGuidelines(canvas);
canvas.selection = false;
canvas.controlsAboveOverlay = true;
$('#side-controls a').click(function (e) {
onDeSelected();
});
@@ -1490,12 +1671,16 @@
canvasID = $(this).attr('data-canvas-id');
canvas.calcOffset();
initCanvas();
canvas.on('object:moving', function(options) {
// canvas.on('object:moving', function(options) {
console.log('asdasd')
});
// console.log('asdasd')
// });
// canvas.on('selection:cleared', onDeSelected);
// canvas.on('object:selected', onSelected);
initCenteringGuidelines(canvas);
initAligningGuidelines(canvas);
canvas.selection = false;
canvas.controlsAboveOverlay = true;
});
//trigger enter ######################################################################
@@ -1592,18 +1777,18 @@
// 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();
// 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();
// $("#"+canvasID.split("_")[2] + "_" +canvasID.split("_")[1] + "_Border").css({ "display" : "" });
document.getElementById(canvasID.split("_")[2] + "_" +canvasID.split("_")[1] + "_Border").setAttribute("display", "");
// // $("#"+canvasID.split("_")[2] + "_" +canvasID.split("_")[1] + "_Border").css({ "display" : "" });
// document.getElementById(canvasID.split("_")[2] + "_" +canvasID.split("_")[1] + "_Border").setAttribute("display", "");
}
console.log('asdasd')
// }
// console.log('asdasd')
});
canvas.on('object:rotating', onRotating);
@@ -1623,16 +1808,21 @@
canvas.on('mouse:up', function(element) {
// $("#"+canvasID.split("_")[2] + "_" +canvasID.split("_")[1] + "_Border").css({ "display" : "none" });
try{
document.getElementById(canvasID.split("_")[2] + "_" +canvasID.split("_")[1] + "_Border").setAttribute("display", "none");
}catch(e){
}
_isMouseDown = false;
var isDragEnd = _isDragging;
_isDragging = false;
if (isDragEnd) {
try{
default_canvas_width = 219;
default_canvas_height = 383;
default_canvas_width = canvas.width;
default_canvas_height = canvas.height;
var obj = canvas.getActiveObject();
getWidth = obj.getWidth();
@@ -1706,13 +1896,68 @@
onDeSelected();
}
function lockObject(){
var obj = canvas.getActiveObject();
obj.set({
'lockStatus' : true,
'lockMovementX': true,
'lockMovementY': true,
'lockScalingX': true,
'lockScalingY': true,
'lockRotation': true,
});
$('.btn-lock-object').html('<i class="fa fa-lock"></i>');
$('.btn-lock-object').attr('title', 'Unlock');
$('.btn-lock-object').addClass('active');
$('.btn-lock-object').data('status', 'lock');
canvas.renderAll();
}
function unLockObject(){
var obj = canvas.getActiveObject();
obj.set({
'lockStatus' : false,
'lockMovementX': false,
'lockMovementY': false,
'lockScalingX': false,
'lockScalingY': false,
'lockRotation': false,
});
$('.btn-lock-object').html('<i class="fa fa-unlock"></i>');
$('.btn-lock-object').attr('title', 'Lock');
$('.btn-lock-object').removeClass('active');
$('.btn-lock-object').data('status', 'unlock');
canvas.renderAll();
}
function onSelected(){
var obj = canvas.getActiveObject();
// console.log("Height =", (obj.getScaleY() * obj.getHeight()).toFixed(2));
// console.log("Width = ", (obj.getScaleX() * obj.getWidth()).toFixed(2));
console.log('left-', obj.left, 'top-', obj.top);
$('.remove').attr("disabled", false);
var getLockStatus = canvas.getActiveObject().get('lockStatus');
// console.log(getLockStatus);
$('.btn-lock-object').attr("disabled", false);
if(getLockStatus == true){
$('.btn-lock-object').html('<i class="fa fa-lock"></i>');
$('.btn-lock-object').attr('title', 'Unlock');
$('.btn-lock-object').addClass('active');
$('.btn-lock-object').data('status', 'lock');
}else{
$('.btn-lock-object').html('<i class="fa fa-unlock"></i>');
$('.btn-lock-object').attr('title', 'Lock');
$('.btn-lock-object').data('status', 'unlock');
// $('.btn-lock-object').addClass('active');
}
// console.log('left-', obj.left, 'top-', obj.top);
// console.log('font-', obj.fontSize);
if(obj != null){
@@ -1827,13 +2072,24 @@
return false;
}
// $("#"+canvasID.split("_")[2] + "_" +canvasID.split("_")[1] + "_Border").css({ "display" : "" });
try{
document.getElementById(canvasID.split("_")[2] + "_" +canvasID.split("_")[1] + "_Border").setAttribute("display", "");
}catch(e){
}
}
}
function onDeSelected(){
var obj = canvas.getActiveObject();
$('.remove').attr("disabled", true);
$('.btn-lock-object').attr("disabled", true);
$('.btn-lock-object').html('<i class="fa fa-unlock-alt"></i>');
$('.btn-lock-object').attr('title', 'Lock');
$('.btn-lock-object').removeClass('active');
$('.btn-lock-object').data('status', 'unlock');
$("#textProperties").css({ "display" : "none" });
$("#addNewTextId").css({ "display" : "none" });
@@ -1861,8 +2117,12 @@
canvas.discardActiveObject();
canvas.renderAll();
// $("#"+canvasID.split("_")[2] + "_" +canvasID.split("_")[1] + "_Border").css({ "display" : "none" });
try{
document.getElementById(canvasID.split("_")[2] + "_" +canvasID.split("_")[1] + "_Border").setAttribute("display", "none");
}catch(e){
}
}
@@ -1940,8 +2200,12 @@
canvas.renderAll();
}
// $("#"+canvasID).css({ "border" : "1px solid #b1abfb" });
try{
document.getElementById(canvasID.split("_")[2] + "_" +canvasID.split("_")[1] + "_Border").setAttribute("display", "");
}catch(e){
}
};
window.addEventListener("keydown", processKeys, false);
@@ -1967,6 +2231,7 @@
$(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({
@@ -2062,17 +2327,22 @@
$(document).on('input change', '.offsetGradientColor', function() {
var SideAndPath = {!! json_encode($templatepaths_arrays) !!};
var templateType = "{{ $template->Type }}";
// console.log(templateType);
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 {
if(templateType == "Shirts" && (sideName == "Right" || sideName == "Left")) {
document.getElementById(sideName + "_" + type +"_" + $(this).attr('data-gradient-id')).setAttribute("offset", ($(this).val() * 10) - 40 + "%");
}else{
document.getElementById(sideName + "_" + type +"_" + $(this).attr('data-gradient-id')).setAttribute("offset", $(this).val() * 10 + "%");
}
}
catch (e) {
//console.log(e);
}
@@ -2279,12 +2549,12 @@
$("#okBtn").html("Please Wait");
$("#okBtn").attr('disabled', true);
canvas.centerObject(oText);
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');
@@ -3005,6 +3275,7 @@
//hasRotatingPoint: false,
// });
}).scaleToWidth(100);
canvas.centerObject(clipart);
canvas.add(clipart);
canvas.setActiveObject(clipart);
canvas.renderAll();
@@ -3058,7 +3329,7 @@
// 5TH TAB
// for upload image
document.getElementById('upload-images').onchange = function handleImage(e) {
console.log(event);
// console.log(event);
var reader = new FileReader();
reader.onload = function (event) {
@@ -3081,12 +3352,13 @@
hasControls: true,
lockScalingFlip: true,
cache: false,
crossOrigin : 'anonymous'
// width: 15.6
}).scale(0.1);
//image.scale(getRandomNum(0.1, 0.25)).setCoords();
canvas.centerObject(image);
canvas.add(image);
canvas.renderAll(image);
canvas.setActiveObject(image);
@@ -3123,10 +3395,15 @@
var onMoveColor = color.toHexString(); // #ff0000
var SideAndPath = {!! json_encode($templatepaths_arrays) !!};
try{
for (var i = 0; i < SideAndPath.length; i++) {
var sideName = SideAndPath[i]['Side'];
var type = SideAndPath[i]['Type'];
var templateFormat = SideAndPath[i]['TemplateFormat'];
if(templateFormat == "png"){
window['canvas_' + type + '_' + sideName].backgroundColor = onMoveColor;
window['canvas_' + type + '_' + sideName].renderAll();
}
var mainColorId = type + "_" + sideName + "_" + "Color";
var objectId = "objSVG_" + type + "_" + sideName;
@@ -3135,7 +3412,7 @@
// var c = y < 128 ? 'white' : 'black';
try{
if(y < 128){
document.getElementById(sideName+'_Grid_Lines_Path').setAttribute("stroke", "white");
@@ -3152,13 +3429,14 @@
// console.log(border_stroke)
document.getElementById(mainColorId).setAttribute("fill", onMoveColor);
}
// document.getElementById(mainColorId).setAttribute("fill", onMoveColor);
}catch(e){
}
}
$('#row-body-gradient').css({
'display':'none'

8
resources/views/designer/text_properties.blade.php
View File

@@ -78,9 +78,11 @@
<!-- <button class="btn btn-sm btn-default " style="margin:2px;" onclick="teamNameStandardPos();">Standard Position</button>
<button class="btn btn-sm btn-default" style="margin:2px;" onclick="centerVer();"> <img src="images/align-v1.png" height="16px;" /> Center <br>Vertical</button>
<button class="btn btn-sm btn-default" style="margin:2px;" onclick="centerHor();" > <img src="images/align-h1.png" height="16px;" /> Center <br>Horizontal</button> -->
<button class="btn btn-sm btn-default btn-send-middle" title="Standart Position" onclick="teamNameStandardPos();"></button>
<button class="btn btn-sm btn-default center-vertical" title="Center Vertical" onclick="centerVer();"></button>
<button class="btn btn-sm btn-default center-horizontal" title="Center Horizontal" onclick="centerHor();" ></button>
<!-- <button class="btn btn-sm btn-default btn-send-middle" title="Standart Position" onclick="teamNameStandardPos();"></button> -->
<button class="btn btn-sm btn-default" style="min-width:35px;" title="Center Vertical" onclick="centerVer();"><i class="fa fa-arrows-v"></i></button>
<button class="btn btn-sm btn-default" style="min-width:35px;" title="Center Horizontal" onclick="centerHor();" ><i class="fa fa-arrows-h"></i></button>
<button class="btn btn-sm btn-default flip-vertically" style="min-width:35px;" title="Flip Vertically"><i class="fa fa-angle-double-up"></i></button>
<button class="btn btn-sm btn-default flip-horizontally" style="min-width:35px;" title="Flip Horizontally"><i class="fa fa-angle-double-right"></i></button>
</div>

7
resources/views/teamstore-sublayouts/stores.blade.php
View File

@@ -88,7 +88,12 @@
<div class="form-group">
<label class="col-md-4 control-label">Password</label>
<div class="col-md-6">
<input type="password" class="form-control" name="password">
<div class="input-group">
<input type="password" class="form-control pwd" name="password">
<span class="input-group-btn">
<button class="btn btn-default reveal-password" type="button"><i class="fa fa-eye"></i></button>
</span>
</div>
</div>
</div>
<div class="form-group">