From 34c366396ccf156368b5a8f75d8788000c278a8f Mon Sep 17 00:00:00 2001 From: Ray Date: Thu, 9 Jul 2026 20:40:23 +0100 Subject: [PATCH] Fixed USAGE.md --- wiki/USAGE.md | 329 +++++++++++++++++++++++++++++++++++++------------- 1 file changed, 247 insertions(+), 82 deletions(-) diff --git a/wiki/USAGE.md b/wiki/USAGE.md index 63d2d5b..443e44f 100644 --- a/wiki/USAGE.md +++ b/wiki/USAGE.md @@ -1,134 +1,299 @@ -JS: LiteRyzJS/Treeview +# Usage: v0.2.0.248 -```md -# JS: LiteRyzJS/Treeview +This is the usage guide for [LiteRyzJS/Treeview](/literyzjs-treeview), version 0.2.0.248. -> Hi, I'm Ray +## Usage -## Navigation +### LiteRyzJS.Treeview(options) -- Home -- Articles -- Photo Albums -- Releases -- Projects +Creates a treeview. -## Social Links +#### Options -- Flickr -- Git Repository -- Goodreads -- Instagram -- LinkedIn -- Bluesky +```javascript +{ + ID: "#treeview1", + ShowCheckbox: true, + ShowSelection: true, + ShowIcon: true, + EnableGuardian: false, + EnableCascade: true +} +``` ---- +#### Parameters -## Project Overview +| Parameter | Type | Description | +|-----------|------|-------------| +| ID | string | The container element for the treeview | +| ShowCheckbox | bool | Show checkboxes in treeview | +| ShowSelection | bool | Show selection (highlighting) | +| ShowIcon | bool | Show node icon | +| EnableGuardian | bool | If true, the parent node is checked if any of its child nodes are checked. | +| EnableCascade | bool | If true, the parent node is checked if all of its child nodes are checked. | -**Name:** `{{ Content.Name }}` +#### Examples -**Description:** `{{ Content.Description }}` +```javascript +var treeview1 = new LiteRyzJS.Treeview({ + ID: "#treeview1", + ShowCheckbox: true, + ShowSelection: true, + ShowIcon: true, + EnableGuardian: false, + EnableCascade: true +}); +``` -**Current Version:** `{{ Content.CurrentVersion }}` +### AddItem(options) -### Call To Action +Add a node to the treeview -The page dynamically renders up to four CTA buttons such as: +#### Options -- Download -- Documentation -- Git Repository -- Other project links +```javascript +{ + ID: null, + ParentID: null, + Name: "", + Hint: "", + Value: "", + Icon: "folder", + Checked: false, + Tag: null +} +``` ---- +#### Parameters -## Features +| Parameter | Type | Description | +|-----------|------|-------------| +| ID | string | The identifier for this node | +| ParentID | string | The identifier for the parent node | +| Name | string | Label of the node | +| Hint | string | Hint for the node | +| Value | string | Value returned, if checkboxes are enabled and node is checked | +| Icon | string | Icon of the node, default is "folder" | +| Checked | string | Is folder is checked | +| Tag | string | Additional object for this node | -The following section is dynamically populated from `Content.Features`: +#### Examples -- `{{ item }}` -- `{{ item }}` -- `{{ item }}` +```javascript +treeview1.AddItem({ + ID: "F1", + ParentID: null, + Name: "Folder 1", + Hint: "Folder 1", + Value: "F1", + Icon: "folder", + Checked: false, + Tag: null +}); +``` ---- +### Remove(id) -## Releases & Builds +Remove node from treeview by identifier -This section is dynamically generated from `Content.History`. +#### Parameters -For each release: +| Parameter | Type | Description | +|-----------|------|-------------| +| ID | string | The identifier for the node | -### `{{ item.Name }}` (`{{ item.Date }}`) +#### Examples -#### Changelog +```javascript +treeview1.Remove("F1"); +``` -- `{{ item2 }}` -- `{{ item2 }}` +### Clear() -#### Downloads +Clear all treeview nodes -| Download | MD5 | -|---|---| -| `{{ item2.Name }}` | `{{ item2.MD5 }}` | +#### Examples -#### Documentation +```javascript +treeview1.Clear(); +``` -- `{{ item2.Name }}` +### Find(id) ---- +Find a treeview node by its identifier -## License & Warranty +#### Parameters -This section is dynamically populated from `Content.License`. +| Parameter | Type | Description | +|-----------|------|-------------| +| ID | string | The identifier for this node | ---- +#### Result -## Acknowledgements +```javascript +{ + ID: "", + Node: null, + Container: null, + Label: "", + Value: "", + Name: "", + Hint: "", + ParentID: null, + Checked: false, + Highlighted: false, + Tag: null +} +``` -This section is dynamically populated from: +| Property | Type | Description | +|----------|------|-------------| +| ID | string | The identifier for this node | +| Node | Element | The [li] element of the node | +| Container | string | The container [div.li] element of the label component of the node | +| Label | string | The label [span] element of the node | +| Value | string | The checkbox value of the node | +| Name | string | The text label of the node | +| Hint | string | The text hint of the node | +| ParentID | string | The identifier for the parent node | +| Highlighted | bool | True, if highlighted. | +| Checked | bool | True, if checked. | +| Tag | object | User defined object on this node | -- `Content.Acknowledgements` -- `Content.Attribution` +#### Examples -Example attribution list: +```javascript +let result = treeview1.Find("F1"); +``` -- `{{ item.Name }}` +### FindByName(name) ---- +Find a treeview node by its name -## Screenshots +#### Parameters -Screenshots are dynamically rendered from `Content.Screenshots`. +| Parameter | Type | Description | +|-----------|------|-------------| +| Name | string | The name of this node | ---- +#### Result -## Code Repository +Returned an array of node results, see **Find**. -Repository buttons are rendered from `Content.Repositories`. +#### Examples ---- +```javascript +let result = treeview1.FindByName("F1"); +``` -## Footer +### FindByValue(value) -### Sections +Find a treeview node by its value -- Home -- Articles -- Photo Albums -- Releases -- Projects +#### Parameters -### Social +| Parameter | Type | Description | +|-----------|------|-------------| +| Value | string | The value of this node | -- Flickr -- Git Repository -- Goodreads -- Instagram -- LinkedIn -- Bluesky +#### Result ---- +Returned an array of node results, see **Find**. -Copyright © 2014–2026 Ray Lam. All Rights Reserved. -``` \ No newline at end of file +#### Examples + +```javascript +let result = treeview1.FindByValue("F1"); +``` + +### GetAllNodes() + +Get an array of all nodes + +#### Result + +Returned an array of node results, see **Find** for details. + +#### Examples + +```javascript +let result = treeview1.GetAllNodes(); +``` + +### GetCheckedNodes() + +Get an array of all checked nodes + +#### Result + +Returned an array of node results, see **Find** for details. + +#### Examples + +```javascript +let result = treeview1.GetCheckedNodes(); +``` + +### GetCheckedValues() + +Get an array of values from all checked nodes + +#### Result + +Returned an array of values. + +#### Examples + +```javascript +let result = treeview1.GetCheckedValues(); +``` + +### GetSelectedNode() + +Get the selected node + +#### Result + +Returned the selected node result, see **Find** for details. + +#### Examples + +```javascript +let node = treeview1.GetSelectedNode(); +``` + +### ExpandAll() + +Expand all nodes + +#### Examples + +```javascript +treeview1.ExpandAll(); +``` + +### CollapseAll() + +Collapse all nodes + +#### Examples + +```javascript +treeview1.CollapseAll(); +``` + +### CheckAll(value) + +Check or uncheck all nodes + +#### Parameters + +| Parameter | Type | Description | +|-----------|------|-------------| +| Value | bool | Check or uncheck all nodes | + +#### Examples + +```javascript +treeview1.CheckAll(true); +```