@qtoggle/qui 0.0.0

package/js/tables/table-cell.js

@@ -0,0 +1,198 @@
+
+import $ from '$qui/lib/jquery.module.js'
+
+import {mix}             from '$qui/base/mixwith.js'
+import * as Tables       from '$qui/tables/tables.js'
+import VisibilityManager from '$qui/utils/visibility-manager.js'
+import ViewMixin         from '$qui/views/view.js'
+
+
+/**
+ * A table cell.
+ * @alias qui.tables.TableCell
+ * @mixes qui.views.ViewMixin
+ */
+class TableCell extends mix().with(ViewMixin) {
+
+    /**
+     * @constructs
+     * @param {*} [initialValue] an optional initial value for the cell
+     * @param {?String} [horizontalAlign] horizontal alignment; uses table settings by default; one of:
+     *  * {@link qui.tables.TABLE_CELL_ALIGN_LEFT}
+     *  * {@link qui.tables.TABLE_CELL_ALIGN_CENTER}
+     *  * {@link qui.tables.TABLE_CELL_ALIGN_RIGHT}
+     * @param {?String} [verticalAlign] vertical alignment; uses table settings by default; one of:
+     *  * {@link qui.tables.TABLE_CELL_ALIGN_TOP}
+     *  * {@link qui.tables.TABLE_CELL_ALIGN_CENTER}
+     *  * {@link qui.tables.TABLE_CELL_ALIGN_BOTTOM}
+     * @param {...*} args parent class parameters
+     */
+    constructor({
+        initialValue = null,
+        horizontalAlign = null,
+        verticalAlign = null,
+        ...args
+    } = {}) {
+
+        super(args)
+
+        this._value = initialValue
+        this._horizontalAlign = horizontalAlign
+        this._verticalAlign = verticalAlign
+
+        this._visibilityManager = null
+        this._row = null
+    }
+
+    makeHTML() {
+        let html = $('<div></div>', {class: 'qui-table-cell'})
+
+        /* Decide on horizontal alignment */
+        let horizontalAlign = this._horizontalAlign
+        if (!horizontalAlign) {
+            let index = this._row.getCellIndex(this)
+            if (index >= 0) {
+                let defaultHorizontalAlign = this._row.getTable().getHorizontalAlign()
+                if (defaultHorizontalAlign) {
+                    horizontalAlign = defaultHorizontalAlign[index]
+                }
+            }
+        }
+        if (!horizontalAlign) {
+            horizontalAlign = Tables.TABLE_CELL_ALIGN_CENTER /* The very default */
+        }
+
+        /* Decide on vertical alignment */
+        let verticalAlign = this._verticalAlign
+        if (!verticalAlign) {
+            let index = this._row.getCellIndex(this)
+            if (index >= 0) {
+                let defaultVerticalAlign = this._row.getTable().getVerticalAlign()
+                if (defaultVerticalAlign) {
+                    verticalAlign = defaultVerticalAlign[index]
+                }
+            }
+        }
+        if (!verticalAlign) {
+            verticalAlign = Tables.TABLE_CELL_ALIGN_CENTER /* The very default */
+        }
+
+        html.addClass(`horizontal-align-${horizontalAlign}`)
+        html.addClass(`vertical-align-${verticalAlign}`)
+        html.html(this.makeContent())
+
+        this._visibilityManager = new VisibilityManager({element: html})
+
+        return html
+    }
+
+    init() {
+        if (this._value != null) {
+            this.showValue(this._value)
+        }
+    }
+
+    /**
+     * Implement this method to create the actual table cell content.
+     * @abstract
+     * @returns {jQuery}
+     */
+    makeContent() {
+    }
+
+
+    /* Visibility */
+
+    /**
+     * Show the cell.
+     */
+    show() {
+        this._visibilityManager.showElement()
+    }
+
+    /**
+     * Hide the cell.
+     */
+    hide() {
+        this._visibilityManager.hideElement()
+    }
+
+
+    /* Value */
+
+    /**
+     * Return the current value.
+     * @returns {*}
+     */
+    getValue() {
+        return this._value
+    }
+
+    /**
+     * Set the current value.
+     * @param {*} value
+     */
+    setValue(value) {
+        this._value = value
+        this.showValue(value)
+    }
+
+    /**
+     * Implement this method to display the value in the cell content.
+     * @abstract
+     * @param {*} value
+     */
+    showValue(value) {
+    }
+
+
+    /* Selection */
+
+    /**
+     * Tell if cell is selected or not.
+     */
+    isSelected() {
+        return this.getHTML().hasClass('selected')
+    }
+
+    /**
+     * Select or deselect cell.
+     * @param {Boolean} selected
+     */
+    setSelected(selected) {
+        this.getHTML().toggleClass('selected', selected)
+    }
+
+    /**
+     * Set select mode. This is internally called by owning {@link qui.tables.TableRow}.
+     * @param {String} selectMode one of:
+     *  * {@link qui.lists.LIST_SELECT_MODE_DISABLED}
+     *  * {@link qui.lists.LIST_SELECT_MODE_SINGLE} (default)
+     *  * {@link qui.lists.LIST_SELECT_MODE_MULTIPLE}
+     */
+    setSelectMode(selectMode) {
+    }
+
+
+    /* Table row */
+
+    /**
+     * Return the owning row.
+     * @returns {qui.tables.TableRow}
+     */
+    getRow() {
+        return this._row
+    }
+
+    /**
+     * Set the owning row.
+     * @param {qui.tables.TableRow} row
+     */
+    setRow(row) {
+        this._row = row
+    }
+
+}
+
+
+export default TableCell

package/js/tables/table-row.js

@@ -0,0 +1,126 @@
+
+import $ from '$qui/lib/jquery.module.js'
+
+import ListItem   from '$qui/lists/list-item.js'
+import * as Lists from '$qui/lists/lists.js'
+
+
+/**
+ * A table row.
+ * @alias qui.tables.TableRow
+ * @extends qui.lists.ListItem
+ */
+class TableRow extends ListItem {
+
+    /**
+     * @constructs
+     * @param {qui.tables.TableCell[]} cells table cells
+     * @param {Array} [initialValues] optional initial values
+     * @param {...*} args parent class parameters
+     */
+    constructor({cells, initialValues = null, ...args}) {
+        super(args)
+
+        this._cells = cells
+        this._initialValues = initialValues
+
+        this._cells.forEach(c => this.prepareCell(c))
+    }
+
+    init() {
+
+        if (this._initialValues != null) {
+            this.setValues(this._initialValues)
+            this._initialValues = null /* Don't waste memory */
+        }
+    }
+
+    initHTML(html) {
+        html.addClass('qui-table-row')
+    }
+
+    makeContent() {
+        return this._cells.reduce((a, c) => a.add(c.getHTML()), $())
+    }
+
+
+    /* Cells */
+
+    /**
+     * Return row cells.
+     * @returns {qui.tables.TableCell[]}
+     */
+    getCells() {
+        return this._cells.slice()
+    }
+
+    /**
+     * Prepare cell to be part of this row.
+     * @param {qui.tables.TableCell} cell
+     */
+    prepareCell(cell) {
+        cell.setRow(this)
+    }
+
+    /**
+     * Return the index of the given cell. If the field does not belong to this row, `-1` is returned.
+     * @param {qui.tables.TableCell} cell the cell
+     * @returns {Number}
+     */
+    getCellIndex(cell) {
+        return this._cells.indexOf(cell)
+    }
+
+
+    /* Values */
+
+    /**
+     * Return the current values of the cells.
+     * @returns {Array}
+     */
+    getValues() {
+        return this._cells.map(c => c.getValue())
+    }
+
+    /**
+     * Set row values. If more values than needed are supplied, extra values are ignored. If less values are supplied,
+     * extra cells are left unchanged.
+     * @param {Array} values
+     * @param {Number} [index] optional start index (defaults to `0`)
+     */
+    setValues(values, index = 0) {
+        let cells = this._cells.slice(index, index + values.length)
+        cells.forEach((c, i) => c.setValue(values[i]))
+    }
+
+
+    /* Selection */
+
+    setSelectMode(selectMode) {
+        /* Forward select mode to cells */
+        this._cells.forEach(c => c.setSelectMode(selectMode))
+
+        this.getHTML().toggleClass('qui-base-button', selectMode !== Lists.LIST_SELECT_MODE_DISABLED)
+    }
+
+    setSelected(selected) {
+        super.setSelected(selected)
+
+        this._cells.forEach(c => c.setSelected(selected))
+    }
+
+
+    /* Table */
+
+    /**
+     * Return the owning table.
+     * @returns {qui.tables.Table}
+     */
+    getTable() {
+        return /** @type qui.tables.Table */ this.getList()
+    }
+
+}
+
+
+export default TableRow