improve efficiency of the lookatme animation

Signed-off-by: Iksas <Iksas@users.noreply.github.com>
pi-hole · Jan 22, 2022 · 1f67c23 · 1f67c23
1 parent fe32e57
commit 1f67c23
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 22 deletions.
diff --git a/scripts/pi-hole/js/settings.js b/scripts/pi-hole/js/settings.js
@@ -213,9 +213,12 @@ function loadCacheInfo() {
     var cachelivefreed = parseInt(data.cacheinfo["cache-live-freed"], 10);
     $("#cache-live-freed").text(cachelivefreed);
     if (cachelivefreed > 0) {
-      $("#cache-live-freed").parent("tr").addClass("lookatme");
+      $("#cache-live-freed").parent("tr").children("th").children("span").addClass("lookatme");
+      $("#cache-live-freed").parent("tr").children("td").addClass("lookatme");
+      $("#cache-live-freed").parent("tr").children("td").attr("lookatme-text", cachelivefreed.toString());
     } else {
-      $("#cache-live-freed").parent("tr").removeClass("lookatme");
+      $("#cache-live-freed").parent("tr").children("th").children("span").removeClass("lookatme");
+      $("#cache-live-freed").parent("tr").children("td").removeClass("lookatme");
     }
 
     // Update cache info every 10 seconds

diff --git a/scripts/pi-hole/php/footer.php b/scripts/pi-hole/php/footer.php
@@ -82,17 +82,17 @@
                     <li>
                         <strong>Pi-hole</strong>
                         <a href="<?php echo $coreReleasesUrl . "/" . $core_current; ?>" rel="noopener" target="_blank"><?php echo $core_current; ?></a>
-                        <?php if ($core_update) { ?> &middot; <a class="lookatme" href="<?php echo $coreReleasesUrl . "/latest"; ?>" rel="noopener" target="_blank">Update available!</a><?php } ?>
+                        <?php if ($core_update) { ?> &middot; <a class="lookatme" lookatme-text="Update available!" href="<?php echo $coreReleasesUrl . "/latest"; ?>" rel="noopener" target="_blank">Update available!</a><?php } ?>
                     </li>
                     <li>
                         <strong>FTL</strong>
                         <a href="<?php echo $ftlReleasesUrl . "/" . $FTL_current; ?>" rel="noopener" target="_blank"><?php echo $FTL_current; ?></a>
-                        <?php if ($FTL_update) { ?> &middot; <a class="lookatme" href="<?php echo $ftlReleasesUrl . "/latest"; ?>" rel="noopener" target="_blank">Update available!</a><?php } ?>
+                        <?php if ($FTL_update) { ?> &middot; <a class="lookatme" lookatme-text="Update available!" href="<?php echo $ftlReleasesUrl . "/latest"; ?>" rel="noopener" target="_blank">Update available!</a><?php } ?>
                     </li>
                     <li>
                         <strong>Web Interface</strong>
                         <a href="<?php echo $webReleasesUrl . "/" . $web_current; ?>" rel="noopener" target="_blank"><?php echo $web_current; ?></a>
-                        <?php if ($web_update) { ?> &middot; <a class="lookatme" href="<?php echo $webReleasesUrl . "/latest"; ?>" rel="noopener" target="_blank">Update available!</a><?php } ?>
+                        <?php if ($web_update) { ?> &middot; <a class="lookatme" lookatme-text="Update available!" href="<?php echo $webReleasesUrl . "/latest"; ?>" rel="noopener" target="_blank">Update available!</a><?php } ?>
                     </li>
                 </ul>
                 <?php if($core_update || $web_update || $FTL_update) { ?>

diff --git a/settings.php b/settings.php
@@ -287,7 +287,7 @@ function get_FTL_data($arg)
                                                     </tr>
                                                     <tr>
                                                         <th scope="row">
-                                                            <span title="Number of cache entries that had to be removed although they are not expired (increase cache size to reduce this number)">DNS cache evictions:</span>
+                                                            <span title="Number of cache entries that had to be removed although they are not expired (increase cache size to reduce this number)" lookatme-text="DNS cache evictions:">DNS cache evictions:</span>
                                                         </th>
                                                         <td id="cache-live-freed">&nbsp;</td>
                                                     </tr>
@@ -457,7 +457,7 @@ function get_FTL_data($arg)
                                         <div class="row">
                                             <div class="col-md-12">
                                                 <div><input type="checkbox" name="active" id="DHCPchk" <?php if ($DHCP){ ?>checked<?php } ?>><label for="DHCPchk"><strong>DHCP server enabled</strong></label></div><br>
-                                                <p id="dhcpnotice" <?php if (!$DHCP){ ?>hidden<?php } ?>>Make sure your router's DHCP server is disabled when using the Pi-hole DHCP server!</p>
+                                                <p id="dhcpnotice" lookatme-text="Make sure your router's DHCP server is disabled when using the Pi-hole DHCP server!" <?php if (!$DHCP){ ?>hidden<?php } ?>>Make sure your router's DHCP server is disabled when using the Pi-hole DHCP server!</p>
                                             </div>
                                         </div>
                                         <div class="row">
@@ -1263,7 +1263,7 @@ function convertseconds($argument)
                                                 </div>
                                                 <p>The privacy level may be increased at any time without having to restart the DNS resolver. However, note that the DNS resolver needs to be restarted when lowering the privacy level. This restarting is automatically done when saving.</p>
                                                 <?php if($privacylevel > 0 && $piHoleLogging){ ?>
-                                                <p class="lookatme">Warning: Pi-hole's query logging is activated. Although the dashboard will hide the requested details, all queries are still fully logged to the pihole.log file.</p>
+                                                <p class="lookatme" lookatme-text="Warning: Pi-hole's query logging is activated. Although the dashboard will hide the requested details, all queries are still fully logged to the pihole.log file.">Warning: Pi-hole's query logging is activated. Although the dashboard will hide the requested details, all queries are still fully logged to the pihole.log file.</p>
                                                 <?php } ?>
                                             </div>
                                         </div>

diff --git a/style/pi-hole.css b/style/pi-hole.css
@@ -19,41 +19,58 @@
 
 @-webkit-keyframes Pulse {
   from {
-    color: #630030;
-    text-shadow: 0 0 2px transparent;
+    opacity: 0;
   }
 
   50% {
-    color: #e33100;
-    text-shadow: 0 0 5px #e33100;
+    opacity: 1;
   }
 
   to {
-    color: #630030;
-    text-shadow: 0 0 2px transparent;
+    opacity: 0;
   }
 }
 
 @keyframes Pulse {
   from {
-    color: #630030;
-    text-shadow: 0 0 2px transparent;
+    opacity: 0;
   }
 
   50% {
-    color: #e33100;
-    text-shadow: 0 0 5px #e33100;
+    opacity: 1;
   }
 
   to {
-    color: #630030;
-    text-shadow: 0 0 2px transparent;
+    opacity: 0;
   }
 }
 
 .lookatme {
-  -webkit-animation: 2s infinite Pulse;
-  animation: 2s infinite Pulse;
+  color: #630030;
+  opacity: 1;
+  position: relative;
+  display: inline-block;
+}
+
+td.lookatme {
+  display: table-cell;
+}
+
+/* this pseudo element will be faded in and out in front /*
+/* of the lookatme element to create an efficient animation. */
+.lookatme:after {
+  color: #e33100;
+  text-shadow: 0 0 5px #e33100;
+  /* in the html, the lookatme-text attribute must */
+  /* contain the same text as the .lookatme element */
+  content: attr(lookatme-text);
+  padding: inherit;
+  position: absolute;
+  inset: 0 0 0 0;
+  z-index: 1;
+  /* 20 steps / 2 seconds = 10fps */
+  -webkit-animation: 2s infinite Pulse steps(20);
+  animation: 2s infinite Pulse steps(20);
 }
 
 .table-responsive {