mirror of
https://github.com/mollersuite/monofile.git
synced 2024-11-25 07:06:25 -08:00
i don't even know what i did here
This commit is contained in:
parent
f2e40819d3
commit
8769761163
|
@ -21,10 +21,9 @@ TOKEN=KILL-YOURSELF.NOW
|
||||||
- [X] 1.2.1 add file counter to main page
|
- [X] 1.2.1 add file counter to main page
|
||||||
- [X] 1.2.2 clean up this shitty code
|
- [X] 1.2.2 clean up this shitty code
|
||||||
- [X] 1.2.3 bugfixes
|
- [X] 1.2.3 bugfixes
|
||||||
- [ ] 1.3.0 new ui; accounts; utility endpoints; multi file uploads
|
- [ ] 1.3.0 new ui; collections; accounts; utility endpoints; multi file uploads
|
||||||
- [ ] 1.3.1 organize svelte code
|
- [ ] 1.3.1 self-destructing files
|
||||||
- [ ] 1.3.2 self-destructing files
|
- [ ] 1.3.2 disable cloning of local ips
|
||||||
- [ ] 1.3.3 disable cloning of local ips
|
|
||||||
- [ ] 1.4.0 admin panel
|
- [ ] 1.4.0 admin panel
|
||||||
- [ ] 2.0.0 rewrite using theUnfunny's code as a base/rewrite using monofile-core
|
- [ ] 2.0.0 rewrite using theUnfunny's code as a base/rewrite using monofile-core
|
||||||
|
|
||||||
|
|
|
@ -1,30 +0,0 @@
|
||||||
document.getElementById("uploadButton").addEventListener("click",() => {
|
|
||||||
let ask = prompt("Input a URL to clone.")
|
|
||||||
|
|
||||||
if (ask) {
|
|
||||||
let opt = getOptionsForUploading()
|
|
||||||
updateBtnTxt("Requesting clone. Please wait.")
|
|
||||||
|
|
||||||
let xmlhttp = new XMLHttpRequest()
|
|
||||||
|
|
||||||
xmlhttp.addEventListener("error",function(e) {
|
|
||||||
updateBtnTxt(`Upload failed.<br/>${e.toString()}`)
|
|
||||||
console.error(e)
|
|
||||||
})
|
|
||||||
|
|
||||||
xmlhttp.addEventListener("load",function() {
|
|
||||||
if (xmlhttp.status == 200) {
|
|
||||||
document.getElementById("CopyTB").value = `https://${location.hostname}/download/${xmlhttp.responseText}`
|
|
||||||
updateBtnTxt(`Upload complete.<br/><a style="color:blue;font-family:monospace;" href="javascript:document.getElementById('CopyTB').focus();document.getElementById('CopyTB').select();document.execCommand('copy');document.getElementById('CopyTB').blur();">Copy URL</a> <a style="color:blue;font-family:monospace;" href="javascript:prompt('This is your download URL.', document.getElementById('CopyTB').value);null">View URL</a>`)
|
|
||||||
} else {
|
|
||||||
updateBtnTxt(`Upload failed.<br/>${xmlhttp.responseText}`)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
xmlhttp.open("POST","/clone")
|
|
||||||
xmlhttp.send(JSON.stringify({
|
|
||||||
url: ask,
|
|
||||||
...opt
|
|
||||||
}))
|
|
||||||
}
|
|
||||||
})
|
|
|
@ -1,37 +0,0 @@
|
||||||
let FileUpload = document.createElement("input")
|
|
||||||
FileUpload.setAttribute("type","file")
|
|
||||||
|
|
||||||
document.getElementById("uploadButton").addEventListener("click",() => FileUpload.click())
|
|
||||||
|
|
||||||
FileUpload.addEventListener("input",() => {
|
|
||||||
if (FileUpload.files[0]) {
|
|
||||||
let opt = getOptionsForUploading()
|
|
||||||
let file = FileUpload.files[0]
|
|
||||||
|
|
||||||
updateBtnTxt("Uploading file. This may take a while, so stay put.")
|
|
||||||
|
|
||||||
let xmlhttp = new XMLHttpRequest()
|
|
||||||
|
|
||||||
xmlhttp.addEventListener("error",function(e) {
|
|
||||||
updateBtnTxt(`Upload failed.<br/>${e.toString()}`)
|
|
||||||
console.error(e)
|
|
||||||
})
|
|
||||||
|
|
||||||
xmlhttp.addEventListener("load",function() {
|
|
||||||
if (xmlhttp.status == 200) {
|
|
||||||
document.getElementById("CopyTB").value = `https://${location.hostname}/download/${xmlhttp.responseText}`
|
|
||||||
updateBtnTxt(`Upload complete.<br/><a style="color:blue;font-family:monospace;" href="javascript:document.getElementById('CopyTB').focus();document.getElementById('CopyTB').select();document.execCommand('copy');document.getElementById('CopyTB').blur();">Copy URL</a> <a style="color:blue;font-family:monospace;" href="javascript:prompt('This is your download URL.', document.getElementById('CopyTB').value);null">View URL</a>`)
|
|
||||||
} else {
|
|
||||||
updateBtnTxt(`Upload failed.<br/>${xmlhttp.responseText}`)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
let fd = new FormData()
|
|
||||||
fd.append('file',file)
|
|
||||||
|
|
||||||
xmlhttp.open("POST","/upload")
|
|
||||||
xmlhttp.setRequestHeader("monofile-upload-id",opt.uploadId)
|
|
||||||
xmlhttp.send(fd)
|
|
||||||
|
|
||||||
}
|
|
||||||
})
|
|
24
pages/collection.html
Normal file
24
pages/collection.html
Normal file
|
@ -0,0 +1,24 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>monofile</title>
|
||||||
|
|
||||||
|
<meta name="og:site_name" content="monofile $Version">
|
||||||
|
<meta name="title" content="$CollectionName">
|
||||||
|
<meta name="description" content="$CollectionId - $Managers manager(s), $Files file(s)">
|
||||||
|
|
||||||
|
<!-- downloads.css is good eenough for this -->
|
||||||
|
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="/static/style/downloads.css"
|
||||||
|
>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
|
@ -16,6 +16,7 @@
|
||||||
>
|
>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<div id="appContent">
|
||||||
<div id="uploadWindow">
|
<div id="uploadWindow">
|
||||||
<h1>
|
<h1>
|
||||||
$FileName
|
$FileName
|
||||||
|
@ -31,6 +32,7 @@
|
||||||
|
|
||||||
<div style="min-height:20px" />
|
<div style="min-height:20px" />
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
|
@ -18,7 +18,7 @@
|
||||||
content="width=device-width, initial-scale=1.0, user-scalable=0"
|
content="width=device-width, initial-scale=1.0, user-scalable=0"
|
||||||
>
|
>
|
||||||
|
|
||||||
<script type="module" src="/static/js/bundle.js"></script>
|
<script type="module" src="/static/js/index.js"></script>
|
||||||
|
|
||||||
<title>monofile</title>
|
<title>monofile</title>
|
||||||
|
|
||||||
|
|
|
@ -1,10 +1,11 @@
|
||||||
import svelte from 'rollup-plugin-svelte'
|
import svelte from 'rollup-plugin-svelte'
|
||||||
import resolve from "@rollup/plugin-node-resolve"
|
import resolve from "@rollup/plugin-node-resolve"
|
||||||
|
|
||||||
export default {
|
export default [
|
||||||
input: "src/client/main.js",
|
{
|
||||||
|
input: "src/client/index.js",
|
||||||
output: {
|
output: {
|
||||||
file: 'out/client/bundle.js',
|
file: 'out/client/index.js',
|
||||||
format: 'esm',
|
format: 'esm',
|
||||||
sourcemap:true
|
sourcemap:true
|
||||||
},
|
},
|
||||||
|
@ -12,4 +13,17 @@ export default {
|
||||||
resolve(),
|
resolve(),
|
||||||
svelte({})
|
svelte({})
|
||||||
]
|
]
|
||||||
}
|
},
|
||||||
|
{
|
||||||
|
input: "src/client/collection.js",
|
||||||
|
output: {
|
||||||
|
file: 'out/client/collection.js',
|
||||||
|
format: 'esm',
|
||||||
|
sourcemap:true
|
||||||
|
},
|
||||||
|
plugins: [
|
||||||
|
resolve(),
|
||||||
|
svelte({})
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
5
src/client/collection.js
Normal file
5
src/client/collection.js
Normal file
|
@ -0,0 +1,5 @@
|
||||||
|
import App from "../svelte/Collections.svelte"
|
||||||
|
|
||||||
|
new App({
|
||||||
|
target: document.body
|
||||||
|
})
|
|
@ -54,3 +54,30 @@ body {
|
||||||
#appContent {
|
#appContent {
|
||||||
background-color: $Background
|
background-color: $Background
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
scrollbars
|
||||||
|
*/
|
||||||
|
|
||||||
|
* {
|
||||||
|
/* nice scrollbars aren't needed on mobile so */
|
||||||
|
@media screen and (min-width:500px) {
|
||||||
|
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
width:5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-webkit-scrollbar-track {
|
||||||
|
background-color:#191919;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-webkit-scrollbar-thumb {
|
||||||
|
background-color:#333;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color:#373737;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
|
@ -4,8 +4,11 @@
|
||||||
position:absolute;
|
position:absolute;
|
||||||
left:0px;
|
left:0px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display:none;
|
width:100%;
|
||||||
opacity:0.5;
|
top:0px;
|
||||||
|
opacity:0.25;
|
||||||
|
border:none;
|
||||||
|
outline:none;
|
||||||
background-color:#AAAAAA;
|
background-color:#AAAAAA;
|
||||||
|
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
|
@ -13,9 +16,10 @@
|
||||||
|
|
||||||
.pulldown {
|
.pulldown {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 250px;
|
width: 300px;
|
||||||
height: 400px;
|
height: 400px;
|
||||||
background-color: #191919;
|
background-color: #191919;
|
||||||
|
color: #dddddd;
|
||||||
|
|
||||||
top:0px;
|
top:0px;
|
||||||
left:50%;
|
left:50%;
|
||||||
|
@ -26,5 +30,9 @@
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
p, h1, h2 {
|
||||||
|
margin:0px;
|
||||||
|
}
|
||||||
|
|
||||||
z-index: 1001;
|
z-index: 1001;
|
||||||
}
|
}
|
|
@ -11,18 +11,26 @@
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
|
|
||||||
span {
|
span {
|
||||||
font-size:16px;
|
|
||||||
position:relative;
|
position:relative;
|
||||||
|
|
||||||
|
&._add_files_txt {
|
||||||
|
font-size:16px;
|
||||||
top:-4px;
|
top:-4px;
|
||||||
left:10px;
|
left:10px;
|
||||||
|
|
||||||
|
@media screen and (max-width:500px) {
|
||||||
|
font-size:20px;
|
||||||
|
top:-6px;
|
||||||
|
left:10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width:500px) {
|
@media screen and (max-width:500px) {
|
||||||
font-size: 40px;
|
font-size: 40px;
|
||||||
|
|
||||||
span {
|
span._add_files_txt {
|
||||||
font-size:20px;
|
font-size:20px;
|
||||||
position:relative;
|
|
||||||
top:-6px;
|
top:-6px;
|
||||||
left:10px;
|
left:10px;
|
||||||
}
|
}
|
||||||
|
|
|
@ -6,6 +6,15 @@
|
||||||
@use "app/uploads";
|
@use "app/uploads";
|
||||||
@use "base";
|
@use "base";
|
||||||
|
|
||||||
body {
|
#appContent {
|
||||||
background-color: base.$Background;
|
position:absolute;
|
||||||
|
left:0px;
|
||||||
|
top:0px;
|
||||||
|
width:100%;
|
||||||
|
height:100%;
|
||||||
|
background-image: linear-gradient(#333,base.$Background);
|
||||||
|
|
||||||
|
@media screen and (max-width:500px) {
|
||||||
|
background-image: linear-gradient(#303030,base.$Background);
|
||||||
|
}
|
||||||
}
|
}
|
|
@ -1,6 +1,7 @@
|
||||||
<script>
|
<script>
|
||||||
import { onMount } from "svelte";
|
import { onMount } from "svelte";
|
||||||
import Topbar from "./elem/Topbar.svelte";
|
import Topbar from "./elem/Topbar.svelte";
|
||||||
|
import PulldownManager from "./elem/PulldownManager.svelte";
|
||||||
import UploadWindow from "./elem/UploadWindow.svelte";
|
import UploadWindow from "./elem/UploadWindow.svelte";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -9,25 +10,14 @@
|
||||||
let topbar;
|
let topbar;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @type HTMLButtonElement
|
* @type PulldownManager
|
||||||
*/
|
*/
|
||||||
let overlay;
|
let pulldownManager;
|
||||||
|
|
||||||
onMount(() => {
|
|
||||||
overlay.addEventListener("click", () => {
|
|
||||||
overlay.style.display = ""
|
|
||||||
})
|
|
||||||
})
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Topbar bind:this={topbar} />
|
<Topbar bind:this={topbar} pulldown={pulldownManager} />
|
||||||
<div id="appContent">
|
<div id="appContent">
|
||||||
<button id="overlay" bind:this={overlay} />
|
<PulldownManager bind:this={pulldownManager} />
|
||||||
<div class="pulldown" style:display="none">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<UploadWindow/>
|
<UploadWindow/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p class="background-t">monofile</p>
|
|
12
src/svelte/Collections.svelte
Normal file
12
src/svelte/Collections.svelte
Normal file
|
@ -0,0 +1,12 @@
|
||||||
|
<script>
|
||||||
|
import { onMount } from "svelte";
|
||||||
|
|
||||||
|
let collection = {}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div id="appContent">
|
||||||
|
<div id="uploadWindow">
|
||||||
|
<h2>{collection.name}</h2>
|
||||||
|
<p><span class="number">{collection.id}</span>  — by <strong>@{collection.owner}</strong></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
36
src/svelte/elem/PulldownManager.svelte
Normal file
36
src/svelte/elem/PulldownManager.svelte
Normal file
|
@ -0,0 +1,36 @@
|
||||||
|
<script context="module">
|
||||||
|
import { writable } from "svelte/store";
|
||||||
|
export const pulldownOpen = writable(0);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { onMount } from "svelte";
|
||||||
|
import { fade, scale } from "svelte/transition";
|
||||||
|
|
||||||
|
export function isOpen() {
|
||||||
|
return $pulldownOpen
|
||||||
|
}
|
||||||
|
|
||||||
|
export function openPulldown() {
|
||||||
|
pulldownOpen.set(true)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function closePulldown() {
|
||||||
|
pulldownOpen.set(false)
|
||||||
|
}
|
||||||
|
|
||||||
|
onMount(() => {
|
||||||
|
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
{#if $pulldownOpen}
|
||||||
|
<div class="pulldown" transition:fade={{duration:200}}>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
id="overlay"
|
||||||
|
on:click={closePulldown}
|
||||||
|
transition:fade={{duration:200}}
|
||||||
|
/>
|
||||||
|
{/if}
|
|
@ -1,9 +1,24 @@
|
||||||
<script>
|
<script>
|
||||||
|
import { circOut } from "svelte/easing";
|
||||||
|
import { scale } from "svelte/transition";
|
||||||
|
import PulldownManager, {pulldownOpen} from "./PulldownManager.svelte";
|
||||||
|
import { _void } from "./transition/_void";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @type PulldownManager
|
||||||
|
*/
|
||||||
|
export let pulldown;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div id="topbar">
|
<div id="topbar">
|
||||||
<button class="menuBtn">what's new</button>
|
{#if $pulldownOpen}
|
||||||
|
<button
|
||||||
|
class="menuBtn"
|
||||||
|
on:click={pulldown.closePulldown}
|
||||||
|
transition:_void={{duration:200,prop:"width",easingFunc:circOut}}
|
||||||
|
>close</button>
|
||||||
|
{/if}
|
||||||
|
<button class="menuBtn" on:click={pulldown.openPulldown}>what's new</button>
|
||||||
<button class="menuBtn">files</button>
|
<button class="menuBtn">files</button>
|
||||||
<button class="menuBtn">account</button>
|
<button class="menuBtn">account</button>
|
||||||
|
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import { circIn, circOut } from "svelte/easing"
|
import { circIn, circOut } from "svelte/easing"
|
||||||
|
|
||||||
export function _void(node, { duration, easingFunc, op }) {
|
export function _void(node, { duration, easingFunc, op, prop }) {
|
||||||
let rect = node.getBoundingClientRect()
|
let rect = node.getBoundingClientRect()
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
@ -10,7 +10,7 @@ export function _void(node, { duration, easingFunc, op }) {
|
||||||
|
|
||||||
return `
|
return `
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
height: ${(eased)*(rect.height)}px;
|
${prop||"height"}: ${(eased)*(rect[prop||"height"])}px;
|
||||||
padding: 0px;
|
padding: 0px;
|
||||||
opacity:${eased};
|
opacity:${eased};
|
||||||
overflow: clip;
|
overflow: clip;
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
<script>
|
<script>
|
||||||
import { createEventDispatcher } from "svelte";
|
import { createEventDispatcher } from "svelte";
|
||||||
import { circIn, circOut } from "svelte/easing"
|
import { circIn, circOut } from "svelte/easing"
|
||||||
|
import { fade } from "svelte/transition";
|
||||||
import { _void } from "../transition/_void"
|
import { _void } from "../transition/_void"
|
||||||
|
|
||||||
let uploadTypes = {
|
let uploadTypes = {
|
||||||
|
@ -66,7 +67,9 @@
|
||||||
<!-- there are 100% better ways to do this but idgaf, it's still easier to manage than <1.3 lmao -->
|
<!-- there are 100% better ways to do this but idgaf, it's still easier to manage than <1.3 lmao -->
|
||||||
|
|
||||||
<div id="add_new_files" transition:_void={{duration:200}}>
|
<div id="add_new_files" transition:_void={{duration:200}}>
|
||||||
<p>+<span>add files</span></p>
|
<p>
|
||||||
|
+<span class="_add_files_txt">add files</span>
|
||||||
|
</p>
|
||||||
{#if !uploadType}
|
{#if !uploadType}
|
||||||
<div id="file_add_btns" out:_void in:_void={{easingFunc:circOut}}>
|
<div id="file_add_btns" out:_void in:_void={{easingFunc:circOut}}>
|
||||||
<button on:click={() => uploadType = uploadTypes.files} >upload files...</button>
|
<button on:click={() => uploadType = uploadTypes.files} >upload files...</button>
|
||||||
|
|
Loading…
Reference in a new issue