<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>OneList</title>
<style>
@font-face{
font-family: 'icomoon';
src : url("data:application/x-font-woff;charset=utf-8;base64,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") format('woff');
font-weight: normal;
font-style: normal;
font-display: block;
}
[class^="icon-"], [class*=" icon-"] {
font-family: 'icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-home:before {
content: "\e900";
}
.icon-folder-open:before {
content: "\e930";
}
.icon-file-text2:before {
content: "\e926";
}
.icon-arrow-left2:before {
content: "\ea40";
}
body {
background-color: rgb(247, 247, 249);
}
h1 {
text-align: center;
color: rgb(51, 51, 51);
font-size: 28px;
letter-spacing: 2px;
line-height: 64px;
}
h3 a:hover{
text-decoration: underline;
}
a {
text-decoration: none;
color: black;
}
table {
table-layout: fixed;
word-break: break-all;
}
th {
font-weight: bold;
text-align: right;
}
th:first-child {
text-align: left;
padding: 5px;
padding-left: 25px;
width: 68%;
}
th:nth-child(2),th:nth-child(3),td:nth-child(2),td:nth-child(3){
text-align: right;
width: 20%;
}
th:nth-child(3),td:nth-child(3){
width: 12%;
}
td {
font-weight: normal;
padding-top: 5px;
padding-bottom: 5px;
}
td:first-child{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
td:first-child:hover {
overflow: visible;
text-overflow: clip;
font-weight: bold;
white-space: normal;
}
.list-wrapper {
width: 80%;
margin: 0 auto;
margin-bottom: 40px;
position: relative;
box-shadow: 0 0 32px 0 rgba(0, 0, 0, 0.1);
}
.header-container {
margin: 0;
border: 0 none;
padding: 5px 50px 10px;
text-align: left;
font-weight: normal;
color: #000000;
background-color: #f7f7f9;
}
.list-body-container {
left: 0;
overflow-x: hidden;
overflow-y: auto;
box-sizing: border-box;
background: white;
position: relative;
}
.list-table {
width: 100%;
padding: 15px;
border-spacing: 0;
}
.item:hover {
background-color: gainsboro;
}
#back{
position: absolute;
top: 35px;
right: 35px;
}
#search{
margin: 0;
border: 0 none;
border-radius:15px;
width: 100%;
padding: 5px 10px;
text-align: left;
font-size: inherit;
color: #000000;
background-color: white;
outline: none;
}
</style>
</head>
<body>
<h1>
<span onclick="Goto(RootPath);">OneList</span>
</h1>
<div class="list-wrapper">
<div class="list-container">
<div class="header-container">
<h3>OneList Local Path</h3>
<span id="back" class="icon-arrow-left2" onclick="Goto(Back());"></span>
<div class="search-container">
<input id="search" oninput="Search();" placeholder="Search" />
</div>
</div>
<div class="list-body-container">
<table class="list-table">
<tr class="list-title">
<th onclick="View('name');">文件</th>
<th onclick="View('date');">时间</th>
<th onclick="View('size');">大小</th>
</tr>
</table>
</div>
</div>
</div>
<script>
var RootPath = "{{.RootPath}}";
var CurrentPath = "{{.CurrentPath}}";
var RawData = "{{.RawData}}";
var Reverse = false;
var PageData = JSON.parse(window.atob(RawData));
var ArrayPath = new Array();
var ArrayFloder = new Array();
var ArrayFile = new Array();
if (CurrentPath === "/"){ CurrentPath = "" }
for(let item in PageData){
if (item.indexOf("@") == 0) { continue }
if (PageData[item]['@type'] == 'file') {
ArrayFile.push(PageData[item]);
} else if (PageData[item]['@type'] == 'folder') {
ArrayFloder.push(PageData[item]);
}
}
function Goto(thePath) {window.location.href = thePath;}
function SizeNum(Size) {
let dataArray = Size.split(" ", 2);
let dataNum = 0;
switch (dataArray[1]) {
case "B":
dataNum = Math.pow(2, 0) * dataArray[0];
break;
case "KB":
dataNum = Math.pow(2, 10) * dataArray[0];
break;
case "MB":
dataNum = Math.pow(2, 20) * dataArray[0];
break;
case "GB":
dataNum = Math.pow(2, 30) * dataArray[0];
break;
case "TB":
dataNum = Math.pow(2, 40) * dataArray[0];
break;
case "PB":
dataNum = Math.pow(2, 50) * dataArray[0];
break;
default:
dataNum = 0;
}
return dataNum;
}
function compare(property) {
if (property === "size") {
return function(a,b){
let value0 = SizeNum(a[property].toUpperCase());
let value1 = SizeNum(b[property].toUpperCase());
return value0 - value1;
}
} else {
return function(a,b){
let value0 = a[property].toLowerCase();
let value1 = b[property].toLowerCase();
return value0.localeCompare(value1);
}
}
}
function Clear() {
let ClassList = new Array("item");
for(let item in ClassList){
let Elem = document.getElementsByClassName(ClassList[item]);
for(let i = Elem.length-1; i >= 0 ; i--) {
Elem[i].parentNode.removeChild(Elem[i]);
}
}
let ElemH3 = document.getElementsByTagName("h3")[0];
let newH3 = document.createElement("h3");
let localPath = CurrentPath.trim().replace(/^\//, "").replace(/\/$/, "");
let localHtmlArray = new Array();
localHtmlArray.push("<a href='//" + window.location.host + RootPath + "'>" + '<span class="icon-home"></span>' + "</a>");
if (localPath !== "" ){
let localPathArray = localPath.split("/");
let localHref = "";
for(let j=0; j<localPathArray.length; j++){
localHref += "/" + localPathArray[j];
if (j === 0 && RootPath !== "/"){ continue }
localHtmlArray.push("<a href='//" + window.location.host + localHref + "'>" + localPathArray[j] + "</a>");
}
}
ElemH3.innerHTML = localHtmlArray.join(" / ");
ArrayPath = localHtmlArray;
}
function Back() {
let Num = ArrayPath.length - 1;
let ElemNum = 0;
let ElemBack = document.createElement("div");
if (Num > 0){ElemNum = Num - 1;}
ElemBack.innerHTML = ArrayPath[ElemNum];
return ElemBack.childNodes[0].href
}
function Search() {
let searchVal = document.getElementById("search").value;
if (searchVal === undefined){ return; } else { searchVal = searchVal.toString().toLowerCase(); }
let ShowArray = document.getElementsByClassName("item");
for(i=0; i<ShowArray.length; i++){
let FocusElem = ShowArray[i].children[0].getElementsByTagName("a");
if (FocusElem !== undefined && FocusElem.length === 1){
let newAttr = "table-row";
if (FocusElem[0].textContent.toLowerCase().indexOf(searchVal) < 0) { newAttr = "none"; }
ShowArray[i].style.display = newAttr;
}
}
}
function View(Property) {
ArrayFloder.sort(compare(Property));
ArrayFile.sort(compare(Property));
if (Reverse) {
ArrayFloder.reverse();
ArrayFile.reverse();
}
Reverse = !(Reverse);
Clear();
let Elem = document.getElementsByClassName("list-table")[0];
let ArrayItem = ArrayFloder.concat(ArrayFile);
for(let item in ArrayItem){
let newChild = document.createElement("tr");
let iconHtml = "";
if (ArrayItem[item]['@type'] == 'folder') {
iconHtml = '<span class="icon-folder-open"> </span>';
} else if (ArrayItem[item]['@type'] == 'file') {
iconHtml = '<span class="icon-file-text2"> </span>';
} else { continue }
newChild.setAttribute('class', 'item');
let ItemName = decodeURIComponent(ArrayItem[item]['name']);
newChild.innerHTML = "<td class=\"list-data\">" + iconHtml + "<a href='//" + window.location.host + CurrentPath + "/" + ItemName +"'>" + ItemName + "</a></td><td class=\"list-data\">" + ArrayItem[item]['date'] + "</td><td class=\"list-data\">" + ArrayItem[item]['size'] + "</td>";
Elem.lastChild.appendChild(newChild);
}
}
window.onload = View("name");
</script>
</body>
</html>