Skip to content

B
book-app
提交 bc4b9436 authored 作者: yueweilu's avatar yueweilu
浏览文件
操作

传参加入上一节的内容、并且传参加入上一节的标识

上级 23a38b15
显示空白字符变更
内嵌 并排
正在显示 包含 225 行增加 和 100 行删除
assets/html/assets/css/read.css
浏览文件 @ bc4b9436
...@@ -175,6 +175,14 @@ light.c-ff4500::selection { ...@@ -175,6 +175,14 @@ light.c-ff4500::selection {
max-height: 100vh; max-height: 100vh;
min-height: 100vh; min-height: 100vh;
overflow: hidden; overflow: hidden;
position: relative;
}
.chapter-container .chapter-content-list .show-up {
position: absolute;
z-index: -1;
opacity: 0;
left: -100%;
top: -100%;
} }
.chapter-container .chapter-content-list .show { .chapter-container .chapter-content-list .show {
-webkit-transform: translateY(0); -webkit-transform: translateY(0);
...@@ -184,50 +192,65 @@ light.c-ff4500::selection { ...@@ -184,50 +192,65 @@ light.c-ff4500::selection {
transition-duration: 0ms; transition-duration: 0ms;
min-height: 100vh; min-height: 100vh;
} }
.chapter-container .chapter-content-list .chapter-item { .chapter-container .chapter-content-list .chapter-item,
.chapter-container .chapter-content-list .chapter-item-up {
width: 100vw; width: 100vw;
box-sizing: border-box; box-sizing: border-box;
overflow-x: hidden; overflow-x: hidden;
padding-bottom: 10vh; padding-bottom: 10vh;
} }
.chapter-container .chapter-content-list .chapter-item .chapter-expand-inline { .chapter-container .chapter-content-list .chapter-item .chapter-expand-inline,
.chapter-container .chapter-content-list .chapter-item-up .chapter-expand-inline {
vertical-align: text-top !important; vertical-align: text-top !important;
} }
.chapter-container .chapter-content-list .chapter-item h1, .chapter-container .chapter-content-list .chapter-item h1,
.chapter-container .chapter-content-list .chapter-item-up h1,
.chapter-container .chapter-content-list .chapter-item h2, .chapter-container .chapter-content-list .chapter-item h2,
.chapter-container .chapter-content-list .chapter-item-up h2,
.chapter-container .chapter-content-list .chapter-item h3, .chapter-container .chapter-content-list .chapter-item h3,
.chapter-container .chapter-content-list .chapter-item-up h3,
.chapter-container .chapter-content-list .chapter-item h4, .chapter-container .chapter-content-list .chapter-item h4,
.chapter-container .chapter-content-list .chapter-item-up h4,
.chapter-container .chapter-content-list .chapter-item h5, .chapter-container .chapter-content-list .chapter-item h5,
.chapter-container .chapter-content-list .chapter-item h6 { .chapter-container .chapter-content-list .chapter-item-up h5,
.chapter-container .chapter-content-list .chapter-item h6,
.chapter-container .chapter-content-list .chapter-item-up h6 {
margin-left: 10px; margin-left: 10px;
margin-right: 10px; margin-right: 10px;
font-family: "宋体"; font-family: "黑体";
} }
.chapter-container .chapter-content-list .chapter-item .chapter-item-header, .chapter-container .chapter-content-list .chapter-item .chapter-item-header,
.chapter-container .chapter-content-list .chapter-item .chapter-item-section { .chapter-container .chapter-content-list .chapter-item-up .chapter-item-header,
.chapter-container .chapter-content-list .chapter-item .chapter-item-section,
.chapter-container .chapter-content-list .chapter-item-up .chapter-item-section {
margin-left: 0; margin-left: 0;
margin-right: 0; margin-right: 0;
} }
.chapter-container .chapter-content-list .chapter-item ol { .chapter-container .chapter-content-list .chapter-item ol,
.chapter-container .chapter-content-list .chapter-item-up ol {
margin: 0 30px; margin: 0 30px;
} }
.chapter-container .chapter-content-list .chapter-item ol li { .chapter-container .chapter-content-list .chapter-item ol li,
.chapter-container .chapter-content-list .chapter-item-up ol li {
font-size: 18px; font-size: 18px;
font-family: "黑体"; font-family: "黑体";
line-height: 1.5; line-height: 1.5;
margin: 15px 0; margin: 15px 0;
} }
.chapter-container .chapter-content-list .chapter-item ul { .chapter-container .chapter-content-list .chapter-item ul,
.chapter-container .chapter-content-list .chapter-item-up ul {
margin: 0 28px; margin: 0 28px;
} }
.chapter-container .chapter-content-list .chapter-item ul li { .chapter-container .chapter-content-list .chapter-item ul li,
.chapter-container .chapter-content-list .chapter-item-up ul li {
font-size: 18px; font-size: 18px;
font-family: "黑体"; font-family: "黑体";
padding-left: 3px; padding-left: 3px;
line-height: 1.5; line-height: 1.5;
margin: 15px 0; margin: 15px 0;
} }
.chapter-container .chapter-content-list .chapter-item pre { .chapter-container .chapter-content-list .chapter-item pre,
.chapter-container .chapter-content-list .chapter-item-up pre {
white-space: pre-wrap; white-space: pre-wrap;
word-break: break-all; word-break: break-all;
word-wrap: break-word; word-wrap: break-word;
...@@ -238,7 +261,8 @@ light.c-ff4500::selection { ...@@ -238,7 +261,8 @@ light.c-ff4500::selection {
background-color: #f5f2f0; background-color: #f5f2f0;
margin: 15px 0; margin: 15px 0;
} }
.chapter-container .chapter-content-list .chapter-item blockquote { .chapter-container .chapter-content-list .chapter-item blockquote,
.chapter-container .chapter-content-list .chapter-item-up blockquote {
padding: 10px; padding: 10px;
line-height: 1.5; line-height: 1.5;
font-size: 16px; font-size: 16px;
...@@ -246,179 +270,241 @@ light.c-ff4500::selection { ...@@ -246,179 +270,241 @@ light.c-ff4500::selection {
border-left: 5px solid #b4d5ff; border-left: 5px solid #b4d5ff;
margin: 15px 0; margin: 15px 0;
} }
.chapter-container .chapter-content-list .chapter-item img { .chapter-container .chapter-content-list .chapter-item img,
.chapter-container .chapter-content-list .chapter-item-up img {
max-width: 100%; max-width: 100%;
} }
.chapter-container .chapter-content-list .chapter-item table { .chapter-container .chapter-content-list .chapter-item table,
.chapter-container .chapter-content-list .chapter-item-up table {
border-collapse: collapse; border-collapse: collapse;
margin: 0 10px; margin: 0 10px;
width: calc(100% - 20px) !important; width: calc(100% - 20px) !important;
} }
.chapter-container .chapter-content-list .chapter-item table th { .chapter-container .chapter-content-list .chapter-item table th,
.chapter-container .chapter-content-list .chapter-item-up table th {
font-weight: 700; font-weight: 700;
background-color: #f5f2f0; background-color: #f5f2f0;
font-size: 18px; font-size: 18px;
} }
.chapter-container .chapter-content-list .chapter-item table th, .chapter-container .chapter-content-list .chapter-item table th,
.chapter-container .chapter-content-list .chapter-item table td { .chapter-container .chapter-content-list .chapter-item-up table th,
.chapter-container .chapter-content-list .chapter-item table td,
.chapter-container .chapter-content-list .chapter-item-up table td {
border: 1px solid #ddd; border: 1px solid #ddd;
padding: 5px; padding: 5px;
font-size: 18px; font-size: 18px;
} }
.chapter-container .chapter-content-list .chapter-item a:link, .chapter-container .chapter-content-list .chapter-item a:link,
.chapter-container .chapter-content-list .chapter-item-up a:link,
.chapter-container .chapter-content-list .chapter-item a:visited, .chapter-container .chapter-content-list .chapter-item a:visited,
.chapter-container .chapter-content-list .chapter-item a:hover { .chapter-container .chapter-content-list .chapter-item-up a:visited,
.chapter-container .chapter-content-list .chapter-item a:hover,
.chapter-container .chapter-content-list .chapter-item-up a:hover {
color: #2a9feb; color: #2a9feb;
} }
.chapter-container .chapter-content-list .chapter-item h1 { .chapter-container .chapter-content-list .chapter-item h1,
.chapter-container .chapter-content-list .chapter-item-up h1 {
line-height: 40px; line-height: 40px;
font-size: 26px; font-size: 26px;
} }
.chapter-container .chapter-content-list .chapter-item h2 { .chapter-container .chapter-content-list .chapter-item h2,
.chapter-container .chapter-content-list .chapter-item-up h2 {
line-height: 34px; line-height: 34px;
font-size: 24px; font-size: 24px;
} }
.chapter-container .chapter-content-list .chapter-item h3 { .chapter-container .chapter-content-list .chapter-item h3,
.chapter-container .chapter-content-list .chapter-item-up h3 {
line-height: 30px; line-height: 30px;
font-size: 22px; font-size: 22px;
} }
.chapter-container .chapter-content-list .chapter-item h4 { .chapter-container .chapter-content-list .chapter-item h4,
.chapter-container .chapter-content-list .chapter-item-up h4 {
line-height: 26px; line-height: 26px;
font-size: 20px; font-size: 20px;
} }
.chapter-container .chapter-content-list .chapter-item h5 { .chapter-container .chapter-content-list .chapter-item h5,
.chapter-container .chapter-content-list .chapter-item-up h5 {
line-height: 24px; line-height: 24px;
font-size: 18px; font-size: 18px;
} }
.chapter-container .chapter-content-list .chapter-item h6 { .chapter-container .chapter-content-list .chapter-item h6,
.chapter-container .chapter-content-list .chapter-item-up h6 {
line-height: 20px; line-height: 20px;
font-size: 16px; font-size: 16px;
} }
.chapter-container .chapter-content-list .chapter-item video, .chapter-container .chapter-content-list .chapter-item video,
.chapter-container .chapter-content-list .chapter-item audio { .chapter-container .chapter-content-list .chapter-item-up video,
.chapter-container .chapter-content-list .chapter-item audio,
.chapter-container .chapter-content-list .chapter-item-up audio {
width: 100%; width: 100%;
} }
.chapter-container .chapter-content-list .chapter-item div[data-w-e-type="video"] { .chapter-container .chapter-content-list .chapter-item div[data-w-e-type="video"],
.chapter-container .chapter-content-list .chapter-item-up div[data-w-e-type="video"] {
padding: 0 10px; padding: 0 10px;
} }
.chapter-container .chapter-content-list .chapter-item p { .chapter-container .chapter-content-list .chapter-item p,
.chapter-container .chapter-content-list .chapter-item-up p {
line-height: 1.5; line-height: 1.5;
font-size: 18px; font-size: 18px;
font-family: '黑体'; font-family: '黑体';
margin: 15px 10px; margin: 15px 10px;
} }
.chapter-container .chapter-content-list .chapter-item p img { .chapter-container .chapter-content-list .chapter-item p img,
.chapter-container .chapter-content-list .chapter-item-up p img {
height: auto; height: auto;
max-width: 100%; max-width: 100%;
} }
.chapter-container .chapter-content-list .chapter-item p > img { .chapter-container .chapter-content-list .chapter-item p > img,
.chapter-container .chapter-content-list .chapter-item-up p > img {
vertical-align: middle; vertical-align: middle;
} }
.chapter-container .chapter-content-list .chapter-item p > img + span { .chapter-container .chapter-content-list .chapter-item p > img + span,
.chapter-container .chapter-content-list .chapter-item-up p > img + span {
vertical-align: middle; vertical-align: middle;
padding-top: 4px; padding-top: 4px;
line-height: 1.5; line-height: 1.5;
} }
.chapter-container .chapter-content-list .chapter-item .chapter-practice, .chapter-container .chapter-content-list .chapter-item .chapter-practice,
.chapter-container .chapter-content-list .chapter-item-up .chapter-practice,
.chapter-container .chapter-content-list .chapter-item .chapter-expand, .chapter-container .chapter-content-list .chapter-item .chapter-expand,
.chapter-container .chapter-content-list .chapter-item-up .chapter-expand,
.chapter-container .chapter-content-list .chapter-item .chapter-item-section, .chapter-container .chapter-content-list .chapter-item .chapter-item-section,
.chapter-container .chapter-content-list .chapter-item-up .chapter-item-section,
.chapter-container .chapter-content-list .chapter-item .chapter-item-header, .chapter-container .chapter-content-list .chapter-item .chapter-item-header,
.chapter-container .chapter-content-list .chapter-item .chapter-gallery-container { .chapter-container .chapter-content-list .chapter-item-up .chapter-item-header,
.chapter-container .chapter-content-list .chapter-item .chapter-gallery-container,
.chapter-container .chapter-content-list .chapter-item-up .chapter-gallery-container {
margin-top: 15px; margin-top: 15px;
margin-bottom: 15px; margin-bottom: 15px;
-webkit-user-select: none; -webkit-user-select: none;
user-select: none; user-select: none;
} }
.chapter-container .chapter-content-list .chapter-item .chapter-practice, .chapter-container .chapter-content-list .chapter-item .chapter-practice,
.chapter-container .chapter-content-list .chapter-item-up .chapter-practice,
.chapter-container .chapter-content-list .chapter-item .chapter-expand, .chapter-container .chapter-content-list .chapter-item .chapter-expand,
.chapter-container .chapter-content-list .chapter-item-up .chapter-expand,
.chapter-container .chapter-content-list .chapter-item .chapter-item-section, .chapter-container .chapter-content-list .chapter-item .chapter-item-section,
.chapter-container .chapter-content-list .chapter-item-up .chapter-item-section,
.chapter-container .chapter-content-list .chapter-item .chapter-item-header, .chapter-container .chapter-content-list .chapter-item .chapter-item-header,
.chapter-container .chapter-content-list .chapter-item-up .chapter-item-header,
.chapter-container .chapter-content-list .chapter-item .chapter-gallery-container, .chapter-container .chapter-content-list .chapter-item .chapter-gallery-container,
.chapter-container .chapter-content-list .chapter-item .tange-tooptip { .chapter-container .chapter-content-list .chapter-item-up .chapter-gallery-container,
.chapter-container .chapter-content-list .chapter-item .tange-tooptip,
.chapter-container .chapter-content-list .chapter-item-up .tange-tooptip {
-webkit-user-select: none; -webkit-user-select: none;
user-select: none; user-select: none;
} }
.chapter-container .chapter-content-list .chapter-item .chapter-practice, .chapter-container .chapter-content-list .chapter-item .chapter-practice,
.chapter-container .chapter-content-list .chapter-item-up .chapter-practice,
.chapter-container .chapter-content-list .chapter-item .chapter-expand, .chapter-container .chapter-content-list .chapter-item .chapter-expand,
.chapter-container .chapter-content-list .chapter-item .chapter-gallery-container { .chapter-container .chapter-content-list .chapter-item-up .chapter-expand,
.chapter-container .chapter-content-list .chapter-item .chapter-gallery-container,
.chapter-container .chapter-content-list .chapter-item-up .chapter-gallery-container {
margin: 15px; margin: 15px;
} }
.chapter-container .chapter-content-list .chapter-item .chapter-practice.chapter-expand-inline, .chapter-container .chapter-content-list .chapter-item .chapter-practice.chapter-expand-inline,
.chapter-container .chapter-content-list .chapter-item-up .chapter-practice.chapter-expand-inline,
.chapter-container .chapter-content-list .chapter-item .chapter-expand.chapter-expand-inline, .chapter-container .chapter-content-list .chapter-item .chapter-expand.chapter-expand-inline,
.chapter-container .chapter-content-list .chapter-item .chapter-gallery-container.chapter-expand-inline { .chapter-container .chapter-content-list .chapter-item-up .chapter-expand.chapter-expand-inline,
.chapter-container .chapter-content-list .chapter-item .chapter-gallery-container.chapter-expand-inline,
.chapter-container .chapter-content-list .chapter-item-up .chapter-gallery-container.chapter-expand-inline {
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
} }
.chapter-container .chapter-content-list .chapter-item .chapter-gallery-container { .chapter-container .chapter-content-list .chapter-item .chapter-gallery-container,
.chapter-container .chapter-content-list .chapter-item-up .chapter-gallery-container {
cursor: pointer; cursor: pointer;
} }
.chapter-container .chapter-content-list .chapter-item .chapter-gallery-container .chapter-gallery-item { .chapter-container .chapter-content-list .chapter-item .chapter-gallery-container .chapter-gallery-item,
.chapter-container .chapter-content-list .chapter-item-up .chapter-gallery-container .chapter-gallery-item {
width: 50%; width: 50%;
padding: 10px; padding: 10px;
box-sizing: border-box; box-sizing: border-box;
text-align: center; text-align: center;
} }
.chapter-container .chapter-content-list .chapter-item .chapter-gallery-container .chapter-gallery-item.one { .chapter-container .chapter-content-list .chapter-item .chapter-gallery-container .chapter-gallery-item.one,
.chapter-container .chapter-content-list .chapter-item-up .chapter-gallery-container .chapter-gallery-item.one {
width: 100%; width: 100%;
} }
.chapter-container .chapter-content-list .chapter-item .chapter-gallery-container .chapter-gallery-item p { .chapter-container .chapter-content-list .chapter-item .chapter-gallery-container .chapter-gallery-item p,
.chapter-container .chapter-content-list .chapter-item-up .chapter-gallery-container .chapter-gallery-item p {
white-space: pre-wrap; white-space: pre-wrap;
word-wrap: break-word; word-wrap: break-word;
word-break: break-all; word-break: break-all;
} }
.chapter-container .chapter-content-list .chapter-item .chapter-gallery-container .chapter-gallery-item img { .chapter-container .chapter-content-list .chapter-item .chapter-gallery-container .chapter-gallery-item img,
.chapter-container .chapter-content-list .chapter-item-up .chapter-gallery-container .chapter-gallery-item img {
height: auto; height: auto;
width: 100%; width: 100%;
} }
.chapter-container .chapter-content-list .chapter-item .chapter-gallery-container .chapter-gallery-item.one img { .chapter-container .chapter-content-list .chapter-item .chapter-gallery-container .chapter-gallery-item.one img,
.chapter-container .chapter-content-list .chapter-item-up .chapter-gallery-container .chapter-gallery-item.one img {
max-width: 100%; max-width: 100%;
height: auto; height: auto;
width: 100%; width: 100%;
} }
.chapter-container .chapter-content-list .chapter-item .chapter-gallery-container.chapter-gallery-inline { .chapter-container .chapter-content-list .chapter-item .chapter-gallery-container.chapter-gallery-inline,
.chapter-container .chapter-content-list .chapter-item-up .chapter-gallery-container.chapter-gallery-inline {
margin-bottom: 0; margin-bottom: 0;
vertical-align: text-top; vertical-align: text-top;
display: inline !important; display: inline !important;
} }
.chapter-container .chapter-content-list .chapter-item .chapter-item-tooltip, .chapter-container .chapter-content-list .chapter-item .chapter-item-tooltip,
.chapter-container .chapter-content-list .chapter-item-up .chapter-item-tooltip,
.chapter-container .chapter-content-list .chapter-item .chapter-item-link, .chapter-container .chapter-content-list .chapter-item .chapter-item-link,
.chapter-container .chapter-content-list .chapter-item-up .chapter-item-link,
.chapter-container .chapter-content-list .chapter-item .chapter-gallery-inline, .chapter-container .chapter-content-list .chapter-item .chapter-gallery-inline,
.chapter-container .chapter-content-list .chapter-item .chapter-expand-inline { .chapter-container .chapter-content-list .chapter-item-up .chapter-gallery-inline,
.chapter-container .chapter-content-list .chapter-item .chapter-expand-inline,
.chapter-container .chapter-content-list .chapter-item-up .chapter-expand-inline {
text-indent: 0; text-indent: 0;
} }
.chapter-container .chapter-content-list .chapter-item .chapter-item-tooltip svg, .chapter-container .chapter-content-list .chapter-item .chapter-item-tooltip svg,
.chapter-container .chapter-content-list .chapter-item-up .chapter-item-tooltip svg,
.chapter-container .chapter-content-list .chapter-item .chapter-item-link svg, .chapter-container .chapter-content-list .chapter-item .chapter-item-link svg,
.chapter-container .chapter-content-list .chapter-item-up .chapter-item-link svg,
.chapter-container .chapter-content-list .chapter-item .chapter-gallery-inline svg, .chapter-container .chapter-content-list .chapter-item .chapter-gallery-inline svg,
.chapter-container .chapter-content-list .chapter-item .chapter-expand-inline svg { .chapter-container .chapter-content-list .chapter-item-up .chapter-gallery-inline svg,
.chapter-container .chapter-content-list .chapter-item .chapter-expand-inline svg,
.chapter-container .chapter-content-list .chapter-item-up .chapter-expand-inline svg {
text-indent: 0; text-indent: 0;
} }
.chapter-container .chapter-content-list .chapter-item .chapter-expand-inline, .chapter-container .chapter-content-list .chapter-item .chapter-expand-inline,
.chapter-container .chapter-content-list .chapter-item .chapter-item-tooltip { .chapter-container .chapter-content-list .chapter-item-up .chapter-expand-inline,
.chapter-container .chapter-content-list .chapter-item .chapter-item-tooltip,
.chapter-container .chapter-content-list .chapter-item-up .chapter-item-tooltip {
vertical-align: text-top; vertical-align: text-top;
display: inline !important; display: inline !important;
} }
.chapter-container .chapter-content-list .chapter-item .chapter-practice, .chapter-container .chapter-content-list .chapter-item .chapter-practice,
.chapter-container .chapter-content-list .chapter-item .chapter-expand { .chapter-container .chapter-content-list .chapter-item-up .chapter-practice,
.chapter-container .chapter-content-list .chapter-item .chapter-expand,
.chapter-container .chapter-content-list .chapter-item-up .chapter-expand {
-webkit-user-select: none; -webkit-user-select: none;
user-select: none; user-select: none;
cursor: pointer; cursor: pointer;
} }
.chapter-container .chapter-content-list .chapter-item .chapter-practice .chapter-practice-title { .chapter-container .chapter-content-list .chapter-item .chapter-practice .chapter-practice-title,
.chapter-container .chapter-content-list .chapter-item-up .chapter-practice .chapter-practice-title {
user-select: none; user-select: none;
-webkit-user-select: none; -webkit-user-select: none;
} }
.chapter-container .chapter-content-list .chapter-item .chapter-practice .chapter-practice-title span svg { .chapter-container .chapter-content-list .chapter-item .chapter-practice .chapter-practice-title span svg,
.chapter-container .chapter-content-list .chapter-item-up .chapter-practice .chapter-practice-title span svg {
vertical-align: text-top; vertical-align: text-top;
} }
.chapter-container .chapter-content-list .chapter-item .chapter-practice .chapter-practice-close { .chapter-container .chapter-content-list .chapter-item .chapter-practice .chapter-practice-close,
.chapter-container .chapter-content-list .chapter-item-up .chapter-practice .chapter-practice-close {
display: none; display: none;
-webkit-user-select: none; -webkit-user-select: none;
user-select: none; user-select: none;
} }
.chapter-container .chapter-content-list .chapter-item .chapter-practice .chapter-item-tooltip { .chapter-container .chapter-content-list .chapter-item .chapter-practice .chapter-item-tooltip,
.chapter-container .chapter-content-list .chapter-item-up .chapter-practice .chapter-item-tooltip {
cursor: pointer; cursor: pointer;
} }
.chapter-container .chapter-content-list .chapter-item .chapter-practice img { .chapter-container .chapter-content-list .chapter-item .chapter-practice img,
.chapter-container .chapter-content-list .chapter-item-up .chapter-practice img {
width: 100%; width: 100%;
height: auto; height: auto;
} }
......
assets/html/read.html
浏览文件 @ bc4b9436
...@@ -55,6 +55,15 @@ function countSubstringOccurrences(str, substring) { ...@@ -55,6 +55,15 @@ function countSubstringOccurrences(str, substring) {
</div> </div>
<div class="chapter-content-list" id="chapter-content-list"> <div class="chapter-content-list" id="chapter-content-list">
<div class="show-up">
<div
class="chapter-item-up"
:class="[`chapter-item-up-${prev_chapter.id}`]"
id="chapter-item-up"
:data-id="prev_chapter.id"
v-html="prev_chapter.contents"
></div>
</div>
<div class="show"> <div class="show">
<div <div
class="chapter-item" class="chapter-item"
...@@ -219,6 +228,7 @@ function countSubstringOccurrences(str, substring) { ...@@ -219,6 +228,7 @@ function countSubstringOccurrences(str, substring) {
docmHeight: document.documentElement.clientHeight || document.body.clientHeight, docmHeight: document.documentElement.clientHeight || document.body.clientHeight,
clientWidth: document.documentElement.clientWidth || document.body.clientWidth, clientWidth: document.documentElement.clientWidth || document.body.clientWidth,
windowHeight: 0, // 视口的高度 windowHeight: 0, // 视口的高度
upContentsHeight: 0,
colorList: [ colorList: [
"feff00", "feff00",
"00ff00", "00ff00",
...@@ -355,14 +365,21 @@ function countSubstringOccurrences(str, substring) { ...@@ -355,14 +365,21 @@ function countSubstringOccurrences(str, substring) {
this.clearRangeContent(); this.clearRangeContent();
this.callHandlerNoticeFlutterSubmit("dismissLoadingCallback"); this.callHandlerNoticeFlutterSubmit("dismissLoadingCallback");
document.querySelectorAll('pre code').forEach((el) => {
hljs.highlightElement(el);
});
// 带内容加载完成 // 带内容加载完成
await this.waitForContentLoad(); await this.waitForContentLoad();
if (scroll) {
$(".chapter-content-list .show").css({
transform: `translateY(-${this.upContentsHeight - this.windowHeight}px)`,
WebkitTranform: `translateY(-${this.upContentsHeight - this.windowHeight}px)`,
})
}
this.searchTextInSide(); this.searchTextInSide();
// 计算设置上一节的高度
document.querySelectorAll('pre code').forEach((el) => { this.upContentsHeight = $(".chapter-item-up").innerHeight();
hljs.highlightElement(el);
});
// 进度设置 // 进度设置
await this.uploadRead(); await this.uploadRead();
await this.line_listFilterShow(); await this.line_listFilterShow();
...@@ -536,9 +553,7 @@ function countSubstringOccurrences(str, substring) { ...@@ -536,9 +553,7 @@ function countSubstringOccurrences(str, substring) {
loadedCount++; loadedCount++;
// 如果所有图片都加载完成，执行其他操作 // 如果所有图片都加载完成，执行其他操作
if (loadedCount === images.length) { if (loadedCount === images.length) {
_that.chapterContentHeight = $( _that.chapterContentHeight = $("#chapter-content-list .show").innerHeight();
"#chapter-content-list .show"
).innerHeight();
observer.disconnect(); observer.disconnect();
resolve(); resolve();
} }
...@@ -548,18 +563,14 @@ function countSubstringOccurrences(str, substring) { ...@@ -548,18 +563,14 @@ function countSubstringOccurrences(str, substring) {
loadedCount++; loadedCount++;
// 处理加载失败的情况 // 处理加载失败的情况
if (loadedCount === images.length) { if (loadedCount === images.length) {
_that.chapterContentHeight = $( _that.chapterContentHeight = $("#chapter-content-list .show").innerHeight();
"#chapter-content-list .show"
).innerHeight();
observer.disconnect(); observer.disconnect();
resolve(); resolve();
} }
}); });
}); });
} else { } else {
_that.chapterContentHeight = $( _that.chapterContentHeight = $("#chapter-content-list .show").innerHeight();
"#chapter-content-list .show"
).innerHeight();
observer.disconnect(); observer.disconnect();
resolve(); resolve();
} }
...@@ -1047,12 +1058,11 @@ function countSubstringOccurrences(str, substring) { ...@@ -1047,12 +1058,11 @@ function countSubstringOccurrences(str, substring) {
if (Object.entries(_that.prev_chapter).length > 0) { if (Object.entries(_that.prev_chapter).length > 0) {
$(".prev-chapter").css({ opacity: 0 }); $(".prev-chapter").css({ opacity: 0 });
_that.chapter_id = _that.prev_chapter.id; _that.chapter_id = _that.prev_chapter.id;
console.log(_that.prev_chapter.name);
_that.callHandlerNoticeFlutterSubmit( _that.callHandlerNoticeFlutterSubmit(
"loadChapterCallBack", "loadChapterCallBack",
[_that.chapter_id, _that.prev_chapter.name] [_that.chapter_id, _that.prev_chapter.name]
); );
await _that.getBookChapterData(); await _that.getBookChapterData(null, true);
} else { } else {
$(".prev-chapter").css({ opacity: 0 }); $(".prev-chapter").css({ opacity: 0 });
$("#chapter-content-list .show").css({ $("#chapter-content-list .show").css({
...@@ -2210,7 +2220,7 @@ function countSubstringOccurrences(str, substring) { ...@@ -2210,7 +2220,7 @@ function countSubstringOccurrences(str, substring) {
const refreshTokenSuccess = (arguments) => { const refreshTokenSuccess = (arguments) => {
return app.refreshTokenSuccess(arguments); return app.refreshTokenSuccess(arguments);
}; };
// callbackInFlutterComponent(',368,2901,bc398dd1d424aea905b05fc7de6af8f5b'); // callbackInFlutterComponent(',358,2821,d4c36b804c0418b134c2eef6d1689943');
</script> </script>
</body> </body>
</html> </html>
assets/html/read_unline.html
浏览文件 @ bc4b9436
...@@ -55,6 +55,15 @@ function countSubstringOccurrences(str, substring) { ...@@ -55,6 +55,15 @@ function countSubstringOccurrences(str, substring) {
</div> </div>
<div class="chapter-content-list" id="chapter-content-list"> <div class="chapter-content-list" id="chapter-content-list">
<div class="show-up">
<div
class="chapter-item-up"
:class="[`chapter-item-up-${prev_chapter.id}`]"
id="chapter-item-up"
:data-id="prev_chapter.id"
v-html="prev_chapter.contents"
></div>
</div>
<div class="show"> <div class="show">
<div <div
class="chapter-item" class="chapter-item"
...@@ -201,6 +210,7 @@ function countSubstringOccurrences(str, substring) { ...@@ -201,6 +210,7 @@ function countSubstringOccurrences(str, substring) {
docmHeight: document.documentElement.clientHeight || document.body.clientHeight, docmHeight: document.documentElement.clientHeight || document.body.clientHeight,
clientWidth: document.documentElement.clientWidth || document.body.clientWidth, clientWidth: document.documentElement.clientWidth || document.body.clientWidth,
windowHeight: 0, // 视口的高度 windowHeight: 0, // 视口的高度
upContentsHeight: 0,
colorList: [ colorList: [
"feff00", "feff00",
"00ff00", "00ff00",
...@@ -303,55 +313,62 @@ function countSubstringOccurrences(str, substring) { ...@@ -303,55 +313,62 @@ function countSubstringOccurrences(str, substring) {
methods: { methods: {
async getBookChapterData(args, scroll) { async getBookChapterData(args, scroll) {
if (this.nextChapterLoading) return; if (this.nextChapterLoading) return;
// loading
this.callHandlerNoticeFlutterSubmit("showLoadingCallback");
this.book_id = args.book_id; this.initArags();
this.chapter_id = args.chapter_id; this.clearRangeContent();
this.chapterContent = ""; if (Object.entries(args).length > 0) {
if (args && args.direction === 'scrollUp') {
$(".chapter-content-list .show").css({
transform: `translateY(-${this.upContentsHeight - this.windowHeight}px)`,
WebkitTranform: `translateY(-${this.upContentsHeight - this.windowHeight}px)`,
})
} else {
this.nextChapterLoading = true;
$("#chapter-content-list .show").css({ $("#chapter-content-list .show").css({
transform: `translateY(0px)`, transform: `translateY(0px)`,
WebkitTranform: `translateY(0px)`, WebkitTranform: `translateY(0px)`,
}); });
this.nextChapterLoading = true; }
this.book_id = args.book_id;
this.initArags(); this.chapter_id = args.chapter_id;
this.clearRangeContent();
// loading
this.callHandlerNoticeFlutterSubmit("showLoadingCallback");
this.next_chapter = args.next_chapter; // 下一节的内容 this.next_chapter = args.next_chapter; // 下一节的内容
this.prev_chapter = args.up_chapter; // 上一节的内容 this.prev_chapter = args.up_chapter; // 上一节的内容
this.color_line = args.color_line; // 高亮 this.color_line = args.color_line; // 高亮
this.line_list = args.line_list; // 划线 this.line_list = args.line_list; // 划线
this.chapterContent = args.content;
this.color_line.forEach((item) => { this.color_line.forEach((item) => {
item.color_id = item.id; item.color_id = item.id;
}) })
this.line_list.forEach((item) => { this.line_list.forEach((item) => {
item.line_id = item.id; item.line_id = item.id;
}) })
if (args.content) {
this.chapterContent = args.content;
this.initArags();
this.clearRangeContent();
this.callHandlerNoticeFlutterSubmit("dismissLoadingCallback"); this.callHandlerNoticeFlutterSubmit("dismissLoadingCallback");
// 带内容加载完成
await this.waitForContentLoad();
document.querySelectorAll('pre code').forEach((el) => { document.querySelectorAll('pre code').forEach((el) => {
hljs.highlightElement(el); hljs.highlightElement(el);
}); });
// 进度设置 // 带内容加载完成
await this.waitForContentLoad();
setTimeout(() => {
// 计算设置上一节的高度
this.chapterContentHeight = $("#chapter-content-list .show").innerHeight();
this.upContentsHeight = $(".chapter-item-up").innerHeight();
}, 1000)
await this.line_listFilterShow(); await this.line_listFilterShow();
this.nextChapterLoading = false;
await this.toNoteIdSide(); await this.toNoteIdSide();
// 各类事件 // 各类事件
this.listenHandlerEvents(); this.listenHandlerEvents();
} else { } else {
this.nextChapterLoading = false; $("#chapter-content-list .show").css({
transform: `translateY(0px)`,
WebkitTranform: `translateY(0px)`,
});
} }
this.nextChapterLoading = false;
this.callHandlerNoticeFlutterSubmit("dismissLoadingCallback"); this.callHandlerNoticeFlutterSubmit("dismissLoadingCallback");
}, },
...@@ -413,9 +430,7 @@ function countSubstringOccurrences(str, substring) { ...@@ -413,9 +430,7 @@ function countSubstringOccurrences(str, substring) {
loadedCount++; loadedCount++;
// 如果所有图片都加载完成，执行其他操作 // 如果所有图片都加载完成，执行其他操作
if (loadedCount === images.length) { if (loadedCount === images.length) {
_that.chapterContentHeight = $( _that.chapterContentHeight = $("#chapter-content-list .show").innerHeight();
"#chapter-content-list .show"
).innerHeight();
observer.disconnect(); observer.disconnect();
resolve(); resolve();
} }
...@@ -425,18 +440,14 @@ function countSubstringOccurrences(str, substring) { ...@@ -425,18 +440,14 @@ function countSubstringOccurrences(str, substring) {
loadedCount++; loadedCount++;
// 处理加载失败的情况 // 处理加载失败的情况
if (loadedCount === images.length) { if (loadedCount === images.length) {
_that.chapterContentHeight = $( _that.chapterContentHeight = $("#chapter-content-list .show").innerHeight();
"#chapter-content-list .show"
).innerHeight();
observer.disconnect(); observer.disconnect();
resolve(); resolve();
} }
}); });
}); });
} else { } else {
_that.chapterContentHeight = $( _that.chapterContentHeight = $("#chapter-content-list .show").innerHeight();
"#chapter-content-list .show"
).innerHeight();
observer.disconnect(); observer.disconnect();
resolve(); resolve();
} }
...@@ -448,7 +459,6 @@ function countSubstringOccurrences(str, substring) { ...@@ -448,7 +459,6 @@ function countSubstringOccurrences(str, substring) {
// 监听touch事件 // 监听touch事件
async listenHandlerEvents() { async listenHandlerEvents() {
const eleContent = document.querySelector("#chapter-content-list"); const eleContent = document.querySelector("#chapter-content-list");
const chapterContent = document.querySelector("#chapter-content-list"); const chapterContent = document.querySelector("#chapter-content-list");
document.addEventListener("touchstart", this.touchStartEvent); document.addEventListener("touchstart", this.touchStartEvent);
document.addEventListener("touchmove", this.touchMoveEvent); document.addEventListener("touchmove", this.touchMoveEvent);
...@@ -575,6 +585,12 @@ function countSubstringOccurrences(str, substring) { ...@@ -575,6 +585,12 @@ function countSubstringOccurrences(str, substring) {
_that.touchIn = false; _that.touchIn = false;
if ($(target).closest(".tange-tooptip").length > 0 ) { if ($(target).closest(".tange-tooptip").length > 0 ) {
const href = $(target).closest(".c-link").attr("href");
_that.callHandlerNoticeFlutterSubmit(
"openLinkCallback",
href
);
_that.tooltipId = null;
event.preventDefault(); event.preventDefault();
return false; return false;
} }
...@@ -910,9 +926,10 @@ function countSubstringOccurrences(str, substring) { ...@@ -910,9 +926,10 @@ function countSubstringOccurrences(str, substring) {
if (Object.entries(_that.prev_chapter).length > 0) { if (Object.entries(_that.prev_chapter).length > 0) {
$(".prev-chapter").css({ opacity: 0 }); $(".prev-chapter").css({ opacity: 0 });
_that.chapter_id = _that.prev_chapter.id; _that.chapter_id = _that.prev_chapter.id;
_that.chapterContent = _that.prev_chapter.contents;
_that.callHandlerNoticeFlutterSubmit( _that.callHandlerNoticeFlutterSubmit(
"loadChapterCallBack", "loadChapterCallBack",
[_that.chapter_id, _that.prev_chapter.name] [_that.chapter_id, _that.prev_chapter.name, 'scrollUp']
); );
} else { } else {
$(".prev-chapter").css({ opacity: 0 }); $(".prev-chapter").css({ opacity: 0 });
......
lib/pages/read_web/controller.dart
浏览文件 @ bc4b9436
...@@ -648,7 +648,7 @@ class ReadController extends FullLifeCycleController with GetSingleTickerProvide ...@@ -648,7 +648,7 @@ class ReadController extends FullLifeCycleController with GetSingleTickerProvide
} }
// 获取离线数据 // 获取离线数据
void getOffLineInfo() async { void getOffLineInfo({String direction = ''}) async {
Console.log('-chapterId----------------------$chapterId-----------------------------------------'); Console.log('-chapterId----------------------$chapterId-----------------------------------------');
Map<String, dynamic> data = {}; Map<String, dynamic> data = {};
data['chapter_name'] = chapterName; data['chapter_name'] = chapterName;
...@@ -670,7 +670,12 @@ class ReadController extends FullLifeCycleController with GetSingleTickerProvide ...@@ -670,7 +670,12 @@ class ReadController extends FullLifeCycleController with GetSingleTickerProvide
String upName = getChapterName(upId); String upName = getChapterName(upId);
upChapter['name'] = upName; upChapter['name'] = upName;
upChapter['id'] = int.parse(upId); upChapter['id'] = int.parse(upId);
String htmlPath = await getLocalReadHtml(upId);
final enCodeContent = await readHtmlFileContent(htmlPath);
String deCodeContent = EncryptUtil.aesDecrypt(enCodeContent!);
upChapter['contents'] = deCodeContent;
data['up_chapter'] = upChapter; data['up_chapter'] = upChapter;
} }
// 5、获取下一章节信息 // 5、获取下一章节信息
Map<String, dynamic> nextChapter = {}; Map<String, dynamic> nextChapter = {};
...@@ -690,6 +695,9 @@ class ReadController extends FullLifeCycleController with GetSingleTickerProvide ...@@ -690,6 +695,9 @@ class ReadController extends FullLifeCycleController with GetSingleTickerProvide
data['line_list'] = temp['line_list']; data['line_list'] = temp['line_list'];
data['color_line'] = temp['color_line']; data['color_line'] = temp['color_line'];
//
data['direction'] = direction;
// 7、 给前端参数 // 7、 给前端参数
String jsonStr = jsonEncode(data); String jsonStr = jsonEncode(data);
Console.log('callbackInFlutterComponent--------------------------------$jsonStr'); Console.log('callbackInFlutterComponent--------------------------------$jsonStr');
......
lib/pages/read_web/view.dart
浏览文件 @ bc4b9436
...@@ -186,15 +186,19 @@ class _ReadPageState extends State<ReadPage> { ...@@ -186,15 +186,19 @@ class _ReadPageState extends State<ReadPage> {
// 监听 上一节 下一节 // 监听 上一节 下一节
controller.addJavaScriptHandler(handlerName: 'loadChapterCallBack', callback: (args){ controller.addJavaScriptHandler(handlerName: 'loadChapterCallBack', callback: (args){
Console.log('监听 上一节 下一节------------------------------------------------$args');
String chapterId = args.first[0].toString(); String chapterId = args.first[0].toString();
String chapterName = args.first[1].toString(); String chapterName = args.first[1].toString();
ChapterModel chapterModel = ChapterModel(id: int.parse(chapterId), name: chapterName); ChapterModel chapterModel = ChapterModel(id: int.parse(chapterId), name: chapterName);
// readController.setChapterInfo(id: chapterId, name: chapterName ?? ''); // readController.setChapterInfo(id: chapterId, name: chapterName ?? '');
readController.selectChapter(chapterModel); readController.selectChapter(chapterModel);
if(readController.existDownFile && !readController.netStatus){ if(readController.existDownFile && !readController.netStatus){
readController.getOffLineInfo(); String direction = '';
if(args.first.length == 3){
direction = args.first[2].toString();
}
readController.getOffLineInfo(direction: direction);
} }
Console.log('监听 上一节 下一节------------------------------------------------$args');
}); });
// // 监听 双击回调 // // 监听 双击回调
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论