Mirrors/nginxconfig.io
2
0
Fork 0
mirror of https://github.com/digitalocean/nginxconfig.io synced 2024-11-10 04:24:12 +00:00
Code Issues Projects Releases Packages Wiki Activity

Add IntersectionObserver to Droplet callout event (#228)

Browse source
This commit is contained in:
Matt (IPv4) Cowley 2021-02-19 17:55:43 +00:00 committed by GitHub
parent 3d321759e3
commit 4a786d2bfd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 47 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
src/nginxconfig/templates/callouts/droplet.vue
View file

@ -45,10 +45,57 @@ THE SOFTWARE.
components: {
ExternalLink,
},
data() {
return {
observer: null,
};
},
mounted() {
// Use an intersection observer to fire the event when the user scrolls this into view
if ('IntersectionObserver' in window) {
this.observer = new window.IntersectionObserver(this.observerCallback, {
root: null,
rootMargin: '0px',
threshold: 1,
});
this.observer.observe(this.$el);
return;
}
// If we don't have intersection observer support, just fire the visible event now
this.calloutVisibleEvent();
},
updated() {
// If the Vue component updated/re-rendered, ensure we're observing the correct DOM elm
this.$nextTick(() => {
if (this.observer) {
this.observer.disconnect();
this.observer.observe(this.$el);
}
});
},
beforeDestroy() {
// Properly cleanup the observer if the Vue component is being destroyed
this.observerCleanup();
},
methods: {
observerCleanup() {
if (this.observer) {
this.observer.disconnect();
this.observer = null;
}
},
observerCallback(entries) {
for (const entry of entries) {
if (entry.isIntersecting) {
// We've intersected, so we no longer need the observer
this.observerCleanup();
// Fire the event!
this.calloutVisibleEvent();
}
}
},
calloutVisibleEvent() {
analytics({
category: 'Droplet callout',