neo.mjs 5.11.0 → 5.11.1

package/apps/ServiceWorker.mjs

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

package/examples/ServiceWorker.mjs

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

package/examples/component/dateSelector/MainContainer.mjs

@@ -15,11 +15,12 @@ class MainContainer extends ConfigurationViewport {
     }
 
     createConfigurationComponents() {
-        let me = this;
+        let me               = this,
+            exampleComponent = me.exampleComponent;
 
         return [{
             module        : Radio,
-            checked       : me.exampleComponent.currentDate.getMonth() === 0,
+            checked       : exampleComponent.currentDate.getMonth() === 0,
             hideValueLabel: false,
             labelText     : 'currentDate (month)',
             listeners     : {change: me.onMonthRadioChange.bind(me, 0)},
@@ -27,7 +28,7 @@ class MainContainer extends ConfigurationViewport {
             valueLabelText: 'Jan'
         }, {
             module        : Radio,
-            checked       : me.exampleComponent.currentDate.getMonth() === 1,
+            checked       : exampleComponent.currentDate.getMonth() === 1,
             hideValueLabel: false,
             labelText     : '',
             listeners     : {change: me.onMonthRadioChange.bind(me, 1)},
@@ -35,7 +36,7 @@ class MainContainer extends ConfigurationViewport {
             valueLabelText: 'Feb'
         }, {
             module        : Radio,
-            checked       : me.exampleComponent.currentDate.getMonth() === 2,
+            checked       : exampleComponent.currentDate.getMonth() === 2,
             hideValueLabel: false,
             labelText     : '',
             listeners     : {change: me.onMonthRadioChange.bind(me, 2)},
@@ -43,7 +44,7 @@ class MainContainer extends ConfigurationViewport {
             valueLabelText: 'Mar'
         }, {
             module        : Radio,
-            checked       : me.exampleComponent.currentDate.getMonth() === 3,
+            checked       : exampleComponent.currentDate.getMonth() === 3,
             hideValueLabel: false,
             labelText     : '',
             listeners     : {change: me.onMonthRadioChange.bind(me, 3)},
@@ -51,7 +52,7 @@ class MainContainer extends ConfigurationViewport {
             valueLabelText: 'Apr'
         }, {
             module        : Radio,
-            checked       : me.exampleComponent.currentDate.getFullYear() === 2021,
+            checked       : exampleComponent.currentDate.getFullYear() === 2021,
             hideValueLabel: false,
             labelText     : 'currentDate (year)',
             listeners     : {change: me.onYearRadioChange.bind(me, 2021)},
@@ -60,7 +61,7 @@ class MainContainer extends ConfigurationViewport {
             valueLabelText: '2021'
         }, {
             module        : Radio,
-            checked       : me.exampleComponent.currentDate.getFullYear() === 2020,
+            checked       : exampleComponent.currentDate.getFullYear() === 2020,
             hideValueLabel: false,
             labelText     : '',
             listeners     : {change: me.onYearRadioChange.bind(me, 2020)},
@@ -68,7 +69,7 @@ class MainContainer extends ConfigurationViewport {
             valueLabelText: '2020'
         }, {
             module        : Radio,
-            checked       : me.exampleComponent.currentDate.getFullYear() === 2019,
+            checked       : exampleComponent.currentDate.getFullYear() === 2019,
             hideValueLabel: false,
             labelText     : '',
             listeners     : {change: me.onYearRadioChange.bind(me, 2019)},
@@ -76,7 +77,7 @@ class MainContainer extends ConfigurationViewport {
             valueLabelText: '2019'
         }, {
             module        : Radio,
-            checked       : me.exampleComponent.currentDate.getFullYear() === 2018,
+            checked       : exampleComponent.currentDate.getFullYear() === 2018,
             hideValueLabel: false,
             labelText     : '',
             listeners     : {change: me.onYearRadioChange.bind(me, 2018)},
@@ -84,7 +85,7 @@ class MainContainer extends ConfigurationViewport {
             valueLabelText: '2018'
         }, {
             module        : Radio,
-            checked       : me.exampleComponent.dayNameFormat === 'narrow',
+            checked       : exampleComponent.dayNameFormat === 'narrow',
             hideValueLabel: false,
             labelText     : 'dayNameFormat',
             listeners     : {change: me.onRadioChange.bind(me, 'dayNameFormat', 'narrow')},
@@ -93,7 +94,7 @@ class MainContainer extends ConfigurationViewport {
             valueLabelText: 'narrow'
         }, {
             module        : Radio,
-            checked       : me.exampleComponent.dayNameFormat === 'short',
+            checked       : exampleComponent.dayNameFormat === 'short',
             hideValueLabel: false,
             labelText     : '',
             listeners     : {change: me.onRadioChange.bind(me, 'dayNameFormat', 'short')},
@@ -101,55 +102,55 @@ class MainContainer extends ConfigurationViewport {
             valueLabelText: 'short'
         }, {
             module        : Radio,
-            checked       : me.exampleComponent.dayNameFormat === 'long',
+            checked       : exampleComponent.dayNameFormat === 'long',
             hideValueLabel: false,
             labelText     : '',
             listeners     : {change: me.onRadioChange.bind(me, 'dayNameFormat', 'long')},
             name          : 'dayNameFormat',
             valueLabelText: 'long'
+        }, {
+            module    : NumberField,
+            clearable : true,
+            labelText : 'height',
+            listeners : {change: me.onConfigChange.bind(me, 'height')},
+            maxValue  : 800,
+            minValue  : 230,
+            stepSize  : 10,
+            style     : {marginTop: '10px'},
+            value     : exampleComponent.height
         }, {
             module          : DateField,
             labelText       : 'maxValue',
             listeners       : {change: me.onConfigChange.bind(me, 'maxValue')},
             matchPickerWidth: false,
-            style           : {marginTop: '10px'},
-            value           : me.exampleComponent.maxValue
+            value           : exampleComponent.maxValue
         }, {
             module          : DateField,
             labelText       : 'minValue',
             listeners       : {change: me.onConfigChange.bind(me, 'minValue')},
             matchPickerWidth: false,
-            value           : me.exampleComponent.minValue
-        }, {
-            module    : NumberField,
-            clearable : true,
-            labelText : 'height',
-            listeners : {change: me.onConfigChange.bind(me, 'height')},
-            maxValue  : 800,
-            minValue  : 230,
-            stepSize  : 10,
-            value     : me.exampleComponent.height
+            value           : exampleComponent.minValue
         }, {
             module   : CheckBox,
-            checked  : me.exampleComponent.showCellBorders,
+            checked  : exampleComponent.showCellBorders,
             labelText: 'showCellBorders',
             listeners: {change: me.onConfigChange.bind(me, 'showCellBorders')},
             style    : {marginTop: '10px'}
         }, {
             module   : CheckBox,
-            checked  : me.exampleComponent.showDisabledDays,
+            checked  : exampleComponent.showDisabledDays,
             labelText: 'showDisabledDays',
             listeners: {change: me.onConfigChange.bind(me, 'showDisabledDays')},
             style    : {marginTop: '10px'}
         }, {
             module   : CheckBox,
-            checked  : me.exampleComponent.useAnimations,
+            checked  : exampleComponent.useAnimations,
             labelText: 'useAnimations',
             listeners: {change: me.onConfigChange.bind(me, 'useAnimations')},
             style    : {marginTop: '10px'}
         }, {
             module        : Radio,
-            checked       : me.exampleComponent.weekStartDay === 6,
+            checked       : exampleComponent.weekStartDay === 6,
             hideValueLabel: false,
             labelText     : 'weekStartDay',
             listeners     : {change: me.onRadioChange.bind(me, 'weekStartDay', 6)},
@@ -158,7 +159,7 @@ class MainContainer extends ConfigurationViewport {
             valueLabelText: '6 (Saturday)'
         }, {
             module        : Radio,
-            checked       : me.exampleComponent.weekStartDay === 0,
+            checked       : exampleComponent.weekStartDay === 0,
             hideValueLabel: false,
             labelText     : '',
             listeners     : {change: me.onRadioChange.bind(me, 'weekStartDay', 0)},
@@ -166,7 +167,7 @@ class MainContainer extends ConfigurationViewport {
             valueLabelText: '0 (Sunday)'
         }, {
             module        : Radio,
-            checked       : me.exampleComponent.weekStartDay === 1,
+            checked       : exampleComponent.weekStartDay === 1,
             hideValueLabel: false,
             labelText     : '',
             listeners     : {change: me.onRadioChange.bind(me, 'weekStartDay', 1)},
@@ -181,7 +182,7 @@ class MainContainer extends ConfigurationViewport {
             minValue  : 240,
             stepSize  : 10,
             style     : {marginTop: '10px'},
-            value     : me.exampleComponent.width
+            value     : exampleComponent.width
         }];
     }
 

package/examples/component/video/MainContainer.mjs

@@ -0,0 +1,46 @@
+import Viewport  from '../../../src/container/Viewport.mjs';
+import Video     from '../../../src/component/Video.mjs';
+import Panel     from '../../../src/container/Panel.mjs';
+import MainContainerController from "./MainContainerController.mjs";
+
+/**
+ * @class Neo.examples.component.timer.MainContainer
+ * @extends Neo.examples.Viewport
+ */
+class MainContainer extends Viewport {
+    static config = {
+        className: 'Neo.examples.component.timer.MainContainer',
+
+        controller: MainContainerController,
+
+        items : [{
+            ntype: 'panel',
+            headers: [{
+                dock: 'top',
+                items: [{
+                    ntype: 'component',
+                    html : '<h1>Video Demo</h1>',
+                    flex : 'none',
+                    style: {textAlign: 'center'}
+                }, {
+                    ntype: 'component', flex: 1
+                }, {
+                    reference: 'theme-button',
+                    iconCls  : 'fa fa-sun',
+                    handler  : 'onToggleTheme',
+                    style    : {height: '100%',padding: '0 40px',borderWidth: 0,borderLeftWidth: '1px',borderRadius: 0}
+                }]
+            }],
+            items: [{
+                module   : Video,
+                url      : 'https://video-ssl.itunes.apple.com/itunes-assets/Video125/v4/a0/57/54/a0575426-dd8e-2d25-bdf3-139702870b50/mzvf_786190431362224858.640x464.h264lc.U.p.m4v',
+                flag     : 'video-component',
+                minHeight: 400,
+            }]
+        }]
+    }
+}
+
+Neo.applyClassConfig(MainContainer);
+
+export default MainContainer;

package/examples/component/video/MainContainerController.mjs

@@ -0,0 +1,37 @@
+import ComponentController from '../../../src/controller/Component.mjs';
+import Toast               from '../../../src/component/Toast.mjs';
+
+/**
+ * @class Neo.examples.component.toast.MainContainerController
+ * @extends Neo.controller.Component
+ */
+class MainContainerController extends ComponentController {
+    static config = {
+        /**
+         * @member {String} className='Neo.examples.component.toast.MainContainerController'
+         * @protected
+         */
+        className: 'Neo.examples.component.toast.MainContainerController'
+    }
+
+    theme = 'light';
+
+    /**
+     * @param {Object} config
+     */
+    onToggleTheme(config) {
+        const add = (this.theme === 'light') ? 'dark' : 'light',
+              remove = add === 'light' ? 'dark' : 'light',
+              themeButton = this.getReference('theme-button'),
+              buttonIcon = add === 'light' ? 'sun' : 'moon';
+
+        this.theme = add;
+
+        Neo.main.DomAccess.setBodyCls({remove: ['neo-theme-' + remove] , add: ['neo-theme-' + add]});
+        themeButton.iconCls = 'fa fa-' + buttonIcon;
+    }
+}
+
+Neo.applyClassConfig(MainContainerController);
+
+export default MainContainerController;

package/examples/component/video/app.mjs

@@ -0,0 +1,7 @@
+import MainContainer from './MainContainer.mjs';
+
+export const onStart = () => Neo.app({
+    mainView: MainContainer,
+    name    : 'Neo.examples.component.video'
+});
+

package/examples/component/video/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta charset="UTF-8">
+    <title>Neo Video</title>
+</head>
+</head>
+<body>
+    <script src="../../../src/MicroLoader.mjs" type="module"></script>
+</body>
+</html>

package/examples/component/video/neo-config.json

@@ -0,0 +1,7 @@
+{
+    "appPath"         : "examples/component/video/app.mjs",
+    "basePath"        : "../../../",
+    "environment"     : "development",
+    "mainPath"        : "./Main.mjs",
+    "mainThreadAddons": ["Stylesheet", "ScrollSync"]
+}

package/examples/list/base/MainModel.mjs

@@ -12,6 +12,9 @@ class MainModel extends Model {
         fields: [{
             name: 'country',
             type: 'String'
+        }, {
+            name: 'disabled',
+            type: 'Boolean'
         }, {
             name: 'firstname',
             type: 'String'

package/examples/list/base/MainStore.mjs

@@ -13,31 +13,37 @@ class MainStore extends Store {
 
         data: [{
             country  : 'Germany',
+            disabled : false,
             firstname: 'Tobias',
             githubId : 'tobiu',
             lastname : 'Uhlig'
         }, {
             country  : 'USA',
+            disabled : true,
             firstname: 'Rich',
             githubId : 'rwaters',
             lastname : 'Waters'
         }, {
             country  : 'Germany',
+            disabled : false,
             firstname: 'Nils',
             githubId : 'mrsunshine',
             lastname : 'Dehl'
         }, {
             country  : 'USA',
+            disabled : false,
             firstname: 'Gerard',
             githubId : 'camtnbikerrwc',
             lastname : 'Horan'
         }, {
             country  : 'Slovakia',
+            disabled : false,
             firstname: 'Jozef',
             githubId : 'jsakalos',
             lastname : 'Sakalos'
         }, {
             country  : 'Germany',
+            disabled : false,
             firstname: 'Bastian',
             githubId : 'bhaustein',
             lastname : 'Haustein'

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "5.11.0",
+    "version": "5.11.1",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -52,10 +52,10 @@
         "envinfo": "^7.10.0",
         "fs-extra": "^11.1.1",
         "highlightjs-line-numbers.js": "^2.8.0",
-        "inquirer": "^9.2.7",
+        "inquirer": "^9.2.8",
         "neo-jsdoc": "^1.0.1",
         "neo-jsdoc-x": "^1.0.5",
-        "postcss": "^8.4.25",
+        "postcss": "^8.4.26",
         "sass": "^1.63.6",
         "webpack": "^5.88.1",
         "webpack-cli": "^5.1.4",

package/resources/scss/src/component/Video.scss

@@ -0,0 +1,31 @@
+.neo-video {
+  position: relative;
+
+  & > * {
+    position: absolute;
+    inset: 0;
+  }
+
+  .neo-video-ghost {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    height: 100%;
+    width: 100%;
+    background-color: v(video-ghost-color);
+
+    .fa-solid {
+      height: v(video-ghost-size);
+      width: v(video-ghost-size);
+      font-size: v(video-ghost-size);
+      cursor: pointer;
+    }
+  }
+
+  .neo-video-media {
+    height: 100%;
+    width: 100%;
+    background: black;
+  }
+}

package/resources/scss/theme-dark/component/Video.scss

@@ -0,0 +1,11 @@
+$neoMap: map-merge($neoMap, (
+        'video-ghost-color': rgb(50, 50, 50),
+        'video-ghost-size' : 30px
+));
+
+@if $useCssVars == true {
+    :root .neo-theme-dark { // .neo-video
+        --video-ghost-color: #{neo(video-ghost-color)};
+        --video-ghost-size: #{neo(video-ghost-size)};
+    }
+}

package/resources/scss/theme-light/component/Video.scss

@@ -0,0 +1,11 @@
+$neoMap: map-merge($neoMap, (
+        'video-ghost-color': rgba(50, 50, 50, 0.3),
+        'video-ghost-size' : 30px
+));
+
+@if $useCssVars == true {
+    :root .neo-theme-light { // .neo-video
+        --video-ghost-color: #{neo(video-ghost-color)};
+        --video-ghost-size: #{neo(video-ghost-size)};
+    }
+}

package/src/DefaultConfig.mjs

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

package/src/component/Video.mjs

@@ -0,0 +1,165 @@
+import BaseComponent from '../component/Base.mjs';
+import VDomUtil      from '../util/VDom.mjs';
+
+/**
+ * @class Neo.component.Video
+ * @extends Neo.component.Base
+ *
+ * @example
+ *     ntype: 'video',
+ *     url: 'https://video-ssl.itunes.apple.com/itunes-assets/Video125/v4/a0/57/54/a0575426-dd8e-2d25-bdf3-139702870b50/mzvf_786190431362224858.640x464.h264lc.U.p.m4v'
+ */
+class Video extends BaseComponent {
+    static config = {
+        /*
+         * @member {String} className='Neo.component.Video'
+         * @protected
+         */
+        className: 'Neo.component.Video',
+        /*
+         * @member {String} ntype='neo-video'
+         * @protected
+         */
+        ntype: 'video',
+        /*
+         * @member {[String]} cls=['neo-video']
+         */
+        baseCls: ['neo-video'],
+        /*
+         * @member {String} url=null
+         * @public
+         */
+        url_: null,
+
+        /**
+         * Current state of the video
+         * @member {boolean} playing=false
+         */
+        playing_: false,
+        /**
+         * Type of the video
+         * @member {boolean} type='video/mp4'
+         */
+        type: 'video/mp4',
+
+        _vdom: {
+            cn: [{
+                flag: 'ghost',
+                cls : ['neo-video-ghost'],
+                cn  : [{
+                    // The <i> tag defines a part of text in an alternate voice or mood. The content inside is typically displayed in italic.
+                    tag: 'i',
+                    cls: ['fa-solid', 'fa-circle-play']
+                }]
+            }, {
+                // Neo specific configs
+                tag      : 'video',
+                flag     : 'media',
+                removeDom: true,
+                cls      : ['neo-video-media'],
+                // dom attributes
+                autoplay: true,
+                controls: true
+            }]
+        }
+    }
+
+
+    /**
+     * construct is earlier in component life cicle than init
+     *
+     * @param config
+     */
+    construct(config) {
+        super.construct(config);
+
+        console.log(this);
+
+        let me           = this,
+            domListeners = me.domListeners;
+
+        domListeners.push({
+            click   : me.play,
+            delegate: '.neo-video-ghost'
+        }, {
+            click   : me.pause,
+            delegate: '.neo-video-media'
+        });
+
+        me.domListeners = domListeners;
+    }
+
+    /**
+     * beforeSetPlaying autgen by playing_
+     *
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @returns {Boolean}
+     */
+    beforeSetPlaying(value, oldValue) {
+        if (!Neo.isBoolean(value)) {
+            return oldValue;
+        }
+
+        return value;
+    }
+
+    /**
+     * afterSetPlaying - run the event listeners
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     */
+    afterSetPlaying(value, oldValue) {
+        let vdom  = this.vdom,
+            media = VDomUtil.getFlags(vdom, 'media')[0],
+            ghost = VDomUtil.getFlags(vdom, 'ghost')[0];
+
+        ghost.removeDom = value;
+        media.removeDom = !value;
+
+        this.vdom = vdom;
+    }
+
+    /**
+     * afterSetUrl
+     * Add a source element into the video element containing the url
+     *
+     * @param {String} value
+     * @param {String|null} oldValue
+     */
+    afterSetUrl(value, oldValue) {
+        if (!value) {
+            return;
+        }
+
+        const me = this;
+        let vdom  = me.vdom,
+            media = vdom.cn[1];
+
+        media.cn = [{
+            tag : 'source',
+            src : value,
+            type: me.type
+        }];
+
+        me.vdom = vdom;
+    }
+
+    /**
+     * Clicked ghost
+     */
+    play() {
+        this.playing = true;
+    }
+
+    /**
+     * Clicked media
+     */
+    pause() {
+        this.playing = false;
+    }
+}
+
+Neo.applyClassConfig(Video);
+
+export default Video;

package/src/list/Base.mjs

@@ -37,6 +37,12 @@ class Base extends Component {
          * @member {String[]} baseCls=['neo-list']
          */
         baseCls: ['neo-list'],
+        /**
+         * An optional record field to make items non-clickable and visually greyed out.
+         * The field expects the Boolean type.
+         * @member {String} disabledField='disabled'
+         */
+        disabledField: 'disabled',
         /**
          * @member {Boolean} disableSelection_=false
          */
@@ -373,10 +379,14 @@ class Base extends Component {
 
         if (!me.disableSelection && selectionModel) {
             if (selectionModel.isSelected(itemId)) {
-                cls.push(selectionModel.selectedCls);
+                cls.push(selectionModel.selectedCls)
             }
         }
 
+        if (record[me.disabledField]) {
+            cls.push('neo-disabled')
+        }
+
         item = {
             tag     : isHeader ? 'dt' : me.itemTagName,
             cls,

package/src/selection/ListModel.mjs

@@ -83,9 +83,11 @@ class ListModel extends Model {
         if (item) {
             recordId = view.getItemRecordId(item);
             index    = store.indexOf(recordId) + step;
+            record   = store.getAt(index);
 
-            while (store.getAt(index)?.isHeader === true) {
+            while (record?.[view.disabledField] === true || record?.isHeader === true) {
                 index += step;
+                record = store.getAt(index)
             }
 
             if (index < 0) {