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

update 7_11_2019

Browse Source
This commit is contained in:
Frank John Begornia
2019-07-11 21:50:00 +08:00
parent c8309e7d3f
commit e60bb3baf8
19 changed files with 294 additions and 230 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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->Side }}
<span style="text-transform:uppercase; font-weight: bold;">{{ $template->Side }}</span>
</a>
</li>
@endforeach
@@ -851,7 +851,7 @@
$('#toTop').click(function() {
$('body,html').animate({scrollTop:0},800);
});
// $('#grid_lines').bootstrapToggle('on');
$('#grid_lines').change(function() {
var SideAndPath = {!! json_encode($templatepaths_arrays) !!};
@@ -994,12 +994,13 @@
},
submitHandler: submitLoginForm
});
// calling functions
changeData();
colorPickerCustom();
templateColors('{{ $template_arrays[0]->TemplateCode }}');
loadClipartContent();
// addDefaultTeamText();
// addNameNumber();
// onDeSelected();
@@ -1026,7 +1027,8 @@
});
initCanvas();
// initCanvas();
// onSelected(canvas_Shirts_Front);
});
// design saving
@@ -1476,19 +1478,9 @@
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);
}
@@ -1642,15 +1634,13 @@
window['canvas_' + type + '_' + sideName] = new fabric.Canvas(canvasName);
var templateFormat = SideAndPath[i]['TemplateFormat'];
initCanvas(window['canvas_' + type + '_' + sideName]);
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
});
}
}
/* ############################ */
@@ -1661,6 +1651,9 @@
initAligningGuidelines(canvas);
canvas.selection = false;
canvas.controlsAboveOverlay = true;
// canvas.dispose();
$('#side-controls a').click(function (e) {
onDeSelected();
});
@@ -1670,7 +1663,7 @@
canvas = window[$(this).attr('data-canvas-id')];
canvasID = $(this).attr('data-canvas-id');
canvas.calcOffset();
initCanvas();
// initCanvas();
// canvas.on('object:moving', function(options) {
// console.log('asdasd')
@@ -1679,10 +1672,10 @@
// canvas.on('object:selected', onSelected);
initCenteringGuidelines(canvas);
initAligningGuidelines(canvas);
canvas.selection = false;
canvas.controlsAboveOverlay = true;
});
//trigger enter ######################################################################
$(document).on('input keyup', '.rotateTextValue', function(e) {
@@ -1770,7 +1763,7 @@
//End Trigger enter ######################################################################
function initCanvas(){
function initCanvas(canvas){
canvas.on('selection:cleared', onDeSelected);
canvas.on('object:selected', onSelected);
// canvas.on('object:scaling', onScaling);
@@ -1938,147 +1931,152 @@
}
function onSelected(){
// console.log(canvas);
try{
var obj = canvas.getActiveObject();
// console.log("Height =", (obj.getScaleY() * obj.getHeight()).toFixed(2));
// console.log("Width = ", (obj.getScaleX() * obj.getWidth()).toFixed(2));
$('.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);
var obj = canvas.getActiveObject();
// console.log("Height =", (obj.getScaleY() * obj.getHeight()).toFixed(2));
// console.log("Width = ", (obj.getScaleX() * obj.getWidth()).toFixed(2));
$('.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){
var objType = canvas.getActiveObject().get('type');
var id = canvas.getActiveObject().get('idNumber');
// console.log(obj.type);
if(obj != null){
var objType = canvas.getActiveObject().get('type');
var id = canvas.getActiveObject().get('idNumber');
// console.log(obj.type);
if(objType == "curvedText"){
if(obj.effect == "curved"){
$('#teamname_text_shape').html('Text Shape: <br><img src="{{ config('site_config.uploads') }}text-shapes-logo/curve-logo.png" height="30px">');
}else if(obj.effect == "arc"){
$('#teamname_text_shape').html('Text Shape: <br><img src="{{ config('site_config.uploads') }}text-shapes-logo/arch-logo.png" height="30px">');
if(objType == "curvedText"){
if(obj.effect == "curved"){
$('#teamname_text_shape').html('Text Shape: <br><img src="{{ config('site_config.uploads') }}text-shapes-logo/curve-logo.png" height="30px">');
}else if(obj.effect == "arc"){
$('#teamname_text_shape').html('Text Shape: <br><img src="{{ config('site_config.uploads') }}text-shapes-logo/arch-logo.png" height="30px">');
}else{
$('#teamname_text_shape').html('Add text Shape');
}
}else{
$('#teamname_text_shape').html('Add text Shape');
}
}else{
$('#teamname_text_shape').html('Add text Shape');
}
if(objType == "i-text" || objType == "curvedText" || objType == "text"){
if(objType == "i-text" || objType == "curvedText" || objType == "text"){
if(id){
$("#numberProperties").css({ "display" : "block" });
$('#tab-add-number1').tab('show');
if(id){
$("#numberProperties").css({ "display" : "block" });
$('#tab-add-number1').tab('show');
$("#addNumberId").css({ "display" : "block" });
$("#enterNumberId").css({ "display" : "none" });
$("#addNumberId").css({ "display" : "block" });
$("#enterNumberId").css({ "display" : "none" });
$('#editedNumberInput').val(obj.getText());
}else{
$('#editedNumberInput').val(obj.getText());
}else{
$("#textProperties").css({ "display" : "block" });
$('#tab-add-text1').tab('show');
$("#textProperties").css({ "display" : "block" });
$('#tab-add-text1').tab('show');
$("#addNewTextId").css({ "display" : "block" });
$("#enterTextId").css({ "display" : "none" });
$("#addNewTextId").css({ "display" : "block" });
$("#enterTextId").css({ "display" : "none" });
$('#editedTextInput').val(obj.getText());
$('#editedTextInput').val(obj.getText());
}
var fontprop = getFontDisplay(obj.fontFamily);
console.log(fontprop)
$('.btn-show-fonts').html(fontprop.fontNameDisplay);
$('.btn-show-fonts').css('font-family', obj.fontFamily);
$('.btn-show-fonts').attr('data-font-size', fontprop.additionalSize);
$(".text-font-size").val((obj.fontSize / $(".btn-show-fonts").attr('data-font-size')).toFixed(2));
// $('#reverse').prop('checked', obj.get('reverse'));
// $('#radius').val(obj.get('radius'));
// $('#spacing').val(obj.get('spacing'));
//$('#fill').val(obj.getFill());
//$('#effect').val(obj.getEffect());
$(".fontColor").spectrum("set", obj.getFill());
$(".strokeColor").spectrum("set", obj.getStroke());
$(".outlineThickness").val(obj.getStrokeWidth());
$('#font_size').val(obj.getFontSize() + " in");
$('.rotateTextSlider, .rotateTextValue').val(Math.round(obj.getAngle()));
$('.spacingTextSlider, .spacingTextValue').val(obj.getCharSpacing() / 2);
$('.opacityTextSlider, .opacityTextValue').val(obj.getOpacity() * 10);
/* if($('#strokeColor').val() == ""){
console.log("null");
}else{
console.log($('#strokeColor').val());
} */
}
var fontprop = getFontDisplay(obj.fontFamily);
console.log(fontprop)
$('.btn-show-fonts').html(fontprop.fontNameDisplay);
$('.btn-show-fonts').css('font-family', obj.fontFamily);
$('.btn-show-fonts').attr('data-font-size', fontprop.additionalSize);
$(".text-font-size").val((obj.fontSize / $(".btn-show-fonts").attr('data-font-size')).toFixed(2));
// $('#reverse').prop('checked', obj.get('reverse'));
// $('#radius').val(obj.get('radius'));
// $('#spacing').val(obj.get('spacing'));
//$('#fill').val(obj.getFill());
//$('#effect').val(obj.getEffect());
$(".fontColor").spectrum("set", obj.getFill());
$(".strokeColor").spectrum("set", obj.getStroke());
$(".outlineThickness").val(obj.getStrokeWidth());
$('#font_size').val(obj.getFontSize() + " in");
$('.rotateTextSlider, .rotateTextValue').val(Math.round(obj.getAngle()));
$('.spacingTextSlider, .spacingTextValue').val(obj.getCharSpacing() / 2);
$('.opacityTextSlider, .opacityTextValue').val(obj.getOpacity() * 10);
/* if($('#strokeColor').val() == ""){
console.log("null");
}else{
console.log($('#strokeColor').val());
} */
}
if(objType == "image"){
$('#tab-upload-image1').tab('show');
$('.rotateTextSlider, .rotateTextValue').val(Math.round(obj.getAngle()));
$('.opacityTextSlider, .opacityTextValue').val(obj.getOpacity() * 10);
$("#img-remove-btn").css({ "display" : "block" });
$("#image-properties").css({ "display" : "block" });
}
if(objType == "path-group"){
$('.clipartColor').blur();
var obj = "";
var arrayPathId = [];
var k = 0;
$('#tab-clipart1').tab('show');
obj = canvas.getActiveObject();
$('#clipartProperties').html('');
var randomNumbers = Math.random();
for (var j in obj.paths) {
k = k + 1;
var id = obj.paths[j].get('id');
var fill = obj.paths[j].get('fill');
// console.log(id);
arrayPathId.push({
'id' : id,
'fill' : fill,
'ran_num' : randomNumbers
});
}
setTimeout(function() {
// event.preventDefault();
getClipartProperties(arrayPathId, randomNumbers);
}, 500);
setTimeout(function() {
if(objType == "image"){
$('#tab-upload-image1').tab('show');
$('.rotateTextSlider, .rotateTextValue').val(Math.round(obj.getAngle()));
$('.opacityTextSlider, .opacityTextValue').val(obj.getOpacity() * 10);
}, 1000);
return false;
}
try{
document.getElementById(canvasID.split("_")[2] + "_" +canvasID.split("_")[1] + "_Border").setAttribute("display", "");
}catch(e){
$("#img-remove-btn").css({ "display" : "block" });
$("#image-properties").css({ "display" : "block" });
}
if(objType == "path-group"){
$('.clipartColor').blur();
var obj = "";
var arrayPathId = [];
var k = 0;
$('#tab-clipart1').tab('show');
obj = canvas.getActiveObject();
$('#clipartProperties').html('');
var randomNumbers = Math.random();
for (var j in obj.paths) {
k = k + 1;
var id = obj.paths[j].get('id');
var fill = obj.paths[j].get('fill');
// console.log(id);
arrayPathId.push({
'id' : id,
'fill' : fill,
'ran_num' : randomNumbers
});
}
setTimeout(function() {
// event.preventDefault();
getClipartProperties(arrayPathId, randomNumbers);
}, 500);
setTimeout(function() {
$('.rotateTextSlider, .rotateTextValue').val(Math.round(obj.getAngle()));
$('.opacityTextSlider, .opacityTextValue').val(obj.getOpacity() * 10);
}, 1000);
return false;
}
try{
document.getElementById(canvasID.split("_")[2] + "_" +canvasID.split("_")[1] + "_Border").setAttribute("display", "");
}catch(e){
}
}
}catch(e){
}
}
function onDeSelected(){
@@ -3410,8 +3408,7 @@
var y = 0.2126*color._r + 0.7152*color._g + 0.0722*color._b;
// var c = y < 128 ? 'white' : 'black';
document.getElementById(mainColorId).setAttribute("fill", onMoveColor);
try{
if(y < 128){
document.getElementById(sideName+'_Grid_Lines_Path').setAttribute("stroke", "white");
@@ -3419,8 +3416,6 @@
var border_stroke = document.getElementById(sideName + '_' + type + '_Border');
$(border_stroke).children("path").attr("fill", "yellow");
}else{
document.getElementById(sideName+'_Grid_Lines_Path').setAttribute("stroke", "black");
var border_stroke = document.getElementById(sideName + '_' + type + '_Border');
@@ -3429,10 +3424,11 @@
// console.log(border_stroke)
document.getElementById(mainColorId).setAttribute("fill", onMoveColor);
}catch(e){
}
}