neo.mjs 6.15.3 → 6.15.5

package/apps/ServiceWorker.mjs

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

package/apps/portal/view/Viewport.mjs

@@ -1,13 +1,23 @@
 import BaseViewport       from '../../../src/container/Viewport.mjs';
 import Container          from '../../../src/container/Base.mjs';
 import HeaderToolbar      from './HeaderToolbar.mjs';
+import NeoArray           from '../../../src/util/Array.mjs';
 import ViewportController from './ViewportController.mjs';
+import ViewportModel      from './ViewportModel.mjs';
 
 /**
  * @class Portal.view.Viewport
  * @extends Neo.container.Viewport
  */
 class Viewport extends BaseViewport {
+    /**
+     * Valid values for size
+     * @member {String[]} sizes=['large','medium','small','x-small',null]
+     * @protected
+     * @static
+     */
+    static sizes = ['large', 'medium', 'small', 'x-small', null]
+
     static config = {
         /**
          * @member {String} className='Portal.view.Viewport'
@@ -35,23 +45,76 @@ class Viewport extends BaseViewport {
                 {module: () => import('./blog/Container.mjs')},
                 {module: () => import('../../../docs/app/view/MainContainer.mjs')}
             ]
-        }]
+        }],
+        /**
+         * @member {Neo.model.Component} model=ViewportModel
+         */
+        model: ViewportModel,
+        /**
+         * Values are: large, medium, small, xSmall
+         * @member {String|null} size_=null
+         */
+        size_: null
+    }
+
+    /**
+     * @param {Object} config
+     */
+    construct(config) {
+        super.construct(config);
+        this.addDomListeners([{resize: this.onResize, scope: this}])
     }
 
     /**
-     *
+     * Triggered after the size config got changed
+     * @param {String|null} value
+     * @param {String|null} oldValue
+     * @protected
      */
-    async onConstructed() {
-        super.onConstructed();
+    afterSetSize(value, oldValue) {
+        if (value) {
+            let me  = this,
+                cls = me.cls;
 
-        let me           = this,
-            data         = await Neo.Main.getByPath({path: 'location.search'}),
-            searchString = data?.substr(1),
-            search       = searchString ? JSON.parse(`{"${decodeURI(searchString.replace(/&/g, "\",\"").replace(/=/g, "\":\""))}"}`) : {};
+            NeoArray.remove(cls, 'portal-size-' + oldValue);
+            NeoArray.add(   cls, 'portal-size-' + value);
+            me.cls = cls;
 
-        me.deck = search.deck || 'learnneo';
+            me.model.setData({size: value})
+        }
+    }
+
+    /**
+     * Triggered before the size config gets changed
+     * @param {String|null} value
+     * @param {String|null} oldValue
+     * @returns {String|null}
+     * @protected
+     */
+    beforeSetSize(value, oldValue) {
+        return this.beforeSetEnumValue(value, oldValue, 'size')
+    }
+
+    /**
+     * @param {Number} width
+     * @returns {String}
+     */
+    getSize(width) {
+        if (width <=  640) {return 'x-small'}
+        if (width <= 1024) {return 'small'}
+        if (width <= 1296) {return 'medium'}
+        return 'large'
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onResize(data) {
+        let me = this;
 
-        me.addCls(me.deck)
+        if (me.id === data.id) {
+            me.size = me.getSize(data.borderBoxSize.inlineSize)
+        }
     }
 }
 

package/apps/portal/view/ViewportModel.mjs

@@ -0,0 +1,29 @@
+import Component from '../../../src/model/Component.mjs';
+
+/**
+ * @class Portal.view.ViewportModel
+ * @extends Neo.model.Component
+ */
+class ViewportModel extends Component {
+    static config = {
+        /**
+         * @member {String} className='Portal.view.ViewportModel'
+         * @protected
+         */
+        className: 'Portal.view.ViewportModel',
+        /**
+         * @member {Object} data
+         */
+        data: {
+            /**
+             * Values are: large, medium, small, xSmall, null
+             * @member {String|null} size
+             */
+            size: null
+        }
+    }
+}
+
+Neo.setupClass(ViewportModel);
+
+export default ViewportModel;

package/apps/portal/view/learn/MainContainer.mjs

@@ -3,7 +3,7 @@ import ContentTreeList         from './ContentTreeList.mjs';
 import MainContainerController from './MainContainerController.mjs';
 import MainContainerModel      from './MainContainerModel.mjs';
 import PageContainer           from './PageContainer.mjs';
-import PageSectionsPanel       from './PageSectionsPanel.mjs';
+import PageSectionsContainer   from './PageSectionsContainer.mjs';
 import Splitter                from '../../../../src/component/Splitter.mjs';
 
 /**
@@ -30,6 +30,7 @@ class MainContainer extends Container {
          */
         items: [{
             module  : Container,
+            bind    : {hidden: data => data.size === 'x-small'},
             cls     : ['sidenav-container'],
             layout  : 'fit',
             minWidth: 350,
@@ -41,20 +42,16 @@ class MainContainer extends Container {
             }]
         }, {
             module      : Splitter,
+            bind        : {hidden: data => data.size === 'x-small'},
             cls         : ['main-content-splitter'],
             resizeTarget: 'previous',
             size        : 3
         }, {
             module: PageContainer
-        }, 
-        // {
-        //     module: Splitter,
-        //     cls   : ['main-content-splitter'],
-        //     size  : 3
-        // }, 
-        {
-            module   : PageSectionsPanel,
-            reference: 'page-sections-panel',
+        }, {
+            module   : PageSectionsContainer,
+            bind     : {hidden: data => data.size !== 'large'},
+            reference: 'page-sections-container',
             width    : 250
         }],
         /**

package/apps/portal/view/learn/MainContainerController.mjs

@@ -184,7 +184,7 @@ class MainContainerController extends Controller {
      * @param {Object} data
      */
     onIntersect(data) {
-        let panel    = this.getReference('page-sections-panel'),
+        let panel    = this.getReference('page-sections-container'),
             list     = panel.list,
             recordId = parseInt(data.data.recordId);
 

package/apps/portal/view/learn/PageSectionsContainer.mjs

@@ -0,0 +1,51 @@
+import Container        from '../../../../src/container/Base.mjs';
+import PageSectionsList from './PageSectionsList.mjs';
+
+/**
+ * @class Portal.view.learn.PageSectionsContainer
+ * @extends Neo.container.Base
+ */
+class PageSectionsContainer extends Container {
+    static config = {
+        /**
+         * @member {String} className='Portal.view.learn.PageSectionsContainer'
+         * @protected
+         */
+        className: 'Portal.view.learn.PageSectionsContainer',
+        /**
+         * @member {String[]} cls=['portal-page-sections-container']
+         */
+        cls: ['portal-page-sections-container'],
+        /**
+         * @member {Object[]} items
+         */
+        items: [{
+            vdom:
+            {cn: [
+                {tag: 'h3', html: 'On this page'}
+            ]}
+
+        }, {
+            module   : PageSectionsList,
+            reference: 'list'
+        }],
+        /**
+         * @member {Object} layout={ntype:'vbox'}
+         */
+        layout: {
+            ntype: 'vbox'
+        }
+    }
+
+    /**
+     * Convenience shortcut
+     * @member {Portal.view.learn.PageSectionsList} list
+     */
+    get list() {
+        return this.getReference('list')
+    }
+}
+
+Neo.setupClass(PageSectionsContainer);
+
+export default PageSectionsContainer;

package/examples/ServiceWorker.mjs

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

package/package.json

@@ -1,7 +1,7 @@
 
 {
     "name": "neo.mjs",
-    "version": "6.15.3",
+    "version": "6.15.5",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -44,16 +44,16 @@
     },
     "homepage": "https://neomjs.github.io/pages/",
     "devDependencies": {
-        "@fortawesome/fontawesome-free": "^6.5.1",
+        "@fortawesome/fontawesome-free": "^6.5.2",
         "autoprefixer": "^10.4.19",
         "chalk": "^5.3.0",
         "clean-webpack-plugin": "^4.0.0",
         "commander": "^12.0.0",
-        "cssnano": "^6.1.1",
+        "cssnano": "^6.1.2",
         "envinfo": "^7.11.1",
         "fs-extra": "^11.2.0",
         "highlightjs-line-numbers.js": "^2.8.0",
-        "inquirer": "^9.2.16",
+        "inquirer": "^9.2.17",
         "marked": "^12.0.1",
         "monaco-editor": "^0.47.0",
         "neo-jsdoc": "1.0.1",

package/resources/data/deck/learnneo/pages/2023-10-14T19-25-08-153Z.md

@@ -1,5 +1,3 @@
-## Introduction
-
 The purpose of this tutorial is to let you see the structure of a Neo.mjs workspace,
 and the structure of an application.
 

package/resources/data/deck/learnneo/pages/ComponentsAndContainers.md

@@ -1,5 +1,3 @@
-## Introduction
-
 Neo.mjs views are made up of components and containers. 
 
 A component is a visual widget, such as a button, label, or text field. A container is a visual 
@@ -88,7 +86,7 @@ class MainView extends Container {
         layout   : 'fit', // If no configs are needed, simply use the ntype of the layout
         items    : [{
             ntype: 'component',
-            style: {backgroundColor: 'lightgreen'}, // The camel-cased property converts to the hyphenated css style
+            style: {backgroundColor: 'lightgreen'}, // The camel-cased backgroundColor property converts to the hyphenated css style
         }]
     }
 }
@@ -98,7 +96,7 @@ Neo.setupClass(MainView);
 
 ### Vbox and hbox
 
-Items are arranged vertically or horizontally. On-axis and off-axis alignment can be specified.
+With `vbox` and `hbox`, items are arranged vertically or horizontally.
 
 <pre data-neo>
 import Button    from '../../../../src/button/Base.mjs';
@@ -125,7 +123,7 @@ Neo.setupClass(MainView);
 
 ### Card
 
-Having multiple child items, one of which is visible. 
+A card container has multiple child items, one of which is visible. 
 
 <pre data-neo>
 import Button    from '../../../../src/button/Base.mjs';
@@ -146,7 +144,7 @@ class MainView extends Base {
                 iconPosition: 'right',
                 handler: data => {
                     const container = data.component.up('container').getReference('cardContainer');
-                    container.layout.activeIndex = (container.layout.activeIndex +1) % container.items.length;
+                    container.layout.activeIndex = (container.layout.activeIndex + 1) % container.items.length;
                 }
             }]
         }, {
@@ -156,13 +154,13 @@ class MainView extends Base {
             flex: 1,
             items: [{
                 ntype : 'component',
-                style: {backgroundColor: 'lightsalmon'}, // The camel-cased property converts to the hyphated css style
+                style: {backgroundColor: 'lightsalmon'} // https://drafts.csswg.org/css-color/#named-colors
             }, {
                 ntype : 'component',
-                style: {backgroundColor: 'darkseagreen'} // https://drafts.csswg.org/css-color/#named-colors
+                style: {backgroundColor: 'darkseagreen'} // Who came up with these names?
             }, {
                 ntype : 'component',
-                style: {backgroundColor: 'cornflowerblue'} // Who came up with these names?
+                style: {backgroundColor: 'cornflowerblue'} 
             }]
         }]
     }
@@ -174,7 +172,42 @@ Neo.setupClass(MainView);
 
 
 
-## Reusing containers
+## Reusing components
+
+Neo.mjs is class-based, and thus, any component or container can be defined as its own class, and reused like any
+other component in the framework.
+
+<pre data-neo>
+import Button    from '../../../../src/button/Base.mjs';
+// In practice this would be some handy reusable component
+class MySpecialButton extends Button {
+    static config = {
+        className: 'Example.view.MySpecialButton',
+        iconCls: 'far fa-face-grin-wide',
+        ui: 'ghost'
+    }
+}
+
+Neo.setupClass(MySpecialButton);
+
+
+import Container from '../../../../src/container/Base.mjs';
+
+class MainView extends Container {
+    static config = {
+        className: 'Example.view.MainView',
+        layout   : {ntype:'vbox', align:'start'},
+        items    : [{
+            module : Button,
+            iconCls: 'fa fa-home',
+            text   : 'A framework button'
+        }, {
+            module : MySpecialButton,
+            text   : 'My special button'
+        }]
+    }
+}
 
+Neo.setupClass(MainView);
+</pre>
 
-## Lifecycle methods

package/resources/data/deck/learnneo/pages/Config.md

@@ -1,5 +1,3 @@
-## Introduction 
-
 As you've probably noticed, Neo.mjs classes have a `static config` property. 
 
 The config describes properties you can specify as you create an instance of the class.

package/resources/data/deck/learnneo/pages/CustomComponents.md

@@ -0,0 +1,45 @@
+## Introduction
+
+Neo.mjs is class-based, which means you're free to extend any component (or any other Neo.mjs class).
+
+
+## Overriding ancestor configs
+
+## Introducing new configs
+
+## Lifecycle config properties
+
+<pre data-neo>
+import Button    from '../../../../src/button/Base.mjs';
+// In practice this would be some handy reusable component
+class MySpecialButton extends Button {
+    static config = {
+        className: 'Example.view.MySpecialButton',
+        iconCls: 'far fa-face-grin-wide',
+        ui: 'ghost'
+    }
+}
+
+Neo.setupClass(MySpecialButton);
+
+
+import Container from '../../../../src/container/Base.mjs';
+
+class MainView extends Container {
+    static config = {
+        className: 'Example.view.MainView',
+        layout   : {ntype:'vbox', align:'start'},
+        items    : [{
+            module : Button,
+            iconCls: 'fa fa-home',
+            text   : 'A framework button'
+        }, {
+            module : MySpecialButton,
+            text   : 'My special button'
+        }]
+    }
+}
+
+Neo.setupClass(MainView);
+</pre>
+

package/resources/data/deck/learnneo/pages/DescribingTheUI.md

@@ -1,5 +1,3 @@
-## Introduction 
-
 A Neo.mjs view is comprised of components and containers. A component is a visual widget, like a button,
 and a container is a visual collection of components. 
 

package/resources/data/deck/learnneo/pages/Earthquakes.md

@@ -1,5 +1,3 @@
-## Introduction 
-
 In this topic you'll create an application that fetches data on earthquakes in Iceland,
 and show the information in two views: a table, and a map.
 

package/resources/data/deck/learnneo/pages/Events.md

@@ -1,5 +1,3 @@
-## Introduction
-
 All components fire events. For example, form fields fire a `change` event, various 
 focus events, and others. Some other types fire events too, such as `Neo.data.Store`, 
 which fires a `load` event after the store is loaded with data.

package/resources/data/deck/learnneo/pages/Extending.md

@@ -1,4 +1,3 @@
-
 In theory, a Neo.mjs app could be defined in a single `.mjs` source file. But that would be very hard to 
 maintain, and any reusable configs would have to be duplicated. Instead, each of your views and reusable 
 widgets will be defined as its own class. The result is simpler views which are inherently reusable and easier 

package/resources/data/deck/learnneo/pages/References.md

@@ -1,5 +1,3 @@
-## Introduction
-
 Controllers often need to get references to components in order to update 
 the UI or access component properties. 
 There are two common ways of doing that:

package/resources/data/deck/learnneo/pages/Setup.md

@@ -1,5 +1,3 @@
-## Introduction
-
 Setting up Neo.mjs is pretty easy — all you have to do is confirm that you have some required
 software then follow a single npx script.
 

package/resources/data/deck/learnneo/pages/TestLivePreview.md

@@ -1,7 +1,6 @@
 To code a live preview, enclose the code in a `pre` tag with the `data-neo` attribute.
 
-<pre>&lt;pre data-neo> 
-&lt;/pre> 
+<code>&lt;pre data-neo>...&lt;/pre&gt; &lt;</code> 
 
 Imports are relative to the portal app running within the framework. That means
 Neo.mjs imports should be coded to go up four levels, then look into the `src`

package/resources/data/deck/learnneo/pages/Welcome.md

@@ -0,0 +1,60 @@
+Welcome to Neo.mjs! This set of topics contains information to help you use Neo.mjs. 
+
+
+## Topics
+
+### Why Neo?
+
+Describes technical and business reasons for using Neo.mjs
+
+### Getting Started
+
+Install instructions, along with fundamental concepts that are good to understand before diving into Neo.mjs.
+
+### Tutorials
+
+Hands-on tutorials where you'll code a few simple Neo.mjs applications.
+
+### Guides
+
+These are in-depth discussions of various topics.
+
+### Appendix
+
+You can ignore this! It just holds a site style sheet and other miscellanea.
+
+## Using these topics
+
+As you can see, the topics table of contents is on the left. Topic sections and sub-sections are shown on the right.
+
+Topics sometimes contain "disclosure" widgets, which are just <details> tags. These are used in cases 
+where we want to present high-level points and reveal details when the disclosure is expanded.
+
+<details>
+<summary>This is a disclosure widget</summary>
+<p style="background-color:lightgreen;padding:8px">This is a fascinating piece of information which is revealed when the widget is expanded.</p>
+</details>
+
+Topics also sometimes contain runnable examples. These are shown as tab panels with Source and Preview tabs.
+
+You can also launch the preview in a window by going to the Preview tab, then clicking on the little window
+icon on the right  <span class="far fa-xs fa-window-maximize"></span>. This web site is a Neo.mjs application,
+and the ability to launch browser windows &mdash; all integrated within a single app &mdash; is a unique feature of Neo.mjs!
+
+<pre data-neo>
+import Button    from '../../../../src/button/Base.mjs';
+import Container from '../../../../src/container/Base.mjs';
+
+class MainView extends Container {
+    static config = {
+        className: 'Example.view.MainView',
+        layout   : {ntype:'vbox', align:'start'},
+        items    : [{
+            module : Button,
+            text   : 'Button'
+        }]
+    }
+}
+
+Neo.setupClass(MainView);
+</pre>

package/resources/data/deck/learnneo/pages/WhyNeo-Multi-Threaded.md

@@ -6,6 +6,8 @@ to the main browser thread, resulting in:
 3. A <b>data</b> web-worker were HTTP and socket calls are run
 4. A <b>view</b> web-worker that manages delta updates
 
+<img src="https://s3.amazonaws.com/mjs.neo.learning.images/why/IndexHtmlFlow.png" width="120%"></img>
+
 The benefits of using web workers is that each runs in parallel its own thread. In a typical framework
 all code is run in the main thread, so processes compete for CPU cycles.
 

package/resources/data/deck/learnneo/pages/WhyNeo-Multi-Window.md

@@ -8,11 +8,11 @@ across windows, running seamlessly as a single application.
 
 <details>
 <summary><h3>Example</h3></summary>
-An easy way to show this is by looking at a code preview example. Below, click Preview, 
+An easy way to show this is by looking at a code preview example. In the example below, click Preview, 
 then click on the new window icon on the right side of the toolbar. This launches a new window 
 running the code. Even though it's running in a new window, it's still part of the app. 
-(In this case, the app is the Neo.mjs portal.) That means both the code in both windows seamlessly 
-share events, bound data, etc. &mdash; the code doesn't care that some code is running in a
+(In this case, the app is the web site you're looking at now.) That means both the code in both windows 
+seamlessly share events, data, etc. &mdash; the code doesn't care that some code is running in a
 separate window.
 <pre data-neo>
 import Button    from '../../../../src/button/Base.mjs';

package/resources/data/deck/learnneo/pages/WhyNeo-Speed.md

@@ -1,4 +1,4 @@
-Web-worker processes are automatically run in parallel, on separate CPU cores.
+The Neo.mjs web-worker processes are automatically run in parallel, on separate CPU cores.
 
 By contrast, other JavaScript frameworks run in a single thread, so all business logic, 
 data handling, and DOM rendering compete for CPU resources.
@@ -12,16 +12,38 @@ If the default four threads aren't enough, you're free to launch additional web-
 to run other specialized logic. 
 
 
-<details>
-<summary>Example</summary>
-Look at this example. It's complex. As you pan left and right, and zoom in and out, the upper-right
-shows you the number of delta updates being applied. If you move really quickly, you might reach 20,000 
-or 30,000 delta updates per second. We've seen some examples that go over 40,000 updates per second &mdash;
-but we've never actually hit the limit.
+### Example
 
-<a href="https://neomjs.com/node_modules/neo.mjs/examples/component/helix/index.html" target="_example">Helix Example</a>
+Look at this example. It's the `Neo.component.Helix` component. Besides looking cool, it illustrates how quickly Neo.mjs can update a complex user interface. 
 
-<a href="https://neomjs.com/node_modules/neo.mjs/examples/component/helix/index.html" target="_example">
-<img width="75%" src="https://s3.amazonaws.com/mjs.neo.learning.images/Helix.png"></img>
-</a>
-</details>
+Click on Preview, then use your mouse or trackpad to pan and zoom &mdash; the helix zooms and spirals accordingly, very very rapidly. 
+If you move quickly, you might reach 20,000 or 30,000 delta updates per second. We've seen some examples that go over 40,000 updates per 
+second &mdash; but we've never actually hit the limit.
+
+<pre data-neo>
+import Base from '../../../../src/container/Base.mjs';
+import Helix from '../../../../src/component/Helix.mjs';
+class Foo extends Base {
+    static config = {
+        className: 'Foo',
+        layout: 'fit',
+        items: [{
+            module: Helix,
+            imageField : 'image',
+            imageSource: '../../../../resources/examples/',
+            store: {
+                autoLoad: true,
+                model: {
+                    fields: [ { name: 'image' , type: 'String'   } ],
+                },
+                url: '../../../../resources/examples/data/ai_contacts.json'
+            }
+        }]
+    }
+}
+Neo.setupClass(Foo);
+</pre>
+
+
+If you're interested, there's <a href="../../examples/component/helix/index.html" target="_blank">a more full-featured helix example</a> that includes showing delta updates, 
+along with some other control. Look at the upper-right corner to see delta updates.