Merge pull request #1 from williamtroup/0.2.0

0.2.0

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/)
 </h1>
 
 > <p align="center">🔗 A lightweight JavaScript library that generates customizable tree views to better visualize JSON data.</p>
-> <p align="center">v0.1.0</p>
+> <p align="center">v0.2.0</p>
 <br />
 
 ![JsonTree.js](docs/images/main.png)

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/)

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;
@@ -116,13 +116,16 @@
     }
     if (bindingOptions.sortPropertyNames) {
       properties = properties.sort();
+      if (!bindingOptions.sortPropertyNamesInAlphabeticalOrder) {
+        properties = properties.reverse();
+      }
     }
     var propertiesLength = properties.length;
     var propertyIndex = 0;
     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++;
       }
     }
@@ -134,28 +137,34 @@
     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;
     createElementWithHTML(objectTypeValue, "span", "title", name);
     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");
@@ -164,13 +173,15 @@
       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");
       createElementWithHTML(arrayTitle, "span", "title", _configuration.arrayText);
       if (bindingOptions.showCounts) {
         createElementWithHTML(arrayTitle, "span", "count", "[" + value.length + "]");
       }
+      createComma(bindingOptions, arrayTitle, isLastItem);
       renderArrayValues(arrow, arrayTypeContents, bindingOptions, value);
     }
     if (isDefined(valueElement)) {
@@ -217,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);
@@ -229,6 +245,8 @@
     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.showCommas = getDefaultBoolean(options.showCommas, false);
     options = buildAttributeOptionStrings(options);
     options = buildAttributeOptionCustomTriggers(options);
     return options;
@@ -401,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) {
@@ -412,7 +440,7 @@
     return this;
   };
   this.getVersion = function() {
-    return "0.1.0";
+    return "0.2.0";
   };
   (function(documentObject, windowObject, mathObject, jsonObject) {
     _parameter_Document = documentObject;

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
@@ -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);
@@ -219,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);
 }