@teipublisher/pb-components/src/pb-odd-parameter-editor.js

Collection of webcomponents underlying TEI Publisher

// @ts-nocheck
import { LitElement, html, css } from 'lit-element';

import '@cwmr/paper-autocomplete/paper-autocomplete.js';
import '@polymer/paper-icon-button/paper-icon-button.js';
import '@polymer/paper-dropdown-menu/paper-dropdown-menu.js';
import '@polymer/paper-listbox/paper-listbox.js';
import '@polymer/paper-item/paper-item.js';
import '@cwmr/paper-autocomplete/paper-autocomplete';
import "@jinntec/jinn-codemirror/dist/src/jinn-codemirror";

import { cmpVersion } from './utils.js';
import { get as i18n, translate } from "./pb-i18n.js";

/**
 * represents an odd parameter element for editing
 *
 * @customElement
 *
 * @polymer
 */
export class PbOddParameterEditor extends LitElement {

    static get styles() {
        return css`
            :host {
                display: block;
            }
            .wrapper{
                display:grid;
                grid-template-columns:150px auto 50px 50px;
                grid-column-gap:20px;
                grid-row-gap:20px;
                margin-bottom:10px;
            }
            paper-dropdown-menu{
                align-self:start;
            }
            paper-icon-button, paper-checkbox {
                align-self: center;
                margin-top: 16px;
            }

            .editor label {
                margin-bottom:5px;
                font-size: 12px;
                font-weight: 400;
                color: var(--paper-grey-500);
            }
        `;
    }

    render() {
        return html`
        <div class="wrapper">
            
            <paper-autocomplete id="combo" text="${this.name}" placeholder="${translate('odd.editor.model.param-name-placeholder')}" label="Name" 
                .source="${this._currentParameters}"></paper-autocomplete>

            <div class="editor">
                <label>Parameter</label>
                <jinn-codemirror id="editor"
                        mode="xquery"
                        code="${this.value}"
                        linter="${this.endpoint}/${cmpVersion(this.apiVersion, '1.0.0') ? 'modules/editor.xql' : 'api/lint'}"></jinn-codemirror>
            </div>
            <paper-checkbox id="set" ?checked="${this.setParam}" @change="${this._handleCodeChange}">${translate('odd.editor.model.set-param')}</paper-checkbox>
            <paper-icon-button @click="${this._delete}" icon="delete" title="delete this parameter"></paper-icon-button>
        </div>

        
        `;
    }


    static get properties() {
        return {
            /**
             * the parameter name
             */
            name: {
                type: String,
                reflect: true
            },
            /**
             * the parameter value
             */
            value: {
                type: String,
                reflect: true
            },
            behaviour: {
                type: String
            },
            parameters: {
                type: Object
            },
            setParam: {
                type: Boolean,
                attribute: 'set'
            },
            _currentParameters: {
                type: Array
            },
            endpoint: {
                type: String
            },
            apiVersion: {
                type: String
            }

        };
    }

    constructor() {
        super();
        this.name = '';
        this.value = '';
        this.setParam = false;
        this.behaviour = '';
        this.currentParameters = [];
        this.parameters = {
            '': [],
            alternate: ["default", "alternate", "persistent"],
            anchor: ["content", "id"],
            block: ["content"],
            body: ["content"],
            break: ["content", "type", "label"],
            cell: ["content"],
            cit: ["content", "source"],
            "document": ["content"],
            figure: ["content", "title"],
            graphic: ["content", "url", "width", "height", "scale", "title"],
            heading: ["content", "level"],
            inline: ["content"],
            link: ["content", "uri", "target"],
            list: ["content", "type"],
            listItem: ["content", "n"],
            metadata: ["content"],
            note: ["content", "place", "label"],
            omit: [],
            paragraph: ["content"],
            row: ["content"],
            section: ["content"],
            table: ["content"],
            text: ["content"],
            title: ["content"],
            webcomponent: ["content", "name"]
        };

        this.selected = '';
        this.endpoint = '';

    }

    connectedCallback() {
        super.connectedCallback();
        this.value = this.value.trim();
        this.dispatchEvent(new CustomEvent('parameter-connected', { composed: true, bubbles: true, detail: { target: this } }));
    }

    attributeChangedCallback(name, old, value) {
        super.attributeChangedCallback(name, old, value);
        if (name === 'behaviour') {
            this._currentParameters = this.parameters[value];
        }
    }

    firstUpdated(changedProperties) {
        // console.log('parameters firstupdated ', changedProperties);
        this.selected = this.parameters[this.behaviour] || [];
        this.requestUpdate();

        this.shadowRoot.getElementById('combo').addEventListener('focused-changed', this._handleCodeChange.bind(this));
        this.shadowRoot.getElementById('editor').addEventListener('update', this._handleCodeChange.bind(this));
    }

    refreshEditor() {
        // console.log('parameters refresh');
        const editor = this.shadowRoot.getElementById('editor');
        if (!editor) { return; }
        // editor.refresh();
    }


    _delete(ev) {
        console.log('parameter delete ', ev);
        ev.preventDefault();
        this.dispatchEvent(new CustomEvent('parameter-remove', {}));
    }

    /*
        _handleChange(e) {
            console.log('_handleChange ', e);
            this.value = this.shadowRoot.getElementById('editor').getSource();
            this.dispatchEvent(new CustomEvent('parameter-changed', {composed:true, bubbles:true, detail: {name: this.name, value: this.value}}));
    
        }
    */

    _handleCodeChange(e) {
        console.log('_handleCodeChange ', e);
        this.value = this.shadowRoot.getElementById('editor').content || '';
        console.log('value %s', this.value);
        this.name = this.shadowRoot.getElementById('combo').text;
        this.setParam = this.shadowRoot.getElementById('set').checked;
        this.dispatchEvent(new CustomEvent('parameter-changed', { composed: true, bubbles: true, detail: { name: this.name, value: this.value, set: this.setParam } }));
    }


}
customElements.define('pb-odd-parameter-editor', PbOddParameterEditor);