From fe07e8a02cb41daac4d34562474b56dec5ab3efd Mon Sep 17 00:00:00 2001
From: 闫增涛 <1829501689@qq.com>
Date: 星期四, 06 六月 2024 11:57:40 +0800
Subject: [PATCH] 音频小窗
---
src/books/English/view/components/index.vue | 217 ++++++++++++++++++++++++++++++++++++++++++++++++++----
1 files changed, 201 insertions(+), 16 deletions(-)
diff --git a/src/books/English/view/components/index.vue b/src/books/English/view/components/index.vue
index 884face..a62ae6a 100644
--- a/src/books/English/view/components/index.vue
+++ b/src/books/English/view/components/index.vue
@@ -14,6 +14,7 @@
></pageHeader>
<chapterOne
@saveCharacters="saveCharacters"
+ @closeMiniAudio="closeMiniAudio"
v-if="showCatalogList.indexOf(2) > -1"
:showPageList="loadPageList"
></chapterOne>
@@ -21,6 +22,7 @@
<miniAudio
:path="audioPath"
:currentTime="currentTime"
+ @closeMiniAudio="closeMiniAudio"
ref="audioPlayer"
></miniAudio>
</div>
@@ -37,10 +39,9 @@
import Viewer from "viewerjs";
import "viewerjs/dist/viewer.css";
export default {
- name: "page-main",
data() {
return {
- catalogLength: 2, // 鎬荤珷鑺傛暟
+ catalogLength: 14, // 鎬荤珷鑺傛暟
showCatalogList: [], // 鏄剧ず鐨勭珷鑺�
loadThreshold: 300, // 瑙﹀彂鍔犺浇闃堝��
throttleThreshold: 100, // 鑺傛祦闃堝��
@@ -49,8 +50,9 @@
observer: null,
loadPageObserver: null,
loadPageList: [],
- questionData: {},
+ questionDataMap: {},
renderSignMap: {},
+ highlightData: null,
audioPath: "",
currentTime: null,
videoList: [],
@@ -91,6 +93,14 @@
}, 200);
},
},
+ pageZoom: {
+ handler(newVal, oldVal) {
+ const scrollBox = (
+ this.container ? this.container : document
+ ).querySelector(".page-main");
+ scrollBox.scrollTop = (scrollBox.scrollTop / oldVal) * newVal;
+ },
+ },
},
mounted() {
// 榛樿鍔犺浇绔犺妭
@@ -117,6 +127,14 @@
// 鍒犻櫎绗旇銆侀珮浜�佸垝绾�
delSign: (data) => {
this.delSign(data);
+ },
+ // 鍏ㄦ枃妫�绱�
+ searchBookByKeyword: (keyword) => {
+ return this.searchTextByPage(keyword);
+ },
+ // 璺宠浆妫�绱㈢粨鏋滀綅缃�
+ jumpSearchItem: (data) => {
+ this.searchItemLocation(data);
},
});
}
@@ -158,14 +176,41 @@
// });
// }, 2000);
// }, 5000);
- // }, 1000);
+
+ // 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
+ // });
+ // }, 5000);
},
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) {
// 鍒ゆ柇鍚戜笂婊氬姩杩樻槸鍚戜笅婊氬姩
if (event.target.scrollTop > this.previousScrollTop) {
- this.getAduio();
+ this.getAduio()
// 鍚戜笅
const currentScrollTop =
event.target.scrollTop + event.target.offsetHeight;
@@ -189,7 +234,7 @@
}
}
} else if (event.target.scrollTop < this.previousScrollTop) {
- this.handleAudio();
+ this.handleAudio()
// 鍚戜笂
const currentScrollTop = event.target.scrollTop;
if (currentScrollTop <= this.loadThreshold) {
@@ -255,6 +300,10 @@
// 娓叉煋鏍囪
renderSign(type, data) {
+ // 鐖跺眰璁剧疆绂佹娓叉煋鏍囪鏃朵笉鍐嶈繘琛屾覆鏌�
+ if (this.$store.state.qiankun.disableSign) {
+ return false;
+ }
const existence = (
this.container ? this.container : document
).querySelector(`[dataid="${data.id}"]`);
@@ -264,10 +313,7 @@
this.container ? this.container : document
).querySelector(`[page="${data.page}"]`);
// 鍒涘缓 createTreeWalker 杩唬鍣紝鐢ㄤ簬閬嶅巻鏂囨湰鑺傜偣锛屼繚瀛樺埌涓�涓暟缁�
- const treeWalker = document.createTreeWalker(
- pageDom,
- NodeFilter.SHOW_TEXT
- );
+ const treeWalker = document.createTreeWalker(pageDom, NodeFilter.SHOW_TEXT);
const allTextNodes = [];
let currentNode = treeWalker.nextNode();
while (currentNode) {
@@ -443,6 +489,7 @@
});
},
getParentWithClass(element, className) {
+ console.log(element, className, "element, className");
while (element.parentElement) {
element = element.parentElement;
if (element.classList.contains(className)) {
@@ -492,11 +539,11 @@
"chapter"
);
const catalog = catalogDom.getAttribute("num");
- // if (!this.questionData[page]) {
+ // if (!this.questionDataMap[page]) {
// if (testData && testData[catalog]) {
// if (testData[catalog][page]) {
// if (Array.isArray(testData[catalog][page])) {
- // this.questionData[page] = await getQuestionList(
+ // this.questionDataMap[page] = await getQuestionList(
// page,
// testData[catalog][page],
// this.config.activeBook
@@ -510,9 +557,9 @@
// this.config.activeBook
// );
// }
- // this.questionData[page] = obj;
+ // this.questionDataMap[page] = obj;
// }
- // console.log("棰樼洰", this.questionData);
+ // console.log("棰樼洰", this.questionDataMap);
// }
// }
// }
@@ -525,6 +572,36 @@
this.renderSign(key, item);
});
}
+ }
+ // 澶勭悊楂樹寒
+ if (this.highlightData) {
+ // 楂樹寒琛�
+ setTimeout(() => {
+ // 鑾峰彇椤甸潰鎵�鏈塼ext鑺傜偣
+ 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椤�
@@ -629,7 +706,111 @@
});
}
},
- // 鐐瑰嚮浜嬩欢锛氬皢鐢熷兓鍗曡瘝浼犵粰 涓诲簲鐢� 浠庤�岃皟鐢ㄨ瘝鍏稿姛鑳�
+ // 鏍规嵁鍏抽敭瀛楀叏鏂囨绱�
+ searchTextByPage(keyword) {
+ const searchResult = [];
+ let catalogIndex = 0;
+ // 鎵�鏈夌珷鑺傜粍浠讹紙姣忔湰涔﹀埗浣滄椂鍗曠嫭閰嶇疆锛�
+ const pageData = {
+ pageHeader,
+ chapterOne,
+ };
+ // 閬嶅巻鎵�鏈夌珷鑺傛枃浠�
+ for (const key in pageData) {
+ catalogIndex++;
+ let pageComponent, pageExample;
+ // 鍏堟覆鏌撲竴娆″綋鍓嶇珷鑺傛枃浠讹紙杩欐椂椤甸潰鐨勫唴瀹逛负绌猴級锛岃幏鍙栭〉鐮佷俊鎭�
+ pageComponent = Vue.extend(pageData[key]);
+ pageExample = new pageComponent({
+ propsData: {
+ showPageList: [],
+ questionData: {},
+ },
+ });
+ 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: {},
+ },
+ });
+ pageExample.$mount(
+ (this.container ? this.container : document).querySelector(
+ "#searchContent"
+ )
+ );
+ // 鑾峰彇瀵瑰簲椤甸潰dom
+ const thisPageDom = (this.container ? this.container : document)
+ .querySelector("#searchDomBox")
+ .querySelector(`[page="${pageNum}"]`);
+ if (thisPageDom) {
+ // 鑾峰彇椤甸潰鎵�鏈塼ext鑺傜偣
+ 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, () => {});
+ },
+ // 鐐瑰嚮浜嬩欢锛氬皢鐢熷兓鍗曡瘝浼犵粰 涓诲簲鐢� 浠庤�岃皟鐢ㄨ瘝鍏稿姛鑳�
saveCharacters(event, word) {
console.log("鐢熷兓瀛�", event, word);
if (this.$store.state.qiankun && this.$store.state.qiankun.chooseWords) {
@@ -687,11 +868,15 @@
}
}
},
+ // 鍏抽棴mini video
+ closeMiniAudio() {
+ this.audioPath = ''
+ }
},
components: {
pageHeader,
chapterOne,
- miniAudio,
+ miniAudio
},
};
</script>
--
Gitblit v1.9.1