Add back in flash messages

This commit is contained in:
Tristan Daniël Maat 2022-08-01 16:35:28 +01:00
parent 3ba6f08986
commit 49f7360df1
Signed by: tlater
GPG key ID: 49670FD774E43268
5 changed files with 45 additions and 11 deletions

View file

@ -18,10 +18,15 @@
<block name="navigation">
<include src="lib/html/navigation.html"></include>
</block>
<!-- <include src="lib/html/message-flash.html"></include> -->
<include src="lib/html/message-flash.html"></include>
<block name="content"></block>
<block name="footer"></block>
<block name="footer">
<script type="module" src="lib/js/index.ts"></script>
</block>
</body>
</html>

View file

@ -1,11 +1,6 @@
{{#if flash}}
<div
class="alert alert-{{flash.type}} alert-dismissible fade show"
role="alert"
>
{{ flash.message }}
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<div class="notification is-{{flash.type}}">
<button class="delete" aria-label="Close"></button>
<span role="alert"> {{ flash.message }} </span>
</div>
{{/if}}

30
src/lib/js/index.ts Normal file
View file

@ -0,0 +1,30 @@
document.addEventListener("DOMContentLoaded", () => {
let flashButtons = document.querySelectorAll(".notification .delete");
flashButtons.forEach((button) => {
let flash = button.parentNode;
if (flash == null) {
console.error(
"Unreachable because our `querySelector` includes a parent; something went very wrong"
);
return;
}
flash.addEventListener("click", () => {
if (flash == null) {
console.error("Completely unreachable.");
return;
}
if (flash.parentNode == null) {
console.error(
"Notification not placed in DOM; something went very wrong"
);
return;
}
flash.parentNode.removeChild(flash);
});
});
});

View file

@ -1,3 +1,4 @@
import React from "react";
import { createRoot } from "react-dom/client";
import { Provider } from "react-redux";

View file

@ -5,6 +5,9 @@
<block name="content">
<div id="playerUI" class="is-flex-grow-1 is-flex"></div>
<script type="module" src="./music/index.tsx"></script>
</block>
<block name="footer" type="append">
<script type="module" src="music/index.tsx"></script>
</block>
</extends>