Version 1.9 - Changelog
Small ajax sidebar file tree browser without dependencies.
- Vanilla JS
- Ajax driven
- Zero dependencies
- Small filesize
- Super simple setup
- Grouped files and folders
- Sorted files and folders
- Method support
- Callback support
Put the CSS within <head></head>.
<link rel="stylesheet" href="assets/css/dist/staircase.min.css">Add the staircase selector to your html body like below.
<body data-staircase-selector="stair-case">Put the stair-case element within <body></body>. You also need to add the ajax url.
<stair-case data-staircase-path="example/ajax/ajax.php"></stair-case>Put the javascript before </body>. The script will then be autoloaded.
<script src="assets/js/src/staircase.js"></script>Ajax is used for getting files and folders from a parent. To demonstrate how it works I will use PHP.
Create an ajax.php file and put it in your root.
Example
$post = json_decode(file_get_contents('php://input'), true);
$data = [
'one.txt',
'two/',
'three/',
'file.png'
];
echo json_encode($data);- The first row with
$postis needed to get the$_POSTvariables sent with ajax in PHP. - The
$datacontains a list of files and folder. - The
$datashould probably depend on what is inside your$post. - To mark that it's a folder, just place a
/at the end. - The files and folders will be grouped and sorted alphabetically so you don't need to think about that.
- You need to print out the data as
json.
If you want to see that something really is loading with ajax, you can put the code below inside your PHP file. It will delay the result by 0.25 seconds.
usleep(250000);To use callbacks you need to create a class like below.
class StaircaseCallbacks {
load(params) {
console.log(params);
}
toggle(params) {
console.log(params);
}
select(params) {
console.log(params);
}
open(params) {
console.log(params);
}
}load- Is only triggered when staircase is loadedtoggle- Is triggered every time when a folder is clickedselect- Is triggered every time you select a file or a folderopen- Is triggered whenstaircase.open()method is done
idis the file or folder path, something likemyfolder/myfile.txt.elementis the closest list element which also contains additional data to extract.typeis the type likefileorfolder.stateis the state of the folder,openorclose.successis a check if the ajax has been loaded correctly. It containstrueorfalse.
Be aware. These methods will not add any files or folders to the system. They will only add new visual items. It can be useful to populate the tree with them when using ajax.
staircase.add(id, type);
staircase.delete(id);
staircase.open(id);
staircase.close(id);
staircase.rename(id, name);
staircase.select(id, callback = true);
staircase.deselect(callback = true);
staircase.refresh(id);
staircase.dirname(id);
staircase.basename(id);
staircase.join(parent_id, name);parent_id- The parent id ofmy/parent/currentwould bemy/parentid- The id is the path of the item, something likemy/folder/filename.txttype- The type isfileorfoldername- A new name likemy_new_filename.txt,callback- Optional value. In case you don't want to trigger the callback, set it tofalse.
add- Add a new itemdelete- Delete an itemopen- Opens a folder. It can also open a nested folderclose- Closes a folder if it's openrename- Rename an itemselect- Select an itemdeselect- Deselect an itemrefresh- Refresh a folder and all it's sub contentsjoin- Join two ids together likemy/id+text.mdand resolves slashes at the same time. The result is returned.dirname- From an id, return the parent_id (inspired by PHP).basename- From an id, return the filename (inspired by PHP).
To see all possible params, visit Mozilla - Fetch
You you want to help me improve staircase.js?
I'm specially interested in these things:
- Bug fixes if you find any.
- Enhancements and improvements that makes already existing things a bit better.
- Pull requests or code in an issue. Both are equally fine.
- Remixicon - A special thanks to xiaochunjimmy for not only providing a beautiful icon pack with 24px icons, but also for making custom designed 18px icons for this filetree.
Donate to DevoneraAB if you want.
MIT