perf: add require_isotope option (experimental)

If a site doesn't require Isotope Layout Engine (i.e. not using filter on publication archive page or the Portfolio widget), it can be disabled in params.toml for performance increase:

require_isotope = false

wowchemy/assets/js/wowchemy.js

@@ -125,27 +125,57 @@
   // Publication container.
   let $grid_pubs = $('#container-publications');
 
-  // Initialise Isotope.
-  $grid_pubs.isotope({
-    itemSelector: '.isotope-item',
-    percentPosition: true,
-    masonry: {
-      // Use Bootstrap compatible grid layout.
-      columnWidth: '.grid-sizer'
-    },
-    filter: function () {
-      let $this = $(this);
-      let searchResults = searchRegex ? $this.text().match(searchRegex) : true;
-      let filterResults = filterValues ? $this.is(filterValues) : true;
-      return searchResults && filterResults;
-    }
-  });
+  // Initialise Isotope publication layout if required.
+  if ($grid_pubs.length)
+  {
+    $grid_pubs.isotope({
+      itemSelector: '.isotope-item',
+      percentPosition: true,
+      masonry: {
+        // Use Bootstrap compatible grid layout.
+        columnWidth: '.grid-sizer'
+      },
+      filter: function () {
+        let $this = $(this);
+        let searchResults = searchRegex ? $this.text().match(searchRegex) : true;
+        let filterResults = filterValues ? $this.is(filterValues) : true;
+        return searchResults && filterResults;
+      }
+    });
 
-  // Filter by search term.
-  let $quickSearch = $('.filter-search').keyup(debounce(function () {
-    searchRegex = new RegExp($quickSearch.val(), 'gi');
-    $grid_pubs.isotope();
-  }));
+    // Filter by search term.
+    let $quickSearch = $('.filter-search').keyup(debounce(function () {
+      searchRegex = new RegExp($quickSearch.val(), 'gi');
+      $grid_pubs.isotope();
+    }));
+
+    $('.pub-filters').on('change', function () {
+      let $this = $(this);
+
+      // Get group key.
+      let filterGroup = $this[0].getAttribute('data-filter-group');
+
+      // Set filter for group.
+      pubFilters[filterGroup] = this.value;
+
+      // Combine filters.
+      filterValues = concatValues(pubFilters);
+
+      // Activate filters.
+      $grid_pubs.isotope();
+
+      // If filtering by publication type, update the URL hash to enable direct linking to results.
+      if (filterGroup === "pubtype") {
+        // Set hash URL to current filter.
+        let url = $(this).val();
+        if (url.substr(0, 9) === '.pubtype-') {
+          window.location.hash = url.substr(9);
+        } else {
+          window.location.hash = '';
+        }
+      }
+    });
+  }
 
   // Debounce input to prevent spamming filter requests.
   function debounce(fn, threshold) {
@@ -173,35 +203,12 @@
     return value;
   }
 
-  $('.pub-filters').on('change', function () {
-    let $this = $(this);
-
-    // Get group key.
-    let filterGroup = $this[0].getAttribute('data-filter-group');
-
-    // Set filter for group.
-    pubFilters[filterGroup] = this.value;
-
-    // Combine filters.
-    filterValues = concatValues(pubFilters);
-
-    // Activate filters.
-    $grid_pubs.isotope();
-
-    // If filtering by publication type, update the URL hash to enable direct linking to results.
-    if (filterGroup == "pubtype") {
-      // Set hash URL to current filter.
-      let url = $(this).val();
-      if (url.substr(0, 9) == '.pubtype-') {
-        window.location.hash = url.substr(9);
-      } else {
-        window.location.hash = '';
-      }
-    }
-  });
-
   // Filter publications according to hash in URL.
   function filter_publications() {
+    // Check for Isotope publication layout.
+    if (!$grid_pubs.length)
+      return
+
     let urlHash = window.location.hash.replace('#', '');
     let filterValue = '*';
 

wowchemy/layouts/partials/site_js.html

@@ -6,8 +6,13 @@
       <script src="{{ printf "/js/vendor/%s" ($scr.Get "vendor_js_filename") | relURL }}"></script>
     {{ else }}
       {{ printf "<script src=\"%s\" integrity=\"%s\" crossorigin=\"anonymous\"></script>" (printf $js.jQuery.url $js.jQuery.version) $js.jQuery.sri | safeHTML }}
-      {{ printf "<script src=\"%s\" integrity=\"%s\" crossorigin=\"anonymous\"></script>" (printf $js.imagesLoaded.url $js.imagesLoaded.version) $js.imagesLoaded.sri | safeHTML }}
-      {{ printf "<script src=\"%s\" integrity=\"%s\" crossorigin=\"anonymous\"></script>" (printf $js.isotope.url $js.isotope.version) $js.isotope.sri | safeHTML }}
+
+      {{ $require_isotope := site.Params.require_isotope | default true }}
+      {{ if $require_isotope }}
+        {{ printf "<script src=\"%s\" integrity=\"%s\" crossorigin=\"anonymous\"></script>" (printf $js.imagesLoaded.url $js.imagesLoaded.version) $js.imagesLoaded.sri | safeHTML }}
+        {{ printf "<script src=\"%s\" integrity=\"%s\" crossorigin=\"anonymous\"></script>" (printf $js.isotope.url $js.isotope.version) $js.isotope.sri | safeHTML }}
+      {{ end }}
+
       {{ printf "<script src=\"%s\" integrity=\"%s\" crossorigin=\"anonymous\"></script>" (printf $js.fancybox.url $js.fancybox.version) $js.fancybox.sri | safeHTML }}
       {{ printf "<script src=\"%s\" integrity=\"%s\" crossorigin=\"anonymous\"></script>" (printf $js.instantpage.url $js.instantpage.version) $js.instantpage.sri | safeHTML }}
 

wowchemy/test/config.yaml

@@ -4,3 +4,5 @@ module:
     - path: github.com/wowchemy/wowchemy-hugo-modules/wowchemy
 outputs:
   home: [HTML, RSS, JSON, WebAppManifest]
+params:
+  require_isotope: false

wowchemy/test/content/home/section.md

@@ -1 +1,9 @@
+---
+widget: blank
+headless: true
+weight: 1
+design:
+  columns: '1'
+---
+
 Hello world 😃

wowchemy/test/view.sh

@@ -0,0 +1 @@
+hugo server -p 1330 --minify