neo.mjs 6.12.0 → 6.13.0

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

@@ -1,8 +1,9 @@
 import Container               from '../../../../src/container/Base.mjs';
-import ContentView             from './ContentView.mjs';
 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 Splitter                from '../../../../src/component/Splitter.mjs';
 
 /**
@@ -16,42 +17,43 @@ class MainContainer extends Container {
          * @protected
          */
         className: 'Portal.view.learn.MainContainer',
-        /**
-         * @member {Neo.controller.Component} controller=MainContainerController
-         */
-        controller: MainContainerController,
         /**
          * @member {String[]} cls=['learnneo-maincontainer']
          */
         cls: ['learnneo-maincontainer'],
+        /**
+         * @member {Neo.controller.Component} controller=MainContainerController
+         */
+        controller: MainContainerController,
         /**
          * @member {Object[]} items
          */
         items: [{
             module  : Container,
+            cls     : ['sidenav-container'],
             layout  : 'fit',
             minWidth: 350,
             width   : 350,
-            cls     : 'sidenav-container',
+
             items: [{
                 module   : ContentTreeList,
-                reference: 'tree',
-                listeners: {
-                    contentChange: 'onContentChange',
-                }
+                reference: 'tree'
             }]
         }, {
             module      : Splitter,
             cls         : ['main-content-splitter'],
             resizeTarget: 'previous',
-            size        : 4
+            size        : 3
+        }, {
+            module: PageContainer
+        }, {
+            module: Splitter,
+            cls   : ['main-content-splitter'],
+            size  : 3
         }, {
-            module   : ContentView,
-            reference: 'content',
-            listeners: {
-                edit   : 'onContentEdit',
-                refresh: 'onContentRefresh'
-            }
+            module   : PageSectionsPanel,
+            reference: 'page-sections-panel',
+            width    : 350
         }],
         /**
          * @member {Object} layout={ntype:'hbox',align:'stretch'}
@@ -64,6 +66,6 @@ class MainContainer extends Container {
     }
 }
 
-Neo.applyClassConfig(MainContainer);
+Neo.setupClass(MainContainer);
 
 export default MainContainer;

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

@@ -14,38 +14,121 @@ class MainContainerController extends Controller {
     }
 
     /**
-     *
+     * @member {String[]} connectedApps=[]
      */
-    onConstructed() {
-        super.onConstructed();
+    connectedApps = []
 
-        Neo.Main.getByPath({path: 'location.search'})
-            .then(data => {
-                const searchString = data?.substr(1) || '';
-                const search = searchString ? JSON.parse(`{"${decodeURI(searchString.replace(/&/g, "\",\"").replace(/=/g, "\":\""))}"}`) : {};
-                this.getModel().setData('deck', search.deck || 'learnneo');
-            });
+    /**
+     * @param {Object} config
+     */
+    construct(config) {
+        super.construct(config);
 
-        fetch('../../../../resources/data/deck/EditorConfig.json')
-            .then(response => response.json()
-                .then(data =>
-                    this.getModel().setData('editorConfig', data)
-                ))
+        let me = this,
+            search, searchString;
+
+        Neo.Main.getByPath({
+            path    : 'location.search',
+            windowId: me.windowId
+        }).then(data => {
+            searchString = data?.substr(1) || '';
+            search       = searchString ? JSON.parse(`{"${decodeURI(searchString.replace(/&/g, "\",\"").replace(/=/g, "\":\""))}"}`) : {};
+
+            me.getModel().setData({
+                deck: search.deck || 'learnneo'
+            })
+        })
+    }
+
+    /**
+     * @param {String} searchString
+     * @returns {Object}
+     */
+    decodeUri(searchString) {
+        return searchString ? JSON.parse(`{"${decodeURI(searchString.replace(/&/g, "\",\"").replace(/=/g, "\":\""))}"}`) : {}
     }
 
     /**
      * @param {Object} data
-     * @returns {Promise<void>}
+     * @param {String} data.appName
      */
-    async onContentChange(data) {
-        let me = this,
-            content = me.getReference('content');
+    async onAppConnect(data) {
+        let me              = this,
+            app             = Neo.apps[data.appName],
+            mainView        = app.mainView,
+            windowId        = mainView.windowId,
+            searchString    = await Neo.Main.getByPath({path: 'location.search', windowId}),
+            livePreviewId   = me.decodeUri(searchString.substring(1)).id,
+            livePreview     = Neo.getComponent(livePreviewId),
+            sourceContainer = livePreview.getReference('preview'),
+            tabContainer    = livePreview.tabContainer,
+            sourceView      = sourceContainer.removeAt(0, false);
+
+        livePreview.previewContainer = mainView;
+        mainView.add(sourceView);
+
+        tabContainer.activeIndex = 0; // switch to the source view
+
+        tabContainer.getTabAtIndex(1).disabled = true
+    }
+
+    /**
+     * @param {Object} data
+     * @param {String} data.appName
+     */
+    async onAppDisconnect(data) {
+        let me              = this,
+            app             = Neo.apps[data.appName],
+            mainView        = app.mainView,
+            windowId        = mainView.windowId,
+            searchString    = await Neo.Main.getByPath({path: 'location.search', windowId}),
+            livePreviewId   = me.decodeUri(searchString.substring(1)).id,
+            livePreview     = Neo.getComponent(livePreviewId),
+            sourceContainer = livePreview.getReference('preview'),
+            tabContainer    = livePreview.tabContainer,
+            sourceView      = mainView.removeAt(0, false);
+
+        console.log(data, me.connectedApps);
+
+        livePreview.previewContainer = null;
+        sourceContainer.add(sourceView);
+
+        tabContainer.activeIndex = 1; // switch to the source view
 
-        content.toggleCls('lab', data.isLab);
+        livePreview.getReference('popout-window-button').disabled = false;
+        tabContainer.getTabAtIndex(1).disabled = false;
 
-        content.html = data.html;
-        content.record = data.record;
+        /*Neo.Main.windowClose({
+            names: me.connectedApps
+        })*/
+    }
+
+    /**
+     *
+     */
+    onConstructed() {
+        super.onConstructed();
+
+        let me = this;
 
+        Neo.currentWorker.on({
+            connect   : me.onAppConnect,
+            disconnect: me.onAppDisconnect,
+            scope     : me
+        });
+
+        Neo.Main.getByPath({path: 'location.search'})
+            .then(data => {
+                const search = me.decodeUri(data?.substring(1) || '');
+                me.getModel().setData('deck', search.deck || 'learnneo');
+            });
+
+        // todo: target file does not exist inside the repo
+        /*fetch('../../../../resources/data/deck/EditorConfig.json')
+            .then(response => response.json()
+                .then(data =>
+                    me.getModel().setData('editorConfig', data)
+                ))*/
     }
 
     /**
@@ -59,7 +142,7 @@ class MainContainerController extends Controller {
         const subDir = vm.getData('deck')
         if (!editorConfig || !subDir) return;
 
-        const filePath = `${editorConfig.root}/${subDir}/p/${data.record.id}.md`;
+        const filePath = `${editorConfig.root}/${subDir}/pages/${data.record.id}.md`;
 
         await fetch('http://localhost:3000/openInEditor', {
             method: 'POST',
@@ -76,8 +159,37 @@ class MainContainerController extends Controller {
     onContentRefresh(data) {
         this.getReference('tree').doFetchContent(data.record)
     }
+
+    /**
+     * @param {Object} data
+     */
+    onIntersect(data) {
+        let panel    = this.getReference('page-sections-panel'),
+            list     = panel.list,
+            recordId = parseInt(data.data.recordId);
+
+        if (!panel.isAnimating) {
+            list.selectionModel.select(list.store.get(recordId))
+        }
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onNextPageButtonClick(data) {
+        let model = this.getModel();
+        model.setData('currentPageRecord', model.getData('nextPageRecord'))
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onPreviousPageButtonClick(data) {
+        let model = this.getModel();
+        model.setData('currentPageRecord', model.getData('previousPageRecord'))
+    }
 }
 
-Neo.applyClassConfig(MainContainerController);
+Neo.setupClass(MainContainerController);
 
 export default MainContainerController;

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

@@ -1,5 +1,6 @@
-import Component from '../../../../src/model/Component.mjs';
-import Store     from '../../store/Content.mjs';
+import Component           from '../../../../src/model/Component.mjs';
+import ContentSectionStore from '../../store/ContentSections.mjs';
+import ContentStore        from '../../store/Content.mjs';
 
 /**
  * @class Portal.view.learn.MainContainerModel
@@ -12,22 +13,113 @@ class MainContainerModel extends Component {
          * @protected
          */
         className: 'Portal.view.learn.MainContainerModel',
+        /**
+         * @member {String} contentBasePath='../../resources/data/deck/'
+         */
+        contentBasePath: '../../resources/data/deck/',
         /**
          * @member {Object} data
          */
-        data: {},
+        data: {
+            /**
+             * @member {String|null} data.contentPath=null
+             */
+            contentPath: null,
+            /**
+             * @member {Number|null} data.countPages=null
+             */
+            countPages: null,
+            /**
+             * The record which gets shown as the content page
+             * @member {Object} data.currentRecord=null
+             */
+            currentPageRecord: null,
+            /**
+             * @member {String|null} data.deck=null
+             */
+            deck: null,
+            /**
+             * The record which gets shown as the content page
+             * @member {Object} data.currentRecord=null
+             */
+            nextPageRecord: null,
+            /**
+             * The record which gets shown as the content page
+             * @member {Object} data.currentRecord=null
+             */
+            previousPageRecord: null
+        },
         /**
          * @member {Object} stores
          */
         stores: {
-            tree: {
-                module      : Store,
-                responseRoot: 'data'
+            contentSections: {
+                module: ContentSectionStore
+            },
+            contentTree: {
+                module: ContentStore
+            }
+        }
+    }
+
+    /**
+     * @param {String} key
+     * @param {*} value
+     * @param {*} oldValue
+     */
+    onDataPropertyChange(key, value, oldValue) {
+        super.onDataPropertyChange(key, value, oldValue);
+
+        let me = this;
+
+        switch(key) {
+            case 'currentPageRecord': {
+                let data               = me.data,
+                    countPages         = data.countPages,
+                    store              = me.getStore('contentTree'),
+                    index              = store.indexOf(value),
+                    nextPageRecord     = null,
+                    previousPageRecord = null,
+                    i, record;
+
+                // the logic assumes that the tree store is sorted
+                for (i=index-1; i >= 0; i--) {
+                    record = store.getAt(i);
+
+                    if (record.isLeaf) {
+                        previousPageRecord = record;
+                        break
+                    }
+                }
+
+                me.setData({previousPageRecord});
+
+                // the logic assumes that the tree store is sorted
+                for (i=index+1; i < countPages; i++) {
+                    record = store.getAt(i);
+
+                    if (record.isLeaf) {
+                        nextPageRecord = record;
+                        break
+                    }
+                }
+
+                me.setData({nextPageRecord});
+
+                break
+            }
+
+            case 'deck': {
+                if (value) {
+                    me.data.contentPath = me.contentBasePath + value;
+                }
+
+                break
             }
         }
     }
 }
 
-Neo.applyClassConfig(MainContainerModel);
+Neo.setupClass(MainContainerModel);
 
 export default MainContainerModel;

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

@@ -0,0 +1,110 @@
+import Container   from '../../../../src/container/Base.mjs';
+import ContentView from './ContentView.mjs';
+import Toolbar     from '../../../../src/toolbar/Base.mjs';
+
+/**
+ * @class Portal.view.learn.PageContainer
+ * @extends Neo.container.Base
+ */
+class PageContainer extends Container {
+    static config = {
+        /**
+         * @member {String} className='Portal.view.learn.PageContainer'
+         * @protected
+         */
+        className: 'Portal.view.learn.PageContainer',
+        /**
+         * @member {String[]} baseCls=['learn-content-container','neo-container']
+         * @protected
+         */
+        baseCls: ['learn-content-container', 'neo-container'],
+        /**
+         * @member {Object} bind
+         */
+        bind: {
+            nextPageRecord    : data => data.nextPageRecord,
+            previousPageRecord: data => data.previousPageRecord
+        },
+        /**
+         * @member {Object[]} items
+         */
+        items: [{
+            module   : ContentView,
+            reference: 'content',
+            listeners: {
+                edit   : 'onContentEdit',
+                refresh: 'onContentRefresh'
+            }
+        }, {
+            module: Toolbar,
+            flex  : 'none',
+            items : [{
+                handler  : 'onPreviousPageButtonClick',
+                hidden   : true,
+                reference: 'prev-page-button'
+            }, '->', {
+                handler  : 'onNextPageButtonClick',
+                hidden   : true,
+                reference: 'next-page-button'
+            }]
+        }],
+        /**
+         * @member {Object} nextPageRecord_=null
+         */
+        nextPageRecord_: null,
+        /**
+         * @member {Object} previousPageRecord_=null
+         */
+        previousPageRecord_: null
+    }
+
+    /**
+     * Convenience shortcut
+     * @member {Neo.button.Base} nextPageButton
+     */
+    get nextPageButton() {
+        return this.getReference('next-page-button')
+    }
+
+    /**
+     * Convenience shortcut
+     * @member {Neo.button.Base} prevPageButton
+     */
+    get prevPageButton() {
+        return this.getReference('prev-page-button')
+    }
+
+    /**
+     * Triggered after the nextPageRecord config got changed
+     * @param {Object} value
+     * @param {Object} oldValue
+     */
+    afterSetNextPageRecord(value, oldValue) {
+        if (oldValue !== undefined) {
+            if (value) {
+                this.nextPageButton.set({hidden: false, text: value.name})
+            } else {
+                this.nextPageButton.hidden = true
+            }
+        }
+    }
+
+    /**
+     * Triggered after the previousPageRecord config got changed
+     * @param {Object} value
+     * @param {Object} oldValue
+     */
+    afterSetPreviousPageRecord(value, oldValue) {
+        if (oldValue !== undefined) {
+            if (value) {
+                this.prevPageButton.set({hidden: false, text: value.name})
+            } else {
+                this.prevPageButton.hidden = true
+            }
+        }
+    }
+}
+
+Neo.setupClass(PageContainer);
+
+export default PageContainer;

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

@@ -0,0 +1,88 @@
+import List  from '../../../../src/list/Base.mjs';
+import Panel from '../../../../src/container/Panel.mjs';
+
+/**
+ * @class Portal.view.learn.PageSectionsPanel
+ * @extends Neo.container.Panel
+ */
+class PageSectionsPanel extends Panel {
+    static config = {
+        /**
+         * @member {String} className='Portal.view.learn.PageSectionsPanel'
+         * @protected
+         */
+        className: 'Portal.view.learn.PageSectionsPanel',
+        /**
+         * @member {String[]} cls=['portal-page-sections-panel']
+         */
+        cls: ['portal-page-sections-panel'],
+        /**
+         * @member {Object[]} headers
+         */
+        headers: [{
+            dock: 'top',
+            text: 'On this page'
+        }],
+        /**
+         * @member {Object[]} items
+         */
+        items: [{
+            module   : List,
+            bind     : {store: 'stores.contentSections'},
+            cls      : ['topics-tree'],
+            reference: 'list'
+        }]
+    }
+
+    /**
+     * Internal flag to indicate that node.scrollIntoView() is running with an animation
+     * @member {Boolean} isAnimating=false
+     */
+    isAnimating = false
+
+    /**
+     * Convenience shortcut
+     * @member {Neo.list.Base} list
+     */
+    get list() {
+        return this.getReference('list')
+    }
+
+    /**
+     *
+     */
+    onConstructed() {
+        super.onConstructed();
+
+        let me = this;
+
+        // me.getReference('list').on('selectionChange', me.onSelectionChange, me) // todo
+        me.getReference('list').on('itemClick', me.onSelectionChange, me)
+    }
+
+    /**
+     * @param {Object} data
+     */
+    async onSelectionChange(data) {
+        let me     = this,
+            record = data.record;
+
+        if (record) {
+            me.isAnimating = true;
+
+            await Neo.main.DomAccess.scrollIntoView({
+                querySelector: `[data-record-id='${record.id}']`,
+                windowId     : me.windowId
+            });
+
+            // better safe than sorry
+            await me.timeout(200);
+
+            me.isAnimating = false
+        }
+    }
+}
+
+Neo.setupClass(PageSectionsPanel);
+
+export default PageSectionsPanel;

package/apps/realworld/api/Article.mjs

@@ -48,10 +48,6 @@ class Article extends Base {
     }
 }
 
-Neo.applyClassConfig(Article);
-
-let instance = Neo.create(Article);
-
-Neo.applyToGlobalNs(instance);
+let instance = Neo.setupClass(Article);
 
 export default instance;

package/apps/realworld/api/Base.mjs

@@ -252,6 +252,6 @@ class Base extends CoreBase {
 Base.initialTokenRequestSent = false;
 Base.token                   = null;
 
-Neo.applyClassConfig(Base);
+Neo.setupClass(Base);
 
 export default Base;

package/apps/realworld/api/Favorite.mjs

@@ -32,10 +32,6 @@ class Favorite extends Base {
     }
 }
 
-Neo.applyClassConfig(Favorite);
-
-let instance = Neo.create(Favorite);
-
-Neo.applyToGlobalNs(instance);
+let instance = Neo.setupClass(Favorite);
 
 export default instance;

package/apps/realworld/api/Profile.mjs

@@ -36,10 +36,6 @@ class Profile extends Base {
     }
 }
 
-Neo.applyClassConfig(Profile);
-
-let instance = Neo.create(Profile);
-
-Neo.applyToGlobalNs(instance);
+let instance = Neo.setupClass(Profile);
 
 export default instance;

package/apps/realworld/api/Tag.mjs

@@ -18,10 +18,6 @@ class Tag extends Base {
     }
 }
 
-Neo.applyClassConfig(Tag);
-
-let instance = Neo.create(Tag);
-
-Neo.applyToGlobalNs(instance);
+let instance = Neo.setupClass(Tag);
 
 export default instance;

package/apps/realworld/api/User.mjs

@@ -18,10 +18,6 @@ class User extends Base {
     }
 }
 
-Neo.applyClassConfig(User);
-
-let instance = Neo.create(User);
-
-Neo.applyToGlobalNs(instance);
+let instance = Neo.setupClass(User);
 
 export default instance;

package/apps/realworld/view/FooterComponent.mjs

@@ -24,6 +24,6 @@ class FooterComponent extends Component {
     }
 }
 
-Neo.applyClassConfig(FooterComponent);
+Neo.setupClass(FooterComponent);
 
 export default FooterComponent;

package/apps/realworld/view/HeaderComponent.mjs

@@ -170,6 +170,6 @@ class HeaderComponent extends Component {
     }
 }
 
-Neo.applyClassConfig(HeaderComponent);
+Neo.setupClass(HeaderComponent);
 
 export default HeaderComponent;