From e8cfcabb7652e254f1da8466d7ee446875368493 Mon Sep 17 00:00:00 2001
From: Thomas Mieling <thomas@mieling.at>
Date: Sat, 7 Oct 2017 22:25:50 +0200
Subject: [PATCH] widgets: Enable reuse of project widget (Close #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      |  2 +-
 layouts/partials/widgets/projects.html | 10 +++++----
 static/js/hugo-academic.js             | 31 ++++++++++++++------------
 3 files changed, 24 insertions(+), 19 deletions(-)

diff --git a/layouts/partials/css/academic.css b/layouts/partials/css/academic.css
index 68310d33..521bbe48 100644
--- a/layouts/partials/css/academic.css
+++ b/layouts/partials/css/academic.css
@@ -592,7 +592,7 @@ article {
   color: #9c9c9c;
 }
 
-#container-projects {
+.projects-container {
   display: block;
   position: relative;
   /*margin-top: 5rem;*/
diff --git a/layouts/partials/widgets/projects.html b/layouts/partials/widgets/projects.html
index d9811fa2..0e143f3c 100644
--- a/layouts/partials/widgets/projects.html
+++ b/layouts/partials/widgets/projects.html
@@ -12,11 +12,12 @@
 
     {{ $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 @@
         </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 @@
 
     {{ 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 }}
diff --git a/static/js/hugo-academic.js b/static/js/hugo-academic.js
index 05daffce..ae53fb38 100644
--- a/static/js/hugo-academic.js
+++ b/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()
-    });
+  $('.projects-container').each(function(index, container) {
+    let $container = $(container);
+    let $section = $container.closest('section');
 
-    // 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;
+    $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;
+      });
     });
   });