split/monofile
1
0
Fork 0
mirror of https://github.com/mollersuite/monofile.git synced 2024-10-06 20:16:25 -07:00
Code Issues Actions Packages Projects Releases 1 Wiki Activity

i don't even know what i did here

Browse source
This commit is contained in:
split / May 2023-01-30 21:32:01 -08:00
parent f2e40819d3
commit 8769761163
19 changed files with 214 additions and 129 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
README.md
View file

@ -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

30
assets/script/clone_file.js
View file

@ -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
}))
}
})

37
assets/script/upload_file.js
View file

@ -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
View 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>

26
pages/download.html
View file

@ -16,20 +16,22 @@
> >
</head> </head>
<body> <body>
<div id="uploadWindow"> <div id="appContent">
<h1> <div id="uploadWindow">
$FileName <h1>
</h1> $FileName
<p style="color:#999999"> </h1>
file id <span class="number">$FileId</span> <p style="color:#999999">
</p> file id <span class="number">$FileId</span>
</p>
<button style="position:relative;width:100%;top:10px;"> <button style="position:relative;width:100%;top:10px;">
<a id="dlbtn" href="/file/$FileId" download="$FileName" style="position:absolute;left:0px;top:0px;height:100%;width:100%;"></a> <a id="dlbtn" href="/file/$FileId" download="$FileName" style="position:absolute;left:0px;top:0px;height:100%;width:100%;"></a>
download download
</button> </button>
<div style="min-height:20px" /> <div style="min-height:20px" />
</div>
</div> </div>
</body> </body>

2
pages/index.html
View file

@ -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>

36
rollup.config.mjs
View file

@ -1,15 +1,29 @@
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", {
output: { input: "src/client/index.js",
file: 'out/client/bundle.js', output: {
format: 'esm', file: 'out/client/index.js',
sourcemap:true format: 'esm',
sourcemap:true
},
plugins: [
resolve(),
svelte({})
]
}, },
plugins: [ {
resolve(), input: "src/client/collection.js",
svelte({}) output: {
] file: 'out/client/collection.js',
} format: 'esm',
sourcemap:true
},
plugins: [
resolve(),
svelte({})
]
}
]

5
src/client/collection.js Normal file
View file

@ -0,0 +1,5 @@
import App from "../svelte/Collections.svelte"
new App({
target: document.body
})

0
src/client/main.js → src/client/index.js
View file

27
src/style/_base.scss
View file

@ -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;
}
}
}
}

14
src/style/app/pulldown.scss
View file

@ -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;
} }

18
src/style/app/uploader/add_new_files.scss
View file

@ -11,18 +11,26 @@
font-size: 30px; font-size: 30px;
span { span {
font-size:16px;
position:relative; position:relative;
top:-4px;
left:10px; &._add_files_txt {
font-size:16px;
top:-4px;
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;
} }

13
src/style/downloads.scss
View file

@ -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);
}
} }

20
src/svelte/App.svelte
View file

@ -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
View 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>&nbsp;&nbsp—&nbsp;&nbsp;by <strong>@{collection.owner}</strong></p>
</div>
</div>

36
src/svelte/elem/PulldownManager.svelte Normal file
View 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}

17
src/svelte/elem/Topbar.svelte
View file

@ -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>

4
src/svelte/elem/transition/_void.js
View file

@ -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;

5
src/svelte/elem/uploader/AttachmentZone.svelte
View file

@ -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>