samagra-x-enketo-core/src/widget/thousands-sep/thousands-sep.js

Extensible Enketo form engine

import Widget from '../../js/widget';
import { isNumber } from '../../js/utils';

/**
 * Thousands separator widget.
 * Deviates from ODK XForms spec by not supporting text fields.
 */
class ThousandsSeparatorWidget extends Widget {

    static get selector() {
        return '.or-appearance-thousands-sep input[type="number"]';
    }

    /**
     * Initialize
     */
    _init() {
        const fragment = document.createRange().createContextualFragment( '<div class="widget "></div>' );

        this.element.after( fragment );
        this.widget = this.element.parentElement.querySelector( '.widget' );

        // Set the current loaded value into the widget
        this.update();

        this.element.addEventListener( 'change', this.update.bind( this ) );
    }

    /**
     * Update the value of the widget.
     */
    update() {
        this.value = this.originalInputValue;
    }

    /**
     * Obtain the current value from the widget.
     *
     * @type {string}
     */
    get value() {
        return this.widget.textContent;
    }

    /**
     * Set a value in the widget.
     *
     * @param {number} [value] - The number value to update with.
     */
    set value( value ) {
        let displayValue = '';

        if ( isNumber( value ) ) {
            displayValue = Number( value ).toLocaleString( undefined, { maximumFractionDigits: 20 } );
        }

        this.widget.textContent = displayValue;
    }

}

export default ThousandsSeparatorWidget;