From 52b0ae0400c12e9222a027d87a628da6f760634e Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Sun, 1 Oct 2023 21:35:50 +1300 Subject: [PATCH 001/136] Basic functionality pass --- server/app.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/server/app.js b/server/app.js index f10b6ff5e..6b273e076 100644 --- a/server/app.js +++ b/server/app.js @@ -208,6 +208,20 @@ app.get('/download/:id', asyncHandler(getBrew('share')), (req, res)=>{ res.status(200).send(brew.text); }); +//Serve brew styling +app.get('/css/:id', asyncHandler(getBrew('share')), (req, res)=>{ + const { brew } = req; + splitTextStyleAndMetadata(brew); + + console.log(brew); + + res.set({ + 'Cache-Control' : 'no-cache', + 'Content-Type' : 'text/css' + }); + res.status(200).send(brew.style); +}); + //User Page app.get('/user/:username', async (req, res, next)=>{ const ownAccount = req.account && (req.account.username == req.params.username); From 0a309ad0e17185d0d2c7b252468702cdab39ddf4 Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Sun, 1 Oct 2023 21:46:52 +1300 Subject: [PATCH 002/136] Remove debugging console.log --- server/app.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/server/app.js b/server/app.js index 6b273e076..85ac459f5 100644 --- a/server/app.js +++ b/server/app.js @@ -213,8 +213,6 @@ app.get('/css/:id', asyncHandler(getBrew('share')), (req, res)=>{ const { brew } = req; splitTextStyleAndMetadata(brew); - console.log(brew); - res.set({ 'Cache-Control' : 'no-cache', 'Content-Type' : 'text/css' From bc9ab284d8e4fb031adbad39c734221318ce2249 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Tue, 21 May 2024 08:01:50 +0200 Subject: [PATCH 003/136] Initial UI --- client/homebrew/brewRenderer/brewRenderer.jsx | 2 + .../homebrew/brewRenderer/toolBar/toolBar.jsx | 85 +++++++++++++++++++ .../brewRenderer/toolBar/toolBar.less | 68 +++++++++++++++ 3 files changed, 155 insertions(+) create mode 100644 client/homebrew/brewRenderer/toolBar/toolBar.jsx create mode 100644 client/homebrew/brewRenderer/toolBar/toolBar.less diff --git a/client/homebrew/brewRenderer/brewRenderer.jsx b/client/homebrew/brewRenderer/brewRenderer.jsx index 38d7454a4..34d239040 100644 --- a/client/homebrew/brewRenderer/brewRenderer.jsx +++ b/client/homebrew/brewRenderer/brewRenderer.jsx @@ -7,6 +7,7 @@ const _ = require('lodash'); const MarkdownLegacy = require('naturalcrit/markdownLegacy.js'); const Markdown = require('naturalcrit/markdown.js'); const ErrorBar = require('./errorBar/errorBar.jsx'); +const ToolBar = require('./toolBar/toolBar.jsx'); //TODO: move to the brew renderer const RenderWarnings = require('homebrewery/renderWarnings/renderWarnings.jsx'); @@ -198,6 +199,7 @@ const BrewRenderer = (props)=>{ contentDidMount={frameDidMount} onClick={()=>{emitClick();}} > +
diff --git a/client/homebrew/brewRenderer/toolBar/toolBar.jsx b/client/homebrew/brewRenderer/toolBar/toolBar.jsx new file mode 100644 index 000000000..11eb6ecb9 --- /dev/null +++ b/client/homebrew/brewRenderer/toolBar/toolBar.jsx @@ -0,0 +1,85 @@ +require('./toolBar.less'); +const React = require('react'); +const { useState, useRef, useEffect } = React; +const _ = require('lodash'); + +const ToolBar = () => { + const [state, setState] = useState({ + currentPage: 1, + totalPages: 10, + zoomLevel: 100, + }); + + const setZoomLevel = (direction) => { + let zoomLevel = state.zoomLevel; + if (direction === 'in') { + zoomLevel += 10; + } else { + zoomLevel = zoomLevel - 10; + } + + setState((prevState) => ({ + ...prevState, + zoomLevel, + })); + }; + + const scrollToPage = (direction) => { + let currentPage = state.currentPage; + if (direction === 'next') { + currentPage += 1; + } else { + currentPage = currentPage - 1; + } + setState((prevState) => ({ + ...prevState, + currentPage, + })); + }; + + return ( +
+
+ +
+ + {state.zoomLevel}% +
+ +
+ +
+ +
+ + {state.currentPage} +
+ +
+
+ ); +}; + +module.exports = ToolBar; diff --git a/client/homebrew/brewRenderer/toolBar/toolBar.less b/client/homebrew/brewRenderer/toolBar/toolBar.less new file mode 100644 index 000000000..1d3ae5205 --- /dev/null +++ b/client/homebrew/brewRenderer/toolBar/toolBar.less @@ -0,0 +1,68 @@ +.toolBar { + font-family: 'Open Sans', sans-serif; + position: sticky; + top: 0; + left: 0; + width: 100%; + height: 30px; + background-color: #555; + border-top: 1px solid #666; + border-bottom: 1px solid #666; + color: white; + text-align: center; + z-index: 1; + display: flex; + justify-content: center; + align-items: baseline; + column-gap: 15px; + row-gap: 5px; + flex-wrap: wrap; + + span { + background: #eee; + font-family: 'Open Sans', sans-serif; + text-transform: uppercase; + font-weight: normal; + font-size: 16px; + color: #000; + padding: 2px 5px; + border-radius: 7px; + width: 50px; + } + + .tool { + display: flex; + align-items: center; + padding: 0 8px; + color: #ccc; + height: 100%; + + &:hover { + background-color: #444; + } + + button { + background-color: transparent; + font-family: 'Open Sans', sans-serif; + text-transform: uppercase; + font-weight: normal; + font-size: 11px; + color: #ccc; + padding: 0; + width: 70px; + + &:focus-within { + color: white; + font-weight: 800; + height: 100%; + } + + &:disabled { + color: #777; + background-color: transparent !important; + } + } + } + + +} \ No newline at end of file From 4543881808fa8ff3fbb2849ab9f5e0371dd054d7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Tue, 28 May 2024 08:51:23 +0200 Subject: [PATCH 004/136] functional zoom --- client/homebrew/brewRenderer/brewRenderer.jsx | 28 ++++++++++++++++++- .../homebrew/brewRenderer/toolBar/toolBar.jsx | 7 ++++- 2 files changed, 33 insertions(+), 2 deletions(-) diff --git a/client/homebrew/brewRenderer/brewRenderer.jsx b/client/homebrew/brewRenderer/brewRenderer.jsx index 34d239040..474f28937 100644 --- a/client/homebrew/brewRenderer/brewRenderer.jsx +++ b/client/homebrew/brewRenderer/brewRenderer.jsx @@ -65,6 +65,7 @@ const BrewRenderer = (props)=>{ height : PAGE_HEIGHT, isMounted : false, visibility : 'hidden', + zoom : 100, }); const mainRef = useRef(null); @@ -182,6 +183,30 @@ const BrewRenderer = (props)=>{ const themePath = props.theme ?? '5ePHB'; const baseThemePath = Themes[rendererPath][themePath].baseTheme; + + //Toolbar settings: + + const updateZoom = (newZoom) => { + setState((prevState)=>({ + ...prevState, + zoom : newZoom + })); + }; + + const makeZoom = () => { + + return( + + ); + } + + return ( <> {/*render dummy page while iFrame is mounting.*/} @@ -199,7 +224,7 @@ const BrewRenderer = (props)=>{ contentDidMount={frameDidMount} onClick={()=>{emitClick();}} > - +
@@ -214,6 +239,7 @@ const BrewRenderer = (props)=>{ } + {makeZoom()} {/* Apply CSS from Style tab and render pages from Markdown tab */} {state.isMounted diff --git a/client/homebrew/brewRenderer/toolBar/toolBar.jsx b/client/homebrew/brewRenderer/toolBar/toolBar.jsx index 11eb6ecb9..60e1a437e 100644 --- a/client/homebrew/brewRenderer/toolBar/toolBar.jsx +++ b/client/homebrew/brewRenderer/toolBar/toolBar.jsx @@ -3,13 +3,18 @@ const React = require('react'); const { useState, useRef, useEffect } = React; const _ = require('lodash'); -const ToolBar = () => { +const ToolBar = ({updateZoom}) => { const [state, setState] = useState({ currentPage: 1, totalPages: 10, zoomLevel: 100, }); + useEffect(() => { + console.log(`Zoom to: ${state.zoomLevel}`); + updateZoom(state.zoomLevel); + }, [state.zoomLevel]); + const setZoomLevel = (direction) => { let zoomLevel = state.zoomLevel; if (direction === 'in') { From f6161abf52cdf5082910b6986b5f113549d6cf5c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Wed, 29 May 2024 16:23:32 +0200 Subject: [PATCH 005/136] bottom margin to prevent bottom clip --- client/homebrew/brewRenderer/brewRenderer.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/homebrew/brewRenderer/brewRenderer.jsx b/client/homebrew/brewRenderer/brewRenderer.jsx index 474f28937..6326b911e 100644 --- a/client/homebrew/brewRenderer/brewRenderer.jsx +++ b/client/homebrew/brewRenderer/brewRenderer.jsx @@ -199,14 +199,14 @@ const BrewRenderer = (props)=>{ ); } - return ( <> {/*render dummy page while iFrame is mounting.*/} From 1442414299eb1a6a505d75d83d32f256a0ba5575 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Fri, 31 May 2024 16:23:47 +0200 Subject: [PATCH 006/136] scroll to page --- client/homebrew/brewRenderer/brewRenderer.jsx | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/client/homebrew/brewRenderer/brewRenderer.jsx b/client/homebrew/brewRenderer/brewRenderer.jsx index 6326b911e..435d2823a 100644 --- a/client/homebrew/brewRenderer/brewRenderer.jsx +++ b/client/homebrew/brewRenderer/brewRenderer.jsx @@ -80,6 +80,18 @@ const BrewRenderer = (props)=>{ return ()=>{window.removeEventListener('resize', updateSize);}; }, []); + const scrollToPage = (iframe, pageNumber) => { + if (iframe && iframe.contentWindow) { + const brewRenderer = iframe.contentWindow.document.querySelector('.brewRenderer'); + if (brewRenderer) { + const pages = brewRenderer.querySelectorAll('.page'); + if (pages && pages[pageNumber]) { + pages[pageNumber].scrollIntoView({ behavior: 'smooth', block: 'start' }); + } + } + } + }; + const updateSize = ()=>{ setState((prevState)=>({ ...prevState, From 176766dfe72fa971190812050b89070b79b71076 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Fri, 31 May 2024 16:25:29 +0200 Subject: [PATCH 007/136] change in themes.json apparently --- themes/themes.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/themes/themes.json b/themes/themes.json index 0d28c7394..bc719185d 100644 --- a/themes/themes.json +++ b/themes/themes.json @@ -29,12 +29,12 @@ "baseSnippets": false, "path": "Blank" }, - "Journal": { + "journal": { "name": "Journal", "renderer": "V3", "baseTheme": false, "baseSnippets": "5ePHB", - "path": "Journal" + "path": "journal" } } } \ No newline at end of file From 933dc372d2fa68c55acca33e906120c8713fe32d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Fri, 31 May 2024 17:10:35 +0200 Subject: [PATCH 008/136] "Refactor scrollToPage function to retrieve iframe element internally and add page not found logging" --- client/homebrew/brewRenderer/brewRenderer.jsx | 26 +++++++++++-------- 1 file changed, 15 insertions(+), 11 deletions(-) diff --git a/client/homebrew/brewRenderer/brewRenderer.jsx b/client/homebrew/brewRenderer/brewRenderer.jsx index b62e6c291..9d9d585e3 100644 --- a/client/homebrew/brewRenderer/brewRenderer.jsx +++ b/client/homebrew/brewRenderer/brewRenderer.jsx @@ -81,17 +81,21 @@ const BrewRenderer = (props)=>{ return ()=>{window.removeEventListener('resize', updateSize);}; }, []); - const scrollToPage = (iframe, pageNumber) => { - if (iframe && iframe.contentWindow) { - const brewRenderer = iframe.contentWindow.document.querySelector('.brewRenderer'); - if (brewRenderer) { - const pages = brewRenderer.querySelectorAll('.page'); - if (pages && pages[pageNumber]) { - pages[pageNumber].scrollIntoView({ behavior: 'smooth', block: 'start' }); - } - } - } - }; + const scrollToPage = (pageNumber) => { + const iframe = document.getElementById('BrewRenderer'); + if (iframe && iframe.contentWindow) { + const brewRenderer = + iframe.contentWindow.document.querySelector('.brewRenderer'); + if (brewRenderer) { + const pages = brewRenderer.querySelectorAll('.page'); + if (pageNumber > pages.length) { + console.log('page not found'); + } else { + pages[pageNumber].scrollIntoView({ block: 'start' }); + } + } + } + }; const updateSize = ()=>{ setState((prevState)=>({ From 69db1e2cb70f3e66eb6097d16950c73865ee9906 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Fri, 31 May 2024 19:43:09 +0200 Subject: [PATCH 009/136] change page works, added change zoom via input too --- client/homebrew/brewRenderer/brewRenderer.jsx | 10 +- .../homebrew/brewRenderer/toolBar/toolBar.jsx | 97 +++++++++++++++---- .../brewRenderer/toolBar/toolBar.less | 6 +- 3 files changed, 89 insertions(+), 24 deletions(-) diff --git a/client/homebrew/brewRenderer/brewRenderer.jsx b/client/homebrew/brewRenderer/brewRenderer.jsx index 9d9d585e3..9cbe824fa 100644 --- a/client/homebrew/brewRenderer/brewRenderer.jsx +++ b/client/homebrew/brewRenderer/brewRenderer.jsx @@ -88,7 +88,8 @@ const BrewRenderer = (props)=>{ iframe.contentWindow.document.querySelector('.brewRenderer'); if (brewRenderer) { const pages = brewRenderer.querySelectorAll('.page'); - if (pageNumber > pages.length) { + if (pageNumber + 1 > pages.length) { + console.log(pageNumber, pages.length); console.log('page not found'); } else { pages[pageNumber].scrollIntoView({ block: 'start' }); @@ -234,6 +235,11 @@ const BrewRenderer = (props)=>{ ); } + const handlePageChange = (pageNumber) => { + // Scroll to the desired page + scrollToPage(pageNumber); + }; + return ( <> {/*render dummy page while iFrame is mounting.*/} @@ -251,7 +257,7 @@ const BrewRenderer = (props)=>{ contentDidMount={frameDidMount} onClick={()=>{emitClick();}} > - +
{ +const ToolBar = ({ updateZoom, currentPage, onPageChange, totalPages }) => { const [state, setState] = useState({ - currentPage: 1, - totalPages: 10, + currentPage: currentPage, + totalPages: totalPages, zoomLevel: 100, }); + const [pageNumberInput, setPageNumberInput] = useState( + state.currentPage + 1 + ); + const [zoomInput, setZoomInput] = useState(state.zoomLevel); + useEffect(() => { console.log(`Zoom to: ${state.zoomLevel}`); updateZoom(state.zoomLevel); }, [state.zoomLevel]); + // Update currentPage whenever page prop changes + useEffect(() => { + console.log(`page number from props ${currentPage}`); + setState((prevState) => ({ + ...prevState, + currentPage: currentPage, + })); + setPageNumberInput(currentPage + 1); + }, [currentPage]); + const setZoomLevel = (direction) => { let zoomLevel = state.zoomLevel; if (direction === 'in') { @@ -29,17 +44,22 @@ const ToolBar = ({updateZoom}) => { })); }; - const scrollToPage = (direction) => { - let currentPage = state.currentPage; - if (direction === 'next') { - currentPage += 1; - } else { - currentPage = currentPage - 1; + const handleInputChange = (value, type) => { + // Remove the "%" symbol from the input value + const newValue = parseInt(value.replace('%', ''), 10); + + // Check the type of input (zoom or page) + if (type === 'zoom') { + // Check if zoom level is within the allowed range + if (newValue >= 10 && newValue <= 300) { + setZoomInput(newValue + '%'); // Add "%" back to the value + } + } else if (type === 'page') { + // Check if page number is within the allowed range + if (newValue >= 1 && newValue <= totalPages) { + setPageNumberInput(newValue); + } } - setState((prevState) => ({ - ...prevState, - currentPage, - })); }; return ( @@ -53,7 +73,27 @@ const ToolBar = ({updateZoom}) => {
- {state.zoomLevel}% +
+ handleInputChange(e.target.value, 'zoom')} + onBlur={(e) => { + const newZoomLevel = parseInt( + e.target.value.replace('%', ''), + 10 + ); + if (newZoomLevel !== state.zoomLevel) { + updateZoom(newZoomLevel); + } + }} + /> + % +
+
- {state.currentPage} + handleInputChange(e.target.value, 'page')} + onBlur={(e) => { + parseInt(pageNumberInput) === state.currentPage + 1 || + onPageChange(parseInt(pageNumberInput) - 1); + }} + /> +
diff --git a/client/homebrew/brewRenderer/toolBar/toolBar.less b/client/homebrew/brewRenderer/toolBar/toolBar.less index 1d3ae5205..db20a51a6 100644 --- a/client/homebrew/brewRenderer/toolBar/toolBar.less +++ b/client/homebrew/brewRenderer/toolBar/toolBar.less @@ -13,12 +13,12 @@ z-index: 1; display: flex; justify-content: center; - align-items: baseline; + align-items: center; column-gap: 15px; row-gap: 5px; flex-wrap: wrap; - span { + input { background: #eee; font-family: 'Open Sans', sans-serif; text-transform: uppercase; @@ -27,7 +27,7 @@ color: #000; padding: 2px 5px; border-radius: 7px; - width: 50px; + height:1.5em; } .tool { From f23c0bccbc2468dce9f2e08419e1edec7f9fdc58 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Fri, 31 May 2024 19:46:40 +0200 Subject: [PATCH 010/136] "Added onKeyPress event handler to zoom input and page number input to blur the target on Enter key press." --- client/homebrew/brewRenderer/toolBar/toolBar.jsx | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/client/homebrew/brewRenderer/toolBar/toolBar.jsx b/client/homebrew/brewRenderer/toolBar/toolBar.jsx index f9879428c..d6b39ffce 100644 --- a/client/homebrew/brewRenderer/toolBar/toolBar.jsx +++ b/client/homebrew/brewRenderer/toolBar/toolBar.jsx @@ -90,6 +90,11 @@ const ToolBar = ({ updateZoom, currentPage, onPageChange, totalPages }) => { updateZoom(newZoomLevel); } }} + onKeyPress={(e) => { + if (e.key === 'Enter') { + e.target.blur(); + } + }} /> %
@@ -128,6 +133,11 @@ const ToolBar = ({ updateZoom, currentPage, onPageChange, totalPages }) => { parseInt(pageNumberInput) === state.currentPage + 1 || onPageChange(parseInt(pageNumberInput) - 1); }} + onKeyPress={(e) => { + if (e.key === 'Enter') { + e.target.blur(); + } + }} />
From 000c3db8cde075d1a211e43c61fe609232d05325 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Fri, 31 May 2024 20:14:41 +0200 Subject: [PATCH 011/136] fixed page error --- client/homebrew/brewRenderer/brewRenderer.jsx | 18 ++++++++++++++++-- .../homebrew/brewRenderer/toolBar/toolBar.jsx | 13 ++++++------- 2 files changed, 22 insertions(+), 9 deletions(-) diff --git a/client/homebrew/brewRenderer/brewRenderer.jsx b/client/homebrew/brewRenderer/brewRenderer.jsx index 9cbe824fa..c15e081f1 100644 --- a/client/homebrew/brewRenderer/brewRenderer.jsx +++ b/client/homebrew/brewRenderer/brewRenderer.jsx @@ -67,6 +67,7 @@ const BrewRenderer = (props)=>{ isMounted : false, visibility : 'hidden', zoom : 100, + currentPageNumber : 1, }); const mainRef = useRef(null); @@ -88,7 +89,8 @@ const BrewRenderer = (props)=>{ iframe.contentWindow.document.querySelector('.brewRenderer'); if (brewRenderer) { const pages = brewRenderer.querySelectorAll('.page'); - if (pageNumber + 1 > pages.length) { + console.log(pageNumber); + if (pageNumber + 1 > pages.length || pageNumber < 0) { console.log(pageNumber, pages.length); console.log('page not found'); } else { @@ -111,6 +113,18 @@ const BrewRenderer = (props)=>{ ...prevState, viewablePageNumber : Math.floor(target.scrollTop / target.scrollHeight * rawPages.length) })); + + getCurrentPage(e); + }; + + const getCurrentPage = (e) => { + const target = e.target; + const currentPageNumber = Math.ceil(target.scrollTop / target.scrollHeight * rawPages.length); + + setState((prevState) => ({ + ...prevState, + currentPageNumber: currentPageNumber || 1 + })); }; const isInView = (index)=>{ @@ -257,7 +271,7 @@ const BrewRenderer = (props)=>{ contentDidMount={frameDidMount} onClick={()=>{emitClick();}} > - +
{ }); const [pageNumberInput, setPageNumberInput] = useState( - state.currentPage + 1 + state.currentPage ); const [zoomInput, setZoomInput] = useState(state.zoomLevel); @@ -22,12 +22,11 @@ const ToolBar = ({ updateZoom, currentPage, onPageChange, totalPages }) => { // Update currentPage whenever page prop changes useEffect(() => { - console.log(`page number from props ${currentPage}`); setState((prevState) => ({ ...prevState, currentPage: currentPage, })); - setPageNumberInput(currentPage + 1); + setPageNumberInput(currentPage); }, [currentPage]); const setZoomLevel = (direction) => { @@ -113,9 +112,9 @@ const ToolBar = ({ updateZoom, currentPage, onPageChange, totalPages }) => { className="previousPage" onClick={() => { console.log(`page is ${state.currentPage}`); - onPageChange(state.currentPage - 1); + onPageChange(state.currentPage - 2); }} - disabled={state.currentPage === 0} + disabled={state.currentPage <= 1} > @@ -130,7 +129,7 @@ const ToolBar = ({ updateZoom, currentPage, onPageChange, totalPages }) => { value={pageNumberInput} onChange={(e) => handleInputChange(e.target.value, 'page')} onBlur={(e) => { - parseInt(pageNumberInput) === state.currentPage + 1 || + parseInt(pageNumberInput) === state.currentPage || onPageChange(parseInt(pageNumberInput) - 1); }} onKeyPress={(e) => { @@ -145,7 +144,7 @@ const ToolBar = ({ updateZoom, currentPage, onPageChange, totalPages }) => { className="nextPage" onClick={() => { console.log(`page is ${state.currentPage}`); - onPageChange(state.currentPage + 1); + onPageChange(state.currentPage); }} disabled={state.currentPage + 1 === state.totalPages} > From 75c592b437eefc35775d526b1c14362e7856064f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Fri, 31 May 2024 20:28:34 +0200 Subject: [PATCH 012/136] "Update onPageChange argument in nextPage button onClick handler" --- client/homebrew/brewRenderer/toolBar/toolBar.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/homebrew/brewRenderer/toolBar/toolBar.jsx b/client/homebrew/brewRenderer/toolBar/toolBar.jsx index 95aca9163..e41c109c7 100644 --- a/client/homebrew/brewRenderer/toolBar/toolBar.jsx +++ b/client/homebrew/brewRenderer/toolBar/toolBar.jsx @@ -144,7 +144,7 @@ const ToolBar = ({ updateZoom, currentPage, onPageChange, totalPages }) => { className="nextPage" onClick={() => { console.log(`page is ${state.currentPage}`); - onPageChange(state.currentPage); + onPageChange(state.currentPage+1); }} disabled={state.currentPage + 1 === state.totalPages} > From afa05713824972c1f6edf6a8b92541920edddaa7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Fri, 31 May 2024 20:57:09 +0200 Subject: [PATCH 013/136] fix page displacement --- client/homebrew/brewRenderer/brewRenderer.jsx | 8 ++++++-- client/homebrew/brewRenderer/toolBar/toolBar.jsx | 4 ++-- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/client/homebrew/brewRenderer/brewRenderer.jsx b/client/homebrew/brewRenderer/brewRenderer.jsx index c15e081f1..76494f3eb 100644 --- a/client/homebrew/brewRenderer/brewRenderer.jsx +++ b/client/homebrew/brewRenderer/brewRenderer.jsx @@ -89,11 +89,12 @@ const BrewRenderer = (props)=>{ iframe.contentWindow.document.querySelector('.brewRenderer'); if (brewRenderer) { const pages = brewRenderer.querySelectorAll('.page'); - console.log(pageNumber); + console.log(`Attempting to scroll to page ${pageNumber} of ${pages.length}`); if (pageNumber + 1 > pages.length || pageNumber < 0) { console.log(pageNumber, pages.length); console.log('page not found'); } else { + console.log(`Scrolling to page: ${pages[pageNumber].id}`); pages[pageNumber].scrollIntoView({ block: 'start' }); } } @@ -119,7 +120,10 @@ const BrewRenderer = (props)=>{ const getCurrentPage = (e) => { const target = e.target; - const currentPageNumber = Math.ceil(target.scrollTop / target.scrollHeight * rawPages.length); + const { scrollTop, clientHeight, scrollHeight } = target; + const totalScrollableHeight = scrollHeight - clientHeight; + + const currentPageNumber = Math.ceil((scrollTop / totalScrollableHeight) * rawPages.length); setState((prevState) => ({ ...prevState, diff --git a/client/homebrew/brewRenderer/toolBar/toolBar.jsx b/client/homebrew/brewRenderer/toolBar/toolBar.jsx index e41c109c7..d6a62316d 100644 --- a/client/homebrew/brewRenderer/toolBar/toolBar.jsx +++ b/client/homebrew/brewRenderer/toolBar/toolBar.jsx @@ -143,8 +143,8 @@ const ToolBar = ({ updateZoom, currentPage, onPageChange, totalPages }) => { From ed9262801297f6229fa7f29c74a95226dcd4703e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Fri, 31 May 2024 21:02:03 +0200 Subject: [PATCH 015/136] udpate input zoom --- client/homebrew/brewRenderer/toolBar/toolBar.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/client/homebrew/brewRenderer/toolBar/toolBar.jsx b/client/homebrew/brewRenderer/toolBar/toolBar.jsx index db40c87c7..ba30da4a9 100644 --- a/client/homebrew/brewRenderer/toolBar/toolBar.jsx +++ b/client/homebrew/brewRenderer/toolBar/toolBar.jsx @@ -18,6 +18,7 @@ const ToolBar = ({ updateZoom, currentPage, onPageChange, totalPages }) => { useEffect(() => { console.log(`Zoom to: ${state.zoomLevel}`); updateZoom(state.zoomLevel); + setZoomInput(state.zoomLevel); }, [state.zoomLevel]); // Update currentPage whenever page prop changes From 0e00460012ef46a7e57a357a8699bacbfca0289a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Fri, 31 May 2024 21:03:27 +0200 Subject: [PATCH 016/136] change margin bottom to fixed distance --- client/homebrew/brewRenderer/brewRenderer.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/homebrew/brewRenderer/brewRenderer.jsx b/client/homebrew/brewRenderer/brewRenderer.jsx index 76494f3eb..1632c8f8c 100644 --- a/client/homebrew/brewRenderer/brewRenderer.jsx +++ b/client/homebrew/brewRenderer/brewRenderer.jsx @@ -245,8 +245,8 @@ const BrewRenderer = (props)=>{ From c60ddb701cac06e75958ec9f35e26611c9c681f4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Fri, 31 May 2024 21:06:39 +0200 Subject: [PATCH 017/136] this one works best --- 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 1632c8f8c..0710442f3 100644 --- a/client/homebrew/brewRenderer/brewRenderer.jsx +++ b/client/homebrew/brewRenderer/brewRenderer.jsx @@ -246,7 +246,7 @@ const BrewRenderer = (props)=>{ {` .pages { zoom: ${state.zoom}%; - margin-bottom: 2cm; + margin-bottom: 7cm; } `} From de8194d7e0c7cc8f3c5f03c6bc863d58c95cda50 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Sat, 1 Jun 2024 00:34:45 +0200 Subject: [PATCH 018/136] hide toolbar during printing --- shared/helpers.js | 1 + 1 file changed, 1 insertion(+) diff --git a/shared/helpers.js b/shared/helpers.js index 8ca185046..3020890c5 100644 --- a/shared/helpers.js +++ b/shared/helpers.js @@ -23,6 +23,7 @@ const printCurrentBrew = ()=>{ //Force DOM reflow; Print dialog causes a repaint, and @media print CSS somehow makes out-of-view pages disappear const node = window.frames['BrewRenderer'].contentDocument.getElementsByClassName('brewRenderer').item(0); node.style.display='none'; + node.getElementsByClassName('toolBar').item(0).style.display='none'; node.offsetHeight; // accessing this is enough to trigger a reflow node.style.display=''; } From 1a52acd4a917c0d11c00e6855d8d8ecb34ba41c0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Sat, 1 Jun 2024 00:37:49 +0200 Subject: [PATCH 019/136] i fixed it wrong --- shared/helpers.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/shared/helpers.js b/shared/helpers.js index 3020890c5..2988df71c 100644 --- a/shared/helpers.js +++ b/shared/helpers.js @@ -23,7 +23,7 @@ const printCurrentBrew = ()=>{ //Force DOM reflow; Print dialog causes a repaint, and @media print CSS somehow makes out-of-view pages disappear const node = window.frames['BrewRenderer'].contentDocument.getElementsByClassName('brewRenderer').item(0); node.style.display='none'; - node.getElementsByClassName('toolBar').item(0).style.display='none'; + window.frames['BrewRenderer'].contentDocument.getElementsByClassName('toolBar').item(0).style.display='none'; node.offsetHeight; // accessing this is enough to trigger a reflow node.style.display=''; } From 95d7ce2876736f2f0ac0748808a83cc341448941 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Sat, 1 Jun 2024 00:41:44 +0200 Subject: [PATCH 020/136] move toolbar hiding to brewrenderer.less --- client/homebrew/brewRenderer/brewRenderer.less | 3 +++ shared/helpers.js | 1 - 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/client/homebrew/brewRenderer/brewRenderer.less b/client/homebrew/brewRenderer/brewRenderer.less index 28ea8005e..ad8da93dd 100644 --- a/client/homebrew/brewRenderer/brewRenderer.less +++ b/client/homebrew/brewRenderer/brewRenderer.less @@ -66,6 +66,9 @@ } @media print { + .toolbar { + display: none; + } .brewRenderer { height: 100%; overflow-y: unset; diff --git a/shared/helpers.js b/shared/helpers.js index 2988df71c..b76edd2be 100644 --- a/shared/helpers.js +++ b/shared/helpers.js @@ -22,7 +22,6 @@ const printCurrentBrew = ()=>{ window.frames['BrewRenderer'].contentWindow.print(); //Force DOM reflow; Print dialog causes a repaint, and @media print CSS somehow makes out-of-view pages disappear const node = window.frames['BrewRenderer'].contentDocument.getElementsByClassName('brewRenderer').item(0); - node.style.display='none'; window.frames['BrewRenderer'].contentDocument.getElementsByClassName('toolBar').item(0).style.display='none'; node.offsetHeight; // accessing this is enough to trigger a reflow node.style.display=''; From 2d051fcdc0380f63625e20f24cd07fbf13eb73b1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Sat, 1 Jun 2024 00:42:07 +0200 Subject: [PATCH 021/136] misstype --- client/homebrew/brewRenderer/brewRenderer.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/homebrew/brewRenderer/brewRenderer.less b/client/homebrew/brewRenderer/brewRenderer.less index ad8da93dd..bc13aa4af 100644 --- a/client/homebrew/brewRenderer/brewRenderer.less +++ b/client/homebrew/brewRenderer/brewRenderer.less @@ -66,7 +66,7 @@ } @media print { - .toolbar { + .toolBar { display: none; } .brewRenderer { From 3fad8227a7b15ca33cee87a1213a3f719c944ea1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Sat, 1 Jun 2024 00:50:16 +0200 Subject: [PATCH 022/136] "Updated brewRenderer.jsx: added id 'zoomStyle' to style tag and changed margin-bottom from 7cm to 5cm." --- client/homebrew/brewRenderer/brewRenderer.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/homebrew/brewRenderer/brewRenderer.jsx b/client/homebrew/brewRenderer/brewRenderer.jsx index 0710442f3..5f6f7b8fa 100644 --- a/client/homebrew/brewRenderer/brewRenderer.jsx +++ b/client/homebrew/brewRenderer/brewRenderer.jsx @@ -242,11 +242,11 @@ const BrewRenderer = (props)=>{ const makeZoom = () => { return( - From e3c1e4b6f0d8ffe3117e19427d48205bb6ec81e3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Sun, 2 Jun 2024 15:50:47 +0200 Subject: [PATCH 023/136] "Updated toolbar.less: changed hover selector to also include focus-within" --- 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 db20a51a6..8bb5effe5 100644 --- a/client/homebrew/brewRenderer/toolBar/toolBar.less +++ b/client/homebrew/brewRenderer/toolBar/toolBar.less @@ -37,7 +37,7 @@ color: #ccc; height: 100%; - &:hover { + &:hover,&:focus-within { background-color: #444; } From 202ea1d905401bc1655d115b58ad7a326bcac774 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Sun, 2 Jun 2024 15:59:09 +0200 Subject: [PATCH 024/136] "Removed margin-bottom from brewRenderer style, added padding-bottom and updated styles in brewRenderer.less" --- client/homebrew/brewRenderer/brewRenderer.jsx | 1 - client/homebrew/brewRenderer/brewRenderer.less | 18 +++++++++++------- 2 files changed, 11 insertions(+), 8 deletions(-) diff --git a/client/homebrew/brewRenderer/brewRenderer.jsx b/client/homebrew/brewRenderer/brewRenderer.jsx index 5f6f7b8fa..fd3dc8346 100644 --- a/client/homebrew/brewRenderer/brewRenderer.jsx +++ b/client/homebrew/brewRenderer/brewRenderer.jsx @@ -246,7 +246,6 @@ const BrewRenderer = (props)=>{ {` .pages { zoom: ${state.zoom}%; - margin-bottom: 5cm; } `} diff --git a/client/homebrew/brewRenderer/brewRenderer.less b/client/homebrew/brewRenderer/brewRenderer.less index bc13aa4af..ba6303960 100644 --- a/client/homebrew/brewRenderer/brewRenderer.less +++ b/client/homebrew/brewRenderer/brewRenderer.less @@ -1,10 +1,13 @@ @import (multiple, less) 'shared/naturalcrit/styles/reset.less'; .brewRenderer { - will-change : transform; - overflow-y : scroll; + will-change : transform; + overflow-y : scroll; + padding-bottom: 30px; + :where(.pages) { margin : 30px 0px; + & > :where(.page) { width : 215.9mm; height : 279.4mm; @@ -17,27 +20,27 @@ &::-webkit-scrollbar { width: 20px; + &:horizontal{ height: 20px; width:auto; } + &-thumb { background: linear-gradient(90deg, #d3c1af 15px, #00000000 15px); &:horizontal{ background: linear-gradient(0deg, #d3c1af 15px, #00000000 15px); } } + &-corner { visibility: hidden; } } - - - - - } + .pane { position : relative; } + .pageInfo { position : absolute; right : 17px; @@ -53,6 +56,7 @@ &:not(:last-child) { border-right : 1px solid #666666; } } } + .ppr_msg { position : absolute; bottom : 0; From e2a3959feb2df489e2de4d9010a2699b584636fd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Sun, 2 Jun 2024 16:03:54 +0200 Subject: [PATCH 025/136] "Update brewRenderer.less: changed padding-bottom to padding-block, removed empty lines, and reformatted some styles." --- client/homebrew/brewRenderer/brewRenderer.less | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/client/homebrew/brewRenderer/brewRenderer.less b/client/homebrew/brewRenderer/brewRenderer.less index ba6303960..83834eddb 100644 --- a/client/homebrew/brewRenderer/brewRenderer.less +++ b/client/homebrew/brewRenderer/brewRenderer.less @@ -3,7 +3,7 @@ .brewRenderer { will-change : transform; overflow-y : scroll; - padding-bottom: 30px; + padding-block : 30px; :where(.pages) { margin : 30px 0px; @@ -25,14 +25,14 @@ height: 20px; width:auto; } - + &-thumb { background: linear-gradient(90deg, #d3c1af 15px, #00000000 15px); &:horizontal{ background: linear-gradient(0deg, #d3c1af 15px, #00000000 15px); } } - + &-corner { visibility: hidden; } From 0c9958f4616585a31d5152ab9dd5e306edb4c1d3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Sun, 2 Jun 2024 16:05:57 +0200 Subject: [PATCH 026/136] "Removed '%' symbol handling from zoom input value" --- client/homebrew/brewRenderer/toolBar/toolBar.jsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/client/homebrew/brewRenderer/toolBar/toolBar.jsx b/client/homebrew/brewRenderer/toolBar/toolBar.jsx index ba30da4a9..e11081eb0 100644 --- a/client/homebrew/brewRenderer/toolBar/toolBar.jsx +++ b/client/homebrew/brewRenderer/toolBar/toolBar.jsx @@ -45,14 +45,13 @@ const ToolBar = ({ updateZoom, currentPage, onPageChange, totalPages }) => { }; const handleInputChange = (value, type) => { - // Remove the "%" symbol from the input value - const newValue = parseInt(value.replace('%', ''), 10); + const newValue = parseInt(value, 10); // Check the type of input (zoom or page) if (type === 'zoom') { // Check if zoom level is within the allowed range if (newValue >= 10 && newValue <= 300) { - setZoomInput(newValue + '%'); // Add "%" back to the value + setZoomInput(newValue); } } else if (type === 'page') { // Check if page number is within the allowed range @@ -83,7 +82,7 @@ const ToolBar = ({ updateZoom, currentPage, onPageChange, totalPages }) => { onChange={(e) => handleInputChange(e.target.value, 'zoom')} onBlur={(e) => { const newZoomLevel = parseInt( - e.target.value.replace('%', ''), + e.target.value, 10 ); if (newZoomLevel !== state.zoomLevel) { From c2170dd55822502449adf4632580c3562b8ba9eb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Sun, 2 Jun 2024 16:12:46 +0200 Subject: [PATCH 027/136] Remove line hiding toolbar in printCurrentBrew function --- shared/helpers.js | 1 - 1 file changed, 1 deletion(-) diff --git a/shared/helpers.js b/shared/helpers.js index b76edd2be..db1a20dae 100644 --- a/shared/helpers.js +++ b/shared/helpers.js @@ -22,7 +22,6 @@ const printCurrentBrew = ()=>{ window.frames['BrewRenderer'].contentWindow.print(); //Force DOM reflow; Print dialog causes a repaint, and @media print CSS somehow makes out-of-view pages disappear const node = window.frames['BrewRenderer'].contentDocument.getElementsByClassName('brewRenderer').item(0); - window.frames['BrewRenderer'].contentDocument.getElementsByClassName('toolBar').item(0).style.display='none'; node.offsetHeight; // accessing this is enough to trigger a reflow node.style.display=''; } From a5f453f1e55fef36a6fecbc832db7aa3072697df Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Sun, 2 Jun 2024 16:13:04 +0200 Subject: [PATCH 028/136] linting toolBar.less --- .../brewRenderer/toolBar/toolBar.less | 116 +++++++++--------- 1 file changed, 56 insertions(+), 60 deletions(-) diff --git a/client/homebrew/brewRenderer/toolBar/toolBar.less b/client/homebrew/brewRenderer/toolBar/toolBar.less index 8bb5effe5..1e2ca1d07 100644 --- a/client/homebrew/brewRenderer/toolBar/toolBar.less +++ b/client/homebrew/brewRenderer/toolBar/toolBar.less @@ -1,68 +1,64 @@ .toolBar { - font-family: 'Open Sans', sans-serif; - position: sticky; - top: 0; - left: 0; - width: 100%; - height: 30px; - background-color: #555; - border-top: 1px solid #666; - border-bottom: 1px solid #666; - color: white; - text-align: center; - z-index: 1; - display: flex; - justify-content: center; - align-items: center; - column-gap: 15px; - row-gap: 5px; - flex-wrap: wrap; + position : sticky; + top : 0; + left : 0; + z-index : 1; + display : flex; + flex-wrap : wrap; + row-gap : 5px; + column-gap : 15px; + align-items : center; + justify-content : center; + width : 100%; + height : 30px; + font-family : 'Open Sans', sans-serif; + color : white; + text-align : center; + background-color : #555555; + border-top : 1px solid #666666; + border-bottom : 1px solid #666666; - input { - background: #eee; - font-family: 'Open Sans', sans-serif; - text-transform: uppercase; - font-weight: normal; - font-size: 16px; - color: #000; - padding: 2px 5px; - border-radius: 7px; - height:1.5em; - } + input { + height : 1.5em; + padding : 2px 5px; + font-family : 'Open Sans', sans-serif; + font-size : 16px; + font-weight : normal; + color : #000000; + text-transform : uppercase; + background : #EEEEEE; + border-radius : 7px; + } - .tool { - display: flex; - align-items: center; - padding: 0 8px; - color: #ccc; - height: 100%; + .tool { + display : flex; + align-items : center; + height : 100%; + padding : 0 8px; + color : #CCCCCC; - &:hover,&:focus-within { - background-color: #444; - } + &:hover,&:focus-within { background-color : #444444; } - button { - background-color: transparent; - font-family: 'Open Sans', sans-serif; - text-transform: uppercase; - font-weight: normal; - font-size: 11px; - color: #ccc; - padding: 0; - width: 70px; - - &:focus-within { - color: white; - font-weight: 800; - height: 100%; - } - - &:disabled { - color: #777; - background-color: transparent !important; - } - } - } + button { + width : 70px; + padding : 0; + font-family : 'Open Sans', sans-serif; + font-size : 11px; + font-weight : normal; + color : #CCCCCC; + text-transform : uppercase; + background-color : transparent; + &:focus-within { + height : 100%; + font-weight : 800; + color : white; + } + &:disabled { + color : #777777; + background-color : transparent !important; + } + } + } } \ No newline at end of file From 7d699e455e97648be0432e97afd216e29817e39c Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Mon, 12 Aug 2024 18:48:28 +1200 Subject: [PATCH 029/136] Switch CSS route to call a function --- server/app.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/server/app.js b/server/app.js index d4107b902..dae24b13a 100644 --- a/server/app.js +++ b/server/app.js @@ -201,16 +201,20 @@ app.get('/download/:id', asyncHandler(getBrew('share')), (req, res)=>{ }); //Serve brew styling -app.get('/css/:id', asyncHandler(getBrew('share')), (req, res)=>{ +app.get('/css/:id', asyncHandler(getBrew('share')), ((req, res)=>{app.getCSS(req, res);})); + +app.getCSS = (req, res)=>{ const { brew } = req; + if(!brew) return res.status(404).send(); splitTextStyleAndMetadata(brew); + if(!brew.style) return res.status(404).send(); res.set({ 'Cache-Control' : 'no-cache', 'Content-Type' : 'text/css' }); - res.status(200).send(brew.style); -}); + return res.status(200).send(brew.style); +}; //User Page app.get('/user/:username', async (req, res, next)=>{ From fac2293b77dffb7cb4d9798ba0080db5f52ef539 Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Mon, 12 Aug 2024 18:48:46 +1200 Subject: [PATCH 030/136] Add App test file --- server/app.spec.js | 47 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 47 insertions(+) create mode 100644 server/app.spec.js diff --git a/server/app.spec.js b/server/app.spec.js new file mode 100644 index 000000000..4f262a79d --- /dev/null +++ b/server/app.spec.js @@ -0,0 +1,47 @@ +/* eslint-disable max-lines */ + +const app = require('./app.js').app; + +const res = { + _status : 0, + status : jest.fn((n)=>{res._status = n; return res;}), + _send : '', + send : jest.fn((data)=>{res._send = data; return res;}), + set : jest.fn(()=>{}), + setHeader : jest.fn(()=>{}), + reset : ()=>{ res._status = 0; res._send = ''; } +}; + +describe('Tests for app', ()=>{ + beforeEach(()=>{ + return res.reset(); + }); + + it('get CSS from a test brew that has a style', async ()=>{ + const testBrew = { title: 'test brew', shareId: 'iAmATestBrew', text: '```css\n\nI Have a style!\n````\n\n' }; + + const req = { brew: testBrew }; + await app.getCSS(req, res); + + expect(res).toHaveProperty('_status', 200); + expect(res).toHaveProperty('_send', '\nI Have a style!\n'); + }); + + it('get CSS from a test brew that has no style', async ()=>{ + const testBrew = { title: 'test brew', shareId: 'iAmATestBrew', text: 'No style data here' }; + + const req = { brew: testBrew }; + await app.getCSS(req, res); + + expect(res).toHaveProperty('_status', 404); + expect(res).toHaveProperty('_send', undefined); + }); + + it('get CSS from no brew', async ()=>{ + const req = { brew: undefined }; + await app.getCSS(req, res); + + expect(res).toHaveProperty('_status', 404); + expect(res).toHaveProperty('_send', undefined); + }); +}); From 3dc8eec1e6863379f8ec287b3a67b9115a5e7f7f Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Mon, 12 Aug 2024 18:49:01 +1200 Subject: [PATCH 031/136] Add app test NPM command --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 2dbff24ed..d7576d1b1 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "test": "jest --runInBand", "test:api-unit": "jest \"server/.*.spec.js\" --verbose", "test:api-unit:themes": "jest \"server/.*.spec.js\" -t \"theme bundle\" --verbose", + "test:app": "jest \"server/app.spec.js\" --verbose", "test:coverage": "jest --coverage --silent --runInBand", "test:dev": "jest --verbose --watch", "test:basic": "jest tests/markdown/basic.test.js --verbose", From 00e113ff67dd3e7eb3f2f8873208aca7a68c3744 Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Tue, 13 Aug 2024 22:02:54 +1200 Subject: [PATCH 032/136] Move getCSS to homebrew.api.js --- server/app.js | 17 ++--------------- server/homebrew.api.js | 14 ++++++++++++++ 2 files changed, 16 insertions(+), 15 deletions(-) diff --git a/server/app.js b/server/app.js index dae24b13a..9729f07ba 100644 --- a/server/app.js +++ b/server/app.js @@ -9,7 +9,7 @@ const yaml = require('js-yaml'); const app = express(); const config = require('./config.js'); -const { homebrewApi, getBrew, getUsersBrewThemes } = require('./homebrew.api.js'); +const { homebrewApi, getBrew, getUsersBrewThemes, getCSS } = require('./homebrew.api.js'); const GoogleActions = require('./googleActions.js'); const serveCompressedStaticAssets = require('./static-assets.mv.js'); const sanitizeFilename = require('sanitize-filename'); @@ -201,20 +201,7 @@ app.get('/download/:id', asyncHandler(getBrew('share')), (req, res)=>{ }); //Serve brew styling -app.get('/css/:id', asyncHandler(getBrew('share')), ((req, res)=>{app.getCSS(req, res);})); - -app.getCSS = (req, res)=>{ - const { brew } = req; - if(!brew) return res.status(404).send(); - splitTextStyleAndMetadata(brew); - if(!brew.style) return res.status(404).send(); - - res.set({ - 'Cache-Control' : 'no-cache', - 'Content-Type' : 'text/css' - }); - return res.status(200).send(brew.style); -}; +app.get('/css/:id', asyncHandler(getBrew('share')), (req, res)=>{getCSS(req, res);}); //User Page app.get('/user/:username', async (req, res, next)=>{ diff --git a/server/homebrew.api.js b/server/homebrew.api.js index c314454e2..52fe57360 100644 --- a/server/homebrew.api.js +++ b/server/homebrew.api.js @@ -148,6 +148,20 @@ const api = { next(); }; }, + + getCSS : async (req, res)=>{ + const { brew } = req; + if(!brew) return res.status(404).send(''); + splitTextStyleAndMetadata(brew); + if(!brew.style) return res.status(404).send(''); + + res.set({ + 'Cache-Control' : 'no-cache', + 'Content-Type' : 'text/css' + }); + return res.status(200).send(brew.style); + }, + mergeBrewText : (brew)=>{ let text = brew.text; if(brew.style !== undefined) { From 38168131e7491f646d4e8fe20b270c1f6555e028 Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Tue, 13 Aug 2024 22:03:06 +1200 Subject: [PATCH 033/136] Remove app.spec.js --- server/app.spec.js | 47 ---------------------------------------------- 1 file changed, 47 deletions(-) delete mode 100644 server/app.spec.js diff --git a/server/app.spec.js b/server/app.spec.js deleted file mode 100644 index 4f262a79d..000000000 --- a/server/app.spec.js +++ /dev/null @@ -1,47 +0,0 @@ -/* eslint-disable max-lines */ - -const app = require('./app.js').app; - -const res = { - _status : 0, - status : jest.fn((n)=>{res._status = n; return res;}), - _send : '', - send : jest.fn((data)=>{res._send = data; return res;}), - set : jest.fn(()=>{}), - setHeader : jest.fn(()=>{}), - reset : ()=>{ res._status = 0; res._send = ''; } -}; - -describe('Tests for app', ()=>{ - beforeEach(()=>{ - return res.reset(); - }); - - it('get CSS from a test brew that has a style', async ()=>{ - const testBrew = { title: 'test brew', shareId: 'iAmATestBrew', text: '```css\n\nI Have a style!\n````\n\n' }; - - const req = { brew: testBrew }; - await app.getCSS(req, res); - - expect(res).toHaveProperty('_status', 200); - expect(res).toHaveProperty('_send', '\nI Have a style!\n'); - }); - - it('get CSS from a test brew that has no style', async ()=>{ - const testBrew = { title: 'test brew', shareId: 'iAmATestBrew', text: 'No style data here' }; - - const req = { brew: testBrew }; - await app.getCSS(req, res); - - expect(res).toHaveProperty('_status', 404); - expect(res).toHaveProperty('_send', undefined); - }); - - it('get CSS from no brew', async ()=>{ - const req = { brew: undefined }; - await app.getCSS(req, res); - - expect(res).toHaveProperty('_status', 404); - expect(res).toHaveProperty('_send', undefined); - }); -}); From 5847b246efe82288da2b1140526ba4546fe1892b Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Tue, 13 Aug 2024 22:05:03 +1200 Subject: [PATCH 034/136] Add getCSS test --- server/homebrew.api.spec.js | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/server/homebrew.api.spec.js b/server/homebrew.api.spec.js index 5f1739b97..287e68ce4 100644 --- a/server/homebrew.api.spec.js +++ b/server/homebrew.api.spec.js @@ -916,4 +916,31 @@ brew`); expect(saved.googleId).toEqual(brew.googleId); }); }); + describe('Get CSS tests', ()=>{ + it('should return CSS for a brew', async ()=>{ + const testBrew = { title: 'test brew', text: '```css\n\nI Have a style!\n````\n\n' }; + + const toBrewPromise = (brew)=>new Promise((res)=>res({ toObject: ()=>brew })); + api.getId = jest.fn(()=>({ id: '1', googleId: undefined })); + model.get = jest.fn(()=>toBrewPromise(testBrew)); + + const fn = api.getBrew('share', true); + const req = { brew: {} }; + const res = { + status : jest.fn(()=>res), + send : jest.fn(()=>{}), + set : jest.fn(()=>{}), + setHeader : jest.fn(()=>{}) + }; + const next = jest.fn(); + await fn(req, null, next); + await api.getCSS(req, res); + + expect(req.brew).toEqual(testBrew); + expect(req.brew).toHaveProperty('style', '\nI Have a style!\n'); + expect(next).toHaveBeenCalled(); + expect(api.getId).toHaveBeenCalledWith(req); + expect(model.get).toHaveBeenCalledWith({ shareId: '1' }); + }); + }); }); From ae336f14294a7323f888ccdd477495a12b8bae68 Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Tue, 13 Aug 2024 22:30:59 +1200 Subject: [PATCH 035/136] Add extra getCSS tests --- server/homebrew.api.spec.js | 54 ++++++++++++++++++++++++++++++------- 1 file changed, 44 insertions(+), 10 deletions(-) diff --git a/server/homebrew.api.spec.js b/server/homebrew.api.spec.js index 287e68ce4..22c53a409 100644 --- a/server/homebrew.api.spec.js +++ b/server/homebrew.api.spec.js @@ -50,6 +50,7 @@ describe('Tests for api', ()=>{ res = { status : jest.fn(()=>res), send : jest.fn(()=>{}), + set : jest.fn(()=>{}), setHeader : jest.fn(()=>{}) }; @@ -917,7 +918,7 @@ brew`); }); }); describe('Get CSS tests', ()=>{ - it('should return CSS for a brew', async ()=>{ + it('get CSS - successful', async ()=>{ const testBrew = { title: 'test brew', text: '```css\n\nI Have a style!\n````\n\n' }; const toBrewPromise = (brew)=>new Promise((res)=>res({ toObject: ()=>brew })); @@ -926,21 +927,54 @@ brew`); const fn = api.getBrew('share', true); const req = { brew: {} }; - const res = { - status : jest.fn(()=>res), - send : jest.fn(()=>{}), - set : jest.fn(()=>{}), - setHeader : jest.fn(()=>{}) - }; const next = jest.fn(); await fn(req, null, next); await api.getCSS(req, res); expect(req.brew).toEqual(testBrew); expect(req.brew).toHaveProperty('style', '\nI Have a style!\n'); - expect(next).toHaveBeenCalled(); - expect(api.getId).toHaveBeenCalledWith(req); - expect(model.get).toHaveBeenCalledWith({ shareId: '1' }); + expect(res.set).toHaveBeenCalledWith({ + 'Cache-Control' : 'no-cache', + 'Content-Type' : 'text/css' + }); + }); + + it('get CSS - no style in brew', async ()=>{ + const testBrew = { title: 'test brew', text: 'I don\'t have a style!' }; + + const toBrewPromise = (brew)=>new Promise((res)=>res({ toObject: ()=>brew })); + api.getId = jest.fn(()=>({ id: '1', googleId: undefined })); + model.get = jest.fn(()=>toBrewPromise(testBrew)); + + const fn = api.getBrew('share', true); + const req = { brew: {} }; + const next = jest.fn(); + await fn(req, null, next); + await api.getCSS(req, res); + + expect(req.brew).toEqual(testBrew); + expect(req.brew).toHaveProperty('style'); + expect(res.status).toHaveBeenCalledWith(404); + expect(res.send).toHaveBeenCalledWith(''); + }); + + it('get CSS - no brew', async ()=>{ + const testBrew = { }; + + const toBrewPromise = (brew)=>new Promise((res)=>res({ toObject: ()=>brew })); + api.getId = jest.fn(()=>({ id: '1', googleId: undefined })); + model.get = jest.fn(()=>toBrewPromise(testBrew)); + + const fn = api.getBrew('share', true); + const req = { brew: {} }; + const next = jest.fn(); + await fn(req, null, next); + await api.getCSS(req, res); + + expect(req.brew).toEqual(testBrew); + expect(req.brew).toHaveProperty('style'); + expect(res.status).toHaveBeenCalledWith(404); + expect(res.send).toHaveBeenCalledWith(''); }); }); }); From f0765b5aaa0360efe17aae7f53a4857cf967d4c0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Thu, 15 Aug 2024 20:05:23 +0200 Subject: [PATCH 036/136] "refactored ToolBar component to use a single state object, and updated styles in toolBar.less" --- client/homebrew/brewRenderer/brewRenderer.jsx | 5 -- .../homebrew/brewRenderer/toolBar/toolBar.jsx | 73 ++++++++----------- .../brewRenderer/toolBar/toolBar.less | 30 ++++++++ 3 files changed, 62 insertions(+), 46 deletions(-) diff --git a/client/homebrew/brewRenderer/brewRenderer.jsx b/client/homebrew/brewRenderer/brewRenderer.jsx index 56c7251f2..489558010 100644 --- a/client/homebrew/brewRenderer/brewRenderer.jsx +++ b/client/homebrew/brewRenderer/brewRenderer.jsx @@ -284,11 +284,6 @@ const BrewRenderer = (props)=>{
- - {baseThemePath && - - } - {makeZoom()} {/* Apply CSS from Style tab and render pages from Markdown tab */} diff --git a/client/homebrew/brewRenderer/toolBar/toolBar.jsx b/client/homebrew/brewRenderer/toolBar/toolBar.jsx index e11081eb0..c6c45cb10 100644 --- a/client/homebrew/brewRenderer/toolBar/toolBar.jsx +++ b/client/homebrew/brewRenderer/toolBar/toolBar.jsx @@ -1,33 +1,26 @@ require('./toolBar.less'); const React = require('react'); -const { useState, useRef, useEffect } = React; -const _ = require('lodash'); +const { useState, useEffect } = React; const ToolBar = ({ updateZoom, currentPage, onPageChange, totalPages }) => { const [state, setState] = useState({ currentPage: currentPage, totalPages: totalPages, zoomLevel: 100, + pageNumberInput: currentPage, + zoomInput: 100, }); - const [pageNumberInput, setPageNumberInput] = useState( - state.currentPage - ); - const [zoomInput, setZoomInput] = useState(state.zoomLevel); - useEffect(() => { - console.log(`Zoom to: ${state.zoomLevel}`); updateZoom(state.zoomLevel); - setZoomInput(state.zoomLevel); }, [state.zoomLevel]); - // Update currentPage whenever page prop changes useEffect(() => { setState((prevState) => ({ ...prevState, currentPage: currentPage, + pageNumberInput: currentPage, })); - setPageNumberInput(currentPage); }, [currentPage]); const setZoomLevel = (direction) => { @@ -35,7 +28,7 @@ const ToolBar = ({ updateZoom, currentPage, onPageChange, totalPages }) => { if (direction === 'in') { zoomLevel += 10; } else { - zoomLevel = zoomLevel - 10; + zoomLevel -= 10; } setState((prevState) => ({ @@ -47,17 +40,16 @@ const ToolBar = ({ updateZoom, currentPage, onPageChange, totalPages }) => { const handleInputChange = (value, type) => { const newValue = parseInt(value, 10); - // Check the type of input (zoom or page) - if (type === 'zoom') { - // Check if zoom level is within the allowed range - if (newValue >= 10 && newValue <= 300) { - setZoomInput(newValue); - } - } else if (type === 'page') { - // Check if page number is within the allowed range - if (newValue >= 1 && newValue <= totalPages) { - setPageNumberInput(newValue); - } + if (type === 'zoom' && newValue >= 10 && newValue <= 300) { + setState((prevState) => ({ + ...prevState, + zoomInput: newValue, + })); + } else if (type === 'page' && newValue >= 1 && newValue <= totalPages) { + setState((prevState) => ({ + ...prevState, + pageNumberInput: newValue, + })); } }; @@ -74,34 +66,31 @@ const ToolBar = ({ updateZoom, currentPage, onPageChange, totalPages }) => {
handleInputChange(e.target.value, 'zoom')} - onBlur={(e) => { - const newZoomLevel = parseInt( - e.target.value, - 10 - ); + onMouseUp={(e) => { + const newZoomLevel = parseInt(e.target.value, 10); if (newZoomLevel !== state.zoomLevel) { + setState((prevState) => ({ + ...prevState, + zoomLevel: newZoomLevel, + zoomInput: newZoomLevel, + })); updateZoom(newZoomLevel); } }} - onKeyPress={(e) => { - if (e.key === 'Enter') { - e.target.blur(); - } - }} /> - %
@@ -126,11 +115,11 @@ const ToolBar = ({ updateZoom, currentPage, onPageChange, totalPages }) => { min={1} max={state.totalPages} id="pageInput" - value={pageNumberInput} + value={state.pageNumberInput} onChange={(e) => handleInputChange(e.target.value, 'page')} onBlur={(e) => { - parseInt(pageNumberInput) === state.currentPage || - onPageChange(parseInt(pageNumberInput) - 1); + parseInt(state.pageNumberInput) === state.currentPage || + onPageChange(parseInt(state.pageNumberInput) - 1); }} onKeyPress={(e) => { if (e.key === 'Enter') { @@ -143,7 +132,9 @@ const ToolBar = ({ updateZoom, currentPage, onPageChange, totalPages }) => {
-
handleInputChange(e.target.value, 'zoom')} onMouseUp={(e) => { @@ -85,17 +91,27 @@ const ToolBar = ({ updateZoom, currentPage, onPageChange, totalPages }) => { } }} /> + + {Array.from( + { + length: + Math.floor((maxZoom - minZoom) / zoomStep) + 1, + }, + (_, i) => minZoom + i * zoomStep + ).map((option) => ( +
-
From cc9edcc67c018f05ada60d5273a72f9f26c2c4d3 Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Sat, 17 Aug 2024 23:11:04 +1200 Subject: [PATCH 040/136] Prevent styling of lines inside folded sections --- client/homebrew/editor/editor.jsx | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/client/homebrew/editor/editor.jsx b/client/homebrew/editor/editor.jsx index 1ecdcb22b..4a38fc523 100644 --- a/client/homebrew/editor/editor.jsx +++ b/client/homebrew/editor/editor.jsx @@ -119,8 +119,17 @@ const Editor = createClass({ const codeMirror = this.codeEditor.current.codeMirror; codeMirror.operation(()=>{ // Batch CodeMirror styling + const foldLines = []; //reset custom text styles - const customHighlights = codeMirror.getAllMarks().filter((mark)=>!mark.__isFold); //Don't undo code folding + const customHighlights = codeMirror.getAllMarks().filter((mark)=>{ + // Record details of folded sections + if(mark.__isFold) { + const fold = mark.find(); + foldLines.push({from: fold.from?.line, to: fold.to?.line}); + } + return !mark.__isFold; + }); //Don't undo code folding + for (let i=customHighlights.length - 1;i>=0;i--) customHighlights[i].clear(); let editorPageCount = 2; // start page count from page 2 @@ -132,6 +141,14 @@ const Editor = createClass({ codeMirror.removeLineClass(lineNumber, 'text'); codeMirror.removeLineClass(lineNumber, 'wrap', 'sourceMoveFlash'); + // Don't process lines inside folded text + // If the current lineNumber is inside any folded marks, skip line styling + if(_.filter(foldLines, (fold)=>{ + return lineNumber >= fold.from && lineNumber <= fold.to; + }).length > 0) { + return; + }; + // Styling for \page breaks if((this.props.renderer == 'legacy' && line.includes('\\page')) || (this.props.renderer == 'V3' && line.match(/^\\page$/))) { From ee4eb19f1ed2250a03255b28aa734c84cff7c88e Mon Sep 17 00:00:00 2001 From: Gazook89 Date: Sat, 17 Aug 2024 13:57:50 -0500 Subject: [PATCH 041/136] Run ESLint auto lint (spaces to tabs mostly) --- .../homebrew/brewRenderer/toolBar/toolBar.jsx | 280 +++++++++--------- 1 file changed, 140 insertions(+), 140 deletions(-) diff --git a/client/homebrew/brewRenderer/toolBar/toolBar.jsx b/client/homebrew/brewRenderer/toolBar/toolBar.jsx index 5043b89c8..37cfcb6d7 100644 --- a/client/homebrew/brewRenderer/toolBar/toolBar.jsx +++ b/client/homebrew/brewRenderer/toolBar/toolBar.jsx @@ -6,160 +6,160 @@ const maxZoom = 300; const minZoom = 10; const zoomStep = 10; -const ToolBar = ({ updateZoom, currentPage, onPageChange, totalPages }) => { - const [state, setState] = useState({ - currentPage: currentPage, - totalPages: totalPages, - zoomLevel: 100, - pageNumberInput: currentPage, - zoomInput: 100, - }); +const ToolBar = ({ updateZoom, currentPage, onPageChange, totalPages })=>{ + const [state, setState] = useState({ + currentPage : currentPage, + totalPages : totalPages, + zoomLevel : 100, + pageNumberInput : currentPage, + zoomInput : 100, + }); - useEffect(() => { - updateZoom(state.zoomLevel); - }, [state.zoomLevel]); + useEffect(()=>{ + updateZoom(state.zoomLevel); + }, [state.zoomLevel]); - useEffect(() => { - setState((prevState) => ({ - ...prevState, - currentPage: currentPage, - pageNumberInput: currentPage, - })); - }, [currentPage]); + useEffect(()=>{ + setState((prevState)=>({ + ...prevState, + currentPage : currentPage, + pageNumberInput : currentPage, + })); + }, [currentPage]); - const setZoomLevel = (direction) => { - let zoomLevel = state.zoomLevel; - if (direction === 'in') { - zoomLevel += zoomStep; - } else { - zoomLevel -= zoomStep; - } + const setZoomLevel = (direction)=>{ + let zoomLevel = state.zoomLevel; + if(direction === 'in') { + zoomLevel += zoomStep; + } else { + zoomLevel -= zoomStep; + } - setState((prevState) => ({ - ...prevState, - zoomLevel: zoomLevel, - zoomInput: zoomLevel, - })); - }; + setState((prevState)=>({ + ...prevState, + zoomLevel : zoomLevel, + zoomInput : zoomLevel, + })); + }; - const handleInputChange = (value, type) => { - const newValue = parseInt(value, 10); + const handleInputChange = (value, type)=>{ + const newValue = parseInt(value, 10); - if (type === 'zoom' && newValue >= minZoom && newValue <= maxZoom) { - setState((prevState) => ({ - ...prevState, - zoomInput: newValue, - })); - } else if (type === 'page' && newValue >= 1 && newValue <= totalPages) { - setState((prevState) => ({ - ...prevState, - pageNumberInput: newValue, - })); - } - }; + if(type === 'zoom' && newValue >= minZoom && newValue <= maxZoom) { + setState((prevState)=>({ + ...prevState, + zoomInput : newValue, + })); + } else if(type === 'page' && newValue >= 1 && newValue <= totalPages) { + setState((prevState)=>({ + ...prevState, + pageNumberInput : newValue, + })); + } + }; - return ( -
-
- -
-
- handleInputChange(e.target.value, 'zoom')} - onMouseUp={(e) => { - const newZoomLevel = parseInt(e.target.value, 10); - if (newZoomLevel !== state.zoomLevel) { - setState((prevState) => ({ - ...prevState, - zoomLevel: newZoomLevel, - zoomInput: newZoomLevel, - })); - updateZoom(newZoomLevel); - } - }} - /> - - {Array.from( - { - length: + +
+
+ handleInputChange(e.target.value, 'zoom')} + onMouseUp={(e)=>{ + const newZoomLevel = parseInt(e.target.value, 10); + if(newZoomLevel !== state.zoomLevel) { + setState((prevState)=>({ + ...prevState, + zoomLevel : newZoomLevel, + zoomInput : newZoomLevel, + })); + updateZoom(newZoomLevel); + } + }} + /> + + {Array.from( + { + length : Math.floor((maxZoom - minZoom) / zoomStep) + 1, - }, - (_, i) => minZoom + i * zoomStep - ).map((option) => ( - -
+ }, + (_, i)=>minZoom + i * zoomStep + ).map((option)=>( +
-
- -
-
- -
+ +
+
+ +
- handleInputChange(e.target.value, 'page')} - onBlur={(e) => { - parseInt(state.pageNumberInput) === state.currentPage || + handleInputChange(e.target.value, 'page')} + onBlur={(e)=>{ + parseInt(state.pageNumberInput) === state.currentPage || onPageChange(parseInt(state.pageNumberInput) - 1); - }} - onKeyPress={(e) => { - if (e.key === 'Enter') { - e.target.blur(); - } - }} - /> + }} + onKeyPress={(e)=>{ + if(e.key === 'Enter') { + e.target.blur(); + } + }} + /> -
- -
-
- ); +
+ +
+
+ ); }; module.exports = ToolBar; From e9e49e39fb1fc0e084f8d45cf3e57696b11ee486 Mon Sep 17 00:00:00 2001 From: Gazook89 Date: Sat, 17 Aug 2024 13:59:58 -0500 Subject: [PATCH 042/136] Set preview zoom to update with onChange Commented out the existing onChange handler, switched the onMouseUp that actually applies the zoom to onChange. --- client/homebrew/brewRenderer/toolBar/toolBar.jsx | 14 +++----------- 1 file changed, 3 insertions(+), 11 deletions(-) diff --git a/client/homebrew/brewRenderer/toolBar/toolBar.jsx b/client/homebrew/brewRenderer/toolBar/toolBar.jsx index 37cfcb6d7..cad878647 100644 --- a/client/homebrew/brewRenderer/toolBar/toolBar.jsx +++ b/client/homebrew/brewRenderer/toolBar/toolBar.jsx @@ -78,8 +78,8 @@ const ToolBar = ({ updateZoom, currentPage, onPageChange, totalPages })=>{ max={maxZoom} step={zoomStep} value={state.zoomInput} - onChange={(e)=>handleInputChange(e.target.value, 'zoom')} - onMouseUp={(e)=>{ + // onChange={(e)=>handleInputChange(e.target.value, 'zoom')} + onChange={(e)=>{ const newZoomLevel = parseInt(e.target.value, 10); if(newZoomLevel !== state.zoomLevel) { setState((prevState)=>({ @@ -92,15 +92,7 @@ const ToolBar = ({ updateZoom, currentPage, onPageChange, totalPages })=>{ }} /> - {Array.from( - { - length : - Math.floor((maxZoom - minZoom) / zoomStep) + 1, - }, - (_, i)=>minZoom + i * zoomStep - ).map((option)=>( -
From e0e49c606fd68336fcfd6c0adfa2be90bc7537d3 Mon Sep 17 00:00:00 2001 From: Gazook89 Date: Sat, 17 Aug 2024 14:05:14 -0500 Subject: [PATCH 043/136] Utilize browser defined style for slider, with accent-color Avoid over-styling of browser-defined slider, but still apply a HB appropriate color scheme. Prevents us from having to create our own tick marks, so we can just define the `option`s in the datalist and get tick marks in the right spot. --- client/homebrew/brewRenderer/toolBar/toolBar.less | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/client/homebrew/brewRenderer/toolBar/toolBar.less b/client/homebrew/brewRenderer/toolBar/toolBar.less index 0bcfbaf6a..3eb006c4b 100644 --- a/client/homebrew/brewRenderer/toolBar/toolBar.less +++ b/client/homebrew/brewRenderer/toolBar/toolBar.less @@ -31,12 +31,8 @@ border-radius : 7px; &.slider { - width : 100%; - height : 7px; - appearance : none; - background : #D3D3D3; - isolation : isolate; - outline : none; + color: #D3D3D3; + accent-color: #d3d3d3; &::-webkit-slider-thumb { width : 8px; From 6af5abd37de3e6afbad62507298994a47ffeda58 Mon Sep 17 00:00:00 2001 From: Gazook89 Date: Sat, 17 Aug 2024 14:06:14 -0500 Subject: [PATCH 044/136] Rearrange nesting of slider tooltip Just moving the :hover:after tooltip to within the existing css rule for sliders. --- .../brewRenderer/toolBar/toolBar.less | 41 +++++++------------ 1 file changed, 14 insertions(+), 27 deletions(-) diff --git a/client/homebrew/brewRenderer/toolBar/toolBar.less b/client/homebrew/brewRenderer/toolBar/toolBar.less index 3eb006c4b..5ab867a56 100644 --- a/client/homebrew/brewRenderer/toolBar/toolBar.less +++ b/client/homebrew/brewRenderer/toolBar/toolBar.less @@ -50,39 +50,26 @@ background-color : rgb(39, 174, 96); } - &::before { + &:hover::after { position : absolute; - top : 50%; - left : 33.33%; - z-index : -1; - width : 7px; - height : 15px; - content : ''; + bottom : -30px; + left : 50%; + z-index : 1; + display : grid; + place-items : center; + width : 4ch; + height : 1.2lh; + pointer-events : none; + content : attr(value); background-color : #D3D3D3; - transform : translate(-50%, -50%); + border : 1px solid #A1A1A1; + border-radius : 5px; + transform : translate(-50%, 50%); } - } } - .tool { - &:hover .slider::after { - position : absolute; - bottom : -30px; - left : 50%; - z-index : 1; - display : grid; - place-items : center; - width : 4ch; - height : 1.2lh; - pointer-events : none; - content : attr(value); - background-color : #D3D3D3; - border : 1px solid #A1A1A1; - border-radius : 5px; - transform : translate(-50%, 50%); - } - } + .tool { display : flex; From 232f28b5b45279c6a4aa5de82f76a767ef26733d Mon Sep 17 00:00:00 2001 From: Gazook89 Date: Sat, 17 Aug 2024 14:06:58 -0500 Subject: [PATCH 045/136] Remove extra styling of the slider thumb can just use browser defaults for this. --- .../homebrew/brewRenderer/toolBar/toolBar.less | 17 ++++------------- 1 file changed, 4 insertions(+), 13 deletions(-) diff --git a/client/homebrew/brewRenderer/toolBar/toolBar.less b/client/homebrew/brewRenderer/toolBar/toolBar.less index 5ab867a56..cb3f744f1 100644 --- a/client/homebrew/brewRenderer/toolBar/toolBar.less +++ b/client/homebrew/brewRenderer/toolBar/toolBar.less @@ -34,20 +34,11 @@ color: #D3D3D3; accent-color: #d3d3d3; - &::-webkit-slider-thumb { - width : 8px; - height : 15px; - appearance : none; + &::-webkit-slider-thumb, &::-moz-slider-thumb { cursor : pointer; - background-color : rgb(39, 174, 96); - translate : 0 -66%; - } - &::-moz-slider-thumb { - width : 8px; - height : 15px; - appearance : none; - cursor : pointer; - background-color : rgb(39, 174, 96); + width: 5px; + height: 5px; + outline: none; } &:hover::after { From 19e6d944190b0a4810e492736dfc5862f4596376 Mon Sep 17 00:00:00 2001 From: Gazook89 Date: Sat, 17 Aug 2024 14:23:33 -0500 Subject: [PATCH 046/136] Set as Relative position, remove extra properties Doesn't need to be Sticky positioning, relative is fine (it is still fixed above the iframe). Allows us to remove a bunch of extra properties. Add a smidgen of padding. --- client/homebrew/brewRenderer/toolBar/toolBar.less | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/client/homebrew/brewRenderer/toolBar/toolBar.less b/client/homebrew/brewRenderer/toolBar/toolBar.less index cb3f744f1..a216d5df4 100644 --- a/client/homebrew/brewRenderer/toolBar/toolBar.less +++ b/client/homebrew/brewRenderer/toolBar/toolBar.less @@ -1,7 +1,5 @@ .toolBar { - position : sticky; - top : 0; - left : 0; + position : relative; z-index : 1; display : flex; flex-wrap : wrap; @@ -10,7 +8,7 @@ align-items : center; justify-content : center; width : 100%; - height : 30px; + padding: 2px 0; font-family : 'Open Sans', sans-serif; color : white; text-align : center; From 21e925104353ecb0157de2150f03bee79075e551 Mon Sep 17 00:00:00 2001 From: Gazook89 Date: Sat, 17 Aug 2024 14:25:04 -0500 Subject: [PATCH 047/136] aesthetic changes (border, text align, font size) Text align isn't doing anything, and no other UI element is using a border and doesn't seem necessary here. Maintains the "flat" design. --- client/homebrew/brewRenderer/toolBar/toolBar.less | 5 ----- 1 file changed, 5 deletions(-) diff --git a/client/homebrew/brewRenderer/toolBar/toolBar.less b/client/homebrew/brewRenderer/toolBar/toolBar.less index a216d5df4..4ee2379cb 100644 --- a/client/homebrew/brewRenderer/toolBar/toolBar.less +++ b/client/homebrew/brewRenderer/toolBar/toolBar.less @@ -11,18 +11,13 @@ padding: 2px 0; font-family : 'Open Sans', sans-serif; color : white; - text-align : center; background-color : #555555; - border-top : 1px solid #666666; - border-bottom : 1px solid #666666; input { position : relative; height : 1.5em; padding : 2px 5px; font-family : 'Open Sans', sans-serif; - font-size : 16px; - font-weight : normal; color : #000000; text-transform : uppercase; background : #EEEEEE; From 9924c6049e47eca753d05cbaa440c4955f60424d Mon Sep 17 00:00:00 2001 From: Gazook89 Date: Sat, 17 Aug 2024 14:26:45 -0500 Subject: [PATCH 048/136] Aesthetic changes to tooltip (radius, bg color) Matching tooltip color to the background of the input it belongs to, for better cohesion. Removed border-radius as well. --- client/homebrew/brewRenderer/toolBar/toolBar.less | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/client/homebrew/brewRenderer/toolBar/toolBar.less b/client/homebrew/brewRenderer/toolBar/toolBar.less index 4ee2379cb..000cafa11 100644 --- a/client/homebrew/brewRenderer/toolBar/toolBar.less +++ b/client/homebrew/brewRenderer/toolBar/toolBar.less @@ -45,9 +45,8 @@ height : 1.2lh; pointer-events : none; content : attr(value); - background-color : #D3D3D3; + background-color : #555555; border : 1px solid #A1A1A1; - border-radius : 5px; transform : translate(-50%, 50%); } } From fc96f6bf95a980359c2b7fa74deb06ed6830da70 Mon Sep 17 00:00:00 2001 From: Gazook89 Date: Sat, 17 Aug 2024 14:45:50 -0500 Subject: [PATCH 049/136] text input changes (text-transform, radius, border, focus) Aligning input here with Properties editor inputs. Removed border radius, added thin border, a focus border. --- client/homebrew/brewRenderer/toolBar/toolBar.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/homebrew/brewRenderer/toolBar/toolBar.less b/client/homebrew/brewRenderer/toolBar/toolBar.less index 000cafa11..8c881d359 100644 --- a/client/homebrew/brewRenderer/toolBar/toolBar.less +++ b/client/homebrew/brewRenderer/toolBar/toolBar.less @@ -19,9 +19,9 @@ padding : 2px 5px; font-family : 'Open Sans', sans-serif; color : #000000; - text-transform : uppercase; background : #EEEEEE; - border-radius : 7px; + border : 1px solid gray; + &:focus { outline : 1px solid #d3d3d3; } &.slider { color: #D3D3D3; From adab8449e02933e5e57ff3f2b617dfcbe69731f6 Mon Sep 17 00:00:00 2001 From: Gazook89 Date: Sat, 17 Aug 2024 15:32:30 -0500 Subject: [PATCH 050/136] Change toolbar spacing replace column-/row-gap with a single gap at 5px. Padding on each child element will provide the space. Set a height on toolbar, so child elements can be set to 100% height to improve bg color change on hover. --- client/homebrew/brewRenderer/toolBar/toolBar.less | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/client/homebrew/brewRenderer/toolBar/toolBar.less b/client/homebrew/brewRenderer/toolBar/toolBar.less index 8c881d359..d29d05f23 100644 --- a/client/homebrew/brewRenderer/toolBar/toolBar.less +++ b/client/homebrew/brewRenderer/toolBar/toolBar.less @@ -3,12 +3,13 @@ z-index : 1; display : flex; flex-wrap : wrap; - row-gap : 5px; - column-gap : 15px; + gap : 5px; align-items : center; justify-content : center; + box-sizing : border-box; width : 100%; - padding: 2px 0; + height : 29px; + padding : 2px 0; font-family : 'Open Sans', sans-serif; color : white; background-color : #555555; @@ -57,21 +58,23 @@ .tool { display : flex; align-items : center; - height : 100%; - padding : 0 8px; color : #CCCCCC; + padding : 0; + height: 100%; + box-sizing: content-box; &:hover,&:focus-within { background-color : #444444; } button { width : 70px; - padding : 0; font-family : 'Open Sans', sans-serif; font-size : 11px; font-weight : normal; color : #CCCCCC; text-transform : uppercase; background-color : transparent; + height : 100%; + padding : 0 8px; &:focus-within { height : 100%; From f204b0ebc0c2fffeefad3b14b5d60d9202cfb688 Mon Sep 17 00:00:00 2001 From: Gazook89 Date: Sat, 17 Aug 2024 15:34:13 -0500 Subject: [PATCH 051/136] tool elements use width:auto for flexibility, but with min-width Set the child elements of the toolbar to have auto width (can expand as needed), but have a min-width so no button, such as an icon, is too small. --- client/homebrew/brewRenderer/toolBar/toolBar.less | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/client/homebrew/brewRenderer/toolBar/toolBar.less b/client/homebrew/brewRenderer/toolBar/toolBar.less index d29d05f23..994b49fde 100644 --- a/client/homebrew/brewRenderer/toolBar/toolBar.less +++ b/client/homebrew/brewRenderer/toolBar/toolBar.less @@ -61,12 +61,12 @@ color : #CCCCCC; padding : 0; height: 100%; + width: auto; box-sizing: content-box; &:hover,&:focus-within { background-color : #444444; } button { - width : 70px; font-family : 'Open Sans', sans-serif; font-size : 11px; font-weight : normal; @@ -74,6 +74,8 @@ text-transform : uppercase; background-color : transparent; height : 100%; + width : auto; + min-width : 46px; padding : 0 8px; &:focus-within { From c791c0f60bd18dc42b04356ca77feaa11f19c03f Mon Sep 17 00:00:00 2001 From: Gazook89 Date: Sat, 17 Aug 2024 15:36:12 -0500 Subject: [PATCH 052/136] modify the interactive states more closely match the properties editor behavior. removed some unnecessary (unused) properties. Outline only appears when element is focused (rather than on hover as well). --- client/homebrew/brewRenderer/toolBar/toolBar.less | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/client/homebrew/brewRenderer/toolBar/toolBar.less b/client/homebrew/brewRenderer/toolBar/toolBar.less index 994b49fde..10163a500 100644 --- a/client/homebrew/brewRenderer/toolBar/toolBar.less +++ b/client/homebrew/brewRenderer/toolBar/toolBar.less @@ -64,7 +64,7 @@ width: auto; box-sizing: content-box; - &:hover,&:focus-within { background-color : #444444; } + &:hover { background-color : #444444; } button { font-family : 'Open Sans', sans-serif; @@ -78,11 +78,8 @@ min-width : 46px; padding : 0 8px; - &:focus-within { - height : 100%; - font-weight : 800; - color : white; - } + + &:focus { outline : 1px solid #d3d3d3; } &:disabled { color : #777777; From 0d475ab035f593bbdc4ed13a2642cd35ce65e70c Mon Sep 17 00:00:00 2001 From: Gazook89 Date: Sat, 17 Aug 2024 15:38:00 -0500 Subject: [PATCH 053/136] refactor some properties Mostly change some properties from things like "transparent" to "unset". A lot of things that are just overriding the default Naturalcrit "colored button". Moved some properties to the top level `.toolbar` class and let it cascade down. --- client/homebrew/brewRenderer/toolBar/toolBar.less | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/client/homebrew/brewRenderer/toolBar/toolBar.less b/client/homebrew/brewRenderer/toolBar/toolBar.less index 10163a500..92b4e24b5 100644 --- a/client/homebrew/brewRenderer/toolBar/toolBar.less +++ b/client/homebrew/brewRenderer/toolBar/toolBar.less @@ -11,7 +11,7 @@ height : 29px; padding : 2px 0; font-family : 'Open Sans', sans-serif; - color : white; + color : #CCCCCC; background-color : #555555; input { @@ -58,7 +58,6 @@ .tool { display : flex; align-items : center; - color : #CCCCCC; padding : 0; height: 100%; width: auto; @@ -67,23 +66,20 @@ &:hover { background-color : #444444; } button { - font-family : 'Open Sans', sans-serif; - font-size : 11px; - font-weight : normal; - color : #CCCCCC; - text-transform : uppercase; - background-color : transparent; height : 100%; width : auto; min-width : 46px; padding : 0 8px; + font-weight : unset; + color : inherit; + background-color : unset; &:focus { outline : 1px solid #d3d3d3; } &:disabled { color : #777777; - background-color : transparent !important; + background-color : unset !important; } } } From b325779466b2aebbccd6657e19bc8a7df5cc6e34 Mon Sep 17 00:00:00 2001 From: Gazook89 Date: Sat, 17 Aug 2024 15:38:27 -0500 Subject: [PATCH 054/136] remove extra line breaks --- client/homebrew/brewRenderer/toolBar/toolBar.less | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/client/homebrew/brewRenderer/toolBar/toolBar.less b/client/homebrew/brewRenderer/toolBar/toolBar.less index 92b4e24b5..f7135b514 100644 --- a/client/homebrew/brewRenderer/toolBar/toolBar.less +++ b/client/homebrew/brewRenderer/toolBar/toolBar.less @@ -53,8 +53,6 @@ } } - - .tool { display : flex; align-items : center; @@ -73,8 +71,7 @@ font-weight : unset; color : inherit; background-color : unset; - - + &:focus { outline : 1px solid #d3d3d3; } &:disabled { From efb4c67e2a5a110a7ffb38cb5af526784e751def Mon Sep 17 00:00:00 2001 From: Gazook89 Date: Sat, 17 Aug 2024 15:40:52 -0500 Subject: [PATCH 055/136] use zoom icons rather than text --- client/homebrew/brewRenderer/toolBar/toolBar.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/homebrew/brewRenderer/toolBar/toolBar.jsx b/client/homebrew/brewRenderer/toolBar/toolBar.jsx index cad878647..285c8fba0 100644 --- a/client/homebrew/brewRenderer/toolBar/toolBar.jsx +++ b/client/homebrew/brewRenderer/toolBar/toolBar.jsx @@ -65,7 +65,7 @@ const ToolBar = ({ updateZoom, currentPage, onPageChange, totalPages })=>{ onClick={()=>setZoomLevel('out')} disabled={state.zoomLevel <= minZoom} > - Zoom Out +
@@ -101,7 +101,7 @@ const ToolBar = ({ updateZoom, currentPage, onPageChange, totalPages })=>{ onClick={()=>setZoomLevel('in')} disabled={state.zoomLevel >= maxZoom} > - Zoom In +
From 4a6418a4751f32b7be5fe465b4a9398293980a08 Mon Sep 17 00:00:00 2001 From: Gazook89 Date: Sat, 17 Aug 2024 18:08:33 -0500 Subject: [PATCH 056/136] fix padding on sides of slider Extra padding on the sides of a range slider extends the length of the slider, such that you can't move the thumb all the way to the end. --- client/homebrew/brewRenderer/toolBar/toolBar.less | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/client/homebrew/brewRenderer/toolBar/toolBar.less b/client/homebrew/brewRenderer/toolBar/toolBar.less index f7135b514..9dd509c2c 100644 --- a/client/homebrew/brewRenderer/toolBar/toolBar.less +++ b/client/homebrew/brewRenderer/toolBar/toolBar.less @@ -27,6 +27,7 @@ &.slider { color: #D3D3D3; accent-color: #d3d3d3; + padding: 2px 0; &::-webkit-slider-thumb, &::-moz-slider-thumb { cursor : pointer; @@ -71,7 +72,7 @@ font-weight : unset; color : inherit; background-color : unset; - + &:focus { outline : 1px solid #d3d3d3; } &:disabled { From 9aa7c67c5bbfeab7149f47f7058dbb71e9ad0db6 Mon Sep 17 00:00:00 2001 From: Gazook89 Date: Sat, 17 Aug 2024 20:41:59 -0500 Subject: [PATCH 057/136] remove "makeZoom" function The makeZoom function is redundant if we just insert the style a little further down when the `.pages` div is initialized, as a `style` attribute on the tag. --- client/homebrew/brewRenderer/brewRenderer.jsx | 16 +--------------- themes/themes.json | 4 ++-- 2 files changed, 3 insertions(+), 17 deletions(-) diff --git a/client/homebrew/brewRenderer/brewRenderer.jsx b/client/homebrew/brewRenderer/brewRenderer.jsx index 489558010..845ae612d 100644 --- a/client/homebrew/brewRenderer/brewRenderer.jsx +++ b/client/homebrew/brewRenderer/brewRenderer.jsx @@ -231,19 +231,6 @@ const BrewRenderer = (props)=>{ })); }; - const makeZoom = () => { - - return( - - ); - } - const handlePageChange = (pageNumber) => { // Scroll to the desired page scrollToPage(pageNumber); @@ -284,14 +271,13 @@ const BrewRenderer = (props)=>{
- {makeZoom()} {/* Apply CSS from Style tab and render pages from Markdown tab */} {state.isMounted && <> {renderStyle()} -
+
{renderPages()}
diff --git a/themes/themes.json b/themes/themes.json index 9b65a61ca..16a4b9b13 100644 --- a/themes/themes.json +++ b/themes/themes.json @@ -29,12 +29,12 @@ "baseSnippets": false, "path": "Blank" }, - "journal": { + "Journal": { "name": "Journal", "renderer": "V3", "baseTheme": "Blank", "baseSnippets": "5ePHB", - "path": "journal" + "path": "Journal" } } } \ No newline at end of file From 8be3154865ec6dfff5e2fabba85a0787eeb03949 Mon Sep 17 00:00:00 2001 From: Gazook89 Date: Sat, 17 Aug 2024 20:48:30 -0500 Subject: [PATCH 058/136] rename functions/attributes updateZoom() => handleZoom updateZoom prop => onZoomChange More clarity of prop versus handler function. --- client/homebrew/brewRenderer/brewRenderer.jsx | 4 ++-- client/homebrew/brewRenderer/toolBar/toolBar.jsx | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/client/homebrew/brewRenderer/brewRenderer.jsx b/client/homebrew/brewRenderer/brewRenderer.jsx index 845ae612d..4451d31b2 100644 --- a/client/homebrew/brewRenderer/brewRenderer.jsx +++ b/client/homebrew/brewRenderer/brewRenderer.jsx @@ -224,7 +224,7 @@ const BrewRenderer = (props)=>{ }; //Toolbar settings: - const updateZoom = (newZoom) => { + const handleZoom = (newZoom) => { setState((prevState)=>({ ...prevState, zoom : newZoom @@ -259,7 +259,7 @@ const BrewRenderer = (props)=>{ contentDidMount={frameDidMount} onClick={()=>{emitClick();}} > - +
{ +const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{ const [state, setState] = useState({ currentPage : currentPage, totalPages : totalPages, @@ -16,7 +16,7 @@ const ToolBar = ({ updateZoom, currentPage, onPageChange, totalPages })=>{ }); useEffect(()=>{ - updateZoom(state.zoomLevel); + onZoomChange(state.zoomLevel); }, [state.zoomLevel]); useEffect(()=>{ @@ -87,7 +87,7 @@ const ToolBar = ({ updateZoom, currentPage, onPageChange, totalPages })=>{ zoomLevel : newZoomLevel, zoomInput : newZoomLevel, })); - updateZoom(newZoomLevel); + onZoomChange(newZoomLevel); } }} /> From d1080882953d5ef705578db9a866ff0cf00d5a50 Mon Sep 17 00:00:00 2001 From: Gazook89 Date: Sat, 17 Aug 2024 21:23:12 -0500 Subject: [PATCH 059/136] remove unneeded handler --- .../homebrew/brewRenderer/toolBar/toolBar.jsx | 20 +------------------ 1 file changed, 1 insertion(+), 19 deletions(-) diff --git a/client/homebrew/brewRenderer/toolBar/toolBar.jsx b/client/homebrew/brewRenderer/toolBar/toolBar.jsx index af29ebf26..8f26db63a 100644 --- a/client/homebrew/brewRenderer/toolBar/toolBar.jsx +++ b/client/homebrew/brewRenderer/toolBar/toolBar.jsx @@ -4,7 +4,6 @@ const { useState, useEffect } = React; const maxZoom = 300; const minZoom = 10; -const zoomStep = 10; const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{ const [state, setState] = useState({ @@ -42,22 +41,6 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{ })); }; - const handleInputChange = (value, type)=>{ - const newValue = parseInt(value, 10); - - if(type === 'zoom' && newValue >= minZoom && newValue <= maxZoom) { - setState((prevState)=>({ - ...prevState, - zoomInput : newValue, - })); - } else if(type === 'page' && newValue >= 1 && newValue <= totalPages) { - setState((prevState)=>({ - ...prevState, - pageNumberInput : newValue, - })); - } - }; - return (
@@ -76,9 +59,8 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{ list='zoomLevels' min={minZoom} max={maxZoom} - step={zoomStep} + step='1' value={state.zoomInput} - // onChange={(e)=>handleInputChange(e.target.value, 'zoom')} onChange={(e)=>{ const newZoomLevel = parseInt(e.target.value, 10); if(newZoomLevel !== state.zoomLevel) { From 7cc967ad49552afbafd02f5c9f636a572239da52 Mon Sep 17 00:00:00 2001 From: Gazook89 Date: Sat, 17 Aug 2024 23:39:59 -0500 Subject: [PATCH 060/136] setZoomLevel to no longer use if/else Remove the 'in'/'out' parameter of the function and just have the buttons send postive or negative integers equal to the desired change in the zoom. No need for if/else statements using strings. --- client/homebrew/brewRenderer/toolBar/toolBar.jsx | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/client/homebrew/brewRenderer/toolBar/toolBar.jsx b/client/homebrew/brewRenderer/toolBar/toolBar.jsx index 8f26db63a..94c8a0dd3 100644 --- a/client/homebrew/brewRenderer/toolBar/toolBar.jsx +++ b/client/homebrew/brewRenderer/toolBar/toolBar.jsx @@ -1,6 +1,7 @@ require('./toolBar.less'); const React = require('react'); const { useState, useEffect } = React; +const _ = require('lodash') const maxZoom = 300; const minZoom = 10; @@ -26,13 +27,8 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{ })); }, [currentPage]); - const setZoomLevel = (direction)=>{ - let zoomLevel = state.zoomLevel; - if(direction === 'in') { - zoomLevel += zoomStep; - } else { - zoomLevel -= zoomStep; - } + const setZoomLevel = (delta)=>{ + const zoomLevel = _.clamp(state.zoomLevel + delta, minZoom, maxZoom); setState((prevState)=>({ ...prevState, @@ -45,7 +41,7 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
@@ -54,17 +52,8 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{ min={minZoom} max={maxZoom} step='1' - value={state.zoomLevel} - onChange={(e)=>{ - const newZoomLevel = parseInt(e.target.value, 10); - if(newZoomLevel !== state.zoomLevel) { - setState((prevState)=>({ - ...prevState, - zoomLevel : newZoomLevel - })); - onZoomChange(newZoomLevel); - } - }} + value={zoomLevel} + onChange={(e)=>{setZoomLevel(parseInt(e.target.value));}} />