bookdetail.html 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761
  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. #muluList,
  25. #muluList .mui-table-view,
  26. .list-li-a,
  27. .mui-table-view-cell>a:not(.mui-btn).mui-active {
  28. background-color: #e9dfc7;
  29. }
  30. .highChapter {
  31. color: red !important;
  32. }
  33. </style>
  34. </head>
  35. <body>
  36. <div>
  37. <!--中间点击层-->
  38. <div class="m-artical-action">
  39. <div class="m-artical-action-mid" id="action_mid"></div>
  40. </div>
  41. <!--顶部导航-->
  42. <div class="nav-top" id="nav_top" style="display: none;">
  43. <div class="nav_container">
  44. <div class="nav_return nav_back_book"></div>
  45. <div class="nav_text nav_back_book" id="nav_text">返回首页</div>
  46. </div>
  47. </div>
  48. <!--主体内容-->
  49. <header id="header" class="top_mulu_box">
  50. <div class="top_mulu_return nav_back_book">
  51. < </div>
  52. <div class="top_mulu_text nav_back_book" id="ChapterTitle"></div>
  53. </header>
  54. <div class="container">
  55. <div class="Content">
  56. </div>
  57. <div class="page_btn">
  58. <button class="btn-prev" id="btn_prev">上一章</button>
  59. <button class="btn-next" id="btn_next">下一章</button>
  60. </div>
  61. </div>
  62. <!--底部导航栏 -->
  63. <div class="nav-bottom" id="nav_bottom" style="display: none;">
  64. <div class="btn-mulu">
  65. <div class="mulu">
  66. <div class="icon_mulu" id="icon_mulu"> </div>
  67. <div class="text_mulu">目录</div>
  68. </div>
  69. </div>
  70. <div class="btn-model">
  71. <div class="model">
  72. <div class="icon-yejian" id="icon_model"> </div>
  73. <div class="text_yejian">夜间</div>
  74. </div>
  75. </div>
  76. <div class="btn_Aa">
  77. <div class="Aa">
  78. <div class="icon-Aa" id="icon_Aa"> </div>
  79. <div class="text_Aa">设置</div>
  80. </div>
  81. </div>
  82. <!--字体功能栏-->
  83. <div class="fontPop" id="font_Pop" style="display: none;">
  84. <div class="fontItem">
  85. <span class="fontItemTitle">字号</span>
  86. <div class="fontItemCons">
  87. <!-- <button class="btn_Big" id="btn_Big">大</button>
  88. <button class="btn_Small" id="btn_Small">小</button>-->
  89. 小<input style="width: 80%; margin: 0 auto;" type="range" id="slider" name="slider" min=16 max=24 step="1">大
  90. </div>
  91. </div>
  92. <div class="fontItem">
  93. <span class="fontItemTitle">背景</span>
  94. <div class="fontItemCons" id="bk-list">
  95. <div class="bk-item" id="mb">
  96. <div class="bk-container" style="background-color: #f7eee5;"></div>
  97. <span>米白</span>
  98. </div>
  99. <div class="bk-item" id="zz">
  100. <div class="bk-container" style="background-color: #e9dfc7;"></div>
  101. <span>纸张</span>
  102. </div>
  103. <div class="bk-item" id="qh">
  104. <div class="bk-container" style="background-color: #a4a4a4;"></div>
  105. <span>浅灰</span>
  106. </div>
  107. <div class="bk-item" id="hy">
  108. <div class="bk-container" style="background-color: #cdefce;"></div>
  109. <span>护眼</span>
  110. </div>
  111. <div class="bk-item" id="hl">
  112. <div class="bk-container" style="background-color: #283548;"></div>
  113. <span>海蓝</span>
  114. </div>
  115. </div>
  116. </div>
  117. </div>
  118. <!-- 目录 -->
  119. <div class="muluBox" id="mulu_Box" style="display: none;">
  120. <div class="muluMask" id="mulu_Mask">
  121. </div>
  122. <div class="muluCons" id="mulu_Cons">
  123. <div class="muluTitle">
  124. <div>共<span id="ChapterTotal"></span>章</div>
  125. <!-- <div>倒叙/正序</div> -->
  126. </div>
  127. <div class="mui-content">
  128. <ul id="muluList" class="mui-table-view mui-table-view-chevron">
  129. </ul>
  130. </div>
  131. </div>
  132. </div>
  133. </div>
  134. </div>
  135. <script src="js/mui.min.js"></script>
  136. <script type="text/javascript" src="js/jquery.min.js"></script>
  137. <script type="text/javascript" src="js/jquery.jsonp.js"></script>
  138. <script type="text/javascript" src="js/jquery.base64.js"></script>
  139. <script>
  140. //移动设备的高度
  141. let deviceHeight = document.documentElement.clientHeight;
  142. // $('.container').css('height', deviceHeight+'px')
  143. //
  144. var Dom = {
  145. font_Pop: $("#font_Pop"),
  146. nav_top: $("#nav_top"),
  147. nav_bottom: $("#nav_bottom"),
  148. icon_Aa: $("#icon_Aa"),
  149. body: $("body"),
  150. win: $(window),
  151. icon_model: $("#icon_model"),
  152. btn_Big: $("#btn_Big"),
  153. slider: $("#slider"),
  154. btn_Small: $("#btn_Small"),
  155. icon_mulu: $("#icon_mulu"),
  156. mulu_Box: $("#mulu_Box"),
  157. mulu_Mask: $("mulu_Mask"),
  158. mulu_Cons: $("#mulu_Cons"),
  159. muluList: $("#muluList"),
  160. bkList: $("#bk-list"),
  161. header: $("#header")
  162. }
  163. //数据层的初始化
  164. var RootContainer = $('.Content');
  165. var readerUIFrame = ReaderBaseFrame(RootContainer);
  166. var readerMuluFrame = ReaderMuluFrame(Dom.muluList)
  167. var File_id = 0;
  168. var Chapter_id = 0;
  169. var ChapterTotal = 0;
  170. var ChapterList = [];
  171. var readerm = ReaderModel();
  172. readerm.init(function(data, mulu) {
  173. readerUIFrame(data);
  174. ChapterList = mulu;
  175. readerMuluFrame(mulu);
  176. $("#ChapterTitle").text(data.t);
  177. });
  178. //业务事件的初始化
  179. EventHandler();
  180. var Util = (function() { //封装的本地存储和json数据解析
  181. var prefix = 'function_reader_';
  182. var StorageGetter = function(key) {
  183. return localStorage.getItem(prefix + key);
  184. }
  185. var StorageSetter = function(key, val) {
  186. return localStorage.setItem(prefix + key, val);
  187. }
  188. //通过url来获取加密信息,并解密
  189. var getJsonp = function(url, callback) {
  190. return $.jsonp({
  191. url: url,
  192. cache: true,
  193. callback: 'duokan_fiction_chapter',
  194. success: function(result) {
  195. //获取加密信息,解码、转json
  196. var data = $.base64.decode(result);
  197. var json = decodeURIComponent(escape(data));
  198. callback(json);
  199. }
  200. })
  201. }
  202. return {
  203. getJsonp: getJsonp,
  204. StorageGetter: StorageGetter,
  205. StorageSetter: StorageSetter
  206. }
  207. })();
  208. //背景颜色 存储记录
  209. var bkgroundcolor = Util.StorageGetter("bkgroundcolor");
  210. var bkCurrColor = Util.StorageGetter("bkgroundcolor");
  211. Dom.body.css('background-color', bkgroundcolor);
  212. Dom.header.css('background-color', bkCurrColor);
  213. //字号大小 设置存储记录
  214. var InitFontSize;
  215. InitFontSize = Util.StorageGetter("font_size");
  216. InitFontSize = parseInt(InitFontSize);
  217. if (!InitFontSize) {
  218. InitFontSize = 18;
  219. }
  220. $("p").css('font-size', InitFontSize);
  221. $("h4").css('font-size', InitFontSize + 6);
  222. $("h5").css('font-size', InitFontSize + 2);
  223. Dom.slider.val(InitFontSize);
  224. function ReaderBaseFrame(container) { //UI渲染层
  225. function ParseChapterData(jsonData) { //生成要展示的 html文本
  226. let jsonObj = jsonData;
  227. CurrFontSize = Util.StorageGetter("font_size");
  228. CurrFontSize = parseInt(CurrFontSize);
  229. if (!CurrFontSize) {
  230. CurrFontSize = 18;
  231. }
  232. let TitleFontSize = CurrFontSize + 6;
  233. let RedFontSize = CurrFontSize + 2;
  234. let html = "<br/><br/><br/><br/><br/><h4 style='font-size: " + TitleFontSize + "px'>" + jsonObj.t + "</h4><br/>";
  235. if (jsonObj.ct) {
  236. let hLevel = 4;
  237. for (let i = 0; i < jsonObj.ct.length; i++) {
  238. hLevel -= 1;
  239. html += `<h${hLevel}>${jsonObj.ct[i]}</h${hLevel}><br/>`;
  240. }
  241. }
  242. for (let i = 0; i < jsonObj.p.length; i++) {
  243. if (Chapter_id == 0) {
  244. html += "<div>" + jsonObj.p[i] + "</div>";
  245. } else {
  246. if(jsonObj.p[i].indexOf('#') > -1) {
  247. html += "<br/><h5 style='color: crimson; font-size: " + RedFontSize + "px'>" + jsonObj.p[i].replace('#','') + "</h5>";
  248. }
  249. else {
  250. html += "<p style='font-size: " + CurrFontSize + "px'>" + jsonObj.p[i] + "</p>";
  251. }
  252. }
  253. }
  254. html = html.replace("##", )
  255. return html;
  256. }
  257. return function(data) { //返回 渲染后的结果data:解密后的json数据
  258. container.html(ParseChapterData(data));
  259. }
  260. }
  261. function ReaderMuluFrame(container) { //目录UI渲染层
  262. function ParseChapterMuluData(jsonData) { //生成要展示的 html文本
  263. let mulu = '';
  264. for (let i = 0; i < jsonData.length; i++) {
  265. let jsonObj = jsonData[i];
  266. if (jsonObj.children) {
  267. mulu +=
  268. `<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">`;
  269. for (let k = 0; k < jsonObj.children.length; k++) {
  270. 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="#">
  271. ${jsonObj.children[k].title}</a></li>`;
  272. }
  273. mulu += '</ul></li>';
  274. } else {
  275. 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}
  276. </a></li>`;
  277. }
  278. }
  279. mulu = mulu.replace("##", );
  280. return mulu;
  281. }
  282. return function(data) { //返回 渲染后的结果data:解密后的json数据
  283. container.html(ParseChapterMuluData(data));
  284. }
  285. }
  286. function ReaderModel() { //数据交互层
  287. //todo 获取章节信息
  288. var init = function(Uicallback) { //初始化 信息
  289. getFictionInfo(function(mulu) {
  290. getCurChaptInfo(Chapter_id, function(data) {
  291. //todo
  292. Uicallback && Uicallback(data, mulu);
  293. })
  294. })
  295. };
  296. var getFictionInfo = function(callback) { //获取所有章节摘要信息
  297. $.get('data/chapter.json', function(data) {
  298. //todo 获取章节信息之后的回调
  299. Chapter_id = parseInt(Util.StorageGetter("ChapterId"));
  300. File_id = parseInt(Util.StorageGetter("FileId"));
  301. //选择是否从头阅读
  302. if (Chapter_id !== 0) {
  303. if (confirm('您要继续上次的阅读么?')) {
  304. } else {
  305. Chapter_id = 0;
  306. }
  307. }
  308. let list = data.chapters;
  309. for (let i = 0; i < list.length - 1; i++) {
  310. if (!isFinite(Chapter_id) && list[i].type !== 'file') {
  311. Chapter_id = list[i].chapter_id;
  312. File_id = list[i].file_id;
  313. }
  314. if (list[i].children) {
  315. ChapterTotal += list[i].children.length
  316. if (!isFinite(Chapter_id)) {
  317. Chapter_id = list[i].children[0].chapter_id;
  318. File_id = list[i].children[0].file_id;
  319. }
  320. }
  321. }
  322. callback && callback(list);
  323. }, 'json');
  324. };
  325. var getCurChaptInfo = function(Chapter_id, callback) { //获取当前Chapter_id章节详细信息
  326. // $.get('data/data' + Chapter_id + '.json', function(data,status) {
  327. // //todo 获取详细信息之后的回调
  328. // console.log(status,'status')
  329. // if (data.result == 0) {
  330. // // var url=data.jsonp;
  331. // // Util.getJsonp(url,function(data){
  332. // callback && callback(data);
  333. // $("#ChapterTitle").text(data.t);
  334. // // });//通过url来获取加密信息,并解密
  335. // }
  336. // }, 'json');
  337. $.getJSON('data/data' + Chapter_id + '.json')
  338. .done(function(data) {
  339. // 请求成功,文件存在
  340. // console.log("文件存在", data);
  341. if (data.result == 0) {
  342. callback && callback(data);
  343. }
  344. })
  345. .fail(function(jqXHR, textStatus, errorThrown) {
  346. // console.log("文件不存在",jqXHR);
  347. callback && callback({
  348. p: [],
  349. t: "",
  350. result: 0
  351. });
  352. // 请求出错,文件不存在
  353. // if (jqXHR.status === 404) {
  354. // console.log("文件不存在");
  355. // } else {
  356. // console.log("请求出错");
  357. // }
  358. });
  359. };
  360. var prveChapter = function() { //上一页
  361. Chapter_id = parseInt(Chapter_id);
  362. if (Chapter_id == 0) {
  363. return;
  364. }
  365. Chapter_id -= 1;
  366. //调用方法获取 Chapter_id章节信息
  367. getCurChaptInfo(Chapter_id, function(data) {
  368. // console.log(data, 'data')
  369. readerUIFrame(data); //渲染html数据
  370. });
  371. Util.StorageSetter("ChapterId", Chapter_id);
  372. //
  373. updateFileId()
  374. };
  375. var nextChapter = function() { //下一页
  376. Chapter_id = parseInt(Chapter_id);
  377. if (Chapter_id == ChapterTotal) {
  378. return;
  379. }
  380. Chapter_id += 1;
  381. //调用方法获取 Chapter_id章节信息
  382. getCurChaptInfo(Chapter_id, function(data) {
  383. //console.log(data);
  384. readerUIFrame(data);
  385. });
  386. Util.StorageSetter("ChapterId", Chapter_id);
  387. //
  388. updateFileId()
  389. };
  390. var jumpChapter = function() { //跳页
  391. Chapter_id = parseInt(Chapter_id);
  392. File_id = parseInt(File_id);
  393. //调用方法获取 Chapter_id章节信息
  394. getCurChaptInfo(Chapter_id, function(data) {
  395. //console.log(data);
  396. readerUIFrame(data); //渲染html数据
  397. });
  398. Util.StorageSetter("ChapterId", Chapter_id);
  399. Util.StorageSetter("FileId", File_id);
  400. updateFileId()
  401. };
  402. var updateFileId = function() { //更新目录一级 file_id
  403. for (let item of ChapterList) {
  404. if (item.type === 'file') {
  405. let obj = item.children.find(child => child.chapter_id == Chapter_id)
  406. if (obj) {
  407. File_id = obj.file_id;
  408. $("#ChapterTitle").text(obj.title);
  409. break;
  410. }
  411. } else {
  412. if (Chapter_id === item.chapter_id) {
  413. File_id = item.file_id;
  414. $("#ChapterTitle").text(item.title);
  415. break;
  416. }
  417. Util.StorageSetter("FileId", File_id);
  418. }
  419. }
  420. }
  421. return {
  422. init: init,
  423. prveChapter: prveChapter,
  424. nextChapter: nextChapter,
  425. jumpChapter: jumpChapter,
  426. }
  427. }
  428. function EventHandler() { //业务事件处理层
  429. //点击主体中间事件
  430. $("#action_mid").click(function() {
  431. if (Dom.nav_top.css('display') == "none") {
  432. // Dom.nav_top.show();
  433. // Dom.nav_bottom.show();
  434. actExtraDialog(true)
  435. } else {
  436. actAllDialog(false)
  437. // Dom.nav_top.hide();
  438. // Dom.nav_bottom.hide();
  439. // Dom.font_Pop.hide();
  440. // Dom.icon_Aa.css('border', '');
  441. // Dom.icon_model.css('border', '');
  442. // Dom.mulu_Box.hide();
  443. // Dom.mulu_Mask.hide();
  444. // Dom.mulu_Cons.hide();
  445. // Dom.icon_mulu.css('border', '');
  446. }
  447. });
  448. //点击返回事件
  449. // $("#nav_text").click(function(){
  450. // window.location = "./pages/bookstand.html";
  451. // });
  452. $(".nav_back_book").click(function() {
  453. // window.location = "./pages/bookstand.html";
  454. Chapter_id = parseInt(Chapter_id);
  455. if (Chapter_id == 0) {
  456. return;
  457. }
  458. if (Dom.nav_top.css('display') == "none") {
  459. return;
  460. }
  461. Chapter_id = 0;
  462. readerm.jumpChapter();
  463. });
  464. //点击目录事件
  465. $(".icon_mulu").click(function() {
  466. if (Dom.mulu_Box.css('display') == 'none') {
  467. // Dom.icon_mulu.css('border', '1px solid #FF7800');
  468. Dom.mulu_Box.show();
  469. Dom.nav_top.hide();
  470. Dom.mulu_Mask.show();
  471. Dom.mulu_Cons.show();
  472. //章节总数赋值
  473. $('#ChapterTotal').text(ChapterTotal)
  474. //给当前选中章节高亮
  475. let optDom = $(".parentLi")[File_id];
  476. $(optDom).addClass("mui-active");
  477. $($(optDom).find("a")).each((i, aNode) => {
  478. if ($(aNode).data('cid') == Chapter_id) {
  479. $(aNode).addClass("highChapter")
  480. } else {
  481. $(aNode).removeClass("highChapter")
  482. }
  483. })
  484. } else {
  485. // Dom.icon_mulu.css('border', '');
  486. // Dom.mulu_Box.hide();
  487. // Dom.mulu_Mask.hide();
  488. // Dom.mulu_Cons.hide();
  489. muluUpdateActive();
  490. actMuluDialog(false);
  491. }
  492. Dom.icon_Aa.css('border', '');
  493. Dom.font_Pop.hide();
  494. });
  495. //点击目录列表进行指定跳转
  496. Dom.muluList.on("click", function(e) {
  497. let cid = $(e.target).data('cid');
  498. if (!cid) {
  499. return
  500. }
  501. Chapter_id = cid;
  502. File_id = $(e.target).data('fid');
  503. $("#ChapterTitle").text(e.target.text);
  504. muluUpdateActive();
  505. readerm.jumpChapter();
  506. actAllDialog(false)
  507. window.scrollTo(0,0);
  508. })
  509. // 点击弹窗内容以外的地方关闭弹窗
  510. $("#mulu_Mask").on('click', function(e) {
  511. // if ($(e.target).closest('#mui-content').length > 0) {
  512. // console.log('弹出框内部被点击了');
  513. // } else {
  514. // console.log('弹出框以外的部分被点击了');
  515. // 关闭弹框
  516. actAllDialog(false)
  517. // }
  518. });
  519. //点击字体事件
  520. $(".btn_Aa").click(function() {
  521. if (Dom.font_Pop.css('display') == 'none') {
  522. // Dom.icon_Aa.css('border', '1px solid #FF7800');
  523. Dom.font_Pop.show();
  524. } else {
  525. Dom.icon_Aa.css('border', '');
  526. Dom.font_Pop.hide();
  527. }
  528. Dom.icon_mulu.css('border', '');
  529. Dom.mulu_Box.hide();
  530. Dom.mulu_Mask.hide();
  531. Dom.mulu_Cons.hide();
  532. });
  533. //滚动条事件
  534. Dom.win.scroll(function() {
  535. actAllDialog(false)
  536. // Dom.nav_top.hide();
  537. // Dom.nav_bottom.hide();
  538. // Dom.font_Pop.hide();
  539. // Dom.mulu_Box.hide();
  540. // Dom.mulu_Mask.hide();
  541. // Dom.mulu_Cons.hide();
  542. // Dom.icon_Aa.css('border', '');
  543. // Dom.icon_model.css('border', '');
  544. // Dom.icon_mulu.css('border', '');
  545. })
  546. //点击 大、小事件
  547. Dom.slider.change(function() {
  548. let NowFontSize = $(this).val();
  549. if (NowFontSize > 24 || NowFontSize < 16) {
  550. return;
  551. }
  552. $("p").css('font-size', Number(NowFontSize));
  553. $("h4").css('font-size', Number(NowFontSize)+ 6);
  554. $("h5").css('font-size', Number(NowFontSize)+ 2);
  555. Util.StorageSetter("font_size", Number(NowFontSize));
  556. });
  557. Dom.btn_Big.click(function() {
  558. if (InitFontSize >= 24) {
  559. return;
  560. }
  561. InitFontSize += 1;
  562. $("p").css('font-size', InitFontSize);
  563. $("h4").css('font-size', InitFontSize);
  564. Util.StorageSetter("font_size", InitFontSize);
  565. });
  566. Dom.btn_Small.click(function() {
  567. if (InitFontSize <= 16) {
  568. return;
  569. }
  570. InitFontSize -= 1;
  571. $("p").css('font-size', InitFontSize);
  572. $("h4").css('font-size', InitFontSize);
  573. Util.StorageSetter("font_size", InitFontSize);
  574. });
  575. //点击夜间&日间 切换模式
  576. Dom.icon_model.click((e) => {
  577. if ($(e.target).hasClass("icon-yejian")) {
  578. //日间模式转夜间模式
  579. Dom.icon_model.removeClass("icon-yejian").addClass("icon-rijian");
  580. Dom.icon_model.siblings().text("日间");
  581. bkCurrColor = '#283548';
  582. updateBgColor($("#hl").find(".bk-container"))
  583. } else {
  584. //夜间模式转日间模式
  585. Dom.icon_model.removeClass("icon-rijian").addClass("icon-yejian");
  586. Dom.icon_model.siblings().text("夜间");
  587. bkCurrColor = Util.StorageGetter("bkHistory");
  588. model = Util.StorageGetter("model") || "zz";
  589. updateBgColor($("#" + model).find(".bk-container"))
  590. }
  591. });
  592. //点击背景颜色切换
  593. Dom.bkList.on("click", function(e) {
  594. if (!$(e.target).hasClass("bk-container")) {
  595. return
  596. }
  597. bkCurrColor = $(e.target)[0].style.backgroundColor;
  598. updateBgColor($(e.target), "bgCheck")
  599. })
  600. //
  601. var updateBgColor = function(target, type) {
  602. $(target).addClass("bk-container-current");
  603. Dom.body.css('background-color', bkCurrColor);
  604. Dom.header.css('background-color', bkCurrColor);
  605. //更新日夜模式
  606. let model = $(target).parent(".bk-item")[0].id;
  607. if (model === 'hl') {
  608. //记录夜间模式前的背景颜色和模式
  609. Util.StorageSetter("bkHistory", Util.StorageGetter("bkgroundcolor") || "#e9dfc7");
  610. if (type === "bgCheck") {
  611. //点击的背景颜色选择,需要更新模式 转为日间显示
  612. Dom.icon_model.removeClass("icon-yejian").addClass("icon-rijian");
  613. Dom.icon_model.siblings().text("日间");
  614. }
  615. } else {
  616. Util.StorageSetter("model", model);
  617. if (type === "bgCheck") {
  618. //点击的背景颜色选择,需要更新模式 转为夜间显示
  619. Dom.icon_model.removeClass("icon-rijian").addClass("icon-yejian");
  620. Dom.icon_model.siblings().text("夜间");
  621. }
  622. }
  623. let optDom = $(target).parent(".bk-item").siblings();
  624. $(optDom).each((i, liDom) => {
  625. $($(liDom).find(".bk-container")).removeClass("bk-container-current")
  626. })
  627. Util.StorageSetter("bkgroundcolor", bkCurrColor);
  628. }
  629. $("#btn_prev").click(function() {
  630. window.scrollTo(0,0);
  631. readerm.prveChapter();
  632. });
  633. $("#btn_next").click(function() {
  634. window.scrollTo(0,0);
  635. readerm.nextChapter();
  636. });
  637. }
  638. //整体弹窗 展示控制
  639. function actAllDialog(flag) {
  640. actLightDialog(flag);
  641. actFontDialog(flag);
  642. actMuluDialog(flag);
  643. actExtraDialog(flag);
  644. }
  645. //光亮设置 展示控制
  646. function actLightDialog(flag) {
  647. //展示
  648. if (flag) {
  649. return
  650. }
  651. //隐藏
  652. Dom.icon_model.css('border', '');
  653. }
  654. //字体设置 展示控制
  655. function actFontDialog(flag) {
  656. //展示
  657. if (flag) {
  658. return
  659. }
  660. //隐藏
  661. Dom.font_Pop.hide();
  662. Dom.icon_Aa.css('border', '');
  663. }
  664. //目录设置 展示控制
  665. function actMuluDialog(flag) {
  666. //展示
  667. if (flag) {
  668. return
  669. }
  670. //隐藏
  671. Dom.mulu_Box.hide();
  672. Dom.mulu_Mask.hide();
  673. Dom.mulu_Cons.hide();
  674. Dom.icon_mulu.css('border', '');
  675. }
  676. //其他设置 展示控制
  677. function actExtraDialog(flag) {
  678. //展示
  679. if (flag) {
  680. Dom.nav_top.show();
  681. Dom.nav_bottom.show();
  682. return
  683. }
  684. //隐藏
  685. Dom.nav_top.hide();
  686. Dom.nav_bottom.hide();
  687. }
  688. //给当前选中章节高亮,去掉其他
  689. function muluUpdateActive() {
  690. $(".parentLi").each((i, liDom) => {
  691. $($(liDom).find("a")).each((i, aNode) => {
  692. if ($(aNode).data('fid') == File_id) {
  693. $(liDom).addClass("mui-active")
  694. } else {
  695. $(liDom).removeClass("mui-active")
  696. }
  697. if ($(aNode).data('cid') == Chapter_id) {
  698. $(aNode).addClass("highChapter")
  699. } else {
  700. $(aNode).removeClass("highChapter")
  701. }
  702. })
  703. })
  704. }
  705. </script>
  706. </body>
  707. </html>