adding sort by size and better error handling
This commit is contained in:
Mohammad Naghavi
parent
73ac7fd36d
commit
f0f86a479a
4 changed files with 57 additions and 30 deletions
|
|
@ -10,7 +10,7 @@ a {
|
||||||
.list-sort {
|
.list-sort {
|
||||||
background: #ddd;
|
background: #ddd;
|
||||||
border-radius: 1rem;
|
border-radius: 1rem;
|
||||||
padding: .5rem 2rem;
|
padding: 1.5rem 2rem .5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.list-sort label {
|
.list-sort label {
|
||||||
|
|
|
||||||
BIN
image/other.png
BIN
image/other.png
Binary file not shown.
|
Before Width: | Height: | Size: 838 B After Width: | Height: | Size: 1.5 KiB |
12
index.html
12
index.html
|
|
@ -18,18 +18,22 @@
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h1>Files</h1>
|
<h1>File Browser</h1>
|
||||||
|
|
||||||
<div class="list-sort">
|
<div class="list-sort">
|
||||||
<h5>sort list</h5>
|
<span>sort list by</span>
|
||||||
<label>
|
<label>
|
||||||
by date
|
date
|
||||||
<input type="radio" name="sort" value="date" checked>
|
<input type="radio" name="sort" value="date" checked>
|
||||||
</label>
|
</label>
|
||||||
<label>
|
<label>
|
||||||
by name
|
name
|
||||||
<input type="radio" name="sort" value="name">
|
<input type="radio" name="sort" value="name">
|
||||||
</label>
|
</label>
|
||||||
|
<label>
|
||||||
|
size
|
||||||
|
<input type="radio" name="sort" value="size">
|
||||||
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<ul id="file-list" class="file-list">
|
<ul id="file-list" class="file-list">
|
||||||
|
|
|
||||||
57
js/main.js
57
js/main.js
|
|
@ -83,6 +83,15 @@ $(document).ready(function () {
|
||||||
filesData.sort(function (fileA, fileB) {
|
filesData.sort(function (fileA, fileB) {
|
||||||
return fileA.name.toLowerCase().localeCompare(fileB.name.toLowerCase());
|
return fileA.name.toLowerCase().localeCompare(fileB.name.toLowerCase());
|
||||||
});
|
});
|
||||||
|
|
||||||
|
} else if (sortBy === "size") {
|
||||||
|
console.log("sort by size");
|
||||||
|
|
||||||
|
filesData.sort(function (fileA, fileB) {
|
||||||
|
var sizeA = fileA.rawSize ? fileA.rawSize : Number.MIN_VALUE;
|
||||||
|
var sizeB = fileB.rawSize ? fileB.rawSize : Number.MIN_VALUE;
|
||||||
|
return sizeA - sizeB;
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
fileListElement.empty();
|
fileListElement.empty();
|
||||||
|
|
@ -114,11 +123,19 @@ $(document).ready(function () {
|
||||||
|
|
||||||
$.ajax({
|
$.ajax({
|
||||||
url: filesBaseUrl + path,
|
url: filesBaseUrl + path,
|
||||||
|
|
||||||
|
dataType: "json",
|
||||||
|
|
||||||
success: function (filesData) {
|
success: function (filesData) {
|
||||||
|
|
||||||
|
// fix sizes and dates
|
||||||
filesData.map(function (fileData) {
|
filesData.map(function (fileData) {
|
||||||
fileData.mtime = new Date(fileData.mtime);
|
fileData.mtime = new Date(fileData.mtime);
|
||||||
fileData.size = fileData.size ? fileSize(fileData.size) : null;
|
|
||||||
|
if (fileData.size) {
|
||||||
|
fileData.rawSize = fileData.size;
|
||||||
|
fileData.size = fileSize(fileData.size);
|
||||||
|
}
|
||||||
|
|
||||||
return fileData;
|
return fileData;
|
||||||
});
|
});
|
||||||
|
|
@ -131,28 +148,36 @@ $(document).ready(function () {
|
||||||
renderFileList(filesData, path);
|
renderFileList(filesData, path);
|
||||||
});
|
});
|
||||||
|
|
||||||
if (history.replaceState) {
|
|
||||||
// IE10, Firefox, Chrome, etc.
|
|
||||||
console.log("replaceState", path);
|
console.log("replaceState", path);
|
||||||
history.replaceState(null, path, '#' + path);
|
history.replaceState(null, path, '#' + path);
|
||||||
|
|
||||||
} else {
|
|
||||||
// IE9, IE8, etc
|
|
||||||
console.log("change hash", path);
|
|
||||||
window.location.hash = '#!' + path;
|
|
||||||
}
|
|
||||||
|
|
||||||
isNavigating = false;
|
isNavigating = false;
|
||||||
}
|
},
|
||||||
});
|
|
||||||
|
error: function (jqxhr, textStatus, errorThrown) {
|
||||||
|
console.log(jqxhr, textStatus, errorThrown);
|
||||||
|
|
||||||
|
if(textStatus === "timeout") {
|
||||||
|
alert("Request to server timed out, retry later!");
|
||||||
|
|
||||||
|
} else if(textStatus === "abort") {
|
||||||
|
alert("Connection to server has been aborted, retry later!");
|
||||||
|
|
||||||
|
} else if(textStatus === "parsererror") {
|
||||||
|
alert("Invalid response from server!");
|
||||||
|
|
||||||
|
} else if(jqxhr.status === 404) {
|
||||||
|
alert("Server cant find this file/directory!");
|
||||||
|
|
||||||
|
} else {
|
||||||
|
// also if(textStatus === "error")
|
||||||
|
alert("Something went wrong in communication to server, retry later!");
|
||||||
}
|
}
|
||||||
|
|
||||||
function sizeOf(bytes) {
|
history.back();
|
||||||
if (bytes == 0) {
|
|
||||||
return "0.00 B";
|
|
||||||
}
|
}
|
||||||
var e = Math.floor(Math.log(bytes) / Math.log(1024));
|
});
|
||||||
return (bytes / Math.pow(1024, e)).toFixed(2) + ' ' + ' KMGTP'.charAt(e) + 'B';
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function fileSize(bytes) {
|
function fileSize(bytes) {
|
||||||
|
|
@ -177,13 +202,11 @@ $(document).ready(function () {
|
||||||
navigateTo(startPath);
|
navigateTo(startPath);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (history.replaceState) {
|
|
||||||
window.onpopstate = function () {
|
window.onpopstate = function () {
|
||||||
if (!isNavigating) {
|
if (!isNavigating) {
|
||||||
navigateToUrlLocation();
|
navigateToUrlLocation();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
}
|
|
||||||
|
|
||||||
navigateToUrlLocation();
|
navigateToUrlLocation();
|
||||||
});
|
});
|
||||||
Loading…
Reference in a new issue