listing files and dirs

This commit is contained in:
Mohammad Naghavi 2016-02-11 15:39:20 +01:00
parent 4b26d3e4c0
commit 14204a7304
6 changed files with 172 additions and 4 deletions

61
css/main.css Normal file
View file

@ -0,0 +1,61 @@
body > .container:first-child {
margin: 3rem auto;
}
a {
text-decoration: none;
}
.file-list {
list-style: none;
}
.file-list li {
margin: 1rem 0;
}
.file-list .file-name {
line-height: 4rem;
display: inline-block;
position: relative;
padding-left: 4rem;
min-width: 70%;
}
.file-list .file-name::before {
background: no-repeat center center;
background-size: contain;
width: 3rem;
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
}
.file-list .directory .file-name::before {
background-image: url(../image/directory.png);
}
.file-list .file .file-name::before {
background-image: url(../image/file.png);
}
.file-list .other .file-name::before {
background-image: url(../image/other.png);
}
.file-list .file-link {
}
.file-list .file-date {
}
.file-list .file-size {
}

BIN
image/directory.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 723 B

BIN
image/file.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 748 B

BIN
image/other.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 838 B

View file

@ -16,11 +16,11 @@
<div class="container"> <div class="container">
<h1>Files</h1> <h1>Files</h1>
<ul id="file-list"> <ul id="file-list" class="file-list">
<li> <li>
<i class="file-type directory|file"></i> <a href="#" class="file-name file-link"></a>
<a class="file-name-link" href="#download|browse">file name</a> <span class="file-date"></span>
<span class="file-date">10.02.2016 10:45</span> <span class="file-size"></span>
</li> </li>
</ul> </ul>
</div> </div>

107
js/main.js Normal file
View file

@ -0,0 +1,107 @@
/**
* Created by mohamnag on 11/02/16.
*/
$(document).ready(function () {
var filesBaseUrl = "http://192.168.1.64:30080/files";
var fileListElement = $("#file-list");
var fileItemElementTemplate = fileListElement.find("li").detach();
function renderFileElement(directory, fileName, fileType, fileSize, fileDate) {
var fileItemElement = fileItemElementTemplate.clone();
fileItemElement.addClass(fileType);
fileItemElement.find(".file-name").text(fileName);
if (fileDate) {
fileItemElement.find(".file-date").text(moment(fileDate).fromNow());
}
if (fileType === "directory") {
if (fileName === "..") {
// navigate to parent dir
fileItemElement.find(".file-link").click(function () {
navigateTo(directory);
});
} else {
// navigate to sub dir
fileItemElement.find(".file-link").click(function () {
navigateTo(directory + fileName + "/");
});
}
} else if (fileType === "other") {
// nginx returns symlinks as type other,
// lets try to follow the links
fileItemElement.find(".file-link").click(function () {
navigateTo(directory + fileName + "/");
});
} else {
// just file dl
fileItemElement.find(".file-link")
.attr("href", directory + fileName)
.attr("target", "_blank");
}
if (fileSize) {
fileItemElement.find(".file-size").text(fileSize);
}
return fileItemElement;
}
function getParentDir(path) {
if (path.length <= 1) {
return null;
}
var lastSlashPos = path.lastIndexOf("/", path.length - 2);
var parentDir = lastSlashPos >= 0 ? path.substr(0, lastSlashPos + 1) : null;
return parentDir;
}
function navigateTo(path) {
console.log("navigateTo", path);
$.ajax({
url: filesBaseUrl + path,
success: function (filesData) {
fileListElement.empty();
var parentDir = getParentDir(path);
if (parentDir) {
fileListElement.append(renderFileElement(
parentDir,
"..",
"directory"
));
}
filesData.forEach(function (fileData) {
fileListElement.append(renderFileElement(
path,
fileData.name,
fileData.type,
fileData.size,
fileData.mtime
));
});
}
});
}
navigateTo("/");
});