samthor/notes.html

## notes.html
<!--
  Copyright 2020 Google LLC.

  Licensed under the Apache License, Version 2.0 (the "License"); you may not
  use this file except in compliance with the License. You may obtain a copy of
  the License at

      http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
  WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
  License for the specific language governing permissions and limitations under
  the License.
-->
<!DOCTYPE html>
<html>
<head>

<style>
body {
  font-family: -apple-system,system-ui,BlinkMacSystemFont,'Helvetica Neue','Arial',sans-serif;
  font-weight: 400;
  line-height: 18px;
  font-size: 14px;
  margin: 12px;
}

main {
  margin: -4px;
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
}

article {
  background: #fcc;
  display: inline-block;
  width: 200px;
  border: 2px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  margin: 4px;
  min-height: 160px;
}

article.dragged {
  opacity: 0.2;
  border: 2px dashed black;
}
article.dragged > * {
  visibility: hidden;
}

.edit {
  white-space: pre-line;
  border: none;
  resize: none;
  background: transparent;
  display: block;
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
  cursor: inherit;
  font: inherit;
  min-height: 160px;
}
.edit:focus {
  cursor: text;
}

</style>

<script type="module">
import {Undoer} from 'https://unpkg.com/undoer';

const generateNotesList = () => {
  return Array.from(main.children);  // call Array.from to *copy*, not reference, NodeList
};

// Provides the logic which is called when undo/redo is called.
const undoer = new Undoer((data) => {
  main.textContent = '';
  main.append(...data);
}, generateNotesList());

// Create a new note when the button is clicked.
create.addEventListener('click', () => {
  const articleEl = Object.assign(document.createElement('article'), {
    draggable: true,
  });
  const textareaEl = Object.assign(document.createElement('textarea'), {
    className: 'edit',
  });

  articleEl.append(textareaEl);
  main.append(articleEl);

  // allow me to remove the note I just created
  undoer.push(generateNotesList());
});


let activeDraggedNote = null;

main.addEventListener('dragstart', (event) => {
  window.requestAnimationFrame(() => {
    // Delay this by a frame, so we screenshot the previous version.
    event.target.classList.add('dragged');
  });
  activeDraggedNote = event.target;
});

main.addEventListener('dragend', (event) => {
  event.target.classList.remove('dragged');
  activeDraggedNote = null;
});


// This is the meat of the reorder logic: when the note moves over another, replace it with this new note.
main.addEventListener('dragover', (event) => {
  if (!activeDraggedNote) {
    return;
  }
  const dragOver = event.target.closest('article[draggable]');
  if (!dragOver) {
    return;
  }
  event.preventDefault();

  const compareResult = activeDraggedNote.compareDocumentPosition(dragOver);
  const isBefore = (compareResult & Node.DOCUMENT_POSITION_PRECEDING);

  const parent = activeDraggedNote.parentNode;
  if (isBefore) {
    parent.insertBefore(activeDraggedNote, dragOver);
  } else {
    parent.insertBefore(activeDraggedNote, dragOver.nextElementSibling);
  }
});

// We don't really do anything on drop, except push an event into the undo/redo stack.
main.addEventListener('drop', (event) => {
  if (!activeDraggedNote) {
    return;
  }
  undoer.push(generateNotesList());
});

// This ensures that the textarea grows to fit content. This doesn't happen for free :(
document.addEventListener('input', (ev) => {
  if (ev.target.localName !== 'textarea') {
    return;
  }

  const clone = document.createElement('div');
  clone.className = 'edit';
  clone.textContent = `&nbsp;${ev.target.value}&nbsp;`;
  ev.target.parentNode.append(clone);
  ev.target.style.height = `${clone.offsetHeight}px`;
  clone.remove();
});

document.body.querySelectorAll('textarea').forEach((el) => {
  el.dispatchEvent(new CustomEvent('input', {bubbles: true}));
});


// If the user right-clicks on an article, select its contents!
document.body.addEventListener('contextmenu', (ev) => {
  const t = ev.target.closest('article');
  if (!t) {
    return;
  }

  t.style.userSelect = 'auto';
  selectNode(t);
  window.requestAnimationFrame(() => {
    t.style.userSelect = 'none';
  });
});

function selectNode(node) {
  const s = window.getSelection();
  s.removeAllRanges();
  s.selectAllChildren(node);
}
</script>

</head>
<body>

<p>
  <strong>Info</strong>: drag and drop notes to rearrange. Use your browser's undo and redo actions to&hellip; undo and redo.
</p>

<p>
  <button id="create">Create New Note</button>
</p>

<main id="main">

  <article draggable="true">
    <textarea class="edit">- milk
- chocolate
- icecream
- bananas
- a toaster
- greenland</textarea>
  </article>

  <article draggable="true" style="background: #cfc">
    <textarea class="edit">Another Note</textarea>
  </article>

</main>

</body>
</html>
	<!--
	Copyright 2020 Google LLC.

	Licensed under the Apache License, Version 2.0 (the "License"); you may not
	use this file except in compliance with the License. You may obtain a copy of
	the License at

	http://www.apache.org/licenses/LICENSE-2.0

	Unless required by applicable law or agreed to in writing, software
	distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
	WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
	License for the specific language governing permissions and limitations under
	the License.
	-->
	<!DOCTYPE html>
	<html>
	<head>

	<style>
	body {
	font-family: -apple-system,system-ui,BlinkMacSystemFont,'Helvetica Neue','Arial',sans-serif;
	font-weight: 400;
	line-height: 18px;
	font-size: 14px;
	margin: 12px;
	}

	main {
	margin: -4px;
	display: flex;
	flex-flow: row wrap;
	align-items: flex-start;
	}

	article {
	background: #fcc;
	display: inline-block;
	width: 200px;
	border: 2px solid transparent;
	border-radius: 8px;
	cursor: pointer;
	position: relative;
	margin: 4px;
	min-height: 160px;
	}

	article.dragged {
	opacity: 0.2;
	border: 2px dashed black;
	}
	article.dragged > * {
	visibility: hidden;
	}

	.edit {
	white-space: pre-line;
	border: none;
	resize: none;
	background: transparent;
	display: block;
	width: 100%;
	padding: 8px;
	box-sizing: border-box;
	cursor: inherit;
	font: inherit;
	min-height: 160px;
	}
	.edit:focus {
	cursor: text;
	}

	</style>

	<script type="module">
	import {Undoer} from 'https://unpkg.com/undoer';

	const generateNotesList = () => {
	return Array.from(main.children); // call Array.from to copy, not reference, NodeList
	};

	// Provides the logic which is called when undo/redo is called.
	const undoer = new Undoer((data) => {
	main.textContent = '';
	main.append(...data);
	}, generateNotesList());

	// Create a new note when the button is clicked.
	create.addEventListener('click', () => {
	const articleEl = Object.assign(document.createElement('article'), {
	draggable: true,
	});
	const textareaEl = Object.assign(document.createElement('textarea'), {
	className: 'edit',
	});

	articleEl.append(textareaEl);
	main.append(articleEl);

	// allow me to remove the note I just created
	undoer.push(generateNotesList());
	});



	let activeDraggedNote = null;

	main.addEventListener('dragstart', (event) => {
	window.requestAnimationFrame(() => {
	// Delay this by a frame, so we screenshot the previous version.
	event.target.classList.add('dragged');
	});
	activeDraggedNote = event.target;
	});

	main.addEventListener('dragend', (event) => {
	event.target.classList.remove('dragged');
	activeDraggedNote = null;
	});


	// This is the meat of the reorder logic: when the note moves over another, replace it with this new note.
	main.addEventListener('dragover', (event) => {
	if (!activeDraggedNote) {
	return;
	}
	const dragOver = event.target.closest('article[draggable]');
	if (!dragOver) {
	return;
	}
	event.preventDefault();

	const compareResult = activeDraggedNote.compareDocumentPosition(dragOver);
	const isBefore = (compareResult & Node.DOCUMENT_POSITION_PRECEDING);

	const parent = activeDraggedNote.parentNode;
	if (isBefore) {
	parent.insertBefore(activeDraggedNote, dragOver);
	} else {
	parent.insertBefore(activeDraggedNote, dragOver.nextElementSibling);
	}
	});

	// We don't really do anything on drop, except push an event into the undo/redo stack.
	main.addEventListener('drop', (event) => {
	if (!activeDraggedNote) {
	return;
	}
	undoer.push(generateNotesList());
	});

	// This ensures that the textarea grows to fit content. This doesn't happen for free :(
	document.addEventListener('input', (ev) => {
	if (ev.target.localName !== 'textarea') {
	return;
	}

	const clone = document.createElement('div');
	clone.className = 'edit';
	clone.textContent = ` ${ev.target.value} `;
	ev.target.parentNode.append(clone);
	ev.target.style.height = `${clone.offsetHeight}px`;
	clone.remove();
	});

	document.body.querySelectorAll('textarea').forEach((el) => {
	el.dispatchEvent(new CustomEvent('input', {bubbles: true}));
	});


	// If the user right-clicks on an article, select its contents!
	document.body.addEventListener('contextmenu', (ev) => {
	const t = ev.target.closest('article');
	if (!t) {
	return;
	}

	t.style.userSelect = 'auto';
	selectNode(t);
	window.requestAnimationFrame(() => {
	t.style.userSelect = 'none';
	});
	});

	function selectNode(node) {
	const s = window.getSelection();
	s.removeAllRanges();
	s.selectAllChildren(node);
	}
	</script>

	</head>
	<body>

	<p>
	<strong>Info</strong>: drag and drop notes to rearrange. Use your browser's undo and redo actions to… undo and redo.
	</p>

	<p>
	<button id="create">Create New Note</button>
	</p>

	<main id="main">

	<article draggable="true">
	<textarea class="edit">- milk
	- chocolate
	- icecream
	- bananas
	- a toaster
	- greenland</textarea>
	</article>

	<article draggable="true" style="background: #cfc">
	<textarea class="edit">Another Note</textarea>
	</article>

	</main>

	</body>
	</html>