Merge pull request #129 from decaf-dev/dev

1.17.0

manifest.json

@@ -1,7 +1,7 @@
 {
 	"id": "vault-explorer",
 	"name": "Vault Explorer",
-	"version": "1.16.0",
+	"version": "1.17.0",
 	"minAppVersion": "1.4.13",
 	"description": "Explore your vault in visual format",
 	"author": "DecafDev",

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "obsidian-vault-explorer",
-	"version": "1.16.0",
+	"version": "1.17.0",
 	"description": "Explore your vault in visual format",
 	"main": "main.js",
 	"scripts": {

src/constants.ts

@@ -1,6 +1,6 @@
 import { LOG_LEVEL_WARN } from "./logger/constants";
 import { generateRandomId } from "./svelte/shared/services/random";
-import { VaultExplorerPluginSettings, ViewType } from "./types";
+import { VaultExplorerPluginSettings, TExplorerView } from "./types";
 
 export const VAULT_EXPLORER_VIEW = "vault-explorer";
 
@@ -52,12 +52,33 @@ export const DEFAULT_SETTINGS: VaultExplorerPluginSettings = {
 		}
 	},
 	views: {
-		currentView: ViewType.GRID,
-		order: [...Object.values(ViewType)],
-		titleWrapping: "normal",
-		enableClockUpdates: true
+		dashboard: {
+			isEnabled: false,
+		},
+		grid: {
+			isEnabled: true,
+		},
+		list: {
+			isEnabled: true,
+		},
+		table: {
+			isEnabled: false,
+		},
+		feed: {
+			isEnabled: true,
+		},
+		recommended: {
+			isEnabled: false,
+		},
+		related: {
+			isEnabled: false,
+		}
 	},
+	currentView: TExplorerView.GRID,
+	titleWrapping: "normal",
+	enableClockUpdates: true,
 	enableScrollButtons: true,
 	pageSize: 50,
+	viewOrder: [TExplorerView.GRID, TExplorerView.LIST, TExplorerView.FEED],
 	pluginVersion: null
 }

src/event/types.ts

@@ -1,3 +1,3 @@
-export type PluginEvent = "file-rename" | "file-create" | "file-delete" | "file-modify" | "metadata-change" | "properties-filter-update" | "folder-rename" | "folder-delete" | "folder-create" | "page-size-setting-change" | "title-wrapping-setting-change" | "property-setting-change" | "device-registration-change" | "clock-updates-setting-change" | "filter-toggle-setting-change" | "scroll-buttons-setting-change";
+export type PluginEvent = "file-rename" | "file-create" | "file-delete" | "file-modify" | "metadata-change" | "properties-filter-update" | "folder-rename" | "folder-delete" | "folder-create" | "page-size-setting-change" | "title-wrapping-setting-change" | "property-setting-change" | "device-registration-change" | "clock-updates-setting-change" | "filter-toggle-setting-change" | "scroll-buttons-setting-change" | "view-toggle-setting-change";
 
 export type EventCallback = (...data: unknown[]) => void;

src/main.ts

@@ -3,7 +3,7 @@ import { Plugin, TAbstractFile, TFile, TFolder } from 'obsidian';
 import VaultExplorerView from './obsidian/vault-explorer-view';
 import VaultExplorerSettingsTab from './obsidian/vault-explorer-settings-tab';
 
-import { FilterRuleType, VaultExplorerPluginSettings, ViewType } from './types';
+import { FilterRuleType, TExplorerView, VaultExplorerPluginSettings } from './types';
 import { DEFAULT_SETTINGS, HOVER_LINK_SOURCE_ID, VAULT_EXPLORER_VIEW } from './constants';
 import _ from 'lodash';
 import EventManager from './event/event-manager';
@@ -26,6 +26,7 @@ import { VaultExplorerPluginSettings_1_9_1 } from './types/types-1.9.1';
 import { VaultExplorerPluginSettings_1_12_1 } from './types/types-1.12.1';
 import { VaultExplorerPluginSettings_1_13_1 } from './types/types-1.13.1';
 import { VaultExplorerPluginSettings_1_14_2 } from './types/types-1.14.2';
+import { VaultExplorerPluginSettings_1_16_0, ViewType_1_16_0 } from './types/types-1.16.0';
 
 export default class VaultExplorerPlugin extends Plugin {
 	settings: VaultExplorerPluginSettings = DEFAULT_SETTINGS;
@@ -359,7 +360,7 @@ export default class VaultExplorerPlugin extends Plugin {
 			if (isVersionLessThan(settingsVersion, "1.14.0")) {
 				console.log("Upgrading settings from version 1.13.1 to 1.14.0");
 				const typedData = (data as unknown) as VaultExplorerPluginSettings_1_13_1;
-				const newData: VaultExplorerPluginSettings = {
+				const newData: VaultExplorerPluginSettings_1_14_2 = {
 					...typedData,
 					filters: {
 						...typedData.filters,
@@ -393,15 +394,55 @@ export default class VaultExplorerPlugin extends Plugin {
 			if (isVersionLessThan(settingsVersion, "1.15.0")) {
 				console.log("Upgrading settings from version 1.14.2 to 1.15.0");
 				const typedData = (data as unknown) as VaultExplorerPluginSettings_1_14_2;
-				const newData: VaultExplorerPluginSettings = {
+				const newData: VaultExplorerPluginSettings_1_16_0 = {
 					...typedData,
 					views: {
 						...typedData.views,
-						order: [...typedData.views.order, ViewType.FEED],
+						order: [...typedData.views.order, ViewType_1_16_0.FEED],
 					}
 				}
 				data = newData as unknown as Record<string, unknown>;
 			}
+
+			if (isVersionLessThan(settingsVersion, "1.17.0")) {
+				console.log("Upgrading settings from version 1.16.0 to 1.17.0");
+				const typedData = (data as unknown) as VaultExplorerPluginSettings_1_16_0;
+				const newData: VaultExplorerPluginSettings = {
+					...typedData,
+					views: {
+						dashboard: {
+							isEnabled: false
+						},
+						grid: {
+							isEnabled: true
+						},
+						list: {
+							isEnabled: true
+						},
+						table: {
+							isEnabled: false
+						},
+						feed: {
+							isEnabled: true
+						},
+						recommended: {
+							isEnabled: false
+						},
+						related: {
+							isEnabled: false
+						}
+					},
+					viewOrder: typedData.views.order as unknown as TExplorerView[],
+					enableClockUpdates: typedData.views.enableClockUpdates,
+					currentView: typedData.views.currentView as unknown as TExplorerView,
+					titleWrapping: typedData.views.titleWrapping
+				}
+				delete (newData as any).views.order;
+				delete (newData as any).views.currentView;
+				delete (newData as any).views.enableClockUpdates;
+				delete (newData as any).views.titleWrapping;
+				data = newData as unknown as Record<string, unknown>;
+			}
 		}
 
 		//Apply default settings. This will make it so we don't need to do migrations for just adding new settings

src/obsidian/vault-explorer-settings-tab.ts

@@ -4,7 +4,7 @@ import { getDropdownOptionsForProperties, getObsidianPropertiesByType } from "./
 import { LOG_LEVEL_DEBUG, LOG_LEVEL_ERROR, LOG_LEVEL_INFO, LOG_LEVEL_OFF, LOG_LEVEL_TRACE, LOG_LEVEL_WARN } from "src/logger/constants";
 import Logger from "js-logger";
 import { stringToLogLevel } from "src/logger";
-import { WordBreak } from "src/types";
+import { TExplorerView, WordBreak } from "src/types";
 import EventManager from "src/event/event-manager";
 import Component from "../svelte/license-key-app/index.svelte";
 
@@ -83,6 +83,93 @@ export default class VaultExplorerSettingsTab extends PluginSettingTab {
 
 		new Setting(containerEl).setName("Views").setHeading();
 
+		new Setting(containerEl)
+			.setName("Dashboard view")
+			.addToggle(toggle => toggle
+				.setDisabled(true) //TODO - Implement dashboard view
+				.setValue(this.plugin.settings.views.dashboard.isEnabled)
+				.onChange(async (value) => {
+					this.plugin.settings.views.dashboard.isEnabled = value;
+					this.updateViewOrder(TExplorerView.DASHBOARD, value);
+					await this.plugin.saveSettings();
+					EventManager.getInstance().emit("view-toggle-setting-change");
+				}));
+
+		new Setting(containerEl)
+			.setName("Grid view")
+			.addToggle(toggle => toggle
+				.setValue(this.plugin.settings.views.grid.isEnabled)
+				.onChange(async (value) => {
+					this.plugin.settings.views.grid.isEnabled = value;
+					this.updateViewOrder(TExplorerView.GRID, value);
+					await this.plugin.saveSettings();
+					EventManager.getInstance().emit("view-toggle-setting-change");
+				}));
+
+		new Setting(containerEl)
+			.setName("List view")
+			.addToggle(toggle => toggle
+				.setValue(this.plugin.settings.views.list.isEnabled)
+				.onChange(async (value) => {
+					this.plugin.settings.views.list.isEnabled = value;
+					this.updateViewOrder(TExplorerView.LIST, value);
+					await this.plugin.saveSettings();
+					EventManager.getInstance().emit("view-toggle-setting-change");
+				}));
+
+		new Setting(containerEl)
+			.setName("Feed view")
+			.addToggle(toggle => toggle
+				.setValue(this.plugin.settings.views.feed.isEnabled)
+				.onChange(async (value) => {
+					this.plugin.settings.views.feed.isEnabled = value;
+					this.updateViewOrder(TExplorerView.FEED, value);
+					await this.plugin.saveSettings();
+					EventManager.getInstance().emit("view-toggle-setting-change");
+				}));
+
+		new Setting(containerEl)
+			.setName("Table view")
+			.addToggle(toggle => toggle
+				.setDisabled(true) //TODO implement
+				.setTooltip("This view is not yet implemented.")
+				.setValue(this.plugin.settings.views.table.isEnabled)
+				.onChange(async (value) => {
+					this.plugin.settings.views.table.isEnabled = value;
+					this.updateViewOrder(TExplorerView.TABLE, value);
+					await this.plugin.saveSettings();
+					EventManager.getInstance().emit("view-toggle-setting-change");
+				}));
+
+
+		new Setting(containerEl)
+			.setName("Recommended view")
+			.addToggle(toggle => toggle
+				.setValue(this.plugin.settings.views.recommended.isEnabled)
+				.setDisabled(true) //TODO implement
+				.setTooltip("This view is not yet implemented.")
+				.onChange(async (value) => {
+					this.plugin.settings.views.recommended.isEnabled = value;
+					this.updateViewOrder(TExplorerView.RECOMMENDED, value);
+					await this.plugin.saveSettings();
+					EventManager.getInstance().emit("view-toggle-setting-change");
+				}));
+
+		new Setting(containerEl)
+			.setName("Related view")
+			.addToggle(toggle => toggle
+				.setDisabled(true) //TODO implement
+				.setTooltip("This view is not yet implemented.")
+				.setValue(this.plugin.settings.views.related.isEnabled)
+				.onChange(async (value) => {
+					this.plugin.settings.views.related.isEnabled = value;
+					this.updateViewOrder(TExplorerView.RELATED, value);
+					await this.plugin.saveSettings();
+					EventManager.getInstance().emit("view-toggle-setting-change");
+				}));
+
+		new Setting(containerEl).setName("General").setHeading();
+
 		new Setting(containerEl).setName("Page size").setDesc("The number of items to display per page.").addDropdown(dropdown => dropdown
 			.addOptions({
 				"10": "10",
@@ -108,15 +195,26 @@ export default class VaultExplorerSettingsTab extends PluginSettingTab {
 					"normal": "Normal",
 					"break-word": "Break Word",
 				})
-				cb.setValue(this.plugin.settings.views.titleWrapping).onChange(
+				cb.setValue(this.plugin.settings.titleWrapping).onChange(
 					async (value) => {
-						this.plugin.settings.views.titleWrapping = value as WordBreak;
+						this.plugin.settings.titleWrapping = value as WordBreak;
 						await this.plugin.saveSettings();
 						EventManager.getInstance().emit("title-wrapping-setting-change");
 					}
 				);
 			});
 
+		new Setting(containerEl)
+			.setName("Enable scroll buttons")
+			.setDesc("When enabled, scroll buttons will be displayed for scrollable content.")
+			.addToggle(toggle => toggle
+				.setValue(this.plugin.settings.enableScrollButtons)
+				.onChange(async (value) => {
+					this.plugin.settings.enableScrollButtons = value;
+					await this.plugin.saveSettings();
+					EventManager.getInstance().emit("scroll-buttons-setting-change");
+				}));
+
 		new Setting(containerEl).setName("Built-in properties").setHeading();
 
 		new Setting(containerEl)
@@ -215,28 +313,15 @@ export default class VaultExplorerSettingsTab extends PluginSettingTab {
 					EventManager.getInstance().emit("property-setting-change");
 				}));
 
-		new Setting(containerEl).setName("Accessibility").setHeading();
-
-		new Setting(containerEl)
-			.setName("Enable scroll buttons")
-			.setDesc("When enabled, scroll buttons will be displayed for scrollable content. You could disable this setting if only use a touchscreen or trackpad.")
-			.addToggle(toggle => toggle
-				.setValue(this.plugin.settings.enableScrollButtons)
-				.onChange(async (value) => {
-					this.plugin.settings.enableScrollButtons = value;
-					await this.plugin.saveSettings();
-					EventManager.getInstance().emit("scroll-buttons-setting-change");
-				}));
-
 		new Setting(containerEl).setName("Updates").setHeading();
 
 		new Setting(containerEl)
 			.setName("Enable clock updates")
 			.setDesc("When enabled, time values will update every minute, refreshing the Vault Explorer view. When disabled, time values will only update when the view is first opened.")
 			.addToggle(toggle => toggle
-				.setValue(this.plugin.settings.views.enableClockUpdates)
+				.setValue(this.plugin.settings.enableClockUpdates)
 				.onChange(async (value) => {
-					this.plugin.settings.views.enableClockUpdates = value;
+					this.plugin.settings.enableClockUpdates = value;
 					await this.plugin.saveSettings();
 					EventManager.getInstance().emit("clock-updates-setting-change");
 				}));
@@ -275,4 +360,25 @@ export default class VaultExplorerSettingsTab extends PluginSettingTab {
 	onClose() {
 		this.component?.$destroy();
 	}
+
+	private updateViewOrder(view: TExplorerView, value: boolean) {
+		if (value) {
+			this.plugin.settings.viewOrder.push(view);
+
+			//If the user turned off all views, set the current view to the first view that is turned on
+			if (this.plugin.settings.currentView == null)
+				this.plugin.settings.currentView = view;
+		} else {
+			const filtered = this.plugin.settings.viewOrder.filter(v => v !== view);
+			this.plugin.settings.viewOrder = filtered;
+
+			//If the user turned off the current view, set the current view to the first view
+			//that is turned on, otherwise set it to null
+			if (filtered.length > 0) {
+				this.plugin.settings.currentView = filtered[0];
+			} else {
+				this.plugin.settings.currentView = null;
+			}
+		}
+	}
 }

src/svelte/app/components/feed-view.svelte

@@ -7,12 +7,29 @@
 
 	export let enablePremiumFeatures = false;
 	export let data: FileRenderData[] = [];
+	export let startIndex;
+	export let pageLength;
+
+	let displayedItems: FileRenderData[] = [];
 
 	License.getInstance()
 		.getIsDeviceRegisteredStore()
 		.subscribe((isRegistered) => {
 			enablePremiumFeatures = isRegistered;
 		});
+
+	$: {
+		if (startIndex < data.length) {
+			displayedItems = Array.from({ length: pageLength }, (_, i) => {
+				const index = startIndex + i;
+				return data[index];
+			});
+		} else {
+			displayedItems = [];
+		}
+	}
+	//TODO replace file.path with a unique id that is generated when the
+	//file is added
 </script>
 
 <div class="vault-explorer-feed-view">
@@ -23,7 +40,7 @@
 		</div>
 	{/if}
 	{#if enablePremiumFeatures}
-		{#each data as fileData}
+		{#each displayedItems as fileData (fileData.path)}
 			<FeedCard
 				name={fileData.name}
 				path={fileData.path}