Small fixes, syntax and formatting
This commit is contained in:
parent
735273f3f0
commit
107d35bea0
@ -15,11 +15,11 @@
|
||||
::-webkit-scrollbar-thumb {
|
||||
-webkit-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
background: rgba(0,0,0,0.7);
|
||||
background: rgba(255,255,255,0.7);
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
|
||||
}
|
||||
::-webkit-scrollbar-thumb:window-inactive {
|
||||
background: rgba(0,0,0,0.4);
|
||||
background: rgba(255,255,255,0.4);
|
||||
}
|
||||
|
||||
::selection {
|
||||
@ -40,10 +40,6 @@ html {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
pre {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
body {
|
||||
display: grid;
|
||||
height: 100%;
|
||||
@ -65,6 +61,11 @@ a {
|
||||
color: #2EA8FF;
|
||||
}
|
||||
|
||||
#header1 h1 {
|
||||
margin: auto;
|
||||
font-size: 5vh;
|
||||
}
|
||||
|
||||
.transition {
|
||||
-webkit-transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
|
||||
transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
|
||||
@ -88,8 +89,8 @@ a {
|
||||
|
||||
#header2 {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
background-color: #151313;
|
||||
grid-template-columns: repeat(8, 1fr);
|
||||
background-color: #27262b;
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
}
|
||||
@ -121,7 +122,7 @@ a {
|
||||
|
||||
#sidebar {
|
||||
position: relative;
|
||||
background-color: #151313;
|
||||
background-color: #27262b;
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
}
|
||||
@ -184,7 +185,7 @@ a {
|
||||
|
||||
#mainContainer {
|
||||
overflow: hidden;
|
||||
background-color: #070606;
|
||||
background-color: #3e505a;
|
||||
font-family: 'Saira Condensed', sans-serif;
|
||||
grid-column: 2;
|
||||
grid-row: 2;
|
||||
@ -239,11 +240,11 @@ canvas {
|
||||
|
||||
#directoryHeader {
|
||||
display: grid;
|
||||
grid-template-columns: 6fr 2fr 1fr;
|
||||
grid-template-columns: 60% 25% 10% 5%;
|
||||
grid-template-rows: 100%;
|
||||
color: black;
|
||||
background-color: white;
|
||||
box-shadow: #6f6f6f 0 0 20px 0px;
|
||||
color: white;
|
||||
background-color: #1c1c1c;
|
||||
box-shadow: #242424 0 0 20px 0px;
|
||||
}
|
||||
|
||||
#directoryHeader p {
|
||||
@ -271,9 +272,9 @@ canvas {
|
||||
.item {
|
||||
display: grid;
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid white;
|
||||
border-bottom: 1px solid #222;
|
||||
background-color: rgba(255,255,255,0.03);
|
||||
grid-template-columns: 6fr 2fr 1fr;
|
||||
grid-template-columns: 4% 56% 25% 10% 5%;
|
||||
grid-template-rows: 100%;
|
||||
}
|
||||
|
||||
@ -281,12 +282,71 @@ canvas {
|
||||
background-color: rgba(255,255,255,0.1);
|
||||
}
|
||||
|
||||
.item .name {
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
.item .modified {
|
||||
grid-column: 3;
|
||||
}
|
||||
|
||||
.item .size: {
|
||||
grid-column: 4;
|
||||
}
|
||||
|
||||
.item p {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.item div {
|
||||
grid-column: 5;
|
||||
margin: auto;
|
||||
font-size: 140%;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.item div:hover {
|
||||
color: #F47922;
|
||||
}
|
||||
|
||||
.fileIcon {
|
||||
border-radius: 50px;
|
||||
grid-column: 1 !important;
|
||||
grid-row: 1;
|
||||
background-color: rgba(0,0,0,0.4);
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.fileIcon .fa {
|
||||
padding: 1.3vh;
|
||||
}
|
||||
|
||||
.fileIcon .fa:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#directoryLocWrapper {
|
||||
display: grid;
|
||||
grid-template-columns: auto 6vh;
|
||||
grid-template-rows: 100%;
|
||||
}
|
||||
|
||||
#directoryLocWrapper div:nth-child(2) {
|
||||
cursor: pointer;
|
||||
grid-column: 2;
|
||||
margin: auto;
|
||||
font-size: 140%;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#directoryLocWrapper div:nth-child(2):hover {
|
||||
color: #F47922;
|
||||
}
|
||||
|
||||
#directoryLocation {
|
||||
opacity: 0;
|
||||
grid-column: 1;
|
||||
grid-row 1;
|
||||
}
|
||||
|
||||
#directoryLocation p {
|
||||
@ -484,3 +544,22 @@ input[type=range]:focus::-ms-fill-lower {
|
||||
input[type=range]:focus::-ms-fill-upper {
|
||||
background: #5a7fae;
|
||||
}
|
||||
|
||||
.overlay .fa-times {
|
||||
font-size: 4vh;
|
||||
position: absolute;
|
||||
right: 4vh;
|
||||
top: 4vh;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.overlay .fa-times:hover {
|
||||
color: rgba(255,255,255,0.8);
|
||||
}
|
||||
|
||||
#copy {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
}
|
||||
74
desktop/desktop.html
Normal file
74
desktop/desktop.html
Normal file
@ -0,0 +1,74 @@
|
||||
<body>
|
||||
<div id="header1" class="transition">
|
||||
<h1>BinBin</h1>
|
||||
</div>
|
||||
<div id="header2">
|
||||
<div id="spectrum">
|
||||
<p class="transition">Spectrum <i class="fa fa-times-circle" aria-hidden="true"></i></p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="sidebar">
|
||||
<span>Developed by <p onclick="window.open('https://github.com/ksjdragon/binbin.git','_blank')">ksjdragon</p></span>
|
||||
</div>
|
||||
<div id="mainContainer">
|
||||
<div id="songList">
|
||||
<div id="directory">
|
||||
<div id="directoryLocation" class="transition">
|
||||
<p>a</p>
|
||||
</div>
|
||||
<div id="directoryHeader">
|
||||
<p class="name transition">Name
|
||||
<i class="fa fa-chevron-down transition"></i>
|
||||
<i class="fa fa-chevron-up transition"></i>
|
||||
</p>
|
||||
<p class="date transition">Date Modified
|
||||
<i class="fa fa-chevron-down transition"></i>
|
||||
<i class="fa fa-chevron-up transition"></i>
|
||||
</p>
|
||||
<p class="size transition">Size
|
||||
<i class="fa fa-chevron-down transition"></i>
|
||||
<i class="fa fa-chevron-up transition"></i>
|
||||
</p>
|
||||
</div>
|
||||
<div id="directoryCont">
|
||||
|
||||
</div>
|
||||
<canvas id="visualize" width="1200" height="250"></canvas>
|
||||
</div>
|
||||
<div id="playback">
|
||||
<div id="info">
|
||||
<div>
|
||||
<h2></h2>
|
||||
</div>
|
||||
<div>
|
||||
<a download><i class="fa fa-download transition"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div id="tracker">
|
||||
<div>
|
||||
<i id="prev" class="fa fa-step-backward" aria-hidden="true"></i>
|
||||
<i id="pause" class="fa fa-pause-circle transition"></i>
|
||||
<i id="next" class="fa fa-step-forward" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div id="bar">
|
||||
<p>-:--</p>
|
||||
<input type="range" min="0", max="100000" value="0">
|
||||
<p>-:--</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="speed">
|
||||
<i class="fa fa-fast-forward transition"></i>
|
||||
<input type="range" min="0", max="100" value="25">
|
||||
</div>
|
||||
<div id="volume">
|
||||
<i class="fa fa-volume-up transition"></i>
|
||||
<input type="range" min="0", max="100" value="100">
|
||||
</div>
|
||||
<audio controls>
|
||||
<source src="">
|
||||
</audio>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<input id="copy" readonly>
|
||||
</body>
|
||||
101
index.html
101
index.html
@ -1,90 +1,39 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
||||
<title>BinBin</title>
|
||||
<link rel="stylesheet" href="./index.css">
|
||||
<link rel="icon" href="favicon.ico?v=2">
|
||||
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=Saira+Condensed:300,400" rel="stylesheet">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
||||
<script type="text/javascript" src="http://discordonlinejammingcentral.com/jscripts/jquery.js?ver=1804"></script>
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script></script>
|
||||
<script src="https://use.fontawesome.com/c8d5486cd8.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="header1" class="transition">
|
||||
<img src="./logo.png">
|
||||
</div>
|
||||
<div id="header2">
|
||||
<div id="spectrum">
|
||||
<p class="transition">Spectrum <i class="fa fa-times-circle" aria-hidden="true"></i></p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="sidebar">
|
||||
<span>Developed by <p onclick="window.location='http://discordonlinejammingcentral.com/user-3.html'">ksjdragon</p></span>
|
||||
</div>
|
||||
<div id="mainContainer">
|
||||
<div id="songList">
|
||||
<div id="directory">
|
||||
<div id="directoryLocation" class="transition">
|
||||
<p>DOJC Mixtapes</p>
|
||||
</div>
|
||||
<div id="directoryHeader">
|
||||
<p class="name transition">Name
|
||||
<i class="fa fa-chevron-down transition"></i>
|
||||
<i class="fa fa-chevron-up transition"></i>
|
||||
</p>
|
||||
<p class="date transition">Date Modified
|
||||
<i class="fa fa-chevron-down transition"></i>
|
||||
<i class="fa fa-chevron-up transition"></i>
|
||||
</p>
|
||||
<p class="size transition">Size
|
||||
<i class="fa fa-chevron-down transition"></i>
|
||||
<i class="fa fa-chevron-up transition"></i>
|
||||
</p>
|
||||
</div>
|
||||
<div id="directoryCont">
|
||||
|
||||
</div>
|
||||
<canvas id="visualize" width="1200" height="250"></canvas>
|
||||
</div>
|
||||
<div id="playback">
|
||||
<div id="info">
|
||||
<div>
|
||||
<h2></h2>
|
||||
</div>
|
||||
<div>
|
||||
<a download><i class="fa fa-download transition"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div id="tracker">
|
||||
<div>
|
||||
<i id="prev" class="fa fa-step-backward" aria-hidden="true"></i>
|
||||
<i id="pause" class="fa fa-pause-circle transition"></i>
|
||||
<i id="next" class="fa fa-step-forward" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div id="bar">
|
||||
<p>-:--</p>
|
||||
<input type="range" min="0", max="100000" value="0">
|
||||
<p>-:--</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="speed">
|
||||
<i class="fa fa-fast-forward transition"></i>
|
||||
<input type="range" min="0", max="100" value="25">
|
||||
</div>
|
||||
<div id="volume">
|
||||
<i class="fa fa-volume-up transition"></i>
|
||||
<input type="range" min="0", max="100" value="100">
|
||||
</div>
|
||||
<audio controls>
|
||||
<source src="">
|
||||
</audio>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script src="./visualizer.js"></script>
|
||||
<script src="./index.js"></script>
|
||||
<script>
|
||||
var prefix = (screen.width <= 699) ? "mobile" : "desktop";
|
||||
var scripts = {
|
||||
"desktop": ["visualizer", "desktop"],
|
||||
"mobile": ["mobile"]
|
||||
};
|
||||
var l = document.createElement("link");
|
||||
l.rel = "stylesheet";
|
||||
l.href = "./"+prefix+"/"+prefix+".css";
|
||||
document.getElementsByTagName("head")[0].appendChild(l);
|
||||
$.ajax({
|
||||
type:"GET",
|
||||
url:window.location.origin + "/"+prefix+"/"+prefix+".html",
|
||||
success: function(d){
|
||||
document.getElementsByTagName("body")[0].outerHTML = d;
|
||||
for(var i = 0; i < scripts[prefix].length; i++) {
|
||||
var s = document.createElement("script");
|
||||
s.src = "./"+prefix+"/"+scripts[prefix][i]+".js";
|
||||
document.getElementsByTagName("html")[0].appendChild(s);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
|
||||
262
mobile/mobile.css
Normal file
262
mobile/mobile.css
Normal file
@ -0,0 +1,262 @@
|
||||
html {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
body {
|
||||
display: grid;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
color: white;
|
||||
font-family: 'Open Sans Condensed', sans-serif;
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows: 8% 6% auto;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.transition {
|
||||
-webkit-transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
|
||||
transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
|
||||
-moz-transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
|
||||
-ms-transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
|
||||
}
|
||||
|
||||
#header {
|
||||
display: grid;
|
||||
grid-row: 1;
|
||||
grid-template-columns: 7vh auto 7vh;
|
||||
background-color: #2a2e31;
|
||||
}
|
||||
|
||||
#header div {
|
||||
margin: auto;
|
||||
font-size: 3vh;
|
||||
border-radius: 50px;
|
||||
}
|
||||
|
||||
#header div .fa {
|
||||
padding: 1.5vh;
|
||||
}
|
||||
|
||||
#header h1 {
|
||||
margin: auto 0 auto 4%;
|
||||
}
|
||||
|
||||
#mainContainer {
|
||||
grid-row: 3;
|
||||
background-color: #3e505a;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
position: absolute;
|
||||
left: -80%;
|
||||
height: 100%;
|
||||
width: 60%;
|
||||
background-color: #2a2e31;
|
||||
box-shadow: 1px 0px 12px 1px black;
|
||||
}
|
||||
|
||||
#sidebar div:nth-child(2) {
|
||||
margin-top: 20%;
|
||||
}
|
||||
|
||||
#sidebar span {
|
||||
font-size: 110%;
|
||||
padding: 5%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
#sidebar span p {
|
||||
cursor: pointer;
|
||||
color: #63d4ff;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.navi {
|
||||
display: grid;
|
||||
height: 6vh;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
grid-template-columns: 1fr 3fr 7fr;
|
||||
}
|
||||
|
||||
.naviInner {
|
||||
background-color: rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
.naviInner div {
|
||||
display: grid;
|
||||
height: 4vh;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
grid-template-columns: 3fr 7fr;
|
||||
}
|
||||
|
||||
.navi:hover, .naviInner div:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1) !important
|
||||
}
|
||||
|
||||
.navi i {
|
||||
margin: auto 0 auto 0;
|
||||
font-size: 2.1vh;
|
||||
text-align: center;
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
.navi p {
|
||||
margin: auto 0 auto 0;
|
||||
font-size: 2vh;
|
||||
grid-column: 3;
|
||||
}
|
||||
|
||||
.naviInner p {
|
||||
margin: auto 0 auto 0;
|
||||
font-size: 2vh;
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
#directoryHeader {
|
||||
grid-row: 2;
|
||||
background: #637d8b;
|
||||
display: grid;
|
||||
grid-template-columns: 50% auto 10% 7%;
|
||||
}
|
||||
|
||||
#directoryHeader p:nth-child(2) {
|
||||
grid-column: 3;
|
||||
opacity: 0;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
#location {
|
||||
margin: auto 0 auto 5%;
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
#directoryHeader i {
|
||||
grid-column: 4;
|
||||
opacity: 0;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.item {
|
||||
display: grid;
|
||||
padding: 2%;
|
||||
grid-template-columns: 14% auto 10%;
|
||||
grid-template-rows: 60% 40%;
|
||||
border-bottom: 1px solid white;
|
||||
}
|
||||
|
||||
.item .name {
|
||||
grid-row: 1;
|
||||
grid-column: 2;
|
||||
font-size: 120%;
|
||||
}
|
||||
|
||||
.item .modified {
|
||||
grid-row: 2;
|
||||
grid-column: 2;
|
||||
font-size: 80%;
|
||||
color: rgba(255,255,255,0.5);
|
||||
}
|
||||
|
||||
.item div {
|
||||
grid-row: 1 / 3;
|
||||
grid-column: 3;
|
||||
margin: auto;
|
||||
border-radius: 50px;
|
||||
}
|
||||
|
||||
.fileIcon {
|
||||
grid-column: 1 !important;
|
||||
background-color: rgba(0,0,0,0.4);
|
||||
margin: auto auto auto 0 !important;
|
||||
}
|
||||
|
||||
.item div .fa {
|
||||
padding: 1.5vh;
|
||||
}
|
||||
|
||||
#copy {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
}
|
||||
|
||||
#dotMenu {
|
||||
display: none;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 2vh;
|
||||
right: 2vh;
|
||||
font-size: 2.5vh;
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
#dotMenu p, #dotMenu a {
|
||||
display: block;
|
||||
padding: 10% 40% 10% 13%;
|
||||
}
|
||||
|
||||
#dotMenu a {
|
||||
color: rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
.card {
|
||||
border-radius: 2px;
|
||||
background-color: #FEFEFE;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
|
||||
color: black;
|
||||
transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
|
||||
}
|
||||
|
||||
#menuOverlay {
|
||||
background-color: rgba(0,0,0,0.2);
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#optionContainer {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: -60%;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
#optionContainer p {
|
||||
color: black;
|
||||
font-size: 2.5vh;
|
||||
padding: 3%;
|
||||
}
|
||||
|
||||
#optionContainer p:first-child {
|
||||
color: rgba(0,0,0,0.7);
|
||||
}
|
||||
|
||||
.overlay .fa-times {
|
||||
font-size: 4vh;
|
||||
position: absolute;
|
||||
right: 4vh;
|
||||
top: 4vh;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
}
|
||||
36
mobile/mobile.html
Normal file
36
mobile/mobile.html
Normal file
@ -0,0 +1,36 @@
|
||||
<body>
|
||||
<div id="header">
|
||||
<div class="transition">
|
||||
<i class="fa fa-bars transition"></i>
|
||||
</div>
|
||||
<h1>BinBin</h1>
|
||||
<div class="transition">
|
||||
<i class="fa fa-ellipsis-v"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div id="directoryHeader">
|
||||
<p id="location" class="transition">BinBin</p>
|
||||
<p class="transition">Name</p>
|
||||
<i class="fa fa-arrow-up transition"></i>
|
||||
</div>
|
||||
<div id="sidebar" class="transition">
|
||||
<span>Developed by <p onclick="window.open('https://github.com/ksjdragon/binbin.git','_blank')">ksjdragon</p></span>
|
||||
</div>
|
||||
<div id="mainContainer">
|
||||
<div id="directory">
|
||||
</div>
|
||||
</div>
|
||||
<div id="dotMenu" class="card">
|
||||
<p id="openSort" class="transition">Sort by...</p>
|
||||
<a id="download" class="transition" download>Download</a>
|
||||
</div>
|
||||
<div id="menuOverlay" class="transition">
|
||||
<div id="optionContainer" class="transition">
|
||||
<p>Sort by</p>
|
||||
<p>Name</p>
|
||||
<p>Date</p>
|
||||
<p>Size</p>
|
||||
</div>
|
||||
</div>
|
||||
<input id="copy" readonly>
|
||||
</body>
|
||||
606
mobile/mobile.js
Normal file
606
mobile/mobile.js
Normal file
@ -0,0 +1,606 @@
|
||||
var data, // Stores data from PHP.
|
||||
section = 0,
|
||||
clickable = true,
|
||||
selectName, // Stores name of folder in selected div
|
||||
selectDiv, // Stores actual selected div.
|
||||
currDir = "";
|
||||
|
||||
var sort = {
|
||||
"name": -1,
|
||||
"date": 1,
|
||||
"size": 1,
|
||||
};
|
||||
|
||||
var faIcons = {
|
||||
"fol": "folder",
|
||||
"mp3": "music",
|
||||
"wav": "music",
|
||||
"ogg": "music",
|
||||
"mp4": "video-camera",
|
||||
"zip": "file-zip-o",
|
||||
"other": "file-o"
|
||||
};
|
||||
|
||||
var navi = [ // Necessary arguments: id, alias, fa | Optional arguments: subnav.
|
||||
{
|
||||
"id": "myFiles",
|
||||
"alias": "My Files",
|
||||
"fa": "home"
|
||||
},
|
||||
];
|
||||
|
||||
var navSelect = "myFiles";
|
||||
|
||||
var themeColors = { // For reference and for quick changing if need-be.
|
||||
"main": "#3e505a",
|
||||
"sidebar": "#2a2e31",
|
||||
"highlight": "#fff"
|
||||
};
|
||||
|
||||
function getData() {
|
||||
$.when($.ajax({
|
||||
type : 'POST',
|
||||
url: 'main.php',
|
||||
data: {rootdir: 'rootdir'}
|
||||
})).done(function(d) {
|
||||
rootDir = JSON.parse(d);
|
||||
checkHash();
|
||||
});
|
||||
}
|
||||
|
||||
function listDir(dir, sec) { // Directory is the sub-directory, sec is the section of data, if files need to be split up into sections.
|
||||
var real = rootDir+dir;
|
||||
$.when($.ajax({
|
||||
type : 'POST',
|
||||
url: 'main.php',
|
||||
data: {getdir : [real, sec]},
|
||||
})).done(function(d) {
|
||||
data = JSON.parse(d);
|
||||
if(data[0] === null) {
|
||||
currDir = "";
|
||||
listDir(currDir, 0);
|
||||
return;
|
||||
}
|
||||
if(sec == 0) {
|
||||
data[0].splice(0,2);
|
||||
data[1].splice(0,3);
|
||||
data[2].splice(0,3);
|
||||
data[3].splice(0,3);
|
||||
} else {
|
||||
data[1].splice(0,1);
|
||||
data[2].splice(0,1);
|
||||
data[3].splice(0,1);
|
||||
}
|
||||
var toObj = [];
|
||||
for(var i = 0; i < data[0].length; i++) {
|
||||
toObj.push({
|
||||
name: data[0][i],
|
||||
folder: data[1][i],
|
||||
date: data[2][i],
|
||||
size: data[3][i]
|
||||
});
|
||||
}
|
||||
data = toObj;
|
||||
sortFiles("name", -1);
|
||||
clickable = true;
|
||||
});
|
||||
}
|
||||
|
||||
function sortFiles(type, direction) {
|
||||
switch(type) {
|
||||
case "name":
|
||||
data.sort(function(a, b){ return (a.name < b.name) ? direction*1 : direction*-1;});
|
||||
break;
|
||||
case "date":
|
||||
data.sort(function(a, b){
|
||||
a = a.date.replace(",","").split(" ");
|
||||
b = b.date.replace(",","").split(" ");
|
||||
a = Date.parse(a[1] + " " + a[0] + " " + a[2]);
|
||||
b = Date.parse(b[1] + " " + b[0] + " " + b[2]);
|
||||
|
||||
return (a < b) ? direction*1 : direction*-1;
|
||||
});
|
||||
break;
|
||||
case "size":
|
||||
data.sort(function(a, b){ return (a.size.replace("B","").substring(0, a.size.length-1) < b.size.replace("B","").substring(0, b.size.length-1)) ? direction*1 : direction*-1;});
|
||||
}
|
||||
var p = document.querySelectorAll("#directoryHeader p:nth-child(2)")[0];
|
||||
var i = document.querySelectorAll("#directoryHeader i")[0];
|
||||
p.style.opacity = "0";
|
||||
i.style.opacity = "0";
|
||||
setTimeout(function() {
|
||||
p.innerText = type[0].toUpperCase() + type.substring(1,type.length);
|
||||
i.className = "fa fa-arrow-" + ((direction < 0) ? "up" : "down") + " transition";
|
||||
p.style.opacity = "1";
|
||||
i.style.opacity = "1";
|
||||
}, 300);
|
||||
|
||||
try {
|
||||
clearTbl();
|
||||
setTimeout(function() {
|
||||
document.getElementById("directory").removeChild(document.getElementById("directoryCont"));
|
||||
dispDir();
|
||||
}, 300);
|
||||
} catch(err) {
|
||||
dispDir();
|
||||
}
|
||||
}
|
||||
|
||||
function dispDir() {
|
||||
updateLocation();
|
||||
try {
|
||||
document.getElementById("directory").removeChild(document.getElementById("directoryCont"));
|
||||
} catch(err) {}
|
||||
var cont = document.createElement("div");
|
||||
cont.id = "directoryCont";
|
||||
cont.style.opacity = "0";
|
||||
cont.className = "transition";
|
||||
|
||||
selectName = "";
|
||||
var item;
|
||||
if(data.length === 0) {
|
||||
var p = document.createElement("p");
|
||||
p.appendChild(document.createTextNode("Nothing here!"));
|
||||
p.style.fontWeight = "100";
|
||||
cont.appendChild(p);
|
||||
}
|
||||
for(var i = 0; i < data.length; i++) {
|
||||
item = createRow();
|
||||
|
||||
var curr = data[i];
|
||||
var name = document.createTextNode(curr.name);
|
||||
var otherInfo = document.createTextNode(curr.date.split(" | ")[0] + " | " + curr.size);
|
||||
|
||||
item.childNodes[0].appendChild(name);
|
||||
item.childNodes[1].appendChild(otherInfo);
|
||||
|
||||
var ext = document.createAttribute("ext");
|
||||
|
||||
if(curr.folder == "true") {
|
||||
ext.value = "fol";
|
||||
} else {
|
||||
ext.value = curr.name.substring(curr.name.lastIndexOf(".")+1,curr.name.length).toLowerCase();
|
||||
url = getURI(curr.name);
|
||||
var f = document.createElement("i");
|
||||
var a = document.createElement("div");
|
||||
a.setAttribute("url", url);
|
||||
f.className = "fa fa-files-o transition";
|
||||
a.appendChild(f);
|
||||
a.onclick = function() {
|
||||
this.style.backgroundColor = "rgba(0,0,0,0.4)";
|
||||
that = this;
|
||||
setTimeout(function() {
|
||||
that.style.backgroundColor = "rgba(0,0,0,0)";
|
||||
}, 300);
|
||||
document.getElementById("copy").value = this.getAttribute("url");
|
||||
document.getElementById("copy").select();
|
||||
document.execCommand("copy");
|
||||
}
|
||||
item.appendChild(a);
|
||||
}
|
||||
item.setAttributeNode(ext);
|
||||
|
||||
var ico = document.createElement("div");
|
||||
ico.className = "fileIcon";
|
||||
var faico = document.createElement("i");
|
||||
faico.className = "fa fa-" + (faIcons[item.getAttribute("ext")] || faIcons["other"]);
|
||||
ico.appendChild(faico);
|
||||
item.appendChild(ico);
|
||||
|
||||
item.onclick = function() {
|
||||
if(clickable == true) {
|
||||
var name = this.childNodes[0].innerText;
|
||||
url = getURI(name);
|
||||
attr = this.getAttribute("ext");
|
||||
var download = document.querySelectorAll("#dotMenu a")[0]
|
||||
if(attr == "fol") {
|
||||
download.href = ""
|
||||
download.style.color = "rgba(0,0,0,0.5)";
|
||||
} else {
|
||||
download.href = url;
|
||||
download.style.color = "rgba(0,0,0,1)";
|
||||
}
|
||||
if(selectName == name) {
|
||||
clickable = false;
|
||||
if(attr == "fol") {
|
||||
clearTbl();
|
||||
setTimeout(function() {
|
||||
currDir += name+"/";
|
||||
listDir(currDir,0);
|
||||
}, 300)
|
||||
return;
|
||||
} else if (attr == "mkv" || attr == "mp4") {
|
||||
videoOverlay(url);
|
||||
} else if (attr == "png" || attr == "jpg" || attr == "gif") {
|
||||
imageOverlay(url);
|
||||
} else if (attr == "mp3" || attr == "ogg") {
|
||||
audioOverlay(url);
|
||||
clickable = true;
|
||||
} else {
|
||||
downloadFile(rootDir + currDir + name, 'n');
|
||||
clickable = true;
|
||||
}
|
||||
}
|
||||
selectName = name;
|
||||
selectDiv = this;
|
||||
for(var i =0; i < document.getElementsByClassName("item").length;i++){
|
||||
document.getElementsByClassName("item")[i].style.backgroundColor = "";
|
||||
}
|
||||
this.style.backgroundColor = "rgba(255,255,255,0.2)";
|
||||
}
|
||||
}
|
||||
cont.appendChild(item);
|
||||
item = null;
|
||||
}
|
||||
document.getElementById("directory").appendChild(cont);
|
||||
setTimeout(function() {
|
||||
document.getElementById("directoryCont").style.opacity = "1";
|
||||
}, 100);
|
||||
}
|
||||
|
||||
function getClose() {
|
||||
var close = document.createElement("i");
|
||||
close.className = "fa fa-times transition";
|
||||
var attr = document.createAttribute("aria-hidden");
|
||||
attr.value = "true";
|
||||
close.setAttributeNode(attr);
|
||||
|
||||
close.onclick = function() {
|
||||
this.style.color = "#f13838";
|
||||
that = this;
|
||||
document.getElementsByClassName("overlay")[0].opacity = "0";
|
||||
setTimeout(function() {
|
||||
that.style.color = "white";
|
||||
document.getElementsByTagName("body")[0].removeChild(document.getElementsByClassName("overlay")[0]);
|
||||
clickable = true;
|
||||
}, 300);
|
||||
};
|
||||
|
||||
return close;
|
||||
}
|
||||
|
||||
function createRow() {
|
||||
var item = document.createElement("div");
|
||||
item.className = "item transition";
|
||||
var name = document.createElement("p");
|
||||
name.className = "name";
|
||||
item.appendChild(name);
|
||||
var modified = document.createElement("p");
|
||||
modified.className = "modified";
|
||||
item.appendChild(modified);
|
||||
return item;
|
||||
}
|
||||
|
||||
function videoOverlay(url) {
|
||||
var overlay = getDefaultOverlay();
|
||||
|
||||
var video = document.createElement("video");
|
||||
video.onclick = function() {event.stopPropagation();}
|
||||
video.src = url;
|
||||
video.controls = true;
|
||||
video.autoplay = true;
|
||||
video.type = "video/mp4";
|
||||
|
||||
video.style.margin = "auto";
|
||||
video.style.backgroundColor = "black";
|
||||
|
||||
video.onloadedmetadata = function() {
|
||||
if((video.videoHeight/video.videoWidth) > (window.innerHeight/window.innerWidth)) {
|
||||
video.style.height = (window.innerHeight * 0.9).toString() + "px";
|
||||
} else {
|
||||
video.style.width = (window.innerWidth * 0.9).toString() + "px";
|
||||
}
|
||||
}
|
||||
|
||||
var div = document.createElement("div");
|
||||
div.style.margin = "auto";
|
||||
div.style.gridRow = "1";
|
||||
div.style.gridColumn = "1";
|
||||
div.appendChild(video);
|
||||
overlay.appendChild(div);
|
||||
|
||||
var close = getClose();
|
||||
overlay.appendChild(close);
|
||||
|
||||
document.getElementsByTagName("body")[0].appendChild(overlay);
|
||||
setTimeout(function() {
|
||||
overlay.style.opacity = "1";
|
||||
}, 10);
|
||||
}
|
||||
|
||||
function audioOverlay(url) {
|
||||
var overlay = getDefaultOverlay();
|
||||
var audio = document.createElement("audio");
|
||||
audio.onclick = function() {event.stopPropagation();}
|
||||
audio.src = url;
|
||||
audio.controls = true;
|
||||
audio.autoplay = true;
|
||||
|
||||
audio.style.margin = "auto";
|
||||
audio.style.width = (window.innerWidth * 0.9).toString() + "px";
|
||||
|
||||
var div = document.createElement("div");
|
||||
div.style.margin = "auto";
|
||||
div.style.gridRow = "1";
|
||||
div.style.gridColumn = "1";
|
||||
div.appendChild(audio);
|
||||
overlay.appendChild(div);
|
||||
|
||||
var close = getClose();
|
||||
overlay.appendChild(close);
|
||||
|
||||
document.getElementsByTagName("body")[0].appendChild(overlay);
|
||||
setTimeout(function() {
|
||||
overlay.style.opacity = "1";
|
||||
}, 10);
|
||||
}
|
||||
|
||||
|
||||
function imageOverlay(url) {
|
||||
var overlay = getDefaultOverlay();
|
||||
var img = new Image();
|
||||
img.src = url;
|
||||
img.style.margin = "auto";
|
||||
|
||||
var image = document.createElement("img");
|
||||
image.src = url;
|
||||
img.onload = function() {
|
||||
var height = img.height;
|
||||
var width = img.width;
|
||||
|
||||
|
||||
if((height/width) > (window.innerHeight/window.innerWidth)) {
|
||||
image.style.height = (window.innerHeight * 0.9).toString() + "px";
|
||||
} else {
|
||||
image.style.width = (window.innerWidth * 0.9).toString() + "px";
|
||||
}
|
||||
};
|
||||
|
||||
var div = document.createElement("div");
|
||||
div.style.margin = "auto";
|
||||
div.style.gridRow = "1";
|
||||
div.style.gridColumn = "1";
|
||||
div.appendChild(image);
|
||||
overlay.appendChild(div);
|
||||
|
||||
var close = getClose();
|
||||
overlay.appendChild(close);
|
||||
|
||||
document.getElementsByTagName("body")[0].appendChild(overlay);
|
||||
setTimeout(function() {
|
||||
overlay.style.opacity = "1";
|
||||
}, 10);
|
||||
}
|
||||
|
||||
function getDefaultOverlay() {
|
||||
var overlay = document.createElement("div");
|
||||
overlay.className = "overlay transition";
|
||||
overlay.style.position = "absolute";
|
||||
overlay.style.top = "0";
|
||||
overlay.style.left = "0";
|
||||
overlay.style.minHeight = "100%";
|
||||
overlay.style.minWidth = "100%";
|
||||
overlay.style.background = 'rgba(0,0,0,0.8)';
|
||||
overlay.style.zIndex = "50";
|
||||
overlay.style.display = "grid";
|
||||
overlay.style.gridTemplateColumns = "1fr";
|
||||
overlay.style.gridTemplateRows = "1fr";
|
||||
overlay.style.opacity = "0";
|
||||
|
||||
return overlay;
|
||||
}
|
||||
|
||||
function clearTbl() {
|
||||
selected = undefined;
|
||||
selectDiv = undefined;
|
||||
document.getElementById("directoryCont").style.opacity = "0";
|
||||
}
|
||||
|
||||
function getURI(name) {
|
||||
var dirs = (rootDir+currDir+name).split("/");
|
||||
var uri = window.location.origin;
|
||||
for(var i = 1; i < dirs.length; i++) uri+="/"+encodeURIComponent(dirs[i]);
|
||||
return uri;
|
||||
}
|
||||
|
||||
function createNav() {
|
||||
for (var i = 0; i < navi.length; i++) { // Create navigation tabs.
|
||||
var side = document.getElementById("sidebar");
|
||||
var div = document.createElement("div");
|
||||
div.className = "navi transition";
|
||||
div.setAttribute("option", navi[i].id);
|
||||
var ic = document.createElement("i");
|
||||
ic.className = "fa fa-" + navi[i].fa;
|
||||
ic["aria-hidden"] = true;
|
||||
var p = document.createElement("p");
|
||||
p.appendChild(document.createTextNode(navi[i].alias));
|
||||
div.appendChild(ic);
|
||||
div.appendChild(p);
|
||||
side.appendChild(div);
|
||||
var subNav = navi[i].subNav;
|
||||
if(!subNav) continue;
|
||||
|
||||
var subNavCont = document.createElement("div");
|
||||
subNavCont.className = "naviInner";
|
||||
subNavCont.setAttribute("option", navi[i].id);
|
||||
for(var j = 0; j < subNav.length; j++) {
|
||||
var eachSubNav = document.createElement("div");
|
||||
eachSubNav.className = "transition";
|
||||
eachSubNav.setAttribute("option", navi[i].id+"&"+subNav[j].id);
|
||||
eachSubNav.onclick = function() {
|
||||
var op = this.getAttribute("option");
|
||||
if(subNavSelect === op) return;
|
||||
//updateMain(op);
|
||||
}
|
||||
var p2 = document.createElement("p");
|
||||
p2.appendChild(document.createTextNode(subNav[j].alias));
|
||||
eachSubNav.appendChild(p2);
|
||||
subNavCont.appendChild(eachSubNav);
|
||||
}
|
||||
side.appendChild(subNavCont);
|
||||
}
|
||||
}
|
||||
|
||||
function updateNav(op) { // Updates the sidebar navigation (if naviagation tabs are ever dynamically implemented).
|
||||
var oldNav = document.querySelectorAll("[option=" + navSelect + "]")[0];
|
||||
var newNav = document.querySelectorAll("[option=" + op + "]")[0];
|
||||
oldNav.style.backgroundColor = "rgba(0,0,0,0)";
|
||||
oldNav.style.color = "white";
|
||||
newNav.style.backgroundColor = themeColors.main;
|
||||
newNav.style.color = themeColors.highlight;
|
||||
}
|
||||
|
||||
function updateLocation() {
|
||||
window.location.hash = currDir.replace(/[\/]+/g,"*").replace(/ /g, "_");
|
||||
var i = document.querySelectorAll("#header div:first-child i")[0];
|
||||
document.getElementById("location").innerText = (currDir === "") ? "BinBin" : currDir.split("/").slice(-2)[0];
|
||||
if(currDir === "" && !i.className.includes("fa-bars")) {
|
||||
i.style.opacity = "0";
|
||||
setTimeout(function() {
|
||||
i.className = "fa fa-bars transition";
|
||||
i.style.opacity = "1"
|
||||
}, 300);
|
||||
} else if(currDir !== "" && !i.className.includes("fa-arrow-left")) {
|
||||
i.style.opacity = "0";
|
||||
setTimeout(function() {
|
||||
i.className = "fa fa-arrow-left transition";
|
||||
i.style.opacity = "1";
|
||||
}, 300);
|
||||
}
|
||||
}
|
||||
|
||||
function checkHash() {
|
||||
if(window.location.hash) {
|
||||
currDir = window.location.hash.replace(/[_]+/g, " ").replace(/[\*]+/g,"/").replace("#","");
|
||||
}
|
||||
listDir(currDir,0);
|
||||
window.location.hash = "";
|
||||
}
|
||||
|
||||
function closeMenuOverlay() {
|
||||
var overlay = document.getElementById("menuOverlay");
|
||||
overlay.style.opacity = "0";
|
||||
setTimeout(function() {
|
||||
overlay.style.display = "none";
|
||||
}, 300);
|
||||
document.getElementById("optionContainer").style.bottom = "-60%";
|
||||
}
|
||||
|
||||
function sortButtons() {
|
||||
document.querySelectorAll("#optionContainer p:first-child")[0].onclick = function() {event.stopPropagation();}
|
||||
document.querySelectorAll("#optionContainer p:nth-child(2)")[0].onclick = function() {
|
||||
event.stopPropagation();
|
||||
closeMenuOverlay();
|
||||
sort.name = sort.name * -1;
|
||||
sortFiles("name", sort.name);
|
||||
}
|
||||
document.querySelectorAll("#optionContainer p:nth-child(3)")[0].onclick = function() {
|
||||
event.stopPropagation();
|
||||
closeMenuOverlay();
|
||||
sort.date = sort.date * -1;
|
||||
sortFiles("date", sort.date);
|
||||
}
|
||||
document.querySelectorAll("#optionContainer p:nth-child(4)")[0].onclick = function() {
|
||||
event.stopPropagation();
|
||||
closeMenuOverlay();
|
||||
sort.size = sort.size * -1;
|
||||
sortFiles("size", sort.size);
|
||||
}
|
||||
document.querySelectorAll("#directoryHeader p:nth-child(2)")[0].onclick = function() {
|
||||
var type = this.innerText.toLowerCase();
|
||||
sort[type] = sort[type] * -1;
|
||||
sortFiles(type, sort[type]);
|
||||
}
|
||||
}
|
||||
|
||||
document.querySelectorAll("#header div:first-child i")[0].onclick = function() {
|
||||
this.parentNode.style.backgroundColor = "rgba(0,0,0,0.4)";
|
||||
that = this;
|
||||
setTimeout(function() {
|
||||
that.parentNode.style.backgroundColor = "rgba(0,0,0,0)";
|
||||
}, 300);
|
||||
if(currDir === "") {
|
||||
setTimeout(function() {
|
||||
document.getElementById("sidebar").style.left = "0";
|
||||
}, 10);
|
||||
|
||||
} else {
|
||||
var arr = currDir.split("/");
|
||||
if(arr.length === 2) {
|
||||
currDir = "";
|
||||
} else {
|
||||
currDir = arr.slice(0,arr.length-2).reduce((a,b) => a+"/"+b)+"/";
|
||||
}
|
||||
listDir(currDir, 0);
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById("sidebar").onclick = function() {
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
document.querySelectorAll("#header div:last-child i")[0].onclick = function(event) {
|
||||
event.stopPropagation();
|
||||
this.parentNode.style.backgroundColor = "rgba(0,0,0,0.4)";
|
||||
that = this;
|
||||
setTimeout(function() {
|
||||
that.parentNode.style.backgroundColor = "rgba(0,0,0,0)";
|
||||
}, 300);
|
||||
var menu = document.getElementById("dotMenu");
|
||||
menu.style.display = "block";
|
||||
setTimeout(function() {
|
||||
menu.style.opacity = "1";
|
||||
}, 10);
|
||||
}
|
||||
|
||||
document.getElementById("openSort").onclick = function() {
|
||||
event.stopPropagation();
|
||||
this.style.backgroundColor = "rgba(0,0,0,0.2)";
|
||||
that = this;
|
||||
setTimeout(function() {
|
||||
that.style.backgroundColor = "rgba(0,0,0,0)";
|
||||
}, 300);
|
||||
// Close Menu
|
||||
var menu = document.getElementById("dotMenu");
|
||||
menu.style.opacity = "0";
|
||||
setTimeout(function() {
|
||||
menu.style.display = "none";
|
||||
}, 300);
|
||||
// Open overlay
|
||||
var overlay = document.getElementById("menuOverlay");
|
||||
overlay.style.display = "block";
|
||||
setTimeout(function() {
|
||||
overlay.style.opacity = "1";
|
||||
}, 10);
|
||||
|
||||
setTimeout(function() {
|
||||
var option = document.getElementById("optionContainer");
|
||||
option.style.bottom = "0";
|
||||
}, 150);
|
||||
}
|
||||
|
||||
document.getElementById("download").onclick = function() {
|
||||
event.stopPropagation();
|
||||
this.style.backgroundColor = "rgba(0,0,0,0.2)";
|
||||
that = this;
|
||||
setTimeout(function() {
|
||||
that.style.backgroundColor = "rgba(0,0,0,0)";
|
||||
}, 300);
|
||||
}
|
||||
|
||||
document.onclick = function(event) {
|
||||
var menu = document.getElementById("dotMenu");
|
||||
menu.style.opacity = "0";
|
||||
setTimeout(function() {
|
||||
menu.style.display = "none";
|
||||
}, 300);
|
||||
|
||||
closeMenuOverlay();
|
||||
|
||||
document.getElementById("sidebar").style.left = "-80%";
|
||||
}
|
||||
|
||||
getData();
|
||||
sortButtons();
|
||||
createNav();
|
||||
updateNav(navSelect);
|
||||
Loading…
x
Reference in New Issue
Block a user