@titelmedia/bricks-gallery
Advanced tools
Comparing version 1.0.55 to 1.0.86
@@ -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 @@ |
@@ -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 @@ |
@@ -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
67539
778