Nitty.js | turn Alerts from UIKit into notifications.

nitty.js

try{
    $(document).ready(function() {
        $('<div id="NittyContainer" class=""></div>').prependTo("body");
            $("#NittyContainer").css({
                "top": 0,
                "left": 0,
                "position": "fixed",
                "width": "100%",
                "height": "100%",
                "z-index": "1000",
                "pointer-events": "none",
                "display": "flex",
                "flex-direction": "column-reverse"
        
            })
        });
} catch(err){
    console.log("you probably don't have jquery running properly. i should make this for purejs soon ");
}

var Nitts = [0+'nittcount'];
var firstrun = 'yes';

async function Nitty(message, type, timeout, forcedTarget, css, animation){
    if(firstrun == 'yes'){ 
    await sleep(1000) //prevent it from trying to post stuff too early
    firstrun = 'no'}
    if (message == null){throw "Message can't be null :(.";}
    timeout = typeof timeout !== 'undefined' ? timeout : 0; // if 0 => persistant
    css = typeof css !== 'undefined' ? css : ''; //css on the alert div itself
    animation = typeof animation !== 'undefined' ? animation : ' uk-animation-slide-bottom uk-animation-fast'; //makes it nicer
    type = typeof type !== 'undefined' ? type : 'default'; //can be primary, success. warning, danger.
    forcedTarget = typeof forcedTarget !== 'undefined' ? forcedTarget : '';// set a target so you can close it with NittyForce(forcedTarget);
    if (type == "override"){
    };
    document.getElementById("NittyContainer").innerHTML+='<div class="uk-alert-'+type+' '+ css +'" uk-alert><a id="'+Nitts.last()+'" Nitty="'+forcedTarget+'" class="uk-alert-close NittyTarget" uk-close></a>'+message+'</div>'
    document.getElementById(Nitts.last()).parentElement.className += animation;
    document.getElementById(Nitts.last()).parentElement.style.cssText = "opacity: 100% !important;  margin-top: 10px !important; margin-bottom: 0px !important;  pointer-events: auto;";
        // return '<div onload="UIkit.update(element = document.body, type = \'update\');" uk-sticky="offset: '+stickyoffset+'" uk-alert-'+type+' class="'+cssclass+' '+animation+' uk-position-'+pos+'" style=" z-index: 100 !important; '+css+'"><a class="uk-alert-close" uk-close></a>'+message+'</div>';
    if (timeout > 0){
        NittyClose(Nitts.last(), timeout);
    }
        Nitts.push(Nitts.length+'nittcount');
}

async function NittyClose(obj, timeout){
    await sleep(timeout);
    document.getElementById(obj).click();
}
async function NittyForce(obj){
    if (obj == null){throw "you forgot your object";}
    try{
        document.querySelector('[Nitty='+obj+']').click();
    } catch(err){
        console.log("usually caused by the object you're trying to destroy doesn't exist. It looks for elements with attribute Nitty='name'.");
        throw "failed to close object: " + obj + " because: " + err; 
    }
}
function NittyForceAll(){
    try{
    var targets = document.getElementsByClassName("NittyTarget");
    for(var i = 0; i < targets.length; i++)
    {targets[i].click();}
    }catch(err){
        console.log("Something went wrong with element "+targets[i]+" Error: " + err);
    }
}

function NittyHelp(){
console.log('Message: any string /required/ | type: primary, secondary, warning, danger /defaults to primary/ | timeout: hide after x seconds /if null-> indefinate/ | forcedTarget: Names the Nitt, used with NittyForce/NittyForceAll.')
}

function NittyLoadUIKit() {
    var ss = document.styleSheets;
    for (var i = 0, max = ss.length; i < max; i++) {
        if (ss[i].href == "https://cdn.jsdelivr.net/npm/uikit@latest/dist/css/uikit.min.css")
        console.log("UIkit is already loaded though? You can remove NittyLoadUIKit() from your scripts");
            return;
    }
    var link = document.createElement("link");
    link.rel = "https://cdn.jsdelivr.net/npm/uikit@latest/dist/css/uikit.min.css";
    link.href = "https://cdn.jsdelivr.net/npm/uikit@latest/dist/css/uikit.min.css";
    document.getElementsByTagName("head")[0].appendChild(link);
    console.log("Loading UIKit with NittyLoadUIKit(); You should include https://cdn.jsdelivr.net/npm/uikit@latest/dist/css/uikit.min.css into your files.");
}

function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
  }


if (!Array.prototype.last){
    Array.prototype.last = function(){
        return this[this.length - 1];
    };
}