neo.mjs 8.19.0 → 8.20.0

package/apps/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='8.19.0'
+         * @member {String} version='8.20.0'
          */
-        version: '8.19.0'
+        version: '8.20.0'
     }
 
     /**

package/apps/portal/view/home/FooterContainer.mjs

@@ -107,7 +107,7 @@ class FooterContainer extends Container {
             }, {
                 module: Component,
                 cls   : ['neo-version'],
-                html  : 'v8.19.0'
+                html  : 'v8.20.0'
             }]
         }],
         /**

package/examples/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='8.19.0'
+         * @member {String} version='8.20.0'
          */
-        version: '8.19.0'
+        version: '8.20.0'
     }
 
     /**

package/examples/grid/bigData/ControlsContainer.mjs

@@ -36,15 +36,10 @@ class ControlsContainer extends Container {
             },
 
             items: [{
-                ntype: 'component',
-                html : '<a class="github-button" href="https://github.com/neomjs/neo" data-size="large" data-show-count="true" aria-label="Star neomjs/neo on GitHub">Star</a>',
-                style: {marginLeft: 'auto'}
-            }, {
                 labelText : 'Amount Rows',
                 labelWidth: 120,
                 listeners : {change: 'up.onAmountRowsChange'},
                 store     : ['1000', '5000', '10000', '20000', '50000'],
-                style     : {marginTop: '2em'},
                 value     : '1000',
                 width     : 200
             }, {
@@ -103,20 +98,6 @@ class ControlsContainer extends Container {
         return this.parent.getItem('grid')
     }
 
-    /**
-     *
-     */
-    onConstructed() {
-        super.onConstructed();
-
-        Neo.main.DomAccess.addScript({
-            async   : true,
-            defer   : true,
-            src     : 'https://buttons.github.io/buttons.js',
-            windowId: this.windowId
-        })
-    }
-
     /**
      * @param {Object} data
      */

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "8.19.0",
+    "version": "8.20.0",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {

package/resources/scss/src/grid/View.scss

@@ -9,15 +9,6 @@
     &:focus {
         outline: none;
     }
-
-    .neo-grid-stretcher {
-        height        : 1px;
-        position      : absolute;
-        top           : 0;
-        visibility    : hidden;
-        width         : 1px;
-        z-index       : 1001; // Above the column dragProxy element
-    }
 }
 
 .neo-grid-view {
@@ -68,12 +59,6 @@
             }
         }
 
-        &:hover {
-            .neo-grid-cell {
-                background-color: var(--grid-cell-background-color-hover);
-            }
-        }
-
          // selection.RowModel
          &.neo-selected {
              .neo-grid-cell {
@@ -111,6 +96,16 @@
      }
 }
 
+.neo-mouse {
+    .neo-grid-row {
+        &:hover {
+            .neo-grid-cell {
+                background-color: var(--grid-cell-background-color-hover);
+            }
+        }
+    }
+}
+
 .neo-selection-cellrowmodel,
 .neo-selection-cellcolumnrowmodel{
     .neo-grid-row {

package/resources/scss/src/grid/header/Button.scss

@@ -72,5 +72,10 @@
         color         : var(--grid-header-button-color);
         pointer-events: none;
         text-transform: none;
+
+        @media (max-width: 600px) {
+            // Default Buttons use a slightly bigger font-size, which does not make sense here
+            font-size: var(--button-text-font-size);
+        }
     }
 }

package/src/DefaultConfig.mjs

@@ -262,12 +262,12 @@ const DefaultConfig = {
     useVdomWorker: true,
     /**
      * buildScripts/injectPackageVersion.mjs will update this value
-     * @default '8.19.0'
+     * @default '8.20.0'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '8.19.0'
+    version: '8.20.0'
 };
 
 Object.assign(DefaultConfig, {

package/src/draggable/grid/header/toolbar/SortZone.mjs

@@ -87,7 +87,7 @@ class SortZone extends BaseSortZone {
                 {...config.vdom, cls: ['neo-grid-header-toolbar', 'neo-toolbar']},
                 {cls: ['neo-grid-view-wrapper'], id: viewWrapperId, cn: [
                     {cls: ['neo-grid-view'], cn: rows},
-                    {cls: ['neo-grid-scrollbar'], style: {height: view.vdom.cn[1].height}}
+                    {cls: ['neo-grid-scrollbar'], style: {height: view.vdom.cn[0].height}}
                 ]}
             ]}
         ]};

package/src/grid/Container.mjs

@@ -114,9 +114,22 @@ class GridContainer extends BaseContainer {
 
     /**
      * We do not need the first event to trigger logic, since afterSetMounted() handles this
-     * @member {Boolean}} initialResizeEvent=true
+     * @member {Boolean} initialResizeEvent=true
+     * @protected
      */
     initialResizeEvent = true
+    /**
+     * Flag for identifying the ownership of a touchmove operation
+     * @member {Boolean} isTouchMoveOwner=false
+     * @protected
+     */
+    isTouchMoveOwner = false
+    /**
+     * Storing touchmove position for mobile envs
+     * @member {Number} lastTouchY=0
+     * @protected
+     */
+    lastTouchY = 0
 
     /**
      * Convenience method to access the Neo.grid.header.Toolbar
@@ -521,14 +534,36 @@ class GridContainer extends BaseContainer {
      * @param {Object} data
      * @param {Number} data.scrollLeft
      * @param {Object} data.target
+     * @param {Object} data.touches
      */
-    onScroll({scrollLeft, target}) {
-        let me = this;
+    onScroll({scrollLeft, target, touches}) {
+        let me = this,
+            deltaY, lastTouchY;
 
         // We must ignore events for grid-scrollbar
         if (target.id.includes('grid-container')) {
             me.headerToolbar.scrollLeft = scrollLeft;
-            me.view.scrollPosition = {x: scrollLeft, y: me.view.scrollPosition.y}
+            me.view.scrollPosition = {x: scrollLeft, y: me.view.scrollPosition.y};
+
+            if (touches) {
+                if (!me.view.isTouchMoveOwner) {
+                    me.isTouchMoveOwner = true
+                }
+
+                if (me.isTouchMoveOwner) {
+                    lastTouchY = touches.lastTouch.clientY - touches.firstTouch.clientY;
+                    deltaY     = me.lastTouchY - lastTouchY;
+
+                    deltaY !== 0 && Neo.main.DomAccess.scrollTo({
+                        direction: 'top',
+                        id       : me.view.vdom.id,
+                        value    : me.view.scrollPosition.y + deltaY
+                    })
+
+                    me.lastTouchY = lastTouchY
+                }
+            }
+
         }
     }
 

package/src/grid/Scrollbar.mjs

@@ -53,6 +53,7 @@ class GridScrollbar extends Component {
             ScrollSync.register({
                 fromId: me.parent.view.vdom.id,
                 toId  : me.id,
+                twoWay: !Neo.config.useTouchEvents, // Syncing the scroller back to the view affects mobile scrolling
                 ...params
             })
         } else {

package/src/grid/View.mjs

@@ -125,11 +125,22 @@ class GridView extends Component {
          */
         _vdom:
         {tabIndex: '-1', cn: [
-            {cn: []},
-            {cls: 'neo-grid-stretcher'}
+            {cn: []}
         ]}
     }
 
+    /**
+     * Flag for identifying the ownership of a touchmove operation
+     * @member {Boolean} isTouchMoveOwner=false
+     * @protected
+     */
+    isTouchMoveOwner = false
+    /**
+     * Storing touchmove position for mobile envs
+     * @member {Number} lastTouchX=0
+     * @protected
+     */
+    lastTouchX = 0
     /**
      * @member {Number|null}} scrollTimeoutId=null
      */
@@ -157,8 +168,10 @@ class GridView extends Component {
         let me = this;
 
         me.addDomListeners([{
-            scroll: me.onScroll,
-            scope : me
+            scroll     : me.onScroll,
+            touchcancel: me.onTouchCancel,
+            touchend   : me.onTouchEnd,
+            scope      : me
         }, {
             click   : me.onCellClick,
             dblclick: me.onCellDoubleClick,
@@ -207,7 +220,7 @@ class GridView extends Component {
             let me = this;
 
             me.vdom.width = value + 'px';
-            me.vdom.cn[1].width = value + 'px';
+            me.vdom.cn[0].width = value + 'px';
             me.update()
         }
     }
@@ -827,8 +840,9 @@ class GridView extends Component {
      * Only triggers for vertical scrolling
      * @param {Object} data
      */
-    onScroll(data) {
-        let me = this;
+    onScroll({scrollTop, touches}) {
+        let me = this,
+            deltaX, lastTouchX;
 
         me.scrollTimeoutId && clearTimeout(me.scrollTimeoutId);
 
@@ -838,8 +852,27 @@ class GridView extends Component {
 
         me.set({
             isScrolling   : true,
-            scrollPosition: {x: me.scrollPosition.x, y: data.scrollTop}
-        })
+            scrollPosition: {x: me.scrollPosition.x, y: scrollTop}
+        });
+
+        if (touches) {
+            if (!me.parent.isTouchMoveOwner) {
+                me.isTouchMoveOwner = true
+            }
+
+            if (me.isTouchMoveOwner) {
+                lastTouchX = touches.lastTouch.clientX - touches.firstTouch.clientX;
+                deltaX     = me.lastTouchX - lastTouchX;
+
+                deltaX !== 0 && Neo.main.DomAccess.scrollTo({
+                    direction: 'left',
+                    id       : me.parent.id,
+                    value    : me.scrollPosition.x + deltaX
+                })
+
+                me.lastTouchX = lastTouchX
+            }
+        }
     }
 
     /**
@@ -896,6 +929,34 @@ class GridView extends Component {
         needsUpdate && me.update()
     }
 
+    /**
+     * @param {Object} data
+     */
+    onTouchCancel(data) {
+        let me       = this,
+            {parent} = me;
+
+        me.isTouchMoveOwner = false;
+        me.lastTouchX       = 0;
+
+        parent.isTouchMoveOwner = false;
+        parent.lastTouchY       = 0
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onTouchEnd(data) {
+        let me       = this,
+            {parent} = me;
+
+        me.isTouchMoveOwner = false;
+        me.lastTouchX       = 0;
+
+        parent.isTouchMoveOwner = false;
+        parent.lastTouchY       = 0
+    }
+
     /**
      *
      */
@@ -905,7 +966,7 @@ class GridView extends Component {
             {rowHeight}  = me;
 
         if (countRecords > 0 && rowHeight > 0) {
-            me.vdom.cn[1].height = `${(countRecords + 1) * rowHeight}px`;
+            me.vdom.cn[0].height = `${(countRecords + 1) * rowHeight}px`;
             me.update()
         }
     }

package/src/main/DomEvents.mjs

@@ -590,17 +590,29 @@ class DomEvents extends Base {
      * @param {Event} event
      */
     onScroll(event) {
-        let {clientHeight, clientWidth, scrollLeft, scrollTop} = event.target;
+        let me = this,
+            {firstTouch, lastTouch} = me,
+            {clientHeight, clientWidth, scrollLeft, scrollTop} = event.target,
+            data;
 
         event.preventDefault();
 
-        this.sendMessageToApp({
-            ...this.getEventData(event),
+        data = {
+            ...me.getEventData(event),
             clientHeight,
             clientWidth,
             scrollLeft,
             scrollTop
-        })
+        };
+
+        if (firstTouch) {
+            data.touches = {
+                firstTouch: {clientX: firstTouch.clientX, clientY: firstTouch.clientY},
+                lastTouch : {clientX: lastTouch .clientX, clientY: lastTouch .clientY}
+            }
+        }
+
+        me.sendMessageToApp(data)
     }
 
     /**

package/src/main/mixin/TouchDomEvents.mjs

@@ -22,7 +22,8 @@ class TouchDomEvents extends Base {
         let me = this;
 
         me.sendMessageToApp(me.getEventData(event));
-        me.lastTouch = null
+        me.firstTouch = null;
+        me.lastTouch  = null
     }
 
     /**
@@ -32,7 +33,8 @@ class TouchDomEvents extends Base {
         let me = this;
 
         me.sendMessageToApp(me.getEventData(event));
-        me.lastTouch = null
+        me.firstTouch = null;
+        me.lastTouch  = null
     }
 
     /**
@@ -80,7 +82,8 @@ class TouchDomEvents extends Base {
     onTouchStart(event) {
         let me = this;
 
-        me.lastTouch = event.touches[0];
+        me.firstTouch = event.touches[0];
+        me.lastTouch  = event.touches[0];
 
         me.sendMessageToApp(me.getEventData(event))
     }