feat(mobile): Mobile support.

Author: walkthunder

assets/plugin-styles.txt.css

@@ -187,6 +187,51 @@
     padding-bottom: 96px;
 }
 
+.sidebar-left, .sidebar-right {
+	transition: left 0.2s linear, right 0.2s linear;
+	top: 0;
+	bottom: 0;
+}
+
+.sidebar-left-active .sidebar-left {
+	left: 0 !important;
+}
+
+.sidebar-right-active .sidebar-right {
+	right: 0 !important;
+}
+
+.sidebar-mobile-btns {
+	padding: 5px 10px;
+	display: flex;
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	justify-content: space-between;
+	z-index: 1000;
+}
+
+.sidebar-mobile-btn--left, .sidebar-mobile-btn--right {
+	transition: left 0.2s linear, right 0.2s linear;
+}
+
+.sidebar-mobile-btn--left {
+	position: relative;
+	left: 0;
+}
+
+.sidebar-mobile-btn--right {
+	position: relative;
+	right: 0;
+}
+
+@media (min-width: 750px) {
+	.sidebar-mobile-btns {
+		display: none;
+	}
+}
+
 .published-search-icon {
     position: absolute;
     color: var(--text-faint);

assets/webpage.txt.js

@@ -433,7 +433,7 @@ function setActiveDocument(url, scrollTo = true, pushHistory = true)
 	let treeItem = undefined;
 	for (let item of treeItems) 
 	{
-		if (item.getAttribute("href") == url)
+		if (item.getAttribute("href") == decodeURI(url))
 		{
 			let parent = item.parentElement.parentElement;
 
@@ -446,7 +446,7 @@ function setActiveDocument(url, scrollTo = true, pushHistory = true)
 				parent = parent.parentElement.parentElement;
 			}
 
-			continue;
+			break;
 		}
 	}
 
@@ -948,22 +948,26 @@ function setupResize(setupOnNode)
 
 		if (window.innerWidth < letHideRightThreshold)
 		{
-			rightSidebar.style.display = "none";
+			rightSidebar.style.position = "absolute";
+			rightSidebar.style.right = "-" + sidebarWidth + "px";
 		}
 		else
 		{
-			rightSidebar.style.display = "";
+			rightSidebar.style.position = "";
+			rightSidebar.style.right = "";
 		}
 
 		let letHideLeftThreshold = lineWidth / 2 + sidebarWidth;
 
 		if (window.innerWidth < letHideLeftThreshold)
 		{
-			leftSidebar.style.display = "none";
+			leftSidebar.style.position = "absolute";
+			leftSidebar.style.left = "-" + sidebarWidth + "px";
 		}
 		else
 		{
-			leftSidebar.style.display = "";
+			leftSidebar.style.position = "";
+			leftSidebar.style.left = "";
 		}
 	}
 
@@ -975,6 +979,44 @@ function setupResize(setupOnNode)
 	updateSidebars();
 }
 
+function sidebarClickHandler(event, btnEl, side, sidebarWidth) {
+	const sides = "leftright";
+	const opposite = sides.replace(side, "");
+	event.preventDefault();
+	event.stopImmediatePropagation();
+
+	let containerEl = document.querySelector(".webpage-container");
+
+	const width = sidebarWidth;
+	if (containerEl.classList.contains(`sidebar-${side}-active`)) {
+		containerEl.classList.remove(`sidebar-${side}-active`);
+		btnEl.style[side] = "";
+	} else {
+		containerEl.classList.add(`sidebar-${side}-active`);
+		btnEl.style[side] = `${width}px`;
+
+		if (containerEl.classList.contains(`sidebar-${opposite}-active`)) {
+			containerEl.classList.remove(`sidebar-${opposite}-active`);
+			document.querySelector(`.sidebar-mobile-btn--${opposite}`).style[opposite] = "";
+		}
+	}
+}
+
+function setupMobileSidebar(setupOnNode)
+{
+	if (setupOnNode != document) return;
+
+	let sidebarBtns = document.querySelector(".sidebar-mobile-btns");
+
+	let leftBtn = sidebarBtns.querySelector(".sidebar-mobile-btn--left");
+	let rightBtn = sidebarBtns.querySelector(".sidebar-mobile-btn--right");
+	let sidebarWidth = document.querySelector(".sidebar-left").getBoundingClientRect().width;
+
+	leftBtn.addEventListener("click", (e) => sidebarClickHandler(e, leftBtn, "left", sidebarWidth));
+	rightBtn.addEventListener("click", (e) => sidebarClickHandler(e, rightBtn, "right", sidebarWidth));
+}
+
+
 function setupRootPath(fromDocument)
 {
 	let basePath = fromDocument.querySelector("#root-path").getAttribute("root-path");
@@ -996,6 +1038,7 @@ function initializePage(setupOnNode)
 	setupCodeblocks(setupOnNode);
 	setupLinks(setupOnNode);
 	setupResize(setupOnNode);
+	setupMobileSidebar(setupOnNode);
 
 	setupOnNode.querySelectorAll("*").forEach(function(element)
 	{

src/export-settings.ts

@@ -20,6 +20,7 @@ export interface ExportSettingsData
 	// Export Options
 	dataviewBlockWaitTime: number;
 	showWarningsInExportLog: boolean;
+	incrementalExport: boolean;
 
 	// Page Features
 	addDarkModeToggle: boolean;
@@ -67,6 +68,7 @@ export const DEFAULT_SETTINGS: ExportSettingsData =
 	// Export Options
 	dataviewBlockWaitTime: 700,
 	showWarningsInExportLog: true,
+	incrementalExport: false,
 
 	// Page Features
 	addDarkModeToggle: true,

src/html-generation/html-generator.ts

@@ -5,7 +5,7 @@ import { MarkdownRenderer } from "./markdown-renderer";
 import { AssetHandler } from "./asset-handler";
 import { ExportFile } from "./export-file";
 import { Downloadable } from "src/utils/downloadable";
-import { TFile } from "obsidian";
+import { TFile, setIcon } from "obsidian";
 import { log } from "../moreOnLog";
 import { StatsView } from "src/statsView";
 import InvioPlugin from "src/main";
@@ -61,6 +61,7 @@ export class HTMLGenerator {
 		let usingDocument = file.document;
 
 		let sidebars = this.generateSideBars(file.contentElement, file);
+		this.generateSideBarBtns(file, sidebars);
 		let rightSidebar = sidebars.right;
 		let leftSidebar = sidebars.left;
 		usingDocument.body.appendChild(sidebars.container);
@@ -201,11 +202,10 @@ export class HTMLGenerator {
 
 		// make sure the page scales correctly at different widths
 		file.sizerElement.style.paddingBottom = "";
-		file.sizerElement.style.paddingBottom = "32px";
-		file.sizerElement.style.padding = "var(--file-margins)";
 		file.sizerElement.style.paddingTop = "var(--file-margins)";
 		file.sizerElement.style.paddingLeft = "var(--file-margins)";
 		file.sizerElement.style.paddingRight = "var(--file-margins)";
+		file.sizerElement.style.paddingBottom = "50vh";
 		file.sizerElement.style.width = "100%";
 		file.sizerElement.style.position = "absolute";
 
@@ -268,6 +268,7 @@ export class HTMLGenerator {
 
 		/*
 		- div.webpage-container
+			- div.sidebar-mobile-btns
 
 			- div.sidebar-left
 				- div.sidebar-content
@@ -315,6 +316,33 @@ export class HTMLGenerator {
 		return { container: pageContainer, left: leftContent, leftScroll: leftSidebarScroll, right: rightContent, rightScroll: rightSidebarScroll, center: documentContainer };
 	}
 
+	private static generateSideBarBtns(file: ExportFile, {left, right, container}: {left: HTMLElement, right: HTMLElement, container: HTMLElement}): {leftBtn: HTMLElement, rightBtn: HTMLElement, mobileSideBarBtns: HTMLElement}
+	{
+		const docEl = file.document;
+		/*
+		- div.sidebar-mobile-btns
+			- a.sidebar-mobile-btn--left
+			- a.sidebar-mobile-btn--right
+		*/
+
+		let mobileSideBarBtns = docEl.createElement("div");
+		const leftBtn = docEl.createElement("a");
+		const rightBtn = docEl.createElement("a");
+
+		mobileSideBarBtns.setAttribute("class", "sidebar-mobile-btns");
+		leftBtn.setAttribute("class", "sidebar-mobile-btn--left");
+		rightBtn.setAttribute("class", "sidebar-mobile-btn--right");
+
+		setIcon(leftBtn, "sidebar-left");
+		setIcon(rightBtn, "sidebar-right");
+
+		mobileSideBarBtns.appendChild(leftBtn);
+		mobileSideBarBtns.appendChild(rightBtn);
+		container.appendChild(mobileSideBarBtns);
+
+		return {leftBtn, rightBtn, mobileSideBarBtns};
+	}
+
 	private static getRelativePaths(file: ExportFile): { mediaPath: Path, jsPath: Path, cssPath: Path, rootPath: Path } {
 		let rootPath = file.pathToRoot;
 		let imagePath = AssetHandler.mediaFolderName.makeUnixStyle();