neo.mjs 4.1.0 → 4.2.0

package/src/selection/grid/CellColumnRowModel.mjs

@@ -0,0 +1,122 @@
+import CellRowModel from './CellRowModel.mjs';
+import ColumnModel  from './ColumnModel.mjs';
+import VDomUtil     from '../../util/VDom.mjs';
+
+/**
+ * @class Neo.selection.grid.CellColumnRowModel
+ * @extends Neo.selection.grid.CellRowModel
+ */
+class CellColumnRowModel extends CellRowModel {
+    static getConfig() {return {
+        /**
+         * @member {String} className='Neo.selection.grid.CellColumnRowModel'
+         * @protected
+         */
+        className: 'Neo.selection.grid.CellColumnRowModel',
+        /**
+         * @member {String} ntype='selection-grid-cellcolumnrowmodel'
+         * @protected
+         */
+        ntype: 'selection-grid-cellcolumnrowmodel',
+        /**
+         * @member {String} cls='neo-selection-cellcolumnrowmodel'
+         * @protected
+         */
+        cls: 'neo-selection-cellcolumnrowmodel',
+        /**
+         * @member {String} selectedColumnCellCls='selected-column-cell'
+         * @protected
+         */
+        selectedColumnCellCls: 'selected-column-cell',
+        /**
+         * @member {Array|null} selectedColumnCellIds=null
+         * @protected
+         */
+        selectedColumnCellIds: null
+    }}
+
+    /**
+     * @param {Object} config
+     */
+    construct(config) {
+        super.construct(config);
+
+        this.selectedColumnCellIds = [];
+    }
+
+    /**
+     * @param {Boolean} [silent] true to prevent a vdom update
+     */
+    deselectAllCells(silent) {
+        let me      = this,
+            cellIds = [...me.selectedColumnCellIds],
+            view    = me.view,
+            vdom    = view.vdom;
+
+        cellIds.forEach(cellId => {
+            me.deselect(cellId, true, me.selectedColumnCellIds, me.selectedColumnCellCls);
+        });
+
+        if (!silent) {
+            view.vdom = vdom;
+        }
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onCellClick(data) {
+        let me   = this,
+            id   = ColumnModel.getCellId(data.path),
+            columnNodeIds, index, tbodyNode;
+
+        if (id) {
+            index         = ColumnModel.getColumnIndex(id, me.view.items[0].items);
+            tbodyNode     = VDomUtil.findVdomChild(me.view.vdom, {tag: 'tbody'}).vdom;
+            columnNodeIds = VDomUtil.getColumnNodesIds(tbodyNode, index);
+
+            me.deselectAllCells(true);
+            me.select(columnNodeIds, me.selectedColumnCellIds, me.selectedColumnCellCls);
+        }
+
+        super.onCellClick(data);
+    }
+
+    /**
+     * @param {Object} data
+     * @param {Number} step
+     */
+    onNavKeyColumn(data, step) {
+        let me            = this,
+            idArray       = ColumnModel.getCellId(data.path).split('__'),
+            currentColumn = idArray[2],
+            view          = me.view,
+            dataFields    = view.columns.map(c => c.dataField),
+            newIndex      = (dataFields.indexOf(currentColumn) + step) % dataFields.length,
+            columnNodeIds, tbodyNode;
+
+        while (newIndex < 0) {
+            newIndex += dataFields.length;
+        }
+
+        tbodyNode     = VDomUtil.findVdomChild(me.view.vdom, {tag: 'tbody'}).vdom;
+        columnNodeIds = VDomUtil.getColumnNodesIds(tbodyNode, newIndex);
+
+        me.deselectAllCells(true);
+        me.select(columnNodeIds, me.selectedColumnCellIds, me.selectedColumnCellCls);
+
+        super.onNavKeyColumn(data, step);
+    }
+
+    /**
+     *
+     */
+    unregister() {
+        this.deselectAllCells();
+        super.unregister();
+    }
+}
+
+Neo.applyClassConfig(CellColumnRowModel);
+
+export default CellColumnRowModel;

package/src/selection/grid/CellModel.mjs

@@ -0,0 +1,184 @@
+import Model from '../Model.mjs';
+
+/**
+ * @class Neo.selection.grid.CellModel
+ * @extends Neo.selection.Model
+ */
+class CellModel extends Model {
+    static getConfig() {return {
+        /**
+         * @member {String} className='Neo.selection.grid.CellModel'
+         * @protected
+         */
+        className: 'Neo.selection.grid.CellModel',
+        /**
+         * @member {String} ntype='selection-grid-cellmodel'
+         * @protected
+         */
+        ntype: 'selection-grid-cellmodel',
+        /**
+         * @member {String} cls='selection-cellmodel'
+         * @protected
+         */
+        cls: 'neo-selection-cellmodel'
+    }}
+
+    /**
+     *
+     */
+    addDomListener() {
+        let me           = this,
+            view         = me.view,
+            domListeners = view.domListeners;
+
+        domListeners.push({
+            click   : me.onCellClick,
+            delegate: '.neo-grid-cell',
+            scope   : me
+        });
+
+        view.domListeners = domListeners;
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onCellClick(data) {
+        let me   = this,
+            id   = null,
+            path = data.path,
+            i    = 0,
+            len  = path.length;
+
+        for (; i < len; i++) {
+            if (path[i].tagName === 'td') {
+                id = path[i].id;
+                break;
+            }
+        }
+
+        if (id) {
+            me.toggleSelection(id);
+        }
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onKeyDownDown(data) {
+        this.onNavKeyRow(data, 1);
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onKeyDownLeft(data) {
+        this.onNavKeyColumn(data, -1);
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onKeyDownRight(data) {
+        this.onNavKeyColumn(data, 1);
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onKeyDownUp(data) {
+        this.onNavKeyRow(data, -1);
+    }
+
+    /**
+     * @param {Object} data
+     * @param {Number} step
+     */
+    onNavKeyColumn(data, step) {
+        let me            = this,
+            view          = me.view,
+            idArray       = data.path[0].id.split('__'),
+            currentColumn = idArray[2],
+            dataFields    = view.columns.map(c => c.dataField),
+            newIndex      = (dataFields.indexOf(currentColumn) + step) % dataFields.length,
+            id;
+
+        while (newIndex < 0) {
+            newIndex += dataFields.length;
+        }
+
+        idArray[2] = dataFields[newIndex];
+        id = idArray.join('__');
+
+        me.select(id);
+        view.focus(id);
+    }
+
+    /**
+     * @param {Object} data
+     * @param {Number} step
+     */
+    onNavKeyRow(data, step) {
+        let me       = this,
+            view     = me.view,
+            store    = view.store,
+            idArray  = data.path[0].id.split('__'),
+            recordId = idArray[1],
+            newIndex = (store.indexOf(recordId) + step) % store.getCount(),
+            id;
+
+        while (newIndex < 0) {
+            newIndex += store.getCount();
+        }
+
+        idArray[1] = store.getKeyAt(newIndex);
+        id = idArray.join('__');
+
+        me.select(id);
+        view.focus(id);
+    }
+
+    /**
+     * @param {Neo.component.Base} component
+     */
+    register(component) {
+        super.register(component);
+
+        let me   = this,
+            id   = me.id,
+            view = me.view;
+
+        if (view.keys) {
+            view.keys._keys.push(
+                {fn: 'onKeyDownDown'  ,key: 'Down'  ,scope: id},
+                {fn: 'onKeyDownLeft'  ,key: 'Left'  ,scope: id},
+                {fn: 'onKeyDownRight' ,key: 'Right' ,scope: id},
+                {fn: 'onKeyDownUp'    ,key: 'Up'    ,scope: id}
+            );
+        }
+    }
+
+    /**
+     *
+     */
+    unregister() {
+        let me   = this,
+            id   = me.id,
+            view = me.view;
+
+        if (view.keys) {
+            view.keys.removeKeys([
+                {fn: 'onKeyDownDown'  ,key: 'Down'  ,scope: id},
+                {fn: 'onKeyDownLeft'  ,key: 'Left'  ,scope: id},
+                {fn: 'onKeyDownRight' ,key: 'Right' ,scope: id},
+                {fn: 'onKeyDownUp'    ,key: 'Up'    ,scope: id}
+            ]);
+        }
+
+        super.unregister();
+    }
+}
+
+Neo.applyClassConfig(CellModel);
+
+export default CellModel;

package/src/selection/grid/CellRowModel.mjs

@@ -0,0 +1,164 @@
+import CellModel from './CellModel.mjs';
+import NeoArray  from '../../util/Array.mjs';
+import RowModel  from './RowModel.mjs';
+import VDomUtil  from '../../util/VDom.mjs';
+
+/**
+ * @class Neo.selection.grid.CellRowModel
+ * @extends Neo.selection.grid.CellModel
+ */
+class CellRowModel extends CellModel {
+    static getConfig() {return {
+        /**
+         * @member {String} className='Neo.selection.grid.CellRowModel'
+         * @protected
+         */
+        className: 'Neo.selection.grid.CellRowModel',
+        /**
+         * @member {String} ntype='selection-grid-cellrowmodel'
+         * @protected
+         */
+        ntype: 'selection-grid-cellrowmodel',
+        /**
+         * @member {String} cls='neo-selection-cellrowmodel'
+         * @protected
+         */
+        cls: 'neo-selection-cellrowmodel',
+        /**
+         * @member {Array|null} selectedRowIds=null
+         * @protected
+         */
+        selectedRowIds: null
+    }}
+
+    /**
+     * @param {Object} config
+     */
+    construct(config) {
+        super.construct(config);
+
+        this.selectedRowIds = [];
+    }
+
+    /**
+     * @param {Boolean} [silent] true to prevent a vdom update
+     */
+    deselectAllRows(silent) {
+        let me     = this,
+            rowIds = [...me.selectedRowIds],
+            view   = me.view,
+            vdom   = view.vdom;
+
+        rowIds.forEach(rowId => {
+            me.deselectRow(rowId, true);
+        });
+
+        if (!silent) {
+            view.vdom = vdom;
+        }
+    }
+
+    /**
+     * @param {String} rowId
+     * @param {Boolean} [silent] true to prevent a vdom update
+     */
+    deselectRow(rowId, silent) {
+        let me   = this,
+            view = me.view,
+            vdom = view.vdom,
+            node = view.getVdomChild(rowId),
+            cls;
+
+        if (node) {
+            cls = node.cls || [];
+            NeoArray.remove(cls, me.selectedCls);
+            node.cls = cls;
+        }
+
+        NeoArray.remove(me.selectedRowIds, rowId);
+
+        if (!silent) {
+            view.vdom = vdom;
+        }
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onCellClick(data) {
+        let me   = this,
+            node = RowModel.getRowNode(data.path), // we could add a separate export for this method
+            id   = node?.id;
+
+        if (id) {
+            me.deselectAllRows(true);
+            me.selectRow(id);
+        }
+
+        super.onCellClick(data);
+    }
+
+    /**
+     * @param {Object} data
+     * @param {Number} step
+     */
+    onNavKeyRow(data, step) {
+        super.onNavKeyRow(data, step);
+
+        let me         = this,
+            node       = RowModel.getRowNode(data.path),
+            view       = me.view,
+            store      = view.store,
+            vdomNode   = VDomUtil.findVdomChild(view.vdom, node.id),
+            newIndex   = (vdomNode.index + step) % store.getCount(),
+            parentNode = vdomNode.parentNode,
+            id;
+
+        while (newIndex < 0) {
+            newIndex += store.getCount();
+        }
+
+        id = parentNode.cn[newIndex].id;
+
+        if (id) {
+            me.deselectAllRows(true);
+            me.selectRow(id);
+        }
+    }
+
+    /**
+     * @param {String} id
+     * @param {Boolean} [silent]
+     */
+    selectRow(id, silent) {
+        let me       = this,
+            view     = me.view,
+            vdom     = view.vdom,
+            vdomNode = id && view.getVdomChild(id),
+            cls;
+
+        if (vdomNode) {
+            cls = vdomNode.cls || [];
+            NeoArray.add(cls, me.selectedCls);
+            vdomNode.cls = cls;
+
+            me.selectedRowIds.push(id);
+        }
+
+        if (!silent) {
+            view.vdom = vdom;
+        }
+    }
+
+    /**
+     *
+     */
+    unregister() {
+        this.deselectAllRows();
+        super.unregister();
+    }
+}
+
+Neo.applyClassConfig(CellRowModel);
+
+export default CellRowModel;

package/src/selection/grid/ColumnModel.mjs

@@ -0,0 +1,185 @@
+import Model    from '../Model.mjs';
+import VDomUtil from '../../util/VDom.mjs';
+
+/**
+ * @class Neo.selection.grid.ColumnModel
+ * @extends Neo.selection.Model
+ */
+class ColumnModel extends Model {
+    static getConfig() {return {
+        /**
+         * @member {String} className='Neo.selection.grid.ColumnModel'
+         * @protected
+         */
+        className: 'Neo.selection.grid.ColumnModel',
+        /**
+         * @member {String} ntype='selection-grid-columnmodel'
+         * @protected
+         */
+        ntype: 'selection-grid-columnmodel',
+        /**
+         * @member {String} cls='selection-columnmodel'
+         * @protected
+         */
+        cls: 'neo-selection-columnmodel'
+    }}
+
+    /**
+     *
+     */
+    addDomListener() {
+        let me           = this,
+            view         = me.view,
+            domListeners = view.domListeners;
+
+        domListeners.push({
+            click   : me.onCellClick,
+            delegate: '.neo-grid-cell',
+            scope   : me
+        });
+
+        view.domListeners = domListeners;
+    }
+
+    /**
+     * @param {Object} eventPath
+     * @returns {String|null} cellId
+     */
+    static getCellId(eventPath) {
+        let id   = null,
+            i    = 0,
+            len  = eventPath.length;
+
+        for (; i < len; i++) {
+            if (eventPath[i].tagName === 'td') {
+                id = eventPath[i].id;
+                break;
+            }
+        }
+
+        return id;
+    }
+
+    /**
+     * todo: move to table.Container or view
+     * @param {String} cellId
+     * @param {Array} columns
+     * @returns {Number} index
+     */
+    static getColumnIndex(cellId, columns) {
+        let idArray       = cellId.split('__'),
+            currentColumn = idArray[2],
+            dataFields    = columns.map(c => c.dataField);
+
+        return dataFields.indexOf(currentColumn);
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onCellClick(data) {
+        let me   = this,
+            id   = ColumnModel.getCellId(data.path),
+            columnNodeIds, index, tbodyNode;
+
+        if (id) {
+            index         = ColumnModel.getColumnIndex(id, me.view.items[0].items);
+            tbodyNode     = VDomUtil.findVdomChild(me.view.vdom, {tag: 'tbody'}).vdom;
+            columnNodeIds = VDomUtil.getColumnNodesIds(tbodyNode, index);
+
+            me.select(columnNodeIds);
+        }
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onKeyDownLeft(data) {
+        this.onNavKeyColumn(data, -1);
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onKeyDownRight(data) {
+        this.onNavKeyColumn(data, 1);
+    }
+
+    /**
+     * @param {Object} data
+     * @param {Number} step
+     */
+    onNavKeyColumn(data, step) {
+        let me            = this,
+            idArray       = ColumnModel.getCellId(data.path).split('__'),
+            currentColumn = idArray[2],
+            view          = me.view,
+            dataFields    = view.columns.map(c => c.dataField),
+            newIndex      = (dataFields.indexOf(currentColumn) + step) % dataFields.length,
+            columnNodeIds, id, tbodyNode;
+
+        while (newIndex < 0) {
+            newIndex += dataFields.length;
+        }
+
+        idArray[2] = dataFields[newIndex];
+        id = idArray.join('__');
+
+        tbodyNode     = VDomUtil.findVdomChild(me.view.vdom, {tag: 'tbody'}).vdom;
+        columnNodeIds = VDomUtil.getColumnNodesIds(tbodyNode, newIndex);
+
+        me.select(columnNodeIds);
+        view.focus(id); // we have to focus one cell to ensure the keynav keeps working
+    }
+
+    /**
+     * @param {Neo.component.Base} component
+     */
+    register(component) {
+        super.register(component);
+
+        let me   = this,
+            id   = me.id,
+            view = me.view;
+
+        if (view.keys) {
+            view.keys._keys.push({
+                fn   : 'onKeyDownLeft',
+                key  : 'Left',
+                scope: id
+            }, {
+                fn   : 'onKeyDownRight',
+                key  : 'Right',
+                scope: id
+            });
+        }
+    }
+
+
+    /**
+     *
+     */
+    unregister() {
+        let me   = this,
+            id   = me.id,
+            view = me.view;
+
+        if (view.keys) {
+            view.keys.removeKeys([{
+                fn   : 'onKeyDownLeft',
+                key  : 'Left',
+                scope: id
+            }, {
+                fn   : 'onKeyDownRight',
+                key  : 'Right',
+                scope: id
+            }]);
+        }
+
+        super.unregister();
+    }
+}
+
+Neo.applyClassConfig(ColumnModel);
+
+export default ColumnModel;