Overhauled post creation

Made the menu significantly better and made it possible to upload files directly from the post page
This commit is contained in:
Xodrium 2023-02-10 18:17:40 -05:00
parent b2ce13eea1
commit 2b8158f666
11 changed files with 219 additions and 125 deletions

View file

@ -25,6 +25,8 @@
#main {
min-height: 250px;
max-height: 500px;
overflow-y: scroll;
}
#main.tiny {

View file

@ -0,0 +1,27 @@
<style>
.button {
padding: 0.5rem;
background-color: var(--dark-3);
border: none;
font-family: 'Open Sans';
border-radius: 0.5rem;
margin: 0.2rem;
}
.button a {
color: var(--light-1);
}
</style>
<script>
export let clickFunc = () => {};
export let button = '';
</script>
<button on:click={clickFunc} class='button'>
<a href='#'><slot/></a>
</button>

View file

@ -0,0 +1,55 @@
<script>
import Button from '$lib/components/Button.svelte';
export let form;
let fileInput;
let files;
let preview;
function getBase64(image) {
const reader = new FileReader();
reader.readAsDataURL(image);
reader.onload = e => {
preview = e.target.result;
uploadFunction(e.target.result);
};
};
async function uploadFunction(imgBase64) {
const imgData = imgBase64.split(',').pop();
var fData = (new FormData());
fData.append('img',imgData);
fData.append('extension',fileInput.value.split('.').pop());
form = await fetch(`/api/fileCreate`, {
method: 'POST',
body: fData
}).then(x => x.json());
};
</script>
<style>
.hidden {
display: none;
}
img {
max-width: 250px;
}
</style>
<form action='/api/postCreate' method='POST' >
{#if preview}
<img src={preview} alt="Image preview"/>
{:else}
<img src='/icon_sanifae.svg' alt="Image preview"/>
{/if}
<input class="hidden" id="file-to-upload" type="file" bind:files bind:this={fileInput} on:change={() => getBase64(files[0])}/>
<p>
<Button class="upload-btn" clickFunc={ () => fileInput.click() }>Upload</Button>
</p>
</form>

View file

@ -1,14 +1,12 @@
<script>
import Area from '$lib/components/Area.svelte';
import {formatPost} from '$lib/util.js';
import PostButton from '$lib/components/PostButton.svelte';
import PostBody from '$lib/components/PostBody.svelte';
export let success, username, content, upvotes, downvotes, id;
let query = (id) ? `/post/${id}` : '';
let contentSplit = formatPost(content || '');
let fData;
function vote(v) {
@ -29,10 +27,7 @@
</script>
<style>
.button {
width: auto;
height: 35px;
}
.votes {
font-weight: bold;
font-size: 1.5rem;
@ -59,44 +54,31 @@
</p>
</Area>
{:else}
<Area tiny='{!!id}'>
<Area>
<span slot="header">
<a href='/user/{username}'>
{username}
</a>
</span>
<span slot="main">
{#each contentSplit as line}
{#if line && line.type == 'img'}
<img src={line.url} alt='Image preview'>
{:else}
<p>{line}</p>
{/if}
{/each}
<PostBody content={content} />
</span>
<span slot="footer">
<span class='vote-area'>
<a on:click={() => vote('up')} href=''>
<img src='/upvote.svg' class='button' alt='Upvote'>
</a>
<span class='votes'>
{upvotes + 0}
</span>
</span>
<span class='vote-area'>
<a on:click={() => vote('down')} href=''>
<img src='/downvote.svg' class='button' alt='Downvote'>
</a>
<span class='votes'>
{downvotes + 0}
</span>
</span>
<PostButton
clickFunc={() => vote('up')}
data={upvotes * 1}
icon='/upvote.svg'
/>
<PostButton
clickFunc={() => vote('down')}
data={downvotes * 1}
icon='/downvote.svg'
/>
{#if id}
<span class='vote-area'>
<a href='/post/{id}'>
<img src='/view.svg' class='button' alt='View'>
</a>
</span>
<PostButton
href='/post/{id}'
icon='/view.svg'
/>
{/if}
</span>
</Area>

View file

@ -0,0 +1,27 @@
<style>
img {
max-width: 250px;
display: block;
}
</style>
<script>
import {formatPost} from '$lib/util.js';
export let content = '';
let contentSplit;
$: contentSplit = formatPost(content || '');
console.log(contentSplit);
</script>
<span>
{#each contentSplit as line}
{#if line && line.type == 'img'}
<img src={line.url} alt='Image preview'>
{:else}
<p>{line}</p>
{/if}
{/each}
</span>

View file

@ -0,0 +1,31 @@
<style>
.votes {
font-weight: bold;
font-size: 1.5rem;
}
.vote-area {
margin-right: 30px;
}
.button {
width: auto;
height: 35px;
}
</style>
<script>
export let clickFunc = () => {};
export let href = '#';
export let data = ' ';
export let icon = '/upvote.svg';
</script>
<span class='vote-area'>
<a on:click={clickFunc} href='{href}'>
<img src='{icon}' class='button' alt='Vote button'>
</a>
<span class='votes'>
{data}
</span>
</span>

View file

@ -81,11 +81,16 @@ let formatPost = function(post) {
return post;
}
function block(bool) {
return (bool) ? 'block' : 'inline';
}
export {
checkLength,
checkRegex,
calcVote,
handleSubmit,
calcVoteUser,
formatPost
formatPost,
block
};

View file

@ -2,6 +2,7 @@
:global(:root) {
--dark-1: #1a1b1d;
--dark-2: #22242b;
--dark-3: #5d606b;
--light-1: #ffffff;
@ -83,9 +84,6 @@
<a href='/new_post'>
Create
</a>
<a href='/new_file'>
Create file
</a>
{:else}
<a href='/account'>
Log in / Register

View file

@ -1,75 +0,0 @@
<script>
import Area from '$lib/components/Area.svelte';
/** @type {import('./$types').ActionData} */
export let form;
let fileInput;
let files;
let preview;
function getBase64(image) {
const reader = new FileReader();
reader.readAsDataURL(image);
reader.onload = e => {
preview = e.target.result;
uploadFunction(e.target.result);
};
};
async function uploadFunction(imgBase64) {
const imgData = imgBase64.split(',').pop();
var fData = (new FormData());
fData.append('img',imgData);
fData.append('extension',fileInput.value.split('.').pop());
form = await fetch(`/api/fileCreate`, {
method: 'POST',
body: fData
}).then(x => x.json());
};
</script>
<style>
textarea {
width: 10rem;
height: 10rem;
}
.hidden {
display: none;
}
img {
max-width: 250px;
}
</style>
<Area>
<p slot="header">
Upload File
</p>
<form slot="main" action='/api/postCreate' method='POST' >
{#if preview}
<img src={preview} alt="Image preview"/>
{:else}
<img src='/icon_sanifae.svg' alt="Image preview"/>
{/if}
<input class="hidden" id="file-to-upload" type="file" bind:files bind:this={fileInput} on:change={() => getBase64(files[0])}/>
<p>
<a href='#' class="upload-btn" on:click={ () => fileInput.click() }>Upload</a>
</p>
</form>
<p slot="footer">
{#if form?.success}
{#if form?.href}
<a href='{form?.href}'>{form?.success}</a>
{:else}
{form?.success}
{/if}
{/if}
Create an image for the world to see.
</p>
</Area>

View file

@ -1,10 +1,30 @@
<script>
import Area from '$lib/components/Area.svelte';
import FileUpload from '$lib/components/FileUpload.svelte';
import PostBody from '$lib/components/PostBody.svelte';
import Button from '$lib/components/Button.svelte';
import { handleSubmit } from '$lib/util.js';
import { handleSubmit, formatPost } from '$lib/util.js';;
/** @type {import('./$types').ActionData} */
export let form;
let uploadForm = {};
let formContent = '';
let formBody;
let currentState = 'editor';
function setState(editor) {
currentState = editor;
}
$: if (uploadForm.href) {
currentState = 'editor';
formContent += `\nimg||${uploadForm.href.split('/').pop()}`;
uploadForm.href = false;
}
</script>
<style>
@ -12,21 +32,42 @@
width: 10rem;
height: 10rem;
}
.wrapper {
display: flex;
flex-direction: row;
}
</style>
<Area>
<p slot="header">
Create Post
</p>
<form slot="main" action='/api/postCreate' method='POST' on:submit|preventDefault={async e => form = JSON.parse(await handleSubmit(e)) }>
<p>
<textarea name='content'></textarea>
</p>
<p>
<input formaction="?/create" type='submit' value='Post'>
</p>
<div class='main' slot='main'>
<form action='/api/postCreate'
method='POST'
on:submit|preventDefault={async e => form = JSON.parse(await handleSubmit(e)) }
>
<textarea name='content' style='display: none;' value={formContent}></textarea
</form>
<input formaction="?/create" type='submit' value='Post' bind:this={formBody} style='display: none;'>
{#if currentState == 'editor'}
<p>
<textarea name='content' bind:value={formContent}></textarea>
</p>
{:else if currentState == 'visual'}
<PostBody content={formContent} />
{:else}
<FileUpload bind:form={uploadForm} />
{/if}
</div>
<span slot="footer">
<div class='wrapper'>
<Button clickFunc={() => { setState('editor')}}>Edit</Button>
<Button clickFunc={() => { setState('visual')}}>View</Button>
<Button clickFunc={() => { setState('upload')}}>Upload file</Button>
<Button clickFunc={() => formBody.click()}>Create</Button>
</div>
<p>
{#if form?.success}
{#if form?.href}

View file

@ -11,4 +11,5 @@
content={data.content}
upvotes={data.upvotes}
downvotes={data.downvotes}
id={data.id}
></Post>