wip

src/client/js/components/Navbar/GrowiSubNavigation.jsx

@@ -18,9 +18,14 @@ const GrowiSubNavigation = (props) => {
   const isPageForbidden = document.querySelector('#grw-subnav').getAttribute('data-is-forbidden-page');
   const { appContainer, pageContainer } = props;
   const {
-    path, createdAt, creator, updatedAt, revisionAuthor,
+    path, createdAt, creator, updatedAt, revisionAuthor, isCompactMode,
   } = pageContainer.state;
-  const isCompactMode = true;
+  console.log(isCompactMode);
+  // const isCompactMode = window.addEventListener('scroll', () => {
+  //   console.log(window.pageYOffset);
+  //   console.log(window.pageYOffset > 122);
+  //   return window.pageYOffset > 122;
+  // });
   const compactClassName = isCompactMode ? 'fixed-top grw-compact-subnavbar px-3' : null;
 
   // Display only the RevisionPath if the page is trash or forbidden
@@ -57,8 +62,8 @@ const GrowiSubNavigation = (props) => {
 
       {/* Page Authors */}
       <ul className="authors text-nowrap d-none d-lg-block">
-        {creator != null && <li><PageCreator creator={creator} createdAt={createdAt} /></li>}
-        {revisionAuthor != null && <li className="mt-1"><RevisionAuthor revisionAuthor={revisionAuthor} updatedAt={updatedAt} /></li>}
+        {creator != null && <li><PageCreator creator={creator} createdAt={createdAt} isCompactMode={isCompactMode} /></li>}
+        {revisionAuthor != null && <li className="mt-1"><RevisionAuthor revisionAuthor={revisionAuthor} updatedAt={updatedAt} isCompactMode={isCompactMode} /></li>}
       </ul>
 
     </div>
@@ -73,7 +78,6 @@ const GrowiSubNavigationWrapper = (props) => {
   return createSubscribedElement(GrowiSubNavigation, props, [AppContainer, PageContainer]);
 };
 
-
 GrowiSubNavigation.propTypes = {
   t: PropTypes.func.isRequired, //  i18next
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,

src/client/js/components/Navbar/PageCreator.jsx

@@ -5,8 +5,8 @@ import UserPicture from '../User/UserPicture';
 import { userPageRoot } from '../../../../lib/util/path-utils';
 
 const PageCreator = (props) => {
-  const { creator, createdAt } = props;
-  const isCompactMode = true;
+  const { creator, createdAt, isCompactMode } = props;
+  // const isCompactMode = true;
   const creatInfo = isCompactMode
     ? (<div>Created in <span className="text-muted">{createdAt}</span></div>)
     : (<div><div>Created by <a href={userPageRoot(creator)}>{creator.name}</a></div><div className="text-muted">{createdAt}</div></div>);
@@ -26,6 +26,7 @@ PageCreator.propTypes = {
 
   creator: PropTypes.object.isRequired,
   createdAt: PropTypes.string.isRequired,
+  isCompactMode: PropTypes.bool.isRequired,
 };
 
 

src/client/js/components/Navbar/RevisionAuthor.jsx

@@ -5,8 +5,8 @@ import UserPicture from '../User/UserPicture';
 import { userPageRoot } from '../../../../lib/util/path-utils';
 
 const RevisionAuthor = (props) => {
-  const { revisionAuthor, updatedAt } = props;
-  const isCompactMode = true;
+  const { revisionAuthor, updatedAt, isCompactMode } = props;
+  // const isCompactMode = true;
   const updateInfo = isCompactMode
     ? (<div>Updated in <span className="text-muted">{updatedAt}</span></div>)
     : (<div><div>Updated in  <a href={userPageRoot(revisionAuthor)}>{revisionAuthor.name}</a></div><div className="text-muted">{updatedAt}</div></div>);
@@ -26,6 +26,7 @@ RevisionAuthor.propTypes = {
 
   revisionAuthor: PropTypes.object.isRequired,
   updatedAt: PropTypes.string.isRequired,
+  isCompactMode: PropTypes.bool.isRequired,
 };
 
 

src/client/js/services/PageContainer.js

@@ -55,6 +55,7 @@ export default class PageContainer extends Container {
       pageIdOnHackmd: mainContent.getAttribute('data-page-id-on-hackmd') || null,
       hasDraftOnHackmd: !!mainContent.getAttribute('data-page-has-draft-on-hackmd'),
       isHackmdDraftUpdatingInRealtime: false,
+      isConpactMode: false,
     };
 
     this.initStateMarkdown();
@@ -66,6 +67,11 @@ export default class PageContainer extends Container {
     this.addWebSocketEventHandlers();
   }
 
+  componentDidMount() {
+    this.isCompactMode = window.addEventListener('scroll', () => { this.setState({ isCompactMode: window.pageYOffset > 122 }) });
+    console.log(this.state);
+  }
+
   /**
    * Workaround for the mangling in production build to break constructor.name
    */