Add expand/collapse details button

Author: brianrourkeboll

docs/_template.html

@@ -22,6 +22,7 @@
     <script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
     <link href="{{root}}{{fsdocs-favicon-src}}" rel="icon" sizes="32x32" type="image/png"/>
     <script type="application/javascript" src="{{root}}content/fsdocs-theme-set-dark.js"></script>
+    <script type="application/javascript" src="{{root}}content/fsdocs-details-set-expanded.js"></script>
     <link href="{{root}}content/fsdocs-default.css" rel="stylesheet" type="text/css"/>
     <link href="{{root}}content/fsdocs-theme.css" rel="stylesheet" type="text/css"/>
     {{fsdocs-head-extra}}
@@ -93,6 +94,7 @@
 </dialog>
 <script type="module" src="{{root}}content/fsdocs-tips.js"></script>
 <script type="module" src="{{root}}content/fsdocs-theme-toggle.js"></script>
+<script type="module" src="{{root}}content/fsdocs-details-toggle.js"></script>
 <script type="module" src="{{root}}content/fsdocs-theme.js"></script>
 <script type="module" src="{{root}}content/fsdocs-search.js"></script>
 {{fsdocs-body-extra}}

docs/content/fsdocs-default.css

@@ -1000,6 +1000,13 @@ span[onmouseout] {
     margin-top: 0;
 }
 
+.fsdocs-description-heading {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: flex-start;
+}
+
 .fsdocs-xmldoc {
     & pre {
         overflow-x: auto;

docs/content/fsdocs-details-set-expanded.js

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

docs/content/fsdocs-details-toggle.js

@@ -0,0 +1,50 @@
+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;
+            this.render();
+        });
+    }
+
+    static styles = css`
+      :host {
+        cursor: pointer;
+        transform: translateY(3px);
+      }
+    `;
+
+    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);

src/FSharp.Formatting.ApiDocs/GenerateHtml.fs

@@ -109,7 +109,9 @@ type HtmlRender(model: ApiDocModel, ?menuTemplateFolder: string) =
                   thead [] [
                       tr [] [
                           td [ Class "fsdocs-member-list-header" ] [ !!tableHeader ]
-                          td [ Class "fsdocs-member-list-header" ] [ !! "Description" ]
+                          td [ Class "fsdocs-member-list-header" ] [
+                              div [ Class "fsdocs-description-heading" ] [ !! "Description"; fsdocsDetailsToggle [] ]
+                          ]
                       ]
                   ]
                   tbody [] [

src/FSharp.Formatting.Common/HtmlModel.fs

@@ -750,3 +750,6 @@ module internal Html =
     /// Web component from https://iconify.design/docs/
     let iconifyIcon (props: HtmlProperties list) =
         HtmlElement.CustomElement("iconify-icon", props, [])
+
+    let fsdocsDetailsToggle (props: HtmlProperties list) =
+        HtmlElement.CustomElement("fsdocs-details-toggle", props, [])