@jaisocx/tree 2.2.18 → 2.2.20

package/README.md

@@ -1,42 +1,41 @@
-# HELLO WORLD
 
-# JS PACKAGE jaisocx/tree
+![./software_labels/software_tm_label_jaisocx.svg](./software_labels/software_tm_label_jaisocx.svg)   ![./software_labels/js_clientside_jaisocx_jsc_tree.svg](./software_labels/js_clientside_jaisocx_jsc_tree.svg)
 
-[https://github.com/Jaisocx-Tools/Workspace](https://github.com/Jaisocx-Tools/Workspace)
 
 
-## Watch In Action:
+# @jaisocx/tree
+  > JSON Rendering Client-Side Sites Tool
 
-[https://sandbox.brightday.email/tree.html](https://sandbox.brightday.email/tree.html)
+![./docs/images/jsc_tree_350.png](./docs/images/jsc_tree_350.png)
 
 
-## tarball
 
-[https://sandbox.brightday.email/sites_tools/js_tools/Tree/jaisocx-tree-2.2.16.tgz](https://sandbox.brightday.email/sites_tools/js_tools/Tree/jaisocx-tree-2.2.16.tgz)
+#### status
+  > ✅  yarn add | npm install Ok
 
+  > ✅ `.html` previews Ok
 
 
 
-In Project "Workspace"
-[https://github.com/Jaisocx-Tools/Workspace](https://github.com/Jaisocx-Tools/Workspace)
+#### supports
+  > Client Side
 
-git clone ssh:
-`git@github.com:Jaisocx-Tools/Workspace.git`
-
-git clone https:
-`https://github.com/Jaisocx-Tools/Workspace.git`
+```
+   Browser |   Express |   Console |
+    ✅ yes |      ❌ no |     ❌ no |
+```
 
-at relative path `workspace/ts/www/sites_tools/js_tools/Tree`
+---
 
 
 
-## What is this
+## 💡 The aim of the setup
 
 The js site ui tool to render a multilevel nested objects json.
 
 
 
-## How to use in ts code
+## ts examples
 
 ### 1. Need to import js code first on html page.
 
@@ -44,9 +43,6 @@ The js site ui tool to render a multilevel nested objects json.
 
 Need first webpack bundle.js, and to reference in tag script in html page.
 
-#### 1.2. Like in tree preview example
-
-[https://sandbox.brightday.email/tree.html](https://sandbox.brightday.email/tree.html)
 
 
 ### 2. then instantiate Tree class in html page in DOMContentLoaded event handler like here:
@@ -60,7 +56,7 @@ Need first webpack bundle.js, and to reference in tag script in html page.
 
     <!-- SCRIPT TO RENDER JSON IN TREE VIEW -->
     <script>
-    
+
     let glob_TreeClassInstance = new Object();
 
 
@@ -117,14 +113,14 @@ Need first webpack bundle.js, and to reference in tag script in html page.
 
       document.addEventListener('DOMContentLoaded', () => {
         glob_TreeClassInstance = new Tree();
-        
+
         glob_TreeClassInstance
           .setMainHtmlNodeId ( "example-tree-holder" )
           .render ( treeJsonData );
-          
-          
-          
-        /* 
+
+
+
+        /*
         Another example with several methods to configure the Tree.
         glob_TreeClassInstance
           .setDebug ( true ) // turns on extended infos in browser's developer tools

package/data/tree.json

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