From ea38118c276cabee5aa9688ceb0fc1f7f26ddff7 Mon Sep 17 00:00:00 2001
From: Brian Rourke Boll <brianrourkeboll@gmail.com>
Date: Tue, 4 Jun 2024 12:21:44 -0400
Subject: [PATCH] Add expand/collapse details button

---
 docs/_template.html                           |  2 +
 docs/content/fsdocs-default.css               |  7 +++
 docs/content/fsdocs-details-set-expanded.js   |  9 ++++
 docs/content/fsdocs-details-toggle.js         | 50 +++++++++++++++++++
 src/FSharp.Formatting.ApiDocs/GenerateHtml.fs |  4 +-
 src/FSharp.Formatting.Common/HtmlModel.fs     |  3 ++
 6 files changed, 74 insertions(+), 1 deletion(-)
 create mode 100644 docs/content/fsdocs-details-set-expanded.js
 create mode 100644 docs/content/fsdocs-details-toggle.js

diff --git a/docs/_template.html b/docs/_template.html
index 9b6ac0aa3..5a6b9c3ed 100644
--- a/docs/_template.html
+++ b/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}}
diff --git a/docs/content/fsdocs-default.css b/docs/content/fsdocs-default.css
index e2063f56f..210117eb1 100644
--- a/docs/content/fsdocs-default.css
+++ b/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;
diff --git a/docs/content/fsdocs-details-set-expanded.js b/docs/content/fsdocs-details-set-expanded.js
new file mode 100644
index 000000000..f1518cd1e
--- /dev/null
+++ b/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');
+        }
+    }
+});
diff --git a/docs/content/fsdocs-details-toggle.js b/docs/content/fsdocs-details-toggle.js
new file mode 100644
index 000000000..9ef6ab395
--- /dev/null
+++ b/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);
diff --git a/src/FSharp.Formatting.ApiDocs/GenerateHtml.fs b/src/FSharp.Formatting.ApiDocs/GenerateHtml.fs
index 5190acafb..34c5d5e69 100644
--- a/src/FSharp.Formatting.ApiDocs/GenerateHtml.fs
+++ b/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 [] [
diff --git a/src/FSharp.Formatting.Common/HtmlModel.fs b/src/FSharp.Formatting.Common/HtmlModel.fs
index 0ffea8520..3f25c765d 100644
--- a/src/FSharp.Formatting.Common/HtmlModel.fs
+++ b/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, [])