mirror of
https://github.com/Ellpeck/ObsidianCustomFrames.git
synced 2024-11-14 14:59:08 +01:00
parent
97f122c33b
commit
eedac8f048
3 changed files with 22 additions and 2 deletions
|
@ -76,6 +76,17 @@ export class CustomFramesSettingTab extends PluginSettingTab {
|
|||
await this.plugin.saveSettings();
|
||||
});
|
||||
});
|
||||
new Setting(this.containerEl)
|
||||
.setName("Page Zoom")
|
||||
.setDesc("The zoom that this frame's page should be displayed with, as a percentage.")
|
||||
.addText(t => {
|
||||
t.inputEl.type = "number";
|
||||
t.setValue(String(frame.zoomLevel * 100));
|
||||
t.onChange(async v => {
|
||||
frame.zoomLevel = v.length ? Number(v) / 100 : 1;
|
||||
await this.plugin.saveSettings();
|
||||
});
|
||||
});
|
||||
new Setting(this.containerEl)
|
||||
.setName("Additional CSS")
|
||||
.setDesc(createFragment(f => {
|
||||
|
@ -122,7 +133,7 @@ export class CustomFramesSettingTab extends PluginSettingTab {
|
|||
url: "",
|
||||
displayName: "New Frame",
|
||||
icon: "",
|
||||
minimumWidth: 0,
|
||||
zoomLevel: 1,
|
||||
customCss: "",
|
||||
hideOnMobile: true
|
||||
});
|
||||
|
|
|
@ -8,6 +8,7 @@ export const presets: Record<string, CustomFrame> = {
|
|||
displayName: "Obsidian Forum",
|
||||
icon: "edit",
|
||||
hideOnMobile: true,
|
||||
zoomLevel: 1,
|
||||
customCss: ""
|
||||
},
|
||||
"calendar": {
|
||||
|
@ -15,6 +16,7 @@ export const presets: Record<string, CustomFrame> = {
|
|||
displayName: "Google Calendar",
|
||||
icon: "calendar",
|
||||
hideOnMobile: true,
|
||||
zoomLevel: 1,
|
||||
customCss: `/* hide right-side menu, and some buttons */
|
||||
div.d6McF,
|
||||
div.pw6cBb,
|
||||
|
@ -31,6 +33,7 @@ div.dwlvNd {
|
|||
displayName: "Google Keep",
|
||||
icon: "files",
|
||||
hideOnMobile: true,
|
||||
zoomLevel: 1,
|
||||
customCss: `/* hide the menu bar and the "Keep" text */
|
||||
.PvRhvb-qAWA2, .gb_2d.gb_Zc {
|
||||
display: none !important;
|
||||
|
@ -41,6 +44,7 @@ div.dwlvNd {
|
|||
displayName: "Notion",
|
||||
icon: "box",
|
||||
hideOnMobile: true,
|
||||
zoomLevel: 1,
|
||||
customCss: ""
|
||||
},
|
||||
"twitter": {
|
||||
|
@ -48,6 +52,7 @@ div.dwlvNd {
|
|||
displayName: "Twitter",
|
||||
icon: "twitter",
|
||||
hideOnMobile: true,
|
||||
zoomLevel: 1,
|
||||
customCss: ""
|
||||
}
|
||||
};
|
||||
|
@ -62,5 +67,6 @@ export interface CustomFrame {
|
|||
displayName: string;
|
||||
icon: string;
|
||||
hideOnMobile: boolean;
|
||||
zoomLevel: number;
|
||||
customCss: string;
|
||||
}
|
||||
|
|
|
@ -50,10 +50,12 @@ export class CustomFrameView extends ItemView {
|
|||
this.contentEl.empty();
|
||||
this.contentEl.addClass("custom-frames-view");
|
||||
|
||||
let style = `padding: ${this.settings.padding}px;`;
|
||||
if (Platform.isDesktopApp) {
|
||||
this.frame = document.createElement("webview");
|
||||
this.frame.setAttribute("allowpopups", "");
|
||||
this.frame.addEventListener("dom-ready", () => {
|
||||
this.frame.setZoomFactor(this.data.zoomLevel);
|
||||
this.frame.insertCSS(this.data.customCss);
|
||||
});
|
||||
}
|
||||
|
@ -61,9 +63,10 @@ export class CustomFrameView extends ItemView {
|
|||
this.frame = document.createElement("iframe");
|
||||
this.frame.setAttribute("sandbox", "allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation");
|
||||
this.frame.setAttribute("allow", "encrypted-media; fullscreen; oversized-images; picture-in-picture; sync-xhr; geolocation;");
|
||||
style += `transform: scale(${this.data.zoomLevel}); transform-origin: 0 0;`;
|
||||
}
|
||||
this.frame.addClass("custom-frames-frame");
|
||||
this.frame.setAttribute("style", `padding: ${this.settings.padding}px`);
|
||||
this.frame.setAttribute("style", style);
|
||||
this.frame.setAttribute("src", this.data.url);
|
||||
this.contentEl.appendChild(this.frame);
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue