Adding lazy-load version of feed component to load data using AJAX after page content has been rendered.

www/themes/jason-williamsca/assets/javascript/common.js

@@ -0,0 +1,17 @@
+$(() => {
+    // Enable any tooltips on the page
+    $('[data-toggle="tooltip"]').tooltip()
+    
+    // Enable masonry layout
+    $('.masonry').each(function() {
+        var opts = { itemSelector: '.masonry-item' }
+        if ($(this).hasClass('masonry-horizontal')) opts.horizontalOrder = true
+        
+        $(this).masonry(opts)
+    })
+    
+    // Resize textareas to fit their content
+    $('textarea').each(function() {
+        $(this).height($(this)[0].scrollHeight)
+    })
+});

www/themes/jason-williamsca/assets/javascript/feedlayout.js

@@ -0,0 +1,45 @@
+(function($) {
+    "use strict"; // Start of use strict
+    
+    // If the feed is loaded immediadely on page load (i.e. we're not using ajax), reset the layout on each image load
+    $('.masonry img').each(function() {
+        $(this).one('load', () => {
+            $('.masonry').masonry()
+        })
+    })
+    
+    // Apply masonry layout to feed cards after content (including images) has been loaded
+    $(window).on('feedLoaded', function() {
+        if (!feedItemClass) feedItemClass = 'col-sm-12 col-md-6 col-xl-4'
+        
+        $('.masonry-item').addClass(feedItemClass)
+        $('.show-onfeedloaded').removeClass('d-none')
+
+        $('.masonry').masonry('reloadItems')
+        $('.masonry').masonry()
+        
+        // Every time an image loads, reset the layout
+        $('.masonry img').each(function() {
+            $(this).one('load', () => {
+                $('.masonry').masonry()
+            })
+        })
+    })
+    
+    // If there's tag data set once the page is loaded, create a tag cloud
+    $(function() {
+        if(typeof tagData !== 'undefined') {
+            var cloudWords = []
+            
+            tagData.forEach((tag) => {
+                cloudWords.push({text: tag.tag, weight: tag.count, link: '/feed/all/' + tag.tag})
+            })
+            
+            $('#tagcloud').jQCloud(cloudWords, {
+                autoResize: true,
+                removeOverflowing: true,
+                delay: 2
+            })
+        }
+    })
+})(jQuery); // End of use strict

www/themes/jason-williamsca/assets/javascript/resume.js

@@ -1,23 +1,22 @@
 (function($) {
     "use strict"; // Start of use strict
     
-    // Apply masonry layout to cards
-    $('.masonry').each(function() {
-        var opts = { itemSelector: '.masonry-wrapper' };
-        if ($(this).children().length < 6) opts.horizontalOrder = true;
-        $(this).masonry(opts);
-    });
-    
     // Add reorder icon to .card-inline
-    $('.card-inline').prepend('<div class="inline-icon" data-toggle="tooltip" title="Toggle bullet view"><i class="fas fa-stream"></i></div>');
+    $('.card-inline').prepend('<div class="inline-icon" data-toggle="tooltip" title="Toggle bullet view"><i class="fas fa-stream"></i></div>')
     
-    $('.card-inline .inline-icon').click(function() {
-        var that = $(this);
-        that.closest('.card').toggleClass('inline').closest('.masonry').masonry();
+    // Define a function to toggle the view
+    const toggleBulletView = function() {
+        var that = $(this)
+        that.closest('.card').toggleClass('inline').closest('.masonry').masonry()
         setTimeout(() => {
-            that.tooltip('hide');
+            that.tooltip('hide')
         }, 2000);
-    });
+        return false
+    }
+    
+    // Add the function to clicks on the menu button, and/or taps anywhere on the card
+    $('.card-inline .inline-icon').on('click', toggleBulletView)
+    $('.card-inline').on('touchstart', toggleBulletView)
     
     // Smooth scrolling using jQuery easing
     $('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function() {

www/themes/jason-williamsca/assets/javascript/tooltips.js

@@ -1,3 +0,0 @@
-$(() => {
-    $('[data-toggle="tooltip"]').tooltip()
-});