i don't even know what i did here

2024-11-21 21:36:26 -08:00 · 2023-01-30 21:32:01 -08:00 · 2023-01-30 21:32:01 -08:00 · 8769761163
parent f2e40819d3
commit 8769761163
19 changed files with 214 additions and 129 deletions
--- a/README.md
+++ b/README.md
@ -21,10 +21,9 @@ TOKEN=KILL-YOURSELF.NOW
 - [X] 1.2.1 add file counter to main page
 - [X] 1.2.2 clean up this shitty code
 - [X] 1.2.3 bugfixes
- [ ] 1.3.0 new ui; accounts; utility endpoints; multi file uploads
- [ ] 1.3.1 organize svelte code
- [ ] 1.3.2 self-destructing files
- [ ] 1.3.3 disable cloning of local ips
+- [ ] 1.3.0 new ui; collections; accounts; utility endpoints; multi file uploads
+- [ ] 1.3.1 self-destructing files
+- [ ] 1.3.2 disable cloning of local ips
 - [ ] 1.4.0 admin panel
 - [ ] 2.0.0 rewrite using theUnfunny's code as a base/rewrite using monofile-core

--- a/assets/script/clone_file.js
+++ b/assets/script/clone_file.js
@ -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
-        }))
-    }
-})
--- a/assets/script/upload_file.js
+++ b/assets/script/upload_file.js
@ -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)
-
-    }
-})
--- a/pages/collection.html
+++ b/pages/collection.html
@ -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>
--- a/pages/download.html
+++ b/pages/download.html
@ -16,6 +16,7 @@
    >
 </head>
 <body>
+    <div id="appContent">
        <div id="uploadWindow">
            <h1>
                $FileName
@ -31,6 +32,7 @@
            
            <div style="min-height:20px" />
        </div>
+    </div>
 </body>

 </html>
--- a/pages/index.html
+++ b/pages/index.html
@ -18,7 +18,7 @@
            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>

--- a/rollup.config.mjs
+++ b/rollup.config.mjs
@ -1,10 +1,11 @@
 import svelte from 'rollup-plugin-svelte'
 import resolve from "@rollup/plugin-node-resolve"

-export default {
-    input: "src/client/main.js",
+export default [
+    {
+        input: "src/client/index.js",
        output: {
-        file: 'out/client/bundle.js',
+            file: 'out/client/index.js',
            format: 'esm',
            sourcemap:true
        },
@ -12,4 +13,17 @@ export default {
            resolve(),
            svelte({})
        ]
-}
+    },
+    {
+        input: "src/client/collection.js",
+        output: {
+            file: 'out/client/collection.js',
+            format: 'esm',
+            sourcemap:true
+        },
+        plugins: [
+            resolve(),
+            svelte({})
+        ]
+    }
+]
--- a/src/client/collection.js
+++ b/src/client/collection.js
@ -0,0 +1,5 @@
+import App from "../svelte/Collections.svelte"
+
+new App({
+    target: document.body
+})
--- a/src/client/index.js
+++ b/src/client/index.js
--- a/src/style/_base.scss
+++ b/src/style/_base.scss
@ -54,3 +54,30 @@ body {
 #appContent {
    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;
+            }
+        }
+    
+    }
+}
--- a/src/style/app/pulldown.scss
+++ b/src/style/app/pulldown.scss
@ -4,8 +4,11 @@
    position:absolute;
    left:0px;
    height: 100%;
-    display:none;
-    opacity:0.5;
+    width:100%;
+    top:0px;
+    opacity:0.25;
+    border:none;
+    outline:none;
    background-color:#AAAAAA;

    z-index: 1000;
@ -13,9 +16,10 @@

 .pulldown {
    position: absolute;
-    width: 250px;
+    width: 300px;
    height: 400px;
    background-color: #191919;
+    color: #dddddd;

    top:0px;
    left:50%;
@ -26,5 +30,9 @@
        height: 100%;
    }

+    p, h1, h2 {
+        margin:0px;
+    }
+
    z-index: 1001;
 }
--- a/src/style/app/uploader/add_new_files.scss
+++ b/src/style/app/uploader/add_new_files.scss
@ -11,18 +11,26 @@
            font-size: 30px;

            span {
-                font-size:16px;
                position:relative;
+
+                &._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) {
                font-size: 40px;

-                span {
+                span._add_files_txt {
                    font-size:20px;
-                    position:relative;
                    top:-6px;
                    left:10px;
                }
--- a/src/style/downloads.scss
+++ b/src/style/downloads.scss
@ -6,6 +6,15 @@
@use "app/uploads";
@use "base";

-body {
-    background-color: base.$Background;
+#appContent {
+    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);
+    }
 }
--- a/src/svelte/App.svelte
+++ b/src/svelte/App.svelte
@ -1,6 +1,7 @@
 <script>
    import { onMount } from "svelte";
    import Topbar from "./elem/Topbar.svelte";
+    import PulldownManager from "./elem/PulldownManager.svelte";
    import UploadWindow from "./elem/UploadWindow.svelte";
    
    /** 
@ -9,25 +10,14 @@
    let topbar;

    /**
-     * @type HTMLButtonElement
+     * @type PulldownManager
    */
-    let overlay;
-
-    onMount(() => {
-        overlay.addEventListener("click", () => {
-            overlay.style.display = ""
-        })
-    })
+    let pulldownManager;
 </script>

-<Topbar bind:this={topbar} />
+<Topbar bind:this={topbar} pulldown={pulldownManager} />
 <div id="appContent">
-    <button id="overlay" bind:this={overlay} />
-    <div class="pulldown" style:display="none">
-        
-    </div>
+    <PulldownManager bind:this={pulldownManager} />

    <UploadWindow/>
 </div>
-
-<p class="background-t">monofile</p>
--- a/src/svelte/Collections.svelte
+++ b/src/svelte/Collections.svelte
@ -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>
--- a/src/svelte/elem/PulldownManager.svelte
+++ b/src/svelte/elem/PulldownManager.svelte
@ -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}
--- a/src/svelte/elem/Topbar.svelte
+++ b/src/svelte/elem/Topbar.svelte
@ -1,9 +1,24 @@
 <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>

 <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">account</button>

--- a/src/svelte/elem/transition/_void.js
+++ b/src/svelte/elem/transition/_void.js
@ -1,6 +1,6 @@
 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()

    return {
@ -10,7 +10,7 @@ export function _void(node, { duration, easingFunc, op }) {

            return `
                white-space: nowrap;
-                height: ${(eased)*(rect.height)}px;
+                ${prop||"height"}: ${(eased)*(rect[prop||"height"])}px;
                padding: 0px;
                opacity:${eased};
                overflow: clip;
--- a/src/svelte/elem/uploader/AttachmentZone.svelte
+++ b/src/svelte/elem/uploader/AttachmentZone.svelte
@ -1,6 +1,7 @@
 <script>
    import { createEventDispatcher } from "svelte";
    import { circIn, circOut } from "svelte/easing"
+    import { fade } from "svelte/transition";
    import { _void } from "../transition/_void"

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

 <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}
        <div id="file_add_btns" out:_void in:_void={{easingFunc:circOut}}>
            <button on:click={() => uploadType = uploadTypes.files} >upload files...</button>