-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathdemo.html
224 lines (199 loc) · 7.93 KB
/
demo.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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS Undo Manager by A. Grinko - DEMO</title>
<script src="src/js-undo-manager.js"></script>
<style>
#demo-box {
height: 300px;
margin-bottom: 14px;
border: 3px double seagreen;
background: #f6f6f6;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#demo-box .dot {
position: absolute;
width: 20px;
height: 20px;
margin-left: -10px;
margin-top: -10px;
border-radius: 20px;
line-height: 20px;
text-align: center;
font-size: smaller;
background: black;
color: white;
cursor: inherit;
}
</style>
</head>
<body>
<h2>Example 1</h2>
<p>Enter some text below. Changes are applied and recorded only after input loses its focus.</p>
<input type="text" id="input"/>
<br/>
<br/>
<button id="undo" type="button">Undo</button>
<button id="redo" type="button">Redo</button>
<p><em>Note!</em> If you notice that <strong>Ctrl+Z</strong>/<strong>Ctrl+Y</strong> hot keys work in this example,
it's your browser's default behaviour. This example is programmed to work only with the buttons above.</p>
<script>
(function() {
var um = new JSUndoManager();
var input = document.getElementById("input");
var redo = document.getElementById("redo");
var undo = document.getElementById("undo");
var prevValue = input.value; // way to know previous value after "change" event
input.addEventListener("change", function() {
var prev = prevValue;
var value = input.value;
prevValue = value;
um.record({
redo: function() {
input.value = value;
// update previous value manually because we don't trigger "change" event here
prevValue = value;
},
undo: function() {
input.value = prev;
prevValue = prev;
}
});
});
redo.addEventListener("click", function() { um.redo(); });
undo.addEventListener("click", function() { um.undo(); });
})();
</script>
<h2>Example 2</h2>
<p>Click somewhere in the box to add points:</p>
<div id="demo-box"></div>
<p>Now press <strong>Ctrl+Z</strong> to revert changes and <strong>Ctrl+Y</strong> or <strong>Ctrl+Shift+Z</strong>
to perform them again</p>
<div>
Use these buttons to begin, end or cancel transaction and see how it works:
<div>
<button type="button" id="begin">Begin</button>
<button type="button" id="end">End</button>
<button type="button" id="cancel">Cancel</button>
</div>
</div>
<p>This example works with up to 40 commands in history. When this number is reached, the oldes commands will be
"forgotten" (you can't undo them). This number affects memory usage and can be dynamically adjusted in code.</p>
<p>Check console to see some debug information from the command manager.</p>
<p><em>Note: keyboard processing is not included into JS Command Manager. Keyboard events are bound
with its "undo" and "redo" methods with simple event handlers in this demo.</em></p>
<br/>
<details>
<summary>Click here to see the source code</summary>
<pre>
var um = new JSUndoManager({
limit: 40,
debug: true,
bindHotKeys: true
});
var box = document.getElementById("demo-box");
var begin = document.getElementById("begin");
var end = document.getElementById("end");
var cancel = document.getElementById("cancel");
var colours = ["red", "black", "blue", "green", "orange", "pink", "olive", "seagreen", "skyblue", "grey"];
var counter = 0;
box.addEventListener("click", function(e) {
var data = makeData(e.pageX, e.pageY);
// important: we separate data from DOM here;
// all dots are initialized with random color, so if we didn't remember it here in the data variable,
// each "redo" call would initialize new dot with a random color instead of creating same dot as before
um.execute({
redo: function() { createDot(data); },
undo: function() { removeDot(data); }
});
});
begin.addEventListener("click", function() { um.transaction.begin(); });
end.addEventListener("click", function() { um.transaction.end(); });
cancel.addEventListener("click", function() { um.transaction.cancel(); });
function makeData(x, y) {
counter++;
return {
x: x,
y: y,
index: counter,
id: "dot_" + counter,
bg: colours[Math.floor(Math.random()*colours.length)]
};
}
function createDot(data) {
var dot = document.createElement("DIV");
dot.className = "dot";
dot.innerText = data.index;
dot.id = data.id;
dot.style.backgroundColor = data.bg;
dot.style.left = data.x + "px";
dot.style.top = data.y + "px";
box.appendChild(dot);
return dot.id;
}
function removeDot(data) {
var dot = document.getElementById(data.id);
box.removeChild(dot);
}
</pre>
</details>
<script>
(function() {
var um = new JSUndoManager({
limit: 40,
debug: true,
bindHotKeys: true
});
var box = document.getElementById("demo-box");
var begin = document.getElementById("begin");
var end = document.getElementById("end");
var cancel = document.getElementById("cancel");
var colours = ["red", "black", "blue", "green", "orange", "pink", "olive", "seagreen", "skyblue", "grey"];
var counter = 0;
box.addEventListener("click", function(e) {
var data = makeData(e.pageX, e.pageY);
// important: we separate data from DOM here;
// all dots are initialized with random color, so if we didn't remember it here in the data variable,
// each "redo" call would initialize new dot with a random color instead of creating same dot as before
um.execute({
redo: function() { createDot(data); },
undo: function() { removeDot(data); }
});
});
begin.addEventListener("click", function() { um.transaction.begin(); });
end.addEventListener("click", function() { um.transaction.end(); });
cancel.addEventListener("click", function() { um.transaction.cancel(); });
function makeData(x, y) {
counter++;
return {
x: x,
y: y,
index: counter,
id: "dot_" + counter,
bg: colours[Math.floor(Math.random()*colours.length)]
};
}
function createDot(data) {
var dot = document.createElement("DIV");
dot.className = "dot";
dot.innerText = data.index;
dot.id = data.id;
dot.style.backgroundColor = data.bg;
dot.style.left = data.x + "px";
dot.style.top = data.y + "px";
box.appendChild(dot);
return dot.id;
}
function removeDot(data) {
var dot = document.getElementById(data.id);
box.removeChild(dot);
}
})();
</script>
</body>
</html>