neo.mjs 8.19.1 → 8.20.1

package/apps/ServiceWorker.mjs

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

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

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

package/examples/ServiceWorker.mjs

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

package/examples/grid/bigData/ControlsContainer.mjs

@@ -22,11 +22,13 @@ class ControlsContainer extends Container {
          */
         items: [{
             ntype  : 'button',
-            cls    : ['sections-container-button'],
+            cls    : ['controls-container-button'],
             handler: 'up.onControlsToggleButtonClick',
             iconCls: 'fas fa-bars'
         }, {
             module: Container,
+            cls   : ['neo-examples-bigdata-controls-container-content'],
+            layout: 'vbox',
 
             itemDefaults: {
                 module      : ComboBox,
@@ -87,7 +89,7 @@ class ControlsContainer extends Container {
         /**
          * @member {Object} layout={ntype:'vbox'}
          */
-        layout: {ntype: 'vbox'},
+        layout: {ntype: 'fit'},
         /**
          * @member {String} tag='aside'
          */

package/package.json

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

package/resources/scss/src/examples/grid/bigData/ControlsContainer.scss

@@ -1,38 +1,49 @@
 .neo-examples-bigdata-controls-container {
-    border          : none; // reset the default 1px
-    bottom          : .5em;
-    box-shadow      : 0 5px 10px rgba(75,75,75,.3);
-    display         : block;
-    flex-shrink     : 0;
-    min-width       : 235px;
-    overflow        : visible;
-    padding         : .5em 1em;
-    position        : absolute;
-    right           : -235px;
-    top             : .5em;
-    transition      : right 250ms ease-out;
-    width           : 235px;
-    z-index         : 100;
+    border     : none; // reset the default 1px
+    bottom     : .5em;
+    display    : block;
+    flex-shrink: 0;
+    min-width  : 235px;
+    overflow   : visible;
+    position   : absolute;
+    right      : -235px;
+    top        : .5em;
+    transition : right 250ms ease-out;
+    width      : 235px;
+    z-index    : 100;
+
+    .neo-examples-bigdata-controls-container-content {
+        box-shadow: 0 5px 10px rgba(75,75,75,.3);
+        opacity   : 0;
+        padding   : .5em 1em;
+        transition: opacity 250ms ease-out;
+    }
 
     &.neo-expanded {
         right: 0;
+
+        .neo-examples-bigdata-controls-container-content {
+            opacity: 1;
+        }
     }
 
-    .sections-container-button {
-        //background-color: #fff;
-        border-radius   : 8px;
-        box-shadow      : 0 5px 10px rgba(75,75,75,.3);
-        display         : flex;
-        height          : 35px;
-        min-width       : 35px;
-        position        : absolute;
-        left            : -53px;
-        top             : .2em;
-        width           : 35px;
+    .controls-container-button {
+        border-radius: 8px;
+        box-shadow   : 0 5px 10px rgba(75,75,75,.3);
+        display      : flex;
+        height       : 35px;
+        min-width    : 35px;
+        position     : absolute;
+        left         : -53px;
+        top          : .2em;
+        width        : 35px;
 
         .neo-button-glyph {
-            // color    : #000; // required for mobile
             font-size: 13px;
         }
+
+        .neo-button-ripple-wrapper {
+            border-radius: 8px;
+        }
     }
 }

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

@@ -59,12 +59,6 @@
             }
         }
 
-        &:hover {
-            .neo-grid-cell {
-                background-color: var(--grid-cell-background-color-hover);
-            }
-        }
-
          // selection.RowModel
          &.neo-selected {
              .neo-grid-cell {
@@ -102,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.1'
+     * @default '8.20.1'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '8.19.1'
+    version: '8.20.1'
 };
 
 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/View.mjs

@@ -129,6 +129,18 @@ class GridView extends Component {
         ]}
     }
 
+    /**
+     * 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
      */
@@ -156,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,
@@ -826,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);
 
@@ -837,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
+            }
+        }
     }
 
     /**
@@ -895,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
+    }
+
     /**
      *
      */

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))
     }