Chamilo document tree

Walks directory tree and renders it on the page

Você precisará instalar uma extensão como Tampermonkey, Greasemonkey ou Violentmonkey para instalar este script.

Você precisará instalar uma extensão como Tampermonkey ou Violentmonkey para instalar este script.

Você precisará instalar uma extensão como Tampermonkey ou Violentmonkey para instalar este script.

Você precisará instalar uma extensão como Tampermonkey ou Userscripts para instalar este script.

Você precisará instalar uma extensão como o Tampermonkey para instalar este script.

Você precisará instalar um gerenciador de scripts de usuário para instalar este script.

(Eu já tenho um gerenciador de scripts de usuário, me deixe instalá-lo!)

Você precisará instalar uma extensão como o Stylus para instalar este estilo.

Você precisará instalar uma extensão como o Stylus para instalar este estilo.

Você precisará instalar uma extensão como o Stylus para instalar este estilo.

Você precisará instalar um gerenciador de estilos de usuário para instalar este estilo.

Você precisará instalar um gerenciador de estilos de usuário para instalar este estilo.

Você precisará instalar um gerenciador de estilos de usuário para instalar este estilo.

(Eu já possuo um gerenciador de estilos de usuário, me deixar fazer a instalação!)

// ==UserScript==
// @name         Chamilo document tree
// @namespace    https://rkok.nl/
// @version      1
// @description  Walks directory tree and renders it on the page
// @author       rkok
// @match        *://*/main/document/document.php*
// @grant        none
// ==/UserScript==

/*jshint esversion: 6 */
(function() {
    const walkTree = (html, target) => {
        const rows = $(html).find('.data_table tr').toArray().slice(1);
        if( ! rows) return;

        const nodes = rows.map(row => {
            const mainLink = $('a', row)[1];
            const isFolder = (row.innerHTML.indexOf('folder_document') !== -1);
            return {
                name: mainLink.title,
                url_nav: isFolder ? mainLink.href : false,
                url_dl: $('img[title="Download"]', row).parent()[0].href
            };
        });

        const ul = $('<ul></ul>');
        target.append(ul);

        nodes.forEach(node => {
            const domnode = $(`<li><a href='${node.url_dl}'>${node.name}</a></li>`);
            ul.append(domnode);

            if(node.url_nav) {
                const loading = $('<span class="loader"></span>');
                domnode.append(loading);
                $.get(node.url_nav, html => {
                    loading.remove();
                    walkTree(html, domnode);
                });
            }
        });
    };

    // Loader animation styling
    $(`<style>@keyframes loader{to{transform:rotate(360deg)}}.loader{content:'';display:inline-block;box-sizing:border-box;width:13px;height:13px;margin-left:10px;border-radius:50%;border:2px solid #ccc;border-top-color:#333;animation:loader .6s linear infinite}</style>`)
        .appendTo($('body'));

    const root = $('<div></div>');
    $('.data_table').parent().append(root);
    walkTree(document, root);
})();