enketo-core/src/widget/text-print/text-print.js

Extensible Enketo form engine

import Widget from '../../js/widget';
import events from '../../js/event';

/**
 * Clone text input fields value into new print-only element.
 * This is an unusual way to implement a feature, because it is not an actual widget,
 * but this is the easiest way to do it.
 */
class TextPrintWidget extends Widget {
    /**
     * @type {string}
     */
    static get selector() {
        // The [data-for] exclusion prevents "comment" widgets from being included.
        // It is not quite correct to do this but atm the "for" attribute in XForms is only used for comment widgets.
        return '.question:not(.or-appearance-autocomplete):not(.or-appearance-url) > input[type=text]:not(.ignore):not([data-for]), .question:not(.or-appearance-autocomplete):not(.or-appearance-url) > textarea:not(.ignore):not([data-for])';
    }

    _init() {
        this.question.addEventListener(
            events.Printify().type,
            this._addWidget.bind(this)
        );
        this.question.addEventListener(
            events.DePrintify().type,
            this._removeWidget.bind(this)
        );
    }

    _addWidget() {
        if (!this.widget) {
            const className = 'print-input-text';
            const printElement = document.createElement('div');
            printElement.classList.add(className, 'widget');

            this.element.after(printElement);
            this.element.classList.add('print-hide');

            // If previous element is a fake input in date widget, hide it as well
            const previousElement = this.element.previousElementSibling;
            if (
                previousElement !== null &&
                previousElement.classList.contains('date')
            ) {
                previousElement.classList.add('print-hide');
            }

            this.widget = this.element.parentElement.querySelector(
                `.${className}`
            );
            this.widget.innerHTML = this.element.value.replace(/\n/g, '<br>');
        }
    }

    _removeWidget() {
        if (this.widget) {
            this.element.classList.remove('print-hide');
            this.element.parentElement.removeChild(this.widget);
            this.widget = null;
        }
    }
}

export default TextPrintWidget;