State

Persist the state (scale, position, expand/collapse and focus) in the url or local storage

Default valueя: false

Options:

• name
• readFromLocalStorage
• writeToLocalStorage
• readFromUrlParams
• writeToUrlParams
• readFromSessionStorage
• writeToSessionStorage

Code example:

 
       Copy 
let familyTree = new FamilyTree2(document.getElementById('tree'));

familytree.state.name = "StateForMyTree";
familyTree.state.writeToLocalStorage = true;
familyTree.state.readFromLocalStorage = true;
familyTree.state.writeToSessionStorage = true;
familyTree.state.readFromSessionStorage = true;
familyTree.state.writeToUrlParams = true;
familyTree.state.readFromUrlParams = true;
 

1. Local storage

Use name to save a state name

Code example:

 
       Copy 
let familyTree = new FamilyTree2(document.getElementById('tree'));

familytree.state.name = "StateForMyTree";
familyTree.state.writeToLocalStorage = true;
familyTree.state.readFromLocalStorage = true;
 

You can test the state here by collapsing nodes, changing the position of the chart and refreshing the page (F5)
Limitation: most browsers has 5MB limit of the local storage.

Edit in BALKAN Code

2.Session Storage

Usage is the same as Local storage.
Limitations: does not work in iframe.

Code example:

 
       Copy 
let familyTree = new FamilyTree2(document.getElementById('tree'));

familytree.state.name = "StateForMyTree";
familyTree.state.writeToSessionStorage = true;
familyTree.state.readFromSessionStorage = true;
 

You can test the state here by collapsing nodes, changing the position of the chart and refreshing the page (F5)

Edit in BALKAN Code

3.URL

Signature:

 
       Copy 
let familyTree = new FamilyTree2(document.getElementById('tree'));

familytree.state.name = "StateForMyTree";
familyTree.state.writeToUrlParams = true;
familyTree.state.readFromUrlParams = true;
 

Use stateToUrl() to opend the state in another window.

 
       Copy 
document.getElementById('button').addEventListener('click', function () {
    let location = window.location + '?' + familyTree.stateToUrl()
    window.open(location);
});
 

Edit in BALKAN Code