├── .npmignore ├── .gitignore ├── ui-treeview.png ├── package.json ├── README.md ├── demo.html └── src └── index.js /.npmignore: -------------------------------------------------------------------------------- 1 | src/ 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .idea/ 2 | node_modules/ 3 | components/*/ 4 | !components/src/ -------------------------------------------------------------------------------- /ui-treeview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Protryon/ui-treeview/HEAD/ui-treeview.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ui-treeview", 3 | "version": "1.0.3", 4 | "description": "javascript object data display as a tree", 5 | "main": "demo.html", 6 | "scripts": { 7 | "build": "browserify src/index.js -o dist/index.js --global-transform [ babelify --plugins [ transform-es2015-modules-commonjs ] ] " 8 | }, 9 | "author": "", 10 | "license": "None", 11 | "dependencies": { 12 | "@polymer/polymer": "3.1.0", 13 | "@webcomponents/webcomponentsjs": "2.2.0" 14 | }, 15 | "devDependencies": { 16 | "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2", 17 | "babelify": "^7.2.0", 18 | "browserify": "^13.0.0" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | web component 2 | --------------------------- 3 | 4 | Web component used to display JSON & JavaScript object data in a collapsible tree view. 5 | 6 |

7 | 8 | ## Usage 9 | 10 | [Demo](http://jsoverson.github.io/ui-treeview) 11 | 12 | ```html 13 | 14 | { 15 | "root": { 16 | "level1-1": "example value", 17 | "level1-2": { 18 | "level2-1": "value", 19 | "level2-2": [], 20 | "level2-3": { 21 | "level3-1": { 22 | "level4-1": 42, 23 | "level4-2": "string", 24 | "level4-3": "string", 25 | "level4-4": "string", 26 | "level4-5": "string", 27 | "level4-6": { 28 | "level5-1": "string", 29 | "level5-2": ["arrayval1", "arrayval2"] 30 | }, 31 | "level4-7": "string" 32 | } 33 | } 34 | } 35 | } 36 | } 37 | 38 | ``` 39 | 40 | ## Attributes 41 | 42 | ### expanded 43 | 44 | Type: boolean 45 | 46 | Use to fully expand the tree by default 47 | 48 | ```html 49 | 50 | ``` 51 | 52 | ## Methods 53 | 54 | ### display(data : Object) 55 | 56 | Use to pass data a JavaScript object to display. 57 | 58 | ```javascript 59 | var element = document.getElementById('myTreeId'); 60 | var object = { foo : "bar", baz : 4 }; 61 | element.display(object); 62 | ``` 63 | 64 | ## License 65 | 66 | None 67 | -------------------------------------------------------------------------------- /demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | <ui-treeview> 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 27 | 28 | 29 |

30 |

31 |

<ui-treeview>

32 |

33 |

34 |

35 |

36 |

<ui-treeview expanded>
37 |   {
38 |     "root": {
39 |       "level1-1": "example value",
40 |       "level1-2": {
41 |         "level2-1": "value",
42 |         "level2-2": [],
43 |         "level2-3": {
44 |           "level3-1": {
45 |             "level4-1": 42,
46 |             "level4-2": "string",
47 |             "level4-3": "string",
48 |             "level4-4": "string",
49 |             "level4-5": "string",
50 |             "level4-6": {
51 |               "level5-1": "string",
52 |               "level5-2": ["arrayval1", "arrayval2"]
53 |             },
54 |             "level4-7": "string"
55 |           }
56 |         }
57 |       }
58 |     }
59 |   }
60 | </ui-treeview>
61 |

62 |

63 |

64 | 65 | { 66 | "root": { 67 | "level1-1": "example value", 68 | "level1-2": { 69 | "level2-1": "value", 70 | "level2-2": [], 71 | "level2-3": { 72 | "level3-1": { 73 | "level4-1": 42, 74 | "level4-2": "string", 75 | "level4-3": "string", 76 | "level4-4": "string", 77 | "level4-5": "string", 78 | "level4-6": { 79 | "level5-1": "string", 80 | "level5-2": ["arrayval1", "arrayval2"] 81 | }, 82 | "level4-7": "string" 83 | } 84 | } 85 | } 86 | } 87 | } 88 | 89 |

90 |

91 | 92 | 93 | 94 | 95 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | 2 | import {PolymerElement, html} from '@polymer/polymer/polymer-element.js'; 3 | import '@polymer/polymer/lib/elements/dom-if.js'; 4 | import '@polymer/polymer/lib/elements/dom-repeat.js'; 5 | import '@polymer/polymer/lib/elements/dom-repeat.js'; 6 | 7 | class UiTreeViewCollapsible extends PolymerElement { 8 | static get properties() { 9 | return { 10 | expanded: { 11 | type: Boolean, 12 | value: false, 13 | }, 14 | inline: { 15 | type: Boolean, 16 | value: false, 17 | }, 18 | }; 19 | } 20 | 21 | toggle() { 22 | this.$.primary.classList.toggle('expanded', this.expanded = !this.expanded); 23 | } 24 | 25 | divClasses() { 26 | return `collapsible${this.expanded ? ' expanded' : ''}${this.inline ? ' inline' : ''}` 27 | } 28 | 29 | static get template() { 30 | return html` 73 |

74 | 75 | 76 | 79 | 80 | 81 | 82 | 83 | 84 | 85 |

86 | 87 |

88 |

`; 89 | } 90 | } 91 | 92 | customElements.define('ui-treeview-collapsible', UiTreeViewCollapsible); 93 | 94 | class UiTreeViewObject extends PolymerElement { 95 | static get properties() { 96 | return { 97 | expanded: { 98 | type: Boolean, 99 | value: false, 100 | }, 101 | data: { 102 | type: Object, 103 | value: {}, 104 | }, 105 | }; 106 | } 107 | 108 | isObject(obj) { 109 | return typeof obj === 'object' && !(obj instanceof Array); 110 | } 111 | 112 | isArray(obj) { 113 | return obj instanceof Array 114 | } 115 | 116 | isSimple(obj) { 117 | return !this.isObject(obj) && !this.isArray(obj); 118 | } 119 | 120 | entries(obj) { 121 | return obj === null ? [] : Object.keys(obj).map(key => ({key, value: obj[key]})); 122 | } 123 | 124 | stringify(obj) { 125 | return JSON.stringify(obj); 126 | } 127 | 128 | static get template() { 129 | return html` 130 | 139 | `; 185 | } 186 | } 187 | 188 | customElements.define('ui-treeview-object', UiTreeViewObject); 189 | 190 | class UiTreeViewArray extends PolymerElement { 191 | static get properties() { 192 | return { 193 | expanded: { 194 | type: Boolean, 195 | value: false, 196 | }, 197 | data: { 198 | type: Object, 199 | value: {}, 200 | }, 201 | }; 202 | } 203 | 204 | isObject(obj) { 205 | return typeof obj === 'object' && !(obj instanceof Array); 206 | } 207 | 208 | isArray(obj) { 209 | return obj instanceof Array 210 | } 211 | 212 | isSimple(obj) { 213 | return !this.isObject(obj) && !this.isArray(obj); 214 | } 215 | 216 | stringify(obj) { 217 | return JSON.stringify(obj); 218 | } 219 | 220 | static get template() { 221 | return html` 222 | 231 | `; 277 | } 278 | } 279 | 280 | customElements.define('ui-treeview-array', UiTreeViewArray); 281 | 282 | class UiTreeViewSimple extends PolymerElement { 283 | static get properties() { 284 | return { 285 | data: { 286 | type: Object, 287 | value: {}, 288 | }, 289 | }; 290 | } 291 | 292 | isString(obj) { 293 | return typeof obj === 'string'; 294 | } 295 | 296 | isNumber(obj) { 297 | return typeof obj === 'number'; 298 | } 299 | 300 | isOther(obj) { 301 | return !this.isNumber(obj) && !this.isString(obj); 302 | } 303 | 304 | static get template() { 305 | return html` 306 | 317 | 318 | 323 | 328 | 333 | `; 334 | } 335 | } 336 | 337 | customElements.define('ui-treeview-simple', UiTreeViewSimple); 338 | 339 | class UiTreeView extends PolymerElement { 340 | static get properties() { 341 | return { 342 | expanded: { 343 | type: Boolean, 344 | value: false, 345 | }, 346 | data: { 347 | type: Object, 348 | value: {}, 349 | }, 350 | }; 351 | } 352 | 353 | isObject(obj) { 354 | return typeof obj === 'object' && !(obj instanceof Array); 355 | } 356 | 357 | isArray(obj) { 358 | return obj instanceof Array 359 | } 360 | 361 | isSimple(obj) { 362 | return !this.isObject(obj) && !this.isArray(obj); 363 | } 364 | 365 | keys(obj) { 366 | return Object.keys(obj); 367 | } 368 | 369 | stringify(obj) { 370 | return JSON.stringify(obj); 371 | } 372 | 373 | created() { 374 | 375 | } 376 | 377 | display(data) { 378 | this.data = data; 379 | } 380 | 381 | ready() { 382 | try { 383 | this.data = JSON.parse(this.innerHTML) 384 | } catch(e) { 385 | this.data = { error : { 386 | msg : "Could not parse JSON", 387 | err : e 388 | }}; 389 | } 390 | super.ready(); 391 | } 392 | 393 | static get template() { 394 | return html` 395 | 405 | 408 | 411 | `; 414 | } 415 | } 416 | 417 | customElements.define('ui-treeview', UiTreeView); --------------------------------------------------------------------------------