Step 1 - Dividing whole grid in sections and estimating their heights

shaileshpandit · Feb 10, 2021 · 7ddef4c · 7ddef4c
1 parent c57c91f
commit 7ddef4c
Show file tree

Hide file tree

Showing 5 changed files with 3,732 additions and 5 deletions.
diff --git a/api.js b/api.js
@@ -0,0 +1,16 @@
+function delay(ms) {
+  return function (x) {
+    return new Promise(resolve => setTimeout(() => resolve(x), ms));
+  };
+}
+
+let sectionStore = fetch("/store.json").then(res => res.json());
+
+// get all sections in users photo library - e.g. one section per month
+function getSections() {
+  return sectionStore.then(delay(50 + Math.random() * 500)).then(store => {
+    return store.map(section => {
+      return { sectionId: section.sectionId, totalImages: section.totalImages };
+    });
+  });
+}
diff --git a/index.html b/index.html
@@ -11,14 +11,14 @@
   <!-- import the webpage's stylesheet -->
   <link rel="stylesheet" href="/style.css">
 
-  <!-- import the webpage's javascript file -->
+  <!-- import the webpage's javascript files -->
+  <script src="/api.js" defer></script>
+  <script src="/script.js" defer></script>
 </head>
 
 <body>
-  <!-- include the Glitch button to show what the webpage is about and
-          to make it easier for folks to view source and remix -->
-  <div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div>
-  <script src="https://button.glitch.me/button.js" defer></script>
+  <!-- our grid container, will have sections as child divs -->
+  <div id="grid" class="scrubbable-grid"></div>
 </body>
 
 </html>
diff --git a/script.js b/script.js
@@ -0,0 +1,42 @@
+// app state - list of all sections and their image counts
+var allSections = [];
+
+// grid's config - should be updated on viewport resize
+var config = {
+  containerWidth: window.innerWidth,
+  targetRowHeight: 150
+};
+
+loadUi();
+
+
+// gets all sections using api, populates grid div
+function loadUi() {
+  getSections().then(sections => {
+    allSections = sections;
+    populateGrid(document.getElementById("grid"));
+  });
+}
+
+// populates grid node with all detached sections
+function populateGrid(gridNode) {
+  const sectionsHtml = allSections.map(getDetachedSectionHtml).join("\n");
+  gridNode.innerHTML = sectionsHtml;
+}
+
+// generates detached section html, detached section has estimated height and no segments loaded
+function getDetachedSectionHtml(section) {
+  return `<div id="${section.sectionId}" class="section" style="width: ${config.containerWidth}px; height: ${estimateSectionHeight(section)}px;"></div>`;
+}
+
+// estimates section height, taken from google photos blog
+// Ideally we would use the average aspect ratio for the photoset, however assume
+// a normal landscape aspect ratio of 3:2, then discount for the likelihood we
+// will be scaling down and coalescing.
+function estimateSectionHeight(section) {
+  const unwrappedWidth = (3 / 2) * section.totalImages * config.targetRowHeight * (7 / 10);
+  const rows = Math.ceil(unwrappedWidth / config.containerWidth);
+  const height = rows * config.targetRowHeight;
+
+  return height;
+}