WIP(api): JavaScript module refactor, API stylesheets and theme switc…

…hing

- Use js.Build in asset pipeline to transpile and tree-shake ESM modules
- Reorganize JS from HTML sections into modular ESM (benefts: testing, intellisense, package management, explicit dependencies (imports)
- Move some code into Reactish functional components
- Light/dark theme switching for Rapidoc
- Basic light/dark SCSS setup
- Inherits the user's preferred server URL and sets it as the API server URL

assets/js/FluxGroupKeys.js

@@ -0,0 +1,6 @@
+import { groupData } from './flux-group-keys.js';
+
+export default function FluxGroupKeys() {
+  // Group and render tables on load
+  document.querySelector(tablesElement).addEventListener('load', groupData());
+};

assets/js/Sidebar.js

@@ -0,0 +1,5 @@
+import { setSidebarState } from './sidebar-toggle.js';
+
+export default function Sidebar() {
+  setSidebarState();
+}

assets/js/ThemeStyle.js

@@ -0,0 +1,5 @@
+import { setStyleFromCookie } from './docs-themes.js';
+
+export default function ThemeStyle() {
+  setStyleFromCookie();
+}

assets/js/api-doc/ApiReferencePage.js

@@ -0,0 +1,15 @@
+import { setStyles, setServerUrl, onPreferenceChanged } from './index.js';
+
+export default function ApiReferencePage() {
+  const rapidocEl = document.getElementById('api-doc');
+  if(rapidocEl === null) return;
+  setStyles(rapidocEl);
+  setServerUrl(rapidocEl);
+  rapidocEl.loadSpec(JSON.parse(rapidocEl.dataset.openapiSpec));
+  rapidocEl.addEventListener('spec-loaded', (e) => {});
+  cookieStore.addEventListener('change', (e) => {
+    if(e.changed) {
+      onPreferenceChanged(e, rapidocEl);
+    }
+  });
+}

assets/js/api-doc/index.js

@@ -1,21 +1,58 @@
 import 'rapidoc';
+import { getPreference } from '../cookies.js';
+import { getUrls } from '../influxdb-url.js';
 
 function getUserPreferredUrl() {
-  const urlName = window.getPreference && window.getPreference('influxdb_url');
-  return getUrls()[urlName] || (window.placeholderUrls && window.placeholderUrls['oss']);
+  const urlName = getPreference('influxdb_url');
+  return getUrls()[urlName];
 }
-
-export function apiDocComponent() {
-  window.addEventListener('DOMContentLoaded', (event) => {
-    const rapidocEl = document.getElementById('api-doc');
-    if(rapidocEl === null) return;
-    const apiServer = getUserPreferredUrl();
-    rapidocEl.addEventListener('spec-loaded', (e) => {
-      rapidocEl.setApiServer(apiServer);
-    });
-    const spec = JSON.parse(rapidocEl.dataset.openapiSpec);
-    rapidocEl.loadSpec(spec);
-  });
+
+export function setServerUrl(el) {
+  const baseUrl = getUserPreferredUrl();
+  el.setAttribute('server-url', baseUrl);
+  el.setApiServer(baseUrl);
 }
 
-apiDocComponent();
+const darkThemeAttributes = {
+  'theme': 'dark',
+};
+
+const lightThemeAttributes = {
+  'theme': 'light',
+};
+
+export function setStyles(el) {
+  let theme = getPreference('theme') || 'light';
+  theme = theme.replace(/-theme/, '');
+  let themeAttributes =  {
+    'nav-accent-color': "",
+    'nav-bg-color': "",
+    'nav-hover-bg-color': "",
+    'nav-hover-text-color': "",
+    'nav-text-color': "",
+    'primary-color': "#F63C41",
+    'render-style': 'view',
+    'show-header': 'false',
+    'show-info': 'false',
+    'style': 'height:100vh; width:100%',
+  }
+  switch (theme) {
+    case 'light':
+      themeAttributes = { ...themeAttributes, ...lightThemeAttributes };
+      break;
+    case 'dark':
+      themeAttributes = { ...themeAttributes, ...darkThemeAttributes };
+      break;
+  }
+
+  for (const [key, value] of Object.entries(themeAttributes)) {
+    el.setAttribute(key, value);
+  }
+}
+
+export function onPreferenceChanged(e) {
+  const rapidocEl = document.getElementById('api-doc');
+  if(rapidocEl === null) return;
+  setStyles(rapidocEl);
+  setServerUrl(rapidocEl);
+}

assets/js/api-libs.js

@@ -1,6 +1,8 @@
 ////////////////////////////////////////////////////////////////////////////////
 ///////////////// Preferred Client Library programming language  ///////////////
 ////////////////////////////////////////////////////////////////////////////////
+import { setPreference, getPreference } from './cookies.js';
+import { activateTabs, updateBtnURLs } from './tabbed-content.js';
 
 function getVisitedApiLib () {
   const path = window.location.pathname.match(
@@ -35,3 +37,10 @@ var tab = getApiLibPreference();
   selector => activateTabs(selector, tab),
   updateBtnURLs(tab)
 );
+
+export {
+  getApiLibPreference,
+  setApiLibPreference,
+  getVisitedApiLib,
+  isApiLib,
+};

assets/js/code-controls.js

@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 var codeBlockSelector = ".article--content pre";
 var codeBlocks = $(codeBlockSelector);
 

assets/js/code-placeholders.js

@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 const placeholderWrapper = '.code-placeholder-wrapper';
 const placeholderElement = 'var.code-placeholder';
 const codePlaceholders = $(placeholderElement);

assets/js/content-interactions.js

@@ -1,4 +1,28 @@
 ///////////////////////////// Make headers linkable /////////////////////////////
+import $ from 'jquery';
+import { scrollToAnchor } from './scroll.js';
+
+// Expand accordions on load based on URL anchor
+function openAccordionByHash() {
+  var anchor = window.location.hash;
+
+  function expandElement() {
+    if ($(anchor).parents('.expand').length > 0) {
+      return $(anchor).closest('.expand').children('.expand-label');
+    } else if ($(anchor).hasClass('expand')){
+      return $(anchor).children('.expand-label');
+    }
+  };
+
+  if (expandElement() != null) {
+    if (expandElement().children('.expand-toggle').hasClass('open')) {}
+    else {
+      expandElement().children('.expand-toggle').trigger('click');
+    };
+  };
+};
+
+function contentInteractions () {
 
 var headingWhiteList = $("\
   .article--content h2, \
@@ -12,7 +36,7 @@ var headingBlackList = ("\
   .influxdbu-banner h4 \
 ");
 
-headingElements = headingWhiteList.not(headingBlackList);
+const headingElements = headingWhiteList.not(headingBlackList);
 
 headingElements.each(function() {
     function getLink(element) {
@@ -33,26 +57,6 @@ var elementWhiteList = [
   "a.fullscreen-close"
 ]
 
-function scrollToAnchor(target) {
-  var $target = $(target);
-  if($target && $target.length > 0) {
-    $('html, body').stop().animate({
-      'scrollTop': ($target.offset().top)
-    }, 400, 'swing', function () {
-      window.location.hash = target;
-    });
-
-    // Unique accordion functionality
-    // If the target is an accordion element, open the accordion after scrolling
-    if ($target.hasClass('expand')) {
-      if ($(target + ' .expand-label .expand-toggle').hasClass('open')) {}
-      else {
-        $(target + '> .expand-label').trigger('click');
-      };
-    };
-  }
-}
-
 $('.article a[href^="#"]:not(' + elementWhiteList + ')').click(function (e) {
   e.preventDefault();
   scrollToAnchor(this.hash);
@@ -98,25 +102,7 @@ $('.expand-label').click(function() {
   $(this).next('.expand-content').slideToggle(200)
 })
 
-// Expand accordions on load based on URL anchor
-function openAccordionByHash() {
-  var anchor = window.location.hash;
 
-  function expandElement() {
-    if ($(anchor).parents('.expand').length > 0) {
-      return $(anchor).closest('.expand').children('.expand-label');
-    } else if ($(anchor).hasClass('expand')){
-      return $(anchor).children('.expand-label');
-    }
-  };
-
-  if (expandElement() != null) {
-    if (expandElement().children('.expand-toggle').hasClass('open')) {}
-    else {
-      expandElement().children('.expand-toggle').trigger('click');
-    };
-  };
-};
 
 // Open accordions by hash on page load.
 openAccordionByHash()
@@ -152,3 +138,9 @@ $('.article--content a').each(function() {
     $(this).attr('target', '_blank');
   };
 })
+
+}
+
+export default function ContentInteractions() {
+  contentInteractions();
+}