@kylehue/drawer

Drawer

Drawer is a front-end library for creating dynamic file explorers.

Install

NPM:

npm install @kylehue/drawer

CDN:

<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@kylehue/drawer/build/styles/style.css">
<!-- JS -->
<script src="https://cdn.jsdelivr.net/npm/@kylehue/drawer/browser/Drawer.js"></script>

Usage

import { Drawer } from "@kylehue/drawer";

const drawer = new Drawer({
   /* ...options */
});

const root = drawer.initRoot(document.querySelector("#drawer"));

// Adding items
root.add("src/classes/comps/sample.txt");

// Deleting items
root.delete("/src/classes/comps");

// Moving items
root.get("src/classes")?.move("/");

// Listen on item add
drawer.onDidAddItem((desc) => {
   console.log(desc.item.source + " has been added!");
});

// Listen on error
drawer.onError((error) => {
   console.error(error.reason);
});

Styling

Here are some of the styles that can be customized.

Class name	Description
.drawer-folder	Container of folder item
.drawer-folder-head	Folder header container
.drawer-folder-icon	Folder icon
.drawer-folder-icon-chevron	Folder arrow icon
.drawer-file	Container of file item
.drawer-file-icon	File icon
.drawer-indent-guide	Vertical lines beside the folder tree
.drawer-drop-target	Current location of item on drag
.drawer-drag-label	The item that is being dragged
.drawer-item-focused	Selected item