From bc4475700f92c4cbad5ed7212acb21e88ea23cc5 Mon Sep 17 00:00:00 2001
From: mbrt-yeah <registrations@mbrt.io>
Date: Fri, 13 Aug 2021 19:27:28 +0200
Subject: [PATCH 1/4] Adds correct styling and contents for fn close button

---
 layouts/shortcodes/fn.html   |  2 +-
 static/assets/css/styles.css | 13 +++++++++++++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/layouts/shortcodes/fn.html b/layouts/shortcodes/fn.html
index 8e6699b..8ca937c 100644
--- a/layouts/shortcodes/fn.html
+++ b/layouts/shortcodes/fn.html
@@ -2,7 +2,7 @@
 {{ $id      := .Get "id" }}
 
 {{ if $content }}
-<aside class="fn sidenote right" id="fn-{{ $id }}"><sup>{{ $id }}</sup> {{ $content }}<button>close</button></aside>
+<aside class="fn sidenote right" id="fn-{{ $id }}"><sup>{{ $id }}</sup> {{ $content }}<button class="close-button" title="Close">🗙</button></aside>
 {{ else }}
 <sup class="fn-ref" id="fn-ref-{{ $id }}"><a href="#fn-{{ $id }}">{{ $id }}</a></sup>
 {{ end }}
\ No newline at end of file
diff --git a/static/assets/css/styles.css b/static/assets/css/styles.css
index b5a6d00..a4004ee 100644
--- a/static/assets/css/styles.css
+++ b/static/assets/css/styles.css
@@ -515,6 +515,15 @@ table td {
     right: 0;
 }
 
+.fn .close-button {
+    color: #fff;
+    height: 24px;
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 24px;
+}
+
 @media screen and (max-width: 1103px) {
     .fn {
         margin-top: 0 !important;
@@ -533,6 +542,10 @@ table td {
         text-indent: -9px;
     }
 
+    .fn .close-button {
+        display: none;
+    }
+
     .fn sup {
         font-weight: 800;
     }

From 1daf4f8bb7fe4b1cb261acf11c3f5a1e4c65fb72 Mon Sep 17 00:00:00 2001
From: mbrt-yeah <registrations@mbrt.io>
Date: Fri, 13 Aug 2021 19:42:09 +0200
Subject: [PATCH 2/4] Adds JS logic for fn close button

---
 static/assets/js/uwe-uwe.js | 42 +++++++++++++++++++++++++++++++------
 1 file changed, 36 insertions(+), 6 deletions(-)

diff --git a/static/assets/js/uwe-uwe.js b/static/assets/js/uwe-uwe.js
index 3e1bf8a..4f8eb55 100644
--- a/static/assets/js/uwe-uwe.js
+++ b/static/assets/js/uwe-uwe.js
@@ -2,9 +2,10 @@ const UWE_UWE = window.UWE_UWE || {};
 
 UWE_UWE.FOOTNOTES = (() => {
     const config = {
-        "fnRefSelector": ".fn-ref",
-        "fnSelector":    ".fn",
-        "vwSidenotes":   1104
+        "fnRefSelector":      ".fn-ref",
+        "fnSelector":         ".fn",
+        "fnCloseBtnSelector": ".close-button",
+        "vwSidenotes":        1104
     };
 
     const cache = {
@@ -37,6 +38,32 @@ UWE_UWE.FOOTNOTES = (() => {
 
                 displayFootnote( e.target.getAttribute("href").slice(1) );
             });
+
+            const fnCloseBtn = fnRef.querySelector(config.fnCloseBtnSelector);
+
+            if (fnCloseBtn === null) {
+                continue;
+            }
+
+            fnCloseBtn.addEventListener("click", function(e) {
+                e.preventDefault();
+
+                if ( isFnDisplayedAsSidenote() ) {
+                    return;
+                }
+
+                const fn = e.target.parentElement;
+
+                if (fn === null) {
+                    return;
+                }
+
+                if (fn.id !== cache.fnFocused.id) {
+                    return;
+                }
+
+                hideFootnote();
+            });
         }
 
         document.onkeydown = function(e) {
@@ -50,8 +77,7 @@ UWE_UWE.FOOTNOTES = (() => {
                 return;
             }
 
-            cache.fnFocused.style.display = "none";
-            cache.fnFocused = undefined;
+            hideFootnote();
         };
 
         window.addEventListener("resize", (e) => {
@@ -109,6 +135,11 @@ UWE_UWE.FOOTNOTES = (() => {
         }
     }
 
+    function hideFootnote() {
+        cache.fnFocused.style.display = "none";
+        cache.fnFocused = undefined;
+    }
+
     function displayFootnote(fnId) {
         if (!fnId) {
             return;
@@ -132,7 +163,6 @@ UWE_UWE.FOOTNOTES = (() => {
         }
 
         const styleFnFinal = window.getComputedStyle(cache.fnFocused, null);
-
         const marginRight = parseInt( styleFnFinal.marginRight.replace("px", "") );
         const marginLeft  = parseInt( styleFnFinal.marginLeft.replace("px", "") );
 

From 2235f5704e5f6a609c91316582cedae8b9f3b184 Mon Sep 17 00:00:00 2001
From: mbrt-yeah <registrations@mbrt.io>
Date: Fri, 13 Aug 2021 20:16:07 +0200
Subject: [PATCH 3/4] Implements correct selection of fn close buttons

---
 static/assets/js/uwe-uwe.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/static/assets/js/uwe-uwe.js b/static/assets/js/uwe-uwe.js
index 4f8eb55..6f91473 100644
--- a/static/assets/js/uwe-uwe.js
+++ b/static/assets/js/uwe-uwe.js
@@ -38,8 +38,10 @@ UWE_UWE.FOOTNOTES = (() => {
 
                 displayFootnote( e.target.getAttribute("href").slice(1) );
             });
+        }
 
-            const fnCloseBtn = fnRef.querySelector(config.fnCloseBtnSelector);
+        for (const fn of cache.fns) {
+            const fnCloseBtn = fn.querySelector(config.fnCloseBtnSelector);
 
             if (fnCloseBtn === null) {
                 continue;

From 3e4dfabe5ce6e836ffcac5a4c3a7d97d91bbd178 Mon Sep 17 00:00:00 2001
From: mbrt-yeah <registrations@mbrt.io>
Date: Fri, 13 Aug 2021 20:16:18 +0200
Subject: [PATCH 4/4] Adds cursor style to close button

---
 static/assets/css/styles.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/static/assets/css/styles.css b/static/assets/css/styles.css
index a4004ee..cb8e676 100644
--- a/static/assets/css/styles.css
+++ b/static/assets/css/styles.css
@@ -517,6 +517,7 @@ table td {
 
 .fn .close-button {
     color: #fff;
+    cursor: pointer;
     height: 24px;
     position: absolute;
     right: 0;