trigger flux-influxdb-version modal with query param (#4230)

assets/js/flux-influxdb-versions.js

@@ -23,3 +23,20 @@ if ($(fluxInfluxDBModal).length > 0) {
   if (presentKeys.deprecated === false) { $(fluxInfluxDBModal + ' .color-key #deprecated-key' ).remove() }
   if (presentKeys.pending === false && presentKeys.deprecated === false) { $(fluxInfluxDBModal + ' .color-key' ).remove() }
 }
+
+
+// Open version modal and add query param
+const queryParams = new URLSearchParams(window.location.search);
+
+function openFluxVersionModal() {
+  const anchor = window.location.hash;
+
+  toggleModal('#flux-influxdb-versions');
+  queryParams.set('view', 'influxdb-support');
+  window.history.replaceState({}, '', `${location.pathname}?${queryParams}${anchor}`);
+};
+
+// Check for the modal query param and open the modal if it exists
+if (queryParams.get('view') !== null) {
+  openFluxVersionModal();
+};

assets/js/modals.js

@@ -17,4 +17,13 @@ function toggleModal(modalID="") {
 $("#modal-close, .modal-overlay").click(function(e) {
   e.preventDefault()
   toggleModal()
+  
+  // Remove modal query param ('view') if it exists
+  const queryParams = new URLSearchParams(window.location.search);
+  const anchor = window.location.hash;
+
+  if (queryParams.get('view') !== null) {
+    queryParams.delete('view');
+    window.history.replaceState({}, '', `${location.pathname}${anchor}`);
+  };
 })

layouts/partials/article/supported-versions.html

@@ -8,7 +8,7 @@
     {{ $productName }} {{ .Page.Params.introduced }}{{ if .Page.Params.deprecated }}{{ print " – " .Page.Params.deprecated }}{{ else if .Page.Params.removed }}{{ print " – " .Page.Params.removed }}{{ else }}+{{ end }}
   </li>
   {{ if $inStdlib }}
-  <li class="flux-influxdb"><a onclick="toggleModal('#flux-influxdb-versions')">View InfluxDB support</a></li>
+  <li class="flux-influxdb"><a onclick="openFluxVersionModal()">View InfluxDB support</a></li>
   {{ end }}
 </ul>
 {{ end }}