refactor: update js - separate files, modules

js/mode.js

@@ -0,0 +1,79 @@
+import { $ } from './dom.js';
+
+let fieldEditing = false;
+let fieldEditW, fieldEditH;
+let keepAspect = true;
+
+export function isFieldEditing() {
+  return fieldEditing;
+}
+
+export function getFieldEditW() {
+  return fieldEditW;
+}
+
+export function getFieldEditH() {
+  return fieldEditH;
+}
+
+export function setFieldEditW(v) {
+  fieldEditW = v;
+}
+
+export function setFieldEditH(v) {
+  fieldEditH = v;
+}
+
+export function isKeepAspect() {
+  return keepAspect;
+}
+
+export function toggleKeepAspect() {
+  keepAspect = !keepAspect;
+  updateChainIcon();
+}
+
+function updateChainIcon() {
+  const locked = $('chainLink').querySelectorAll('.chain-locked');
+  const unlocked = $('chainLink').querySelectorAll('.chain-unlocked');
+  locked.forEach(el => el.style.display = keepAspect ? '' : 'none');
+  unlocked.forEach(el => el.style.display = keepAspect ? 'none' : '');
+  $('chainLink').classList.toggle('unlocked', !keepAspect);
+}
+
+export function setFieldEditing(editing, state) {
+  fieldEditing = editing;
+  const inpW = $('inpFieldW');
+  const inpH = $('inpFieldH');
+  const options = $('fieldEditOptions');
+  const btnEdit = $('btnEditField');
+  const chain = $('chainLink');
+
+  if (editing) {
+    fieldEditW = state.fieldW;
+    fieldEditH = state.fieldH;
+    inpW.disabled = false;
+    inpH.disabled = false;
+    options.classList.add('visible');
+    btnEdit.style.display = 'none';
+    chain.classList.add('visible');
+    updateChainIcon();
+  } else {
+    inpW.value = state.fieldW;
+    inpW.disabled = true;
+    inpH.value = state.fieldH;
+    inpH.disabled = true;
+    options.classList.remove('visible');
+    btnEdit.style.display = '';
+    chain.classList.remove('visible');
+  }
+}
+
+export function setMode(mode) {
+  document.body.className = mode === 'preview' ? 'mode-preview' : 'mode-edit';
+  $('btnEdit').classList.toggle('active', mode === 'edit');
+  $('btnPreview').classList.toggle('active', mode === 'preview');
+  $('modeHint').textContent = mode === 'edit'
+    ? 'Drag corners on the field'
+    : 'matrix3d() transform result';
+}