core.ts

function acceptCookies() {
    $.ajax({
        url: "/umbraco/surface/Cookies/Accept",
        dataType: "text",
        type: "GET",
        success: () => {
            $("#Cookies").fadeOut(500);
        }
    });
}

$(document).ready(() => {
    $(".dropdown-submenu a.dropdown-toggle").on("click", function (e) {
        $(this).next("ul").toggle();
        e.stopPropagation();
        e.preventDefault();
    });

    reloadScripts();
});

function redirect(url: string) {
    if (url !== "") {
        window.location.href = url;
    }
}

function redirectAfter(url: string, seconds: number) {
    setTimeout(() => {
        redirect(url);
    }, seconds * 1000);
}

function reloadCaptcha() {
    grecaptcha.render("Recaptcha", { sitekey: "6LeIujIUAAAAAE2XcCKIN06FMbI2zmIyQ_8miIAr", theme: $("#Recaptcha").data("theme") });
}

function reloadScripts() {
    $("[data-id=\"DatePicker\"]").datepicker();

    const colorPickers = $("[data-id=\"ColorPicker\"]");

    for (let i = 0; i < colorPickers.length; i++) {
        const current = $(colorPickers[i]);

        current.spectrum({
            showInitial: true,
            showButtons: false,
            flat: true,
            move: (color: any) => {
                current.val(color.toHexString());
            },
            color: `#${current.val()}`
        });

        current.val(current.spectrum("get"));
    }

    const editors = $("[data-id=\"HtmlEditor\"]");

    for (let i = 0; i < editors.length; i++) {
        const current = $(editors[i]);

        current.summernote({
            minHeight: 200,
            toolbar: [
                ["font", ["bold", "italic", "underline", "strikethrough", "suprescript", "subscript", "fontsize", "color", "clear"]],
                ["insert", ["picture", "link", "video", "table", "hr"]],
                ["paragraph", ["ol", "ul"]],
                ["misc", ["codeview", "undo", "redo"]]
            ],
            callbacks: {
                onBlur: () => {
                    current.val(current.summernote("code"));
                }
            }
        });

        current.summernote("code", current.val());
    }

    const fileUploaders = $("[data-id=\"FileUpload\"]");

    for (let i = 0; i < fileUploaders.length; i++) {
        const current = $(fileUploaders[i]);

        let holder = $(`[data-file="${current.prop("id")}"]`);

        holder.val("");

        document.getElementById(current.prop("id"))
            .addEventListener("change", getB64(holder, document.getElementById(current.prop("id")), () => {
                var target = current;

                current.after("Uploading...");

                while (!target.is("form")) {
                    target = target.parent();
                }

                target.submit();
            }));
    }

    $("#CreateCharacter").parent().parent().parent(".modal-dialog-center").css("max-width", "none");

    $("[data-id=\"HoverPopover\"]").popover({ trigger: "hover", html: true });

    const limiters = $("[data-id=\"CharacterLimit\"]");

    for (let i = 0; i < limiters.length; i++) {
        const current = $(limiters[i]);

        let target = $(`[data-id="${current.data("target")}"`);

        current.bind("input propertychange", () => {
            if (current.val().length >= current.data("max")) {
                current.val(current.val().substring(0, current.data("max")));
            }

            target.text(`${current.val().length}/${current.data("max")}`);
        });


        target.text(`${current.val().length}/${current.data("max")}`);
    }

    const changeValues = $("[data-id=\"ChangeValue\"]");

    for (let i = 0; i < changeValues.length; i++) {
        const current = $(changeValues[i]);

        current.off("click");

        current.on("click", () => {
            var target = $(`[data-id="${current.data("target")}"]`);

            target.val(current.data("value"));

            if (current.data("form")) {
                $(`[data-id="${current.data("form")}"]`).submit();
            }
        });
    }

    if ($("[data-id=\"CurrentPage\"]").length) {
        $("[data-id=\"CurrentPage\"]").val(1);
    }

    if ($("#Recaptcha").length > 0) {
        reloadCaptcha();
    }

    let removeEyecons = $("[data-id=\"RemoveEyecon\"]");

    for (let i = 0; i < removeEyecons.length; i++) {
        let button = $(removeEyecons[i]);

        button.off("click");

        let id = button.attr("data-data");

        let url = button.attr("data-url");

        if (id) {
            button.on("click", () => {
                var dialog = getConfirmationDialog(button.attr("data-confirmationUrl"), () => {
                    $.ajax({
                        url: url,
                        type: "POST",
                        dataType: "text",
                        data: { id: id },
                        success: (result: string) => {
                            if (result.toLowerCase() === "true") {
                                console.log(`[data-imageId="${id}"]`);
                                const target = $(`[data-imageId="${id}"]`);

                                target.remove();

                                button.remove();

                                target.parent().remove();
                            }
                            dialog.css("opacity", 0);

                            setTimeout(() => {
                                dialog.remove();
                            }, 500);
                        }
                    });
                }, () => {
                    dialog.css("opacity", 0);

                    setTimeout(() => {
                        dialog.remove();
                    }, 500);
                }, () => {
                    $("body").append(dialog);

                    dialog.show();

                    dialog.css("opacity", 100);
                });
            });
        }
    }

    let deleteCharacters = $(`[data-id="DeleteCharacter"]`);

    for (let i = 0; i < deleteCharacters.length; i++) {
        let button = $(deleteCharacters[i]);

        button.off("click");

        let id = button.attr("data-data");

        let url = button.attr("data-url");

        if (id) {
            button.on("click", () => {
                var dialog = getConfirmationDialog(button.attr("data-confirmationUrl"), () => {
                    $.ajax({
                        url: url,
                        type: "POST",
                        dataType: "text",
                        data: { id: id },
                        success: (result: string) => {
                            if (result.toLowerCase() === "true") {
                                let form = button;

                                while (!form.is("form")) {
                                    form = form.parent();
                                }

                                form.submit();
                            }
                            dialog.css("opacity", 0);

                            setTimeout(() => {
                                dialog.remove();
                            }, 500);
                        }
                    });
                }, () => {
                    dialog.css("opacity", 0);

                    setTimeout(() => {
                        dialog.remove();
                    }, 500);
                }, () => {
                    $("body").append(dialog);

                    dialog.show();

                    dialog.css("opacity", 100);
                });
            });
        }
    }
}

function getB64(node: JQuery, fileNode: any, callback?: () => void): () => void {
    return () => {
        if (fileNode.files && fileNode.files[0]) {

            const fr = new FileReader();

            fr.onload = e => {
                node.val(JSON.stringify({
                    data: (e.target as any).result,
                    name: fileNode.files[0].name
                }));

                if (callback !== undefined) {
                    setTimeout(callback, 50);
                }
            };

            fr.readAsDataURL(fileNode.files[0]);
        }
    };
}

function getConfirmationDialog(url: string, confirm: () => void, cancel: () => void, onFinish: () => void): JQuery {
    const modal = $("<div>").addClass("modal fade").addClass("modal-dialog-center");

    const dialog = $("<div>").addClass("modal-dialog");

    const content = $("<div>").addClass("modal-content");

    const body = $("<div>").addClass("modal-body");

    const footer = $("<div>").addClass("modal-footer");

    const confirmBtn = $("<button>").addClass("btn").addClass("btn-success");

    const cancelBtn = $("<button>").addClass("btn").addClass("btn-danger");

    confirmBtn.on("click", confirm);

    cancelBtn.on("click", cancel);

    modal.append(dialog);

    dialog.append(content);

    content.append(body);

    content.append(footer);

    footer.append(confirmBtn);
    footer.append(cancelBtn);

    $.ajax({
        url: url,
        dataType: "JSON",
        type: "GET",
        success: (data) => {
            confirmBtn.text(data.confirm);
            cancelBtn.text(data.cancel);
            body.text(data.message);

            onFinish();
        }
    });

    return modal;
}