Add introduction popup to file viewer

res/include/script/file_viewer/IntroPopup.js

@@ -0,0 +1,34 @@
+function IntroPopup() {
+	if (localStorage.getItem("viewer_intro_popup_dismissed") === "🍆") {
+		return
+	}
+
+	let btnHome = document.getElementById("button_home")
+
+	this.popup = document.createElement("div")
+	this.popup.classList = "intro_popup"
+	this.moveToElement(btnHome)
+
+	let clone = document.getElementById("intro_popup").content.cloneNode(true)
+	clone.querySelector(".intro_popup_close").addEventListener("click", () => { this.close() })
+	this.popup.append(clone)
+
+	document.getElementById("file_viewer").append(this.popup)
+
+	// Sometimes the layout is not correctly calculated yet when this script
+	// runs. We adjust the values later
+	setTimeout(() => { this.moveToElement(btnHome) }, 100)
+}
+
+IntroPopup.prototype.moveToElement = function (el) {
+	let rect = el.getBoundingClientRect()
+	this.popup.style.top = (rect.top + el.offsetHeight + 20) + "px"
+	this.popup.style.left = (rect.left + (el.clientWidth / 2) - 30) + "px"
+}
+
+IntroPopup.prototype.close = function () {
+	localStorage.setItem("viewer_intro_popup_dismissed", "🍆")
+	this.popup.style.opacity = 0
+
+	setTimeout(() => { this.popup.remove() }, 500)
+}

res/include/script/file_viewer/Viewer.js

@@ -91,6 +91,9 @@ function Viewer(type, viewToken, data) {
 	// Register keyboard shortcuts
 	document.addEventListener("keydown", e => { this.keyboardEvent(e) })
 
+	// Show introduction popup
+	new IntroPopup()
+
 	this.initialized = true
 }
 

res/include/style/layout.css

@@ -275,7 +275,7 @@ h2 {
 	border-bottom: 1px var(--layer_4_color_border) solid;
 }
 h3 {
-	font-size: 1.5em;
+	font-size: 1.6em;
 	font-family: "light", sans-serif;
 	border-bottom: 1px var(--layer_3_color_border) solid;
 }

res/include/style/viewer.css

@@ -304,3 +304,26 @@ table {width: auto !important;}
 	height: 100%;
 	border: none;
 }
+
+.intro_popup {
+	position: absolute;
+	width: 400px;
+	max-width: 80%;
+	height: auto;
+	background-color: var(--layer_4_color);
+	box-shadow: 1px 1px var(--layer_4_shadow) var(--shadow_color);
+	border-radius: 10px;
+	z-index: 50;
+	transition: opacity .4s;
+	transition: left .4s;
+}
+.intro_popup:before {
+	content: "";
+	display: block;
+	position: absolute;
+	left: 20px;
+	top: -15px;
+	border-bottom: 15px solid var(--layer_4_color);
+	border-left: 15px solid transparent;
+	border-right: 15px solid transparent;
+}

res/template/file_viewer.html

@@ -309,6 +309,17 @@
 			</form>
 		</template>
 
+		<template id="intro_popup">
+			<h3>Upload your own files here!</h3>
+			<p>
+				On pixeldrain you can share your files with large or small
+				groups of people. The sky is the limit!
+			</p>
+			<button class="intro_popup_close button_highlight" style="float: right; margin: 0 10px 10px 0;">
+				<i class="icon">check</i> Got it!
+			</button>
+		</template>
+
 		<script src="/res/script/Chart.min.js"></script>
 		<script>
 			'use strict';
@@ -326,6 +337,7 @@
 			{{template `DetailsWindow.js`}}
 			{{template `AbuseReportWindow.js`}}
 			{{template `ListNavigator.js`}}
+			{{template `IntroPopup.js`}}
 			{{template `Viewer.js`}}
 
 			{{template `AbuseViewer.js`}}