kikobr/Undo.html

## Undo.html
<!DOCTYPE html>
<html>
    <head>
        <title>Undo</title>
    </head>
    <body>
        <label>
            Nome e sobrenome
            <input type="text" id="firstName">
            <input type="text" id="lastName">
        </label>
        <br/>
        <label>
            Idade
            <input type="number" id="age" min="1">
        </label>
        <br/>
        <button id="undo">Undo</button>
        <button id="redo">Redo</button>
        <hr>
        <div id="mount"></div>
        <script type="text/javascript">
            var PersonStore = function(){
                this.firstName = "Fulano";
                this.lastName = "de Tal";
                this.age = 38;
                this.ageInput = null;
                this.undoBtn = null;
                this.redoBtn = null;
                // history
                this.history = [];
                this.historyIndex = 0;
                this.historyMaxLength = 10;

                /*
                * Methods
                */
                this.updateAge = function(evt){
                    this.age = evt.target.value;
                    this.historyPush();
                    this.render();
                };
                this.updateFirstName = function(evt){
                    this.firstName = evt.target.value;
                    this.historyPush();
                    this.render();
                };this.updateLastName = function(evt){
                    this.lastName = evt.target.value;
                    this.historyPush();
                    this.render();
                };

                this.getStoreState = function(){
                    return {
                        firstName: this.firstName,
                        lastName: this.lastName,
                        age: this.age
                    }
                }
                this.setStoreState = function(obj){
                    this.firstName = obj.firstName || this.firstName;
                    this.lastName = obj.lastName || this.lastName;
                    this.age = obj.age || this.age;
                };

                this.historyPush = function(){
                    if(this.historyIndex < this.history.length - 1){
                        // removes items between current index and end
                        var difference = this.history.length - this.historyIndex + 1;
                        this.history.splice(this.historyIndex + 1, difference - 1); // items after
                    }
                    this.history.push(this.getStoreState());
                    if(this.history.length > this.historyMaxLength){
                        // removes items between start and current index
                        var difference = this.history.length - this.historyMaxLength;
                        this.history.splice(0, difference);
                    }
                    this.historyIndex = this.history.length - 1;
                };

                this.hasUndo = function(){
                    return this.historyIndex > 0;
                },
                this.undo = function(){
                    console.log('undo');
                    // goes backwards until 0
                    if(this.historyIndex > 0) this.historyIndex --;
                    this.setStoreState(this.history[this.historyIndex]);
                    this.render();
                };

                this.hasRedo = function(){
                    return this.historyIndex < this.history.length - 1;
                },
                this.redo = function(){
                    console.log('redo');
                    // goes forwards until history length
                    if(this.historyIndex < this.history.length - 1) this.historyIndex ++;
                    this.setStoreState(this.history[this.historyIndex]);
                    this.render();
                };

                this.init = function(){
                    this.ageInput = document.querySelector('#age');
                    this.ageInput.addEventListener('input', this.updateAge.bind(this));
                    this.firstNameInput = document.querySelector('#firstName');
                    this.firstNameInput.addEventListener('input', this.updateFirstName.bind(this));
                    this.lastNameInput = document.querySelector('#lastName');
                    this.lastNameInput.addEventListener('input', this.updateLastName.bind(this));

                    this.undoBtn = document.querySelector('#undo');
                    this.undoBtn.addEventListener('click', this.undo.bind(this));
                    this.redoBtn = document.querySelector('#redo');
                    this.redoBtn.addEventListener('click', this.redo.bind(this));
                    this.historyPush();
                    // start
                    this.render();
                }

                this.render = function(){
                    var mountPoint = document.querySelector('#mount');
                    mount.innerHTML = `<div style="margin-top: 10px;">
                        ${this.firstName} ${this.lastName}: ${this.age} anos
                    </div>`;

                    this.ageInput.value = this.age;
                    this.firstNameInput.value = this.firstName;
                    this.lastNameInput.value = this.lastName;

                    this.undoBtn.disabled = this.hasUndo() ? false : true;
                    this.redoBtn.disabled = this.hasRedo() ? false : true;
                }

                this.init();
                return this;
            }
            var person = new PersonStore();

        </script>
    </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Undo</title>
	</head>
	<body>
	<label>
	Nome e sobrenome
	<input type="text" id="firstName">
	<input type="text" id="lastName">
	</label>
	<br/>
	<label>
	Idade
	<input type="number" id="age" min="1">
	</label>
	<br/>
	<button id="undo">Undo</button>
	<button id="redo">Redo</button>
	<hr>
	<div id="mount"></div>
	<script type="text/javascript">
	var PersonStore = function(){
	this.firstName = "Fulano";
	this.lastName = "de Tal";
	this.age = 38;
	this.ageInput = null;
	this.undoBtn = null;
	this.redoBtn = null;
	// history
	this.history = [];
	this.historyIndex = 0;
	this.historyMaxLength = 10;

	/*
	* Methods
	*/
	this.updateAge = function(evt){
	this.age = evt.target.value;
	this.historyPush();
	this.render();
	};
	this.updateFirstName = function(evt){
	this.firstName = evt.target.value;
	this.historyPush();
	this.render();
	};this.updateLastName = function(evt){
	this.lastName = evt.target.value;
	this.historyPush();
	this.render();
	};

	this.getStoreState = function(){
	return {
	firstName: this.firstName,
	lastName: this.lastName,
	age: this.age
	}
	}
	this.setStoreState = function(obj){
	this.firstName = obj.firstName \|\| this.firstName;
	this.lastName = obj.lastName \|\| this.lastName;
	this.age = obj.age \|\| this.age;
	};

	this.historyPush = function(){
	if(this.historyIndex < this.history.length - 1){
	// removes items between current index and end
	var difference = this.history.length - this.historyIndex + 1;
	this.history.splice(this.historyIndex + 1, difference - 1); // items after
	}
	this.history.push(this.getStoreState());
	if(this.history.length > this.historyMaxLength){
	// removes items between start and current index
	var difference = this.history.length - this.historyMaxLength;
	this.history.splice(0, difference);
	}
	this.historyIndex = this.history.length - 1;
	};

	this.hasUndo = function(){
	return this.historyIndex > 0;
	},
	this.undo = function(){
	console.log('undo');
	// goes backwards until 0
	if(this.historyIndex > 0) this.historyIndex --;
	this.setStoreState(this.history[this.historyIndex]);
	this.render();
	};

	this.hasRedo = function(){
	return this.historyIndex < this.history.length - 1;
	},
	this.redo = function(){
	console.log('redo');
	// goes forwards until history length
	if(this.historyIndex < this.history.length - 1) this.historyIndex ++;
	this.setStoreState(this.history[this.historyIndex]);
	this.render();
	};

	this.init = function(){
	this.ageInput = document.querySelector('#age');
	this.ageInput.addEventListener('input', this.updateAge.bind(this));
	this.firstNameInput = document.querySelector('#firstName');
	this.firstNameInput.addEventListener('input', this.updateFirstName.bind(this));
	this.lastNameInput = document.querySelector('#lastName');
	this.lastNameInput.addEventListener('input', this.updateLastName.bind(this));

	this.undoBtn = document.querySelector('#undo');
	this.undoBtn.addEventListener('click', this.undo.bind(this));
	this.redoBtn = document.querySelector('#redo');
	this.redoBtn.addEventListener('click', this.redo.bind(this));
	this.historyPush();
	// start
	this.render();
	}

	this.render = function(){
	var mountPoint = document.querySelector('#mount');
	mount.innerHTML = `<div style="margin-top: 10px;">
	${this.firstName} ${this.lastName}: ${this.age} anos
	</div>`;

	this.ageInput.value = this.age;
	this.firstNameInput.value = this.firstName;
	this.lastNameInput.value = this.lastName;

	this.undoBtn.disabled = this.hasUndo() ? false : true;
	this.redoBtn.disabled = this.hasRedo() ? false : true;
	}

	this.init();
	return this;
	}
	var person = new PersonStore();

	</script>
	</body>
	</html>