From 6d59394f305bf798d83302279a93fb7ff42878ce Mon Sep 17 00:00:00 2001 From: Jason Swartz Date: Mon, 15 Jun 2026 14:30:13 -0700 Subject: [PATCH] updated re obsidian community submission errors --- manifest.json | 4 +-- src/drag-resize.ts | 4 +-- src/main.ts | 3 ++- src/modal-enhancer.ts | 52 +++++++++++++++++++----------------- src/settings-tab.ts | 5 +--- styles.css | 12 ++++----- tests/drag-resize.test.ts | 3 +++ tests/modal-enhancer.test.ts | 11 ++++---- tests/obsidian-dom.ts | 21 +++++++++++++++ 9 files changed, 69 insertions(+), 46 deletions(-) create mode 100644 tests/obsidian-dom.ts diff --git a/manifest.json b/manifest.json index db471ec..aa286b5 100644 --- a/manifest.json +++ b/manifest.json @@ -3,8 +3,8 @@ "name": "Settings Float", "version": "0.1.0", "minAppVersion": "1.6.0", - "description": "Makes Obsidian Settings and catalog dialogs movable and resizable.", + "description": "Makes the Settings, Theme, and Community Plugins dialogs movable and resizable.", "author": "Jason Swartz", "authorUrl": "https://github.com/swartzrock", "isDesktopOnly": true -} +} \ No newline at end of file diff --git a/src/drag-resize.ts b/src/drag-resize.ts index 5b4c3b2..a6843ea 100644 --- a/src/drag-resize.ts +++ b/src/drag-resize.ts @@ -63,7 +63,7 @@ export function createDragResizeSession( options.handleEl.setPointerCapture?.(event.pointerId); options.modalEl.classList.add("setmove--is-interacting"); options.modalEl.classList.add(`setmove--is-${options.mode === "drag" ? "dragging" : "resizing"}`); - options.modalEl.style.userSelect = "none"; + options.modalEl.setCssStyles({ userSelect: "none" }); options.onStateChange?.(true); event.preventDefault(); }; @@ -131,7 +131,7 @@ export function createDragResizeSession( options.handleEl.releasePointerCapture?.(pointerId); options.modalEl.classList.remove("setmove--is-interacting"); options.modalEl.classList.remove("setmove--is-dragging", "setmove--is-resizing"); - options.modalEl.style.userSelect = ""; + options.modalEl.setCssStyles({ userSelect: "" }); options.onStateChange?.(false); active = null; }; diff --git a/src/main.ts b/src/main.ts index 129b64f..ac16034 100644 --- a/src/main.ts +++ b/src/main.ts @@ -105,7 +105,8 @@ export default class SetmovePlugin extends Plugin { } private getOpenEnhancer(): SettingsModalEnhancer | null { - return this.activeEnhancers.values().next().value ?? null; + const firstEnhancer = this.activeEnhancers.values().next(); + return firstEnhancer.done ? null : firstEnhancer.value; } private getEnhancerSettings( diff --git a/src/modal-enhancer.ts b/src/modal-enhancer.ts index e372264..3a16808 100644 --- a/src/modal-enhancer.ts +++ b/src/modal-enhancer.ts @@ -184,12 +184,10 @@ export class SettingsModalEnhancer { this.syncHandleState( this.dragHandleEl, this.enabled && this.settings.movable, - "move", ); this.syncHandleState( this.resizeHandleEl, this.enabled && this.settings.resizable, - "nwse-resize", ); for (const controlsEl of this.presetControlsEls) { const isVisible = @@ -198,7 +196,6 @@ export class SettingsModalEnhancer { controlsEl.dataset.setmovePlacement as PresetControlsPlacement, ); controlsEl.hidden = !isVisible; - controlsEl.style.display = isVisible ? "" : "none"; } if (this.enabled) { @@ -234,8 +231,10 @@ export class SettingsModalEnhancer { this.modalEl.classList.remove(ENHANCED_CLASS, `${ENHANCED_CLASS}--disabled`); if (this.contentEl) { this.contentEl.classList.remove(CONTENT_CLASS); - this.contentEl.style.minHeight = ""; - this.contentEl.style.overflow = ""; + this.contentEl.setCssStyles({ + minHeight: "", + overflow: "", + }); } this.restoreInlineStyles(); } @@ -244,8 +243,10 @@ export class SettingsModalEnhancer { this.modalEl.classList.add(ENHANCED_CLASS); if (this.contentEl) { this.contentEl.classList.add(CONTENT_CLASS); - this.contentEl.style.minHeight = "0"; - this.contentEl.style.overflow = "auto"; + this.contentEl.setCssStyles({ + minHeight: "0", + overflow: "auto", + }); } this.modalEl.prepend(this.dragHandleEl); @@ -271,13 +272,15 @@ export class SettingsModalEnhancer { private applyRect(rect: ModalRect): void { this.currentRect = rect; - this.modalEl.style.position = "fixed"; - this.modalEl.style.left = `${rect.x}px`; - this.modalEl.style.top = `${rect.y}px`; - this.modalEl.style.width = `${rect.width}px`; - this.modalEl.style.height = `${rect.height}px`; - this.modalEl.style.maxWidth = "none"; - this.modalEl.style.maxHeight = "none"; + this.modalEl.setCssStyles({ + position: "fixed", + left: `${rect.x}px`, + top: `${rect.y}px`, + width: `${rect.width}px`, + height: `${rect.height}px`, + maxWidth: "none", + maxHeight: "none", + }); } private resolveInitialRect(): ModalRect { @@ -425,12 +428,9 @@ export class SettingsModalEnhancer { private syncHandleState( handleEl: HTMLElement, isVisible: boolean, - cursor: string, ): void { handleEl.hidden = !isVisible; - handleEl.style.display = isVisible ? "" : "none"; - handleEl.style.pointerEvents = isVisible ? "" : "none"; - handleEl.style.cursor = isVisible ? cursor : "default"; + handleEl.classList.toggle("setmove--control-disabled", !isVisible); } private createSession( @@ -509,13 +509,15 @@ export class SettingsModalEnhancer { } private restoreInlineStyles(): void { - this.modalEl.style.height = this.styleSnapshot.height; - this.modalEl.style.left = this.styleSnapshot.left; - this.modalEl.style.maxHeight = this.styleSnapshot.maxHeight; - this.modalEl.style.maxWidth = this.styleSnapshot.maxWidth; - this.modalEl.style.position = this.styleSnapshot.position; - this.modalEl.style.top = this.styleSnapshot.top; - this.modalEl.style.width = this.styleSnapshot.width; + this.modalEl.setCssStyles({ + height: this.styleSnapshot.height, + left: this.styleSnapshot.left, + maxHeight: this.styleSnapshot.maxHeight, + maxWidth: this.styleSnapshot.maxWidth, + position: this.styleSnapshot.position, + top: this.styleSnapshot.top, + width: this.styleSnapshot.width, + }); } } diff --git a/src/settings-tab.ts b/src/settings-tab.ts index 524c969..e5d4d40 100644 --- a/src/settings-tab.ts +++ b/src/settings-tab.ts @@ -14,10 +14,7 @@ export class SetmoveSettingTab extends PluginSettingTab { const plugin = this.pluginRef; containerEl.empty(); - containerEl.createEl("h2", { - cls: "setmove--settings-title", - text: "Settings Float", - }); + new Setting(containerEl).setName("Settings Float").setHeading(); containerEl.createEl("p", { cls: "setmove--settings-description", text: "Move and resize Obsidian Settings and catalog dialogs so you can adjust options while keeping your notes and workspace visible.", diff --git a/styles.css b/styles.css index 2de0598..1339215 100644 --- a/styles.css +++ b/styles.css @@ -1,10 +1,3 @@ -.vertical-tab-content .setmove--settings-title { - margin-left: 0; - margin-inline-start: 0; - padding-left: 0; - padding-inline-start: 0; -} - .setmove--settings-description { max-width: 640px; margin: 0 0 1.5em; @@ -80,6 +73,11 @@ color: #a9a9a9; } +.setmove--control-disabled { + pointer-events: none; + cursor: default; +} + .setmove--settings-modal.setmove--is-interacting { box-shadow: 0 0 0 1px var(--interactive-accent), var(--shadow-l); } diff --git a/tests/drag-resize.test.ts b/tests/drag-resize.test.ts index 80d7056..8ad38ee 100644 --- a/tests/drag-resize.test.ts +++ b/tests/drag-resize.test.ts @@ -2,6 +2,9 @@ import { beforeEach, describe, expect, it, vi } from "vitest"; import { createDragResizeSession } from "../src/drag-resize"; import { enhanceSettingsModal } from "../src/modal-enhancer"; import { DEFAULT_SETTINGS } from "../src/settings"; +import { installObsidianDomHelpers } from "./obsidian-dom"; + +installObsidianDomHelpers(); describe("drag and resize sessions", () => { beforeEach(() => { diff --git a/tests/modal-enhancer.test.ts b/tests/modal-enhancer.test.ts index a983efa..0c67fdc 100644 --- a/tests/modal-enhancer.test.ts +++ b/tests/modal-enhancer.test.ts @@ -2,6 +2,9 @@ import { beforeEach, describe, expect, it } from "vitest"; import { enhanceSettingsModal } from "../src/modal-enhancer"; import type { SettingsModalMatch } from "../src/modal-detector"; import { DEFAULT_SETTINGS, type PersistedGeometry } from "../src/settings"; +import { installObsidianDomHelpers } from "./obsidian-dom"; + +installObsidianDomHelpers(); const savedGeometry: PersistedGeometry = { schemaVersion: 1, @@ -149,8 +152,8 @@ describe("settings modal enhancer", () => { ).toBe(true); expect( (match.modalEl.querySelector('[data-setmove-role="resize-handle"]') as HTMLElement) - .style.display, - ).not.toBe("none"); + .hidden, + ).toBe(false); first.destroy(); }); @@ -238,9 +241,7 @@ describe("settings modal enhancer", () => { ); expect(resizeHandle?.hidden).toBe(true); - expect(resizeHandle?.style.display).toBe("none"); - expect(resizeHandle?.style.pointerEvents).toBe("none"); - expect(resizeHandle?.style.cursor).toBe("default"); + expect(resizeHandle?.classList.contains("setmove--control-disabled")).toBe(true); enhancer.destroy(); }); diff --git a/tests/obsidian-dom.ts b/tests/obsidian-dom.ts new file mode 100644 index 0000000..422aaa5 --- /dev/null +++ b/tests/obsidian-dom.ts @@ -0,0 +1,21 @@ +export function installObsidianDomHelpers(): void { + if (!HTMLElement.prototype.setCssStyles) { + Object.defineProperty(HTMLElement.prototype, "setCssStyles", { + configurable: true, + value(this: HTMLElement, styles: Partial): void { + Object.assign(this.style, styles); + }, + }); + } + + if (!HTMLElement.prototype.setCssProps) { + Object.defineProperty(HTMLElement.prototype, "setCssProps", { + configurable: true, + value(this: HTMLElement, props: Record): void { + for (const [name, value] of Object.entries(props)) { + this.style.setProperty(name, value); + } + }, + }); + } +}