From 18f9f49c0a7dae500501208ef9153c7cbbb525ac Mon Sep 17 00:00:00 2001 From: Leon Mika Date: Wed, 25 Mar 2026 21:09:57 +1100 Subject: [PATCH] Started UI for editing images --- assets/css/main.scss | 13 ++++-- assets/js/controllers/edit_upload.js | 59 ++++++++++++++++++++++++ assets/js/main.js | 2 + cmds/server.go | 1 + handlers/posts.go | 4 +- handlers/uploads.go | 21 +++++++++ package-lock.json | 67 +++++++++++++++++++++++++++- package.json | 3 +- views/posts/edit.html | 2 +- views/uploads/edit.html | 28 ++++++++++++ 10 files changed, 191 insertions(+), 9 deletions(-) create mode 100644 assets/js/controllers/edit_upload.js create mode 100644 views/uploads/edit.html diff --git a/assets/css/main.scss b/assets/css/main.scss index 2e0883a..addf5ce 100644 --- a/assets/css/main.scss +++ b/assets/css/main.scss @@ -31,19 +31,24 @@ $container-max-widths: ( font-size: 0.9rem; } -// Post form +// Large editor +// +// Used for edit canvases which take up the entire window -// Post edit page styling -.post-edit-page { +.large-editor { height: 100vh; } -.post-edit-page main { +.large-editor main { display: flex; flex-direction: column; overflow: hidden; } +// Post form + +// Post edit page styling + .post-edit-page .post-form { flex: 1; display: flex; diff --git a/assets/js/controllers/edit_upload.js b/assets/js/controllers/edit_upload.js new file mode 100644 index 0000000..11ed862 --- /dev/null +++ b/assets/js/controllers/edit_upload.js @@ -0,0 +1,59 @@ +import Handlebars from "handlebars"; +import {Controller} from "@hotwired/stimulus"; + +const processorFrame = Handlebars.compile(` +
+
+ {{name}} + X +
+
+ {{{props}}} +
+
+`); + +const processors = [ + { + name: "shadow", + label: "Shadow", + template: Handlebars.compile(`This processor has no properties.`), + }, + { + name: "resize", + label: "Resize", + template: Handlebars.compile(` +
+ + +
+
+ + +
+ `), + } +]; + +export default class UploadEditController extends Controller { + static targets = ['processList']; + + connect() { + this._rebuildProcessList(); + } + + _rebuildProcessList() { + let el = this.processListTarget; + + // TEMP + let cardTemplate = processors[0].template({ + "id": "shadow", + }); + let cardOuter = processorFrame({ + name: processors[0].label, + props: cardTemplate, + }); + el.innerHTML = cardOuter; + // END TEMP + } +} \ No newline at end of file diff --git a/assets/js/main.js b/assets/js/main.js index fcbe286..d3ff4c6 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -8,6 +8,7 @@ import LogoutController from "./controllers/logout"; import FirstRunController from "./controllers/firstrun"; import UploadController from "./controllers/upload"; import ShowUploadController from "./controllers/show_upload"; +import EditUploadController from "./controllers/edit_upload"; import PagelistController from "./controllers/pagelist"; window.Stimulus = Application.start() @@ -18,6 +19,7 @@ Stimulus.register("logout", LogoutController); Stimulus.register("first-run", FirstRunController); Stimulus.register("upload", UploadController); Stimulus.register("show-upload", ShowUploadController); +Stimulus.register("edit-upload", EditUploadController); Stimulus.register("pagelist", PagelistController); feather.replace(); \ No newline at end of file diff --git a/cmds/server.go b/cmds/server.go index 36e5923..06f7352 100644 --- a/cmds/server.go +++ b/cmds/server.go @@ -149,6 +149,7 @@ Starting weiro without any arguments will start the server. siteGroup.Post("/uploads/pending/:guid", uh.UploadPart) siteGroup.Post("/uploads/pending/:guid/finalize", uh.UploadComplete) siteGroup.Delete("/uploads/:uploadID", uh.Delete) + siteGroup.Get("/uploads/:uploadID/edit", uh.Edit) siteGroup.Get("/settings", ssh.General) siteGroup.Post("/settings", ssh.UpdateGeneral) diff --git a/handlers/posts.go b/handlers/posts.go index 3326533..0e491aa 100644 --- a/handlers/posts.go +++ b/handlers/posts.go @@ -75,7 +75,7 @@ func (ph PostsHandler) New(c fiber.Ctx) error { "post": p, "categories": cats, "selectedCategories": map[int64]bool{}, - "bodyClass": "post-edit-page", + "bodyClass": "large-editor", }) } @@ -116,7 +116,7 @@ func (ph PostsHandler) Edit(c fiber.Ctx) error { "post": post, "categories": cats, "selectedCategories": selectedCategories, - "bodyClass": "post-edit-page", + "bodyClass": "large-editor", }) })) } diff --git a/handlers/uploads.go b/handlers/uploads.go index fa2cb98..3553b09 100644 --- a/handlers/uploads.go +++ b/handlers/uploads.go @@ -162,3 +162,24 @@ func (uh UploadsHandler) UploadComplete(c fiber.Ctx) error { return c.Status(fiber.StatusAccepted).JSON(fiber.Map{}) } + +func (uh UploadsHandler) Edit(c fiber.Ctx) error { + uploadIDStr := c.Params("uploadID") + if uploadIDStr == "" { + return fiber.ErrBadRequest + } + uploadID, err := strconv.ParseInt(uploadIDStr, 10, 64) + if err != nil { + return fiber.ErrBadRequest + } + + upload, err := uh.UploadsService.FetchUpload(c.Context(), uploadID) + if err != nil { + return err + } + + return c.Render("uploads/edit", fiber.Map{ + "upload": upload, + "bodyClass": "large-editor", + }) +} diff --git a/package-lock.json b/package-lock.json index 2068fd3..eadf529 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,7 +8,8 @@ "@hotwired/stimulus": "^3.2.2", "bootstrap": "^5.3.8", "esbuild-sass-plugin": "^3.6.0", - "feather-icons": "^4.29.2" + "feather-icons": "^4.29.2", + "handlebars": "^4.7.8" }, "devDependencies": { "esbuild": "0.27.3" @@ -892,6 +893,27 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/handlebars": { + "version": "4.7.8", + "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.8.tgz", + "integrity": "sha512-vafaFqs8MZkRrSX7sFVUdo3ap/eNiLnb4IakshzvP56X5Nr1iGKAIqdX6tMlm6HcNRIkr6AxO5jFEoJzzpT8aQ==", + "license": "MIT", + "dependencies": { + "minimist": "^1.2.5", + "neo-async": "^2.6.2", + "source-map": "^0.6.1", + "wordwrap": "^1.0.0" + }, + "bin": { + "handlebars": "bin/handlebars" + }, + "engines": { + "node": ">=0.4.7" + }, + "optionalDependencies": { + "uglify-js": "^3.1.4" + } + }, "node_modules/has-flag": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", @@ -958,6 +980,21 @@ "node": ">=0.10.0" } }, + "node_modules/minimist": { + "version": "1.2.8", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz", + "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==", + "license": "MIT", + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/neo-async": { + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz", + "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==", + "license": "MIT" + }, "node_modules/node-addon-api": { "version": "7.1.1", "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz", @@ -1395,6 +1432,15 @@ "node": ">=14.0.0" } }, + "node_modules/source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "license": "BSD-3-Clause", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/source-map-js": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz", @@ -1462,12 +1508,31 @@ "license": "0BSD", "peer": true }, + "node_modules/uglify-js": { + "version": "3.19.3", + "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.19.3.tgz", + "integrity": "sha512-v3Xu+yuwBXisp6QYTcH4UbH+xYJXqnq2m/LtQVWKWzYc1iehYnLixoQDN9FH6/j9/oybfd6W9Ghwkl8+UMKTKQ==", + "license": "BSD-2-Clause", + "optional": true, + "bin": { + "uglifyjs": "bin/uglifyjs" + }, + "engines": { + "node": ">=0.8.0" + } + }, "node_modules/varint": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/varint/-/varint-6.0.0.tgz", "integrity": "sha512-cXEIW6cfr15lFv563k4GuVuW/fiwjknytD37jIOLSdSWuOI6WnO/oKwmP2FQTU2l01LP8/M5TSAJpzUaGe3uWg==", "license": "MIT", "peer": true + }, + "node_modules/wordwrap": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz", + "integrity": "sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==", + "license": "MIT" } } } diff --git a/package.json b/package.json index 5a786ac..3455630 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,7 @@ "@hotwired/stimulus": "^3.2.2", "bootstrap": "^5.3.8", "esbuild-sass-plugin": "^3.6.0", - "feather-icons": "^4.29.2" + "feather-icons": "^4.29.2", + "handlebars": "^4.7.8" } } diff --git a/views/posts/edit.html b/views/posts/edit.html index b9f5ea7..fbb94fa 100644 --- a/views/posts/edit.html +++ b/views/posts/edit.html @@ -1,5 +1,5 @@ {{ $isPublished := ne .post.State 1 }} -
+
+
+
+
+ {{ .upload.Upload.Alt }} +
+
+
+ +
+
+ + +
+
+
+
+
+
+ Actions go here +
+
\ No newline at end of file