From 2799f0f2cc75ca057424a13d7c007e42af1c38c8 Mon Sep 17 00:00:00 2001
From: DarkWiiPlayer <darkwiiplayer@hotmail.com>
Date: Thu, 9 Jun 2022 13:46:42 +0200
Subject: [PATCH] Add scroll-to-top button to pages

---
 index.html          |  4 ++++
 page/debounce.html  |  4 ++++
 page/element.html   |  4 ++++
 page/listener.html  |  4 ++++
 page/scrollToTop.js | 57 +++++++++++++++++++++++++++++++++++++++++++++
 page/skooma.html    |  4 ++++
 6 files changed, 77 insertions(+)
 create mode 100644 page/scrollToTop.js

diff --git a/index.html b/index.html
index 22f7475..a7b5366 100644
--- a/index.html
+++ b/index.html
@@ -1,6 +1,10 @@
 <link rel="stylesheet" href="page/style.css">
 
 <script type="module" src="page/codeblock.js"></script>
+<script type="module" src="page/scrollToTop.js"></script>
+
+<scroll-to-top>
+</scroll-to-top>
 
 <h1>DarkWiiPlayer/JS</h1>
 <p>A JavaScript <em>micro-framework</em> to make front-end <em>easier</em></p>
diff --git a/page/debounce.html b/page/debounce.html
index 40af18a..5b3beda 100644
--- a/page/debounce.html
+++ b/page/debounce.html
@@ -2,6 +2,10 @@
 
 <script type="module" src="codeblock.js"></script>
 <script type="module" src="filesize.js"></script>
+<script type="module" src="scrollToTop.js"></script>
+
+<scroll-to-top>
+</scroll-to-top>
 
 <h1 class="js module">debounce.js</h1>
 
diff --git a/page/element.html b/page/element.html
index 7f6af51..b951985 100644
--- a/page/element.html
+++ b/page/element.html
@@ -2,6 +2,10 @@
 
 <script type="module" src="codeblock.js"></script>
 <script type="module" src="filesize.js"></script>
+<script type="module" src="scrollToTop.js"></script>
+
+<scroll-to-top>
+</scroll-to-top>
 
 <h1 class="js module">element.js</h1>
 
diff --git a/page/listener.html b/page/listener.html
index 954dd69..547db45 100644
--- a/page/listener.html
+++ b/page/listener.html
@@ -2,6 +2,10 @@
 
 <script type="module" src="codeblock.js"></script>
 <script type="module" src="filesize.js"></script>
+<script type="module" src="scrollToTop.js"></script>
+
+<scroll-to-top>
+</scroll-to-top>
 
 <h1 class="js module">listener.js</h1>
 
diff --git a/page/scrollToTop.js b/page/scrollToTop.js
new file mode 100644
index 0000000..f2a8aad
--- /dev/null
+++ b/page/scrollToTop.js
@@ -0,0 +1,57 @@
+import element from "/element.js"
+import {css, variable as v} from "../css.js"
+
+element(class ScrollToTop extends HTMLElement {
+	constructor() {
+		super()
+		this.append(
+			html.a("↑")
+		)
+		this.addEventListener("click", event => {
+			document.body.scrollTo({top: 0, behavior: "smooth"})
+		})
+	}
+})
+
+let radius = .6
+
+const setTop = () => {
+	if (document.body.scrollTop > 20) {
+		document.body.classList.remove("top")
+	} else {
+		document.body.classList.add("top")
+	}
+}
+
+window.addEventListener("scroll", setTop, {passive: true})
+setTop()
+
+document.head.append(html.style(css({
+	"scroll-to-top": {
+		background: v`color-hl`,
+		color: 'white',
+		width: CSS.em(radius*2),
+		height: CSS.em(radius*2),
+		borderRadius: CSS.em(radius),
+		display: 'flex',
+		justifyContent: "center",
+		alignItems: "center",
+		fontSize: CSS.em(3),
+		boxShadow: [
+			[...[.1, .1, .2].map(CSS.em), "#0004"],
+		],
+		position: 'fixed',
+		right: CSS.em(radius * 2),
+		bottom: CSS.em(radius * 2),
+		transition: [
+			["all", CSS.s(.3)],
+		],
+		cursor: "pointer",
+	},
+	$top: {
+		"scroll-to-top": {
+			opacity: 0,
+			transform: `translate(0px, ${CSS.em(radius * 2)})`,
+		}
+	}
+})))
diff --git a/page/skooma.html b/page/skooma.html
index 816d466..03a59fc 100644
--- a/page/skooma.html
+++ b/page/skooma.html
@@ -2,6 +2,10 @@
 
 <script type="module" src="codeblock.js"></script>
 <script type="module" src="filesize.js"></script>
+<script type="module" src="scrollToTop.js"></script>
+
+<scroll-to-top>
+</scroll-to-top>
 
 <h1>Skooma.js</h1>