word/edit: thumbnail image coordinates selector

Enlarge and return the clicked position to help -area entry.

diff --git a/editor.css b/editor.css
index 077de812a71ca0c78a9304262ab8ca64c3e5e6aa..5c29523388b1163de6c2d65bb448a3d8482874b7 100644 (file)
--- a/editor.css
+++ b/editor.css
@@ -44,7 +44,7 @@ select {
        flex-shrink: 0;
 }
 
-ul.popup {
+.popup {
        display: flex;
        flex-wrap: wrap;
        align-items: end;
@@ -58,6 +58,10 @@ ul.popup {
        background: rgba(0, 0, 0, .8);
        border: 1px solid #CCC;
 }
+img.popup {
+       height: 100%; /* max assuming landscape */
+       width: auto; /* keep aspect */
+}
 
 h1 {
        margin-bottom: 1ex;

diff --git a/writer.js b/writer.js
index a958732274c5e43ecff87c2fe8c95ff16428a54a..5d3ad5e782977c43e58213c03db6058f667a2015 100644 (file)
--- a/writer.js
+++ b/writer.js
@@ -2,6 +2,7 @@ document.addEventListener('DOMContentLoaded', () => {
        document.querySelectorAll('.multiinput > input[id]').forEach(el => {
                el.oninput = e => {
                        if (e.target.value == '') return;
+                       // insert another empty input element option
                        let add = e.target.cloneNode(true);
                        add.value = '';
                        add.oninput = e.target.oninput;
@@ -95,6 +96,29 @@ document.addEventListener('DOMContentLoaded', () => {
                };
        }
 
+       let thumbpreview = document.getElementById('thumbpreview');
+       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('thumb');
+                               imgoption.value += (imgoption.value && '-') + imgselect.onmousemove(e);
+                               imgselect.hidden = true;
+                               imgselect.classList.remove('popup');
+                       };
+               };
+       }
+
        let translist = document.getElementById('trans');
        if (translist) {
                let langoptions = Array.prototype.filter.call(document.getElementById('lang').options, opt => {