Disable verical identation lines if tabSize != 4

vslinko · Dec 27, 2021 · 9fedf39 · 9fedf39
1 parent 3f01784
commit 9fedf39
Show file tree

Hide file tree

Showing 6 changed files with 177 additions and 212 deletions.
diff --git a/README.md b/README.md
@@ -1,133 +1,133 @@
-# Obsidian Outliner
-
-![GitHub Workflow Status](https://img.shields.io/github/workflow/status/vslinko/obsidian-outliner/Release?logo=github&style=for-the-badge)
-![GitHub release (latest SemVer)](https://img.shields.io/github/v/release/vslinko/obsidian-outliner?style=for-the-badge&sort=semver)
-
-**Work with your lists like in Workflowy or RoamResearch**
-
-⁉️ [Discuss ideas or ask a question](https://github.com/vslinko/obsidian-outliner/discussions)<br>
-⚙️ [Follow the development process](https://github.com/users/vslinko/projects/2)<br>
-🐛 [Report issues](https://github.com/vslinko/obsidian-outliner/issues)
-
-Compatible with [Obsidian Zoom plugin](https://github.com/vslinko/obsidian-zoom).
-
-## Demo
-
-![Demo](https://raw.githubusercontent.com/vslinko/obsidian-outliner/main/demo.gif)
-
-## How to install
-
-### From within Obsidian
-
-You can activate this plugin within Obsidian by doing the following:
-
-- Open Settings > Third-party plugin
-- Make sure Safe mode is off
-- Click Browse community plugins
-- Search for "Outliner"
-- Click Install
-- Once installed, close the community plugins window and activate the newly installed plugin
-
-### Manual installation
-
-Download `main.js`, `manifest.json`, `styles.css` from the [latest release](https://github.com/vslinko/obsidian-outliner/releases/latest) and put them into `<vault>/.obsidian/plugins/obsidian-outliner` folder.
-
-## How to use
-
-Try to create a deeply structured list and move items by pressing the hotkeys described below.
-
-## Features
-
-### Improve the style of your lists
-
-If you liked the styles from the demo above, you can enable them in the plugin settings tab.
-
-> **Disclaimer:** Styles are only compatible with built-in Obsidian themes and may not be compatible with other themes. Circle bullets only work well with spaces or four-space tabs. Indentation lines only work well with tab size 4.
-
-| Setting                                | Default value |
-| -------------------------------------- | :-----------: |
-| Improve the style of your lists        |    `false`    |
-| Hide the warning about four-space tabs |    `false`    |
-
-### Move lists back and forth
-
-Move lists with children wherever you want without breaking the structure.
-
-| Command                       |       Default hotkey (Windows/Linux)        |             Default hotkey (MacOS)             |
-| ----------------------------- | :-----------------------------------------: | :--------------------------------------------: |
-| Move list and sublists up     | <kbd>Ctrl</kbd><kbd>Shift</kbd><kbd>↑</kbd> | <kbd>Command</kbd><kbd>Shift</kbd><kbd>↑</kbd> |
-| Move list and sublists down   | <kbd>Ctrl</kbd><kbd>Shift</kbd><kbd>↓</kbd> | <kbd>Command</kbd><kbd>Shift</kbd><kbd>↓</kbd> |
-| Indent the list and sublists  |                                             |                                                |
-| Outdent the list and sublists |                                             |                                                |
-
-| Setting             | Default value |
-| ------------------- | :-----------: |
-| Enhance the Tab key |    `true`     |
-
-### Stick the cursor to the content
-
-Don't let the cursor move to the bullet position. Affects cursor movement, text deletion, text selection.
-
-| Setting                         | Default value |
-| ------------------------------- | :-----------: |
-| Stick the cursor to the content |    `true`     |
-
-### Enhance the Enter key
-
-Make the Enter key behave the same as other outliners:
-
-- Enter outdents list item if it's empty.
-- Enter creates new line on children level if there are any children.
-- Shift-Enter creates a new note line.
-
-[More info](https://github.com/vslinko/obsidian-outliner/discussions/98#discussioncomment-649514)
-
-| Setting               | Default value |
-| --------------------- | :-----------: |
-| Enhance the Enter key |    `true`     |
-
-### Fold and unfold your lists
-
-| Command         | Default hotkey (Windows/Linux) |     Default hotkey (MacOS)     |
-| --------------- | :----------------------------: | :----------------------------: |
-| Fold the list   |  <kbd>Ctrl</kbd><kbd>↑</kbd>   | <kbd>Command</kbd><kbd>↑</kbd> |
-| Unfold the list |  <kbd>Ctrl</kbd><kbd>↓</kbd>   | <kbd>Command</kbd><kbd>↓</kbd> |
-
-### Enhance the <kbd>Ctrl</kbd><kbd>A</kbd> or <kbd>Cmd</kbd><kbd>A</kbd> behavior
-
-Press the hotkey once to select the current list item. Press the hotkey twice to select the entire list.
-
-| Setting                              | Default value |
-| ------------------------------------ | :-----------: |
-| Enhance the Ctrl+A or Cmd+A behavior |    `true`     |
-
-### Debug mode
-
-Open DevTools (Command+Option+I or Control+Shift+I) to copy the debug logs.
-
-| Setting    | Default value |
-| ---------- | :-----------: |
-| Debug mode |    `false`    |
-
-## Unsupported (yet) features
-
-- [Manipulation with multiple lines](https://github.com/vslinko/obsidian-outliner/issues/3)
-
-## Pricing
-
-This plugin is free for everyone, however, if you would like to thank me
-or help with further development, you can donate in one of the following ways:
-
-[![Patreon](https://img.shields.io/badge/patreon-vslinko-orange?logo=patreon&style=social)](https://patreon.com/vslinko)<br>
-[![Paypal](https://img.shields.io/badge/paypal-vslinko-orange?logo=paypal&style=social)](https://www.paypal.me/vslinko)
-
-### Patrons & Supporters
-
-I want to say thank you to the people who support me, I really appreciate it!
-
-- [Lucas D](https://twitter.com/lucasdreier)
-- Philipp K.
-- [Daniel B.](https://github.com/danieltomasz)
-- Mat Rhein ([@mat_rhein7](http://twitter.com/mat_rhein7))
-- [Ollie Lovell](https://www.ollielovell.com/)
-- more patrons and anonymous supporters
+# Obsidian Outliner
+
+![GitHub Workflow Status](https://img.shields.io/github/workflow/status/vslinko/obsidian-outliner/Release?logo=github&style=for-the-badge)
+![GitHub release (latest SemVer)](https://img.shields.io/github/v/release/vslinko/obsidian-outliner?style=for-the-badge&sort=semver)
+
+**Work with your lists like in Workflowy or RoamResearch**
+
+⁉️ [Discuss ideas or ask a question](https://github.com/vslinko/obsidian-outliner/discussions)<br>
+⚙️ [Follow the development process](https://github.com/users/vslinko/projects/2)<br>
+🐛 [Report issues](https://github.com/vslinko/obsidian-outliner/issues)
+
+Compatible with [Obsidian Zoom plugin](https://github.com/vslinko/obsidian-zoom).
+
+## Demo
+
+![Demo](https://raw.githubusercontent.com/vslinko/obsidian-outliner/main/demo.gif)
+
+## How to install
+
+### From within Obsidian
+
+You can activate this plugin within Obsidian by doing the following:
+
+- Open Settings > Third-party plugin
+- Make sure Safe mode is off
+- Click Browse community plugins
+- Search for "Outliner"
+- Click Install
+- Once installed, close the community plugins window and activate the newly installed plugin
+
+### Manual installation
+
+Download `main.js`, `manifest.json`, `styles.css` from the [latest release](https://github.com/vslinko/obsidian-outliner/releases/latest) and put them into `<vault>/.obsidian/plugins/obsidian-outliner` folder.
+
+## How to use
+
+Try to create a deeply structured list and move items by pressing the hotkeys described below.
+
+## Features
+
+### Improve the style of your lists
+
+If you liked the styles from the demo above, you can enable them in the plugin settings tab.
+
+> **Disclaimer:** Styles are only compatible with built-in Obsidian themes and may not be compatible with other themes. Indentation lines works only with tab size 4.
+
+| Setting                                | Default value |
+| -------------------------------------- | :-----------: |
+| Improve the style of your lists        |    `false`    |
+| Hide the warning about four-space tabs |    `false`    |
+
+### Move lists back and forth
+
+Move lists with children wherever you want without breaking the structure.
+
+| Command                       |       Default hotkey (Windows/Linux)        |             Default hotkey (MacOS)             |
+| ----------------------------- | :-----------------------------------------: | :--------------------------------------------: |
+| Move list and sublists up     | <kbd>Ctrl</kbd><kbd>Shift</kbd><kbd>↑</kbd> | <kbd>Command</kbd><kbd>Shift</kbd><kbd>↑</kbd> |
+| Move list and sublists down   | <kbd>Ctrl</kbd><kbd>Shift</kbd><kbd>↓</kbd> | <kbd>Command</kbd><kbd>Shift</kbd><kbd>↓</kbd> |
+| Indent the list and sublists  |                                             |                                                |
+| Outdent the list and sublists |                                             |                                                |
+
+| Setting             | Default value |
+| ------------------- | :-----------: |
+| Enhance the Tab key |    `true`     |
+
+### Stick the cursor to the content
+
+Don't let the cursor move to the bullet position. Affects cursor movement, text deletion, text selection.
+
+| Setting                         | Default value |
+| ------------------------------- | :-----------: |
+| Stick the cursor to the content |    `true`     |
+
+### Enhance the Enter key
+
+Make the Enter key behave the same as other outliners:
+
+- Enter outdents list item if it's empty.
+- Enter creates new line on children level if there are any children.
+- Shift-Enter creates a new note line.
+
+[More info](https://github.com/vslinko/obsidian-outliner/discussions/98#discussioncomment-649514)
+
+| Setting               | Default value |
+| --------------------- | :-----------: |
+| Enhance the Enter key |    `true`     |
+
+### Fold and unfold your lists
+
+| Command         | Default hotkey (Windows/Linux) |     Default hotkey (MacOS)     |
+| --------------- | :----------------------------: | :----------------------------: |
+| Fold the list   |  <kbd>Ctrl</kbd><kbd>↑</kbd>   | <kbd>Command</kbd><kbd>↑</kbd> |
+| Unfold the list |  <kbd>Ctrl</kbd><kbd>↓</kbd>   | <kbd>Command</kbd><kbd>↓</kbd> |
+
+### Enhance the <kbd>Ctrl</kbd><kbd>A</kbd> or <kbd>Cmd</kbd><kbd>A</kbd> behavior
+
+Press the hotkey once to select the current list item. Press the hotkey twice to select the entire list.
+
+| Setting                              | Default value |
+| ------------------------------------ | :-----------: |
+| Enhance the Ctrl+A or Cmd+A behavior |    `true`     |
+
+### Debug mode
+
+Open DevTools (Command+Option+I or Control+Shift+I) to copy the debug logs.
+
+| Setting    | Default value |
+| ---------- | :-----------: |
+| Debug mode |    `false`    |
+
+## Unsupported (yet) features
+
+- [Manipulation with multiple lines](https://github.com/vslinko/obsidian-outliner/issues/3)
+
+## Pricing
+
+This plugin is free for everyone, however, if you would like to thank me
+or help with further development, you can donate in one of the following ways:
+
+[![Patreon](https://img.shields.io/badge/patreon-vslinko-orange?logo=patreon&style=social)](https://patreon.com/vslinko)<br>
+[![Paypal](https://img.shields.io/badge/paypal-vslinko-orange?logo=paypal&style=social)](https://www.paypal.me/vslinko)
+
+### Patrons & Supporters
+
+I want to say thank you to the people who support me, I really appreciate it!
+
+- [Lucas D](https://twitter.com/lucasdreier)
+- Philipp K.
+- [Daniel B.](https://github.com/danieltomasz)
+- Mat Rhein ([@mat_rhein7](http://twitter.com/mat_rhein7))
+- [Ollie Lovell](https://www.ollielovell.com/)
+- more patrons and anonymous supporters
diff --git a/src/ObsidianOutlinerPlugin.ts b/src/ObsidianOutlinerPlugin.ts
@@ -61,7 +61,7 @@ export default class ObsidianOutlinerPlugin extends Plugin {
 
     this.features = [
       new SettingsTabFeature(this, this.settings),
-      new ListsStylesFeature(this, this.settings, this.obsidian),
+      new ListsStylesFeature(this.settings, this.obsidian),
       new EnterOutdentIfLineIsEmptyFeature(
         this,
         this.settings,

diff --git a/src/features/ListsStylesFeature.ts b/src/features/ListsStylesFeature.ts
@@ -1,83 +1,66 @@
-import { Plugin_2 } from "obsidian";
-
 import { Feature } from "./Feature";
 
 import { ObsidianService } from "../services/ObsidianService";
 import { SettingsService } from "../services/SettingsService";
 
-const STATUS_BAR_TEXT = `Outliner styles only work with four-space tabs. Please check Obsidian settings.`;
+const BETTER_LISTS_CLASS = "outliner-plugin-better-lists";
+const BETTER_BULLETS_CLASS = "outliner-plugin-better-bullets";
+const VERTICAL_LINES_CLASS = "outliner-plugin-vertical-lines";
+const KNOWN_CLASSES = [
+  BETTER_LISTS_CLASS,
+  BETTER_BULLETS_CLASS,
+  VERTICAL_LINES_CLASS,
+];
 
 export class ListsStylesFeature implements Feature {
-  private statusBarText: HTMLElement;
   private interval: number;
 
   constructor(
-    private plugin: Plugin_2,
     private settings: SettingsService,
     private obsidian: ObsidianService
   ) {}
 
   async load() {
-    if (this.settings.styleLists) {
-      this.addListsStyles();
-    }
-
-    this.settings.onChange("styleLists", this.onStyleListsSettingChange);
-
-    this.addStatusBarText();
-    this.startStatusBarInterval();
+    this.syncListsStyles();
+    this.interval = window.setInterval(() => {
+      this.syncListsStyles();
+    }, 1000);
   }
 
   async unload() {
     clearInterval(this.interval);
-    if (this.statusBarText.parentElement) {
-      this.statusBarText.parentElement.removeChild(this.statusBarText);
-    }
-    this.settings.removeCallback("styleLists", this.onStyleListsSettingChange);
-    this.removeListsStyles();
+    this.applyListsStyles([]);
   }
 
-  private startStatusBarInterval() {
-    let visible = false;
-
-    this.interval = window.setInterval(() => {
-      const { tabSize } = this.obsidian.getObsidianTabsSettings();
+  private syncListsStyles = () => {
+    if (!this.settings.styleLists) {
+      this.applyListsStyles([]);
+      return;
+    }
 
-      const shouldBeVisible =
-        this.settings.styleLists &&
-        !(tabSize === 4) &&
-        !this.settings.hideWarning;
+    const { tabSize } = this.obsidian.getObsidianTabsSettings();
 
-      if (shouldBeVisible && !visible) {
-        this.statusBarText.style.display = "block";
-        visible = true;
-      } else if (!shouldBeVisible && visible) {
-        this.statusBarText.style.display = "none";
-        visible = false;
-      }
-    }, 1000);
-  }
-
-  private onStyleListsSettingChange = (styleLists: boolean) => {
-    if (styleLists) {
-      this.addListsStyles();
-    } else {
-      this.removeListsStyles();
-    }
+    this.applyListsStyles([
+      BETTER_LISTS_CLASS,
+      BETTER_BULLETS_CLASS,
+      tabSize === 4 ? VERTICAL_LINES_CLASS : null,
+    ]);
   };
 
-  private addStatusBarText() {
-    this.statusBarText = this.plugin.addStatusBarItem();
-    this.statusBarText.style.color = "red";
-    this.statusBarText.style.display = "none";
-    this.statusBarText.setText(STATUS_BAR_TEXT);
-  }
+  private applyListsStyles(classes: string[]) {
+    const toKeep = classes.filter((c) => KNOWN_CLASSES.contains(c));
+    const toRemove = KNOWN_CLASSES.filter((c) => !toKeep.contains(c));
 
-  private addListsStyles() {
-    document.body.classList.add("outliner-plugin-bls");
-  }
+    for (const c of toKeep) {
+      if (!document.body.classList.contains(c)) {
+        document.body.classList.add(c);
+      }
+    }
 
-  private removeListsStyles() {
-    document.body.classList.remove("outliner-plugin-bls");
+    for (const c of toRemove) {
+      if (document.body.classList.contains(c)) {
+        document.body.classList.remove(c);
+      }
+    }
   }
 }