diff --git a/README.md b/README.md index 849ca7e..4d73c8c 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ # UndoRedo.js [![npm](https://img.shields.io/npm/v/undoredo.js?color=red)](https://www.npmjs.com/package/undoredo.js) -A powerful and simple javascript library provides a history for undo/redo functionality. Just like a time machine! 🕐 +A powerful and simple Javascript library provides a history for undo/redo functionality. Just like a time machine! 🕐 *** ## Install: **Node.js**: @@ -12,7 +12,7 @@ npm install undoredo.js --save ``` Then simply require it: ```js -const UndoRedojs = require("undoredo.js"); +const UndoRedojs = require("undoredo.js") ``` **Browser**: @@ -38,58 +38,61 @@ By the same way you can use `UndoRedo.min.js` instead, which is a minified versi The main function will be declared as `window.UndoRedojs`: ```js -const UndoRedojs = window.UndoRedojs; +const UndoRedojs = window.UndoRedojs ``` +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! 😅 + ## Usage: -This package is useful for any step-by-step tasks, for example: +This package is useful for any step-by-step task, for example: - Undo/Redo functionality for a text input. - Something like a browser history. - A settings page. +- A files explorer. - And more... **Basic usage**: >Lets setup our history: ```js - const myHistory = UndoRedojs(5); + const myHistory = new UndoRedojs(5) ``` ->This function will return an object with the methods and the properties that we will use later. +>This will return a class object with the methods and the properties that we will use later. > >As you can see, we added the number **5** as a parameter, this will be used for cooldowns, keep reading for more details. > >To push new elements to the history, use the `record` method: ```js -myHistory.record('1'); -myHistory.record('12'); -myHistory.record('123'); -myHistory.record('1234'); -myHistory.record('12345'); -myHistory.record('123456'); -myHistory.record('1234567', true); +myHistory.record('1') +myHistory.record('12') +myHistory.record('123') +myHistory.record('1234') +myHistory.record('12345') +myHistory.record('123456') +myHistory.record('1234567', true) ``` >To get the history array, use the `stack` property: ```js -console.log(myHistory.stack); +console.log(myHistory.stack) // output => Array(4) [ "", "12345", "123456", "1234567" ] ``` >You can get the current history position using the `currentNumber` property: ```js -console.log(myHistory.currentNumber); +console.log(myHistory.currentNumber) // output => 3 ``` >Remember that arrays always start from **0**, so the number **3** here is actually the **4th** element, wanna check? ```js -console.log(myHistory.stack[myHistory.currentNumber]); +console.log(myHistory.stack[myHistory.currentNumber]) // output => "1234567" ``` >There is another way to get the current element, using the `current` method: ```js -console.log(myHistory.current()); +console.log(myHistory.current()) // output => "1234567" ``` ->The history array always starts with an empty element, this is helpful. +>The history array always starts with an empty element, this can be very helpful for text areas. > >So we called the `record` method 7 times, but we only got 3 recorded elements (without the 1st empty one). Why? > @@ -99,7 +102,7 @@ console.log(myHistory.current()); > >To disable that, just use the number **1**, or keep it empty because the default `cooldownNumber` is **1**: ```js - const myHistory = UndoRedojs(); + const myHistory = UndoRedojs() ``` > >But we see that the `"1234567"` element is recorded during a cooldown. Why? @@ -108,10 +111,10 @@ console.log(myHistory.current()); > >To undo, just use the `undo` method: ```js -const undo = myHistory.undo(); -console.log(undo); +const undo = myHistory.undo() +console.log(undo) // output => "123456" -console.log(myHistory.current()); +console.log(myHistory.current()) // output => "123456" ``` >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()); > >To redo, just use the `redo` method: ```js -const redo = myHistory.redo(); -console.log(redo); +const redo = myHistory.redo() +console.log(redo) // output => "1234567" -console.log(myHistory.current()); +console.log(myHistory.current()) // output => "1234567" ``` ->So the `undo` method will make you step forward once inside the array and will return the next element. +>So the `redo` method will make you step forward once inside the array and will return the next element. > >What if we add `true` as a parameter? ```js @@ -148,9 +151,9 @@ console.log(myHistory.current()); > >What if we undo then record then redo again? ```js -myHistory.undo(); -myHistory.record('12345678'); -console.log(myHistory.redo()); +myHistory.undo() +myHistory.record('12345678') +console.log(myHistory.redo()) // output => undefined ``` >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]( That's a [live demo](https://imrdjai.github.io/UndoRedo.js). +## Dependents Projects: +Wanna use **UndoRedo.js** on your next big project? Let me now and it will be listed here! :) + ## Notes: -- This package has made by [${Mr.DJA}](https://invite.gg/MrDJA). -- This is my first package, leave a star if you like it. -- You are free to suggest anything and I will add it soon if I found it useful. +- This is my first package, leave a star if you like it <3. +- You are free to suggest anything and I will try to add it soon if I found it useful. - If you found any mistake (including the README file) feel free to help to fix it. - Please report any bugs. - **Made with ❤ in Algeria 🇩🇿**. diff --git a/index.html b/index.html index 7d1cd98..e28fe06 100644 --- a/index.html +++ b/index.html @@ -2,54 +2,54 @@ - - UndoRedo.js - Textarea Example + + UndoRedo.js - Textarea Example - -
- - - + +
+ + + diff --git a/package.json b/package.json index c27d7c0..8c85a14 100644 --- a/package.json +++ b/package.json @@ -1,11 +1,8 @@ { "name": "undoredo.js", - "version": "1.0.2", - "description": "A powerful and simple javascript library provides a history for undo/redo functionality. Just like a time machine! 🕐", + "version": "1.1.0", + "description": "A powerful and simple Javascript library provides a history for undo/redo functionality. Just like a time machine! 🕐", "main": "./src/undoredo.js", - "scripts": { - "test": "echo \"Warning: no test specified\"" - }, "repository": { "type": "git", "url": "git+https://github.com/iMrDJAi/UndoRedo.js.git" @@ -20,13 +17,11 @@ "redo" ], "author": { - "name": "${Mr.DJA}", - "email": "imrdjai@yahoo.com", - "discord": "https://invite.gg/MrDJA" + "name": "${Mr.DJA}" }, "license": "MIT", "bugs": { "url": "https://github.com/iMrDJAi/UndoRedo.js/issues" }, "homepage": "https://github.com/iMrDJAi/UndoRedo.js#readme" -} +} \ No newline at end of file diff --git a/src/UndoRedo.js b/src/UndoRedo.js index 3c31897..1fc6686 100644 --- a/src/UndoRedo.js +++ b/src/UndoRedo.js @@ -1,68 +1,69 @@ -(function () { - var UndoRedojs = function (cooldownNumber) { - if (!cooldownNumber || isNaN(cooldownNumber) || cooldownNumber <= 0) cooldownNumber = 1; - var history = {}; - history.stack = ['']; - history.currentNumber = 0; - history.currentCooldownNumber = 0; - history.record = function (data, force) { - if (history.currentNumber === history.stack.length - 1) { //checking for regular history updates - if ((history.currentCooldownNumber >= cooldownNumber || history.currentCooldownNumber === 0) && force !== true) { //history updates after a new cooldown - history.stack.push(data); - history.currentNumber++; - history.currentCooldownNumber = 1; - } else if (history.currentCooldownNumber < cooldownNumber && force !== true) { //history updates during cooldown - history.current(data); - history.currentCooldownNumber++; - } else if (force === true) { //force to record without cooldown - history.stack.push(data); - history.currentNumber++; - history.currentCooldownNumber = cooldownNumber; +(() => { + class UndoRedojs { + constructor(cooldownNumber) { + if (!cooldownNumber || isNaN(cooldownNumber) || cooldownNumber <= 0) this.cooldownNumber = 1 + else this.cooldownNumber = cooldownNumber + this.stack = [''] + this.currentNumber = 0 + this.currentCooldownNumber = 0 } - } else if (history.currentNumber < history.stack.length - 1) { //checking for history updates after undo - if (force !== true) { //history updates after undo - history.stack.length = history.currentNumber + 1; - history.stack.push(data); - history.currentNumber++; - history.currentCooldownNumber = 1; - } else if (force === true) { ////force to record after undo - history.stack.length = history.currentNumber + 1; - history.stack.push(data); - history.currentNumber++; - history.currentCooldownNumber = cooldownNumber; + record(data, force) { + if (this.currentNumber === this.stack.length - 1) { //checking for regular history updates + if ((this.currentCooldownNumber >= this.cooldownNumber || this.currentCooldownNumber === 0) && force !== true) { //history updates after a new cooldown + this.stack.push(data) + this.currentNumber++ + this.currentCooldownNumber = 1 + } else if (this.currentCooldownNumber < this.cooldownNumber && force !== true) { //history updates during cooldown + this.current(data) + this.currentCooldownNumber++ + } else if (force === true) { //force to record without cooldown + this.stack.push(data) + this.currentNumber++ + this.currentCooldownNumber = this.cooldownNumber + } + } else if (this.currentNumber < this.stack.length - 1) { //checking for history updates after undo + if (force !== true) { //history updates after undo + this.stack.length = this.currentNumber + 1 + this.stack.push(data) + this.currentNumber++ + this.currentCooldownNumber = 1 + } else if (force === true) { ////force to record after undo + this.stack.length = this.currentNumber + 1 + this.stack.push(data) + this.currentNumber++ + this.currentCooldownNumber = this.cooldownNumber + } + } } - } - } - history.undo = function (readOnly) { - if (history.currentNumber > 0) { - if (readOnly !== true) { - history.currentNumber--; - return history.stack[history.currentNumber]; - } else { - return history.stack[history.currentNumber - 1]; + undo(readOnly) { + if (this.currentNumber > 0) { + if (readOnly !== true) { + this.currentNumber-- + return this.stack[this.currentNumber] + } else { + return this.stack[this.currentNumber - 1] + } + } } - } - } - history.redo = function (readOnly) { - if (history.currentNumber < history.stack.length - 1) { - if (readOnly !== true) { - history.currentNumber++; - return history.stack[history.currentNumber]; - } else { - return history.stack[history.currentNumber + 1]; + redo(readOnly) { + if (this.currentNumber < this.stack.length - 1) { + if (readOnly !== true) { + this.currentNumber++ + return this.stack[this.currentNumber] + } else { + return this.stack[this.currentNumber + 1] + } + } + } + current(data) { + if (data) this.stack[this.currentNumber] = data + return this.stack[this.currentNumber] } - } } - history.current = function (data) { - if (data) history.stack[history.currentNumber] = data; - return history.stack[history.currentNumber]; + if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') { //node + module.exports = UndoRedojs + } + if (typeof window === 'object') { //browser + window.UndoRedojs = UndoRedojs } - return history; - } - if (typeof (module) !== 'undefined' && typeof (module.exports) !== 'undefined') { - module.exports = UndoRedojs; - } - if (typeof (window) !== 'undefined' && typeof (window) === 'object') { - window.UndoRedojs = UndoRedojs; - } -})(); \ No newline at end of file +})() \ No newline at end of file