Concatenated all JS into a single file (#624)

no issue

- moved large inline JS from templates into separate JS files
  - floating header
  - gallery card support
- use `gulp-concat` to concatenate all JS files into a single `built/casper.js` file
- reduces external JS file requests from 3 (jquery, infinite-scroll.js, jquery.fitvids.js) down to 2 (jquery, casper.js) and reduces page size by removing repeated inline code

assets/js/floating-header.js

@@ -0,0 +1,73 @@
+/* eslint-env browser */
+
+/**
+ * Floating header
+ * Used on invividual post pages, displays a sticky header with progress indicator
+ *
+ * This JS is automatically applied for any template where you use the
+ * {{> floating-header}} partial
+ */
+
+(function (window, document) {
+    // set up Casper as a global object
+    if (!window.Casper) {
+        window.Casper = {};
+    }
+
+    window.Casper.floatingHeader = function floatingHeader() {
+        // NOTE: Scroll performance is poor in Safari
+        // - this appears to be due to the events firing much more slowly in Safari.
+        //   Dropping the scroll event and using only a raf loop results in smoother
+        //   scrolling but continuous processing even when not scrolling
+
+        var progressBar = document.querySelector('#reading-progress');
+        var header = document.querySelector('.floating-header');
+        var title = document.querySelector('.post-full-title');
+
+        var lastScrollY = window.scrollY;
+        var lastWindowHeight = window.innerHeight;
+        var lastDocumentHeight = document.body.clientHeight;
+        var ticking = false;
+
+        function onScroll() {
+            lastScrollY = window.scrollY;
+            requestTick();
+        }
+
+        function onResize() {
+            lastWindowHeight = window.innerHeight;
+            lastDocumentHeight = document.body.clientHeight;
+            requestTick();
+        }
+
+        function requestTick() {
+            if (!ticking) {
+                requestAnimationFrame(update);
+            }
+            ticking = true;
+        }
+
+        function update() {
+            var trigger = title.getBoundingClientRect().top + window.scrollY;
+            var triggerOffset = title.offsetHeight + 35;
+            var progressMax = lastDocumentHeight - lastWindowHeight;
+
+            // show/hide floating header
+            if (lastScrollY >= trigger + triggerOffset) {
+                header.classList.add('floating-active');
+            } else {
+                header.classList.remove('floating-active');
+            }
+
+            progressBar.setAttribute('max', progressMax);
+            progressBar.setAttribute('value', lastScrollY);
+
+            ticking = false;
+        }
+
+        window.addEventListener('scroll', onScroll, {passive: true});
+        window.addEventListener('resize', onResize, false);
+
+        update();
+    };
+})(window, document);

assets/js/gallery-card.js

@@ -0,0 +1,24 @@
+/* eslint-env browser */
+
+/**
+ * Gallery card support
+ * Used on any individual post/page
+ *
+ * Detects when a gallery card has been used and applies sizing to make sure
+ * the display matches what is seen in the editor.
+ */
+
+(function (window, document) {
+    var resizeImagesInGalleries = function resizeImagesInGalleries() {
+        var images = document.querySelectorAll('.kg-gallery-image img');
+        images.forEach(function (image) {
+            var container = image.closest('.kg-gallery-image');
+            var width = image.attributes.width.value;
+            var height = image.attributes.height.value;
+            var ratio = width / height;
+            container.style.flex = ratio + ' 1 0%';
+        });
+    };
+
+    document.addEventListener('DOMContentLoaded', resizeImagesInGalleries);
+})(window, document);

assets/js/infinitescroll.js

@@ -1,15 +1,30 @@
+/* eslint-env browser */
+
 /**
  * Infinite Scroll
+ * Used on all pages where there is a list of posts (homepage, tag index, etc).
+ *
+ * When the page is scrolled to 300px from the bottom, the next page of posts
+ * is fetched by following the the <link rel="next" href="..."> that is output
+ * by {{ghost_head}}.
+ *
+ * The individual post items are extracted from the fetched pages by looking for
+ * a wrapper element with the class "post-card". Any found elements are appended
+ * to the element with the class "post-feed" in the currently viewed page.
  */
 
-(function(window, document) {
+(function (window, document) {
     // next link element
     var nextElement = document.querySelector('link[rel=next]');
-    if (!nextElement) return;
+    if (!nextElement) {
+        return;
+    }
 
     // post feed element
     var feedElement = document.querySelector('.post-feed');
-    if (!feedElement) return;
+    if (!feedElement) {
+        return;
+    }
 
     var buffer = 300;
 
@@ -50,7 +65,9 @@
 
     function onUpdate() {
         // return if already loading
-        if (loading) return;
+        if (loading) {
+            return;
+        }
 
         // return if not scroll to the bottom
         if (lastScrollY + lastWindowHeight <= lastDocumentHeight - buffer) {
@@ -85,7 +102,7 @@
         requestTick();
     }
 
-    window.addEventListener('scroll', onScroll, { passive: true });
+    window.addEventListener('scroll', onScroll, {passive: true});
     window.addEventListener('resize', onResize);
 
     requestTick();