Add style settings item view

mgmeyers · Dec 14, 2021 · 983c8ef · 983c8ef
1 parent 80899e0
commit 983c8ef
Show file tree

Hide file tree

Showing 8 changed files with 250 additions and 73 deletions.
diff --git a/manifest.json b/manifest.json
@@ -1,7 +1,7 @@
 {
   "id": "obsidian-style-settings",
   "name": "Style Settings",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "minAppVersion": "0.11.5",
   "description": "Offers controls for adjusting theme, plugin, and snippet CSS variables.",
   "author": "mgmeyers",

diff --git a/package.json b/package.json
@@ -5,7 +5,7 @@
   "main": "main.js",
   "scripts": {
     "dev": "rollup --config rollup.config.js -w",
-    "build": "rollup --config rollup.config.js"
+    "build": "rollup --config rollup.config.js --environment BUILD:production"
   },
   "keywords": [],
   "author": "",

diff --git a/rollup.config.js b/rollup.config.js
@@ -1,10 +1,9 @@
-import dotenv from "dotenv";
 import typescript from "@rollup/plugin-typescript";
 import { nodeResolve } from "@rollup/plugin-node-resolve";
 import commonjs from "@rollup/plugin-commonjs";
 import css from "rollup-plugin-css-only";
 
-dotenv.config();
+const isProd = process.env.BUILD === "production";
 
 const banner = `/*
 THIS IS A GENERATED/BUNDLED FILE BY ROLLUP
@@ -17,6 +16,7 @@ const output = [
     input: "./src/main.ts",
     output: {
       dir: ".",
+      sourcemap: isProd ? false : "inline",
       format: "cjs",
       exports: "default",
       banner,
@@ -26,7 +26,7 @@ const output = [
       css({ output: "styles.css" }),
       typescript(),
       nodeResolve({ browser: true }),
-      commonjs()
+      commonjs(),
     ],
   },
 ];

diff --git a/src/SettingsManager.ts b/src/SettingsManager.ts
@@ -64,10 +64,12 @@ function generateColorVariables(
     case "hsl-values": {
       const hsl = parsedColor.hsl();
       const alpha = opacity ? `,${parsedColor.alpha()}` : "";
+      const h = isNaN(hsl[0]) ? 0 : hsl[0];
+
       return [
         {
           key,
-          value: `${hsl[0]},${hsl[1] * 100}%,${hsl[2] * 100}%${alpha}`,
+          value: `${h},${hsl[1] * 100}%,${hsl[2] * 100}%${alpha}`,
         },
         ...alts,
       ];

diff --git a/src/main.ts b/src/main.ts
@@ -1,4 +1,11 @@
-import { App, Plugin, PluginSettingTab, Setting } from "obsidian";
+import {
+  App,
+  ItemView,
+  Plugin,
+  PluginSettingTab,
+  Setting,
+  WorkspaceLeaf,
+} from "obsidian";
 import { CSSSettingsManager } from "./SettingsManager";
 import {
   CleanupFunction,
@@ -21,6 +28,8 @@ type ErrorList = Array<{ name: string; error: string }>;
 export default class CSSSettingsPlugin extends Plugin {
   settingsManager: CSSSettingsManager;
   settingsTab: CSSSettingsTab;
+  settingsList: ParsedCSSSettings[] = [];
+  errorList: ErrorList = [];
 
   async onload() {
     this.settingsManager = new CSSSettingsManager(this);
@@ -31,6 +40,16 @@ export default class CSSSettingsPlugin extends Plugin {
 
     this.addSettingTab(this.settingsTab);
 
+    this.registerView(viewType, (leaf) => new SettingsView(this, leaf));
+
+    this.addCommand({
+      id: "show-style-settings-leaf",
+      name: "Show style settings view",
+      callback: () => {
+        this.activateView();
+      },
+    });
+
     this.registerEvent(
       this.app.workspace.on("css-change", () => {
         this.parseCSS();
@@ -55,8 +74,6 @@ export default class CSSSettingsPlugin extends Plugin {
 
     this.debounceTimer = window.setTimeout(() => {
       const styleSheets = document.styleSheets;
-      const settingsList: ParsedCSSSettings[] = [];
-      const errorList: ErrorList = [];
 
       for (let i = 0, len = styleSheets.length; i < len; i++) {
         const sheet = styleSheets.item(i);
@@ -86,45 +103,88 @@ export default class CSSSettingsPlugin extends Plugin {
                 }
               ) as ParsedCSSSettings;
 
-              settings.settings = settings.settings.filter(setting => setting);
+              settings.settings = settings.settings.filter(
+                (setting) => setting
+              );
 
               if (
                 typeof settings === "object" &&
                 settings.name &&
                 settings.id &&
-                settings.settings && 
+                settings.settings &&
                 settings.settings.length
               ) {
-                settingsList.push(settings);
+                this.settingsList.push(settings);
               }
             } catch (e) {
-              errorList.push({ name, error: `${e}` });
+              this.errorList.push({ name, error: `${e}` });
             }
           } while ((match = settingRegExp.exec(text)) !== null);
         }
       }
 
-      this.settingsTab.setSettings(settingsList, errorList);
+      this.settingsTab.settingsMarkup.setSettings(
+        this.settingsList,
+        this.errorList
+      );
+      this.app.workspace.getLeavesOfType(viewType).forEach((leaf) => {
+        (leaf.view as SettingsView).settingsMarkup.setSettings(
+          this.settingsList,
+          this.errorList
+        );
+      });
       this.settingsManager.initClasses();
     }, 100);
   }
 
   onunload() {
-    this.settingsManager.cleanup();
-    this.settingsTab.cleanup();
     document.body.classList.remove("css-settings-manager");
+    this.settingsManager.cleanup();
+    this.settingsTab.settingsMarkup.cleanup();
+    this.deactivateView();
+  }
+
+  deactivateView() {
+    this.app.workspace.detachLeavesOfType(viewType);
+  }
+
+  async activateView() {
+    this.deactivateView();
+    const leaf = this.app.workspace.createLeafBySplit(
+      this.app.workspace.activeLeaf,
+      "vertical"
+    );
+
+    await leaf.setViewState({
+      type: viewType,
+    });
+
+    (leaf.view as SettingsView).settingsMarkup.setSettings(
+      this.settingsList,
+      this.errorList
+    );
   }
 }
 
-class CSSSettingsTab extends PluginSettingTab {
+class SettingsMarkup {
+  app: App;
   plugin: CSSSettingsPlugin;
   cleanupFns: CleanupFunction[] = [];
   settings: ParsedCSSSettings[] = [];
   errorList: ErrorList = [];
-
-  constructor(app: App, plugin: CSSSettingsPlugin) {
-    super(app, plugin);
+  containerEl: HTMLElement;
+  isView: boolean;
+
+  constructor(
+    app: App,
+    plugin: CSSSettingsPlugin,
+    containerEl: HTMLElement,
+    isView?: boolean
+  ) {
+    this.app = app;
     this.plugin = plugin;
+    this.containerEl = containerEl;
+    this.isView = !!isView;
   }
 
   display(): void {
@@ -254,6 +314,7 @@ class CSSSettingsTab extends PluginSettingTab {
 
       const cleanup = createSettings({
         containerEl,
+        isView: this.isView,
         sectionId: s.id,
         sectionName: s.name,
         settings: options,
@@ -266,3 +327,54 @@ class CSSSettingsTab extends PluginSettingTab {
     this.cleanupFns = cleanupFns;
   }
 }
+
+class CSSSettingsTab extends PluginSettingTab {
+  settingsMarkup: SettingsMarkup;
+
+  constructor(app: App, plugin: CSSSettingsPlugin) {
+    super(app, plugin);
+    this.settingsMarkup = new SettingsMarkup(app, plugin, this.containerEl);
+  }
+
+  display(): void {
+    this.settingsMarkup.display();
+  }
+}
+
+const viewType = "style-settings";
+
+class SettingsView extends ItemView {
+  settingsMarkup: SettingsMarkup;
+  plugin: CSSSettingsPlugin;
+
+  constructor(plugin: CSSSettingsPlugin, leaf: WorkspaceLeaf) {
+    super(leaf);
+    this.plugin = plugin;
+    this.settingsMarkup = new SettingsMarkup(
+      plugin.app,
+      plugin,
+      this.contentEl,
+      true
+    );
+  }
+
+  getViewType() {
+    return viewType;
+  }
+
+  getIcon() {
+    return "gear";
+  }
+
+  getDisplayText() {
+    return "Style Settings";
+  }
+
+  async onOpen() {
+    return this.settingsMarkup.display();
+  }
+
+  async onClose() {
+    return this.settingsMarkup.cleanup();
+  }
+}