From 1ae241839459ff637fe0bbd46b7defc5245c69c1 Mon Sep 17 00:00:00 2001 From: Luke Leppan Date: Tue, 8 Nov 2022 06:45:18 +0200 Subject: [PATCH] Finish Settings --- package.json | 3 +- rollup.config.js | 40 +++-- src/main.ts | 24 +-- src/settings/{settings.ts => Settings.ts} | 7 + src/settings/SettingsTab.ts | 62 +++++++ src/settings/StatusBarSettings.svelte | 191 ++++++++++++++++++++++ src/settings/StatusBarSettings.ts | 14 ++ src/settings/settings-tab.ts | 128 --------------- src/styles.css | 21 +++ tsconfig.json | 10 +- 10 files changed, 341 insertions(+), 159 deletions(-) rename src/settings/{settings.ts => Settings.ts} (86%) create mode 100644 src/settings/SettingsTab.ts create mode 100644 src/settings/StatusBarSettings.svelte create mode 100644 src/settings/StatusBarSettings.ts delete mode 100644 src/settings/settings-tab.ts create mode 100644 src/styles.css diff --git a/package.json b/package.json index 59c233e..b8ba7f6 100644 --- a/package.json +++ b/package.json @@ -41,6 +41,7 @@ "typescript": "^4.0.3" }, "dependencies": { - "svelte": "^3.38.3" + "svelte": "^3.38.3", + "svelte-icons": "^2.1.0" } } diff --git a/rollup.config.js b/rollup.config.js index 1806df4..819f9f0 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -1,18 +1,18 @@ -import typescript from '@rollup/plugin-typescript'; -import { nodeResolve } from '@rollup/plugin-node-resolve'; -import commonjs from '@rollup/plugin-commonjs'; -import copy from 'rollup-plugin-copy'; +import typescript from "@rollup/plugin-typescript"; +import { nodeResolve } from "@rollup/plugin-node-resolve"; +import commonjs from "@rollup/plugin-commonjs"; +import copy from "rollup-plugin-copy"; import svelte from "rollup-plugin-svelte"; -import autoPreprocess from "svelte-preprocess"; -const TEST_VAULT = 'test-vault/.obsidian/plugins/better-word-count'; +import sveltePreprocess from "svelte-preprocess"; +const TEST_VAULT = "test-vault/.obsidian/plugins/better-word-count"; export default { - input: 'src/main.ts', + input: "src/main.ts", output: { - dir: 'dist/', - sourcemap: 'inline', - format: 'cjs', - exports: 'default' + dir: "dist/", + sourcemap: "inline", + format: "cjs", + exports: "default", }, external: [ "obsidian", @@ -47,13 +47,17 @@ export default { nodeResolve({ browser: true }), commonjs(), svelte({ - preprocess: autoPreprocess(), + include: "src/**/*.svelte", + compilerOptions: { css: true }, + preprocess: sveltePreprocess(), }), copy({ targets: [ - { src: 'dist/main.js', dest: TEST_VAULT }, - { src: ['manifest.json'], dest: TEST_VAULT } - ], flatten: true - }) - ] -}; \ No newline at end of file + { src: "src/styles.css", dest: TEST_VAULT }, + { src: "dist/main.js", dest: TEST_VAULT }, + { src: ["manifest.json"], dest: TEST_VAULT }, + ], + flatten: true, + }), + ], +}; diff --git a/src/main.ts b/src/main.ts index d913ec2..3acc2e7 100644 --- a/src/main.ts +++ b/src/main.ts @@ -10,10 +10,14 @@ import { editorEditorField, Notice, } from "obsidian"; -// import { BetterWordCountSettingsTab } from "./settings/settings-tab"; -// import { BetterWordCountSettings, DEFAULT_SETTINGS } from "./settings/settings"; -// import { StatusBar } from "./status/bar"; // import { STATS_ICON, STATS_ICON_NAME, VIEW_TYPE_STATS } from "./constants"; +import { + BetterWordCountSettings, + DEFAULT_SETTINGS, +} from "src/settings/Settings"; +import { BetterWordCountSettingsTab } from "./settings/SettingsTab"; + +// import { StatusBar } from "./status/bar"; // import StatsView from "./view/view"; // import { DataManager } from "./data/manager"; // import { BarManager } from "./status/manager"; @@ -28,7 +32,7 @@ import { StatusBar } from "./status/bar"; export default class BetterWordCount extends Plugin { public static statusBar: StatusBar; // public currentFile: TFile; - // public settings: BetterWordCountSettings; + public settings: BetterWordCountSettings; // public view: StatsView; // public dataManager: DataManager; // public barManager: BarManager; @@ -39,13 +43,13 @@ export default class BetterWordCount extends Plugin { // .forEach((leaf) => leaf.detach()); // } - onload() { + async onload() { let statusBarEl = this.addStatusBarItem(); BetterWordCount.statusBar = new StatusBar(statusBarEl); this.createCMExtension(); - // this.settings = Object.assign(DEFAULT_SETTINGS, await this.loadData()); - // this.addSettingTab(new BetterWordCountSettingsTab(this.app, this)); + this.settings = Object.assign(DEFAULT_SETTINGS, await this.loadData()); + this.addSettingTab(new BetterWordCountSettingsTab(this.app, this)); // let statusBarElTest = this.addStatusBarItem(); // statusBarElTest.setText("§l§aTest§r"); @@ -123,9 +127,9 @@ export default class BetterWordCount extends Plugin { // } // } - // async saveSettings(): Promise { - // await this.saveData(this.settings); - // } + async saveSettings(): Promise { + await this.saveData(this.settings); + } // initLeaf(): void { // if (this.app.workspace.getLeavesOfType(VIEW_TYPE_STATS).length) { diff --git a/src/settings/settings.ts b/src/settings/Settings.ts similarity index 86% rename from src/settings/settings.ts rename to src/settings/Settings.ts index ff42855..8acee55 100644 --- a/src/settings/settings.ts +++ b/src/settings/Settings.ts @@ -4,12 +4,19 @@ export enum Counter { totalWords, totalChars, } + export interface StatusBarItem { start: string; end: string; count: Counter; } +export const BLANK_SB_ITEM: StatusBarItem = { + start: "", + end: "", + count: null, +}; + export interface BetterWordCountSettings { statusBar: StatusBarItem[]; countComments: boolean; diff --git a/src/settings/SettingsTab.ts b/src/settings/SettingsTab.ts new file mode 100644 index 0000000..66e5bb1 --- /dev/null +++ b/src/settings/SettingsTab.ts @@ -0,0 +1,62 @@ +import { + App, + DropdownComponent, + PluginSettingTab, + Setting, + TextAreaComponent, + ToggleComponent, +} from "obsidian"; +import type BetterWordCount from "src/main"; +import type { StatusBarItem } from "./Settings"; +import { addStatusBarSettings } from "./StatusBarSettings"; + +export const details = (text: string, parent: HTMLElement) => + parent.createEl("details", {}, (d) => d.createEl("summary", { text })); + +export class BetterWordCountSettingsTab extends PluginSettingTab { + constructor(app: App, private plugin: BetterWordCount) { + super(app, plugin); + } + + display(): void { + let { containerEl } = this; + + containerEl.empty(); + containerEl.createEl("h3", { text: "Better Word Count Settings" }); + + // General Settings + containerEl.createEl("h4", { text: "General Settings" }); + new Setting(containerEl) + .setName("Collect Statistics") + .setDesc( + "Reload Required for change to take effect. Turn on to start collecting daily statistics of your writing. Stored in the .vault-stats file in the root of your vault. This is required for counts of the day." + ) + .addToggle((cb: ToggleComponent) => { + cb.setValue(this.plugin.settings.collectStats); + cb.onChange(async (value: boolean) => { + this.plugin.settings.collectStats = value; + await this.plugin.saveSettings(); + }); + }); + new Setting(containerEl) + .setName("Don't Count Comments") + .setDesc("Turn on if you don't want markdown comments to be counted.") + .addToggle((cb: ToggleComponent) => { + cb.setValue(this.plugin.settings.countComments); + cb.onChange(async (value: boolean) => { + this.plugin.settings.countComments = value; + await this.plugin.saveSettings(); + }); + }); + + // Status Bar Settings + containerEl + .createEl("h4", { text: "Status Bar Settings" }) + .addClass("bwc-status-bar-settings-title"); + containerEl.createEl("p", { + text: "Here you can customize what statistics are displayed on the status bar.", + }); + + addStatusBarSettings(this.plugin, containerEl); + } +} diff --git a/src/settings/StatusBarSettings.svelte b/src/settings/StatusBarSettings.svelte new file mode 100644 index 0000000..e4703db --- /dev/null +++ b/src/settings/StatusBarSettings.svelte @@ -0,0 +1,191 @@ + + +
+
+ + +
+ {#each statusItems as item, i} +
+ + + {counterToString(item.count)} + + + {#if i !== 0} + + {/if} + {#if i !== statusItems.length - 1} + + {/if} + + + +
+
+
Count Type
+
+ This is the type of counter that will be displayed. +
+
+
+ +
+
+
+
+
Prefix Text
+
+ This is the text that is placed before the count. +
+
+
+ { + const { value } = e.target; + item.prefix = value; + await update(statusItems); + await plugin.saveSettings(); + }} + /> +
+
+
+
+
Suffix Text
+
+ This is the text that is placed after the count. +
+
+
+ { + const { value } = e.target; + item.suffix = value; + await update(statusItems); + await plugin.saveSettings(); + }} + /> +
+
+
+ {/each} +
diff --git a/src/settings/StatusBarSettings.ts b/src/settings/StatusBarSettings.ts new file mode 100644 index 0000000..259c62e --- /dev/null +++ b/src/settings/StatusBarSettings.ts @@ -0,0 +1,14 @@ +import StatusBarSettings from "./StatusBarSettings.svelte"; +import type BetterWordCount from "../main"; + +export function addStatusBarSettings( + plugin: BetterWordCount, + containerEl: HTMLElement +) { + const statusItemsEl = containerEl.createEl("div"); + + new StatusBarSettings({ + target: statusItemsEl, + props: { plugin }, + }); +} diff --git a/src/settings/settings-tab.ts b/src/settings/settings-tab.ts deleted file mode 100644 index f979e90..0000000 --- a/src/settings/settings-tab.ts +++ /dev/null @@ -1,128 +0,0 @@ -import { - App, - DropdownComponent, - PluginSettingTab, - Setting, - TextAreaComponent, - ToggleComponent, -} from "obsidian"; -import type BetterWordCount from "../main"; -import { BetterWordCountSettings, DEFAULT_SETTINGS } from "./settings"; - -export class BetterWordCountSettingsTab extends PluginSettingTab { - constructor(app: App, private plugin: BetterWordCount) { - super(app, plugin); - } - - display(): void { - let { containerEl } = this; - - containerEl.empty(); - containerEl.createEl("h2", { text: "Better Word Count Settings" }); - - // General Settings - containerEl.createEl("h3", { text: "General Settings" }); - new Setting(containerEl) - .setName("Collect Statistics") - .setDesc( - "Reload Required for change to take effect. Turn on to start collecting daily statistics of your writing. Stored in the .vault-stats file in the root of your vault. This is required for counts of the day." - ) - .addToggle((cb: ToggleComponent) => { - cb.setValue(this.plugin.settings.collectStats); - cb.onChange(async (value: boolean) => { - this.plugin.settings.collectStats = value; - await this.plugin.saveSettings(); - }); - }); - new Setting(containerEl) - .setName("Don't Count Comments") - .setDesc("Turn on if you don't want markdown comments to be counted.") - .addToggle((cb: ToggleComponent) => { - cb.setValue(this.plugin.settings.countComments); - cb.onChange(async (value: boolean) => { - this.plugin.settings.countComments = value; - await this.plugin.saveSettings(); - }); - }); - - // Status Bar Settings - containerEl.createEl("h3", { text: "Status Bar Settings" }); - new Setting(containerEl) - .setName("Select a Preset") - .setDesc( - "Presets are premade status bar expressions. Overides status bar settings." - ) - .addDropdown((cb: DropdownComponent) => { - PRESETS.forEach((preset: PresetOption) => { - cb.addOption(preset.name, preset.name); - }); - cb.setValue(this.plugin.settings.preset.name); - - cb.onChange(async (value: string) => { - let newPreset = PRESETS.find((preset) => preset.name === value); - this.plugin.settings.preset = newPreset; - this.plugin.settings.statusBarQuery = newPreset.statusBarQuery; - this.plugin.settings.statusBarAltQuery = newPreset.statusBarAltQuery; - await this.plugin.saveSettings(); - }); - }); - new Setting(containerEl) - .setName("Status Bar Text") - .setDesc("Customize the Status Bar text with this.") - .addTextArea((cb: TextAreaComponent) => { - cb.setPlaceholder("Enter an expression..."); - cb.setValue(this.plugin.settings.statusBarQuery); - cb.onChange((value: string) => { - let newPreset = PRESETS.find((preset) => preset.name === "custom"); - this.plugin.settings.preset = newPreset; - this.plugin.settings.statusBarQuery = value; - this.plugin.saveSettings(); - }); - }); - new Setting(containerEl) - .setName("Alternative Status Bar Text") - .setDesc("Customize the Alternative Status Bar text with this.") - .addTextArea((cb: TextAreaComponent) => { - cb.setPlaceholder("Enter an expression..."); - cb.setValue(this.plugin.settings.statusBarAltQuery); - cb.onChange((value: string) => { - let newPreset = PRESETS.find((preset) => preset.name === "custom"); - this.plugin.settings.preset = newPreset; - this.plugin.settings.statusBarAltQuery = value; - this.plugin.saveSettings(); - }); - }); - - this.containerEl.createEl("h3", { - text: "Syntax for the status bars works like this: ", - }); - - this.containerEl.createEl("li", { - text: "To get a stat input the name of the stat in between `{}` eg. `{word_count}`.", - }); - - this.containerEl.createEl("li", { - text: "All other words remain.", - }); - - this.containerEl.createEl("br"); - - this.containerEl.createEl("h4", { - text: "Available Stats:", - }); - - this.containerEl.createEl("p", { - text: - "word_count, " + - "character_count, " + - "sentence_count, " + - "total_word_count, " + - "total_character_count, " + - "total_sentence_count, " + - "file_count, " + - "words_today, " + - "characters_today, " + - "sentences_today, ", - }); - } -} diff --git a/src/styles.css b/src/styles.css new file mode 100644 index 0000000..6009c0a --- /dev/null +++ b/src/styles.css @@ -0,0 +1,21 @@ +details.bwc-sb-item-setting { + border: 1px solid var(--background-modifier-border); + border-radius: 10px; + padding: 10px 5px 20px 10px; + margin-top: 5px; + margin-bottom: 10px; +} +.bwc-sb-item-setting summary::marker { + font-size: 10px; +} + +/* .bwc-sb-item-setting summary { */ +/* margin-bottom: 5px; */ +/* } */ +.bwc-sb-item-setting summary span.bwc-sb-buttons { + float: right; +} + +.bwc-status-bar-settings-title { + margin-bottom: 0px; +} diff --git a/tsconfig.json b/tsconfig.json index 4e80ae2..547e119 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -12,7 +12,13 @@ "importHelpers": true // "lib": ["dom", "es5", "scripthost", "es2015"] }, - // "include": ["**/*.ts"], - "include": ["**/main.ts", "**/bar.ts"], + "include": [ + "**/main.ts", + "**/bar.ts", + "**/Settings.ts", + "**/SettingsTab.ts", + "**/StatusBarSettings.ts", + "**/StatusBarSettings.svelte" + ], "exclude": ["node_modules/*"] }