From e0037fbff26657118b24aa44ff2b642e21834793 Mon Sep 17 00:00:00 2001
From: Oliver Booth <git@olivr.me>
Date: Sat, 4 May 2024 13:34:04 +0100
Subject: [PATCH] refactor: use bootstrap's collapse functionality

they do it better than me I guess
---
 src/scss/markdown-callouts.scss | 11 -----------
 src/ts/Callout.ts               |  8 ++++++++
 2 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/src/scss/markdown-callouts.scss b/src/scss/markdown-callouts.scss
index 558c608..53e3fb6 100644
--- a/src/scss/markdown-callouts.scss
+++ b/src/scss/markdown-callouts.scss
@@ -46,12 +46,6 @@ $callout-fg-grey: #9e9e9e;
       transition: margin-bottom 500ms;
     }
 
-    .callout-content {
-      opacity: 1;
-      max-height: 500px;
-      transition: opacity 500ms, max-height 500ms;
-    }
-
     &.collapsed {
       .callout-title {
         margin-bottom: 0;
@@ -60,11 +54,6 @@ $callout-fg-grey: #9e9e9e;
       .callout-fold svg {
         transform: rotate(0deg);
       }
-
-      .callout-content {
-        opacity: 0;
-        max-height: 0;
-      }
     }
   }
 
diff --git a/src/ts/Callout.ts b/src/ts/Callout.ts
index 125f034..c29b443 100644
--- a/src/ts/Callout.ts
+++ b/src/ts/Callout.ts
@@ -1,3 +1,5 @@
+declare const bootstrap: any;
+
 class Callout {
     private readonly _callout: HTMLElement;
     private readonly _title: HTMLElement;
@@ -45,6 +47,7 @@ class Callout {
         }
 
         const callout: HTMLElement = this._callout;
+        const content: HTMLElement = this._content;
 
         if (callout === null) {
             console.error("Callout element for ", this, " is null!");
@@ -52,8 +55,13 @@ class Callout {
         }
 
         callout.classList.add("collapsible", "collapsed");
+        content.classList.add("collapse");
+        const bsCollapse = new bootstrap.Collapse(content, {toggle: false});
+
         this._title.addEventListener("click", () => {
             callout.classList.toggle("collapsed");
+
+            bsCollapse.toggle();
         });
 
         this._foldEnabled = true;