<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge, Chrome=1">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1,viewport-fit=cover">
<title></title>
<link href="//s0.pstatp.com/cdn/expire-1-M/mdui/0.4.2/css/mdui.min.css" rel="stylesheet">
<link href="//s0.pstatp.com/cdn/expire-1-M/dplayer/1.25.0/DPlayer.min.css" rel="stylesheet">
<style>
body{background-color:#f2f5fa}.nexmoe-item{margin:15px 0 !important;padding:15px !important;border-radius:5px;background-color:#fff;-webkit-box-shadow:0 .5em 3em rgba(161,177,204,.4);box-shadow:0 .5em 3em rgba(161,177,204,.4);background-color:#fff}.mdui-img-fluid,.mdui-video-fluid{border-radius:5px;border:1px solid #eee}.mdui-list{padding:0}.mdui-list-item{margin:0 !important;border-radius:5px;padding:0 10px 0 5px !important;border-bottom:1px solid #eee;margin-bottom:10px !important}.mdui-list-item:last-child{margin-bottom:0 !important}.mdui-toolbar{width:auto}.mdui-appbar .mdui-toolbar{height:56px;font-size:16px}.mdui-toolbar>*{padding:0 6px;margin:0 2px}.mdui-toolbar>.mdui-typo-headline{padding:0 16px 0 0}.mdui-toolbar>i{padding:0}.mdui-toolbar h3.title{padding:0 16px;line-height:30px;border-radius:30px;border:1px solid #eee;opacity:1;background-color:#1e89f2;color:#ffff}.mdui-toolbar>a:hover,a.mdui-typo-headline,a.active{opacity:1}.mdui-list>.th{background-color:initial}.mdui-list-item>a{width:100%;line-height:48px}.mdui-toolbar>a{padding:0 16px;line-height:30px;border-radius:30px;border:1px solid #eee}.mdui-toolbar>a:last-child{opacity:1;background-color:#1e89f2;color:#ffff}@media screen and (max-width:980px){.mdui-list-item .mdui-text-right{display:none}.mdui-container{width:100% !important;margin:0}.mdui-toolbar>a:last-child,.mdui-toolbar>.mdui-typo-headline,.mdui-toolbar>i:first-child{display:block}}#main-page{cursor:pointer}.nav-a{text-decoration:none;color:#333}.nav-a:hover{text-decoration:underline}.file{width:100%;display:flex;align-items:center}.file a{color:unset;width:100%}#text-input,#close{display:none}#text-input{width:40%}#dplayerContainer{position:relative;background-color:#000;display:none;padding:10px}.close-icon{color:#fff}#viewerContainer{width:100%;height:100%}.viewer-img{width:450px;position:relative;left:30%;z-index:1000}span.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:rgba(0,0,0,.8);z-index:999}#viewerClose{z-index:1000;color:#fff;background:rgba(255,255,255,.12);display:inline-block;position:absolute;bottom:0;cursor:pointer}@media screen and (max-width:768px){.viewer-img{width:60%;position:relative;left:20%;z-index:1000}}
</style>
</head>
<body>
<div class="container mdui-container">
<div class="mdui-container-fluid">
<div class="mdui-toolbar nexmoe-item nav">
<i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-blue" id="main-page" onclick="goto(rootPath)">home</i>
<span id="path">/</span>
<div class="mdui-toolbar-spacer"></div>
<input type="text" id="text-input" class="mdui-textfield-input" oninput="search(this)" placeholder="请输入关键字">
<button type="button" id="close" class="mdui-textfield-close mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">close</i></button>
<button type="button" id="btn" class="mdui-textfield-icon mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">search</i></button>
</div>
</div>
<div class="mdui-container-fluid">
<div class="list-wrapper nexmoe-item">
<div class="list-header">
<div class="file mdui-list-item th">
<span class="name mdui-col-xs-12 mdui-col-sm-7" onclick="view('name')">列表</span>
<span class="time mdui-col-sm-3 mdui-text-right" onclick="view('date')">时间</span>
<span class="size mdui-col-sm-2 mdui-text-right" onclick="view('size')">大小</span>
</div>
</div>
<div id="file-list"></div>
</div>
</div>
</div>
<script src="//s0.pstatp.com/cdn/expire-1-M/??mdui/0.4.0/js/mdui.min.js,dplayer/1.25.0/DPlayer.min.js"></script>
<script>
let title = 'vList - ',
rootPath = "{{.RootPath}}",
currentPath = "{{.CurrentPath}}",
rawData = "{{.RawData}}",
$$ = mdui.JQ;
let reverse = false,
pageData = JSON.parse(window.atob(rawData)),
arrayPath = new Array(),
arrayFloder = new Array(),
arrayFile = new Array();
for (let item in pageData) {
pageData[item]["itemName"] = decodeURIComponent(pageData[item]['name']);
pageData[item]["type"] = getFileType(pageData[item]["itemName"]);
if (pageData[item]['folder']) {
arrayFloder.push(pageData[item])
} else {
arrayFile.push(pageData[item])
}
}
function goto(thePath) {
window.location.href = thePath
}
function sizeNum(Size) {
let dataArray = Size.split(" ", 2),
dataNum = 0;
if (dataArray.length !== 2) {
return dataNum;
}
switch (dataArray[1]) {
case "B":
dataNum = 2 ** 0 * dataArray[0];
break;
case "KB":
dataNum = 2 ** 10 * dataArray[0];
break;
case "MB":
dataNum = 2 ** 20 * dataArray[0];
break;
case "GB":
dataNum = 2 ** 30 * dataArray[0];
break;
case "TB":
dataNum = 2 ** 40 * 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("file-wrapper");
for (let item in classList) {
let obj = document.getElementsByClassName(classList[item]);
for (let i = obj.length - 1; i >= 0; i--) {
obj[i].parentNode.removeChild(obj[i])
}
}
let nav = document.getElementById("path"),
pathSpan = document.createElement("span"),
locPath = ("/" + currentPath.replace(rootPath, "").replace(/^\//, "")).split("/").slice(1),
locRoot = rootPath === "/" ? "" : rootPath;
locArray = new Array('');
nav.innerHTML = '';
let localHref = "";
for (let j = 0; j < locPath.length; j++) {
if (j === 0 && j === "") {
continue;
}
localHref += "/" + locPath[j];
navTemp = `<a class="nav-a" href="//${window.location.host}${locRoot}${localHref}">${locPath[j]}</a>`;
locArray.push(navTemp)
}
pathSpan.innerHTML = locArray.join("/");
nav.appendChild(pathSpan);
navText = (nav.innerHTML.length === 0) ? '/' : pathSpan.innerHTML.replace(/<[^>]+>/g, "");
document.title += navText.substr(1);
arrayPath = locArray
}
function search(obj) {
let searchVal = obj.value;
if (searchVal === undefined) {
return
} else {
searchVal = searchVal.toString().toLowerCase()
}
let showArray = document.getElementsByClassName("file-wrapper");
for (let i = 0; i < showArray.length; i++) {
let content = showArray[i].children[0].querySelector("span.mdui-text-truncate").innerText;
if (content !== undefined && content.length > 0) {
let newAttr = '';
if (content.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 obj = document.getElementById('file-list'),
items = arrayFloder.concat(arrayFile);
for (let item in items) {
let newChild = document.createElement("div");
let itemName = items[item]['itemName'],
href = items[item]['url'],
fileType = items[item]['type'];
let icon = items[item]['folder'] ? 'folder_open' : getFileIcon(fileType);
newChild.setAttribute('class', 'row file-wrapper mdui-list-item mdui-ripple');
newChild.innerHTML = `
<div class="file">
<i class="mdui-icon material-icons">${icon}</i>
<a href="javascript:;">
<span class="name mdui-col-xs-12 mdui-col-sm-7 mdui-text-truncate">${itemName}</span>
<span class="time mdui-col-sm-3 mdui-text-right">${items[item]['date']}</span>
<span class="size mdui-col-sm-2 mdui-text-right">${items[item]['size']}</span>
</a>
</div>`;
obj.appendChild(newChild);
newChild.addEventListener('click',function(e){
if (fileType === "video") {
let dplayerContainer = `
<div id="dplayerContainer" class="mdui-container-fluid">
<div align="right">
<button type="button" id="closevideo" onclick="dpClose()" class="mdui-textfield-close mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons close-icon">close</i></button>
</div>
<div id="dplayer"></div>
</div>`;
$$('#dplayerContainer').remove();
$$(newChild).after(dplayerContainer);
dpOpen(href);
}else if(fileType === "image"){
let imgEle = `
<div id="viewerContainer" onclick="$$(this).remove()">
<span class="overlay"></span>
<img class="viewer-img" src="${href}">
</div>
`;
$$('#viewerContainer').remove();
$$(newChild).after(imgEle);
}else{
window.location.href = href;
}
},false);
$$(newChild).find('a').attr('href', href);
}
}
function getFileType(name) {
if (!name) return false;
let imgType = ['gif', 'jpeg', 'jpg', 'bmp', 'png'],
videoType = ['avi', 'wmv', 'mkv', 'mp4', 'mov', '3gp', 'flv', 'mpg', 'rmvb'],
textType = ['txt', 'pdf', 'css', 'js', 'text', 'doc', 'docx', 'ppt', 'xml'],
musicType = ['wav', 'acc', 'flac', 'ape', 'ogg', 'mp3'];
if (RegExp("\.(" + imgType.join("|") + ")$", "i").test(name.toLowerCase())) {
return 'image'
}else if (RegExp("\.(" + videoType.join("|") + ")$", "i").test(name.toLowerCase())) {
return 'video'
}else if (RegExp("\.(" + textType.join("|") + ")$", "i").test(name.toLowerCase())) {
return 'text'
}else if (RegExp("\.(" + musicType.join("|") + ")$", "i").test(name.toLowerCase())) {
return 'music'
} else {
return false
}
}
function getFileIcon(fileType){
switch(fileType) {
case 'image':
icon = 'image';
break;
case 'video':
icon = 'ondemand_video';
break;
case 'music':
icon = 'music_video';
break;
case 'text':
icon = 'text_fields';
break;
default:
icon = 'insert_drive_file';
break;
}
return icon
}
function dpClose() {
$$('#dplayerContainer').remove();
if (dp) {dp.destroy()}
}
function dpOpen(link) {
$$('#dplayerContainer').show();
dp = new DPlayer({
container: document.getElementById('dplayer'),
autoplay: true,
video: {
url: link,
},
})
}
$$('#btn').on('click', function(event) {
event.preventDefault();
$$('#text-input').show();
$$('#close').show();
$$('#btn').hide();
});
$$('#close').on('click', function(event) {
event.preventDefault();
$$('#text-input').hide();
$$('#close').hide();
$$('#btn').show();
});
window.onload = view("name")
</script>
</body>
</html>