<template>
|
<div class="page-main" @scroll="throttledScrollHandler">
|
<div id="searchDomBox" style="display: none">
|
<div id="searchContent"></div>
|
</div>
|
<div class="page-content" :style="{
|
fontSize: fontSize + 'px',
|
transform: `scale(${pageZoom})`,
|
transformOrigin: 'center top',
|
}">
|
<pageHeader v-if="showCatalogList.indexOf(1) > -1" :showPageList="loadPageList"></pageHeader>
|
<chapterOne v-if="showCatalogList.indexOf(2) > -1" :showPageList="loadPageList"
|
:interfaceQuestion="questionDataMap"></chapterOne>
|
<!-- <chapterTwo
|
v-if="showCatalogList.indexOf(2) > -1"
|
:showPageList="loadPageList"
|
></chapterTwo> -->
|
<!-- <chapterThree
|
v-if="showCatalogList.indexOf(4) > -1"
|
:showPageList="loadPageList"
|
></chapterThree>
|
<chapterFour
|
v-if="showCatalogList.indexOf(5) > -1"
|
:showPageList="loadPageList"
|
></chapterFour>
|
<chapterFive
|
v-if="showCatalogList.indexOf(2) > -1"
|
:showPageList="loadPageList"
|
:interfaceQuestion="questionDataMap"
|
></chapterFive> -->
|
</div>
|
<translateWord :pageX="pageX" :pageY="pageY" :showWord="showWord" :IPA="IPA" :prototype="prototype"
|
:translate="translate" v-if="showWord" />
|
</div>
|
</template>
|
|
<script>
|
import Vue from "vue";
|
import translateWord from "@/components/translateWord/index.vue";
|
import pageHeader from "./header.vue";
|
import chapterOne from "./chapter001.vue";
|
// import chapterTwo from "./chapter002.vue";
|
// import chapterThree from "./chapter003.vue";
|
// import chapterFour from "./chapter004.vue";
|
// import chapterFive from "./chapter005.vue";
|
import NoteIcon from "@/assets/images/biji.png";
|
// import getQuestionList from "@/assets/methods/examination";
|
// import testData from "../../assets/examinationList";
|
// import keyWordData from "../../assets/englishKeyWords";
|
|
import _ from "lodash";
|
import Swiper from "swiper/bundle";
|
import "swiper/swiper-bundle.css";
|
import Viewer from "viewerjs";
|
import "viewerjs/dist/viewer.css";
|
export default {
|
name: "pageContent",
|
data() {
|
return {
|
catalogLength: 2, // 总章节数
|
showCatalogList: [], // 显示的章节
|
loadThreshold: 300, // 触发加载阈值
|
throttleThreshold: 100, // 节流阈值
|
previousScrollTop: 0,
|
throttledScrollHandler: null,
|
observer: null,
|
loadPageObserver: null,
|
loadPageList: [],
|
questionDataMap: {},
|
renderSignMap: {},
|
highlightData: null,
|
audioPath: "",
|
currentTime: null,
|
videoList: [],
|
pageX: 0,
|
pageY: 0,
|
showWord: "",
|
prototype: "",
|
IPA: "",
|
translate: "",
|
keyWordData: [
|
{
|
name: "cashier's station",
|
prototype: "cashier's station",
|
IPA: null,
|
page: null,
|
translate: "收银台",
|
},
|
{
|
name: "concerned",
|
prototype: "concern",
|
IPA: "[kənˈsɜːn]",
|
page: null,
|
translate: "v. 影响，牵涉，与……有关",
|
},
|
{
|
name: "present",
|
prototype: "present",
|
IPA: "[prɪzent]",
|
page: null,
|
translate: "v. 把……交给，提交，呈现",
|
},
|
{
|
name: "drawing up",
|
prototype: "draw up",
|
IPA: null,
|
page: null,
|
translate: "草拟，制定",
|
},
|
{
|
name: "entitled",
|
prototype: "entitle",
|
IPA: "[ɪnˈtaɪtl]",
|
page: null,
|
translate: "v. 使享有权利，使符合资格",
|
},
|
{
|
name: "calculate",
|
prototype: "calculate",
|
IPA: "[ˈkælkjʊleɪt]",
|
page: null,
|
translate: "v. 计算，核算",
|
},
|
{
|
name: "debit card",
|
prototype: "debit card",
|
IPA: null,
|
page: null,
|
translate: "借记卡",
|
},
|
{
|
name: "gift certifi cate",
|
prototype: "gift certifi cate",
|
IPA: null,
|
page: null,
|
translate: "礼品券，赠券",
|
},
|
{
|
name: "American Express (AE/AX)",
|
prototype: "American Express (AE/AX)",
|
IPA: null,
|
page: null,
|
translate: "美国运通卡",
|
},
|
{
|
name: "MasterCard (MC)",
|
prototype: "MasterCard (MC)",
|
IPA: null,
|
page: null,
|
translate: "万事达信用卡",
|
},
|
{
|
name: "Visa (VS)",
|
prototype: "Visa (VS)",
|
IPA: null,
|
page: null,
|
translate: "维萨卡",
|
},
|
{
|
name: "enRoute (ER)",
|
prototype: "enRoute (ER)",
|
IPA: null,
|
page: null,
|
translate: "在途卡",
|
},
|
{
|
name: "Eurocard (EC)",
|
prototype: "Eurocard (EC)",
|
IPA: null,
|
page: null,
|
translate: "欧洲卡",
|
},
|
{
|
name: "International Great Wall",
|
prototype: "International Great Wall",
|
IPA: null,
|
page: null,
|
translate: "长城卡",
|
},
|
{
|
name: "International Diner's Club",
|
prototype: "International Diner's Club",
|
IPA: null,
|
page: null,
|
translate: "大来卡",
|
},
|
{
|
name: "Federal Card",
|
prototype: "Federal Card",
|
IPA: null,
|
page: null,
|
translate: "联邦卡 / 发达卡",
|
},
|
{
|
name: "authorized",
|
prototype: "authorize",
|
IPA: null,
|
page: null,
|
translate: "v. 批准，授权",
|
},
|
{
|
name: "credit limit",
|
prototype: "credit limit",
|
IPA: null,
|
page: null,
|
translate: "信用限额",
|
},
|
{
|
name: "currency",
|
prototype: "currency",
|
IPA: "[ˈkʌrənsɪ]",
|
page: null,
|
translate: "n. 货币",
|
},
|
{
|
name: "honor",
|
prototype: "honor",
|
IPA: "[ˈɒnə]",
|
page: null,
|
translate: "v. 尊重，接受",
|
},
|
{
|
name: "receipt",
|
prototype: "receipt",
|
IPA: "[rɪˈsiːt]",
|
page: null,
|
translate: "n. 收据",
|
},
|
{
|
name: "personal checks",
|
prototype: "personal check",
|
IPA: null,
|
page: null,
|
translate: "个人支票",
|
},
|
{
|
name: "change",
|
prototype: "change",
|
IPA: "[tʃeɪndʒ]",
|
page: null,
|
translate: "n. 找给的零钱；找头",
|
},
|
{
|
name: "invoice",
|
prototype: "invoice",
|
IPA: "[ˈɪnvɔɪs]",
|
page: null,
|
translate: "n. 发票",
|
},
|
{
|
name: "exchange",
|
prototype: "exchange",
|
IPA: "[ɪksˈtʃeɪndʒ]",
|
page: null,
|
translate: "n./v. 交换，兑换",
|
},
|
{
|
name: "purchases",
|
prototype: "purchase",
|
IPA: "[ˈpɜːtʃəs]",
|
page: null,
|
translate: "n./v. 购买，采购",
|
},
|
{
|
name: "Canadian dollar",
|
prototype: "Canadian dollars",
|
IPA: null,
|
page: null,
|
translate: "加币，加拿大元",
|
},
|
{
|
name: "accessible",
|
prototype: "accessible",
|
IPA: "[əkˈsesəbl]",
|
page: null,
|
translate: "adj. 可到达的，可得到的",
|
},
|
{
|
name: "give a better bang for your buck",
|
prototype: "give a better bang for your buck",
|
IPA: null,
|
page: null,
|
translate: "让钱花得更划算",
|
},
|
{
|
name: "reputable",
|
prototype: "reputable",
|
IPA: "[ˈrepjʊtəbl]",
|
page: null,
|
translate: "adj. 信誉好的，名声好的",
|
},
|
{
|
name: "securely",
|
prototype: "securely",
|
IPA: "[sɪˈkjʊəlɪ]",
|
page: null,
|
translate: "adv. 安全地",
|
},
|
{
|
name: "branches",
|
prototype: "branch",
|
IPA: "[brɑːntʃ]",
|
page: null,
|
translate: "n. 分支机构，分行",
|
},
|
{
|
name: "converting",
|
prototype: "convert",
|
IPA: "[kənˈvɜːt]",
|
page: null,
|
translate: "v. 转换",
|
},
|
{
|
name: "currency exchange booths",
|
prototype: "currency exchange booth",
|
IPA: null,
|
page: null,
|
translate: "货币兑换亭",
|
},
|
{
|
name: "exchange rate",
|
prototype: "exchange rate",
|
IPA: null,
|
page: null,
|
translate: "汇率",
|
},
|
{
|
name: "small notes",
|
prototype: "small note",
|
IPA: null,
|
page: null,
|
translate: "小额纸币",
|
},
|
{
|
name: "memo",
|
prototype: "memo",
|
IPA: "[ˈmeməʊ]",
|
page: null,
|
translate: "n. 备忘录（此处指“兑换水单”）",
|
},
|
{
|
name: "produce",
|
prototype: "produce",
|
IPA: "[prəˈdjus]",
|
page: null,
|
translate: "v. 生产；生长；给出（证据）；出示",
|
},
|
{
|
name: "invoice",
|
prototype: "invoice",
|
IPA: "[ˈɪnvɔɪs]",
|
page: null,
|
translate: "n. 发票 , 费用清单",
|
},
|
{
|
name: "opt",
|
prototype: "opt",
|
IPA: "[ɒpt]",
|
page: null,
|
translate: "v. 选择",
|
},
|
{
|
name: "in-person service",
|
prototype: "in-person service",
|
IPA: null,
|
page: null,
|
translate: "面对面服务",
|
},
|
{
|
name: "post",
|
prototype: "post",
|
IPA: "[pəʊst]",
|
page: null,
|
translate: "v. 发布信息",
|
},
|
{
|
name: "business seal",
|
prototype: null,
|
IPA: null,
|
page: null,
|
translate: "业务公章",
|
},
|
{
|
name: "cashier",
|
prototype: null,
|
IPA: null,
|
page: null,
|
translate: "收银员",
|
},
|
{
|
name: "check out",
|
prototype: null,
|
IPA: null,
|
page: null,
|
translate: "结账离店",
|
},
|
{
|
name: "currency",
|
prototype: null,
|
IPA: null,
|
page: null,
|
translate: "货币",
|
},
|
{
|
name: "draw up a bill",
|
prototype: null,
|
IPA: null,
|
page: null,
|
translate: "草拟账单",
|
},
|
{
|
name: "equivalent",
|
prototype: null,
|
IPA: null,
|
page: null,
|
translate: "等同的",
|
},
|
{
|
name: "exchange memo",
|
prototype: null,
|
IPA: null,
|
page: null,
|
translate: "兑换水单",
|
},
|
{
|
name: "master account",
|
prototype: null,
|
IPA: null,
|
page: null,
|
translate: "主账户",
|
},
|
{
|
name: "net amount",
|
prototype: null,
|
IPA: null,
|
page: null,
|
translate: "净额",
|
},
|
{
|
name: "valid date",
|
prototype: null,
|
IPA: null,
|
page: null,
|
translate: "有效期",
|
},
|
{
|
name: "in-person service",
|
prototype: null,
|
IPA: null,
|
page: null,
|
translate: "当面服务",
|
},
|
],
|
};
|
},
|
computed: {
|
fontSize() {
|
this.transformDom(this.$store.state.qiankun.fontSize);
|
return this.$store.state.qiankun.fontSize
|
? this.$store.state.qiankun.fontSize
|
: 16;
|
},
|
pageZoom() {
|
return this.$store.state.qiankun.scale
|
? this.$store.state.qiankun.scale / 100
|
: 1;
|
},
|
},
|
watch: {
|
showCatalogList: {
|
handler(newVal, oldVal) {
|
if (
|
this.$store.state.qiankun &&
|
this.$store.state.qiankun.catalogChange
|
) {
|
// 调用父层方法
|
this.$store.state.qiankun.catalogChange({
|
showCatalogList: newVal,
|
});
|
}
|
// 启动页码观察
|
setTimeout(() => {
|
this.initObservation();
|
this.initThemeColor();
|
}, 500);
|
},
|
},
|
loadPageList: {
|
handler(newVal, oldVal) {
|
setTimeout(() => {
|
this.transformDom(this.$store.state.qiankun.fontSize);
|
this.initSwiper();
|
this.initViewer();
|
this.closeAudio();
|
this.closeVideo();
|
this.handleTanslateWord();
|
}, 5000);
|
},
|
},
|
pageZoom: {
|
handler(newVal, oldVal) {
|
const scrollBox = (
|
this.container ? this.container : document
|
).querySelector(".page-main");
|
scrollBox.scrollTop = (scrollBox.scrollTop / oldVal) * newVal;
|
},
|
},
|
},
|
mounted() {
|
// 默认加载章节
|
this.showCatalogList = [1];
|
// 滚动监听节流
|
this.throttledScrollHandler = _.throttle(
|
this.scrollFun,
|
this.throttleThreshold,
|
{ leading: true, trailing: false }
|
);
|
|
// 定义子层方法
|
if (this.setGlobalState) {
|
// 提供页面跳转功能
|
this.setGlobalState({
|
gotoPage: (catalog, page) => {
|
this.gotoPage(catalog, page);
|
},
|
// 渲染笔记、高亮、划线
|
renderSign: (type, data) => {
|
// 因为调整为页面懒加载，所以渲染标记也需要按照页面进行处理，先储存数据，页面加载完成再渲染对应的标记；
|
this.handelSignData(type, data);
|
// this.renderSign(type, data);
|
},
|
// 删除笔记、高亮、划线
|
delSign: (data) => {
|
this.delSign(data);
|
},
|
// 全文检索
|
searchBookByKeyword: (keyword) => {
|
return this.searchTextByPage(keyword);
|
},
|
// 跳转检索结果位置
|
jumpSearchItem: (data) => {
|
this.searchItemLocation(data);
|
},
|
});
|
}
|
|
// 创建一个新的 Intersection Observer 实例，用于观察目标元素和执行相应的回调函数。
|
// new IntersectionObserver(callback, options)：使用之前定义的 callback 回调函数和 options 配置选项来初始化 Intersection Observer 实例。
|
this.observer = new IntersectionObserver(this.pageChangeCallback, {
|
root: null, // 指定根元素，这里设为 null，表示选取整个视窗作为根元素。
|
rootMargin: "0px", // 指定根元素的边界，这里设为 "0px"，表示根元素的边界和视窗的边界重合
|
threshold: 0.5, // 指定交叉比例，这里设为 0.5，表示当目标元素一半或更多显示在视窗中时触发回调函数。
|
});
|
|
this.loadPageObserver = new IntersectionObserver(this.loadPageCallback, {
|
root: null, // 指定根元素，这里设为 null，表示选取整个视窗作为根元素。
|
rootMargin: "0px", // 指定根元素的边界，这里设为 "0px"，表示根元素的边界和视窗的边界重合
|
threshold: 0, // 指定交叉比例，这里设为 0.5，表示当目标元素一半或更多显示在视窗中时触发回调函数。
|
});
|
|
// 启动页码观察
|
setTimeout(() => {
|
this.initObservation();
|
this.initThemeColor();
|
}, 500);
|
|
// 测试页面跳转
|
// setTimeout(() => {
|
// this.gotoPage(2, 18);
|
// }, 500);
|
|
// const pageDom = (this.container ? this.container : document)
|
// .querySelector("#app")
|
// .querySelectorAll(".page-box");
|
// 检索
|
// console.log(this.searchTextByPage("保护内脏器官"), "searchTextByPage");
|
// 检索跳转
|
// this.searchItemLocation({
|
// catalog: 2,
|
// page: 10,
|
// txt: " 运动系统是由骨、骨连结和骨骼肌三部分组成的。全身的骨通过骨连结组成人体骨骼（见图1-1）。骨骼是人体的支架，具有保护内脏器官、供肌肉附着和作为肌肉运动的杠杆等作用。在神经系统的支配下，肌肉收缩牵动所附着的骨绕着关节转动，使身体产生各种动作。所以，运动系统具有运动、支持和保护等功能，幼年时期的骨骼还具有造血功能。 ",
|
// txtIndex: 57
|
// });
|
// }, 500);
|
},
|
methods: {
|
// setZoom1() {
|
// let scale = this.$store.state.qiankun.scale + 10;
|
// const scrollBox = (
|
// this.container ? this.container : document
|
// ).querySelector(".page-main");
|
// this.$store.commit("setZoom", scale);
|
// },
|
// setZoom2() {
|
// let scale = this.$store.state.qiankun.scale - 10;
|
// const scrollBox = (
|
// this.container ? this.container : document
|
// ).querySelector(".page-main");
|
// this.$store.commit("setZoom", scale);
|
// },
|
// 滚动监听
|
scrollFun(event) {
|
this.handleVideoPicture();
|
// 判断向上滚动还是向下滚动
|
if (event.target.scrollTop > this.previousScrollTop) {
|
this.getAduio();
|
// 向下
|
const currentScrollTop =
|
event.target.scrollTop + event.target.offsetHeight;
|
if (
|
currentScrollTop >=
|
event.target.scrollHeight - this.loadThreshold
|
) {
|
console.log(1);
|
|
// 到达阈值
|
if (
|
this.showCatalogList[this.showCatalogList.length - 1] <
|
this.catalogLength
|
) {
|
// 加载下一章
|
this.showCatalogList.push(
|
this.showCatalogList[this.showCatalogList.length - 1] + 1
|
);
|
if (this.showCatalogList.length > 3) {
|
// 超过三章隐藏顶部一章
|
this.showCatalogList.shift();
|
}
|
}
|
}
|
} else if (event.target.scrollTop < this.previousScrollTop) {
|
this.handleAudio();
|
// 向上
|
const currentScrollTop = event.target.scrollTop;
|
if (currentScrollTop <= this.loadThreshold) {
|
// 到达阈值
|
if (this.showCatalogList[0] > 0) {
|
// 加载上一章
|
this.showCatalogList.unshift(this.showCatalogList[0] - 1);
|
if (this.showCatalogList.length > 3) {
|
// 超过三章隐藏底部一章
|
this.showCatalogList.pop();
|
}
|
}
|
}
|
}
|
// showCatalogList 当前显示的三个章节，watch监听传递给主应用
|
// 更新上一次滚动的位置
|
this.previousScrollTop = event.target.scrollTop;
|
},
|
// 章节、页面跳转
|
gotoPage(catalog, page) {
|
if (catalog >= 0 && catalog <= this.catalogLength) {
|
// 处理渲染章节
|
if (catalog == 0) {
|
this.showCatalogList = [0, 1];
|
} else if (catalog == this.catalogLength) {
|
this.showCatalogList = [
|
this.catalogLength - 2,
|
this.catalogLength - 1,
|
this.catalogLength,
|
];
|
} else {
|
this.showCatalogList = [catalog - 1, catalog, catalog + 1];
|
}
|
setTimeout(() => {
|
// 跳转页码
|
const pageDom = (
|
this.container ? this.container : document
|
).querySelector(`[page="${page}"]`);
|
if (pageDom) {
|
pageDom.scrollIntoView();
|
} else {
|
console.log("页码错误！");
|
}
|
}, 500);
|
} else {
|
console.log("章节错误！");
|
}
|
},
|
|
// 处理标记数据
|
handelSignData(type, data) {
|
if (this.loadPageList.indexOf(Number(data.page)) > -1) {
|
// 立即渲染
|
this.renderSign(type, data);
|
}
|
|
// 储存数据
|
if (!this.renderSignMap[type]) this.renderSignMap[type] = {};
|
if (!this.renderSignMap[type][data.page])
|
this.renderSignMap[type][data.page] = [];
|
this.renderSignMap[type][data.page].push(data);
|
},
|
|
// 渲染标记
|
renderSign(type, data) {
|
// 父层设置禁止渲染标记时不再进行渲染
|
if (this.$store.state.qiankun.disableSign) {
|
return false;
|
}
|
const existence = (
|
this.container ? this.container : document
|
).querySelector(`[dataid="${data.id}"]`);
|
// 去重
|
if (!existence) {
|
const pageDom = (
|
this.container ? this.container : document
|
).querySelector(`[page="${data.page}"]`);
|
// 创建 createTreeWalker 迭代器，用于遍历文本节点，保存到一个数组
|
const treeWalker = document.createTreeWalker(
|
pageDom,
|
NodeFilter.SHOW_TEXT
|
);
|
const allTextNodes = [];
|
let currentNode = treeWalker.nextNode();
|
while (currentNode) {
|
allTextNodes.push(currentNode);
|
currentNode = treeWalker.nextNode();
|
}
|
for (let i = 0; i < allTextNodes.length; i++) {
|
const textDom = allTextNodes[i];
|
if (textDom.textContent.indexOf(data.txt) > -1) {
|
let reg = new RegExp(`${data.txt}`, "ig");
|
switch (type) {
|
case "Highlight":
|
// 高亮
|
textDom.parentNode.innerHTML =
|
textDom.parentNode.innerHTML.replace(
|
reg,
|
`<span datatype="Highlight" dataid="${data.id}" style="background: ${data.color};" class="highLight" onclick="signClick('Highlight','${data.id}','${data.chapterNum}')">${data.txt}</span>`
|
);
|
break;
|
case "Dashing":
|
// 划线
|
textDom.parentNode.innerHTML =
|
textDom.parentNode.innerHTML.replace(
|
reg,
|
`<span datatype="Dashing" dataid="${data.id}" style="text-decoration-color:${data.color};" class="underline" onclick="signClick('Dashing','${data.id}','${data.chapterNum}')">${data.txt}</span>`
|
);
|
break;
|
case "Note":
|
// 笔记
|
textDom.parentNode.innerHTML =
|
textDom.parentNode.innerHTML.replace(
|
reg,
|
`<span datatype="Note" dataid="${data.id}" style="border-bottom-color:${data.color}" class="notesline" onclick="signClick('Note','${data.id}','${data.chapterNum}')" onmouseover="noteHover('Note','${data.id}','${data.chapterNum}')" onmouseout="noteOut('Note')">${data.txt}<img src="${NoteIcon}"/></span>`
|
);
|
break;
|
}
|
}
|
}
|
}
|
},
|
// 删除标记渲染
|
delSign({ ids, type }) {
|
if (ids && ids.length) {
|
for (let i = 0; i < ids.length; i++) {
|
const id = ids[i];
|
const dom = (
|
this.container ? this.container : document
|
).querySelector(`[dataid="${id}"]`);
|
dom.parentNode.innerHTML = dom.parentNode.innerHTML.replace(
|
dom.outerHTML,
|
dom.outerText
|
);
|
}
|
}
|
if (type) {
|
const doms = (
|
this.container ? this.container : document
|
).querySelectorAll(`[datatype="${type}"]`);
|
for (let i = 0; i < doms.length; i++) {
|
const dom = doms[i];
|
dom.parentNode.innerHTML = dom.parentNode.innerHTML.replace(
|
dom.outerHTML,
|
dom.outerText
|
);
|
}
|
}
|
},
|
initObservation() {
|
const sections = (
|
this.container ? this.container : document
|
).querySelectorAll(".page-box");
|
sections.forEach((section) => {
|
if (this.config.activeBook && this.config.activeBook.tryPageCount) {
|
const page = section.getAttribute("page");
|
if (Number(page) > this.config.activeBook.tryPageCount) {
|
let chapterDom = this.getParentWithClass(section, "chapter");
|
const chapterNum = chapterDom.getAttribute("num");
|
this.catalogLength = Number(chapterNum) - 1;
|
section.remove();
|
return false;
|
}
|
}
|
// observer 观察每个元素，以便在它们进入或离开视窗时触发回调函数。
|
const isObserver = section.getAttribute("observer");
|
const isLoadObserver = section.getAttribute("loadObserver");
|
if (!isObserver) {
|
this.observer.observe(section);
|
section.setAttribute("observer", "1");
|
}
|
if (!isLoadObserver) {
|
this.loadPageObserver.observe(section);
|
section.setAttribute("loadObserver", "1");
|
}
|
});
|
},
|
initThemeColor() {
|
// 获取各种需要主题色的节点
|
const colorDom = (
|
this.container ? this.container : document
|
).querySelectorAll(".theme-color");
|
const backgroundColorDom = (
|
this.container ? this.container : document
|
).querySelectorAll(".theme-back");
|
const borderColorDom = (
|
this.container ? this.container : document
|
).querySelectorAll(".theme-border");
|
// 获取配置的主题色
|
const bookThemeColor =
|
this.config.activeBook && this.config.activeBook.bookThemeColor
|
? this.config.activeBook.bookThemeColor
|
: null;
|
const chapterThemeColor =
|
this.config.activeBook && this.config.activeBook.chapterThemeColor
|
? this.config.activeBook.chapterThemeColor
|
: null;
|
const pageThemeColor =
|
this.config.activeBook && this.config.activeBook.pageThemeColor
|
? this.config.activeBook.pageThemeColor
|
: null;
|
colorDom.forEach((domItem) => {
|
// 获取章节、页码
|
let pageDom = this.getParentWithClass(domItem, "page-box");
|
let chapterDom = this.getParentWithClass(domItem, "chapter");
|
let page, chapterNum;
|
if (pageDom) page = pageDom.getAttribute("page");
|
if (chapterDom) chapterNum = chapterDom.getAttribute("num");
|
// 向上匹配主题色
|
const themeColor =
|
page && pageThemeColor && pageThemeColor[page]
|
? pageThemeColor[page]
|
: chapterNum && chapterThemeColor && chapterThemeColor[chapterNum]
|
? chapterThemeColor[chapterNum]
|
: bookThemeColor;
|
if (themeColor) {
|
domItem.style.color = themeColor;
|
}
|
});
|
backgroundColorDom.forEach((domItem) => {
|
// 获取章节、页码
|
let pageDom = this.getParentWithClass(domItem, "page-box");
|
let chapterDom = this.getParentWithClass(domItem, "chapter");
|
let page, chapterNum;
|
if (pageDom) page = pageDom.getAttribute("page");
|
if (chapterDom) chapterNum = chapterDom.getAttribute("num");
|
// 向上匹配主题色
|
const themeColor =
|
page && pageThemeColor && pageThemeColor[page]
|
? pageThemeColor[page]
|
: chapterNum && chapterThemeColor && chapterThemeColor[chapterNum]
|
? chapterThemeColor[chapterNum]
|
: bookThemeColor;
|
if (themeColor) {
|
domItem.style.backgroundColor = themeColor;
|
}
|
});
|
borderColorDom.forEach((domItem) => {
|
// 获取章节、页码
|
let pageDom = this.getParentWithClass(domItem, "page-box");
|
let chapterDom = this.getParentWithClass(domItem, "chapter");
|
let page, chapterNum;
|
if (pageDom) page = pageDom.getAttribute("page");
|
if (chapterDom) chapterNum = chapterDom.getAttribute("num");
|
// 向上匹配主题色
|
const themeColor =
|
page && pageThemeColor && pageThemeColor[page]
|
? pageThemeColor[page]
|
: chapterNum && chapterThemeColor && chapterThemeColor[chapterNum]
|
? chapterThemeColor[chapterNum]
|
: bookThemeColor;
|
if (themeColor) {
|
domItem.style.borderColor = themeColor;
|
}
|
});
|
},
|
getParentWithClass(element, className) {
|
while (element.parentElement) {
|
element = element.parentElement;
|
if (element.classList.contains(className)) {
|
return element;
|
}
|
}
|
},
|
pageChangeCallback(entries, observer) {
|
//entries：代表观察到的目标元素的集合。 observer：代表观察者对象。
|
entries.forEach((entry) => {
|
//entry.isIntersecting：检查当前目标元素是否与根元素相交。
|
if (entry.isIntersecting) {
|
const target = entry.target;
|
//entry.target：获取当前目标元素
|
const page = target.getAttribute("page");
|
const catalogDom = this.tool.getParentNodeByClassName(
|
target,
|
"chapter"
|
);
|
const catalog = catalogDom.getAttribute("num");
|
let text = null;
|
if (target.querySelector("p")) {
|
text = target.querySelector("p").textContent.substring(0, 50);
|
}
|
// 返回页码和章节信息
|
if (this.$store.state.qiankun && this.$store.state.qiankun.pageChange)
|
this.$store.state.qiankun.pageChange({
|
page: page,
|
catalog: catalog,
|
text,
|
});
|
// const sections = Array.from(document.querySelectorAll(".section"));
|
//sections：获取所有具有 .section 类名的元素，并转换为数组。
|
// let index = sections.findIndex((section) => section === target) + 1;
|
//index：查找当前目标元素在 sections 数组中的索引，并加 1，用于确定当前页码。
|
}
|
});
|
},
|
loadPageCallback(entries, observer) {
|
entries.forEach(async (entry) => {
|
if (entry.isIntersecting) {
|
const target = entry.target;
|
const page = target.getAttribute("page");
|
if (this.loadPageList.indexOf(Number(page)) == -1) {
|
const catalogDom = this.tool.getParentNodeByClassName(
|
target,
|
"chapter"
|
);
|
// 添加页码
|
this.loadPageList.push(Number(page));
|
const catalog = catalogDom.getAttribute("num");
|
// if (!this.questionDataMap[page]) {
|
// if (testData && testData[catalog]) {
|
// if (testData[catalog][page]) {
|
// if (Array.isArray(testData[catalog][page])) {
|
// this.questionDataMap[page] = await getQuestionList(
|
// page,
|
// testData[catalog][page],
|
// this.config.activeBook
|
// );
|
// } else {
|
// const obj = {};
|
// for (let key in testData[catalog][page]) {
|
// obj[key] = await getQuestionList(
|
// [],
|
// testData[catalog][page][key],
|
// this.config.activeBook
|
// );
|
// }
|
// this.questionDataMap[page] = obj;
|
// }
|
// console.log("题目", this.questionDataMap);
|
// }
|
// }
|
// }
|
// 渲染这一页的标记
|
for (const key in this.renderSignMap) {
|
if (this.renderSignMap[key][page]) {
|
this.renderSignMap[key][page].forEach((item) => {
|
this.renderSign(key, item);
|
});
|
}
|
}
|
// 处理高亮
|
if (this.highlightData) {
|
// 高亮行
|
setTimeout(() => {
|
// 获取页面所有text节点
|
const pageTextList = document.createTreeWalker(
|
target,
|
NodeFilter.SHOW_TEXT
|
);
|
// 匹配关键字
|
const allPageTextNodes = [];
|
let currentNode = pageTextList.nextNode();
|
while (currentNode) {
|
allPageTextNodes.push(currentNode);
|
currentNode = pageTextList.nextNode();
|
}
|
for (let i = 0; i < allPageTextNodes.length; i++) {
|
const textDom = allPageTextNodes[i];
|
let txtIndex = textDom.textContent.indexOf(
|
this.highlightData.txt
|
);
|
if (txtIndex > -1) {
|
textDom.parentNode.style.transition =
|
"background-color 0.8s";
|
textDom.parentNode.scrollIntoView();
|
textDom.parentNode.style.backgroundColor = "#79bbf0";
|
setTimeout(() => {
|
textDom.parentNode.style.backgroundColor = "";
|
}, 1000);
|
}
|
}
|
}, 100);
|
}
|
if (this.loadPageList.length > 5) {
|
// 超过5页
|
this.loadPageList.shift();
|
}
|
}
|
}
|
});
|
},
|
initSwiper() {
|
const doms = (
|
this.container ? this.container : document
|
).querySelectorAll(".swiper-img");
|
for (let i = 0; i < doms.length; i++) {
|
const dom = doms[i];
|
new Swiper(dom, {
|
loop: false, // 无缝
|
autoplay: {
|
//自动开始
|
delay: 3000, //时间间隔
|
disableOnInteraction: false, //*手动操作轮播图后不会暂停*
|
},
|
paginationClickable: true,
|
slidesPerView: 1, // 一组三个
|
spaceBetween: 30, // 间隔
|
// 如果需要前进后退按钮
|
navigation: {
|
nextEl: dom.querySelector(".swiper-button-next"),
|
prevEl: dom.querySelector(".swiper-button-prev"),
|
},
|
// 窗口变化,重新init,针对F11全屏和放大缩小,必须加
|
// observer: true,
|
// observeParents: true
|
// // 如果需要分页器
|
// pagination: {
|
// el: (this.container ? this.container : document).querySelector(
|
// ".swiper-pagination"
|
// ),
|
// clickable: true // 分页器可以点击
|
// }
|
});
|
}
|
const pptDoms = (
|
this.container ? this.container : document
|
).querySelectorAll(".swiper_ppt");
|
for (let i = 0; i < pptDoms.length; i++) {
|
const dom = pptDoms[i];
|
new Swiper(dom, {
|
loop: false, // 无缝
|
autoplay: false,
|
paginationClickable: true,
|
slidesPerView: 1, // 一组三个
|
spaceBetween: 30, // 间隔
|
// 如果需要前进后退按钮
|
navigation: {
|
nextEl: dom.querySelector(".swiper-button-next"),
|
prevEl: dom.querySelector(".swiper-button-prev"),
|
},
|
// 窗口变化,重新init,针对F11全屏和放大缩小,必须加
|
observer: true,
|
observeParents: true,
|
on: {
|
init: (value) => {
|
let currentPage = value.activeIndex + 1; // 获取当前页（从1开始计数）
|
let totalPages = value.slides.length; // 获取总页数
|
var paginationInfoEl = dom.querySelector(".pageBox");
|
if (paginationInfoEl)
|
paginationInfoEl.textContent = currentPage + "/" + totalPages;
|
},
|
slideChange: (value) => {
|
let currentPage = value.activeIndex + 1; // 获取当前页（从1开始计数）
|
let totalPages = value.slides.length; // 获取总页数
|
var paginationInfoEl = dom.querySelector(".pageBox");
|
if (paginationInfoEl)
|
paginationInfoEl.textContent = currentPage + "/" + totalPages;
|
},
|
},
|
});
|
}
|
},
|
initViewer() {
|
const doms = (
|
this.container ? this.container : document
|
).querySelectorAll(".openImgBox");
|
for (let i = 0; i < doms.length; i++) {
|
const dom = doms[i];
|
new Viewer(dom, {
|
container: this.container
|
? this.container.querySelector("#app")
|
: "body",
|
navbar: true, // 显示导航栏
|
toolbar: true, // 显示工具栏
|
title: true, // 显示标题
|
});
|
}
|
},
|
// 根据关键字全文检索
|
searchTextByPage(keyword) {
|
const searchResult = [];
|
let catalogIndex = 0;
|
// 所有章节组件（每本书制作时单独配置）
|
const pageData = {
|
pageHeader,
|
chapterOne,
|
// chapterTwo,
|
// chapterThree,
|
// chapterFour,
|
// chapterFive,
|
};
|
// 遍历所有章节文件
|
for (const key in pageData) {
|
catalogIndex++;
|
let pageComponent, pageExample;
|
// 先渲染一次当前章节文件（这时页面的内容为空），获取页码信息
|
pageComponent = Vue.extend(pageData[key]);
|
pageExample = new pageComponent({
|
propsData: {
|
showPageList: [],
|
questionData: {},
|
isSearch: true,
|
},
|
});
|
pageExample.$mount(
|
(this.container ? this.container : document).querySelector(
|
"#searchContent"
|
)
|
);
|
// 获取页码
|
const pageDom = (this.container ? this.container : document)
|
.querySelector("#searchDomBox")
|
.querySelectorAll(".page-box");
|
const pages = [];
|
for (let i = 0; i < pageDom.length; i++) {
|
const pageDomItem = pageDom[i];
|
pages.push(Number(pageDomItem.getAttribute("page")));
|
}
|
// 获取页面结束，卸载销毁
|
pageExample.$destroy();
|
(this.container ? this.container : document).querySelector(
|
"#searchDomBox"
|
).innerHTML = '<div id="searchContent"></div>';
|
// 遍历页码
|
if (pages.length) {
|
for (let i = 0; i < pages.length; i++) {
|
const pageNum = pages[i];
|
// 动态渲染对应章节的页码
|
pageComponent = Vue.extend(pageData[key]);
|
pageExample = new pageComponent({
|
propsData: {
|
showPageList: [pageNum],
|
questionData: {},
|
isSearch: true,
|
},
|
});
|
pageExample.$mount(
|
(this.container ? this.container : document).querySelector(
|
"#searchContent"
|
)
|
);
|
// 获取对应页面dom
|
const thisPageDom = (this.container ? this.container : document)
|
.querySelector("#searchDomBox")
|
.querySelector(`[page="${pageNum}"]`);
|
if (thisPageDom) {
|
// 获取页面所有text节点
|
const pageTextList = document.createTreeWalker(
|
thisPageDom,
|
NodeFilter.SHOW_TEXT
|
);
|
// 匹配关键字
|
const allPageTextNodes = [];
|
let currentNode = pageTextList.nextNode();
|
while (currentNode) {
|
allPageTextNodes.push(currentNode);
|
currentNode = pageTextList.nextNode();
|
}
|
for (let i = 0; i < allPageTextNodes.length; i++) {
|
const textDom = allPageTextNodes[i];
|
let txtIndex = textDom.textContent.indexOf(keyword);
|
if (txtIndex > -1) {
|
// 记录关键字所在页码、章节以及匹配到的段落
|
searchResult.push({
|
page: pageNum,
|
catalog: catalogIndex,
|
txt: textDom.textContent,
|
txtIndex: txtIndex,
|
});
|
}
|
}
|
// 结束，卸载销毁
|
pageExample.$destroy();
|
(this.container ? this.container : document).querySelector(
|
"#searchDomBox"
|
).innerHTML = '<div id="searchContent"></div>';
|
}
|
}
|
}
|
}
|
// 输出搜索结果
|
console.log(searchResult);
|
return searchResult;
|
},
|
// 根据检索结果跳转对应位置并高亮
|
searchItemLocation(data) {
|
// 记录高亮信息
|
this.highlightData = data;
|
// 跳转
|
this.gotoPage(data.catalog, data.page, () => { });
|
},
|
// 页面向下滚动，音频小窗播放功能
|
getAduio() {
|
let allVideo = (
|
this.container ? this.container : document
|
).querySelectorAll(".audio");
|
allVideo = Array.from(allVideo);
|
this.videoList = allVideo;
|
if (allVideo.length) {
|
// 查找播放状态的最后一条音频
|
const playAudio = allVideo
|
.reverse()
|
.find((item) => item.paused == false);
|
if (playAudio) {
|
const bottomGap = playAudio.getBoundingClientRect().bottom;
|
if (bottomGap < 0) {
|
playAudio.pause();
|
this.audioPath = playAudio.src;
|
this.currentTime = playAudio.currentTime;
|
}
|
}
|
}
|
},
|
// 页面向上滚动，音频小窗回收
|
handleAudio() {
|
if (!this.audioPath) return false;
|
let allVideo = (
|
this.container ? this.container : document
|
).querySelectorAll(".audio");
|
allVideo = Array.from(allVideo);
|
if (allVideo.length) {
|
//查找与小窗播放音频同源的页面audio DOM
|
const playAudio = allVideo.find((item) => item.src == this.audioPath);
|
if (playAudio) {
|
const bottomGap = playAudio.getBoundingClientRect().bottom;
|
if (bottomGap >= 0) {
|
if (this.$refs.audioPlayer) {
|
const playerState = this.$refs.audioPlayer.getVideoPlayer();
|
this.audioPath = "";
|
playAudio.currentTime = playerState.currentTime;
|
if (!playerState.paused) playAudio.play();
|
}
|
}
|
}
|
}
|
},
|
// 关闭mini video
|
closeMiniAudio() {
|
this.audioPath = "";
|
},
|
// 点击音频播放，关闭其他音频
|
closeAudio() {
|
let allAudio = (
|
this.container ? this.container : document
|
).querySelectorAll(".audio");
|
for (let index = 0; index < allAudio.length; index++) {
|
const item = allAudio[index];
|
item.addEventListener("play", () => {
|
const audioList = Array.from(allAudio);
|
for (let cindex = 0; cindex < audioList.length; cindex++) {
|
const citem = audioList[cindex];
|
if (citem.currentSrc != item.src) {
|
citem.pause();
|
}
|
}
|
this.closeMiniAudio();
|
});
|
}
|
},
|
// 点击视频关闭其他
|
closeVideo() {
|
let allVideo = (
|
this.container ? this.container : document
|
).querySelectorAll(".video");
|
for (let index = 0; index < allVideo.length; index++) {
|
const item = allVideo[index];
|
item.addEventListener("playing", (item) => {
|
const path = item.srcElement.src;
|
const videoList = Array.from(allVideo);
|
for (let cindex = 0; cindex < videoList.length; cindex++) {
|
const citem = videoList[cindex];
|
if (citem.currentSrc != path && path) {
|
citem.pause();
|
}
|
}
|
});
|
}
|
},
|
// 视频小窗
|
handleVideoPicture() {
|
let doms = (this.container ? this.container : document).querySelectorAll(
|
".video"
|
);
|
doms = Array.from(doms);
|
if (!doms.length) return false;
|
const playVudio = doms.reverse().find((item) => item.paused == false);
|
if (playVudio) {
|
const bottomGap = playVudio.getBoundingClientRect().bottom;
|
const topGap = playVudio.getBoundingClientRect().top;
|
if (bottomGap < 0 || topGap > window.innerHeight) {
|
try {
|
if (playVudio.readyState) playVudio.requestPictureInPicture();
|
} catch (error) {
|
console.log(error, "小窗错误error");
|
}
|
}
|
}
|
},
|
//其他类名下字体大小变化
|
transformDom(fs) {
|
if (!fs) return;
|
let doms = (this.container ? this.container : document).querySelectorAll(
|
".block"
|
);
|
if (!doms.length) return;
|
for (let index = 0; index < doms.length; index++) {
|
const dom = doms[index];
|
dom.style.fontSize = fs + "px";
|
}
|
},
|
handleTanslateWord() {
|
const doms = (
|
this.container ? this.container : document
|
).querySelectorAll(".ts-word");
|
for (let index = 0; index < doms.length; index++) {
|
const dom = doms[index];
|
dom.onmouseenter = (event) => {
|
if (this.showWord != event.target.innerText) {
|
const rect = dom.getBoundingClientRect();
|
this.pageX = rect.left;
|
this.pageY = rect.top + rect.height;
|
this.keyWordData.forEach((item) => {
|
if (item.name == event.target.innerText) {
|
this.showWord = item.name
|
this.prototype = item.prototype
|
this.IPA = item.IPA
|
this.translate = item.translate
|
}
|
});
|
}
|
};
|
dom.onmouseleave = (event) => {
|
if (this.showWord == event.target.innerText) {
|
this.showWord = "";
|
}
|
};
|
}
|
},
|
},
|
components: {
|
translateWord,
|
pageHeader,
|
chapterOne,
|
// chapterTwo,
|
// chapterThree,
|
// chapterFour,
|
// chapterFive,
|
},
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.page-main {
|
width: 100% !important;
|
height: 100% !important;
|
overflow: auto;
|
|
.page-content {
|
max-width: 816px;
|
min-width: 375px;
|
margin: 0 auto;
|
padding-bottom: 100px;
|
}
|
}
|
</style>
|
