neo.mjs 8.10.1 → 8.12.0

package/src/grid/header/Button.mjs

@@ -45,10 +45,6 @@ class Button extends BaseButton {
          * @member {String} defaultSortDirection='ASC'
          */
         defaultSortDirection: 'ASC',
-        /**
-         * @member {Boolean} draggable_=true
-         */
-        draggable_: true,
         /**
          * @member {Object} editorConfig=null
          */
@@ -100,43 +96,6 @@ class Button extends BaseButton {
         sortable_: true
     }
 
-    /**
-     * @param {Object} config
-     */
-    construct(config) {
-        super.construct(config);
-
-        let me = this;
-
-        me.draggable && me.addDomListeners({
-            dragend  : me.onDragEnd,
-            dragenter: me.onDragEnter,
-            dragleave: me.onDragLeave,
-            dragover : me.onDragOver,
-            dragstart: me.onDragStart,
-            drop     : me.onDrop,
-            scope    : me
-        })
-    }
-
-    /**
-     * Triggered after the draggable config got changed
-     * @param {Boolean} value
-     * @param {Boolean} oldValue
-     * @protected
-     */
-    afterSetDraggable(value, oldValue) {
-        let me = this;
-
-        if (value === true) {
-            me.getVdomRoot().draggable = true
-        } else {
-            delete me.getVdomRoot().draggable
-        }
-
-        me.update()
-    }
-
     /**
      * Triggered after the isSorted config got changed
      * @param {String|null} value
@@ -315,74 +274,6 @@ class Button extends BaseButton {
         me.isSorted = map[me.isSorted + '']
     }
 
-    /**
-     * @protected
-     */
-    onDragEnd() {
-        let me      = this,
-            {style} = me;
-
-        delete style.opacity;
-        me.style = style
-    }
-
-    /**
-     * @protected
-     */
-    onDragEnter() {
-        let me    = this,
-            {cls} = me;
-
-        NeoArray.add(cls, 'neo-drag-over');
-        me.cls = cls
-    }
-
-    /**
-     * @protected
-     */
-    onDragLeave() {
-        let me    = this,
-            {cls} = me;
-
-        NeoArray.remove(cls, 'neo-drag-over');
-        me.cls = cls
-    }
-
-    /**
-     * @param {Object} event
-     */
-    onDragOver(event) {
-        //console.log('onDragOver', event);
-    }
-
-    /**
-     * @protected
-     */
-    onDragStart() {
-        let me      = this,
-            {style} = me;
-
-        style.opacity = 0.4;
-        me.style = style
-    }
-
-    /**
-     * @param {Object} data
-     */
-    onDrop(data) {
-        let me             = this,
-            headerToolbar  = me.parent,
-            {style}        = me,
-            gridContainer  = headerToolbar.parent;
-
-        me.onDragLeave();
-        headerToolbar.switchItems(me.id, data.srcId);
-        gridContainer.createViewData(gridContainer.store.data);
-
-        style.opacity = 1;
-        me.style = style
-    }
-
     /**
      * @param {Object} data
      */

package/src/grid/header/Toolbar.mjs

@@ -21,6 +21,10 @@ class Toolbar extends BaseToolbar {
          * @member {String[]} baseCls=['neo-grid-header-toolbar','neo-toolbar']
          */
         baseCls: ['neo-grid-header-toolbar', 'neo-toolbar'],
+        /**
+         * @member {Boolean} draggable_=true
+         */
+        draggable_: true,
         /**
          * @member {Neo.grid.Container|null} gridContainer=null
          */
@@ -40,6 +44,8 @@ class Toolbar extends BaseToolbar {
          */
         showHeaderFilters_: false,
         /**
+         * Convenience shortcut to pass sortable to all toolbar items.
+         * If set to true, header clicks will sort the matching column (ASC, DESC, null)
          * @member {Boolean} sortable=true
          */
         sortable: true,
@@ -50,6 +56,31 @@ class Toolbar extends BaseToolbar {
         {'aria-rowindex': 1, cn: [{cn: []}]}
     }
 
+    /**
+     * Triggered after the draggable config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetDraggable(value, oldValue) {
+        let me = this;
+
+        if (value && !me.sortZone) {
+            import('../../draggable/grid/header/toolbar/SortZone.mjs').then(module => {
+                let {appName, id, windowId} = me;
+
+                me.sortZone = Neo.create({
+                    module             : module.default,
+                    appName,
+                    boundaryContainerId: id,
+                    owner              : me,
+                    windowId,
+                    ...me.sortZoneConfig
+                })
+            })
+        }
+    }
+
     /**
      * Triggered after the mounted config got changed
      * @param {Boolean} value
@@ -98,6 +129,7 @@ class Toolbar extends BaseToolbar {
                 })
             });
 
+            me.updateDepth = 2;
             me.update()
         }
     }

package/src/main/DomAccess.mjs

@@ -420,36 +420,33 @@ class DomAccess extends Base {
 
     /**
      * Returns the attributes for a given dom node id
-     * @param {Object} data
-     * @param {Array|String} data.id either an id or an array of ids
-     * @param {Array|String} data.attributes either an attribute or an array of attributes
+     * @param {Object}          data
+     * @param {String|String[]} data.attributes either an attribute or an array of attributes
+     * @param {String|String[]} data.id either an id or an array of ids
      * @returns {Array|Object} In case id is an array, an array of attribute objects is returned, otherwise an object
      */
-    getAttributes(data) {
+    getAttributes({attributes, id}) {
         let returnData;
 
-        if (Array.isArray(data.id)) {
+        if (Array.isArray(id)) {
             returnData = [];
 
-            data.id.forEach(id => {
-                returnData.push(this.getAttributes({
-                    attributes: data.attributes,
-                    id        : id
-                }))
+            id.forEach(id => {
+                returnData.push(this.getAttributes({attributes, id}))
             })
         } else {
-            let node = this.getElementOrBody(data.id);
+            let node = this.getElementOrBody(id);
 
             returnData = {};
 
             if (node) {
-                if (!Array.isArray(data.attributes)) {
-                    data.attributes = [data.attributes];
-
-                    data.attributes.forEach(attribute => {
-                        returnData[attribute] = node[attribute]
-                    })
+                if (!Array.isArray(attributes)) {
+                    attributes = [attributes]
                 }
+
+                attributes.forEach(attribute => {
+                    returnData[attribute] = node[attribute]
+                })
             }
         }
 

package/src/main/DomEvents.mjs

@@ -194,7 +194,7 @@ class DomEvents extends Base {
 
     /**
      * Local domEvent listener
-     * @param {Object} event
+     * @param {Event} event
      */
     domEventListener(event) {
         let me       = this,
@@ -211,40 +211,7 @@ class DomEvents extends Base {
                 }
             };
 
-        // console.log('domEventListener', event.type, target.id, target.value, event);
-
         switch (event.type) {
-            case 'dragend':
-                me.dragElementId = null;
-                break
-            case 'dragenter':
-                if (me.dragElementId === target.id) {
-                    return // ignore target and source to be the same
-                }
-                break
-            case 'dragleave':
-                if (me.dragElementId === target.id) {
-                    return // ignore target and source to be the same
-                }
-                break
-            case 'dragover':
-                me.onDragOver(event);
-                event.preventDefault();
-                break
-            case 'dragstart':
-                me.dragElementId = target.id;
-                break
-            case 'drop':
-                if (!me.dragElementId || me.dragElementId === target.id) {
-                    return // drop fires twice by default & drop should not trigger on the drag element
-                }
-                if (event.stopPropagation) {
-                    event.stopPropagation() // stops the browser from redirecting.
-                }
-                event.preventDefault();
-                config.data.srcId = me.dragElementId;
-                me.dragElementId = null;
-                break
             case 'mousemove':
                 Object.assign(config.data, me.getMouseEventData(event));
                 break
@@ -427,10 +394,10 @@ class DomEvents extends Base {
      * @param {Object} event
      */
     onBeforeUnload(event) {
-        let manager = Neo.worker.Manager;
+        let {Manager} = Neo.worker;
 
-        manager.appNames.forEach(appName => {
-            manager.broadcast({action: 'disconnect', appName, windowId: manager.windowId})
+        Manager.appNames.forEach(appName => {
+            Manager.broadcast({action: 'disconnect', appName, windowId: Manager.windowId})
         })
     }
 
@@ -498,13 +465,6 @@ class DomEvents extends Base {
         me.testPathInclusion(event, preventClickTargets) && event.preventDefault()
     }
 
-    /**
-     * @param {Object} event
-     */
-    onDragOver(event) {
-        event.dataTransfer.dropEffect = 'move'
-    }
-
     /**
      * @param {FocusEvent} event
      */
@@ -616,13 +576,11 @@ class DomEvents extends Base {
      * @param {Event} event
      */
     onOrientationChange(event) {
-        const
-            {orientation} = screen,
+        let {orientation} = screen,
             {angle, type} = orientation,
-            layout        = angle === 0 || angle === 180 ? 'portrait' : 'landscape',
-            {Manager}     = Neo.worker;
+            layout        = angle === 0 || angle === 180 ? 'portrait' : 'landscape';
 
-        Manager.sendMessage('app', {
+        Neo.worker.Manager.sendMessage('app', {
             action: 'orientationChange',
             data  : {angle, layout, type}
         })
@@ -633,7 +591,9 @@ class DomEvents extends Base {
      */
     onScroll(event) {
         let {clientHeight, clientWidth, scrollLeft, scrollTop} = event.target;
-event.preventDefault();
+
+        event.preventDefault();
+
         this.sendMessageToApp({
             ...this.getEventData(event),
             clientHeight,

package/src/main/addon/DragDrop.mjs

@@ -196,17 +196,13 @@ class DragDrop extends Base {
     }
 
     /**
-     * @param {Object} event
+     * @param {Event} event
      */
     onDragEnd(event) {
         let me          = this,
             parsedEvent = me.getEventData(event),
             isDrop      = me.pathIncludesDropZone(parsedEvent.targetPath);
 
-        DomAccess.setBodyCls({
-            remove: ['neo-unselectable']
-        });
-
         if (me.bodyCursorStyle) {
             DomAccess.setStyle({
                 id   : 'document.body',
@@ -254,7 +250,7 @@ class DragDrop extends Base {
     }
 
     /**
-     * @param {Object} event
+     * @param {Event} event
      */
     onDragMove(event) {
         let me        = this,
@@ -290,17 +286,14 @@ class DragDrop extends Base {
                 }
             }
 
-            if (!me.moveHorizontal) {
-                left = me.dragProxyRect.x
+            if (me.moveHorizontal) {
+                me.dragProxyElement.style.left = `${left}px`
             }
 
-            me.dragProxyElement.style.left = `${left}px`;
 
-            if (!me.moveVertical) {
-                top = me.dragProxyRect.y
+            if (me.moveVertical) {
+                me.dragProxyElement.style.top = `${top}px`
             }
-
-            me.dragProxyElement.style.top = `${top}px`
         }
 
         if (!me.dragProxyElement || me.alwaysFireDragMove) {
@@ -318,16 +311,12 @@ class DragDrop extends Base {
     }
 
     /**
-     * @param {Object} event
+     * @param {Event} event
      */
     onDragStart(event) {
         let me   = this,
             rect = event.target.getBoundingClientRect();
 
-        DomAccess.setBodyCls({
-            add: ['neo-unselectable']
-        });
-
         Object.assign(me, {
             dragProxyRect: rect,
             offsetX      : event.detail.clientX - rect.left,
@@ -341,7 +330,7 @@ class DragDrop extends Base {
     }
 
     /**
-     * @param {Object} event
+     * @param {Event} event
      */
     onMouseEnter(event) {
         let me = this;
@@ -356,7 +345,7 @@ class DragDrop extends Base {
     }
 
     /**
-     * @param {Object} event
+     * @param {Event} event
      */
     onMouseLeave(event) {
         let me = this;

package/src/selection/grid/BaseModel.mjs

@@ -20,7 +20,7 @@ class BaseModel extends Model {
      * @member {String[]} dataFields
      */
     get dataFields() {
-        return this.view.parent.columns.map(c => c.dataField)
+        return this.view.parent.columns.map(column => column.dataField)
     }
 }
 

package/src/selection/table/BaseModel.mjs

@@ -14,6 +14,14 @@ class BaseModel extends Model {
          */
         className: 'Neo.selection.table.BaseModel'
     }
+
+    /**
+     * Convenience shortcut
+     * @member {String[]} dataFields
+     */
+    get dataFields() {
+        return this.view.parent.columns.map(column => column.dataField)
+    }
 }
 
 export default Neo.setupClass(BaseModel);

package/src/selection/table/CellColumnModel.mjs

@@ -1,6 +1,5 @@
-import CellModel   from './CellModel.mjs';
-import ColumnModel from './ColumnModel.mjs';
-import VDomUtil    from '../../util/VDom.mjs';
+import CellModel from './CellModel.mjs';
+import VDomUtil  from '../../util/VDom.mjs';
 
 /**
  * @class Neo.selection.table.CellColumnModel
@@ -41,7 +40,7 @@ class CellColumnModel extends CellModel {
     deselectAllCells(silent) {
         let me      = this,
             cellIds = [...me.selectedColumnCellIds],
-            {view}  = me;
+            {view}  = me
 
         cellIds.forEach(cellId => {
             me.deselect(cellId, true, me.selectedColumnCellIds, me.selectedColumnCellCls)
@@ -54,14 +53,15 @@ class CellColumnModel extends CellModel {
      * @param {Object} data
      */
     onCellClick(data) {
-        let me              = this,
-            {headerToolbar} = me.view.parent,
-            id              = data.data.currentTarget,
-            columnNodeIds, index;
+        let me     = this,
+            {view} = me,
+            cellId = data.data.currentTarget,
+            columnNodeIds, dataField, index;
 
-        if (id) {
-            index         = ColumnModel.getColumnIndex(id, headerToolbar.items);
-            columnNodeIds = VDomUtil.getColumnNodesIds(me.view.vdom, index);
+        if (cellId) {
+            dataField     = view.getDataField(cellId);
+            index         = view.getColumn(dataField, true);
+            columnNodeIds = VDomUtil.getColumnNodesIds(view.vdom, index);
 
             me.deselectAllCells(true);
             me.select(columnNodeIds, me.selectedColumnCellIds, me.selectedColumnCellCls)
@@ -71,29 +71,31 @@ class CellColumnModel extends CellModel {
     }
 
     /**
-     * @param {Object} data
      * @param {Number} step
      */
-    onNavKeyColumn(data, step) {
-        let me            = this,
-            idArray       = ColumnModel.getCellId(data.path).split('__'),
-            currentColumn = idArray[2],
-            {view}        = me,
-            dataFields    = view.parent.columns.map(c => c.dataField),
-            newIndex      = (dataFields.indexOf(currentColumn) + step) % dataFields.length,
-            columnNodeIds, tbodyNode;
-
-        while (newIndex < 0) {
-            newIndex += dataFields.length
+    onNavKeyColumn(step) {
+        let me                 = this,
+            {dataFields, view} = me,
+            columnNodeIds, currentColumn, index;
+
+        if (me.hasSelection()) {
+            currentColumn = view.getDataField(me.items[0])
+        } else {
+            currentColumn = dataFields[0]
+        }
+
+        index = (dataFields.indexOf(currentColumn) + step) % dataFields.length;
+
+        while (index < 0) {
+            index += dataFields.length
         }
 
-        tbodyNode     = VDomUtil.find(me.view.vdom, {tag: 'tbody'}).vdom;
-        columnNodeIds = VDomUtil.getColumnNodesIds(tbodyNode, newIndex);
+        columnNodeIds = VDomUtil.getColumnNodesIds(view.vdom, index);
 
         me.deselectAllCells(true);
         me.select(columnNodeIds, me.selectedColumnCellIds, me.selectedColumnCellCls);
 
-        super.onNavKeyColumn(data, step)
+        super.onNavKeyColumn(step)
     }
 
     /**

package/src/selection/table/CellColumnRowModel.mjs

@@ -1,5 +1,4 @@
 import CellRowModel from './CellRowModel.mjs';
-import ColumnModel  from './ColumnModel.mjs';
 import VDomUtil     from '../../util/VDom.mjs';
 
 /**
@@ -54,14 +53,15 @@ class CellColumnRowModel extends CellRowModel {
      * @param {Object} data
      */
     onCellClick(data) {
-        let me              = this,
-            {headerToolbar} = me.view.parent,
-            id              = data.data.currentTarget,
-            columnNodeIds, index;
+        let me     = this,
+            {view} = me,
+            cellId = data.data.currentTarget,
+            columnNodeIds, dataField, index;
 
-        if (id) {
-            index         = ColumnModel.getColumnIndex(id, headerToolbar.items);
-            columnNodeIds = VDomUtil.getColumnNodesIds(me.view.vdom, index);
+        if (cellId) {
+            dataField     = view.getDataField(cellId);
+            index         = view.getColumn(dataField, true);
+            columnNodeIds = VDomUtil.getColumnNodesIds(view.vdom, index);
 
             me.deselectAllCells(true);
             me.select(columnNodeIds, me.selectedColumnCellIds, me.selectedColumnCellCls)
@@ -71,29 +71,31 @@ class CellColumnRowModel extends CellRowModel {
     }
 
     /**
-     * @param {Object} data
      * @param {Number} step
      */
-    onNavKeyColumn(data, step) {
-        let me            = this,
-            idArray       = ColumnModel.getCellId(data.path).split('__'),
-            currentColumn = idArray[2],
-            {view}        = me,
-            dataFields    = view.parent.columns.map(c => c.dataField),
-            newIndex      = (dataFields.indexOf(currentColumn) + step) % dataFields.length,
-            columnNodeIds, tbodyNode;
-
-        while (newIndex < 0) {
-            newIndex += dataFields.length
+    onNavKeyColumn(step) {
+        let me                 = this,
+            {dataFields, view} = me,
+            columnNodeIds, currentColumn, index;
+
+        if (me.hasSelection()) {
+            currentColumn = view.getDataField(me.items[0])
+        } else {
+            currentColumn = dataFields[0]
+        }
+
+        index = (dataFields.indexOf(currentColumn) + step) % dataFields.length;
+
+        while (index < 0) {
+            index += dataFields.length
         }
 
-        tbodyNode     = VDomUtil.find(me.view.vdom, {tag: 'tbody'}).vdom;
-        columnNodeIds = VDomUtil.getColumnNodesIds(tbodyNode, newIndex);
+        columnNodeIds = VDomUtil.getColumnNodesIds(view.vdom, index);
 
         me.deselectAllCells(true);
         me.select(columnNodeIds, me.selectedColumnCellIds, me.selectedColumnCellCls);
 
-        super.onNavKeyColumn(data, step)
+        super.onNavKeyColumn(step)
     }
 
     /**