Pro-Idler/BinStack
1
0
Fork 0
forked from Business/BinStack
Code Issues Pull Requests Projects Releases Wiki Activity

Make msg alert time out with smooth visual effects

Browse Source
This commit is contained in:
Skylar Ittner 2018-06-01 13:59:31 -06:00
parent ee0c0f65e3
commit 66aa3d6fdc
2 changed files with 60 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
app.php
View File

@ -92,9 +92,14 @@ header("Link: <static/js/bootstrap.min.js>; rel=preload; as=script", false);
echo <<<END echo <<<END
<div class="row justify-content-center" id="msg-alert-box"> <div class="row justify-content-center" id="msg-alert-box">
<div class="col-11 col-sm-6 col-md-5 col-lg-4 col-xl-4"> <div class="col-11 col-sm-6 col-md-5 col-lg-4 col-xl-4">
<div class="alert alert-dismissible alert-$alerttype"> <div class="alert alert-dismissible alert-$alerttype mt-2 p-0 border-0 shadow">
<button type="button" class="close">&times;</button> <div class="p-2 pl-3">
<i class="fas fa-$alerticon"></i> $alertmsg <button type="button" class="close">&times;</button>
<i class="fas fa-$alerticon"></i> $alertmsg
</div>
<div class="progress">
<div class="progress-bar bg-$alerttype w-0" id="msg-alert-timeout-bar"></div>
</div>
</div> </div>
</div> </div>
</div> </div>

52
static/js/app.js
View File

@ -7,6 +7,58 @@ $(document).ready(function () {
$(".alert .close").click(function (e) { $(".alert .close").click(function (e) {
$(this).parent().fadeOut("slow"); $(this).parent().fadeOut("slow");
}); });
if ($("#msg-alert-box").length) {
$("#msg-alert-box .progress").css("height", "3px");
$("#msg-alert-box .progress").css("border-radius", "0px 0px .25rem .25rem");
$("#msg-alert-box .progress-bar").css("transition", "width 0.25s linear");
var msginteractiontick = 0;
var fifty = 10;
var gone = 20;
var msgticker = setInterval(function () {
if ($('#msg-alert-box .alert:hover').length) {
msginteractiontick = 0;
} else {
msginteractiontick++;
}
if (msginteractiontick > 0) {
function setBarWidth(offset) {
$("#msg-alert-timeout-bar").css("width", (msginteractiontick + offset) / gone * 100 + "%");
}
setBarWidth(-1 + .25);
setTimeout(function () {
setBarWidth(-1 + .5);
}, 250);
setTimeout(function () {
setBarWidth(-1 + .75);
}, 500);
setTimeout(function () {
setBarWidth(0);
}, 750);
} else {
$("#msg-alert-timeout-bar").css("width", "0%");
}
if (msginteractiontick < fifty) {
$("#msg-alert-box .alert").css("opacity", "1");
}
if (msginteractiontick == fifty) {
$("#msg-alert-box .alert").fadeTo(1000, 0.5);
}
if (msginteractiontick >= gone) {
$("#msg-alert-box .alert").fadeOut("slow", function () {
});
window.clearInterval(msgticker);
}
}, 1000 * 1);
$("#msg-alert-box").on("mouseenter", function () {
$("#msg-alert-box .alert").css("opacity", "1");
msginteractiontick = 0;
console.log("👈😎👈 zoop");
});
}
}); });