From 2cdaa5b79b644888aa1ef8b5d82eb9bfd5523091 Mon Sep 17 00:00:00 2001 From: William Troup Date: Fri, 23 Feb 2024 20:01:31 +0000 Subject: [PATCH 01/10] Updated to v0.2.0. --- README.md | 6 +++--- README_NUGET.md | 6 +++--- dist/jsontree.js | 4 ++-- dist/jsontree.js.css | 2 +- dist/jsontree.js.min.css | 2 +- dist/jsontree.min.js | 4 ++-- docs/CHANGE_LOG.md | 6 ++++++ jsontree.js.nuspec | 2 +- package.json | 2 +- src/jsontree.js | 4 ++-- src/jsontree.js.scss | 2 +- 11 files changed, 23 insertions(+), 17 deletions(-) diff --git a/README.md b/README.md index 4c0f30fe..1e96f935 100755 --- a/README.md +++ b/README.md @@ -2,15 +2,15 @@ JsonTree.js [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=JsonTree.js%2C%20a%20free%20JavaScript%json%20treeview&url=https://github.com/williamtroup/JsonTree.js&hashtags=javascript,treeview,json) -[![npm](https://img.shields.io/badge/npmjs-v0.1.0-blue)](https://www.npmjs.com/package/jtree.js) -[![nuget](https://img.shields.io/badge/nuget-v0.1.0-purple)](https://www.nuget.org/packages/jJsonTree.js/) +[![npm](https://img.shields.io/badge/npmjs-v0.2.0-blue)](https://www.npmjs.com/package/jtree.js) +[![nuget](https://img.shields.io/badge/nuget-v0.2.0-purple)](https://www.nuget.org/packages/jJsonTree.js/) [![license](https://img.shields.io/badge/license-MIT-green)](https://github.com/williamtroup/JsonTree.js/blob/main/LICENSE.txt) [![discussions Welcome](https://img.shields.io/badge/discussions-Welcome-red)](https://github.com/williamtroup/JsonTree.js/discussions) [![coded by William Troup](https://img.shields.io/badge/coded_by-William_Troup-yellow)](https://william-troup.com/) >

🔗 A lightweight JavaScript library that generates customizable tree views to better visualize JSON data.

->

v0.1.0

+>

v0.2.0


![JsonTree.js](docs/images/main.png) diff --git a/README_NUGET.md b/README_NUGET.md index fd8aca03..395f75de 100755 --- a/README_NUGET.md +++ b/README_NUGET.md @@ -1,8 +1,8 @@ -# JsonTree.js v0.1.0 +# JsonTree.js v0.2.0 [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=JsonTree.js%2C%20a%20free%20JavaScript%json%20treeview&url=https://github.com/williamtroup/JsonTree.js&hashtags=javascript,treeview,json) -[![npm](https://img.shields.io/badge/npmjs-v0.1.0-blue)](https://www.npmjs.com/package/jtree.js) -[![nuget](https://img.shields.io/badge/nuget-v0.1.0-purple)](https://www.nuget.org/packages/jJsonTree.js/) +[![npm](https://img.shields.io/badge/npmjs-v0.2.0-blue)](https://www.npmjs.com/package/jtree.js) +[![nuget](https://img.shields.io/badge/nuget-v0.2.0-purple)](https://www.nuget.org/packages/jJsonTree.js/) [![license](https://img.shields.io/badge/license-MIT-green)](https://github.com/williamtroup/JsonTree.js/blob/main/LICENSE.txt) [![discussions Welcome](https://img.shields.io/badge/discussions-Welcome-red)](https://github.com/williamtroup/JsonTree.js/discussions) [![coded by William Troup](https://img.shields.io/badge/coded_by-William_Troup-yellow)](https://william-troup.com/) diff --git a/dist/jsontree.js b/dist/jsontree.js index c28f8a0b..7f963f01 100755 --- a/dist/jsontree.js +++ b/dist/jsontree.js @@ -1,4 +1,4 @@ -/*! JsonTree.js v0.1.0 | (c) Bunoon 2024 | MIT License */ +/*! JsonTree.js v0.2.0 | (c) Bunoon 2024 | MIT License */ (function() { function render() { var tagTypes = _configuration.domElementTypes; @@ -412,7 +412,7 @@ return this; }; this.getVersion = function() { - return "0.1.0"; + return "0.2.0"; }; (function(documentObject, windowObject, mathObject, jsonObject) { _parameter_Document = documentObject; diff --git a/dist/jsontree.js.css b/dist/jsontree.js.css index 577793e8..2705b184 100755 --- a/dist/jsontree.js.css +++ b/dist/jsontree.js.css @@ -1,5 +1,5 @@ /* - * JsonTree.js Library v0.1.0 + * JsonTree.js Library v0.2.0 * * Copyright 2024 Bunoon * Released under the MIT License diff --git a/dist/jsontree.js.min.css b/dist/jsontree.js.min.css index bed5661c..aacc496d 100755 --- a/dist/jsontree.js.min.css +++ b/dist/jsontree.js.min.css @@ -1,2 +1,2 @@ -/* JsonTree.js v0.1.0 | (c) Bunoon 2024 | MIT License */ +/* JsonTree.js v0.2.0 | (c) Bunoon 2024 | MIT License */ :root{--json-tree-js-default-font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--json-tree-js-text-bold-weight:400;--json-tree-js-header-bold-weight:900;--json-tree-js-title-bold-weight:var(--json-tree-js-header-bold-weight);--json-tree-js-text-bold-weight-active:var(--json-tree-js-header-bold-weight);--json-tree-js-color-black:#3b3a3a;--json-tree-js-color-white:#F5F5F5;--json-tree-js-color-snow-white:#F5F5F5;--json-tree-js-color-boolean:red;--json-tree-js-color-number:#666bf9;--json-tree-js-color-string:#78b13f;--json-tree-js-color-date:#a656f5;--json-tree-js-color-array:#F28C28;--json-tree-js-color-object:silver;--json-tree-js-color-null:#BBB;--json-tree-js-color-function:#BBB;--json-tree-js-container-background-color:#22272e;--json-tree-js-container-border-color:#454c56;--json-tree-js-button-background-color:#2d333b;--json-tree-js-button-border-color:var(--json-tree-js-container-border-color);--json-tree-js-button-text-color:var(--json-tree-js-color-white);--json-tree-js-button-background-color-hover:var(--json-tree-js-container-border-color);--json-tree-js-button-text-color-hover:var(--json-tree-js-color-snow-white);--json-tree-js-button-background-color-active:#616b79;--json-tree-js-button-text-color-active:var(--json-tree-js-color-snow-white);--json-tree-js-border-radius:.5rem;--json-tree-js-border-style-scrollbar:inset 0 0 6px var(--json-tree-js-color-dark-gray);--json-tree-js-border-size:.5px;--json-tree-js-spacing:10px;--json-tree-js-spacing-font-size:.85rem;--json-tree-js-transition:all .3s}div.json-tree-js{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;cursor:default;box-sizing:border-box;line-height:normal;font-family:var(--json-tree-js-default-font);display:inline-block;position:relative;border-radius:var(--json-tree-js-border-radius);background-color:var(--json-tree-js-container-background-color);color:var(--json-tree-js-color-white);border:var(--json-tree-js-border-size) solid var(--json-tree-js-container-border-color);padding:var(--json-tree-js-spacing);font-size:var(--json-tree-js-spacing-font-size);font-weight:var(--json-tree-js-text-bold-weight);width:auto;overflow:hidden;margin:0!important}div.json-tree-js div.no-click{pointer-events:none!important}div.json-tree-js *{box-sizing:border-box;line-height:normal}div.json-tree-js *::before,div.json-tree-js *::after{box-sizing:border-box;line-height:normal}div.json-tree-js div.no-arrow{display:inline-block;width:12px;height:8px;margin-right:calc(var(--json-tree-js-spacing))}div.json-tree-js div.down-arrow,div.json-tree-js div.right-arrow{display:inline-block;width:0;height:0;margin-right:calc(var(--json-tree-js-spacing));cursor:pointer;transition:var(--json-tree-js-transition);transition-property:opacity}div.json-tree-js div.down-arrow:hover,div.json-tree-js div.right-arrow:hover{opacity:.7}div.json-tree-js div.down-arrow{border-left:6px solid transparent;border-right:6px solid transparent;border-top:8px solid var(--json-tree-js-color-white)}div.json-tree-js div.right-arrow{border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:12px solid var(--json-tree-js-color-white)}div.json-tree-js div.title-bar{display:flex;margin-bottom:var(--json-tree-js-spacing)}div.json-tree-js div.title-bar div.title{text-align:left;width:auto;font-weight:var(--json-tree-js-title-bold-weight);font-size:1.2rem}div.json-tree-js div.title-bar div.controls{margin-left:calc(var(--json-tree-js-spacing) * 12);flex-grow:1;text-align:right}div.json-tree-js div.title-bar div.controls button{background-color:var(--json-tree-js-button-background-color);border:var(--json-tree-js-border-size) solid var(--json-tree-js-button-border-color);color:var(--json-tree-js-button-text-color);border-radius:var(--json-tree-js-border-radius);padding-top:5px;padding-bottom:5px;padding-left:9px;padding-right:9px;outline:none;transition:var(--json-tree-js-transition)}div.json-tree-js div.title-bar div.controls button:not(.active):active{background:var(--json-tree-js-button-background-color-active)!important;color:var(--json-tree-js-button-text-color-active)!important}div.json-tree-js div.title-bar div.controls button:not(.active):hover{cursor:pointer;background:var(--json-tree-js-button-background-color-hover);color:var(--json-tree-js-button-text-color-hover)}div.json-tree-js div.object-type-title{font-weight:var(--json-tree-js-header-bold-weight)}div.json-tree-js div.object-type-title span.array{color:var(--json-tree-js-color-array)}div.json-tree-js div.object-type-title span.object{color:var(--json-tree-js-color-object)}div.json-tree-js div.object-type-title span.count{margin-left:calc(var(--json-tree-js-spacing) / 2);font-weight:var(--json-tree-js-text-bold-weight)}div.json-tree-js div.object-type-contents{margin-top:calc(var(--json-tree-js-spacing) / 2)}div.json-tree-js div.object-type-contents{margin-left:calc(var(--json-tree-js-spacing) * 2)}div.json-tree-js div.object-type-contents div.object-type-value{white-space:nowrap;overflow:hidden;margin-top:calc(var(--json-tree-js-spacing) / 2)}div.json-tree-js div.object-type-contents div.object-type-value span.split{margin-left:calc(var(--json-tree-js-spacing) / 2);margin-right:calc(var(--json-tree-js-spacing) / 2)}div.json-tree-js div.object-type-contents div.object-type-value span.boolean,div.json-tree-js div.object-type-contents div.object-type-value span.number,div.json-tree-js div.object-type-contents div.object-type-value span.string,div.json-tree-js div.object-type-contents div.object-type-value span.date,div.json-tree-js div.object-type-contents div.object-type-value span.null,div.json-tree-js div.object-type-contents div.object-type-value span.function{transition:var(--json-tree-js-transition);transition-property:opacity}div.json-tree-js div.object-type-contents div.object-type-value span.boolean:not(.no-hover):hover,div.json-tree-js div.object-type-contents div.object-type-value span.number:not(.no-hover):hover,div.json-tree-js div.object-type-contents div.object-type-value span.string:not(.no-hover):hover,div.json-tree-js div.object-type-contents div.object-type-value span.date:not(.no-hover):hover,div.json-tree-js div.object-type-contents div.object-type-value span.null:not(.no-hover):hover,div.json-tree-js div.object-type-contents div.object-type-value span.function:not(.no-hover):hover{cursor:pointer;opacity:.7}div.json-tree-js div.object-type-contents div.object-type-value span.boolean{color:var(--json-tree-js-color-boolean)}div.json-tree-js div.object-type-contents div.object-type-value span.number{color:var(--json-tree-js-color-number)}div.json-tree-js div.object-type-contents div.object-type-value span.string{color:var(--json-tree-js-color-string)}div.json-tree-js div.object-type-contents div.object-type-value span.date{color:var(--json-tree-js-color-date)}div.json-tree-js div.object-type-contents div.object-type-value span.array{font-weight:var(--json-tree-js-header-bold-weight);color:var(--json-tree-js-color-array)}div.json-tree-js div.object-type-contents div.object-type-value span.object{font-weight:var(--json-tree-js-header-bold-weight);color:var(--json-tree-js-color-object)}div.json-tree-js div.object-type-contents div.object-type-value span.null{color:var(--json-tree-js-color-null);font-style:italic}div.json-tree-js div.object-type-contents div.object-type-value span.function{color:var(--json-tree-js-color-function);font-style:italic}div.json-tree-js div.object-type-contents div.object-type-value span.array span.count,div.json-tree-js div.object-type-contents div.object-type-value span.object span.count{margin-left:calc(var(--json-tree-js-spacing) / 2);font-weight:var(--json-tree-js-text-bold-weight)}.custom-scroll-bars::-webkit-scrollbar{width:12px}.custom-scroll-bars::-webkit-scrollbar-track{-webkit-box-shadow:var(--json-tree-js-border-style-scrollbar);box-shadow:var(--json-tree-js-border-style-scrollbar)}.custom-scroll-bars::-webkit-scrollbar-thumb{-webkit-box-shadow:var(--json-tree-js-border-style-scrollbar);box-shadow:var(--json-tree-js-border-style-scrollbar);background:var(--json-tree-js-color-white)}.custom-scroll-bars::-webkit-scrollbar-thumb:hover{background-color:var(--json-tree-js-color-white)}.custom-scroll-bars::-webkit-scrollbar-thumb:active{background-color:var(--json-tree-js-color-lighter-gray)} \ No newline at end of file diff --git a/dist/jsontree.min.js b/dist/jsontree.min.js index e133da38..049a15da 100755 --- a/dist/jsontree.min.js +++ b/dist/jsontree.min.js @@ -1,4 +1,4 @@ -/*! JsonTree.js v0.1.0 | (c) Bunoon 2024 | MIT License */ +/*! JsonTree.js v0.2.0 | (c) Bunoon 2024 | MIT License */ (function(){function E(a){a.currentView.element.innerHTML=u.empty;T(a);if(q(a.data)&&!z(a.data)){var b=a.currentView.element,d=a.data,c=l(b,"div","object-type-title");b=l(b,"div","object-type-contents");var f=a.showArrowToggles?l(c,"div","down-arrow"):null;d=M(f,b,a,d);h(c,"span","object",g.objectText);a.showCounts&&0n;n++){8!==n&&12!==n&&16!==n&&20!==n||v.push("-");var W=J.floor(16*J.random()).toString(16);v.push(W)}v=v.join(u.empty);y.id=v}e.currentView.element.className="json-tree-js"; e.currentView.element.removeAttribute("data-jsontree-options");E(e);F(e.onRenderComplete,e.currentView.element)}else g.safeMode||(console.error("The attribute 'data-jsontree-options' is not a valid object."),L=!1);else g.safeMode||(console.error("The attribute 'data-jsontree-options' has not been set correctly."),L=!1)}if(!L)break}}});m(I.$jsontree)||(I.$jsontree=this)})(document,window,Math,JSON)})(); \ No newline at end of file diff --git a/docs/CHANGE_LOG.md b/docs/CHANGE_LOG.md index 8d08fe4f..e86f564e 100755 --- a/docs/CHANGE_LOG.md +++ b/docs/CHANGE_LOG.md @@ -1,4 +1,10 @@ # JsonTree.js - Change Log: +## Version 0.2.0: +- + +
+ + ## Version 0.1.0: - Everything :) \ No newline at end of file diff --git a/jsontree.js.nuspec b/jsontree.js.nuspec index fb27da64..58153d4c 100755 --- a/jsontree.js.nuspec +++ b/jsontree.js.nuspec @@ -2,7 +2,7 @@ jJsonTree.js - 0.1.0 + 0.2.0 JsonTree.js A lightweight JavaScript library that generates customizable tree views to better visualize JSON data. William Troup diff --git a/package.json b/package.json index f6e7776c..a911a305 100755 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "jjsontree.js", "title": "JsonTree.js", "description": "A lightweight JavaScript library that generates customizable tree views to better visualize JSON data.", - "version": "0.1.0", + "version": "0.2.0", "main": "dist/jsontree.js", "homepage": "https://www.william-troup.com/jsontree-js/", "author": { diff --git a/src/jsontree.js b/src/jsontree.js index c2cb2fd0..bf945e9f 100755 --- a/src/jsontree.js +++ b/src/jsontree.js @@ -4,7 +4,7 @@ * A lightweight JavaScript library that generates customizable tree views to better visualize JSON data. * * @file jsontree.js - * @version v0.1.0 + * @version v0.2.0 * @author Bunoon * @license MIT License * @copyright Bunoon 2024 @@ -668,7 +668,7 @@ * @returns {string} The version number. */ this.getVersion = function() { - return "0.1.0"; + return "0.2.0"; }; diff --git a/src/jsontree.js.scss b/src/jsontree.js.scss index 831c8313..dc6355de 100755 --- a/src/jsontree.js.scss +++ b/src/jsontree.js.scss @@ -1,5 +1,5 @@ /* - * JsonTree.js Library v0.1.0 + * JsonTree.js Library v0.2.0 * * Copyright 2024 Bunoon * Released under the MIT License From 413ff32fac1be9858019d09a857f3503088c159e Mon Sep 17 00:00:00 2001 From: William Troup Date: Fri, 23 Feb 2024 20:02:31 +0000 Subject: [PATCH 02/10] Minor testing file updates. --- test/dist/jsontree.js.bootstrap.html | 2 +- test/dist/jsontree.js.min.html | 2 +- test/src/jsontree.js.bootstrap.html | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/test/dist/jsontree.js.bootstrap.html b/test/dist/jsontree.js.bootstrap.html index 90433cc7..d5cfdf89 100755 --- a/test/dist/jsontree.js.bootstrap.html +++ b/test/dist/jsontree.js.bootstrap.html @@ -13,7 +13,7 @@

JsonTree.js - Bootstrap

-

This is a basic example of how to use JsonTree.js ... alongside Bootstrap.

+

This is a basic example of how to use JsonTree.js alongside Bootstrap.

diff --git a/test/dist/jsontree.js.min.html b/test/dist/jsontree.js.min.html index f21b9452..e89d8c68 100755 --- a/test/dist/jsontree.js.min.html +++ b/test/dist/jsontree.js.min.html @@ -12,7 +12,7 @@

JsonTree.js - Minimized

-

This is a basic example of how to use JsonTree.js.

+

This is a basic example of how to use JsonTree.js from minimized files.

diff --git a/test/src/jsontree.js.bootstrap.html b/test/src/jsontree.js.bootstrap.html index 95e7a404..a0448bf3 100755 --- a/test/src/jsontree.js.bootstrap.html +++ b/test/src/jsontree.js.bootstrap.html @@ -13,7 +13,7 @@

JsonTree.js - Bootstrap

-

This is a basic example of how to use JsonTree.js ... alongside Bootstrap.

+

This is a basic example of how to use JsonTree.js alongside Bootstrap.

From 99e5f2859bd1ba59f07e95a8a892227066d8d3dc Mon Sep 17 00:00:00 2001 From: William Troup Date: Fri, 23 Feb 2024 20:06:05 +0000 Subject: [PATCH 03/10] The spacing used for the title bar buttons is now smaller when viewed in a mobile. --- dist/jsontree.js.css | 7 ++++++- dist/jsontree.js.css.map | 2 +- dist/jsontree.js.min.css | 2 +- docs/CHANGE_LOG.md | 4 +++- src/jsontree.js.scss | 6 +++++- 5 files changed, 16 insertions(+), 5 deletions(-) diff --git a/dist/jsontree.js.css b/dist/jsontree.js.css index 2705b184..14da8f54 100755 --- a/dist/jsontree.js.css +++ b/dist/jsontree.js.css @@ -130,10 +130,15 @@ div.json-tree-js div.title-bar div.title { font-size: 1.2rem; } div.json-tree-js div.title-bar div.controls { - margin-left: calc(var(--json-tree-js-spacing) * 12); + margin-left: calc(var(--json-tree-js-spacing) * 6); flex-grow: 1; text-align: right; } +@media (min-width: 768px) { + div.json-tree-js div.title-bar div.controls { + margin-left: calc(var(--json-tree-js-spacing) * 12); + } +} div.json-tree-js div.title-bar div.controls button { background-color: var(--json-tree-js-button-background-color); border: var(--json-tree-js-border-size) solid var(--json-tree-js-button-border-color); diff --git a/dist/jsontree.js.css.map b/dist/jsontree.js.css.map index b2193ce4..deda50f1 100755 --- a/dist/jsontree.js.css.map +++ b/dist/jsontree.js.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../src/jsontree.js.scss","../src/foundation/_styles.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUA;EAEI;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EAGA;EACA;EAGA;;;AAIJ;AAAA;AAAA;AAAA;AAAA;AAMA;EC/DI;EACA;EACA;EACA;EACA;EACA;EAUA;EACA;EDkDA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;ECrEA;EACA;;ADuEI;ECxEJ;EACA;;;AD+EJ;AAAA;AAAA;AAAA;AAAA;AAOI;EACI;EACA;EACA;EACA;;AAGJ;AAAA;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACI;;AAIR;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;;AAKR;AAAA;AAAA;AAAA;AAAA;AAOI;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AC3IR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA;;;AD+HZ;AAAA;AAAA;AAAA;AAAA;AAOI;EACI;;AAEA;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;;;AAKZ;AAAA;AAAA;AAAA;AAAA;AAOI;EACI;;;AAKR;AAAA;AAAA;AAAA;AAAA;AAOI;EACI;;AAEA;EACI;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;AAAA;AAAA;AAAA;AAAA;AAAA;EAMI;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EACI;EACA;;AAIR;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;AAKA;AAAA;EACI;EACA;;;AAQpB;AAAA;AAAA;AAAA;AAAA;AAOI;EACI;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;;AAEA;EACI;;AAGJ;EACI","file":"jsontree.js.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../src/jsontree.js.scss","../src/foundation/_styles.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUA;EAEI;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EAGA;EACA;EAGA;;;AAIJ;AAAA;AAAA;AAAA;AAAA;AAMA;EC/DI;EACA;EACA;EACA;EACA;EACA;EAUA;EACA;EDkDA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;ECrEA;EACA;;ADuEI;ECxEJ;EACA;;;AD+EJ;AAAA;AAAA;AAAA;AAAA;AAOI;EACI;EACA;EACA;EACA;;AAGJ;AAAA;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACI;;AAIR;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;;AAKR;AAAA;AAAA;AAAA;AAAA;AAOI;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAEA;EALJ;IAMQ;;;AC9IZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA;;;ADmIZ;AAAA;AAAA;AAAA;AAAA;AAOI;EACI;;AAEA;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;;;AAKZ;AAAA;AAAA;AAAA;AAAA;AAOI;EACI;;;AAKR;AAAA;AAAA;AAAA;AAAA;AAOI;EACI;;AAEA;EACI;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;AAAA;AAAA;AAAA;AAAA;AAAA;EAMI;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EACI;EACA;;AAIR;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;AAKA;AAAA;EACI;EACA;;;AAQpB;AAAA;AAAA;AAAA;AAAA;AAOI;EACI;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;;AAEA;EACI;;AAGJ;EACI","file":"jsontree.js.css"} \ No newline at end of file diff --git a/dist/jsontree.js.min.css b/dist/jsontree.js.min.css index aacc496d..226cbbb7 100755 --- a/dist/jsontree.js.min.css +++ b/dist/jsontree.js.min.css @@ -1,2 +1,2 @@ /* JsonTree.js v0.2.0 | (c) Bunoon 2024 | MIT License */ -:root{--json-tree-js-default-font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--json-tree-js-text-bold-weight:400;--json-tree-js-header-bold-weight:900;--json-tree-js-title-bold-weight:var(--json-tree-js-header-bold-weight);--json-tree-js-text-bold-weight-active:var(--json-tree-js-header-bold-weight);--json-tree-js-color-black:#3b3a3a;--json-tree-js-color-white:#F5F5F5;--json-tree-js-color-snow-white:#F5F5F5;--json-tree-js-color-boolean:red;--json-tree-js-color-number:#666bf9;--json-tree-js-color-string:#78b13f;--json-tree-js-color-date:#a656f5;--json-tree-js-color-array:#F28C28;--json-tree-js-color-object:silver;--json-tree-js-color-null:#BBB;--json-tree-js-color-function:#BBB;--json-tree-js-container-background-color:#22272e;--json-tree-js-container-border-color:#454c56;--json-tree-js-button-background-color:#2d333b;--json-tree-js-button-border-color:var(--json-tree-js-container-border-color);--json-tree-js-button-text-color:var(--json-tree-js-color-white);--json-tree-js-button-background-color-hover:var(--json-tree-js-container-border-color);--json-tree-js-button-text-color-hover:var(--json-tree-js-color-snow-white);--json-tree-js-button-background-color-active:#616b79;--json-tree-js-button-text-color-active:var(--json-tree-js-color-snow-white);--json-tree-js-border-radius:.5rem;--json-tree-js-border-style-scrollbar:inset 0 0 6px var(--json-tree-js-color-dark-gray);--json-tree-js-border-size:.5px;--json-tree-js-spacing:10px;--json-tree-js-spacing-font-size:.85rem;--json-tree-js-transition:all .3s}div.json-tree-js{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;cursor:default;box-sizing:border-box;line-height:normal;font-family:var(--json-tree-js-default-font);display:inline-block;position:relative;border-radius:var(--json-tree-js-border-radius);background-color:var(--json-tree-js-container-background-color);color:var(--json-tree-js-color-white);border:var(--json-tree-js-border-size) solid var(--json-tree-js-container-border-color);padding:var(--json-tree-js-spacing);font-size:var(--json-tree-js-spacing-font-size);font-weight:var(--json-tree-js-text-bold-weight);width:auto;overflow:hidden;margin:0!important}div.json-tree-js div.no-click{pointer-events:none!important}div.json-tree-js *{box-sizing:border-box;line-height:normal}div.json-tree-js *::before,div.json-tree-js *::after{box-sizing:border-box;line-height:normal}div.json-tree-js div.no-arrow{display:inline-block;width:12px;height:8px;margin-right:calc(var(--json-tree-js-spacing))}div.json-tree-js div.down-arrow,div.json-tree-js div.right-arrow{display:inline-block;width:0;height:0;margin-right:calc(var(--json-tree-js-spacing));cursor:pointer;transition:var(--json-tree-js-transition);transition-property:opacity}div.json-tree-js div.down-arrow:hover,div.json-tree-js div.right-arrow:hover{opacity:.7}div.json-tree-js div.down-arrow{border-left:6px solid transparent;border-right:6px solid transparent;border-top:8px solid var(--json-tree-js-color-white)}div.json-tree-js div.right-arrow{border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:12px solid var(--json-tree-js-color-white)}div.json-tree-js div.title-bar{display:flex;margin-bottom:var(--json-tree-js-spacing)}div.json-tree-js div.title-bar div.title{text-align:left;width:auto;font-weight:var(--json-tree-js-title-bold-weight);font-size:1.2rem}div.json-tree-js div.title-bar div.controls{margin-left:calc(var(--json-tree-js-spacing) * 12);flex-grow:1;text-align:right}div.json-tree-js div.title-bar div.controls button{background-color:var(--json-tree-js-button-background-color);border:var(--json-tree-js-border-size) solid var(--json-tree-js-button-border-color);color:var(--json-tree-js-button-text-color);border-radius:var(--json-tree-js-border-radius);padding-top:5px;padding-bottom:5px;padding-left:9px;padding-right:9px;outline:none;transition:var(--json-tree-js-transition)}div.json-tree-js div.title-bar div.controls button:not(.active):active{background:var(--json-tree-js-button-background-color-active)!important;color:var(--json-tree-js-button-text-color-active)!important}div.json-tree-js div.title-bar div.controls button:not(.active):hover{cursor:pointer;background:var(--json-tree-js-button-background-color-hover);color:var(--json-tree-js-button-text-color-hover)}div.json-tree-js div.object-type-title{font-weight:var(--json-tree-js-header-bold-weight)}div.json-tree-js div.object-type-title span.array{color:var(--json-tree-js-color-array)}div.json-tree-js div.object-type-title span.object{color:var(--json-tree-js-color-object)}div.json-tree-js div.object-type-title span.count{margin-left:calc(var(--json-tree-js-spacing) / 2);font-weight:var(--json-tree-js-text-bold-weight)}div.json-tree-js div.object-type-contents{margin-top:calc(var(--json-tree-js-spacing) / 2)}div.json-tree-js div.object-type-contents{margin-left:calc(var(--json-tree-js-spacing) * 2)}div.json-tree-js div.object-type-contents div.object-type-value{white-space:nowrap;overflow:hidden;margin-top:calc(var(--json-tree-js-spacing) / 2)}div.json-tree-js div.object-type-contents div.object-type-value span.split{margin-left:calc(var(--json-tree-js-spacing) / 2);margin-right:calc(var(--json-tree-js-spacing) / 2)}div.json-tree-js div.object-type-contents div.object-type-value span.boolean,div.json-tree-js div.object-type-contents div.object-type-value span.number,div.json-tree-js div.object-type-contents div.object-type-value span.string,div.json-tree-js div.object-type-contents div.object-type-value span.date,div.json-tree-js div.object-type-contents div.object-type-value span.null,div.json-tree-js div.object-type-contents div.object-type-value span.function{transition:var(--json-tree-js-transition);transition-property:opacity}div.json-tree-js div.object-type-contents div.object-type-value span.boolean:not(.no-hover):hover,div.json-tree-js div.object-type-contents div.object-type-value span.number:not(.no-hover):hover,div.json-tree-js div.object-type-contents div.object-type-value span.string:not(.no-hover):hover,div.json-tree-js div.object-type-contents div.object-type-value span.date:not(.no-hover):hover,div.json-tree-js div.object-type-contents div.object-type-value span.null:not(.no-hover):hover,div.json-tree-js div.object-type-contents div.object-type-value span.function:not(.no-hover):hover{cursor:pointer;opacity:.7}div.json-tree-js div.object-type-contents div.object-type-value span.boolean{color:var(--json-tree-js-color-boolean)}div.json-tree-js div.object-type-contents div.object-type-value span.number{color:var(--json-tree-js-color-number)}div.json-tree-js div.object-type-contents div.object-type-value span.string{color:var(--json-tree-js-color-string)}div.json-tree-js div.object-type-contents div.object-type-value span.date{color:var(--json-tree-js-color-date)}div.json-tree-js div.object-type-contents div.object-type-value span.array{font-weight:var(--json-tree-js-header-bold-weight);color:var(--json-tree-js-color-array)}div.json-tree-js div.object-type-contents div.object-type-value span.object{font-weight:var(--json-tree-js-header-bold-weight);color:var(--json-tree-js-color-object)}div.json-tree-js div.object-type-contents div.object-type-value span.null{color:var(--json-tree-js-color-null);font-style:italic}div.json-tree-js div.object-type-contents div.object-type-value span.function{color:var(--json-tree-js-color-function);font-style:italic}div.json-tree-js div.object-type-contents div.object-type-value span.array span.count,div.json-tree-js div.object-type-contents div.object-type-value span.object span.count{margin-left:calc(var(--json-tree-js-spacing) / 2);font-weight:var(--json-tree-js-text-bold-weight)}.custom-scroll-bars::-webkit-scrollbar{width:12px}.custom-scroll-bars::-webkit-scrollbar-track{-webkit-box-shadow:var(--json-tree-js-border-style-scrollbar);box-shadow:var(--json-tree-js-border-style-scrollbar)}.custom-scroll-bars::-webkit-scrollbar-thumb{-webkit-box-shadow:var(--json-tree-js-border-style-scrollbar);box-shadow:var(--json-tree-js-border-style-scrollbar);background:var(--json-tree-js-color-white)}.custom-scroll-bars::-webkit-scrollbar-thumb:hover{background-color:var(--json-tree-js-color-white)}.custom-scroll-bars::-webkit-scrollbar-thumb:active{background-color:var(--json-tree-js-color-lighter-gray)} \ No newline at end of file +:root{--json-tree-js-default-font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--json-tree-js-text-bold-weight:400;--json-tree-js-header-bold-weight:900;--json-tree-js-title-bold-weight:var(--json-tree-js-header-bold-weight);--json-tree-js-text-bold-weight-active:var(--json-tree-js-header-bold-weight);--json-tree-js-color-black:#3b3a3a;--json-tree-js-color-white:#F5F5F5;--json-tree-js-color-snow-white:#F5F5F5;--json-tree-js-color-boolean:red;--json-tree-js-color-number:#666bf9;--json-tree-js-color-string:#78b13f;--json-tree-js-color-date:#a656f5;--json-tree-js-color-array:#F28C28;--json-tree-js-color-object:silver;--json-tree-js-color-null:#BBB;--json-tree-js-color-function:#BBB;--json-tree-js-container-background-color:#22272e;--json-tree-js-container-border-color:#454c56;--json-tree-js-button-background-color:#2d333b;--json-tree-js-button-border-color:var(--json-tree-js-container-border-color);--json-tree-js-button-text-color:var(--json-tree-js-color-white);--json-tree-js-button-background-color-hover:var(--json-tree-js-container-border-color);--json-tree-js-button-text-color-hover:var(--json-tree-js-color-snow-white);--json-tree-js-button-background-color-active:#616b79;--json-tree-js-button-text-color-active:var(--json-tree-js-color-snow-white);--json-tree-js-border-radius:.5rem;--json-tree-js-border-style-scrollbar:inset 0 0 6px var(--json-tree-js-color-dark-gray);--json-tree-js-border-size:.5px;--json-tree-js-spacing:10px;--json-tree-js-spacing-font-size:.85rem;--json-tree-js-transition:all .3s}div.json-tree-js{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;cursor:default;box-sizing:border-box;line-height:normal;font-family:var(--json-tree-js-default-font);display:inline-block;position:relative;border-radius:var(--json-tree-js-border-radius);background-color:var(--json-tree-js-container-background-color);color:var(--json-tree-js-color-white);border:var(--json-tree-js-border-size) solid var(--json-tree-js-container-border-color);padding:var(--json-tree-js-spacing);font-size:var(--json-tree-js-spacing-font-size);font-weight:var(--json-tree-js-text-bold-weight);width:auto;overflow:hidden;margin:0!important}div.json-tree-js div.no-click{pointer-events:none!important}div.json-tree-js *{box-sizing:border-box;line-height:normal}div.json-tree-js *::before,div.json-tree-js *::after{box-sizing:border-box;line-height:normal}div.json-tree-js div.no-arrow{display:inline-block;width:12px;height:8px;margin-right:calc(var(--json-tree-js-spacing))}div.json-tree-js div.down-arrow,div.json-tree-js div.right-arrow{display:inline-block;width:0;height:0;margin-right:calc(var(--json-tree-js-spacing));cursor:pointer;transition:var(--json-tree-js-transition);transition-property:opacity}div.json-tree-js div.down-arrow:hover,div.json-tree-js div.right-arrow:hover{opacity:.7}div.json-tree-js div.down-arrow{border-left:6px solid transparent;border-right:6px solid transparent;border-top:8px solid var(--json-tree-js-color-white)}div.json-tree-js div.right-arrow{border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:12px solid var(--json-tree-js-color-white)}div.json-tree-js div.title-bar{display:flex;margin-bottom:var(--json-tree-js-spacing)}div.json-tree-js div.title-bar div.title{text-align:left;width:auto;font-weight:var(--json-tree-js-title-bold-weight);font-size:1.2rem}div.json-tree-js div.title-bar div.controls{margin-left:calc(var(--json-tree-js-spacing) * 6);flex-grow:1;text-align:right}@media (min-width:768px){div.json-tree-js div.title-bar div.controls{margin-left:calc(var(--json-tree-js-spacing) * 12)}}div.json-tree-js div.title-bar div.controls button{background-color:var(--json-tree-js-button-background-color);border:var(--json-tree-js-border-size) solid var(--json-tree-js-button-border-color);color:var(--json-tree-js-button-text-color);border-radius:var(--json-tree-js-border-radius);padding-top:5px;padding-bottom:5px;padding-left:9px;padding-right:9px;outline:none;transition:var(--json-tree-js-transition)}div.json-tree-js div.title-bar div.controls button:not(.active):active{background:var(--json-tree-js-button-background-color-active)!important;color:var(--json-tree-js-button-text-color-active)!important}div.json-tree-js div.title-bar div.controls button:not(.active):hover{cursor:pointer;background:var(--json-tree-js-button-background-color-hover);color:var(--json-tree-js-button-text-color-hover)}div.json-tree-js div.object-type-title{font-weight:var(--json-tree-js-header-bold-weight)}div.json-tree-js div.object-type-title span.array{color:var(--json-tree-js-color-array)}div.json-tree-js div.object-type-title span.object{color:var(--json-tree-js-color-object)}div.json-tree-js div.object-type-title span.count{margin-left:calc(var(--json-tree-js-spacing) / 2);font-weight:var(--json-tree-js-text-bold-weight)}div.json-tree-js div.object-type-contents{margin-top:calc(var(--json-tree-js-spacing) / 2)}div.json-tree-js div.object-type-contents{margin-left:calc(var(--json-tree-js-spacing) * 2)}div.json-tree-js div.object-type-contents div.object-type-value{white-space:nowrap;overflow:hidden;margin-top:calc(var(--json-tree-js-spacing) / 2)}div.json-tree-js div.object-type-contents div.object-type-value span.split{margin-left:calc(var(--json-tree-js-spacing) / 2);margin-right:calc(var(--json-tree-js-spacing) / 2)}div.json-tree-js div.object-type-contents div.object-type-value span.boolean,div.json-tree-js div.object-type-contents div.object-type-value span.number,div.json-tree-js div.object-type-contents div.object-type-value span.string,div.json-tree-js div.object-type-contents div.object-type-value span.date,div.json-tree-js div.object-type-contents div.object-type-value span.null,div.json-tree-js div.object-type-contents div.object-type-value span.function{transition:var(--json-tree-js-transition);transition-property:opacity}div.json-tree-js div.object-type-contents div.object-type-value span.boolean:not(.no-hover):hover,div.json-tree-js div.object-type-contents div.object-type-value span.number:not(.no-hover):hover,div.json-tree-js div.object-type-contents div.object-type-value span.string:not(.no-hover):hover,div.json-tree-js div.object-type-contents div.object-type-value span.date:not(.no-hover):hover,div.json-tree-js div.object-type-contents div.object-type-value span.null:not(.no-hover):hover,div.json-tree-js div.object-type-contents div.object-type-value span.function:not(.no-hover):hover{cursor:pointer;opacity:.7}div.json-tree-js div.object-type-contents div.object-type-value span.boolean{color:var(--json-tree-js-color-boolean)}div.json-tree-js div.object-type-contents div.object-type-value span.number{color:var(--json-tree-js-color-number)}div.json-tree-js div.object-type-contents div.object-type-value span.string{color:var(--json-tree-js-color-string)}div.json-tree-js div.object-type-contents div.object-type-value span.date{color:var(--json-tree-js-color-date)}div.json-tree-js div.object-type-contents div.object-type-value span.array{font-weight:var(--json-tree-js-header-bold-weight);color:var(--json-tree-js-color-array)}div.json-tree-js div.object-type-contents div.object-type-value span.object{font-weight:var(--json-tree-js-header-bold-weight);color:var(--json-tree-js-color-object)}div.json-tree-js div.object-type-contents div.object-type-value span.null{color:var(--json-tree-js-color-null);font-style:italic}div.json-tree-js div.object-type-contents div.object-type-value span.function{color:var(--json-tree-js-color-function);font-style:italic}div.json-tree-js div.object-type-contents div.object-type-value span.array span.count,div.json-tree-js div.object-type-contents div.object-type-value span.object span.count{margin-left:calc(var(--json-tree-js-spacing) / 2);font-weight:var(--json-tree-js-text-bold-weight)}.custom-scroll-bars::-webkit-scrollbar{width:12px}.custom-scroll-bars::-webkit-scrollbar-track{-webkit-box-shadow:var(--json-tree-js-border-style-scrollbar);box-shadow:var(--json-tree-js-border-style-scrollbar)}.custom-scroll-bars::-webkit-scrollbar-thumb{-webkit-box-shadow:var(--json-tree-js-border-style-scrollbar);box-shadow:var(--json-tree-js-border-style-scrollbar);background:var(--json-tree-js-color-white)}.custom-scroll-bars::-webkit-scrollbar-thumb:hover{background-color:var(--json-tree-js-color-white)}.custom-scroll-bars::-webkit-scrollbar-thumb:active{background-color:var(--json-tree-js-color-lighter-gray)} \ No newline at end of file diff --git a/docs/CHANGE_LOG.md b/docs/CHANGE_LOG.md index e86f564e..6e36a60f 100755 --- a/docs/CHANGE_LOG.md +++ b/docs/CHANGE_LOG.md @@ -1,7 +1,9 @@ # JsonTree.js - Change Log: ## Version 0.2.0: -- + +#### **UI Improvements:** +- The spacing used for the title bar buttons is now smaller when viewed in a mobile.
diff --git a/src/jsontree.js.scss b/src/jsontree.js.scss index dc6355de..f686b7df 100755 --- a/src/jsontree.js.scss +++ b/src/jsontree.js.scss @@ -158,10 +158,14 @@ div.json-tree-js { } div.controls { - margin-left: calc( var(--json-tree-js-spacing) * 12 ); + margin-left: calc( var(--json-tree-js-spacing) * 6 ); flex-grow: 1; text-align: right; + @media (min-width: $minimum-width) { + margin-left: calc( var(--json-tree-js-spacing) * 12 ); + } + @include buttons; } } From d2fcc8a81ed15fd8f31d9b7e4ce870091caa8180 Mon Sep 17 00:00:00 2001 From: William Troup Date: Fri, 23 Feb 2024 20:19:32 +0000 Subject: [PATCH 04/10] Added a new binding option called "sortPropertyNamesInAlphabeticalOrder", which states if the sorted property names for an object should be in alphabetical order (defaults to true). --- dist/jsontree.js | 4 ++++ dist/jsontree.min.js | 23 ++++++++++++----------- docs/CHANGE_LOG.md | 3 +++ docs/binding/OPTIONS.md | 3 ++- src/jsontree.js | 5 +++++ 5 files changed, 26 insertions(+), 12 deletions(-) diff --git a/dist/jsontree.js b/dist/jsontree.js index 7f963f01..c6b4fce6 100755 --- a/dist/jsontree.js +++ b/dist/jsontree.js @@ -116,6 +116,9 @@ } if (bindingOptions.sortPropertyNames) { properties = properties.sort(); + if (!bindingOptions.sortPropertyNamesInAlphabeticalOrder) { + properties = properties.reverse(); + } } var propertiesLength = properties.length; var propertyIndex = 0; @@ -229,6 +232,7 @@ options.showTitleTreeControls = getDefaultBoolean(options.showTitleTreeControls, true); options.showAllAsClosed = getDefaultBoolean(options.showAllAsClosed, false); options.sortPropertyNames = getDefaultBoolean(options.sortPropertyNames, true); + options.sortPropertyNamesInAlphabeticalOrder = getDefaultBoolean(options.sortPropertyNamesInAlphabeticalOrder, true); options = buildAttributeOptionStrings(options); options = buildAttributeOptionCustomTriggers(options); return options; diff --git a/dist/jsontree.min.js b/dist/jsontree.min.js index 049a15da..ba674e22 100755 --- a/dist/jsontree.min.js +++ b/dist/jsontree.min.js @@ -1,14 +1,15 @@ /*! JsonTree.js v0.2.0 | (c) Bunoon 2024 | MIT License */ (function(){function E(a){a.currentView.element.innerHTML=u.empty;T(a);if(q(a.data)&&!z(a.data)){var b=a.currentView.element,d=a.data,c=l(b,"div","object-type-title");b=l(b,"div","object-type-contents");var f=a.showArrowToggles?l(c,"div","down-arrow"):null;d=M(f,b,a,d);h(c,"span","object",g.objectText);a.showCounts&&0n;n++){8!==n&&12!==n&&16!==n&&20!==n||v.push("-");var W=J.floor(16*J.random()).toString(16);v.push(W)}v=v.join(u.empty);y.id=v}e.currentView.element.className="json-tree-js"; -e.currentView.element.removeAttribute("data-jsontree-options");E(e);F(e.onRenderComplete,e.currentView.element)}else g.safeMode||(console.error("The attribute 'data-jsontree-options' is not a valid object."),L=!1);else g.safeMode||(console.error("The attribute 'data-jsontree-options' has not been set correctly."),L=!1)}if(!L)break}}});m(I.$jsontree)||(I.$jsontree=this)})(document,window,Math,JSON)})(); \ No newline at end of file +!0;E(a)}}}}function M(a,b,d,c){var f=0,k=[];for(r in c)c.hasOwnProperty(r)&&k.push(r);d.sortPropertyNames&&(k=k.sort(),d.sortPropertyNamesInAlphabeticalOrder||(k=k.reverse()));var r=k.length;for(var t=0;tn;n++){8!==n&&12!==n&&16!==n&&20!==n||v.push("-");var W= +J.floor(16*J.random()).toString(16);v.push(W)}v=v.join(u.empty);y.id=v}e.currentView.element.className="json-tree-js";e.currentView.element.removeAttribute("data-jsontree-options");E(e);F(e.onRenderComplete,e.currentView.element)}else g.safeMode||(console.error("The attribute 'data-jsontree-options' is not a valid object."),L=!1);else g.safeMode||(console.error("The attribute 'data-jsontree-options' has not been set correctly."),L=!1)}if(!L)break}}});m(I.$jsontree)||(I.$jsontree=this)})(document, +window,Math,JSON)})(); \ No newline at end of file diff --git a/docs/CHANGE_LOG.md b/docs/CHANGE_LOG.md index 6e36a60f..420de293 100755 --- a/docs/CHANGE_LOG.md +++ b/docs/CHANGE_LOG.md @@ -2,6 +2,9 @@ ## Version 0.2.0: +#### **Binding Options:** +- Added a new binding option called "sortPropertyNamesInAlphabeticalOrder", which states if the sorted property names for an object should be in alphabetical order (defaults to true). + #### **UI Improvements:** - The spacing used for the title bar buttons is now smaller when viewed in a mobile. diff --git a/docs/binding/OPTIONS.md b/docs/binding/OPTIONS.md index c9d8b4cb..9b67ea9f 100755 --- a/docs/binding/OPTIONS.md +++ b/docs/binding/OPTIONS.md @@ -17,7 +17,8 @@ Below are all the JSON properties that can be passed in the "data-jsontree-optio | *boolean* | showTitle | States if the title should be shown (defaults to true). | | *boolean* | showTitleTreeControls | States if the tree control button should be shown in the title bar (defaults to true). | | *boolean* | showAllAsClosed | States if all the notes should be closed when first rendered (defaults to false). | -| *boolean* | sortPropertyNames | States if the property names for an object should be sorted in alphabetical order (defaults to true). | +| *boolean* | sortPropertyNames | States if the property names for an object should be sorted (defaults to true). | +| *boolean* | sortPropertyNamesInAlphabeticalOrder | States if the sorted property names for an object should be in alphabetical order (defaults to true). |
diff --git a/src/jsontree.js b/src/jsontree.js index bf945e9f..ab230d53 100755 --- a/src/jsontree.js +++ b/src/jsontree.js @@ -202,6 +202,10 @@ if ( bindingOptions.sortPropertyNames ) { properties = properties.sort(); + + if ( !bindingOptions.sortPropertyNamesInAlphabeticalOrder ) { + properties = properties.reverse(); + } } var propertiesLength = properties.length; @@ -354,6 +358,7 @@ options.showTitleTreeControls = getDefaultBoolean( options.showTitleTreeControls, true ); options.showAllAsClosed = getDefaultBoolean( options.showAllAsClosed, false ); options.sortPropertyNames = getDefaultBoolean( options.sortPropertyNames, true ); + options.sortPropertyNamesInAlphabeticalOrder = getDefaultBoolean( options.sortPropertyNamesInAlphabeticalOrder, true ); options = buildAttributeOptionStrings( options ); options = buildAttributeOptionCustomTriggers( options ); From 9bf33ee2f44825f41dcf290f2995e972354800f5 Mon Sep 17 00:00:00 2001 From: William Troup Date: Fri, 23 Feb 2024 20:58:01 +0000 Subject: [PATCH 05/10] Added a new binding option called "showCommas", which states if commas should be shown at the end of each line (defaults to false). --- dist/jsontree.js | 20 +++++++++++++++++--- dist/jsontree.js.css | 4 ++++ dist/jsontree.js.css.map | 2 +- dist/jsontree.js.min.css | 2 +- dist/jsontree.min.js | 28 ++++++++++++++-------------- docs/CHANGE_LOG.md | 1 + docs/binding/OPTIONS.md | 1 + src/jsontree.js | 29 +++++++++++++++++++++++++---- src/jsontree.js.scss | 5 +++++ 9 files changed, 69 insertions(+), 23 deletions(-) diff --git a/dist/jsontree.js b/dist/jsontree.js index c6b4fce6..a6f61f19 100755 --- a/dist/jsontree.js +++ b/dist/jsontree.js @@ -125,7 +125,7 @@ for (; propertyIndex < propertiesLength; propertyIndex++) { var propertyName = properties[propertyIndex]; if (data.hasOwnProperty(propertyName)) { - renderValue(objectTypeContents, bindingOptions, propertyName, data[propertyName]); + renderValue(objectTypeContents, bindingOptions, propertyName, data[propertyName], propertyIndex === propertiesLength - 1); propertyCount++; } } @@ -137,11 +137,11 @@ var dataIndex = 0; for (; dataIndex < dataLength; dataIndex++) { var name = bindingOptions.useZeroIndexingForArrays ? dataIndex.toString() : (dataIndex + 1).toString(); - renderValue(objectTypeContents, bindingOptions, name, data[dataIndex]); + renderValue(objectTypeContents, bindingOptions, name, data[dataIndex], dataIndex === dataLength - 1); } addArrowEvent(bindingOptions, arrow, objectTypeContents); } - function renderValue(container, bindingOptions, name, value) { + function renderValue(container, bindingOptions, name, value, isLastItem) { var objectTypeValue = createElement(container, "div", "object-type-value"); var arrow = bindingOptions.showArrowToggles ? createElement(objectTypeValue, "div", "no-arrow") : null; var valueElement = null; @@ -149,16 +149,22 @@ createElementWithHTML(objectTypeValue, "span", "split", ":"); if (!isDefined(value)) { valueElement = createElementWithHTML(objectTypeValue, "span", "null", "null"); + createComma(bindingOptions, objectTypeValue, isLastItem); } else if (isDefinedFunction(value)) { valueElement = createElementWithHTML(objectTypeValue, "span", "function", getFunctionName(value)); + createComma(bindingOptions, objectTypeValue, isLastItem); } else if (isDefinedBoolean(value)) { valueElement = createElementWithHTML(objectTypeValue, "span", "boolean", value); + createComma(bindingOptions, objectTypeValue, isLastItem); } else if (isDefinedNumber(value)) { valueElement = createElementWithHTML(objectTypeValue, "span", "number", value); + createComma(bindingOptions, objectTypeValue, isLastItem); } else if (isDefinedString(value)) { valueElement = createElementWithHTML(objectTypeValue, "span", "string", bindingOptions.showStringQuotes ? '"' + value + '"' : value); + createComma(bindingOptions, objectTypeValue, isLastItem); } else if (isDefinedDate(value)) { valueElement = createElementWithHTML(objectTypeValue, "span", "date", getCustomFormattedDateTimeText(value, bindingOptions.dateTimeFormat)); + createComma(bindingOptions, objectTypeValue, isLastItem); } else if (isDefinedObject(value) && !isDefinedArray(value)) { var objectTitle = createElement(objectTypeValue, "span", "object"); var objectTypeContents = createElement(objectTypeValue, "div", "object-type-contents"); @@ -167,6 +173,7 @@ if (bindingOptions.showCounts && propertyCount > 0) { createElementWithHTML(objectTitle, "span", "count", "{" + propertyCount + "}"); } + createComma(bindingOptions, objectTitle, isLastItem); } else if (isDefinedArray(value)) { var arrayTitle = createElement(objectTypeValue, "span", "array"); var arrayTypeContents = createElement(objectTypeValue, "div", "object-type-contents"); @@ -174,6 +181,7 @@ if (bindingOptions.showCounts) { createElementWithHTML(arrayTitle, "span", "count", "[" + value.length + "]"); } + createComma(bindingOptions, arrayTitle, isLastItem); renderArrayValues(arrow, arrayTypeContents, bindingOptions, value); } if (isDefined(valueElement)) { @@ -220,6 +228,11 @@ result = result + "()"; return result; } + function createComma(bindingOptions, objectTypeValue, isLastItem) { + if (bindingOptions.showCommas && !isLastItem) { + createElementWithHTML(objectTypeValue, "span", "comma", ","); + } + } function buildAttributeOptions(newOptions) { var options = !isDefinedObject(newOptions) ? {} : newOptions; options.data = getDefaultObject(options.data, null); @@ -233,6 +246,7 @@ options.showAllAsClosed = getDefaultBoolean(options.showAllAsClosed, false); options.sortPropertyNames = getDefaultBoolean(options.sortPropertyNames, true); options.sortPropertyNamesInAlphabeticalOrder = getDefaultBoolean(options.sortPropertyNamesInAlphabeticalOrder, true); + options.showCommas = getDefaultBoolean(options.showCommas, false); options = buildAttributeOptionStrings(options); options = buildAttributeOptionCustomTriggers(options); return options; diff --git a/dist/jsontree.js.css b/dist/jsontree.js.css index 14da8f54..10c21be7 100755 --- a/dist/jsontree.js.css +++ b/dist/jsontree.js.css @@ -224,6 +224,10 @@ div.json-tree-js div.object-type-contents div.object-type-value span.function:no cursor: pointer; opacity: 0.7; } +div.json-tree-js div.object-type-contents div.object-type-value span.comma { + color: var(--json-tree-js-color-white); + font-weight: var(--json-tree-js-text-bold-weight); +} div.json-tree-js div.object-type-contents div.object-type-value span.boolean { color: var(--json-tree-js-color-boolean); } diff --git a/dist/jsontree.js.css.map b/dist/jsontree.js.css.map index deda50f1..d27815f6 100755 --- a/dist/jsontree.js.css.map +++ b/dist/jsontree.js.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../src/jsontree.js.scss","../src/foundation/_styles.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUA;EAEI;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EAGA;EACA;EAGA;;;AAIJ;AAAA;AAAA;AAAA;AAAA;AAMA;EC/DI;EACA;EACA;EACA;EACA;EACA;EAUA;EACA;EDkDA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;ECrEA;EACA;;ADuEI;ECxEJ;EACA;;;AD+EJ;AAAA;AAAA;AAAA;AAAA;AAOI;EACI;EACA;EACA;EACA;;AAGJ;AAAA;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACI;;AAIR;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;;AAKR;AAAA;AAAA;AAAA;AAAA;AAOI;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAEA;EALJ;IAMQ;;;AC9IZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA;;;ADmIZ;AAAA;AAAA;AAAA;AAAA;AAOI;EACI;;AAEA;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;;;AAKZ;AAAA;AAAA;AAAA;AAAA;AAOI;EACI;;;AAKR;AAAA;AAAA;AAAA;AAAA;AAOI;EACI;;AAEA;EACI;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;AAAA;AAAA;AAAA;AAAA;AAAA;EAMI;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EACI;EACA;;AAIR;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;AAKA;AAAA;EACI;EACA;;;AAQpB;AAAA;AAAA;AAAA;AAAA;AAOI;EACI;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;;AAEA;EACI;;AAGJ;EACI","file":"jsontree.js.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../src/jsontree.js.scss","../src/foundation/_styles.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUA;EAEI;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EAGA;EACA;EAGA;;;AAIJ;AAAA;AAAA;AAAA;AAAA;AAMA;EC/DI;EACA;EACA;EACA;EACA;EACA;EAUA;EACA;EDkDA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;ECrEA;EACA;;ADuEI;ECxEJ;EACA;;;AD+EJ;AAAA;AAAA;AAAA;AAAA;AAOI;EACI;EACA;EACA;EACA;;AAGJ;AAAA;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACI;;AAIR;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;;AAKR;AAAA;AAAA;AAAA;AAAA;AAOI;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAEA;EALJ;IAMQ;;;AC9IZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA;;;ADmIZ;AAAA;AAAA;AAAA;AAAA;AAOI;EACI;;AAEA;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;;;AAKZ;AAAA;AAAA;AAAA;AAAA;AAOI;EACI;;;AAKR;AAAA;AAAA;AAAA;AAAA;AAOI;EACI;;AAEA;EACI;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;AAAA;AAAA;AAAA;AAAA;AAAA;EAMI;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EACI;EACA;;AAIR;EACI;EACA;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;AAKA;AAAA;EACI;EACA;;;AAQpB;AAAA;AAAA;AAAA;AAAA;AAOI;EACI;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;;AAEA;EACI;;AAGJ;EACI","file":"jsontree.js.css"} \ No newline at end of file diff --git a/dist/jsontree.js.min.css b/dist/jsontree.js.min.css index 226cbbb7..a675c5c6 100755 --- a/dist/jsontree.js.min.css +++ b/dist/jsontree.js.min.css @@ -1,2 +1,2 @@ /* JsonTree.js v0.2.0 | (c) Bunoon 2024 | MIT License */ -:root{--json-tree-js-default-font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--json-tree-js-text-bold-weight:400;--json-tree-js-header-bold-weight:900;--json-tree-js-title-bold-weight:var(--json-tree-js-header-bold-weight);--json-tree-js-text-bold-weight-active:var(--json-tree-js-header-bold-weight);--json-tree-js-color-black:#3b3a3a;--json-tree-js-color-white:#F5F5F5;--json-tree-js-color-snow-white:#F5F5F5;--json-tree-js-color-boolean:red;--json-tree-js-color-number:#666bf9;--json-tree-js-color-string:#78b13f;--json-tree-js-color-date:#a656f5;--json-tree-js-color-array:#F28C28;--json-tree-js-color-object:silver;--json-tree-js-color-null:#BBB;--json-tree-js-color-function:#BBB;--json-tree-js-container-background-color:#22272e;--json-tree-js-container-border-color:#454c56;--json-tree-js-button-background-color:#2d333b;--json-tree-js-button-border-color:var(--json-tree-js-container-border-color);--json-tree-js-button-text-color:var(--json-tree-js-color-white);--json-tree-js-button-background-color-hover:var(--json-tree-js-container-border-color);--json-tree-js-button-text-color-hover:var(--json-tree-js-color-snow-white);--json-tree-js-button-background-color-active:#616b79;--json-tree-js-button-text-color-active:var(--json-tree-js-color-snow-white);--json-tree-js-border-radius:.5rem;--json-tree-js-border-style-scrollbar:inset 0 0 6px var(--json-tree-js-color-dark-gray);--json-tree-js-border-size:.5px;--json-tree-js-spacing:10px;--json-tree-js-spacing-font-size:.85rem;--json-tree-js-transition:all .3s}div.json-tree-js{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;cursor:default;box-sizing:border-box;line-height:normal;font-family:var(--json-tree-js-default-font);display:inline-block;position:relative;border-radius:var(--json-tree-js-border-radius);background-color:var(--json-tree-js-container-background-color);color:var(--json-tree-js-color-white);border:var(--json-tree-js-border-size) solid var(--json-tree-js-container-border-color);padding:var(--json-tree-js-spacing);font-size:var(--json-tree-js-spacing-font-size);font-weight:var(--json-tree-js-text-bold-weight);width:auto;overflow:hidden;margin:0!important}div.json-tree-js div.no-click{pointer-events:none!important}div.json-tree-js *{box-sizing:border-box;line-height:normal}div.json-tree-js *::before,div.json-tree-js *::after{box-sizing:border-box;line-height:normal}div.json-tree-js div.no-arrow{display:inline-block;width:12px;height:8px;margin-right:calc(var(--json-tree-js-spacing))}div.json-tree-js div.down-arrow,div.json-tree-js div.right-arrow{display:inline-block;width:0;height:0;margin-right:calc(var(--json-tree-js-spacing));cursor:pointer;transition:var(--json-tree-js-transition);transition-property:opacity}div.json-tree-js div.down-arrow:hover,div.json-tree-js div.right-arrow:hover{opacity:.7}div.json-tree-js div.down-arrow{border-left:6px solid transparent;border-right:6px solid transparent;border-top:8px solid var(--json-tree-js-color-white)}div.json-tree-js div.right-arrow{border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:12px solid var(--json-tree-js-color-white)}div.json-tree-js div.title-bar{display:flex;margin-bottom:var(--json-tree-js-spacing)}div.json-tree-js div.title-bar div.title{text-align:left;width:auto;font-weight:var(--json-tree-js-title-bold-weight);font-size:1.2rem}div.json-tree-js div.title-bar div.controls{margin-left:calc(var(--json-tree-js-spacing) * 6);flex-grow:1;text-align:right}@media (min-width:768px){div.json-tree-js div.title-bar div.controls{margin-left:calc(var(--json-tree-js-spacing) * 12)}}div.json-tree-js div.title-bar div.controls button{background-color:var(--json-tree-js-button-background-color);border:var(--json-tree-js-border-size) solid var(--json-tree-js-button-border-color);color:var(--json-tree-js-button-text-color);border-radius:var(--json-tree-js-border-radius);padding-top:5px;padding-bottom:5px;padding-left:9px;padding-right:9px;outline:none;transition:var(--json-tree-js-transition)}div.json-tree-js div.title-bar div.controls button:not(.active):active{background:var(--json-tree-js-button-background-color-active)!important;color:var(--json-tree-js-button-text-color-active)!important}div.json-tree-js div.title-bar div.controls button:not(.active):hover{cursor:pointer;background:var(--json-tree-js-button-background-color-hover);color:var(--json-tree-js-button-text-color-hover)}div.json-tree-js div.object-type-title{font-weight:var(--json-tree-js-header-bold-weight)}div.json-tree-js div.object-type-title span.array{color:var(--json-tree-js-color-array)}div.json-tree-js div.object-type-title span.object{color:var(--json-tree-js-color-object)}div.json-tree-js div.object-type-title span.count{margin-left:calc(var(--json-tree-js-spacing) / 2);font-weight:var(--json-tree-js-text-bold-weight)}div.json-tree-js div.object-type-contents{margin-top:calc(var(--json-tree-js-spacing) / 2)}div.json-tree-js div.object-type-contents{margin-left:calc(var(--json-tree-js-spacing) * 2)}div.json-tree-js div.object-type-contents div.object-type-value{white-space:nowrap;overflow:hidden;margin-top:calc(var(--json-tree-js-spacing) / 2)}div.json-tree-js div.object-type-contents div.object-type-value span.split{margin-left:calc(var(--json-tree-js-spacing) / 2);margin-right:calc(var(--json-tree-js-spacing) / 2)}div.json-tree-js div.object-type-contents div.object-type-value span.boolean,div.json-tree-js div.object-type-contents div.object-type-value span.number,div.json-tree-js div.object-type-contents div.object-type-value span.string,div.json-tree-js div.object-type-contents div.object-type-value span.date,div.json-tree-js div.object-type-contents div.object-type-value span.null,div.json-tree-js div.object-type-contents div.object-type-value span.function{transition:var(--json-tree-js-transition);transition-property:opacity}div.json-tree-js div.object-type-contents div.object-type-value span.boolean:not(.no-hover):hover,div.json-tree-js div.object-type-contents div.object-type-value span.number:not(.no-hover):hover,div.json-tree-js div.object-type-contents div.object-type-value span.string:not(.no-hover):hover,div.json-tree-js div.object-type-contents div.object-type-value span.date:not(.no-hover):hover,div.json-tree-js div.object-type-contents div.object-type-value span.null:not(.no-hover):hover,div.json-tree-js div.object-type-contents div.object-type-value span.function:not(.no-hover):hover{cursor:pointer;opacity:.7}div.json-tree-js div.object-type-contents div.object-type-value span.boolean{color:var(--json-tree-js-color-boolean)}div.json-tree-js div.object-type-contents div.object-type-value span.number{color:var(--json-tree-js-color-number)}div.json-tree-js div.object-type-contents div.object-type-value span.string{color:var(--json-tree-js-color-string)}div.json-tree-js div.object-type-contents div.object-type-value span.date{color:var(--json-tree-js-color-date)}div.json-tree-js div.object-type-contents div.object-type-value span.array{font-weight:var(--json-tree-js-header-bold-weight);color:var(--json-tree-js-color-array)}div.json-tree-js div.object-type-contents div.object-type-value span.object{font-weight:var(--json-tree-js-header-bold-weight);color:var(--json-tree-js-color-object)}div.json-tree-js div.object-type-contents div.object-type-value span.null{color:var(--json-tree-js-color-null);font-style:italic}div.json-tree-js div.object-type-contents div.object-type-value span.function{color:var(--json-tree-js-color-function);font-style:italic}div.json-tree-js div.object-type-contents div.object-type-value span.array span.count,div.json-tree-js div.object-type-contents div.object-type-value span.object span.count{margin-left:calc(var(--json-tree-js-spacing) / 2);font-weight:var(--json-tree-js-text-bold-weight)}.custom-scroll-bars::-webkit-scrollbar{width:12px}.custom-scroll-bars::-webkit-scrollbar-track{-webkit-box-shadow:var(--json-tree-js-border-style-scrollbar);box-shadow:var(--json-tree-js-border-style-scrollbar)}.custom-scroll-bars::-webkit-scrollbar-thumb{-webkit-box-shadow:var(--json-tree-js-border-style-scrollbar);box-shadow:var(--json-tree-js-border-style-scrollbar);background:var(--json-tree-js-color-white)}.custom-scroll-bars::-webkit-scrollbar-thumb:hover{background-color:var(--json-tree-js-color-white)}.custom-scroll-bars::-webkit-scrollbar-thumb:active{background-color:var(--json-tree-js-color-lighter-gray)} \ No newline at end of file +:root{--json-tree-js-default-font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--json-tree-js-text-bold-weight:400;--json-tree-js-header-bold-weight:900;--json-tree-js-title-bold-weight:var(--json-tree-js-header-bold-weight);--json-tree-js-text-bold-weight-active:var(--json-tree-js-header-bold-weight);--json-tree-js-color-black:#3b3a3a;--json-tree-js-color-white:#F5F5F5;--json-tree-js-color-snow-white:#F5F5F5;--json-tree-js-color-boolean:red;--json-tree-js-color-number:#666bf9;--json-tree-js-color-string:#78b13f;--json-tree-js-color-date:#a656f5;--json-tree-js-color-array:#F28C28;--json-tree-js-color-object:silver;--json-tree-js-color-null:#BBB;--json-tree-js-color-function:#BBB;--json-tree-js-container-background-color:#22272e;--json-tree-js-container-border-color:#454c56;--json-tree-js-button-background-color:#2d333b;--json-tree-js-button-border-color:var(--json-tree-js-container-border-color);--json-tree-js-button-text-color:var(--json-tree-js-color-white);--json-tree-js-button-background-color-hover:var(--json-tree-js-container-border-color);--json-tree-js-button-text-color-hover:var(--json-tree-js-color-snow-white);--json-tree-js-button-background-color-active:#616b79;--json-tree-js-button-text-color-active:var(--json-tree-js-color-snow-white);--json-tree-js-border-radius:.5rem;--json-tree-js-border-style-scrollbar:inset 0 0 6px var(--json-tree-js-color-dark-gray);--json-tree-js-border-size:.5px;--json-tree-js-spacing:10px;--json-tree-js-spacing-font-size:.85rem;--json-tree-js-transition:all .3s}div.json-tree-js{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;cursor:default;box-sizing:border-box;line-height:normal;font-family:var(--json-tree-js-default-font);display:inline-block;position:relative;border-radius:var(--json-tree-js-border-radius);background-color:var(--json-tree-js-container-background-color);color:var(--json-tree-js-color-white);border:var(--json-tree-js-border-size) solid var(--json-tree-js-container-border-color);padding:var(--json-tree-js-spacing);font-size:var(--json-tree-js-spacing-font-size);font-weight:var(--json-tree-js-text-bold-weight);width:auto;overflow:hidden;margin:0!important}div.json-tree-js div.no-click{pointer-events:none!important}div.json-tree-js *{box-sizing:border-box;line-height:normal}div.json-tree-js *::before,div.json-tree-js *::after{box-sizing:border-box;line-height:normal}div.json-tree-js div.no-arrow{display:inline-block;width:12px;height:8px;margin-right:calc(var(--json-tree-js-spacing))}div.json-tree-js div.down-arrow,div.json-tree-js div.right-arrow{display:inline-block;width:0;height:0;margin-right:calc(var(--json-tree-js-spacing));cursor:pointer;transition:var(--json-tree-js-transition);transition-property:opacity}div.json-tree-js div.down-arrow:hover,div.json-tree-js div.right-arrow:hover{opacity:.7}div.json-tree-js div.down-arrow{border-left:6px solid transparent;border-right:6px solid transparent;border-top:8px solid var(--json-tree-js-color-white)}div.json-tree-js div.right-arrow{border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:12px solid var(--json-tree-js-color-white)}div.json-tree-js div.title-bar{display:flex;margin-bottom:var(--json-tree-js-spacing)}div.json-tree-js div.title-bar div.title{text-align:left;width:auto;font-weight:var(--json-tree-js-title-bold-weight);font-size:1.2rem}div.json-tree-js div.title-bar div.controls{margin-left:calc(var(--json-tree-js-spacing) * 6);flex-grow:1;text-align:right}@media (min-width:768px){div.json-tree-js div.title-bar div.controls{margin-left:calc(var(--json-tree-js-spacing) * 12)}}div.json-tree-js div.title-bar div.controls button{background-color:var(--json-tree-js-button-background-color);border:var(--json-tree-js-border-size) solid var(--json-tree-js-button-border-color);color:var(--json-tree-js-button-text-color);border-radius:var(--json-tree-js-border-radius);padding-top:5px;padding-bottom:5px;padding-left:9px;padding-right:9px;outline:none;transition:var(--json-tree-js-transition)}div.json-tree-js div.title-bar div.controls button:not(.active):active{background:var(--json-tree-js-button-background-color-active)!important;color:var(--json-tree-js-button-text-color-active)!important}div.json-tree-js div.title-bar div.controls button:not(.active):hover{cursor:pointer;background:var(--json-tree-js-button-background-color-hover);color:var(--json-tree-js-button-text-color-hover)}div.json-tree-js div.object-type-title{font-weight:var(--json-tree-js-header-bold-weight)}div.json-tree-js div.object-type-title span.array{color:var(--json-tree-js-color-array)}div.json-tree-js div.object-type-title span.object{color:var(--json-tree-js-color-object)}div.json-tree-js div.object-type-title span.count{margin-left:calc(var(--json-tree-js-spacing) / 2);font-weight:var(--json-tree-js-text-bold-weight)}div.json-tree-js div.object-type-contents{margin-top:calc(var(--json-tree-js-spacing) / 2)}div.json-tree-js div.object-type-contents{margin-left:calc(var(--json-tree-js-spacing) * 2)}div.json-tree-js div.object-type-contents div.object-type-value{white-space:nowrap;overflow:hidden;margin-top:calc(var(--json-tree-js-spacing) / 2)}div.json-tree-js div.object-type-contents div.object-type-value span.split{margin-left:calc(var(--json-tree-js-spacing) / 2);margin-right:calc(var(--json-tree-js-spacing) / 2)}div.json-tree-js div.object-type-contents div.object-type-value span.boolean,div.json-tree-js div.object-type-contents div.object-type-value span.number,div.json-tree-js div.object-type-contents div.object-type-value span.string,div.json-tree-js div.object-type-contents div.object-type-value span.date,div.json-tree-js div.object-type-contents div.object-type-value span.null,div.json-tree-js div.object-type-contents div.object-type-value span.function{transition:var(--json-tree-js-transition);transition-property:opacity}div.json-tree-js div.object-type-contents div.object-type-value span.boolean:not(.no-hover):hover,div.json-tree-js div.object-type-contents div.object-type-value span.number:not(.no-hover):hover,div.json-tree-js div.object-type-contents div.object-type-value span.string:not(.no-hover):hover,div.json-tree-js div.object-type-contents div.object-type-value span.date:not(.no-hover):hover,div.json-tree-js div.object-type-contents div.object-type-value span.null:not(.no-hover):hover,div.json-tree-js div.object-type-contents div.object-type-value span.function:not(.no-hover):hover{cursor:pointer;opacity:.7}div.json-tree-js div.object-type-contents div.object-type-value span.comma{color:var(--json-tree-js-color-white);font-weight:var(--json-tree-js-text-bold-weight)}div.json-tree-js div.object-type-contents div.object-type-value span.boolean{color:var(--json-tree-js-color-boolean)}div.json-tree-js div.object-type-contents div.object-type-value span.number{color:var(--json-tree-js-color-number)}div.json-tree-js div.object-type-contents div.object-type-value span.string{color:var(--json-tree-js-color-string)}div.json-tree-js div.object-type-contents div.object-type-value span.date{color:var(--json-tree-js-color-date)}div.json-tree-js div.object-type-contents div.object-type-value span.array{font-weight:var(--json-tree-js-header-bold-weight);color:var(--json-tree-js-color-array)}div.json-tree-js div.object-type-contents div.object-type-value span.object{font-weight:var(--json-tree-js-header-bold-weight);color:var(--json-tree-js-color-object)}div.json-tree-js div.object-type-contents div.object-type-value span.null{color:var(--json-tree-js-color-null);font-style:italic}div.json-tree-js div.object-type-contents div.object-type-value span.function{color:var(--json-tree-js-color-function);font-style:italic}div.json-tree-js div.object-type-contents div.object-type-value span.array span.count,div.json-tree-js div.object-type-contents div.object-type-value span.object span.count{margin-left:calc(var(--json-tree-js-spacing) / 2);font-weight:var(--json-tree-js-text-bold-weight)}.custom-scroll-bars::-webkit-scrollbar{width:12px}.custom-scroll-bars::-webkit-scrollbar-track{-webkit-box-shadow:var(--json-tree-js-border-style-scrollbar);box-shadow:var(--json-tree-js-border-style-scrollbar)}.custom-scroll-bars::-webkit-scrollbar-thumb{-webkit-box-shadow:var(--json-tree-js-border-style-scrollbar);box-shadow:var(--json-tree-js-border-style-scrollbar);background:var(--json-tree-js-color-white)}.custom-scroll-bars::-webkit-scrollbar-thumb:hover{background-color:var(--json-tree-js-color-white)}.custom-scroll-bars::-webkit-scrollbar-thumb:active{background-color:var(--json-tree-js-color-lighter-gray)} \ No newline at end of file diff --git a/dist/jsontree.min.js b/dist/jsontree.min.js index ba674e22..bdeea2f3 100755 --- a/dist/jsontree.min.js +++ b/dist/jsontree.min.js @@ -1,15 +1,15 @@ /*! JsonTree.js v0.2.0 | (c) Bunoon 2024 | MIT License */ -(function(){function E(a){a.currentView.element.innerHTML=u.empty;T(a);if(q(a.data)&&!z(a.data)){var b=a.currentView.element,d=a.data,c=l(b,"div","object-type-title");b=l(b,"div","object-type-contents");var f=a.showArrowToggles?l(c,"div","down-arrow"):null;d=M(f,b,a,d);h(c,"span","object",g.objectText);a.showCounts&&0n;n++){8!==n&&12!==n&&16!==n&&20!==n||v.push("-");var W= -J.floor(16*J.random()).toString(16);v.push(W)}v=v.join(u.empty);y.id=v}e.currentView.element.className="json-tree-js";e.currentView.element.removeAttribute("data-jsontree-options");E(e);F(e.onRenderComplete,e.currentView.element)}else g.safeMode||(console.error("The attribute 'data-jsontree-options' is not a valid object."),L=!1);else g.safeMode||(console.error("The attribute 'data-jsontree-options' has not been set correctly."),L=!1)}if(!L)break}}});m(I.$jsontree)||(I.$jsontree=this)})(document, -window,Math,JSON)})(); \ No newline at end of file +(function(){function F(a){a.currentView.element.innerHTML=v.empty;U(a);if(t(a.data)&&!A(a.data)){var b=a.currentView.element,c=a.data,d=l(b,"div","object-type-title");b=l(b,"div","object-type-contents");var g=a.showArrowToggles?l(d,"div","down-arrow"):null;c=N(g,b,a,c);k(d,"span","object",h.objectText);a.showCounts&&0q;q++){8!==q&&12!==q&&16!==q&&20!==q||w.push("-");var X=K.floor(16*K.random()).toString(16);w.push(X)}w=w.join(v.empty);z.id=w}e.currentView.element.className="json-tree-js";e.currentView.element.removeAttribute("data-jsontree-options");F(e);G(e.onRenderComplete,e.currentView.element)}else h.safeMode||(console.error("The attribute 'data-jsontree-options' is not a valid object."), +M=!1);else h.safeMode||(console.error("The attribute 'data-jsontree-options' has not been set correctly."),M=!1)}if(!M)break}}});n(J.$jsontree)||(J.$jsontree=this)})(document,window,Math,JSON)})(); \ No newline at end of file diff --git a/docs/CHANGE_LOG.md b/docs/CHANGE_LOG.md index 420de293..c59cba8a 100755 --- a/docs/CHANGE_LOG.md +++ b/docs/CHANGE_LOG.md @@ -4,6 +4,7 @@ #### **Binding Options:** - Added a new binding option called "sortPropertyNamesInAlphabeticalOrder", which states if the sorted property names for an object should be in alphabetical order (defaults to true). +- Added a new binding option called "showCommas", which states if commas should be shown at the end of each line (defaults to false). #### **UI Improvements:** - The spacing used for the title bar buttons is now smaller when viewed in a mobile. diff --git a/docs/binding/OPTIONS.md b/docs/binding/OPTIONS.md index 9b67ea9f..7c3bdc8b 100755 --- a/docs/binding/OPTIONS.md +++ b/docs/binding/OPTIONS.md @@ -19,6 +19,7 @@ Below are all the JSON properties that can be passed in the "data-jsontree-optio | *boolean* | showAllAsClosed | States if all the notes should be closed when first rendered (defaults to false). | | *boolean* | sortPropertyNames | States if the property names for an object should be sorted (defaults to true). | | *boolean* | sortPropertyNamesInAlphabeticalOrder | States if the sorted property names for an object should be in alphabetical order (defaults to true). | +| *boolean* | showCommas | States if commas should be shown at the end of each line (defaults to false). |
diff --git a/src/jsontree.js b/src/jsontree.js index ab230d53..c902d768 100755 --- a/src/jsontree.js +++ b/src/jsontree.js @@ -214,7 +214,7 @@ var propertyName = properties[ propertyIndex ]; if ( data.hasOwnProperty( propertyName ) ) { - renderValue( objectTypeContents, bindingOptions, propertyName, data[ propertyName ] ); + renderValue( objectTypeContents, bindingOptions, propertyName, data[ propertyName ], propertyIndex === propertiesLength - 1 ); propertyCount++; } } @@ -230,13 +230,13 @@ for ( var dataIndex = 0; dataIndex < dataLength; dataIndex++ ) { var name = bindingOptions.useZeroIndexingForArrays ? dataIndex.toString() : ( dataIndex + 1 ).toString(); - renderValue( objectTypeContents, bindingOptions, name, data[ dataIndex ] ); + renderValue( objectTypeContents, bindingOptions, name, data[ dataIndex ], dataIndex === dataLength - 1 ); } addArrowEvent( bindingOptions, arrow, objectTypeContents ); } - function renderValue( container, bindingOptions, name, value ) { + function renderValue( container, bindingOptions, name, value, isLastItem ) { var objectTypeValue = createElement( container, "div", "object-type-value" ), arrow = bindingOptions.showArrowToggles ? createElement( objectTypeValue, "div", "no-arrow" ) : null, valueElement = null; @@ -247,21 +247,32 @@ if ( !isDefined( value ) ) { valueElement = createElementWithHTML( objectTypeValue, "span", "null", "null" ); + createComma( bindingOptions, objectTypeValue, isLastItem ); + } else if ( isDefinedFunction( value ) ) { valueElement = createElementWithHTML( objectTypeValue, "span", "function", getFunctionName( value ) ); + + createComma( bindingOptions, objectTypeValue, isLastItem ); } else if ( isDefinedBoolean( value ) ) { valueElement = createElementWithHTML( objectTypeValue, "span", "boolean", value ); + + createComma( bindingOptions, objectTypeValue, isLastItem ); } else if ( isDefinedNumber( value ) ) { valueElement = createElementWithHTML( objectTypeValue, "span", "number", value ); + + createComma( bindingOptions, objectTypeValue, isLastItem ); } else if ( isDefinedString( value ) ) { valueElement = createElementWithHTML( objectTypeValue, "span", "string", bindingOptions.showStringQuotes ? "\"" + value + "\"" : value ); + + createComma( bindingOptions, objectTypeValue, isLastItem ); } else if ( isDefinedDate( value ) ) { valueElement = createElementWithHTML( objectTypeValue, "span", "date", getCustomFormattedDateTimeText( value, bindingOptions.dateTimeFormat ) ); - + createComma( bindingOptions, objectTypeValue, isLastItem ); + } else if ( isDefinedObject( value ) && !isDefinedArray( value ) ) { var objectTitle = createElement( objectTypeValue, "span", "object" ), objectTypeContents = createElement( objectTypeValue, "div", "object-type-contents" ), @@ -273,6 +284,8 @@ createElementWithHTML( objectTitle, "span", "count", "{" + propertyCount + "}" ); } + createComma( bindingOptions, objectTitle, isLastItem ); + } else if ( isDefinedArray( value ) ) { var arrayTitle = createElement( objectTypeValue, "span", "array" ), arrayTypeContents = createElement( objectTypeValue, "div", "object-type-contents" ); @@ -283,6 +296,7 @@ createElementWithHTML( arrayTitle, "span", "count", "[" + value.length + "]" ); } + createComma( bindingOptions, arrayTitle, isLastItem ); renderArrayValues( arrow, arrayTypeContents, bindingOptions, value ); } @@ -339,6 +353,12 @@ return result; } + function createComma( bindingOptions, objectTypeValue, isLastItem ) { + if ( bindingOptions.showCommas && !isLastItem ) { + createElementWithHTML( objectTypeValue, "span", "comma", "," ); + } + } + /* * ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- @@ -359,6 +379,7 @@ options.showAllAsClosed = getDefaultBoolean( options.showAllAsClosed, false ); options.sortPropertyNames = getDefaultBoolean( options.sortPropertyNames, true ); options.sortPropertyNamesInAlphabeticalOrder = getDefaultBoolean( options.sortPropertyNamesInAlphabeticalOrder, true ); + options.showCommas = getDefaultBoolean( options.showCommas, false ); options = buildAttributeOptionStrings( options ); options = buildAttributeOptionCustomTriggers( options ); diff --git a/src/jsontree.js.scss b/src/jsontree.js.scss index f686b7df..ada35503 100755 --- a/src/jsontree.js.scss +++ b/src/jsontree.js.scss @@ -245,6 +245,11 @@ div.json-tree-js { } } + span.comma { + color: var(--json-tree-js-color-white); + font-weight: var(--json-tree-js-text-bold-weight); + } + span.boolean { color: var(--json-tree-js-color-boolean); } From b106d393363483cce5c90f79d8f85ceafe17eb80 Mon Sep 17 00:00:00 2001 From: William Troup Date: Fri, 23 Feb 2024 21:07:51 +0000 Subject: [PATCH 06/10] Added render() and renderAll() support. --- dist/jsontree.js | 10 +++++++ dist/jsontree.min.js | 28 +++++++++---------- docs/CHANGE_LOG.md | 4 +++ docs/PUBLIC_FUNCTIONS.md | 19 +++++++++++++ src/jsontree.js | 42 ++++++++++++++++++++++++++++ test/dist/jsontree.js.bootstrap.html | 8 ++++++ test/src/jsontree.js.bootstrap.html | 8 ++++++ 7 files changed, 105 insertions(+), 14 deletions(-) diff --git a/dist/jsontree.js b/dist/jsontree.js index a6f61f19..6a726285 100755 --- a/dist/jsontree.js +++ b/dist/jsontree.js @@ -419,6 +419,16 @@ var _elements_Type = {}; var _string = {empty:"", space:" "}; var _attribute_Name_Options = "data-jsontree-options"; + this.render = function(element, options) { + if (isDefinedObject(element) && isDefinedObject(options)) { + renderControl(renderBindingOptions(options, element)); + } + return this; + }; + this.renderAll = function() { + render(); + return this; + }; this.setConfiguration = function(newConfiguration) { var propertyName; for (propertyName in newConfiguration) { diff --git a/dist/jsontree.min.js b/dist/jsontree.min.js index bdeea2f3..e8d70669 100755 --- a/dist/jsontree.min.js +++ b/dist/jsontree.min.js @@ -1,15 +1,15 @@ /*! JsonTree.js v0.2.0 | (c) Bunoon 2024 | MIT License */ -(function(){function F(a){a.currentView.element.innerHTML=v.empty;U(a);if(t(a.data)&&!A(a.data)){var b=a.currentView.element,c=a.data,d=l(b,"div","object-type-title");b=l(b,"div","object-type-contents");var g=a.showArrowToggles?l(d,"div","down-arrow"):null;c=N(g,b,a,c);k(d,"span","object",h.objectText);a.showCounts&&0q;q++){8!==q&&12!==q&&16!==q&&20!==q||w.push("-");var X=K.floor(16*K.random()).toString(16);w.push(X)}w=w.join(v.empty);z.id=w}e.currentView.element.className="json-tree-js";e.currentView.element.removeAttribute("data-jsontree-options");F(e);G(e.onRenderComplete,e.currentView.element)}else h.safeMode||(console.error("The attribute 'data-jsontree-options' is not a valid object."), -M=!1);else h.safeMode||(console.error("The attribute 'data-jsontree-options' has not been set correctly."),M=!1)}if(!M)break}}});n(J.$jsontree)||(J.$jsontree=this)})(document,window,Math,JSON)})(); \ No newline at end of file +(function(){function H(){for(var a=g.domElementTypes,c=a.length,b=0;bd;d++){8!==d&&12!==d&&16!==d&&20!== +d||b.push("-");var f=D.floor(16*D.random()).toString(16);b.push(f)}b=b.join(u.empty);c.id=b}a.currentView.element.className="json-tree-js";a.currentView.element.removeAttribute("data-jsontree-options");E(a);C(a.onRenderComplete,a.currentView.element)}function E(a){a.currentView.element.innerHTML=u.empty;S(a);if(q(a.data)&&!y(a.data)){var c=a.currentView.element,b=a.data,d=k(c,"div","object-type-title");c=k(c,"div","object-type-contents");var f=a.showArrowToggles?k(d,"div","down-arrow"):null;b=K(f, +c,a,b);h(d,"span","object",g.objectText);a.showCounts&&0 +## Manage Instances: + +### **render( *element*, *options* )**: +Renders an element using the options specified. +
+***Parameter: element***: '*Object*' - The element to render. +
+***Parameter: options***: '*Object*' - The options to use (refer to ["Binding Options"](binding/OPTIONS.md) documentation for properties). +
+***Returns***: '*Object*' - The JsonTree.js class instance. +
+ +### **renderAll()**: +Finds all new elements and renders them. +
+***Returns***: '*Object*' - The JsonTree.js class instance. +
+ + ## Configuration: ### **setConfiguration( *newConfiguration* )**: diff --git a/src/jsontree.js b/src/jsontree.js index c902d768..87562386 100755 --- a/src/jsontree.js +++ b/src/jsontree.js @@ -633,6 +633,48 @@ } + /* + * ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- + * Public Functions: Manage Instances + * ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- + */ + + /** + * render(). + * + * Renders an element using the options specified. + * + * @public + * + * @param {Object} element The element to render. + * @param {Object} options The options to use (refer to "Binding Options" documentation for properties). + * + * @returns {Object} The JsonTree.js class instance. + */ + this.render = function( element, options ) { + if ( isDefinedObject( element ) && isDefinedObject( options ) ) { + renderControl( renderBindingOptions( options, element ) ); + } + + return this; + }; + + /** + * renderAll(). + * + * Finds all new elements and renders them. + * + * @public + * + * @returns {Object} The JsonTree.js class instance. + */ + this.renderAll = function() { + render(); + + return this; + }; + + /* * ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- * Public Functions: Configuration diff --git a/test/dist/jsontree.js.bootstrap.html b/test/dist/jsontree.js.bootstrap.html index d5cfdf89..86de7f1f 100755 --- a/test/dist/jsontree.js.bootstrap.html +++ b/test/dist/jsontree.js.bootstrap.html @@ -18,9 +18,17 @@

JsonTree.js - Bootstrap

+
+
+
+

Manage Instances:

+ + +
+

Configuration:


diff --git a/test/src/jsontree.js.bootstrap.html b/test/src/jsontree.js.bootstrap.html index a0448bf3..f6bc8293 100755 --- a/test/src/jsontree.js.bootstrap.html +++ b/test/src/jsontree.js.bootstrap.html @@ -18,9 +18,17 @@

JsonTree.js - Bootstrap

+
+
+
+

Manage Instances:

+ + +
+

Configuration:


From 2918960091d4f90777e7d6b31a5fae064e98a05b Mon Sep 17 00:00:00 2001 From: William Troup Date: Fri, 23 Feb 2024 21:16:41 +0000 Subject: [PATCH 07/10] Fixed some spelling and grammar mistakes in the documentation. --- docs/CHANGE_LOG.md | 3 +++ docs/binding/OPTIONS.md | 2 +- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/docs/CHANGE_LOG.md b/docs/CHANGE_LOG.md index ddba1a21..dda5f00b 100755 --- a/docs/CHANGE_LOG.md +++ b/docs/CHANGE_LOG.md @@ -13,6 +13,9 @@ #### **UI Improvements:** - The spacing used for the title bar buttons is now smaller when viewed in a mobile. +#### **Documentation:** +- Fixed some spelling and grammar mistakes in the documentation. +
diff --git a/docs/binding/OPTIONS.md b/docs/binding/OPTIONS.md index 7c3bdc8b..efa62a32 100755 --- a/docs/binding/OPTIONS.md +++ b/docs/binding/OPTIONS.md @@ -16,7 +16,7 @@ Below are all the JSON properties that can be passed in the "data-jsontree-optio | *boolean* | showStringQuotes | States if quotes should be shown around string values (defaults to true). | | *boolean* | showTitle | States if the title should be shown (defaults to true). | | *boolean* | showTitleTreeControls | States if the tree control button should be shown in the title bar (defaults to true). | -| *boolean* | showAllAsClosed | States if all the notes should be closed when first rendered (defaults to false). | +| *boolean* | showAllAsClosed | States if all the nodes should be closed when first rendered (defaults to false). | | *boolean* | sortPropertyNames | States if the property names for an object should be sorted (defaults to true). | | *boolean* | sortPropertyNamesInAlphabeticalOrder | States if the sorted property names for an object should be in alphabetical order (defaults to true). | | *boolean* | showCommas | States if commas should be shown at the end of each line (defaults to false). | From 7a93213afe842dc5eb74043c35c1ce025300868a Mon Sep 17 00:00:00 2001 From: William Troup Date: Fri, 23 Feb 2024 21:27:20 +0000 Subject: [PATCH 08/10] Documentation update. --- docs/PUBLIC_FUNCTIONS.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/PUBLIC_FUNCTIONS.md b/docs/PUBLIC_FUNCTIONS.md index 8431cc11..d17a24d7 100755 --- a/docs/PUBLIC_FUNCTIONS.md +++ b/docs/PUBLIC_FUNCTIONS.md @@ -22,6 +22,7 @@ Finds all new elements and renders them.
***Returns***: '*Object*' - The JsonTree.js class instance.
+
## Configuration: From 2b580b657b9fcfb72d4197a6dd78083a6b42518c Mon Sep 17 00:00:00 2001 From: William Troup Date: Fri, 23 Feb 2024 21:29:09 +0000 Subject: [PATCH 09/10] Minor improvements to the documentation layout. --- docs/CHANGE_LOG.md | 1 + docs/binding/OPTIONS.md | 8 ++++---- docs/configuration/OPTIONS.md | 9 ++++----- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/docs/CHANGE_LOG.md b/docs/CHANGE_LOG.md index dda5f00b..752ce64e 100755 --- a/docs/CHANGE_LOG.md +++ b/docs/CHANGE_LOG.md @@ -15,6 +15,7 @@ #### **Documentation:** - Fixed some spelling and grammar mistakes in the documentation. +- Minor improvements to the documentation layout.
diff --git a/docs/binding/OPTIONS.md b/docs/binding/OPTIONS.md index efa62a32..a9391564 100755 --- a/docs/binding/OPTIONS.md +++ b/docs/binding/OPTIONS.md @@ -1,10 +1,11 @@ # JsonTree.js - Binding Options: Below are all the JSON properties that can be passed in the "data-jsontree-options" binding attribute for a DOM element. +
+
## Standard Options: -
| Type: | Name: | Description: | | --- | --- | --- | @@ -21,17 +22,16 @@ Below are all the JSON properties that can be passed in the "data-jsontree-optio | *boolean* | sortPropertyNamesInAlphabeticalOrder | States if the sorted property names for an object should be in alphabetical order (defaults to true). | | *boolean* | showCommas | States if commas should be shown at the end of each line (defaults to false). | -
+
## String Options: -
| Type: | Name: | Description: | | --- | --- | --- | | *string* | titleText | The text that should be displayed for the "JsonTree.js" title bar label. | -
+
## Binding Example: diff --git a/docs/configuration/OPTIONS.md b/docs/configuration/OPTIONS.md index 1ef8b2ac..24b948e1 100755 --- a/docs/configuration/OPTIONS.md +++ b/docs/configuration/OPTIONS.md @@ -1,8 +1,8 @@ # JsonTree.js - Configuration - Options: Below are all the configuration options that can be passed to the "setConfiguration()" public function. -
-
+
+
### Options: @@ -12,7 +12,7 @@ Below are all the configuration options that can be passed to the "setConfigurat | *boolean* | safeMode | States if safe-mode is enabled (errors will be ignored and logged only, defaults to true). | | *Object* | highlightAllDomElementTypes | The DOM element types to lookup (can be either an array of strings, or a space separated string, and defaults to "*"). | -
+
### Options - Strings: @@ -24,11 +24,10 @@ Below are all the configuration options that can be passed to the "setConfigurat | *string* | closeAllButtonText | The text that should be shown for the "Close All" button text. | | *string* | openAllButtonText | The text that should be shown for the "Open All" button text. | -
+
## Example: -
```markdown