fix js library loading

3 files changed, 100 insertions, 39 deletions

diff --git a/layouts/shortcodes/map.html b/layouts/shortcodes/map.html
index 833e084..17eab91 100644
--- a/layouts/shortcodes/map.html
+++ b/layouts/shortcodes/map.html
@@ -1,53 +1,85 @@
 <div class="section">
     <div id="mapview" style="width: 100%; height: 40em;"></div>
     <script type="text/javascript">
-        /* smoothstate-loaded pages do not trigger the DOM ready event */
-        if (typeof mapboxgl !== 'undefined') {
-            showMap();
-        } else {
-            document.addEventListener("DOMContentLoaded", loadMapbox);
+        var map,
+            mapboxReadyAttached;
+
+        if (typeof $ === 'undefined') {
+            document.addEventListener('DOMContentLoaded', loadMapbox);
+        }
+        if (typeof mapboxReadyAttached === 'undefined') {
+            mapboxReadyAttached = true;
+            document.addEventListener('pageReady', loadMapbox);
         }
 
         function loadMapbox() {
-            $('<link>').appendTo('head')
-              .attr({type: 'text/css', rel: 'stylesheet'})
-              .attr('href', 'https://api.mapbox.com/mapbox-gl-js/v0.22.1/mapbox-gl.css');
-            $.getScript('https://api.mapbox.com/mapbox-gl-js/v0.22.1/mapbox-gl.js', showMap);
+            if ($('#mapview').length == 0) return; // map is inactive
+
+            if (typeof mapboxgl === 'undefined') {
+                console.log('loading mapbox files');
+                $('<link>').appendTo('head')
+                  .attr({type: 'text/css', rel: 'stylesheet'})
+                  .attr('href', 'https://api.mapbox.com/mapbox-gl-js/v0.22.1/mapbox-gl.css');
+                $.getScript('https://api.mapbox.com/mapbox-gl-js/v0.23.0/mapbox-gl.js', initMapbox);
+            } else {
+                console.log('mapbox files already present');
+                initMapbox();
+            }
         }
-        function showMap() {
-            mapboxgl.accessToken = 'pk.eyJ1IjoiY29kZS13dnMiLCJhIjoiY2lzNHM4bWUwMDAwdTJ0cDBjYms5em9hYSJ9.VLxxJ6aTbWUbQchg58tgkA';
+
+        function initMapbox() {
+            console.log('creating new map instance');
             var lon = parseFloat({{ .Get "lon" }}),
                 lat = parseFloat({{ .Get "lat" }}),
-                zoom =parseFloat({{ .Get "zoom" }});
+                zoom= parseFloat({{ .Get "zoom" }});
+
+            if (typeof map !== 'undefined') {
+                console.log('killed old map');
+                map.remove();
+            }
 
-            window.map = new mapboxgl.Map({
+            mapboxgl.accessToken = 'pk.eyJ1IjoiY29kZS13dnMiLCJhIjoiY2lzNHM4bWUwMDAwdTJ0cDBjYms5em9hYSJ9.VLxxJ6aTbWUbQchg58tgkA';
+            map = new mapboxgl.Map({
                 pitch: 60,
                 bearing: 45,
                 container: 'mapview',
                 style: 'mapbox://styles/mapbox/basic-v9',
-                zoom: zoom,
-                center: [lon, lat]
+                center: [lon, lat],
+                zoom: zoom
             });
+            map.on('load', showMapbox);
+        }
 
-            window.map.on('load', function() {
-                var markers = {
-                    "type": "FeatureCollection",
-                    "features": [{
-                        "type": "Feature",
-                        "properties": {
-                            "icon": "fast-food"
-                        },
-                        "geometry": {
-                            "type": "Point",
-                            "coordinates": [lon, lat]
-                        }
-                    }]
-                };
-                window.map.addSource("markers", {
-                    "type": "geojson",
-                    "data": markers
+        function showMapbox() {
+            var lon = parseFloat({{ .Get "lon" }}),
+                lat = parseFloat({{ .Get "lat" }}),
+                zoom= parseFloat({{ .Get "zoom" }});
+
+            console.log('updating map data', [lon, lat, zoom]);
+
+            map.setCenter([lon, lat]);
+            map.setZoom(zoom);
+
+            var markers = {
+                "type": "FeatureCollection",
+                "features": [{
+                    "type": "Feature",
+                    "properties": {
+                        "icon": "fast-food"
+                    },
+                    "geometry": {
+                        "type": "Point",
+                        "coordinates": [lon, lat]
+                    }
+                }]
+            };
+
+            if (!map.getSource('markers')) {
+                map.addSource('markers', {
+                    'type': 'geojson',
+                    'data': markers
                 });
-                window.map.addLayer({
+                map.addLayer({
                     "id": "markers",
                     "type": "symbol",
                     "source": "markers",
@@ -55,7 +87,7 @@
                         "icon-image": "{icon}-15"
                     }
                 });
-            });
+            }
         }
     </script>
     </div>
diff --git a/themes/flog/layouts/partials/footer.html b/themes/flog/layouts/partials/footer.html
index a617ce6..937ff18 100644
--- a/themes/flog/layouts/partials/footer.html
+++ b/themes/flog/layouts/partials/footer.html
@@ -9,15 +9,22 @@
                 var coords = '50% ' + yPos + 'px';
                 $('body').css({ backgroundPosition: coords });
             };
-            function ready() {
+
+            document.addEventListener('pageReady', function() {
                 parallax();
                 $('.button-collapse').sideNav();
                 $('.button-collapse').sideNav('hide');
-            };
+            });
+
+            function ready() {
+                document.dispatchEvent(new CustomEvent('pageReady'));
+            }
+
             $(document).ready(function() {
+                parallax();
                 $(window).scroll(parallax);
+                $('.button-collapse').sideNav();
                 $('#main').smoothState({ prefetch: true, onAfter: ready });
-                ready();
             });
         </script>
     </body>
diff --git a/themes/flog/layouts/partials/listing.html b/themes/flog/layouts/partials/listing.html
index 31e5614..93fe09d 100644
--- a/themes/flog/layouts/partials/listing.html
+++ b/themes/flog/layouts/partials/listing.html
@@ -28,7 +28,29 @@
         {{ end }}
     </div>
 </main>
-<script type="text/javascript" src="/js/masonry-4.1.min.js"></script>
 <script type="text/javascript">
-    new Masonry('.grid', { itemSelector: '.grid-item', percentPosition: true, columnWidth: '.grid-sizer' });
+    var masonryReadyAttached;
+    
+    if (typeof $ === 'undefined') {
+        document.addEventListener('DOMContentLoaded', loadMasonry);
+    }
+    if (typeof masonryReadyAttached === 'undefined') {
+        masonryReadyAttached = true;
+        document.addEventListener('pageReady', loadMasonry);
+    }
+    
+    function loadMasonry() {
+        if (typeof Masonry === 'undefined') {
+            console.log('loading masonry files');
+            $.getScript('/js/masonry-4.1.min.js', showMasonry);
+        } else {
+            console.log('masonry files already present');
+            showMasonry();
+        }
+    }
+    function showMasonry() {
+        if ($('.grid').length == 0) return;
+        console.log('using masonry to fix this grid');
+        new Masonry('.grid', { itemSelector: '.grid-item', percentPosition: true, columnWidth: '.grid-sizer' });
+    }
 </script>