@folklore/hooks 0.0.77 → 0.0.81

package/dist/cjs.js

@@ -1077,6 +1077,136 @@ function useNativeVideoPlayer(url, {
   };
 }
 
+const getWindowSize = () => ({
+  width: typeof window !== 'undefined' ? window.innerWidth || 0 : 0,
+  height: typeof window !== 'undefined' ? window.innerHeight || 0 : 0
+});
+let currentSize = getWindowSize();
+function useWindowSize({
+  onChange = null
+} = {}) {
+  const [size, setSize] = react.useState(currentSize);
+  const sizeRef = react.useRef(size);
+  const updateSize = react.useCallback(() => {
+    const newSize = getWindowSize();
+    if (currentSize.width !== newSize.width || currentSize.height !== newSize.height) {
+      currentSize = newSize;
+    }
+    if (sizeRef.current.width !== newSize.width || sizeRef.current.height !== newSize.height) {
+      sizeRef.current = newSize;
+      setSize(newSize);
+      return newSize;
+    }
+    return null;
+  }, [setSize]);
+  const onResize = react.useCallback(() => {
+    const newSize = updateSize();
+    if (newSize !== null && onChange !== null) {
+      onChange(newSize);
+    }
+  }, [onChange, updateSize]);
+  useWindowEvent('resize', onResize);
+  react.useEffect(() => {
+    onResize();
+  }, []);
+  return size;
+}
+
+function useScrollTrigger({
+  disabled = false,
+  triggers = [0.1, 0.25, 0.5, 0.75, 0.9, 1.0],
+  useElementScroll = false,
+  onTrigger = null
+} = {}) {
+  const triggersCompletedRef = react.useRef([]);
+  const {
+    height
+  } = useWindowSize();
+  const {
+    ref,
+    entry: {
+      contentRect = null
+    }
+  } = useResizeObserver({
+    disabled: !useElementScroll
+  });
+  const {
+    top: elementTop = 0,
+    height: elementHeight = null
+  } = contentRect || {};
+  const elementScrollHeight = elementHeight !== null ? elementHeight + elementTop : 0;
+  react.useEffect(() => {
+    if (eventsManager === null || disabled) {
+      return () => {};
+    }
+    function onScroll() {
+      const scrollY = useElementScroll ? ref.current.scrollTop : window.scrollY;
+      let scrollHeight = 0;
+      if (useElementScroll) {
+        scrollHeight = ref.current.scrollHeight - ref.current.clientHeight;
+      } else if (ref.current !== null && elementScrollHeight > 0) {
+        scrollHeight = elementScrollHeight - height;
+      } else {
+        scrollHeight = document.documentElement.scrollHeight - height;
+      }
+      const progress = Math.min(Math.max(scrollY / scrollHeight, 0), 1);
+      const newTriggersCompleted = triggers.filter(step => progress >= step && triggersCompletedRef.current.indexOf(step) === -1);
+      newTriggersCompleted.forEach(step => {
+        if (onTrigger != null) {
+          onTrigger(step);
+        }
+      });
+      if (newTriggersCompleted.length > 0) {
+        triggersCompletedRef.current = [...triggersCompletedRef.current, ...newTriggersCompleted];
+      }
+    }
+    if (useElementScroll) {
+      ref.current.addEventListener('scroll', onScroll);
+    } else {
+      eventsManager.subscribe('scroll', onScroll);
+    }
+    onScroll();
+    return () => {
+      if (useElementScroll) {
+        ref.current.removeEventListener('scroll', onScroll);
+      } else {
+        eventsManager.unsubscribe('scroll', onScroll);
+      }
+    };
+  }, [triggers, disabled, onTrigger, height, elementScrollHeight, useElementScroll]);
+  return {
+    ref
+  };
+}
+
+function checkWebpSupport() {
+  return new Promise(resolve => {
+    const img = document.createElement('img');
+    img.onload = () => {
+      resolve(img.width > 0 && img.height > 0);
+    };
+    img.onerror = () => {
+      resolve(false);
+    };
+    img.src = 'data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoCAAEAAQAcJaQAA3AA/v3AgAA=';
+  });
+}
+function useSupportsWebp(defaultValue = true) {
+  const [supportsWebp, setSupportsWebp] = react.useState(defaultValue);
+  react.useEffect(() => {
+    let canceled = false;
+    checkWebpSupport().then(newSupport => {
+      if (!canceled && newSupport !== supportsWebp) {
+        setSupportsWebp(newSupport);
+      }
+    });
+    return () => {
+      canceled = true;
+    };
+  }, []);
+  return supportsWebp;
+}
+
 const NO_PLAYER_ERROR$1 = new Error('No player');
 function useVimeoPlayer(id, {
   width = 0,
@@ -1695,41 +1825,6 @@ function useVideoPlayer(params) {
   return player;
 }
 
-const getWindowSize = () => ({
-  width: typeof window !== 'undefined' ? window.innerWidth || 0 : 0,
-  height: typeof window !== 'undefined' ? window.innerHeight || 0 : 0
-});
-let currentSize = getWindowSize();
-function useWindowSize({
-  onChange = null
-} = {}) {
-  const [size, setSize] = react.useState(currentSize);
-  const sizeRef = react.useRef(size);
-  const updateSize = react.useCallback(() => {
-    const newSize = getWindowSize();
-    if (currentSize.width !== newSize.width || currentSize.height !== newSize.height) {
-      currentSize = newSize;
-    }
-    if (sizeRef.current.width !== newSize.width || sizeRef.current.height !== newSize.height) {
-      sizeRef.current = newSize;
-      setSize(newSize);
-      return newSize;
-    }
-    return null;
-  }, [setSize]);
-  const onResize = react.useCallback(() => {
-    const newSize = updateSize();
-    if (newSize !== null && onChange !== null) {
-      onChange(newSize);
-    }
-  }, [onChange, updateSize]);
-  useWindowEvent('resize', onResize);
-  react.useEffect(() => {
-    onResize();
-  }, []);
-  return size;
-}
-
 function useVisualViewport() {
   const {
     width: windowWidth,
@@ -1833,6 +1928,8 @@ exports.useNativeVideoPlayer = useNativeVideoPlayer;
 exports.useObserver = useObserver;
 exports.usePlayerCurrentTime = usePlayerCurrentTime;
 exports.useResizeObserver = useResizeObserver;
+exports.useScrollTrigger = useScrollTrigger;
+exports.useSupportsWebp = useSupportsWebp;
 exports.useVideoPlayer = useVideoPlayer;
 exports.useVimeoPlayer = useVimeoPlayer;
 exports.useVisualViewport = useVisualViewport;

package/dist/es.js

@@ -1075,6 +1075,136 @@ function useNativeVideoPlayer(url, {
   };
 }
 
+const getWindowSize = () => ({
+  width: typeof window !== 'undefined' ? window.innerWidth || 0 : 0,
+  height: typeof window !== 'undefined' ? window.innerHeight || 0 : 0
+});
+let currentSize = getWindowSize();
+function useWindowSize({
+  onChange = null
+} = {}) {
+  const [size, setSize] = useState(currentSize);
+  const sizeRef = useRef(size);
+  const updateSize = useCallback(() => {
+    const newSize = getWindowSize();
+    if (currentSize.width !== newSize.width || currentSize.height !== newSize.height) {
+      currentSize = newSize;
+    }
+    if (sizeRef.current.width !== newSize.width || sizeRef.current.height !== newSize.height) {
+      sizeRef.current = newSize;
+      setSize(newSize);
+      return newSize;
+    }
+    return null;
+  }, [setSize]);
+  const onResize = useCallback(() => {
+    const newSize = updateSize();
+    if (newSize !== null && onChange !== null) {
+      onChange(newSize);
+    }
+  }, [onChange, updateSize]);
+  useWindowEvent('resize', onResize);
+  useEffect(() => {
+    onResize();
+  }, []);
+  return size;
+}
+
+function useScrollTrigger({
+  disabled = false,
+  triggers = [0.1, 0.25, 0.5, 0.75, 0.9, 1.0],
+  useElementScroll = false,
+  onTrigger = null
+} = {}) {
+  const triggersCompletedRef = useRef([]);
+  const {
+    height
+  } = useWindowSize();
+  const {
+    ref,
+    entry: {
+      contentRect = null
+    }
+  } = useResizeObserver({
+    disabled: !useElementScroll
+  });
+  const {
+    top: elementTop = 0,
+    height: elementHeight = null
+  } = contentRect || {};
+  const elementScrollHeight = elementHeight !== null ? elementHeight + elementTop : 0;
+  useEffect(() => {
+    if (eventsManager === null || disabled) {
+      return () => {};
+    }
+    function onScroll() {
+      const scrollY = useElementScroll ? ref.current.scrollTop : window.scrollY;
+      let scrollHeight = 0;
+      if (useElementScroll) {
+        scrollHeight = ref.current.scrollHeight - ref.current.clientHeight;
+      } else if (ref.current !== null && elementScrollHeight > 0) {
+        scrollHeight = elementScrollHeight - height;
+      } else {
+        scrollHeight = document.documentElement.scrollHeight - height;
+      }
+      const progress = Math.min(Math.max(scrollY / scrollHeight, 0), 1);
+      const newTriggersCompleted = triggers.filter(step => progress >= step && triggersCompletedRef.current.indexOf(step) === -1);
+      newTriggersCompleted.forEach(step => {
+        if (onTrigger != null) {
+          onTrigger(step);
+        }
+      });
+      if (newTriggersCompleted.length > 0) {
+        triggersCompletedRef.current = [...triggersCompletedRef.current, ...newTriggersCompleted];
+      }
+    }
+    if (useElementScroll) {
+      ref.current.addEventListener('scroll', onScroll);
+    } else {
+      eventsManager.subscribe('scroll', onScroll);
+    }
+    onScroll();
+    return () => {
+      if (useElementScroll) {
+        ref.current.removeEventListener('scroll', onScroll);
+      } else {
+        eventsManager.unsubscribe('scroll', onScroll);
+      }
+    };
+  }, [triggers, disabled, onTrigger, height, elementScrollHeight, useElementScroll]);
+  return {
+    ref
+  };
+}
+
+function checkWebpSupport() {
+  return new Promise(resolve => {
+    const img = document.createElement('img');
+    img.onload = () => {
+      resolve(img.width > 0 && img.height > 0);
+    };
+    img.onerror = () => {
+      resolve(false);
+    };
+    img.src = 'data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoCAAEAAQAcJaQAA3AA/v3AgAA=';
+  });
+}
+function useSupportsWebp(defaultValue = true) {
+  const [supportsWebp, setSupportsWebp] = useState(defaultValue);
+  useEffect(() => {
+    let canceled = false;
+    checkWebpSupport().then(newSupport => {
+      if (!canceled && newSupport !== supportsWebp) {
+        setSupportsWebp(newSupport);
+      }
+    });
+    return () => {
+      canceled = true;
+    };
+  }, []);
+  return supportsWebp;
+}
+
 const NO_PLAYER_ERROR$1 = new Error('No player');
 function useVimeoPlayer(id, {
   width = 0,
@@ -1693,41 +1823,6 @@ function useVideoPlayer(params) {
   return player;
 }
 
-const getWindowSize = () => ({
-  width: typeof window !== 'undefined' ? window.innerWidth || 0 : 0,
-  height: typeof window !== 'undefined' ? window.innerHeight || 0 : 0
-});
-let currentSize = getWindowSize();
-function useWindowSize({
-  onChange = null
-} = {}) {
-  const [size, setSize] = useState(currentSize);
-  const sizeRef = useRef(size);
-  const updateSize = useCallback(() => {
-    const newSize = getWindowSize();
-    if (currentSize.width !== newSize.width || currentSize.height !== newSize.height) {
-      currentSize = newSize;
-    }
-    if (sizeRef.current.width !== newSize.width || sizeRef.current.height !== newSize.height) {
-      sizeRef.current = newSize;
-      setSize(newSize);
-      return newSize;
-    }
-    return null;
-  }, [setSize]);
-  const onResize = useCallback(() => {
-    const newSize = updateSize();
-    if (newSize !== null && onChange !== null) {
-      onChange(newSize);
-    }
-  }, [onChange, updateSize]);
-  useWindowEvent('resize', onResize);
-  useEffect(() => {
-    onResize();
-  }, []);
-  return size;
-}
-
 function useVisualViewport() {
   const {
     width: windowWidth,
@@ -1818,4 +1913,4 @@ function useWindowScroll(opts = {}) {
   return scroll;
 }
 
-export { eventsManager$1 as documentEventsManager, getObserver, useCounter, useDailymotionPlayer, useDocumentEvent, useIntersectionObserver, useIsVisible, useItemsPaginated, useKeyboard, useNativeVideoPlayer, useObserver, usePlayerCurrentTime, useResizeObserver, useVideoPlayer, useVimeoPlayer, useVisualViewport, useVisualViewport as useVisualViewportSize, useWindowEvent, useWindowScroll, useWindowSize, useYouTubePlayer, eventsManager as windowEventsManager };
+export { eventsManager$1 as documentEventsManager, getObserver, useCounter, useDailymotionPlayer, useDocumentEvent, useIntersectionObserver, useIsVisible, useItemsPaginated, useKeyboard, useNativeVideoPlayer, useObserver, usePlayerCurrentTime, useResizeObserver, useScrollTrigger, useSupportsWebp, useVideoPlayer, useVimeoPlayer, useVisualViewport, useVisualViewport as useVisualViewportSize, useWindowEvent, useWindowScroll, useWindowSize, useYouTubePlayer, eventsManager as windowEventsManager };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@folklore/hooks",
-    "version": "0.0.77",
+    "version": "0.0.81",
     "description": "React hooks",
     "keywords": [
         "javascript",
@@ -49,7 +49,7 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "ac2a28eb9ac66baf8b2203307806e752719e771c",
+    "gitHead": "82992826efc61cfa8c435412cb4f6388b2cb2c84",
     "dependencies": {
         "@folklore/events": "^0.0.10",
         "@folklore/services": "^0.1.44",