flash background on ring event

2020-10-29 03:00:48 -07:00
parent 55ff48e6a3
commit 4bdcbcad20
1 changed files with 51 additions and 3 deletions
--- a/static/main.html
+++ b/static/main.html
@@ -6,11 +6,46 @@
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script>
    <style>
      body {
-          background-color: black;
+          background-color: #33194d;
          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 {
+          background-color: black;
          margin: auto;
          width: 30%;
          border-style: ridge;
@@ -39,7 +74,7 @@
      }
    </style>
  </head>
-  <body>
+  <body class="flash">
    <section id="status_box">
      <table>
        <tr>
@@ -118,6 +153,20 @@
            secs = (secs < 10) ? '0' + secs : secs;
            let demidiemity = (hours / 12)|0 ? 'PM' : 'AM';
            $('#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);
      }

-
    </script>
  </body>
 </html>