index.php 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
  1. <?PHP
  2. include "../pcdl/html_head.php";
  3. ?>
  4. <body>
  5. <?php
  6. require_once("../pcdl/head_bar.php");
  7. ?>
  8. <style>
  9. #main_video_win iframe{
  10. width:100%;
  11. height:100%;
  12. }
  13. #main_tag span{
  14. margin: 2px;
  15. padding: 2px 12px;
  16. font-weight: 500;
  17. transition-duration: 0.2s;
  18. cursor: pointer;
  19. display: inline-flex;
  20. align-items: center;
  21. flex-wrap: nowrap;
  22. justify-content: center;
  23. font-size:110%;
  24. border: unset;
  25. border-radius: 0;
  26. border-bottom: 2px solid var(--nocolor);
  27. }
  28. #main_tag span:hover{
  29. background-color:unset;
  30. color:unset;
  31. border-color: var(--link-hover-color);
  32. }
  33. #main_tag .select{
  34. border-bottom: 2px solid var(--link-color);
  35. }
  36. tag{
  37. background-color: var(--btn-color);
  38. margin: 0 0.5em;
  39. padding: 3px 5px;
  40. border-radius: 6px;
  41. display:inline-flex;
  42. border: 1.5px solid;
  43. border-color: #70707036;
  44. }
  45. tag .icon:hover{
  46. background-color: silver;
  47. }
  48. </style>
  49. <?php
  50. //
  51. require_once "../path.php";
  52. require_once "../public/_pdo.php";
  53. require_once '../media/function.php';
  54. require_once '../public/function.php';
  55. echo "<div id='course_head_bar' style='background-color:var(--tool-bg-color1);padding:1em 10px 10px 10px;'>";
  56. echo "<div class='index_inner '>";
  57. echo "<div style='font-size:140%'>";
  58. echo "</div>";
  59. echo '<div id="main_tag" style="">';
  60. echo '<span tag="sutta">Sutta</span>';
  61. echo '<span tag="vinaya">Vinaya</span>';
  62. echo '<span tag="abhidhamma">Abhidhamma</span>';
  63. echo '<span tag="mūla">Mūla</span>';
  64. echo '<span tag="aṭṭhakathā">Aṭṭhakathā</span>';
  65. echo '<span tag="ṭīkā">ṭīkā</span>';
  66. echo '<span tag="añña">añña</span>';
  67. echo '</div>';
  68. echo '<div id="tag_selected" class="summary" style="padding-bottom:5px;margin:0.5em 0;"></div>';
  69. echo '<div id="tag_others" class="summary" style="padding-bottom:5px;"></div>';
  70. echo "</div>";
  71. echo '</div>';
  72. ?>
  73. <div id ="book_list" class='index_inner' style='display: flex;flex-wrap: wrap;'>
  74. </div>
  75. <script>
  76. var main_tag="";
  77. var list_tag=new Array();
  78. $("span[tag]").click(function(){
  79. $(this).siblings().removeClass("select");
  80. $(this).addClass("select");
  81. main_tag = $(this).attr("tag");
  82. list_tag=new Array();
  83. tag_changed();
  84. render_tag_list();
  85. });
  86. var allTags = new Array();
  87. function tag_changed(){
  88. let strTags = "";
  89. if(list_tag.length>0){
  90. strTags = main_tag + "," + list_tag.join();
  91. }
  92. else{
  93. strTags = main_tag;
  94. }
  95. console.log(strTags);
  96. $.get("book_tag.php",
  97. {
  98. tag:strTags
  99. },
  100. function(data,status){
  101. let arrBookList = JSON.parse(data);
  102. let html="";
  103. allTags = new Array();
  104. for (const iterator of arrBookList) {
  105. html += "<div style='width:25%;padding:0.5em;'>";
  106. html += "<div class='card' style='padding:10px;'>";
  107. html += "<div style='font-weight:700'><a href='../pcdl/reader.php?view=chapter&book="+iterator[0].book+"&para="+iterator[0].para+"' target = '_blank'>"+iterator[0].title+"</a></div>";
  108. html += "<div style=''>book:"+iterator[0].book+" para:"+iterator[0].para+"</div>";
  109. html += "<div style='overflow-wrap: anywhere;'>tag="+ iterator[0].tag+"</div>";
  110. html += "</div>";
  111. html += "</div>";
  112. let tags = iterator[0].tag.split("::");
  113. let currTag = new Array();
  114. currTag[main_tag] = 1;
  115. for (const scondTag of list_tag) {
  116. currTag[scondTag] = 1;
  117. }
  118. for (let tag of tags) {
  119. if(tag.slice(0,1)==":"){
  120. tag = tag.slice(1);
  121. }
  122. if(tag.slice(-1)==":"){
  123. tag = tag.slice(0,-1);
  124. }
  125. if(!currTag.hasOwnProperty(tag)){
  126. if(allTags.hasOwnProperty(tag) ){
  127. allTags[tag] += 1;
  128. }
  129. else{
  130. allTags[tag] = 1;
  131. }
  132. }
  133. }
  134. }
  135. allTags.sort(sortNumber);
  136. tag_render_others();
  137. $("#book_list").html(html);
  138. });
  139. }
  140. $("#tag_input").keypress(function(){
  141. tag_render_others();
  142. });
  143. function tag_render_others(){
  144. let strOthersTag = "";
  145. for (const key in allTags) {
  146. if (allTags.hasOwnProperty(key)) {
  147. if($("#tag_input").val().length>0){
  148. if(key.indexOf($("#tag_input").val())>=0){
  149. strOthersTag += "<button onclick =\"tag_click('"+key+"')\" >"+key+"</button>";
  150. }
  151. }
  152. else{
  153. strOthersTag += "<button onclick =\"tag_click('"+key+"')\" >"+key+"</button>";
  154. }
  155. }
  156. }
  157. $("#tag_others").html(strOthersTag);
  158. }
  159. function tag_click(tag){
  160. list_tag.push(tag);
  161. render_tag_list();
  162. tag_changed();
  163. }
  164. function render_tag_list(){
  165. let strListTag = gLocal.gui.selected+":";
  166. for (const iterator of list_tag) {
  167. strListTag +="<tag><span style='margin-right: 5px; font-weight: bold;'>"+iterator+"</span>";
  168. strListTag +="<span style='display: contents;' onclick =\"tag_remove('"+iterator+"')\">";
  169. strListTag +="<svg t= '1598638386903' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='1223' width='16' height='16'>";
  170. strListTag += "<path fill='#707070' p-id='1224' d='M512 620.544l253.3376 253.3376a76.6976 76.6976 0 1 0 108.544-108.544L620.6464 512l253.2352-253.3376a76.6976 76.6976 0 1 0-108.544-108.544L512 403.3536 258.6624 150.1184a76.6976 76.6976 0 1 0-108.544 108.544L403.3536 512 150.1184 765.3376a76.6976 76.6976 0 1 0 108.544 108.544L512 620.6464z' >";
  171. strListTag +="</path></svg>";
  172. strListTag +="</span></tag>";
  173. }
  174. strListTag += "<div style='display:inline-block;width:20em;'><input id='tag_input' type='input' placeholder='tag' size='20' /></div>";
  175. $("#tag_selected").html(strListTag);
  176. }
  177. function tag_remove(tag){
  178. for(let i=0; i<list_tag.length;i++){
  179. if(list_tag[i]==tag){
  180. list_tag.splice(i,1);
  181. }
  182. }
  183. render_tag_list();
  184. tag_changed();
  185. }
  186. function sortNumber(a, b)
  187. {
  188. return b -a;
  189. }
  190. </script>
  191. <?php
  192. include "../pcdl/html_foot.php";
  193. ?>