Elgato_dark/fleet
1
0
Fork 0
mirror of https://github.com/fleetdm/fleet synced 2026-05-23 08:58:41 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 111

Update homepage.page.js (#16491)

Browse source 
Please watch recording of website design review from Jan 30 (US time)
This commit is contained in:
Mike McNeil 2024-01-31 09:26:35 -06:00 committed by GitHub
parent 93a297d638
commit 43f003ee01
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 8 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
website/assets/js/pages/homepage.page.js vendored
View file

@ -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.
}
});
}