Skip to content

Instantly share code, notes, and snippets.

@samthor
Last active Aug 11, 2020
Embed
What would you like to do?
<!--
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment