fix js library loading

2 files changed, 34 insertions, 5 deletions

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>