From ea38118c276cabee5aa9688ceb0fc1f7f26ddff7 Mon Sep 17 00:00:00 2001 From: Brian Rourke Boll Date: Tue, 4 Jun 2024 12:21:44 -0400 Subject: [PATCH 1/5] 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 @@ + {{fsdocs-head-extra}} @@ -93,6 +94,7 @@ + {{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` + + `; + } +} + +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, []) From a8947b90ec17692de17ef370f0887cd41c7e6ac1 Mon Sep 17 00:00:00 2001 From: Brian Rourke Boll Date: Tue, 4 Jun 2024 12:43:57 -0400 Subject: [PATCH 2/5] Don't need --- docs/content/fsdocs-details-toggle.js | 1 - 1 file changed, 1 deletion(-) diff --git a/docs/content/fsdocs-details-toggle.js b/docs/content/fsdocs-details-toggle.js index 9ef6ab395..ea7075aaa 100644 --- a/docs/content/fsdocs-details-toggle.js +++ b/docs/content/fsdocs-details-toggle.js @@ -19,7 +19,6 @@ export class DetailsToggle extends LitElement { static styles = css` :host { cursor: pointer; - transform: translateY(3px); } `; From 5cdc107e9fc5d238956feae6da9d6585609e952c Mon Sep 17 00:00:00 2001 From: Brian Rourke Boll Date: Tue, 4 Jun 2024 12:47:11 -0400 Subject: [PATCH 3/5] Don't need --- docs/content/fsdocs-details-toggle.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/docs/content/fsdocs-details-toggle.js b/docs/content/fsdocs-details-toggle.js index ea7075aaa..b8a3f67b5 100644 --- a/docs/content/fsdocs-details-toggle.js +++ b/docs/content/fsdocs-details-toggle.js @@ -10,10 +10,7 @@ export class DetailsToggle extends LitElement { constructor() { super(); this._detailsExpanded = detailsExpanded; - document.addEventListener('detailstoggled', e => { - this._detailsExpanded = !!e?.detail?.expanding; - this.render(); - }); + document.addEventListener('detailstoggled', e => this._detailsExpanded = !!e?.detail?.expanding); } static styles = css` From d038a7495d3b338fccdb2cb64b808c75baceaae1 Mon Sep 17 00:00:00 2001 From: Brian Rourke Boll Date: Wed, 5 Jun 2024 07:35:36 -0400 Subject: [PATCH 4/5] Minimize changes to HTML --- docs/content/fsdocs-default.css | 2 +- src/FSharp.Formatting.ApiDocs/GenerateHtml.fs | 4 +--- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/docs/content/fsdocs-default.css b/docs/content/fsdocs-default.css index 210117eb1..c133ae4e3 100644 --- a/docs/content/fsdocs-default.css +++ b/docs/content/fsdocs-default.css @@ -1000,7 +1000,7 @@ span[onmouseout] { margin-top: 0; } -.fsdocs-description-heading { +.fsdocs-member-list-header { display: flex; flex-direction: row; justify-content: space-between; diff --git a/src/FSharp.Formatting.ApiDocs/GenerateHtml.fs b/src/FSharp.Formatting.ApiDocs/GenerateHtml.fs index 34c5d5e69..48fd4e380 100644 --- a/src/FSharp.Formatting.ApiDocs/GenerateHtml.fs +++ b/src/FSharp.Formatting.ApiDocs/GenerateHtml.fs @@ -109,9 +109,7 @@ type HtmlRender(model: ApiDocModel, ?menuTemplateFolder: string) = thead [] [ tr [] [ td [ Class "fsdocs-member-list-header" ] [ !!tableHeader ] - td [ Class "fsdocs-member-list-header" ] [ - div [ Class "fsdocs-description-heading" ] [ !! "Description"; fsdocsDetailsToggle [] ] - ] + td [ Class "fsdocs-member-list-header" ] [ !! "Description"; fsdocsDetailsToggle [] ] ] ] tbody [] [ From 9d1364f0a9a37270f9e034c168fb71e0137c6e2e Mon Sep 17 00:00:00 2001 From: Brian Rourke Boll Date: Wed, 5 Jun 2024 08:08:38 -0400 Subject: [PATCH 5/5] Add doc comment --- src/FSharp.Formatting.Common/HtmlModel.fs | 1 + 1 file changed, 1 insertion(+) diff --git a/src/FSharp.Formatting.Common/HtmlModel.fs b/src/FSharp.Formatting.Common/HtmlModel.fs index 3f25c765d..17da8ae80 100644 --- a/src/FSharp.Formatting.Common/HtmlModel.fs +++ b/src/FSharp.Formatting.Common/HtmlModel.fs @@ -751,5 +751,6 @@ module internal Html = let iconifyIcon (props: HtmlProperties list) = HtmlElement.CustomElement("iconify-icon", props, []) + /// Toggle button for API doc details. let fsdocsDetailsToggle (props: HtmlProperties list) = HtmlElement.CustomElement("fsdocs-details-toggle", props, [])