From 78a37c87b776ce308f92eee10f95fe2658896e8b Mon Sep 17 00:00:00 2001
From: the-digital-anarchist <anarwolf@protonmail.com>
Date: Fri, 23 Sep 2022 14:23:45 +0200
Subject: [PATCH] adds audio and video to leaflet map popup

---
 data/geojsonContributors.json                 | 11 ++++--
 .../lumbung-theme/layouts/shortcodes/map.html | 35 +++++++++++++------
 2 files changed, 33 insertions(+), 13 deletions(-)

diff --git a/data/geojsonContributors.json b/data/geojsonContributors.json
index eda46a2..971d5dd 100644
--- a/data/geojsonContributors.json
+++ b/data/geojsonContributors.json
@@ -23,7 +23,10 @@
           "Rayya Badran",
           "Siwar Kraitm",
           "Yazan Khalili"
-        ]
+        ],
+        "video": "https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm",
+        "iframe": "https://tv.lumbung.space/videos/embed/d5b26273-cb7e-4f5e-9041-5694a504405e?title=0",
+        "audio": "https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3"
       }
     },
     {
@@ -48,7 +51,8 @@
           "Rayya Badran",
           "Siwar Kraitm",
           "Yazan Khalili"
-        ]
+        ],
+        "iframe": "https://tv.lumbung.space/videos/embed/d5b26273-cb7e-4f5e-9041-5694a504405e?title=0"
       }
     },
     {
@@ -73,7 +77,8 @@
           "Rayya Badran",
           "Siwar Kraitm",
           "Yazan Khalili"
-        ]
+        ],
+        "iframe": "https://tv.lumbung.space/videos/embed/d5b26273-cb7e-4f5e-9041-5694a504405e?title=0"
       }
     },
     {
diff --git a/themes/lumbung-theme/layouts/shortcodes/map.html b/themes/lumbung-theme/layouts/shortcodes/map.html
index 9cf74ff..eb32332 100644
--- a/themes/lumbung-theme/layouts/shortcodes/map.html
+++ b/themes/lumbung-theme/layouts/shortcodes/map.html
@@ -38,28 +38,43 @@
     <script>
         // Utils
         function properties(feature, layer) {
-            console.log(JSON.stringify(feature.properties))
             // Iterate over the properties keys
             // NOTE: there is no way for javascipt to preserve the order of de declaration of object values.
             // JS will just print in alfabetical order (so if you wanna order it name the keys in  alfabetical order like 'a', 'b', 'c')
-            const textOutput = Object.keys(feature.properties).map(function (key, index) {
-                console.log(key)
-                if (key === 'groupName') {
-                    return '<h1>' + feature.properties[key] + '</h1>'
-                } else if (key === 'listOfNames') {
-                    return '<span><strong>Members:</strong></span><br>' + feature.properties[key].map(function (item) { return '• <span>' + item + '</span><br>' }).join('')
+            const objectOrder = {
+                ...feature.properties,
+                "AgroupName": feature.properties.groupName,
+                "BlistOfNames": feature.properties.listOfNames,
+            }
+            if (objectOrder?.groupName) { delete objectOrder.groupName }
+            if (objectOrder?.listOfNames) { delete objectOrder.listOfNames }
+
+            const newObjectOrder = Object.keys(objectOrder).sort()
+
+            const textOutput = newObjectOrder.map(function (key, index) {
+                console.log(key, objectOrder[key])
+                if (!objectOrder[key]) return
+                if (key === 'AgroupName') {
+                    return '<h1>' + objectOrder[key] + '</h1>'
+                } else if (key === 'BlistOfNames') {
+                    return '<div style="padding-bottom: 12px"><span><strong>Members:</strong></span><br>' + objectOrder[key].map(function (item) { return '• <span>' + item + '</span><br>' }).join('') + '</div>'
+                } else if (key === 'iframe') {
+                    return '<iframe src="' + objectOrder[key] + '" allowfullscreen="" sandbox="allow-same-origin allow-scripts allow-popups" style="width: 100%; margin-top: 12px; margin-bottom: 12px;" frameborder="0"></iframe>'
+                } else if (key === 'video') {
+                    return '<video width="320" controls style="padding-bottom: 12px; width: 100%;"><source src="' + objectOrder[key] + '"></video>'
+                } else if (key === 'audio') {
+                    return '<audio controls style="padding-bottom: 12px; width: 100%;"><source src="' + objectOrder[key] + '"></audio>'
                 } else {
-                    return '<p>' + feature.properties[key] + '</p>'
+                    return '<p>' + objectOrder[key] + '</p>'
                 }
             });
 
-            layer.bindPopup(textOutput.join(''))
+            layer.bindPopup(textOutput.join(''), { maxHeight: 500, innerWidth: 400 })
         }
 
         var map = L.map('map').setView([-7.2344, 108.3211], 3);
 
         window.addEventListener('load', (event) => {
-            //  TODO: find way to make this smoother, now the map first shows partly gray
             map.invalidateSize();
         });