From 7fc0cadb81b36c2e09ea846240b6bf6fcf28243e Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Sun, 21 Jul 2024 23:11:21 +1200 Subject: [PATCH 01/26] Initial functionality pass --- client/homebrew/brewRenderer/brewRenderer.jsx | 61 ++++++++++++++++++- .../homebrew/brewRenderer/brewRenderer.less | 35 +++++++++-- 2 files changed, 90 insertions(+), 6 deletions(-) diff --git a/client/homebrew/brewRenderer/brewRenderer.jsx b/client/homebrew/brewRenderer/brewRenderer.jsx index 3c36244c1..5d48cc4e8 100644 --- a/client/homebrew/brewRenderer/brewRenderer.jsx +++ b/client/homebrew/brewRenderer/brewRenderer.jsx @@ -65,9 +65,11 @@ const BrewRenderer = (props)=>{ height : PAGE_HEIGHT, isMounted : false, visibility : 'hidden', + showHeaderNav : false }); const mainRef = useRef(null); + const pagesRef = useRef(null); if(props.renderer == 'legacy') { rawPages = props.text.split('\\page'); @@ -188,6 +190,60 @@ const BrewRenderer = (props)=>{ document.dispatchEvent(new MouseEvent('click')); }; + const toggleHeaderNav = ()=>{ + setState((prevState)=>({ + ...prevState, + showHeaderNav : !prevState.showHeaderNav + })); + }; + + const renderHeaderNav = ()=>{ + return <> + + {state.showHeaderNav && renderHeaderLinks()} + ; + }; + + const renderHeaderLinks = ()=>{ + if(!pagesRef.current) return; + const elements = pagesRef.current.querySelectorAll('[id]'); + if(!elements) return; + const navList = []; + + elements.forEach((el)=>{ + if(el.className.match(/\bpage\b/)) { + navList.push({ + depth : 0, + text : `Page ${el.id.slice(1)}`, + link : el.id + }); + return; + } + if(el.localName.match(/^h[1-6]/)){ + navList.push({ + depth : el.localName[1], + text : el.innerText, + link : el.id + }); + return; + } + navList.push({ + depth : 7, + text : el.innerText, + link : el.id + }); + }); + + return _.map(navList, (navItem)=>{ + return

+ {`${'-'.repeat(navItem.depth)}${navItem.text}`} +

; + }); + }; + const rendererPath = props.renderer == 'V3' ? 'V3' : 'Legacy'; const themePath = props.theme ?? '5ePHB'; const baseThemePath = Themes[rendererPath][themePath].baseTheme; @@ -232,12 +288,15 @@ const BrewRenderer = (props)=>{ && <> {renderStyle()} -
+
{renderPages()}
}
+
+ {renderHeaderNav()} +
{renderPageInfo()} diff --git a/client/homebrew/brewRenderer/brewRenderer.less b/client/homebrew/brewRenderer/brewRenderer.less index 28ea8005e..1482a09b4 100644 --- a/client/homebrew/brewRenderer/brewRenderer.less +++ b/client/homebrew/brewRenderer/brewRenderer.less @@ -31,12 +31,8 @@ visibility: hidden; } } - - - - - } + .pane { position : relative; } .pageInfo { position : absolute; @@ -65,6 +61,32 @@ background-color : #333333; } +.headerNav { + position: fixed; + top: 0px; + left: 0px; + padding: 5px 10px; + background-color: #ccc; + border-radius: 5px; + max-height: 100vh; + overflow-y: auto; + .navIcon { + cursor: pointer; + } + p { + padding: 2px; + a { + color: inherit; + text-decoration: none; + cursor: pointer; + &:hover { + text-decoration: underline; + } + } + } +} + + @media print { .brewRenderer { height: 100%; @@ -76,4 +98,7 @@ } } } + .headerNav { + visibility: hidden; + } } \ No newline at end of file From 17b081b18be4dfec488608ef42cb93754ebff7d4 Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Mon, 22 Jul 2024 17:30:29 +1200 Subject: [PATCH 02/26] Added showHeaderNav prop to make nav menu conditional --- client/homebrew/brewRenderer/brewRenderer.jsx | 11 ++++++++--- client/homebrew/pages/editPage/editPage.jsx | 1 + client/homebrew/pages/sharePage/sharePage.jsx | 1 + 3 files changed, 10 insertions(+), 3 deletions(-) diff --git a/client/homebrew/brewRenderer/brewRenderer.jsx b/client/homebrew/brewRenderer/brewRenderer.jsx index 5d48cc4e8..e18af0782 100644 --- a/client/homebrew/brewRenderer/brewRenderer.jsx +++ b/client/homebrew/brewRenderer/brewRenderer.jsx @@ -57,6 +57,7 @@ const BrewRenderer = (props)=>{ lang : '', errors : [], currentEditorPage : 0, + showHeaderNav : false, ...props }; @@ -294,9 +295,13 @@ const BrewRenderer = (props)=>{ } -
- {renderHeaderNav()} -
+ {props.showHeaderNav ? +
+ {renderHeaderNav()} +
+ : + <> + } {renderPageInfo()} diff --git a/client/homebrew/pages/editPage/editPage.jsx b/client/homebrew/pages/editPage/editPage.jsx index 48d0f3fe5..8473a63b3 100644 --- a/client/homebrew/pages/editPage/editPage.jsx +++ b/client/homebrew/pages/editPage/editPage.jsx @@ -416,6 +416,7 @@ const EditPage = createClass({ lang={this.state.brew.lang} currentEditorPage={this.state.currentEditorPage} allowPrint={true} + showHeaderNav={true} /> diff --git a/client/homebrew/pages/sharePage/sharePage.jsx b/client/homebrew/pages/sharePage/sharePage.jsx index 9695ee810..6c3c943b8 100644 --- a/client/homebrew/pages/sharePage/sharePage.jsx +++ b/client/homebrew/pages/sharePage/sharePage.jsx @@ -100,6 +100,7 @@ const SharePage = createClass({ renderer={this.props.brew.renderer} theme={this.props.brew.theme} allowPrint={true} + showHeaderNav={true} /> ; From c269d32247dc0a9f6dc473530b7aa45cedfa9d7d Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Mon, 22 Jul 2024 18:45:36 +1200 Subject: [PATCH 03/26] Move headerNav to separate component --- client/homebrew/brewRenderer/brewRenderer.jsx | 67 +---------------- .../homebrew/brewRenderer/brewRenderer.less | 25 ------- .../brewRenderer/headerNav/headerNav.jsx | 73 +++++++++++++++++++ .../brewRenderer/headerNav/headerNav.less | 30 ++++++++ 4 files changed, 107 insertions(+), 88 deletions(-) create mode 100644 client/homebrew/brewRenderer/headerNav/headerNav.jsx create mode 100644 client/homebrew/brewRenderer/headerNav/headerNav.less diff --git a/client/homebrew/brewRenderer/brewRenderer.jsx b/client/homebrew/brewRenderer/brewRenderer.jsx index e18af0782..9a55eb657 100644 --- a/client/homebrew/brewRenderer/brewRenderer.jsx +++ b/client/homebrew/brewRenderer/brewRenderer.jsx @@ -15,6 +15,8 @@ const Frame = require('react-frame-component').default; const dedent = require('dedent-tabs').default; const { printCurrentBrew } = require('../../../shared/helpers.js'); +import HeaderNav from './headerNav/headerNav.jsx'; + const DOMPurify = require('dompurify'); const purifyConfig = { FORCE_BODY: true, SANITIZE_DOM: false }; @@ -65,8 +67,7 @@ const BrewRenderer = (props)=>{ viewablePageNumber : 0, height : PAGE_HEIGHT, isMounted : false, - visibility : 'hidden', - showHeaderNav : false + visibility : 'hidden' }); const mainRef = useRef(null); @@ -191,60 +192,6 @@ const BrewRenderer = (props)=>{ document.dispatchEvent(new MouseEvent('click')); }; - const toggleHeaderNav = ()=>{ - setState((prevState)=>({ - ...prevState, - showHeaderNav : !prevState.showHeaderNav - })); - }; - - const renderHeaderNav = ()=>{ - return <> - - {state.showHeaderNav && renderHeaderLinks()} - ; - }; - - const renderHeaderLinks = ()=>{ - if(!pagesRef.current) return; - const elements = pagesRef.current.querySelectorAll('[id]'); - if(!elements) return; - const navList = []; - - elements.forEach((el)=>{ - if(el.className.match(/\bpage\b/)) { - navList.push({ - depth : 0, - text : `Page ${el.id.slice(1)}`, - link : el.id - }); - return; - } - if(el.localName.match(/^h[1-6]/)){ - navList.push({ - depth : el.localName[1], - text : el.innerText, - link : el.id - }); - return; - } - navList.push({ - depth : 7, - text : el.innerText, - link : el.id - }); - }); - - return _.map(navList, (navItem)=>{ - return

- {`${'-'.repeat(navItem.depth)}${navItem.text}`} -

; - }); - }; - const rendererPath = props.renderer == 'V3' ? 'V3' : 'Legacy'; const themePath = props.theme ?? '5ePHB'; const baseThemePath = Themes[rendererPath][themePath].baseTheme; @@ -295,13 +242,7 @@ const BrewRenderer = (props)=>{ } - {props.showHeaderNav ? -
- {renderHeaderNav()} -
- : - <> - } + {props.showHeaderNav ? : <>} {renderPageInfo()} diff --git a/client/homebrew/brewRenderer/brewRenderer.less b/client/homebrew/brewRenderer/brewRenderer.less index 1482a09b4..ad34c6221 100644 --- a/client/homebrew/brewRenderer/brewRenderer.less +++ b/client/homebrew/brewRenderer/brewRenderer.less @@ -61,31 +61,6 @@ background-color : #333333; } -.headerNav { - position: fixed; - top: 0px; - left: 0px; - padding: 5px 10px; - background-color: #ccc; - border-radius: 5px; - max-height: 100vh; - overflow-y: auto; - .navIcon { - cursor: pointer; - } - p { - padding: 2px; - a { - color: inherit; - text-decoration: none; - cursor: pointer; - &:hover { - text-decoration: underline; - } - } - } -} - @media print { .brewRenderer { diff --git a/client/homebrew/brewRenderer/headerNav/headerNav.jsx b/client/homebrew/brewRenderer/headerNav/headerNav.jsx new file mode 100644 index 000000000..360a77dfd --- /dev/null +++ b/client/homebrew/brewRenderer/headerNav/headerNav.jsx @@ -0,0 +1,73 @@ +require('./headerNav.less'); + +import * as React from 'react'; +import * as _ from 'lodash'; + + +const HeaderNav = React.forwardRef(({}, pagesRef)=>{ + + const [state, setState] = React.useState({ + showHeaderNav : false + }); + + const toggleHeaderNav = ()=>{ + setState((prevState)=>({ + ...prevState, + showHeaderNav : !prevState.showHeaderNav + })); + }; + + const renderHeaderLinks = ()=>{ + if(!pagesRef.current) return; + const elements = pagesRef.current.querySelectorAll('[id]'); + if(!elements) return; + const navList = []; + + elements.forEach((el)=>{ + if(el.className.match(/\bpage\b/)) { + navList.push({ + depth : 0, + text : `Page ${el.id.slice(1)}`, + link : el.id + }); + return; + } + if(el.localName.match(/^h[1-6]/)){ + navList.push({ + depth : el.localName[1], + text : el.innerText, + link : el.id + }); + return; + } + navList.push({ + depth : 7, + text : el.innerText, + link : el.id + }); + }); + + return _.map(navList, (navItem, index)=>{ + return ; + }); + + }; + + return
+ + {state.showHeaderNav && renderHeaderLinks()} +
; +} +); + +const HeaderNavItem = ({ index, link, text, depth })=>{ + return

+ {`${'-'.repeat(depth)}${text}`} +

; +}; + +export default HeaderNav; \ No newline at end of file diff --git a/client/homebrew/brewRenderer/headerNav/headerNav.less b/client/homebrew/brewRenderer/headerNav/headerNav.less new file mode 100644 index 000000000..381d1aa53 --- /dev/null +++ b/client/homebrew/brewRenderer/headerNav/headerNav.less @@ -0,0 +1,30 @@ +.headerNav { + position: fixed; + top: 0px; + left: 0px; + padding: 5px 10px; + background-color: #ccc; + border-radius: 5px; + max-height: 100vh; + overflow-y: auto; + &.active { + padding-bottom: 10px; + .navIcon { + padding-bottom: 10px; + } + } + .navIcon { + cursor: pointer; + } + p { + padding: 2px; + a { + color: inherit; + text-decoration: none; + cursor: pointer; + &:hover { + text-decoration: underline; + } + } + } +} \ No newline at end of file From effeffd9068b670080b9b7825094ee53bb10d5df Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Mon, 22 Jul 2024 19:07:58 +1200 Subject: [PATCH 04/26] Add styling to page links --- .../brewRenderer/headerNav/headerNav.jsx | 17 ++++++++++------- .../brewRenderer/headerNav/headerNav.less | 3 +++ 2 files changed, 13 insertions(+), 7 deletions(-) diff --git a/client/homebrew/brewRenderer/headerNav/headerNav.jsx b/client/homebrew/brewRenderer/headerNav/headerNav.jsx index 360a77dfd..40f6cf4af 100644 --- a/client/homebrew/brewRenderer/headerNav/headerNav.jsx +++ b/client/homebrew/brewRenderer/headerNav/headerNav.jsx @@ -26,9 +26,10 @@ const HeaderNav = React.forwardRef(({}, pagesRef)=>{ elements.forEach((el)=>{ if(el.className.match(/\bpage\b/)) { navList.push({ - depth : 0, - text : `Page ${el.id.slice(1)}`, - link : el.id + depth : 0, + text : `Page ${el.id.slice(1)}`, + link : el.id, + className : 'pageLink' }); return; } @@ -48,7 +49,7 @@ const HeaderNav = React.forwardRef(({}, pagesRef)=>{ }); return _.map(navList, (navItem, index)=>{ - return ; + return ; }); }; @@ -64,9 +65,11 @@ const HeaderNav = React.forwardRef(({}, pagesRef)=>{ } ); -const HeaderNavItem = ({ index, link, text, depth })=>{ - return

- {`${'-'.repeat(depth)}${text}`} +const HeaderNavItem = ({ link, text, depth, className })=>{ + return

+ + {`${'-'.repeat(depth)}${text}`} +

; }; diff --git a/client/homebrew/brewRenderer/headerNav/headerNav.less b/client/homebrew/brewRenderer/headerNav/headerNav.less index 381d1aa53..588687d88 100644 --- a/client/homebrew/brewRenderer/headerNav/headerNav.less +++ b/client/homebrew/brewRenderer/headerNav/headerNav.less @@ -25,6 +25,9 @@ &:hover { text-decoration: underline; } + &.pageLink { + font-weight: 900; + } } } } \ No newline at end of file From a59135430cd02f791f7deef5bc046c56a12494c0 Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Mon, 26 Aug 2024 15:30:58 +1200 Subject: [PATCH 05/26] Fix missing comma --- client/homebrew/brewRenderer/brewRenderer.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/homebrew/brewRenderer/brewRenderer.jsx b/client/homebrew/brewRenderer/brewRenderer.jsx index c891b07d1..a7b93522d 100644 --- a/client/homebrew/brewRenderer/brewRenderer.jsx +++ b/client/homebrew/brewRenderer/brewRenderer.jsx @@ -67,7 +67,7 @@ const BrewRenderer = (props)=>{ viewablePageNumber : 0, height : PAGE_HEIGHT, isMounted : false, - visibility : 'hidden' + visibility : 'hidden', zoom : 100, currentPageNumber : 1, }); From 380c1444ca71ac3b48dd67e8e6498e325e469ad8 Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Mon, 26 Aug 2024 16:01:12 +1200 Subject: [PATCH 06/26] Tweak position to account for new toolbar --- client/homebrew/brewRenderer/headerNav/headerNav.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/homebrew/brewRenderer/headerNav/headerNav.less b/client/homebrew/brewRenderer/headerNav/headerNav.less index 588687d88..c03887413 100644 --- a/client/homebrew/brewRenderer/headerNav/headerNav.less +++ b/client/homebrew/brewRenderer/headerNav/headerNav.less @@ -1,6 +1,6 @@ .headerNav { position: fixed; - top: 0px; + top: 30px; left: 0px; padding: 5px 10px; background-color: #ccc; From e57b88a019c98acb14b166515bfb62feacdc64ec Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Mon, 26 Aug 2024 16:06:11 +1200 Subject: [PATCH 07/26] Limit max width of header navigation --- client/homebrew/brewRenderer/headerNav/headerNav.less | 1 + 1 file changed, 1 insertion(+) diff --git a/client/homebrew/brewRenderer/headerNav/headerNav.less b/client/homebrew/brewRenderer/headerNav/headerNav.less index c03887413..371081cbd 100644 --- a/client/homebrew/brewRenderer/headerNav/headerNav.less +++ b/client/homebrew/brewRenderer/headerNav/headerNav.less @@ -6,6 +6,7 @@ background-color: #ccc; border-radius: 5px; max-height: 100vh; + max-width: 40vw; overflow-y: auto; &.active { padding-bottom: 10px; From 708cbdc9e50c5df32ea717c0f9eec25a61dd8e71 Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Mon, 26 Aug 2024 21:26:30 +1200 Subject: [PATCH 08/26] Change to list items --- client/homebrew/brewRenderer/headerNav/headerNav.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/homebrew/brewRenderer/headerNav/headerNav.jsx b/client/homebrew/brewRenderer/headerNav/headerNav.jsx index 40f6cf4af..37eb0185c 100644 --- a/client/homebrew/brewRenderer/headerNav/headerNav.jsx +++ b/client/homebrew/brewRenderer/headerNav/headerNav.jsx @@ -66,11 +66,11 @@ const HeaderNav = React.forwardRef(({}, pagesRef)=>{ ); const HeaderNavItem = ({ link, text, depth, className })=>{ - return

+ return

  • {`${'-'.repeat(depth)}${text}`} -

    ; +
    • ; }; export default HeaderNav; \ No newline at end of file From a1c275479febb902f6f6f0db09c06d50d1ee25bc Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Mon, 26 Aug 2024 21:27:09 +1200 Subject: [PATCH 09/26] Change toolbar to relative positioning --- client/homebrew/brewRenderer/brewRenderer.less | 1 - client/homebrew/brewRenderer/toolBar/toolBar.less | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/client/homebrew/brewRenderer/brewRenderer.less b/client/homebrew/brewRenderer/brewRenderer.less index 04e70f09b..56447d63b 100644 --- a/client/homebrew/brewRenderer/brewRenderer.less +++ b/client/homebrew/brewRenderer/brewRenderer.less @@ -1,7 +1,6 @@ @import (multiple, less) 'shared/naturalcrit/styles/reset.less'; .brewRenderer { - padding-top : 30px; overflow-y : scroll; will-change : transform; :where(.pages) { diff --git a/client/homebrew/brewRenderer/toolBar/toolBar.less b/client/homebrew/brewRenderer/toolBar/toolBar.less index 33a6836ef..93b2bb7f6 100644 --- a/client/homebrew/brewRenderer/toolBar/toolBar.less +++ b/client/homebrew/brewRenderer/toolBar/toolBar.less @@ -1,5 +1,5 @@ .toolBar { - position : absolute; + position : relative; z-index : 1; box-sizing : border-box; display : flex; From ba4c9745a26004b26ed47647e9042ad3022ef041 Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Mon, 26 Aug 2024 21:27:41 +1200 Subject: [PATCH 10/26] Tweak styling for recent changes --- client/homebrew/brewRenderer/headerNav/headerNav.less | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/client/homebrew/brewRenderer/headerNav/headerNav.less b/client/homebrew/brewRenderer/headerNav/headerNav.less index 371081cbd..c9bc7918d 100644 --- a/client/homebrew/brewRenderer/headerNav/headerNav.less +++ b/client/homebrew/brewRenderer/headerNav/headerNav.less @@ -1,6 +1,6 @@ .headerNav { position: fixed; - top: 30px; + top: 0px; left: 0px; padding: 5px 10px; background-color: #ccc; @@ -17,7 +17,9 @@ .navIcon { cursor: pointer; } - p { + li { + font-family: 'Open Sans'; + font-size: 12px; padding: 2px; a { color: inherit; From 30dac3a73c8500bcd5cd31451aea9fbe39e9e534 Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Mon, 26 Aug 2024 21:53:15 +1200 Subject: [PATCH 11/26] Revert toolBar.less change --- client/homebrew/brewRenderer/toolBar/toolBar.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/homebrew/brewRenderer/toolBar/toolBar.less b/client/homebrew/brewRenderer/toolBar/toolBar.less index 93b2bb7f6..33a6836ef 100644 --- a/client/homebrew/brewRenderer/toolBar/toolBar.less +++ b/client/homebrew/brewRenderer/toolBar/toolBar.less @@ -1,5 +1,5 @@ .toolBar { - position : relative; + position : absolute; z-index : 1; box-sizing : border-box; display : flex; From 4a4a14b2abc1bc7d863af8bbe99d0cdb8417f8bb Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Fri, 3 Jan 2025 11:37:51 +1300 Subject: [PATCH 12/26] Add ref correctly, fix typo --- client/homebrew/brewRenderer/brewRenderer.jsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/client/homebrew/brewRenderer/brewRenderer.jsx b/client/homebrew/brewRenderer/brewRenderer.jsx index efd92167b..aa684b77d 100644 --- a/client/homebrew/brewRenderer/brewRenderer.jsx +++ b/client/homebrew/brewRenderer/brewRenderer.jsx @@ -54,7 +54,8 @@ const BrewPage = (props)=>{ else props.onVisibilityChange(props.index + 1, false, false); } - )}, + ); + }, { threshold: .3, rootMargin: '0px 0px 0px 0px' } // detect when >30% of page is within bounds. ); @@ -65,7 +66,8 @@ const BrewPage = (props)=>{ if(entry.isIntersecting) props.onVisibilityChange(props.index + 1, true, true); // Set this page as the center page } - )}, + ); + }, { threshold: 0, rootMargin: '-50% 0px -50% 0px' } // Detect when the page is at the center ); @@ -101,7 +103,7 @@ const BrewRenderer = (props)=>{ currentBrewRendererPageNum : 1, themeBundle : {}, onPageChange : ()=>{}, - showHeavderNav : false, + showHeaderNav : false, ...props }; @@ -311,7 +313,7 @@ const BrewRenderer = (props)=>{ && <> {renderedStyle} -
    +
    {renderedPages}
    From bbf6c3589ae97a954eab96a37cac7818d10cc029 Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Fri, 3 Jan 2025 11:53:29 +1300 Subject: [PATCH 13/26] Switch from innerText to textContent --- client/homebrew/brewRenderer/headerNav/headerNav.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/homebrew/brewRenderer/headerNav/headerNav.jsx b/client/homebrew/brewRenderer/headerNav/headerNav.jsx index 37eb0185c..20382520d 100644 --- a/client/homebrew/brewRenderer/headerNav/headerNav.jsx +++ b/client/homebrew/brewRenderer/headerNav/headerNav.jsx @@ -36,14 +36,14 @@ const HeaderNav = React.forwardRef(({}, pagesRef)=>{ if(el.localName.match(/^h[1-6]/)){ navList.push({ depth : el.localName[1], - text : el.innerText, + text : el.textContent, link : el.id }); return; } navList.push({ depth : 7, - text : el.innerText, + text : el.textContent, link : el.id }); }); From a95eef05450bea8797aeca7339bd2a56b4bb32d4 Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Fri, 3 Jan 2025 13:34:52 +1300 Subject: [PATCH 14/26] Add maximum length, use span for spacing --- .../brewRenderer/headerNav/headerNav.jsx | 17 +++++++++++--- .../brewRenderer/headerNav/headerNav.less | 23 +++++++++---------- 2 files changed, 25 insertions(+), 15 deletions(-) diff --git a/client/homebrew/brewRenderer/headerNav/headerNav.jsx b/client/homebrew/brewRenderer/headerNav/headerNav.jsx index 20382520d..19ee0b1d6 100644 --- a/client/homebrew/brewRenderer/headerNav/headerNav.jsx +++ b/client/homebrew/brewRenderer/headerNav/headerNav.jsx @@ -4,6 +4,8 @@ import * as React from 'react'; import * as _ from 'lodash'; +const MAX_TEXT_LENGTH = 40; + const HeaderNav = React.forwardRef(({}, pagesRef)=>{ const [state, setState] = React.useState({ @@ -66,11 +68,20 @@ const HeaderNav = React.forwardRef(({}, pagesRef)=>{ ); const HeaderNavItem = ({ link, text, depth, className })=>{ - return
  • + + const trimString = (text, prefixLength = 0)=>{ + const maxLength = MAX_TEXT_LENGTH - prefixLength; + if(text.trim().length > maxLength){ + return `${text.trim().slice(0, maxLength)}...`; + } + return text.trim(); + }; + + return

    - {`${'-'.repeat(depth)}${text}`} + {trimString(text, depth)} -

    • ; +

    ; }; export default HeaderNav; \ No newline at end of file diff --git a/client/homebrew/brewRenderer/headerNav/headerNav.less b/client/homebrew/brewRenderer/headerNav/headerNav.less index c9bc7918d..d58c4b093 100644 --- a/client/homebrew/brewRenderer/headerNav/headerNav.less +++ b/client/homebrew/brewRenderer/headerNav/headerNav.less @@ -1,6 +1,6 @@ .headerNav { position: fixed; - top: 0px; + top: 30px; left: 0px; padding: 5px 10px; background-color: #ccc; @@ -17,20 +17,19 @@ .navIcon { cursor: pointer; } - li { + a { font-family: 'Open Sans'; font-size: 12px; padding: 2px; - a { - color: inherit; - text-decoration: none; - cursor: pointer; - &:hover { - text-decoration: underline; - } - &.pageLink { - font-weight: 900; - } + color: inherit; + text-decoration: none; + cursor: pointer; + &:hover { + text-decoration: underline; } + &.pageLink { + font-weight: 900; + } + } } \ No newline at end of file From 34f104b406e2b39b250c11d68109e473fa8a484d Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Mon, 6 Jan 2025 22:29:22 +1300 Subject: [PATCH 15/26] Remove showHeaderNav prop from Edit and Share page BrewRenderer --- client/homebrew/pages/editPage/editPage.jsx | 69 +++++++++---------- client/homebrew/pages/sharePage/sharePage.jsx | 1 - 2 files changed, 34 insertions(+), 36 deletions(-) diff --git a/client/homebrew/pages/editPage/editPage.jsx b/client/homebrew/pages/editPage/editPage.jsx index 7e29ac92b..ffb6a6b40 100644 --- a/client/homebrew/pages/editPage/editPage.jsx +++ b/client/homebrew/pages/editPage/editPage.jsx @@ -432,41 +432,40 @@ const EditPage = createClass({ {this.renderNavbar()} {this.props.brew.lock && } -
    - - - - +
    + + + +
    ; } diff --git a/client/homebrew/pages/sharePage/sharePage.jsx b/client/homebrew/pages/sharePage/sharePage.jsx index db787c665..15eae54f7 100644 --- a/client/homebrew/pages/sharePage/sharePage.jsx +++ b/client/homebrew/pages/sharePage/sharePage.jsx @@ -116,7 +116,6 @@ const SharePage = (props)=>{ onPageChange={handleBrewRendererPageChange} currentBrewRendererPageNum={state.currentBrewRendererPageNum} allowPrint={true} - showHeaderNav={true} />
    From cf16566da8a0f1f80410258e76c36823a45815bd Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Mon, 6 Jan 2025 22:30:03 +1300 Subject: [PATCH 16/26] Move Header Navigation button to Toolbar --- client/homebrew/brewRenderer/brewRenderer.jsx | 7 ++++--- .../brewRenderer/headerNav/headerNav.jsx | 20 ++----------------- .../homebrew/brewRenderer/toolBar/toolBar.jsx | 9 ++++++--- .../brewRenderer/toolBar/toolBar.less | 6 ++++-- 4 files changed, 16 insertions(+), 26 deletions(-) diff --git a/client/homebrew/brewRenderer/brewRenderer.jsx b/client/homebrew/brewRenderer/brewRenderer.jsx index aa684b77d..7d9648ead 100644 --- a/client/homebrew/brewRenderer/brewRenderer.jsx +++ b/client/homebrew/brewRenderer/brewRenderer.jsx @@ -103,7 +103,6 @@ const BrewRenderer = (props)=>{ currentBrewRendererPageNum : 1, themeBundle : {}, onPageChange : ()=>{}, - showHeaderNav : false, ...props }; @@ -121,6 +120,8 @@ const BrewRenderer = (props)=>{ pageShadows : true }); + const [headerState, setHeaderState] = useState(false); + const mainRef = useRef(null); const pagesRef = useRef(null); @@ -294,7 +295,7 @@ const BrewRenderer = (props)=>{ - 0 ? state.visiblePages : [state.centerPage]} totalPages={rawPages.length}/> + 0 ? state.visiblePages : [state.centerPage]} totalPages={rawPages.length} headerState={headerState} setHeaderState={setHeaderState}/> {/*render in iFrame so broken code doesn't crash the site.*/} { } - {props.showHeaderNav ? : <>} + {headerState ? : <>} ); diff --git a/client/homebrew/brewRenderer/headerNav/headerNav.jsx b/client/homebrew/brewRenderer/headerNav/headerNav.jsx index 19ee0b1d6..50c2ba86b 100644 --- a/client/homebrew/brewRenderer/headerNav/headerNav.jsx +++ b/client/homebrew/brewRenderer/headerNav/headerNav.jsx @@ -8,17 +8,6 @@ const MAX_TEXT_LENGTH = 40; const HeaderNav = React.forwardRef(({}, pagesRef)=>{ - const [state, setState] = React.useState({ - showHeaderNav : false - }); - - const toggleHeaderNav = ()=>{ - setState((prevState)=>({ - ...prevState, - showHeaderNav : !prevState.showHeaderNav - })); - }; - const renderHeaderLinks = ()=>{ if(!pagesRef.current) return; const elements = pagesRef.current.querySelectorAll('[id]'); @@ -56,13 +45,8 @@ const HeaderNav = React.forwardRef(({}, pagesRef)=>{ }; - return
    - - {state.showHeaderNav && renderHeaderLinks()} + return
    + {renderHeaderLinks()}
    ; } ); diff --git a/client/homebrew/brewRenderer/toolBar/toolBar.jsx b/client/homebrew/brewRenderer/toolBar/toolBar.jsx index ce60971aa..f11d1f127 100644 --- a/client/homebrew/brewRenderer/toolBar/toolBar.jsx +++ b/client/homebrew/brewRenderer/toolBar/toolBar.jsx @@ -9,7 +9,7 @@ import { Anchored, AnchoredBox, AnchoredTrigger } from '../../../components/Anch const MAX_ZOOM = 300; const MIN_ZOOM = 10; -const ToolBar = ({ displayOptions, onDisplayOptionsChange, visiblePages, totalPages })=>{ +const ToolBar = ({ displayOptions, onDisplayOptionsChange, visiblePages, totalPages, headerState, setHeaderState })=>{ const [pageNum, setPageNum] = useState(1); const [toolsVisible, setToolsVisible] = useState(true); @@ -62,7 +62,7 @@ const ToolBar = ({ displayOptions, onDisplayOptionsChange, visiblePages, totalPa // find the page with the largest single dim (height or width) so that zoom can be adapted to fit it. if(displayOptions.spread === 'facing') minDimRatio = [...pages].reduce((minRatio, page)=>Math.min(minRatio, iframeWidth / page.offsetWidth / 2), Infinity); // if 'facing' spread, fit two pages in view - else + else minDimRatio = [...pages].reduce((minRatio, page)=>Math.min(minRatio, iframeWidth / page.offsetWidth, iframeHeight / page.offsetHeight), Infinity); desiredZoom = minDimRatio * 100; @@ -76,7 +76,10 @@ const ToolBar = ({ displayOptions, onDisplayOptionsChange, visiblePages, totalPa return (