@titelmedia/bricks-gallery - npm Package Compare versions

Comparing version 0.4.59 to 0.4.61

CHANGELOG.md

@@ -6,2 +6,10 @@ # Change Log
 
+## [0.4.61](https://github.com/titel-media/bricks-lerna/compare/v0.4.60...v0.4.61) (2022-02-26)
+
+**Note:** Version bump only for package @titelmedia/bricks-gallery
+
+
+
+
+
 ## [0.4.59](https://github.com/titel-media/bricks-lerna/compare/v0.4.58...v0.4.59) (2022-02-26)
@@ -8,0 +16,0 @@

dist/galleries/horizontal/index.js

@@ -25,3 +25,4 @@ "use strict";
 const Horizontal = ({
-  items
+  items,
+  scrollContainer
 }) => {
@@ -51,3 +52,3 @@ const tlRef = (0, _react.useRef)(null);
   const buildTimeline = () => {
-    var _containerRef$current, _containerRef$current2;
+    var _containerRef$current;
 
@@ -61,12 +62,18 @@ if (tlRef.current) {
 
+    let scrollTriggerOptions = {
+      trigger: triggerRef.current,
+      start: 'top top',
+      end: `+=${containerRef.current.offsetWidth}`,
+      scrub: true,
+      pin: true
+    };
+
+    if (scrollContainer) {
+      scrollTriggerOptions.scroller = scrollContainer;
+    }
+
     tlRef.current = _all.gsap.timeline({
-      scrollTrigger: {
-        trigger: triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current,
-        start: 'top top',
-        end: `+=${containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.offsetWidth}`,
-        scrub: true,
-        pin: true
-      }
+      scrollTrigger: scrollTriggerOptions
     }).to(containerRef.current, {
-      x: `-${(containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.offsetWidth) - windowSize.width}px`,
+      x: `-${(containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.offsetWidth) - windowSize.width}px`,
       ease: 'power1.inOut'
@@ -84,3 +91,3 @@ });
     lastImgAspectRatio: items[items.length - 1].aspectRatio
-  }, items && items.map((item, i) => {
+  }, items === null || items === void 0 ? void 0 : items.map((item, i) => {
     return _react.default.createElement(_styles.ImageWrapper, {
@@ -87,0 +94,0 @@ key: `image--${i}`,

dist/galleries/smooth-scroll/index.js

@@ -32,11 +32,17 @@ "use strict";
   (0, _react.useEffect)(() => {
+    let scrollTriggerOptions = {
+      trigger: containerRef.current,
+      start: 'top bottom',
+      end: 'bottom top',
+      scrub: true
+    };
+
+    if (scrollContainer) {
+      scrollTriggerOptions.scroller = scrollContainer;
+    }
+
     tlRef.current = _all.gsap.timeline({}).to(imageRef.current, {
       scale: 1.35,
       ease: 'power2.easeInOut',
-      scrollTrigger: {
-        trigger: containerRef.current,
-        start: 'top bottom',
-        end: 'bottom top',
-        scrub: true
-      }
+      scrollTrigger: scrollTriggerOptions
     });
@@ -43,0 +49,0 @@ }, []);

dist/index.js

@@ -10,4 +10,2 @@ "use strict";
 
-var _bricksUtils = require("@titelmedia/bricks-utils");
-
 var _index = require("./galleries/horizontal/index.js");
@@ -25,3 +23,4 @@
   items,
-  galleryType
+  galleryType,
+  scrollContainer
 }) => {
@@ -53,5 +52,6 @@ const getGalleryComponent = () => {
   const GalleryComponent = getGalleryComponent();
-  return _react.default.createElement(_bricksUtils.WindowSizeProvider, null, _react.default.createElement(GalleryComponent, {
-    items: items
-  }));
+  return _react.default.createElement(GalleryComponent, {
+    items: items,
+    scrollContainer: scrollContainer
+  });
 };
@@ -58,0 +58,0 @@

lib/galleries/horizontal/index.js

@@ -1,2 +0,2 @@
-import React, { useRef, useEffect, useContext } from 'react';
+import React, { useRef, useEffect } from 'react';
 import { gsap, ScrollTrigger } from 'gsap/all';
@@ -8,3 +8,3 @@ import { Wrapper, ContainerDiv, Image, ImageWrapper } from './styles';
 
-export const Horizontal = ({ items }) => {
+export const Horizontal = ({ items, scrollContainer }) => {
   const tlRef = useRef(null);
@@ -37,11 +37,18 @@ const containerRef = useRef(null);
 
+    let scrollTriggerOptions = {
+      trigger: triggerRef.current,
+      start: 'top top',
+      end: `+=${containerRef.current.offsetWidth}`,
+      scrub: true,
+      pin: true,
+    };
+
+    // if provided, use this one. if not, not
+    if (scrollContainer) {
+      scrollTriggerOptions.scroller = scrollContainer;
+    }
+
     tlRef.current = gsap
       .timeline({
-        scrollTrigger: {
-          trigger: triggerRef?.current,
-          start: 'top top',
-          end: `+=${containerRef?.current?.offsetWidth}`,
-          scrub: true,
-          pin: true,
-        },
+        scrollTrigger: scrollTriggerOptions,
       })
@@ -63,13 +70,12 @@ .to(containerRef.current, {
           >
-            {items &&
-              items.map((item, i) => {
-                return (
-                  <ImageWrapper
-                    key={`image--${i}`}
-                    aspectRatio={item.aspectRatio}
-                  >
-                    <Image src={item.src} srcSet={item.srcSet} alt={item.src} />
-                  </ImageWrapper>
-                );
-              })}
+            {items?.map((item, i) => {
+              return (
+                <ImageWrapper
+                  key={`image--${i}`}
+                  aspectRatio={item.aspectRatio}
+                >
+                  <Image src={item.src} srcSet={item.srcSet} alt={item.src} />
+                </ImageWrapper>
+              );
+            })}
           </ContainerDiv>
@@ -76,0 +82,0 @@ </Wrapper>

lib/galleries/smooth-scroll/index.js

@@ -14,11 +14,18 @@ import React, { useRef, useEffect } from 'react';
   useEffect(() => {
+    let scrollTriggerOptions = {
+      trigger: containerRef.current,
+      start: 'top bottom',
+      end: 'bottom top',
+      scrub: true,
+    };
+
+    // if provided, use this one. if not, not
+    if (scrollContainer) {
+      scrollTriggerOptions.scroller = scrollContainer;
+    }
+
     tlRef.current = gsap.timeline({}).to(imageRef.current, {
       scale: 1.35,
       ease: 'power2.easeInOut',
-      scrollTrigger: {
-        trigger: containerRef.current,
-        start: 'top bottom',
-        end: 'bottom top',
-        scrub: true,
-      },
+      scrollTrigger: scrollTriggerOptions,
     });
@@ -25,0 +32,0 @@ }, []);

lib/index.js

 import React from 'react';
-import { WindowSizeProvider } from '@titelmedia/bricks-utils';
 import { Horizontal } from './galleries/horizontal/index.js';
@@ -8,3 +7,3 @@ import { Drawer } from './galleries/drawer/index.js';
 
-const Gallery = ({ items, galleryType }) => {
+const Gallery = ({ items, galleryType, scrollContainer }) => {
   const getGalleryComponent = () => {
@@ -32,9 +31,5 @@ let C;
 
-  return (
-    <WindowSizeProvider>
-      <GalleryComponent items={items} />
-    </WindowSizeProvider>
-  );
+  return <GalleryComponent items={items} scrollContainer={scrollContainer} />;
 };
 
 export { Gallery };

package.json

 {
   "name": "@titelmedia/bricks-gallery",
-  "version": "0.4.59",
+  "version": "0.4.61",
   "description": "> TODO: description",
@@ -33,3 +33,3 @@ "author": "highsnob",
   },
-  "gitHead": "58f8be8ccf565936cfa592e8393f5dc2f859dad9"
+  "gitHead": "b885272f02f4ac3021401460b89e4fdd5bdc5172"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

51802

increased by1.95%

Lines of code

653

increased by2.19%

No dependency changes