@jaisocx/tree 1.5.37 → 2.2.20

package/MediaAndStyles/themes/theme_base/responsive/responsive_size_t08_tv_8k_landscape__Tree__theme_base.css

@@ -0,0 +1,10 @@
+@media only screen and (min-width: 7681px) and (max-width: 15360px) and (min-height: 1025px) and (max-height: 15360px) and (orientation: landscape) {
+
+  .jsx .Tree {
+    --theme_name: Tree__theme_base;
+    --theme_name__Tree: theme_base;
+    --responsive_size: responsive_size_t08_tv_8k_landscape;
+    --responsive_size__Tree__theme_base: responsive_size_t08_tv_8k_landscape__Tree__theme_base;
+  }
+}
+

package/MediaAndStyles/themes/theme_base/responsive/responsive_size_t08_tv_8k_portrait__Tree__theme_base.css

@@ -0,0 +1,10 @@
+@media only screen and (min-width: 1025px) and (max-width: 15360px) and (min-height: 7681px) and (max-height: 15360px) and (orientation: portrait) {
+
+  .jsx .Tree {
+    --theme_name: Tree__theme_base;
+    --theme_name__Tree: theme_base;
+    --responsive_size: responsive_size_t08_tv_8k_portrait;
+    --responsive_size__Tree__theme_base: responsive_size_t08_tv_8k_portrait__Tree__theme_base;
+  }
+}
+

package/MediaAndStyles/themes/theme_base/responsive/responsive_size_t16_tv_16k_landscape__Tree__theme_base.css

@@ -0,0 +1,10 @@
+@media only screen and (min-width: 15361px) and (max-width: 25360px) and (min-height: 1025px) and (max-height: 25360px) and (orientation: landscape) {
+
+  .jsx .Tree {
+    --theme_name: Tree__theme_base;
+    --theme_name__Tree: theme_base;
+    --responsive_size: responsive_size_t16_tv_16k_landscape;
+    --responsive_size__Tree__theme_base: responsive_size_t16_tv_16k_landscape__Tree__theme_base;
+  }
+}
+

package/MediaAndStyles/themes/theme_base/responsive/responsive_size_t16_tv_16k_portrait__Tree__theme_base.css

@@ -0,0 +1,10 @@
+@media only screen and (min-width: 1025px) and (max-width: 25360px) and (min-height: 15361px) and (max-height: 25360px) and (orientation: portrait) {
+
+  .jsx .Tree {
+    --theme_name: Tree__theme_base;
+    --theme_name__Tree: theme_base;
+    --responsive_size: responsive_size_t16_tv_16k_portrait;
+    --responsive_size__Tree__theme_base: responsive_size_t16_tv_16k_portrait__Tree__theme_base;
+  }
+}
+

package/MediaAndStyles/themes/theme_base/responsive/responsive_size_t99_tv_xxxl_landscape__Tree__theme_base.css

@@ -0,0 +1,10 @@
+@media only screen and (min-width: 25361px) and (max-width: 999999px) and (min-height: 1025px) and (max-height: 999999px) and (orientation: landscape) {
+
+  .jsx .Tree {
+    --theme_name: Tree__theme_base;
+    --theme_name__Tree: theme_base;
+    --responsive_size: responsive_size_t99_tv_xxxl_landscape;
+    --responsive_size__Tree__theme_base: responsive_size_t99_tv_xxxl_landscape__Tree__theme_base;
+  }
+}
+

package/MediaAndStyles/themes/theme_base/responsive/responsive_size_t99_tv_xxxl_portrait__Tree__theme_base.css

@@ -0,0 +1,10 @@
+@media only screen and (min-width: 1025px) and (max-width: 999999px) and (min-height: 25361px) and (max-height: 999999px) and (orientation: portrait) {
+
+  .jsx .Tree {
+    --theme_name: Tree__theme_base;
+    --theme_name__Tree: theme_base;
+    --responsive_size: responsive_size_t99_tv_xxxl_portrait;
+    --responsive_size__Tree__theme_base: responsive_size_t99_tv_xxxl_portrait__Tree__theme_base;
+  }
+}
+

package/MediaAndStyles/themes/theme_base/responsive_size_Imports_Tree_theme_base_Relative.css

@@ -0,0 +1,98 @@
+/* Relative urls css imports */
+
+
+/* very_small xxs */
+@import url("./responsive/responsive_size_d05_very_small_xxs_portrait__Tree__theme_base.css");
+@import url("./responsive/responsive_size_d05_very_small_xxs_landscape__Tree__theme_base.css");
+
+
+/* mobile xs */
+@import url("./responsive/responsive_size_e02_mobile_xs_portrait__Tree__theme_base.css");
+@import url("./responsive/responsive_size_e02_mobile_xs_landscape__Tree__theme_base.css");
+
+
+/* mobile s */
+@import url("./responsive/responsive_size_e04_mobile_s_portrait__Tree__theme_base.css");
+@import url("./responsive/responsive_size_e04_mobile_s_landscape__Tree__theme_base.css");
+
+
+/* mobile sm */
+@import url("./responsive/responsive_size_e06_mobile_sm_portrait__Tree__theme_base.css");
+@import url("./responsive/responsive_size_e06_mobile_sm_landscape__Tree__theme_base.css");
+
+
+/* mobile md */
+@import url("./responsive/responsive_size_e08_mobile_md_portrait__Tree__theme_base.css");
+@import url("./responsive/responsive_size_e08_mobile_md_landscape__Tree__theme_base.css");
+
+
+/* tablet s */
+@import url("./responsive/responsive_size_h03_tablet_s_portrait__Tree__theme_base.css");
+@import url("./responsive/responsive_size_h03_tablet_s_landscape__Tree__theme_base.css");
+
+
+/* tablet sm */
+@import url("./responsive/responsive_size_h05_tablet_sm_portrait__Tree__theme_base.css");
+@import url("./responsive/responsive_size_h05_tablet_sm_landscape__Tree__theme_base.css");
+
+
+/* tablet md */
+@import url("./responsive/responsive_size_h07_tablet_md_portrait__Tree__theme_base.css");
+@import url("./responsive/responsive_size_h07_tablet_md_landscape__Tree__theme_base.css");
+
+
+/* tablet lg */
+@import url("./responsive/responsive_size_h09_tablet_lg_portrait__Tree__theme_base.css");
+@import url("./responsive/responsive_size_h09_tablet_lg_landscape__Tree__theme_base.css");
+
+
+/* laptop sm */
+@import url("./responsive/responsive_size_l02_laptop_sm_portrait__Tree__theme_base.css");
+@import url("./responsive/responsive_size_l02_laptop_sm_landscape__Tree__theme_base.css");
+
+
+/* laptop md */
+@import url("./responsive/responsive_size_l03_laptop_md_portrait__Tree__theme_base.css");
+@import url("./responsive/responsive_size_l03_laptop_md_landscape__Tree__theme_base.css");
+
+
+/* laptop lg */
+@import url("./responsive/responsive_size_l07_laptop_lg_portrait__Tree__theme_base.css");
+@import url("./responsive/responsive_size_l07_laptop_lg_landscape__Tree__theme_base.css");
+
+
+/* display xl */
+@import url("./responsive/responsive_size_s02_display_xl_portrait__Tree__theme_base.css");
+@import url("./responsive/responsive_size_s02_display_xl_landscape__Tree__theme_base.css");
+
+
+/* display xxl */
+@import url("./responsive/responsive_size_s04_display_xxl_portrait__Tree__theme_base.css");
+@import url("./responsive/responsive_size_s04_display_xxl_landscape__Tree__theme_base.css");
+
+
+/* display qhd */
+@import url("./responsive/responsive_size_s08_display_qhd_portrait__Tree__theme_base.css");
+@import url("./responsive/responsive_size_s08_display_qhd_landscape__Tree__theme_base.css");
+
+
+/* tv 4k */
+@import url("./responsive/responsive_size_t04_tv_4k_portrait__Tree__theme_base.css");
+@import url("./responsive/responsive_size_t04_tv_4k_landscape__Tree__theme_base.css");
+
+
+/* tv 8k */
+@import url("./responsive/responsive_size_t08_tv_8k_portrait__Tree__theme_base.css");
+@import url("./responsive/responsive_size_t08_tv_8k_landscape__Tree__theme_base.css");
+
+
+/* tv 16k */
+@import url("./responsive/responsive_size_t16_tv_16k_portrait__Tree__theme_base.css");
+@import url("./responsive/responsive_size_t16_tv_16k_landscape__Tree__theme_base.css");
+
+
+/* tv xxxl */
+@import url("./responsive/responsive_size_t99_tv_xxxl_portrait__Tree__theme_base.css");
+@import url("./responsive/responsive_size_t99_tv_xxxl_landscape__Tree__theme_base.css");
+
+

package/MediaAndStyles/themes/theme_base/responsive_size_Imports_Tree_theme_base_Webpack.css

@@ -0,0 +1,98 @@
+/* Webpack build css imports */
+
+
+/* very_small xxs */
+@import url("@Tree_MediaAndStyles/themes/theme_base/responsive/responsive_size_d05_very_small_xxs_portrait__Tree__theme_base.css");
+@import url("@Tree_MediaAndStyles/themes/theme_base/responsive/responsive_size_d05_very_small_xxs_landscape__Tree__theme_base.css");
+
+
+/* mobile xs */
+@import url("@Tree_MediaAndStyles/themes/theme_base/responsive/responsive_size_e02_mobile_xs_portrait__Tree__theme_base.css");
+@import url("@Tree_MediaAndStyles/themes/theme_base/responsive/responsive_size_e02_mobile_xs_landscape__Tree__theme_base.css");
+
+
+/* mobile s */
+@import url("@Tree_MediaAndStyles/themes/theme_base/responsive/responsive_size_e04_mobile_s_portrait__Tree__theme_base.css");
+@import url("@Tree_MediaAndStyles/themes/theme_base/responsive/responsive_size_e04_mobile_s_landscape__Tree__theme_base.css");
+
+
+/* mobile sm */
+@import url("@Tree_MediaAndStyles/themes/theme_base/responsive/responsive_size_e06_mobile_sm_portrait__Tree__theme_base.css");
+@import url("@Tree_MediaAndStyles/themes/theme_base/responsive/responsive_size_e06_mobile_sm_landscape__Tree__theme_base.css");
+
+
+/* mobile md */
+@import url("@Tree_MediaAndStyles/themes/theme_base/responsive/responsive_size_e08_mobile_md_portrait__Tree__theme_base.css");
+@import url("@Tree_MediaAndStyles/themes/theme_base/responsive/responsive_size_e08_mobile_md_landscape__Tree__theme_base.css");
+
+
+/* tablet s */
+@import url("@Tree_MediaAndStyles/themes/theme_base/responsive/responsive_size_h03_tablet_s_portrait__Tree__theme_base.css");
+@import url("@Tree_MediaAndStyles/themes/theme_base/responsive/responsive_size_h03_tablet_s_landscape__Tree__theme_base.css");
+
+
+/* tablet sm */
+@import url("@Tree_MediaAndStyles/themes/theme_base/responsive/responsive_size_h05_tablet_sm_portrait__Tree__theme_base.css");
+@import url("@Tree_MediaAndStyles/themes/theme_base/responsive/responsive_size_h05_tablet_sm_landscape__Tree__theme_base.css");
+
+
+/* tablet md */
+@import url("@Tree_MediaAndStyles/themes/theme_base/responsive/responsive_size_h07_tablet_md_portrait__Tree__theme_base.css");
+@import url("@Tree_MediaAndStyles/themes/theme_base/responsive/responsive_size_h07_tablet_md_landscape__Tree__theme_base.css");
+
+
+/* tablet lg */
+@import url("@Tree_MediaAndStyles/themes/theme_base/responsive/responsive_size_h09_tablet_lg_portrait__Tree__theme_base.css");
+@import url("@Tree_MediaAndStyles/themes/theme_base/responsive/responsive_size_h09_tablet_lg_landscape__Tree__theme_base.css");
+
+
+/* laptop sm */
+@import url("@Tree_MediaAndStyles/themes/theme_base/responsive/responsive_size_l02_laptop_sm_portrait__Tree__theme_base.css");
+@import url("@Tree_MediaAndStyles/themes/theme_base/responsive/responsive_size_l02_laptop_sm_landscape__Tree__theme_base.css");
+
+
+/* laptop md */
+@import url("@Tree_MediaAndStyles/themes/theme_base/responsive/responsive_size_l03_laptop_md_portrait__Tree__theme_base.css");
+@import url("@Tree_MediaAndStyles/themes/theme_base/responsive/responsive_size_l03_laptop_md_landscape__Tree__theme_base.css");
+
+
+/* laptop lg */
+@import url("@Tree_MediaAndStyles/themes/theme_base/responsive/responsive_size_l07_laptop_lg_portrait__Tree__theme_base.css");
+@import url("@Tree_MediaAndStyles/themes/theme_base/responsive/responsive_size_l07_laptop_lg_landscape__Tree__theme_base.css");
+
+
+/* display xl */
+@import url("@Tree_MediaAndStyles/themes/theme_base/responsive/responsive_size_s02_display_xl_portrait__Tree__theme_base.css");
+@import url("@Tree_MediaAndStyles/themes/theme_base/responsive/responsive_size_s02_display_xl_landscape__Tree__theme_base.css");
+
+
+/* display xxl */
+@import url("@Tree_MediaAndStyles/themes/theme_base/responsive/responsive_size_s04_display_xxl_portrait__Tree__theme_base.css");
+@import url("@Tree_MediaAndStyles/themes/theme_base/responsive/responsive_size_s04_display_xxl_landscape__Tree__theme_base.css");
+
+
+/* display qhd */
+@import url("@Tree_MediaAndStyles/themes/theme_base/responsive/responsive_size_s08_display_qhd_portrait__Tree__theme_base.css");
+@import url("@Tree_MediaAndStyles/themes/theme_base/responsive/responsive_size_s08_display_qhd_landscape__Tree__theme_base.css");
+
+
+/* tv 4k */
+@import url("@Tree_MediaAndStyles/themes/theme_base/responsive/responsive_size_t04_tv_4k_portrait__Tree__theme_base.css");
+@import url("@Tree_MediaAndStyles/themes/theme_base/responsive/responsive_size_t04_tv_4k_landscape__Tree__theme_base.css");
+
+
+/* tv 8k */
+@import url("@Tree_MediaAndStyles/themes/theme_base/responsive/responsive_size_t08_tv_8k_portrait__Tree__theme_base.css");
+@import url("@Tree_MediaAndStyles/themes/theme_base/responsive/responsive_size_t08_tv_8k_landscape__Tree__theme_base.css");
+
+
+/* tv 16k */
+@import url("@Tree_MediaAndStyles/themes/theme_base/responsive/responsive_size_t16_tv_16k_portrait__Tree__theme_base.css");
+@import url("@Tree_MediaAndStyles/themes/theme_base/responsive/responsive_size_t16_tv_16k_landscape__Tree__theme_base.css");
+
+
+/* tv xxxl */
+@import url("@Tree_MediaAndStyles/themes/theme_base/responsive/responsive_size_t99_tv_xxxl_portrait__Tree__theme_base.css");
+@import url("@Tree_MediaAndStyles/themes/theme_base/responsive/responsive_size_t99_tv_xxxl_landscape__Tree__theme_base.css");
+
+

package/MediaAndStyles/themes/theme_base/responsive_size_Imports_Tree_theme_base_Webpack_minimal.css

@@ -0,0 +1,98 @@
+/* Webpack build css imports */
+
+
+/* very_small xxs */
+@import url("@Tree_MediaAndStyles/themes/theme_base/responsive/responsive_size_d05_very_small_xxs_portrait__Tree__theme_base.css");
+@import url("@Tree_MediaAndStyles/themes/theme_base/responsive/responsive_size_d05_very_small_xxs_landscape__Tree__theme_base.css");
+
+
+/* mobile xs */
+@import url("@Tree_MediaAndStyles/themes/theme_base/responsive/responsive_size_e02_mobile_xs_portrait__Tree__theme_base.css");
+@import url("@Tree_MediaAndStyles/themes/theme_base/responsive/responsive_size_e02_mobile_xs_landscape__Tree__theme_base.css");
+
+
+/* mobile s */
+@import url("@Tree_MediaAndStyles/themes/theme_base/responsive/responsive_size_e04_mobile_s_portrait__Tree__theme_base.css");
+@import url("@Tree_MediaAndStyles/themes/theme_base/responsive/responsive_size_e04_mobile_s_landscape__Tree__theme_base.css");
+
+
+/* mobile sm */
+@import url("@Tree_MediaAndStyles/themes/theme_base/responsive/responsive_size_e06_mobile_sm_portrait__Tree__theme_base.css");
+@import url("@Tree_MediaAndStyles/themes/theme_base/responsive/responsive_size_e06_mobile_sm_landscape__Tree__theme_base.css");
+
+
+/* mobile md */
+@import url("@Tree_MediaAndStyles/themes/theme_base/responsive/responsive_size_e08_mobile_md_portrait__Tree__theme_base.css");
+@import url("@Tree_MediaAndStyles/themes/theme_base/responsive/responsive_size_e08_mobile_md_landscape__Tree__theme_base.css");
+
+
+/* tablet s */
+@import url("@Tree_MediaAndStyles/themes/theme_base/responsive/responsive_size_h03_tablet_s_portrait__Tree__theme_base.css");
+@import url("@Tree_MediaAndStyles/themes/theme_base/responsive/responsive_size_h03_tablet_s_landscape__Tree__theme_base.css");
+
+
+/* tablet sm */
+@import url("@Tree_MediaAndStyles/themes/theme_base/responsive/responsive_size_h05_tablet_sm_portrait__Tree__theme_base.css");
+@import url("@Tree_MediaAndStyles/themes/theme_base/responsive/responsive_size_h05_tablet_sm_landscape__Tree__theme_base.css");
+
+
+/* tablet md */
+@import url("@Tree_MediaAndStyles/themes/theme_base/responsive/responsive_size_h07_tablet_md_portrait__Tree__theme_base.css");
+@import url("@Tree_MediaAndStyles/themes/theme_base/responsive/responsive_size_h07_tablet_md_landscape__Tree__theme_base.css");
+
+
+/* tablet lg */
+@import url("@Tree_MediaAndStyles/themes/theme_base/responsive/responsive_size_h09_tablet_lg_portrait__Tree__theme_base.css");
+@import url("@Tree_MediaAndStyles/themes/theme_base/responsive/responsive_size_h09_tablet_lg_landscape__Tree__theme_base.css");
+
+
+/* laptop sm */
+@import url("@Tree_MediaAndStyles/themes/theme_base/responsive/responsive_size_l02_laptop_sm_portrait__Tree__theme_base.css");
+@import url("@Tree_MediaAndStyles/themes/theme_base/responsive/responsive_size_l02_laptop_sm_landscape__Tree__theme_base.css");
+
+
+/* laptop md */
+@import url("@Tree_MediaAndStyles/themes/theme_base/responsive/responsive_size_l03_laptop_md_portrait__Tree__theme_base.css");
+@import url("@Tree_MediaAndStyles/themes/theme_base/responsive/responsive_size_l03_laptop_md_landscape__Tree__theme_base.css");
+
+
+/* laptop lg */
+@import url("@Tree_MediaAndStyles/themes/theme_base/responsive/responsive_size_l07_laptop_lg_portrait__Tree__theme_base.css");
+@import url("@Tree_MediaAndStyles/themes/theme_base/responsive/responsive_size_l07_laptop_lg_landscape__Tree__theme_base.css");
+
+
+/* display xl */
+@import url("@Tree_MediaAndStyles/themes/theme_base/responsive/responsive_size_s02_display_xl_portrait__Tree__theme_base.css");
+@import url("@Tree_MediaAndStyles/themes/theme_base/responsive/responsive_size_s02_display_xl_landscape__Tree__theme_base.css");
+
+
+/* display xxl */
+@import url("@Tree_MediaAndStyles/themes/theme_base/responsive/responsive_size_s04_display_xxl_portrait__Tree__theme_base.css");
+@import url("@Tree_MediaAndStyles/themes/theme_base/responsive/responsive_size_s04_display_xxl_landscape__Tree__theme_base.css");
+
+
+/* display qhd */
+@import url("@Tree_MediaAndStyles/themes/theme_base/responsive/responsive_size_s08_display_qhd_portrait__Tree__theme_base.css");
+@import url("@Tree_MediaAndStyles/themes/theme_base/responsive/responsive_size_s08_display_qhd_landscape__Tree__theme_base.css");
+
+
+/* tv 4k */
+@import url("@Tree_MediaAndStyles/themes/theme_base/responsive/responsive_size_t04_tv_4k_portrait__Tree__theme_base.css");
+@import url("@Tree_MediaAndStyles/themes/theme_base/responsive/responsive_size_t04_tv_4k_landscape__Tree__theme_base.css");
+
+
+/* tv 8k */
+@import url("@Tree_MediaAndStyles/themes/theme_base/responsive/responsive_size_t08_tv_8k_portrait__Tree__theme_base.css");
+@import url("@Tree_MediaAndStyles/themes/theme_base/responsive/responsive_size_t08_tv_8k_landscape__Tree__theme_base.css");
+
+
+/* tv 16k */
+@import url("@Tree_MediaAndStyles/themes/theme_base/responsive/responsive_size_t16_tv_16k_portrait__Tree__theme_base.css");
+@import url("@Tree_MediaAndStyles/themes/theme_base/responsive/responsive_size_t16_tv_16k_landscape__Tree__theme_base.css");
+
+
+/* tv xxxl */
+@import url("@Tree_MediaAndStyles/themes/theme_base/responsive/responsive_size_t99_tv_xxxl_portrait__Tree__theme_base.css");
+@import url("@Tree_MediaAndStyles/themes/theme_base/responsive/responsive_size_t99_tv_xxxl_landscape__Tree__theme_base.css");
+
+

package/README.md

@@ -1,93 +1,104 @@
-# HELLO WORLD
 
-# JS PACKAGE jaisocx/tree
+![./software_labels/software_tm_label_jaisocx.svg](./software_labels/software_tm_label_jaisocx.svg)   ![./software_labels/js_clientside_jaisocx_jsc_tree.svg](./software_labels/js_clientside_jaisocx_jsc_tree.svg)
 
-[https://github.com/Jaisocx-Tools/Workspace](https://github.com/Jaisocx-Tools/Workspace)
 
 
-## preview in action here:
+# @jaisocx/tree
+  > JSON Rendering Client-Side Sites Tool
 
-[https://sandbox.brightday.email/ExampleSimple_TreeRenderingModeConf.html](https://sandbox.brightday.email/ExampleSimple_TreeRenderingModeConf.html)
+![./docs/images/jsc_tree_350.png](./docs/images/jsc_tree_350.png)
 
-[https://sandbox.brightday.email/ExampleSimple_TreeRenderingModeEase.html](https://sandbox.brightday.email/ExampleSimple_TreeRenderingModeEase.html)
 
 
+#### status
+  > ✅  yarn add | npm install Ok
 
-## a little outdated version of .ts code here:
-[https://github.com/Jaisocx-Tools/Workspace/tree/893773a85e33f103d8b0b838bf4004bd45a4e164/workspace/ts/www/sites_tools/js_tools/Tree](https://github.com/Jaisocx-Tools/Workspace/tree/893773a85e33f103d8b0b838bf4004bd45a4e164/workspace/ts/www/sites_tools/js_tools/Tree)
+  > ✅ `.html` previews Ok
 
-In Project "Workspace"
-[https://github.com/Jaisocx-Tools/Workspace](https://github.com/Jaisocx-Tools/Workspace)
 
-git clone ssh:
-`git@github.com:Jaisocx-Tools/Workspace.git`
 
-git clone https:
-`https://github.com/Jaisocx-Tools/Workspace.git`
+#### supports
+  > Client Side
 
-at relative path `workspace/ts/www/sites_tools/js_tools/Tree`
+```
+   Browser |   Express |   Console |
+    ✅ yes |      ❌ no |     ❌ no |
+```
+
+---
 
 
 
-## What is this
+## 💡 The aim of the setup
 
 The js site ui tool to render a multilevel nested objects json.
 
 
-## How to use in ts code
+
+## ts examples
+
+### 1. Need to import js code first on html page.
+
+#### 1.1. Webpack bundle.js
+
+Need first webpack bundle.js, and to reference in tag script in html page.
+
+
+
+### 2. then instantiate Tree class in html page in DOMContentLoaded event handler like here:
 
 ```
-    <h1>Tree examples</h1>
+    <h1>Tree example</h1>
 
-    <h2>json subtree type array</h2>
-    <div id="example-tree-holder_SubtreeArrayOfObjects"></div>
+    <div id="example-tree-holder"></div>
 
-    <h2>json subtree type object</h2>
-    <div id="example-tree-holder_SubtreeLikeObjects" class="theme-funny"></div>
 
-    <h2>load by url (should work only when published at an http server)</h2>
-    <div id="example-tree-holder_load_by_url"></div>
 
+    <!-- SCRIPT TO RENDER JSON IN TREE VIEW -->
     <script>
 
-    const treeJson_SubtreeArrayOfObjects = [
+    let glob_TreeClassInstance = new Object();
+
+
+    // JS VARIABLE JSON TO RENDER IN TREE VIEW
+    const treeJsonData = [
     {
-      "icon": "webpack_builds/ExampleTree/custom-theme-icons/house.png",
+      "icon": "webpack_builds/ExampleTree/home_tree_mode_conf/house.png",
       "label": "Main",
       "opened": false,
       "text": "<h3>Main tree elem</h3>",
       "subtree": [
         {
-          "icon": "webpack_builds/ExampleTree/custom-theme-icons/google.png",
+          "icon": "webpack_builds/ExampleTree/home_tree_mode_conf/google.png",
           "label": "A Link to Google",
           "href": "https://google.com/",
           "cssClassName": "hyperlink"
         },
         {
-          "icon": "webpack_builds/ExampleTree/custom-theme-icons/github.png",
+          "icon": "webpack_builds/ExampleTree/home_tree_mode_conf/github.png",
           "label": "A Link to GitHub",
           "href": "https://github.com/orgs/Jaisocx-Tools/repositories",
           "cssClassName": "hyperlink"
         },
         {
-          "icon": "webpack_builds/ExampleTree/custom-theme-icons/catalog.png",
+          "icon": "webpack_builds/ExampleTree/home_tree_mode_conf/catalog.png",
           "label": "echo html",
           "opened": false,
           "subtree": [
             {
-              "icon": "webpack_builds/ExampleTree/custom-theme-icons/html.png",
+              "icon": "webpack_builds/ExampleTree/home_tree_mode_conf/html.png",
               "label": "html 1",
               "href": "javascript: void(0);",
               "text": "<h3>Hello World!</h3><p style=\"color:#26d;\">Have fun with styling and using JSTree tool.</p>"
             },
             {
-              "icon": "webpack_builds/ExampleTree/custom-theme-icons/html.png",
+              "icon": "webpack_builds/ExampleTree/home_tree_mode_conf/html.png",
               "label": "html 2",
               "href": "javascript: void(0);",
               "text": "<h3>Hello World!</h3><p style=\"color:#d83;\">You can edit code easily, JSTree class is lightweight.</p>"
             },
             {
-              "icon": "webpack_builds/ExampleTree/custom-theme-icons/html.png",
+              "icon": "webpack_builds/ExampleTree/home_tree_mode_conf/html.png",
               "label": "html 3",
               "href": "javascript: void(0);",
               "text": "<h3>Hello World!</h3><p style=\"color:#00bb00;\">Have a nice day.</p>"
@@ -98,45 +109,39 @@ The js site ui tool to render a multilevel nested objects json.
     }
   ];
 
+
+
       document.addEventListener('DOMContentLoaded', () => {
-        const tree_SubtreeArrayOfObjects = new Tree();
-        tree_SubtreeArrayOfObjects
-          .setDebug(false)
-          .setMainHtmlNodeId("example-tree-holder_SubtreeArrayOfObjects")
-          .setNodesWithIcons(true)
-          .setNodesOpenedMode(TreeConstants.NodesOpenedMode.ALL_SHOWN)
-          .setModifiable(false)
-          .setRenderingMode(TreeConstants.RenderingMode.Conf)
-          .addJSTreeEventListener (
+        glob_TreeClassInstance = new Tree();
+
+        glob_TreeClassInstance
+          .setMainHtmlNodeId ( "example-tree-holder" )
+          .render ( treeJsonData );
+
+
+
+        /*
+        Another example with several methods to configure the Tree.
+        glob_TreeClassInstance
+          .setDebug ( true ) // turns on extended infos in browser's developer tools
+          .setMainHtmlNodeId ( "example-tree-holder" )
+          .setNodesWithIcons ( true ) // turns on mini images when in json data icon prop is set, or shows in mode ease icons of data types.
+          .setNodesOpenedMode ( TreeConstants.NodesOpenedMode.ALL_SHOWN ) // .ALL_HIDE .JSON_DATA_DEFINED ( "opened": true )
+          .setRenderingMode ( TreeConstants.RenderingMode.Conf ) // .Ease
+          .addJSTreeEventListener ( // tree click example event handler
             TreeConstants.TreeEventsNames.EVENT_NAME__TREE_NODE_LABEL__CLICK,
-            (eventName, eventPayload) => {
+            ( eventName, eventPayload ) => {
               console.log(eventName, eventPayload);
             }
           )
-          .render(treeJson_SubtreeArrayOfObjects);
-
-
-        // minimum setters amount required
-        const tree_SubtreeLikeObjects = new Tree();
-        tree_SubtreeLikeObjects
-          .setMainHtmlNodeId("example-tree-holder_SubtreeLikeObjects")
-          .setNodesOpenedMode(TreeConstants.NodesOpenedMode.JSON_DATA_DEFINED)
-          .setNodesWithIcons(true)
-          .setRenderingMode(TreeConstants.RenderingMode.Conf)
-          .render(treeJson_SubtreeLikeObjects);
-
-        // example to load by url
-        const tree_load_by_url = new Tree();
-        tree_load_by_url
-            .setMainHtmlNodeId("example-tree-holder_load_by_url")
-            .setRenderingMode(TreeConstants.RenderingMode.Conf)
-            .load("webpack_builds/ExampleTree/json/tree-data.json");
+          .render ( treeJsonData ); */
 
       });
     </script>
 ```
 
 
+
 ## Constants
 
 ```

package/data/tree.json

@@ -0,0 +1,47 @@
+[
+  {
+    "icon": "MediaAndStyles/themes/theme_base/mini_images/home_tree_mode_conf/house.png",
+    "label": "Main",
+    "opened": false,
+    "text": "<h3>Main tree elem</h3>",
+    "subtree": [
+      {
+        "icon": "MediaAndStyles/themes/theme_base/mini_images/home_tree_mode_conf/google.png",
+        "label": "A Link to Google",
+        "href": "https://google.com/",
+        "cssClassName": "hyperlink"
+      },
+      {
+        "icon": "MediaAndStyles/themes/theme_base/mini_images/home_tree_mode_conf/github.png",
+        "label": "A Link to GitHub",
+        "href": "https://github.com/orgs/Jaisocx-Tools/repositories",
+        "cssClassName": "hyperlink"
+      },
+      {
+        "icon": "MediaAndStyles/themes/theme_base/mini_images/home_tree_mode_conf/catalog.png",
+        "label": "echo html",
+        "opened": false,
+        "subtree": [
+          {
+            "icon": "MediaAndStyles/themes/theme_base/mini_images/home_tree_mode_conf/html.png",
+            "label": "html 1",
+            "href": "javascript: void(0);",
+            "text": "<h3>Hello World!</h3><p style=\"color:#26d;\">Have fun with styling and using JSTree tool.</p>"
+          },
+          {
+            "icon": "MediaAndStyles/themes/theme_base/mini_images/home_tree_mode_conf/html.png",
+            "label": "html 2",
+            "href": "javascript: void(0);",
+            "text": "<h3>Hello World!</h3><p style=\"color:#d83;\">You can edit code easily, JSTree class is lightweight.</p>"
+          },
+          {
+            "icon": "MediaAndStyles/themes/theme_base/mini_images/home_tree_mode_conf/html.png",
+            "label": "html 3",
+            "href": "javascript: void(0);",
+            "text": "<h3>Hello World!</h3><p style=\"color:#00bb00;\">Have a nice day.</p>"
+          }
+        ]
+      }
+    ]
+  }
+]