diff --git a/CHANGELOG.md b/CHANGELOG.md index 696114b..d100577 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,12 @@ To see every change with descriptions aimed at developers, see As a continuously updated web app, Coauthor uses dates instead of version numbers. +## 2023-12-18 + +* PDFs now support typing a page number manually, + which makes it easier to navigate large documents. + [[#346](https://github.com/edemaine/coauthor/issues/346)] + ## 2023-12-17 * Superusers can now make private replies (e.g. for student feedback) diff --git a/client/MessagePDF.coffee b/client/MessagePDF.coffee index c9b0704..7755ed0 100644 --- a/client/MessagePDF.coffee +++ b/client/MessagePDF.coffee @@ -41,6 +41,7 @@ WrappedMessagePDF = React.memo ({file}) -> canvasRef = useRef() [progress, setProgress] = useState 0 [rendering, setRendering] = useState false + [pageInput, setPageInput] = useState 1 [pageNum, setPageNum] = useState() [numPages, setNumPages] = useState() [fit, setFit] = useState 'page' @@ -155,16 +156,26 @@ WrappedMessagePDF = React.memo ({file}) -> -> renderTask.cancel() , [page, elementWidth, fit, inView] - onChangePage = (delta) -> (e) -> - e.currentTarget.blur() - newPage = pageNum + delta + useEffect => + setPageInput pageNum if pageNum? + , [pageNum] + + clipPage = (newPage) => newPage = 1 if newPage < 1 newPage = numPages if newPage > numPages - setPageNum newPage - onFit = (newFit) -> (e) -> + newPage + onChangePage = (delta) => (e) => + e.currentTarget.blur() + setPageNum clipPage pageNum + delta + onInputPage = (e) => + setPageInput e.currentTarget.value + p = Math.round e.currentTarget.valueAsNumber + if 1 <= p <= numPages + setPageNum p + onFit = (newFit) => (e) => e.currentTarget.blur() setFit newFit - onTheme = (e) -> + onTheme = (e) => messageTheme.set file, oppositeTheme theme
@@ -207,8 +218,12 @@ WrappedMessagePDF = React.memo ({file}) ->
- - page {pageNum} of {numPages} + + page + setPageInput pageNum} /> + of {numPages} {if rendering (rendering) diff --git a/client/message.styl b/client/message.styl index 5e577a7..f1cf3ea 100644 --- a/client/message.styl +++ b/client/message.styl @@ -421,6 +421,11 @@ nav.contents .pdf.dark filter: invert(1) hue-rotate(180deg) +.input-xs + width: 50px !important + height: 20px + padding: 0px 5px + margin: 0px 5px // MessageInfoBoxes