Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@titelmedia/bricks-gallery

Package Overview
Dependencies
Maintainers
11
Versions
176
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@titelmedia/bricks-gallery - npm Package Compare versions

Comparing version 1.0.55 to 1.0.86

8

CHANGELOG.md

@@ -6,2 +6,10 @@ # Change Log

## [1.0.86](https://github.com/titel-media/bricks-lerna/compare/v1.0.85...v1.0.86) (2022-06-09)
**Note:** Version bump only for package @titelmedia/bricks-gallery
## [1.0.55](https://github.com/titel-media/bricks-lerna/compare/v1.0.54...v1.0.55) (2022-05-09)

@@ -8,0 +16,0 @@

90

dist/galleries/drawer/index.js

@@ -8,20 +8,86 @@ "use strict";

var _react = _interopRequireDefault(require("react"));
var _react = _interopRequireWildcard(require("react"));
var _styles = require("./styles");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var _lodash = require("lodash");
var _all = require("gsap/all");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
_all.gsap.registerPlugin(_all.ScrollTrigger);
const Drawer = ({
items
items,
initTimelines,
scrollContainerId
}) => {
return _react.default.createElement(_styles.Container, null, items && items.map((item, i) => {
return _react.default.createElement(_styles.ImageWrapper, {
key: `image--${i}`
}, _react.default.createElement(_styles.Image, {
src: item.src,
srcSet: item.srcSet,
alt: item.src
}));
}));
const itemsRef = (0, _react.useRef)([]);
const tlsRef = (0, _react.useRef)([]);
itemsRef.current = Array(items.length).fill().map((_, i) => itemsRef[i] || (0, _react.createRef)());
tlsRef.current = Array(items.length).fill().map((_, i) => itemsRef[i] || (0, _react.createRef)());
const onResize = () => {
(0, _lodash.forEach)(tlsRef.current, ({
current
}, i) => {
if (current) {
var _current$scrollTrigge;
current === null || current === void 0 ? void 0 : (_current$scrollTrigge = current.scrollTrigger) === null || _current$scrollTrigge === void 0 ? void 0 : _current$scrollTrigge.kill(true);
current === null || current === void 0 ? void 0 : current.pause(0).kill(true);
_all.gsap.set(itemsRef.current[i].current, {
clearProps: true
});
}
});
setTimeout(initTl, 200);
};
const initTl = () => {
if (window.innerWidth >= 768) {
(0, _lodash.forEach)(itemsRef.current, ({
current
}, i) => {
if (i < items.length) {
let scrollTriggerOptions = {
trigger: current,
start: `top 60px`,
end: `+=${i === items.length - 1 ? 0 : window.innerHeight - 60}px`,
pin: current,
scrub: true,
pinSpacing: false
};
if (scrollContainerId && document.querySelector(`#${scrollContainerId}`)) {
scrollTriggerOptions.scroller = document.querySelector(`#${scrollContainerId}`);
}
tlsRef.current[i].current = _all.gsap.timeline({
scrollTrigger: scrollTriggerOptions
});
}
});
}
};
(0, _react.useEffect)(() => {
if (initTimelines === true) {
initTl();
const onResizeDb = (0, _lodash.debounce)(onResize, 200);
window.addEventListener('resize', onResizeDb);
}
}, [initTimelines]);
return _react.default.createElement(_styles.Container, null, items === null || items === void 0 ? void 0 : items.map((item, i) => _react.default.createElement("div", {
ref: itemsRef.current[i],
key: `image--${i}`
}, _react.default.createElement(_styles.ImageWrapper, null, _react.default.createElement(_styles.Image, {
src: item.src,
srcSet: item.srcSet,
alt: item.src
})))));
};

@@ -28,0 +94,0 @@

40

dist/galleries/drawer/styles.js

@@ -10,25 +10,17 @@ "use strict";

var _highsnobiety = require("@titelmedia/bricks-theme/lib/variables/highsnobiety");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const Container = _styledComponents.default.div`
display: flex;
flex-direction: column;
height: 100%;
@media (min-width: 992px) {
//padding-bottom: 100vh;
}
`;
exports.Container = Container;
const ImageWrapper = _styledComponents.default.div`
max-height: calc(100vh - ${_highsnobiety.HEADER_HEIGHT.DESKTOP});
overflow: hidden;
position: sticky;
top: 0;
position: relative;
padding: 0px 16px;
@media (max-width: 1023px) {
position: inherit;
padding: 0px 16px;
img {
margin-top: 10px;
}
@media (min-width: 768px) {
padding: 0px;
height: calc(100vh - 60px);
}

@@ -38,7 +30,17 @@ `;

const Image = _styledComponents.default.img`
object-fit: cover;
min-height: 100%;
min-width: 100%;
margin-top: 8px;
max-width: 100%;
@media (min-width: 768px) {
max-width: none;
margin-top: 0px;
min-height: 100%;
min-width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
}
`;
exports.Image = Image;
//# sourceMappingURL=styles.js.map

@@ -1,17 +0,84 @@

import React from 'react';
import React, { useEffect, useRef, createRef } from 'react';
import { Container, Image, ImageWrapper } from './styles';
import { forEach, debounce } from 'lodash';
import { gsap, ScrollTrigger } from 'gsap/all';
gsap.registerPlugin(ScrollTrigger);
export const Drawer = ({ items }) => {
export const Drawer = ({ items, initTimelines, scrollContainerId }) => {
const itemsRef = useRef([]);
const tlsRef = useRef([]);
itemsRef.current = Array(items.length)
.fill()
.map((_, i) => itemsRef[i] || createRef());
tlsRef.current = Array(items.length)
.fill()
.map((_, i) => itemsRef[i] || createRef());
const onResize = () => {
// console.log(tlRef.current);
// tlRef.current?.pause(0).kill(true);
forEach(tlsRef.current, ({ current }, i) => {
if (current) {
current?.scrollTrigger?.kill(true);
current?.pause(0).kill(true);
gsap.set(itemsRef.current[i].current, { clearProps: true });
}
});
setTimeout(initTl, 200);
};
const initTl = () => {
if (window.innerWidth >= 768) {
//tlRef.current = gsap.timeline();
forEach(itemsRef.current, ({ current }, i) => {
if (i < items.length) {
let scrollTriggerOptions = {
trigger: current,
start: `top 60px`,
end: `+=${i === items.length - 1 ? 0 : window.innerHeight - 60}px`,
pin: current,
scrub: true,
pinSpacing: false,
};
if (
scrollContainerId &&
document.querySelector(`#${scrollContainerId}`)
) {
scrollTriggerOptions.scroller = document.querySelector(
`#${scrollContainerId}`
);
}
// tlRef.current.to(current, {
// scrollTrigger: scrollTriggerOptions,
// });
tlsRef.current[i].current = gsap.timeline({
scrollTrigger: scrollTriggerOptions,
});
}
});
}
};
useEffect(() => {
if (initTimelines === true) {
initTl();
const onResizeDb = debounce(onResize, 200);
window.addEventListener('resize', onResizeDb);
}
}, [initTimelines]);
return (
<Container>
{items &&
items.map((item, i) => {
return (
<ImageWrapper key={`image--${i}`}>
<Image src={item.src} srcSet={item.srcSet} alt={item.src} />
</ImageWrapper>
);
})}
{items?.map((item, i) => (
<div ref={itemsRef.current[i]} key={`image--${i}`}>
<ImageWrapper>
<Image src={item.src} srcSet={item.srcSet} alt={item.src} />
</ImageWrapper>
</div>
))}
</Container>
);
};
import styled from 'styled-components';
import { HEADER_HEIGHT } from '@titelmedia/bricks-theme/lib/variables/highsnobiety';
//import { HEADER_HEIGHT } from "@titelmedia/bricks-theme/lib/variables/highsnobiety";
export const Container = styled.div`
display: flex;
flex-direction: column;
height: 100%;
@media (min-width: 992px) {
//padding-bottom: 100vh;
}
`;
export const ImageWrapper = styled.div`
max-height: calc(100vh - ${HEADER_HEIGHT.DESKTOP});
overflow: hidden;
position: sticky;
top: 0;
position: relative;
padding: 0px 16px;
@media (max-width: 1023px) {
position: inherit;
padding: 0px 16px;
img {
margin-top: 10px;
}
@media (min-width: 768px) {
padding: 0px;
height: calc(100vh - 60px);
}

@@ -27,5 +21,15 @@ `;

export const Image = styled.img`
object-fit: cover;
min-height: 100%;
min-width: 100%;
`;
margin-top: 8px;
max-width: 100%;
@media (min-width: 768px) {
max-width: none;
margin-top: 0px;
min-height: 100%;
min-width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
}
`;
{
"name": "@titelmedia/bricks-gallery",
"version": "1.0.55",
"version": "1.0.86",
"description": "> TODO: description",

@@ -33,3 +33,3 @@ "author": "highsnob",

},
"gitHead": "befb6a0c4f1c934806fee71a8b70d221c3977988"
"gitHead": "038544578d2e6c977893cb746c37ba629b2b1790"
}

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc