2d:null 2e:["$","title",null,{"children":"Variable-length, sortable list input | Eric Portis | Observable"}] 33:T1648,function listOfItems( inputArray = [], className = '' ) { // utilities const randomString = () => { const s = Math.random().toString(36).replace(/[^a-z]+/g, ''); if (s.length < 3) { // there's a chance return randomString(); // do over } return s; }, selfOrNearestAncestorMatchingSelector = ( element, selector ) => { if ( element.matches( selector ) ) { return element; } else if ( element === document.body.rootNode ) { return null; } return selfOrNearestAncestorMatchingSelector( element.parentNode, selector ); }; // drag and drop const dragStart = ( e ) => { // e.target is the e.target.parentNode.classList.add( 'gettinDragged' ); // pointer-events: none on everything inside any of the LI drop targets // otherwise these children buttons/inputs trigger dragleave on the LI when drag-hovered // https://stackoverflow.com/a/18582960/6411742 theList.classList.add( 'somethingsBeingDragged' ); e.dataTransfer.effectAllowed = 'move'; e.dataTransfer.setData('text/plain', e.target.parentNode.getAttribute( 'id' ) ); e.dataTransfer.setDragImage( e.target.parentNode, 0, 0 ); }, dragEnd = ( e ) => { // e.target is the e.target.parentNode.classList.remove( 'gettinDragged' ); theList.classList.remove( 'somethingsBeingDragged' ); }, dragEnter = ( e ) => { e.preventDefault(); // Necessary. Allows us to drop. e.target.classList.add( 'dragHover' ); }, dragOver = ( e ) => { e.preventDefault(); // Necessary. Allows us to drop. e.dataTransfer.dropEffect = 'move'; // ? return false; }, dragLeave = ( e ) => { e.target.classList.remove( 'dragHover' ); }, drop = ( e ) => { e.target.classList.remove( 'dragHover' ); const draggedNode = document.getElementById( e.dataTransfer.getData('text/plain') ); e.target.parentNode.insertBefore( draggedNode, e.target ); updateListValue(); return false; }; // list stuff const editableList = html` `, addButton = editableList.querySelector( '.addButton' ), theList = editableList.querySelector( '.theList' ), templateItem = html`

≡

`, updateListValue = () => { const inputs = [ ...editableList .querySelectorAll( '.itemInput:not(.lastDropTarget > .itemInput)' ) ]; editableList.value = inputs.map( i => i.value ); editableList.dispatchEvent( new CustomEvent( 'input' ) ); // https://observablehq.com/@tmcw/exploring-viewof }, mintANewItem = () => { const newItem = templateItem.cloneNode( true ); newItem.setAttribute( 'id', randomString() ); newItem.querySelector( 'input' ).addEventListener( 'input', updateListValue ); newItem.querySelector( '.deleteButton' ).addEventListener( 'click', ( e ) => { e.preventDefault(); theList.removeChild( e.target.parentNode ); updateListValue(); } ); const grabber = newItem.querySelector( '.grabber' ); grabber.addEventListener( 'dragstart', dragStart ); grabber.addEventListener( 'dragend', dragEnd ); newItem.addEventListener( 'dragenter', dragEnter ); newItem.addEventListener( 'dragover', dragOver ); newItem.addEventListener( 'dragleave', dragLeave ); newItem.addEventListener( 'drop', drop ); return newItem; }, addANewItem = ( value = '' ) => { const newItem = mintANewItem(); newItem.querySelector( '.itemInput' ).setAttribute('value', value ); theList.insertBefore( newItem, lastDropTarget ); updateListValue(); }; // make the invisible last drop target const lastDropTarget = mintANewItem(); lastDropTarget.classList.add('lastDropTarget'); theList.appendChild( lastDropTarget ); // activate the add button addButton.addEventListener( 'click', ( e ) => { e.preventDefault(); addANewItem(); updateListValue(); } ); if (inputArray.length > 0) { for ( const itemValue of inputArray ) { addANewItem( itemValue ); } } else { // start off with one blank item addANewItem(); } updateListValue(); return editableList; }34:[] 31:{"id":"5407a0e65f60e3eb","slug":"variable-length-sortable-list-input","title":"Variable-length, sortable list input","thumbnail":"f534cab1b755e7d27e9682fd66ef733f207b1d863c902c7a591eec1bca74dc55","access_level":"public","create_time":"$D2020-07-21T17:30:16.607Z","update_time":"$D2020-08-21T22:27:01.515Z","view_time":null,"first_public_time":"$D2020-07-23T15:48:40.449Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"3301827868803b5f","login":"eeeps","name":"Eric Portis","avatar_url":"https://avatars-next.observableusercontent.com/d9d2bbfe6f3f798e9ec8f3a91e0c10b7f6890314fd52f40e190022e173d838a9","tier":"starter_2024"},"version":204,"publish_version":204,"role":null,"authored":false,"authors":[{"type":"individual","id":"641c0f2eb3a762f9","login":"eeeps","name":"Eric Portis","avatar_url":"https://avatars-next.observableusercontent.com/d9d2bbfe6f3f798e9ec8f3a91e0c10b7f6890314fd52f40e190022e173d838a9","tier":null}],"members":[{"type":"individual","id":"641c0f2eb3a762f9","login":"eeeps","name":"Eric Portis","avatar_url":"https://avatars-next.observableusercontent.com/d9d2bbfe6f3f798e9ec8f3a91e0c10b7f6890314fd52f40e190022e173d838a9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Variable-length, sortable list input","cells":[{"id":0,"value":"md`# Variable-length, sortable list input`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"aListOfItems","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"viewof aListOfItems = listOfItems(['a', 'b', 'c'], 'whipit')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"