Merge branch 'feat/close-button-fn-modal' into master

mbrt-yeah · Aug 13, 2021 · 3773b39 · 3773b39
2 parents 2e5dcd8 + 3e4dfab
commit 3773b39
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 7 deletions.
diff --git 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 }}
diff --git a/static/assets/css/styles.css b/static/assets/css/styles.css
@@ -515,6 +515,16 @@ table td {
     right: 0;
 }
 
+.fn .close-button {
+    color: #fff;
+    cursor: pointer;
+    height: 24px;
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 24px;
+}
+
 @media screen and (max-width: 1103px) {
     .fn {
         margin-top: 0 !important;
@@ -533,6 +543,10 @@ table td {
         text-indent: -9px;
     }
 
+    .fn .close-button {
+        display: none;
+    }
+
     .fn sup {
         font-weight: 800;
     }

diff --git 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 = {
@@ -39,6 +40,34 @@ UWE_UWE.FOOTNOTES = (() => {
             });
         }
 
+        for (const fn of cache.fns) {
+            const fnCloseBtn = fn.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) {
             if ( isFnDisplayedAsSidenote() ) {
                 return;
@@ -50,8 +79,7 @@ UWE_UWE.FOOTNOTES = (() => {
                 return;
             }
 
-            cache.fnFocused.style.display = "none";
-            cache.fnFocused = undefined;
+            hideFootnote();
         };
 
         window.addEventListener("resize", (e) => {
@@ -109,6 +137,11 @@ UWE_UWE.FOOTNOTES = (() => {
         }
     }
 
+    function hideFootnote() {
+        cache.fnFocused.style.display = "none";
+        cache.fnFocused = undefined;
+    }
+
     function displayFootnote(fnId) {
         if (!fnId) {
             return;
@@ -132,7 +165,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", "") );