mirror of
https://github.com/Ellpeck/ObsidianCustomFrames.git
synced 2024-06-28 17:09:10 +02:00
157 lines
7.2 KiB
TypeScript
157 lines
7.2 KiB
TypeScript
|
import { App, ButtonComponent, DropdownComponent, PluginSettingTab, Setting } from "obsidian";
|
||
|
import { defaultSettings, presets } from "./settings";
|
||
|
import CustomFramesPlugin from "./main";
|
||
|
|
||
|
export class CustomFramesSettingTab extends PluginSettingTab {
|
||
|
|
||
|
plugin: CustomFramesPlugin;
|
||
|
|
||
|
constructor(app: App, plugin: CustomFramesPlugin) {
|
||
|
super(app, plugin);
|
||
|
this.plugin = plugin;
|
||
|
}
|
||
|
|
||
|
display(): void {
|
||
|
this.containerEl.empty();
|
||
|
this.containerEl.createEl("h2", { text: "Custom Frames Settings" });
|
||
|
this.containerEl.createEl("p", { text: "Note that Obsidian has to be restarted or reloaded for most of these settings to take effect.", cls: "mod-warning" });
|
||
|
|
||
|
new Setting(this.containerEl)
|
||
|
.setName("Frame Padding")
|
||
|
.setDesc("The padding that should be left around the inside of custom frame panes, in pixels.")
|
||
|
.addText(t => {
|
||
|
t.inputEl.type = "number";
|
||
|
t.setValue(String(this.plugin.settings.padding));
|
||
|
t.onChange(async v => {
|
||
|
this.plugin.settings.padding = v.length ? Number(v) : defaultSettings.padding;
|
||
|
await this.plugin.saveSettings();
|
||
|
});
|
||
|
});
|
||
|
|
||
|
for (let frame of this.plugin.settings.frames) {
|
||
|
let heading = this.containerEl.createEl("h3", { text: frame.displayName || "Unnamed Frame" });
|
||
|
|
||
|
new Setting(this.containerEl)
|
||
|
.setName("Display Name")
|
||
|
.setDesc("The display name that this frame should have.")
|
||
|
.addText(t => {
|
||
|
t.setValue(frame.displayName);
|
||
|
t.onChange(async v => {
|
||
|
frame.displayName = v;
|
||
|
heading.setText(frame.displayName || "Unnamed Frame");
|
||
|
await this.plugin.saveSettings();
|
||
|
});
|
||
|
});
|
||
|
new Setting(this.containerEl)
|
||
|
.setName("Icon")
|
||
|
.setDesc(createFragment(f => {
|
||
|
f.createSpan({ text: "The icon that this frame's pane should have. The names of any " });
|
||
|
f.createEl("a", { text: "Lucide icons", href: "https://lucide.dev/" });
|
||
|
f.createSpan({ text: " can be used." });
|
||
|
}))
|
||
|
.addText(t => {
|
||
|
t.setValue(frame.icon);
|
||
|
t.onChange(async v => {
|
||
|
frame.icon = v;
|
||
|
await this.plugin.saveSettings();
|
||
|
});
|
||
|
});
|
||
|
new Setting(this.containerEl)
|
||
|
.setName("URL")
|
||
|
.setDesc("The URL that should be opened in this frame.")
|
||
|
.addText(t => {
|
||
|
t.setValue(frame.url);
|
||
|
t.onChange(async v => {
|
||
|
frame.url = v;
|
||
|
await this.plugin.saveSettings();
|
||
|
});
|
||
|
});
|
||
|
new Setting(this.containerEl)
|
||
|
.setName("Disable on Mobile")
|
||
|
.setDesc("Custom Frames is a lot more restricted on mobile devices and doesn't allow for the same types of content to be displayed. If a frame doesn't work as expected on mobile, it can be disabled.")
|
||
|
.addToggle(t => {
|
||
|
t.setValue(frame.hideOnMobile);
|
||
|
t.onChange(async v => {
|
||
|
frame.hideOnMobile = v;
|
||
|
await this.plugin.saveSettings();
|
||
|
});
|
||
|
});
|
||
|
new Setting(this.containerEl)
|
||
|
.setName("Minimum Width")
|
||
|
.setDesc(createFragment(f => {
|
||
|
f.createSpan({ text: "The width that this frame's pane should be adjusted to automatically if it is lower. Set to 0 to disable." });
|
||
|
f.createEl("br");
|
||
|
f.createEl("em", { text: "Note that this is only applied on Desktop." });
|
||
|
}))
|
||
|
.addText(t => {
|
||
|
t.inputEl.type = "number";
|
||
|
t.setValue(String(frame.minimumWidth));
|
||
|
t.onChange(async v => {
|
||
|
frame.minimumWidth = v.length ? Number(v) : 0;
|
||
|
await this.plugin.saveSettings();
|
||
|
});
|
||
|
});
|
||
|
new Setting(this.containerEl)
|
||
|
.setName("Additional CSS")
|
||
|
.setDesc(createFragment(f => {
|
||
|
f.createSpan({ text: "A snippet of additional CSS that should be applied to this frame." });
|
||
|
f.createEl("br");
|
||
|
f.createEl("em", { text: "Note that this is only applied on Desktop." });
|
||
|
}))
|
||
|
.addTextArea(t => {
|
||
|
t.inputEl.rows = 5;
|
||
|
t.inputEl.cols = 50;
|
||
|
t.setValue(frame.customCss);
|
||
|
t.onChange(async v => {
|
||
|
frame.customCss = v;
|
||
|
await this.plugin.saveSettings();
|
||
|
});
|
||
|
});
|
||
|
|
||
|
new ButtonComponent(this.containerEl)
|
||
|
.setButtonText("Remove Frame")
|
||
|
.onClick(async () => {
|
||
|
this.plugin.settings.frames.remove(frame);
|
||
|
await this.plugin.saveSettings();
|
||
|
this.display();
|
||
|
});
|
||
|
}
|
||
|
|
||
|
this.containerEl.createEl("hr");
|
||
|
let info = this.containerEl.createEl("p", { text: "Create a new frame, either from a preset shipped with the plugin, or a custom one that you can edit yourself. Each frame's pane can be opened using the \"Custom Frames: Open\" command." });
|
||
|
info.createEl("br");
|
||
|
info.createSpan({ text: "Note that Obsidian has to be restarted or reloaded to activate a newly added frame.", cls: "mod-warning" });
|
||
|
|
||
|
let addDiv = this.containerEl.createDiv();
|
||
|
addDiv.addClass("custom-frames-add");
|
||
|
let dropdown = new DropdownComponent(addDiv);
|
||
|
dropdown.addOption("new", "Custom");
|
||
|
for (let key of Object.keys(presets))
|
||
|
dropdown.addOption(key, presets[key].displayName);
|
||
|
new ButtonComponent(addDiv)
|
||
|
.setButtonText("Add Frame")
|
||
|
.onClick(async () => {
|
||
|
let option = dropdown.getValue();
|
||
|
if (option == "new") {
|
||
|
this.plugin.settings.frames.push({
|
||
|
url: "",
|
||
|
displayName: "New Frame",
|
||
|
icon: "",
|
||
|
minimumWidth: 0,
|
||
|
customCss: "",
|
||
|
hideOnMobile: true
|
||
|
});
|
||
|
}
|
||
|
else {
|
||
|
this.plugin.settings.frames.push(presets[option]);
|
||
|
}
|
||
|
await this.plugin.saveSettings();
|
||
|
this.display();
|
||
|
});
|
||
|
|
||
|
this.containerEl.createEl("hr");
|
||
|
this.containerEl.createEl("p", { text: "If you like this plugin and want to support its development, you can do so through my website by clicking this fancy image!" });
|
||
|
this.containerEl.createEl("a", { href: "https://ellpeck.de/support" })
|
||
|
.createEl("img", { attr: { src: "https://ellpeck.de/res/generalsupport.png" }, cls: "custom-frames-support" });
|
||
|
}
|
||
|
}
|