let beginWid = window.innerWidth; let beginHei = window.innerHeight; //移动设备的高度 // let deviceHeight = document.documentElement.clientHeight; // $('.container').css('height', deviceHeight+'px') var Dom = { font_Pop: $("#font_Pop"), extra_Pop: $("#extra_Pop"), nav_top: $("#nav_top"), nav_bottom: $("#nav_bottom"), icon_Aa: $("#icon_Aa"), icon_extra: $("#icon_extra"), body: $("body"), win: $(window), slider: $("#slider"), icon_mulu: $("#icon_mulu"), mulu_Box: $("#mulu_Box"), mulu_Dialog: $("#mulu_Dialog"), mulu_Mask: $("mulu_Mask"), mulu_Cons: $("#mulu_Cons"), muluList: $("#muluList"), bkList: $("#bk-list"), header: $("#header"), ChapterDialog: $("#ChapterDialog") } var Util = (function () { //封装的本地存储和json数据解析 var prefix = 'function_reader_'; var StorageGetter = function (key) { return localStorage.getItem(prefix + key); } var StorageSetter = function (key, val) { return localStorage.setItem(prefix + key, val); } //通过url来获取加密信息,并解密 var getJsonp = function (url, callback) { return $.jsonp({ url: url, cache: true, callback: 'duokan_fiction_chapter', success: function (result) { //获取加密信息,解码、转json var data = $.base64.decode(result); var json = decodeURIComponent(escape(data)); callback(json); } }) } return { getJsonp: getJsonp, StorageGetter: StorageGetter, StorageSetter: StorageSetter } })(); /***** 存储记录 *****/ //背景颜色 var bgColor = Util.StorageGetter("bgColor") || "rgb(233, 223, 199)"; //默认”纸张“背景颜色 //字体颜色 var fontColor = bgColor === 'rgb(40, 53, 72)' ? "#f8f8f8" : "#000000"; //默认黑色 //字号大小 let size = Util.StorageGetter("font_size") ? parseInt(Util.StorageGetter("font_size")) : 18; var fontSize = size / 16; //数据层的初始化 var readerUIFrame = ReaderBaseFrame($('.Content')); var readerMuluFrame = ReaderMuluFrame($('#muluList'), '初始化') var File_id = 0; var Chapter_id = 0; var ChapterTotal = 0; var ChapterList = []; var readerm = ReaderModel(); readerm.init(function (data, mulu) { readerUIFrame(data); ChapterList = mulu; readerMuluFrame(mulu, '2'); $("#ChapterTitle").text(data.pt); setHtmlStyle() setPageBtnPost() }); //业务事件的初始化 EventHandler(); function ReaderBaseFrame(container) { //UI渲染层 function ParseChapterData(jsonData) { //生成要展示的 html文本 let jsonObj = jsonData; let size = Util.StorageGetter("font_size"); size = size ? parseInt(size) : 18; fontSize = size / 16; let fontSizeAdd6 = (size + 6) / 16; let fontSizeAdd2 = (size + 2) / 16; let html = ""; // 封面-0,扉页-1 不需要展示章节名称 if (!['0', '1'].includes(Chapter_id + '')) { html += `

`; if (jsonObj.pt && jsonObj.pt !== jsonObj.t) { html += `

${jsonObj.pt}

`; } if (!!jsonObj.introduction && jsonObj.introduction.length > 0) { for (let i = 0; i < jsonObj.introduction.length; i++) { html += `

${jsonObj.introduction[i].replace("pStart", '')}

`; } html += `
`; } html += `

${jsonObj.t}

`; } //正文内容 for (let i = 0; i < jsonObj.p.length; i++) { if (Chapter_id == 0) { html += "
" + jsonObj.p[i] + "
"; } else { if (/^##.*/.test(jsonObj.p[i])) { html += `
${jsonObj.p[i].replace('##', '')}
`; } else if (/^#.*/.test(jsonObj.p[i])) { html += `
${jsonObj.p[i].replace('#', '')}
`; } else if (/^\${jsonObj.p[i]}`; } else if (/^&tableTemp.*/.test(jsonObj.p[i])) { let tableTemp = jsonObj.p[i].split("-")[1]; if (!tableTemp) { continue; } if (!jsonObj[tableTemp]) { continue; } let tableObj = jsonObj[tableTemp]; if (JSON.stringify(tableObj) === '{}') { continue; } html += ``; if (!!tableObj.tableTitle) { html += ``; } if (!!tableObj.cTitle) { html += ``; } if (tableObj.tableHead.length) { html += ``; tableObj.tableHead.map((tr, trIndex) => { html += ``; let thList = tr.th; thList.map((item, index) => { html += `'; }) html += ``; }) html += ``; } if (tableObj.tableBody.length) { html += ``; tableObj.tableBody.map(tr => { let tdList = tr.td; html += ``; tdList.length && tdList.map((liDom, index) => { html += ``; }) html += "" }) html += `` } html += `
${tableObj.tableTitle}${tableObj.cTitle}
`; if (item instanceof Array) { item.map((itemLi, liIndex) => { if (itemLi === "|") { html += `` } else { html += `${itemLi}` } }) } else { html += `${item}`; } html += '
${liDom}
`; } else { html += `

${jsonObj.p[i].replace("pStart", '')}

`; } } } html = html.replace("##",) return html; } return function (data) { //返回 渲染后的结果data:解密后的json数据 container.html(ParseChapterData(data)); //设置斜线 setSlash() setPageBtnPost() } } function ReaderMuluFrame(container, flag) { //目录UI渲染层 function ParseChapterMuluData(jsonData) { //生成要展示的 html文本 let mulu = ''; for (let i = 0; i < jsonData.length; i++) { let jsonObj = jsonData[i]; if (jsonObj.children) { mulu += `
  • ${jsonObj.title}
  • '; } else { mulu += `
  • ${jsonObj.title}
  • `; } } mulu = mulu.replace("##",); return mulu; } return function (data) { //返回 渲染后的结果data:解密后的json数据 container.html(ParseChapterMuluData(data)); } } function ReaderModel() { //数据交互层 //todo 获取章节信息 var init = function (Uicallback) { //初始化 信息 getFictionInfo(function (mulu) { getCurChaptInfo(Chapter_id, function (data) { //todo Uicallback && Uicallback(data, mulu); }) }) }; var getFictionInfo = function (callback) { //获取所有章节摘要信息 $.get('data/chapter.json', function (data) { //todo 获取章节信息之后的回调 Chapter_id = parseInt(Util.StorageGetter("ChapterId")); File_id = parseInt(Util.StorageGetter("FileId")); //选择是否从头阅读 if (Chapter_id !== 0) { if (confirm('您要继续上次的阅读么?')) { } else { Chapter_id = 0; } } let list = data.chapters; for (let i = 0; i < list.length; i++) { if (!isFinite(Chapter_id) && list[i].type !== 'file') { Chapter_id = list[i].chapter_id; File_id = list[i].file_id; } if (list[i].children) { ChapterTotal += list[i].children.length; if (!isFinite(Chapter_id)) { Chapter_id = list[i].children[0].chapter_id; File_id = list[i].children[0].file_id; } } else if (list[i].type === 'chapter') { ChapterTotal += 1; } } callback && callback(list); }, 'json'); }; var getCurChaptInfo = function (Chapter_id, callback) { //获取当前Chapter_id章节详细信息 // $.get('data/data' + Chapter_id + '.json', function(data,status) { // //todo 获取详细信息之后的回调 // console.log(status,'status') // if (data.result == 0) { // // var url=data.jsonp; // // Util.getJsonp(url,function(data){ // callback && callback(data); // $("#ChapterTitle").text(data.pt); // // });//通过url来获取加密信息,并解密 // } // }, 'json'); $.getJSON('data/data' + Chapter_id + '.json') .done(function (data) { // 请求成功,文件存在 // console.log("文件存在", data); if (data.result == 0) { callback && callback(data); } }) .fail(function (jqXHR, textStatus, errorThrown) { // console.log("文件不存在",jqXHR); callback && callback({ p: [], t: "", result: 0 }); // 请求出错,文件不存在 // if (jqXHR.status === 404) { // console.log("文件不存在"); // } else { // console.log("请求出错"); // } }); }; var prveChapter = function () { //上一页 Chapter_id = parseInt(Chapter_id); if (Chapter_id == 0) { return; } Chapter_id -= 1; //调用方法获取 Chapter_id章节信息 getCurChaptInfo(Chapter_id, function (data) { readerUIFrame(data); //渲染html数据 }); Util.StorageSetter("ChapterId", Chapter_id); // updateFileId() }; var nextChapter = function () { //下一页 Chapter_id = parseInt(Chapter_id); if (Chapter_id == ChapterTotal - 1) { return; } Chapter_id += 1; //调用方法获取 Chapter_id章节信息 getCurChaptInfo(Chapter_id, function (data) { readerUIFrame(data); }); Util.StorageSetter("ChapterId", Chapter_id); // updateFileId() }; var jumpChapter = function () { //跳页 Chapter_id = parseInt(Chapter_id); File_id = parseInt(File_id); //调用方法获取 Chapter_id章节信息 getCurChaptInfo(Chapter_id, function (data) { readerUIFrame(data); //渲染html数据 }); Util.StorageSetter("ChapterId", Chapter_id); updateFileId() }; var updateFileId = function () { //更新目录一级 file_id for (let item of ChapterList) { if (item.type === 'file') { let obj = item.children.find(child => child.chapter_id == Chapter_id); if (obj) { File_id = obj.file_id; $("#ChapterTitle").text(obj.cTitle); break; } continue; } if (Chapter_id === item.chapter_id) { File_id = item.file_id; $("#ChapterTitle").text(item.cTitle); break; } } Util.StorageSetter("FileId", File_id); } return { init: init, prveChapter: prveChapter, nextChapter: nextChapter, jumpChapter: jumpChapter, } } function EventHandler() { //业务事件处理层 //点击主体中间事件 // $("#action_mid").click(function() { // if (Dom.nav_top.css('display') == "none") { // actNavDialog(true) // } else { // actAllDialog(false) // } // }); //============= let upperElement = document.getElementById('upperElement') upperElement.addEventListener('click', function (event) { var target = event.target; if (['btn_next', 'btn_prev'].includes(target.id)) { } else { if (Dom.nav_top.css('display') == "none") { actNavDialog(true) } else { actAllDialog(false) } } // 判断事件触发的源元素是上层元素还是下层元素 // if (target.id === 'lowerElement') { // // 如果是下层元素,则触发下层元素的事件 // console.log('下层元素的事件被触发'); // // 实现下层元素的事件处理逻辑 // } else { // // 如果是上层元素,则触发上层元素的事件 // console.log('上层元素的事件被触发'); // // 实现上层元素的事件处理逻辑 // } }); //============= //点击返回事件 $(".nav_back_book").click(function () { Chapter_id = parseInt(Chapter_id); if (Chapter_id == 0) { return; } if (Dom.nav_top.css('display') == "none") { return; } Chapter_id = 0; readerm.jumpChapter(); }); //点击目录事件--顶部浮窗 $("#topMulu").click(function () { muluShow("top") }); //点击目录事件--底部导航 $(".btn-mulu").click(function () { muluShow() }); var muluShow = function (type) { Dom.icon_extra.removeClass("act"); if (Dom.mulu_Box.css('display') == 'none') { $('body,html').addClass('notScroll'); Dom.mulu_Box.show(); if (type === 'top') { Dom.mulu_Box.css("bottom", 0) } else { Dom.mulu_Box.css("bottom", 70) } Dom.nav_top.hide(); Dom.mulu_Mask.show(); Dom.mulu_Cons.show(); //章节总数赋值 $('#ChapterTotal').text(ChapterTotal) //给当前选中章节高亮 $(".mui-active").removeClass("mui-active"); $(".highChapter").removeClass("highChapter"); let optDom = $(".parentLi")[File_id]; $(optDom).addClass("mui-active"); $($(optDom).find("a")).each((i, aNode) => { if ($(aNode).data('cid') == Chapter_id) { $(aNode).addClass("highChapter") } }) } else { muluUpdateActive(); actMuluDialog(false); } $("#muluList,#muluList .mui-table-view,.list-li-a,.mui-table-view-cell>a:not(.mui-btn).mui-active").css( 'background-color', bgColor); actFontDialog(false) actExtraDialog(false); } //点击目录列表进行指定跳转 Dom.muluList.on("click", function (e) { let cid = $(e.target).data('cid'); if (cid === undefined || cid === null || cid === "") { return } Chapter_id = cid; File_id = $(e.target).data('fid'); let cSpan = $(e.target).parent().parent("ul").prev(); let cTitle = cSpan[0] ? cSpan[0].text : e.target.text; $("#ChapterTitle").text(cTitle); muluUpdateActive(); readerm.jumpChapter(); actAllDialog(false) window.scrollTo(0, 0); }) // 点击弹窗内容以外的地方关闭弹窗 $("#mulu_Mask").on('click', function (e) { // if ($(e.target).closest('#mui-content').length > 0) { // console.log('弹出框内部被点击了'); // } else { // console.log('弹出框以外的部分被点击了'); // 关闭弹框 actAllDialog(false) // } }); //点击字号事件 $(".btn_Aa").click(function () { Dom.icon_extra.removeClass("act"); if (Dom.font_Pop.css('display') == 'none') { Dom.font_Pop.show(); let size = Util.StorageGetter("font_size"); size = size ? parseInt(size) : 18; Dom.slider.val(size); } else { Dom.font_Pop.hide(); } actMuluDialog(false); actExtraDialog(false); }); //滚动条事件 Dom.win.scroll(function () { actAllDialog(false) }) //点击字体大小事件 Dom.slider.change(function () { let NowFontSize = Number($(this).val()); if (NowFontSize > 24 || NowFontSize < 16) { return; } $("p").css('font-size', NowFontSize / 16 + 'rem'); $("h6").css('font-size', NowFontSize / 16 + 'rem'); $("h4").css('font-size', (NowFontSize + 6) / 16 + 'rem'); $("h5").css('font-size', (NowFontSize + 2) / 16 + 'rem'); Util.StorageSetter("font_size", NowFontSize); }); //点击其他事件 $(".btn-extra").click(function () { Dom.icon_extra.addClass("act"); if (Dom.extra_Pop.css('display') == 'none') { Dom.extra_Pop.show(); if (bgColor) { $(".bk-item").each((i, liDom) => { let nodeSpan = $($(liDom).find(".bk-container")); nodeSpan.removeClass("bk-container-current") let itembg = nodeSpan[0].style.backgroundColor; if (itembg === bgColor) { nodeSpan.addClass("bk-container-current") } }) } } else { Dom.extra_Pop.hide(); } actMuluDialog(false); actFontDialog(false); }); //点击背景颜色切换 Dom.bkList.on("click", function (e) { if (!$(e.target).hasClass("bk-container")) { return } bgColor = $(e.target)[0].style.backgroundColor; updateBgColor($(e.target), "bgCheck") }) //更新颜色设置的选中效果 var updateBgColor = function (target, type) { $(target).addClass("bk-container-current"); let optDom = $(target).parent(".bk-item").siblings(); $(optDom).each((i, liDom) => { $($(liDom).find(".bk-container")).removeClass("bk-container-current") }) let isDark = bgColor === 'rgb(40, 53, 72)'; fontColor = isDark ? "#f8f8f8" : "#000000"; setHtmlStyle(); Util.StorageSetter("bgColor", bgColor); //更新图标 Dom.icon_extra.removeClass().addClass( `bottom-icon act ${isDark ? "dark-icon-extra" : "light-icon-extra"}`); Dom.icon_Aa.removeClass().addClass(`bottom-icon ${isDark ? "dark-icon-Aa" : "light-icon-Aa"}`); Dom.icon_mulu.removeClass().addClass(`bottom-icon ${isDark ? "dark-icon-mulu" : "light-icon-mulu"}`); } $("#btn_prev").click(function () { window.scrollTo(0, 0); readerm.prveChapter(); }); $("#btn_next").click(function () { window.scrollTo(0, 0); readerm.nextChapter(); }); } //设置文本样式 function setHtmlStyle() { Dom.body.css({ 'background-color': bgColor, 'color': fontColor }); $(".bgStyle").css('background-color', bgColor); $(".colorStyle").css('color', fontColor); let isDark = bgColor === 'rgb(40, 53, 72)'; $("#topLeftIcon").removeClass().addClass(`top_left_icon ${isDark ? "dark-icon-mulu" : "light-icon-mulu"}`); $("#nav_icon").removeClass().addClass( `nav_return nav_back_book ${isDark ? "dark-icon-navleft" : "light-icon-navleft"}`); } //整体弹窗 展示控制 function actAllDialog(flag) { actLightDialog(flag); actFontDialog(flag); actMuluDialog(flag); actNavDialog(flag); actExtraDialog(flag); } //光亮设置 展示控制 function actLightDialog(flag) { //展示 if (flag) { return } //隐藏 } //字号设置 展示控制 function actFontDialog(flag) { //展示 if (flag) { let iconClass = bgColor === 'rgb(40, 53, 72)' ? "dark-icon-Aa" : "light-icon-Aa"; Dom.icon_Aa.addClass(iconClass); return } //隐藏 Dom.font_Pop.hide(); } //目录设置 展示控制 function actMuluDialog(flag) { //展示 if (flag) { let iconClass = bgColor === 'rgb(40, 53, 72)' ? "dark-icon-mulu" : "light-icon-mulu"; Dom.icon_mulu.addClass(iconClass); return } //隐藏 Dom.mulu_Box.hide(); Dom.mulu_Mask.hide(); Dom.mulu_Cons.hide(); $('body,html').removeClass('notScroll'); } //其他设置 展示控制 function actExtraDialog(flag) { //展示 if (flag) { return } //隐藏 Dom.extra_Pop.hide(); } //顶部导航+底部导航 展示控制 function actNavDialog(flag) { //展示 if (flag) { Dom.nav_top.show(); Dom.nav_bottom.show(); let isDark = bgColor === 'rgb(40, 53, 72)'; Dom.icon_extra.addClass(`${isDark ? "dark-icon-extra" : "light-icon-extra"}`); Dom.icon_Aa.addClass(`${isDark ? "dark-icon-Aa" : "light-icon-Aa"}`); Dom.icon_mulu.addClass(`${isDark ? "dark-icon-mulu" : "light-icon-mulu"}`); return } //隐藏 Dom.nav_top.hide(); Dom.nav_bottom.hide(); Dom.icon_extra.removeClass().addClass("bottom-icon"); Dom.icon_Aa.removeClass().addClass("bottom-icon"); Dom.icon_mulu.removeClass().addClass("bottom-icon"); } //给当前选中章节高亮,去掉其他 function muluUpdateActive() { $(".parentLi").each((i, liDom) => { $($(liDom).find("a")).each((i, aNode) => { if ($(aNode).data('fid') == File_id) { $(liDom).addClass("mui-active") } else { $(liDom).removeClass("mui-active") } if ($(aNode).data('cid') == Chapter_id) { $(aNode).addClass("highChapter") } else { $(aNode).removeClass("highChapter") } }) }) } //设置斜线 function setSlash() { let hasSlash = $('span').is(".slash"); if (!hasSlash) return; // $('.slash-wrap').each((i, ele) => { /* 斜边边长 */ /* Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2)) */ let width = $(ele).outerWidth(); let height = $(ele).parents('.thead').outerHeight(); let slashWidth = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2)); /* 旋转角度计算公式 */ /* Math.atan(height / width) * 180 / Math.PI */ let transformRole = Math.atan(height / width) * 180 / Math.PI; $(ele).find(".slash").css({ width: slashWidth, transform: `rotate(${transformRole}deg)` }) }) } //设置切换章节按钮位置 function setPageBtnPost() { setTimeout(() => { const btn = document.getElementById('page_btn'); const btnHeight = btn.offsetHeight; const content = document.getElementById('Content'); const contentHeight = content.offsetHeight; // console.log('文本内容高度:', contentHeight); // console.log('按钮高度:', btnHeight); let sumHei = contentHeight + btnHeight; // console.log('总和:', sumHei, "满屏", beginHei); if (sumHei <= beginHei) { console.log('内容高度少于100vh'); $('#page_btn').removeClass('page_btn').addClass('page_btn_fixed'); } else { console.log('内容高度大于等于100vh'); $('#page_btn').removeClass('page_btn_fixed').addClass('page_btn'); } }, 10); } //监听屏幕宽度 const getWindowInfo = () => { const windowInfo = { width: window.innerWidth, hight: window.innerHeight } // console.log(windowInfo,'===========上次的',beginWid); if (windowInfo.width !== beginWid) { setSlash() } }; //防抖 const debounce = (fn, delay) => { let timer; return function () { if (timer) { clearTimeout(timer); } timer = setTimeout(() => { fn(); }, delay); } }; const cancalDebounce = debounce(getWindowInfo, 500); window.addEventListener('resize', cancalDebounce);