refactor: update js - separate files, modules

js/drop-zone.js

@@ -0,0 +1,40 @@
+import { $ } from './dom.js';
+import { loadBgFile, loadWidgetFile } from './file-loader.js';
+
+function setupDropZone(el, onDrop) {
+  el.addEventListener('dragover', (e) => {
+    e.preventDefault();
+    el.classList.add('drag-over');
+  });
+
+  el.addEventListener('dragleave', (e) => {
+    if (!el.contains(e.relatedTarget)) {
+      el.classList.remove('drag-over');
+    }
+  });
+
+  el.addEventListener('drop', (e) => {
+    e.preventDefault();
+    document.body.classList.remove('file-dragging');
+    el.classList.remove('drag-over');
+    if (e.dataTransfer.files[0]) onDrop(e.dataTransfer.files[0]);
+  });
+}
+
+export function initDropZones(state) {
+  const lc = document.querySelector('.left-col');
+
+  document.addEventListener('dragover', (e) => {
+    e.preventDefault();
+    document.body.classList.add('file-dragging');
+  });
+
+  document.addEventListener('drop', () => {
+    document.body.classList.remove('file-dragging');
+    lc.classList.remove('drag-over');
+  });
+
+  setupDropZone(lc, (file) => loadBgFile(file, state));
+  setupDropZone($('bgPanel'), (file) => loadBgFile(file, state));
+  setupDropZone($('widgetPanel'), (file) => loadWidgetFile(file, state));
+}