Ellpeck/ObsidianCustomFrames
1
0
Fork 0
mirror of https://github.com/Ellpeck/ObsidianCustomFrames.git synced 2024-05-18 00:18:44 +02:00
Code Issues Projects Releases Wiki Activity

added a way to change a site's zoom level

Browse source 
Closes #13
This commit is contained in:
Ell 2022-04-02 15:16:01 +02:00
parent 97f122c33b
commit eedac8f048
3 changed files with 22 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/settings-tab.ts
View file

@ -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
});

6
src/settings.ts
View file

@ -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;
}

5
src/view.ts
View file

@ -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);
}