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>

diff --git a/word/edit.plp b/word/edit.plp
index 9af73cdb3737e3cfbb6bed374f447f0ddf4809d0..1d766b9c410a40908f0adb1b6e90e01a4913f0f7 100644 (file)
--- 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>
        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
 });
 
 EOT
 });
 

diff --git a/word/editor.js b/word/editor.js
index cee26ac1e9a4aafe01f06f0679719d2f4f62b452..aeab4cc70bd6d14ecde326d4a40fd972bd5d2f07 100644 (file)
--- 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 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();
+                       });

                };
        }
 
                };
        }