Skip to content

Commit

Permalink
improved version based on columns
Browse files Browse the repository at this point in the history
  • Loading branch information
@CD-Z
CD-Z committed Aug 12, 2023
1 parent d0a2f29 commit 0670187
Show file tree
Hide file tree
Showing 3 changed files with 168 additions and 186 deletions.
6 changes: 3 additions & 3 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

218 changes: 134 additions & 84 deletions src/screens/reader/components/WebViewReader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -212,33 +212,74 @@ const WebViewReader: React.FC<WebViewReaderProps> = props => {
${
readerPages
? `
.left, .right {
position: absolute;
height: 89%;
width: 35%;
z-index: 100;
top:0;
}
.left {
left: 0
}
.right {
right: 0;
}
chapter{
position: relative;
height: 84%
body {
overflow: hidden;
position: relative;
}
.hidden {
display: none
#left,
#right, #middle {
position: absolute;
height: 100%;
width: 35%;
top: 0;
z-index: 20
}
.middle {
#middle {
left: 35%;
position: absolute;
height: 89%;
width: 30%;
z-index: 100;
top:0;
width: 30%;
}
#left {
left: 0;
}
#right {
right: 0;
}
#infoContainer {
position: absolute;
z-index: 1000;
bottom: 40;
margin: auto;
left: 0;
}
.nextButton{
position: relative;
z-index: 100000 !important
}
chapter {
height: 100%;
display: flexbox;
flex-direction: column;
flex-wrap: wrap;
column-gap: calc(2 * ${readerSettings.padding}%);
column-width: 100vw;
transition: 200ms;
}
.spacer {
padding-bottom: 120px;
height: 10px;
width: 100%
}
.hide {
transform: translate(100%);
transition: 200ms
}
.show {
transform: translate(0%);
}
.shown {
animation: hideInfo 200ms backwards
}
@keyframes hideInfo {
0% {
transform: translate(0);
}
100% {
transform: translate(100%);
}
}
`
: ''
Expand All @@ -263,80 +304,86 @@ const WebViewReader: React.FC<WebViewReaderProps> = props => {
: onClickWebViewPostMessage({
type: 'hide',
})
}>
}>
<div id="left"></div>
<div id="right"></div>
<div id="middle" ${
readerPages
? onClickWebViewPostMessage({
type: 'hide',
})
: undefined
}></div>
<chapter
data-novel-id='${chapterInfo.novelId}'
data-chapter-id='${chapterInfo.chapterId}'
>
${
addChapterNameInReader
? `<p><h3>${chapterName}</h3></p>`
? `<h3>${chapterName}</h3>`
: ''
}
${html}
<div class="spacer"></div>
</chapter>
<div class="left"></div>
<div class="right"></div>
<div class="middle" ${
readerPages
? onClickWebViewPostMessage({
type: 'hide',
})
: undefined
}></div>
<div id="infoContainer" class="hide">
<div class="infoText">
${getString(
'readerScreen.finished',
)}: ${chapterName?.trim()}
</div>
${
nextChapter
? `<button class="nextButton"
${onClickWebViewPostMessage({
type: 'next',
})}>
Next: ${nextChapter.chapterName}
</button>`
: `<div class="infoText">${getString(
'readerScreen.noNextChapter',
)}</div>`
}
</div>
</div>
<script>
if(!document.querySelector("input[offline]") && ${!!headers}){
document.querySelectorAll("img").forEach(img => {
window.ReactNativeWebView.postMessage(JSON.stringify({type:"imgfile",data:img.getAttribute("delayed-src")}));
});
}
if(!document.querySelector("input[offline]") && ${!!headers}){
document.querySelectorAll("img").forEach(img => {
window.ReactNativeWebView.postMessage(JSON.stringify({type:"imgfile",data:img.getAttribute("delayed-src")}));
});
}
var scrollTimeout;
window.addEventListener("scroll", (event) => {
window.clearTimeout( scrollTimeout );
scrollTimeout = setTimeout(() => {
window.ReactNativeWebView.postMessage(
JSON.stringify(
{
type:"scrollend",
data:{
offSetY: window.pageYOffset,
percentage: (window.pageYOffset+${layoutHeight})/document.body.scrollHeight*100,
var scrollTimeout;
window.addEventListener("scroll", (event) => {
window.clearTimeout( scrollTimeout );
scrollTimeout = setTimeout(() => {
window.ReactNativeWebView.postMessage(
JSON.stringify(
{
type:"scrollend",
data:{
offSetY: window.pageYOffset,
percentage: (window.pageYOffset+${layoutHeight})/document.body.scrollHeight*100,
}
}
}
)
);
}, 100);
});
)
);
}, 100);
});
let sendHeightTimeout;
const sendHeight = (timeOut) => {
clearTimeout(sendHeightTimeout);
sendHeightTimeout = setTimeout(
window.ReactNativeWebView.postMessage(
JSON.stringify({type:"height",data:document.body.scrollHeight})
), timeOut
);
}
sendHeight(1000);
let sendHeightTimeout;
const sendHeight = (timeOut) => {
clearTimeout(sendHeightTimeout);
sendHeightTimeout = setTimeout(
window.ReactNativeWebView.postMessage(
JSON.stringify({type:"height",data:document.body.scrollHeight})
), timeOut
);
}
sendHeight(1000);
</script>
<div class="infoText">
${getString(
'readerScreen.finished',
)}: ${chapterName?.trim()}
</div>
${
nextChapter
? `<button class="nextButton" ${onClickWebViewPostMessage(
{ type: 'next' },
)}>
Next: ${nextChapter.chapterName}
</button>`
: `<div class="infoText">${getString(
'readerScreen.noNextChapter',
)}</div>`
}
${
swipeGestures
? `
Expand Down Expand Up @@ -366,7 +413,11 @@ const WebViewReader: React.FC<WebViewReaderProps> = props => {
let chapterId =${chapterInfo.chapterId};
let novelId =${chapterInfo.novelId};
let html = document.querySelector("chapter").innerHTML;
${readerPages ? horizontalReaderPages : ''}
${
readerPages
? horizontalReaderPages(readerSettings.padding)
: ''
}
${readerSettings.customJS}
}
document.addEventListener("DOMContentLoaded", fn);
Expand All @@ -378,5 +429,4 @@ const WebViewReader: React.FC<WebViewReaderProps> = props => {
/>
);
};

export default React.memo(WebViewReader, isEqual);
Loading

0 comments on commit 0670187

Please sign in to comment.