index.php 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223
  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. const tagSelected = document.getElementsByClassName("select");
  87. if(tagSelected){
  88. let tagList = new Array();
  89. for (const iterator of tagSelected) {
  90. tagList.push(iterator.getAttributeNode("tag").value);
  91. }
  92. main_tag = tagList[0];
  93. tag_changed();
  94. }
  95. */
  96. });
  97. var allTags = new Array();
  98. function tag_changed(){
  99. let strTags = "";
  100. if(list_tag.length>0){
  101. strTags = main_tag + "," + list_tag.join();
  102. }
  103. else{
  104. strTags = main_tag;
  105. }
  106. console.log(strTags);
  107. $.get("book_tag.php",
  108. {
  109. tag:strTags
  110. },
  111. function(data,status){
  112. let arrBookList = JSON.parse(data);
  113. let html="";
  114. allTags = new Array();
  115. for (const iterator of arrBookList) {
  116. html += "<div style='width:25%;padding:0.5em;'>";
  117. html += "<div class='card' style='padding:10px;'>";
  118. 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>";
  119. html += "<div style=''>book:"+iterator[0].book+" para:"+iterator[0].para+"</div>";
  120. html += "<div style='overflow-wrap: anywhere;'>tag="+ iterator[0].tag+"</div>";
  121. html += "</div>";
  122. html += "</div>";
  123. let tags = iterator[0].tag.split("::");
  124. let currTag = new Array();
  125. currTag[main_tag] = 1;
  126. for (const scondTag of list_tag) {
  127. currTag[scondTag] = 1;
  128. }
  129. for (let tag of tags) {
  130. if(tag.slice(0,1)==":"){
  131. tag = tag.slice(1);
  132. }
  133. if(tag.slice(-1)==":"){
  134. tag = tag.slice(0,-1);
  135. }
  136. if(!currTag.hasOwnProperty(tag)){
  137. if(allTags.hasOwnProperty(tag) ){
  138. allTags[tag] += 1;
  139. }
  140. else{
  141. allTags[tag] = 1;
  142. }
  143. }
  144. }
  145. }
  146. allTags.sort(sortNumber);
  147. tag_render_others();
  148. $("#book_list").html(html);
  149. });
  150. }
  151. $("#tag_input").keypress(function(){
  152. tag_render_others();
  153. });
  154. function tag_render_others(){
  155. let strOthersTag = "";
  156. for (const key in allTags) {
  157. if (allTags.hasOwnProperty(key)) {
  158. if($("#tag_input").val().length>0){
  159. if(key.indexOf($("#tag_input").val())>=0){
  160. strOthersTag += "<button onclick =\"tag_click('"+key+"')\" >"+key+"</button>";
  161. }
  162. }
  163. else{
  164. strOthersTag += "<button onclick =\"tag_click('"+key+"')\" >"+key+"</button>";
  165. }
  166. }
  167. }
  168. $("#tag_others").html(strOthersTag);
  169. }
  170. function tag_click(tag){
  171. list_tag.push(tag);
  172. render_tag_list();
  173. tag_changed();
  174. }
  175. function render_tag_list(){
  176. let strListTag = gLocal.gui.selected+":";
  177. for (const iterator of list_tag) {
  178. strListTag +="<tag><span style='margin-right: 5px; font-weight: bold;'>"+iterator+"</span>";
  179. strListTag +="<span style='display: contents;' onclick =\"tag_remove('"+iterator+"')\">";
  180. 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'>";
  181. 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' >";
  182. strListTag +="</path></svg>";
  183. strListTag +="</span></tag>";
  184. }
  185. strListTag += "<div style='display:inline-block;width:20em;'><input id='tag_input' type='input' placeholder='tag' size='20' /></div>";
  186. $("#tag_selected").html(strListTag);
  187. }
  188. function tag_remove(tag){
  189. for(let i=0; i<list_tag.length;i++){
  190. if(list_tag[i]==tag){
  191. list_tag.splice(i,1);
  192. }
  193. }
  194. render_tag_list();
  195. tag_changed();
  196. }
  197. function sortNumber(a, b)
  198. {
  199. return b -a;
  200. }
  201. </script>
  202. <?php
  203. include "../pcdl/html_foot.php";
  204. ?>