X-Git-Url: http://git.shiar.nl/sheet.git/blobdiff_plain/30bf0fcde3f7e44f1ec7bcfc8253dfce8f81e8e6..37c06bb073070304a9dcb93d69044208d388b068:/word/editor.js

diff --git a/word/editor.js b/word/editor.js
index da403b2..a4b8d8e 100644
--- a/word/editor.js
+++ b/word/editor.js
@@ -1,4 +1,17 @@
 document.addEventListener('DOMContentLoaded', () => {
+	document.querySelectorAll('#search').forEach(p => {
+		let [input, button] = p.children;
+		button.onclick = e => {
+			if (input.value && input.offsetWidth > 50) {
+				return true; // bubble to submit
+			}
+			// make visible first
+			input.focus();
+			e.preventDefault();
+			return false;
+		};
+	});
+
 	document.querySelectorAll('.multiinput > input[id]').forEach(el => {
 		el.oninput = e => {
 			if (e.target.value == '') return;
@@ -31,7 +44,9 @@ document.addEventListener('DOMContentLoaded', () => {
 				let transrow = document.getElementById('trans-la');
 				if (transrow && !transrow.value && wptext) {
 					const binom = wptext.match(/ class="binomial">.*?<i>(.*?)<\/i>/);
-					transrow.value = binom[1]
+					if (binom) {
+						transrow.value = binom[1]
+					}
 				}
 
 				// translations from language links
@@ -105,22 +120,102 @@ 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;
+			thumbpreview.onclick = null; // setup once
+			const cropinput = document.getElementById('crop32');
+			const imgselect = thumbpreview.children[0];
+			const border = [300,200];
+			let crop = cropinput.value.split(/[^0-9]/).map(pos => pos / 1000);
+			let scale = 1 / (crop[2] - crop[0]) || 1;
+			crop.push(0); // defined y dimension
+			crop.splice(2); // end coordinates applied to zoom
+			crop = crop.map((rel, axis) => rel * border[axis % 2] * scale);
+
+			let drag, pinch;
+			function applydrag(e) {
+				const touch = e.touches ? e.touches[0] : e;
+				let pos = [touch.pageX, touch.pageY];
+				if (e.type === 'touchmove' && e.touches.length > 1) {
+					// distance to second point
+					pos[0] -= e.touches[1].pageX;
+					pos[1] -= e.touches[1].pageY;
+					const span = Math.sqrt(pos[0]**2 + pos[1]**2);
+					if (pinch) {
+						cropzoom(.01 * (span - pinch));
+					}
+					pinch = span;
+					return;
+				}
+				if (drag) {
+					// apply drag delta to crop position
+					crop[0] += drag[0] - pos[0];
+					crop[1] += drag[1] - pos[1];
+					recrop();
+				}
+				drag = pos;
+			}
+
+			function recrop() {
+				[0, 1].forEach(axis => {
+					if (crop[axis] > border[axis] * (scale - 1)) {
+						crop[axis] = border[axis] * (scale - 1);
+					}
+					if (crop[axis] < 0) {
+						crop[axis] = 0;
+					}
+				});
+				imgselect.style.left = -crop[0]+'px';
+				imgselect.style.top  = -crop[1]+'px';
+				imgselect.style.width = (scale * 100)+'%';
+				cropinput.value = [
+					crop[0] / border[0],     crop[1] / border[1],
+					crop[0] / border[0] + 1, crop[1] / border[1] + 1,
+				].map(pos => Math.round(1000 * pos / scale));
+			}
+
+			function cropzoom(delta) {
+				if (scale + delta < 1) {
+					delta = 1 - scale; // scale = 1
+				}
+				[0, 1].forEach(axis => {
+					// same area center at altered scale
+					crop[axis] += (crop[axis] + border[axis] / 2) / scale * delta;
+				});
+				scale += delta;
+				recrop();
+			}
+
+			imgselect.src = imgpreview.src;
+			imgselect.style.cursor = 'grab';
+			imgselect.style.position = 'absolute';
+			recrop();
+
+			imgselect.ontouchstart =
+			imgselect.onmousedown = e => {
+				e.preventDefault();
+				drag = pinch = false;
+				applydrag(e);
+				imgselect.style.cursor = 'grabbing';
+				window.ontouchmove =
+				window.onmousemove = e => {
+					e.preventDefault();
+					applydrag(e);
+				};
+				window.ontouchend =
+				window.onmouseup = e => {
+					e.preventDefault();
+					imgselect.style.cursor = 'grab';
+					window.ontouchmove = window.ontouchend =
+					window.onmousemove = window.onmouseup = null;
+				};
 			};
-			imgselect.onclick = e => {
-				let imgoption = document.getElementById('convert');
-				imgoption.value += (imgoption.value && '-') + imgselect.onmousemove(e);
-				imgselect.hidden = true;
-				imgselect.classList.remove('popup');
+
+			imgselect.onwheel = e => {
+				e.preventDefault();
+				let delta = (-e.deltaY || e.wheelDelta) * .001 * scale;
+				if (e.deltaMode == 1) { // DOM_DELTA_LINE
+					delta *= 18; // convert number of lines to pixels
+				}
+				cropzoom(delta);
 			};
 		};
 	}