add back-to-top button, fix #113

templates/report.css

@@ -242,3 +242,39 @@ table.data td {
 .r-box[data-horizontal] {
   margin-left: 50%;
 }
+
+#top-button {
+  display: inline-block;
+  background-color: steelblue;
+  border: 0;
+  width: 50px;
+  height: 50px;
+  text-align: center;
+  border-radius: 50%;
+  position: fixed;
+  bottom: 30px;
+  right: 30px;
+  transition: background-color .3s, opacity .5s, visibility .5s;
+  opacity: 0;
+  visibility: hidden;
+  z-index: 1000;
+}
+#top-button::after {
+  content: "⬆";
+  font-weight: normal;
+  font-style: normal;
+  font-size: 2em;
+  line-height: 50px;
+  color: #fff;
+}
+#top-button:hover {
+  cursor: pointer;
+  background-color: #333;
+}
+#top-button:active {
+  background-color: #555;
+}
+#top-button.show {
+  opacity: 1;
+  visibility: visible;
+}

templates/report.js

@@ -1,46 +1,63 @@
 function toggleLayout() {
-  const layout = document.querySelector('#panel input[name="layout"]:checked').value
+  const layout = document.querySelector('#panel input[name="layout"]:checked').value;
   if (layout === 'vertical') {
-    document.body.removeAttribute('data-horizontal')
-    const lboxes = document.querySelectorAll('.l-box')
+    document.body.removeAttribute('data-horizontal');
+    const lboxes = document.querySelectorAll('.l-box');
     for (const box of lboxes) {
-      box.removeAttribute('data-horizontal')
+      box.removeAttribute('data-horizontal');
     }
-    const rboxes = document.querySelectorAll('.r-box')
+    const rboxes = document.querySelectorAll('.r-box');
     for (const box of rboxes) {
-      box.removeAttribute('data-horizontal')
+      box.removeAttribute('data-horizontal');
     }
   } else {
-    document.body.setAttribute('data-horizontal', '')
-    const lboxes = document.querySelectorAll('.l-box')
+    document.body.setAttribute('data-horizontal', '');
+    const lboxes = document.querySelectorAll('.l-box');
     for (const box of lboxes) {
-      box.setAttribute('data-horizontal', '')
+      box.setAttribute('data-horizontal', '');
     }
-    const rboxes = document.querySelectorAll('.r-box')
+    const rboxes = document.querySelectorAll('.r-box');
     for (const box of rboxes) {
-      box.setAttribute('data-horizontal', '')
+      box.setAttribute('data-horizontal', '');
     }
   }
 }
 
 function toggleExpand() {
-  const expand = document.querySelector('#panel input[name="expand"]:checked').value
-  const entries = document.querySelectorAll('details.collapse.entry')
+  const expand = document.querySelector('#panel input[name="expand"]:checked').value;
+  const entries = document.querySelectorAll('details.collapse.entry');
   for (const entry of entries) {
     switch (expand) {
       case 'all':
-        entry.open = true
-        break
+        entry.open = true;
+        break;
       case 'diff-only':
-        entry.open = entry.hasAttribute('data-mark-red')
-        break
+        entry.open = entry.hasAttribute('data-mark-red');
+        break;
       case 'none':
-        entry.open = false
-        break
+        entry.open = false;
+        break;
     }
   }
 }
 
+function goToTop() {
+  document.body.scrollTop = 0;
+  document.documentElement.scrollTop = 0;
+}
+
+function scrollHandler() {
+  const topButton = document.querySelector('#top-button');
+  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+    topButton.classList.add('show');
+  } else {
+    topButton.classList.remove('show');
+  }
+}
+
+document.addEventListener('scroll', scrollHandler);
+
 document.addEventListener('DOMContentLoaded', () => {
-  document.querySelectorAll('.latex').forEach(renderMathInElement)
-})
+  scrollHandler();
+  document.querySelectorAll('.latex').forEach(renderMathInElement);
+});

templates/report.tera

@@ -30,6 +30,8 @@
     <a href="https://github.com/Equim-chan/mjai-reviewer" target="_blank" rel="noreferrer noopener">mjai-reviewer</a>
   </p>
 
+  <button id="top-button" onclick="goToTop()" title="Go to top"></button>
+
   <fieldset id="panel">
     <legend>Panel</legend>
     <a class="no-visit" href="" download>💾{{- fluent(key = "panel-save-this-page") -}}</a>