A basic example of using a <tree-finder> element to render and interact with a simple mock filesystem. The tree-finder.js script and some associated stylesheets are dynamically fetched at page load via the jsdelivr cdn.
A Javascript library for the browser, tree-finder exports
a custom element
named <tree-finder>,
which can be used to easily render filebrowers or other hierarchical trees. Only visible cells are rendered.
| <!-- | |
| Copyright (c) 2020, Max Klein. | |
| This file is part of the tree-finder library, distributed under the terms of | |
| the BSD 3 Clause license. The full license can be found in the LICENSE file. | |
| --> | |
| <!-- | |
| A simple file browser example built with [`tree-finder`](https://github.com/telamonian/tree-finder), | |
| loading the main script from a cdn | |
| --> | |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" name="viewport"> | |
| <script src="https://cdn.jsdelivr.net/npm/tree-finder/dist/tree-finder.js"></script> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tree-finder/dist/tree-finder.css"> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tree-finder/dist/theme/material.css"> | |
| <style> | |
| body { | |
| margin-right: 0; | |
| margin-bottom: 0; | |
| } | |
| tree-finder-panel { | |
| height: calc(100vh - 8px); | |
| } | |
| tree-finder-panel .tf-panel-grid { | |
| padding: 0; | |
| margin-left: 12px; | |
| overflow-x: auto; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <tree-finder-panel></tree-finder-panel> | |
| <script> | |
| const N_CHILDREN = 100; | |
| const N_DIRECTORIES = 10; | |
| function mockContent(props) { | |
| const {path, kind, modDays = 0} = props; | |
| const modified = new Date(modDays * 24 * 60 * 60 * 1000); | |
| const writable = !!(modDays % 2); | |
| if (kind === "dir") { | |
| const getChildren = () => { | |
| const children = []; | |
| const start = modDays; | |
| const end = modDays + N_CHILDREN | |
| for (let i = start; i < end; i++) { | |
| const ipad = `${i}`.padStart(3, "0"); | |
| children.push(mockContent({ | |
| kind: i < modDays + N_DIRECTORIES ? "dir" : "text", | |
| path: [...path, i < modDays + N_DIRECTORIES ? `dir_${ipad}` : `file_${ipad}.txt`], | |
| modDays: i + 1, | |
| })); | |
| } | |
| return children; | |
| }; | |
| return {kind, path, modified, writable, getChildren}; | |
| } | |
| else { | |
| return {kind, path, modified, writable}; | |
| } | |
| } | |
| window.addEventListener("DOMContentLoaded", async function () { | |
| const root = mockContent({ | |
| kind: "dir", | |
| path: [], | |
| }); | |
| const treeFinder = document.getElementsByTagName("tree-finder-panel")[0]; | |
| await treeFinder.init({ | |
| root, | |
| gridOptions: { | |
| doWindowResize: true, | |
| showFilter: true, | |
| } | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |