diff --git a/main.css b/desktop/desktop.css similarity index 78% rename from main.css rename to desktop/desktop.css index e173420..6aa4049 100644 --- a/main.css +++ b/desktop/desktop.css @@ -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%; +} \ No newline at end of file diff --git a/desktop/desktop.html b/desktop/desktop.html new file mode 100644 index 0000000..57f89a6 --- /dev/null +++ b/desktop/desktop.html @@ -0,0 +1,74 @@ + +
+

BinBin

+
+
+
+

Spectrum

+
+
+ +
+
+
+
+

a

+
+
+

Name + + +

+

Date Modified + + +

+

Size + + +

+
+
+ +
+ +
+
+
+
+

+
+
+ +
+
+
+
+ + + +
+
+

-:--

+ +

-:--

+
+
+
+ + +
+
+ + +
+ +
+
+
+ + \ No newline at end of file diff --git a/main.js b/desktop/desktop.js similarity index 100% rename from main.js rename to desktop/desktop.js diff --git a/visualizer.js b/desktop/visualizer.js similarity index 100% rename from visualizer.js rename to desktop/visualizer.js diff --git a/index.html b/index.html index 6617a24..f4528b3 100644 --- a/index.html +++ b/index.html @@ -1,90 +1,39 @@ - BinBin - + - + -
- -
-
-
-

Spectrum

-
-
- -
-
-
-
-

DOJC Mixtapes

-
-
-

Name - - -

-

Date Modified - - -

-

Size - - -

-
-
- -
- -
-
-
-
-

-
-
- -
-
-
-
- - - -
-
-

-:--

- -

-:--

-
-
-
- - -
-
- - -
- -
-
-
- - + diff --git a/mobile/mobile.css b/mobile/mobile.css new file mode 100644 index 0000000..7357915 --- /dev/null +++ b/mobile/mobile.css @@ -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; +} \ No newline at end of file diff --git a/mobile/mobile.html b/mobile/mobile.html new file mode 100644 index 0000000..582ca94 --- /dev/null +++ b/mobile/mobile.html @@ -0,0 +1,36 @@ + + +
+

BinBin

+

Name

+ +
+ +
+
+
+
+
+

Sort by...

+ Download +
+ + + \ No newline at end of file diff --git a/mobile/mobile.js b/mobile/mobile.js new file mode 100644 index 0000000..4b16a26 --- /dev/null +++ b/mobile/mobile.js @@ -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); \ No newline at end of file