Animate Visibility and Save hide state

main.ts

@@ -1,35 +1,61 @@
-import { App, Plugin, addIcon, PluginManifest } from 'obsidian';
+import { App, Plugin, addIcon, PluginManifest, setIcon } from 'obsidian';
+
+interface TaskHiderPluginSettings {
+	hide: boolean;
+}
 
 export default class TaskHiderPlugin extends Plugin {
 	statusBar: HTMLElement;
+	settings: TaskHiderPluginSettings;
 
 	constructor(app: App, manifest: PluginManifest) {
 		super(app, manifest);
 		this.statusBar = this.addStatusBarItem();
+		setIcon(this.statusBar, "list-checks");
+		this.statusBar.addEventListener('click', this.toggleCompletedTaskView.bind(this));
+		this.statusBar.addClass('mod-clickable');
+		this.registerEvent(this.app.workspace.on('file-open', this.skipAnimation.bind(this)));
+	}
+
+	async skipAnimation(workspace: any) {
+		document.body.removeClass('add-animation');
+		await new Promise(resolve => setTimeout(resolve, 1000));
+		document.body.addClass('add-animation');
 	}
 
 	toggleCompletedTaskView() {
-		document.body.toggleClass('hide-completed-tasks', hiddenState);
-		hiddenState = !hiddenState;
-		this.statusBar.setText(hiddenState ? 'Showing Completed Tasks' : 'Hiding Completed Tasks');
+		this.settings.hide = !this.settings.hide;
+		this.saveSettings();
+		this.update();
+	}
+	update() {
+		document.body.toggleClass('hide-completed-tasks', this.settings.hide);
 	}
 
 	async onload() {
-		console.log('loading completed-task-display plugin');
-		this.statusBar.setText('Showing Completed Tasks');
+		await this.loadSettings();
+		this.update();
+
 
 		addIcon('tasks', taskShowIcon);
-		this.addRibbonIcon('tasks', 'Task Hider', this.toggleCompletedTaskView);
+		this.addRibbonIcon('tasks', 'Task Hider', this.toggleCompletedTaskView.bind(this));
 		this.addCommand({
 			id: "toggle-completed-task-view",
 			name: "Toggle Completed Task View",
-			callback: this.toggleCompletedTaskView,
+			callback: this.toggleCompletedTaskView.bind(this),
 		});
 	}
 
 	onunload() {
 		console.log('unloading completed-task-display plugin');
 	}
+
+	async loadSettings() {
+		this.settings = Object.assign({}, { hide: false }, await this.loadData());
+	}
+
+	async saveSettings() {
+		await this.saveData(this.settings);
+	}
 }
-const taskShowIcon = `<svg aria-hidden="true" focusable="false" data-prefix="fal" data-icon="tasks" class="svg-inline--fa fa-tasks fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M145.35 207a8 8 0 0 0-11.35 0l-71 71-39-39a8 8 0 0 0-11.31 0L1.35 250.34a8 8 0 0 0 0 11.32l56 56a8 8 0 0 0 11.31 0l88-88a8 8 0 0 0 0-11.32zM62.93 384c-17.67 0-32.4 14.33-32.4 32s14.73 32 32.4 32a32 32 0 0 0 0-64zm82.42-337A8 8 0 0 0 134 47l-71 71-39-39a8 8 0 0 0-11.31 0L1.35 90.34a8 8 0 0 0 0 11.32l56 56a8 8 0 0 0 11.31 0l88-88a8 8 0 0 0 0-11.32zM503 400H199a8 8 0 0 0-8 8v16a8 8 0 0 0 8 8h304a8 8 0 0 0 8-8v-16a8 8 0 0 0-8-8zm0-320H199a8 8 0 0 0-8 8v16a8 8 0 0 0 8 8h304a8 8 0 0 0 8-8V88a8 8 0 0 0-8-8zm0 160H199a8 8 0 0 0-8 8v16a8 8 0 0 0 8 8h304a8 8 0 0 0 8-8v-16a8 8 0 0 0-8-8z"></path></svg>`
-let hiddenState = true;
+const taskShowIcon = `<svg aria-hidden="true" focusable="false" data-prefix="fal" data-icon="tasks" class="svg-inline--fa fa-tasks fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M145.35 207a8 8 0 0 0-11.35 0l-71 71-39-39a8 8 0 0 0-11.31 0L1.35 250.34a8 8 0 0 0 0 11.32l56 56a8 8 0 0 0 11.31 0l88-88a8 8 0 0 0 0-11.32zM62.93 384c-17.67 0-32.4 14.33-32.4 32s14.73 32 32.4 32a32 32 0 0 0 0-64zm82.42-337A8 8 0 0 0 134 47l-71 71-39-39a8 8 0 0 0-11.31 0L1.35 90.34a8 8 0 0 0 0 11.32l56 56a8 8 0 0 0 11.31 0l88-88a8 8 0 0 0 0-11.32zM503 400H199a8 8 0 0 0-8 8v16a8 8 0 0 0 8 8h304a8 8 0 0 0 8-8v-16a8 8 0 0 0-8-8zm0-320H199a8 8 0 0 0-8 8v16a8 8 0 0 0 8 8h304a8 8 0 0 0 8-8V88a8 8 0 0 0-8-8zm0 160H199a8 8 0 0 0-8 8v16a8 8 0 0 0 8 8h304a8 8 0 0 0 8-8v-16a8 8 0 0 0-8-8z"></path></svg>`

styles.css

@@ -1,5 +1,43 @@
-body.hide-completed-tasks .markdown-preview-view ul > li.task-list-item.is-checked,
-body.hide-completed-tasks .markdown-source-view .HyperMD-task-line[data-task]:not([data-task=" "]) {
-    display: none;
+body.hide-completed-tasks {
+    --hiding-complete-task-speed: 1ms;
+
+    .markdown-source-view {
+        .HyperMD-task-line {
+            &[data-task]:not([data-task=" "]) {
+                animation: hide var(--hiding-complete-task-speed) ease-in-out var(--hiding-complete-task-speed);
+                animation-fill-mode: forwards;
+                box-sizing: border-box;
+            }
+        }
     }
-}"])
+
+    .status-bar-item.plugin-completed-task-display {
+        opacity: 0.5;
+    }
+
+    .markdown-preview-view ul>li.task-list-item.is-checked {
+        animation: hide var(--hiding-complete-task-speed) ease-in-out var(--hiding-complete-task-speed);
+        animation-fill-mode: forwards;
+    }
+
+    &.add-animation {
+        --hiding-complete-task-speed: 0.5s;
+    }
+}
+
+@keyframes hide {
+    0% {
+        opacity: 1;
+    }
+
+    99% {
+        max-height: auto;
+    }
+
+    100% {
+        opacity: 0;
+        max-height: 0;
+        padding-top: 0;
+        padding-bottom: 0;
+    }
+}