[Из песочницы] Красивый листинг файлов и директорий в nginx13.04.2018 17:48

            //
            // Configure BetterListing here:
            var websiteName = 'Загрузки';
            var websiteURL = '*URL сайта*';
            // End of normal settings.
            //

            $(document).ready(function(){

            // Working on nginx HTML and applying settings.
            var text = $("h1").text();
            var array = text.split('/');
            var last = array[array.length-2];
            var dirStructure = $("a").text();
            var dirStructure = document.getElementsByTagName('a')[0].href;
            var dir = text.substring(10);
            var currentDir = last.charAt(0).toUpperCase() + last.slice(1);
            var dirTrun;

            // Truncate long folder names.
            if (currentDir.length > 19){
                var currentDir = currentDir.substring(0, 18) + '...';
            }

            // Updating page title.
            document.title = websiteName;

            // Add back button.
            $("h1").html('
');

            if (dir.length > 90) {
                dirTrun = dir.replace(/(.{90})/g, "$1\n")
            } else {
                dirTrun = dir.substring(0, dir.length - 1);
            }

            // Add subtitle and back arrow.
            $("h1").append('
Загрузить: ' + dirTrun.slice(0) + '
');

            // Add search box.
            $("h1").prepend('
 
');

            // Add parent directory bit.
            $("a").eq(1).html('Parent Directory');

            // Add titles.
            $("pre").prepend('
Name                                                   Time                 Size
');

            // Establish supported formats.
            var list = new Array();
            var formats = ["bin", "jpg", "gif", "png", "html", "css", "zip", "iso", "tiff", "ico", "psd", "pdf", "exe", "rar", "deb", "swf", "7z", "doc", "docx", "xls", "xlsx", "pptx", "ppt", "txt", "php", "js", "c", "c++", "torrent", "sql", "wmv", "avi", "mp4", "mp3", "wma", "ogg", "msg", "wav", "py", "java", "gzip", "jpeg", "raw"];

            // Run when text is entered in the search box.
            $('#custom-search-form').on('input',function(e){
                e.preventDefault();
                var target = $('#searchBox').val();
                filter(target);
            });

            // Instant search.
            function filter(target){
                var parent_directory = 'parent directory';
                $('pre a').each(function(){
                    var arraySearch = $(this).attr('href');
                    var arraySearch = decodeURIComponent( arraySearch )
                    // Check the href data for searched term. Using href because the link label truncates if the file or folder name is too long.
                    // Special handling for 'Parent Directory' as the href data doesn't contain that word.
                    if (arraySearch.toLowerCase().indexOf(target.toLowerCase()) > -1 || (($(this).text() == 'Parent Directory') && (parent_directory.indexOf(target.toLowerCase()) > -1))){
                        $(this).show();
                        $($(this)[0].nextSibling).css('display', 'inline');
                    } else {
                        $(this).hide();
                        if($($(this)[0].nextSibling).hasClass('hideMe')) {
                            $($(this)[0].nextSibling).css('display', 'none');
                        } else {
                            $($(this)[0].nextSibling).wrap('');
                        }
                    }
                });
            }

            // Runs when clear button is hit.
            $("#searchclear").click(function(){
                $("#searchBox").val('');
                filter('');
            });

            // Scan all files in the directory, check the extensions and show the right MIME-type image.
            $('pre a').each(function(){
                var found = 0;
                var arraySplit = $(this).attr('href').split(".");
                var fileExt = arraySplit[arraySplit.length - 1];

                for (var i = 0; i < formats.length; i++) {
                    if (fileExt.toLowerCase() == formats[i].toLowerCase()) {
                        var found = 1;
                        var oldText = $(this).text();
                        $(this).html('' + oldText);
                        return;
                    }
                }

                // Add an icon for the go-back link.
                if ($(this).text().indexOf("Parent Directory") >= 0) {
                    var found = 1;
                    var oldText = $(this).text();
                    $(this).html('' + oldText);
                    return;
                }

                // Check for folders as they don't have extensions.
                if ($(this).attr('href').substr($(this).attr('href').length - 1) == '/') {
                    var found = 1;
                    var oldText = $(this).text();
                    $(this).html('' + oldText.substring(0, oldText.length - 1));

                    // Fix for annoying jQuery behaviour where inserted spaces are treated as new elements -- which breaks my search.
                    var string = ' ' + $($(this)[0].nextSibling).text();

                    // Copy the original meta-data string, append a space char and save it over the old string.
                    $($(this)[0].nextSibling).remove();
                    $(this).after(string);
                    return;
                }

                // File format not supported by Better Listings, so let's load a generic icon.
                if (found == 0){
                    var oldText = $(this).text();
                    $(this).html('' + oldText);
                    return;
                }
            });
        });

@import url('https://fonts.googleapis.com/css?family=Cousine&subset=cyrillic');
a {
    color: #4C4C4C;
}

body{
    color: #4C4C4C;
    font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
        background: #F9F9F9 url(index.png) repeat;
}

pre{
    font-family: 'Cousine', monospace;
    background-color: #FFFFFF;
    border: 1px solid #ccc;
    width:  750px;
    padding:  9.5px 0px 9.5px 0px;
        margin-top: 20px;
        text-align: left;
}

#footer{
    margin-top: 20px;
}
#footer a{
    color: #686868;
}

hr{
    margin-bottom: 0px;
}

h4 {
    color: #aaa;
    margin-top: 10px;
        font-size: 40%;
}

.header {
    color: #686868;
    margin:3px 5px 6px 5px;
}

.icons {
    margin: 2px 5px 3px 5px;
     height: 4%;
     width: 4%;
}

.col-centered{
    float: none;
    margin: 0 auto;
}

#mainBox{
    width:766px;
}

.text-center{
    margin-bottom: 20px;
}

#custom-search-form{
    font-size: 15px;
    margin-top: 7px;
}

#searchIcon{
    padding: 0px 0px 0px 5px;
    color: #686868;
}

.form-group-sm .form-control + .form-control-feedback, .input-group-sm + .form-control-feedback, .input-sm + .form-control-feedback {
    width: 30px;
    height: 30px;
    line-height: 30px;
}

.form-group-sm .form-control {
    height: 30px;
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 4px;
}

input.form-control,input.form-control:focus {
    border-color: #AAA;
    box-shadow: none;
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   -moz-transition: none;
   -webkit-transition: none;
}

#searchclear {
    position: absolute;
    right: 10px;
    top: 11px;
    height: 14px;
    margin: auto;
    font-size: 14px;
    cursor: pointer;
    color: #AAA;
}