Skip to content

Commit b1b5de3

Browse files
committed
Use subtreeProvider in demo webpage
1 parent e36e563 commit b1b5de3

File tree

3 files changed

+52
-5
lines changed

3 files changed

+52
-5
lines changed

docs/icons.mjs

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ export const file = makeSVG('<path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2
44

55
export const folder = makeSVG('<path d="M1 3.5A1.5 1.5 0 0 1 2.5 2h2.76c.96 0 1.76.56 2.31 1.18C8 3.65 8.48 4 9 4h4.5A1.5 1.5 0 0 1 15 5.5v7a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 1 12.5zM2.5 3a.5.5 0 0 0-.5.5V6h12v-.5a.5.5 0 0 0-.5-.5H9c-.96 0-1.71-.63-2.17-1.15C6.37 3.33 5.82 3 5.26 3zM14 7H2v5.5a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 .5-.5z"/>');
66

7+
export const safe = makeSVG('<path d="M1 1.5A1.5 1.5 0 0 1 2.5 0h12A1.5 1.5 0 0 1 16 1.5v13a1.5 1.5 0 0 1-1.5 1.5h-12A1.5 1.5 0 0 1 1 14.5V13H.5a.5.5 0 0 1 0-1H1V8.5H.5a.5.5 0 0 1 0-1H1V4H.5a.5.5 0 0 1 0-1H1zM2.5 1a.5.5 0 0 0-.5.5v13a.5.5 0 0 0 .5.5h12a.5.5 0 0 0 .5-.5v-13a.5.5 0 0 0-.5-.5z"/><path d="M13.5 6a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-1 0v-3a.5.5 0 0 1 .5-.5M4.83 4.46a.5.5 0 0 1 .7 0l1.1 1.1a3 3 0 0 1 3.47 0l1.1-1.1a.5.5 0 1 1 .7.71l-1.1 1.1a3 3 0 0 1 0 3.47l1.1 1.09a.5.5 0 1 1-.7.7l-1.1-1.08a3 3 0 0 1-3.47 0l-1.1 1.09a.5.5 0 1 1-.7-.71l1.09-1.1a3 3 0 0 1 0-3.47l-1.1-1.09a.5.5 0 0 1 0-.7m2.13 2.12A2 2 0 1 0 9.78 9.4 2 2 0 0 0 6.95 6.6"/>');
8+
79
export const cpp = makeSVG('<path d="M4 0a2 2 0 0 0-2 2v9h1V2a1 1 0 0 1 1-1h5.5v2c0 .83.67 1.5 1.5 1.5h2V14a1 1 0 0 1-1 1h-1.7v1H12a2 2 0 0 0 2-2V4.5L9.5 0H4zM1.68 11.86c-.36 0-.66.07-.91.22s-.45.37-.57.63c-.14.27-.2.6-.2.98v.5c0 .38.06.7.2.97.11.27.31.48.57.63.24.14.55.22.91.22.27 0 .54-.05.78-.17a1.27 1.27 0 0 0 .78-1.13v-.07h-.76a.8.8 0 0 1-.12.36.7.7 0 0 1-.27.25.86.86 0 0 1-.4.09.85.85 0 0 1-.48-.13.83.83 0 0 1-.3-.4 1.7 1.7 0 0 1-.1-.62v-.5c-.01-.21.02-.43.1-.63.06-.16.16-.3.3-.4a.8.8 0 0 1 .48-.14.8.8 0 0 1 .4.1c.1.06.2.15.27.26.06.12.1.25.12.38h.76v-.07a1.32 1.32 0 0 0-.46-.97 1.83 1.83 0 0 0-1.1-.37zm1.93 0V16h.8v-1.48h.8c.25 0 .5-.06.73-.18.2-.11.36-.27.46-.47.11-.2.16-.43.16-.68 0-.25-.05-.47-.15-.67a1.2 1.2 0 0 0-.46-.48 1.4 1.4 0 0 0-.74-.18h-1.6zm3.39 0V16h.8v-1.48h.8c.25 0 .5-.06.73-.18.2-.11.35-.27.46-.47.1-.2.16-.43.16-.68 0-.25-.05-.47-.16-.67a1.2 1.2 0 0 0-.46-.48 1.4 1.4 0 0 0-.73-.18H7zm-2.6.63h.66c.22 0 .4.06.51.18.13.12.19.3.19.52a.8.8 0 0 1-.09.38.57.57 0 0 1-.23.24.8.8 0 0 1-.38.08H4.4v-1.4zm3.39 0h.66c.22 0 .39.06.51.18s.18.3.18.52a.8.8 0 0 1-.08.38.57.57 0 0 1-.24.24.8.8 0 0 1-.37.08h-.66v-1.4z"/>');
810

911
export const css = makeSVG('<path fill-rule="evenodd" d="M14 4.5V14a2 2 0 0 1-2 2h-1v-1h1a1 1 0 0 0 1-1V4.5h-2A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v9H2V2a2 2 0 0 1 2-2h5.5zM3.4 14.84a1.13 1.13 0 0 0 .4.82q.2.17.48.26.28.09.66.09.5 0 .86-.16.35-.16.54-.44.19-.28.19-.66 0-.33-.14-.56a1 1 0 0 0-.37-.35 2 2 0 0 0-.57-.21l-.62-.15a1 1 0 0 1-.4-.17.37.37 0 0 1-.15-.3q0-.24.19-.39.18-.15.5-.15.22 0 .38.07a.6.6 0 0 1 .24.18.56.56 0 0 1 .12.26h.75a1.1 1.1 0 0 0-.2-.57 1.2 1.2 0 0 0-.5-.4 1.8 1.8 0 0 0-.78-.16q-.43 0-.77.15t-.53.42q-.19.27-.19.64 0 .3.12.52.13.23.36.37.22.14.53.21l.62.15q.31.07.47.2a.39.39 0 0 1 .15.32.5.5 0 0 1-.09.29.56.56 0 0 1-.25.19q-.17.07-.42.07-.17 0-.32-.04a.8.8 0 0 1-.24-.12.58.58 0 0 1-.26-.38zM.8 13.7q0-.37.1-.63a.87.87 0 0 1 .31-.4.8.8 0 0 1 .47-.14q.23 0 .4.1a.7.7 0 0 1 .28.26.85.85 0 0 1 .12.38h.76v-.07a1.33 1.33 0 0 0-.47-.96 1.4 1.4 0 0 0-.48-.28 1.8 1.8 0 0 0-.61-.1q-.53 0-.91.23-.38.22-.57.63-.2.41-.2.98v.5q0 .57.2.97.19.41.57.63.37.22.9.22.45 0 .8-.17T3 15.4a1.27 1.27 0 0 0 .23-.67v-.08h-.76a.8.8 0 0 1-.12.36.7.7 0 0 1-.27.25.9.9 0 0 1-.4.09.85.85 0 0 1-.48-.13.83.83 0 0 1-.3-.4 1.7 1.7 0 0 1-.1-.62zm5.98 1.6a1.2 1.2 0 0 1-.11-.45h.76a.58.58 0 0 0 .26.38q.1.08.25.12.14.04.32.04.24 0 .41-.07a.56.56 0 0 0 .26-.2.5.5 0 0 0 .08-.28.39.39 0 0 0-.15-.33q-.15-.12-.47-.2l-.61-.13a1.7 1.7 0 0 1-.54-.22 1 1 0 0 1-.35-.37 1.1 1.1 0 0 1-.13-.52q0-.37.2-.64.18-.27.52-.42t.78-.15q.45 0 .78.15.32.15.5.41t.2.57h-.75a.56.56 0 0 0-.12-.26.6.6 0 0 0-.25-.18.9.9 0 0 0-.37-.07q-.32 0-.51.15a.47.47 0 0 0-.19.39q0 .18.15.3a1 1 0 0 0 .4.17l.62.15q.33.07.57.2t.37.36.14.56q0 .37-.19.66a1.2 1.2 0 0 1-.54.44q-.35.16-.86.16-.38 0-.66-.1a1.4 1.4 0 0 1-.48-.24 1.1 1.1 0 0 1-.29-.38"/>');

docs/index.mjs

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,38 @@
1-
import {treeData} from './tree-data.mjs';
1+
import {treeData, vaultData} from './tree-data.mjs';
22
import * as icons from './icons.mjs';
33

44
const processTree = (tree, valuePrefix = '') => {
55
tree.forEach((item) => {
6-
item.value = valuePrefix ? `${valuePrefix} / ${item.title}` : item.title;
6+
const title = item.title.replace(/<[^>]+>/g, '');
7+
item.value = valuePrefix ? `${valuePrefix}/${title}` : title;
78
if (item.children === undefined) {
8-
const [, extension] = item.title.split('.');
9+
const [, extension] = title.split('.');
910
item.icon = (extension in icons) ? icons[extension] : icons.file;
1011
return;
1112
}
12-
item.icon = icons.folder;
13+
item.icon = item.children ? icons.folder : icons.safe;
1314
item.collapsed = true;
14-
processTree(item.children, item.value);
15+
if (item.children !== null) {
16+
processTree(item.children, item.value);
17+
}
1518
});
1619
};
1720

1821
const fileStructure = structuredClone(treeData);
1922
processTree(fileStructure);
23+
const valutStructure = structuredClone(vaultData);
24+
processTree(valutStructure, 'vault [remote]');
2025

2126
customElements.whenDefined('cbx-tree').then(() => {
2227
const tree = document.getElementById('file-tree');
2328
tree.setData(fileStructure);
29+
tree.subtreeProvider = async (value) => {
30+
await new Promise((resolve) => setTimeout(resolve, 1000 + Math.round(Math.random() * 2000)));
31+
const [, valutSubdir] = value.split('/');
32+
return valutSubdir ?
33+
valutStructure.find(({title}) => title === valutSubdir).children :
34+
valutStructure.map((subdir) => ({...subdir, children: null}));
35+
};
2436

2537
const setValidity = (isValid) => tree.setValidity({valueMissing: !isValid}, 'At least one file must be selected');
2638
setValidity(false);

docs/tree-data.mjs

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -335,4 +335,37 @@ export const treeData = [
335335
},
336336
],
337337
},
338+
{
339+
title: 'valut <b>[remote]</b>',
340+
children: null,
341+
},
342+
];
343+
344+
export const vaultData = [
345+
{
346+
title: 'certificates',
347+
children: [
348+
{title: 'developer_certs.zip'},
349+
{title: 'testing_certs.zip'},
350+
{title: 'production_certs.zip'},
351+
{title: 'README.txt'},
352+
],
353+
},
354+
{
355+
title: 'configs',
356+
children: [
357+
{title: 'default_settings.json'},
358+
{title: 'environment_vars.txt'},
359+
{title: 'params_v1.zip'},
360+
{title: 'params_v2.zip'},
361+
],
362+
},
363+
{
364+
title: 'keys',
365+
children: [
366+
{title: 'deploy_keys.zip'},
367+
{title: 'README.txt'},
368+
{title: 'rest_api.txt'},
369+
],
370+
},
338371
];

0 commit comments

Comments
 (0)