Skip to content

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

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

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