Skip to content

Instantly share code, notes, and snippets.

@nashingofteeth

nashingofteeth/outliner.html

Last active December 16, 2015 16:39
Show Gist options
  • Save nashingofteeth/552c44719603473c7599 to your computer and use it in GitHub Desktop.
Save nashingofteeth/552c44719603473c7599 to your computer and use it in GitHub Desktop.
Download ZIP
simple outliner
Raw
outliner.html
<script>
document.onkeydown = function(evt) {
evt = evt || window.event;
if (evt.ctrlKey && evt.keyCode == 13) {
evt.preventDefault();
pasteHtmlAtCaret('<li style="margin-left: 15px;"> </li>');
}
if (evt.altKey && evt.keyCode == 13) {
evt.preventDefault();
pasteHtmlAtCaret('<li style="margin-left: -15px;"> </li>');
}
if (evt.keyCode == 27) {
evt.preventDefault();
document.body.innerHTML = '<li> </li>';
}
};
function pasteHtmlAtCaret(html) {
var sel, range;
if (window.getSelection) {
// IE9 and non-IE
sel = window.getSelection();
if (sel.getRangeAt && sel.rangeCount) {
range = sel.getRangeAt(0);
range.deleteContents();
// Range.createContextualFragment() would be useful here but is
// non-standard and not supported in all browsers (IE9, for one)
var el = document.createElement("div");
el.innerHTML = html;
var frag = document.createDocumentFragment(), node, lastNode;
while ( (node = el.firstChild) ) {
lastNode = frag.appendChild(node);
}
range.insertNode(frag);
// Preserve the selection
if (lastNode) {
range = range.cloneRange();
range.setStartAfter(lastNode);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
}
}
} else if (document.selection && document.selection.type != "Control") {
// IE < 9
document.selection.createRange().pasteHTML(html);
}
}
</script>
<body autofocus contenteditable>
<li>Ctrl-Enter: add indent; Alt-Enter: remove indent</li>
</body>
Raw
sortable.html
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script><script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<body contenteditable autofocus>
<ul id="sortable">
<li>make a list</li>
</ul>
</body>
<script>
$(window).keydown(function(event) {
if(event.ctrlKey && event.keyCode == 13) {
pasteHtmlAtCaret('<li style="margin-left: 15px;"> </li>');
return false;
event.preventDefault();
}
if(event.altKey && event.keyCode == 13) {
pasteHtmlAtCaret('<li style="margin-left: -15px;"> </li>');
return false;
event.preventDefault();
}
if (event.keyCode == 27) {
$(function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
});
return false;
event.preventDefault();
}
/*if (event.keyCode == 13) {
pasteHtmlAtCaret('<li> </li>');
return false;
}*/
});
function pasteHtmlAtCaret(html) {
var sel, range;
if (window.getSelection) {
// IE9 and non-IE
sel = window.getSelection();
if (sel.getRangeAt && sel.rangeCount) {
range = sel.getRangeAt(0);
range.deleteContents();
// Range.createContextualFragment() would be useful here but is
// non-standard and not supported in all browsers (IE9, for one)
var el = document.createElement("div");
el.innerHTML = html;
var frag = document.createDocumentFragment(), node, lastNode;
while ( (node = el.firstChild) ) {
lastNode = frag.appendChild(node);
}
range.insertNode(frag);
// Preserve the selection
if (lastNode) {
range = range.cloneRange();
range.setStartAfter(lastNode);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
}
}
} else if (document.selection && document.selection.type != "Control") {
// IE < 9
document.selection.createRange().pasteHTML(html);
}
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment