amotify 0.0.59 → 0.0.62

package/src/functions/Layout/RootViewController/parts.tsx

@@ -2,19 +2,19 @@ import {
   React,
   useRecycle,
   pageTransit
-} from '@global';
+} from '@global'
 import {
   Box,
   Flex,
-} from '@atoms';
+} from '@atoms'
 import {
   Column
-} from '@mols';
+} from '@mols'
 import {
   Buttons
-} from '@fn';
+} from '@fn'
 
-import style from './style.module.scss';
+import style from './style.module.scss'
 
 export const RootViewController: amotify.fn.Layout.RootViewController.Methods = {
   Base: ( params ) => {
@@ -25,32 +25,36 @@ export const RootViewController: amotify.fn.Layout.RootViewController.Methods =
       children,
       className,
       ...others
-    } = params;
-    let Key = useRecycle.set( 'RootViewController' );
+    } = params
+    let Key = useRecycle.set( 'RootViewController' )
 
     React.useEffect( () => {
-      calcHeights();
+      RootViewController.fn.updateCSSProperty.reset()
       setTimeout( () => {
-        calcHeights();
-      },100 );
+        RootViewController.fn.updateCSSProperty.reset()
+      },100 )
 
-      let getSideNavigationHeight = 'ResizeCB';
-      let beforeunload = 'RemovePageEventCB';
+      let getSideNavigationHeight = 'ResizeCB'
+      let beforeunload = 'RemovePageEventCB'
 
       $( window ).addEvent( {
         eventType: 'resize',
         eventID: getSideNavigationHeight,
         callback: () => {
-          if ( !amotify.config.device.isPhonepoint() ) calcHeights();
+          if ( amotify.config.device.isPhonepoint() ) return;
+          $.interval.clear( '__RVC_calcHeights' )
+          $.interval.standBy( '__RVC_calcHeights',300,() => {
+            RootViewController.fn.updateCSSProperty.reset()
+          } )
         }
       } )
       return () => {
-        $( window ).removeEvent( beforeunload );
-        $( window ).removeEvent( getSideNavigationHeight );
+        $( window ).removeEvent( beforeunload )
+        $( window ).removeEvent( getSideNavigationHeight )
       }
-    },[] );
+    },[] )
 
-    let Chilren: ReactElement = children;
+    let Chilren: ReactElement = children
 
     return <Column
       key={ Key }
@@ -84,30 +88,20 @@ export const RootViewController: amotify.fn.Layout.RootViewController.Methods =
         </Box>
       </Flex>
       { footerNavigation }
-    </Column>;
+    </Column>
   },
   TopNavigation: ( params ) => {
     let {
       className,
       children,
       ...others
-    } = params;
+    } = params
 
-    let [ val_componentID ] = React.useState( $.uuidGen() );
+    let [ val_componentID ] = React.useState( $.uuidGen() )
 
     React.useEffect( () => {
-      let { height } = $( `[data-id="${ val_componentID }"]` ).position();
-      height = height | 0;
-      let topBase = height;
-
-      if ( $( '#TopNavigation' ).getStyleProperty( 'position' ) != 'sticky' ) {
-        topBase = 0;
-      }
-
-      $( document.body )
-        .setStyleProperty( '--topNavHeight',height + 'px' )
-        .setStyleProperty( '--topBase',topBase + 'px' );
-    },[] );
+      RootViewController.fn.updateCSSProperty.topNav()
+    },[] )
 
     return <Flex
       key={ val_componentID }
@@ -118,21 +112,21 @@ export const RootViewController: amotify.fn.Layout.RootViewController.Methods =
       top={ 0 }
       backgroundColor='1.layer.base'
       { ...others }
-      id='TopNavigation'
+      id='__RVC_TopNavigation'
       className={ [
         className,
         style.TopNav
       ].join( ' ' ) }
     >
       { children }
-    </Flex>;
+    </Flex>
   },
   SideNavigation: ( params ) => {
     let {
       className = '',
       baseStyles,
       ...others
-    } = params;
+    } = params
 
     return <Box
       flexSizing={ 'none' }
@@ -142,21 +136,19 @@ export const RootViewController: amotify.fn.Layout.RootViewController.Methods =
       ].join( ' ' ) }
       minHeight='sideNavigationHeight'
       { ...others }
-    />;
+    />
   },
   FooterNavigation: ( params ) => {
     let {
       className = '',
       baseStyles,
       ...others
-    } = params;
-    let [ val_componentID ] = React.useState( $.uuidGen() );
+    } = params
+    let [ val_componentID ] = React.useState( $.uuidGen() )
 
     React.useEffect( () => {
-      let { height } = $( `[data-id="${ val_componentID }"]` ).position();
-      height = height | 0;
-      $( document.body ).setStyleProperty( '--footerNavHeight',height + 'px' );
-    },[] );
+      RootViewController.fn.updateCSSProperty.footer()
+    },[] )
 
     return <Flex
       data-id={ val_componentID }
@@ -166,13 +158,8 @@ export const RootViewController: amotify.fn.Layout.RootViewController.Methods =
       overflow={ 'auto' }
       backgroundColor='1.layer.base'
       paddingBottom={ 'safeAreaBottom' }
-      display='none'
       { ...baseStyles }
-      id='footerNavigation'
-      UnderBreakPointStyles={ {
-        display: 'flex',
-        ...baseStyles?.UnderBreakPointStyles
-      } }
+      id='__RVC_FooterNavigation'
       className={ [
         style.FooterNav,
         className
@@ -185,7 +172,7 @@ export const RootViewController: amotify.fn.Layout.RootViewController.Methods =
         margin={ 'auto' }
         { ...others }
       />
-    </Flex>;
+    </Flex>
   },
   Comps: {
     Button: ( params ) => {
@@ -195,31 +182,31 @@ export const RootViewController: amotify.fn.Layout.RootViewController.Methods =
         uriGroup,
         activeClassName = '',
         ...others
-      } = params;
+      } = params
 
-      let groups = $.flatArray( uriGroup );
+      let groups = $.flatArray( uriGroup )
 
-      let currentURL = location.pathname;
+      let currentURL = location.pathname
 
       {
-        let isCurrentURL = false;
+        let isCurrentURL = false
         if ( $.is.exist( uri ) && $.is.string( uri ) ) {
           let url = [
             location.origin,
             uri.replace( /\//,'' )
-          ].join( '/' );
-          isCurrentURL = currentURL == new URL( url ).pathname;
+          ].join( '/' )
+          isCurrentURL = currentURL == new URL( url ).pathname
         }
 
         if ( !isCurrentURL ) {
           if ( groups.length ) {
             for ( let group of groups ) {
-              if ( $.is.nullish( group ) ) continue;
-              if ( !!currentURL.match( new RegExp( group ) ) ) isCurrentURL = true;
+              if ( $.is.nullish( group ) ) continue
+              if ( !!currentURL.match( new RegExp( group ) ) ) isCurrentURL = true
             }
           }
         }
-        isActive = isActive ?? isCurrentURL;
+        isActive = isActive ?? isCurrentURL
       }
 
       return <Buttons.Button.Clear.R
@@ -240,11 +227,11 @@ export const RootViewController: amotify.fn.Layout.RootViewController.Methods =
           backgroundColor: 'cloud'
         } }
         onClick={ ( event ) => {
-          if ( $.is.exist( uri ) && $.is.string( uri ) ) pageTransit.push( uri,event.ctrlKey || event.metaKey );
+          if ( $.is.exist( uri ) && $.is.string( uri ) ) pageTransit.push( uri,event.ctrlKey || event.metaKey )
         } }
         color={ 'cloud' }
         { ...others }
-      />;
+      />
     },
     Bar: ( params ) => ( <Box
       flexSizing={ 'none' }
@@ -260,18 +247,54 @@ export const RootViewController: amotify.fn.Layout.RootViewController.Methods =
       padding={ [ 0,1 ] }
       { ...params }
     /> ),
-  }
-}
+  },
+  fn: {
+    updateCSSProperty: {
+      topNav: () => {
+        let Body = $( document.body )
+        let TopNav = $( '#__RVC_TopNavigation' )
+        let topNavHeight = TopNav.position().height || 0
+        let topBase = topNavHeight
 
-const calcHeights = () => {
-  let Body = $( document.body );
-  let viewHeight = window.innerHeight;
+        if ( TopNav.getStyleProperty( 'position' ) != 'sticky' ) {
+          topBase = 0
+        }
+
+        Body
+          .setStyleProperty( '--topNavHeight',topNavHeight + 'px' )
+          .setStyleProperty( '--topBase',topBase + 'px' )
+      },
+      footer: () => {
+        let Body = $( document.body )
+        let Footer = $( '#__RVC_FooterNavigation' )
+        let footerHeight = Footer.position().height || 0
+
+        Body
+          .setStyleProperty( '--footerNavHeight',footerHeight + 'px' )
+      },
+      reset: () => {
+        let Body = $( document.body )
+        let TopNav = $( '#__RVC_TopNavigation' )
+        let Footer = $( '#__RVC_FooterNavigation' )
+        let topNavHeight = TopNav.position().height || 0
+        let topBase = topNavHeight
+        let footerHeight = Footer.position().height || 0
 
-  let topNavHeight = Number( Body.getStyleProperty( '--topNavHeight' ).removeLetters() );
-  let footerNavHeight = Number( Body.getStyleProperty( '--footerNavHeight' ).removeLetters() );
-  let contentHeight = viewHeight - topNavHeight - footerNavHeight;
+        if ( TopNav.getStyleProperty( 'position' ) != 'sticky' ) {
+          topBase = 0
+        }
+
+        let viewHeight = window.innerHeight
+        let contentHeight = viewHeight - topNavHeight - footerHeight
 
-  Body.setStyleProperty( '--viewHeight',viewHeight + 'px' )
-    .setStyleProperty( '--sideNavHeight',contentHeight + 'px' )
-    .setStyleProperty( '--contentHeight',contentHeight + 'px' );
+        Body
+          .setStyleProperty( '--topNavHeight',topNavHeight + 'px' )
+          .setStyleProperty( '--topBase',topBase + 'px' )
+          .setStyleProperty( '--footerNavHeight',footerHeight + 'px' )
+          .setStyleProperty( '--viewHeight',viewHeight + 'px' )
+          .setStyleProperty( '--sideNavHeight',contentHeight + 'px' )
+          .setStyleProperty( '--contentHeight',contentHeight + 'px' )
+      },
+    }
+  }
 }

package/src/functions/Layout/RootViewController/style.module.scss

@@ -18,7 +18,6 @@
     }
     .Content {
       z-index: 2;
-      padding-bottom: $footerNavigationHeight;
     }
   }
 }