update: LTable and Tab style

demo/0. 基础教程.md

@@ -59,7 +59,7 @@
 `[>XXX]` 可以缩减范围选择（此功能未开发）
 {^XXX} 所在层级选择，不同于下一层级选择（此功能未开发）
 
-# 操作
+# 处理器（操作）
 
 操作分为
 - 渲染操作
@@ -68,7 +68,7 @@
 - 文本操作
  - 仅处理文本，即将一系列纯文本转化为另一个新的纯文本，可叠加
 复合操作
-- 由多个文本操作组成
+- 由多个文本操作、或多个文本操作加渲染操作组成
 
 **（下面可能包含旧的或未实现的或与插件版本不符的处理器，也可能通过设置面板查看自己安装插件所支持的所有处理器）**
 

demo/1. 使用示例 - 列表选择器.md

@@ -55,21 +55,34 @@
   ```
   - 控制台打印
 
+## （启用转置）
+
+例如这个中英对照表（@todo，目前是纯css实现，复杂的会有bug，等待通过js手段真正意义上实现）
+[list2tableT]
+- Cypress | 松树
+- Ginkgo | 柏树
+- Angiosperms | 银杏
+- Sunflower | 向日葵
+- Lotus | 荷花
+- Chrysanthemum | 菊花
+
 ## 转列表格
 
-这里我弄了**可折叠**（@todo 虽然没有画折叠符号，而且有bug，但的确是可折叠的）
+这里我弄了可折叠
 
 描述一下公司结构：
 
 [2lt]
-- 名称 | 上级部门 | 负责人
+- < 名称| 上级部门| 负责人| 负责人电话
 - Obsidian开源集团
- - 上海分公司 | 开源集团 | 张三
-  - 市场部 | 上海分公司 | 李四
-  - 销售部 | 上海分公司 | 王五
- - 北京分公司 | 开源集团 | 陈六
-  - 技术部 | 北京分公司 | 欧阳
-  - 财务部 | 北京分公司 | 皇甫
+ - 上海分公司| 开源集团 | 张三| 13&xxxxxxxx
+  - 市场部| 上海分公司 | 李四| 14&xxxxxxxx
+  - 市场分部1
+  - 市场分部2
+  - 销售部| 上海分公司 | 王五| 15&xxxxxxxx
+ - 北京分公司| 开源集团 | 陈六| 16&xxxxxxxx
+  - 技术部| 北京分公司 | 欧阳| 17&xxxxxxxx
+  - 财务部| 北京分公司 | 皇甫| 18&xxxxxxxx
 
 ## 列表转表格的另一种写法
 

demo/2. 使用示例 - 代码块引用块选择器.md

@@ -72,7 +72,9 @@ It is a good plugin
 
 {[!info]
 ad-quote
+
 dfsfs
+
 dfsfsdafa
 }.
 

demo/3. 使用示例 - 全局选择器.md

@@ -5,7 +5,7 @@
 可以包括很大一片区域，且不需要选择结束位置
 
 （注意：一般使用N级标题选择器所选择的范围为两个N-1级标题之间的范围）
-（**@todo** 按理说这里应该还要有个选项，能够选择当前标题的同级项还是低级项）
+（@todo 按理说这里应该还要有个选项，能够选择当前标题的同级项还是低级项）
 
 [quote]
 ### 标题选择器示例

demo/4. 设计理念.md

@@ -195,7 +195,7 @@ AB的核心能力是范围选择并处理，但很多人对该特性缺乏了解
 
 下面我们来对比一下
 
-[list2mdut]
+[list2mdutT]
 - 对比项
  - 例子
  - 源代码可读性

demo/9. TODO.md

@@ -1,11 +1,14 @@
 todo
 
 - reinforce
+ - 性能
+  - 优化刷新频率，现在的刷新频率太高了
  - 选择器
   - **嵌套选择器**
   没有嵌套的程序是没有灵魂的 !!!
   （但问题在于，例如说第一层是tree，可能会破坏结构，有歧义。因为现在的tree格式是number-str的，那需要number-dom才行）
   （或者说：列表选择器不能嵌套列表选择器有歧义，需要嵌套引用选择器，在此基础上你解除引用选择器间接嵌套）
+  - 现在的都是同级选择器，增添下级选择器（话说下级选择器的多了一个根部，怎么解决？当标题头吗）
  - 处理器
   - QA处理器
   - 优化2ultable，在这个模式中让内联换行变成同级换行而非下级换行的意思
@@ -22,7 +25,7 @@ todo
 - fixing bug
  - 复选框列表的兼容、有序列表的兼容
  - **引用块内的列表/列表内的引用块 无法识别**
- - 表格转置与表头符号冲突、转置模式目前是纯css实现的 如果大家的行高不相同，会出现不匹配的情况。
+ - **表格转置与表头符号冲突、转置模式目前是纯css实现的 如果大家的行高不相同，会出现不匹配的情况。**
   后续会将css实现改进为转化table元素实现
 
 

src/replace/listProcess.ts

@@ -1,4 +1,4 @@
-import { MarkdownRenderer, MarkdownRenderChild } from 'obsidian'
+import { MarkdownRenderer, MarkdownRenderChild, TAbstractFile } from 'obsidian'
 import { isNull } from 'util'
 import mermaid from "mermaid"
 import {getID} from "src/utils/utils"
@@ -661,6 +661,7 @@ export default class ListProcess{
  if (!matchs) return div
  if (!matchs[1]) tr_line_level.push(0)
  else tr_line_level.push(Math.round(matchs[1].length/6))
+ item.content = item.content.replace(/^(( )*)/, "")
  }
  else {
  tr_line_level.push(0)
@@ -679,14 +680,17 @@ export default class ListProcess{
  }
 
  // 表格数据 组装成表格
- const table = div.createEl("table")
+ const table = div.createEl("table", {
+ cls: ["ab-list-table"]
+ })
  if (modeT) table.setAttribute("modeT", "true")
  let thead
  if(list_itemInfo2[0].content.indexOf("< ")==0){ // 判断是否有表头
  thead = table.createEl("thead")
  list_itemInfo2[0].content=list_itemInfo2[0].content.replace(/^\<\s/,"")
  }
  const tbody = table.createEl("tbody")
+ let prev_tr = null // 用来判断是否可以折叠
  for (let index_line=0; index_line<prev_line+1; index_line++){ // 遍历表格行，创建tr……
  let is_head
  let tr
@@ -699,24 +703,37 @@ export default class ListProcess{
  else{
  is_head = false
  tr = tbody.createEl("tr", {
- cls: ["ab-flodable-tr"],
- attr: {"tr_level": tr_line_level[index_line], "is_flod": "false"}
+ cls: ["ab-foldable-tr"],
+ attr: {
+ "tr_level": tr_line_level[index_line], 
+ "is_fold": "false",
+ "able_fold": "false"
+ }
  })
+ // 判断上一个是否可折叠。不需要尾判断，最后一个肯定不能折叠
+ if (prev_tr 
+ && !isNaN(Number(prev_tr.getAttribute("tr_level"))) 
+ && Number(prev_tr.getAttribute("tr_level"))<tr_line_level[index_line]
+ ){
+ prev_tr.setAttribute("able_fold", "true")
+ }
+ prev_tr = tr
  }
  for (let item of list_itemInfo2){ // 遍历表格列，创建td
  if (item.tableLine!=index_line) continue
  if (modeMD) { // md版
  let td = tr.createEl(is_head?"th":"td", {
  attr:{"rowspan": item.tableRow}
- })
+ }).createDiv()
  const child = new MarkdownRenderChild(td);
  MarkdownRenderer.renderMarkdown(item.content, td, "", child);
  }
  else{ // 非md版
- tr.createEl(is_head?"th":"td", {
+ let td = tr.createEl(is_head?"th":"td", {
  // text: item.content, //.replace("\n","<br/>"),
  attr:{"rowspan": item.tableRow}
- }).innerHTML = item.content.replace(/\n/g,"<br/>")
+ }).createDiv()
+ td.innerHTML = item.content.replace(/\n/g,"<br/>")
  }
  }
  }
@@ -727,12 +744,12 @@ export default class ListProcess{
  const tr = l_tr[i]
  /*const tr_level = Number(tr.getAttribute("tr_level"))
  if (isNaN(tr_level)) continue
- const tr_isfold = tr.getAttribute("is_flod")
+ const tr_isfold = tr.getAttribute("is_fold")
  if (!tr_isfold) continue*/
  tr.onclick = ()=>{
  const tr_level = Number(tr.getAttribute("tr_level"))
  if (isNaN(tr_level)) return
- const tr_isfold = tr.getAttribute("is_flod")
+ const tr_isfold = tr.getAttribute("is_fold")
  if (!tr_isfold) return
  let flag_do_fold = false // 防止折叠最小层
  for (let j=i+1; j<l_tr.length; j++){
@@ -743,7 +760,7 @@ export default class ListProcess{
  tr2.setAttribute("style", "display:"+(tr_isfold=="true"?"block":"none"))
  flag_do_fold = true
  }
- if (flag_do_fold) tr.setAttribute("is_flod", tr_isfold=="true"?"false":"true")
+ if (flag_do_fold) tr.setAttribute("is_fold", tr_isfold=="true"?"false":"true")
  }
  }
 
@@ -797,11 +814,12 @@ export default class ListProcess{
  if (itemInfo.level==0){
  ul.createEl("li", {
  cls: ["ab-tab-tab"],
- text: itemInfo.content.slice(0,20)
+ text: itemInfo.content.slice(0,20),
+ attr: {"is_activate":i==0?"true":"false"}
  })
  current_dom = content.createDiv({
  cls: ["ab-tab-content"],
- attr: {"style": i==0?"display:block":"display:none"}
+ attr: {"style": i==0?"display:block":"display:none", "is_activate":i==0?"true":"false"}
  })
  }
  }
@@ -819,11 +837,16 @@ export default class ListProcess{
  // 元素全部创建完再来绑按钮事件，不然有可能有问题
  const lis:NodeListOf<HTMLLIElement> = tab.querySelectorAll(".ab-tab-tab")
  const contents = tab.querySelectorAll(".ab-tab-content")
+ if (lis.length!=contents.length) console.warn("ab-tab-tab和ab-tab-content的数量不一致")
  for (let i=0; i<lis.length; i++){
  lis[i].onclick = ()=>{
- for (let contentItem of contents){
- contentItem.setAttribute("style", "display:none")
+ for (let j=0; j<contents.length; j++){
+ lis[j].setAttribute("is_activate", "false")
+ contents[j].setAttribute("is_activate", "false")
+ contents[j].setAttribute("style", "display:none")
  }
+ lis[i].setAttribute("is_activate", "true")
+ contents[i].setAttribute("is_activate", "true")
  contents[i].setAttribute("style", "display:block")
  }
  }

styles.css

@@ -1,4 +1,5 @@
-/**
+@charset "UTF-8";
+/** 替换内容
  * .ab-replace
  * .ab-note
  * .ab-button
@@ -34,12 +35,15 @@
  display: block;
 }
 
+.ab-note .ab-tab-root {
+ border: solid royalblue 1px;
+}
+
 .ab-note .ab-tab-root > ul {
  height: 30px;
- margin-bottom: 6px;
 }
 
-.ab-note .ab-tab-root > ul li.ab-tab-tab {
+.ab-note .ab-tab-root .ab-tab-tab {
  float: left;
  list-style: none;
  height: 30px;
@@ -49,10 +53,69 @@
  border: solid royalblue 1px;
 }
 
-.ab-note .ab-tab-root > div {
+.ab-note .ab-tab-root .ab-tab-tab[is_activate="true"] {
+ background-color: slateblue;
+}
+
+.ab-note .ab-tab-root .ab-tab-content {
  clear: both;
+ padding: 8px 10px;
+}
+
+.ab-note .ab-list-table .ab-foldable-tr[able_fold="true"] > td:first-child > div {
+ padding-left: 15px;
+ position: relative;
+}
+
+.ab-note .ab-list-table .ab-foldable-tr[able_fold="true"] > td:first-child > div::before {
+ content: "";
+ position: absolute;
+ width: 0;
+ height: 0;
+}
+
+.ab-note .ab-list-table .ab-foldable-tr[able_fold="true"][is_fold="true"] > td:first-child > div::before {
+ top: 5px;
+ left: 2px;
+ border: 6px solid transparent;
+ border-left-color: #d9d9d9;
+}
+
+.ab-note .ab-list-table .ab-foldable-tr[able_fold="true"][is_fold="false"] > td:first-child > div::before {
+ top: 9px;
+ left: -1px;
+ border: 6px solid transparent;
+ border-top-color: #d9d9d9;
+}
+
+.ab-note .ab-list-table .ab-foldable-tr[tr_level="1"] > td:first-child {
+ padding-left: calc(1*12px);
+}
+
+.ab-note .ab-list-table .ab-foldable-tr[tr_level="2"] > td:first-child {
+ padding-left: calc(2*12px);
+}
+
+.ab-note .ab-list-table .ab-foldable-tr[tr_level="3"] > td:first-child {
+ padding-left: calc(3*12px);
+}
+
+.ab-note .ab-list-table .ab-foldable-tr[tr_level="4"] > td:first-child {
+ padding-left: calc(4*12px);
+}
+
+.ab-note .ab-list-table .ab-foldable-tr[tr_level="5"] > td:first-child {
+ padding-left: calc(5*12px);
+}
+
+.ab-note .ab-list-table .ab-foldable-tr[tr_level="6"] > td:first-child {
+ padding-left: calc(6*12px);
+}
+
+.ab-note .ab-list-table .ab-foldable-tr[tr_level="7"] > td:first-child {
+ padding-left: calc(7*12px);
 }
 
-.ab-note .ab-flodable-tr[is_flod="true"] {
- color: royalblue;
+.ab-note .ab-list-table .ab-foldable-tr[tr_level="8"] > td:first-child {
+ padding-left: calc(8*12px);
 }