Refactor and improve project selector

Author: GarboMuffin

src/p4/SelectProject.svelte

@@ -30,30 +30,79 @@
   }
   const projectUrl = writablePersistentStore('SelectProject.url', '');
 
-  let files = null;
+  export let projectData = null;
+  const resetProjectAndCancelTask = () => {
+    projectData = null;
+    currentTask.abort();
+  };
+
+  // Reset project when input changes
+  $: $projectId, $type, resetProjectAndCancelTask();
+
+  // just incase some non-number string was stored from older versions
+  $projectId = extractProjectId($projectId);
+
+  const getDisplayedProjectURL = () => `https://scratch.mit.edu/projects/${$projectId}`;
+
+  const submitOnEnter = (e) => {
+    if (e.key === 'Enter') {
+      load();
+    }
+  };
+  const handleInput = (e) => {
+    $projectId = extractProjectId(e.target.value);
+    e.target.value = getDisplayedProjectURL();
+  };
+  const handleFocus = (e) => {
+    e.target.select();
+  };
+
   let fileInputElement;
 
+  const copyFileList = (files) => {
+    const transfer = new DataTransfer();
+    for (const file of files) {
+      transfer.items.add(file);
+    }
+    return transfer.files;
+  };
+
   // This is used to remember files between reloads in some browsers (currently only Firefox)
   // This element is defined in the HTML of template.ejs because some browsers won't
   // autocomplete file inputs generated by JS.
   const inputForRememberingProjectFile = document.querySelector('.input-for-remembering-project-file');
   if (inputForRememberingProjectFile) {
-    // We'll check for autocompleted files after mount so that fileInputElement is defined.
+    // Check for autocompleted files after mount so that fileInputElement is defined.
     onMount(() => {
       const storedFiles = inputForRememberingProjectFile.files;
       if (storedFiles.length) {
-        setFiles(inputForRememberingProjectFile.files, false);
+        fileInputElement.files = copyFileList(storedFiles);
       }
     });
   }
 
-  export let projectData = null;
-  const reset = () => {
-    projectData = null;
+  const setFiles = (files) => {
+    resetProjectAndCancelTask();
+    if (fileInputElement.files !== files) {
+      fileInputElement.files = files;
+    }
+    if (inputForRememberingProjectFile) {
+      inputForRememberingProjectFile.files = copyFileList(files);
+    }
+    if (files.length && $type === 'file') {
+      load();
+    }
+  };
+  const handleDrop = ({detail: dataTransfer}) => {
+    const name = dataTransfer.files[0].name;
+    if (name.endsWith('.sb') || name.endsWith('.sb2') || name.endsWith('.sb3')) {
+      $type = 'file';
+      setFiles(dataTransfer.files);
+    }
+  };
+  const handleFileInputChange = (e) => {
+    setFiles(e.target.files);
   };
-
-  // Reset project whenever an input changes
-  $: files, $projectId, $type, reset(), currentTask.abort();
 
   const internalLoad = async (task) => {
     let uniqueId = '';
@@ -91,10 +140,11 @@
         loadProjectPromise
       ]);
     } else if ($type === 'file') {
-      if (!files) {
+      const files = fileInputElement.files;
+      const file = files && files[0];
+      if (!file) {
         throw new UserError($_('select.noFileSelected'));
       }
-      const file = files[0];
       uniqueId = `@${file.name}`;
       projectTitle = file.name;
       task.setProgressText($_('progress.compressingProject'));
@@ -119,56 +169,12 @@
       project,
     };
   };
-
   const load = async () => {
-    reset();
+    resetProjectAndCancelTask();
     const task = new Task();
     projectData = await task.do(internalLoad(task));
     task.done();
   };
-
-  // just incase some non-number string was stored from older versions
-  $projectId = extractProjectId($projectId);
-
-  const getDisplayedProjectURL = () => `https://scratch.mit.edu/projects/${$projectId}`;
-
-  const submitOnEnter = (e) => {
-    if (e.key === 'Enter') {
-      e.target.blur();
-      load();
-    }
-  };
-  const handleInput = (e) => {
-    $projectId = extractProjectId(e.target.value);
-    e.target.value = getDisplayedProjectURL();
-  };
-  const handleFocus = (e) => {
-    e.target.select();
-  };
-  const setFiles = (newFiles, canAutomaticallyLoadProject) => {
-    files = newFiles;
-    if (fileInputElement && fileInputElement.files !== files) {
-      fileInputElement.files = files;
-    }
-    if (inputForRememberingProjectFile && inputForRememberingProjectFile.files !== files) {
-      inputForRememberingProjectFile.files = files;
-    }
-    if (canAutomaticallyLoadProject && files.length) {
-      // Setting files= above will trigger a tick that cancels the current task. We need to wait for that
-      // tick to finish before starting a new task, otherwise it'll be cancelled immediately.
-      tick().then(load);
-    }
-  };
-  const handleDrop = ({detail: dataTransfer}) => {
-    const name = dataTransfer.files[0].name;
-    if (name.endsWith('.sb') || name.endsWith('.sb2') || name.endsWith('.sb3')) {
-      $type = 'file';
-      setFiles(dataTransfer.files, true);
-    }
-  };
-  const handleFileInputChange = (e) => {
-    setFiles(e.target.files, true);
-  };
 </script>
 
 <style>