-
-
Save OmegaMaxy/f7e2c2a9c460b5036493119122f867f6 to your computer and use it in GitHub Desktop.
Nitty.js | turn Alerts from UIKit into notifications.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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