Ractive undo/redo

testing undo/redo data structure

by vikikamath

HTML

<script id='template' type='text/ractive'>
    <ul>
    	{{#foo.a}}
      	<li>{{.}}</li>
      {{/}}
     </ul>
     <div> This should NOT change ==> bar is: {{bar}}</div>
</script>
<main></main>

JavaScript

/*var observe = Ractive.prototype.observe;
Ractive.prototype.observe = function(keypath, fn, options){
    var identityOnly = options && options.justCheckObjectIdentity;
    
    observe.call(this, keypath, function(n, o){
        if(identityOnly && n===o) { return; }
        fn.apply(this, arguments);
    }, options);
}
*/
var state = {}
var r = new Ractive({
    el: 'main',
    template: '#template',
    data(){
    	return {
        foo: { a: [1,2,3] }
        ,bar: 'baz'
    	}
    }
    ,oninit() {
    	this.observe('*', function(n, o, k){
    		//console.log(k, 'changed from', o, 'to', n);
        if (!state[k]) state[k] = [o]
        state[k].push(n)
			}, {init: false});
    }
})


/*
r.observe('foo', function(n, o, k){
    console.log(k, 'changed from', o, 'to', n);
}, { init: false, justCheckObjectIdentity: true });
*/
//r.set('foo.a', 'two');

//setTimeout(function(){ 
r.set('foo', { a: [4,5,6] })
//}, 2000)

r.set('foo', { a: [7,8,9] })

// adds two more states to original state 1, 2
console.log(state)

// lets delete 1 first and then head of line to get back original state
function deleteAndRestoreState(index, keypath) {
	var states = state[keypath]
  // index head of line
	if (states && states.length - 1=== index) {
  	states.pop()
    repaint()
  } else {
  	states.splice(index)
  }
}

function repaint(){
	r.reset()
}

setTimeout(function(){
	
}, 2000)

/*
setTimeout(function(){
	var nxtState = Object.create(null)
  var k = 'foo'
  Object.defineProperty(nxtState, state[0]['k'], {value: state[0]['o']})
 	console.log(nxtState)
	r.reset(nxtState).then(()=>{
  	console.log('promise resolve', r.get('foo'))
  	state.shift()
  })
}, 3000)

*/