jrd/floorbell
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

flash background on ring event

Browse Source
This commit is contained in:
Jared Burce
2020-10-29 03:00:48 -07:00
parent 55ff48e6a3
commit 4bdcbcad20
1 changed files with 51 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
static/main.html
View File

@@ -6,11 +6,46 @@
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script>
<style> <style>
body { body {
background-color: black; background-color: #33194d;
color: white; color: white;
} }
.flash {
--flash-half-count: 60;
--flash-half-duration: .5s;
animation-delay: 0s,
var(--flash-half-duration),
calc( (var(--flash-half-count) - 1) * var(--flash-half-duration) );
animation-duration: var(--flash-half-duration);
animation-name: fade, flashing, fade;
animation-timing-function: ease-in, ease-in-out, ease-in;
animation-iteration-count: 1, calc(var(--flash-half-count) - 2), 1;
animation-direction: normal, alternate, reverse;
animation-play-state: paused;
}
@keyframes fade {
from {
background-color: #33194d;
}
to {
background-color: orange;
}
}
@keyframes flashing {
from {
background-color: orange;
}
to {
background-color: rebeccapurple;
}
}
#status_box { #status_box {
background-color: black;
margin: auto; margin: auto;
width: 30%; width: 30%;
border-style: ridge; border-style: ridge;
@@ -39,7 +74,7 @@
} }
</style> </style>
</head> </head>
<body> <body class="flash">
<section id="status_box"> <section id="status_box">
<table> <table>
<tr> <tr>
@@ -118,6 +153,20 @@
secs = (secs < 10) ? '0' + secs : secs; secs = (secs < 10) ? '0' + secs : secs;
let demidiemity = (hours / 12)|0 ? 'PM' : 'AM'; let demidiemity = (hours / 12)|0 ? 'PM' : 'AM';
$('#last_ring').text(`${hours12}:${mins}:${secs} ${demidiemity}`); $('#last_ring').text(`${hours12}:${mins}:${secs} ${demidiemity}`);
// CSS Animations don't provide a way to restart them.
// Instead, we can temporarily override the animation property to 'none' then the
// animation will restart when we re-inheirit from the stylesheet.
let flashers = $('.flash').each((_, e) => {
e.style.animation = '';
e.style.animationPlayState = 'running';
let end_count = 0; // Each sub-animation fires its own event
let $e = $(e);
$e.off();
$e.on('animationend',
ev => { if (++end_count == 3 ) ev.target.style.animation = 'none paused'});
});
}); });
}; };
@@ -142,7 +191,6 @@
status_line.append(template); status_line.append(template);
} }
</script> </script>
</body> </body>
</html> </html>