Skip to content

Instantly share code, notes, and snippets.

@OmegaMaxy
Forked from ThzeTerminator/nitty.js
Created September 23, 2020 12:16
Show Gist options
  • Save OmegaMaxy/f7e2c2a9c460b5036493119122f867f6 to your computer and use it in GitHub Desktop.
Save OmegaMaxy/f7e2c2a9c460b5036493119122f867f6 to your computer and use it in GitHub Desktop.
Nitty.js | turn Alerts from UIKit into notifications.
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];
};
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment