Implement auto scroll to upload section on upload finish

oursky · May 27, 2024 · 6b5efde · 6b5efde
2 parents bdedcf8 + 2b6e9d7
commit 6b5efde
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 1 deletion.
diff --git a/public/scripts/upload.js b/public/scripts/upload.js
@@ -1,6 +1,6 @@
 /*
 Require: mobx,
-         utils/images.js, services/presign.js, models/image-upload.js
+         utils/images.js, utils/scroll.js, services/presign.js, models/image-upload.js
 */
 let dragZoneCounter = 0; // https://stackoverflow.com/a/21002544/19287186
 const isDebug = false;
@@ -367,6 +367,7 @@ function updateFileListItem(itemNode, imageUpload) {
 
 function main() {
   const htmlNode = document.querySelector("html");
+  const uploadSection = document.querySelector("#above-file-uploaded");
   const uploadBtn = document.querySelector(".upload-guide__browse-btn");
   const uploadGuideHint = document.querySelector(".upload-guide__hint");
   const fileInput = document.querySelector(".upload-guide__file-input");
@@ -502,6 +503,8 @@ function main() {
         }
         updateFileListItem(itemNode, imageUploads[i]);
       }
+      const HEADER_HEIGHT = 80;
+      scrollToElementTop(uploadSection, HEADER_HEIGHT);
     },
     {
       equals: mobx.comparer.shallow,

diff --git a/public/scripts/utils/scroll.js b/public/scripts/utils/scroll.js
@@ -0,0 +1,8 @@
+function scrollToElementTop(htmlElement, header_offset) {
+  // https://javascript.info/coordinates#getCoords
+  const { top } = htmlElement.getBoundingClientRect();
+  window.scrollTo({
+    top: top + window.scrollY - header_offset,
+    behavior: "smooth",
+  });
+}
diff --git a/src/pages/model/[model]/color/[color].astro b/src/pages/model/[model]/color/[color].astro
@@ -87,6 +87,7 @@ if (deviceDetail == null) {
   ></script>
   <script type="text/javascript" src="/scripts/vendor/psd.min.js"></script>
   <script type="text/javascript" src="/scripts/utils/images.js"></script>
+  <script type="text/javascript" src="/scripts/utils/scroll.js"></script>
   <script type="text/javascript" src="/scripts/models/image-upload.js"></script>
   <script type="text/javascript" src="/scripts/upload.js"></script>
   <script src="https://cdn.jsdelivr.net/pyodide/v0.23.4/full/pyodide.js"
@@ -119,6 +120,7 @@ if (deviceDetail == null) {
     </div>
 
     <div class="mockup-lg-right">
+      <div id="above-file-uploaded"></div>
       <section class="file-uploaded">
         <h3 class="file-uploaded__heading">FILE UPLOAD</h3>
         <div class="upload-guide">