Merge pull request #3546 from vespa-engine/laura/poc-version-select

POC for a Vespa version select in the documentation

_data/sidebar.yml

@@ -301,6 +301,7 @@ docs:
         url: /en/operations/tools.html
 
   - title: Operations - selfhosted
+    mode: selfhosted
     documents:
       - page: Multinode Systems
         url: /en/operations-selfhosted/multinode-systems.html

_includes/navbar.html

@@ -1,10 +1,83 @@
 <!-- Copyright Vespa.ai. All rights reserved.. -->
+<script>
+
+	function setModeParam(mode) {
+		const currentUrl = new URL(window.location.href);  // Get the current URL
+		const urlParams = new URLSearchParams(currentUrl.search);
+		urlParams.set('mode', mode);  // Set or update the query parameter
+		currentUrl.search = urlParams.toString();
+		window.history.pushState({}, '', currentUrl);
+	}
+
+	function hideElements(mode){
+		const hiddenElements = document.querySelector(`.mode-${mode}`);
+		if (hiddenElements){
+			hiddenElements.style.display = 'none';  
+		}
+	}
+
+	function showElements(mode){
+		const hiddenElements = document.querySelector(`.mode-${mode}`);
+		if (hiddenElements){
+			hiddenElements.style.display = 'block';  
+		}
+	}
+
+	function handleCurrentMode(currentmode){
+        localStorage.setItem('mode', currentmode);
+		if (currentmode === 'cloud'){
+			hideElements('selfhosted');
+			showElements('cloud');
+		} else if (currentmode === 'selfhosted'){
+			hideElements('cloud');
+			showElements('selfhosted')
+		}
+	}
+	function selectMode(mode) {
+		setModeParam(mode);
+		handleCurrentMode(mode);
+	}
+
+	document.addEventListener('DOMContentLoaded', function() {
+		const currentUrl = new URL(window.location.href); 
+		const urlParams = new URLSearchParams(currentUrl.search);
+		let currentmode = urlParams.get('mode');
+        if (!currentmode) {
+            currentmode = localStorage.getItem('mode');
+            if (currentmode) {
+                setModeParam(currentmode);
+            } else if (!currentmode) {
+            // This is temporairly added so that we can test the new mode selector
+            // The selector will only appear if there is ?mode= in the url or if it is stored in local storage
+                document.getElementById('docs-mode').classList.add('hide');
+                document.getElementById('sidebar').classList.remove('p-t-35');
+                showElements('cloud');
+                showElements('selfhosted');
+            }
+        }
+
+		if(currentmode !== null){
+			document.getElementById('docs-mode').value = currentmode;
+			handleCurrentMode(currentmode);
+		}
+
+		document.getElementById('docs-mode').addEventListener('change', function() {
+			const selectedValue = this.value;
+			selectMode(selectedValue);
+		});
+	});
+
+</script>
 <!-- Navbar -->
 <nav class="nav sticky-top {{include.class}}">
     <div class="nav-left">
         <span class="nav-item hide-small-desktop-up" onclick="toggleMenu()"><i class="d-icon d-menu-hamburger"></i></span>
         <a href="https://docs.vespa.ai/">
             <img class="nav-brand" src="{{ site.baseurl }}/assets/logos/{{include.logo}}" alt="Vespa logo"/></a>
+            <select id="docs-mode" style="width: 80%; padding: 10px 5px; margin-top: -7px; font-size: 1.6rem;">
+                <option value="cloud">Vespa Cloud</option>
+                <option value="selfhosted">Vespa Self-hosted</option>
+            </select>
     </div>
 
     <div  id="navMenu" class="nav-responsive">

_includes/sidebar.html

@@ -1,20 +1,22 @@
 <!-- Copyright Vespa.ai. All rights reserved. -->
 
-<div class="tabs is-primary is-vertical">
-  <ul class="p-b-10">
-    <li class="collapse-all tabs__section-header" onclick="expandAllItems();">[+] expand all</li>
+
+<div id="sidebar" class="tabs is-primary is-vertical p-t-35">
+  <ul class="p-b-0">
+    <li class="collapse-all tabs__section-header" onclick="expandAllItems();" id="collapse-all"><span class="d-icon d-add-circle" style="font-size: 16px; max-width: 20px; padding-left: 0"></span>expand all</li>
+	<li class="collapse-all tabs__section-header hide" onclick="collapseAllItems();" id="expand-all"><span class="d-icon d-minus-circle" style="font-size: 16px; max-width: 20px; padding-left: 0"></span>collapse all</li>
   </ul>
   {% if site.data.sidebar.docs[0] %}
     {% for section in site.data.sidebar.docs %}
-      <ul class="p-b-0">
+      <ul class="p-b-0{% if section.mode %} mode-{{ section.mode }} {% endif %}">
         <li class="collapse-parent tabs__section-header" onclick="toggleCollapse(this);">{{ section.title }}</li>
         {% if section.documents[0] %}
           {% for entry in section.documents %}
             {% if entry.sidebar_exclude != true %}
               {% if entry.url == page.url %}
-                <li class="m-l-10 collapsable active"><b><a href="{{ entry.url }}">{{ entry.page }}</a></b></li>
+                <li class="m-l-10 collapsable active{% if section.mode %} mode-{{ section.mode }} {% endif %}"><b><a href="{{ entry.url }}">{{ entry.page }}</a></b></li>
               {% else %}
-                <li class="m-l-10 collapsable"><a href="{{ entry.url }}">{{ entry.page }}</a></li>
+                <li class="m-l-10 collapsable{% if section.mode %} mode-{{ section.mode }} {% endif %}"><a href="{{ entry.url }}">{{ entry.page }}</a></li>
               {% endif %}
             {% endif%}
           {% endfor %}
@@ -28,16 +30,20 @@
 	function initSidebar() {
 		collapseAllItems();
 		expandActiveSection();
-		scrollSidebar();
+		scrollSidebar(); 
 	}
 
 	function collapseAllItems() {
+		document.getElementById('collapse-all').classList.remove('hide');
+		document.getElementById('expand-all').classList.add('hide');
 		for (const item of document.getElementsByClassName("collapsable")) {
 			item.classList.add("collapsed");
 		}
 	}
 
 	function expandAllItems() {
+		document.getElementById('collapse-all').classList.add('hide');
+		document.getElementById('expand-all').classList.remove('hide');
 		for (const item of document.getElementsByClassName("collapsable")) {
 			item.classList.remove("collapsed");
 		}
@@ -68,7 +74,14 @@
 	function scrollSidebar() {
 		const activeElement = document.getElementsByClassName("active")[0];
 		if (typeof(activeElement) !== "undefined") {
-			activeElement.parentElement.scrollIntoView();
+			const rect = activeElement.getBoundingClientRect();
+    		const isInViewport = rect.top >= 0 && rect.left >= 0 
+			&& rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) 
+			&& rect.right <= (window.innerWidth || document.documentElement.clientWidth);
+
+			if (!isInViewport){
+				activeElement.parentElement.scrollIntoView();
+			}
 		}
 	}