From 57f26112ab383c09765b49f09cbf58d7462b75b2 Mon Sep 17 00:00:00 2001
From: Janne Koschinski <janne@kuschku.de>
Date: Sun, 18 Mar 2018 19:12:24 +0100
Subject: [PATCH] Improved upload API
---
assets/js/component/copy.js | 13 ++++
assets/js/component/fake-input.js | 27 +++++++
assets/js/fake-input.js | 22 ------
assets/js/page_upload.js | 4 +-
assets/sass/_page_upload.sass | 121 +++++++++++++++++++++++++++++-
templates/_footer.html | 2 +-
templates/image_detail.html | 12 +--
templates/upload.html | 13 +++-
8 files changed, 177 insertions(+), 37 deletions(-)
create mode 100644 assets/js/component/copy.js
create mode 100644 assets/js/component/fake-input.js
delete mode 100644 assets/js/fake-input.js
diff --git a/assets/js/component/copy.js b/assets/js/component/copy.js
new file mode 100644
index 0000000..8ea2648
--- /dev/null
+++ b/assets/js/component/copy.js
@@ -0,0 +1,13 @@
+function initCopy() {
+ Array.prototype.slice.call(document.querySelectorAll("button.copy[data-target]:not([data-bound-copy])")).forEach((button) => {
+ const target = document.querySelector(button.dataset["target"]);
+ if (target) {
+ button.addEventListener("click", () => {
+ target.select();
+ document.execCommand("Copy");
+ });
+ elem.dataset["bound-copy"] = "true";
+ }
+ });
+}
+initCopy();
\ No newline at end of file
diff --git a/assets/js/component/fake-input.js b/assets/js/component/fake-input.js
new file mode 100644
index 0000000..3122c56
--- /dev/null
+++ b/assets/js/component/fake-input.js
@@ -0,0 +1,27 @@
+const keyListener = (event) => {
+ if (event.which === 13) {
+ event.preventDefault();
+ }
+};
+
+const changeListener = (event) => {
+ requestAnimationFrame(() => {
+ const element = event.target;
+
+ if (element.innerText === "\n") {
+ element.innerText = "";
+ }
+ })
+};
+
+function initFakeInput() {
+ Array.prototype.slice.call(document.querySelectorAll(".fake-input[contenteditable]:not([bound-fake-input])")).forEach(elem => {
+ elem.addEventListener("input", changeListener);
+ if (elem.dataset["multiline"] === undefined) {
+ elem.addEventListener("keypress", keyListener);
+ }
+ elem.dataset["bound-fake-input"] = "true";
+ });
+}
+
+initFakeInput();
\ No newline at end of file
diff --git a/assets/js/fake-input.js b/assets/js/fake-input.js
deleted file mode 100644
index ba67686..0000000
--- a/assets/js/fake-input.js
+++ /dev/null
@@ -1,22 +0,0 @@
-const keyListener = (event) => {
- if (event.which === 13) {
- event.preventDefault();
- }
-};
-
-const changeListener = (event) => {
- requestAnimationFrame(() => {
- const element = event.target;
-
- if (element.innerText === "\n") {
- element.innerText = "";
- }
- })
-};
-
-Array.prototype.slice.call(document.querySelectorAll(".fake-input[contenteditable]")).forEach(elem => {
- elem.addEventListener("input", changeListener);
- if (elem.dataset["multiline"] === undefined) {
- elem.addEventListener("keypress", keyListener);
- }
-});
\ No newline at end of file
diff --git a/assets/js/page_upload.js b/assets/js/page_upload.js
index 5dea72e..461e50a 100644
--- a/assets/js/page_upload.js
+++ b/assets/js/page_upload.js
@@ -13,13 +13,14 @@ const form = document.querySelector("form.upload");
const element = document.querySelector("form.upload input[type=file]");
const results = document.querySelector(".uploading.images");
element.addEventListener("change", () => {
+ form.classList.add("submitted");
for (let file of element.files) {
const reader = new FileReader();
reader.addEventListener("load", (e) => {
const dataUrl = e.target.result;
const image_container = document.createElement("div");
- image_container.classList.add("uploading", "image");
+ image_container.classList.add("detail", "uploading");
const image_title = document.createElement("h2");
image_title.classList.add("title", "fake-input");
@@ -42,6 +43,7 @@ element.addEventListener("change", () => {
image_container.appendChild(image_description);
results.appendChild(image_container);
+ initFakeInput();
const data = new FormData();
data.append("file", file, file.name);
diff --git a/assets/sass/_page_upload.sass b/assets/sass/_page_upload.sass
index 2dee03e..ac34a99 100644
--- a/assets/sass/_page_upload.sass
+++ b/assets/sass/_page_upload.sass
@@ -54,4 +54,123 @@
bottom: 0
opacity: 0
&.submitted
- display: none
\ No newline at end of file
+ display: none
+ .uploading.images
+ display: flex
+ flex-direction: row
+ align-items: start
+ align-self: center
+ margin: 32px
+ .sidebar
+ width: 250px
+ margin-left: 32px
+ .url
+ background: #333333
+ border-radius: 4px
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4)
+ padding: 8px
+ margin-bottom: 8px
+ p
+ color: #ffffff
+ div
+ display: flex
+ flex-direction: row
+ input
+ background: none
+ color: #fff
+ opacity: 0.4
+ border: none
+ flex-shrink: 1
+ display: block
+ flex-grow: 1
+ width: 0
+ text-overflow: ellipsis
+ button.copy
+ display: block
+ background: #FFC107
+ padding: 4px 16px
+ border-radius: 2px
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1)
+ border: none
+ font-family: 'Lato', sans-serif
+ font-size: 10pt
+ line-height: 24px
+ margin-left: 8px
+ cursor: pointer
+ .actions
+ background: #333333
+ border-radius: 4px
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4)
+ display: flex
+ flex-direction: row
+ margin-bottom: 8px
+ .delete-form, .update-form
+ display: flex
+ flex-grow: 1
+ input[type=submit]
+ display: block
+ background: #FFC107
+ padding: 4px 16px
+ border-radius: 2px
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1)
+ border: none
+ font-family: 'Lato', sans-serif
+ font-size: 10pt
+ line-height: 24px
+ margin: 8px
+ flex-grow: 1
+ cursor: pointer
+ &:hover, &:focus
+ background: #FFD54F
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2)
+ .detail
+ max-width: 640px
+ width: 100%
+ background: #333333
+ border-radius: 4px
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4)
+ .title
+ line-height: 1.25
+ padding: 16px
+ vertical-align: middle
+ font-size: 14pt
+ font-weight: normal
+ color: #eee
+ background: none
+ border: none
+ width: 100%
+ box-sizing: border-box
+ &:not(.fake-input):empty
+ display: none
+ & + .image
+ border-top-left-radius: 4px
+ border-top-right-radius: 4px
+ .image
+ background: #000
+ display: flex
+ flex-direction: row
+ justify-content: center
+ align-items: start
+ img
+ max-width: 100%
+ .description
+ line-height: 1.25
+ padding: 16px
+ vertical-align: middle
+ font-size: 11pt
+ font-weight: normal
+ color: #eee
+ background: none
+ border: none
+ width: 100%
+ box-sizing: border-box
+ font-family: 'Lato', sans-serif
+ resize: vertical
+ white-space: pre-line
+ &:not(.fake-input):empty
+ display: none
+ .fake-input[contenteditable]:empty:before
+ opacity: 0.4
+ content: attr(placeholder)
+ form.upload:not(.submitted)+.uploading.images
+ display: none
\ No newline at end of file
diff --git a/templates/_footer.html b/templates/_footer.html
index 6e76fdb..6c7e361 100644
--- a/templates/_footer.html
+++ b/templates/_footer.html
@@ -1,3 +1,3 @@
{{define "footer"}}
-<script src="/assets/js/fake-input.js"></script>
+<script src="/assets/js/component/fake-input.js"></script>
{{end}}
\ No newline at end of file
diff --git a/templates/image_detail.html b/templates/image_detail.html
index f89c667..0e81e3c 100644
--- a/templates/image_detail.html
+++ b/templates/image_detail.html
@@ -50,17 +50,7 @@
</div>
</div>
</div>
-<script>
- Array.prototype.slice.call(document.querySelectorAll("button.copy[data-target]")).forEach((button) => {
- const target = document.querySelector(button.dataset["target"]);
- if (target) {
- button.addEventListener("click", () => {
- target.select();
- document.execCommand("Copy");
- })
- }
- });
-</script>
+<script src="/assets/js/component/copy.js"></script>
{{if .IsMine}}
<script src="/assets/js/page_image_detail.js"></script>
{{end}}
diff --git a/templates/upload.html b/templates/upload.html
index 9fd4431..8469366 100644
--- a/templates/upload.html
+++ b/templates/upload.html
@@ -25,7 +25,18 @@
<input type="file" name="file" accept=".jpg,.jpeg,.png,.gif,.apng,.tiff,.tif,.bmp,.webp,.mp4,.mov" multiple/>
</label>
</form>
- <div class="uploading images"></div>
+ <div class="uploading images">
+ <div class="sidebar">
+ <div class="url">
+ <p>Album</p>
+ <div>
+ <input id="url_full" type="text" value="https://i.k8r.eu/a/ERROR">
+ <button class="copy" data-target="#url_full">Copy</button>
+ </div>
+ </div>
+ </div>
+ </div>
</div>
<script src="/assets/js/page_upload.js"></script>
+<script src="/assets/js/component/copy.js"></script>
{{end}}
\ No newline at end of file
--
GitLab