Edit Custom Plan

"; var printWin = window.open('', '', "width="+screen.availWidth+",height="+screen.availHeight ); printWin.document.open(); printWin.document.write(windowContent);printWin.document.addEventListener('load', function() { printWin.focus(); printWin.print(); printWin.document.close(); printWin.close(); }, true); }// $('#drawingCanvas').attr('style','background-repeat: no-repeat; background-position:center; background-size:' + width + 'px ' + height + 'px; background-image: url("'+background_custom+'");');function setDrawColor(picker) { draw_color = '#' + picker.toString(); canvas.freeDrawingBrush.color = draw_color; } // select all objects function deleteObjects(){ //var activeObject = canvas.getActiveObject(), var activeObjects = canvas.getActiveObjects(); if(activeObjects) { for (var i = 0; i < activeObjects.length; i++) { canvas.remove(activeObjects[i]); } } }function canvasOff(){ canvas.off('mouse:down'); canvas.off('mouse:move'); canvas.off('mouse:up'); canvas.isDrawingMode = false; canvas.selection = false; canvas.forEachObject(function(o) { o.selectable = false; }); //canvas.forEachObject(function(o){ o.setCoords() }) }function selectObject() { canvas.forEachObject(function(o) { o.selectable = true; o.setCoords(); }); }function addText(e) { newText = new fabric.IText("", { fontSize: 16, top:e.offsetY, left:e.offsetX, });canvas.add(newText); newText.set({ fill: draw_color }); canvas.setActiveObject(newText); newText.enterEditing(); canvas.renderAll(); } function addMobileText() { newText = new fabric.IText("New note...", { fontSize: 16, left: 100, top: 100, }); newText.set({ fill: draw_color }); canvas.add(newText).setActiveObject(newText); //canvas.setActiveObject(newText); newText.enterEditing(); canvas.renderAll(); }var isMobile = { Android: function() { return navigator.userAgent.match(/Android/i); }, BlackBerry: function() { return navigator.userAgent.match(/BlackBerry/i); }, iOS: function() { return navigator.userAgent.match(/iPhone|iPad|iPod/i); }, Opera: function() { return navigator.userAgent.match(/Opera Mini/i); }, Windows: function() { return navigator.userAgent.match(/IEMobile/i); }, any: function() { return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows()); } }; $("#select").click(function(){ canvasOff(); canvas.selection= true; selectObject(); // canvas.forEachObject(function(o) { // o.selectable = true; // o.setCoords(); // }); // canvas.forEachObject(function(o){ o.setCoords() }); });$("#draw").click(function(){ canvasOff(); canvas.isDrawingMode = true;canvas.on('mouse:up', function(o){ canvas.isDrawingMode = false; selectObject(); }); });$("#text").click(function(){ add_text = true; canvasOff(); if(isMobile.any()) { //console.log("isMobile") addMobileText(); } else { canvas.on('mouse:down', function(options) { if(add_text) { addText(options.e); add_text = false; } else { selectObject(); } // console.log(options.target); // if (options.target == null) { // addText(options.e); // } }); } if(newText.text == "") { canvas.setActiveObject(newText); canvas.remove(canvas.getActiveObject()); } });$("#line").click(function(){ canvasOff(); //line = new Line(canvas); var line; var isDown = false; var isDrawing = true;canvas.on('mouse:down', function(o){ if (!isDrawing) return; isDown = true; var pointer = canvas.getPointer(o.e); var points = [ pointer.x, pointer.y, pointer.x, pointer.y ]; line = new fabric.Line(points, { strokeWidth: 2, fill: 'red', stroke: draw_color, originX: 'center', originY: 'center' }); canvas.add(line); });canvas.on('mouse:move', function(o){ if (!isDown) return; var pointer = canvas.getPointer(o.e); line.set({ x2: pointer.x, y2: pointer.y }); canvas.renderAll(); });canvas.on('mouse:up', function(o){ isDown = false; isDrawing = false; selectObject(); }); });$("#rectangle").click(function(){ canvasOff(); var rect, origX, origY; var isDown = false; var isDrawing = true;canvas.on('mouse:down', function(o){ if (!isDrawing) return; isDown = true; var pointer = canvas.getPointer(o.e); origX = pointer.x; origY = pointer.y; var pointer = canvas.getPointer(o.e); rect = new fabric.Rect({ left: origX, top: origY, originX: 'left', originY: 'top', width: pointer.x-origX, height: pointer.y-origY, angle: 0, stroke: draw_color, strokeWidth: 2, fill: '', transparentCorners: false }); canvas.add(rect); });canvas.on('mouse:move', function(o){ if (!isDown) return; var pointer = canvas.getPointer(o.e); if(origX>pointer.x){ rect.set({ left: Math.abs(pointer.x) }); } if(origY>pointer.y){ rect.set({ top: Math.abs(pointer.y) }); } rect.set({ width: Math.abs(origX - pointer.x) }); rect.set({ height: Math.abs(origY - pointer.y) }); canvas.renderAll(); });canvas.on('mouse:up', function(o){ isDown = false; isDrawing = false; selectObject(); }); }); /* $("#circle").click(function(){ canvasOff();var circle, isDown, origX, origY;canvas.observe('mouse:down', function(o){ isDown = true; var pointer = canvas.getPointer(o.e); origX = pointer.x; origY = pointer.y; circle = new fabric.Circle({ left: pointer.x, top: pointer.y, radius: 1, strokeWidth: 2, stroke: draw_color, fill: '', selectable: true, originX: 'center', originY: 'center' }); canvas.add(circle); });canvas.observe('mouse:move', function(o){ if (!isDown) return; var pointer = canvas.getPointer(o.e); circle.set({ radius: Math.abs(origX - pointer.x) }); canvas.renderAll(); });canvas.on('mouse:up', function(o){ isDown = false; }); }); */ $("#delete").click(function(){ deleteObjects(); }); $("#clear").click(function(){ canvas.clear(); });function removeLoader(){ $( "#loadingDiv" ).fadeOut(500, function() { // fadeOut complete. Remove the loading div $( "#loadingDiv" ).remove(); //makes page more lightweight }); }function resizeCanvas() { console.log("Resize Canvas"); curCanvasWidth = $('.content-sidebar-wrap').width(); curCanvasHeight = curCanvasWidth*height_canvas/width_canvas; if (curCanvasWidth > width_canvas) { curCanvasWidth = width_canvas; } if (curCanvasHeight > height_canvas) { curCanvasHeight = height_canvas; }var bg_width = curCanvasWidth/scale_canvas; var bg_height = curCanvasHeight/scale_canvas; //$('#drawingCanvas').attr('style','background-size:' + bg_width.toFixed(1) + 'px ' + bg_height.toFixed(1) + 'px;'); $('#drawingCanvas').attr('style','background-repeat: no-repeat; background-position:center; background-size:' + bg_width.toFixed(1) + 'px ' + bg_height.toFixed(1) + 'px; background-image: url("'+background_custom+'");'); var factor = curCanvasWidth/width_canvas;canvas.setWidth(curCanvasWidth); canvas.setHeight(curCanvasHeight.toFixed(1));canvas.setZoom(factor.toFixed(2));canvas.renderAll(); } $(window).resize(function() { resizeCanvas(); }).resize();// var modal = document.getElementById('loginModal'); // document.getElementsByClassName('close')[0].onclick = function() { // document.getElementById('loginModal').style.display = "none"; // }// window.onclick = function(event) { // if (event.target == modal) { // modal.style.display = "none"; // } // } $(function() { $('#loginModal').css('display', 'none'); resizeCanvas(); });$('#close-modal').on('click', function(){ $('#loginModal').css('display','none'); });$("#save").click(function() { if ($('body').hasClass('logged-in')) { var count = canvas.getObjects().length; if(count) { $('body').append('
Loading...
'); canvas.viewportTransform.slice(); canvas.viewportTransform = [1, 0, 0, 1, 0, 0]; var dataURL = canvas.toDataURL({ format: "png", left: 0, top: 0, width: width_canvas , height: height_canvas , }); var json_data = JSON.stringify(canvas); // var draw_data = canvas.toSVG(); // console.log(draw_data);$.when($.ajax({ type : 'POST', data : {action : 'save_custom_plans', post_id:post_id,user_id:user_id,draw_data:json_data, draw_img: dataURL}, url : 'https://www.fairwayhomeswest.com/wp-admin/admin-ajax.php', success : function (resp){ // do nothing } })).then(function( data, textStatus, jqXHR ) { removeLoader(); window.location=document.referrer; }); } else { window.location=document.referrer; } } else { //alert("Please login to save your custom plan!"); $('#loginModal').css('display','block'); } });});
Back To Top

Pin It on Pinterest