Merge pull request #42 from Quorafind/fix/issues

Fix/issues
Quorafind · Jan 17, 2024 · 0ad0d15 · 0ad0d15
2 parents 93073e9 + b103957
commit 0ad0d15
Showing 1 changed file with 57 additions and 13 deletions.
diff --git a/src/readModeWidget.ts b/src/readModeWidget.ts
@@ -1,5 +1,5 @@
 import TaskProgressBarPlugin from "./taskProgressBarIndex";
-import { MarkdownPostProcessorContext } from "obsidian";
+import { Component, MarkdownPostProcessorContext } from "obsidian";
 
 interface GroupElement {
 	parentElement: HTMLElement;
@@ -29,17 +29,11 @@ function groupElementsByParent(childrenElements: HTMLElement[]) {
 	return result;
 }
 
-export function updateProgressBarInElement({plugin, element, ctx}: {
-	plugin: TaskProgressBarPlugin, element: HTMLElement, ctx: MarkdownPostProcessorContext
-}) {
-	if (!element.find('ul.contains-task-list')) return;
-
-	const elements = element.findAll('.task-list-item');
-	const groupedElements = groupElementsByParent(elements);
+function loadProgressbar(plugin: TaskProgressBarPlugin, groupedElements: GroupElement[], type: 'dataview' | 'normal') {
 	for (let group of groupedElements) {
 		if (group.parentElement.parentElement && group.parentElement?.parentElement.hasClass('task-list-item')) {
 
-			const progressBar = new ProgressBar(plugin, group).onload();
+			const progressBar = new ProgressBar(plugin, group, type).onload();
 
 			const previousSibling = group.parentElement.previousElementSibling;
 			if (previousSibling && previousSibling.tagName === 'P') {
@@ -51,8 +45,28 @@ export function updateProgressBarInElement({plugin, element, ctx}: {
 	}
 }
 
+export function updateProgressBarInElement({plugin, element, ctx}: {
+	plugin: TaskProgressBarPlugin, element: HTMLElement, ctx: MarkdownPostProcessorContext
+}) {
+	console.log('updateProgressBarInElement');
+	if (element.find('ul.contains-task-list')) {
+
+		const elements = element.findAll('.task-list-item');
+		const groupedElements = groupElementsByParent(elements);
+		loadProgressbar(plugin, groupedElements, 'normal');
+	} else if (element.closest('.dataview-container')) {
+		const parentElement = element.closest('.dataview-container');
+		if (!parentElement) return;
+		if (parentElement.getAttribute('data-task-progress-bar') === 'true') return;
+		const elements = parentElement.findAll('.task-list-item');
+		const groupedElements = groupElementsByParent(elements);
+		loadProgressbar(plugin, groupedElements, 'dataview');
+		parentElement.setAttribute('data-task-progress-bar', 'true');
+	}
+}
+
 
-class ProgressBar {
+class ProgressBar extends Component {
 	progressBarEl: HTMLSpanElement;
 	progressBackGroundEl: HTMLDivElement;
 	progressEl: HTMLDivElement;
@@ -65,23 +79,48 @@ class ProgressBar {
 
 	group: GroupElement;
 
-	constructor(plugin: TaskProgressBarPlugin, group: GroupElement) {
+	constructor(plugin: TaskProgressBarPlugin, group: GroupElement, readonly type: 'dataview' | 'normal') {
+		super();
 		this.plugin = plugin;
 
 		this.group = group;
-		this.updateCompletedAndTotal();
+		this.type === 'dataview' && this.updateCompletedAndTotalDataview();
+		this.type === 'normal' && this.updateCompletedAndTotal();
 
 		for (let el of this.group.childrenElement) {
-			el.on('click', 'input', () => {
+			this.type === 'normal' && el.on('click', 'input', () => {
 				setTimeout(() => {
 					this.updateCompletedAndTotal();
 					this.changePercentage();
 					this.changeNumber();
 				}, 200);
 			});
+
+			this.type === 'dataview' && this.registerDomEvent(el, 'mousedown', (ev) => {
+				if (!ev.target) return;
+				if ((ev.target as HTMLElement).tagName === 'INPUT') {
+					setTimeout(() => {
+						console.log('click');
+						console.log(el);
+						this.updateCompletedAndTotalDataview();
+						this.changePercentage();
+						this.changeNumber();
+					}, 200);
+				}
+			});
 		}
 	}
 
+	updateCompletedAndTotalDataview() {
+		const checked = this.group.childrenElement.filter((el) => el.getAttribute('data-task') && el.getAttribute('data-task') !== ' ').length;
+		const total = this.group.childrenElement.length;
+
+		this.numberEl?.detach();
+
+		this.completed = checked;
+		this.total = total;
+	}
+
 	updateCompletedAndTotal() {
 		const checked = this.group.childrenElement.filter((el) => el.hasClass('is-checked')).length;
 		const total = this.group.childrenElement.length;
@@ -148,4 +187,9 @@ class ProgressBar {
 
 		return this.progressBarEl;
 	}
+
+	onunload() {
+		super.onunload();
+
+	}
 }