From 43f003ee01df625fac1a4be9bf5cce6eee4503fe Mon Sep 17 00:00:00 2001
From: Mike McNeil <mikermcneil@users.noreply.github.com>
Date: Wed, 31 Jan 2024 09:26:35 -0600
Subject: [PATCH] Update homepage.page.js (#16491)

Please watch recording of website design review from Jan 30 (US time)
---
 website/assets/js/pages/homepage.page.js | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/website/assets/js/pages/homepage.page.js b/website/assets/js/pages/homepage.page.js
index 67d25a3cfb..25de898d3d 100644
--- a/website/assets/js/pages/homepage.page.js
+++ b/website/assets/js/pages/homepage.page.js
@@ -12,13 +12,15 @@ parasails.registerPage('homepage', {
   //  ╩═╝╩╚  ╚═╝╚═╝ ╩ ╚═╝╩═╝╚═╝
   beforeMount: function() {
     //…
+    // TODO: tear down  (it seems crazy, but do it for yourself, in case you need to move this later.  I know it won't actually matter)
   },
   mounted: async function(){
 
     let imageToAnimate = document.querySelector('[purpose="platform-animated-image"]');
-    // Make sure the animation event listener never runs if the image is removed.
+    // Make sure the animation event listener never runs if the image is removed.  TODO: THis should never happen, thus throw an error if it ever happens.  IF it is known and expected, then handle that explicitly and have the code understand why.
     if(imageToAnimate) {
-      this._addEventListenerForAnimation(imageToAnimate);
+      // TODO: Where is mobile disabling happening?  (Let's disable it here instead with `if (bowser.isMobile)`)
+      this._addEventListenerForAnimation(imageToAnimate);// «« TODO: This can be inlined (remove private helper function), tehre is no other place it is called.  If there are hidden sneaky places it is called from the html then we should not do that.
     }
   },
 
@@ -43,7 +45,7 @@ parasails.registerPage('homepage', {
     },
 
     _addEventListenerForAnimation: function (imageToAnimate) {
-      window.addEventListener('scroll', ()=>{
+      window.addEventListener('scroll', ()=>{// « TODO: Change this to use jQuery
         // Get the bounding box of the image.
         let animatedImageBoundingBox = imageToAnimate.getBoundingClientRect();
         if (animatedImageBoundingBox.top >= 0 &&
@@ -52,7 +54,9 @@ parasails.registerPage('homepage', {
             animatedImageBoundingBox.right <= (window.innerWidth || document.documentElement.clientWidth))
         {
           // When the image is completly in the user's viewport, add the 'animate' class to it.
-          imageToAnimate.classList.add('animate');
+          imageToAnimate.classList.add('animate');// « TODO: Change this to use jQuery.  (which automatically optimizes DOM renders so you don't potentially add the same class again and again and again, triggering fresh DOM renders each time)
+          // TODO: ^where is this clsas implemented?  Can't find in CSS.  Can't find in Bootstrap.
+          // TODO: IF it's vue.js animations, then lets stop.  They don't work very well.
         }
       });
     }