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
});
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();
+ });
};
}