Coder Social home page Coder Social logo

inno-v / lazyjsonundoredo Goto Github PK

View Code? Open in Web Editor NEW

This project forked from azazdeaz/lazyjsonundoredo

0.0 2.0 0.0 439 KB

Makes a history with automatic undo/redo functionality for the specified javascript objects, using ES6 Object.observe().

License: The Unlicense

lazyjsonundoredo's Introduction

LazyJsonUndoRedo Build Status

A 'drop in' history handler with automatic undo/redo functionality for nested javascript objects, using ES6 Object.observe() or Polymer shim.

Best for small editor tools.

ES6 Object.observe() is only supported in Chrome 36+ and Nodejs 11.13+ yet, but LJUR is also usable with polymer(observe-js)

####Demo edit json

edit maze

####Install

bower install --save LazyJsonUndoRedo
npm install --save lazy-json-undo-redo

####Unit tests native

with polymer shim

Usage

Init
 var o = {}, ljur = new LazyJsonUndoRedo(o);
 
 o.a = 1;
 ljur.undo();
 console.log(o.a); // undefined
 ljur.redo();
 console.log(o.a); // 1


Flagging
 o = {}, ljur = new LazyJsonUndoRedo(o);
 //the changes between the start- end endFlag calls will be treated as one step 
 //in the history  
 var endFlagId = ljur.startFlag();
 o.c = {}
 o.c.b = 1
 o.c.e = 2
 o.f = 4;
 ljur.endFlag(endFlagId);
 ljur.undo();
 console.log(o); //{}
 ljur.redo();
 console.log(o); //{c: {b: 1, e: 2}, f: 4}
 
 //or wrap a function between flags:
 var changerFn = ljur.wrap(function () {/*do changes on o*/});
 changerFn();//all changes are reversible with one undo() call


Force save
 //fast changes can be merged by the api (specially if you're using shim)
 o = {}, ljur = new LazyJsonUndoRedo(o);
 o.g = {};
 o.g.h = 1;
 ljur.undo();
 console.log(o); //{}

 //to avoid this, you can force the history save with ljur.rec()
 o.i = {};
 ljur.rec();
 o.i.j = 2;
 ljur.undo();
 console.log(o); // {i: {}}


Use whitelists
 //if you want to specify witch properties should be listened on an object, 
 // you can use whitelists: 
 o = {};
 ljur = new LazyJsonUndoRedo();
 ljur.setWhiteList(o, ['a', 'b']);
 ljur.observeTree(o);//you have to set the whitelist before start to observe the object
 o.a = 7; //will be undoable
 o.c = 8; //won't be undoable, because 'c' is not on the whitelist
 ljur.undo();
 console.log(o); // {c: 8}
 
 ljur.getWhitelist(o); //['a', 'b']
 ljur.removeWhiteList(o);//whitelists are removable


Use blacklists
 //works the same as whitelists
 ljur.setBlacklist(object, blacklistedKeys);
 ljur.removeBlacklist(object);


Use global black- and whitelist
 //you can use this two list for all of the objects added to ljur
 ljur.addToGlobalWhitelist('a', 'b', 'x', 'd', 'e');
 ljur.removeFromGlobalWhitelist('e', 'x');
 ljur.addToGlobalBlacklist('a', 'b', 'x', 'd', 'e');
 ljur.removeFromGlobalBlacklist('e', 'x');



Listen to more objects
 ljur.observeTree(o2);
 ljur.observeTree(o3);


Check support
 LazyJsonUndoRedo.checkSupport();//true is native Object.observe() or Polymer is present
 ljur.usingShim;//true if it's usin Polymer shim

lazyjsonundoredo's People

Contributors

azazdeaz avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.