-
Notifications
You must be signed in to change notification settings - Fork 200
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Add Horizontal Reading Mode (#1021)
* Horizontal Reading Mode (#733) Closes #29 Closes #149 * fixed first few compatibility issues * added WebView debugging help * fixed pages logic + open next chapter at end * hopefully fixed infinity glitch * removed logs * fixed small issues * working page numbering * double L shape navigation * changed let to const * fixed scrollTo function * cleanup and fixed css issues * fixed display bug * fixed settings bug * added change padding setting * added strings * save + scroll on opening chapter logic * resolved totalpages detection issue * simplified getInt function * css cleanup * removed useless * fixed padding scaling bug * deleted debug items * additional top padding * smaller chapter height * fixed contextMenu * replaced name: readerPages » pageReader * fixed ReaderSettings Preview Reader behaviour * cleanup * ReaderValueChange improvements * moved page state to js * fixed type issues * functionality test * fix: NaN page on scrollbar --------- Co-authored-by: nyagami <[email protected]>
- Loading branch information
Showing
51 changed files
with
4,537 additions
and
5,547 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| * { | ||
| touch-action: none; | ||
| } | ||
|
|
||
| body { | ||
| height: 100vh; | ||
| overflow: hidden; | ||
| position: relative; | ||
| } | ||
|
|
||
| html { | ||
| height: 100vh; | ||
| } | ||
|
|
||
| chapter { | ||
| /* height: calc(100% - 3% - var(--readerSettings-padding) - 2rem); */ | ||
| height: 90vh; | ||
| display: flexbox; | ||
| flex-direction: column; | ||
| flex-wrap: wrap; | ||
| column-gap: 0; | ||
| column-width: 100vw; | ||
| transition: 200ms; | ||
| padding-top: calc(3% + var(--readerSettings-padding)); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| const select = key => { | ||
| return document.querySelector(key); | ||
| }; | ||
| const chapter = select('chapter'); | ||
| const getInt = key => { | ||
| return parseInt(chapter?.getAttribute('data-' + key), 10); | ||
| }; | ||
| const setAttr = (key, val) => { | ||
| chapter?.setAttribute(key, val); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| const bounds = document.querySelector('html').getBoundingClientRect(); | ||
| var page = 0; | ||
| var pages = 0; | ||
|
|
||
| function setPages(newPages) { | ||
| if (newPages) { | ||
| pages = newPages; | ||
| return; | ||
| } | ||
| const textWidth = chapter.scrollWidth; | ||
| const layoutWidth = parseInt( | ||
| document.querySelector('html').getBoundingClientRect().width, | ||
| 10, | ||
| ); | ||
| pages = Math.round(textWidth / layoutWidth) - 1; | ||
| } | ||
| function setPage(newPage) { | ||
| page = newPage ?? 0; | ||
| } | ||
| function getPages() { | ||
| return pages; | ||
| } | ||
| function getPage() { | ||
| return page; | ||
| } | ||
| function tapChapter(event) { | ||
| const { clientX, clientY } = event; | ||
| const { x, y } = { x: clientX / bounds.width, y: clientY / bounds.height }; | ||
|
|
||
| if (y < 0.2) { | ||
| movePage('prev'); | ||
| } else if (y > 0.8) { | ||
| movePage('next'); | ||
| } else if (x < 0.33) { | ||
| movePage('prev'); | ||
| } else if (x > 0.66) { | ||
| movePage('next'); | ||
| } else { | ||
| movePage(); | ||
| } | ||
| } | ||
|
|
||
| function movePage(panel) { | ||
| switch (panel) { | ||
| case 'next': | ||
| if (page === pages) { | ||
| reader.post({ type: 'next' }); | ||
| } else { | ||
| page++; | ||
| } | ||
| break; | ||
| case 'prev': | ||
| if (page === 0) { | ||
| reader.post({ type: 'prev' }); | ||
| } else { | ||
| page--; | ||
| } | ||
| break; | ||
| default: | ||
| reader.post({ type: 'hide' }); | ||
| break; | ||
| } | ||
|
|
||
| chapter.style.transform = 'translate(-' + page * 100 + '%)'; | ||
| } |
Oops, something went wrong.