Browse Source

starting to work on upload

main
forest 4 months ago
parent
commit
aee98db57b
4 changed files with 79 additions and 28 deletions
  1. +5
    -3
      index.gotemplate.html
  2. +2
    -1
      main.go
  3. +4
    -5
      static/app.css
  4. +68
    -19
      static/app.js

+ 5
- 3
index.gotemplate.html View File

@ -11,7 +11,7 @@
</script>
<script src="static/app.js"></script>
<link rel="preload" href="static/bpgdec8.wasm" as="fetch" type="application/wasm" crossorigin="">
<link rel="preload" href="static/bpgdec8.wasm" as="fetch" type="application/wasm">
<script src="static/bpgdec8.js"></script>
<style>
@ -24,8 +24,10 @@
<link rel="preload" as="image" href="static/image.svg">
<link rel="preload" as="image" href="static/video.png">
<link rel="preload" as="image" href="static/dice.png">
<link rel="preload" href="static/spray-paint.bpg">
<link rel="preload" as="image" href="static/dice.webp">
<link rel="preload" as="image" href="static/spray-paint.webp">
<link rel="preload" as="image" href="static/polaroid-border-1.webp">
<link rel="preload" as="image" href="static/polaroid-border-2.webp">
</head>
<body>


+ 2
- 1
main.go View File

@ -41,6 +41,7 @@ type Post struct {
AuthorDisplayName string
Type PostType
TextContent string
TransparentImage bool
URL string
Filename string
ContentType string
@ -189,7 +190,7 @@ func main() {
http.Redirect(response, request, "/", http.StatusFound)
})
mux.HandleFunc("/upload-meta/", func(response http.ResponseWriter, request *http.Request) {
mux.HandleFunc("/upload-meta", func(response http.ResponseWriter, request *http.Request) {
if request.Method == "POST" {
author := getAuthor(db, request)
if author == nil {


+ 4
- 5
static/app.css View File

@ -71,7 +71,7 @@ input[type="text"]{
textarea {
width: 420px;
height: 140px;
height: 100px;
resize: vertical;
padding: 10px;
box-sizing: border-box;
@ -239,15 +239,14 @@ textarea {
background: rgb(99, 130, 133);
border-top-left-radius: 1rem;
border-top-right-radius: 1rem;
}
.text-post-svg-container {
width: 420px;
height: 315px;
}
.text-post-svg-container {}
.text-post-randomize-button-container {
position: relative;
width: 100%;
}
.text-post-randomize-button {
border-radius: 1.45rem;


+ 68
- 19
static/app.js View File

@ -7,7 +7,9 @@
const textPostMaxLines = 7;
const polaroidTextMaxLines = 2;
const polaroidTextVerticalFudge = -50;
const polaroidRandomizeButtonFudge = [50,100];
let lastMaxLines = 7;
let lastDefaultTextValue = "...";
const textPostMaxWidth = 420;
const textPostLineSpacing = 1.3;
const textPostFontSize = "22px";
@ -22,6 +24,7 @@
const imageUploadTypeIconSize = "100px";
let textPostPreviewContainer;
let imagePostIsTransparent;
let imagePreviewCanvas;
const imagePostMaxDimension = 1024;
const polaroidBorderTop = 55;
const polaroidBorderLeft = 100;
@ -29,8 +32,8 @@
const polaroidBorderRight = 100;
const polaroidInsetTop = 51;
const polaroidInsetLeft = 51;
const polaroidInsetBottom = 222;
const polaroidInsetRight = 57;
const polaroidInsetBottom = 220;
const polaroidInsetRight = 55;
const polaroidBorder = [polaroidBorderTop, polaroidBorderLeft, polaroidBorderBottom, polaroidBorderRight];
const polaroidBorderThickness = 0.5;
@ -81,12 +84,13 @@
postIcon.style.display = "none";
setTimeout(() => {
const contentPreviewArea = createElement(postElement, "div");
const contentPreviewArea = createElement(postElement, "div", {class: "vertical align-center"});
let textInput;
const reRenderTextPostPreview = (maxLines) => {
const reRenderTextPostPreview = (maxLines, defaultTextValue) => {
lastMaxLines = maxLines;
clearElementContents(textPostPreviewContainer)
lastDefaultTextValue = defaultTextValue;
clearElementContents(textPostPreviewContainer);
const textPostSVGContainer = createElement(textPostPreviewContainer, "div", {
class: "text-post-svg-container",
@ -95,17 +99,26 @@
height: `${Math.round(315*(maxLines/textPostMaxLines))}px`,
}
});
createTextPost(textPostSVGContainer, textInput.value || "...", maxLines, textPostRandomSeed);
createTextPost(textPostSVGContainer, textInput.value || defaultTextValue || "", maxLines, textPostRandomSeed);
};
const createRandomizeButton = (parent, maxLines) => {
const polaroid = parent.querySelector(".polaroid");
const container = createElement(parent, "div", {class: "text-post-randomize-button-container"});
const randomizeButton = createElement(
createElement(textPostPreviewContainer, "div", {class: "text-post-randomize-button-container"}),
container,
"div",
{
class: "material-style-button text-post-randomize-button centered-flex",
onclick: () => {
textPostFontIndex ++;
textPostRandomSeed = Math.random();
reRenderTextPostPreview(maxLines);
textPostRandomSeed = Math.round(Math.random()*2147483647);
reRenderTextPostPreview(lastMaxLines, lastDefaultTextValue);
if(polaroid) {
const randomBorder = mulberry32(textPostRandomSeed)() > 0.5 ? '1' : '2';
polaroid.style.borderImageSource = `url('static/polaroid-border-${randomBorder}.webp')`;
}
}
}
);
@ -114,36 +127,62 @@
alt: "randomize",
style: { width: "2.1rem", height: "2.1rem" },
});
};
return container;
}
const switchToTextPost = () => {
clearElementContents(contentPreviewArea);
displayUploadOptions();
textPostPreviewContainer = createElement(contentPreviewArea, "div", {class: "text-post-container"});
reRenderTextPostPreview(textPostMaxLines);
const postPreview = createElement(contentPreviewArea, "div", {class: "text-post-container"});
textPostPreviewContainer = createElement(postPreview, "div", {class: "vertical align-center"});
reRenderTextPostPreview(textPostMaxLines, "...");
createRandomizeButton(postPreview);
};
const onImageSelected = (e) => {
clearElementContents(contentPreviewArea);
createImagePreview(contentPreviewArea, e.target.files[0]).then(({canvas, elementWidthPx, elementHeightPx}) => {
imagePreviewCanvas = canvas;
imagePostIsTransparent = canvasIsTransparent(canvas);
if(imagePostIsTransparent) {
// Transparent images don't get the polaroid border -- just handle it like a text post
// and slam the image in right above the text.
canvas.style.display = 'block';
const postPreview = createElement(contentPreviewArea, "div", {
class: "text-post-container vertical align-center",
style: { paddingTop: '1em' },
});
postPreview.appendChild(canvas);
textPostPreviewContainer = createElement(postPreview, "div", {class: "vertical align-center"});
reRenderTextPostPreview(textPostMaxLines, "...");
createRandomizeButton(contentPreviewArea);
} else {
const polaroid = createPolaroid(contentPreviewArea, canvas, elementWidthPx, elementHeightPx, "polaroid-border-1.webp");
// opaque images (photos) get the polaroid border with theh text overlayed on the bottom of the border
const randomBorder = mulberry32(textPostRandomSeed)() > 0.5 ? '1' : '2';
const polaroid = createPolaroid(contentPreviewArea, canvas, elementWidthPx, elementHeightPx, `polaroid-border-${randomBorder}.webp`);
textPostPreviewContainer = createElement(
createElement(polaroid, "div", {class: "position-absolute"}),
"div",
{
style: {
position: "relative",
top: `${elementHeightPx+polaroidTextVerticalFudge*polaroidBorderThickness}px`
top: `${Math.round(elementHeightPx+polaroidTextVerticalFudge*polaroidBorderThickness)}px`
}
}
);
reRenderTextPostPreview(polaroidTextMaxLines);
reRenderTextPostPreview(polaroidTextMaxLines, "");
const randomizeButton = createRandomizeButton(polaroid);
randomizeButton.style.top = `${Math.round(elementHeightPx+(polaroidBorderBottom+polaroidRandomizeButtonFudge[0])*polaroidBorderThickness)}px`;
randomizeButton.style.left = `${Math.round(polaroidRandomizeButtonFudge[1]*polaroidBorderThickness)}px`;
}
});
};
@ -200,7 +239,7 @@
const onTextInputChanged = debounce(() => reRenderTextPostPreview(lastMaxLines), 250);
const onTextInputChanged = debounce(() => reRenderTextPostPreview(lastMaxLines, lastDefaultTextValue), 250);
const checkIfTextInputChanged = () => {
if(textInput.value != lastTextPostValue) {
onTextInputChanged();
@ -217,6 +256,16 @@
textInput.focus();
switchToTextPost();
createElement(postElement, 'button', {
onclick: () => {
// xhr("POST", "upload-meta", {}, () => {
// imagePreviewCanvas.toBlob((jpegBlob) => {
//
// }, "image/jpeg", 0.9);
// });
},
}, "POAST");
}, 500);
};
} else {
@ -243,8 +292,8 @@
}
});
polaroidContainer.style.marginTop =`${Math.round(10+polaroidInsetTop*polaroidBorderThickness)}px`;
polaroidContainer.style.marginBottom = `${Math.round(10+polaroidInsetBottom*polaroidBorderThickness)}px`;
polaroidContainer.style.marginTop =`${Math.round(polaroidInsetTop*polaroidBorderThickness)}px`;
polaroidContainer.style.marginBottom = `${Math.round(polaroidInsetBottom*polaroidBorderThickness)}px`;
polaroidContainer.appendChild(canvas);
canvas.classList.add("position-absolute");
@ -344,7 +393,7 @@
function createTextPost(parent, text, maxLines, randomSeed) {
// max 32 bit int = 2,147,483,647
const prng = mulberry32(randomSeed*2147483647);
const prng = mulberry32(randomSeed);
const randNorm = () => (prng()-0.5)*2;
const fontFamily = [


Loading…
Cancel
Save