优化选经手机操作

public/app/palicanon/index1.php

@@ -99,10 +99,24 @@ require_once '../public/function.php';
             </div>
 
             <div id="select_bar" >
+                <div id="select_bar_home" onclick='categoryGoHome()'>
+                <span>
+                    <svg class='icon' style='fill: var(--box-bg-color1)'>
+                        <use xlink:href='../../node_modules/bootstrap-icons/bootstrap-icons.svg#house'>
+                    </svg>
+                </span>
+                <span>
+                    <svg class='icon' style='fill: var(--box-bg-color1)'>
+                        <use xlink:href='../../node_modules/bootstrap-icons/bootstrap-icons.svg#chevron-compact-right'>
+                    </svg>
+                </span>
+                </div>
                 <div id="channel_selected"></div>
                 <div id="tag_selected"></div>
             </div>
 
+            <div id='palicanon-category'></div>
+
             <div id='bread-crumbs'></div>
             <div id='filter_bar'>
                 <div id='filter_bar_left'></div>
@@ -307,6 +321,7 @@ require_once '../public/function.php';
             //载入用户最近的阅读列表
             loadUserRecent();
             loadContribution();
+            
         });
     </script>
     <?php

public/app/palicanon/palicanon.js

@@ -14,6 +14,7 @@ var gBreadCrumbs=['','','','','','','','',''];
 var _nextPageStart = 0;
 var _pageSize = 20;
 var _channel = "";
+var _palicanonCategory,_palicanonCategoryCurrent,_palicanonCategoryPath;
 
 var _tags = "";
 var _channelList;
@@ -1048,19 +1049,102 @@ function chapter_back(parent) {
     RenderBreadCrumbs();
 }
 
+function categoryGoHome(){
+    updatePalicanonCategoryList();
+    $("#palicanon-category").show();
+    $("#chapter_shell").hide();
+    tag_set([]);
+}
+
+function updatePalicanonCategoryList(name="__home__") {
+    switch (name) {
+        case '__home__':
+            _palicanonCategoryCurrent = _palicanonCategory.slice();
+            _palicanonCategoryPath = new Array();
+            _palicanonCategoryPath.push(_palicanonCategoryCurrent);
+            break;
+        case '__prev__':
+            _palicanonCategoryPath.pop();
+            _palicanonCategoryCurrent = _palicanonCategoryPath[_palicanonCategoryPath.length-1].slice();
+            break;
+        default:
+            if(_palicanonCategoryCurrent.length>0){
+                let next = _palicanonCategoryCurrent.find(element => element.name == name);
+                if(typeof next !== "undefined"){
+                    if(next.children && next.children.length>0){
+                        //有子目录
+                        _palicanonCategoryCurrent = next.children.slice();
+                        _palicanonCategoryPath.push(_palicanonCategoryCurrent.slice());
+                    }else{
+                        //没有子目录
+                        tag_set(next.tag);
+                        $("#palicanon-category").hide();
+                        $("#chapter_shell").show();
+                    }
+                }
+            }else{
+
+            }
+            
+            break;
+    }
+    $('#palicanon-category').html(renderPalicanonCategoryList());
+
+}
+
+function renderPalicanonCategoryList(){
+    let html = "<ul class='chapter_list'>";
+    if(_palicanonCategoryPath.length>1){
+        html += "<li onclick=\"updatePalicanonCategoryList('__prev__')\">";
+        html += "上一级";
+        html += "</li>";
+    }
+
+    for (const item of _palicanonCategoryCurrent) {
+        html += "<li onclick=\"updatePalicanonCategoryList('"+item.name+"')\">";
+        html += "<div class='left_icon'>";
+        html += "<svg class='icon' style='fill: var(--box-bg-color1)'>";
+        html += "<use xlink:href='../../node_modules/bootstrap-icons/bootstrap-icons.svg#folder'>";
+        html += "</svg>" ;
+        html += "</div>";
+
+        html += "<div class='title'>";
+
+        html += '<div class="title_left" onclick="chapter_onclick(this)">';
+        html += '<div class="title_1">'+item.name+'</div>';
+        html += '<div class="title_2" lang="pali">'+item.name+'</div>';
+        html += "</div>";
+
+        html += '<div class="title_right">';
+        html += "<svg class='icon' style='fill: var(--box-bg-color1)'>";
+        html += "<use xlink:href='../../node_modules/bootstrap-icons/bootstrap-icons.svg#chevron-right'>";
+        html += "</svg>" ;
+        html += '</div>';
+
+        html += "</div>";
+
+        html += "</li>";
+    }
+    html += "</ul>";
+    return html;
+}
 
 function loadTagCategory(name="defualt"){
     $.getJSON("./category/"+name+".json",function(result){
-        console.log(tocGetTagCategory(result));
+
+        _palicanonCategory = result;
+        _palicanonCategoryCurrent = _palicanonCategory.slice();
+        _palicanonCategoryPath = new Array();
+        _palicanonCategoryPath.push(_palicanonCategoryCurrent.slice());
+        updatePalicanonCategoryList();
+        
         $("#tag-category").html("");
         $("#tag-category").fancytree({
             autoScroll: true,
             selectMode: 1, // 1:single, 2:multi, 3:multi-hier
             checkbox: false, // Show checkboxes.
-            source: tocGetTagCategory(result),
+            source: tocGetTagCategory(result.slice()),
             activate: function(e, data) {
-//				alert("activate " + );
-                //currSelectNode = data.node;
                 console.log('tree',data);
                 tag_set(arrTagCategory[data.node.key]);
             },

public/app/palicanon/style.css

@@ -39,6 +39,7 @@ tag {
 	padding: 2px 12px;
 	border-radius: 5px;
     cursor: pointer;
+    display: inline-block;
 }
 tag:hover{
     background-color: var(--border-line-color);
@@ -119,7 +120,7 @@ tag:hover{
 }
 
 #select_bar>div {
-    display:inline-block;
+    display:inline;
 }
 
 .chapter_list {
@@ -520,4 +521,11 @@ span.channel {
 #tag_list_setting_div {
     flex: 3;
     padding: 10px;
+}
+
+#palicanon-category{
+    display:none;
+}
+#select_bar_home{
+    display:none;
 }

public/app/palicanon/style_mobile.css

@@ -53,4 +53,25 @@
 
 #tag_list_setting_div {
     padding: 6px;
+}
+#palicanon-category{
+    display:block;
+}
+
+#palicanon-category>.chapter_list {
+    flex-direction: column;
+}
+
+#palicanon-category li{
+    display: flex;
+    padding: 5px 0;
+    border-bottom: 1px solid var(--border-line-color);
+}
+
+#palicanon-category .chapter_list .title .title_1 {
+    width: unset;
+}
+#palicanon-category .chapter_list .title{
+    width: -webkit-fill-available;
+    padding-left: 12px;
 }