neo.mjs 5.16.4 → 5.17.0

package/src/selection/TreeAccordionModel.mjs

@@ -0,0 +1,293 @@
+import TreeModel from './TreeModel.mjs';
+import NeoArray  from "../util/Array.mjs";
+
+/**
+ * @class Neo.selection.TreeAccordionModel
+ * @extends Neo.selection.TreeModel
+ */
+class TreeAccordionModel extends TreeModel {
+    static config = {
+        /**
+         * @member {String} className='Neo.selection.TreeAccordionModel'
+         * @protected
+         */
+        className: 'Neo.selection.TreeAccordionModel',
+        /**
+         * @member {String} ntype='selection-treeaccordionmodel'
+         * @protected
+         */
+        ntype: 'selection-treeaccordionmodel'
+    }
+
+    /**
+     * Tries to find a child and returns it
+     * @param {Object} record
+     * @returns {Object|null}
+     */
+    checkForChild(record) {
+        const view     = this.view,
+              recordId = record[view.getKeyProperty()];
+        let childRecord = null;
+
+        for (const item of view.store.items) {
+            if (item.parentId === recordId) {
+                childRecord = item;
+                break;
+            }
+        }
+
+        return childRecord;
+    }
+
+    /**
+     * Return the parent record if any
+     * @param {Object} record
+     * @returns {Object|null}
+     */
+    checkForParent(record) {
+        if (record.parentId) {
+            const view = this.view;
+
+            return view.store.get(record.parentId);
+        } else {
+            return null;
+        }
+    }
+
+    /**
+     * Depending on {-1|1} step return
+     * -1: previous record OR parent record
+     *  1: next record or null
+     *
+     * @param {Object} record
+     * @param {Number} step
+     * @returns {Object|null}
+     */
+    checkForSibling(record, step) {
+        const view           = this.view,
+              store          = view.store,
+              parentRecordId = record.parentId,
+              recordId       = record[view.getKeyProperty()];
+        let hasFoundNext   = false,
+            nextItemRecord = null,
+            previousItemRecord;
+
+        for (let item of store.items) {
+            if (hasFoundNext && item.parentId === parentRecordId) {
+                nextItemRecord = item;
+                break;
+            }
+
+            if (!hasFoundNext && item.parentId === parentRecordId) {
+                if (!hasFoundNext && item[view.getKeyProperty()] === recordId) {
+                    if (step === -1) break;
+                    hasFoundNext = true;
+                } else {
+                    previousItemRecord = item;
+                }
+            }
+        }
+
+        return step === 1 ? nextItemRecord : (previousItemRecord || store.get(parentRecordId));
+    }
+
+    /**
+     * Find the next sibling of a parent item
+     * @param {Object} record
+     * @returns {Object|null}
+     */
+    checkNextParentSibling(record) {
+        const parent = this.view.store.get(record.parentId);
+        let parentSibling = this.checkForSibling(parent, 1);
+
+        if (!parentSibling && parent.parentId) this.checkNextParentSibling(parent);
+
+        return parentSibling;
+    }
+
+    /**
+     * Called by keys (List.mjs:register)
+     * Toggle collapse or if isLeaf select next item
+     * @param {Object} data
+     */
+    onKeyDownEnter(data) {
+        let me     = this,
+            view   = me.view,
+            itemId = me.getSelection()[0],
+            record = view.store.get(view.getItemRecordId(itemId));
+
+        if (record.isLeaf || record.collapsed) {
+            me.onKeyDownRight(data);
+        } else {
+            me.onKeyDownLeft(data);
+        }
+    }
+
+    /**
+     * Called by keys (List.mjs:register)
+     * Deselect all and fire event selectPostLastItem
+     * @param {Object} data
+     */
+    onKeyDownEscape(data) {
+        let me = this;
+
+        me.deselectAll();
+    }
+
+    /**
+     * Collapse folder or select previous
+     * @param {Object} data
+     */
+    onKeyDownLeft(data) {
+        const me     = this,
+              view   = me.view,
+              itemId = me.getSelection()[0];
+
+        if (!itemId) {
+            me.selectRoot();
+            return;
+        }
+
+        const record = view.store.get(view.getItemRecordId(itemId));
+
+        if (record.isLeaf || record.collapsed || !view.rootParentsAreCollapsible) {
+            me.onNavKey(data, -1);
+        } else {
+            me.toggleCollapsed(record, itemId, true);
+        }
+    }
+
+    /**
+     * Open folder or select next
+     * @param {Object} data
+     */
+    onKeyDownRight(data) {
+        const me     = this,
+              view   = me.view,
+              itemId = me.getSelection()[0];
+
+        if (!itemId) {
+            me.selectRoot();
+            return;
+        }
+
+        const record = view.store.get(view.getItemRecordId(itemId));
+
+        if (record.isLeaf || !record.collapsed) {
+            me.onNavKey(data, 1);
+        } else {
+            me.toggleCollapsed(record, itemId, false);
+        }
+    }
+
+    /**
+     * Handles 'up' and 'down' keys
+     * @param {Object} data
+     * @param {Number} step
+     */
+    onNavKey(data, step) {
+        const me   = this,
+              view = me.view,
+              item = me.getSelection()[0];
+        let newRecord;
+
+        if (item) {
+            const recordId = view.getItemRecordId(item);
+            let record = view.store.get(recordId);
+
+            if (step === 1) {
+                if (!record.isLeaf && !record.collapsed) {
+                    // find first child
+                    newRecord = this.checkForChild(record);
+                } else {
+                    // find next sibling
+                    newRecord = this.checkForSibling(record, step);
+                    // no ==> loop through parent next siblings until no parent
+                    if (!newRecord) {
+                        newRecord = this.checkNextParentSibling(record);
+                    }
+                }
+                // current item was the last item
+                if (!newRecord) {
+                    me.deselectAll();
+                    view.fire('selectPostLastItem');
+                }
+            } else if (step === -1) {
+                // check previous sibling
+                newRecord = this.checkForSibling(record, step);
+                // no ==> get parent
+                if (!newRecord) {
+                    newRecord = this.checkForParent(record);
+                }
+                // current item was the first item
+                if (!newRecord) {
+                    me.deselectAll();
+                    view.fire('selectPreFirstItem');
+                }
+            }
+        } else {
+            me.selectRoot();
+        }
+
+        if (newRecord) {
+            const itemId = view.getItemId(newRecord[me.view.getKeyProperty()]);
+
+            me.selectAndScrollIntoView(itemId);
+        }
+    }
+
+    /**
+     * Select an item and scroll the tree to show the item in the center
+     * @param {String} itemId
+     */
+    selectAndScrollIntoView(itemId) {
+        const me = this;
+
+        me.select(itemId);
+
+        Neo.main.DomAccess.scrollIntoView({
+            id   : itemId,
+            block: 'center'
+        });
+    }
+
+    /**
+     * Select the root item of the tree
+     */
+    selectRoot() {
+        const me    = this,
+              view  = me.view,
+              store = view.store;
+        let rootItemId;
+
+        for (let record of store.items) {
+            if (!record.parentId) {
+                rootItemId = view.getItemId(record[me.view.getKeyProperty()]);
+                break;
+            }
+        }
+
+        me.selectAndScrollIntoView(rootItemId);
+    }
+
+    /**
+     * Return the parent record if any
+     * @param {Object} record
+     * @param {String} itemId
+     * @param {Boolean} collapse
+     */
+    toggleCollapsed(record, itemId, collapse) {
+        const me    = this,
+              item  = me.view.getVdomChild(itemId),
+              clsFn = collapse ? 'remove' : 'add';
+
+        NeoArray[clsFn](item.cls, 'neo-folder-open');
+        me.view.update();
+
+        record.collapsed = collapse;
+    }
+}
+
+Neo.applyClassConfig(TreeAccordionModel);
+
+export default TreeAccordionModel;

package/src/selection/TreeModel.mjs

@@ -22,7 +22,7 @@ class TreeModel extends ListModel {
      * @param {Object} data
      */
     onKeyDownEnter(data) {
-        console.log('onKeyDownEnter', data)
+        Neo.log('onKeyDownEnter', data)
     }
 
     /**
@@ -30,10 +30,10 @@ class TreeModel extends ListModel {
      * @param {Number} step
      */
     onNavKey(data, step) {
-        console.log('onNavKey', data, step)
+        Neo.log('onNavKey', data, step)
     }
 }
 
 Neo.applyClassConfig(TreeModel);
 
-export default TreeModel;
+export default TreeModel;

package/src/tree/Accordion.mjs

@@ -0,0 +1,280 @@
+import TreeList           from '../tree/List.mjs';
+import TreeAccordionModel from "../selection/TreeAccordionModel.mjs";
+import NeoArray           from "../util/Array.mjs";
+import ClassSystemUtil    from "../util/ClassSystem.mjs";
+
+/**
+ * @class Neo.tree.Accordion
+ * @extends Neo.tree.List
+ */
+class AccordionTree extends TreeList {
+    static config = {
+        /**
+         * @member {String} className='Neo.tree.Accordion'
+         * @protected
+         */
+        className: 'Neo.tree.Accordion',
+        /**
+         * @member {String} ntype='treeaccordion'
+         * @protected
+         */
+        ntype: 'treeaccordion',
+        /**
+         * @member {String[]} baseCls=['neo-tree-accordion']
+         */
+        baseCls: ['neo-tree-list'],
+        /**
+         * @member {Boolean} showCollapseExpandAllIcons=true
+         */
+        showCollapseExpandAllIcons: false,
+        /**
+         * Set to false will auto expand root parent items and disallow collapsing
+         * @member {Boolean} rootParentIsCollapsible=false
+         */
+        rootParentsAreCollapsible_: false,
+        /**
+         * Set to false to hide the initial root item
+         * @member {Boolean} firstParentIsVisible=true
+         */
+        firstParentIsVisible_: true,
+        /**
+         * @member {Object} _vdom
+         */
+        _vdom:
+            {
+                cn: [
+                    {tag: 'ul', cls: ['neo-list-container', 'neo-list', 'neo-accordion-style'], tabIndex: -1, cn: []}
+                ]
+            }
+    }
+
+    onConstructed() {
+        super.onConstructed();
+        let me = this;
+
+        me.addDomListeners({
+            focusin: me.onFocus,
+            scope  : me
+        })
+    }
+
+    /**
+     * Called when changing firstParentIsVisible
+     * First store item gets marked and additional css class
+     *
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     */
+    afterSetFirstParentIsVisible(value, oldValue) {
+        const toggleFn = !value ? 'addCls' : 'removeCls';
+
+        this[toggleFn]('first-parent-not-visible');
+
+        if (this.store.first()) {
+            this.store.first().visible = value;
+        }
+    }
+
+    /**
+     * Called when changing rootParentsAreCollapsible
+     * Ensures that root items are expanded if not collapsible
+     *
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     */
+    afterSetRootParentsAreCollapsible(value, oldValue) {
+        const me       = this,
+              toggleFn = !value ? 'addCls' : 'removeCls';
+
+        me[toggleFn]('root-not-collapsible');
+
+        if (me.rendered && value === false) {
+            const store = me.store;
+
+            store.items.forEach(record => {
+                if (record.parentId === null && !record.isLeaf) {
+                    me.expandItem(record);
+                }
+            })
+        }
+    }
+
+    /**
+     * Triggered before the selectionModel config gets changed.
+     * @param {Neo.selection.Model} value
+     * @param {Neo.selection.Model} oldValue
+     * @returns {Neo.selection.Model}
+     * @protected
+     */
+    beforeSetSelectionModel(value, oldValue) {
+        oldValue?.destroy();
+
+        return ClassSystemUtil.beforeSetInstance(value, TreeAccordionModel);
+    }
+
+    /**
+     * @param {String} [parentId] The parent node
+     * @param {Object} [vdomRoot] The vdom template root for the current sub tree
+     * @param {Number} level The hierarchy level of the tree
+     * @returns {Object} vdomRoot
+     * @protected
+     */
+    createItems(parentId, vdomRoot, level) {
+        let me        = this,
+            items     = me.store.find('parentId', parentId),
+            itemCls   = me.itemCls,
+            folderCls = me.folderCls,
+            cls, tmpRoot;
+
+        if (items.length > 0) {
+            if (!vdomRoot.cn) {
+                vdomRoot.cn = [];
+            }
+
+            if (parentId !== null) {
+                vdomRoot.cn.push({
+                    tag  : 'ul',
+                    cls  : ['neo-list'],
+                    cn   : [],
+                    style: {
+                        paddingLeft: '15px'
+                    }
+                });
+
+                tmpRoot = vdomRoot.cn[vdomRoot.cn.length - 1];
+            } else {
+                tmpRoot = vdomRoot;
+            }
+
+            items.forEach(item => {
+                cls = [itemCls];
+
+                if (item.isLeaf) {
+                    cls.push(itemCls + (item.singleton ? '-leaf-singleton' : '-leaf'));
+                } else {
+                    cls.push(folderCls);
+
+                    if (!item.parentId && !me.rootParentsAreCollapsible) {
+
+                        cls.push('neo-not-collapsible');
+                        if (item.collapsed) {
+                            item.collapsed = false;
+                        }
+                    }
+                    if (!item.collapsed) {
+                        cls.push('neo-folder-open');
+                    }
+                }
+
+                tmpRoot.cn.push({
+                    tag  : 'li',
+                    cls,
+                    id   : me.getItemId(item.id),
+                    cn   : [{
+                        tag      : 'span',
+                        cls      : ['neo-accordion-item-icon', item.iconCls],
+                        removeDom: !item.isLeaf
+                    }, {
+                        cls  : [itemCls + '-content'],
+                        style: {pointerEvents: 'none'},
+                        cn   : [{
+                            tag      : 'span',
+                            cls      : [itemCls + '-content-header'],
+                            innerHTML: item.name
+                        }, {
+                            tag      : 'span',
+                            cls      : [itemCls + '-content-text'],
+                            innerHTML: item.content
+                        }]
+                    }],
+                    style: {
+                        padding : '10px',
+                        position: item.isLeaf ? null : 'sticky',
+                        top     : item.isLeaf ? null : (level * 38) + 'px',
+                        zIndex  : item.isLeaf ? null : (20 / (level + 1)),
+                    }
+                });
+
+                tmpRoot = me.createItems(item.id, tmpRoot, level + 1);
+            });
+        }
+
+        return vdomRoot;
+    }
+
+
+    /**
+     * Expands an item based on the reord
+     * @param {Object} record
+     */
+    expandItem(record) {
+        const me     = this,
+              itemId = me.getItemId(record[me.getKeyProperty()]),
+              item   = me.getVdomChild(itemId);
+
+        record.collapsed = false;
+
+        NeoArray.add(item.cls, 'neo-folder-open');
+        me.update();
+    }
+
+    /**
+     * @param {Object} item
+     * @param {Object} data
+     */
+    onItemClick(item, data) {
+        super.onItemClick(item, data);
+
+        const me             = this,
+              selectionModel = me.selectionModel,
+              itemId         = item.id,
+              // ! todo make it String
+              id             = Number(itemId.split('__')[1]),
+              record         = me.store.get(id);
+
+        selectionModel.select(item.id);
+
+        if (!record.isLeaf) {
+            /**
+             * The folderItemClick event fires when a click occurs on a list item which does have child items.
+             * Passes the item record to the event handler.
+             * @event folderItemClick
+             * @returns {Object} record
+             */
+            me.fire('folderItemClick', {record});
+
+            record.collapsed = !record.collapsed
+        }
+    }
+
+    /**
+     * To place the root item at the correct location
+     * @returns {Object}
+     */
+    getListItemsRoot() {
+        return this.vdom.cn[0];
+    }
+
+    /**
+     * Accordion gaining focus without selection => setSelection
+     * @param {Object} data
+     */
+    onFocus(data) {
+        const me        = this,
+              selModel  = me.selectionModel,
+              selection = selModel.getSelection()[0];
+
+        if (!selection) selModel.selectRoot();
+    }
+
+    // Todo Might be needed
+    onStoreLoad() {
+    }
+
+    onStoreRecordChange() {
+    }
+}
+
+Neo.applyClassConfig(AccordionTree);
+
+export default AccordionTree