CORE_V5 // ecard

PATH: home / cardxfeb / public_html / resources / assets / js / ecard /

Editing: ecard.js

$(document).ready(function () {
    if ($("#frontCanvas").length && $("#backCanvas").length) {
        var frontcanvas = new fabric.Canvas("frontCanvas");
        var backcanvas = new fabric.Canvas("backCanvas");

// Set default white background
        frontcanvas.setBackgroundColor(
            "white",
            frontcanvas.renderAll.bind(frontcanvas)
        );
        backcanvas.setBackgroundColor(
            "white",
            backcanvas.renderAll.bind(backcanvas)
        );

fabric.Image.fromURL(defaultPlaceholderImgUrl, function (img) {
            frontcanvas.setBackgroundImage(img, frontcanvas.renderAll.bind(frontcanvas), {
                scaleX: frontcanvas.width / img.width,
                scaleY: frontcanvas.height / img.height
            });
        });

fabric.Image.fromURL(defaultPlaceholderImgUrl, function (img) {
            backcanvas.setBackgroundImage(img, backcanvas.renderAll.bind(backcanvas), {
                scaleX: backcanvas.width / img.width,
                scaleY: backcanvas.height / img.height
            });
        });
    }

function setCanvasBackgroundImage(canvas, imgUrl) {
        fabric.Image.fromURL(imgUrl, function (img) {
            // Calculate the scale to preserve aspect ratio
            const canvasAspect = canvas.width / canvas.height;
            const imgAspect = img.width / img.height;

let scaleX, scaleY;
            if (canvasAspect > imgAspect) {
                // Fit to height
                scaleY = canvas.height / img.height;
                scaleX = scaleY;
            } else {
                // Fit to width
                scaleX = canvas.width / img.width;
                scaleY = scaleX;
            }

// Center the image vertically and horizontally
            const xOffset = (canvas.width - img.width * scaleX) / 2;
            const yOffset = (canvas.height - img.height * scaleY) / 2;

canvas.setBackgroundImage(
                img,
                canvas.renderAll.bind(canvas),
                {
                    scaleX: scaleX,
                    scaleY: scaleY,
                    top: yOffset,
                    left: xOffset,
                    originX: "left",
                    originY: "top"
                }
            );
        });
    }
    $("#vcard_size").on("change", function (e) {
        let vcardSize = $(this).val();
        let selectedValue = vcardSize;
        $("#custom-e-card-form")[0].reset();
        $(
            "#custom-e-card-logo",
            "#e-card-front-image",
            "#e-card-back-image"
        ).val("");
        $("#exampleInputImage").css(
            "background-image",
            'url("/assets/img/placeholder.png")'
        );
        $("#forntImage").css(
            "background-image",
            'url("/assets/img/placeholder.png")'
        );
        $("#backInputImage").css(
            "background-image",
            'url("/assets/img/placeholder.png")'
        );
        $(this).val(selectedValue);
        $("#custom-e-vcard-id").val("").trigger("change");
        frontcanvas.clear();
        backcanvas.clear();
        let canvasWidth = parseInt(vcardSize) === 1 ? 500 : 300;
        let canvasHeight = parseInt(vcardSize) === 1 ? 300 : 500;
        $("#frontCanvas, #backCanvas")
            .attr("width", canvasWidth)
            .attr("height", canvasHeight);
        $("#frontCanvasContainer, #backCanvasContainer").css({
            width: canvasWidth + "px",
            height: canvasHeight + "px",
        });
        $("#frontCanvasContainer, #backCanvasContainer")
            .find(".canvas-container")
            .css({ width: canvasWidth + "px", height: canvasHeight + "px" });
        $("#frontCanvasContainer, #backCanvasContainer")
            .find(".lower-canvas")
            .css({ width: canvasWidth + "px", height: canvasHeight + "px" });
        $("#frontCanvasContainer, #backCanvasContainer")
            .find(".upper-canvas")
            .css({ width: canvasWidth + "px", height: canvasHeight + "px" });

frontcanvas.setDimensions({ width: canvasWidth, height: canvasHeight });
        backcanvas.setDimensions({ width: canvasWidth, height: canvasHeight });

setCanvasBackgroundImage(frontcanvas, defaultPlaceholderImgUrl);

setCanvasBackgroundImage(backcanvas, defaultPlaceholderImgUrl);
    });

//     const canvas = new fabric.Canvas("canvas");
    let logoImage;

function loadImageToCanvas(input, canvas, bg = false) {
        let file = input.files[0];
        let reader = new FileReader();
        reader.onload = function (event) {
            let imgObj = new Image();
            imgObj.src = event.target.result;
            imgObj.onload = function () {
                if (input.id === "custom-e-card-logo") {
                    if (imgObj.width > 150 || imgObj.height > 150) {
                        if (logoImage) {
                            canvas.remove(logoImage);
                            logoImage = null;
                        }
                        displayErrorMessage(Lang.get("js.logo_image_error"));
                        $("#custom-e-card-logo").val("");
                        $("#exampleInputImage").css(
                            "background-image",
                            'url("/web/media/logos/infyom.png")'
                        );

return false;
                    }
                    if (logoImage) {
                        canvas.remove(logoImage);
                    }
                    const boundingBoxWidth = 150;
                    const boundingBoxHeight = 150;

// Calculate scale factors
                    const scaleX = boundingBoxWidth / imgObj.width;
                    const scaleY = boundingBoxHeight / imgObj.height;
                    const scale = Math.max(scaleX, scaleY);

// Calculate scaled dimensions
                    const scaledWidth = imgObj.width * scale;
                    const scaledHeight = imgObj.height * scale;

// Center the image
                    logoImage = new fabric.Image(imgObj, {
                        scaleX: scale,
                        scaleY: scale,
                        top: (canvas.height - scaledHeight) / 2,
                        left: (canvas.width - scaledWidth) / 2,
                        selectable: true,
                    });
                    canvas.add(logoImage);
                } else {
                    if (bg) {
                        canvas.setBackgroundImage(
                            imgObj.src,
                            canvas.renderAll.bind(canvas),
                            {
                                scaleX: canvas.width / imgObj.width,
                                scaleY: canvas.height / imgObj.height,
                            }
                        );
                    } else {
                        const fabricImg = new fabric.Image(imgObj, {
                            top: canvas.height / 2 - 50,
                            left: canvas.width / 2 - 50,
                            selectable: true,
                            scaleX: 0.5,
                            scaleY: 0.5,
                        });
                        canvas.add(fabricImg);
                    }
                }
                canvas.renderAll();
            };
        };
        reader.readAsDataURL(file);
    }

listenChange("#custom-e-card-logo", function () {
        loadImageToCanvas(this, backcanvas, false);
    });

listenChange("#e-card-front-image", function () {
        loadImageToCanvas(this, frontcanvas, true);
    });

listenChange("#e-card-back-image", function () {
        loadImageToCanvas(this, backcanvas, true);
    });

listenChange("#custom-e-vcard-id", function (e) {
        e.preventDefault();
        let vcardId = $("#custom-e-vcard-id").val();

if (vcardId !== "") {
            $.ajax({
                url: route("get-vcard-data"),
                type: "GET",
                data: { vcardId: vcardId },
                success: function (result) {
                    if (result.success) {
                        $("#custom-card-first-name").val(
                            result.data.first_name
                        );
                        $("#custom-card-last-name").val(result.data.last_name);
                        $("#custom-card-email").val(result.data.email);
                        $("#custom-card-occupation").val(
                            result.data.occupation
                        );
                        $("#custom-card-location").val(result.data.location);
                        $("#prefix_code").val(result.data.region_code);
                        $("#phoneNumber").val(result.data.phone);
                        $("#custom-card-website").val(result.data.website);
                        updateCard(result.data);
                    }
                },
                error: function (result) {
                    displayErrorMessage(result.responseJSON.message);
                },
            });
        }
    });

$(
        "#custom-card-first-name, #custom-card-last-name, #custom-card-email, #custom-card-occupation, #custom-card-location, .phone, #custom-card-website, #vcard_size"
    ).on("input", function () {
        updateCard($(this));
    });

function updateCard(element) {
        let firstName = $("#custom-card-first-name").val();
        let lastName = $("#custom-card-last-name").val();
        let email = $("#custom-card-email").val();
        let occupation = $("#custom-card-occupation").val();
        let location = $("#custom-card-location").val();
        let phone = $("#phoneNumber").val();
        let website = $("#custom-card-website").val();
        let vcardSize = $("#vcard_size").val();

if ($(element).attr("id") === "phoneNumber" || phone.length > 0) {
            let obj = {
                id: "phone_icon",
                text: '<svg viewBox="0 0 20 20"><path d="M164.9 24.6c-7.7-18.6-28-28.5-47.4-23.2l-88 24C12.1 30.2 0 46 0 64C0 311.4 200.6 512 448 512c18 0 33.8-12.1 38.6-29.5l24-88c5.3-19.4-4.6-39.7-23.2-47.4l-96-40c-16.3-6.8-35.2-2.1-46.3 11.6L304.7 368C234.3 334.7 177.3 277.7 144 207.3L193.3 167c13.7-11.2 18.4-30 11.6-46.3l-40-96z"/></svg>',
                top: parseInt(vcardSize) === 1 ? 200 : 340,
                left: parseInt(vcardSize) === 1 ? 50 : 50,
            };
            if (isObjectWithIdExists(frontcanvas, obj.id) == null) {
                addSvgIcon(
                    frontcanvas,
                    obj.text,
                    obj.left,
                    obj.top,
                    0.04,
                    obj.id
                );
            }
        }
        if ($(element).attr("id") === "custom-card-email" || email.length > 0) {
            let obj = {
                id: "email_icon",
                text: '<svg viewBox="0 0 512 512"><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"/></svg>',
                top: parseInt(vcardSize) === 1 ? 240 : 300,
                left: parseInt(vcardSize) === 1 ? 50 : 50,
            };
            if (isObjectWithIdExists(frontcanvas, obj.id) == null) {
                addSvgIcon(
                    frontcanvas,
                    obj.text,
                    obj.left,
                    obj.top,
                    0.04,
                    obj.id
                );
            }
        }
        if (
            $(element).attr("id") === "custom-card-location" ||
            location.length > 0
        ) {
            let obj = {
                id: "location_icon",
                text: '<svg viewBox="0 0 384 512"><path d="M215.7 499.2C267 435 384 279.4 384 192C384 86 298 0 192 0S0 86 0 192c0 87.4 117 243 168.3 307.2c12.3 15.3 35.1 15.3 47.4 0zM192 128a64 64 0 1 1 0 128 64 64 0 1 1 0-128z"/></svg>',
                top: parseInt(vcardSize) === 1 ? 200 : 380,
                left: parseInt(vcardSize) === 1 ? 280 : 50,
            };
            if (isObjectWithIdExists(frontcanvas, obj.id) == null) {
                addSvgIcon(
                    frontcanvas,
                    obj.text,
                    obj.left,
                    obj.top,
                    0.04,
                    obj.id
                );
            }
        }
        if (
            $(element).attr("id") === "custom-card-website" ||
            website.length > 0
        ) {
            let obj = {
                id: "website_icon",
                text: '<svg viewBox="0 0 512 512"><path d="M352 256c0 22.2-1.2 43.6-3.3 64H163.3c-2.2-20.4-3.3-41.8-3.3-64s1.2-43.6 3.3-64H348.7c2.2 20.4 3.3 41.8 3.3 64zm28.8-64H503.9c5.3 20.5 8.1 41.9 8.1 64s-2.8 43.5-8.1 64H380.8c2.1-20.6 3.2-42 3.2-64s-1.1-43.4-3.2-64zm112.6-32H376.7c-10-63.9-29.8-117.4-55.3-151.6c78.3 20.7 142 77.5 171.9 151.6zm-149.1 0H167.7c6.1-36.4 15.5-68.6 27-94.7c10.5-23.6 22.2-40.7 33.5-51.5C239.4 3.2 248.7 0 256 0s16.6 3.2 27.8 13.8c11.3 10.8 23 27.9 33.5 51.5c11.6 26 20.9 58.2 27 94.7zm-209 0H18.6C48.6 85.9 112.2 29.1 190.6 8.4C165.1 42.6 145.3 96.1 135.3 160zM8.1 192H131.2c-2.1 20.6-3.2 42-3.2 64s1.1 43.4 3.2 64H8.1C2.8 299.5 0 278.1 0 256s2.8-43.5 8.1-64zM194.7 446.6c-11.6-26-20.9-58.2-27-94.6H344.3c-6.1 36.4-15.5 68.6-27 94.6c-10.5 23.6-22.2 40.7-33.5 51.5C272.6 508.8 263.3 512 256 512s-16.6-3.2-27.8-13.8c-11.3-10.8-23-27.9-33.5-51.5zM135.3 352c10 63.9 29.8 117.4 55.3 151.6C112.2 482.9 48.6 426.1 18.6 352H135.3zm358.1 0c-30 74.1-93.6 130.9-171.9 151.6c25.5-34.2 45.2-87.7 55.3-151.6H493.4z"/></svg>',
                top: parseInt(vcardSize) === 1 ? 240 : 420,
                left: parseInt(vcardSize) === 1 ? 280 : 50,
            };
            if (isObjectWithIdExists(frontcanvas, obj.id) == null) {
                addSvgIcon(
                    frontcanvas,
                    obj.text,
                    obj.left,
                    obj.top,
                    0.04,
                    obj.id
                );
            }
        }
        if (parseInt(vcardSize) === 1) {
            if (
                isObjectWithIdExists(frontcanvas, "qrcode") == null &&
                website != ""
            ) {
                $.ajax({
                    url:
                        route("qr-code") +
                        "?link=" +
                        encodeURIComponent(website),
                    method: "GET",
                    success: function (qrCodeSvg) {
                        addSvgIcon(
                            frontcanvas,
                            qrCodeSvg,
                            350,
                            50,
                            1,
                            "qrcode"
                        );
                    },
                    error: function (xhr, status, error) {
                        console.log(error);
                    },
                });
            }
        } else if (parseInt(vcardSize) === 0) {
            if (
                isObjectWithIdExists(frontcanvas, "qrcode") == null &&
                website != ""
            ) {
                $.ajax({
                    url:
                        route("qr-code") +
                        "?link=" +
                        encodeURIComponent(website),
                    method: "GET",
                    success: function (qrCodeSvg) {
                        addSvgIcon(
                            frontcanvas,
                            qrCodeSvg,
                            100,
                            25,
                            1,
                            "qrcode"
                        );
                    },
                    error: function (xhr, status, error) {
                        console.log(error);
                    },
                });
            }
        }

if (parseInt(vcardSize) === 1) {
            //Horizontal card
            var textObjects = [
                {
                    id: "name",
                    text: firstName + " " + lastName,
                    top: 55,
                    left: 45,
                    fontSize: 25,
                },
                {
                    id: "occupation",
                    text: occupation,
                    top: 100,
                    left: 50,
                    fontSize: 16,
                },
                { id: "email", text: email, top: 240, left: 90, fontSize: 14 },
                { id: "phone", text: phone, top: 200, left: 90, fontSize: 14 },
                {
                    id: "location",
                    text: location,
                    top: 200,
                    left: 310,
                    fontSize: 14,
                },
                {
                    id: "website",
                    text: website,
                    top: 240,
                    left: 310,
                    fontSize: 14,
                },
            ];
        } else if (parseInt(vcardSize) === 0) {
            //Vertical card
            var textObjects = [
                {
                    id: "name",
                    text: firstName + " " + lastName,
                    top: 150,
                    left: 50,
                    fontSize: 25,
                },
                {
                    id: "occupation",
                    text: occupation,
                    top: 240,
                    left: 80,
                    fontSize: 18,
                },
                { id: "email", text: email, top: 300, left: 90, fontSize: 14 },
                { id: "phone", text: phone, top: 340, left: 90, fontSize: 14 },
                {
                    id: "location",
                    text: location,
                    top: 380,
                    left: 90,
                    fontSize: 14,
                },
                {
                    id: "website",
                    text: website,
                    top: 420,
                    left: 90,
                    fontSize: 14,
                },
            ];
        }

textObjects.forEach(function (obj) {
            let existingObject = null;
            frontcanvas.getObjects().forEach(function (object) {
                if (object.id === obj.id) {
                    existingObject = object;
                }
            });
            if (existingObject == null) {
                // var textboxWidth = parseInt(vcardSize) === 0 ? 170 : obj.text.length * obj.fontSize;
                var textboxWidth = parseInt(vcardSize) === 0 ? 200 : 175;
                var textAlign = parseInt(vcardSize) === 0 ? "center" : "left";
                var text = new fabric.Textbox(obj.text, {
                    left: obj.left,
                    top: obj.top,
                    fontSize: obj.fontSize,
                    fontFamily: "Arial",
                    id: obj.id,
                    width: textboxWidth,
                    whiteSpace: "pre",
                    overflow: "wrap",
                    splitByGrapheme: true,
                });
                if (parseInt(vcardSize) === 0 && obj.id === "name") {
                    text.set("textAlign", textAlign);
                }
                frontcanvas.add(text);
            } else {
                existingObject.set({
                    text: obj.text,
                    width: parseInt(vcardSize) === 0 ? 200 : 175,
                    textAlign: existingObject.id === "name" ? "center" : "left",
                });
            }
            frontcanvas.renderAll();
        });
    }

listenSubmit("#custom-e-card-form", function (e) {
        e.preventDefault();

if ($("#custom-e-vcard-id").val().trim().length === 0) {
            displayErrorMessage(Lang.get("js.vcard_name_required"));
            return false;
        }
        if ($("#custom-e-vcard-id").val().trim().length === 0) {
            displayErrorMessage(Lang.get("js.vcard_name_required"));
            return false;
        }

if ($("#custom-card-first-name").val().trim().length === 0) {
            displayErrorMessage(Lang.get("js.first_name_required"));
            return false;
        }
        if ($("#custom-card-last-name").val().trim().length === 0) {
            displayErrorMessage(Lang.get("js.last_name_required"));
            return false;
        }
        let email = $("#custom-card-email").val().trim();
        if (email.length === 0) {
            displayErrorMessage(Lang.get("js.email_required"));
            return false;
        }
        let emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
        if (!emailPattern.test(email)) {
            displayErrorMessage(Lang.get("js.invalid_email"));
            return false;
        }
        if ($("#custom-card-occupation").val().trim().length === 0) {
            displayErrorMessage(Lang.get("js.occupation_field_required"));
            return false;
        }
        if ($("#custom-card-location").val().trim().length === 0) {
            displayErrorMessage(Lang.get("js.location_field_required"));
            return false;
        }

if ($("#phoneNumber").val().trim().length === 0) {
            displayErrorMessage(Lang.get("js.phone_number_required"));
            return false;
        }
        if ($("#custom-card-website").val().trim().length === 0) {
            displayErrorMessage(Lang.get("js.website_field_required"));
            return false;
        }
        let urlPattern = /^(https?:\/\/)?([\w-]+\.)+[\w-]+(\/[\w-]*)*$/i;
        if (
            $("#custom-card-website").val() &&
            !urlPattern.test($("#custom-card-website").val())
        ) {
            displayErrorMessage(Lang.get("js.provide_valid_wbsite_url"));
            return false;
        }
        if ($("#custom-e-card-logo").val().trim().length === 0) {
            displayErrorMessage(Lang.get("js.logo_field_required"));
            return false;
        }
        if ($("#e-card-front-image").val().trim().length === 0) {
            displayErrorMessage(Lang.get("js.front_image_field_required"));
            return false;
        }
        if ($("#e-card-back-image").val().trim().length === 0) {
            displayErrorMessage(Lang.get("js.back_image_field_required"));
            return false;
        }

if (!$("#custom-e-card-form").find("#error-msg").hasClass("d-none")) {
            return false;
        }
        var zip = new JSZip();

var frontDataURL = frontcanvas.toDataURL().split(";base64,")[1];
        var backDataURL = backcanvas.toDataURL().split(";base64,")[1];

zip.file("front_canvas.png", frontDataURL, { base64: true });
        zip.file("back_canvas.png", backDataURL, { base64: true });

zip.generateAsync({ type: "blob" })
            .then(function (content) {
                var downloadLink = document.createElement("a");
                downloadLink.href = URL.createObjectURL(content);
                downloadLink.download = "custom_e_card.zip";
                document.body.appendChild(downloadLink);
                downloadLink.click();
                document.body.removeChild(downloadLink);
                $("#custom-e-card-form")[0].reset();
                $("#custom-e-card-logo", "#e-card-front-image", "#e-card-back-image").val("");
                $("#custom-e-vcard-id").val("").trigger("change");
                $("#exampleInputImage, #forntImage, #backInputImage").css("background-image", 'url("/web/media/logos/infyom.png")');
                frontcanvas.clear();
                backcanvas.clear();

})
            .catch(function (err) {
                console.error("Error generating zip file: ", err);
            });
    });
});

CANCEL