Initial commit
This commit is contained in:
259
main.ts
259
main.ts
@@ -1,134 +1,157 @@
|
||||
import { App, Editor, MarkdownView, Modal, Notice, Plugin, PluginSettingTab, Setting } from 'obsidian';
|
||||
import { Plugin, setIcon, WorkspaceLeaf } from "obsidian";
|
||||
import { DEFAULT_SETTINGS, TabPinSettings, TabPinSettingTab } from "./settings";
|
||||
|
||||
// Remember to rename these classes and interfaces!
|
||||
const BTN_CLASS = "tab-pin-toggle";
|
||||
const PINNED_CLASS = "is-pinned";
|
||||
|
||||
interface MyPluginSettings {
|
||||
mySetting: string;
|
||||
}
|
||||
|
||||
const DEFAULT_SETTINGS: MyPluginSettings = {
|
||||
mySetting: 'default'
|
||||
}
|
||||
|
||||
export default class MyPlugin extends Plugin {
|
||||
settings: MyPluginSettings;
|
||||
export default class TabPinButtonPlugin extends Plugin {
|
||||
settings: TabPinSettings;
|
||||
private observer?: MutationObserver;
|
||||
private seenLeaves = new WeakSet<WorkspaceLeaf>();
|
||||
|
||||
async onload() {
|
||||
await this.loadSettings();
|
||||
this.settings = Object.assign({}, DEFAULT_SETTINGS, await this.loadData());
|
||||
|
||||
// This creates an icon in the left ribbon.
|
||||
const ribbonIconEl = this.addRibbonIcon('dice', 'Sample Plugin', (_evt: MouseEvent) => {
|
||||
// Called when the user clicks the icon.
|
||||
new Notice('This is a notice!');
|
||||
this.addSettingTab(new TabPinSettingTab(this.app, this));
|
||||
this.applyHoverStyle();
|
||||
|
||||
this.decorateAllTabHeaders();
|
||||
|
||||
this.registerEvent(this.app.workspace.on("layout-change", () => this.onWorkspaceChange()));
|
||||
this.registerEvent(this.app.workspace.on("active-leaf-change", () => this.syncAllButtons()));
|
||||
|
||||
this.observer = new MutationObserver(() => {
|
||||
this.decorateAllTabHeaders();
|
||||
this.syncAllButtons();
|
||||
});
|
||||
// Perform additional things with the ribbon
|
||||
ribbonIconEl.addClass('my-plugin-ribbon-class');
|
||||
this.observer.observe(document.body, { childList: true, subtree: true });
|
||||
|
||||
// This adds a status bar item to the bottom of the app. Does not work on mobile apps.
|
||||
const statusBarItemEl = this.addStatusBarItem();
|
||||
statusBarItemEl.setText('Status Bar Text');
|
||||
|
||||
// This adds a simple command that can be triggered anywhere
|
||||
this.addCommand({
|
||||
id: 'open-sample-modal-simple',
|
||||
name: 'Open sample modal (simple)',
|
||||
callback: () => {
|
||||
new SampleModal(this.app).open();
|
||||
}
|
||||
});
|
||||
// This adds an editor command that can perform some operation on the current editor instance
|
||||
this.addCommand({
|
||||
id: 'sample-editor-command',
|
||||
name: 'Sample editor command',
|
||||
editorCallback: (editor: Editor, _view: MarkdownView) => {
|
||||
console.log(editor.getSelection());
|
||||
editor.replaceSelection('Sample Editor Command');
|
||||
}
|
||||
});
|
||||
// This adds a complex command that can check whether the current state of the app allows execution of the command
|
||||
this.addCommand({
|
||||
id: 'open-sample-modal-complex',
|
||||
name: 'Open sample modal (complex)',
|
||||
checkCallback: (checking: boolean) => {
|
||||
// Conditions to check
|
||||
const markdownView = this.app.workspace.getActiveViewOfType(MarkdownView);
|
||||
if (markdownView) {
|
||||
// If checking is true, we're simply "checking" if the command can be run.
|
||||
// If checking is false, then we want to actually perform the operation.
|
||||
if (!checking) {
|
||||
new SampleModal(this.app).open();
|
||||
}
|
||||
|
||||
// This command will only show up in Command Palette when the check function returns true
|
||||
return true;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// This adds a settings tab so the user can configure various aspects of the plugin
|
||||
this.addSettingTab(new SampleSettingTab(this.app, this));
|
||||
|
||||
// If the plugin hooks up any global DOM events (on parts of the app that doesn't belong to this plugin)
|
||||
// Using this function will automatically remove the event listener when this plugin is disabled.
|
||||
this.registerDomEvent(document, 'click', (evt: MouseEvent) => {
|
||||
console.log('click', evt);
|
||||
});
|
||||
|
||||
// When registering intervals, this function will automatically clear the interval when the plugin is disabled.
|
||||
this.registerInterval(window.setInterval(() => console.log('setInterval'), 5 * 60 * 1000));
|
||||
this.autoPinNewLeavesPass();
|
||||
}
|
||||
|
||||
onunload() {
|
||||
|
||||
this.observer?.disconnect();
|
||||
document.querySelectorAll<HTMLElement>(`.${BTN_CLASS}`).forEach((el) => el.remove());
|
||||
}
|
||||
|
||||
async loadSettings() {
|
||||
this.settings = Object.assign({}, DEFAULT_SETTINGS, await this.loadData());
|
||||
async saveSettings() { await this.saveData(this.settings); }
|
||||
|
||||
applyHoverStyle() {
|
||||
const root = document.documentElement;
|
||||
if (this.settings.showPinOnlyOnHover) {
|
||||
root.style.setProperty("--tab-pin-initial-opacity", "0");
|
||||
root.style.setProperty("--tab-pin-hover-opacity", "1");
|
||||
} else {
|
||||
root.style.setProperty("--tab-pin-initial-opacity", "0.7");
|
||||
root.style.setProperty("--tab-pin-hover-opacity", "1");
|
||||
}
|
||||
}
|
||||
|
||||
async saveSettings() {
|
||||
await this.saveData(this.settings);
|
||||
}
|
||||
}
|
||||
|
||||
class SampleModal extends Modal {
|
||||
constructor(app: App) {
|
||||
super(app);
|
||||
}
|
||||
|
||||
onOpen() {
|
||||
const {contentEl} = this;
|
||||
contentEl.setText('Woah!');
|
||||
}
|
||||
|
||||
onClose() {
|
||||
const {contentEl} = this;
|
||||
contentEl.empty();
|
||||
}
|
||||
}
|
||||
|
||||
class SampleSettingTab extends PluginSettingTab {
|
||||
plugin: MyPlugin;
|
||||
|
||||
constructor(app: App, plugin: MyPlugin) {
|
||||
super(app, plugin);
|
||||
this.plugin = plugin;
|
||||
}
|
||||
|
||||
display(): void {
|
||||
const {containerEl} = this;
|
||||
|
||||
containerEl.empty();
|
||||
|
||||
new Setting(containerEl)
|
||||
.setName('Setting #1')
|
||||
.setDesc('It\'s a secret')
|
||||
.addText(text => text
|
||||
.setPlaceholder('Enter your secret')
|
||||
.setValue(this.plugin.settings.mySetting)
|
||||
.onChange(async (value) => {
|
||||
this.plugin.settings.mySetting = value;
|
||||
await this.plugin.saveSettings();
|
||||
}));
|
||||
private onWorkspaceChange() {
|
||||
this.decorateAllTabHeaders();
|
||||
this.syncAllButtons();
|
||||
this.autoPinNewLeavesPass();
|
||||
}
|
||||
|
||||
private decorateAllTabHeaders() {
|
||||
const headers = document.querySelectorAll<HTMLElement>(".workspace-tab-header");
|
||||
headers.forEach((header) => {
|
||||
if (header.querySelector(`.${BTN_CLASS}`)) return;
|
||||
const inner = header.querySelector<HTMLElement>(".workspace-tab-header-inner") ?? header;
|
||||
|
||||
const btn = inner.createSpan({ cls: BTN_CLASS });
|
||||
const closeBtn = inner.querySelector<HTMLElement>(".workspace-tab-header-inner-close-button");
|
||||
if (closeBtn) closeBtn.before(btn); else inner.appendChild(btn);
|
||||
|
||||
btn.setAttribute("aria-label", "Toggle pin");
|
||||
btn.setAttribute("tabindex", "0");
|
||||
setIcon(btn, "pin");
|
||||
|
||||
btn.addEventListener("click", (ev) => {
|
||||
ev.stopPropagation();
|
||||
ev.preventDefault();
|
||||
this.activateHeader(header);
|
||||
const leaf = this.app.workspace.activeLeaf as any;
|
||||
if (!leaf) return;
|
||||
const pinned = !!leaf?.pinned;
|
||||
if (typeof leaf.setPinned === "function") leaf.setPinned(!pinned);
|
||||
else this.toggleViaViewState(leaf as WorkspaceLeaf, !pinned);
|
||||
this.syncButtonForHeader(header);
|
||||
// hide if pinned
|
||||
if (this.isHeaderPinned(header)) {
|
||||
btn.style.display = "none";
|
||||
} else {
|
||||
btn.style.display = "";
|
||||
}
|
||||
});
|
||||
|
||||
btn.addEventListener("keydown", (e: KeyboardEvent) => {
|
||||
if (e.key === "Enter" || e.key === " ") {
|
||||
e.preventDefault();
|
||||
(btn as HTMLElement).click();
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
private syncAllButtons() {
|
||||
document.querySelectorAll<HTMLElement>(".workspace-tab-header").forEach((h) => this.syncButtonForHeader(h));
|
||||
}
|
||||
|
||||
private syncButtonForHeader(header: HTMLElement) {
|
||||
const btn = header.querySelector<HTMLElement>(`.${BTN_CLASS}`);
|
||||
if (!btn) return;
|
||||
const isPinned = this.isHeaderPinned(header);
|
||||
btn.classList.toggle(PINNED_CLASS, isPinned);
|
||||
btn.setAttribute("aria-pressed", isPinned ? "true" : "false");
|
||||
btn.title = isPinned ? "Unpin tab" : "Pin tab";
|
||||
}
|
||||
|
||||
private isHeaderPinned(header: HTMLElement): boolean {
|
||||
if (header.classList.contains("mod-pinned")) return true;
|
||||
if (header.classList.contains("is-active")) {
|
||||
const leaf = this.app.workspace.activeLeaf as any;
|
||||
return !!leaf?.pinned;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
private activateHeader(header: HTMLElement) {
|
||||
header.dispatchEvent(new MouseEvent("mousedown", { bubbles: true }));
|
||||
header.click();
|
||||
}
|
||||
|
||||
private async toggleViaViewState(leaf: WorkspaceLeaf, toPinned: boolean) {
|
||||
const vs = await leaf.getViewState();
|
||||
await leaf.setViewState({ ...vs, pinned: toPinned });
|
||||
}
|
||||
|
||||
private autoPinNewLeavesPass() {
|
||||
if (!this.settings.autoPinNewTabs) return;
|
||||
const leaves = this.app.workspace.getLeavesOfType?.("") || this.getAllLeavesFallback();
|
||||
for (const leaf of leaves) {
|
||||
if (this.seenLeaves.has(leaf)) continue;
|
||||
this.seenLeaves.add(leaf);
|
||||
const anyLeaf = leaf as any;
|
||||
const pinned = !!anyLeaf?.pinned;
|
||||
if (!pinned) {
|
||||
if (typeof anyLeaf.setPinned === "function") anyLeaf.setPinned(true);
|
||||
else this.toggleViaViewState(leaf, true);
|
||||
}
|
||||
}
|
||||
this.syncAllButtons();
|
||||
}
|
||||
|
||||
private getAllLeavesFallback(): WorkspaceLeaf[] {
|
||||
const out: WorkspaceLeaf[] = [];
|
||||
const visit: any = (container: any) => {
|
||||
if (!container) return;
|
||||
if (Array.isArray(container.children)) container.children.forEach(visit);
|
||||
if (container?.view && container?.leaf) out.push(container.leaf as WorkspaceLeaf);
|
||||
if (container?.leaves) container.leaves.forEach((l: WorkspaceLeaf) => out.push(l));
|
||||
};
|
||||
// @ts-expect-error accessing private rootSplit
|
||||
visit((this.app.workspace as any).rootSplit);
|
||||
return out;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
{
|
||||
"id": "sample-plugin",
|
||||
"name": "Sample Plugin",
|
||||
"version": "1.0.0",
|
||||
"minAppVersion": "0.15.0",
|
||||
"description": "Demonstrates some of the capabilities of the Obsidian API.",
|
||||
"author": "Obsidian",
|
||||
"authorUrl": "https://obsidian.md",
|
||||
"fundingUrl": "https://obsidian.md/pricing",
|
||||
"isDesktopOnly": false
|
||||
"id": "tab-pin-button",
|
||||
"name": "Tab Pin Button",
|
||||
"version": "0.0.1",
|
||||
"minAppVersion": "1.8.0",
|
||||
"description": "Adds a pin icon to each tab header and lets you auto‑pin new tabs.",
|
||||
"author": "You",
|
||||
"isDesktopOnly": true,
|
||||
"js": "main.js",
|
||||
"css": "styles.css"
|
||||
}
|
||||
|
||||
2406
package-lock.json
generated
Normal file
2406
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
59
settings.ts
Normal file
59
settings.ts
Normal file
@@ -0,0 +1,59 @@
|
||||
import { App, PluginSettingTab, Setting } from "obsidian";
|
||||
import type TabPinButtonPlugin from "./main";
|
||||
|
||||
|
||||
export interface TabPinSettings {
|
||||
showPinOnlyOnHover: boolean;
|
||||
autoPinNewTabs: boolean;
|
||||
}
|
||||
|
||||
|
||||
export const DEFAULT_SETTINGS: TabPinSettings = {
|
||||
showPinOnlyOnHover: true,
|
||||
autoPinNewTabs: false,
|
||||
};
|
||||
|
||||
|
||||
export class TabPinSettingTab extends PluginSettingTab {
|
||||
plugin: TabPinButtonPlugin;
|
||||
|
||||
|
||||
constructor(app: App, plugin: TabPinButtonPlugin) {
|
||||
super(app, plugin);
|
||||
this.plugin = plugin;
|
||||
}
|
||||
|
||||
|
||||
display(): void {
|
||||
const { containerEl } = this;
|
||||
containerEl.empty();
|
||||
containerEl.createEl("h2", { text: "Tab Pin Button Settings" });
|
||||
|
||||
|
||||
new Setting(containerEl)
|
||||
.setName("Show pin only on hover")
|
||||
.setDesc("When ON, the pin icon appears on hover; when OFF, it is always visible.")
|
||||
.addToggle((toggle) =>
|
||||
toggle
|
||||
.setValue(this.plugin.settings.showPinOnlyOnHover)
|
||||
.onChange(async (v) => {
|
||||
this.plugin.settings.showPinOnlyOnHover = v;
|
||||
await this.plugin.saveSettings();
|
||||
this.plugin.applyHoverStyle();
|
||||
})
|
||||
);
|
||||
|
||||
|
||||
new Setting(containerEl)
|
||||
.setName("Auto‑pin newly opened tabs")
|
||||
.setDesc("Automatically pin tabs when they are first created.")
|
||||
.addToggle((toggle) =>
|
||||
toggle
|
||||
.setValue(this.plugin.settings.autoPinNewTabs)
|
||||
.onChange(async (v) => {
|
||||
this.plugin.settings.autoPinNewTabs = v;
|
||||
await this.plugin.saveSettings();
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
22
styles.css
22
styles.css
@@ -1,8 +1,14 @@
|
||||
/*
|
||||
|
||||
This CSS file will be included with your plugin, and
|
||||
available in the app when your plugin is enabled.
|
||||
|
||||
If your plugin does not need CSS, delete this file.
|
||||
|
||||
*/
|
||||
/* Pin button styles */
|
||||
.tab-pin-toggle {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-left: 6px;
|
||||
opacity: var(--tab-pin-initial-opacity, 0.7);
|
||||
cursor: pointer;
|
||||
}
|
||||
.workspace-tab-header:hover .tab-pin-toggle { opacity: var(--tab-pin-hover-opacity, 1); }
|
||||
.tab-pin-toggle.is-pinned svg { transform: rotate(-35deg); }
|
||||
.tab-pin-toggle:focus { outline: 2px solid var(--interactive-accent); outline-offset: 2px; }
|
||||
|
||||
Reference in New Issue
Block a user