Skip to content

Add getState() function and state parameter to loadJSON() #6

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Add getState() function and state parameter to loadJSON() #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 34 additions & 10 deletions src/json-viewer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,15 +17,16 @@ var JSONViewer = (function(document) {
* @param {Object|Array} json Input value
* @param {Number} [inputMaxLvl] Process only to max level, where 0..n, -1 unlimited
* @param {Number} [inputColAt] Collapse at level, where 0..n, -1 unlimited
* @param {Object} [inputState] Expand or collapse according to given state. See also getState().
*/
JSONViewer.prototype.showJSON = function(jsonValue, inputMaxLvl, inputColAt) {
JSONViewer.prototype.showJSON = function(jsonValue, inputMaxLvl, inputColAt, inputState) {
// Process only to maxLvl, where 0..n, -1 unlimited
var maxLvl = typeof inputMaxLvl === "number" ? inputMaxLvl : -1; // max level
// Collapse at level colAt, where 0..n, -1 unlimited
var colAt = typeof inputColAt === "number" ? inputColAt : -1; // collapse at

this._dom_container.innerHTML = "";
walkJSONTree(this._dom_container, jsonValue, maxLvl, colAt, 0);
walkJSONTree(this._dom_container, jsonValue, maxLvl, colAt, 0, 'root', inputState);
};

/**
Expand All @@ -37,6 +38,18 @@ var JSONViewer = (function(document) {
return this._dom_container;
};

/**
* Get current expand/collapse state - this can be passed to showJSON to set initial state.
* For each key, true == expanded and false == collapsed. For missing keys, colAt will apply.
*/
JSONViewer.prototype.getState = function() {
var state = {};
this._dom_container.querySelectorAll('a').forEach(function(a) {
state[a.getAttribute('data-key')] = !a.classList.contains('collapsed')
})
return state;
};

/**
* Recursive walk for input value.
*
Expand All @@ -46,12 +59,15 @@ var JSONViewer = (function(document) {
* @param {Number} colAt Collapse at level, where 0..n, -1 unlimited
* @param {Number} lvl Current level
*/
function walkJSONTree(outputParent, value, maxLvl, colAt, lvl) {
function walkJSONTree(outputParent, value, maxLvl, colAt, lvl, path, state) {
var isDate = Object_prototype_toString.call(value) === DatePrototypeAsString;
var realValue = !isDate && typeof value === "object" && value !== null && "toJSON" in value ? value.toJSON() : value;
if (typeof realValue === "object" && realValue !== null && !isDate) {
var isMaxLvl = maxLvl >= 0 && lvl >= maxLvl;
var isCollapse = colAt >= 0 && lvl >= colAt;
if (state && state.hasOwnProperty(path)) {
isCollapse = !state[path];
}

var isArray = Array.isArray(realValue);
var items = isArray ? realValue : Object.keys(realValue);
Expand All @@ -60,7 +76,7 @@ var JSONViewer = (function(document) {
// root level
var rootCount = _createItemsCount(items.length);
// hide/show
var rootLink = _createLink(isArray ? "[" : "{");
var rootLink = _createLink(isArray ? "[" : "{", path);

if (items.length) {
rootLink.addEventListener("click", function() {
Expand Down Expand Up @@ -94,6 +110,7 @@ var JSONViewer = (function(document) {

items.forEach(function(key, ind) {
var item = isArray ? key : value[key];
var itemPath = path + "." + (isArray ? ind : key);
var li = document.createElement("li");

if (typeof item === "object") {
Expand All @@ -114,7 +131,7 @@ var JSONViewer = (function(document) {
else {
// 1+ items
var itemTitle = (typeof key === "string" ? key + ": " : "") + (itemIsArray ? "[" : "{");
var itemLink = _createLink(itemTitle);
var itemLink = _createLink(itemTitle, itemPath);
var itemsCount = _createItemsCount(itemLen);

// maxLvl - only text, no link
Expand All @@ -126,7 +143,7 @@ var JSONViewer = (function(document) {
li.appendChild(itemLink);
}

walkJSONTree(li, item, maxLvl, colAt, lvl + 1);
walkJSONTree(li, item, maxLvl, colAt, lvl + 1, itemPath, state);
li.appendChild(document.createTextNode(itemIsArray ? "]" : "}"));

var list = li.querySelector("ul");
Expand All @@ -140,8 +157,14 @@ var JSONViewer = (function(document) {
itemLink.addEventListener("click", itemLinkCb);

// collapse lower level
if (colAt >= 0 && lvl + 1 >= colAt) {
itemLinkCb();
if (state && state.hasOwnProperty(itemPath)) {
if (!state[itemPath]) {
itemLinkCb();
}
} else {
if (colAt >= 0 && lvl + 1 >= colAt) {
itemLinkCb();
}
}
}
}
Expand All @@ -154,7 +177,7 @@ var JSONViewer = (function(document) {
}

// recursive
walkJSONTree(li, item, maxLvl, colAt, lvl + 1);
walkJSONTree(li, item, maxLvl, colAt, lvl + 1, itemPath, state);
}

// add comma to the end
Expand Down Expand Up @@ -244,11 +267,12 @@ var JSONViewer = (function(document) {
* @param {String} title Link title
* @return {Element}
*/
function _createLink(title) {
function _createLink(title, path) {
var linkEl = document.createElement("a");
linkEl.classList.add("list-link");
linkEl.href = "javascript:void(0)";
linkEl.innerHTML = title || "";
linkEl.setAttribute("data-key", path);

return linkEl;
};
Expand Down
11 changes: 10 additions & 1 deletion test/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@ <h2>JSON stringified value:</h2>
<button type="button" class="load-json">Load JSON</button>
<button type="button" class="collapse">Collapse to level 1</button>
<button type="button" class="maxlvl">Show JSON to level 1</button>
<input id="remember" type="checkbox"></input>
<label for="remember">Remember expand/collapse state when loading</label>
</div>
<h2>Output:</h2>
<div id="json"></div>
Expand Down Expand Up @@ -66,10 +68,17 @@ <h2>Output:</h2>
var loadJsonBtn = document.querySelector("button.load-json");
var collapseBtn = document.querySelector("button.collapse");
var maxlvlBtn = document.querySelector("button.maxlvl");
var rememberCb = document.querySelector("input#remember");

var maybeOldState = function() {
if (rememberCb.checked) {
return jsonViewer.getState();
}
}

loadJsonBtn.addEventListener("click", function() {
setJSON();
jsonViewer.showJSON(jsonObj);
jsonViewer.showJSON(jsonObj, null, null, maybeOldState());
});

collapseBtn.addEventListener("click", function() {
Expand Down