Added status messages

elements/multiple-choice-test/multiple-choice-test.ts

@@ -5,6 +5,7 @@ import State from "scripts/State"
 import randomItem from "scripts/randomItem"
 import copyToClipboard from "scripts/copyToClipboard"
 import cloneTemplate from "scripts/cloneTemplate"
+import StatusMessages from "../status-messages/status-messages"
 
 export default class MultipleChoiceTest extends HTMLElement {
 	appView: AppView
@@ -14,6 +15,7 @@ export default class MultipleChoiceTest extends HTMLElement {
 	question: HTMLDivElement
 	answers: HTMLButtonElement[]
 	touchController: TouchController
+	statusMessages: StatusMessages
 
 	constructor(questions: string[]) {
 		super()
@@ -22,6 +24,7 @@ export default class MultipleChoiceTest extends HTMLElement {
 
 	async connectedCallback() {
 		this.appView = document.getElementsByTagName("app-view")[0] as AppView
+		this.statusMessages = document.getElementsByTagName("status-messages")[0] as StatusMessages
 
 		this.initDOM()
 		this.bindEventListeners()
@@ -66,7 +69,7 @@ export default class MultipleChoiceTest extends HTMLElement {
 	onQuestionClicked(e: MouseEvent) {
 		if(e.target === this.kanjiView.textElement) {
 			copyToClipboard(this.kanjiView.kanji)
-			alert(`Copied ${this.kanjiView.kanji}!`)
+			this.statusMessages.post(`Copied ${this.kanjiView.kanji}`)
 			return
 		}
 

elements/status-messages/status-messages.scarlet

@@ -0,0 +1,29 @@
+status-messages
+	vertical
+	width 100%
+	padding 0.5rem
+	position absolute
+	left 0
+	top 0
+	pointer-events none
+	z-index 1
+
+.status-message
+	opacity 0
+	transform translateY(-30%)
+	animation message-appear 1s forwards ease
+	color white
+	background hsl(216, 68%, 42%)
+	border-radius ui-element-border-radius
+	default-transition
+	text-align center
+	padding 0.5rem
+	margin-bottom 0.25rem
+
+animation message-appear
+	50%, 75%
+		opacity 1
+		transform translateY(0)
+	100%
+		opacity 0
+		transform translateY(-30%)

elements/status-messages/status-messages.ts

@@ -0,0 +1,10 @@
+export default class StatusMessages extends HTMLElement {
+	post(text: string) {
+		let message = document.createElement("div")
+		message.classList.add("status-message")
+		message.innerText = text
+		this.appendChild(message)
+
+		setTimeout(() => this.removeChild(message), 1000)
+	}
+}

layout/layout.pixy

@@ -11,6 +11,7 @@ component Layout(ctx *aero.Context)
 			meta(name="theme-color", content=ctx.App.Config.Manifest.ThemeColor)
 		body
 			app-view(loading="true")
+			status-messages
 
 			//- Templates
 			template#multiple-choice-test-template

scripts/main.ts

@@ -3,7 +3,7 @@ import KanjiView from "elements/kanji-view/kanji-view"
 import MultipleChoiceTest from "elements/multiple-choice-test/multiple-choice-test"
 import MainMenu from "elements/main-menu/main-menu"
 import ServiceWorkerManager from "./ServiceWorkerManager"
-import TouchController from "./TouchController"
+import StatusMessages from "elements/status-messages/status-messages"
 
 // Error message if browser is too old
 if(!("customElements" in window)) {
@@ -15,6 +15,7 @@ const elements = new Map<string, Function>([
 	["app-view", AppView],
 	["main-menu", MainMenu],
 	["kanji-view", KanjiView],
+	["status-messages", StatusMessages],
 	["multiple-choice-test", MultipleChoiceTest]
 ])