first attempt at image attachments!

2 files changed, 339 insertions, 0 deletions

diff --git a/js/microblog.js b/js/microblog.js
new file mode 100644
index 0000000..f7963e3
--- /dev/null
+++ b/js/microblog.js
@@ -0,0 +1,193 @@
+'use strict';
+
+document.documentElement.classList.remove('no-js');
+
+const textarea = document.querySelector('textarea[name="content"]');
+const charCount = document.querySelector('#count');
+
+if (textarea) {
+	const maxCount = parseInt(textarea.getAttribute('maxlength'));
+
+	if (textarea.value.length > 0) {
+		const textLength = [...textarea.value].length;
+		charCount.textContent = maxCount - textLength;
+	} else {
+		charCount.textContent = maxCount;
+	}
+
+	textarea.addEventListener('input', function () {
+		const textLength = [...this.value].length;
+
+		charCount.textContent = maxCount - textLength;
+	}, false);
+}
+
+const postForm = document.querySelector('#post-new-form');
+let useDragDrop = (!!window.FileReader && 'draggable' in document.createElement('div'));
+useDragDrop = true;
+if (postForm) {
+	const droparea = postForm.querySelector('#post-droparea');
+	const attachmentsInput = postForm.querySelector('#post-attachments');
+	const data = {
+		'attachments': []
+	};
+
+
+	if (droparea && attachmentsInput) {
+		if (useDragDrop) {
+			console.log('init with modern file attachments');
+
+			const list = postForm.querySelector('#post-attachments-list');
+			list.addEventListener('click', function (e) {
+				e.preventDefault();
+
+				// remove attachment
+				if (e.target.nodeName.toLowerCase() == 'li') {
+					const filename = e.target.textContent;
+
+					data.attachments = data.attachments.filter(function (ele) {
+						return ele.name !== filename;
+					});
+
+					e.target.remove();
+				}
+			});
+
+			droparea.classList.remove('hidden');
+			document.querySelector('#post-attachments-label').classList.add('hidden');
+
+			droparea.ondragover = droparea.ondragenter = function (e) {
+				e.stopPropagation();
+				e.preventDefault();
+
+				e.dataTransfer.dropEffect = 'copy';
+				e.target.classList.add('drag');
+			};
+
+			droparea.ondragleave = function (e) {
+				e.target.classList.remove('drag');
+			};
+
+			droparea.onclick = function (e) {
+				e.preventDefault();
+
+				// make a virtual file upload
+				const input = document.createElement('input');
+				input.type = 'file';
+				input.setAttribute('multiple', '');
+				input.setAttribute('accept', 'image/*'); // only images for now
+
+				input.onchange = e => {
+					processSelectedFiles(e.target.files);
+				}
+
+				input.click();
+			};
+
+			function processSelectedFiles(files) {
+				if (!files || files.length < 1) return;
+
+				for (const file of files) {
+					const found = data.attachments.find(ele => ele.name === file.name);
+					if(found) continue; // skip existing attachments
+
+					data.attachments.push({
+						'name': file.name,
+						// todo: maybe some better form of dupe detection here?
+						'file': file
+					});
+
+					const li = document.createElement('li');
+					li.textContent = file.name;
+
+					const reader = new FileReader();
+
+					if(file.type.startsWith('image/')) {
+						reader.onload = function (e) {
+							var dataURL = e.target.result;
+
+							const preview = document.createElement('img');
+							preview.classList.add('file-preview');
+							preview.setAttribute('src', dataURL);
+
+							li.prepend(preview);
+						};
+						reader.onerror = function (e) {
+							console.log('An error occurred during file input: '+e.target.error.code);
+						};
+
+						reader.readAsDataURL(file);
+					}
+
+					list.append(li);
+				}
+			}
+
+			droparea.ondrop = function (e) {
+				if (e.dataTransfer) {
+					e.preventDefault();
+					e.stopPropagation();
+
+					processSelectedFiles(e.dataTransfer.files);
+				}
+
+				e.target.classList.remove('drag');
+			};
+
+			postForm.addEventListener('submit', async function (e) {
+				e.preventDefault();
+
+				const postFormData = new FormData();
+
+				postFormData.append('content', postForm.querySelector('[name="content"]').value);
+
+				for (const attachment of data.attachments) {
+					postFormData.append('attachments[]', attachment.file);
+				}
+
+				/*
+				for (const pair of postFormData.entries()) {
+					console.log(`${pair[0]}, ${pair[1]}`);
+				}
+				*/
+
+				const response = await fetch(postForm.getAttribute('action'), {
+					body: postFormData,
+					method: 'POST'
+				});
+
+				if (response.ok && response.status == 200) {
+					const txt = await response.text();
+					// console.log(response, txt);
+					window.location.href = postForm.dataset.redirect;
+				} else {
+					console.warn('error during post submission!', response);
+				}
+			});
+		} else {
+			// use the native file input dialog
+			// but enhanced
+			if (attachmentsInput) {
+				console.log('init with classic file attachments');
+
+				attachmentsInput.addEventListener('change', function (e) {
+					console.log(e.target.files);
+
+					const list = postForm.querySelector('#post-attachments-list');
+					list.replaceChildren();
+
+					for (const file of e.target.files) {
+						const li = document.createElement('li');
+						li.textContent = file.name;
+						list.append(li);
+					}
+				});
+			}
+		}
+	}
+}
+
+// better rounded corners
+if ('paintWorklet' in CSS) {
+	// CSS.paintWorklet.addModule('./js/squircle.js');
+}
diff --git a/js/squircle.js b/js/squircle.js
new file mode 100644
index 0000000..063a383
--- /dev/null
+++ b/js/squircle.js
@@ -0,0 +1,146 @@
+const drawSquircle = (ctx, geom, radius, smooth, lineWidth, color) => {
+  const defaultFill = color;
+  const lineWidthOffset = lineWidth / 2;
+  // OPEN LEFT-TOP CORNER
+  ctx.beginPath();
+  ctx.lineTo(radius, lineWidthOffset);
+  // TOP-RIGHT CORNER
+  ctx.lineTo(geom.width - radius, lineWidthOffset);
+  ctx.bezierCurveTo(
+    geom.width - radius / smooth,
+    lineWidthOffset, // first bezier point
+    geom.width - lineWidthOffset,
+    radius / smooth, // second bezier point
+    geom.width - lineWidthOffset,
+    radius // last connect point
+  );
+  // BOTTOM-RIGHT CORNER
+  ctx.lineTo(geom.width - lineWidthOffset, geom.height - radius);
+  ctx.bezierCurveTo(
+    geom.width - lineWidthOffset,
+    geom.height - radius / smooth, // first bezier point
+    geom.width - radius / smooth,
+    geom.height - lineWidthOffset, // second bezier point
+    geom.width - radius,
+    geom.height - lineWidthOffset // last connect point
+  );
+  // BOTTOM-LEFT CORNER
+  ctx.lineTo(radius, geom.height - lineWidthOffset);
+  ctx.bezierCurveTo(
+    radius / smooth,
+    geom.height - lineWidthOffset, // first bezier point
+    lineWidthOffset,
+    geom.height - radius / smooth, // second bezier point
+    lineWidthOffset,
+    geom.height - radius // last connect point
+  );
+  // CLOSE LEFT-TOP CORNER
+  ctx.lineTo(lineWidthOffset, radius);
+  ctx.bezierCurveTo(
+    lineWidthOffset,
+    radius / smooth, // first bezier point
+    radius / smooth,
+    lineWidthOffset, // second bezier point
+    radius,
+    lineWidthOffset // last connect point
+  );
+  ctx.closePath();
+
+  if (lineWidth) {
+    // console.log(lineWidth);
+    ctx.strokeStyle = defaultFill;
+    ctx.lineWidth = lineWidth;
+    ctx.stroke();
+  } else {
+    ctx.fillStyle = defaultFill;
+    ctx.fill();
+  }
+};
+
+if (typeof registerPaint !== "undefined") {
+  class SquircleClass {
+    static get contextOptions() {
+      return { alpha: true };
+    }
+    static get inputProperties() {
+      return [
+        "--squircle-radius",
+        "--squircle-smooth",
+        "--squircle-outline",
+        "--squircle-fill",
+        "--squircle-ratio",
+      ];
+    }
+
+    paint(ctx, geom, properties) {
+      const customRatio = properties.get("--squircle-ratio");
+      const smoothRatio = 10;
+      const distanceRatio = parseFloat(customRatio)
+        ? parseFloat(customRatio)
+        : 1.8;
+      const squircleSmooth = parseFloat(
+        properties.get("--squircle-smooth") * smoothRatio
+      );
+      const squircleRadius =
+        parseInt(properties.get("--squircle-radius"), 10) * distanceRatio;
+      const squrcleOutline = parseFloat(
+        properties.get("--squircle-outline"),
+        10
+      );
+      const squrcleColor = properties
+        .get("--squircle-fill")
+        .toString()
+        .replace(/\s/g, "");
+
+      const isSmooth = () => {
+        if (typeof properties.get("--squircle-smooth")[0] !== "undefined") {
+          if (squircleSmooth === 0) {
+            return 1;
+          }
+          return squircleSmooth;
+        } else {
+          return 10;
+        }
+      };
+
+      const isOutline = () => {
+        if (squrcleOutline) {
+          return squrcleOutline;
+        } else {
+          return 0;
+        }
+      };
+
+      const isColor = () => {
+        if (squrcleColor) {
+          return squrcleColor;
+        } else {
+          return "#f45";
+        }
+      };
+
+      if (squircleRadius < geom.width / 2 && squircleRadius < geom.height / 2) {
+        drawSquircle(
+          ctx,
+          geom,
+          squircleRadius,
+          isSmooth(),
+          isOutline(),
+          isColor()
+        );
+      } else {
+        drawSquircle(
+          ctx,
+          geom,
+          Math.min(geom.width / 2, geom.height / 2),
+          isSmooth(),
+          isOutline(),
+          isColor()
+        );
+      }
+    }
+  }
+
+  // eslint-disable-next-line no-undef
+  registerPaint("squircle", SquircleClass);
+}
\ No newline at end of file