updated downloader

This commit is contained in:
franknstayn
2022-04-04 23:03:54 +08:00
parent 729454a113
commit 0e482bdc54
2 changed files with 266 additions and 256 deletions

View File

@@ -939,7 +939,7 @@
hiddenDetails.setAttribute("name", "filename"); hiddenDetails.setAttribute("name", "filename");
// hiddenDetails.setAttribute("value", "{{ $order_item_array[0]->ProductName . " // hiddenDetails.setAttribute("value", "{{ $order_item_array[0]->ProductName . "
// _ " . $order_item_array[0]->Size }}"); // _ " . $order_item_array[0]->Size }}");
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);

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,10 +9,11 @@
<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>
@@ -20,7 +22,7 @@
<div id="svgLeftContent" style="display:none;"></div> <div id="svgLeftContent" 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="222px" height="380px" style="border: 1px solid black;"></canvas> <canvas id="frontCanvas" width="222px" height="380px" style="border: 1px solid black;"></canvas>
<canvas id="backCanvas" width="222px" height="380px" style="border: 1px solid black;"></canvas> <canvas id="backCanvas" width="222px" height="380px" style="border: 1px solid black;"></canvas>
@@ -52,10 +54,10 @@
var frontCanvas = new fabric.StaticCanvas( document.getElementById("frontCanvas")); var frontCanvas = new fabric.StaticCanvas(document.getElementById("frontCanvas"));
var backCanvas = new fabric.StaticCanvas( document.getElementById("backCanvas")); var backCanvas = new fabric.StaticCanvas(document.getElementById("backCanvas"));
var leftCanvas = new fabric.StaticCanvas( document.getElementById("leftCanvas")); var leftCanvas = new fabric.StaticCanvas(document.getElementById("leftCanvas"));
var rightCanvas = new fabric.StaticCanvas( document.getElementById("rightCanvas")); var rightCanvas = new fabric.StaticCanvas(document.getElementById("rightCanvas"));
try { try {
var frontContentRaw = "{{ $client_design_array[0]->ContentFront }}"; var frontContentRaw = "{{ $client_design_array[0]->ContentFront }}";
@@ -64,17 +66,17 @@
var rightContentRaw = "{{ $client_design_array[0]->ContentRight }}"; var rightContentRaw = "{{ $client_design_array[0]->ContentRight }}";
console.log(leftContentRaw) console.log(leftContentRaw)
if(frontContentRaw) { if (frontContentRaw) {
var tmp_frontCanvas = JSON.parse(frontContentRaw.replace(/&quot;/g,'"')); var tmp_frontCanvas = JSON.parse(frontContentRaw.replace(/&quot;/g, '"'));
} }
if(backContentRaw) { if (backContentRaw) {
var tmp_backCanvas = JSON.parse(backContentRaw.replace(/&quot;/g,'"')); var tmp_backCanvas = JSON.parse(backContentRaw.replace(/&quot;/g, '"'));
} }
if(leftContentRaw) { if (leftContentRaw) {
var tmp_leftCanvas = JSON.parse(leftContentRaw.replace(/&quot;/g,'"')); var tmp_leftCanvas = JSON.parse(leftContentRaw.replace(/&quot;/g, '"'));
} }
if(rightContentRaw) { if (rightContentRaw) {
var tmp_rightCanvas = JSON.parse(rightContentRaw.replace(/&quot;/g,'"')); var tmp_rightCanvas = JSON.parse(rightContentRaw.replace(/&quot;/g, '"'));
} }
// var tmp_frontCanvas = JSON.parse(frontContentRaw.replace(/&quot;/g,'"')); // var tmp_frontCanvas = JSON.parse(frontContentRaw.replace(/&quot;/g,'"'));
@@ -84,7 +86,7 @@
loadDesigns(frontCanvas, (tmp_frontCanvas) ? tmp_frontCanvas : {}); loadDesigns(frontCanvas, (tmp_frontCanvas) ? tmp_frontCanvas : {});
loadDesigns(backCanvas, (tmp_backCanvas) ? tmp_backCanvas : {}); loadDesigns(backCanvas, (tmp_backCanvas) ? tmp_backCanvas : {});
loadDesigns(leftCanvas, (tmp_leftCanvas) ? tmp_leftCanvas : {}); loadDesigns(leftCanvas, (tmp_leftCanvas) ? tmp_leftCanvas : {});
loadDesigns(rightCanvas, (tmp_rightCanvas) ? tmp_rightCanvas : {} ); loadDesigns(rightCanvas, (tmp_rightCanvas) ? tmp_rightCanvas : {});
} catch (error) { } catch (error) {
console.log(error) console.log(error)
@@ -97,13 +99,16 @@
let objects = []; let objects = [];
Object.entries(canvas_json.objects).forEach(([key, item]) => { Object.entries(canvas_json.objects).forEach(([key, item]) => {
if(item.type == 'image') { if (item.type == 'image') {
toDataURL(item.src, function(src) { toDataURL(item.src, function(src) {
const images = {...item, src } const images = {
...item,
src
}
objects.push(images) objects.push(images)
}) })
}else { } else {
objects.push(item) objects.push(item)
} }
@@ -117,22 +122,22 @@
side_canvas.loadFromJSON(final_json, function(objects, options) { side_canvas.loadFromJSON(final_json, function(objects, options) {
side_canvas.renderAll(); side_canvas.renderAll();
setTimeout(function(){ setTimeout(function() {
side_canvas.backgroundImage = 0; side_canvas.backgroundImage = 0;
side_canvas.clear(); side_canvas.clear();
side_canvas.renderAll(); side_canvas.renderAll();
setTimeout(function(){ setTimeout(function() {
side_canvas.loadFromJSON(canvas_json, function(objects, options) { side_canvas.loadFromJSON(canvas_json, function(objects, options) {
side_canvas.renderAll(); side_canvas.renderAll();
side_canvas.selection = false; side_canvas.selection = false;
}); });
},1000); }, 1000);
} ,500); }, 500);
}); });
}, 1000); }, 1000);
} }
@@ -257,7 +262,7 @@
// }); // });
function loadPrintFile(){ function loadPrintFile() {
var path = 'https://crewsportswear.com/uploads/images/'; var path = 'https://crewsportswear.com/uploads/images/';
var template_code = "{{ $client_design_array[0]->TemplateCode }}"; var template_code = "{{ $client_design_array[0]->TemplateCode }}";
var size = "{{ $order_item_array[0]->Size }}"; var size = "{{ $order_item_array[0]->Size }}";
@@ -267,9 +272,9 @@
$.ajax({ //create an ajax request to load_page.php $.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.
success: function(response){ success: function(response) {
$("#printFileDiv").html(response) $("#printFileDiv").html(response)
@@ -306,28 +311,32 @@
rightContent(rb_height, rb_width, rb_x, rb_y); rightContent(rb_height, rb_width, rb_x, rb_y);
leftContent(lb_height, lb_width, lb_x, lb_y); leftContent(lb_height, lb_width, lb_x, lb_y);
setTimeout(function(){ setTimeout(function() {
sendSVG(); sendSVG();
},2000); }, 2000);
}, 3000); }, 3000);
} }
}); });
} }
function loadTemplateDesign(){ function loadTemplateDesign() {
tmpdetails = {!! json_encode($client_design_array[0]->TemplateDesign) !!}; // tmpdetails = {
var obj = JSON.parse(tmpdetails); // !!json_encode($client_design_array[0] - > TemplateDesign) !!
// };
// var obj = JSON.parse(tmpdetails);
var tmpdetails = "{{ $client_design_array[0]->TemplateDesign }}";
var obj = JSON.parse(tmpdetails.replace(/&quot;/g, '"'))
///////////// 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;
@@ -341,18 +350,18 @@
$('#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 = {};
@@ -369,12 +378,12 @@
var front_idappend = "Front_MainColor"; var front_idappend = "Front_MainColor";
var back_idappend = "Back_MainColor"; var back_idappend = "Back_MainColor";
if(obj[0].patternColors[0].patternColorType == "Solid"){ if (obj[0].patternColors[0].patternColorType == "Solid") {
loadPattern(getPatternURL, front_clipathval, front_svgpatternid, front_idappend, arrayPatternColor); loadPattern(getPatternURL, front_clipathval, front_svgpatternid, front_idappend, arrayPatternColor);
loadPattern(getPatternURL, back_clipathval, back_svgpatternid, back_idappend, arrayPatternColor); loadPattern(getPatternURL, back_clipathval, back_svgpatternid, back_idappend, arrayPatternColor);
}else{ } else {
var gradientColor1 = obj[0].patternColors[0].patternGradientColor1; var gradientColor1 = obj[0].patternColors[0].patternGradientColor1;
var gradientColor2 = obj[0].patternColors[0].patternGradientColor2; var gradientColor2 = obj[0].patternColors[0].patternGradientColor2;
var gradientColorOffset1 = obj[0].patternColors[0].patternGradientOffset1; var gradientColorOffset1 = obj[0].patternColors[0].patternGradientOffset1;
@@ -383,7 +392,7 @@
var trimCount = 0; var trimCount = 0;
var gradientIds = "Gradient_List"; var gradientIds = "Gradient_List";
var GradientPatternColor = [{ var GradientPatternColor = [{
"PatternColor1" : "url(#Body_Pattern_Gradient)" "PatternColor1": "url(#Body_Pattern_Gradient)"
}]; }];
// console.log(GradientPatternColor); // console.log(GradientPatternColor);
@@ -395,14 +404,14 @@
} }
} }
}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";
@@ -410,15 +419,15 @@
trimPattern = "Trim" + trimCount + "_Pattern"; trimPattern = "Trim" + trimCount + "_Pattern";
trimPatternColor = "Trim" + trimCount + "_patternColor"; trimPatternColor = "Trim" + trimCount + "_patternColor";
if(obj[0].Trims[i][trimNum].type == "Solid"){ if (obj[0].Trims[i][trimNum].type == "Solid") {
var trim_solid_color = obj[0].Trims[i][trimNum].solidColor; var trim_solid_color = obj[0].Trims[i][trimNum].solidColor;
$('#Front_'+SVGTrimId).attr("fill", trim_solid_color); $('#Front_' + SVGTrimId).attr("fill", trim_solid_color);
$('#Back_'+SVGTrimId).attr("fill", trim_solid_color); $('#Back_' + SVGTrimId).attr("fill", trim_solid_color);
$('#Left_'+SVGTrimId).attr("fill", trim_solid_color); $('#Left_' + SVGTrimId).attr("fill", trim_solid_color);
$('#Right_'+SVGTrimId).attr("fill", trim_solid_color); $('#Right_' + SVGTrimId).attr("fill", trim_solid_color);
}else{ } 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;
@@ -427,19 +436,19 @@
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 = {};
@@ -450,22 +459,21 @@
// 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 front_svgpatternid = "Front_Trim_" + trimCount + "_Pattern";
var back_svgpatternid = "Back_Trim_"+trimCount+"_Pattern"; var back_svgpatternid = "Back_Trim_" + trimCount + "_Pattern";
var front_idappend = "Front_Trim_"+trimCount; var front_idappend = "Front_Trim_" + trimCount;
var back_idappend = "Back_Trim_"+trimCount; var back_idappend = "Back_Trim_" + trimCount;
// console.log(getPatternURL); // console.log(getPatternURL);
if(obj[0].Trims[i][trimNumPattern].patternColorType == "Solid"){ if (obj[0].Trims[i][trimNumPattern].patternColorType == "Solid") {
//console.log('solid'); //console.log('solid');
loadPattern(getPatternURL, front_clipathval, front_svgpatternid, front_idappend, arrayPatternColor); loadPattern(getPatternURL, front_clipathval, front_svgpatternid, front_idappend, arrayPatternColor);
loadPattern(getPatternURL, back_clipathval, back_svgpatternid, back_idappend, arrayPatternColor); loadPattern(getPatternURL, back_clipathval, back_svgpatternid, back_idappend, arrayPatternColor);
} } else {
else{
var gradientColor1 = obj[0].Trims[i][trimNumPattern].patternGradientColor1; var gradientColor1 = obj[0].Trims[i][trimNumPattern].patternGradientColor1;
var gradientColor2 = obj[0].Trims[i][trimNumPattern].patternGradientColor2; var gradientColor2 = obj[0].Trims[i][trimNumPattern].patternGradientColor2;
var gradientColorOffset1 = obj[0].Trims[i][trimNumPattern].patternGradientOffset1; var gradientColorOffset1 = obj[0].Trims[i][trimNumPattern].patternGradientOffset1;
@@ -473,7 +481,7 @@
var gradientFor = "Trim_Pattern"; var gradientFor = "Trim_Pattern";
var gradientIds = "Gradient_List"; var gradientIds = "Gradient_List";
var GradientPatternColor = [{ var GradientPatternColor = [{
"PatternColor1" : "url(#Trim_"+trimCount+"_Pattern_Gradient)" "PatternColor1": "url(#Trim_" + trimCount + "_Pattern_Gradient)"
}]; }];
loadGradientTemplate(gradientFor, gradientIds, gradientColor1, gradientColor2, gradientColorOffset1, gradientColorOffset2, trimCount); loadGradientTemplate(gradientFor, gradientIds, gradientColor1, gradientColor2, gradientColorOffset1, gradientColorOffset2, trimCount);
@@ -484,7 +492,7 @@
} }
} }
}catch(e){ } catch (e) {
} }
} }
@@ -492,14 +500,14 @@
} }
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();
console.log(objects) console.log(objects)
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();
@@ -507,14 +515,14 @@
} }
} }
}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);
} }
@@ -529,7 +537,7 @@
// }) // })
// } // }
} }
}catch(e){ } catch (e) {
console.log(e) console.log(e)
} }
frontCanvas.renderAll(); frontCanvas.renderAll();
@@ -540,13 +548,13 @@
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 + ")");
// toDataURL(getElements.getAttribute('xlink:href'), function(dataUrl) { // toDataURL(getElements.getAttribute('xlink:href'), function(dataUrl) {
// getElements.setAttributeNS("xlink:href", dataUrl) // getElements.setAttributeNS("xlink:href", dataUrl)
@@ -558,7 +566,7 @@
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];
@@ -579,7 +587,7 @@
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();
@@ -588,7 +596,7 @@
// 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);
} }
} }
@@ -597,29 +605,29 @@
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 {
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) {
} }
@@ -631,13 +639,13 @@
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');
@@ -645,7 +653,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];
@@ -663,7 +671,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);
@@ -675,28 +683,28 @@
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 rightContent(rb_height, rb_width, rb_x, rb_y){ function rightContent(rb_height, rb_width, rb_x, rb_y) {
var objects = rightCanvas.getObjects(); var objects = rightCanvas.getObjects();
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) {
} }
@@ -708,13 +716,13 @@
var el_id = document.getElementById('svgRightContent'); var el_id = document.getElementById('svgRightContent');
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');
@@ -722,7 +730,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];
@@ -740,7 +748,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);
@@ -752,28 +760,28 @@
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);
}); });
$("#Right_Border").html(jContent.join("")); $("#Right_Border").html(jContent.join(""));
} }
} }
function leftContent(lb_height, lb_width, lb_x, lb_y){ function leftContent(lb_height, lb_width, lb_x, lb_y) {
var objects = leftCanvas.getObjects(); var objects = leftCanvas.getObjects();
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) {
} }
@@ -785,13 +793,13 @@
var el_id = document.getElementById('svgLeftContent'); var el_id = document.getElementById('svgLeftContent');
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');
@@ -799,7 +807,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];
@@ -816,7 +824,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);
@@ -828,9 +836,9 @@
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);
}); });
$("#Left_Border").html(jContent.join("")); $("#Left_Border").html(jContent.join(""));
} }
@@ -842,12 +850,12 @@
// 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;
} }
@@ -892,7 +900,7 @@
canvas.renderAll(); canvas.renderAll();
} }
function sendSVG(){ function sendSVG() {
var svgText = document.getElementById('printFileDiv').innerHTML; var svgText = document.getElementById('printFileDiv').innerHTML;
@@ -915,8 +923,9 @@
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 }}");
hiddenDetails.setAttribute("value", "{{ $order_item_array[0]->ProductName }}_{{ $order_item_array[0]->Size }}" );
form.appendChild(hiddenSVGField); form.appendChild(hiddenSVGField);
form.appendChild(hiddenToken); form.appendChild(hiddenToken);
@@ -946,4 +955,5 @@
</script> </script>
</body> </body>
</html> </html>