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_dev.html ADDED Viewed

@@ -0,0 +1,729 @@
+<!DOCTYPE html>
+<html lang="en" class="jsx"><head>
+    <title>Dev Mode Tree</title>
+    <base href="https://sandbox.brightday.email/">
+    <meta charset="utf-8" />
+    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
+    <!--# FAVICON -->
+<!--    <link-->
+<!--      id="Icon_Jaisocx"-->
+<!--      rel="icon"-->
+<!--      type="image/x-icon"-->
+<!--      href="sites_tools/css_tools/CssCleanStart_2/favicon/Icon_Jaisocx.ico"-->
+<!--    />-->
+    <link
+            id="Icon_Brightday"
+            rel="icon"
+            type="image/x-icon"
+            href="sites_tools/css_tools/CssCleanStart_2/favicon/Icon_Sandbox_Brightday.ico"
+    />
+    <!--# FONTS PRELOAD WITHOUT JAVASCRIPT CALL -->
+    <link
+            id="font_LibreFranklin_SemiBold"
+            fetchpriority="low"
+            rel="preload"
+            as="font"
+            type="font/ttf"
+            crossorigin
+            href="https://sandbox.brightday.email/cdn/www/fonts/LibreFranklin/static/LibreFranklin-SemiBold.ttf"
+    />
+    <link
+            id="font_LibreFranklin_Regular"
+            fetchpriority="low"
+            rel="preload"
+            as="font"
+            type="font/ttf"
+            crossorigin
+            href="https://sandbox.brightday.email/cdn/www/fonts/LibreFranklin/static/LibreFranklin-Regular.ttf"
+    />
+    <!-- FONT FAMILY FOR TREE THEME FUNNY -->
+    <link
+            id="font_Niconne"
+            fetchpriority="low"
+            rel="preload"
+            as="font"
+            type="font/ttf"
+            crossorigin
+            href="https://sandbox.brightday.email/cdn/www/fonts/Niconne/Niconne-Regular.ttf"
+    />
+    <!-- FONT FAMILY FOR TREE THEME BASE -->
+    <link
+            id="font_BalooPaaji2_SemiBold"
+            fetchpriority="low"
+            rel="preload"
+            as="font"
+            type="font/ttf"
+            crossorigin
+            href="https://sandbox.brightday.email/cdn/www/fonts/Baloo_Paaji_2/static/BalooPaaji2-SemiBold.ttf"
+    />
+    <link
+            id="font_BalooPaaji2_Regular"
+            fetchpriority="low"
+            rel="preload"
+            as="font"
+            type="font/ttf"
+            crossorigin
+            href="https://sandbox.brightday.email/cdn/www/fonts/Baloo_Paaji_2/static/BalooPaaji2-Regular.ttf"
+    />
+    <!--# CSS FOR LibreFranklin FONTS -->
+    <link
+            id="stylesheet_cdn_font_LibreFranklin"
+            rel="stylesheet"
+            type="text/css"
+            href="https://sandbox.brightday.email/cdn/www/fonts_css/font_LibreFranklin_cdn.css"
+    />
+    <!--# CSS FOR Niconne FONTS -->
+    <link
+            id="stylesheet_cdn_font_Niconne"
+            rel="stylesheet"
+            type="text/css"
+            href="https://sandbox.brightday.email/cdn/www/fonts_css/font_Niconne_cdn.css"
+    />
+    <!--# CSS FOR BalooPaaji2 FONTS -->
+    <link
+            id="stylesheet_cdn_font_BalooPaaji2"
+            rel="stylesheet"
+            type="text/css"
+            href="https://sandbox.brightday.email/cdn/www/fonts_css/font_Baloo_Paaji_2_cdn.css"
+    />
+    <!--# 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="sites_tools/css_tools/CssCleanStart_2/MediaAndStyles/CssCleanStart_2_main_relative.css"
+    />
+    <!--# 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="sites_tools/css_tools/CssCleanStart_2/MediaAndStyles/CssCleanStart_2_main_resolved_minimal.css"
+    /> -->
+    <!--# STYLES Tree and theme_base -->
+    <!--    preloading a pair of mini-images try-->
+    <link
+            id="imgHome"
+            fetchpriority="low"
+            rel="preload"
+            as="image"
+            type="image/png"
+            href="https://sandbox.brightday.email/sites_tools/js_tools/Tree/MediaAndStyles/themes/theme_base/mini_images/home_tree_mode_conf/house.png"
+    />
+    <link
+            id="imgGoogle"
+            fetchpriority="low"
+            rel="preload"
+            as="image"
+            type="image/png"
+            href="https://sandbox.brightday.email/sites_tools/js_tools/Tree/MediaAndStyles/themes/theme_base/mini_images/home_tree_mode_conf/google.png"
+    />
+    <link
+            id="imgGithub"
+            fetchpriority="low"
+            rel="preload"
+            as="image"
+            type="image/png"
+            href="https://sandbox.brightday.email/sites_tools/js_tools/Tree/MediaAndStyles/themes/theme_base/mini_images/home_tree_mode_conf/github.png"
+    />
+    <link
+            id="imgCatalog"
+            fetchpriority="low"
+            rel="preload"
+            as="image"
+            type="image/png"
+            href="https://sandbox.brightday.email/sites_tools/js_tools/Tree/MediaAndStyles/themes/theme_base/mini_images/home_tree_mode_conf/catalog.png"
+    />
+    <link
+            id="imgHtml"
+            fetchpriority="low"
+            rel="preload"
+            as="image"
+            type="image/png"
+            href="https://sandbox.brightday.email/sites_tools/js_tools/Tree/MediaAndStyles/themes/theme_base/mini_images/home_tree_mode_conf/html.png"
+    />
+    <!-- DEV MODE -->
+    <link
+            rel="stylesheet"
+            type="text/css"
+            charset="utf-8"
+            href="sites_tools/js_tools/Tree/MediaAndStyles/Tree_main_Relative.css"
+    />
+    <!-- PROD MODE -->
+    <!-- <link
+      rel="stylesheet"
+      type="text/css"
+      charset="utf-8"
+      href="sites_tools/js_tools/Tree/MediaAndStyles/Tree_main_resolved_minimal.css"
+    /> -->
+    <!--# Theme funny -->
+    <!--# importing theme  in this @jaisocx/tree npm package -->
+    <!--  <link-->
+    <!--    rel="stylesheet"-->
+    <!--    type="text/css"-->
+    <!--    charset="utf-8"-->
+    <!--    href="sites_tools/js_tools/Tree/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_dev.html</h3>
+        <description>
+            Css sites tool styling json data to a tree view. Every .css for sites tools and of responsive filesets are to see in the Browser Developers' Tools Network Tab. Js loaded with hardcoded script tags and scripts' urls relative to html &gt; head &gt; base tag url.
+        </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>
+<!-- Themes buttons -->
+<script src="packages/ThemeTurnOn/transpiled/Simple/constants/ThemeTurnOnConstants.js"></script>
+<script src="packages/ThemeTurnOn/transpiled/Simple/theme_turn_on/ThemeTurnOn.js"></script>
+<!-- @jaisocx/tree npm dependencies -->
+<script src="packages/JPath/transpiled/Simple/JPathData.js"></script>
+<script src="packages/JPath/transpiled/Simple/JPath.js"></script>
+<script src="packages/EventEmitter/transpiled/Simple/EventEmitter.js"></script>
+<script src="packages/EventEmitter/transpiled/Simple/ImprovedRenderEventEmitter.js"></script>
+<script src="packages/TokensParser/transpiled/Simple/TokensParser.js"></script>
+<script src="packages/TemplateRenderer/transpiled/Simple/TemplateRenderer.js"></script>
+<!-- @jaisocx/tree -->
+<script src="sites_tools/js_tools/Tree/transpiled/Simple/typescript/ArrayOrObjectPackage.js"></script>
+<script src="sites_tools/js_tools/Tree/transpiled/Simple/typescript/TreeConstants.js"></script>
+<script src="sites_tools/js_tools/Tree/transpiled/Simple/typescript/TreeConf.js"></script>
+<script src="sites_tools/js_tools/Tree/transpiled/Simple/typescript/TreeAdapter.js"></script>
+<script src="sites_tools/js_tools/Tree/transpiled/Simple/typescript/TreeAdapterModeEase.js"></script>
+<script src="sites_tools/js_tools/Tree/transpiled/Simple/typescript/TreeAdapterModeConf.js"></script>
+<script src="sites_tools/js_tools/Tree/transpiled/Simple/typescript/Tree.js"></script>
+<script>
+    let glob_TreeExamplesClassInstance = new Object();
+    let glob_CssClassesNames = [
+      "jsx"
+    ];
+    let glob_ButtonsQuerySelectors = [
+      "themebuttons button"
+    ];
+    let glob_TreeJsonDataIconBase                = "https://sandbox.brightday.email/sites_tools/js_tools/Tree/";
+    let glob_TreeJson_SubtreeArrayOfObjects      = new Array();
+    let glob_TreeJson_SubtreeLikeObjects         = new Object();
+    // 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();
+      treeInstances = new Object();
+      tsHtml        = 1;
+      cssClassesNames                     = new Array();
+      buttonsQuerySelectors               = new Array();
+      treeJsonDataIconBase                = "";
+      treeJson_SubtreeArrayOfObjects      = new Array();
+      treeJson_SubtreeLikeObjects         = new Object();
+      constructor() {
+          this.themeTurnOn   = new Object();
+          this.treeInstances = new Object();
+          this.tsHtml        = 1;
+          this.cssClassesNames                     = new Array();
+          this.buttonsQuerySelectors               = new Array();
+          this.treeJsonDataIconBase                = "";
+          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( true )
+            .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"
+        );
+        return this;
+      }
+      addThemeButtonsEventHandlers() {
+        this.themeTurnOn = new ThemeTurnOn();
+        this.themeTurnOn
+          .setKeptCssClassnames( this.cssClassesNames )
+          .addThemeButtonsEventHandlers( this.buttonsQuerySelectors );
+        return this;
+      }
+      setData (
+          inCssClassesNames,
+          inButtonsQuerySelectors,
+          inTreeJsonDataIconBase,
+          inTreeJson_SubtreeArrayOfObjects,
+          inTreeJson_SubtreeLikeObjects
+      ) {
+          this.cssClassesNames                     = inCssClassesNames;
+          this.buttonsQuerySelectors               = inButtonsQuerySelectors;
+          this.treeJsonDataIconBase                = inTreeJsonDataIconBase;
+          this.treeJson_SubtreeArrayOfObjects      = inTreeJson_SubtreeArrayOfObjects;
+          this.treeJson_SubtreeLikeObjects         = inTreeJson_SubtreeLikeObjects;
+          return this;
+      }
+    }
+    /* 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.
+    */
+      document.addEventListener ( 'DOMContentLoaded', () => {
+        treeExamplesClassInstance = new TreeExamples();
+        treeExamplesClassInstance
+            .setData (
+                glob_CssClassesNames,
+                glob_ButtonsQuerySelectors,
+                glob_TreeJsonDataIconBase,
+                glob_TreeJson_SubtreeArrayOfObjects,
+                glob_TreeJson_SubtreeLikeObjects
+            )
+            .addThemeButtonsEventHandlers()
+            .renderJsonTreeExamples();
+      });
+</script>
+</html>