fix js library loading

1 files changed, 24 insertions, 2 deletions

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>