Adds once visibility detection

Author: Keith Daulton

.editorconfig

@@ -11,3 +11,4 @@ indent_size = 2
 
 [*.md]
 trim_trailing_whitespace = false
+indent_size = 4

assets/media/portfolio/sparx-logo.png

@@ -27,10 +27,10 @@
         <section class="c-section c-section--fixed-hero c-section--light c-section--rough" id="intro">
             <div class="l-row l-row--narrow l-row--halves">
                 <div class="c-section__content">
-                    <div class="a-fade-in-down h-vp-in-once">
+                    <div class="a-fade-in-down h-vp-in">
                         <h1>Hello!</h1>
                         <p>I'm a <strong>UI Developer &amp; Designer</strong> with a passion for creating awesome user experiences for web and mobile.</p>
-                        <p>I make pixels & divs pretty!</p>
+                        <p>I make pixels &amp; divs pretty!</p>
                     </div>
                 </div>
                 <div class="c-section__media"></div>

assets/scripts/site.js

@@ -1,10 +1,10 @@
 import { on } from './utils/events';
-import { observeVisibility, monitorVisibility } from './utils/visibility';
+import { monitorVisibility } from './utils/visibility'; // observeVisibility,
 
 on(document, 'DOMContentLoaded', () => {
     monitorVisibility('.h-vp-in');
     monitorVisibility('.h-vp-in-once', true);
 
     // observeVisibility(document.querySelectorAll('.h-vp-in'));
     // observeVisibility(document.querySelectorAll('.h-vp-in-once'), true);
-});
+});

index.html

@@ -1,15 +1,28 @@
-export function on(element, type, listener, thisArg, capture) {
-    capture || (capture = false);
+export function on(element, type, listener, thisArg, capture = false) {
+  if (thisArg) {
+    listener = listener.bind(thisArg);
+  }
 
-    if (thisArg) {
-        listener = listener.bind(thisArg);
+  element.addEventListener(type, listener, capture);
+
+  return {
+    off: function () {
+      element.removeEventListener(type, listener, capture);
     }
+  };
+}
+
+export function once(element, type, listener, thisArg, capture) {
+  if (thisArg) {
+    listener = listener.bind(thisArg);
+  }
 
-    element.addEventListener(type, listener, capture);
+  const inst = on(element, type, () => {
+    listener.apply(thisArg, arguments);
+    if (inst) {
+      inst.off();
+    }
+  }, thisArg, capture);
 
-    return {
-        off: function() {
-            element.removeEventListener(type, listener, capture);
-        }
-    };
-}
+  return inst;
+}

src/scripts/site.js

@@ -1,126 +1,156 @@
-import { on } from './events';
+import { on, once } from './events';
 import { debounceFrame } from './delays';
 
-export function observeVisibility(items, once) {
-    if (!items || !items.length) return { off: () => {} };
-
-    const observer = new IntersectionObserver((entries) => {
-        console.log('IntersectionObserver 2', entries);
-        entries.forEach(entry => {
-            if (entry.isIntersecting) {
-                console.log('is Intersecting', entry);
-                entry.target.classList.add('is-in-view');
-                if (once) {
-                    observer.unobserve(entry.target);
-                }
-            } else {
-                console.log('not Intersecting', entry);
-                entry.target.classList.remove('is-in-view');
-            }
-        });
-    }, {
-        threshold: 0.5
+/* global Promise */
+export function observeVisibility(items, doOnce) {
+  if (!items || !items.length) return { off: () => { } };
+
+  const observer = new IntersectionObserver((entries) => {
+    //console.log('IntersectionObserver 2', entries);
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        //console.log('is Intersecting', entry);
+        entry.target.classList.add('is-in-view');
+        if (doOnce) {
+          observer.unobserve(entry.target);
+        }
+      } else {
+        //console.log('not Intersecting', entry);
+        entry.target.classList.remove('is-in-view');
+      }
     });
+  }, { threshold: 0.5 });
 
-    if (items && items.length) {
-        for (let i=0; i < items.length; i++) {
-            observer.observe(items[i]);
-        }
+  if (items && items.length) {
+    for (let i = 0; i < items.length; i++) {
+      observer.observe(items[i]);
     }
+  }
 
-    return {
-        off: () => {
-            observer.disconnect();
-        }
-    };
+  return {
+    off: () => {
+      observer.disconnect();
+    }
+  };
 }
 
 let vpW = window.innerWidth;
 let vpH = window.innerHeight;
 function elementIsVisible(el) {
-    // FIXME: performance issue, cache this somewhere
-    const rect = el.getBoundingClientRect();
-    if (rect.top <= -rect.height || rect.top >= vpH) {
-        return false;
-    }
+  // FIXME: performance issue, cache this somewhere
+  const rect = el.getBoundingClientRect();
+  if (rect.top <= -rect.height || rect.top >= vpH) {
+    return false;
+  }
 
-    if (rect.left <= -rect.width || rect.left >= vpW) {
-        return false;
-    }
+  if (rect.left <= -rect.width || rect.left >= vpW) {
+    return false;
+  }
 
-    return true;
+  return true;
 }
 
-function detectVisibility(items, once) {
-    items.forEach(el => {
-        if (once && el.classList.contains('is-in-view')) {
-            return;
-        }
-
-        if (elementIsVisible(el)) {
-            el.classList.add('is-in-view');
-        } else {
-            el.classList.remove('is-in-view');
-        }
+const isInView = el => el.classList.contains('is-in-view');
+
+function detectVisibility(items, doOnce) {
+  return Promise.all(items.map(el => {
+    return new Promise((resolve) => {
+      if (doOnce && isInView(el)) {
+        //console.log('This probably should not happen');
+        resolve();
+        return;
+      }
+
+      if (el.classList.contains('is-animating')) {
+        resolve();
+        return;
+      }
+
+      if (!elementIsVisible(el)) {
+        el.classList.remove('is-in-view');
+        resolve();
+      } else if (!isInView(el)) {
+        once(el, 'animationend', () => {
+          el.classList.remove('is-animating');
+          resolve();
+        });
+        el.classList.add('is-animating', 'is-in-view');
+      } else {
+        resolve();
+      }
     });
+  }));
 }
 
 const listenerQueue = {};
 function detectAnimationVisibility() {
-    //console.log('detectAnimationVisibility');
+  //console.log('detectAnimationVisibility');
 
-    Object.keys(listenerQueue).map(key => listenerQueue[key]).forEach(_ => {
-        detectVisibility(_.items, _.once);
-    });
+  Object.keys(listenerQueue).forEach(key => {
+    const _ = listenerQueue[key];
+
+    const p = detectVisibility(_.items, _.once)
+
+    if (_.once) {
+      p.then(() => {
+        _.items = _.items.filter(el => !isInView(el));
+
+        if (!_.items.length && listenerQueue[key]) {
+          //console.log(key, 'has none left');
+          delete listenerQueue[key];
+        }
+      });
+    }
+  });
 }
 
 const debouncedDetectAnimationVisibility = debounceFrame(() => {
-    detectAnimationVisibility();
+  detectAnimationVisibility();
 });
 
 let activeVisibility;
 function listenOnChanges() {
-    if (!activeVisibility) {
-        let events = [
-            on(window, 'resize', () => {
-                //console.log('resize');
-                vpW = window.innerWidth;
-                vpH = window.innerHeight;
-                debouncedDetectAnimationVisibility();
-            }),
-            on(window, 'scroll', () => {
-                //console.log('scroll');
-                debouncedDetectAnimationVisibility();
-            })
-        ];
-
+  if (!activeVisibility) {
+    const events = [
+      on(window, 'resize', () => {
+        //console.log('resize');
+        vpW = window.innerWidth;
+        vpH = window.innerHeight;
+        debouncedDetectAnimationVisibility();
+      }),
+      on(window, 'scroll', () => {
+        //console.log('scroll');
         debouncedDetectAnimationVisibility();
+      })
+    ];
 
-        activeVisibility = {
-            off: () => {
-                events.forEach(_ => _.off());
-            }
-        };
-    }
+    debouncedDetectAnimationVisibility();
 
-    return activeVisibility;
+    activeVisibility = {
+      off: () => {
+        events.forEach(_ => _.off());
+      }
+    };
+  }
+
+  return activeVisibility;
 }
 
-export function monitorVisibility(selector, once) {
-    if (!listenerQueue.hasOwnProperty(selector)) {
-        const els = document.querySelectorAll(selector);
-        if (els && els.length) {
-            listenerQueue[selector] = {
-                items: els,
-                once: once || false
-            };
-            listenOnChanges();
-        }
+export function monitorVisibility(selector, doOnce) {
+  if (!listenerQueue.hasOwnProperty(selector)) {
+    const els = Array.prototype.slice.call(document.querySelectorAll(selector));
+    if (els && els.length) {
+      listenerQueue[selector] = {
+        items: els,
+        once: doOnce || false
+      };
+      listenOnChanges();
     }
+  }
 
-    return {
-        off: function() {
-            activeVisibility && activeVisibility.off();
-        }
-    };
-}
+  return {
+    off: function() {
+      activeVisibility && activeVisibility.off();
+    }
+  };
+}