From ca5f2bee8e55d51ca801ef65d25dcb03285a6b1c Mon Sep 17 00:00:00 2001
From: Mischa POSLAWSKY <perl@shiar.org>
Date: Wed, 5 Jan 2022 01:36:16 +0100
Subject: [PATCH] word/edit: croppie js thumbnail selection interface

Replace the unintuitive coordinate helper by a free (mit) external library
(~9kB compressed) to select and preview an image crop window.

Reference: <https://github.com/Foliotek/Croppie>
---
 word/edit.plp  |  2 ++
 word/editor.js | 37 ++++++++++++++++++++-----------------
 2 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/word/edit.plp b/word/edit.plp
index 9af73cd..1d766b9 100644
--- a/word/edit.plp
+++ b/word/edit.plp
@@ -10,6 +10,8 @@ Html({
 	raw => <<'EOT',
 <link rel="stylesheet" type="text/css" media="all" href="/word/editor.css" />
 <script src="/word/editor.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.min.js"></script>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.min.css" />
 EOT
 });
 
diff --git a/word/editor.js b/word/editor.js
index cee26ac..aeab4cc 100644
--- a/word/editor.js
+++ b/word/editor.js
@@ -107,23 +107,26 @@ document.addEventListener('DOMContentLoaded', () => {
 	let thumbpreview = document.getElementById('convertpreview');
 	if (thumbpreview && imgpreview) {
 		thumbpreview.onclick = e => {
-			let imgselect = imgpreview; /* TODO clone */
-			imgselect.hidden = false;
-			imgselect.classList.add('popup');
-			imgselect.onmousemove = e => {
-				let border = imgselect.getBoundingClientRect();
-				let pos = [
-					Math.round(1000 * (e.clientX - border.x) / border.width),
-					Math.round(1000 * (e.clientY - border.y) / border.height)
-				];
-				return pos;
-			};
-			imgselect.onclick = e => {
-				let imgoption = document.getElementById('convert');
-				imgoption.value += (imgoption.value && '-') + imgselect.onmousemove(e);
-				imgselect.hidden = true;
-				imgselect.classList.remove('popup');
-			};
+			const cropinput = document.getElementById('crop32');
+			let border = { width: 600, height: 400 };
+			let crop = new Croppie(thumbpreview, {
+				boundary: { width: border.width * 1.3, height: border.height * 1.2 },
+				viewport: border,
+				update: e => {
+					cropinput.value = e.points.map((pos, axis) => {
+						Math.round(1000 * pos / (axis % 2 ? border.height : border.width))
+					}).join(',');
+				},
+			});
+			crop.bind({
+				url: imgpreview.src,
+				points: cropinput.value.split(/[^0-9]/).map((rel, axis) => {
+					return rel * (axis % 2 ? border.height : border.width) / 1000
+				}),
+			});
+			crop.elements.overlay.addEventListener('dblclick', e => {
+				crop.destroy();
+			});
 		};
 	}
 
-- 
2.30.0