neo.mjs 4.2.6 → 4.2.7

package/examples/button/base/MainContainer.mjs

@@ -94,22 +94,20 @@ class MainContainer extends ConfigurationViewport {
 
     createExampleComponent() {
         return Neo.create({
-            iconCls: 'fa fa-home',
-            module : Button,
-            text   : 'Hello World',
+            height         : 50,
+            iconCls        : 'fa fa-home',
+            module         : Button,
+            text           : 'Hello World',
+            useRippleEffect: true,
+            width          : 150,
+
+            handler: (data) => {
+                console.log('button click =>', data.component.id);
+            }
 
             /*tooltips: [{
                 text: 'Hello World Tooltip'
-            }],*/
-
-            domListeners: {
-                click: {
-                    fn: (data) => {
-                        let button = Neo.getComponent(data.target.id);
-                        console.log('button click =>', button.id);
-                    }
-                }
-            }
+            }]*/
         });
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "4.2.6",
+    "version": "4.2.7",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -55,7 +55,7 @@
         "neo-jsdoc": "^1.0.1",
         "neo-jsdoc-x": "^1.0.4",
         "postcss": "^8.4.16",
-        "sass": "^1.54.9",
+        "sass": "^1.55.0",
         "webpack": "^5.74.0",
         "webpack-cli": "^4.10.0",
         "webpack-dev-server": "4.11.1",

package/resources/scss/src/button/Base.scss

@@ -1,3 +1,14 @@
+@keyframes ripple {
+    from {
+        opacity  : 1;
+        transform: scale(0);
+    }
+    to {
+        opacity  : 0;
+        transform: scale(4);
+    }
+}
+
 .neo-disabled {
     .neo-button {
         cursor: default;
@@ -16,6 +27,7 @@
     flex-direction     : row;
     justify-content    : center;
     margin             : v(button-margin);
+    overflow           : hidden;
     padding            : v(button-padding);
     position           : relative;
     text-decoration    : none; // for url buttons => links
@@ -54,6 +66,15 @@
         pointer-events: none;
     }
 
+    .neo-button-ripple {
+        background-color: red;
+        border-radius   : 50%;
+        opacity         : 0;
+        pointer-events  : none;
+        position        : absolute;
+        transform       : scale(4);
+    }
+
     .neo-button-text {
         color         : v(button-text-color);
         font-family   : v(button-text-font-family);

package/src/button/Base.mjs

@@ -89,13 +89,19 @@ class Base extends Component {
          * @member {String} urlTarget_='_blank'
          */
         urlTarget_: '_blank',
+        /**
+         * True adds an expanding circle on click
+         * @member {Boolean} useRippleEffect_=false
+         */
+        useRippleEffect_: false,
         /**
          * @member {Object} _vdom
          */
         _vdom:
         {tag: 'button', type: 'button', cn: [
             {tag: 'span', cls: ['neo-button-glyph']},
-            {tag: 'span', cls: ['neo-button-text']}
+            {tag: 'span', cls: ['neo-button-text']},
+            {tag: 'span', cls: ['neo-button-ripple'], removeDom: true}
         ]}
     }}
 
@@ -108,7 +114,7 @@ class Base extends Component {
     afterSetHandler(value, oldValue) {
         if (value) {
             let me           = this,
-                domListeners = me.domListeners || [];
+                domListeners = me.domListeners;
 
             domListeners.push({
                 click: value,
@@ -202,7 +208,7 @@ class Base extends Component {
     afterSetRoute(value, oldValue) {
         if (value) {
             let me           = this,
-                domListeners = me.domListeners || [];
+                domListeners = me.domListeners;
 
             domListeners.push({
                 click: me.changeRoute,
@@ -261,6 +267,26 @@ class Base extends Component {
         me.vdom = vdom;
     }
 
+    /**
+     * Triggered after the useRippleEffect config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetUseRippleEffect(value, oldValue) {
+        if (value) {
+            let me           = this,
+                domListeners = me.domListeners;
+
+            domListeners.push({
+                click: me.showRipple,
+                scope: me
+            });
+
+            me.domListeners = domListeners;
+        }
+    }
+
     /**
      * Triggered after the urlTarget config got changed
      * @param {String} value
@@ -333,6 +359,35 @@ class Base extends Component {
             Neo.Main.setRoute({value: me.route});
         }
     }
+
+    /**
+     * @param {Object} data
+     */
+    async showRipple(data) {
+        let me         = this,
+            buttonRect = data.path[0].rect,
+            diameter   = Math.max(buttonRect.height, buttonRect.width),
+            radius     = diameter / 2,
+            vdom       = me.vdom,
+            rippleEl   = vdom.cn[2];
+
+        rippleEl.style = Object.assign(rippleEl.style || {}, {
+            animation: 'none',
+            left     : `${data.clientX - buttonRect.left - radius}px`,
+            height   : `${diameter}px`,
+            top      : `${data.clientY - buttonRect.top - radius}px`,
+            width    : `${diameter}px`
+        });
+
+        delete rippleEl.removeDom;
+
+        me.vdom = vdom;
+
+        await Neo.timeout(1);
+
+        rippleEl.style.animation = 'ripple 400ms linear';
+        me.vdom = vdom;
+    }
 }
 
 Neo.applyClassConfig(Base);

package/src/component/Base.mjs

@@ -105,7 +105,7 @@ class Base extends CoreBase {
          * afterSetStayOnHover(value, oldValue) {
          *     if (value) {
          *         let me           = this,
-         *             domListeners = me.domListeners || [];
+         *             domListeners = me.domListeners;
          *
          *         domListeners.push(
          *             {mouseenter: me.onMouseEnter, scope: me},

package/src/worker/App.mjs

@@ -122,7 +122,7 @@ class App extends Base {
                 lAppName = appName.toLowerCase(),
                 cssMap   = Neo.cssMap,
                 parent   = proto?.__proto__,
-                classPath, fileName, mapClassName, ns, themeFolders;
+                classPath, classRoot, fileName, mapClassName, ns, themeFolders;
 
             if (!cssMap) {
                 me.themeFilesCache.push([appName, proto]);
@@ -130,11 +130,11 @@ class App extends Base {
                 // we need to modify app related class names
                 if (!className.startsWith('Neo.')) {
                     className = className.split('.');
-                    lAppName  = className.shift().toLowerCase();
+                    classRoot = className.shift().toLowerCase();
 
                     className[0] === 'view' && className.shift();
 
-                    mapClassName = `apps.${Neo.apps[appName].appThemeFolder || lAppName}.${className.join('.')}`;
+                    mapClassName = `apps.${Neo.apps[appName].appThemeFolder || classRoot}.${className.join('.')}`;
                     className    = `apps.${lAppName}.${className.join('.')}`;
                 }