Update feed.js to better arrange functions and remove repetition.

- Relative times are now applied when the feed is loaded by ajax
- Added weeks as a time factor
- Closes #50

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

@@ -1,47 +1,68 @@
 (function($) {
     "use strict"; // Start of use strict
-    
+
     const min = 60;
     const hour = min * 60;
     const day = hour * 24;
+    const week = day * 7;
     const month = day * 30;
     const ninemonth = month * 9;
-    
-    // If the feed is loaded immediadely on page load (i.e. we're not using ajax), reset the layout on each image load
-    $('.feeditem 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')
+    function addImageLoadHandler() {
-        $('.masonry').masonry()
+        $('.feeditem img').each(function() {
-        
-        // Every time an image loads, reset the layout
-        $('.masonry img').each(function() {
             $(this).one('load', () => {
                 $('.masonry').masonry()
             })
         })
-    })
+    }
-    
+
-    // Render the tag cloud if/when tag data is loaded by the component
+    function setFriendlyTime() {
+        // Loop through each feeditem (assuming they're loaded when the page loads) and set the friendlytime
+        var nowts = Math.floor(new Date().getTime() / 1000)
+        $('.feeditem').each(function() {
+            var elapsed = nowts - $(this).attr('data-timestamp')
+            var friendlytime = false
+
+            if (elapsed < min) friendlytime = elapsed + ' seconds'
+            else if (elapsed < hour) friendlytime = Math.floor(elapsed/min) + ' minutes'
+            else if (elapsed < day) friendlytime = Math.floor(elapsed/hour) + ' hours'
+            else if (elapsed < week) friendlytime = Math.floor(elapsed/day) + ' days'
+            else if (elapsed < month) friendlytime = Math.floor(elapsed/week) + ' weeks'
+            else if (elapsed < ninemonth) friendlytime = Math.floor(elapsed/month) + ' months'
+
+            if (friendlytime && friendlytime.startsWith('1 ')) friendlytime = friendlytime.slice(0, -1)
+
+            if (friendlytime) $(this).find('.friendlytime').html(friendlytime)
+        })
+    }
+
+    // If there are feed items present on page load, do the things...
+    if ($('.feeditem').length > 0) {
+        addImageLoadHandler()
+        setFriendlyTime()
+    }
+
+    // If feeditems are added to the page asynchronously, do the things...
+    $(window).on('feedLoaded', () => {
+        if (!feedItemClass) feedItemClass = 'col-sm-12 col-md-6 col-xl-4'
+        $('.feeditem').addClass(feedItemClass)
+        $('.show-onfeedloaded').removeClass('d-none')
+
+        $('.masonry').masonry('reloadItems')
+        $('.masonry').masonry()
+
+        addImageLoadHandler()
+        setFriendlyTime()
+    })    
+
+    // When a tag data is loaded, render the cloud
     $(window).on('tagsLoaded', function(event, data) {
-        console.log(data.responseJSON)
-        
         var cloudWords = []
-        
+
         data.responseJSON.forEach((tag) => {
             cloudWords.push({text: tag.tag, weight: tag.count, link: '/feed/all/' + tag.tag})
         })
-        
+
         $('#tagcloud').html('').height($('#tagcloud').width() * 4/3)
 
         $('#tagcloud').jQCloud(cloudWords, {
@@ -50,38 +71,4 @@
             delay: 2
         })
     })
-    
-    $(function() {
-        // If there's tag data set once the page is loaded, create a tag cloud
-        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
-            })
-        }
-        
-        // Loop through each feeditem (assuming they're loaded when the page loads) and set the friendlytime
-        var nowts = Math.floor(new Date().getTime() / 1000)
-        $('.feeditem').each(function() {
-            var elapsed = nowts - $(this).attr('data-timestamp')
-            var friendlytime = false
-            
-            if (elapsed < min) friendlytime = elapsed + ' seconds'
-            else if (elapsed < hour) friendlytime = Math.floor(elapsed/min) + ' minutes'
-            else if (elapsed < day) friendlytime = Math.floor(elapsed/hour) + ' hours'
-            else if (elapsed < month) friendlytime = Math.floor(elapsed/day) + ' days'
-            else if (elapsed < ninemonth) friendlytime = Math.floor(elapsed/month) + ' months'
-            
-            if (friendlytime && friendlytime.startsWith('1 ')) friendlytime = friendlytime.slice(0, -1)
-            
-            if (friendlytime) $(this).find('.friendlytime').html(friendlytime)
-        })
-    })
 })(jQuery); // End of use strict