Last active
January 25, 2022 20:05
-
-
Save cuteist/1e18a83cebe69ff1e4ce1c12f6956a4c to your computer and use it in GitHub Desktop.
OneList 主题,基于官方模板美化修改,增加在线播放、图片预览功能。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="zh-cn"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name=viewport content="width=device-width,initial-scale=1"> | |
<title>OneList</title> | |
<link href="//s0.pstatp.com/cdn/expire-1-M/dplayer/1.25.0/DPlayer.min.css" rel="stylesheet"> | |
<style type="text/css"> | |
body{background-color:#f7f7f9;color:#000;font-size:14px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;line-height:1em} | |
a{color:#24292e;text-decoration:none;cursor:pointer} | |
a:hover{color:#24292e} | |
div,textarea{border-radius:15px} | |
#dplayer,#dplayerContainer,#imageBox,.dplayer-video-wrap{border-radius:unset} | |
#dplayerContainer{background-color:#000} | |
.title{margin-top:2rem;margin-bottom:2rem;text-align:center;letter-spacing:2px} | |
.title a{color:#333;text-decoration:none;font-size:150%} | |
.list-wrapper{position:relative;margin:0 auto 40px;width:80%;box-shadow:0 0 32px 0 rgba(0,0,0,.1)} | |
.list-container{position:relative;overflow:hidden} | |
.list-header-container{position:relative} | |
.list-header-container a.back-link{position:absolute;display:inline-block;margin:20px 10px;padding:10px 10px;color:#000;vertical-align:middle;text-decoration:none;font-size:16px} | |
.list-container,.list-header-container,.list-wrapper,a.back-link:hover,body{color:#24292e} | |
.list-header-container .table-header{margin:0;padding:15px 20px;border:0 none;background-color:#f7f7f9;color:#000;text-align:left;font-weight:400;line-height:1.3em} | |
.list-body-container{position:relative;left:0;overflow-x:hidden;overflow-y:auto;box-sizing:border-box;background:#fff} | |
.list-table{padding:10px;width:100%;border-spacing:0} | |
.list-table tr{height:40px} | |
.list-table tr.item:hover{background:#f1f1f1} | |
.list-table tr:first-child{background:#fff} | |
.list-table td,.list-table th{overflow:hidden;padding:0 10px;max-width:5em;text-align:left;text-overflow:ellipsis;white-space:nowrap} | |
.list-table .file ion-icon{margin-right:0;vertical-align:bottom;font-size:15px} | |
.list-table .file:hover{overflow:visible;text-overflow:clip;white-space:normal;font-weight:700} | |
.list-table .size{width:13%;border-radius:0 25px 25px 0} | |
.list-table .updated_at{width:20%} | |
.list-table .file{border-radius:25px 0 0 25px} | |
@media only screen and (max-width:480px){body{margin:5px} | |
.title{margin-bottom:24px;font-size:1.5em} | |
.list-wrapper{margin-bottom:24px;width:100%} | |
.list-table{padding:1em 0} | |
.list-table .updated_at{display:none} | |
} | |
.list-table .size,.list-table .updated_at{text-align-last:right} | |
.search-container{padding:0 15px 10px} | |
#search{box-sizing:border-box;padding:5px 5px;width:100%;outline:0;border:0 none;border-radius:15px;background-color:#fff;color:#000;text-align:left;font-size:inherit} | |
#back{position:absolute;top:0;right:0;display:inline-table;padding:15px 20px;vertical-align:middle;font-size:16px;cursor:pointer} | |
button#closevideo{position:relative;margin-right:0;margin-left:0;width:36px;height:36px;border:none;background:0 0;cursor:pointer} | |
span.icon-cross{position:absolute;width:24px;line-height:24px;transform:translate(-12px,-12px)} | |
#imageBox{position:fixed;top:0;left:0;z-index:999;display:table;width:100%;height:100%;background-color:rgba(0,0,0,.7);text-align:center} | |
#imageBoxContainer{position:absolute;top:50%;width:100%;text-align:center;-webkit-transform:translate3D(0,-50%,0);transform:translate3D(0,-50%,0)} | |
#imageBoxImage{display:table-cell;margin:0 auto;width:auto;max-width:80%;vertical-align:middle;text-align:center} | |
@font-face{font-weight:400;font-style:normal;font-family:icomoon;src:url("data:application/x-font-woff;charset=utf-8;base64,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") format('woff');font-display:block} | |
[class*=" icon-"],[class^=icon-]{text-transform:none;font-weight:400;font-style:normal;font-variant:normal;font-family:icomoon!important;line-height:1;speak:none;-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"} | |
.icon-cross:before{color:#fff;content:"\ea0f"} | |
</style> | |
</head> | |
<body> | |
<h1 class="title"> | |
<a onclick="Goto(RootPath);">OneList</a> | |
</h1> | |
<div class="list-wrapper"> | |
<div class="list-container"> | |
<div class="list-header-container"> | |
<h3 class="table-header">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 class="file" onclick="View('name');">文件</th> | |
<th class="updated_at" onclick="View('date');">时间</th> | |
<th class="size" onclick="View('size');">大小</th> | |
</tr> | |
</table> | |
</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> | |
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(); | |
var $$ = mdui.JQ; | |
var Domain = window.location.host; | |
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 } | |
let ItemName = decodeURIComponent(ArrayItem[item]['name']), | |
Protocol = (document.location.protocol == 'https:') ? 'https:' : 'http:'; | |
let href = Protocol + '//' + Domain + CurrentPath + '/' + ItemName; | |
let FileType = getFileType(ItemName); | |
newChild.setAttribute('class', 'item'); | |
newChild.innerHTML = "<td class=\"file\">" + iconHtml + "<a href='//" + window.location.host + CurrentPath + "/" + ItemName +"'>" + ItemName + "</a></td><td class=\"updated_at\">" + ArrayItem[item]['date'] + "</td><td class=\"size\">" + ArrayItem[item]['size'] + "</td>"; | |
Elem.lastChild.appendChild(newChild); | |
newChild.addEventListener('click',function(e){ | |
if (FileType == "video") { | |
let dplayerContainer = ` | |
<tr id="dplayerTr"><td colspan="3"> | |
<div id="dplayerContainer"> | |
<div align="right"> | |
<button type="button" id="closevideo" onclick="dpClose()"><span class="icon-cross"></span></button> | |
</div> | |
<div id="dplayer"></div> | |
</div></td></tr>`; | |
$$('#dplayerTr').remove(); | |
$$(newChild).after(dplayerContainer); | |
dpOpen(href) | |
}else if(FileType == "image"){ | |
let imgEle = ` | |
<div id="imageBox" onclick="$$(this).remove()"> | |
<div id="imageBoxContainer"> | |
<img id="imageBoxImage" src="${href}"> | |
</div> | |
</div> | |
`; | |
$$('#imageBox').remove(); | |
$$(document.getElementsByClassName("list-wrapper")[0]).after(imgEle) | |
}else{ | |
window.location.href = href | |
} | |
},false) | |
} | |
} | |
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 dpClose() { | |
$$('#dplayerTr').remove(); | |
if (dp) {dp.destroy()} | |
} | |
function dpOpen(link) { | |
$$('#dplayerContainer').show(); | |
dp = new DPlayer({ | |
container: document.getElementById('dplayer'), | |
autoplay: true, | |
video: { | |
url: link, | |
}, | |
}) | |
} | |
window.onload = View("name"); | |
</script> | |
</body> | |
</html> |
建议视频和图片预览的时候加个下载按钮
点链接文字就是下载,点空白处是预览
希望增加复制文件直链按钮,尤其是视频文件,网盘存了很多画质超高的影剧,通常复制直链到 VLC 解码观看,如果有一键复制链接的按钮将会非常方便。
希望大佬可以增加read me的功能
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
建议视频和图片预览的时候加个下载按钮