dynamically list maps avaialble

_config.yml

@@ -8,7 +8,7 @@ logo: "/assets/images/butter-app-logo-small.svg"
 # powered by jekyll-multiple-languages-plugin
 languages: ['en', 'es', 'fr_SN', 'pt_AO']
 
-exclude: ["public", "Gemfile", "Gemfile.lock", "node_modules", "test", "*.zip"]
+exclude: ["public", "Gemfile", "Gemfile.lock", "node_modules", "test", "site-*.zip"]
 
 # Build settings
 sass:

_includes/filerow.html

@@ -1,4 +1,4 @@
-<div class="filerow">
+<div id="{{ include.id }}" class="filerow template">
     <a href="{{ include.href }}" download="{{ include.file_name }}" class="logo-filerow">
         <img src="{{ site.baseurl}}/assets/images/{{ include.icon_filename }}" alt="file extension icon">
     </a>

_layouts/basic.html

@@ -20,6 +20,11 @@
     <script src="{{ site.baseurl }}/assets/js/slick.min.js"></script>
     <script src="{{ site.baseurl }}/assets/js/micromodal.min.js"></script>
     <script src="{{ site.baseurl }}/assets/js/main.js"></script>
+    {% if page.custom_scripts %}
+    {% for script in page.custom_scripts %}
+    <script src="{{ site.baseurl }}/assets/js/{{ script }}"></script>
+    {% endfor %}
+    {% endif %}
 
     {% if site.data.deployment.has_internet %}
     <!-- Matomo -->

_scss/pages/home.scss

@@ -367,6 +367,9 @@ h1.homepage-title {
   box-sizing: border-box;
   font-family: "Poppins", sans-serif;
 }
+.filerow.template {
+  display: none;
+}
 
 .logo-filerow {
   display: flex;

assets/js/butter-dir-listing.js

@@ -120,8 +120,7 @@ function extractDirectoryListing(doc) {
     return { files, folders };
 }
 
-window.onload = function () {
+function renderDirectory() {
-    // Example usage
     const { files, folders } = extractDirectoryListing(window.document);
     const listDiv = document.querySelector('div.list');
 
@@ -201,4 +200,10 @@ window.onload = function () {
 
     // do the insertion
     listDiv.parentNode.insertBefore(fileListing, listDiv);
+}
+
+window.onload = function () {
+    if (window.location.pathname.includes(usbRoot)) {
+        renderDirectory();
+    }
 }

assets/js/main.js

@@ -36,11 +36,8 @@ if (btnModal) {
 }
 
 function renderPlaceholders() {
-  const usbButter = document.querySelector('#usb-butter');
+  const discovered = document.querySelectorAll(".hidden-card");
-  const appstoreCard = document.querySelector('#appstore-card');
+  for (let card of discovered) {
-  const mapsCard = document.querySelector('#maps-card');
-  const conditionalCards = [appstoreCard, usbButter, mapsCard];
-  for (let card of conditionalCards) {
     fetch(card.dataset.url)
       .then(response => {
         if (response.status === 200) {
@@ -57,5 +54,4 @@ function renderPlaceholders() {
   }
 }
 
-
 renderPlaceholders();

assets/js/maps.js

@@ -0,0 +1,47 @@
+// Checks to see what map files exist at /usb-butter/osm-map-files/ and displays them
+// using the template hidden in the page
+
+const getMaps = async (folder_href) => {
+    async function populateSpan(response) {
+        if (!response.ok) {
+            console.error("Failed to fetch " + folder_href);
+            return;
+        }
+        const text = await response.text();
+        const doc = new DOMParser().parseFromString(text, 'text/html');
+        const { files, folders } = extractDirectoryListing(doc);
+        renderMaps(files);
+    }
+    const response = fetch(folder_href).then(populateSpan);
+}
+
+function getOsmObfDisplayName(name) {
+    const region = name.split('_')[0];
+    const words = region.split('-');
+    for (let i = 0; i < words.length; i++) {
+        words[i] = words[i].charAt(0).toUpperCase() + words[i].slice(1);
+    }
+    return words.join(" ");
+}
+
+function renderMaps(files) {
+    template = document.getElementById('filerow-template');
+    fileList = template.parentElement;
+    for (let file of files) {
+        let clone = template.cloneNode(true);
+        const links = clone.querySelectorAll('a');
+        for (let link of links) {
+            link.href = '/usb-butter/osm-map-files/' + file.href;
+            link.download = file.name
+        }
+        const upperText = clone.querySelector('.upper-text');
+        const lowerText = clone.querySelector('.lower-text');
+        upperText.textContent = getOsmObfDisplayName(file.name);
+        lowerText.textContent = file.name;
+        fileList.appendChild(clone);
+        clone.removeAttribute('id');
+        clone.classList.remove("template");
+    }
+}
+
+getMaps('/usb-butter/osm-map-files/');

maps/index.html

@@ -1,6 +1,7 @@
 ---
 layout: informational
 breadcrumb: "Offline Maps"
+custom_scripts: ["maps.js", "butter-dir-listing.js"]
 ---
 
 <img src="{{ site.baseurl }}/assets/images/maps-header.png" alt="Maps Header" class="hero">
@@ -26,46 +27,7 @@ breadcrumb: "Offline Maps"
     <span class="bold">{% t maps.sections.section2.open_with_cta %}</span>
 </p>
 
-<div class="filelist">    
+<div class="filelist">
-    {% assign obf_url= site.basurl | append: "/fdroid/repo/" | append: "Angola_africa_2.obf.zip" %}
+    {% assign obf_url= site.basurl | append: "/fdroid/repo/" | append: "FILENAME" %}
-    {% include filerow.html href=obf_url file_name="Angola_africa_2.obf.zip" icon_filename="ext-pbf.svg" display_name="Angola" %}
+    {% include filerow.html id="filerow-template" href=obf_url file_name="FILENAME" icon_filename="ext-pbf.svg" display_name="FILESTEM" %}
-
-    {% assign obf_url= site.basurl | append: "/fdroid/repo/" | append: "Virgin-islands-british_centralamerica_2.obf.zip" %}
-    {% include filerow.html href=obf_url file_name="Virgin-islands-british_centralamerica_2.obf.zip" icon_filename="ext-pbf.svg" display_name="British Virgin Islands" %}
-
-    {% assign obf_url= site.basurl | append: "/fdroid/repo/" | append: "Colombia_southamerica_2.obf.zip" %}
-    {% include filerow.html href=obf_url file_name="Colombia_southamerica_2.obf.zip" icon_filename="ext-pbf.svg" display_name="Colombia" %}
-
-    {% assign obf_url= site.basurl | append: "/fdroid/repo/" | append: "Swaziland_africa_2.obf.zip" %}
-    {% include filerow.html href=obf_url file_name="Swaziland_africa_2.obf.zip" icon_filename="ext-pbf.svg" display_name="Eswatini (Swaziland)" %}
-
-    {% assign obf_url= site.basurl | append: "/fdroid/repo/" | append: "Malawi_africa_2.obf.zip" %}
-    {% include filerow.html href=obf_url file_name="Malawi_africa_2.obf.zip" icon_filename="ext-pbf.svg" display_name="Malawi" %}
-
-    {% assign obf_url= site.basurl | append: "/fdroid/repo/" | append: "Mexico_mexico_northamerica_2.obf.zip" %}
-    {% include filerow.html href=obf_url file_name="Mexico_mexico_northamerica_2.obf.zip" icon_filename="ext-pbf.svg" display_name="Mexico" %}
-
-    {% assign obf_url= site.basurl | append: "/fdroid/repo/" | append: "Mozambique_africa_2.obf.zip" %}
-    {% include filerow.html href=obf_url file_name="Mozambique_africa_2.obf.zip" icon_filename="ext-pbf.svg" display_name="Mozambique" %}
-
-    {% assign obf_url= site.basurl | append: "/fdroid/repo/" | append: "Namibia_africa_2.obf.zip" %}
-    {% include filerow.html href=obf_url file_name="Namibia_africa_2.obf.zip" icon_filename="ext-pbf.svg" display_name="Namibia" %}
-
-    {% assign obf_url= site.basurl | append: "/fdroid/repo/" | append: "Puerto-rico_centralamerica_2.obf.zip" %}
-    {% include filerow.html href=obf_url file_name="Puerto-rico_centralamerica_2.obf.zip" icon_filename="ext-pbf.svg" display_name="Puerto Rico" %}
-
-    {% assign obf_url= site.basurl | append: "/fdroid/repo/" | append: "South-africa_africa_2.obf.zip" %}
-    {% include filerow.html href=obf_url file_name="South-africa_africa_2.obf.zip" icon_filename="ext-pbf.svg" display_name="South Africa" %}
-
-    {% assign obf_url= site.basurl | append: "/fdroid/repo/" | append: "Virgin-islands-us_centralamerica_2.obf.zip" %}
-    {% include filerow.html href=obf_url file_name="Virgin-islands-us_centralamerica_2.obf.zip" icon_filename="ext-pbf.svg" display_name="US Virgin Islands" %}
-
-    {% assign obf_url= site.basurl | append: "/fdroid/repo/" | append: "Venezuela_southamerica_2.obf.zip" %}
-    {% include filerow.html href=obf_url file_name="Venezuela_southamerica_2.obf.zip" icon_filename="ext-pbf.svg" display_name="Venezuela" %}
-
-    {% assign obf_url= site.basurl | append: "/fdroid/repo/" | append: "Zambia_africa_2.obf.zip" %}
-    {% include filerow.html href=obf_url file_name="Zambia_africa_2.obf.zip" icon_filename="ext-pbf.svg" display_name="Zambia" %}
-
-    {% assign obf_url= site.basurl | append: "/fdroid/repo/" | append: "Zimbabwe_africa_2.obf.zip" %}
-    {% include filerow.html href=obf_url file_name="Zimbabwe_africa_2.obf.zip" icon_filename="ext-pbf.svg" display_name="Zimbabwe" %}
 </div>