Add back in flash messages
This commit is contained in:
parent
3ba6f08986
commit
49f7360df1
|
@ -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>
|
||||
|
|
|
@ -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">×</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
30
src/lib/js/index.ts
Normal 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);
|
||||
});
|
||||
});
|
||||
});
|
|
@ -1,3 +1,4 @@
|
|||
import React from "react";
|
||||
import { createRoot } from "react-dom/client";
|
||||
import { Provider } from "react-redux";
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
Reference in a new issue