From fb127402c6329b23eb7e085b5a39d3b6da11810b Mon Sep 17 00:00:00 2001
From: Tim Bannister <tim@scalefactory.com>
Date: Mon, 17 Aug 2020 09:10:45 +0100
Subject: [PATCH] Add cncf-landscape shortcode

and adjust /partners/ to use it.
---
 content/en/partners/_index.html        | 53 ++--------------------
 layouts/shortcodes/cncf-landscape.html | 63 ++++++++++++++++++++++++++
 2 files changed, 67 insertions(+), 49 deletions(-)
 create mode 100644 layouts/shortcodes/cncf-landscape.html

diff --git a/content/en/partners/_index.html b/content/en/partners/_index.html
index 7925e03188..80078ae76b 100644
--- a/content/en/partners/_index.html
+++ b/content/en/partners/_index.html
@@ -7,7 +7,6 @@ cid: partners
 ---
 
 <section id="users">
-  <main class="main-section">
     <h5>Kubernetes works with partners to create a strong, vibrant codebase that supports a spectrum of complementary platforms.</h5>
     <div class="col-container">
       <div class="col-nav">
@@ -17,7 +16,7 @@ cid: partners
           </h5>
           <br>Vetted service providers with deep experience helping enterprises successfully adopt Kubernetes.
           <br><br><br>
-          <button class="button" id="kcsp" onclick="updateSrc(this.id)">See KCSP Partners</button>
+          <button class="button landscape-trigger landscape-default" data-landscape-types="kubernetes-certified-service-provider" id="kcsp">See KCSP Partners</button>
           <br><br>Interested in becoming a
           <a href="https://www.cncf.io/certification/kcsp/">KCSP</a>?
         </center>
@@ -28,7 +27,7 @@ cid: partners
             <b>Certified Kubernetes Distributions, Hosted Platforms, and Installers</b>
           </h5>Software conformance ensures that every vendor’s version of Kubernetes supports the required APIs.
           <br><br><br>
-          <button class="button" id="conformance" onclick="updateSrc(this.id)">See Conformance Partners</button>
+          <button class="button landscape-trigger" data-landscape-types="certified-kubernetes-distribution,certified-kubernetes-hosted,certified-kubernetes-installer" id="conformance">See Conformance Partners</button>
           <br><br>Interested in becoming
           <a href="https://www.cncf.io/certification/software-conformance/">Kubernetes Certified</a>?
         </center>
@@ -40,57 +39,13 @@ cid: partners
           </h5>
           <br>Vetted training providers who have deep experience in cloud native technology training.
           <br><br><br>
-          <button class="button" id="ktp" onclick="updateSrc(this.id)">See KTP Partners</button>
+          <button class="button landscape-trigger" data-landscape-types="kubernetes-training-partner" id="ktp">See KTP Partners</button>
           <br><br>Interested in becoming a
           <a href="https://www.cncf.io/certification/training/">KTP</a>?
         </center>
       </div>
     </div>
-    <script crossorigin="anonymous" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
-    <script type="text/javascript">
-
-      var defaultLink = "https://landscape.cncf.io/category=kubernetes-certified-service-provider&format=card-mode&grouping=category&embed=yes";
-      var firstLink = "https://landscape.cncf.io/category=certified-kubernetes-distribution,certified-kubernetes-hosted,certified-kubernetes-installer&format=card-mode&grouping=category&embed=yes";
-      var secondLink = "https://landscape.cncf.io/category=kubernetes-training-partner&format=card-mode&grouping=category&embed=yes";
-
-      function updateSrc(buttonId) {
-        if (buttonId == "kcsp") {
-          $("#landscape").attr("src", defaultLink);
-          window.location.hash = "#kcsp";
-        }
-        if (buttonId == "conformance") {
-          $("#landscape").attr("src", firstLink);
-          window.location.hash = "#conformance";
-        }
-        if (buttonId == "ktp") {
-          $("#landscape").attr("src", secondLink);
-          window.location.hash = "#ktp";
-        }
-      }
-
-      // Automatically load the correct iframe based on the URL fragment
-      document.addEventListener("DOMContentLoaded", function () {
-        var showContent = "kcsp";
-        if (window.location.hash) {
-          console.log("hash is:", window
-            .location
-            .hash
-            .substring(1));
-          showContent = window
-            .location
-            .hash
-            .substring(1);
-        }
-        updateSrc(showContent);
-      });
-    </script>
-    <body>
-      <div id="frameHolder">
-        <iframe frameborder="0" id="landscape" scrolling="no" src="" style="width: 1px; min-width: 100%" title="CNCF Landscape"></iframe>
-        <script src="https://landscape.cncf.io/iframeResizer.js"></script>
-      </div>
-    </body>
-  </main>
+    {{< cncf-landscape helpers=true >}}
 </section>
 
 <style>
diff --git a/layouts/shortcodes/cncf-landscape.html b/layouts/shortcodes/cncf-landscape.html
new file mode 100644
index 0000000000..5684dc0511
--- /dev/null
+++ b/layouts/shortcodes/cncf-landscape.html
@@ -0,0 +1,63 @@
+{{ $helpers := .Get "helpers" }}
+{{ if not (or (eq $helpers true) (eq $helpers false)) }}
+  {{ errorf "must set helpers to a boolean" }}
+{{ else }}
+<!-- CNCF Landscape helpers -->
+
+{{ if $helpers }}
+<script>
+function updateLandscapeSource(button,shouldUpdateFragment) {
+  console.log({button: button,shouldUpdateFragment: shouldUpdateFragment});
+  try {
+    if(shouldUpdateFragment) {
+      window.location.hash = "#"+button.id;
+      // hash change handler will call us again with shouldUpdateFragment set false
+    } else {
+      var landscapeElements = document.querySelectorAll("#landscape");
+      let categories=button.dataset.landscapeTypes;
+      let link = "https://landscape.cncf.io/category="+encodeURIComponent(categories)+"&format=card-mode&grouping=category&embed=yes";
+      landscapeElements[0].src = link;
+    }
+  }
+  catch(err) {
+    console.log({message: "error handling Landscape switch", error: err})
+  }
+}
+
+// Automatically load the correct iframe based on the URL fragment
+document.addEventListener("DOMContentLoaded", function () {
+  let hashChangeHandler = () => {
+    if (window.location.hash) {
+      let selectedTriggerElements = document.querySelectorAll(".landscape-trigger"+window.location.hash);
+      if (selectedTriggerElements.length == 1) {
+        landscapeSource = selectedTriggerElements[0];
+        console.log("Updating Landscape source based on fragment:", window
+          .location
+          .hash
+          .substring(1));
+        updateLandscapeSource(landscapeSource,false);
+      }
+    }
+  }
+  var landscapeTriggerElements = document.querySelectorAll(".landscape-trigger");
+  landscapeTriggerElements.forEach(element => {
+    element.onclick = function() {
+        updateLandscapeSource(element,true);
+    };
+  });
+  var landscapeDefaultElements = document.querySelectorAll(".landscape-trigger.landscape-default");
+  if (landscapeDefaultElements.length == 1) {
+    let defaultLandscapeSource = landscapeDefaultElements[0];
+    updateLandscapeSource(defaultLandscapeSource,false);
+  }
+  window.addEventListener("hashchange", hashChangeHandler, false);
+  /* handle initially-set fragment */
+  hashChangeHandler();
+});
+</script>
+{{- end -}}
+<div id="frameHolder">
+  <iframe frameborder="0" id="landscape" scrolling="no" src="" style="width: 1px; min-width: 100%" title="CNCF Landscape"></iframe>
+  <script src="https://landscape.cncf.io/iframeResizer.js"></script>
+</div>
+{{- end -}}