MAINHACK

Viewing / Editing File: create_certificate_template.js

(function () {
    "use strict";

function syncContentToForm() {
        $('.js-template-contents').val($('#certificateTemplateContainer').html());
    }

function applyDraggable() {
        $(".draggable-element").draggable({
            containment: ".certificate-template-container",
            stop: function (event, ui) {
                syncContentToForm()
            }
        });
    }

$(document).ready(function () {
        applyDraggable()
    })

function removeDragElement(name) {
        $('.certificate-template-container').find('.draggable-element[data-name="' + name + '"]').remove();
    }

function makeDragElement($accordion, name) {
        //removeDragElement(name);

let content = $accordion.find('.js-element-content').val();
        const fontSize = $accordion.find('.js-element-font_size').val();
        const fontColor = $accordion.find('.js-element-font_color').val();
        const fontBold = $accordion.find('.js-element-font_weight_bold').is(":checked");
        const textCenter = $accordion.find('.js-element-text_center').is(":checked");
        const textRight = $accordion.find('.js-element-text_right').is(":checked");

const textAlign = textCenter ? 'center' : (textRight ? 'right' : 'inherit');
        const fontWeight = fontBold ? 'bold' : 'inherit';

let styles = "";

const top = $element.css("top") ?? 0;
        const left = $element.css("left") ?? 0;

if (name === "platform_signature" || name === "stamp") {
            const $image = $accordion.find('.js-element-image');
            const prefix = $image.attr("data-prefix");
            const src = $image.val();

content = `<img src="${prefix + src}" style="max-height: 100%; max-width: 100%;"/>`;

styles += `display: flex; align-items: center; justify-content: center;`;
        }

$element.html(content);

styles += `top: ${top};`;
        styles += `left: ${left};`;
        styles += `font-size: ${fontSize};`;
        styles += `color: ${fontColor};`;
        styles += `text-align: ${textAlign};`;
        styles += `font-weight: ${fontWeight};`;

let extraStyles = $accordion.find('.js-element-styles').val();
        styles = styles + (extraStyles ? extraStyles : '');

$element.css('cssText', styles);

if (name === "qr_code" || name === "platform_signature" || name === "stamp") {
            const size = $accordion.find('.js-element-image_size option:checked').val();

if (size) {
                $element.css('width', size);
                $element.css('height', size);
            }
        }

applyDraggable()
    }

function afterChange($accordion, checked) {
        const elementName = $accordion.attr('data-element');
        const $statusBadge = $accordion.find('.js-status-element');

if (checked) {
            makeDragElement($accordion, elementName);

$statusBadge.removeClass('d-none')
        } else {
            removeDragElement(elementName);
            $statusBadge.addClass('d-none');
        }

syncContentToForm();
    }

$('body').on('change', '.js-element-enable', function () {
        const checked = this.checked;
        const $accordion = $(this).closest('.accordion-row');

afterChange($accordion, checked)
    })

$('body').on('keyup change', '.js-changeable-element-input', function () {
        const $accordion = $(this).closest('.accordion-row');
        const checked = $accordion.find('.js-element-enable').is(":checked");

afterChange($accordion, checked)
    })

$('body').on('change', '.js-certificate-image', function (e) {
        e.preventDefault();
        let prefix = $(this).attr('data-prefix');
        prefix = prefix.replaceAll('\\',"/");
        const path = prefix + $(this).val();

$('.certificate-template-container').css('background-image', "url('" + path + "')");

syncContentToForm();
    });

})(jQuery)

/*
(function ($) {
"use strict";

$('body').on('click', '#preview', function (e) {
    e.preventDefault();

const form = $('#templateForm');
    const action = $(this).attr('data-action');

form.attr('target', '_blank');
    form.attr('action', action);
    form.attr('method', 'post');
    form.trigger('submit');
});

$('body').on('click', '#submiter', function (e) {
    e.preventDefault();

const form = $('#templateForm');
    const action = $(this).attr('data-action');

form.removeAttr('target');
    form.attr('action', action);
    form.attr('method', 'post');
    form.trigger('submit');
});

$('body').on('change', '.js-certificate-image', function (e) {
    e.preventDefault();

$('.note-editable').css('background-image', 'url("' + $(this).val() + '")');
});
})(jQuery);
*/

Cancel / Back

[ MAINHACK ]

Viewing / Editing File: create_certificate_template.js

Server Info

System Features

User Info