widgets: Enable reuse of project widget (Close HugoBlox#100)

* Replace ids by classes
* Adapt click functions for filter links to filter only in the
relevant widget
* Hide project filter buttons, when there is only one

layouts/partials/css/academic.css

@@ -592,7 +592,7 @@ article {
   color: #9c9c9c;
 }
 
-#container-projects {
+.projects-container {
   display: block;
   position: relative;
   /*margin-top: 5rem;*/

layouts/partials/widgets/projects.html

@@ -12,11 +12,12 @@ <h1>{{ with $page.Title }}{{ . | markdownify }}{{ end }}</h1>
 
     {{ $filter_default := default (int $page.Params.filter_default) 0 }}
     {{ with $page.Params.filter }}
-    <span id="default-project-filter" class="hidden">{{ (index $page.Params.filter ($filter_default)).tag }}</span>
+    <span class="hidden default-project-filter">{{ (index $page.Params.filter ($filter_default)).tag }}</span>
     {{ end }}
 
+    {{ if gt (len $page.Params.filter) 1 }}
     <div class="project-toolbar">
-      <div id="filters">
+      <div class="project-filters">
         <div class="btn-toolbar">
           <div class="btn-group">
             {{ range $idx, $item := $page.Params.filter }}
@@ -26,10 +27,11 @@ <h1>{{ with $page.Title }}{{ . | markdownify }}{{ end }}</h1>
         </div>
       </div>
     </div>
+    {{ end }}
 
     {{ if eq $page.Params.view 0 }}
 
-    <div id="container-projects" class="row isotope">
+    <div class="row isotope projects-container">
         {{ range where $.Data.Pages "Type" "project" }}
         <div class="col-md-12 project-item isotope-item {{ delimit .Params.tags " " }}" itemscope itemtype="http://schema.org/CreativeWork">
           <i class="fa fa-files-o pub-icon" aria-hidden="true"></i>
@@ -50,7 +52,7 @@ <h1>{{ with $page.Title }}{{ . | markdownify }}{{ end }}</h1>
 
     {{ else }}
 
-    <div id="container-projects" class="row isotope">
+    <div class="row isotope projects-container">
 
       {{ range $project := where $.Data.Pages "Type" "project" }}
       {{ $.Scratch.Set "project_url" $project.Permalink }}

static/js/hugo-academic.js

@@ -101,21 +101,24 @@
    * Filter projects.
    * --------------------------------------------------------------------------- */
 
-  let $grid_projects = $('#container-projects');
-  $grid_projects.imagesLoaded(function () {
-    // Initialize Isotope after all images have loaded.
-    $grid_projects.isotope({
-      itemSelector: '.isotope-item',
-      layoutMode: 'masonry',
-      filter: $('#default-project-filter').text()
-    });
-
-    // Filter items when filter link is clicked.
-    $('#filters a').click(function () {
-      let selector = $(this).attr('data-filter');
-      $grid_projects.isotope({filter: selector});
-      $(this).removeClass('active').addClass('active').siblings().removeClass('active all');
-      return false;
+  $('.projects-container').each(function(index, container) {
+    let $container = $(container);
+    let $section = $container.closest('section');
+
+    $container.imagesLoaded(function() {
+      // Initialize Isotope after all images have loaded.
+      $container.isotope({
+        itemSelector: '.isotope-item',
+        layoutMode: 'masonry',
+        filter: $section.find('.default-project-filter').text()
+      });
+      // Filter items when filter link is clicked.
+      $section.find('.project-filters a').click(function() {
+        let selector = $(this).attr('data-filter');
+        $container.isotope({filter: selector});
+        $(this).removeClass('active').addClass('active').siblings().removeClass('active all');
+        return false;
+      });
     });
   });