reader.html 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132
  1. <html>
  2. <head>
  3. <meta charset="utf-8">
  4. <title>ArOZ Online System Documentation</title>
  5. <!-- Tocas UI:CSS 與元件 -->
  6. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocas-ui/2.3.3/tocas.css">
  7. <!-- Tocas JS:模塊與 JavaScript 函式 -->
  8. <script src="https://cdnjs.cloudflare.com/ajax/libs/tocas-ui/2.3.3/tocas.js"></script>
  9. <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  10. <script src="showdown.min.js"></script>
  11. <style>
  12. .specialpadding{
  13. margin-top:0px !important;
  14. padding-left:20px;
  15. }
  16. .rightPadded{
  17. position:absolute !important;
  18. right:10px;
  19. width:55px;
  20. }
  21. </style>
  22. </head>
  23. <body>
  24. <br><br>
  25. <div class="ts container">
  26. <div class="ts segment">
  27. <div class="ts icon buttons" style="width:100% !important;">
  28. <button id="backbtn" class="ts button" onClick="lastPage();"><i class="arrow left icon"></i></button>
  29. <button id="nextbtn" class="ts button" onClick="nextPage();"><i class="arrow right icon"></i></button>
  30. <button id="nextbtn" class="ts button" onClick="showList();"><i class="content icon"></i></button>
  31. <div class="ts specialpadding header"><i class="bookmark icon"></i><span id="readerTitle">Welcome to ArOZ Online Documentation Reader</span></div>
  32. </div>
  33. <button class="ts rightPadded button" onClick="starThispage();"><i class="empty star icon"></i></button>
  34. </div>
  35. <div id="docLoader" class="ts segment">
  36. </div>
  37. <div class="ts segment">
  38. ArOZ Documentation Reader v1.0
  39. </div>
  40. </div>
  41. <br><br><br><br>
  42. <script>
  43. var currentRenderPage = 0;
  44. var searchingPage = 0;
  45. var lang = window.location.hash.replace("#",""); //get lang id
  46. var docs = []; //All documents will be loaded into memory as the reader loads, but not rendered yet
  47. var baseFolder = "lang/" + lang + "/";
  48. initLoad();
  49. function loadAllDocs(){
  50. $.ajax({
  51. type: 'get',
  52. timeout: 5000,
  53. url: baseFolder + searchingPage + ".md",
  54. success: function(data, textStatus, XMLHttpRequest){
  55. data = data.split("\r\n").join("\n");
  56. docs.push(data.split("\n"));
  57. //console.log(data.split("\n"));
  58. searchingPage++;
  59. loadAllDocs();
  60. },
  61. error:function (xhr, ajaxOptions, thrownError){
  62. //End of documentation
  63. //console.log(docs);
  64. readDoc(); //Start rendering
  65. }
  66. });
  67. }
  68. function nextPage(){
  69. currentRenderPage = currentRenderPage + 1;
  70. if (currentRenderPage >= docs.length){
  71. //No more pages
  72. currentRenderPage = currentRenderPage - 1;
  73. return;
  74. }
  75. readDoc();
  76. }
  77. function lastPage(){
  78. currentRenderPage = currentRenderPage - 1;
  79. if (currentRenderPage < 0){
  80. //No more pages
  81. currentRenderPage = currentRenderPage + 1;
  82. return;
  83. }
  84. readDoc();
  85. }
  86. function readDoc(){
  87. let pageInfo = Array.from(docs[currentRenderPage]);
  88. var metaTag = JSON.parse(pageInfo.shift());
  89. document.title = metaTag[0];
  90. $("#readerTitle").text(metaTag[0]);
  91. $("#docLoader").html("");
  92. for (var i =0; i < pageInfo.length; i++){
  93. $("#docLoader").append(md2html(pageInfo[i]));
  94. }
  95. }
  96. function md2html(input){
  97. var converter = new showdown.Converter();
  98. return converter.makeHtml(input);
  99. }
  100. //Initiate the loading interface
  101. function initLoad(){
  102. $("#docLoader").html('<div align="center" style="width:100%;">\
  103. <br><br>\
  104. <i class="big spinner loading icon stillLoading"></i><br>\
  105. <p class="loadFailMsg">Loading...</p>\
  106. <br><br>\
  107. </div>');
  108. setTimeout(chkLoadFail,15000);
  109. loadAllDocs();
  110. }
  111. //Check if the load failed using setTimeout
  112. function chkLoadFail(){
  113. if ($(".stillLoading").length > 0){
  114. //Something screwed up during loading of JSON based documentation. Ask for refresh
  115. $(".stillLoading").removeClass("spinner").removeClass("loading").addClass("remove");
  116. $(".loadFailMsg").text("Seems something went wrong. Try refreshing the page?");
  117. }
  118. }
  119. </script>
  120. </body>
  121. </html>