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", "") );