diff --git a/elements/multiple-choice-test/multiple-choice-test.ts b/elements/multiple-choice-test/multiple-choice-test.ts index 4a6c95c..94bfa49 100644 --- a/elements/multiple-choice-test/multiple-choice-test.ts +++ b/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 } diff --git a/elements/status-messages/status-messages.scarlet b/elements/status-messages/status-messages.scarlet new file mode 100644 index 0000000..652580d --- /dev/null +++ b/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%) \ No newline at end of file diff --git a/elements/status-messages/status-messages.ts b/elements/status-messages/status-messages.ts new file mode 100644 index 0000000..73ed5a1 --- /dev/null +++ b/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) + } +} \ No newline at end of file diff --git a/layout/layout.pixy b/layout/layout.pixy index 225d99f..be3f93e 100644 --- a/layout/layout.pixy +++ b/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 diff --git a/scripts/main.ts b/scripts/main.ts index 7c4bbde..c24a640 100644 --- a/scripts/main.ts +++ b/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([ ["app-view", AppView], ["main-menu", MainMenu], ["kanji-view", KanjiView], + ["status-messages", StatusMessages], ["multiple-choice-test", MultipleChoiceTest] ])