diff --git a/README.md b/README.md index 653a340..5fe1ae6 100755 --- a/README.md +++ b/README.md @@ -2,15 +2,15 @@ Tree.js [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=Tree.js%2C%20a%20free%20JavaScript%data%20tree&url=https://github.com/williamtroup/Tree.js&hashtags=javascript,tree,data) -[![npm](https://img.shields.io/badge/npmjs-v0.3.0-blue)](https://www.npmjs.com/package/jtree.js) -[![nuget](https://img.shields.io/badge/nuget-v0.3.0-purple)](https://www.nuget.org/packages/jTree.js/) +[![npm](https://img.shields.io/badge/npmjs-v0.4.0-blue)](https://www.npmjs.com/package/jtree.js) +[![nuget](https://img.shields.io/badge/nuget-v0.4.0-purple)](https://www.nuget.org/packages/jTree.js/) [![license](https://img.shields.io/badge/license-MIT-green)](https://github.com/williamtroup/Tree.js/blob/main/LICENSE.txt) [![discussions Welcome](https://img.shields.io/badge/discussions-Welcome-red)](https://github.com/williamtroup/Tree.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 allows you to create responsive and customizable interactive tree diagrams from an array of JS objects.

->

v0.3.0

+>

v0.4.0


![Tree.js - Gaps](docs/images/main-1.png) diff --git a/README_NUGET.md b/README_NUGET.md index 504dd08..39f50fd 100755 --- a/README_NUGET.md +++ b/README_NUGET.md @@ -1,8 +1,8 @@ -# Tree.js v0.3.0 +# Tree.js v0.4.0 [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=Tree.js%2C%20a%20free%20JavaScript%data%20tree&url=https://github.com/williamtroup/Tree.js&hashtags=javascript,tree,data) -[![npm](https://img.shields.io/badge/npmjs-v0.3.0-blue)](https://www.npmjs.com/package/jtree.js) -[![nuget](https://img.shields.io/badge/nuget-v0.3.0-purple)](https://www.nuget.org/packages/jTree.js/) +[![npm](https://img.shields.io/badge/npmjs-v0.4.0-blue)](https://www.npmjs.com/package/jtree.js) +[![nuget](https://img.shields.io/badge/nuget-v0.4.0-purple)](https://www.nuget.org/packages/jTree.js/) [![license](https://img.shields.io/badge/license-MIT-green)](https://github.com/williamtroup/Tree.js/blob/main/LICENSE.txt) [![discussions Welcome](https://img.shields.io/badge/discussions-Welcome-red)](https://github.com/williamtroup/Tree.js/discussions) [![coded by William Troup](https://img.shields.io/badge/coded_by-William_Troup-yellow)](https://william-troup.com/) diff --git a/dist/tree.js b/dist/tree.js index cc08a23..41d64ab 100755 --- a/dist/tree.js +++ b/dist/tree.js @@ -1,4 +1,4 @@ -/*! Tree.js v0.3.0 | (c) Bunoon 2024 | MIT License */ +/*! Tree.js v0.4.0 | (c) Bunoon 2024 | MIT License */ (function() { function render() { var tagTypes = _configuration.domElementTypes; @@ -712,7 +712,7 @@ return this; }; this.getVersion = function() { - return "0.3.0"; + return "0.4.0"; }; (function(documentObject, windowObject, mathObject, jsonObject) { _parameter_Document = documentObject; diff --git a/dist/tree.js.css b/dist/tree.js.css index 40d5d93..2abae85 100755 --- a/dist/tree.js.css +++ b/dist/tree.js.css @@ -1,5 +1,5 @@ /* - * Tree.js Library v0.3.0 + * Tree.js Library v0.4.0 * * Copyright 2024 Bunoon * Released under the MIT License diff --git a/dist/tree.js.min.css b/dist/tree.js.min.css index cc083fc..453ab87 100755 --- a/dist/tree.js.min.css +++ b/dist/tree.js.min.css @@ -1,2 +1,2 @@ -/* Tree.js v0.3.0 | (c) Bunoon 2024 | MIT License */ +/* Tree.js v0.4.0 | (c) Bunoon 2024 | MIT License */ :root{--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";--tree-js-text-bold-weight:400;--tree-js-title-bold-weight:900;--tree-js-text-bold-weight-active:900;--tree-js-color-black:#3b3a3a;--tree-js-color-white:#F5F5F5;--tree-js-color-snow-white:#F5F5F5;--tree-js-container-background-color:#22272e;--tree-js-container-border-color:#454c56;--tree-js-tooltip-background-color:var(--tree-js-container-background-color);--tree-js-tooltip-border-color:var(--tree-js-container-border-color);--tree-js-tooltip-text-color:var(--tree-js-color-white);--tree-js-categories-opener-text-color-hover:var(--tree-js-color-gray);--tree-js-categories-background-color:var(--tree-js-container-background-color);--tree-js-categories-border-color:var(--tree-js-container-border-color);--tree-js-categories-text-color:var(--tree-js-color-white);--tree-js-categories-background-color-hover:var(--tree-js-button-background-color-hover);--tree-js-categories-text-color-hover:var(--tree-js-color-snow-white);--tree-js-button-background-color:#2d333b;--tree-js-button-border-color:var(--tree-js-container-border-color);--tree-js-button-text-color:var(--tree-js-color-white);--tree-js-button-background-color-hover:var(--tree-js-container-border-color);--tree-js-button-text-color-hover:var(--tree-js-color-snow-white);--tree-js-button-background-color-active:#616b79;--tree-js-button-text-color-active:var(--tree-js-color-snow-white);--tree-js-border-radius:.5rem;--tree-js-border-control-radius:.25rem;--tree-js-border-style-scrollbar:inset 0 0 6px var(--tree-js-color-dark-gray);--tree-js-border-size:.5px;--tree-js-checkbox-background-color-checked:rgba(80,200,120,1);--tree-js-checkbox-background-color:var(--tree-js-color-black);--tree-js-checkbox-border-color-checked:--tree-js-checkbox-background-color-checked;--tree-js-checkbox-border-color:rgba(80,200,120,.55);--tree-js-box-size:12.5px;--tree-js-box-border-size:3.5px;--tree-js-spacing:10px;--tree-js-spacing-font-size:.85rem;--tree-js-transition:all .3s;--tree-js-animation-length:0.5s}div.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(--tree-js-default-font);display:inline-block;position:relative;border-radius:var(--tree-js-border-radius);background-color:var(--tree-js-container-background-color);color:var(--tree-js-color-white);border:var(--tree-js-border-size) solid var(--tree-js-container-border-color);padding:var(--tree-js-spacing);font-size:var(--tree-js-spacing-font-size);width:100%;overflow:hidden;margin:0!important}div.tree-js div.no-click{pointer-events:none!important}div.tree-js *{box-sizing:border-box;line-height:normal}div.tree-js *::before,div.tree-js *::after{box-sizing:border-box;line-height:normal}div.tree-js div.title-bar{display:flex;margin-bottom:calc(var(--tree-js-spacing) / 2)}div.tree-js div.title-bar div.title{text-align:left;width:auto;font-weight:var(--tree-js-title-bold-weight);font-size:1.2rem}div.tree-js div.title-bar div.controls{margin-left:var(--tree-js-spacing);flex-grow:1;text-align:right}div.tree-js div.title-bar div.controls button{background-color:var(--tree-js-button-background-color);border:var(--tree-js-border-size) solid var(--tree-js-button-border-color);color:var(--tree-js-button-text-color);border-radius:var(--tree-js-border-radius);padding-top:5px;padding-bottom:5px;padding-left:9px;padding-right:9px;outline:none;transition:var(--tree-js-transition)}div.tree-js div.title-bar div.controls button:not(.active):active{background:var(--tree-js-button-background-color-active)!important;color:var(--tree-js-button-text-color-active)!important}div.tree-js div.title-bar div.controls button:not(.active):hover{cursor:pointer;background:var(--tree-js-button-background-color-hover);color:var(--tree-js-button-text-color-hover)}div.tree-js div.title-bar div.controls button.active{cursor:default;background:var(--tree-js-button-background-color-hover);color:var(--tree-js-button-text-color-hover);transition:var(--tree-js-transition);font-weight:var(--tree-js-text-bold-weight-active)}div.tree-js div.title-bar div.controls button.back{margin-left:calc(var(--tree-js-spacing) * 2)!important}div.tree-js div.title-bar div.controls div.category-text{margin-left:var(--tree-js-spacing);margin-right:var(--tree-js-spacing);display:inline-block;font-weight:var(--tree-js-title-bold-weight);position:relative;padding-top:5px;padding-bottom:5px;transition:var(--tree-js-transition);cursor:pointer}div.tree-js div.title-bar div.controls div.category-text:hover{color:var(--tree-js-categories-opener-text-color-hover)}div.tree-js div.title-bar div.controls div.category-text:hover div.down-arrow{border-top-color:var(--tree-js-categories-opener-text-color-hover)}div.tree-js div.title-bar div.controls div.category-text:hover div.categories-list{display:block!important}div.tree-js div.title-bar div.controls div.category-text div.down-arrow{display:inline-block;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:9px solid var(--tree-js-color-white);transition:var(--tree-js-transition);margin-left:calc(var(--tree-js-spacing) / 2)}div.tree-js div.title-bar div.controls div.category-text div.categories-list{animation:fade-in-animation var(--tree-js-animation-length);padding-top:5px;display:none;position:absolute;width:150px;left:50%;transform:translateX(-50%);margin-top:5px;z-index:1000}div.tree-js div.title-bar div.controls div.category-text div.categories-list div.categories{border-radius:var(--tree-js-border-radius);background-color:var(--tree-js-categories-background-color);border:var(--tree-js-border-size) solid var(--tree-js-categories-border-color);color:var(--tree-js-categories-text-color);max-height:183px;overflow-y:scroll;scroll-snap-type:y mandatory}div.tree-js div.title-bar div.controls div.category-text div.categories-list div.categories div.category{color:var(--tree-js-color-white);font-weight:var(--tree-js-text-bold-weight);border-bottom:var(--tree-js-border-size) dashed var(--tree-js-container-border-color);padding:var(--tree-js-spacing);text-align:center;width:100%;transition:var(--tree-js-transition);scroll-snap-align:start}div.tree-js div.title-bar div.controls div.category-text div.categories-list div.categories div.category:not(.category-active):active{opacity:0.5!important}div.tree-js div.title-bar div.controls div.category-text div.categories-list div.categories div.category:not(.category-active):hover{cursor:pointer;background-color:var(--tree-js-categories-background-color-hover);color:var(--tree-js-categories-text-color-hover)}div.tree-js div.title-bar div.controls div.category-text div.categories-list div.categories div.category:last-child{border-bottom:none}div.tree-js div.title-bar div.controls div.category-text div.categories-list div.categories div.category-active{background-color:var(--tree-js-categories-background-color-hover);color:var(--tree-js-categories-text-color-hover);font-weight:var(--tree-js-text-bold-weight-active);cursor:default!important}div.tree-js div.box-rows div.no-data{text-align:center;padding:30px}div.tree-js div.box-rows div.box-row-no-spacing{display:flex;justify-content:space-between}div.tree-js div.box-rows div.box-row{text-align:center}div.tree-js div.box-rows div.box-row div.box{display:inline-block;position:relative;border-radius:var(--tree-js-border-radius);background-color:rgb(80,200,120);color:var(--tree-js-color-black);border:var(--tree-js-border-size) solid rgba(80,200,120,.75);padding:var(--tree-js-spacing);margin:calc(var(--tree-js-spacing) / 2);flex-basis:100%;transition:opacity 0.3s;white-space:wrap;text-align:left;overflow-y:scroll;overflow-x:hidden}div.tree-js div.box-rows div.box-row div.box div.children div.box{background-color:rgb(210,43,43);color:var(--tree-js-color-white);border:var(--tree-js-border-size) solid rgba(210,43,43,.75)}div.tree-js div.box-rows div.box-row div.box div.box-title-bar{display:flex;font-size:1rem!important;align-items:center!important;margin-bottom:calc(var(--tree-js-spacing) / 2)}div.tree-js div.box-rows div.box-row div.box div.box-title-bar div.box-title{text-align:left;font-weight:var(--tree-js-title-bold-weight)!important;margin-right:var(--tree-js-spacing)}div.tree-js div.box-rows div.box-row div.box div.box-title-bar div.box-value{flex-grow:1;text-align:right;font-weight:var(--tree-js-text-bold-weight)!important}div.tree-js div.box-rows div.box-row div.box div.box-title-bar div.expand,div.tree-js div.box-rows div.box-row div.box div.box-title-bar div.contract{display:inline-block;height:var(--tree-js-box-size);width:var(--tree-js-box-size);transition:var(--tree-js-transition);margin-left:calc(var(--tree-js-spacing) / 2)}div.tree-js div.box-rows div.box-row div.box div.box-title-bar div.expand:hover,div.tree-js div.box-rows div.box-row div.box div.box-title-bar div.contract:hover{opacity:.7}div.tree-js div.box-rows div.box-row div.box div.box-title-bar div.expand{border-radius:var(--tree-js-border-control-radius);border:var(--tree-js-box-border-size) solid var(--tree-js-color-black)}div.tree-js div.box-rows div.box-row div.box div.box-title-bar div.contract{position:relative}div.tree-js div.box-rows div.box-row div.box div.box-title-bar div.contract::before{content:"";position:absolute;left:0;height:var(--tree-js-box-border-size);width:var(--tree-js-box-size);background-color:var(--tree-js-color-black);top:50%;transform:translate(0,-50%)}div.tree-js div.box-rows div.box-row div.box div.box-title-bar div.contract:hover{opacity:.7}div.tree-js div.box-rows div.box-row div.box p.description{margin:0!important;padding:0!important;margin-bottom:var(--tree-js-spacing)!important}div.tree-js div.box-rows div.box-row div.box:first-child{margin-left:0}div.tree-js div.box-rows div.box-row div.box:last-child{margin-right:0}div.tree-js div.box-rows div.box-row div.box:hover{cursor:pointer;opacity:.8}div.tree-js div.footer{text-align:center}@media (min-width:768px){div.tree-js div.footer{text-align:right}}div.tree-js div.footer label.checkbox{margin:calc(var(--tree-js-spacing) / 2);margin-right:var(--tree-js-spacing)}div.tree-js div.footer label.checkbox:last-child{margin-right:calc(var(--tree-js-spacing) / 2)}div.tree-js label.checkbox{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;cursor:default;display:inline-block;position:relative;padding-left:25px;padding-top:1px;color:var(--tree-js-color-white)}div.tree-js label.checkbox input{display:none!important}div.tree-js label.checkbox input:checked~span.check-mark{background-color:var(--tree-js-checkbox-background-color-checked);border:var(--tree-js-border-size) solid var(--tree-js-checkbox-border-color-checked)}div.tree-js label.checkbox input:checked~span.check-mark::before{display:block}div.tree-js label.checkbox input:disabled~span.check-mark,div.tree-js label.checkbox input:disabled~span.text{opacity:.5}div.tree-js label.checkbox input:disabled~span.check-mark{border:var(--tree-js-border-size) solid var(--tree-js-color-black)!important}div.tree-js label.checkbox span.check-mark{position:absolute;top:1px;left:0;height:15px;width:15px;background-color:var(--tree-js-checkbox-background-color);border-radius:var(--tree-js-border-control-radius);border:var(--tree-js-border-size) solid var(--tree-js-checkbox-border-color);transition:var(--tree-js-transition)}div.tree-js label.checkbox span.check-mark::before{-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);content:"";position:absolute;display:none;left:4.5px;top:1px;width:6px;height:10px;border:solid var(--tree-js-color-black);border-width:0 2px 2px 0}.custom-scroll-bars::-webkit-scrollbar{width:12px}.custom-scroll-bars::-webkit-scrollbar-track{-webkit-box-shadow:var(--tree-js-border-style-scrollbar);box-shadow:var(--tree-js-border-style-scrollbar)}.custom-scroll-bars::-webkit-scrollbar-thumb{-webkit-box-shadow:var(--tree-js-border-style-scrollbar);box-shadow:var(--tree-js-border-style-scrollbar);background:var(--tree-js-color-white)}.custom-scroll-bars::-webkit-scrollbar-thumb:hover{background-color:var(--tree-js-color-white)}.custom-scroll-bars::-webkit-scrollbar-thumb:active{background-color:var(--tree-js-color-lighter-gray)}div.tree-js-tooltip{-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(--tree-js-default-font);animation:fade-in-animation var(--tree-js-animation-length);position:absolute;background-color:var(--tree-js-tooltip-background-color);border:var(--tree-js-border-size) solid var(--tree-js-tooltip-border-color);color:var(--tree-js-tooltip-text-color);border-radius:var(--tree-js-border-radius);z-index:2000;max-width:300px;padding:var(--tree-js-spacing);font-size:var(--tree-js-spacing-font-size);font-weight:var(--tree-js-text-bold-weight);display:none}@keyframes fade-in-animation{0%{opacity:0}100%{opacity:1}} \ No newline at end of file diff --git a/dist/tree.min.js b/dist/tree.min.js index f0ad05a..a860a46 100755 --- a/dist/tree.min.js +++ b/dist/tree.min.js @@ -1,4 +1,4 @@ -/*! Tree.js v0.3.0 | (c) Bunoon 2024 | MIT License */ +/*! Tree.js v0.4.0 | (c) Bunoon 2024 | MIT License */ (function(){function x(a){a.currentView.element.innerHTML=u.empty;I(a);ca(a);da(a);a.currentView.rows=p(a.currentView.element,"div","box-rows");N(a,a.currentView.rows,r[a.currentView.element.id].data);ea(a);B.addEventListener("resize",function(){N(a,a.currentView.rows,r[a.currentView.element.id].data)})}function da(a){var b=p(a.currentView.element,"div","title-bar");a.showTitle&&t(b,"div","title",a.titleText);if(1b;b++){8!==b&&12!==b&&16!==b&&20!==b||a.push("-");var f=H.floor(16*H.random()).toString(16);a.push(f)}return a.join(u.empty)}function ba(a){h=L(a)?a:{};h.safeMode=q(h.safeMode,!0);a=h;var b=h.domElementTypes,f=["*"];n(b)?(b=b.split(u.space),0===b.length&&(b=f)):b=Q(b)?b:f;a.domElementTypes=b;h.backButtonText=w(h.backButtonText,"Back");h.nextButtonText=w(h.nextButtonText, "Next");h.showChildrenLabelText=w(h.showChildrenLabelText,"Show Children");h.showDescriptionsLabelText=w(h.showDescriptionsLabelText,"Show Descriptions");h.showContentsLabelText=w(h.showContentsLabelText,"Show Contents");h.noDataMessage=w(h.noDataMessage,"There is currently no data to view.");h.expandToolTipText=w(h.expandToolTipText,"Expand");h.contractToolTipText=w(h.contractToolTipText,"Contract");h.refreshButtonText=w(h.refreshButtonText,"Refresh")}var A=null,B=null,H=null,aa=null,h={},u={empty:"", space:" "},S={},r={};this.refresh=function(a){n(a)&&r.hasOwnProperty(a)&&(a=r[a].options,x(a),y(a.onRefresh,a.currentView.element));return this};this.refreshAll=function(){for(var a in r)if(r.hasOwnProperty(a)){var b=r[a].options;x(b);y(b.onRefresh,b.currentView.element)}return this};this.moveToPreviousCategory=function(a){n(a)&&r.hasOwnProperty(a)&&W(r[a].options);return this};this.moveToNextCategory=function(a){n(a)&&r.hasOwnProperty(a)&&X(r[a].options);return this};this.setConfiguration=function(a){for(var b in a)a.hasOwnProperty(b)&& -(h[b]=a[b]);ba(h);return this};this.getVersion=function(){return"0.3.0"};(function(a,b,f,e){A=a;B=b;H=f;aa=e;ba();A.addEventListener("DOMContentLoaded",function(){for(var d=h.domElementTypes,k=d.length,g=0;g + + ## Version 0.3.0: #### **New Features:** diff --git a/package.json b/package.json index a45557f..9a26de1 100755 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "jtree.js", "title": "Tree.js", "description": "A lightweight JavaScript library that allows you to create responsive and customizable interactive tree diagrams from an array of JS objects.", - "version": "0.3.0", + "version": "0.4.0", "main": "dist/tree.js", "homepage": "https://www.william-troup.com/tree-js/", "author": { diff --git a/src/tree.js b/src/tree.js index 8aa052e..219762c 100755 --- a/src/tree.js +++ b/src/tree.js @@ -4,7 +4,7 @@ * A lightweight JavaScript library that allows you to create responsive and customizable interactive tree diagrams from an array of JS objects. * * @file tree.js - * @version v0.3.0 + * @version v0.4.0 * @author Bunoon * @license MIT License * @copyright Bunoon 2024 @@ -1121,7 +1121,7 @@ * @returns {string} The version number. */ this.getVersion = function() { - return "0.3.0"; + return "0.4.0"; }; diff --git a/src/tree.js.scss b/src/tree.js.scss index fca0a6b..0e522cc 100755 --- a/src/tree.js.scss +++ b/src/tree.js.scss @@ -1,12 +1,12 @@ /* - * Tree.js Library v0.3.0 + * Tree.js Library v0.4.0 * * Copyright 2024 Bunoon * Released under the MIT License */ - @import "foundation/styles"; +@import "foundation/styles"; :root { // Fonts diff --git a/tree.js.nuspec b/tree.js.nuspec index cdf8295..d138fe8 100755 --- a/tree.js.nuspec +++ b/tree.js.nuspec @@ -2,7 +2,7 @@ jTree.js - 0.3.0 + 0.4.0 Tree.js A lightweight JavaScript library that allows you to create responsive and customizable interactive tree diagrams from an array of JS objects. William Troup