add a toast alert when logging in with half moon
example of adding a document dom ready wait and then the script that launches a new toast message
just adapting a php cms using halfmoon as the ui, its quite nice.
a bit bright in non dark mode but otherwise i like it
Scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/Halfmoon/1.1.1/js/halfmoon.min.js" integrity="sha512-8fN/MQrHBCMmkx2t4QwGODGHwQf8VxCeNwNkJz0gjt5JrlUfJ5zNlMr9lrzhnl7DSN+5E16YmMHnfomnQmvSoA==" crossorigin="anonymous"></script>
Javascript
function toastMe(alertTitle,alertContent) {
halfmoon.initStickyAlert({
content: alertContent, // Required, main content of the alert, type: string (can contain HTML)
title: alertTitle, // Optional, title of the alert, default: "", type: string
alertType: "", // Optional, type of the alert, default: "", must be "alert-primary" || "alert-success" || "alert-secondary" || "alert-danger"
fillType: "", // Optional, fill type of the alert, default: "", must be "filled-lm" || "filled-dm" || "filled"
hasDismissButton: true, // Optional, the alert will contain the close button if true, default: true, type: boolean
timeShown:10000 // Optional, time the alert stays on the screen (in ms), default: 5000, type: number
})
}
PHP
if(isset($_SESSION["global_login"])) {
$page_content['main'] .= "<p class='message'>Login Success</p>";
$page_content['main'] .= "<script>document.addEventListener(\"DOMContentLoaded\", function(event) {
toastMe(alertTitle = 'Login Success',alertContent = 'You are now logged in! โ');
});</script>";
}