npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

file-tree-browser

v1.1.1

Published

Recovers directories and files recursively with Ajax from a main directory and displays the tree structure. The script called with Ajax is provided in several server languages: PHP, ASP, Node.js, .…

Downloads

3

Readme

File Tree Browser

Demo

https://www.file-tree-generator.miglisoft.com/

Table of contents

Overview

File Tree Browser is a Javascript plugin built to browse folders and select files.

It retrieves directories and files recursively with Ajax from a main directory and displays the tree structure. You can browse and select, move files from folder to folder, do any stuff with the choosen file.

File Tree Browser is programmed in Vanilla Javascript (compiled TypeScript) and doesn't require any dependency.

a PHP connector is provided to retrieve the main directory content, you can write your own in any server language (NodeJS, ASP, ...).

The default template is built with Bootstrap 4, but Bootstrap is not required at all. You can easily add your own HTML/CSS template and change markup to fit your needs.

Installation

Clone / download or install with npm

  npm install @migliori/[email protected]

Quick start

  • Upload the dist folder on your server
  • add the HTML markup on your page:
<!--
    This is a minimal example.
    You can change anything here,
    The File Tree Browser requires only a main wrapper
    with .ft-tree and .ft-explorer inside.
-->
<div id="custom-id">
    <div class="ft-tree"></div>
    <div class="ft-explorer"></div>
</div>
  • add the Javascript code:
<script src="dist/js/file-tree-browser.js"></script>
<script>
    document.addEventListener("DOMContentLoaded", function(event) {

        var options = {
            mainDir: '/path/to/directory',
            elementClick: function (filePath, fileName) {
                // do anything you want
            },
            cancelBtnClick: function (filePath, fileName) {
                // do anything you want
            },
            okBtnClick: function (filePath, fileName) {
                // do anything you want
            }
        };

        var ft = new FileTreeBrowser('file-tree-browser-wrapper', options);
    });
</script>

Options

Name | type | Default Value | Description ---- | ---- | ----- | ------- connector | string | 'php' | connector file extension in dist/connectors/connector.[ext] dragAndDrop | boolean | true | allow or disallow to drag files from folder to folder explorerMode | string | 'list' | 'list' or 'grid' extensions | array | ['.*'] | Array with the authorized file extensions mainDir | string | 'demo-files' | main directory id maxDeph | number | 3 | deph of the folders to browse from the main directory cancelBtn | boolean | true | add a cancel button or not cancelBtnText | string | 'Cancel' | text for the Cancel button okBtn | boolean | true | add an OK button or not okBtnText | string | 'Ok' | text for the Ok button template | string | 'bootstrap4' | name of the HTML/CSS template files in dist/templates/ elementClick | function | function (filePath, fileName) {console.log(filePath); console.log(fileName);} | callback function called when the user clicks any file in the explorer cancelBtnClick | function | function () { console.log('Cancel'); } | callback function called when the user clicks the explorer cancel button okBtnClick | function | function (filePath, fileName) {console.log(filePath); console.log(fileName);} | callback function called when the user clicks the explorer OK button

How to customize the HTML/ CSS

The template files are used to generate the File Explorer html code.

They are located in dist/templates/

To create your own templates

  • Create your HTML file + your css file with the same name for both in dist/templates/

  • Your HTML template MUST:

    • include exactly the same <template> tags with the exact IDs as the default Bootstrap 4 template. ie:

      <template id="explorer-mode">...</template>
    • Each <template> tag MUST include elements having the prefixed CSS classes ft-

  • Load your template using the template option:

    <script>
        document.addEventListener("DOMContentLoaded", function(event) {
    
            var options = {
                // ...
                template: 'your-custom-template'
            };
    
            var ft = new FileTreeBrowser('file-tree-browser-wrapper', options);
        });
    </script>

You can use any HTML structure, any element, as long as the templates are all present with their respective IDs, and all the necessary prefixed classes are present in each of them.

WARNING: if there's a missing <template> tag or a missing prefixed class, Javascript will throw the following console error:

'Augh, there was an error!'

Connnectors

The default connector is written in PHP. You can write your own in any server language (nodeJs, ASP, ...). ie:

  • create your connector file named dist/connectors.connector.asp

  • Load it using the connector option:

    <script>
        document.addEventListener("DOMContentLoaded", function(event) {
    
            var options = {
                // ...
                connector: 'asp'
            };
    
            var ft = new FileTreeBrowser('file-tree-browser-wrapper', options);
        });
    </script>

Contribute

Any new connector or cool template is welcome!

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

Authors

  • Gilles Migliori - Initial work - Migliori

License

This project is licensed under the GNU GENERAL PUBLIC LICENSE - see the LICENSE file for details