chore: save generation result before manual editing for easier port after experimentation

Author: MangelMaxime

rework-prototype/content/fsdocs-default.css

@@ -0,0 +1,9 @@
+const expandDetails = !!JSON.parse(localStorage.getItem('details-expanded'));
+
+addEventListener('load', _ => {
+    if (expandDetails) {
+        for (const details of document.getElementsByTagName('details')) {
+            details.setAttribute('open', 'true');
+        }
+    }
+});

rework-prototype/content/fsdocs-details-set-expanded.js

@@ -0,0 +1,46 @@
+import { LitElement, html, css } from 'https://cdn.jsdelivr.net/gh/lit/dist@3/core/lit-core.min.js';
+
+const detailsExpanded = !!JSON.parse(localStorage.getItem('details-expanded'));
+
+export class DetailsToggle extends LitElement {
+    static properties = {
+        _detailsExpanded: { state: true, type: Boolean },
+    };
+
+    constructor() {
+        super();
+        this._detailsExpanded = detailsExpanded;
+        document.addEventListener('detailstoggled', e => this._detailsExpanded = !!e?.detail?.expanding);
+    }
+
+    static styles = css`
+      :host {
+        cursor: pointer;
+      }
+    `;
+
+    toggleDetails() {
+        this._detailsExpanded = !this._detailsExpanded;
+        localStorage.setItem('details-expanded', JSON.stringify(this._detailsExpanded));
+        if (this._detailsExpanded) {
+            for (const details of document.getElementsByTagName('details')) {
+                details.setAttribute('open', 'true');
+            }
+        } else {
+            for (const details of document.getElementsByTagName('details')) {
+                details.removeAttribute('open');
+            }
+        }
+        document.dispatchEvent(new CustomEvent('detailstoggled', { detail: { expanding: this._detailsExpanded } }));
+    }
+
+    render() {
+        const icon = this._detailsExpanded ? 'carbon:collapse-categories' : 'carbon:expand-categories';
+        const title = this._detailsExpanded ? 'Collapse details' : 'Expand details';
+        return html`
+            <iconify-icon width="24" height="24" icon="${icon}" title="${title}" style="color:var(--header-link-color)" @click=${this.toggleDetails}></iconify-icon>
+        `;
+    }
+}
+
+customElements.define('fsdocs-details-toggle', DetailsToggle);

rework-prototype/content/fsdocs-details-toggle.js

@@ -0,0 +1,126 @@
+import Fuse from "https://esm.sh/[email protected]";
+
+const searchBtn = document.querySelector("#search-btn");
+
+function hideSearchBtn() {
+    // Hide search icon if we can't search in the first place.
+    searchBtn.style.display = 'none';
+}
+
+function debounce(mainFunction, delay) {
+    // Declare a variable called 'timer' to store the timer ID
+    let timer;
+
+    // Return an anonymous function that takes in any number of arguments
+    return function (...args) {
+        // Clear the previous timer to prevent the execution of 'mainFunction'
+        clearTimeout(timer);
+
+        // Set a new timer that will execute 'mainFunction' after the specified delay
+        timer = setTimeout(() => {
+            mainFunction(...args);
+        }, delay);
+    };
+}
+
+const root = document.documentElement.getAttribute("data-root");
+if (root && searchBtn) {
+    let fuse = null;
+    const searchIndexUrl = `${root}/index.json`;
+    fetch(searchIndexUrl, {})
+        .then(response => response.json())
+        .then(index => {
+            fuse = new Fuse(index, {
+                includeScore: true,
+                keys: ['uri', 'title', 'content', 'headings'],
+                includeMatches: true,
+                limit: 20,
+                ignoreLocation: true,
+                threshold: 0.6,
+                minMatchCharLength: 2,
+                ignoreFieldNorm: true,
+                shouldSort: true
+            });
+        })
+        .catch(() => {
+            hideSearchBtn();
+        })
+
+    const searchDialog = document.querySelector("dialog");
+    const empty = document.querySelector("dialog .empty");
+    const resultsElement = document.querySelector("dialog ul");
+    const searchBox = document.querySelector("dialog input[type=search]");
+
+    searchBtn.addEventListener("click", () => {
+        searchDialog.showModal();
+    })
+
+    searchDialog.addEventListener("click", ev => {
+        if (ev.target.tagName === "DIALOG") {
+            searchBox.value = '';
+            searchDialog.close()
+        }
+    })
+
+    function searchAux(searchTerm) {
+        if (!fuse) return;
+
+        const results = fuse.search(searchTerm);
+        if (results.length === 0) {
+            clearResults();
+            empty.textContent = "No results were found";
+        } else {
+            if (location.hostname === 'localhost'){
+                console.table(results);
+            }
+
+            empty.style.display = 'none';
+            const newResultNodes =
+                results
+                    .map(result => {
+                        const item = result.item;
+                        const li = document.createElement("li");
+                        const a = document.createElement("a");
+                        a.setAttribute("href", item.uri);
+                        const icon = document.createElement("iconify-icon");
+                        icon.setAttribute("width", "24");
+                        icon.setAttribute("height", "24");
+                        icon.setAttribute("icon", item.type === "content" ? "iconoir:page" : "bxs:file-doc")
+                        a.append(icon, item.title);
+                        li.appendChild(a);
+                        return li;
+                    });
+            resultsElement.replaceChildren(...newResultNodes);
+        }
+    }
+
+    const search = debounce(searchAux, 250);
+
+    function clearResults() {
+        empty.style.display = 'block';
+        resultsElement.replaceChildren();
+    }
+
+    searchBox.addEventListener('keyup', ev => {
+        ev.stopPropagation();
+        const searchTerm = ev.target.value;
+        if (!searchTerm) {
+            empty.textContent = "Type something to start searching.";
+            clearResults();
+        } else {
+            search(searchTerm);
+        }
+    });
+
+    window.addEventListener('keyup', ev => {
+        if (ev.key === 'Escape' && searchDialog.open) {
+            searchDialog.close();
+        }
+
+        if (ev.key === '/' && !searchDialog.open) {
+            searchDialog.showModal();
+        }
+    })
+} else {
+    hideSearchBtn();
+}

rework-prototype/content/fsdocs-search.js

@@ -0,0 +1,5 @@
+const prefersDark = window.matchMedia("@media (prefers-color-scheme: dark)").matches;
+let currentTheme = localStorage.getItem('theme') ?? (prefersDark ? 'dark' : 'light');
+if (currentTheme === 'dark') {
+    window.document.documentElement.setAttribute("data-theme", 'dark');
+}

rework-prototype/content/fsdocs-theme-set-dark.js

@@ -0,0 +1,38 @@
+import {LitElement, html, css} from 'https://cdn.jsdelivr.net/gh/lit/dist@3/core/lit-core.min.js';
+
+const prefersDark = window.matchMedia("@media (prefers-color-scheme: dark)").matches;
+let currentTheme = localStorage.getItem('theme') ?? (prefersDark ? 'dark' : 'light');
+
+export class ThemeToggle extends LitElement {
+    static properties = {
+        _theme: {state: true, type: String},
+    };
+
+    constructor() {
+        super();
+        this._theme = currentTheme;
+    }
+
+    static styles = css`
+      :host {
+        cursor: pointer;
+        box-sizing: border-box;
+        transform: translateY(3px);
+      }
+    `;
+
+    changeTheme() {
+        this._theme = this._theme === 'light' ? 'dark' : 'light';
+        localStorage.setItem('theme', this._theme);
+        window.document.documentElement.setAttribute("data-theme", this._theme);
+    }
+
+    render() {
+        const icon = this._theme === 'light' ? 'basil:moon-solid' : 'basil:sun-solid';
+        return html`
+            <iconify-icon width="30" height="30" icon="${icon}" style="color:var(--header-link-color)" @click=${this.changeTheme}></iconify-icon>
+        `;
+    }
+}
+
+customElements.define('fsdocs-theme-toggle', ThemeToggle);

rework-prototype/content/fsdocs-theme-toggle.js

@@ -0,0 +1 @@
+/* Override any variables here */

rework-prototype/content/fsdocs-theme.css

@@ -0,0 +1,35 @@
+// Automatically scroll to the active aside menu item.
+const mainMenu = document.getElementById('fsdocs-main-menu');
+function scrollToActiveItem(activeItem) {
+    const halfMainMenuHeight = mainMenu.offsetHeight / 2
+    if(activeItem.offsetTop > halfMainMenuHeight){
+        mainMenu.scrollTop = (activeItem.offsetTop - halfMainMenuHeight) - (activeItem.offsetHeight / 2);
+    }
+}
+
+const activeItem = document.querySelector("aside .nav-item.active");
+if (activeItem && mainMenu) {
+    scrollToActiveItem(activeItem);
+}
+
+function scrollToAndExpandSelectedMember() {
+    if (location.hash) {
+        const details = document.querySelector(`tr > td.fsdocs-member-usage:has(a[href='${location.hash}']) ~ td.fsdocs-member-xmldoc > details`);
+        details?.setAttribute('open', 'true');
+        const header = document.querySelector(`a[href='${location.hash}']`);
+        header?.scrollIntoView({ behavior: 'instant'});
+    }
+}
+
+scrollToAndExpandSelectedMember();
+addEventListener('hashchange', scrollToAndExpandSelectedMember);
+
+if(location.pathname.startsWith('/reference/')) {
+    // Scroll to API Reference header
+    const navHeaders = document.querySelectorAll(".nav-header");
+    for (const navHeader of navHeaders) {
+        if (navHeader.textContent && navHeader.textContent.trim() === 'API Reference') {
+            scrollToActiveItem(navHeader);
+        }
+    }
+}

rework-prototype/content/fsdocs-theme.js

@@ -0,0 +1,59 @@
+let currentTip = null;
+let currentTipElement = null;
+
+function hideTip(evt, name, unique) {
+    const el = document.getElementById(name);
+    el.style.display = "none";
+    currentTip = null;
+}
+
+function hideUsingEsc(e) {
+    hideTip(e, currentTipElement, currentTip);
+}
+
+function showTip(evt, name, unique, owner) {
+    document.onkeydown = hideUsingEsc;
+    if (currentTip === unique) return;
+    currentTip = unique;
+    currentTipElement = name;
+
+    const offset = 20;
+    let x = evt.clientX;
+    let y = evt.clientY + offset;
+
+    const el = document.getElementById(name);
+    el.style.position = "absolute";
+    el.style.display = "block";
+    el.style.left = `${x}px`;
+    el.style.top = `${y}px`;
+    const maxWidth = document.documentElement.clientWidth - x - 16;
+    el.style.maxWidth = `${maxWidth}px`;
+
+    const rect =  el.getBoundingClientRect();
+    // Move tooltip if it is out of sight
+    if(rect.bottom > window.innerHeight) {
+        y = y - el.clientHeight - offset;
+        el.style.top = `${y}px`;
+    }
+
+    if (rect.right > window.innerWidth) {
+        x = y - el.clientWidth - offset;
+        el.style.left = `${x}px`;
+        const maxWidth = document.documentElement.clientWidth - x - 16;
+        el.style.maxWidth = `${maxWidth}px`;
+    }
+}
+
+function Clipboard_CopyTo(value) {
+    const tempInput = document.createElement("input");
+    tempInput.value = value;
+    document.body.appendChild(tempInput);
+    tempInput.select();
+    document.execCommand("copy");
+    document.body.removeChild(tempInput);
+}
+
+window.showTip = showTip;
+window.hideTip = hideTip;
+// Used by API documentation
+window.Clipboard_CopyTo = Clipboard_CopyTo;