Published
Edited
Aug 24, 2018
3 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
function hasRoom(direction, carousel) {
const { orderArr, firstIndex, moveAmount, windowSize } = carousel;
if (direction === 'left') {
return firstIndex - moveAmount >= 0;
} else if (direction === 'right') {
const indexOfFirstItemAfterMoving = firstIndex + moveAmount;
const itemsAfterFirstItem = moveAmount; // or windowSize - 1
const indexOfLastItemAfterMoving = indexOfFirstItemAfterMoving + itemsAfterFirstItem;
return indexOfLastItemAfterMoving <= orderArr.length - 1;
}
throw new Error('Illegal direction');
}
Insert cell
Insert cell
rotate = require('https://bundle.run/rotate-array@1.1.0')
Insert cell
Insert cell
Insert cell
Insert cell
function prepareMove(direction, carousel) {
const { orderArr, firstIndex, moveAmount, windowSize } = carousel;
const mapDirectionToMultiplier = {
left: -1,
right: 1,
};
const directionMultiplier = mapDirectionToMultiplier[direction];
// Do nothing if no room to move
if (orderArr.length <= windowSize) {
return carousel;
}
// Nudge in the intended direction if rotating items to new destination would cause a temporary empty gap
if (orderArr.length <= moveAmount * 2) {
return {
...carousel,
nextFirstIndex: directionMultiplier < 0 ? 0 : orderArr.length - windowSize,
};
}
// Move in intended direction
if (hasRoom(direction, carousel)) {
return {
...carousel,
nextFirstIndex: firstIndex + moveAmount * directionMultiplier,
};
}
// Rotate items so we can move where we want (and therefore get the infinite carousel
return {
...carousel,
orderArr: rotate([...orderArr], moveAmount * directionMultiplier),
firstIndex: firstIndex - moveAmount * directionMultiplier,
nextFirstIndex: firstIndex,
};
}
Insert cell
function canGo(direction, carousel) {
const { orderArr, firstIndex, windowSize, moveAmount } = carousel;
if (orderArr.length <= windowSize) {
return false;
}
if (orderArr.length <= moveAmount * 2) {
const nextFirstIndex = direction === 'left' ? 0 : orderArr.length - windowSize;
return firstIndex !== nextFirstIndex;
}
return true;
}
Insert cell
Insert cell
function move(carousel) {
return {
...carousel,
firstIndex: carousel.nextFirstIndex,
}
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
function reactCarousel(config) {
class Carousel extends React.Component {
constructor(props) {
super(props);
// TODO: there's a lot more in the state than there should be, but that's a side effect of
// prepareMove() and move() and their depenedants are defined.
this.state = {
windowSize: config.windowSize, // count of carousel items
// We want to keep one of the previous carousel items around (hence the -1)
moveAmount: config.windowSize - 1,
orderArr: createItems(config.carouselItems),
firstIndex: 0,
nextFirstIndex: 0,
};
this.go = this.go.bind(this);
}
go(direction) {
this.setState(
carouselState => ({
// Just in case there's other state in the carousel that we don't want to modify
...prepareMove(direction, carouselState)
}),
() => {
setTimeout(() => {
this.setState(state => ({ ...move(state) }));
}, config.isDebugging ? 300 : 0);
}
);
}
render() {
const { firstIndex, nextFirstIndex, windowSize } = this.state;
const itemWidth = 1 / windowSize * 100;
// STYLES
// ------
const windowStyle = config.isDebugging
? {
boxSizing: 'border-box',
width: '40%',
margin: '20px auto',
position: 'relative',
}
: {
boxSizing: 'border-box',
overflow: 'hidden',
};
const windowBorderStyle = config.isDebugging ? {
content: '',
position: 'absolute',
left: 0,
top: 0,
width: '100%',
height: '100%',
outline: '8px solid gray',
} : null;
const itemsStyle = {
boxSizing: 'border-box',
display: 'flex',
width: '100%',
transform: `translateX(${-firstIndex * itemWidth}%)`,
transitionDuration: firstIndex === nextFirstIndex ? (config.isDebugging ? '600ms' : '400ms') : '0ms',
transitionProperty: 'all',
transitionTimingFunction: 'ease-in-out',
};
const itemStyle = index => {
return {
boxSizing: 'border-box',
fontFamily: 'system-ui',
fontSize: 40,
flexShrink: 0,
flexGrow: 1,
width: `${itemWidth}%`,
fontWeight: 'bold',
background: 'linear-gradient(to bottom right, #333, black)',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
padding: 20,
};
};
const buttonStyle = direction => ({
opacity: canGo(direction, this.state) ? 1 : 0.5,
width: '50%',
fontSize: 40,
});
// SHORTHAND HELPERS
// ------
const div = (style, children) => React.createElement('div', { style }, children);
const button = (props, children) => React.createElement('button', props, children);
// DOM
// ---
return (
div(null, [
div(windowStyle, [
div(itemsStyle,
this.state.orderArr.map((item, i) =>
div(itemStyle(i), item)
)
),
div(windowBorderStyle, '')
]),
button({ onClick: () => this.go('left'), style: buttonStyle('left') }, '👈'),
button({ onClick: () => this.go('right'), style: buttonStyle('right') }, '👉'),
config.isDebugging && `transform: translateX(${-firstIndex * itemWidth}%)`,
])
);
}
}
// Instantiate the carousel and render it
// ---
let parent = html`<div>`;
ReactDOM.render(React.createElement(Carousel), parent);
return parent;
}
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more