-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
83 lines (73 loc) · 2.77 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE HTML>
<html>
<head>
<title>Web Cabin's Undo Manager</title>
<!-- Core Modules -->
<script src="wcUndoManager.js"></script>
<!-- Initialization -->
<script>
var undoManager = new wcUndoManager();
var currentValue = "";
function updateState() {
var undoButton = document.getElementById("undo");
undoButton.disabled = !undoManager.canUndo();
var redoButton = document.getElementById("redo");
redoButton.disabled = !undoManager.canRedo();
var modifiedSpan = document.getElementById("modified");
if (undoManager.isModified()) {
modifiedSpan.innerHTML = "The current state is modified!";
} else {
modifiedSpan.innerHTML = "The current state is un-modified";
}
}
function onTextChanged() {
var oldValue = currentValue;
var newValue = document.getElementById("edit").value;
undoManager.addEvent("Text Changed", {
oldValue: oldValue,
newValue: newValue,
},
// Undo
function() {
document.getElementById("edit").value = this.oldValue;
return {editValueChanged: this.oldValue};
},
// Redo
function() {
document.getElementById("edit").value = this.newValue;
return {editValueChanged: this.newValue};
});
currentValue = newValue;
updateState();
};
function performUndo() {
var obj = undoManager.undo();
if (obj.hasOwnProperty("editValueChanged")) {
currentValue = obj.editValueChanged;
}
updateState();
};
function performRedo() {
var obj = undoManager.redo();
if (obj.hasOwnProperty("editValueChanged")) {
currentValue = obj.editValueChanged;
}
updateState();
};
function clearModified() {
undoManager.clearModified();
updateState();
};
</script>
</head>
<body style="background-color: lightgrey;">
The following is a simple example of Web Cabin's Undo Manager system found here:<br>
<a href="https://github.com/WebCabin/wcUndoManager/">https://github.com/WebCabin/wcUndoManager/</a><br><br>
Each change to this text field will be recorded by the undo manager, you can then cycle through these recorded events with the undo/redo buttons:<br>
<input id="edit" type="text" onchange="onTextChanged()"/>
<input id="undo" type="button" value="Undo" onclick="performUndo()", disabled="disabled"/>
<input id="redo" type="button" value="Redo" onclick="performRedo()", disabled="disabled"/><br><br>
<span id="modified">The current state is un-modified.</span>
<input id="save" type="button" value="Set as Current State" onclick="clearModified()"/>
</body>
</html>