Server : Apache/2.4.41 (Ubuntu) System : Linux absol.cf 5.4.0-198-generic #218-Ubuntu SMP Fri Sep 27 20:18:53 UTC 2024 x86_64 User : www-data ( 33) PHP Version : 7.4.33 Disable Function : pcntl_alarm,pcntl_fork,pcntl_waitpid,pcntl_wait,pcntl_wifexited,pcntl_wifstopped,pcntl_wifsignaled,pcntl_wifcontinued,pcntl_wexitstatus,pcntl_wtermsig,pcntl_wstopsig,pcntl_signal,pcntl_signal_get_handler,pcntl_signal_dispatch,pcntl_get_last_error,pcntl_strerror,pcntl_sigprocmask,pcntl_sigwaitinfo,pcntl_sigtimedwait,pcntl_exec,pcntl_getpriority,pcntl_setpriority,pcntl_async_signals,pcntl_unshare, Directory :  /var/www/html/libs/absol-form/js/components/

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

import {AssemblerInstance} from "../core/Assembler";
import CKEditor from "./CKEditor";
import {base64EncodeUnicode} from "absol/src/Converter/base64";
import {measureText} from "absol-acomp/js/utils";
import inheritComponentClass from "../core/inheritComponentClass";
import {$$} from '../core/FCore';


export function parseCKTemplate(data, replacements) {
    var replaceF = replacements;
    if (typeof replacements !== "function") {
        replaceF = function (variable) {
            return replacements[variable] || ('{{' + variable + '}}');
        }
    }
    return data.replace(/\{\{([a-zA-Z_$]([a-zA-Z_$0-9]*))(\.([a-zA-Z_$]([a-zA-Z_$0-9]*)))*\}\}/g, function (all) {
        var variable = all.substr(2, all.length - 2);
        return replaceF(variable) || ('{{' + variable + '}}');
    }.bind(this));
}



/***
 * @extends CKEditor
 * @constructor
 */
function CKTemplateEditor() {
    CKEditor.call(this);
}

inheritComponentClass(CKTemplateEditor, CKEditor);

CKTemplateEditor.prototype.menuIcon = 'span.mdi.mdi-file-word-box-outline';
CKTemplateEditor.prototype.tag = 'CKTemplateEditor';


CKTemplateEditor.prototype.makeConfig = function (config) {
    config.toolbar = [
        {
            name: 'feature',
            items: ['add_variable']
        },
        {
            name: 'clipboard',
            groups: ['clipboard', 'undo'],
            items: ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo']
        },
        {
            name: 'editing',
            groups: ['find', 'selection'],
            items: ['Find', 'Replace', '-', 'SelectAll']
        },
        '/',
        {
            name: 'basicstyles',
            groups: ['basicstyles', 'cleanup'],
            items: ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'CopyFormatting', 'RemoveFormat']
        },
        {
            name: 'paragraph',
            groups: ['list', 'indent', 'blocks', 'align', 'bidi'],
            items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl']
        },
        {name: 'links', items: ['Link', 'Unlink', 'Anchor']},
        {name: 'insert', items: ['Image', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak']},
        '/',
        {name: 'styles', items: ['Styles', 'Format', 'Font', 'FontSize']},
        {name: 'colors', items: ['TextColor', 'BGColor']},
        {name: 'tools', items: ['Maximize', 'ShowBlocks']},
        {name: 'others', items: ['-']},
        {name: 'about', items: ['About']}
    ];
    config.styles = {'font-family': 'Arial', 'font-size': '14px'}
    return config;
};

CKTemplateEditor.prototype.setupEditor = function () {
    CKEditor.prototype.setupEditor.call(this);
    this.editor.on('change', function () {
        this.pinFire('previewHTML');
    }.bind(this));
    var editor = this.editor;
    editor.ui.addButton('add_variable',
        {
            label: 'Add Variable',
            command: 'add_variable',
            icon: 'as-variable-box-ico'
        });
    var cmd = editor.addCommand('add_variable', {
        exec: function () {
            this.pinFire('requestVariable');
        }.bind(this)
    });
};

CKTemplateEditor.prototype.attributeHandlers.variable2Text = {
    set: function (value) {
        if (typeof value !== "object") value = null;
        this.variable2Text = value || {};
    },
    get: function () {
        return this.variable2Text;
    },
    descriptor: {
        type: 'object'
    }
};

CKTemplateEditor.prototype.pinHandlers.requestVariable = {
    get: function () {
        return true;
    },
    descriptor: {
        type: 'bool'
    }
};

CKTemplateEditor.prototype.pinHandlers.insertVariable = {
    receives: function (value) {
        if (!this.editor) return;
        if (typeof value === "object" && value.text && value.value) {
            this.editor.insertHtml(this._makeVariableHtml(value.value, value.text));
        }
    },
    descriptor: {
        type: '{text:string, value:string}'
    }
};

CKTemplateEditor.prototype.pinHandlers.previewHTML = {
    get: function () {
        return this.editor && this.editor.getData();
    },
    descriptor: {
        type: 'text'
    }
};

CKTemplateEditor.prototype.pinHandlers.variable2Text = {
    receives: function (value) {
        this.attributes.variable2Text = value;
    },
    descriptor: {
        type: 'object'
    }
};

CKTemplateEditor.prototype.dataImplicit = function (data) {
    if (typeof data !== "string") data = '';
    var var2text = this.variable2Text || {};
    return parseCKTemplate(data, function (variable) {
        return this._makeVariableHtml(variable, var2text[variable] || variable);
    });
};

CKTemplateEditor.prototype.dataExplicit = function (data) {
    var div = document.createElement('div');
    div.innerHTML = data;
    $$('img', div).forEach(function (elt) {
        var alt = elt.attr('alt');
        var isVar = alt && !!alt.match(/^\{\{([a-zA-Z_$]([a-zA-Z_$0-9]*))(\.([a-zA-Z_$]([a-zA-Z_$0-9]*)))*\}\}$/);
        var textNode;
        if (isVar) {
            textNode = document.createTextNode(alt);
            elt.parentElement.replaceChild(textNode, elt);
        }
    });
    return div.innerHTML;
};


CKTemplateEditor.prototype._makeVariableHtml = function (variable, text) {
    text = '{{' + text + '}}';
    var width = measureText(text, '16px arial').width;
    var img = '<?xml version="1.0" encoding="UTF-8"?>\n' +
        '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"  viewBox="0 0 ' + (width + 2) + ' 24">\n' +
        '    <text style="font-family:Arial;font-size:16px;fill:blue" x="1" y="20">' + text + '</text>\n' +
        '</svg>';
    var n64Ulr = 'data:image/svg+xml;base64,' + base64EncodeUnicode(img);
    return '<img style="position: relative;bottom: -0.2em;height:1.5em; font-size: inherit;display: inline;" alt="{{' + variable + '}}" src="' + n64Ulr + '"></img>';
};

AssemblerInstance.addClass(CKTemplateEditor);


export default CKTemplateEditor;