vivespos-landing/modules/backend/widgets/table/assets/js/table.processor.checkbox.js

/*
 * Checkbox cell processor for the table control.
 */
+function ($) { "use strict";

    // NAMESPACE CHECK
    // ============================

    if ($.wn.table === undefined)
        throw new Error("The $.wn.table namespace is not defined. Make sure that the table.js script is loaded.");

    if ($.wn.table.processor === undefined)
        throw new Error("The $.wn.table.processor namespace is not defined. Make sure that the table.processor.base.js script is loaded.");

    // CLASS DEFINITION
    // ============================

    var Base = $.wn.table.processor.base,
        BaseProto = Base.prototype

    var CheckboxProcessor = function(tableObj, columnName, columnConfiguration) {
        //
        // Parent constructor
        //

        Base.call(this, tableObj, columnName, columnConfiguration)
    }

    CheckboxProcessor.prototype = Object.create(BaseProto)
    CheckboxProcessor.prototype.constructor = CheckboxProcessor

    CheckboxProcessor.prototype.dispose = function() {
        BaseProto.dispose.call(this)
    }

    /*
     * Determines if the processor's cell is focusable.
     */
    CheckboxProcessor.prototype.isCellFocusable = function() {
        return false
    }

    /*
     * Renders the cell in the normal (no edit) mode
     */
    CheckboxProcessor.prototype.renderCell = function(value, cellContentContainer) {
        var checkbox = document.createElement('div')
        checkbox.setAttribute('data-checkbox-element', 'true')
        checkbox.setAttribute('tabindex', '0')

        if (value && value != 0 && value != "false") {
            checkbox.setAttribute('class', 'checked')
        }

        cellContentContainer.appendChild(checkbox)

        if (this.columnConfiguration.readonly || this.columnConfiguration.readOnly) {
            cellContentContainer.classList.add('readonly');
        }
    }

    /*
     * This method is called when the cell managed by the processor
     * is focused (clicked or navigated with the keyboard).
     */
    CheckboxProcessor.prototype.onFocus = function(cellElement, isClick) {
        cellElement.querySelector('div[data-checkbox-element]').focus()
    }

    /*
     * Event handler for the keydown event. The table class calls this method
     * for all processors.
     */
    CheckboxProcessor.prototype.onKeyDown = function(ev) {
        if (ev.key === '(Space character)' || ev.key === 'Spacebar' || ev.key === ' ')
            this.onClick(ev)
    }

    /*
     * Event handler for the click event. The table class calls this method
     * for all processors.
     */
    CheckboxProcessor.prototype.onClick = function(ev) {
        if (this.columnConfiguration.readonly || this.columnConfiguration.readOnly) {
            return
        }

        var target = this.tableObj.getEventTarget(ev, 'DIV')

        if (target.getAttribute('data-checkbox-element')) {
            // The method is called for all processors, but we should
            // update only the checkbox in the clicked column.
            var container = this.getCheckboxContainerNode(target)
            if (container.getAttribute('data-column') !== this.columnName) {
                return
            }

            this.changeState(target)
            $(ev.target).trigger('change')
        }
    }

    CheckboxProcessor.prototype.changeState = function(divElement) {
        var cell = divElement.parentNode.parentNode

        if (divElement.getAttribute('class') == 'checked') {
            divElement.setAttribute('class', '')
            this.tableObj.setCellValue(cell, 0)
        }
        else {
            divElement.setAttribute('class', 'checked')
            this.tableObj.setCellValue(cell, 1)
        }
    }

    CheckboxProcessor.prototype.getCheckboxContainerNode = function(checkbox) {
        return checkbox.parentNode.parentNode
    }

    /*
     * This method is called when a cell value in the row changes.
     */
    CheckboxProcessor.prototype.onRowValueChanged = function(columnName, cellElement) {
        if (columnName != this.columnName) {
            return
        }

        var checkbox = cellElement.querySelector('div[data-checkbox-element]'),
            value = this.tableObj.getCellValue(cellElement)

        if (value && value != 0 && value != "false") {
            checkbox.setAttribute('class', 'checked')
        }
        else {
            checkbox.setAttribute('class', '')
        }
    }

    $.wn.table.processor.checkbox = CheckboxProcessor;
}(window.jQuery);