diff --git a/src/lib/html/message-flash.html b/src/lib/html/message-flash.html index 956a710..94fa260 100644 --- a/src/lib/html/message-flash.html +++ b/src/lib/html/message-flash.html @@ -1,6 +1,8 @@ -{{#if flash}} -<div class="notification is-{{flash.type}}"> - <button class="delete" aria-label="Close"></button> - <span role="alert"> {{ flash.message }} </span> -</div> -{{/if}} +<span> + {{#if flash}} + <div class="notification is-{{flash.type}}"> + <button class="delete" aria-label="Close"></button> + <span role="alert"> {{ flash.message }} </span> + </div> + {{/if}} +</span> diff --git a/src/lib/js/index.ts b/src/lib/js/index.ts index 5774bb0..5047237 100644 --- a/src/lib/js/index.ts +++ b/src/lib/js/index.ts @@ -4,7 +4,7 @@ document.addEventListener("DOMContentLoaded", () => { flashButtons.forEach((button) => { const flash = button.parentNode; - if (flash == null) { + if (flash === null) { console.error( "Unreachable because our `querySelector` includes a parent; something went very wrong" ); @@ -12,12 +12,7 @@ document.addEventListener("DOMContentLoaded", () => { } flash.addEventListener("click", () => { - if (flash == null) { - console.error("Completely unreachable."); - return; - } - - if (flash.parentNode == null) { + if (flash.parentNode === null) { console.error( "Notification not placed in DOM; something went very wrong" ); @@ -26,6 +21,23 @@ document.addEventListener("DOMContentLoaded", () => { flash.parentNode.removeChild(flash); }); + + // In development, there won't be a web server hooked up to + // this to render the flash message, so we remove it entirely + if (process.env.NODE_ENV === "development") { + if ( + flash.parentNode === null || + flash.parentNode.parentNode === null + ) { + return; + } + + console.warn("Disabling flash message"); + + // Get the containing <span> element + const block = flash.parentNode; + flash.parentNode.parentNode.removeChild(block); + } }); });