Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Drop in JavaScript `status()` function that can be used from code to display debug status message on the bottom of the viewport for scenarios where console.log() is not available.
var statusTimeout = null;
var statusDefaultTimeout = 10000;
/*
* Generic Status Message for the bottom of the screen. Can be used to render debug output
* into the editor. Double click status bar to clear for appended output.
* status('Started');
* status('updated',true, 5000);
*/
function status(msg, append, timeout) {
if (!timeout)
timeout = statusDefaultTimeout;
var el = document.getElementById("StatusMessage");
if (!el) {
el = document.createElement('div');
el.outerHTML = "<div id='StatusMessage' style='display: none; position: fixed; right: 0; left: 0; bottom: 0; padding: 10px; background: black; color: white; z-index: 1000; opacity: 0.90;font-size: 8.75pt;' ondblclick=\"this.style.display = \'none\'; this.innerText = \'\';\"></div>";
document.body.append(el);
}
if (!msg)
el.style.display = "none";
else {
var dt = new Date();
msg = dt.getHours() + ":" +
dt.getMinutes() + ":" +
dt.getSeconds() + "." +
Math.floor(dt.getMilliseconds()) + ": " + msg;
if (!append) {
el.innerText = msg;
} else {
var textEl = document.createElement('div');
textEl.innerText = msg;
msg = textEl.innerHTML;
var old = el.innerHTML;
if (old)
msg = old + '</br>' + msg;
el.innerHTML = msg;
}
el.style.display = "block";
if (statusDefaultTimeout > 0) {
if (statusTimeout)
window.clearTimeout(statusTimeout);
statusTimeout = window.setTimeout(function() {
statusTimeout = null;
var el = document.getElementById("StatusMessage");
el.style.display = "none";
el.innerText = '';
}, timeout);
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment