neo.mjs 6.20.0 → 6.21.0

package/apps/ServiceWorker.mjs

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

package/examples/ServiceWorker.mjs

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

package/package.json

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

package/resources/scss/src/code/LivePreview.scss

@@ -1,5 +1,8 @@
 .neo-code-live-preview {
-    margin-bottom: 2em;
+    margin-bottom             : 2em;
+    transition-duration       : .3s;
+    transition-property       : height, left, top, width;
+    transition-timing-function: ease-out;
 
     .live-preview-container {
         border-radius: calc(var(--cmp-tab-strip-height) + var(--cmp-button-borderradius));

package/src/DefaultConfig.mjs

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

package/src/code/LivePreview.mjs

@@ -44,6 +44,10 @@ class LivePreview extends Container {
          * @member {Boolean} disableRunSource=false
          */
         disableRunSource: false,
+        /**
+         * @member {Boolean} enableFullscreen=true
+         */
+        enableFullscreen: true,
         /**
          * @member {Number} height=400
          */
@@ -127,6 +131,73 @@ class LivePreview extends Container {
         return this.beforeSetEnumValue(value, oldValue, 'activeView')
     }
 
+    /**
+     * @param {Object} data
+     */
+    async collapseExpand(data) {
+        let me       = this,
+            button   = data.component,
+            collapse = button.iconCls === 'fas fa-compress',
+            {vdom}   = me,
+            rect;
+
+        button.iconCls = collapse ? 'fas fa-expand' : 'fas fa-compress';
+
+        if (collapse) {
+            button.iconCls = 'fas fa-expand';
+
+            rect = me.collapseRect;
+
+            delete me.collapseRect;
+
+            Object.assign(vdom.style, {
+                height  : rect.height + 'px',
+                left    : rect.x      + 'px',
+                top     : rect.y      + 'px',
+                width   : rect.width  + 'px'
+            });
+
+            me.update();
+
+            await me.timeout(300);
+
+            Object.assign(vdom.style, {
+                position: null,
+                zIndex  : null
+            })
+        } else {
+            button.iconCls = 'fas fa-compress';
+
+            rect = await me.getDomRect(me.id);
+
+            me.collapseRect = rect;
+
+            vdom.style = vdom.style || {};
+
+            Object.assign(vdom.style, {
+                height  : rect.height + 'px',
+                left    : rect.x      + 'px',
+                position: 'fixed',
+                top     : rect.y      + 'px',
+                width   : rect.width  + 'px',
+                zIndex  : 100
+            });
+
+            me.update();
+
+            await me.timeout(50);
+
+            Object.assign(vdom.style, {
+                height: '100%',
+                left  : 0,
+                top   : 0,
+                width : '100%'
+            })
+        }
+
+        me.update()
+    }
+
     /**
      *
      */
@@ -269,12 +340,20 @@ class LivePreview extends Container {
      * @param {Number} data.value
      */
     onActiveIndexChange(data) {
+        let me                   = this,
+            collapseExpandButton = me.getReference('collapse-expand-button'),
+            hidden               = data.value !== 1;
+
         if (data.item.reference === 'preview') {
-            this.doRunSource()
+            me.doRunSource()
         }
 
-        this.getReference('popout-window-button').hidden = data.value !== 1
-        this.disableRunSource = false;
+        if (collapseExpandButton) {
+            collapseExpandButton.hidden = hidden
+        }
+
+        me.getReference('popout-window-button').hidden = hidden
+        me.disableRunSource = false;
     }
 
     /**
@@ -284,18 +363,34 @@ class LivePreview extends Container {
         super.onConstructed();
 
         let me             = this,
+            items          = [],
             {tabContainer} = me;
 
-        // we want to add a normal (non-header) button
-        tabContainer.getTabBar().add({
+        if (me.enableFullscreen) {
+            items.push({
+                handler  : me.collapseExpand.bind(me),
+                hidden   : tabContainer.activeIndex !== 1,
+                iconCls  : 'fas fa-expand',
+                reference: 'collapse-expand-button',
+                ui       : 'ghost'
+            })
+        }
+
+        items.push({
             handler  : me.popoutPreview.bind(me),
             hidden   : tabContainer.activeIndex !== 1,
             iconCls  : 'far fa-window-maximize',
             reference: 'popout-window-button',
-            style    : {marginLeft: 'auto'},
             ui       : 'ghost'
         });
 
+        items[0].style = {marginLeft: 'auto'};
+
+        // we want to add a normal (non-header) button
+        tabContainer.getTabBar().add(items);
+
+        tabContainer.getTabBar().update();
+
         tabContainer.on('activeIndexChange', me.onActiveIndexChange, me);
 
         // changing the activeView initially will not trigger our onActiveIndexChange() logic

package/src/component/Helix.mjs

@@ -841,13 +841,6 @@ class Helix extends Component {
         }
     }
 
-    /**
-     * @param {Object} data
-     */
-    onTouchMove(data) {
-        this.onMouseWheel(data)
-    }
-
     /**
      * @param {String[]} value
      * @param {String[]} oldValue
@@ -879,6 +872,16 @@ class Helix extends Component {
         this.createItems()
     }
 
+    /**
+     * @param {Object} data
+     */
+    onTouchMove(data) {
+        data.deltaX *= 1.5;
+        data.deltaY *= 3;
+
+        this.onMouseWheel(data)
+    }
+
     /**
      * @protected
      */

package/src/main/DomEvents.mjs

@@ -27,7 +27,7 @@ const touchEvents = [
     {name: 'touchend',    handler: 'onTouchEnd'},
     {name: 'touchenter',  handler: 'onTouchEnter'},
     {name: 'touchleave',  handler: 'onTouchLeave'},
-    {name: 'touchmove',   handler: 'onTouchMove'},
+    {name: 'touchmove',   handler: 'onTouchMove', options: {passive: false}},
     {name: 'touchstart',  handler: 'onTouchStart'}
 ];
 
@@ -612,7 +612,7 @@ class DomEvents extends Base {
      */
     onScroll(event) {
         let {clientHeight, clientWidth, scrollLeft, scrollTop} = event.target;
-
+event.preventDefault();
         this.sendMessageToApp({
             ...this.getEventData(event),
             clientHeight,

package/src/main/mixin/TouchDomEvents.mjs

@@ -66,7 +66,12 @@ class TouchDomEvents extends Base {
         }
 
         me.sendMessageToApp(data);
-        me.lastTouch = touch
+
+        me.lastTouch = touch;
+
+        if (me.testPathInclusion(event, ['neo-helix'])) {
+            event.preventDefault()
+        }
     }
 
     /**