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

update

Browse Source
This commit is contained in:
franknstayn
2022-01-19 19:03:13 +08:00
parent 8da18d35f7
commit e4b86960e5
4 changed files with 867 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
app/Http/Controllers/admin/AdminController.php
View File

@@ -98,6 +98,17 @@ class AdminController extends Controller
->with('order_item_array', $order_item_array); ->with('order_item_array', $order_item_array);
} }
public function downloadPrintFile_shorts($dc, $id)
{
$AdminModel = new AdminModel;
$client_design_array = $AdminModel->selectClientDesign($dc);
$order_item_array = $AdminModel->selectOrderItem('Id', $id);
// var_dump($order_item_array);
return view('admin_pages.download_pages.shorts')
->with('client_design_array', $client_design_array)
->with('order_item_array', $order_item_array);
}
public function downloadPrintFile_mask($dc, $id) public function downloadPrintFile_mask($dc, $id)
{ {
$AdminModel = new AdminModel; $AdminModel = new AdminModel;

1
app/Http/routes.php
View File

@@ -85,6 +85,7 @@ Route::group(['middleware' => 'auth'], function () {
// Download Routes ///////////////// // Download Routes /////////////////
Route::get('orders/download/tshirt/{ck}/{id}', 'admin\AdminController@downloadPrintFile_tshirt'); Route::get('orders/download/tshirt/{ck}/{id}', 'admin\AdminController@downloadPrintFile_tshirt');
Route::get('orders/download/jersey/{ck}/{id}', 'admin\AdminController@downloadPrintFile_jersey'); Route::get('orders/download/jersey/{ck}/{id}', 'admin\AdminController@downloadPrintFile_jersey');
Route::get('orders/download/shorts/{ck}/{id}', 'admin\AdminController@downloadPrintFile_shorts');
Route::get('orders/download/mask/{ck}/{id}', 'admin\AdminController@downloadPrintFile_mask'); Route::get('orders/download/mask/{ck}/{id}', 'admin\AdminController@downloadPrintFile_mask');
// End Download Routes ///////////// // End Download Routes /////////////

426
resources/views/admin_pages/download_pages/jersey.blade.php
View File

@@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -8,25 +9,26 @@
<link href="{{asset('/designer/custom-fonts/custom-fonts.php')}}" rel='stylesheet' type='text/css'> <link href="{{asset('/designer/custom-fonts/custom-fonts.php')}}" rel='stylesheet' type='text/css'>
<style> <style>
canvas { canvas {
display:none; display: none;
} }
</style> </style>
</head> </head>
<body onload="loadPrintFile()"> <body onload="loadPrintFile()">
<div id="svgFrontContent" style="display:none;"></div> <div id="svgFrontContent" style="display:none;"></div>
<div id="svgBackContent" style="display:none;"></div> <div id="svgBackContent" style="display:none;"></div>
<div id="svgJockTag" style="display:none;"></div> <div id="svgJockTag" style="display:none;"></div>
<p>Please wait... Click here to go <a href="#" id="close_window" >back</a></p> <p>Please wait... Click here to go <a href="#" id="close_window">back</a></p>
<canvas id="frontCanvas" width="220px" height="380px" style="border 1px solid black; display:none;" ></canvas> <canvas id="frontCanvas" width="220px" height="380px" style="border 1px solid black; display:none;"></canvas>
<canvas id="backCanvas" width="220px" height="380px" style="border 1px solid black; display:none;" ></canvas> <canvas id="backCanvas" width="220px" height="380px" style="border 1px solid black; display:none;"></canvas>
<div id="printFileDiv" style="display:none;"></div> <div id="printFileDiv" style="display:none;"></div>
<form id="myForm" action="{{ url('admin/orders/download') }}" method="post" accept-charset="UTF-8"></form> <form id="myForm" action="{{ url('admin/orders/download') }}" method="post" accept-charset="UTF-8"></form>
<p id="log"></p> <p id="log"></p>
<!-- jQuery 3 --> <!-- jQuery 3 -->
<script src="{{ asset('/bower_components/jquery/dist/jquery.min.js') }}"></script> <script src="{{ asset('/bower_components/jquery/dist/jquery.min.js') }}"></script>
<!-- fabric js 1.7.20 --> <!-- fabric js 1.7.20 -->
@@ -35,83 +37,87 @@
<script src="https://rawgit.com/EffEPi/fabric.curvedText/master/fabric.curvedText.js"></script> <script src="https://rawgit.com/EffEPi/fabric.curvedText/master/fabric.curvedText.js"></script>
<script> <script>
function logSubmit(event) { function logSubmit(event) {
log.textContent = `Form Submitted! Time stamp: ${event.timeStamp}`; log.textContent = `Form Submitted! Time stamp: ${event.timeStamp}`;
event.preventDefault(); event.preventDefault();
} }
var form = document.getElementById('myForm'); var form = document.getElementById('myForm');
var log = document.getElementById('log'); var log = document.getElementById('log');
form.addEventListener('submit', logSubmit); form.addEventListener('submit', logSubmit);
var frontCanvas = new fabric.StaticCanvas( document.getElementById("frontCanvas")); var frontCanvas = new fabric.StaticCanvas(document.getElementById("frontCanvas"));
tmp_frontCanvas = {!! json_encode($client_design_array[0]->ContentFront) !!}; tmp_frontCanvas = {
!!json_encode($client_design_array[0] - > ContentFront) !!
};
frontCanvas.loadFromJSON(tmp_frontCanvas, function(objects, options) { frontCanvas.loadFromJSON(tmp_frontCanvas, function(objects, options) {
frontCanvas.renderAll(); frontCanvas.renderAll();
setTimeout(function(){ setTimeout(function() {
frontCanvas.backgroundImage = 0; frontCanvas.backgroundImage = 0;
frontCanvas.clear(); frontCanvas.clear();
frontCanvas.renderAll(); frontCanvas.renderAll();
setTimeout(function(){ setTimeout(function() {
frontCanvas.loadFromJSON(tmp_frontCanvas, function(objects, options) { frontCanvas.loadFromJSON(tmp_frontCanvas, function(objects, options) {
frontCanvas.renderAll(); frontCanvas.renderAll();
frontCanvas.selection = false; frontCanvas.selection = false;
}); });
},1000); }, 1000);
} ,500); }, 500);
}); });
var backCanvas = new fabric.StaticCanvas( document.getElementById("backCanvas") ); var backCanvas = new fabric.StaticCanvas(document.getElementById("backCanvas"));
tmp_backCanvas = {!! json_encode($client_design_array[0]->ContentBack) !!}; tmp_backCanvas = {
!!json_encode($client_design_array[0] - > ContentBack) !!
};
backCanvas.loadFromJSON(tmp_backCanvas, function(objects, options) { backCanvas.loadFromJSON(tmp_backCanvas, function(objects, options) {
backCanvas.renderAll(); backCanvas.renderAll();
setTimeout(function(){ setTimeout(function() {
backCanvas.backgroundImage = 0; backCanvas.backgroundImage = 0;
backCanvas.clear(); backCanvas.clear();
backCanvas.renderAll(); backCanvas.renderAll();
setTimeout(function(){ setTimeout(function() {
backCanvas.loadFromJSON(tmp_backCanvas, function(objects, options) { backCanvas.loadFromJSON(tmp_backCanvas, function(objects, options) {
backCanvas.renderAll(); backCanvas.renderAll();
backCanvas.selection = false; backCanvas.selection = false;
}); });
},1000); }, 1000);
} ,500); }, 500);
}); });
function loadPrintFile(){ function loadPrintFile() {
var path = 'http://localhost/uploads/images/'; var path = 'http://localhost/uploads/images/';
var template_code = "{{ $client_design_array[0]->TemplateCode }}"; var template_code = "{{ $client_design_array[0]->TemplateCode }}";
var size = "{{ $order_item_array[0]->JerseySize }}"; var size = "{{ $order_item_array[0]->JerseySize }}";
// console.log();
var svgLocation = "{{ config('site_config.images_directory') }}" + "uniform-templates/" + template_code + "/JERSEY/SIZES/" + size + ".svg";
$.ajax({ //create an ajax request to load_page.php // console.log();
var svgLocation = "{{ config('site_config.images_directory') }}" + "uniform-templates/" + template_code + "/JERSEY/SIZES/" + size + ".svg";
$.ajax({ //create an ajax request to load_page.php
type: "GET", type: "GET",
url : svgLocation, url: svgLocation,
dataType: "text", //expect html to be returned., dataType: "text", //expect html to be returned.,
// headers: { // headers: {
// 'Access-Control-Allow-Origin': '*' // 'Access-Control-Allow-Origin': '*'
// }, // },
success: function(response){ success: function(response) {
$("#printFileDiv").html(response) $("#printFileDiv").html(response)
var fb = document.getElementById('Front_Border'); var fb = document.getElementById('Front_Border');
var fb_x = $(fb).children("rect").attr("x"); var fb_x = $(fb).children("rect").attr("x");
var fb_y = $(fb).children("rect").attr("y"); var fb_y = $(fb).children("rect").attr("y");
@@ -135,36 +141,38 @@
var lb_y = $(lb).children("rect").attr("y"); var lb_y = $(lb).children("rect").attr("y");
var lb_height = $(lb).children("rect").attr("height"); var lb_height = $(lb).children("rect").attr("height");
var lb_width = $(lb).children("rect").attr("width"); var lb_width = $(lb).children("rect").attr("width");
setTimeout(function() { setTimeout(function() {
loadTemplateDesign(); loadTemplateDesign();
frontContent(fb_height, fb_width, fb_x, fb_y); frontContent(fb_height, fb_width, fb_x, fb_y);
backContent(bb_height, bb_width, bb_x, bb_y); backContent(bb_height, bb_width, bb_x, bb_y);
setTimeout(function(){ setTimeout(function() {
sendSVG(); sendSVG();
},2000); }, 2000);
}, 3000); }, 3000);
} }
}); });
} }
function loadTemplateDesign(){ function loadTemplateDesign() {
tmpdetails = {!! json_encode($client_design_array[0]->TemplateDesign) !!}; tmpdetails = {
!!json_encode($client_design_array[0] - > TemplateDesign) !!
};
var obj = JSON.parse(tmpdetails); var obj = JSON.parse(tmpdetails);
///////////// for mainColor ///////////// for mainColor
var getMainColorType = obj[0].mainColor[0].type; var getMainColorType = obj[0].mainColor[0].type;
if(getMainColorType == "Solid"){ if (getMainColorType == "Solid") {
var setMainColor = obj[0].mainColor[0].solidColor; var setMainColor = obj[0].mainColor[0].solidColor;
$('#Front_MainColor').attr("fill", setMainColor); $('#Front_MainColor').attr("fill", setMainColor);
$('#Back_MainColor').attr("fill", setMainColor); $('#Back_MainColor').attr("fill", setMainColor);
}else{ } else {
var gradientColor1 = obj[0].mainColor[0].gradientColor1; var gradientColor1 = obj[0].mainColor[0].gradientColor1;
var gradientColor2 = obj[0].mainColor[0].gradientColor2; var gradientColor2 = obj[0].mainColor[0].gradientColor2;
var gradientColorOffset1 = obj[0].mainColor[0].gradientColorOffset1; var gradientColorOffset1 = obj[0].mainColor[0].gradientColorOffset1;
@@ -172,111 +180,111 @@
var gradientFor = "Body"; var gradientFor = "Body";
var trimCount = 0; var trimCount = 0;
var gradientIds = "Gradient_List"; var gradientIds = "Gradient_List";
loadGradientTemplate(gradientFor, gradientIds, gradientColor1, gradientColor2, gradientColorOffset1, gradientColorOffset2, trimCount); loadGradientTemplate(gradientFor, gradientIds, gradientColor1, gradientColor2, gradientColorOffset1, gradientColorOffset2, trimCount);
$('#Back_MainColor').attr("fill", "url(#Body_Gradient)"); $('#Back_MainColor').attr("fill", "url(#Body_Gradient)");
$('#Front_MainColor').attr("fill", "url(#Body_Gradient)"); $('#Front_MainColor').attr("fill", "url(#Body_Gradient)");
}///////////// END for mainColor } ///////////// END for mainColor
///////////// for patternColor ///////////// for patternColor
try{ try {
var getMainBodyPatternId = obj[0].patternColors[0].patternId; var getMainBodyPatternId = obj[0].patternColors[0].patternId;
// console.log(getMainBodyPatternId); // console.log(getMainBodyPatternId);
var pColors = obj[0].patternColors[0].patternColors['length']; var pColors = obj[0].patternColors[0].patternColors['length'];
if(pColors > 0){ // check if pattern exist if (pColors > 0) { // check if pattern exist
var k, arrayPatternColor = []; var k, arrayPatternColor = [];
for (i = 0 ; i < pColors ; i++){ for (i = 0; i < pColors; i++) {
l = i + 1; l = i + 1;
k = "PatternColor" + l; k = "PatternColor" + l;
temp = {}; temp = {};
temp['PatternColor' + l] = obj[0].patternColors[0].patternColors[i][k]; temp['PatternColor' + l] = obj[0].patternColors[0].patternColors[i][k];
arrayPatternColor.push(temp); arrayPatternColor.push(temp);
} }
var getPatternURL = pattern_properties(getMainBodyPatternId); var getPatternURL = pattern_properties(getMainBodyPatternId);
var front_clipathval = "url(#Front_MainColor_Clippath_URL)"; var front_clipathval = "url(#Front_MainColor_Clippath_URL)";
var back_clipathval = "url(#Back_MainColor_Clippath_URL)"; var back_clipathval = "url(#Back_MainColor_Clippath_URL)";
var front_svgpatternid = "Front_MainColor_Pattern";
var back_svgpatternid = "Back_MainColor_Pattern";
var front_idappend = "Front_MainColor"; var front_svgpatternid = "Front_MainColor_Pattern";
var back_idappend = "Back_MainColor"; var back_svgpatternid = "Back_MainColor_Pattern";
if(obj[0].patternColors[0].patternColorType == "Solid"){ var front_idappend = "Front_MainColor";
var back_idappend = "Back_MainColor";
loadPattern(getPatternURL, front_clipathval, front_svgpatternid, front_idappend, arrayPatternColor);
loadPattern(getPatternURL, back_clipathval, back_svgpatternid, back_idappend, arrayPatternColor);
}else{ if (obj[0].patternColors[0].patternColorType == "Solid") {
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;
var gradientFor = "Body_Pattern";
var trimCount = 0;
var gradientIds = "Gradient_List";
var GradientPatternColor = [{
"PatternColor1" : "url(#Body_Pattern_Gradient)"
}];
// console.log(GradientPatternColor); loadPattern(getPatternURL, front_clipathval, front_svgpatternid, front_idappend, arrayPatternColor);
loadPattern(getPatternURL, back_clipathval, back_svgpatternid, back_idappend, arrayPatternColor);
loadGradientTemplate(gradientFor, gradientIds, gradientColor1, gradientColor2, gradientColorOffset1, gradientColorOffset2, trimCount); } else {
loadPattern(getPatternURL, front_clipathval, front_svgpatternid, front_idappend, GradientPatternColor); var gradientColor1 = obj[0].patternColors[0].patternGradientColor1;
loadPattern(getPatternURL, back_clipathval, back_svgpatternid, back_idappend, GradientPatternColor); var gradientColor2 = obj[0].patternColors[0].patternGradientColor2;
var gradientColorOffset1 = obj[0].patternColors[0].patternGradientOffset1;
} var gradientColorOffset2 = obj[0].patternColors[0].patternGradientOffset2;
var gradientFor = "Body_Pattern";
var trimCount = 0;
var gradientIds = "Gradient_List";
var GradientPatternColor = [{
"PatternColor1": "url(#Body_Pattern_Gradient)"
}];
// console.log(GradientPatternColor);
loadGradientTemplate(gradientFor, gradientIds, gradientColor1, gradientColor2, gradientColorOffset1, gradientColorOffset2, trimCount);
loadPattern(getPatternURL, front_clipathval, front_svgpatternid, front_idappend, GradientPatternColor);
loadPattern(getPatternURL, back_clipathval, back_svgpatternid, back_idappend, GradientPatternColor);
}
} }
}catch (e){ } catch (e) {
//error //error
}/////////////END PatternColor } /////////////END PatternColor
var Trims = obj[0].Trims['length']; var Trims = obj[0].Trims['length'];
if(Trims > 0){ // check if Trim exist if (Trims > 0) { // check if Trim exist
for (i = 0 ; i < Trims ; i++){ for (i = 0; i < Trims; i++) {
trimCount = i + 1; trimCount = i + 1;
trimNum = "Trim" + trimCount; trimNum = "Trim" + trimCount;
trimNumPattern = "Trim" + trimCount + "_Pattern"; trimNumPattern = "Trim" + trimCount + "_Pattern";
SVGTrimId = "Trim_" + trimCount; SVGTrimId = "Trim_" + trimCount;
trimPattern = "Trim" + trimCount + "_Pattern"; trimPattern = "Trim" + trimCount + "_Pattern";
trimPatternColor = "Trim" + trimCount + "_patternColor"; trimPatternColor = "Trim" + trimCount + "_patternColor";
if(obj[0].Trims[i][trimNum].type == "Solid"){
var trim_solid_color = obj[0].Trims[i][trimNum].solidColor;
$('#Front_'+SVGTrimId).attr("fill", trim_solid_color);
$('#Back_'+SVGTrimId).attr("fill", trim_solid_color);
$('#Left_'+SVGTrimId).attr("fill", trim_solid_color);
$('#Right_'+SVGTrimId).attr("fill", trim_solid_color);
}else{ if (obj[0].Trims[i][trimNum].type == "Solid") {
var trim_solid_color = obj[0].Trims[i][trimNum].solidColor;
$('#Front_' + SVGTrimId).attr("fill", trim_solid_color);
$('#Back_' + SVGTrimId).attr("fill", trim_solid_color);
$('#Left_' + SVGTrimId).attr("fill", trim_solid_color);
$('#Right_' + SVGTrimId).attr("fill", trim_solid_color);
} else {
var gradientColor1 = obj[0].Trims[i][trimNum].gradientColor1; var gradientColor1 = obj[0].Trims[i][trimNum].gradientColor1;
var gradientColor2 = obj[0].Trims[i][trimNum].gradientColor2; var gradientColor2 = obj[0].Trims[i][trimNum].gradientColor2;
var gradientColorOffset1 = obj[0].Trims[i][trimNum].gradientColorOffset1; var gradientColorOffset1 = obj[0].Trims[i][trimNum].gradientColorOffset1;
var gradientColorOffset2 = obj[0].Trims[i][trimNum].gradientColorOffset2; var gradientColorOffset2 = obj[0].Trims[i][trimNum].gradientColorOffset2;
var gradientFor = "Trim"; var gradientFor = "Trim";
var gradientIds = "Gradient_List"; var gradientIds = "Gradient_List";
loadGradientTemplate(gradientFor, gradientIds, gradientColor1, gradientColor2, gradientColorOffset1, gradientColorOffset2, trimCount); loadGradientTemplate(gradientFor, gradientIds, gradientColor1, gradientColor2, gradientColorOffset1, gradientColorOffset2, trimCount);
$('#Front_'+SVGTrimId).attr("fill", "url(#"+SVGTrimId+"_Gradient)"); $('#Front_' + SVGTrimId).attr("fill", "url(#" + SVGTrimId + "_Gradient)");
$('#Back_'+SVGTrimId).attr("fill", "url(#"+SVGTrimId+"_Gradient)"); $('#Back_' + SVGTrimId).attr("fill", "url(#" + SVGTrimId + "_Gradient)");
} }
///// TRIM PATTERN ///// TRIM PATTERN
try{ try {
var getTrimPattern = obj[0].Trims[i][trimNumPattern].patternId; var getTrimPattern = obj[0].Trims[i][trimNumPattern].patternId;
if((getTrimPattern != "noPattern") || (getTrimPattern != "")){ if ((getTrimPattern != "noPattern") || (getTrimPattern != "")) {
var pColors = obj[0].Trims[i][trimNumPattern].patternColors['length']; var pColors = obj[0].Trims[i][trimNumPattern].patternColors['length'];
if(pColors > 0){ if (pColors > 0) {
var k, arrayPatternColor = []; var k, arrayPatternColor = [];
for (a = 0 ; a < pColors ; a++){ for (a = 0; a < pColors; a++) {
l = a + 1; l = a + 1;
k = "PatternColor" + l; k = "PatternColor" + l;
temp = {}; temp = {};
@@ -286,117 +294,116 @@
// console.log(arrayPatternColor); // console.log(arrayPatternColor);
// console.log(obj[0].Trims[i][trimNumPattern].patternColorType); // console.log(obj[0].Trims[i][trimNumPattern].patternColorType);
var getPatternURL = pattern_properties(getTrimPattern); var getPatternURL = pattern_properties(getTrimPattern);
var front_clipathval = "url(#Front_Trim_"+trimCount+"_Clippath_URL)"; var front_clipathval = "url(#Front_Trim_" + trimCount + "_Clippath_URL)";
var back_clipathval = "url(#Back_Trim_"+trimCount+"_Clippath_URL)"; var back_clipathval = "url(#Back_Trim_" + trimCount + "_Clippath_URL)";
var front_svgpatternid = "Front_Trim_"+trimCount+"_Pattern";
var back_svgpatternid = "Back_Trim_"+trimCount+"_Pattern";
var front_idappend = "Front_Trim_"+trimCount;
var back_idappend = "Back_Trim_"+trimCount;
// console.log(getPatternURL);
if(obj[0].Trims[i][trimNumPattern].patternColorType == "Solid"){ var front_svgpatternid = "Front_Trim_" + trimCount + "_Pattern";
//console.log('solid'); var back_svgpatternid = "Back_Trim_" + trimCount + "_Pattern";
loadPattern(getPatternURL, front_clipathval, front_svgpatternid, front_idappend, arrayPatternColor);
loadPattern(getPatternURL, back_clipathval, back_svgpatternid, back_idappend, 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";
var gradientIds = "Gradient_List";
var GradientPatternColor = [{
"PatternColor1" : "url(#Trim_"+trimCount+"_Pattern_Gradient)"
}];
loadGradientTemplate(gradientFor, gradientIds, gradientColor1, gradientColor2, gradientColorOffset1, gradientColorOffset2, trimCount); var front_idappend = "Front_Trim_" + trimCount;
loadPattern(getPatternURL, front_clipathval, front_svgpatternid, front_idappend, GradientPatternColor); var back_idappend = "Back_Trim_" + trimCount;
loadPattern(getPatternURL, back_clipathval, back_svgpatternid, back_idappend, GradientPatternColor); // console.log(getPatternURL);
} if (obj[0].Trims[i][trimNumPattern].patternColorType == "Solid") {
//console.log('solid');
loadPattern(getPatternURL, front_clipathval, front_svgpatternid, front_idappend, arrayPatternColor);
loadPattern(getPatternURL, back_clipathval, back_svgpatternid, back_idappend, 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";
var gradientIds = "Gradient_List";
var GradientPatternColor = [{
"PatternColor1": "url(#Trim_" + trimCount + "_Pattern_Gradient)"
}];
loadGradientTemplate(gradientFor, gradientIds, gradientColor1, gradientColor2, gradientColorOffset1, gradientColorOffset2, trimCount);
loadPattern(getPatternURL, front_clipathval, front_svgpatternid, front_idappend, GradientPatternColor);
loadPattern(getPatternURL, back_clipathval, back_svgpatternid, back_idappend, GradientPatternColor);
}
} }
} }
}catch(e){ } catch (e) {
} }
} }
} }
} }
function frontContent(fb_height, fb_width, fb_x, fb_y){ function frontContent(fb_height, fb_width, fb_x, fb_y) {
var objects = frontCanvas.getObjects(); var objects = frontCanvas.getObjects();
// CHANGING FRONT NUMBER BASED ON USER INPUTS // CHANGING FRONT NUMBER BASED ON USER INPUTS
try{ try {
var p_number = '{{ $order_item_array[0]->Number }}'; var p_number = '{{ $order_item_array[0]->Number }}';
for (var j in objects) { for (var j in objects) {
var id = objects[j].get('idNumber'); var id = objects[j].get('idNumber');
if(id == "NumberFront"){ if (id == "NumberFront") {
objects[j].setText(p_number.toString()); objects[j].setText(p_number.toString());
objects[j].centerH(); objects[j].centerH();
objects[j].setCoords(); objects[j].setCoords();
break; break;
} }
} }
}catch(e){ } catch (e) {
console.log('Error: ' + e); console.log('Error: ' + e);
} }
try{ try {
for (var i in objects) { for (var i in objects) {
if(objects[i].get('type') == "text"){ if (objects[i].get('type') == "text") {
if(objects[i].getStroke() != null){ if (objects[i].getStroke() != null) {
var getStrokeWidth = objects[i].getStrokeWidth(); var getStrokeWidth = objects[i].getStrokeWidth();
objects[i].setStrokeWidth(getStrokeWidth * 4); objects[i].setStrokeWidth(getStrokeWidth * 4);
} }
} }
} }
}catch(e){ } catch (e) {
console.log('Error: ' + e); console.log('Error: ' + e);
} }
zoomIn(frontCanvas, fb_width, fb_height, "Front"); zoomIn(frontCanvas, fb_width, fb_height, "Front");
var content = frontCanvas.toSVG(); var content = frontCanvas.toSVG();
document.getElementById('svgFrontContent').innerHTML = content; document.getElementById('svgFrontContent').innerHTML = content;
var el_id = document.getElementById('svgFrontContent'); var el_id = document.getElementById('svgFrontContent');
var getAllImageTag = el_id.getElementsByTagName('image'); var getAllImageTag = el_id.getElementsByTagName('image');
for (var i=0; i < getAllImageTag.length ; i++) { for (var i = 0; i < getAllImageTag.length; i++) {
var getElements = getAllImageTag[i]; var getElements = getAllImageTag[i];
var getXAttribute = getElements.getAttribute('x'); var getXAttribute = getElements.getAttribute('x');
var getYAttribute = getElements.getAttribute('y'); var getYAttribute = getElements.getAttribute('y');
getElements.removeAttribute('x') getElements.removeAttribute('x')
getElements.removeAttribute('y'); getElements.removeAttribute('y');
getElements.setAttribute("transform", "matrix(1 0 0 1 "+getXAttribute+" "+getYAttribute+")"); getElements.setAttribute("transform", "matrix(1 0 0 1 " + getXAttribute + " " + getYAttribute + ")");
} }
var allGs = el_id.getElementsByTagName('g'); var allGs = el_id.getElementsByTagName('g');
var consolidatedContents1 = []; var consolidatedContents1 = [];
item = {} item = {}
for (var i=0; i < allGs.length ; i++) { for (var i = 0; i < allGs.length; i++) {
var finalXvalue = 0; var finalXvalue = 0;
var finalYvalue = 0; var finalYvalue = 0;
var gElem = allGs[i]; var gElem = allGs[i];
var children = gElem.childNodes; var children = gElem.childNodes;
var xforms = gElem.getAttribute('transform'); var xforms = gElem.getAttribute('transform');
// console.log(xforms); // console.log(xforms);
var parts = /translate\(\s*([^\s,)]+)[ ,]([^\s,)]+)/.exec(xforms); var parts = /translate\(\s*([^\s,)]+)[ ,]([^\s,)]+)/.exec(xforms);
var firstX = parts[1], var firstX = parts[1],
firstY = parts[2]; firstY = parts[2];
// x="3009.299" y="363.447" // x="3009.299" y="363.447"
@@ -407,41 +414,41 @@
var finalXvalue = Number(firstX) + Number(defaultXvalue); var finalXvalue = Number(firstX) + Number(defaultXvalue);
var finalYvalue = Number(firstY) + Number(defaultYvalue); var finalYvalue = Number(firstY) + Number(defaultYvalue);
//console.log(finalXvalue, finalYvalue); //console.log(finalXvalue, finalYvalue);
gElem.transform.baseVal.getItem(0).setTranslate(finalXvalue,finalYvalue); gElem.transform.baseVal.getItem(0).setTranslate(finalXvalue, finalYvalue);
// console.log(gElem.transform.baseVal.getItem(0)); // console.log(gElem.transform.baseVal.getItem(0));
var s = new XMLSerializer(); var s = new XMLSerializer();
var str = s.serializeToString(gElem); var str = s.serializeToString(gElem);
// this for the fucking excess of curve text // this for the fucking excess of curve text
var scale = /scale\(\s*([^\s,)]+)[ ,]([^\s,)]+)/.exec(xforms); var scale = /scale\(\s*([^\s,)]+)[ ,]([^\s,)]+)/.exec(xforms);
if(scale != null){ if (scale != null) {
consolidatedContents1.push(str); consolidatedContents1.push(str);
} }
} }
var contents = JSON.stringify(consolidatedContents1); var contents = JSON.stringify(consolidatedContents1);
var con = jQuery.parseJSON(contents); var con = jQuery.parseJSON(contents);
var countContents = con.length; var countContents = con.length;
if(countContents != 0){ // check if content if (countContents != 0) { // check if content
var jContent = $.map(con, function(value) { var jContent = $.map(con, function(value) {
return(value); return (value);
}); });
$("#Front_Border").html(jContent.join("")); $("#Front_Border").html(jContent.join(""));
} }
} }
function backContent(bb_height, bb_width, bb_x, bb_y) {
function backContent(bb_height, bb_width, bb_x, bb_y){
var objects = backCanvas.getObjects(); var objects = backCanvas.getObjects();
try{ try {
var p_number = '{{ $order_item_array[0]->Number }}'; var p_number = '{{ $order_item_array[0]->Number }}';
for (var j in objects) { for (var j in objects) {
var id = objects[j].get('idNumber'); var id = objects[j].get('idNumber');
if(id == "NumberBack"){ if (id == "NumberBack") {
objects[j].setText(p_number.toString()); objects[j].setText(p_number.toString());
objects[j].centerH(); objects[j].centerH();
objects[j].setCoords(); objects[j].setCoords();
@@ -449,36 +456,36 @@
} }
} }
}catch(e){ } catch (e) {
console.log('Error: ' + e); console.log('Error: ' + e);
} }
try{ try {
var p_name = '{{ $order_item_array[0]->Name }}'; var p_name = '{{ $order_item_array[0]->Name }}';
for (var j in objects){ for (var j in objects) {
var id = objects[j].get('idNumber'); var id = objects[j].get('idNumber');
if(id == "LastNameBack"){ if (id == "LastNameBack") {
objects[j].setText(p_name.toString()); objects[j].setText(p_name.toString());
objects[j].centerH(); objects[j].centerH();
objects[j].setCoords(); objects[j].setCoords();
break; break;
} }
} }
}catch(e){ } catch (e) {
console.log('Error: ' + e); console.log('Error: ' + e);
} }
try{ try {
for (var i in objects) { for (var i in objects) {
if(objects[i].get('type') == "text"){ if (objects[i].get('type') == "text") {
if(objects[i].getStroke() != null){ if (objects[i].getStroke() != null) {
var getStrokeWidth = objects[i].getStrokeWidth(); var getStrokeWidth = objects[i].getStrokeWidth();
objects[i].setStrokeWidth(getStrokeWidth * 4); objects[i].setStrokeWidth(getStrokeWidth * 4);
} }
} }
} }
}catch(e){ } catch (e) {
console.log('Error: ' + e); console.log('Error: ' + e);
} }
@@ -489,14 +496,14 @@
var el_id = document.getElementById('svgBackContent'); var el_id = document.getElementById('svgBackContent');
var getAllImageTag = el_id.getElementsByTagName('image'); var getAllImageTag = el_id.getElementsByTagName('image');
for (var i=0; i < getAllImageTag.length ; i++) { for (var i = 0; i < getAllImageTag.length; i++) {
var getElements = getAllImageTag[i]; var getElements = getAllImageTag[i];
var getXAttribute = getElements.getAttribute('x'); var getXAttribute = getElements.getAttribute('x');
var getYAttribute = getElements.getAttribute('y'); var getYAttribute = getElements.getAttribute('y');
getElements.removeAttribute('x') getElements.removeAttribute('x')
getElements.removeAttribute('y'); getElements.removeAttribute('y');
getElements.setAttribute("transform", "matrix(1 0 0 1 "+getXAttribute+" "+getYAttribute+")"); getElements.setAttribute("transform", "matrix(1 0 0 1 " + getXAttribute + " " + getYAttribute + ")");
} }
var allGs = el_id.getElementsByTagName('g'); var allGs = el_id.getElementsByTagName('g');
@@ -504,7 +511,7 @@
var consolidatedContents = []; var consolidatedContents = [];
item = {} item = {}
for (var i=0; i < allGs.length ; i++) { for (var i = 0; i < allGs.length; i++) {
var finalXvalue = 0; var finalXvalue = 0;
var finalYvalue = 0; var finalYvalue = 0;
var gElem = allGs[i]; var gElem = allGs[i];
@@ -512,7 +519,7 @@
var xforms = gElem.getAttribute('transform'); var xforms = gElem.getAttribute('transform');
//console.log(xforms); //console.log(xforms);
var parts = /translate\(\s*([^\s,)]+)[ ,]([^\s,)]+)/.exec(xforms); var parts = /translate\(\s*([^\s,)]+)[ ,]([^\s,)]+)/.exec(xforms);
var firstX = parts[1], var firstX = parts[1],
firstY = parts[2]; firstY = parts[2];
// x="460.455" y="363.397" // x="460.455" y="363.397"
@@ -522,7 +529,7 @@
//console.log(firstX, firstY); //console.log(firstX, firstY);
var finalXvalue = Number(firstX) + Number(defaultXvalue); var finalXvalue = Number(firstX) + Number(defaultXvalue);
var finalYvalue = Number(firstY) + Number(defaultYvalue); var finalYvalue = Number(firstY) + Number(defaultYvalue);
gElem.transform.baseVal.getItem(0).setTranslate(finalXvalue,finalYvalue); gElem.transform.baseVal.getItem(0).setTranslate(finalXvalue, finalYvalue);
var s = new XMLSerializer(); var s = new XMLSerializer();
var str = s.serializeToString(gElem); var str = s.serializeToString(gElem);
@@ -534,30 +541,30 @@
var con = jQuery.parseJSON(contents); var con = jQuery.parseJSON(contents);
var countContents = con.length; var countContents = con.length;
if(countContents != 0){ // check if content if (countContents != 0) { // check if content
var jContent = $.map(con, function(value) { var jContent = $.map(con, function(value) {
return(value); return (value);
}); });
$("#Back_Border").html(jContent.join("")); $("#Back_Border").html(jContent.join(""));
} }
} }
function zoomIn(canvas, actualSizeX, actualSizeY, side) { function zoomIn(canvas, actualSizeX, actualSizeY, side) {
var canvasScale = 1; var canvasScale = 1;
var SCALE_FACTOR = 1.2; var SCALE_FACTOR = 1.2;
// TODO limit the max canvas zoom in // TODO limit the max canvas zoom in
//Your scale factor is 2.172 (1086/500 = 2.172) or 2.13 (639/300 = 2.13) to be more precise. //Your scale factor is 2.172 (1086/500 = 2.172) or 2.13 (639/300 = 2.13) to be more precise.
// X = WIDTH and Y = HEIGHT // X = WIDTH and Y = HEIGHT
if(side == "Front" || side == "Back"){ if (side == "Front" || side == "Back") {
var SCALE_FACTOR_X = actualSizeX / 222; var SCALE_FACTOR_X = actualSizeX / 222;
var SCALE_FACTOR_Y = actualSizeY / 380; var SCALE_FACTOR_Y = actualSizeY / 380;
} }
if(side == "Right" || side == "Left"){ if (side == "Right" || side == "Left") {
var SCALE_FACTOR_X = actualSizeX / 96; var SCALE_FACTOR_X = actualSizeX / 96;
var SCALE_FACTOR_Y = actualSizeY / 112; var SCALE_FACTOR_Y = actualSizeY / 112;
} }
canvasScale = canvasScale * SCALE_FACTOR; canvasScale = canvasScale * SCALE_FACTOR;
canvas.setHeight(canvas.getHeight() * SCALE_FACTOR_Y); canvas.setHeight(canvas.getHeight() * SCALE_FACTOR_Y);
@@ -586,7 +593,7 @@
canvas.renderAll(); canvas.renderAll();
} }
function sendSVG(){ function sendSVG() {
var svgText = document.getElementById('printFileDiv').innerHTML; var svgText = document.getElementById('printFileDiv').innerHTML;
@@ -600,7 +607,7 @@
hiddenSVGField.setAttribute("type", "hidden"); hiddenSVGField.setAttribute("type", "hidden");
hiddenSVGField.setAttribute("name", "svgText"); hiddenSVGField.setAttribute("name", "svgText");
hiddenSVGField.setAttribute("value", svgText); hiddenSVGField.setAttribute("value", svgText);
var hiddenToken = document.createElement("input"); var hiddenToken = document.createElement("input");
hiddenToken.setAttribute("type", "hidden"); hiddenToken.setAttribute("type", "hidden");
hiddenToken.setAttribute("name", "_token"); hiddenToken.setAttribute("name", "_token");
@@ -609,7 +616,8 @@
var hiddenDetails = document.createElement("input"); var hiddenDetails = document.createElement("input");
hiddenDetails.setAttribute("type", "hidden"); hiddenDetails.setAttribute("type", "hidden");
hiddenDetails.setAttribute("name", "filename"); hiddenDetails.setAttribute("name", "filename");
hiddenDetails.setAttribute("value", "{{ $order_item_array[0]->ProductName . "_" . $order_item_array[0]->Size }}"); hiddenDetails.setAttribute("value", "{{ $order_item_array[0]->ProductName . "
_ " . $order_item_array[0]->Size }}");
form.appendChild(hiddenSVGField); form.appendChild(hiddenSVGField);
@@ -619,12 +627,12 @@
document.body.appendChild(form); document.body.appendChild(form);
form.submit(); form.submit();
alert("Print file is successfully generated!"); alert("Print file is successfully generated!");
setTimeout(function(){ setTimeout(function() {
window.location = "{{ url('admin/orders/view') }}" + "/" + "{{ $order_item_array[0]->CartKey }}" window.location = "{{ url('admin/orders/view') }}" + "/" + "{{ $order_item_array[0]->CartKey }}"
},2000); }, 2000);
} }
</script> </script>
</body> </body>
</html> </html>

638
resources/views/admin_pages/download_pages/shorts.blade.php Normal file
View File

@@ -0,0 +1,638 @@
<!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">
<title>Customize Uniform</title>
<link href="{{asset('/designer/custom-fonts/custom-fonts.php')}}" rel='stylesheet' type='text/css'>
<style>
canvas {
display: none;
}
</style>
</head>
<body onload="loadPrintFile()">
<div id="svgRightContent" style="display:none;"></div>
<div id="svgLeftContent" style="display:none;"></div>
<div id="svgJockTag" style="display:none;"></div>
<p>Please wait... Click here to go <a href="#" id="close_window">back</a></p>
<canvas id="frontCanvas" width="220px" height="380px" style="border 1px solid black; display:none;"></canvas>
<canvas id="backCanvas" width="220px" height="380px" style="border 1px solid black; display:none;"></canvas>
<div id="printFileDiv" style="display:none;"></div>
<form id="myForm" action="{{ url('admin/orders/download') }}" method="post" accept-charset="UTF-8"></form>
<p id="log"></p>
<!-- jQuery 3 -->
<script src="{{ asset('/bower_components/jquery/dist/jquery.min.js') }}"></script>
<!-- fabric js 1.7.20 -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.20/fabric.min.js"></script>
<!-- curvetext -->
<script src="https://rawgit.com/EffEPi/fabric.curvedText/master/fabric.curvedText.js"></script>
<script>
function logSubmit(event) {
log.textContent = `Form Submitted! Time stamp: ${event.timeStamp}`;
event.preventDefault();
}
var form = document.getElementById('myForm');
var log = document.getElementById('log');
form.addEventListener('submit', logSubmit);
var frontCanvas = new fabric.StaticCanvas(document.getElementById("frontCanvas"));
tmp_frontCanvas = {
!!json_encode($client_design_array[0] - > ContentFront) !!
};
frontCanvas.loadFromJSON(tmp_frontCanvas, function(objects, options) {
frontCanvas.renderAll();
setTimeout(function() {
frontCanvas.backgroundImage = 0;
frontCanvas.clear();
frontCanvas.renderAll();
setTimeout(function() {
frontCanvas.loadFromJSON(tmp_frontCanvas, function(objects, options) {
frontCanvas.renderAll();
frontCanvas.selection = false;
});
}, 1000);
}, 500);
});
var backCanvas = new fabric.StaticCanvas(document.getElementById("backCanvas"));
tmp_backCanvas = {
!!json_encode($client_design_array[0] - > ContentBack) !!
};
backCanvas.loadFromJSON(tmp_backCanvas, function(objects, options) {
backCanvas.renderAll();
setTimeout(function() {
backCanvas.backgroundImage = 0;
backCanvas.clear();
backCanvas.renderAll();
setTimeout(function() {
backCanvas.loadFromJSON(tmp_backCanvas, function(objects, options) {
backCanvas.renderAll();
backCanvas.selection = false;
});
}, 1000);
}, 500);
});
function loadPrintFile() {
var path = 'http://localhost/uploads/images/';
var template_code = "{{ $client_design_array[0]->TemplateCode }}";
var size = "{{ $order_item_array[0]->JerseySize }}";
// console.log();
var svgLocation = "{{ config('site_config.images_directory') }}" + "uniform-templates/" + template_code + "/JERSEY/SIZES/" + size + ".svg";
$.ajax({ //create an ajax request to load_page.php
type: "GET",
url: svgLocation,
dataType: "text", //expect html to be returned.,
// headers: {
// 'Access-Control-Allow-Origin': '*'
// },
success: function(response) {
$("#printFileDiv").html(response)
var fb = document.getElementById('Front_Border');
var fb_x = $(fb).children("rect").attr("x");
var fb_y = $(fb).children("rect").attr("y");
var fb_height = $(fb).children("rect").attr("height");
var fb_width = $(fb).children("rect").attr("width");
var bb = document.getElementById('Back_Border');
var bb_x = $(bb).children("rect").attr("x");
var bb_y = $(bb).children("rect").attr("y");
var bb_height = $(bb).children("rect").attr("height");
var bb_width = $(bb).children("rect").attr("width");
var rb = document.getElementById('Right_Border');
var rb_x = $(rb).children("rect").attr("x");
var rb_y = $(rb).children("rect").attr("y");
var rb_height = $(rb).children("rect").attr("height");
var rb_width = $(rb).children("rect").attr("width");
var lb = document.getElementById('Left_Border');
var lb_x = $(lb).children("rect").attr("x");
var lb_y = $(lb).children("rect").attr("y");
var lb_height = $(lb).children("rect").attr("height");
var lb_width = $(lb).children("rect").attr("width");
setTimeout(function() {
loadTemplateDesign();
frontContent(fb_height, fb_width, fb_x, fb_y);
backContent(bb_height, bb_width, bb_x, bb_y);
setTimeout(function() {
sendSVG();
}, 2000);
}, 3000);
}
});
}
function loadTemplateDesign() {
tmpdetails = {
!!json_encode($client_design_array[0] - > TemplateDesign) !!
};
var obj = JSON.parse(tmpdetails);
///////////// for mainColor
var getMainColorType = obj[0].mainColor[0].type;
if (getMainColorType == "Solid") {
var setMainColor = obj[0].mainColor[0].solidColor;
$('#Left_MainColor').attr("fill", setMainColor);
$('#Right_MainColor').attr("fill", 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;
var gradientIds = "Gradient_List";
loadGradientTemplate(gradientFor, gradientIds, gradientColor1, gradientColor2, gradientColorOffset1, gradientColorOffset2, trimCount);
$('#Left_MainColor').attr("fill", "url(#Body_Gradient)");
$('#Right_MainColor').attr("fill", "url(#Body_Gradient)");
} ///////////// END for mainColor
///////////// for patternColor
try {
var getMainBodyPatternId = obj[0].patternColors[0].patternId;
// console.log(getMainBodyPatternId);
var pColors = obj[0].patternColors[0].patternColors['length'];
if (pColors > 0) { // check if pattern exist
var k, arrayPatternColor = [];
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 getPatternURL = pattern_properties(getMainBodyPatternId);
var front_clipathval = "url(#Left_MainColor_Clippath_URL)";
var back_clipathval = "url(#Right_MainColor_Clippath_URL)";
var front_svgpatternid = "Left_MainColor_Pattern";
var back_svgpatternid = "Right_MainColor_Pattern";
var front_idappend = "Left_MainColor";
var back_idappend = "Right_MainColor";
if (obj[0].patternColors[0].patternColorType == "Solid") {
loadPattern(getPatternURL, front_clipathval, front_svgpatternid, front_idappend, arrayPatternColor);
loadPattern(getPatternURL, back_clipathval, back_svgpatternid, back_idappend, arrayPatternColor);
} else {
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;
var gradientFor = "Body_Pattern";
var trimCount = 0;
var gradientIds = "Gradient_List";
var GradientPatternColor = [{
"PatternColor1": "url(#Body_Pattern_Gradient)"
}];
// console.log(GradientPatternColor);
loadGradientTemplate(gradientFor, gradientIds, gradientColor1, gradientColor2, gradientColorOffset1, gradientColorOffset2, trimCount);
loadPattern(getPatternURL, front_clipathval, front_svgpatternid, front_idappend, GradientPatternColor);
loadPattern(getPatternURL, back_clipathval, back_svgpatternid, back_idappend, GradientPatternColor);
}
}
} catch (e) {
//error
} /////////////END PatternColor
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;
trimPattern = "Trim" + trimCount + "_Pattern";
trimPatternColor = "Trim" + trimCount + "_patternColor";
if (obj[0].Trims[i][trimNum].type == "Solid") {
var trim_solid_color = obj[0].Trims[i][trimNum].solidColor;
// $('#Front_' + SVGTrimId).attr("fill", trim_solid_color);
// $('#Back_' + SVGTrimId).attr("fill", trim_solid_color);
$('#Left_' + SVGTrimId).attr("fill", trim_solid_color);
$('#Right_' + SVGTrimId).attr("fill", trim_solid_color);
} 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";
var gradientIds = "Gradient_List";
loadGradientTemplate(gradientFor, gradientIds, gradientColor1, gradientColor2, gradientColorOffset1, gradientColorOffset2, trimCount);
$('#Left_' + SVGTrimId).attr("fill", "url(#" + SVGTrimId + "_Gradient)");
$('#Right_' + SVGTrimId).attr("fill", "url(#" + SVGTrimId + "_Gradient)");
}
///// TRIM PATTERN
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) {
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);
var getPatternURL = pattern_properties(getTrimPattern);
var front_clipathval = "url(#Left_Trim_" + trimCount + "_Clippath_URL)";
var back_clipathval = "url(#Right_Trim_" + trimCount + "_Clippath_URL)";
var front_svgpatternid = "Left_Trim_" + trimCount + "_Pattern";
var back_svgpatternid = "Right_Trim_" + trimCount + "_Pattern";
var front_idappend = "Left_Trim_" + trimCount;
var back_idappend = "Right_Trim_" + trimCount;
// console.log(getPatternURL);
if (obj[0].Trims[i][trimNumPattern].patternColorType == "Solid") {
//console.log('solid');
loadPattern(getPatternURL, front_clipathval, front_svgpatternid, front_idappend, arrayPatternColor);
loadPattern(getPatternURL, back_clipathval, back_svgpatternid, back_idappend, 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";
var gradientIds = "Gradient_List";
var GradientPatternColor = [{
"PatternColor1": "url(#Trim_" + trimCount + "_Pattern_Gradient)"
}];
loadGradientTemplate(gradientFor, gradientIds, gradientColor1, gradientColor2, gradientColorOffset1, gradientColorOffset2, trimCount);
loadPattern(getPatternURL, front_clipathval, front_svgpatternid, front_idappend, GradientPatternColor);
loadPattern(getPatternURL, back_clipathval, back_svgpatternid, back_idappend, GradientPatternColor);
}
}
}
} catch (e) {
}
}
}
}
function frontContent(fb_height, fb_width, fb_x, fb_y) {
var objects = frontCanvas.getObjects();
// CHANGING FRONT NUMBER BASED ON USER INPUTS
try {
var p_number = '{{ $order_item_array[0]->Number }}';
for (var j in objects) {
var id = objects[j].get('idNumber');
if (id == "NumberFront") {
objects[j].setText(p_number.toString());
objects[j].centerH();
objects[j].setCoords();
break;
}
}
} catch (e) {
console.log('Error: ' + e);
}
try {
for (var i in objects) {
if (objects[i].get('type') == "text") {
if (objects[i].getStroke() != null) {
var getStrokeWidth = objects[i].getStrokeWidth();
objects[i].setStrokeWidth(getStrokeWidth * 4);
}
}
}
} catch (e) {
console.log('Error: ' + e);
}
zoomIn(frontCanvas, fb_width, fb_height, "Front");
var content = frontCanvas.toSVG();
document.getElementById('svgRightContent').innerHTML = content;
var el_id = document.getElementById('svgRightContent');
var getAllImageTag = el_id.getElementsByTagName('image');
for (var i = 0; i < getAllImageTag.length; i++) {
var getElements = getAllImageTag[i];
var getXAttribute = getElements.getAttribute('x');
var getYAttribute = getElements.getAttribute('y');
getElements.removeAttribute('x')
getElements.removeAttribute('y');
getElements.setAttribute("transform", "matrix(1 0 0 1 " + getXAttribute + " " + getYAttribute + ")");
}
var allGs = el_id.getElementsByTagName('g');
var consolidatedContents1 = [];
item = {}
for (var i = 0; i < allGs.length; i++) {
var finalXvalue = 0;
var finalYvalue = 0;
var gElem = allGs[i];
var children = gElem.childNodes;
var xforms = gElem.getAttribute('transform');
// console.log(xforms);
var parts = /translate\(\s*([^\s,)]+)[ ,]([^\s,)]+)/.exec(xforms);
var firstX = parts[1],
firstY = parts[2];
// x="3009.299" y="363.447"
var defaultXvalue = fb_x;
var defaultYvalue = fb_y;
//console.log(firstX, firstY);
var finalXvalue = Number(firstX) + Number(defaultXvalue);
var finalYvalue = Number(firstY) + Number(defaultYvalue);
//console.log(finalXvalue, finalYvalue);
gElem.transform.baseVal.getItem(0).setTranslate(finalXvalue, finalYvalue);
// console.log(gElem.transform.baseVal.getItem(0));
var s = new XMLSerializer();
var str = s.serializeToString(gElem);
// this for the fucking excess of curve text
var scale = /scale\(\s*([^\s,)]+)[ ,]([^\s,)]+)/.exec(xforms);
if (scale != null) {
consolidatedContents1.push(str);
}
}
var contents = JSON.stringify(consolidatedContents1);
var con = jQuery.parseJSON(contents);
var countContents = con.length;
if (countContents != 0) { // check if content
var jContent = $.map(con, function(value) {
return (value);
});
$("#Left_Border").html(jContent.join(""));
}
}
function backContent(bb_height, bb_width, bb_x, bb_y) {
var objects = backCanvas.getObjects();
try {
var p_number = '{{ $order_item_array[0]->Number }}';
for (var j in objects) {
var id = objects[j].get('idNumber');
if (id == "NumberBack") {
objects[j].setText(p_number.toString());
objects[j].centerH();
objects[j].setCoords();
break;
}
}
} catch (e) {
console.log('Error: ' + e);
}
try {
var p_name = '{{ $order_item_array[0]->Name }}';
for (var j in objects) {
var id = objects[j].get('idNumber');
if (id == "LastNameBack") {
objects[j].setText(p_name.toString());
objects[j].centerH();
objects[j].setCoords();
break;
}
}
} catch (e) {
console.log('Error: ' + e);
}
try {
for (var i in objects) {
if (objects[i].get('type') == "text") {
if (objects[i].getStroke() != null) {
var getStrokeWidth = objects[i].getStrokeWidth();
objects[i].setStrokeWidth(getStrokeWidth * 4);
}
}
}
} catch (e) {
console.log('Error: ' + e);
}
zoomIn(backCanvas, bb_width, bb_height, "Back");
var content = backCanvas.toSVG();
document.getElementById('svgLeftContent').innerHTML = content;
var el_id = document.getElementById('svgLeftContent');
var getAllImageTag = el_id.getElementsByTagName('image');
for (var i = 0; i < getAllImageTag.length; i++) {
var getElements = getAllImageTag[i];
var getXAttribute = getElements.getAttribute('x');
var getYAttribute = getElements.getAttribute('y');
getElements.removeAttribute('x')
getElements.removeAttribute('y');
getElements.setAttribute("transform", "matrix(1 0 0 1 " + getXAttribute + " " + getYAttribute + ")");
}
var allGs = el_id.getElementsByTagName('g');
var consolidatedContents = [];
item = {}
for (var i = 0; i < allGs.length; i++) {
var finalXvalue = 0;
var finalYvalue = 0;
var gElem = allGs[i];
var children = gElem.childNodes;
var xforms = gElem.getAttribute('transform');
//console.log(xforms);
var parts = /translate\(\s*([^\s,)]+)[ ,]([^\s,)]+)/.exec(xforms);
var firstX = parts[1],
firstY = parts[2];
// x="460.455" y="363.397"
var defaultXvalue = bb_x;
var defaultYvalue = bb_y;
//console.log(firstX, firstY);
var finalXvalue = Number(firstX) + Number(defaultXvalue);
var finalYvalue = Number(firstY) + Number(defaultYvalue);
gElem.transform.baseVal.getItem(0).setTranslate(finalXvalue, finalYvalue);
var s = new XMLSerializer();
var str = s.serializeToString(gElem);
consolidatedContents.push(str);
}
var contents = JSON.stringify(consolidatedContents);
var con = jQuery.parseJSON(contents);
var countContents = con.length;
if (countContents != 0) { // check if content
var jContent = $.map(con, function(value) {
return (value);
});
$("#Right_Border").html(jContent.join(""));
}
}
function zoomIn(canvas, actualSizeX, actualSizeY, side) {
var canvasScale = 1;
var SCALE_FACTOR = 1.2;
// TODO limit the max canvas zoom in
//Your scale factor is 2.172 (1086/500 = 2.172) or 2.13 (639/300 = 2.13) to be more precise.
// X = WIDTH and Y = HEIGHT
if (side == "Front" || side == "Back") {
var SCALE_FACTOR_X = actualSizeX / 222;
var SCALE_FACTOR_Y = actualSizeY / 380;
}
if (side == "Right" || side == "Left") {
var SCALE_FACTOR_X = actualSizeX / 96;
var SCALE_FACTOR_Y = actualSizeY / 112;
}
canvasScale = canvasScale * SCALE_FACTOR;
canvas.setHeight(canvas.getHeight() * SCALE_FACTOR_Y);
canvas.setWidth(canvas.getWidth() * SCALE_FACTOR_X);
var objects = canvas.getObjects();
for (var i in objects) {
var scaleX = objects[i].scaleX;
var scaleY = objects[i].scaleY;
var left = objects[i].left;
var top = objects[i].top;
var tempScaleX = scaleX * SCALE_FACTOR_X;
var tempScaleY = scaleY * SCALE_FACTOR_Y;
var tempLeft = left * SCALE_FACTOR_X;
var tempTop = top * SCALE_FACTOR_Y;
objects[i].scaleX = tempScaleX;
objects[i].scaleY = tempScaleY;
objects[i].left = tempLeft;
objects[i].top = tempTop;
objects[i].setCoords();
}
canvas.renderAll();
}
function sendSVG() {
var svgText = document.getElementById('printFileDiv').innerHTML;
var form = document.querySelector('form');
// form.setAttribute("method", "post");
// form.setAttribute("id", "frm_svg");
// form.setAttribute("action", "");
// form.setAttribute("accept-charset", "UTF-8");
var hiddenSVGField = document.createElement("input");
hiddenSVGField.setAttribute("type", "hidden");
hiddenSVGField.setAttribute("name", "svgText");
hiddenSVGField.setAttribute("value", svgText);
var hiddenToken = document.createElement("input");
hiddenToken.setAttribute("type", "hidden");
hiddenToken.setAttribute("name", "_token");
hiddenToken.setAttribute("value", "{{ csrf_token() }}");
var hiddenDetails = document.createElement("input");
hiddenDetails.setAttribute("type", "hidden");
hiddenDetails.setAttribute("name", "filename");
hiddenDetails.setAttribute("value", "{{ $order_item_array[0]->ProductName . "
_ " . $order_item_array[0]->Size }}");
form.appendChild(hiddenSVGField);
form.appendChild(hiddenToken);
form.appendChild(hiddenDetails);
document.body.appendChild(form);
form.submit();
alert("Print file is successfully generated!");
setTimeout(function() {
window.location = "{{ url('admin/orders/view') }}" + "/" + "{{ $order_item_array[0]->CartKey }}"
}, 2000);
}
</script>
</body>
</html>