- CustomSnappies.com
- Create Custom Snappies
- Custom Snappies
');typewatch(function () {var clone = cloneCanvas($('#fpd canvas').get(0));$(clone).css('width', '120px');$(clone).css('background-color','#fff');$('#updateImage').html(clone).promise().done(function(){previewImageFollow('canvas');});}, 500);} else {// Do nothing... yet...}}}function saveCustomProduct() {$('#btn_product_1').attr('disabled', 'disabled');$('#btn_product_1').html('Updating...');if (pDReady) {var jsonProduct = JSON.stringify(productDesigner.getProduct());$('#jsonItems').html(jsonProduct);$('#productView').val(jsonProduct);$('#btn_product_1').removeAttr('disabled');$('#btn_product_1').html('Add to Cart');productSaved = true;if(productDesigner.hasElementsOutOfBounding && !productDesigner.hasElementsOutOfBounding()){return true;//$('#product').submit();} else {try{message('Your design has some elements that may not be in the design area, are you sure you want to proceed?
If your design does not appear cut off in any way you are good to proceed.',"Warning",function(){$('#overlaydialog').fadeOut();$('#alert').fadeOut();$('#product').submit();},function(){$('#overlaydialog').fadeOut();$('#alert').fadeOut();productSaved = false;});}catch(e){if(confirm('Your design has some elements that may not be in the design area, are you sure you want to proceed?')){$('#product').submit();//return true;}else {productSaved = false;}}return false;}} else { alert('Not ready'); return false; }}function isFunction(functionToCheck) {var getType = {};return functionToCheck && getType.toString.call(functionToCheck) === '[object Function]';}function modifyTextElement(title, value, w, maxSize) {//return typewatch(function () {var el = productDesigner.getElementByTitle(title); // Existing Element, get attributes, etc...//console.log(el);var size = 200;var maxSize = (typeof maxSize === "undefined" ? size : maxSize);var sizeFound = false;while (size > 12 && sizeFound == false) {var font = el.fontWeight + " " + size + "px " + el.fontFamily;var width = getTextWidth(value, font);if (width <= w) {sizeFound = true;} else {size--;}}if(size > maxSize) { size = maxSize; }productDesigner.setElementParameters({'text': value, 'fontSize': size}, title);return size;//}, 100);}function changeMonogram(title, src) {var el = productDesigner.getElementByTitle(title); // Existing Element, get attributes, etc...//console.log(el);var n = title;el.remove();productDesigner.addElement('image', src, n, {'fill': el.fill, 'autoCenter': false, 'z': el.z, autoSelect: 0, 'scaleX': el.scaleX, 'scaleY': el.scaleY, 'angle': el.angle, 'height': el.height, 'opacity': el.opacity, 'width': el.width, 'left': el.left, 'top': el.top});clearTimeout(timeout);timeout = setTimeout(function () {var el2 = productDesigner.getElementByTitle(title); // Existing Element, get attributes, etc...el2.resizeToH = el2.height;el2.z = el.z;productDesigner.deselectElement();}, 500);}var typewatch = (function () {var timer = 0;return function (callback, ms) {clearTimeout(timer);timer = setTimeout(callback, ms);};})();function getTextWidth(text, font) {// re-use canvas object for better performancevar canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas"));var context = canvas.getContext("2d");context.font = font;var metrics = context.measureText(text);return metrics.width;}function changeBGColor(c,setpicker){var el = productDesigner.getElementByTitle('Background');productDesigner.setElementParameters({"colors":true, "fill": c}, el);$('.pattern').css('background-color', c);if(setpicker === true) { $('#bg_colorpicker').colorpicker('setValue', c); }}$(document).ready(function () {$('.swatch-clickable').on('click',function () {var c = $(this).attr('color');var l = this;$('.swatch').removeClass('active');changeBGColor(c,true,l);$(this).addClass('active');});$('.pattern-clickable').on('click',function () {var c = $(this).attr('background');var el = productDesigner.getElementByTitle('Background-Image');//console.log(el);try {if (typeof (el) != 'undefined' && typeof (el.remove) == 'function') {el.remove();}} catch (err) {console.log(err);}$('#removeBackgroundImage').show();var n = 'Background-Image';var cs = [];var f = false;var png = $(this).attr('png');if (typeof png !== typeof undefined && png !== false) {cs = '#000000';f = '#000000';}productDesigner.addElement('image', c, n, {width: 453, height: 453, degree: 0, removable: 0, draggable: 0, rotatable: 0, resizable: 0, copyable: 0, zChangeable: 0, autoSelect: false, topped: 0, z: 2, colors: cs, fill: f});$('.pattern').removeClass('active');$(this).addClass('active');if($(this).parents('.pattern-swatch-dropdown').children('.dropdown-toggle').length > 0){$(this).parents('.pattern-swatch-dropdown').children('.dropdown-toggle').addClass('active');}});/*$('.image-gallery-clickable').on('click',function () {var c = $(this).attr('background');//var n = 'Image' + Date.now();//zIndex++;//console.log(zIndex);//productDesigner.addElement('image', c, n, {colors: "#000000", z: zIndex });addImage(c);$('#addImage').modal('toggle');});*/$('.choose-a-style > img, .choose-a-style > span > img').on('click',function () {var c = $(this).attr('src');var el = productDesigner.getElementByTitle('Base');if(!el){return false;}var n = 'Base';var cs = [];var f = false;try {//console.log(el);$('#choose-a-style > img').attr('src', c);$('.choose-a-style').removeClass('selected');$(this).parents('.choose-a-style').addClass('selected');var style_name = ($(this).parents('.choose-a-style').attr('data-group_name'));//$(this).parent('.choose-a-style').next('.variations').val($(this).attr('alt'));$('#'+style_name+'_Selected').val($(this).attr('alt')).trigger('change');productDesigner.addElement('image', c, n, {degree: 0,removable: 0,draggable: 0,rotatable: 0,resizable: 0,replace:"Base",zChangeable: 0,autoSelect: false,boundingBox: '',boundingBoxMode: false,topped: el.topped,z: el.z,'left': el.left,'top': el.top});setTimeout(function(){if (typeof (el) != 'undefined' && typeof (el.remove) == 'function') {el.remove();}},500);} catch (err) {console.log(err);}});});if (!Date.now) {Date.now = function () {return new Date().getTime();}}$(document).on('click', '#close-preview', function () {$('.image-preview').popover('hide');// Hover befor close the preview$('.image-preview').hover(function () {$('.image-preview').popover('show');},function () {$('.image-preview').popover('hide');});});$(function () {// Create the close buttonvar closebtn = $('', {type: "button",text: 'x',id: 'close-preview',style: 'font-size: initial;',});closebtn.attr("class", "close pull-right");// Set the popover default content$('.image-preview').popover({trigger: 'manual',html: true,title: "Preview" + $(closebtn)[0].outerHTML,content: "There's no image",placement: 'bottom'});// Clear event$('.image-preview-clear').on('click',function () {$('.image-preview').attr("data-content", "").popover('hide');$('.image-preview-filename').val("");$('.image-preview-clear').hide();$('.image-preview-input input:file').val("");$(".image-preview-input-title").text("Browse");});// Create the preview image$(".image-preview-input input:file").change(function () {var img = $('', {id: 'dynamic',width: 250});var file = this.files[0];var reader = new FileReader();// Set preview image into the popover data-contentreader.onload = function (e) {$(".image-preview-input-title").text("Change");$(".image-preview-clear").show();$(".image-preview-filename").val(file.name);img.attr('src', e.target.result);img.addClass('img-responsive');$(".image-preview").attr("data-content", $(img)[0].outerHTML).popover("show");}reader.readAsDataURL(file);});});function addText(text,t,maxSize) {text = text.replace(/^\s+|\s+$/g, '');var len = text.length;var t = (typeof top === "undefined" ? 25 : t);var size = 25; text = text.replace(/['"]+/g, '');zIndex++;productDesigner.addElement('text', text, text, {colors: '#000000', curvable: false, 'fontSize': size, rotatable: true, z: zIndex, textAlign: "center", top:t, left:504, autoCenter: true});var size = modifyTextElement(text,text,403,maxSize);//saveCustomProduct();return size;}function addMultiText(cclass){var lines = [];$(cclass).each(function(){if($(this).val() != '') {lines.push($(this).val());}});var maxSize = (453/(lines.length+1));var top = 275.5+(maxSize/2)+25;$.each(lines,function(key,text){top+= addText(text,top,maxSize)+15;//console.log(top);});}function removeBackgroundImage() {var el = productDesigner.getElementByTitle('Background-Image');try {if (typeof (el) != 'undefined' && typeof (el.remove) == 'function') {el.remove();}else{if(el)productDesigner.currentViewInstance.stage.remove(el);}} catch (err) {console.log(err);}$('#removeBackgroundImage').hide();$('.pattern').removeClass('active');//saveCustomProduct();}$('.modal').on('shown.bs.modal', function () {$(this).find('[autofocus]').focus();});function calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight) {var ratio = Math.min(maxWidth / srcWidth, maxHeight / srcHeight);return { width: srcWidth*ratio, height: srcHeight*ratio };}function addImage(url){var n = 'Image' + Date.now();zIndex++; var img = new Image();img.onload = function(){var dimensions = calculateAspectRatioFit(img.width,img.height,403,403);productDesigner.addElement('image', url, n, {colors: "#000000", z: zIndex, width:dimensions.width, height:dimensions.height});};img.src = url;}function uploadCustomImage(formId, isBG) {if (typeof (isBG) == 'undefined') {isBG = false;}$('#addImage').modal('toggle');$.ajax({url: "/null.php/products/custom/upload",type: "POST",data: new FormData(document.getElementById(formId)),contentType: false,cache: false,processData: false,success: function (d) {var data = jQuery.parseJSON(d);if (data.status == 'success') {if (!isBG) {//var n = 'Image' + Date.now();//productDesigner.addElement('image', data.image_uri, n, {colors: "#000000", z: zIndex, w:'400'});addImage(data.image_uri);} else {var el = productDesigner.getElementByTitle('Background-Image');//console.log(el);if (typeof (el) != 'undefined') {el.remove();}$('#removeBackgroundImage').show();var n = 'Background-Image';productDesigner.addElement('image', c, n, {degree: 0, removable: 1, draggable: 1, rotatable: 0, resizable: 0, zChangeable: 0, topped: 0, z: 1});$('.pattern').removeClass('active');}$('#' + formId + ' input').val('');try{message(data.msg.toString(),"Warning!",function(){ $('#overlaydialog').fadeOut(); $('#alert').fadeOut(); });}catch(e){alert(data.msg);}}if(data.status == 'fail'){try{message(''+data.msg.toString()+'',"Upload Failed",function(){ $('#overlaydialog').fadeOut(); $('#alert').fadeOut(); });}catch(e){alert(data.msg);}}}});}function cloneCanvas(oldCanvas) {//create a new canvasvar newCanvas = document.createElement('canvas');var context = newCanvas.getContext('2d');//set dimensionsnewCanvas.width = oldCanvas.width;newCanvas.height = oldCanvas.height;//apply the old canvas to the new onecontext.drawImage(oldCanvas, 0, 0);//return the new canvasreturn newCanvas;}$(function () {if ($('#lock-overlay').length > 0) {resizeLockBox();$(window).on('resize', function () {resizeLockBox();});$('#lock-overlay').on('click',function(){try{message('Would you like to be remove the lock to allow you to free edit this design?',"Message",function(){$('#overlaydialog').fadeOut();$('#alert').fadeOut();$('.glyphicon-lock').trigger('click');},function(){$('#overlaydialog').fadeOut();$('#alert').fadeOut();});}catch(e){if(confirm('Would you like to be remove the lock to allow you to free edit this design?')){//$('#lock-overlay').toggle();$('.glyphicon-lock').trigger('click');}}});}});if (typeof resizeLockBox !== 'function') {function resizeLockBox() {var lock = $('#lock-overlay'),image = $('#fpd'),imageParent = image.parent();lock.height(image.height());$('.fpd-container > .fpd-main-wrapper').height(image.height());}}window.blockMenuHeaderScroll = false;if(typeof getPassiveSupport === 'function' && getPassiveSupport()){if (window.addEventListener) {window.addEventListener('touchstart',(e)=>{if ($(e.target).closest('#fpd').length == 1){blockMenuHeaderScroll = true;}},{passive: true});window.addEventListener('touchend',(e)=>{blockMenuHeaderScroll = false;},{passive: true});window.addEventListener('touchmove',(e)=>{if (blockMenuHeaderScroll){e.preventDefault();}},{passive: true});}else if(window.attachEvent){window.attachEvent('touchstart',(e)=>{if ($(e.target).closest('#fpd').length == 1){blockMenuHeaderScroll = true;}},{passive: true});window.attachEvent('touchend',(e)=>{blockMenuHeaderScroll = false;},{passive: true});window.attachEvent('touchmove',(e)=>{if (blockMenuHeaderScroll){e.preventDefault();}},{passive: true});}}else{$(window).on('touchstart', function(e){if ($(e.target).closest('#fpd').length == 1){blockMenuHeaderScroll = true;}});$(window).on('touchend', function(){blockMenuHeaderScroll = false;});$(window).on('touchmove', function(e){if (blockMenuHeaderScroll){e.preventDefault();}});}
'}).on('changeColor', function (e) {var el = productDesigner.getElementByTitle('Daddy\'s');productDesigner.setElementParameters({fill: e.color.toHex()}, el);$('#color_1').css('background-color', e.color.toHex());$('.hex-input').val(e.color.toHex());}).on('showPicker', function (e) {$('.hex-input').val(e.color.toHex());});});