Skip to content

Commit a081bd0

Browse files
iMrDJAiiMrDJAi
committed
1.1.0 Release
1 parent 9d5132e commit a081bd0

File tree

4 files changed

+146
-145
lines changed

4 files changed

+146
-145
lines changed

‎README.md‎

Lines changed: 37 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
# UndoRedo.js
22
[![npm](https://img.shields.io/npm/v/undoredo.js?color=red)](https://www.npmjs.com/package/undoredo.js)
33

4-
A powerful and simple javascript library provides a history for undo/redo functionality. Just like a time machine! 🕐
4+
A powerful and simple Javascript library provides a history for undo/redo functionality. Just like a time machine! 🕐
55
***
66
## Install:
77
**Node.js**:
@@ -12,7 +12,7 @@ npm install undoredo.js --save
1212
```
1313
Then simply require it:
1414
```js
15-
const UndoRedojs = require("undoredo.js");
15+
const UndoRedojs = require("undoredo.js")
1616
```
1717

1818
**Browser**:
@@ -38,58 +38,61 @@ By the same way you can use `UndoRedo.min.js` instead, which is a minified versi
3838

3939
The main function will be declared as `window.UndoRedojs`:
4040
```js
41-
const UndoRedojs = window.UndoRedojs;
41+
const UndoRedojs = window.UndoRedojs
4242
```
4343

44+
You can also bundle it info your project using [Webpack](https://webpack.js.org/guides/getting-started/). You can use it in anyway you want, it's just another npm packege after all! 😅
45+
4446
## Usage:
45-
This package is useful for any step-by-step tasks, for example:
47+
This package is useful for any step-by-step task, for example:
4648

4749
- Undo/Redo functionality for a text input.
4850
- Something like a browser history.
4951
- A settings page.
52+
- A files explorer.
5053
- And more...
5154

5255
**Basic usage**:
5356

5457
>Lets setup our history:
5558
```js
56-
const myHistory = UndoRedojs(5);
59+
const myHistory = new UndoRedojs(5)
5760
```
58-
>This function will return an object with the methods and the properties that we will use later.
61+
>This will return a class object with the methods and the properties that we will use later.
5962
>
6063
>As you can see, we added the number **5** as a parameter, this will be used for cooldowns, keep reading for more details.
6164
>
6265
>To push new elements to the history, use the `record` method:
6366
```js
64-
myHistory.record('1');
65-
myHistory.record('12');
66-
myHistory.record('123');
67-
myHistory.record('1234');
68-
myHistory.record('12345');
69-
myHistory.record('123456');
70-
myHistory.record('1234567', true);
67+
myHistory.record('1')
68+
myHistory.record('12')
69+
myHistory.record('123')
70+
myHistory.record('1234')
71+
myHistory.record('12345')
72+
myHistory.record('123456')
73+
myHistory.record('1234567', true)
7174
```
7275
>To get the history array, use the `stack` property:
7376
```js
74-
console.log(myHistory.stack);
77+
console.log(myHistory.stack)
7578
// output => Array(4) [ "", "12345", "123456", "1234567" ]
7679
```
7780
>You can get the current history position using the `currentNumber` property:
7881
```js
79-
console.log(myHistory.currentNumber);
82+
console.log(myHistory.currentNumber)
8083
// output => 3
8184
```
8285
>Remember that arrays always start from **0**, so the number **3** here is actually the **4th** element, wanna check?
8386
```js
84-
console.log(myHistory.stack[myHistory.currentNumber]);
87+
console.log(myHistory.stack[myHistory.currentNumber])
8588
// output => "1234567"
8689
```
8790
>There is another way to get the current element, using the `current` method:
8891
```js
89-
console.log(myHistory.current());
92+
console.log(myHistory.current())
9093
// output => "1234567"
9194
```
92-
>The history array always starts with an empty element, this is helpful.
95+
>The history array always starts with an empty element, this can be very helpful for text areas.
9396
>
9497
>So we called the `record` method 7 times, but we only got 3 recorded elements (without the 1st empty one). Why?
9598
>
@@ -99,7 +102,7 @@ console.log(myHistory.current());
99102
>
100103
>To disable that, just use the number **1**, or keep it empty because the default `cooldownNumber` is **1**:
101104
```js
102-
const myHistory = UndoRedojs();
105+
const myHistory = UndoRedojs()
103106
```
104107
>
105108
>But we see that the `"1234567"` element is recorded during a cooldown. Why?
@@ -108,10 +111,10 @@ console.log(myHistory.current());
108111
>
109112
>To undo, just use the `undo` method:
110113
```js
111-
const undo = myHistory.undo();
112-
console.log(undo);
114+
const undo = myHistory.undo()
115+
console.log(undo)
113116
// output => "123456"
114-
console.log(myHistory.current());
117+
console.log(myHistory.current())
115118
// output => "123456"
116119
```
117120
>So the `undo` method will make you step back once inside the array and will return the previous element.
@@ -128,13 +131,13 @@ console.log(myHistory.current());
128131
>
129132
>To redo, just use the `redo` method:
130133
```js
131-
const redo = myHistory.redo();
132-
console.log(redo);
134+
const redo = myHistory.redo()
135+
console.log(redo)
133136
// output => "1234567"
134-
console.log(myHistory.current());
137+
console.log(myHistory.current())
135138
// output => "1234567"
136139
```
137-
>So the `undo` method will make you step forward once inside the array and will return the next element.
140+
>So the `redo` method will make you step forward once inside the array and will return the next element.
138141
>
139142
>What if we add `true` as a parameter?
140143
```js
@@ -148,9 +151,9 @@ console.log(myHistory.current());
148151
>
149152
>What if we undo then record then redo again?
150153
```js
151-
myHistory.undo();
152-
myHistory.record('12345678');
153-
console.log(myHistory.redo());
154+
myHistory.undo()
155+
myHistory.record('12345678')
156+
console.log(myHistory.redo())
154157
// output => undefined
155158
```
156159
>Why? Because the `record` method will remove every next element.
@@ -165,10 +168,12 @@ You can find a good example of a textarea with working undo/redo buttons [here](
165168

166169
That's a [live demo](https://imrdjai.github.io/UndoRedo.js).
167170

171+
## Dependents Projects:
172+
Wanna use **UndoRedo.js** on your next big project? Let me now and it will be listed here! :)
173+
168174
## Notes:
169-
- This package has made by [${Mr.DJA}](https://invite.gg/MrDJA).
170-
- This is my first package, leave a star if you like it.
171-
- You are free to suggest anything and I will add it soon if I found it useful.
175+
- This is my first package, leave a star if you like it <3.
176+
- You are free to suggest anything and I will try to add it soon if I found it useful.
172177
- If you found any mistake (including the README file) feel free to help to fix it.
173178
- Please report any bugs.
174179
- **Made with ❤ in Algeria 🇩🇿**.

‎index.html‎

Lines changed: 42 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -2,54 +2,54 @@
22
<html>
33

44
<head>
5-
<meta charset="UTF-8">
6-
<title>UndoRedo.js - Textarea Example </title>
5+
<meta charset="UTF-8">
6+
<title>UndoRedo.js - Textarea Example</title>
77
</head>
88

99
<body>
10-
<textarea id="input" style="height: 300px; width: 400px;"></textarea>
11-
<br />
12-
<button id="undo" style="height: 50px; width: 200px;">undo</button>
13-
<button id="redo" style="height: 50px; width: 200px;">redo</button>
14-
<script src="./src/UndoRedo.js"></script>
10+
<textarea id="input" style="height: 300px; width: 400px;"></textarea>
11+
<br />
12+
<button id="undo" style="height: 50px; width: 200px;">undo</button>
13+
<button id="redo" style="height: 50px; width: 200px;">redo</button>
14+
<script src="./src/UndoRedo.js"></script>
1515
</body>
1616

1717
<script>
18-
// Require the library function
19-
const txtHistory = window.UndoRedojs(5);
20-
// Get the textarea
21-
const textarea = document.querySelector("#input");
22-
// Add event listener for inputs on the textarea
23-
textarea.addEventListener('input', () => {
24-
// Check if the new textarea value is different
25-
if (txtHistory.current() !== textarea.value) {
26-
// Check for pastes, auto corrects..
27-
if ((textarea.value.length - txtHistory.current().length) > 1 || (textarea.value.length - txtHistory.current().length) < -1 || (textarea.value.length - txtHistory.current().length) === 0) {
28-
// Record the textarea value and force to bypass cooldown
29-
txtHistory.record(textarea.value, true);
30-
// Check for single key press, single chacacter paste..
31-
} else {
32-
// Record the textarea value
33-
txtHistory.record(textarea.value);
34-
}
35-
}
36-
});
37-
// Some browsers will auto-fill the textarea again after reloading, this will deal with that
38-
setTimeout(() => {
39-
if (textarea.value) txtHistory.record(textarea.value, true);
40-
}, 100);
41-
// The undo button
42-
document.querySelector("#undo").addEventListener('click', () => {
43-
if (txtHistory.undo(true) !== undefined) {
44-
textarea.value = txtHistory.undo();
45-
}
46-
});
47-
// The redo button
48-
document.querySelector("#redo").addEventListener('click', () => {
49-
if (txtHistory.redo(true) !== undefined) {
50-
textarea.value = txtHistory.redo();
51-
}
52-
});
18+
// Require the library function
19+
const txtHistory = new window.UndoRedojs(5)
20+
// Get the textarea
21+
const textarea = document.querySelector("#input")
22+
// Add event listener for inputs on the textarea
23+
textarea.addEventListener('input', () => {
24+
// Check if the new textarea value is different
25+
if (txtHistory.current() !== textarea.value) {
26+
// Check for pastes, auto corrects..
27+
if ((textarea.value.length - txtHistory.current().length) > 1 || (textarea.value.length - txtHistory.current().length) < -1 || (textarea.value.length - txtHistory.current().length) === 0) {
28+
// Record the textarea value and force to bypass cooldown
29+
txtHistory.record(textarea.value, true)
30+
// Check for single key press, single chacacter paste..
31+
} else {
32+
// Record the textarea value
33+
txtHistory.record(textarea.value)
34+
}
35+
}
36+
});
37+
// Some browsers will auto-fill the textarea again after reloading, this will deal with that
38+
setTimeout(() => {
39+
if (textarea.value) txtHistory.record(textarea.value, true)
40+
}, 100);
41+
// The undo button
42+
document.querySelector("#undo").addEventListener('click', () => {
43+
if (txtHistory.undo(true) !== undefined) {
44+
textarea.value = txtHistory.undo()
45+
}
46+
});
47+
// The redo button
48+
document.querySelector("#redo").addEventListener('click', () => {
49+
if (txtHistory.redo(true) !== undefined) {
50+
textarea.value = txtHistory.redo()
51+
}
52+
});
5353
</script>
5454

5555
</html>

‎package.json‎

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,8 @@
11
{
22
"name": "undoredo.js",
3-
"version": "1.0.2",
4-
"description": "A powerful and simple javascript library provides a history for undo/redo functionality. Just like a time machine! 🕐",
3+
"version": "1.1.0",
4+
"description": "A powerful and simple Javascript library provides a history for undo/redo functionality. Just like a time machine! 🕐",
55
"main": "./src/undoredo.js",
6-
"scripts": {
7-
"test": "echo \"Warning: no test specified\""
8-
},
96
"repository": {
107
"type": "git",
118
"url": "git+https://github.com/iMrDJAi/UndoRedo.js.git"
@@ -20,13 +17,11 @@
2017
"redo"
2118
],
2219
"author": {
23-
"name": "${Mr.DJA}",
24-
"email": "imrdjai@yahoo.com",
25-
"discord": "https://invite.gg/MrDJA"
20+
"name": "${Mr.DJA}"
2621
},
2722
"license": "MIT",
2823
"bugs": {
2924
"url": "https://github.com/iMrDJAi/UndoRedo.js/issues"
3025
},
3126
"homepage": "https://github.com/iMrDJAi/UndoRedo.js#readme"
32-
}
27+
}

0 commit comments

Comments
 (0)