From ef1a27bad9c3b21ee4ab081b68e02a38b44b1bdf Mon Sep 17 00:00:00 2001
From: zhongshujie <2862698242@qq.com>
Date: 星期一, 05 八月 2024 11:58:05 +0800
Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/testbookLayout
---
src/books/sportsAndHealth/view/components/index.vue | 635 +++++++++++++++++++++++++-------------------------------
1 files changed, 284 insertions(+), 351 deletions(-)
diff --git a/src/books/sportsAndHealth/view/components/index.vue b/src/books/sportsAndHealth/view/components/index.vue
index cba2248..f6801d2 100644
--- a/src/books/sportsAndHealth/view/components/index.vue
+++ b/src/books/sportsAndHealth/view/components/index.vue
@@ -1,3 +1,5 @@
+<!-- @format -->
+
<template>
<div class="page-main" @scroll="throttledScrollHandler">
<div id="searchDomBox" style="display: none">
@@ -13,120 +15,42 @@
<chapterTwo v-if="showCatalogList.indexOf(3) > -1" :showPageList="loadPageList"></chapterTwo>
<chapterThree v-if="showCatalogList.indexOf(4) > -1" :showPageList="loadPageList"></chapterThree>
<chapterFour v-if="showCatalogList.indexOf(5) > -1" :showPageList="loadPageList"></chapterFour>
- <assemblyOne v-if="showCatalogList.indexOf(6) > -1" :showPageList="loadPageList"></assemblyOne>
- <!-- <assemblyTwo v-if="showCatalogList.indexOf(7) > -1" :showPageList="loadPageList" @openPDFChange="swdtChange" /> -->
+ <chapterfive v-if="showCatalogList.indexOf(6) > -1" :showPageList="loadPageList"></chapterfive>
+ <chapterSix v-if="showCatalogList.indexOf(7) > -1" :showPageList="loadPageList"></chapterSix>
+ <chapterSeven v-if="showCatalogList.indexOf(8) > -1" :showPageList="loadPageList"></chapterSeven>
+ <chapterEight v-if="showCatalogList.indexOf(9) > -1" :showPageList="loadPageList"></chapterEight>
- <!-- <ChapterFour
- v-if="showCatalogList.indexOf(5) > -1"
- :showPageList="loadPageList"
- :questionData="questionDataMap"
- /> -->
- <!-- <ChapterFive
- v-if="showCatalogList.indexOf(6) > -1"
- :showPageList="loadPageList"
- :questionData="questionDataMap"
- @Upload_initViewer="changeDomViewer"
- /> -->
- <!-- <chapterSix
- v-if="showCatalogList.indexOf(7) > -1"
- :showPageList="loadPageList"
- :questionData="questionDataMap"
- /> -->
- <!-- <chapterSeven
- v-if="showCatalogList.indexOf(8) > -1"
- :showPageList="loadPageList"
- :questionData="questionDataMap"
- @eventSwdt="swdtChange"
- @Upload_initViewer="changeDomViewer"
- /> -->
- <!-- <chapterEight
- v-if="showCatalogList.indexOf(9) > -1"
- :showPageList="loadPageList"
- :questionData="questionDataMap"
- /> -->
- <!-- <chapterNine
- v-if="showCatalogList.indexOf(10) > -1"
- :showPageList="loadPageList"
- :questionData="questionDataMap"
- /> -->
- <!-- <chapter010
- v-if="showCatalogList.indexOf(11) > -1"
- :showPageList="loadPageList"
- /> -->
- <!-- <chapter011
- v-if="showCatalogList.indexOf(12) > -1"
- :showPageList="loadPageList"
- /> -->
- <!-- <chapter012
- v-if="showCatalogList.indexOf(13) > -1"
- :showPageList="loadPageList"
- /> -->
- <!-- <chapter013
- v-if="showCatalogList.indexOf(14) > -1"
- :showPageList="loadPageList"
- /> -->
- <!-- <chapter014
- v-if="showCatalogList.indexOf(15) > -1"
- :showPageList="loadPageList"
- /> -->
- <!-- <chapter015
- v-if="showCatalogList.indexOf(16) > -1"
- :showPageList="loadPageList"
- /> -->
- <!-- <chapter016
- v-if="showCatalogList.indexOf(17) > -1"
- :showPageList="loadPageList"
- /> -->
- <!-- <chapter017
- v-if="showCatalogList.indexOf(18) > -1"
- :showPageList="loadPageList"
- /> -->
- <!-- <chapter018
- v-if="showCatalogList.indexOf(19) > -1"
- :showPageList="loadPageList"
- /> -->
</div>
</div>
</template>
<script>
-import Vue from "vue";
-import pageHeader from "./front001";
-import chapterOne from "./chapter001.vue";
-import chapterTwo from "./chapter002.vue";
-import chapterThree from "./chapter003.vue";
-import chapterFour from "./chapter004.vue";
-import assemblyOne from "./testDynaicTable.vue";
-import assemblyTwo from "./testPp.vue";
+import Vue from 'vue'
+import pageHeader from './front001'
+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 ChapterFour from "./testPp";
-// import ChapterFive from "./chapter005";
-// import chapterSix from "./chapter006";
-// import chapterSeven from "./chapter007";
-// import chapterEight from "./chapter008";
-// import chapterNine from "./chapter009";
-// import chapter010 from "./chapter010";
-// import chapter011 from "./chapter011";
-// import chapter012 from "./chapter012";
-// import chapter013 from "./chapter013";
-// import chapter014 from "./chapter014";
-// import chapter015 from "./chapter015";
-// import chapter016 from "./chapter016";
-// import chapter017 from "./chapter017";
-// import chapter018 from "./chapter018";
-import NoteIcon from "@/assets/images/biji.png";
-import _ from "lodash";
-import getQuestionList from "@/assets/methods/examination";
-import testData from "../../js/examinationList";
-import Swiper from "swiper/bundle";
-import "swiper/swiper-bundle.css";
-import Viewer from "viewerjs";
-import "viewerjs/dist/viewer.css";
+import chapterSix from './chapter006.vue'
+import chapterSeven from './chapter007.vue'
+import chapterEight from './chapter008.vue'
+
+
+import NoteIcon from '@/assets/images/biji.png'
+import _ from 'lodash'
+import getQuestionList from '@/assets/methods/examination'
+import testData from '../../js/examinationList'
+import Swiper from 'swiper/bundle'
+import 'swiper/swiper-bundle.css'
+import Viewer from 'viewerjs'
+import 'viewerjs/dist/viewer.css'
export default {
data() {
return {
- catalogLength: 7, // 鎬荤珷鑺傛暟
+ catalogLength: 9, // 鎬荤珷鑺傛暟
showCatalogList: [], // 鏄剧ず鐨勭珷鑺�
loadThreshold: 300, // 瑙﹀彂鍔犺浇闃堝��
throttleThreshold: 100, // 鑺傛祦闃堝��
@@ -138,14 +62,14 @@
questionDataMap: {},
renderSignMap: {},
highlightData: null,
- };
+ }
},
computed: {
fontSize() {
- return this.$store.state.qiankun.fontSize;
+ return this.$store.state.qiankun.fontSize
},
pageZoom() {
- return this.$store.state.qiankun.scale / 100;
+ return this.$store.state.qiankun.scale / 100
},
},
watch: {
@@ -158,93 +82,93 @@
// 璋冪敤鐖跺眰鏂规硶
this.$store.state.qiankun.catalogChange({
showCatalogList: newVal,
- });
+ })
}
// 鍚姩椤电爜瑙傚療
setTimeout(() => {
- this.initObservation();
- this.initThemeColor();
- }, 500);
+ this.initObservation()
+ this.initThemeColor()
+ }, 500)
},
},
loadPageList: {
handler(newVal, oldVal) {
setTimeout(() => {
- this.initSwiper();
- this.initViewer();
- this.readText();
- }, 200);
+ this.initSwiper()
+ this.initViewer()
+ this.readText()
+ }, 200)
},
},
pageZoom: {
handler(newVal, oldVal) {
const scrollBox = (
this.container ? this.container : document
- ).querySelector(".page-main");
- scrollBox.scrollTop = (scrollBox.scrollTop / oldVal) * newVal;
+ ).querySelector('.page-main')
+ scrollBox.scrollTop = (scrollBox.scrollTop / oldVal) * newVal
},
},
},
mounted() {
// 榛樿鍔犺浇绔犺妭
- this.showCatalogList = [1];
+ 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);
+ this.gotoPage(catalog, page)
},
// 娓叉煋绗旇銆侀珮浜�佸垝绾�
renderSign: (type, data) => {
// 鍥犱负璋冩暣涓洪〉闈㈡噿鍔犺浇锛屾墍浠ユ覆鏌撴爣璁颁篃闇�瑕佹寜鐓ч〉闈㈣繘琛屽鐞嗭紝鍏堝偍瀛樻暟鎹紝椤甸潰鍔犺浇瀹屾垚鍐嶆覆鏌撳搴旂殑鏍囪锛�
- this.handelSignData(type, data);
+ this.handelSignData(type, data)
// this.renderSign(type, data);
},
// 鍒犻櫎绗旇銆侀珮浜�佸垝绾�
delSign: (data) => {
- this.delSign(data);
+ this.delSign(data)
},
// 鍏ㄦ枃妫�绱�
searchBookByKeyword: (keyword) => {
- return this.searchTextByPage(keyword);
+ return this.searchTextByPage(keyword)
},
// 璺宠浆妫�绱㈢粨鏋滀綅缃�
jumpSearchItem: (data) => {
- this.searchItemLocation(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"锛岃〃绀烘牴鍏冪礌鐨勮竟鐣屽拰瑙嗙獥鐨勮竟鐣岄噸鍚�
+ rootMargin: '0px', // 鎸囧畾鏍瑰厓绱犵殑杈圭晫锛岃繖閲岃涓� "0px"锛岃〃绀烘牴鍏冪礌鐨勮竟鐣屽拰瑙嗙獥鐨勮竟鐣岄噸鍚�
threshold: 0.5, // 鎸囧畾浜ゅ弶姣斾緥锛岃繖閲岃涓� 0.5锛岃〃绀哄綋鐩爣鍏冪礌涓�鍗婃垨鏇村鏄剧ず鍦ㄨ绐椾腑鏃惰Е鍙戝洖璋冨嚱鏁般��
- });
+ })
this.loadPageObserver = new IntersectionObserver(this.loadPageCallback, {
root: null, // 鎸囧畾鏍瑰厓绱狅紝杩欓噷璁句负 null锛岃〃绀洪�夊彇鏁翠釜瑙嗙獥浣滀负鏍瑰厓绱犮��
- rootMargin: "0px", // 鎸囧畾鏍瑰厓绱犵殑杈圭晫锛岃繖閲岃涓� "0px"锛岃〃绀烘牴鍏冪礌鐨勮竟鐣屽拰瑙嗙獥鐨勮竟鐣岄噸鍚�
+ rootMargin: '0px', // 鎸囧畾鏍瑰厓绱犵殑杈圭晫锛岃繖閲岃涓� "0px"锛岃〃绀烘牴鍏冪礌鐨勮竟鐣屽拰瑙嗙獥鐨勮竟鐣岄噸鍚�
threshold: 0, // 鎸囧畾浜ゅ弶姣斾緥锛岃繖閲岃涓� 0.5锛岃〃绀哄綋鐩爣鍏冪礌涓�鍗婃垨鏇村鏄剧ず鍦ㄨ绐椾腑鏃惰Е鍙戝洖璋冨嚱鏁般��
- });
+ })
// 鍚姩椤电爜瑙傚療
setTimeout(() => {
- this.initObservation();
- this.initThemeColor();
- }, 500);
+ this.initObservation()
+ this.initThemeColor()
+ }, 500)
// 娴嬭瘯椤甸潰璺宠浆
setTimeout(() => {
- this.gotoPage(4, 127);
+ this.gotoPage(1, 1)
// setTimeout(() => {
// this.renderSign("Highlight", {
// id: "2ACA9359",
@@ -272,26 +196,26 @@
// txt: " 杩愬姩绯荤粺鏄敱楠ㄣ�侀杩炵粨鍜岄楠艰倢涓夐儴鍒嗙粍鎴愮殑銆傚叏韬殑楠ㄩ�氳繃楠ㄨ繛缁撶粍鎴愪汉浣撻楠硷紙瑙佸浘1-1锛夈�傞楠兼槸浜轰綋鐨勬敮鏋讹紝鍏锋湁淇濇姢鍐呰剰鍣ㄥ畼銆佷緵鑲岃倝闄勭潃鍜屼綔涓鸿倢鑲夎繍鍔ㄧ殑鏉犳潌绛変綔鐢ㄣ�傚湪绁炵粡绯荤粺鐨勬敮閰嶄笅锛岃倢鑲夋敹缂╃壍鍔ㄦ墍闄勭潃鐨勯缁曠潃鍏宠妭杞姩锛屼娇韬綋浜х敓鍚勭鍔ㄤ綔銆傛墍浠ワ紝杩愬姩绯荤粺鍏锋湁杩愬姩銆佹敮鎸佸拰淇濇姢绛夊姛鑳斤紝骞煎勾鏃舵湡鐨勯楠艰繕鍏锋湁閫犺鍔熻兘銆� ",
// txtIndex: 57
// });
- }, 500);
+ }, 500)
},
methods: {
swdtChange(data) {
- console.log("瀛愬簲鐢╬df", data);
+ console.log('瀛愬簲鐢╬df', data)
if (this.$store.state.qiankun && this.$store.state.qiankun.openPDF) {
- if (data.type == "pdf") {
+ if (data.type == 'pdf') {
this.$store.state.qiankun.openPDF({
data: data.data,
- });
+ })
} else {
this.$store.state.qiankun.chooseWords({
type: data.type,
data: data.data,
- });
+ })
}
}
},
changeDomViewer() {
- this.initViewer();
+ this.initViewer()
},
// setZoom1() {
// let scale = this.$store.state.qiankun.scale + 10;
@@ -313,7 +237,7 @@
if (event.target.scrollTop > this.previousScrollTop) {
// 鍚戜笅
const currentScrollTop =
- event.target.scrollTop + event.target.offsetHeight;
+ event.target.scrollTop + event.target.offsetHeight
if (
currentScrollTop >=
event.target.scrollHeight - this.loadThreshold
@@ -326,60 +250,61 @@
// 鍔犺浇涓嬩竴绔�
this.showCatalogList.push(
this.showCatalogList[this.showCatalogList.length - 1] + 1
- );
+ )
if (this.showCatalogList.length > 3) {
// 瓒呰繃涓夌珷闅愯棌椤堕儴涓�绔�
- this.showCatalogList.shift();
+ this.showCatalogList.shift()
}
}
}
} else if (event.target.scrollTop < this.previousScrollTop) {
// 鍚戜笂
- const currentScrollTop = event.target.scrollTop;
+ const currentScrollTop = event.target.scrollTop
if (currentScrollTop <= this.loadThreshold) {
// 鍒拌揪闃堝��
if (this.showCatalogList[0] > 0) {
// 鍔犺浇涓婁竴绔�
- this.showCatalogList.unshift(this.showCatalogList[0] - 1);
+ this.showCatalogList.unshift(this.showCatalogList[0] - 1)
if (this.showCatalogList.length > 3) {
// 瓒呰繃涓夌珷闅愯棌搴曢儴涓�绔�
- this.showCatalogList.pop();
+ this.showCatalogList.pop()
}
}
}
}
// showCatalogList 褰撳墠鏄剧ず鐨勪笁涓珷鑺傦紝watch鐩戝惉浼犻�掔粰涓诲簲鐢�
// 鏇存柊涓婁竴娆℃粴鍔ㄧ殑浣嶇疆
- this.previousScrollTop = event.target.scrollTop;
+ this.previousScrollTop = event.target.scrollTop
},
// 绔犺妭銆侀〉闈㈣烦杞�
gotoPage(catalog, page) {
+
if (catalog >= 0 && catalog <= this.catalogLength) {
// 澶勭悊娓叉煋绔犺妭
if (catalog == 0) {
- this.showCatalogList = [0, 1];
+ 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];
+ this.showCatalogList = [catalog - 1, catalog, catalog + 1]
}
setTimeout(() => {
// 璺宠浆椤电爜
const pageDom = (
this.container ? this.container : document
- ).querySelector(`[page="${page}"]`);
+ ).querySelector(`[page="${page}"]`)
if (pageDom) {
- pageDom.scrollIntoView();
+ pageDom.scrollIntoView()
} else {
- console.log("椤电爜閿欒锛�");
+ console.log('椤电爜閿欒锛�')
}
- }, 500);
+ }, 500)
} else {
- console.log("绔犺妭閿欒锛�");
+ console.log('绔犺妭閿欒锛�')
}
},
@@ -387,70 +312,70 @@
handelSignData(type, data) {
if (this.loadPageList.indexOf(Number(data.page)) > -1) {
// 绔嬪嵆娓叉煋
- this.renderSign(type, data);
+ this.renderSign(type, data)
}
// 鍌ㄥ瓨鏁版嵁
- if (!this.renderSignMap[type]) this.renderSignMap[type] = {};
+ 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);
+ this.renderSignMap[type][data.page] = []
+ this.renderSignMap[type][data.page].push(data)
},
// 娓叉煋鏍囪
renderSign(type, data) {
// 鐖跺眰璁剧疆绂佹娓叉煋鏍囪鏃朵笉鍐嶈繘琛屾覆鏌�
if (this.$store.state.qiankun.disableSign) {
- return false;
+ return false
}
const existence = (
this.container ? this.container : document
- ).querySelector(`[dataid="${data.id}"]`);
+ ).querySelector(`[dataid="${data.id}"]`)
// 鍘婚噸
if (!existence) {
const pageDom = (
this.container ? this.container : document
- ).querySelector(`[page="${data.page}"]`);
+ ).querySelector(`[page="${data.page}"]`)
// 鍒涘缓 createTreeWalker 杩唬鍣紝鐢ㄤ簬閬嶅巻鏂囨湰鑺傜偣锛屼繚瀛樺埌涓�涓暟缁�
const treeWalker = document.createTreeWalker(
pageDom,
NodeFilter.SHOW_TEXT
- );
- const allTextNodes = [];
- let currentNode = treeWalker.nextNode();
+ )
+ const allTextNodes = []
+ let currentNode = treeWalker.nextNode()
while (currentNode) {
- allTextNodes.push(currentNode);
- currentNode = treeWalker.nextNode();
+ allTextNodes.push(currentNode)
+ currentNode = treeWalker.nextNode()
}
for (let i = 0; i < allTextNodes.length; i++) {
- const textDom = allTextNodes[i];
+ const textDom = allTextNodes[i]
if (textDom.textContent.indexOf(data.txt) > -1) {
- let reg = new RegExp(`${data.txt}`, "ig");
+ let reg = new RegExp(`${data.txt}`, 'ig')
switch (type) {
- case "Highlight":
+ 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":
+ )
+ 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":
+ )
+ 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;
+ )
+ break
}
}
}
@@ -460,142 +385,142 @@
delSign({ ids, type }) {
if (ids && ids.length) {
for (let i = 0; i < ids.length; i++) {
- const id = ids[i];
+ const id = ids[i]
const dom = (
this.container ? this.container : document
- ).querySelector(`[dataid="${id}"]`);
+ ).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}"]`);
+ ).querySelectorAll(`[datatype="${type}"]`)
for (let i = 0; i < doms.length; i++) {
- const dom = doms[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");
+ ).querySelectorAll('.page-box')
sections.forEach((section) => {
if (this.config.activeBook && this.config.activeBook.tryPageCount) {
- const page = section.getAttribute("page");
+ 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;
+ 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");
+ const isObserver = section.getAttribute('observer')
+ const isLoadObserver = section.getAttribute('loadObserver')
if (!isObserver) {
- this.observer.observe(section);
- section.setAttribute("observer", "1");
+ this.observer.observe(section)
+ section.setAttribute('observer', '1')
}
if (!isLoadObserver) {
- this.loadPageObserver.observe(section);
- section.setAttribute("loadObserver", "1");
+ this.loadPageObserver.observe(section)
+ section.setAttribute('loadObserver', '1')
}
- });
+ })
},
initThemeColor() {
// 鑾峰彇鍚勭闇�瑕佷富棰樿壊鐨勮妭鐐�
const colorDom = (
this.container ? this.container : document
- ).querySelectorAll(".theme-color");
+ ).querySelectorAll('.theme-color')
const backgroundColorDom = (
this.container ? this.container : document
- ).querySelectorAll(".theme-back");
+ ).querySelectorAll('.theme-back')
const borderColorDom = (
this.container ? this.container : document
- ).querySelectorAll(".theme-border");
+ ).querySelectorAll('.theme-border')
// 鑾峰彇閰嶇疆鐨勪富棰樿壊
const bookThemeColor =
this.config.activeBook && this.config.activeBook.bookThemeColor
? this.config.activeBook.bookThemeColor
- : null;
+ : null
const chapterThemeColor =
this.config.activeBook && this.config.activeBook.chapterThemeColor
? this.config.activeBook.chapterThemeColor
- : null;
+ : null
const pageThemeColor =
this.config.activeBook && this.config.activeBook.pageThemeColor
? this.config.activeBook.pageThemeColor
- : null;
+ : 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");
+ 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;
+ : bookThemeColor
if (themeColor) {
- domItem.style.color = 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");
+ 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;
+ : bookThemeColor
if (themeColor) {
- domItem.style.backgroundColor = 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");
+ 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;
+ : bookThemeColor
if (themeColor) {
- domItem.style.borderColor = themeColor;
+ domItem.style.borderColor = themeColor
}
- });
+ })
},
getParentWithClass(element, className) {
- console.log(element, className, "element, className");
+ console.log(element, className, 'element, className')
while (element.parentElement) {
- element = element.parentElement;
+ element = element.parentElement
if (element.classList.contains(className)) {
- return element;
+ return element
}
}
},
@@ -604,17 +529,17 @@
entries.forEach((entry) => {
//entry.isIntersecting锛氭鏌ュ綋鍓嶇洰鏍囧厓绱犳槸鍚︿笌鏍瑰厓绱犵浉浜ゃ��
if (entry.isIntersecting) {
- const target = entry.target;
+ const target = entry.target
//entry.target锛氳幏鍙栧綋鍓嶇洰鏍囧厓绱�
- const page = target.getAttribute("page");
+ 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);
+ '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)
@@ -622,27 +547,27 @@
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");
+ const target = entry.target
+ const page = target.getAttribute('page')
if (this.loadPageList.indexOf(Number(page)) == -1) {
const catalogDom = this.tool.getParentNodeByClassName(
target,
- "chapter"
- );
+ 'chapter'
+ )
// 娣诲姞椤电爜
- this.loadPageList.push(Number(page));
- const catalog = catalogDom.getAttribute("num");
+ this.loadPageList.push(Number(page))
+ const catalog = catalogDom.getAttribute('num')
if (!this.questionDataMap[page]) {
if (testData && testData[catalog]) {
if (testData[catalog][page]) {
@@ -651,17 +576,17 @@
page,
testData[catalog][page],
this.config.activeBook
- );
+ )
} else {
- const obj = {};
+ const obj = {}
for (let key in testData[catalog][page]) {
obj[key] = await getQuestionList(
[],
testData[catalog][page][key],
this.config.activeBook
- );
+ )
}
- this.questionDataMap[page] = obj;
+ this.questionDataMap[page] = obj
}
}
}
@@ -670,8 +595,8 @@
for (const key in this.renderSignMap) {
if (this.renderSignMap[key][page]) {
this.renderSignMap[key][page].forEach((item) => {
- this.renderSign(key, item);
- });
+ this.renderSign(key, item)
+ })
}
}
// 澶勭悊楂樹寒
@@ -682,45 +607,45 @@
const pageTextList = document.createTreeWalker(
target,
NodeFilter.SHOW_TEXT
- );
+ )
// 鍖归厤鍏抽敭瀛�
- const allPageTextNodes = [];
- let currentNode = pageTextList.nextNode();
+ const allPageTextNodes = []
+ let currentNode = pageTextList.nextNode()
while (currentNode) {
- allPageTextNodes.push(currentNode);
- currentNode = pageTextList.nextNode();
+ allPageTextNodes.push(currentNode)
+ currentNode = pageTextList.nextNode()
}
for (let i = 0; i < allPageTextNodes.length; i++) {
- const textDom = allPageTextNodes[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";
+ 'background-color 0.8s'
+ textDom.parentNode.scrollIntoView()
+ textDom.parentNode.style.backgroundColor = '#79bbf0'
setTimeout(() => {
- textDom.parentNode.style.backgroundColor = "";
- }, 1000);
+ textDom.parentNode.style.backgroundColor = ''
+ }, 1000)
}
}
- }, 100);
+ }, 100)
}
if (this.loadPageList.length > 5) {
// 瓒呰繃5椤�
- this.loadPageList.shift();
+ this.loadPageList.shift()
}
}
}
- });
+ })
},
initSwiper() {
const doms = (
this.container ? this.container : document
- ).querySelectorAll(".swiper-img");
+ ).querySelectorAll('.swiper-img')
for (let i = 0; i < doms.length; i++) {
- const dom = doms[i];
+ const dom = doms[i]
new Swiper(dom, {
loop: false, // 鏃犵紳
autoplay: {
@@ -733,8 +658,8 @@
spaceBetween: 30, // 闂撮殧
// 濡傛灉闇�瑕佸墠杩涘悗閫�鎸夐挳
navigation: {
- nextEl: dom.querySelector(".swiper-button-next"),
- prevEl: dom.querySelector(".swiper-button-prev"),
+ nextEl: dom.querySelector('.swiper-button-next'),
+ prevEl: dom.querySelector('.swiper-button-prev'),
},
// 绐楀彛鍙樺寲,閲嶆柊init,閽堝F11鍏ㄥ睆鍜屾斁澶х缉灏�,蹇呴』鍔�
observer: true,
@@ -746,13 +671,13 @@
// ),
// clickable: true // 鍒嗛〉鍣ㄥ彲浠ョ偣鍑�
// }
- });
+ })
}
const pptDoms = (
this.container ? this.container : document
- ).querySelectorAll(".swiper_ppt");
+ ).querySelectorAll('.swiper_ppt')
for (let i = 0; i < pptDoms.length; i++) {
- const dom = pptDoms[i];
+ const dom = pptDoms[i]
new Swiper(dom, {
loop: false, // 鏃犵紳
autoplay: false,
@@ -761,132 +686,135 @@
spaceBetween: 30, // 闂撮殧
// 濡傛灉闇�瑕佸墠杩涘悗閫�鎸夐挳
navigation: {
- nextEl: dom.querySelector(".swiper-button-next"),
- prevEl: dom.querySelector(".swiper-button-prev"),
+ 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");
+ let currentPage = value.activeIndex + 1 // 鑾峰彇褰撳墠椤碉紙浠�1寮�濮嬭鏁帮級
+ let totalPages = value.slides.length // 鑾峰彇鎬婚〉鏁�
+ var paginationInfoEl = dom.querySelector('.pageBox')
if (paginationInfoEl)
- paginationInfoEl.textContent = currentPage + "/" + totalPages;
+ paginationInfoEl.textContent = currentPage + '/' + totalPages
},
slideChange: (value) => {
- let currentPage = value.activeIndex + 1; // 鑾峰彇褰撳墠椤碉紙浠�1寮�濮嬭鏁帮級
- let totalPages = value.slides.length; // 鑾峰彇鎬婚〉鏁�
- var paginationInfoEl = dom.querySelector(".pageBox");
+ let currentPage = value.activeIndex + 1 // 鑾峰彇褰撳墠椤碉紙浠�1寮�濮嬭鏁帮級
+ let totalPages = value.slides.length // 鑾峰彇鎬婚〉鏁�
+ var paginationInfoEl = dom.querySelector('.pageBox')
if (paginationInfoEl)
- paginationInfoEl.textContent = currentPage + "/" + totalPages;
+ paginationInfoEl.textContent = currentPage + '/' + totalPages
},
},
- });
+ })
}
},
initViewer() {
const doms = (
this.container ? this.container : document
- ).querySelectorAll(".openImgBox");
+ ).querySelectorAll('.openImgBox')
for (let i = 0; i < doms.length; i++) {
- const dom = doms[i];
+ const dom = doms[i]
new Viewer(dom, {
container: this.container
- ? this.container.querySelector("#app")
- : "body",
+ ? this.container.querySelector('#app')
+ : 'body',
navbar: true, // 鏄剧ず瀵艰埅鏍�
toolbar: true, // 鏄剧ず宸ュ叿鏍�
title: true, // 鏄剧ず鏍囬
- });
+ })
}
},
// 鏍规嵁鍏抽敭瀛楀叏鏂囨绱�
searchTextByPage(keyword) {
- const searchResult = [];
- let catalogIndex = 0;
+ const searchResult = []
+ let catalogIndex = 0
// 鎵�鏈夌珷鑺傜粍浠讹紙姣忔湰涔﹀埗浣滄椂鍗曠嫭閰嶇疆锛�
const pageData = {
-
pageHeader,
chapterOne,
chapterTwo,
chapterThree,
chapterFour,
- assemblyOne,
- assemblyTwo
- };
+ chapterfive,
+ chapterSix,
+ chapterSeven,
+ chapterEight
+ // assemblyOne,
+ // assemblyTwo,
+ }
// 閬嶅巻鎵�鏈夌珷鑺傛枃浠�
for (const key in pageData) {
- catalogIndex++;
- let pageComponent, pageExample;
+ catalogIndex++
+ let pageComponent, pageExample
// 鍏堟覆鏌撲竴娆″綋鍓嶇珷鑺傛枃浠讹紙杩欐椂椤甸潰鐨勫唴瀹逛负绌猴級锛岃幏鍙栭〉鐮佷俊鎭�
- pageComponent = Vue.extend(pageData[key]);
+ pageComponent = Vue.extend(pageData[key])
pageExample = new pageComponent({
propsData: {
showPageList: [],
questionData: {},
isSearch: true,
},
- });
+ })
pageExample.$mount(
(this.container ? this.container : document).querySelector(
- "#searchContent"
+ '#searchContent'
)
- );
+ )
// 鑾峰彇椤电爜
const pageDom = (this.container ? this.container : document)
- .querySelector("#searchDomBox")
- .querySelectorAll(".page-box");
- const pages = [];
+ .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")));
+ const pageDomItem = pageDom[i]
+ pages.push(Number(pageDomItem.getAttribute('page')))
}
// 鑾峰彇椤甸潰缁撴潫锛屽嵏杞介攢姣�
- pageExample.$destroy();
- (this.container ? this.container : document).querySelector(
- "#searchDomBox"
- ).innerHTML = '<div id="searchContent"></div>';
+ 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];
+ const pageNum = pages[i]
// 鍔ㄦ�佹覆鏌撳搴旂珷鑺傜殑椤电爜
- pageComponent = Vue.extend(pageData[key]);
+ pageComponent = Vue.extend(pageData[key])
pageExample = new pageComponent({
propsData: {
showPageList: [pageNum],
questionData: {},
isSearch: true,
},
- });
+ })
pageExample.$mount(
(this.container ? this.container : document).querySelector(
- "#searchContent"
+ '#searchContent'
)
- );
+ )
// 鑾峰彇瀵瑰簲椤甸潰dom
const thisPageDom = (this.container ? this.container : document)
- .querySelector("#searchDomBox")
- .querySelector(`[page="${pageNum}"]`);
+ .querySelector('#searchDomBox')
+ .querySelector(`[page="${pageNum}"]`)
if (thisPageDom) {
// 鑾峰彇椤甸潰鎵�鏈塼ext鑺傜偣
const pageTextList = document.createTreeWalker(
thisPageDom,
NodeFilter.SHOW_TEXT
- );
+ )
// 鍖归厤鍏抽敭瀛�
- const allPageTextNodes = [];
- let currentNode = pageTextList.nextNode();
+ const allPageTextNodes = []
+ let currentNode = pageTextList.nextNode()
while (currentNode) {
- allPageTextNodes.push(currentNode);
- currentNode = pageTextList.nextNode();
+ allPageTextNodes.push(currentNode)
+ currentNode = pageTextList.nextNode()
}
for (let i = 0; i < allPageTextNodes.length; i++) {
- const textDom = allPageTextNodes[i];
- let txtIndex = textDom.textContent.indexOf(keyword);
+ const textDom = allPageTextNodes[i]
+ let txtIndex = textDom.textContent.indexOf(keyword)
if (txtIndex > -1) {
// 璁板綍鍏抽敭瀛楁墍鍦ㄩ〉鐮併�佺珷鑺備互鍙婂尮閰嶅埌鐨勬钀�
searchResult.push({
@@ -894,52 +822,53 @@
catalog: catalogIndex,
txt: textDom.textContent,
txtIndex: txtIndex,
- });
+ })
}
}
// 缁撴潫锛屽嵏杞介攢姣�
- pageExample.$destroy();
- (this.container ? this.container : document).querySelector(
- "#searchDomBox"
- ).innerHTML = '<div id="searchContent"></div>';
+ pageExample.$destroy()
+ ; (this.container ? this.container : document).querySelector(
+ '#searchDomBox'
+ ).innerHTML = '<div id="searchContent"></div>'
}
}
}
}
// 杈撳嚭鎼滅储缁撴灉
- console.log(searchResult);
- return searchResult;
+ console.log(searchResult)
+ return searchResult
},
// 鏍规嵁妫�绱㈢粨鏋滆烦杞搴斾綅缃苟楂樹寒
searchItemLocation(data) {
// 璁板綍楂樹寒淇℃伅
- this.highlightData = data;
+ this.highlightData = data
// 璺宠浆
- this.gotoPage(data.catalog, data.page, () => { });
+ this.gotoPage(data.catalog, data.page, () => { })
},
readText() {
const doms = (
this.container ? this.container : document
- ).querySelectorAll(".read-aloud");
+ ).querySelectorAll('.read-aloud')
for (let index = 0; index < doms.length; index++) {
- const dom = doms[index];
- let id = null;
- dom.addEventListener("click", (e) => {
- if (e.srcElement.nodeName == "svg") {
- id = dom.getAttribute("readId")
- } else if (e.srcElement.nodeName == "g") {
- const svgDom = e.srcElement.parentNode;
- id = svgDom.getAttribute("readId");
+ const dom = doms[index]
+ let id = null
+ dom.addEventListener('click', (e) => {
+ if (e.srcElement.nodeName == 'svg') {
+ id = dom.getAttribute('readId')
+ } else if (e.srcElement.nodeName == 'g') {
+ const svgDom = e.srcElement.parentNode
+ id = svgDom.getAttribute('readId')
} else {
- const svgDom = e.srcElement.parentNode.parentNode;
- id = svgDom.getAttribute("readId");
+ const svgDom = e.srcElement.parentNode.parentNode
+ id = svgDom.getAttribute('readId')
}
- const item = (this.container ? this.container : document).querySelector("#" + id).innerText;
- console.log(item, 233);
-
+ const item = (
+ this.container ? this.container : document
+ ).querySelector('#' + id).innerText
+ console.log(item, 233)
})
}
- }
+ },
},
components: {
pageHeader,
@@ -947,8 +876,12 @@
chapterTwo,
chapterThree,
chapterFour,
- assemblyOne,
- assemblyTwo
+ chapterfive,
+ chapterSix,
+ chapterSeven,
+ chapterEight
+ // assemblyOne,
+ // assemblyTwo,
// ChapterFour,
// ChapterFive,
// chapterSix,
@@ -965,5 +898,5 @@
// chapter017,
// chapter018,
},
-};
+}
</script>
--
Gitblit v1.9.1