Skip to content

Commit

Permalink
feat: add layout: h-fall and v-fall
Browse files Browse the repository at this point in the history
  • Loading branch information
@LincZero
LincZero committed Jan 25, 2025
1 parent 71e1868 commit fa970a9
Show file tree
Hide file tree
Showing 8 changed files with 385 additions and 127 deletions.
4 changes: 2 additions & 2 deletions docs/docs/api/Alias别名系统.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ const ABAlias_json_title: ABAlias_json_item[] = [
{regex: /\|heading 140lne\|2?(timeline|时间线)\|/, replacement: "|title2timeline|"},
{regex: /\|heading 140lne\|2?(tabs?|标签页?)\||\|title2tabs?\|/, replacement: "|title2c2listdata|c2listdata2tab|"},
{regex: /\|heading 140lne\|2?(col|分栏)\||\|title2col\|/, replacement: "|title2c2listdata|c2listdata2items|addClass(ab-col)|"},
{regex: /\|heading 140lne\|2?(card|卡片)\||\|title2card\|/, replacement: "|title2c2listdata|c2listdata2items|addClass(ab-card)|"},
{regex: /\|heading 140lne\|2?(card|卡片)\||\|title2card\|/, replacement: "|title2c2listdata|c2listdata2items|addClass(ab-card)|addClass(ab-vfall)|"},
{regex: /\|heading 140lne\|2?(nodes?|节点)\||\|(title2node|title2abMindmap)\|/, replacement: "|title2listdata|listdata2strict|listdata2nodes|"},

// list - 多叉多层树
Expand All @@ -58,7 +58,7 @@ const ABAlias_json_list: ABAlias_json_item[] = [
{regex: /\|list 140lne\|2?(timeline|时间线)\|/, replacement: "|list2timeline|"},
{regex: /\|list 140lne\|2?(tabs?|标签页?)\||\|list2tabs?\|/, replacement: "|list2c2listdata|c2listdata2tab|"},
{regex: /\|list 140lne\|2?(col|分栏)\||\|list2col\|/, replacement: "|list2c2listdata|c2listdata2items|addClass(ab-col)|"},
{regex: /\|list 140lne\|2?(card|卡片)\||\|list2card\|/, replacement: "|list2c2listdata|c2listdata2items|addClass(ab-card)|"},
{regex: /\|list 140lne\|2?(card|卡片)\||\|list2card\|/, replacement: "|list2c2listdata|c2listdata2items|addClass(ab-card)|addClass(ab-vfall)|"},
{regex: /\|list 140lne\|2?(nodes?|节点)\||\|(list2node|list2abMindmap)\|/, replacement: "|list2listdata|listdata2strict|listdata2nodes|"},

// list - 多叉多层树
Expand Down
4 changes: 2 additions & 2 deletions src/ABConverter/ABAlias.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@ const ABAlias_json_title: ABAlias_json_item[] = [
{regex: /\|heading 140lne\|2?(timeline|时间线)\|/, replacement: "|title2timeline|"},
{regex: /\|heading 140lne\|2?(tabs?|标签页?)\||\|title2tabs?\|/, replacement: "|title2c2listdata|c2listdata2tab|"},
{regex: /\|heading 140lne\|2?(col|分栏)\||\|title2col\|/, replacement: "|title2c2listdata|c2listdata2items|addClass(ab-col)|"},
{regex: /\|heading 140lne\|2?(card|卡片)\||\|title2card\|/, replacement: "|title2c2listdata|c2listdata2items|addClass(ab-card)|"},
{regex: /\|heading 140lne\|2?(card|卡片)\||\|title2card\|/, replacement: "|title2c2listdata|c2listdata2items|addClass(ab-card)|addClass(ab-vfall)|"},
{regex: /\|heading 140lne\|2?(nodes?|节点)\||\|(title2node|title2abMindmap)\|/, replacement: "|title2listdata|listdata2strict|listdata2nodes|"},

// list - 多叉多层树
Expand All @@ -145,7 +145,7 @@ const ABAlias_json_list: ABAlias_json_item[] = [
{regex: /\|list 140lne\|2?(timeline|时间线)\|/, replacement: "|list2timeline|"},
{regex: /\|list 140lne\|2?(tabs?|标签页?)\||\|list2tabs?\|/, replacement: "|list2c2listdata|c2listdata2tab|"},
{regex: /\|list 140lne\|2?(col|分栏)\||\|list2col\|/, replacement: "|list2c2listdata|c2listdata2items|addClass(ab-col)|"},
{regex: /\|list 140lne\|2?(card|卡片)\||\|list2card\|/, replacement: "|list2c2listdata|c2listdata2items|addClass(ab-card)|"},
{regex: /\|list 140lne\|2?(card|卡片)\||\|list2card\|/, replacement: "|list2c2listdata|c2listdata2items|addClass(ab-card)|addClass(ab-vfall)|"},
{regex: /\|list 140lne\|2?(nodes?|节点)\||\|(list2node|list2abMindmap)\|/, replacement: "|list2listdata|listdata2strict|listdata2nodes|"},

// list - 多叉多层树
Expand Down
10 changes: 7 additions & 3 deletions src/ABConverter/ABConvertEvent.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -166,9 +166,13 @@ export function abConvertEvent(d: Element|Document) {
}
}

// list2card，瀑布流卡片顺序重调事件
if (d.querySelector('.ab-items.ab-card:not(.js-waterfall)')) {
const root_el_list = d.querySelectorAll(".ab-items.ab-card:not(.js-waterfall)")
// tips: 这里说一下items布局的问题，TODO 是有计划将布局方式分开成一个独立的处理器，而部分布局需要js
// 普通纵向瀑布流: 纯css、有序纵向瀑布流: js
// 横向瀑布流: 纯css、高精度横向瀑布流: 未实现js

// list2card，纵向瀑布流 (等宽瀑布流) 顺序重调事件
if (d.querySelector('.ab-items.ab-vfall:not(.js-waterfall):not(.ab-hfall)')) {
const root_el_list = d.querySelectorAll(".ab-items.ab-vfall:not(.js-waterfall):not(.ab-hfall)")
for (const root_el of root_el_list) {
// 1. 准备原元素
root_el.classList.add("js-waterfall") // 避免：触发两次时，第二次触发会以第一次触发的顺序为基准，再进行调整
Expand Down
13 changes: 7 additions & 6 deletions src/ABConverter/converter/abc_mdit_container.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,11 @@ import {ABReg} from "../ABReg"

/// 按mdit-tabs的标准转化为二列列表数据
function mditTabs2listdata(content:string, reg: RegExp): List_C2ListItem {
let list_line = content.split("\n")
const list_line = content.split("\n")
let content_item: string = ""
let list_c2listItem: List_C2ListItem = []
const list_c2listItem: List_C2ListItem = []
for (let line_index=0; line_index<list_line.length; line_index++) {
let line_content = list_line[line_index]
const line_content = list_line[line_index]
const line_match = line_content.match(reg)
if (line_match) {
add_current_content()
Expand Down Expand Up @@ -47,7 +47,7 @@ const abc_mditTabs = ABConvert.factory({
process_param: ABConvert_IOEnum.text,
process_return: ABConvert_IOEnum.el,
process: (el, header, content: string): HTMLElement=>{
let c2listdata: List_C2ListItem = mditTabs2listdata(content, /^@tab(.*)$/)
const c2listdata: List_C2ListItem = mditTabs2listdata(content, /^@tab(.*)$/)
C2ListProcess.c2data2tab(c2listdata, el, false)
return el
}
Expand Down Expand Up @@ -88,7 +88,7 @@ const abc_midt_co = ABConvert.factory({
process_param: ABConvert_IOEnum.text,
process_return: ABConvert_IOEnum.el,
process: (el, header, content: string): HTMLElement=>{
let c2listdata: List_C2ListItem = mditTabs2listdata(content, /^@col(.*)$/) // /^@[a-zA-Z]* (.*)$/
const c2listdata: List_C2ListItem = mditTabs2listdata(content, /^@col(.*)$/) // /^@[a-zA-Z]* (.*)$/
C2ListProcess.c2data2items(c2listdata, el)
el.querySelector("div")?.classList.add("ab-col")
return el
Expand All @@ -101,9 +101,10 @@ const abc_midt_card = ABConvert.factory({
process_param: ABConvert_IOEnum.text,
process_return: ABConvert_IOEnum.el,
process: (el, header, content: string): HTMLElement=>{
let c2listdata: List_C2ListItem = mditTabs2listdata(content, /^@card(.*)$/) // /^@[a-zA-Z]* (.*)$/
const c2listdata: List_C2ListItem = mditTabs2listdata(content, /^@card(.*)$/) // /^@[a-zA-Z]* (.*)$/
C2ListProcess.c2data2items(c2listdata, el)
el.querySelector("div")?.classList.add("ab-card")
el.querySelector("div")?.classList.add("ab-vfall")
return el
}
})
153 changes: 119 additions & 34 deletions src/ABConverter/style/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -711,39 +711,6 @@ html[data-theme="dark"] #app {
padding: 10px;
}

.ab-note .ab-items.ab-card {
/*display: flex; // Flexbox 布局
flex-wrap: wrap; // 元素换行显示
gap: 1rem; // 间隙
.ab-items-item {
flex: 1 0 calc(25% - 1rem); // 每个项目的宽度大约为容器的 33.33%，减去间隙的一半
}*/
column-count: 4;
column-gap: 10px;
/*display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 1rem; // 间隙
grid-template-rows: masonry; // 兼容有问题，只有火狐支持，还tm的要开选项
.ab-items-item {
width: 100%;
display: block;
}*/
/*display: flex; // Flexbox 布局
flex-wrap: wrap; // 元素换行显示
// gap: 1rem; // 间隙
flex-direction: column; // 按列填充
.ab-items-item {
position: relative;
width: calc(100% / 4);
padding: 5px;
box-sizing: border-box;
&:nth-child(4n+1){ order: 1; }
&:nth-child(4n+2){ order: 2; }
&:nth-child(4n+3){ order: 3; }
&:nth-child(4n+0){ order: 4; }
}*/
}

.ab-note .ab-items.ab-card .ab-items-item {
box-sizing: border-box;
color: var(--ab-tab-root-tx-color);
Expand All @@ -765,10 +732,128 @@ html[data-theme="dark"] #app {
border-bottom: 1px solid var(--ab-bright-color);
}

.ab-note .ab-items.ab-card .ab-items-item {
.ab-note .ab-items.ab-card.ab-vfall:not(.ab-hfall) {
/*display: flex; // Flexbox 布局
flex-wrap: wrap; // 元素换行显示
gap: 1rem; // 间隙
.ab-items-item {
flex: 1 0 calc(25% - 1rem); // 每个项目的宽度大约为容器的 33.33%，减去间隙的一半
}*/
column-count: 4;
column-gap: 10px;
/*display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 1rem; // 间隙
grid-template-rows: masonry; // 兼容有问题，只有火狐支持，还tm的要开选项
.ab-items-item {
width: 100%;
display: block;
}*/
/*display: flex; // Flexbox 布局
flex-wrap: wrap; // 元素换行显示
// gap: 1rem; // 间隙
flex-direction: column; // 按列填充
.ab-items-item {
position: relative;
width: calc(100% / 4);
padding: 5px;
box-sizing: border-box;
&:nth-child(4n+1){ order: 1; }
&:nth-child(4n+2){ order: 2; }
&:nth-child(4n+3){ order: 3; }
&:nth-child(4n+0){ order: 4; }
}*/
}

.ab-note .ab-items.ab-card.ab-vfall:not(.ab-hfall) .ab-items-item {
break-inside: avoid-column;
}

.ab-note .ab-items.ab-card.ab-hfall {
display: flex;
flex-wrap: wrap;
flex-direction: row;
}

.ab-note .ab-items.ab-card.ab-hfall::after {
content: "";
flex-grow: 99999;
}

.ab-note .ab-items.ab-card.ab-hfall > .ab-items-item {
flex-grow: 1;
margin: 5px;
padding: 0 10px;
position: relative;
overflow: hidden;
}

.ab-note .ab-items.ab-card.ab-hfall > .ab-items-item img {
max-width: 100%;
min-width: 100%;
height: 200px;
margin: 0;
object-fit: cover;
vertical-align: bottom;
}

.ab-note .ab-items.ab-card.ab-hfall > .ab-items-item p {
max-width: 300px;
margin: 0;
}

.ab-note .ab-items.ab-card.ab-hfall > .ab-items-item > .ab-items-content {
height: 100%;
min-width: 100%;
}

.ab-note .ab-items.ab-card.ab-deco-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 10px;
margin: 0 auto;
}

.ab-note .ab-items.ab-card.ab-deco-grid::after {
content: "";
flex-grow: 99999;
}

.ab-note .ab-items.ab-card.ab-deco-grid > .ab-items-item {
position: relative;
overflow: hidden;
margin: 5px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
/* 确保文字居中 */
}

.ab-note .ab-items.ab-card.ab-deco-grid > .ab-items-item img {
max-width: 200px;
max-height: 200px;
width: 100%;
/* 确保图片宽度为100%，适应网格布局 */
height: auto;
}

.ab-note .ab-items.ab-card.ab-deco-grid > .ab-items-item > .ab-items-content {
width: 100%;
}

.ab-note .ab-items.ab-card.ab-deco-scroll-x {
margin: 0 auto;
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
}

.ab-note .ab-items.ab-card.ab-deco-scroll-x .ab-items-item {
flex: 0 0 auto;
width: 170px;
}

.ab-note .ab-items.ab-col1 {
column-count: 1 !important;
}
Expand Down
2 changes: 1 addition & 1 deletion src/ABConverter/style/styles.min.css
View file

Large diffs are not rendered by default.

Loading

0 comments on commit fa970a9

Please sign in to comment.