bookdetail.html 27 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  6. <link rel="shortcut icon" href="favicon.ico" />
  7. <link rel="bookmark" href="favicon.ico" type="image/x-icon" />
  8. <title>2023年中国航油-管理年鉴</title>
  9. <link rel="stylesheet" href="css/mui.min.css">
  10. <link rel="stylesheet" href="css/reset.css" />
  11. <link rel="stylesheet" href="css/main.css" />
  12. <style>
  13. .m-artical-action-mid {
  14. position: fixed;
  15. width: 100%;
  16. height: 40%;
  17. top: 30%;
  18. z-index: 9998;
  19. }
  20. #muluList {
  21. /*避免导航边框和列表背景边框重叠,看起来像两条边框似得;*/
  22. margin-top: -1px;
  23. }
  24. .highChapter {
  25. color: red !important;
  26. }
  27. </style>
  28. </head>
  29. <body>
  30. <div>
  31. <!-- 中间点击层 -->
  32. <!-- <div class="m-artical-action">
  33. <div class="m-artical-action-mid" id="action_mid"></div>
  34. </div> -->
  35. <!-- 顶部导航 -->
  36. <div class="nav-top colorStyle bgStyle" id="nav_top" style="display: none;">
  37. <div class="nav_container">
  38. <div class="nav_return nav_back_book" id="nav_icon"></div>
  39. <div class="nav_text nav_back_book" id="nav_text">返回首页</div>
  40. </div>
  41. </div>
  42. <!-- 主体内容 -->
  43. <header id="header" class="top_mulu_box colorStyle bgStyle">
  44. <div class="top_left" style="cursor: pointer;">
  45. <div class="top_left_icon" id="topLeftIcon"></div>
  46. <div class="top_left_text" id="topMulu">目录</div>
  47. </div>
  48. <div class="top_center">
  49. <div class="top_center_text" id="ChapterTitle"></div>
  50. </div>
  51. <div class="top_right"></div>
  52. </header>
  53. <div id="upperElement" style="height: 100vh;width: 100vw;">
  54. <div class="container">
  55. <div class="Content">
  56. <!-- 内容动态加载 -->
  57. </div>
  58. <div class="page_btn">
  59. <button class="btn-prev colorStyle bgStyle" id="btn_prev">上一章</button>
  60. <button class="btn-next colorStyle bgStyle" id="btn_next">下一章</button>
  61. </div>
  62. </div>
  63. </div>
  64. <!-- 底部导航栏 -->
  65. <div class="nav-bottom colorStyle bgStyle" id="nav_bottom" style="display: none;">
  66. <div class="btn-mulu">
  67. <div class="mulu">
  68. <div class="bottom-icon" id="icon_mulu"> </div>
  69. <div class="text_mulu">目录</div>
  70. </div>
  71. </div>
  72. <div class="btn_Aa">
  73. <div class="Aa">
  74. <div class="bottom-icon" id="icon_Aa"> </div>
  75. <div class="text_Aa">字号</div>
  76. </div>
  77. </div>
  78. <div class="btn-extra">
  79. <div class="extra">
  80. <div class="bottom-icon" id="icon_extra"> </div>
  81. <div class="text_extra">其他</div>
  82. </div>
  83. </div>
  84. <!-- 其他功能栏 -->
  85. <div class="extraPop colorStyle bgStyle" id="extra_Pop" style="display: none;">
  86. <div class="fontItem">
  87. <span class="fontItemTitle">背景</span>
  88. <div class="fontItemCons" id="bk-list">
  89. <div class="bk-item" id="mb">
  90. <div class="bk-container" style="background-color: rgb(247, 238, 229);"></div>
  91. <span>米白</span>
  92. </div>
  93. <div class="bk-item" id="zz">
  94. <div class="bk-container" style="background-color: rgb(233, 223, 199);"></div>
  95. <span>纸张</span>
  96. </div>
  97. <div class="bk-item" id="qh">
  98. <div class="bk-container" style="background-color: rgb(164, 164, 164);"></div>
  99. <span>浅灰</span>
  100. </div>
  101. <div class="bk-item" id="hy">
  102. <div class="bk-container" style="background-color: rgb(205, 239, 206);"></div>
  103. <span>护眼</span>
  104. </div>
  105. <div class="bk-item" id="hl">
  106. <div class="bk-container" style="background-color: rgb(40, 53, 72);"></div>
  107. <span>海蓝</span>
  108. </div>
  109. </div>
  110. </div>
  111. </div>
  112. <!-- 字号功能栏 -->
  113. <div class="fontPop colorStyle bgStyle" id="font_Pop" style="display: none;">
  114. <div class="fontItem">
  115. <span class="fontItemTitle">字号</span>
  116. <div class="fontItemCons">
  117. 小<input style="width: 80%; margin: 0 auto;" type="range" id="slider" name="slider" min="16"
  118. max="24" step="1">大
  119. </div>
  120. </div>
  121. </div>
  122. </div>
  123. <!-- 目录 -->
  124. <div class="muluBox colorStyle" id="mulu_Box" style="display: none;">
  125. <div class="muluMask" id="mulu_Mask"></div>
  126. <div class="muluCons bgStyle" id="mulu_Cons">
  127. <div class="muluTitle">
  128. <div>共<span id="ChapterTotal"></span>章</div>
  129. </div>
  130. <div class="mui-content">
  131. <ul id="muluList" class="mui-table-view mui-table-view-chevron">
  132. <!-- 目录动态加载 -->
  133. </ul>
  134. </div>
  135. </div>
  136. </div>
  137. </div>
  138. <script src="js/mui.min.js"></script>
  139. <script type="text/javascript" src="js/jquery.min.js"></script>
  140. <script type="text/javascript" src="js/jquery.jsonp.js"></script>
  141. <script type="text/javascript" src="js/jquery.base64.js"></script>
  142. <script>
  143. //移动设备的高度
  144. let deviceHeight = document.documentElement.clientHeight;
  145. // $('.container').css('height', deviceHeight+'px')
  146. //
  147. var Dom = {
  148. font_Pop: $("#font_Pop"),
  149. extra_Pop: $("#extra_Pop"),
  150. nav_top: $("#nav_top"),
  151. nav_bottom: $("#nav_bottom"),
  152. icon_Aa: $("#icon_Aa"),
  153. icon_extra: $("#icon_extra"),
  154. body: $("body"),
  155. win: $(window),
  156. slider: $("#slider"),
  157. icon_mulu: $("#icon_mulu"),
  158. mulu_Box: $("#mulu_Box"),
  159. mulu_Dialog: $("#mulu_Dialog"),
  160. mulu_Mask: $("mulu_Mask"),
  161. mulu_Cons: $("#mulu_Cons"),
  162. muluList: $("#muluList"),
  163. bkList: $("#bk-list"),
  164. header: $("#header"),
  165. ChapterDialog: $("#ChapterDialog")
  166. }
  167. var Util = (function() { //封装的本地存储和json数据解析
  168. var prefix = 'function_reader_';
  169. var StorageGetter = function(key) {
  170. return localStorage.getItem(prefix + key);
  171. }
  172. var StorageSetter = function(key, val) {
  173. return localStorage.setItem(prefix + key, val);
  174. }
  175. //通过url来获取加密信息,并解密
  176. var getJsonp = function(url, callback) {
  177. return $.jsonp({
  178. url: url,
  179. cache: true,
  180. callback: 'duokan_fiction_chapter',
  181. success: function(result) {
  182. //获取加密信息,解码、转json
  183. var data = $.base64.decode(result);
  184. var json = decodeURIComponent(escape(data));
  185. callback(json);
  186. }
  187. })
  188. }
  189. return {
  190. getJsonp: getJsonp,
  191. StorageGetter: StorageGetter,
  192. StorageSetter: StorageSetter
  193. }
  194. })();
  195. /***** 存储记录 *****/
  196. //背景颜色
  197. var bgColor = Util.StorageGetter("bgColor") || "rgb(233, 223, 199)"; //默认”纸张“背景颜色
  198. //字体颜色
  199. var fontColor = bgColor === 'rgb(40, 53, 72)' ? "#f8f8f8" : "#000000"; //默认黑色
  200. //字号大小
  201. let size = Util.StorageGetter("font_size") ? parseInt(Util.StorageGetter("font_size")) : 18;
  202. var fontSize = size / 16;
  203. //数据层的初始化
  204. var readerUIFrame = ReaderBaseFrame($('.Content'));
  205. var readerMuluFrame = ReaderMuluFrame($('#muluList'), '初始化')
  206. var File_id = 0;
  207. var Chapter_id = 0;
  208. var ChapterTotal = 0;
  209. var ChapterList = [];
  210. var readerm = ReaderModel();
  211. readerm.init(function(data, mulu) {
  212. readerUIFrame(data);
  213. ChapterList = mulu;
  214. readerMuluFrame(mulu, '2');
  215. $("#ChapterTitle").text(data.ct);
  216. setHtmlStyle()
  217. });
  218. //业务事件的初始化
  219. EventHandler();
  220. function ReaderBaseFrame(container) { //UI渲染层
  221. function ParseChapterData(jsonData) { //生成要展示的 html文本
  222. let jsonObj = jsonData;
  223. let size = Util.StorageGetter("font_size");
  224. size = size ? parseInt(size) : 18;
  225. fontSize = size / 16;
  226. let fontSizeAdd6 = (size + 6) / 16;
  227. let fontSizeAdd2 = (size + 2) / 16;
  228. let html = "";
  229. if (!!jsonObj.introduction && jsonObj.introduction.length > 0) {
  230. html += "<br/><br/><br/>";
  231. for (let i = 0; i < jsonObj.introduction.length; i++) {
  232. html +=
  233. `<p class="colorStyle" style="font-size:${fontSize}rem;color:${fontColor}">${jsonObj.introduction[i]}</p>`;
  234. }
  235. }
  236. // 封面-0,扉页-1 不需要展示章节名称
  237. if (!['0', '1'].includes(Chapter_id + '')) {
  238. html += `<br/><br/><br/>`;
  239. if (jsonObj.ct && jsonObj.ct !== jsonObj.t) {
  240. html += `<h3 style=font-size:${fontSizeAdd6};color:${fontColor}">${jsonObj.ct}</h3><br/>`;
  241. }
  242. html += `<h4 style=font-size:${fontSizeAdd6};color:${fontColor}">${jsonObj.t}</h4>`;
  243. }
  244. //正文内容
  245. for (let i = 0; i < jsonObj.p.length; i++) {
  246. if (Chapter_id == 0) {
  247. html += "<div>" + jsonObj.p[i] + "</div>";
  248. } else {
  249. if (/^##.*/.test(jsonObj.p[i])) {
  250. html +=
  251. `<h6 class="colorStyle" style="line-height: 2.0625rem; padding: 1.25rem 0 0.3125rem; font-weight: bold; font-size:${fontSize}rem;color:${fontColor}">${jsonObj.p[i].replace('##', '')}</h6>`;
  252. } else if (/^#.*/.test(jsonObj.p[i])) {
  253. html +=
  254. `<h5 class="colorStyle" style="line-height: 2.1875rem; padding: 0.625rem 0; font-weight: bold; font-size:${fontSizeAdd2}rem;color:${fontColor}">${jsonObj.p[i].replace('#', '')}</h5>`;
  255. } else if (/^\<img.*/.test(jsonObj.p[i])) {
  256. html +=
  257. `<div style="margin-bottom:1.25rem;">${jsonObj.p[i]}</div>`;
  258. } else if (/^&tableTemp.*/.test(jsonObj.p[i])) {
  259. let tableTemp = jsonObj.p[i].split("-")[1];
  260. if (!tableTemp) {
  261. continue;
  262. }
  263. if (!jsonObj[tableTemp]) {
  264. continue;
  265. }
  266. let tableObj = jsonObj[tableTemp];
  267. if (JSON.stringify(tableObj) === '{}') {
  268. continue;
  269. }
  270. html +=
  271. `<table class="table ${tableObj.className||''}" style="${tableObj.style||''}" cellpadding="0" cellspacing="0">`;
  272. if (!!tableObj.tableTitle) {
  273. html += `<caption class="caption">${tableObj.tableTitle}</caption>`;
  274. }
  275. if (!!tableObj.cTitle) {
  276. html += `<caption class="caption secCaption cTitle">${tableObj.cTitle}</caption>`;
  277. }
  278. if (tableObj.tableHead.length) {
  279. html += `<thead class="thead">`;
  280. tableObj.tableHead.map((tr, trIndex) => {
  281. html += `<tr class="tr">`;
  282. let thList = tr.th;
  283. thList.map((item, index) => {
  284. html +=
  285. `<th class="th ${item instanceof Array ? 'slash-wrap':''}" style="${tr.style && tr.style[index]||''}" colspan="${tr.colSpan&&tr.colSpan[index]||1}" rowspan="${tr.rowSpan&&tr.rowSpan[index]||1}">`;
  286. if (item instanceof Array) {
  287. item.map((itemLi, liIndex) => {
  288. if (itemLi === "|") {
  289. html += `<span class="slash"></span>`
  290. } else {
  291. html +=
  292. `<span class="${liIndex===0?'left':'right'}" style="${liIndex===0?tr.slash&&tr.slash.leftText||'':tr.slash&&tr.slash.rightText||''}">${itemLi}</span>`
  293. }
  294. })
  295. } else {
  296. html += `${item}`;
  297. }
  298. html += '</th>';
  299. })
  300. html += `</tr>`;
  301. })
  302. html += `</thead>`;
  303. }
  304. if (tableObj.tableBody.length) {
  305. html += `<tbody class="tbody">`;
  306. tableObj.tableBody.map(tr => {
  307. let tdList = tr.td;
  308. html += `<tr class="tr">`;
  309. tdList.length && tdList.map((liDom, index) => {
  310. html +=
  311. `<td class="td" style="${tr.style&&tr.style[index]||''}" colspan="${tr.colSpan&&tr.colSpan[index]||1}" rowspan="${tr.rowSpan&&tr.rowSpan[index]||1}">${liDom}</td>`;
  312. })
  313. html += "</tr>"
  314. })
  315. html += `</tbody>`
  316. }
  317. html += `</table>`;
  318. } else {
  319. html +=
  320. `<p class="colorStyle" style="font-size:${fontSize}rem;color:${fontColor};text-align:${jsonObj.p[i].substr(0, 6) === 'pStart' ? 'start' : 'justify'}">${jsonObj.p[i].replace("pStart", '')}</p>`;
  321. }
  322. }
  323. }
  324. html = html.replace("##", )
  325. return html;
  326. }
  327. return function(data) { //返回 渲染后的结果data:解密后的json数据
  328. container.html(ParseChapterData(data));
  329. //设置斜线
  330. let hasSlash = $('span').is(".slash");
  331. if (!hasSlash) return;
  332. //
  333. $('.slash-wrap').each((i, ele) => {
  334. /* 斜边边长 */
  335. /* Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2)) */
  336. let width = $(ele).outerWidth();
  337. let height = $(ele).parents('.thead').outerHeight();
  338. let slashWidth = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));
  339. /* 旋转角度计算公式 */
  340. /* Math.atan(height / width) * 180 / Math.PI */
  341. let transformRole = Math.atan(height / width) * 180 / Math.PI;
  342. $(ele).find(".slash").css({
  343. width: slashWidth,
  344. transform: `rotate(${transformRole}deg)`
  345. })
  346. })
  347. }
  348. }
  349. function ReaderMuluFrame(container, flag) { //目录UI渲染层
  350. function ParseChapterMuluData(jsonData) { //生成要展示的 html文本
  351. let mulu = '';
  352. for (let i = 0; i < jsonData.length; i++) {
  353. let jsonObj = jsonData[i];
  354. if (jsonObj.children) {
  355. mulu +=
  356. `<li class="mui-table-view-cell mui-collapse parentLi"><a class="mui-navigate-right list-li-a" data-cid="${jsonObj.chapter_id}" data-fid="${jsonObj.file_id}" href="#">${jsonObj.title}</a><ul class="mui-table-view mui-table-view-chevron">`;
  357. for (let k = 0; k < jsonObj.children.length; k++) {
  358. mulu += `<li class="mui-table-view-cell"><a class="mui-navigate-right list-li-a" data-cid="${jsonObj.children[k].chapter_id}" data-fid="${jsonObj.children[k].file_id}" href="#">
  359. ${jsonObj.children[k].title}</a></li>`;
  360. }
  361. mulu += '</ul></li>';
  362. } else {
  363. mulu += `<li class="mui-table-view-cell parentLi"><a class="mui-navigate-right list-li-a" data-cid="${jsonObj.chapter_id}" data-cid="${jsonObj.file_id}" href="#">${jsonObj.title}
  364. </a></li>`;
  365. }
  366. }
  367. mulu = mulu.replace("##", );
  368. return mulu;
  369. }
  370. return function(data) { //返回 渲染后的结果data:解密后的json数据
  371. container.html(ParseChapterMuluData(data));
  372. }
  373. }
  374. function ReaderModel() { //数据交互层
  375. //todo 获取章节信息
  376. var init = function(Uicallback) { //初始化 信息
  377. getFictionInfo(function(mulu) {
  378. getCurChaptInfo(Chapter_id, function(data) {
  379. //todo
  380. Uicallback && Uicallback(data, mulu);
  381. })
  382. })
  383. };
  384. var getFictionInfo = function(callback) { //获取所有章节摘要信息
  385. $.get('data/chapter.json', function(data) {
  386. //todo 获取章节信息之后的回调
  387. Chapter_id = parseInt(Util.StorageGetter("ChapterId"));
  388. File_id = parseInt(Util.StorageGetter("FileId"));
  389. //选择是否从头阅读
  390. if (Chapter_id !== 0) {
  391. if (confirm('您要继续上次的阅读么?')) {} else {
  392. Chapter_id = 0;
  393. }
  394. }
  395. let list = data.chapters;
  396. for (let i = 0; i < list.length; i++) {
  397. if (!isFinite(Chapter_id) && list[i].type !== 'file') {
  398. Chapter_id = list[i].chapter_id;
  399. File_id = list[i].file_id;
  400. }
  401. if (list[i].children) {
  402. ChapterTotal += list[i].children.length;
  403. if (!isFinite(Chapter_id)) {
  404. Chapter_id = list[i].children[0].chapter_id;
  405. File_id = list[i].children[0].file_id;
  406. }
  407. } else if (list[i].type === 'chapter') {
  408. ChapterTotal += 1;
  409. }
  410. }
  411. callback && callback(list);
  412. }, 'json');
  413. };
  414. var getCurChaptInfo = function(Chapter_id, callback) { //获取当前Chapter_id章节详细信息
  415. // $.get('data/data' + Chapter_id + '.json', function(data,status) {
  416. // //todo 获取详细信息之后的回调
  417. // console.log(status,'status')
  418. // if (data.result == 0) {
  419. // // var url=data.jsonp;
  420. // // Util.getJsonp(url,function(data){
  421. // callback && callback(data);
  422. // $("#ChapterTitle").text(data.ct);
  423. // // });//通过url来获取加密信息,并解密
  424. // }
  425. // }, 'json');
  426. $.getJSON('data/data' + Chapter_id + '.json')
  427. .done(function(data) {
  428. // 请求成功,文件存在
  429. // console.log("文件存在", data);
  430. if (data.result == 0) {
  431. callback && callback(data);
  432. }
  433. })
  434. .fail(function(jqXHR, textStatus, errorThrown) {
  435. // console.log("文件不存在",jqXHR);
  436. callback && callback({
  437. p: [],
  438. t: "",
  439. result: 0
  440. });
  441. // 请求出错,文件不存在
  442. // if (jqXHR.status === 404) {
  443. // console.log("文件不存在");
  444. // } else {
  445. // console.log("请求出错");
  446. // }
  447. });
  448. };
  449. var prveChapter = function() { //上一页
  450. Chapter_id = parseInt(Chapter_id);
  451. if (Chapter_id == 0) {
  452. return;
  453. }
  454. Chapter_id -= 1;
  455. //调用方法获取 Chapter_id章节信息
  456. getCurChaptInfo(Chapter_id, function(data) {
  457. readerUIFrame(data); //渲染html数据
  458. });
  459. Util.StorageSetter("ChapterId", Chapter_id);
  460. //
  461. updateFileId()
  462. };
  463. var nextChapter = function() { //下一页
  464. Chapter_id = parseInt(Chapter_id);
  465. if (Chapter_id == ChapterTotal - 1) {
  466. return;
  467. }
  468. Chapter_id += 1;
  469. //调用方法获取 Chapter_id章节信息
  470. getCurChaptInfo(Chapter_id, function(data) {
  471. readerUIFrame(data);
  472. });
  473. Util.StorageSetter("ChapterId", Chapter_id);
  474. //
  475. updateFileId()
  476. };
  477. var jumpChapter = function() { //跳页
  478. Chapter_id = parseInt(Chapter_id);
  479. File_id = parseInt(File_id);
  480. //调用方法获取 Chapter_id章节信息
  481. getCurChaptInfo(Chapter_id, function(data) {
  482. readerUIFrame(data); //渲染html数据
  483. });
  484. Util.StorageSetter("ChapterId", Chapter_id);
  485. updateFileId()
  486. };
  487. var updateFileId = function() { //更新目录一级 file_id
  488. for (let item of ChapterList) {
  489. if (item.type === 'file') {
  490. let obj = item.children.find(child => child.chapter_id == Chapter_id);
  491. if (obj) {
  492. File_id = obj.file_id;
  493. $("#ChapterTitle").text(obj.cTitle);
  494. break;
  495. }
  496. continue;
  497. }
  498. if (Chapter_id === item.chapter_id) {
  499. File_id = item.file_id;
  500. $("#ChapterTitle").text(item.cTitle);
  501. break;
  502. }
  503. }
  504. Util.StorageSetter("FileId", File_id);
  505. }
  506. return {
  507. init: init,
  508. prveChapter: prveChapter,
  509. nextChapter: nextChapter,
  510. jumpChapter: jumpChapter,
  511. }
  512. }
  513. function EventHandler() { //业务事件处理层
  514. //点击主体中间事件
  515. // $("#action_mid").click(function() {
  516. // if (Dom.nav_top.css('display') == "none") {
  517. // actNavDialog(true)
  518. // } else {
  519. // actAllDialog(false)
  520. // }
  521. // });
  522. //=============
  523. let upperElement = document.getElementById('upperElement')
  524. upperElement.addEventListener('click', function(event) {
  525. var target = event.target;
  526. if (['btn_next', 'btn_prev'].includes(target.id)) {
  527. } else {
  528. if (Dom.nav_top.css('display') == "none") {
  529. actNavDialog(true)
  530. } else {
  531. actAllDialog(false)
  532. }
  533. }
  534. // 判断事件触发的源元素是上层元素还是下层元素
  535. // if (target.id === 'lowerElement') {
  536. // // 如果是下层元素,则触发下层元素的事件
  537. // console.log('下层元素的事件被触发');
  538. // // 实现下层元素的事件处理逻辑
  539. // } else {
  540. // // 如果是上层元素,则触发上层元素的事件
  541. // console.log('上层元素的事件被触发');
  542. // // 实现上层元素的事件处理逻辑
  543. // }
  544. });
  545. //=============
  546. //点击返回事件
  547. $(".nav_back_book").click(function() {
  548. Chapter_id = parseInt(Chapter_id);
  549. if (Chapter_id == 0) {
  550. return;
  551. }
  552. if (Dom.nav_top.css('display') == "none") {
  553. return;
  554. }
  555. Chapter_id = 0;
  556. readerm.jumpChapter();
  557. });
  558. //点击目录事件--顶部浮窗
  559. $("#topMulu").click(function() {
  560. muluShow("top")
  561. });
  562. //点击目录事件--底部导航
  563. $("#icon_mulu").click(function() {
  564. muluShow()
  565. });
  566. var muluShow = function(type) {
  567. Dom.icon_extra.removeClass("act");
  568. if (Dom.mulu_Box.css('display') == 'none') {
  569. $('body,html').addClass('notScroll');
  570. Dom.mulu_Box.show();
  571. if (type === 'top') {
  572. Dom.mulu_Box.css("bottom", 0)
  573. } else {
  574. Dom.mulu_Box.css("bottom", 70)
  575. }
  576. Dom.nav_top.hide();
  577. Dom.mulu_Mask.show();
  578. Dom.mulu_Cons.show();
  579. //章节总数赋值
  580. $('#ChapterTotal').text(ChapterTotal)
  581. //给当前选中章节高亮
  582. $(".mui-active").removeClass("mui-active");
  583. $(".highChapter").removeClass("highChapter");
  584. let optDom = $(".parentLi")[File_id];
  585. $(optDom).addClass("mui-active");
  586. $($(optDom).find("a")).each((i, aNode) => {
  587. if ($(aNode).data('cid') == Chapter_id) {
  588. $(aNode).addClass("highChapter")
  589. }
  590. })
  591. } else {
  592. muluUpdateActive();
  593. actMuluDialog(false);
  594. }
  595. $("#muluList,#muluList .mui-table-view,.list-li-a,.mui-table-view-cell>a:not(.mui-btn).mui-active").css(
  596. 'background-color', bgColor);
  597. actFontDialog(false)
  598. actExtraDialog(false);
  599. }
  600. //点击目录列表进行指定跳转
  601. Dom.muluList.on("click", function(e) {
  602. let cid = $(e.target).data('cid');
  603. if (cid === undefined || cid === null || cid === "") {
  604. return
  605. }
  606. Chapter_id = cid;
  607. File_id = $(e.target).data('fid');
  608. let cSpan = $(e.target).parent().parent("ul").prev();
  609. let cTitle = cSpan[0] ? cSpan[0].text : e.target.text;
  610. $("#ChapterTitle").text(cTitle);
  611. muluUpdateActive();
  612. readerm.jumpChapter();
  613. actAllDialog(false)
  614. window.scrollTo(0, 0);
  615. })
  616. // 点击弹窗内容以外的地方关闭弹窗
  617. $("#mulu_Mask").on('click', function(e) {
  618. // if ($(e.target).closest('#mui-content').length > 0) {
  619. // console.log('弹出框内部被点击了');
  620. // } else {
  621. // console.log('弹出框以外的部分被点击了');
  622. // 关闭弹框
  623. actAllDialog(false)
  624. // }
  625. });
  626. //点击字号事件
  627. $(".btn_Aa").click(function() {
  628. Dom.icon_extra.removeClass("act");
  629. if (Dom.font_Pop.css('display') == 'none') {
  630. Dom.font_Pop.show();
  631. Dom.slider.val(fontSize);
  632. } else {
  633. Dom.font_Pop.hide();
  634. }
  635. actMuluDialog(false);
  636. actExtraDialog(false);
  637. });
  638. //滚动条事件
  639. Dom.win.scroll(function() {
  640. actAllDialog(false)
  641. })
  642. //点击字体大小事件
  643. Dom.slider.change(function() {
  644. let NowFontSize = Number($(this).val());
  645. if (NowFontSize > 24 || NowFontSize < 16) {
  646. return;
  647. }
  648. $("p").css('font-size', NowFontSize / 16 + 'rem');
  649. $("h6").css('font-size', NowFontSize / 16 + 'rem');
  650. $("h4").css('font-size', (NowFontSize + 6) / 16 + 'rem');
  651. $("h5").css('font-size', (NowFontSize + 2) / 16 + 'rem');
  652. Util.StorageSetter("font_size", NowFontSize);
  653. });
  654. //点击其他事件
  655. $(".btn-extra").click(function() {
  656. Dom.icon_extra.addClass("act");
  657. if (Dom.extra_Pop.css('display') == 'none') {
  658. Dom.extra_Pop.show();
  659. if (bgColor) {
  660. $(".bk-item").each((i, liDom) => {
  661. let nodeSpan = $($(liDom).find(".bk-container"));
  662. nodeSpan.removeClass("bk-container-current")
  663. let itembg = nodeSpan[0].style.backgroundColor;
  664. if (itembg === bgColor) {
  665. nodeSpan.addClass("bk-container-current")
  666. }
  667. })
  668. }
  669. } else {
  670. Dom.extra_Pop.hide();
  671. }
  672. actMuluDialog(false);
  673. actFontDialog(false);
  674. });
  675. //点击背景颜色切换
  676. Dom.bkList.on("click", function(e) {
  677. if (!$(e.target).hasClass("bk-container")) {
  678. return
  679. }
  680. bgColor = $(e.target)[0].style.backgroundColor;
  681. updateBgColor($(e.target), "bgCheck")
  682. })
  683. //更新颜色设置的选中效果
  684. var updateBgColor = function(target, type) {
  685. $(target).addClass("bk-container-current");
  686. let optDom = $(target).parent(".bk-item").siblings();
  687. $(optDom).each((i, liDom) => {
  688. $($(liDom).find(".bk-container")).removeClass("bk-container-current")
  689. })
  690. let isDark = bgColor === 'rgb(40, 53, 72)';
  691. fontColor = isDark ? "#f8f8f8" : "#000000";
  692. setHtmlStyle();
  693. Util.StorageSetter("bgColor", bgColor);
  694. //更新图标
  695. Dom.icon_extra.removeClass().addClass(
  696. `bottom-icon act ${isDark ? "dark-icon-extra" : "light-icon-extra"}`);
  697. Dom.icon_Aa.removeClass().addClass(`bottom-icon ${isDark ? "dark-icon-Aa" : "light-icon-Aa"}`);
  698. Dom.icon_mulu.removeClass().addClass(`bottom-icon ${isDark ? "dark-icon-mulu" : "light-icon-mulu"}`);
  699. }
  700. $("#btn_prev").click(function() {
  701. window.scrollTo(0, 0);
  702. readerm.prveChapter();
  703. });
  704. $("#btn_next").click(function() {
  705. window.scrollTo(0, 0);
  706. readerm.nextChapter();
  707. });
  708. }
  709. //设置文本样式
  710. function setHtmlStyle() {
  711. Dom.body.css({
  712. 'background-color': bgColor,
  713. 'color': fontColor
  714. });
  715. $(".bgStyle").css('background-color', bgColor);
  716. $(".colorStyle").css('color', fontColor);
  717. let isDark = bgColor === 'rgb(40, 53, 72)';
  718. $("#topLeftIcon").removeClass().addClass(`top_left_icon ${isDark ? "dark-icon-mulu" : "light-icon-mulu"}`);
  719. $("#nav_icon").removeClass().addClass(
  720. `nav_return nav_back_book ${isDark ? "dark-icon-navleft" : "light-icon-navleft"}`);
  721. }
  722. //整体弹窗 展示控制
  723. function actAllDialog(flag) {
  724. actLightDialog(flag);
  725. actFontDialog(flag);
  726. actMuluDialog(flag);
  727. actNavDialog(flag);
  728. actExtraDialog(flag);
  729. }
  730. //光亮设置 展示控制
  731. function actLightDialog(flag) {
  732. //展示
  733. if (flag) {
  734. return
  735. }
  736. //隐藏
  737. }
  738. //字号设置 展示控制
  739. function actFontDialog(flag) {
  740. //展示
  741. if (flag) {
  742. let iconClass = bgColor === 'rgb(40, 53, 72)' ? "dark-icon-Aa" : "light-icon-Aa";
  743. Dom.icon_Aa.addClass(iconClass);
  744. return
  745. }
  746. //隐藏
  747. Dom.font_Pop.hide();
  748. }
  749. //目录设置 展示控制
  750. function actMuluDialog(flag) {
  751. //展示
  752. if (flag) {
  753. let iconClass = bgColor === 'rgb(40, 53, 72)' ? "dark-icon-mulu" : "light-icon-mulu";
  754. Dom.icon_mulu.addClass(iconClass);
  755. return
  756. }
  757. //隐藏
  758. Dom.mulu_Box.hide();
  759. Dom.mulu_Mask.hide();
  760. Dom.mulu_Cons.hide();
  761. $('body,html').removeClass('notScroll');
  762. }
  763. //其他设置 展示控制
  764. function actExtraDialog(flag) {
  765. //展示
  766. if (flag) {
  767. return
  768. }
  769. //隐藏
  770. Dom.extra_Pop.hide();
  771. }
  772. //顶部导航+底部导航 展示控制
  773. function actNavDialog(flag) {
  774. //展示
  775. if (flag) {
  776. Dom.nav_top.show();
  777. Dom.nav_bottom.show();
  778. let isDark = bgColor === 'rgb(40, 53, 72)';
  779. Dom.icon_extra.addClass(`${isDark ? "dark-icon-extra" : "light-icon-extra"}`);
  780. Dom.icon_Aa.addClass(`${isDark ? "dark-icon-Aa" : "light-icon-Aa"}`);
  781. Dom.icon_mulu.addClass(`${isDark ? "dark-icon-mulu" : "light-icon-mulu"}`);
  782. return
  783. }
  784. //隐藏
  785. Dom.nav_top.hide();
  786. Dom.nav_bottom.hide();
  787. Dom.icon_extra.removeClass().addClass("bottom-icon");
  788. Dom.icon_Aa.removeClass().addClass("bottom-icon");
  789. Dom.icon_mulu.removeClass().addClass("bottom-icon");
  790. }
  791. //给当前选中章节高亮,去掉其他
  792. function muluUpdateActive() {
  793. $(".parentLi").each((i, liDom) => {
  794. $($(liDom).find("a")).each((i, aNode) => {
  795. if ($(aNode).data('fid') == File_id) {
  796. $(liDom).addClass("mui-active")
  797. } else {
  798. $(liDom).removeClass("mui-active")
  799. }
  800. if ($(aNode).data('cid') == Chapter_id) {
  801. $(aNode).addClass("highChapter")
  802. } else {
  803. $(aNode).removeClass("highChapter")
  804. }
  805. })
  806. })
  807. }
  808. </script>
  809. </body>
  810. </html>