layout.Card: slideCards() #5401 WIP

neomjs · Apr 22, 2024 · 4eff10a · 4eff10a
1 parent f7c320a
commit 4eff10a
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 25 deletions.
diff --git a/resources/scss/src/layout/Card.scss b/resources/scss/src/layout/Card.scss
@@ -9,4 +9,21 @@
             display: none !important;
         }
     }
+
+    .neo-animation-wrapper {
+        display    : flex;
+        transition : transform 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
+        will-change: transform;
+
+        > * {
+            flex: 1 0 auto;
+        }
+    }
+
+    .neo-relative {
+        height  : 100%;
+        overflow: hidden;
+        position: relative;
+        width   : 100%;
+    }
 }
diff --git a/src/layout/Card.mjs b/src/layout/Card.mjs
@@ -75,6 +75,7 @@ class Card extends Base {
             containerId         = me.containerId,
             container           = Neo.getComponent(containerId) || Neo.get(containerId), // the instance might not be registered yet
             sCfg                = me.constructor,
+            needsTransition     = me.slideDirection && oldValue !== undefined,
             needsUpdate         = false,
             removeInactiveCards = me.removeInactiveCards,
             i, isActiveIndex, item, items, len, module, wrapperCls;
@@ -106,36 +107,32 @@ class Card extends Base {
                     item = await me.loadModule(item, i)
                 }
 
-                if (!me.slideDirection) {
-                    if (item instanceof Neo.component.Base) {
-                        wrapperCls = item.wrapperCls;
-
-                        NeoArray.remove(wrapperCls, isActiveIndex ? sCfg.inactiveItemCls : sCfg.activeItemCls);
-                        NeoArray.add(   wrapperCls, isActiveIndex ? sCfg.activeItemCls   : sCfg.inactiveItemCls);
-
-                        if (removeInactiveCards || needsUpdate) {
-                            item.wrapperCls = wrapperCls;
-
-                            if (isActiveIndex) {
-                                delete item.vdom.removeDom;
-                                item.activate?.()
-                            } else if (removeInactiveCards) {
-                                item.mounted = false;
-                                item.vdom.removeDom = true
-                            }
-                        } else {
-                            item.wrapperCls = wrapperCls
+                if (item instanceof Neo.component.Base) {
+                    wrapperCls = item.wrapperCls;
+
+                    NeoArray.remove(wrapperCls, isActiveIndex ? sCfg.inactiveItemCls : sCfg.activeItemCls);
+                    NeoArray.add(   wrapperCls, isActiveIndex ? sCfg.activeItemCls   : sCfg.inactiveItemCls);
+
+                    item.wrapperCls = wrapperCls;
+
+                    if (!needsTransition && (removeInactiveCards || needsUpdate)) {
+                        if (isActiveIndex) {
+                            delete item.vdom.removeDom;
+                            item.activate?.()
+                        } else if (removeInactiveCards) {
+                            item.mounted        = false;
+                            item.vdom.removeDom = true
                         }
                     }
                 }
             }
 
-            if (!me.slideDirection && (removeInactiveCards || needsUpdate)) {
-                container.update();
-            }
-
-            if (me.slideDirection) {
-                console.log('animate update')
+            if (needsTransition) {
+                await me.slideCards(value, oldValue)
+            } else {
+                if (removeInactiveCards || needsUpdate) {
+                    container.update()
+                }
             }
         }
     }
@@ -257,6 +254,53 @@ class Card extends Base {
 
         container.wrapperCls = wrapperCls
     }
+
+    /**
+     * @param {Number} index
+     * @param {Number} oldIndex
+     */
+    async slideCards(index, oldIndex) {
+        console.log('slideCards', index, oldIndex);
+
+        let me                          = this,
+            {container, slideDirection} = me,
+            {items}                     = container,
+            card                        = items[index],
+            oldCard                     = items[oldIndex],
+            height, rect, transform, vdom, x, width;
+
+        rect      = await container.getDomRect(container.id);
+        height    = `${rect.height}px`;
+        x         = index > oldIndex ? 0 : -rect.width;
+        transform = `translateX(${x}px)`;
+        vdom      = container.vdom;
+        width     = `${2 * rect.width}px`;
+
+        delete card.vdom.removeDom;
+
+        vdom.cn = [
+            {cls: ['neo-relative'], cn: [
+                {cls: ['neo-animation-wrapper'], style: {height, transform, width}, cn: [
+                    oldCard.vdom,
+                    card.vdom
+                ]}
+            ]}
+        ];
+
+        await container.promiseUpdate();
+
+        x = index > oldIndex ? -rect.width : 0;
+
+        vdom.cn[0].cn[0].style.transform = `translateX(${x}px)`;
+
+        await container.promiseUpdate();
+
+        await me.timeout(300);
+
+        vdom.cn[0] = vdom.cn[0].cn[0].cn[1];
+
+        await container.promiseUpdate()
+    }
 }
 
 Neo.setupClass(Card);