(Chrome) Changes the ugly file viewer layout to a much prettier one
当前为
// ==UserScript==
// @name Pretty File Viewer
// @version 1.1.1.3
// @author someRandomGuy
// @match file:///*/*
// @grant GM_setValue
// @grant GM_getValue
// @description (Chrome) Changes the ugly file viewer layout to a much prettier one
// @namespace https://greasyfork.org/users/117222
// ==/UserScript==
// query selector
!function(){function e(e,l){if("object"==typeof e)return e;var t;if("<"==e.substring(0,1)){var n=document.createElement("div");n.innerHTML=e,t=n.children}else t=this==window?document.querySelectorAll(e):this.querySelectorAll(e);if(l){if(1==l||"first"==l||"element"==l)t=t[0];else if("last"==l)t=t[t.length-1];else if("all"==l||2==l||"array"==l)"#"==e.substring(0,1);else if(1==t.length)t=t[0];else if(0==t.length)t=null;else if(!(t.length<1))return t}else if(1==t.length)t=t[0];else if(0==t.length)t=null;else if(!(t.length<1))return t;return t&&t.length&&(t=[].slice.call(t)),t}Element.prototype.$=e,Window.prototype.isWindow=!0,window.$=e}();
if($('meta')&&$("meta")[1]&&$("meta")[1].getAttribute('name')=="google"){ //Checks if it's a file index before executing
(function() {
// get files
var files=(function(){
var a=[].slice.call($('tbody').children),r=[];
a.forEach(function(ob){
var b=[];
b.push(ob.children[0].getAttribute('data-value'));
b.push(function(){
if(b[0].substring(b[0].length-1,b[0].length)=="/"){
b[0]=b[0].substring(0,b[0].length-1);
return 1;
}else if(b[0]==".."){
return 2;
}else{
return 0;
}
}());
b.push(ob.children[1].getAttribute('data-value')-1+1);
b.push(ob.children[2].getAttribute('data-value')-1+1);
r.push(b);
});
return r;
}()),title=$("#header").innerHTML.substring(9,$("#header").innerHTML.length),pf="PFV_display_",display={
sort:GM_getValue(pf+'sort')||0,
icoSize:GM_getValue(pf+"icoSize")||64,
theme:GM_getValue(pf+"theme")||false,
themeCol:GM_getValue(pf+"tCol")||"#FFFFFF"
};
document.body.innerHTML=""; //Clear doc
document.head.innerHTML="";
document.body.appendChild($("<div id=everything> <div id=title>"+(function(){ //Generate layout
var ftitle=title.split("\\"), final="", cnt=0;
window.ftitle=ftitle;
ftitle.forEach(function(ob){
if(ob){
final+="<span class=tree name='"+cnt+"'>"+ob+"\\</span>";
cnt++;
}
});
return final+"<div id=copyURL title='Copy URL'></div><div id=settings title='Settings'></div>";
}())+"</div><div id=files>"+(function(){
var f="";
files.forEach(function(ob){
if(ob[1]==2){
return "";
}
f+="<div class="+(function(){
if(ob[1]){
return "folder";
}else{
return "file";
}
}())+" name='"+ob[0]+"' title='"+("Name: "+ob[0]+"\n"+"Modified: "+new Date(ob[3]*1e3).toDateString()+", "+new Date(ob[3]*1e3).toLocaleTimeString()+(function(){
if(ob[1]){
return "";
}else{
return "\nSize: "+ob[2]+" bytes";
}
}()))+"'> <div class=name>"+ob[0]+"</div> </div>";
});
return f;
}())+"</div><div id=footCredits> <b>Pretty File Viewer</b> by someRandomGuy</div></div>"));
(function(){
$('#footCredits').addEventListener('click',function(){
snackbar("<a href='https://github.com/JaPNaA/Pretty-File-Viewer' target='_blank'> GitHub </a> <a href='https://greasyfork.org/en/scripts/29887-pretty-file-viewer' target='_blank'> GreasyFork </a>",1e4);
},false);
}());
(function(){ //Click file/folder
var a=[].slice.call($('#files').children);
a.forEach(function(ob){
ob.addEventListener("click",function(){
var b=this.getAttribute('name');
b=b.replace(' ',"%20");
location.assign(b);
},false);
});
}());
(function(){ //Applies "last" class to tree
var a=$(".tree"), b=a[a.length-1];
if(b){b.classList="last tree";}
else{a.classList="last tree";}
}());
(function(){ //Makes tree clickable
var a=[].slice.call($('.tree'));
a.forEach(function(ob){
ob.addEventListener('click',function(){
var b=this.getAttribute('name')-1+1,c=ftitle.length-(b+2), d="";
for (var g=0; g<c; g++){
d+="../";
}
location.assign(d);
},false);
});
}());
var settingsOpen=false;
$('#settings').addEventListener('click',function(){//Open settings on click
settingsOpen=true;
var sP=$('<div class=settingsPannel></div>'), sL=$('<div class=settingsOV></div>');
sP.innerHTML="<div id=heading>Settings [WIP]</div><div>Theme colour: <input type=color id=tCol></div><div><input type=checkbox id=tdark>Dark Mode</div>"; //Contents of settings pannel
document.body.appendChild(sP);
document.body.appendChild(sL);
$('#tCol').value=display.themeCol;
$('#tdark').checked=display.theme;
$('#tCol').addEventListener('change',function(){
GM_setValue(pf+"tCol",this.value);
display.themeCol=this.value;
updCol();
},false);
$('#tdark').addEventListener('change',function(){
GM_setValue(pf+"theme",this.checked);
display.theme=this.checked;
updCol();
},false);
$('.settingsOV').addEventListener('click',function(e){
closeSettings(); //On overlay click, close settings
},false);
$('#everything').style.filter="blur(2px)";
setTimeout(function(){
sP.style.top="10%"; //Show settings pannel
},1);
},false);
function updCol(){
var a=display.themeCol.substring(1,7), b={bgCol:"",tCol:"",fBG:"",sBG:""},c;
a=("0x"+a)-1+1;
c=a.toString(16);
c=["0x"+c.substr(0,2)-1+1,("0x"+c.substr(2,2)-1+1)||0,("0x"+c.substr(4,2)-1+1)||0];
console.log(c);
b.bgCol=(function(){
var f="#",a;
c.forEach(function(o){
a=Math.floor(((o/2%128)+136)*1.25).toString(16);
if(a.length==1){
a+="0";
}
if(a.length>2){
a="FF";
}
f+=a;
});
return f;
}());
b.tCol=(function(){
var f="#",a;
c.forEach(function(o){
a=Math.floor(((o/2%128)+136)*1.5).toString(16);
if(a.length==1){
a+="0";
}
if(a.length>2){
a="FF";
}
f+=a;
});
return f;
}());
console.log(b);
document.body.style.backgroundColor=b.bgCol;
$("#title").backgroundColor=b.tCol;
}
updCol();
function closeSettings(){ //Close settings
var sP=$('.settingsPannel'),sL=$('.settingsOV');
sP.style.top="-70%";
$("#everything").style.filter="blur(0px)";
setTimeout(function(){
sL.parentElement.removeChild(sL);
sP.parentElement.removeChild(sP);
},600);
}
$('#copyURL').addEventListener('click',function(){
//Copies URL
var z=new window.Range();
z.selectNode($('#title'));
var e=z.toString(),a=$("<textarea>"+(e.replace(/\\/g,"/"))+"</textarea>"); // Replace [\] with [/]
document.body.appendChild(a);
a.focus();
a.select();
document.execCommand('copy');
document.body.removeChild(a);
snackbar('Copied!');
},true);
function snackbar(e,et){ //It's not a snackbar, but I'll call it that anyway
var a=$("<div class=snackbar>"+e+"</div>");
document.body.appendChild(a);
setTimeout(function(){
a.style="left:8px; opacity:1;";
});
setTimeout(function(){
var b=$(".snackbar")[0]||$(".snackbar");
b.style="";
setTimeout(function(){
var b=$(".snackbar")[0]||$(".snackbar");
document.body.removeChild(b);
},350);
},et||2e3);
}
//CSS and Title
document.head.innerHTML=`
<title>Files</title>
<style id=defalut>
a{
color:white;
text-decoration: none;
background-color:rgba(128,128,128,0.05);
border-radius: 2px;
margin-left: 2px;
margin-right:2px;
transition: 0.15s;
}
a:visited{
color:rgb(200, 200, 200);
}
a:hover{
background-color:rgba(128,128,128,0.1);
}
input[type=color]{
width: 24px;
height: 24px;
background-color: transparent;
border-width: 0;
border-color: transparent;
padding: 0;
cursor:pointer;
}
#heading{
font-size:24px;
}
.settingsOV{
height:100%;
width:100%;
position:fixed;
top:0;
left:0;
z-index:13;
transition:0;
}
.settingsOV:hover #everything{
filter: blur(1px) !important;
}
.settingsOV:hover .settingsPannel{
top:5%;
}
.settingsPannel{
height:65%;
width:60%;
position:fixed;
top:-70%;
left:20%;
background-color:rgba(192, 192, 192, 0.975);
padding:16px;
border-radius:4px;
transition: 0.6s;
z-index:14;
}
#title{
font-size:24px;
position:fixed;
top:0px;
left:0px;
width:100%;
height:24px;
background-color:white;
padding:8px;
margin-bottom:0;
border-bottom: 1px solid;
z-index:9;
overflow:auto;
word-break: break-word;
}
#footCredits{
bottom:0px;
right:0px;
position:fixed;
opacity:.25;
font-size:12px;
cursor:pointer;
user-select:none;
}
body{
padding-top:42px;
padding-bottom:18px;
font-family:calabri;
}
.file{
background-image:url(https://cdn4.iconfinder.com/data/icons/48-bubbles/48/12.File-512.png);
background-
}
.folder{
background-image:url(http://icons.iconarchive.com/icons/custom-icon-design/flatastic-1/512/folder-icon.png);
}
.name{
position:relative;
height:38px;
width:100%;
top:54px;
text-align:center;
background-color:rgba(255,255,255,0.75);
transition:0.45s;
font-family:monospace;
word-wrap: break-word;
}
.folder:hover .name, .file:hover .name{
height:92px;
top:0px;
background-color:rgba(255,255,255,0.9);
}
.file,.folder{
width:84px;
height:92px;
background-color:rgba(111,111,111,0.1);
display:inline-block;
margin:2px;
margin-top:0;
margin-bottom:0;
overflow:hidden;
border-radius:2px;
cursor: pointer;
background-size: contain;
background-repeat: no-repeat;
user-select:none;
}
#copyURL{
background-image:url("https://maxcdn.icons8.com/Share/icon/Editing//copy-21600.png");
background-size:contain;
background-repeat:no-repeat;
width:13px;
height:13px;
display:inline-block;
margin-left:12px;
position:absolute;
top:12px;
right:52px;
z-index:11;
cursor:pointer;
transition:.15s;
border:2px solid transparent;
border-radius:2px;
}
#copyURL:hover{
background-color:#ddd;
border:2px solid #ddd;
}
.tree:hover{
background-color:#efefef;
}
.tree{
transition:0.15s;
cursor:pointer;
border-radius:2px;
}
.tree.last{
border:1px solid #efefef;
background-image:url(https://cdn1.iconfinder.com/data/icons/material-core/16/refresh-128.png);
background-position:center;
background-repeat:no-repeat;
background-size:0px;
}
.tree.last:hover{
background-size:24px;
}
.snackbar{
border-radius:4px;
background-color:#131313;
left:-64px;
position:fixed;
bottom: 8px;
transition:0.35s ease;
opacity:0;
color:white;
font-size:18px;
padding:12px;
padding-left:24px;
padding-right:24px;
font-family:sans-seirf;
}
#settings{
background-image:url(https://cdn1.iconfinder.com/data/icons/material-core/20/settings-128.png);
background-size:contain;
background-repeat:no-repeat;
width:13px;
height:13px;
display:inline-block;
margin-left:12px;
position:absolute;
top:12px;
right:24px;
z-index:11;
cursor:pointer;
transition:.15s;
border:2px solid transparent;
border-radius:2px;
}
#settings:hover{
background-color:#ddd;
border:2px solid #ddd;
}
</style>
<style id=theme>
</style>
<style id=uTheme>
</style>
`;
document.title="Files - "+title;
// debugger; //For debugging.
})();
}