Add JS logic to toggle GitHub/GitLab content

This code does 2 things:
1. Toggles <articles> with ids that start with github- and gitlab- to
hide/show either of the two.
2. Stores and reads a parameter from the URL to override and persist the
GitHub/GitLab widget selection across pages (without client-side data)

assets/js/lesson.js

@@ -32,6 +32,73 @@ $(function(){
     $('#life-cycle').data('size','big');
 });
 
+// Toggle between GitHub and GitLab content
+// article tags with an id github- or gitlab- are alternatively shown/hidden
+function check_github_gitlab_selection() {
+    if (this.value === 'github' && this.checked) {
+        console.log("Enabling GitHub content");
+        $("article[id^=github-]").show();
+        $("article[id^=gitlab-]").hide();
+    }
+    else if (this.value === 'gitlab' && this.checked) {
+        console.log("Enabling GitLab content");
+        $("article[id^=gitlab-]").show();
+        $("article[id^=github-]").hide();
+    }
+}
+
+$(function() {
+    // Check if we have URL selection for either GitHub or GitLab
+    // The URL parameter takes precedence if set
+    let urlParams = new URLSearchParams(window.location.search);
+    // Name of url parameter
+    let ghgl_attr = "github_gitlab";
+    // Widget to select between GitHub and GitLab content
+    let ghgl_selector = $('#github-gitlab-selector input[type=radio][name=github-gitlab-selector]');
+
+    if (urlParams.has(ghgl_attr)) {
+        // When URL is set we need to get its value to
+        // configure the GitHub/GitLab selector widget
+        let ghgl = urlParams.get(ghgl_attr);
+
+        // The active class gives the label the "effect" of being selected
+        ghgl_selector.parent().removeClass('active');
+
+        // Force ghgl_selector to match the URL provided element
+        let selected_radio = ghgl_selector.filter(`[value=${ghgl}]`)
+        selected_radio.parent().addClass('active');
+        selected_radio.prop('checked', true);
+        console.log(`Selected and forced option ${ghgl}`);
+    }
+
+    // Trigger content change when the GitHub/GitLab widget is used
+    ghgl_selector.change(check_github_gitlab_selection);
+
+    // When the page loads, make sure to hide/show the correct content
+    // based on the selection in the GitHub/GitLab widget
+    ghgl_selector.trigger("change");
+
+    // To preserve the GitHub/GitLab selection across pages
+    // and without relying on cookies (avoiding Cookie Law implications)
+    // when a visitor clicks on any <a> the github/gitlab value
+    // is added as a URL parameter
+    // FIXME Only add the parameter if the URL is local
+    // i.e. if it lacks a hostname or the hostname matches the current URL
+    $("a").click(function(e) {
+        e.preventDefault();
+        let ghgl_value = ghgl_selector.filter(":checked").val();
+        let href = this.href;
+        if (href.indexOf('?') != -1) {
+            // when URL already contains at least 1 parameter
+            href = href + `&${ghgl_attr}=${ghgl_value}`;
+        } else {
+            // when URL contains no parameters
+            href = href + `?${ghgl_attr}=${ghgl_value}`;
+        }
+        window.location.href = href;
+    });
+});
+
 $(window).scroll(function(){
     if($(document).scrollTop() > 0)
     {