2d:null 2e:["$","title",null,{"children":"Wrapping Carousels | Mark Miro | Observable"}] 33:T4f1,function render(carousel) { const { orderArr, firstIndex, nextFirstIndex, moveAmount, windowSize } = carousel; const itemWidth = 1 / windowSize * 100; const carouselWindowStyle = ` width: 40%; outline: 6px solid gray; margin: 6px auto; `; const carouselItemsStyle = ` box-sizing: border-box; display: flex; width: 100%; background: rgba(0,0,0,0.1); transform: translateX(${-firstIndex * itemWidth}%); `; const itemStyle = (item, index) => { return ` opacity: ${index >= firstIndex && index <= firstIndex + moveAmount ? 1 : 0.4}; box-sizing: border-box; flex-shrink: 0; flex-grow: 1; width: ${itemWidth}%; font-weight: bold; background: linear-gradient(to bottom right, #333, black); color: ${index === nextFirstIndex && index !== firstIndex ? 'tomato' : 'white'}; display: flex; justify-content: center; align-items: center; font-family: system-ui; padding: 10px; `; }; const htmlCarousel = html`

${orderArr.map((item, i) => `

${item}

` )}

`; return htmlCarousel; }34:T675,function prepareMoveAttempt1(direction, carousel) { const shouldRotate = !hasRoom(direction, carousel); if (direction === 'left') { if (shouldRotate) { return { ...carousel, // orderArr: [5, 6, 7, 0, 1, 2, 3, 4], // expected result orderArr: rotate([...carousel.orderArr], -(carousel.moveAmount)), // firstIndex: 3, firstIndex: carousel.firstIndex + carousel.moveAmount, // nextFirstIndex: 0 nextFirstIndex: carousel.firstIndex, }; } else { return { ...carousel, nextFirstIndex: carousel.firstIndex - carousel.moveAmount, }; } } else if (direction === 'right') { const nextFirstIndex = carousel.firstIndex + carousel.moveAmount; if (shouldRotate) { // calling "right" twice gets us here and we need to rotate now return { ...carousel, // orderArr: [3, 4, 5, 6, 7, 0, 1, 2], // rotate by moving the first 3 items to the beginning // [0, 1, 2, 3, 4, 5, 6, 7] orderArr: rotate([...carousel.orderArr], carousel.moveAmount), // firstIndex: 0, // 3 - 3 firstIndex: carousel.firstIndex - carousel.moveAmount, // nextFirstIndex: 3 nextFirstIndex: carousel.firstIndex, }; } else { // first call (to "right") goes here since we have enough room to move without rotating return { ...carousel, // orderArr: [0, 1, 2, 3, 4, 5, 6, 7], // firstIndex: 0, // nextFirstIndex: 3, nextFirstIndex: carousel.firstIndex + carousel.moveAmount, }; } } else { throw new Error('Invalid direction'); } }35:T453,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, }; }36:Te92,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`

`; ReactDOM.render(React.createElement(Carousel), parent); return parent; }37:[] 31:{"id":"c15b6f87042001d8","slug":"wrapping-carousel-math","title":"Wrapping Carousels","thumbnail":"8f80ccf21947054d1a11d586ee5fc24e2e1834203c43f622c35cecc963219983","access_level":"public","create_time":"$D2018-08-24T08:24:58.243Z","update_time":"$D2018-08-27T17:56:28.258Z","view_time":null,"first_public_time":"$D2018-08-24T09:00:52.522Z","has_unpublished_edits":null,"fork":true,"stars":3,"starred":false,"owner":{"type":"team","id":"cafa66cb4f6bbd68","login":"markmiro","name":"Mark Miro","avatar_url":"https://avatars-next.observableusercontent.com/880fb4810c38a7b8ee72ab8a6dccfc876dea11af7d527ceeb687bd0b9772b2fb","tier":"starter_2024"},"version":1092,"publish_version":1092,"role":null,"authored":false,"authors":[{"type":"individual","id":"1e3c56e6b5991cba","login":"markmiro","name":"Mark Miro","avatar_url":"https://avatars-next.observableusercontent.com/880fb4810c38a7b8ee72ab8a6dccfc876dea11af7d527ceeb687bd0b9772b2fb","tier":null}],"members":[{"type":"individual","id":"1e3c56e6b5991cba","login":"markmiro","name":"Mark Miro","avatar_url":"https://avatars-next.observableusercontent.com/880fb4810c38a7b8ee72ab8a6dccfc876dea11af7d527ceeb687bd0b9772b2fb","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Wrapping Carousels","cells":[{"id":0,"value":"md`# Wrapping Carousels`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":897,"value":"reactCarousel({ isDebugging: false, windowSize, carouselItems })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"md`Let's say we want to have a carousel display *n* elements. When the user clicks left or right we want to shift the elements. We want it to be a wrapping carousel so that when you get to the end, it will take you back to the beginning.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"orderArr = [0, 1, 2, 3, 4, 5, 6, 7]\n// orderArr = 'ABCDEFGH'.split('')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"md`We also have a window that displays the carousel items. Of course it can only fit a certain amount of cards. Let's assume all items are the same size.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"md`Let's pick a default window size of ${windowSize}.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"md`Now we have a carousel that displays: ${orderArr.slice(0, windowSize).join(', ')}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"md`To move right, we animate the carousel items so that ${orderArr[windowSize - 1]} is the first item. However, moving left is more complicated. 0 is the first item, but now we want it to be the last item that's visible in the view.\n\nHe're a little chart to help it all make sense:\n

\n   [0123]4567\nmove right:\n012[3456]7\nmove left:\nIMPOSSIBLE! We need to wrap the array somehow like this:\n   [5670]1234\n

\n\nThe main point here is that before do an animated transition, we want to do a few things:\n1. Figure out where we want to go next\n2. See if there are items in that direction so we can animate directly to it\n3. If there aren't enough items, then we want to rotate the array to make room\n4. If we rotated, then we want to move the window position so the user doesn't notice anything\n5. Do the animation\n` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":318,"value":"md`Let's define the carousel object. This will contain the carousel state (if you're thinking in React):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"carousel = {\n return {\n orderArr: [...Array(carouselItems).keys()], // var defined below\n firstIndex: 0,\n windowSize, // count of carousel items\n // We want to keep one of the previous carousel items around (hence the -1)\n moveAmount: windowSize - 1,\n };\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":394,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":927,"value":"render(carousel)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"md`Now that we have our state object, let's define some functions that take the state and return a new state.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":328,"value":"md`# Functions\nSometimes we won't have enough room in the direction we want the carousel to go. We want to be able to check this, so let's write a function for it.\n\nChecking if we hit the left wall is easy. Checking the right wall is harder. We want to know that we will have enough room on the right even after we move.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"function hasRoom(direction, carousel) {\n const { orderArr, firstIndex, moveAmount, windowSize } = carousel;\n if (direction === 'left') {\n return firstIndex - moveAmount >= 0;\n } else if (direction === 'right') {\n const indexOfFirstItemAfterMoving = firstIndex + moveAmount;\n const itemsAfterFirstItem = moveAmount; // or windowSize - 1\n const indexOfLastItemAfterMoving = indexOfFirstItemAfterMoving + itemsAfterFirstItem;\n return indexOfLastItemAfterMoving <= orderArr.length - 1;\n }\n throw new Error('Illegal direction');\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":348,"value":"md`Reordering and animating in one React state transition might be tricky. Let's try to break it up into two pieces. We'll reorder in one state transition, and then do the move in another.\n\nNow let's try to figure out how to move. I can think of two ways to do the move logic.\n1. One way is to have a *prepareMove* function that reorders the array if necessary and updates the *firstIndex* in the window and the next index we expect to be at after the move. We still need a function for resetting *nextFirstIndex* for after the move has been made.\n2. Another way is to have one function for doing array rotation / updating the *firstIndex* and second function for doing the move.\n\nThey both have their tradeoffs, so let's go with option 1.\n\nLet's use the *rotate-array* library to handle array rotation so we don't have to.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"rotate = require('https://bundle.run/rotate-array@1.1.0')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"md`My first attempt at a *prepareMove* function involves being really verbose. I first had it return the expected state at first and then later made it return a calculated state. Uncollapse the function below to see it.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":371,"value":"md`You can probably see that *prepareMoveAttempt1* has some opportunity for deduplication. Much of the difference in logic between moving left and right is all about whether we add vs. subtract. Let's simplify the code a little bit by creating a *directionMultiplier* that is -1 when going left and 1 when going right. The resulting function no longer needs a conditional to check if we're going left or right. We apply the same logic to both. *prepareMove* is the resulting function below.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":292,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1060,"value":"function canGo(direction, carousel) {\n const { orderArr, firstIndex, windowSize, moveAmount } = carousel;\n \n if (orderArr.length <= windowSize) {\n return false;\n }\n \n if (orderArr.length <= moveAmount * 2) {\n const nextFirstIndex = direction === 'left' ? 0 : orderArr.length - windowSize;\n return firstIndex !== nextFirstIndex;\n }\n \n return true;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":383,"value":"md`After we're done animating, we want to set the *firstIndex* to the *nextFirstIndex*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"function move(carousel) {\n return {\n ...carousel,\n firstIndex: carousel.nextFirstIndex,\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"md`## Move left 1x`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":870,"value":"render(carousel)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"carouselLeft = prepareMove('left', carousel)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":495,"value":"render(carouselLeft)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":548,"value":"render(move(carouselLeft))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"md`## Move left 2x`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"carouselLeftLeft = prepareMove('left', move(carouselLeft))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":511,"value":"render(carouselLeftLeft)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":555,"value":"render(move(carouselLeftLeft))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"md`## Start over and move right 1x`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"carouselRight = prepareMove('right', carousel)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":515,"value":"render(carouselRight)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":557,"value":"render(move(carouselRight))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":257,"value":"md`## Move Right 2x`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":544,"value":"carouselRightRight = prepareMove('right', move(carouselRight))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":559,"value":"render((carouselRightRight))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":534,"value":"render(move(carouselRightRight))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":585,"value":"r = require.alias({\n \"react\": \"react@16/umd/react.production.min.js\",\n \"react-dom\": \"react-dom@16/umd/react-dom.production.min.js\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":606,"value":"md`## Using React`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":613,"value":"md`It's gonna look a little messy because it's [not fully supported](https://beta.observablehq.com/@tmcw/state-of-react-in-observable) in Observable yet`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":601,"value":"ReactDOM = r('react-dom')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":604,"value":"React = r('react')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":774,"value":"viewof isDebugging = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":779,"value":"viewof carouselItems = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1081,"value":"carouselItems","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":796,"value":"viewof windowSize = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1083,"value":"windowSize","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":906,"value":"reactCarousel({ isDebugging, windowSize, carouselItems })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1054,"value":"function createItems(amount) {\n return ['😀', '🦄', '☘️', '👽', '😂', '🍄', '🌎', '🤖'].slice(0, amount);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":592,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 32:"$31:body"