31: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; }32:[] 2f:{"title":"Variable-length, sortable list input","cells":[{"id":0,"value":"md`# Variable-length, sortable list input`","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"aListOfItems","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"viewof aListOfItems = listOfItems(['a', 'b', 'c'], 'whipit')","pinned":false,"hidden":false,"mode":"ojs"},{"id":192,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}