npm - @jaisocx/tree - Versions diffs - 2.2.18 → 2.2.20 - Mend

@jaisocx/tree 2.2.18 → 2.2.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (171) hide show

package/index.preview.html CHANGED Viewed

@@ -2,112 +2,97 @@
 <html lang="en" class="jsx">
 <head>
-    <title>Tree Preview</title>
-    <base href="./" />
+  <link
+      id="icon_jaisocx"
+      rel="icon"
+      type="image/x-icon"
+      href="node_modules/@jaisocx/css_clean_start_lite/favicon/Icon_Jaisocx.ico"
+      href-fallback="../css_clean_start_lite/favicon/Icon_Jaisocx.ico"
+      onerror="javascript: ( () => { this.onerror = null; this.href = this.getAttribute( 'href-fallback' ); this.onerror = null; } )();"
+  />
-    <meta charset="utf-8" />
-    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
+  <title> Jaisocx Tree </title>
-    <link
-            id="icon_jaisocx"
-            rel="icon"
-            type="image/x-icon"
-            href="node_modules/@jaisocx/css-clean-start-2/favicon/Icon_Jaisocx.ico"
-            href-fallback="../css-clean-start-2/favicon/Icon_Jaisocx.ico"
-            onerror="javascript: ( () => { this.onerror = null; this.href = this.getAttribute( 'href-fallback' ); this.onerror = null; } )();"
-    />
+  <base href="./" />
-    <!--    <link-->
-    <!--            id="icon_brightday"-->
-    <!--            rel="icon"-->
-    <!--            type="image/x-icon"-->
-    <!--            href="node_modules/@jaisocx/css-clean-start-2/favicon/Icon_Sandbox_Brightday.ico"-->
-    <!--            href-fallback="../css-clean-start-2/favicon/Icon_Sandbox_Brightday.ico"-->
-    <!--            onerror="javascript: ( () => { this.onerror = null; this.href = this.getAttribute( 'href-fallback' ); this.onerror = null; } )();"-->
-    <!--    />-->
+  <meta charset="utf-8" />
+  <meta content="width=device-width, initial-scale=1.0" name="viewport" />
-    <!--# CSS CLEAN START 2: html & css WHEN STARTING A SITE FROM SCRATCH -->
-    <!--# importing @jaisocx/css-clean-start-2 IN DEV MODE, TO RESEARCH THE .css STYLES IN BROWSER'S DEV TOOLS IN NETWORKS TAB  -->
-    <!-- <link
+  <!--# CSS CLEAN START LITE: html & css WHEN STARTING A SITE FROM SCRATCH -->
+  <link
       rel="stylesheet"
       type="text/css"
       charset="utf-8"
-      href="node_modules/@jaisocx/css-clean-start-2/MediaAndStyles/CssCleanStart_2_main_relative.css"
-      href-fallback="../css-clean-start-2/MediaAndStyles/CssCleanStart_2_main_relative.css"
+      href="node_modules/@jaisocx/css_clean_start_lite/MediaAndStyles/CssCleanStart_Lite_main_resolved.css"
+      href-fallback="../css_clean_start_lite/MediaAndStyles/CssCleanStart_Lite_main_resolved.css"
       onerror="javascript: ( () => { this.onerror = null; this.href = this.getAttribute( 'href-fallback' ); this.onerror = null; } )();"
-    /> -->
-    <!--# THE SAME importing @jaisocx/css-clean-start-2 IN PROD MODE, PACKED BY @jaisocx/css-importer TOOL  -->
-    <link
-            rel="stylesheet"
-            type="text/css"
-            charset="utf-8"
-            href="node_modules/@jaisocx/css-clean-start-2/MediaAndStyles/CssCleanStart_2_main_resolved_minimal.css"
-            href-fallback="../css-clean-start-2/MediaAndStyles/CssCleanStart_2_main_resolved_minimal.css"
-            onerror="javascript: ( () => { this.href = this.getAttribute( 'href-fallback' ); this.onerror = null; } )();"
-    />
-    <!--# STYLES Tree and theme_base -->
-    <!-- DEV MODE -->
-    <!--  <link-->
-    <!--    rel="stylesheet"-->
-    <!--    type="text/css"-->
-    <!--    charset="utf-8"-->
-    <!--    href="MediaAndStyles/Tree_main_Relative.css"-->
-    <!--  />-->
-    <!-- PROD MODE -->
-    <link
-            rel="stylesheet"
-            type="text/css"
-            charset="utf-8"
-            href="MediaAndStyles/Tree_main_resolved_minimal.css"
-    />
-    <!--# Theme funny -->
-    <!--  <link-->
-    <!--    rel="stylesheet"-->
-    <!--    type="text/css"-->
-    <!--    charset="utf-8"-->
-    <!--    href="MediaAndStyles/themes/theme-funny/tree_theme-funny.css"-->
-    <!--  />-->
+  />
-    <style>
+  <link
+    rel="stylesheet"
+    type="text/css"
+    charset="utf-8"
+    href="MediaAndStyles/Tree_main_resolved_minimal.css"
+  />
-        .jsx {
-          --jsx--css-clean-start-2--body-tag--background: white;
-          --jsx--css-clean-start-2--site--background: #fff5f0;
+  <!--# Theme funny -->
+<!--  <link-->
+<!--    rel="stylesheet"-->
+<!--    type="text/css"-->
+<!--    charset="utf-8"-->
+<!--    href="MediaAndStyles/themes/theme-funny/tree_theme-funny.css"-->
+<!--  />-->
-          --jsx--css-clean-start-2--site--padding: 2rem 1rem 3rem 1rem;
-          --jsx--css-clean-start-2--h1--font-size: 1.05rem;
-          --jsx--css-clean-start-2--h2--font-size: 0.9rem;
-          --jsx--css-clean-start-2--h3--font-size: 0.83rem;
-          --jsx--css-clean-start-2--h2--font-weight: 500;
+    <style naame="css_clean_start_overrides">
-          --theme-button--width: fit-content;
-          --theme-button--font-size: 0.795rem;
-        }
+      .jsx {
+        --jsx--css-clean-start-2--body-tag--background: white;
+        --jsx--css-clean-start-2--site--background: #fff5f0;
+        --jsx--css-clean-start-2--site--padding: 2rem 1rem 3rem 1rem;
+        --jsx--css-clean-start-2--h1--font-size: 1.05rem;
+        --jsx--css-clean-start-2--h2--font-size: 0.9rem;
+        --jsx--css-clean-start-2--h3--font-size: 0.83rem;
+        --jsx--css-clean-start-2--h2--font-weight: 500;
+        --theme-button--width: fit-content;
+        --theme-button--font-size: 0.795rem;
+      }
+      .jsx .theme-funny.tree {
+        --node-label--font-family: Niconne;
+      }
-        .jsx .theme-funny.tree {
-          --node-label--font-family: Niconne;
+      @media screen and ( min-width: 2px) and (max-width: 767px) {
+        .jsx {
+          --jsx--css-clean-start-2--site--min-width: 100%;
+          --jsx--css-clean-start-2--site--max-width: 100%;
+          --jsx--css-clean-start-2--site--width: 100%;
         }
-        @media screen and (orientation: portrait) {
-          .jsx description {
-            display: none;
-          }
+        .jsx h2,
+        .jsx h3,
+        .jsx description {
+          display: none;
         }
+      }
+    </style>
+    <style name="theme_buttons">
         .jsx themebuttons {
           width: fit-content;
@@ -145,6 +130,12 @@
           font-family: fantasy;
         }
+    </style>
+    <style>
         .jsx main content {
             width: 100%;
             min-width: 100%;
@@ -176,6 +167,7 @@
             max-height: 2rem;
             margin-right: 1rem;
         }
     </style>
@@ -189,7 +181,8 @@
         <h1>Tree styling JSON Data</h1>
         <h2>@jaisocx/tree</h2>
-        <h3>index.preview.html</h3>
+        <h3>tree_preview_prod.html</h3>
         <description>
             Css sites tool styling json data to a tree view. Css for sites tools are packed with @jaisocx/css-importer.
             Js loaded from node_modules with ScriptsChainedLoader.
@@ -200,7 +193,7 @@
         <themebuttons>
-            <button id="button-turn-on-base-theme" data-theme="">Base Theme</button>
+            <button id="button-turn-on-base" data-theme="">Base Theme</button>
             <button id="button-turn-on-daymode" data-theme="theme_lightmode">Day Mode</button>
             <button id="button-turn-on-nightmode" data-theme="theme_darkmode">Night Mode</button>
         </themebuttons>
@@ -221,7 +214,7 @@
     <div id="example-tree-holder_load_by_url"></div>
-</main>
+  </main>
 </body>
@@ -229,523 +222,524 @@
 <script>
-    let glob_TreeExamplesClassInstance = new Object();
+  let glob_TreeExamplesClassInstance = new Object();
-    let glob_CssClassesNames = [
-      "jsx"
-    ];
-    let glob_ButtonsQuerySelectors = [
-      "themebuttons button"
-    ];
+  let glob_CssClassesNames = [
+    "jsx"
+  ];
-    let glob_TreeJsonDataIconBase                = "";
+  let glob_ButtonsQuerySelectors = [
+    "themebuttons button"
+  ];
-    let glob_PreloaderStopTimeoutMillis          = 1200;
-    let glob_IsPreloadWithStopOnLoadTimeout      = true;
+  let glob_TreeJsonDataIconBase                = "";
+  let glob_PreloaderStopTimeoutMillis          = 1200;
+  let glob_IsPreloadWithStopOnLoadTimeout      = true;
-    let glob_DataForScriptsLoader                = new Object();
-    let glob_DataForPreloaderOfMediaAndFontsData = new Object();
-    let glob_TreeJson_SubtreeArrayOfObjects      = new Array();
-    let glob_TreeJson_SubtreeLikeObjects         = new Object();
+  let glob_DataForScriptsLoader                = new Object();
+  let glob_DataForPreloaderOfMediaAndFontsData = new Object();
+  let glob_TreeJson_SubtreeArrayOfObjects      = new Array();
+  let glob_TreeJson_SubtreeLikeObjects         = new Object();
+  let glob_TreeJson_Url                        = "data/tree.json";
-    glob_DataForPreloaderOfMediaAndFontsData = {
-      "image": {
-          "tree_json_data_mini_images": [
-              "MediaAndStyles/themes/theme_base/mini_images/home_tree_mode_conf/house.png",
-              "MediaAndStyles/themes/theme_base/mini_images/home_tree_mode_conf/google.png",
-              "MediaAndStyles/themes/theme_base/mini_images/home_tree_mode_conf/github.png",
-              "MediaAndStyles/themes/theme_base/mini_images/home_tree_mode_conf/catalog.png",
-              "MediaAndStyles/themes/theme_base/mini_images/home_tree_mode_conf/html.png"
-          ]
-      },
-      "font": {
-        "theme_font_LibreFranklin": [
-          "https://sandbox.brightday.email/cdn/www/fonts/LibreFranklin/static/LibreFranklin-Regular.ttf",
-          "https://sandbox.brightday.email/cdn/www/fonts/LibreFranklin/static/LibreFranklin-Medium.ttf",
-          "https://sandbox.brightday.email/cdn/www/fonts/LibreFranklin/static/LibreFranklin-SemiBold.ttf",
-          "https://sandbox.brightday.email/cdn/www/fonts_css/font_LibreFranklin_cdn.css"
-        ],
-        "theme_font_Niconne": [
-          "https://sandbox.brightday.email/cdn/www/fonts/Niconne/Niconne-Regular.ttf",
-          "https://sandbox.brightday.email/cdn/www/fonts_css/font_Niconne_cdn.css"
-        ],
-        "theme_font_Baloo_Paaji_2": [
-          "https://sandbox.brightday.email/cdn/www/fonts/Baloo_Paaji_2/static/BalooPaaji2-Medium.ttf",
-          "https://sandbox.brightday.email/cdn/www/fonts/Baloo_Paaji_2/static/BalooPaaji2-Regular.ttf",
-          "https://sandbox.brightday.email/cdn/www/fonts/Baloo_Paaji_2/static/BalooPaaji2-SemiBold.ttf",
-          "https://sandbox.brightday.email/cdn/www/fonts_css/font_Baloo_Paaji_2_cdn.css"
-        ]
-      }
-    };
-    glob_DataForScriptsLoader = {
-      "text": {
-        "node_modules": true,
-        "npm_namespace": "@jaisocx",
-        "scripts": [
-          "case_converter/types/DataRecordMatches",
-          "case_converter/case_converter_constants/CaseConverterConstants",
-          "case_converter/CaseConverter"
-        ]
-      },
-      "mime-type": {
-        "node_modules": true,
-        "npm_namespace": "@jaisocx",
-        "scripts": [
-          "mime_type_constants/SitesPreloaderMimeTypeConstants",
-          "MimeType"
+  glob_DataForPreloaderOfMediaAndFontsData = {
+    "image": {
+        "tree_json_data_mini_images": [
+            "MediaAndStyles/themes/theme_base/mini_images/home_tree_mode_conf/house.png",
+            "MediaAndStyles/themes/theme_base/mini_images/home_tree_mode_conf/google.png",
+            "MediaAndStyles/themes/theme_base/mini_images/home_tree_mode_conf/github.png",
+            "MediaAndStyles/themes/theme_base/mini_images/home_tree_mode_conf/catalog.png",
+            "MediaAndStyles/themes/theme_base/mini_images/home_tree_mode_conf/html.png"
         ]
-      },
-      "preloader": {
-        "node_modules": true,
-        "npm_namespace": "@jaisocx",
-        "scripts": [
-          "media_preloader/media_preloader_constants/PreloaderConstants",
-          "media_preloader/preloader/Preloader"
-        ]
-      },
-      "theme-turn-on": {
-        "node_modules": true,
-        "npm_namespace": "@jaisocx",
-        "scripts": [
-          "constants/ThemeTurnOnConstants",
-          "theme_turn_on/ThemeTurnOn"
-        ]
-      },
-      "jpath": {
-        "node_modules": true,
-        "npm_namespace": "@jaisocx",
-        "scripts": [
-          "JPathData",
-          "JPath"
-        ]
-      },
-      "event-emitter": {
-        "node_modules": true,
-        "npm_namespace": "@jaisocx",
-        "scripts": [
-          "EventEmitter",
-          "ImprovedRenderEventEmitter"
-        ]
-      },
-      "tokens-parser": {
-        "node_modules": true,
-        "npm_namespace": "@jaisocx",
-        "scripts": [
-          "TokensParser"
-        ]
-      },
-      "template-renderer": {
-        "node_modules": true,
-        "npm_namespace": "@jaisocx",
-        "scripts": [
-          "TemplateRenderer"
-        ]
-      },
-      "tree": {
-        "scripts": [
-          "typescript/ArrayOrObjectPackage",
-          "typescript/TreeConstants",
-          "typescript/TreeConf",
-          "typescript/TreeAdapter",
-          "typescript/TreeAdapterModeEase",
-          "typescript/TreeAdapterModeConf",
-          "typescript/Tree"
-        ]
-      }
-    };
-    // in this json structure for Tree,
-    // the subtree is of type JSON array,
-    // where each array item is the object,
-    // having data for a Tree node rendering to html,
-    // e.g. label text, Tree node html holding element css classes names, and similar.
-    // -------------------
-    // START TREE CONF DATA
-    glob_TreeJson_SubtreeArrayOfObjects = [
-      {
-        "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>"
-              }
-            ]
-          }
-        ]
-      }
-    ];
-    // in this json structure the subtree node for sublevel tree nodes is not the array,
-    // but the associative array, the object with keys, being not rendered in the Tree,
-    // and object values all of type object, containing Tree node data, like label text, link address, and others.
-    glob_TreeJson_SubtreeLikeObjects = {
-      "hjc": {
-        "icon": "MediaAndStyles/themes/theme_base/mini_images/home_tree_mode_conf/house.png",
-        "label": "Main",
-        "opened": true,
-        "text": "<h3>Main tree elem</h3>",
-        "subtree": {
-          "frnynyr": {
-            "icon": "MediaAndStyles/themes/theme_base/mini_images/home_tree_mode_conf/google.png",
-            "label": "A Link to Google",
-            "href": "https://google.com/",
-            "cssClassName": "hyperlink"
-          },
-          "rnyrny": {
-            "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"
-          },
-          "rynrnyrn": {
-            "icon": "MediaAndStyles/themes/theme_base/mini_images/home_tree_mode_conf/catalog.png",
-            "label": "echo html",
-            "opened": false,
-            "subtree": {
-              "rnynry": {
-                "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>"
-              },
-              "rynynry": {
-                "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>"
-              },
-              "coa": {
-                "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>"
-              }
+    },
+    "font": {
+      "theme_font_LibreFranklin": [
+        "https://sandbox.brightday.email/cdn/www/fonts/LibreFranklin/static/LibreFranklin-Regular.ttf",
+        "https://sandbox.brightday.email/cdn/www/fonts/LibreFranklin/static/LibreFranklin-Medium.ttf",
+        "https://sandbox.brightday.email/cdn/www/fonts/LibreFranklin/static/LibreFranklin-SemiBold.ttf",
+        "https://sandbox.brightday.email/cdn/www/fonts_css/font_LibreFranklin_cdn.css"
+      ],
+      "theme_font_Niconne": [
+        "https://sandbox.brightday.email/cdn/www/fonts/Niconne/Niconne-Regular.ttf",
+        "https://sandbox.brightday.email/cdn/www/fonts_css/font_Niconne_cdn.css"
+      ],
+      "theme_font_Baloo_Paaji_2": [
+        "https://sandbox.brightday.email/cdn/www/fonts/Baloo_Paaji_2/static/BalooPaaji2-Medium.ttf",
+        "https://sandbox.brightday.email/cdn/www/fonts/Baloo_Paaji_2/static/BalooPaaji2-Regular.ttf",
+        "https://sandbox.brightday.email/cdn/www/fonts/Baloo_Paaji_2/static/BalooPaaji2-SemiBold.ttf",
+        "https://sandbox.brightday.email/cdn/www/fonts_css/font_Baloo_Paaji_2_cdn.css"
+      ]
+    }
+  };
+  glob_DataForScriptsLoader = {
+    "text": {
+      "node_modules": true,
+      "npm_namespace": "@jaisocx",
+      "scripts": [
+        "case_converter/types/DataRecordMatches",
+        "case_converter/case_converter_constants/CaseConverterConstants",
+        "case_converter/CaseConverter"
+      ]
+    },
+    "mime-type": {
+      "node_modules": true,
+      "npm_namespace": "@jaisocx",
+      "scripts": [
+        "mime_type_constants/SitesPreloaderMimeTypeConstants",
+        "MimeType"
+      ]
+    },
+    "preloader": {
+      "node_modules": true,
+      "npm_namespace": "@jaisocx",
+      "scripts": [
+        "media_preloader/media_preloader_constants/PreloaderConstants",
+        "media_preloader/preloader/Preloader"
+      ]
+    },
+    "theme-turn-on": {
+      "node_modules": true,
+      "npm_namespace": "@jaisocx",
+      "scripts": [
+        "constants/ThemeTurnOnConstants",
+        "theme_turn_on/ThemeTurnOn"
+      ]
+    },
+    "jpath": {
+      "node_modules": true,
+      "npm_namespace": "@jaisocx",
+      "scripts": [
+        "JPathData",
+        "JPath"
+      ]
+    },
+    "event-emitter": {
+      "node_modules": true,
+      "npm_namespace": "@jaisocx",
+      "scripts": [
+        "EventEmitter",
+        "ImprovedRenderEventEmitter"
+      ]
+    },
+    "tokens-parser": {
+      "node_modules": true,
+      "npm_namespace": "@jaisocx",
+      "scripts": [
+        "TokensParser"
+      ]
+    },
+    "template-renderer": {
+      "node_modules": true,
+      "npm_namespace": "@jaisocx",
+      "scripts": [
+        "TemplateRenderer"
+      ]
+    },
+    "tree": {
+      "scripts": [
+        "typescript/ArrayOrObjectPackage",
+        "typescript/TreeConstants",
+        "typescript/TreeConf",
+        "typescript/TreeAdapter",
+        "typescript/TreeAdapterModeEase",
+        "typescript/TreeAdapterModeConf",
+        "typescript/Tree"
+      ]
+    }
+  };
+  // in this json structure for Tree,
+  // the subtree is of type JSON array,
+  // where each array item is the object,
+  // having data for a Tree node rendering to html,
+  // e.g. label text, Tree node html holding element css classes names, and similar.
+  // -------------------
+  // START TREE DATA
+  glob_TreeJson_SubtreeArrayOfObjects = [
+    {
+      "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>"
+            }
+          ]
+        }
+      ]
+    }
+  ];
+  // in this json structure the subtree node for sublevel tree nodes is not the array,
+  // but the associative array, the object with keys, being not rendered in the Tree,
+  // and object values all of type object, containing Tree node data, like label text, link address, and others.
+  glob_TreeJson_SubtreeLikeObjects = {
+    "hjc": {
+      "icon": "MediaAndStyles/themes/theme_base/mini_images/home_tree_mode_conf/house.png",
+      "label": "Main",
+      "opened": true,
+      "text": "<h3>Main tree elem</h3>",
+      "subtree": {
+        "frnynyr": {
+          "icon": "MediaAndStyles/themes/theme_base/mini_images/home_tree_mode_conf/google.png",
+          "label": "A Link to Google",
+          "href": "https://google.com/",
+          "cssClassName": "hyperlink"
+        },
+        "rnyrny": {
+          "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"
+        },
+        "rynrnyrn": {
+          "icon": "MediaAndStyles/themes/theme_base/mini_images/home_tree_mode_conf/catalog.png",
+          "label": "echo html",
+          "opened": false,
+          "subtree": {
+            "rnynry": {
+              "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>"
+            },
+            "rynynry": {
+              "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>"
+            },
+            "coa": {
+              "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>"
             }
           }
         }
       }
-    };
-    // -------------------
-    // END TREE CONF DATA
+    }
+  };
+  // -------------------
+  // END TREE DATA
-    class TreeExamples {
-      themeTurnOn   = new Object();
-      scriptsLoader = new Object();
-      preloader     = new Object();
+  class TreeExamples {
-      treeInstances = new Object();
+    themeTurnOn   = new Object();
+    scriptsLoader = new Object();
+    preloader     = new Object();
-      tsHtml        = 1;
+    treeInstances = new Object();
+    tsHtml        = 1;
-      cssClassesNames                     = new Array();
-      buttonsQuerySelectors               = new Array();
-      treeJsonDataIconBase                = "";
-      preloaderStopTimeoutMillis          = 1200;
-      isPreloadWithStopOnLoadTimeout      = true;
-      dataForScriptsLoader                = new Object();
-      dataForPreloaderOfMediaAndFontsData = new Object();
-      treeJson_SubtreeArrayOfObjects      = new Array();
-      treeJson_SubtreeLikeObjects         = new Object();
+    cssClassesNames                     = new Array();
+    buttonsQuerySelectors               = new Array();
+    treeJsonDataIconBase                = "";
+    preloaderStopTimeoutMillis          = 1200;
+    isPreloadWithStopOnLoadTimeout      = true;
+    dataForScriptsLoader                = new Object();
+    dataForPreloaderOfMediaAndFontsData = new Object();
+    treeJson_SubtreeArrayOfObjects      = new Array();
+    treeJson_SubtreeLikeObjects         = new Object();
-      constructor() {
-          this.themeTurnOn   = new Object();
-          this.scriptsLoader = new Object();
-          this.preloader     = new Object();
+    constructor() {
-          this.treeInstances = new Object();
+        this.themeTurnOn   = new Object();
+        this.scriptsLoader = new Object();
+        this.preloader     = new Object();
-          this.tsHtml        = 1;
+        this.treeInstances = new Object();
-          this.cssClassesNames                     = new Array();
-          this.buttonsQuerySelectors               = new Array();
-          this.treeJsonDataIconBase                = "";
-          this.preloaderStopTimeoutMillis          = 1200;
-          this.isPreloadWithStopOnLoadTimeout      = true;
-          this.dataForScriptsLoader                = new Object();
-          this.dataForPreloaderOfMediaAndFontsData = new Object();
-          this.treeJson_SubtreeArrayOfObjects      = new Array();
-          this.treeJson_SubtreeLikeObjects         = new Object();
+        this.tsHtml        = 1;
-      }
+        this.cssClassesNames                     = new Array();
+        this.buttonsQuerySelectors               = new Array();
+        this.treeJsonDataIconBase                = "";
+        this.preloaderStopTimeoutMillis          = 1200;
+        this.isPreloadWithStopOnLoadTimeout      = true;
+        this.dataForScriptsLoader                = new Object();
+        this.dataForPreloaderOfMediaAndFontsData = new Object();
+        this.treeJson_SubtreeArrayOfObjects      = new Array();
+        this.treeJson_SubtreeLikeObjects         = new Object();
+    }
-      exampleFunc( inSelector, jsonItem, eventPayload ) {
-            let text = ( jsonItem.text ) ?? "";
-            let tagImg_miniImage = eventPayload.treeHtmlNode.querySelector( ".jstree-html-node-holder-icon > img" );
-            let imgSrc = tagImg_miniImage.getAttribute( "src" );
-            let imgAlt = tagImg_miniImage.getAttribute( "alt" );
+    exampleFunc( inSelector, jsonItem, eventPayload ) {
-            if ( this.tsHtml === 1 ) {
-                this.tsHtml = document.body.querySelector( inSelector );
-            }
+          let text = ( jsonItem.text ) ?? "";
+          let tagImg_miniImage = eventPayload.treeHtmlNode.querySelector( ".jstree-html-node-holder-icon > img" );
+          let imgSrc = tagImg_miniImage.getAttribute( "src" );
+          let imgAlt = tagImg_miniImage.getAttribute( "alt" );
-            this.tsHtml.innerHTML = `
-              <img class="mini_image" src="${imgSrc}" alt="${imgAlt}" />
-              <div>${text}</div>`;
-      }
+          if ( this.tsHtml === 1 ) {
+              this.tsHtml = document.body.querySelector( inSelector );
+          }
+          this.tsHtml.innerHTML = `
+            <img class="mini_image" src="${imgSrc}" alt="${imgAlt}" />
+            <div>${text}</div>`;
+    }
-      renderTree( holderElemId, data, modeShownNodes ) {
-          this.treeInstances[ holderElemId ] = new Tree();
-          let tree = this.treeInstances[ holderElemId ];
+    renderTree( holderElemId, data, modeShownNodes ) {
-          tree
-            .setDebug( false )
-            .setMainHtmlNodeId( holderElemId )
-            .setNodesWithIcons( true )
-            .setNodesOpenedMode( modeShownNodes )
-            .setModifiable( false )
-            .setRenderingMode( TreeConstants.RenderingMode.Conf )
-            .addThisClassEventListener (
-              TreeConstants.TreeEventsNames.EVENT_NAME__BEFORE_RENDER_ONE_NODE,
-              ( eventName, eventPayload ) => {
+        this.treeInstances[ holderElemId ] = new Tree();
+        let tree = this.treeInstances[ holderElemId ];
-                if ( this.debug === true ) {
-                  console.log( eventName, eventPayload );
-                }
+        tree
+          .setDebug( false )
+          .setMainHtmlNodeId( holderElemId )
+          .setNodesWithIcons( true )
+          .setNodesOpenedMode( modeShownNodes )
+          .setModifiable( false )
+          .setRenderingMode( TreeConstants.RenderingMode.Conf )
+          .addThisClassEventListener (
+            TreeConstants.TreeEventsNames.EVENT_NAME__BEFORE_RENDER_ONE_NODE,
+            ( eventName, eventPayload ) => {
+              if ( this.debug === true ) {
+                console.log( eventName, eventPayload );
+              }
-                let iconSrc = eventPayload.dataForRendering.iconSrc;
-                eventPayload.dataForRendering.iconSrc = [ this.treeJsonDataIconBase, iconSrc ].join("");
-                return { "value": eventPayload.dataForRendering };
-              }
-            ).addJSTreeEventListener (
-                TreeConstants.TreeEventsNames.EVENT_NAME__TREE_NODE_LABEL__CLICK,
-                ( eventName, eventPayload ) => {
-                  let locTree = this.treeInstances[ holderElemId ];
+              let iconSrc = eventPayload.dataForRendering.iconSrc;
+              eventPayload.dataForRendering.iconSrc = [ this.treeJsonDataIconBase, iconSrc ].join("");
-                    if ( this.debug === true ) {
+              return { "value": eventPayload.dataForRendering };
+            }
+          ).addJSTreeEventListener (
+              TreeConstants.TreeEventsNames.EVENT_NAME__TREE_NODE_LABEL__CLICK,
+              ( eventName, eventPayload ) => {
+                let locTree = this.treeInstances[ holderElemId ];
-                      //# example to obtain of the current tree node the data that was used to render the tree.
-                      let treeNodeData = {
-                        "treeClassInstance": locTree,
-                        "eventName": eventName,
-                        "eventPayload": eventPayload,
-                        "flatClone": eventPayload.jsonNode._flatClone,
-                        "deepClone": locTree.getTreeDataByJPath( eventPayload.jsonNode._pathArray )
-                      };
+                  if ( this.debug === true ) {
-                      console.log( { treeNodeData } );
-                    }
+                    //# example to obtain of the current tree node the data that was used to render the tree.
+                    let treeNodeData = {
+                      "treeClassInstance": locTree,
+                      "eventName": eventName,
+                      "eventPayload": eventPayload,
+                      "flatClone": eventPayload.jsonNode._flatClone,
+                      "deepClone": locTree.getTreeDataByJPath( eventPayload.jsonNode._pathArray )
+                    };
-                  this.exampleFunc( ".testing_html", eventPayload.jsonNode._flatClone, eventPayload );
+                    console.log( { treeNodeData } );
+                  }
-                }
-             )
-            .render( data );
+                this.exampleFunc( ".testing_html", eventPayload.jsonNode._flatClone, eventPayload );
-      }
+              }
+           )
+          .render( data );
-      loadDataAndRenderTree( holderElemId, dataUrl ) {
+    }
-          // example to load by url
-          this.treeInstances[ holderElemId ] = new Tree();
-          let tree = this.treeInstances[ holderElemId ];
+    loadDataAndRenderTree( holderElemId, dataUrl ) {
-          tree
-              .setDebug( false )
-              .setMainHtmlNodeId( "example-tree-holder_load_by_url" )
-              .setRenderingMode( TreeConstants.RenderingMode.Ease )
-              .setNodesWithIcons( true )
-              .load( dataUrl );
+        // example to load by url
+        this.treeInstances[ holderElemId ] = new Tree();
+        let tree = this.treeInstances[ holderElemId ];
-      }
+        tree
+            .setDebug( false )
+            .setMainHtmlNodeId( "example-tree-holder_load_by_url" )
+            .setRenderingMode( TreeConstants.RenderingMode.Ease )
+            .setNodesWithIcons( true )
+            .load( dataUrl );
-      renderJsonTreeExamples() {
+    }
-        this.renderTree (
-          "example-tree-holder_SubtreeArrayOfObjects",
-          this.treeJson_SubtreeArrayOfObjects,
-          TreeConstants.NodesOpenedMode.ALL_SHOWN
-        );
+    renderJsonTreeExamples() {
-        this.renderTree (
-          "example-tree-holder_SubtreeLikeObjects",
-          this.treeJson_SubtreeLikeObjects,
-          TreeConstants.NodesOpenedMode.JSON_DATA_DEFINED
-        );
+      this.renderTree (
+        "example-tree-holder_SubtreeArrayOfObjects",
+        this.treeJson_SubtreeArrayOfObjects,
+        TreeConstants.NodesOpenedMode.ALL_SHOWN
+      );
-        this.loadDataAndRenderTree (
-          "example-tree-holder_SubtreeArrayOfObjects",
-          "https://sandbox.brightday.email/cdn/www/data_public/json/tree-data/tree-data-to-use-with-conf.json"
-        );
+      this.renderTree (
+        "example-tree-holder_SubtreeLikeObjects",
+        this.treeJson_SubtreeLikeObjects,
+        TreeConstants.NodesOpenedMode.JSON_DATA_DEFINED
+      );
-      }
+      this.loadDataAndRenderTree (
+        "example-tree-holder_SubtreeArrayOfObjects",
+        glob_TreeJson_Url
+      );
+    }
-      preloadMedia() {
-        this.preloader = new Preloader();
-        this.preloader
-          .setThemesPreloads( this.dataForPreloaderOfMediaAndFontsData )
-          .setWebpackAlias( "" )
-          .setWebpackAliasReplace( "" )
-          .init (
-              this.preloaderStopTimeoutMillis,
-              this.isPreloadWithStopOnLoadTimeout
-          );
+    preloadMedia() {
-      }
+      this.preloader = new Preloader();
+      this.preloader
+        .setThemesPreloads( this.dataForPreloaderOfMediaAndFontsData )
+        .setWebpackAlias( "" )
+        .setWebpackAliasReplace( "" )
+        .init (
+            this.preloaderStopTimeoutMillis,
+            this.isPreloadWithStopOnLoadTimeout
+        );
-      addThemeButtonsEventHandlers() {
-        this.themeTurnOn = new ThemeTurnOn();
-        this.themeTurnOn
-          .setKeptCssClassnames( this.cssClassesNames )
-          .addThemeButtonsEventHandlers( this.buttonsQuerySelectors );
+    }
-      }
+    addThemeButtonsEventHandlers() {
+      this.themeTurnOn = new ThemeTurnOn();
+      this.themeTurnOn
+        .setKeptCssClassnames( this.cssClassesNames )
+        .addThemeButtonsEventHandlers( this.buttonsQuerySelectors );
+    }
-      onDOMContentLoadedEventHandler() {
-          console.log ( "Scripts are loaded, starting TreeExamples.onDOMContentLoadedEventHandler() ..." );
+    onDOMContentLoadedEventHandler() {
-          try {
-            this.preloadMedia();
-          } catch (e) {}
+        console.log ( "Scripts are loaded, starting TreeExamples.onDOMContentLoadedEventHandler() ..." );
-          try {
-            this.renderJsonTreeExamples();
-          } catch (e) {}
+        try {
+          this.preloadMedia();
+        } catch (e) {}
-          try {
-            this.addThemeButtonsEventHandlers();
-            document.body.querySelector( this.buttonsQuerySelectors ).click();
-          } catch (e) {}
+        try {
+          this.renderJsonTreeExamples();
+        } catch (e) {}
-          console.log ( "End: ScriptsChainedLoader.load(), TreeExamples.onDOMContentLoadedEventHandler()" );
-      }
+        try {
+          this.addThemeButtonsEventHandlers();
+          document.body.querySelector( this.buttonsQuerySelectors ).click();
+        } catch (e) {}
-      loadScriptsAndRenderTree() {
-        let toLoadChained_true = true;
+        console.log ( "End: ScriptsChainedLoader.load(), TreeExamples.onDOMContentLoadedEventHandler()" );
+    }
-        this.scriptsLoader = new ScriptsChainedLoader();
-        this.scriptsLoader.onload = this.onDOMContentLoadedEventHandler.bind( this );
-        this.scriptsLoader.load ( this.dataForScriptsLoader, toLoadChained_true );
+    loadScriptsAndRenderTree() {
+      let toLoadChained_true = true;
-      }
+      this.scriptsLoader = new ScriptsChainedLoader();
+      this.scriptsLoader.onload = this.onDOMContentLoadedEventHandler.bind( this );
+      this.scriptsLoader.load ( this.dataForScriptsLoader, toLoadChained_true );
+    }
-      onChainedDOMContentLoadedEventHandler (
-          inCssClassesNames,
-          inButtonsQuerySelectors,
-          inTreeJsonDataIconBase,
-          inPreloaderStopTimeoutMillis,
-          inIsPreloadWithStopOnLoadTimeout,
-          inDataForScriptsLoader,
-          inDataForPreloaderOfMediaAndFontsData,
-          inTreeJson_SubtreeArrayOfObjects,
-          inTreeJson_SubtreeLikeObjects
-      ) {
-          this.cssClassesNames                     = inCssClassesNames;
-          this.buttonsQuerySelectors               = inButtonsQuerySelectors;
-          this.treeJsonDataIconBase                = inTreeJsonDataIconBase;
-          this.preloaderStopTimeoutMillis          = inPreloaderStopTimeoutMillis;
-          this.isPreloadWithStopOnLoadTimeout      = inIsPreloadWithStopOnLoadTimeout;
-          this.dataForScriptsLoader                = inDataForScriptsLoader;
-          this.dataForPreloaderOfMediaAndFontsData = inDataForPreloaderOfMediaAndFontsData;
-          this.treeJson_SubtreeArrayOfObjects      = inTreeJson_SubtreeArrayOfObjects;
-          this.treeJson_SubtreeLikeObjects         = inTreeJson_SubtreeLikeObjects;
-          try {
-              let loaderInstance = typeof ScriptsChainedLoader;
-              if ( loaderInstance ) {
-                this.loadScriptsAndRenderTree();
-                console.log ( "Scripts loader started ..." );
-              }
-          } catch ( e ) {}
-      }
+    onChainedDOMContentLoadedEventHandler (
+        inCssClassesNames,
+        inButtonsQuerySelectors,
+        inTreeJsonDataIconBase,
+        inPreloaderStopTimeoutMillis,
+        inIsPreloadWithStopOnLoadTimeout,
+        inDataForScriptsLoader,
+        inDataForPreloaderOfMediaAndFontsData,
+        inTreeJson_SubtreeArrayOfObjects,
+        inTreeJson_SubtreeLikeObjects
+    ) {
+        this.cssClassesNames                     = inCssClassesNames;
+        this.buttonsQuerySelectors               = inButtonsQuerySelectors;
+        this.treeJsonDataIconBase                = inTreeJsonDataIconBase;
+        this.preloaderStopTimeoutMillis          = inPreloaderStopTimeoutMillis;
+        this.isPreloadWithStopOnLoadTimeout      = inIsPreloadWithStopOnLoadTimeout;
+        this.dataForScriptsLoader                = inDataForScriptsLoader;
+        this.dataForPreloaderOfMediaAndFontsData = inDataForPreloaderOfMediaAndFontsData;
+        this.treeJson_SubtreeArrayOfObjects      = inTreeJson_SubtreeArrayOfObjects;
+        this.treeJson_SubtreeLikeObjects         = inTreeJson_SubtreeLikeObjects;
+        try {
+            let loaderInstance = typeof ScriptsChainedLoader;
+            if ( loaderInstance ) {
+              this.loadScriptsAndRenderTree();
+              console.log ( "Scripts loader started ..." );
+            }
+        } catch ( e ) {}
     }
+  }
-    /* in prod mode,
-        You need to set conf json objects like in tree.prod_mode.html:
-          Preloader to improve performance when LazyLoad is on ( .ico, images, fonts ) to be available before, when a css classname applies.
-          ScriptsChainedLoader to develop and publish for npm or yarn the index.example.html
-            with fallback urls feature, due to multiple npm install strategies,
-            since with fallback urls, the "onload" event is emitted in the unforeseen timestamp, and after the "DOMContentLoaded" event.
+  /* in prod mode,
+      You need to set conf json objects like in tree.prod_mode.html:
+        Preloader to improve performance when LazyLoad is on ( .ico, images, fonts ) to be available before, when a css classname applies.
+        ScriptsChainedLoader to develop and publish for npm or yarn the index.example.html
+          with fallback urls feature, due to multiple npm install strategies,
+          since with fallback urls, the "onload" event is emitted in the unforeseen timestamp, and after the "DOMContentLoaded" event.
-        The onChainedDOMContentLoadedEventHandler method invokes ScripsChainedLoader the right way,
-          and then ScripsChainedLoader.onload() invokes set of methods,
-          planned for DOMContentLoaded like normally when in dev mode or prod mode without fallback urls.
-    */
+      The onChainedDOMContentLoadedEventHandler method invokes ScripsChainedLoader the right way,
+        and then ScripsChainedLoader.onload() invokes set of methods,
+        planned for DOMContentLoaded like normally when in dev mode or prod mode without fallback urls.
+  */
 </script>
 <script
-        type="text/javascript"
-        src="node_modules/@jaisocx/preloader/transpiled/Simple/scripts_chained_loader/ScriptsChainedLoader.js"
-        src-fallback="../preloader/transpiled/Simple/scripts_chained_loader/ScriptsChainedLoader.js"
-        onload="javascipt: ( () => { glob_TreeExamplesClassInstance = new TreeExamples(); glob_TreeExamplesClassInstance.onChainedDOMContentLoadedEventHandler( glob_CssClassesNames, glob_ButtonsQuerySelectors, glob_TreeJsonDataIconBase, glob_PreloaderStopTimeoutMillis, glob_IsPreloadWithStopOnLoadTimeout, glob_DataForScriptsLoader, glob_DataForPreloaderOfMediaAndFontsData, glob_TreeJson_SubtreeArrayOfObjects, glob_TreeJson_SubtreeLikeObjects ); } )();"
-        onerror="javascript: ( () => { let newTagScript = document.createElement( 'script' ); newTagScript.onload = this.onload.bind( newTagScript ); newTagScript.src = this.getAttribute( 'src-fallback' ); document.body.insertAdjacentElement( 'afterend', newTagScript ); this.remove(); } )();">
+  type="text/javascript"
+  src="node_modules/@jaisocx/preloader/transpiled/Simple/scripts_chained_loader/ScriptsChainedLoader.js"
+  src-fallback="../preloader/transpiled/Simple/scripts_chained_loader/ScriptsChainedLoader.js"
+  onload="javascipt: ( () => { glob_TreeExamplesClassInstance = new TreeExamples(); glob_TreeExamplesClassInstance.onChainedDOMContentLoadedEventHandler( glob_CssClassesNames, glob_ButtonsQuerySelectors, glob_TreeJsonDataIconBase, glob_PreloaderStopTimeoutMillis, glob_IsPreloadWithStopOnLoadTimeout, glob_DataForScriptsLoader, glob_DataForPreloaderOfMediaAndFontsData, glob_TreeJson_SubtreeArrayOfObjects, glob_TreeJson_SubtreeLikeObjects ); } )();"
+  onerror="javascript: ( () => { let newTagScript = document.createElement( 'script' ); newTagScript.onload = this.onload.bind( newTagScript ); newTagScript.src = this.getAttribute( 'src-fallback' ); document.body.insertAdjacentElement( 'afterend', newTagScript ); this.remove(); } )();">
 </script>
 </html>