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

@jaisocx/tree 1.5.37 → 2.2.18

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 (186) hide show

package/tree_preview_prod.html ADDED Viewed

@@ -0,0 +1,755 @@
+<!DOCTYPE html>
+<html lang="en" class="jsx">
+<head>
+  <title>Tree Preview</title>
+  <base href="./" />
+  <meta charset="utf-8" />
+  <meta content="width=device-width, initial-scale=1.0" name="viewport" />
+    <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; } )();"
+    />
+<!--    <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; } )();"-->
+<!--    />-->
+  <!--# 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
+    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"
+    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>
+        .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;
+        }
+        @media screen and (orientation: portrait) {
+          .jsx description {
+            display: none;
+          }
+        }
+        .jsx themebuttons {
+          width: fit-content;
+          display: grid;
+          grid-auto-flow: column;
+          column-gap: 3rem;
+          margin: 0.9rem 0px 1.6rem 0px;
+        }
+        .jsx themebuttons button {
+          width: var(--theme-button--width);
+          font-size: var(--theme-button--font-size);
+        }
+        .current::after {
+          content: "";
+          position: absolute;
+          bottom: -0.3rem;
+          left: 0;
+          width: 100%;
+          height: 0;
+          max-height: 0;
+          overflow-y: hidden;
+          border-bottom-width: 0.14rem;
+          border-bottom-style: solid;
+          border-bottom-color: var(--clean-start__text-color);
+        }
+        .jsx button {
+          background-color: transparent;
+          text-align: left;
+        }
+        #tooltip-button {
+          font-family: fantasy;
+        }
+        .jsx main content {
+            width: 100%;
+            min-width: 100%;
+            max-width: 100%;
+        }
+        textblock.testing_html {
+            display: flex;
+            flex-direction: row;
+            justify-content: flex-start;
+            align-items: stretch;
+            width: 100%;
+            min-width: 100%;
+            max-width: 100%;
+            overflow-x: hidden;
+            line-break: break-all;
+            word-break: break-all;
+            height: 7rem;
+            min-height: fit-content;
+            overflow-y: visible;
+            padding: 0.6rem;
+            border: 1px solid #e0e0e0;
+        }
+        textblock.testing_html img.mini_image {
+            display: inline-block;
+            width: 2rem;
+            height: auto;
+            max-height: 2rem;
+            margin-right: 1rem;
+        }
+    </style>
+</head>
+<body>
+<main>
+    <content>
+        <h1>Tree styling JSON Data</h1>
+        <h2>@jaisocx/tree</h2>
+        <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.
+            With the Webpack the number of request events may be reduced loading the @jaisocx/tree bundle.js like all JS Frameworks do.
+            The number of request events for fonts and mini images may be reduced setting on https server response headers related to cache.
+        </description>
+        <themebuttons>
+            <button id="button-turn-on-base-theme" 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>
+        <textblock class="testing_html"></textblock>
+    </content>
+    <h2>json subtree type array</h2>
+    <div id="example-tree-holder_SubtreeArrayOfObjects"></div>
+    <h2>json subtree type object</h2>
+    <div id="example-tree-holder_SubtreeLikeObjects" class="theme-funny"></div>
+    <h2>load by url ( works only when published by an http server )</h2>
+    <div id="example-tree-holder_load_by_url"></div>
+  </main>
+</body>
+<script>
+  let glob_TreeExamplesClassInstance = new Object();
+  let glob_CssClassesNames = [
+    "jsx"
+  ];
+  let glob_ButtonsQuerySelectors = [
+    "themebuttons button"
+  ];
+  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();
+  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"
+      ]
+    },
+    "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>"
+            }
+          }
+        }
+      }
+    }
+  };
+  // -------------------
+  // END TREE CONF DATA
+  class TreeExamples {
+    themeTurnOn   = new Object();
+    scriptsLoader = new Object();
+    preloader     = new Object();
+    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();
+    constructor() {
+        this.themeTurnOn   = new Object();
+        this.scriptsLoader = new Object();
+        this.preloader     = new Object();
+        this.treeInstances = 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" );
+          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 ];
+        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 ];
+                  if ( this.debug === true ) {
+                    //# 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 )
+                    };
+                    console.log( { treeNodeData } );
+                  }
+                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 ];
+        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
+      );
+      this.renderTree (
+        "example-tree-holder_SubtreeLikeObjects",
+        this.treeJson_SubtreeLikeObjects,
+        TreeConstants.NodesOpenedMode.JSON_DATA_DEFINED
+      );
+      this.loadDataAndRenderTree (
+        "example-tree-holder_SubtreeArrayOfObjects",
+        "https://sandbox.brightday.email/cdn/www/data_public/json/tree-data/tree-data-to-use-with-conf.json"
+      );
+    }
+    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 );
+    }
+    onDOMContentLoadedEventHandler() {
+        console.log ( "Scripts are loaded, starting TreeExamples.onDOMContentLoadedEventHandler() ..." );
+        try {
+          this.preloadMedia();
+        } catch (e) {}
+        try {
+          this.renderJsonTreeExamples();
+        } catch (e) {}
+        try {
+          this.addThemeButtonsEventHandlers();
+          document.body.querySelector( this.buttonsQuerySelectors ).click();
+        } catch (e) {}
+        console.log ( "End: ScriptsChainedLoader.load(), TreeExamples.onDOMContentLoadedEventHandler()" );
+    }
+    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 ) {}
+    }
+  }
+  /* 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.
+  */
+</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(); } )();">
+</script>
+</html>