Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
tree: 501775dfbd
96 lines (90 sloc) 2.439 kb
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../undo.js"></script>
<script src="../vendor/jquery-1.5.1.js"></script>
<title>Undo.js demo</title>
<style>
body { font:62.5% Verdana,Arial,sans-serif; }
#text { border: 1px dotted green; }
</style>
<script>
$(function() {
var stack = new Undo.Stack(),
EditCommand = Undo.Command.extend({
constructor: function(textarea, oldValue, newValue) {
this.textarea = textarea;
this.oldValue = oldValue;
this.newValue = newValue;
},
execute: function() {
},
undo: function() {
this.textarea.html(this.oldValue);
},
redo: function() {
this.textarea.html(this.newValue);
}
});
stack.changed = function() {
stackUI();
};
var undo = $(".undo"),
redo = $(".redo"),
dirty = $(".dirty");
function stackUI() {
undo.attr("disabled", !stack.canUndo());
redo.attr("disabled", !stack.canRedo());
dirty.toggle(stack.dirty());
}
stackUI();
$(document.body).delegate(".undo, .redo, .save", "click", function() {
var what = $(this).attr("class");
stack[what]();
return false;
});
var text = $("#text"),
startValue = text.html(),
timer;
$("#text").bind("keyup", function() {
// a way too simple algorithm in place of single-character undo
clearTimeout(timer);
timer = setTimeout(function() {
var newValue = text.html();
// ignore meta key presses
if (newValue != startValue) {
// this could try and make a diff instead of storing snapshots
stack.execute(new EditCommand(text, startValue, newValue));
startValue = newValue;
}
}, 250);
});
$(".bold").click(function() {
document.execCommand("bold", false);
var newValue = text.html();
stack.execute(new EditCommand(text, startValue, newValue));
startValue = newValue;
});
$(document).keydown(function(event) {
if (!event.metaKey || event.keyCode != 90) {
return;
}
event.preventDefault();
if (event.shiftKey) {
stack.canRedo() && stack.redo()
} else {
stack.canUndo() && stack.undo();
}
});
});
</script>
</head>
<body>
<button class="undo" href="#">Undo</button>
<button class="redo" href="#">Redo</button>
<button class="save" href="#">Save<span class="dirty">*</span></button>
<button class="bold">Bold!</button>
<div id="text" contenteditable="true">Some content, edit me!</div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.