Advertisement
Guest User

Untitled

a guest
Mar 5th, 2015
201
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. $(function(){
  2.  
  3.     var filemanager = $('.filemanager'),
  4.         breadcrumbs = $('.breadcrumbs'),
  5.         fileList = filemanager.find('.data');
  6.  
  7.     // Start by fetching the file data from scan.php with an AJAX request
  8.  
  9.     $.get('scan.php', function(data) {
  10.  
  11.         var response = [data],
  12.             currentPath = '',
  13.             breadcrumbsUrls = [];
  14.  
  15.         var folders = [],
  16.             files = [];
  17.  
  18.         // This event listener monitors changes on the URL. We use it to
  19.         // capture back/forward navigation in the browser.
  20.  
  21.         $(window).on('hashchange', function(){
  22.  
  23.             goto(window.location.hash);
  24.  
  25.             // We are triggering the event. This will execute
  26.             // this function on page load, so that we show the correct folder:
  27.  
  28.         }).trigger('hashchange');
  29.  
  30.  
  31.         // Hiding and showing the search box
  32.  
  33.         filemanager.find('.search').click(function(){
  34.  
  35.             var search = $(this);
  36.  
  37.             search.find('span').hide();
  38.             search.find('input[type=search]').show().focus();
  39.  
  40.         });
  41.  
  42.  
  43.         // Listening for keyboard input on the search field.
  44.         // We are using the "input" event which detects cut and paste
  45.         // in addition to keyboard input.
  46.  
  47.         filemanager.find('input').on('input', function(e){
  48.  
  49.             folders = [];
  50.             files = [];
  51.  
  52.             var value = this.value.trim();
  53.  
  54.             if(value.length) {
  55.  
  56.                 filemanager.addClass('searching');
  57.  
  58.                 // Update the hash on every key stroke
  59.                 window.location.hash = 'search=' + value.trim();
  60.  
  61.             }
  62.  
  63.             else {
  64.  
  65.                 filemanager.removeClass('searching');
  66.                 window.location.hash = encodeURIComponent(currentPath);
  67.  
  68.             }
  69.  
  70.         }).on('keyup', function(e){
  71.  
  72.             // Clicking 'ESC' button triggers focusout and cancels the search
  73.  
  74.             var search = $(this);
  75.  
  76.             if(e.keyCode == 27) {
  77.  
  78.                 search.trigger('focusout');
  79.  
  80.             }
  81.  
  82.         }).focusout(function(e){
  83.  
  84.             // Cancel the search
  85.  
  86.             var search = $(this);
  87.  
  88.             if(!search.val().trim().length) {
  89.  
  90.                 window.location.hash = encodeURIComponent(currentPath);
  91.                 search.hide();
  92.                 search.parent().find('span').show();
  93.  
  94.             }
  95.  
  96.         });
  97.  
  98.  
  99.         // Clicking on folders
  100.  
  101.         fileList.on('click', 'li.folders', function(e){
  102.             e.preventDefault();
  103.  
  104.             var nextDir = $(this).find('a.folders').attr('href');
  105.  
  106.             if(filemanager.hasClass('searching')) {
  107.  
  108.                 // Building the breadcrumbs
  109.  
  110.                 breadcrumbsUrls = generateBreadcrumbs(nextDir);
  111.  
  112.                 filemanager.removeClass('searching');
  113.                 filemanager.find('input[type=search]').val('').hide();
  114.                 filemanager.find('span').show();
  115.             }
  116.             else {
  117.                 breadcrumbsUrls.push(nextDir);
  118.             }
  119.  
  120.             window.location.hash = encodeURIComponent(nextDir);
  121.             currentPath = nextDir;
  122.         });
  123.  
  124.  
  125.         // Clicking on breadcrumbs
  126.  
  127.         breadcrumbs.on('click', 'a', function(e){
  128.             e.preventDefault();
  129.  
  130.             var index = breadcrumbs.find('a').index($(this)),
  131.                 nextDir = breadcrumbsUrls[index];
  132.  
  133.             breadcrumbsUrls.length = Number(index);
  134.  
  135.             window.location.hash = encodeURIComponent(nextDir);
  136.  
  137.         });
  138.  
  139.  
  140.         // Navigates to the given hash (path)
  141.  
  142.         function goto(hash) {
  143.  
  144.             hash = decodeURIComponent(hash).slice(1).split('=');
  145.  
  146.             if (hash.length) {
  147.                 var rendered = '';
  148.  
  149.                 // if hash has search in it
  150.  
  151.                 if (hash[0] === 'search') {
  152.  
  153.                     filemanager.addClass('searching');
  154.                     rendered = searchData(response, hash[1].toLowerCase());
  155.  
  156.                     if (rendered.length) {
  157.                         currentPath = hash[0];
  158.                         render(rendered);
  159.                     }
  160.                     else {
  161.                         render(rendered);
  162.                     }
  163.  
  164.                 }
  165.  
  166.                 // if hash is some path
  167.  
  168.                 else if (hash[0].trim().length) {
  169.  
  170.                     rendered = searchByPath(hash[0]);
  171.  
  172.                     if (rendered.length) {
  173.  
  174.                         currentPath = hash[0];
  175.                         breadcrumbsUrls = generateBreadcrumbs(hash[0]);
  176.                         render(rendered);
  177.  
  178.                     }
  179.                     else {
  180.                         currentPath = hash[0];
  181.                         breadcrumbsUrls = generateBreadcrumbs(hash[0]);
  182.                         render(rendered);
  183.                     }
  184.  
  185.                 }
  186.  
  187.                 // if there is no hash
  188.  
  189.                 else {
  190.                     currentPath = data.path;
  191.                     breadcrumbsUrls.push(data.path);
  192.                     render(searchByPath(data.path));
  193.                 }
  194.             }
  195.         }
  196.  
  197.         // Splits a file path and turns it into clickable breadcrumbs
  198.  
  199.         function generateBreadcrumbs(nextDir){
  200.             var path = nextDir.split('/').slice(0);
  201.             for(var i=1;i<path.length;i++){
  202.                 path[i] = path[i-1]+ '/' +path[i];
  203.             }
  204.             return path;
  205.         }
  206.  
  207.  
  208.         // Locates a file by path
  209.  
  210.         function searchByPath(dir) {
  211.             var path = dir.split('/'),
  212.                 demo = response,
  213.                 flag = 0;
  214.  
  215.             for(var i=0;i<path.length;i++){
  216.                 for(var j=0;j<demo.length;j++){
  217.                     if(demo[j].name === path[i]){
  218.                         flag = 1;
  219.                         demo = demo[j].items;
  220.                         break;
  221.                     }
  222.                 }
  223.             }
  224.  
  225.             demo = flag ? demo : [];
  226.             return demo;
  227.         }
  228.  
  229.  
  230.         // Recursively search through the file tree
  231.  
  232.         function searchData(data, searchTerms) {
  233.  
  234.             data.forEach(function(d){
  235.                 if(d.type === 'folder') {
  236.  
  237.                     searchData(d.items,searchTerms);
  238.  
  239.                     if(d.name.toLowerCase().match(searchTerms)) {
  240.                         folders.push(d);
  241.                     }
  242.                 }
  243.                 else if(d.type === 'file') {
  244.                     if(d.name.toLowerCase().match(searchTerms)) {
  245.                         files.push(d);
  246.                     }
  247.                 }
  248.             });
  249.             return {folders: folders, files: files};
  250.         }
  251.  
  252.  
  253.         // Render the HTML for the file manager
  254.  
  255.         function render(data) {
  256.  
  257.             var scannedFolders = [],
  258.                 scannedFiles = [];
  259.  
  260.             if(Array.isArray(data)) {
  261.  
  262.                 data.forEach(function (d) {
  263.  
  264.                     if (d.type === 'folder') {
  265.                         scannedFolders.push(d);
  266.                     }
  267.                     else if (d.type === 'file') {
  268.                         scannedFiles.push(d);
  269.                     }
  270.  
  271.                 });
  272.  
  273.             }
  274.             else if(typeof data === 'object') {
  275.  
  276.                 scannedFolders = data.folders;
  277.                 scannedFiles = data.files;
  278.  
  279.             }
  280.  
  281.  
  282.             // Empty the old result and make the new one
  283.  
  284.             fileList.empty().hide();
  285.  
  286.             if(!scannedFolders.length && !scannedFiles.length) {
  287.                 filemanager.find('.nothingfound').show();
  288.             }
  289.             else {
  290.                 filemanager.find('.nothingfound').hide();
  291.             }
  292.  
  293.             if(scannedFolders.length) {
  294.  
  295.                 scannedFolders.forEach(function(f) {
  296.  
  297.                     var itemsLength = f.items.length,
  298.                         name = escapeHTML(f.name),
  299.                         icon = '<span class="icon folder"></span>';
  300.  
  301.                     if(itemsLength) {
  302.                         icon = '<span class="icon folder full"></span>';
  303.                     }
  304.  
  305.                     if(itemsLength == 1) {
  306.                         itemsLength += ' Datei';
  307.                     }
  308.                     else if(itemsLength > 1) {
  309.                         itemsLength += ' Datein';
  310.                     }
  311.                     else {
  312.                         itemsLength = 'Leer';
  313.                     }
  314.  
  315.                     var folder = $('<li class="folders"><a href="'+ f.path +'" title="'+ f.path +'" class="folders">'+icon+'<span class="name">' + name + '</span> <span class="details">' + itemsLength + '</span></a></li>');
  316.                     folder.appendTo(fileList);
  317.                 });
  318.  
  319.             }
  320.  
  321.             if(scannedFiles.length) {
  322.  
  323.                 scannedFiles.forEach(function(f) {
  324.  
  325.                     var fileSize = bytesToSize(f.size),
  326.                         name = escapeHTML(f.name),
  327.                         fileType = name.split('.'),
  328.                         icon = '<span class="icon file"></span>';
  329.  
  330.                     fileType = fileType[fileType.length-1];
  331.  
  332.                     icon = '<span class="icon file f-'+fileType+'">.'+fileType+'</span>';
  333.                     var file = $('<li class="files"><a href="'+ f.path+'" title="'+ f.path +'" class="files" data-lightbox="image-1" data-title="'+ name +'">'+ icon +'<span class="name">'+ name +'</span> <span class="details">'+fileSize+'</span></a></li>');
  334.                     file.appendTo(fileList);
  335.                 });
  336.  
  337.             }
  338.  
  339.  
  340.             // Generate the breadcrumbs
  341.  
  342.             var url = '';
  343.  
  344.             if(filemanager.hasClass('searching')){
  345.  
  346.                 url = '<span>Suchergebnisse: </span>';
  347.                 fileList.removeClass('animated');
  348.  
  349.             }
  350.             else {
  351.  
  352.                 fileList.addClass('animated');
  353.  
  354.                 breadcrumbsUrls.forEach(function (u, i) {
  355.  
  356.                     var name = u.split('/');
  357.  
  358.                     if (i !== breadcrumbsUrls.length - 1) {
  359.                         url += '<a href="'+u+'"><span class="folderName">' + name[name.length-1] + '</span></a> <span class="arrow">→</span> ';
  360.                     }
  361.                     else {
  362.                         url += '<span class="folderName">' + name[name.length-1] + '</span>';
  363.                     }
  364.  
  365.                 });
  366.  
  367.             }
  368.  
  369.             breadcrumbs.text('').append(url);
  370.  
  371.  
  372.             // Show the generated elements
  373.  
  374.             fileList.animate({'display':'inline-block'});
  375.  
  376.         }
  377.  
  378.  
  379.         // This function escapes special html characters in names
  380.  
  381.         function escapeHTML(text) {
  382.             return text.replace(/\&/g,'&amp;').replace(/\</g,'&lt;').replace(/\>/g,'&gt;');
  383.         }
  384.  
  385.  
  386.         // Convert file sizes from bytes to human readable units
  387.  
  388.         function bytesToSize(bytes) {
  389.             var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
  390.             if (bytes == 0) return '0 Bytes';
  391.             var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
  392.             return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[i];
  393.         }
  394.  
  395.     });
  396. });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement