index.php 8.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246
  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. var tag_level = <?php echo file_get_contents("../public/book_tag/tag_list.json"); ?>;
  49. </style>
  50. <script>
  51. var tag_level = <?php echo file_get_contents("../public/book_tag/tag_list.json"); ?>;
  52. </script>
  53. <?php
  54. //
  55. require_once "../path.php";
  56. require_once "../public/_pdo.php";
  57. require_once '../media/function.php';
  58. require_once '../public/function.php';
  59. echo "<div id='course_head_bar' style='background-color:var(--tool-bg-color1);padding:1em 10px 10px 10px;'>";
  60. echo "<div class='index_inner '>";
  61. echo "<div style='font-size:140%'>";
  62. echo "</div>";
  63. echo '<div id="main_tag" style="">';
  64. echo '<span tag="sutta">Sutta</span>';
  65. echo '<span tag="vinaya">Vinaya</span>';
  66. echo '<span tag="abhidhamma">Abhidhamma</span>';
  67. echo '<span tag="mūla">Mūla</span>';
  68. echo '<span tag="aṭṭhakathā">Aṭṭhakathā</span>';
  69. echo '<span tag="ṭīkā">ṭīkā</span>';
  70. echo '<span tag="añña">añña</span>';
  71. echo '</div>';
  72. echo '<div id="tag_selected" class="" style="padding-bottom:5px;margin:0.5em 0;"></div>';
  73. echo '<div level="0" class="tag_others" style="padding-bottom:5px;"></div>';
  74. echo '<div level="1" class="tag_others" style="padding-bottom:5px;"></div>';
  75. echo '<div level="2" class="tag_others" style="padding-bottom:5px;"></div>';
  76. echo '<div level="3" class="tag_others" style="padding-bottom:5px;"></div>';
  77. echo '<div level="4" class="tag_others" style="padding-bottom:5px;"></div>';
  78. echo '<div level="5" class="tag_others" style="padding-bottom:5px;"></div>';
  79. echo '<div level="100" class="tag_others" style="padding-bottom:5px;"></div>';
  80. echo '<div level="8" class="tag_others" style="padding-bottom:5px;"></div>';
  81. echo "</div>";
  82. echo '</div>';
  83. ?>
  84. <div id ="book_list" class='index_inner' style='display: flex;flex-wrap: wrap;'>
  85. </div>
  86. <script>
  87. var main_tag="";
  88. var list_tag=new Array();
  89. var currTagLevel0= new Array();
  90. $("span[tag]").click(function(){
  91. $(this).siblings().removeClass("select");
  92. $(this).addClass("select");
  93. main_tag = $(this).attr("tag");
  94. list_tag=new Array();
  95. tag_changed();
  96. render_tag_list();
  97. });
  98. var allTags = new Array();
  99. function tag_changed(){
  100. let strTags = "";
  101. if(list_tag.length>0){
  102. strTags = main_tag + "," + list_tag.join();
  103. }
  104. else{
  105. strTags = main_tag;
  106. }
  107. console.log(strTags);
  108. $.get("book_tag.php",
  109. {
  110. tag:strTags
  111. },
  112. function(data,status){
  113. let arrBookList = JSON.parse(data);
  114. let html="";
  115. allTags = new Array();
  116. for (const iterator of arrBookList) {
  117. let tag0="";
  118. let tags = iterator[0].tag.split("::");
  119. let currTag = new Array();
  120. currTag[main_tag] = 1;
  121. for (const scondTag of list_tag) {
  122. currTag[scondTag] = 1;
  123. }
  124. for (let tag of tags) {
  125. if(tag.slice(0,1)==":"){
  126. tag = tag.slice(1);
  127. }
  128. if(tag.slice(-1)==":"){
  129. tag = tag.slice(0,-1);
  130. }
  131. if(currTagLevel0.hasOwnProperty(tag)){
  132. tag0 = tag;
  133. }
  134. if(!currTag.hasOwnProperty(tag)){
  135. if(allTags.hasOwnProperty(tag) ){
  136. allTags[tag] += 1;
  137. }
  138. else{
  139. allTags[tag] = 1;
  140. }
  141. }
  142. }
  143. html += "<div style='width:25%;padding:0.5em;'>";
  144. html += "<div class='card' style='padding:10px;'>";
  145. html += "<div class='' style='position: absolute;background-color: #862002;margin-top: -10px;margin-left: 12em;color: white;padding: 0 3px;display: inline-block;'>"+tag0+"</div>";
  146. 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>";
  147. html += "<div style=''>book:"+iterator[0].book+" para:"+iterator[0].para+"</div>";
  148. html += "<div style='overflow-wrap: anywhere;'>tag="+ iterator[0].tag+"</div>";
  149. html += "</div>";
  150. html += "</div>";
  151. }
  152. let newTags = new Array();
  153. for (const oneTag in allTags) {
  154. if(allTags[oneTag]<arrBookList.length){
  155. newTags[oneTag] = allTags[oneTag];
  156. }
  157. }
  158. allTags = newTags;
  159. allTags.sort(sortNumber);
  160. tag_render_others();
  161. $("#book_list").html(html);
  162. });
  163. }
  164. $("#tag_input").keypress(function(){
  165. tag_render_others();
  166. });
  167. function tag_render_others(){
  168. let strOthersTag = "";
  169. currTagLevel0= new Array();
  170. $(".tag_others").html("");
  171. for (const key in allTags) {
  172. if (allTags.hasOwnProperty(key)) {
  173. if($("#tag_input").val().length>0){
  174. if(key.indexOf($("#tag_input").val())>=0){
  175. strOthersTag = "<button onclick =\"tag_click('"+key+"')\" >"+key+"</button>";
  176. }
  177. }
  178. else{
  179. strOthersTag = "<button onclick =\"tag_click('"+key+"')\" >"+key+"</button>";
  180. }
  181. let thisLevel = 100;
  182. if(tag_level.hasOwnProperty(key)){
  183. thisLevel = tag_level[key].level;
  184. if(tag_level[key].level==0){
  185. currTagLevel0[key] = 1;
  186. }
  187. }
  188. $(".tag_others[level='"+thisLevel+"']").html($(".tag_others[level='"+thisLevel+"']").html()+strOthersTag);
  189. }
  190. }
  191. }
  192. function tag_click(tag){
  193. list_tag.push(tag);
  194. render_tag_list();
  195. tag_changed();
  196. }
  197. function render_tag_list(){
  198. let strListTag = gLocal.gui.selected+":";
  199. for (const iterator of list_tag) {
  200. strListTag +="<tag><span style='margin-right: 5px; font-weight: bold;'>"+iterator+"</span>";
  201. strListTag +="<span style='display: contents;' onclick =\"tag_remove('"+iterator+"')\">";
  202. 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'>";
  203. 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' >";
  204. strListTag +="</path></svg>";
  205. strListTag +="</span></tag>";
  206. }
  207. strListTag += "<div style='display:inline-block;width:20em;'><input id='tag_input' type='input' placeholder='tag' size='20' /></div>";
  208. $("#tag_selected").html(strListTag);
  209. }
  210. function tag_remove(tag){
  211. for(let i=0; i<list_tag.length;i++){
  212. if(list_tag[i]==tag){
  213. list_tag.splice(i,1);
  214. }
  215. }
  216. render_tag_list();
  217. tag_changed();
  218. }
  219. function sortNumber(a, b)
  220. {
  221. return b -a;
  222. }
  223. </script>
  224. <?php
  225. include "../pcdl/html_foot.php";
  226. ?>