可在预览模式直接调节的可视化进度条

经验分享
22

神了。。。
我如果单纯复制内容进ob是不隔行的，这次全选复制就可以用了，互动性太强了。。。感谢L老总。。顺路有个问题我不知道该不该新发个帖子。。。
就是除了cuman大佬那个示例库里的每日一句外，其他我找到的所有嵌入ob的方式只能嵌入一句话，用iframe调用好像只有svg的模式可用。。我比对之前的dataview示例，替换诗词api接口最后都是报错。。orz
我按照之前那个历史上的今天的dataview把替换了下面这4项，然后地址填了https://v1.jinrishici.com/all.json,但什么也显示不出来，orz。。请大佬有空看看，如果没法弄我就继续退回之前的每日诗词模式。。。 :rofl:
{
“content” : “梅定妒，菊应羞。画阑开处冠中秋。”,
“origin” : “鹧鸪天·桂花”,
“author” : “李清照”,
“category” : “古诗文-植物-菊花”
}

23

这样满足你的需求吗

```dataviewjs
let url = `https://v1.jinrishici.com/all.json`
let res = await request({url: url,method: "GET"});
let data = JSON.parse(res)
dv.paragraph(data.content)
```
1 个赞
24

2023-01-28 200024
2023-01-28 2000241080×402 23.4 KB

抱歉大佬突然忘了今天还要上班。。。昨天下线了，这是目前的效果
我把首字母放大这个关了效果就出来了。。后续加其他的都很方便。。再次给大佬嗑一个~ :smiling_face_with_three_hearts:

25

我用您的这段代码显示进度条之后，包含进度条代码的笔记都无法删除，请问有什么办法可以解决这个问题吗 :saluting_face:

26

啊，抱歉，之前加了这两句

app.workspace.on('active-leaf-change',()=>{save()})
app.workspace.on('quit',()=>{save()})

工作区变动就会自动保存，但是会导致你这样的情况（因为删除文件也属于工作区变动），在系统资源管理器里删除应该就行了，再不行就在关闭ob的情况下删除。

还是不要这两句了为好

27

请问这个图是怎么实现的呀

图片
图片652×510 108 KB

28

你可以把数据放到 frontmatter 操作的话，那就不用 save 了，还不占你的文本，还能跟别的插件结合。下面是我的代码。

tags:
title: Dataview frontmatter Button
douyin: 2
lolm: 3
date created: 2023年10月26日,星期四,下午 16:05:51
date modified: 2023年10月26日,星期四,下午 17:33:12

let file = dv.current()
let af = app.vault.getMarkdownFiles().filter(p=>p.path==file.file.path)[0]
let frontmatter = file.file.frontmatter
let active_file = app.workspace.getActiveFile()
let douyin = frontmatter.douyin
let lolm = frontmatter.lolm

let container = this.container

let content = await app.vault.readRaw(file.file.path)
let regexp = /(?<=\%\%)[\s\S]*?(?=\%\%)/
let rawText = regexp.exec(content)[0].split('\n').filter(p=>p.length!=0)
// let Data = rawText.map(p=>p.split('+|+')).map(p=>[p[0],Number(p[1]),p[2]=Number(p[2])])

let Data = [
// 0.应用名，1.frontmatter数据，2.进度条总，3.点击按钮点加的单位，4.frontmatter 名称,
["抖音",douyin,3,1,"douyin"],
["英雄联盟手游",lolm,3,1,"lolm"]
]

// 表格元素
let rank = (data,i)=>{
	let com = table.createEl('div')
    let title = Data[i][0]
    let plan = com.createEl('span',{'text':Data[i][1]+'/'+Data[i][2]})
    let progress = com.createEl('progress')
    changePro(progress,Data[i][1]/Data[i][2],com)
    progress.value = Data[i][1]
    progress.max = Data[i][2]

    let button = com.createEl('div',)
    let btn_p = button.createEl('button',{'text':'+'})
    let btn_s = button.createEl('button',{'text':'-'})
    btn_p.addEventListener('click',async (evt)=> {
        midifyData(i,'p',Data[i][3],Data[i][4])
        progress.value = Data[i][1]
        changePro(progress,Data[i][1]/Data[i][2],com)
        plan.innerHTML = Data[i][1]+'/'+Data[i][2]
    })
    btn_s.addEventListener('click',async (evt)=> {
        midifyData(i,'s',Data[i][3],Data[i][4])
        progress.value = Data[i][1]
        changePro(progress,Data[i][1]/Data[i][2],com)
        plan.innerHTML = Data[i][1]+'/'+Data[i][2]
    })
    return [title,plan,progress,button]
}

// 表格本体
let table = container.createEl("div");
let headers = ['标题','进度','进度条','修改']
let values = Data.map((p,i)=>rank(p,i))
createTable(headers,values,table)

// 保存按钮
let button_ = container.createEl('div',{'id':'con'})

// 排序
let sortOptions = ['名称 A-Z','名称 Z-A','百分比-正序','百分比-倒序']
let sortFun = [
	(a,b)=>dv.compare(a[0],b[0]),
	(a,b)=>dv.compare(b[0],a[0]),
	(a,b)=>dv.compare(b[1]/b[2],a[1]/a[2]),
	(a,b)=>dv.compare(a[1]/a[2],b[1]/b[2]),
]
let se = button_.createEl('select')
let op = sortOptions.map(p=>se.createEl('option',{'text':p}))
se.onchange = function() {
	let index = se.selectedIndex
	table.empty()
	Data = Data.sort(sortFun[index])
    createTable(
	    headers, 
	    Data.map((p,i)=>rank(p,i)),
	    table)
}

// 其他函数
function createTable(headers,values,t) {
	dv.table(headers,values)
	t.appendChild(container.getElementsByTagName('table')[0])
}
function changePro(progress, p, com) {
	if(p>=0 && p<0.3) progress.className = 'red'
	else if(p>=0.3 && p<0.6) progress.className = 'yellow'
	else if(p>=0.6 && p<1) progress.className = 'green'
	else if(p==1) progress.className = 'ok'

}
// 修改函数
function midifyData(i,m,handle_num,target) {
	// plus
    if(Data[i][1]<Data[i][2] && m=='p'){
        Data[i][1] += handle_num
        // update frontmatter
        app.fileManager.processFrontMatter(active_file, (fm) => {
	        fm[target] = parseInt(Data[i][1]);
	    });
    } 
    // sub
    if(Data[i][1]>0 && m=='s'){
        Data[i][1] -= handle_num
        // update frontmatter
        app.fileManager.processFrontMatter(active_file, (fm) => {
	        fm[target] = parseInt(Data[i][1]);
	    });
    }
}

效果如下：

image
image1140×680 43.8 KB

1 个赞
29

佬，你现在还用进度条吗，我搜集了一些进度条样式，只需要用百分数，可以看看，这样就不用费劲指定 CSS 类了。

进度条展示及说明链接：

dvjs 大概类似这个：

let percent = (p.file.frontmatter.行数 / p.file.frontmatter.总行数) * 100
"<progress value='" + percent + "' max='100' class='color' />"
30

现在倒不用了，这玩意是去年在学校疫情封了几个月的发癫之作，现在看起来也是很无聊的作品 :melting_face: