Published
Edited
Aug 24, 2018
3 stars
carousel = {
return {
orderArr: [...Array(carouselItems).keys()], // var defined below
firstIndex: 0,
windowSize, // count of carousel items
// We want to keep one of the previous carousel items around (hence the -1)
moveAmount: windowSize - 1,
};
}
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');
}
rotate = require('https://bundle.run/rotate-array@1.1.0')
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,
};
}
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;
}
function move(carousel) {
return {
...carousel,
firstIndex: carousel.nextFirstIndex,
}
}
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;
}
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.
