Skip to content

Commit a5e6380

Browse files
jstirnamanjstirnaman
committed
WIP(api): JavaScript module refactor, API stylesheets and theme switching
- 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
1 parent 5ad7bc4 commit a5e6380

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

53 files changed

+1257
-1045
lines changed

‎assets/js/FluxGroupKeys.js

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

‎assets/js/Sidebar.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { setSidebarState } from './sidebar-toggle.js';
2+
3+
export default function Sidebar() {
4+
setSidebarState();
5+
}

‎assets/js/ThemeStyle.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { setStyleFromCookie } from './docs-themes.js';
2+
3+
export default function ThemeStyle() {
4+
setStyleFromCookie();
5+
}

‎assets/js/api-doc/ApiReferencePage.js

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { setStyles, setServerUrl, onPreferenceChanged } from './index.js';
2+
3+
export default function ApiReferencePage() {
4+
const rapidocEl = document.getElementById('api-doc');
5+
if(rapidocEl === null) return;
6+
setStyles(rapidocEl);
7+
setServerUrl(rapidocEl);
8+
rapidocEl.loadSpec(JSON.parse(rapidocEl.dataset.openapiSpec));
9+
rapidocEl.addEventListener('spec-loaded', (e) => {});
10+
cookieStore.addEventListener('change', (e) => {
11+
if(e.changed) {
12+
onPreferenceChanged(e, rapidocEl);
13+
}
14+
});
15+
}

‎assets/js/api-doc/index.js

+52-15
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,58 @@
11
import 'rapidoc';
2+
import { getPreference } from '../cookies.js';
3+
import { getUrls } from '../influxdb-url.js';
24

35
function getUserPreferredUrl() {
4-
const urlName = window.getPreference && window.getPreference('influxdb_url');
5-
return getUrls()[urlName] || (window.placeholderUrls && window.placeholderUrls['oss']);
6+
const urlName = getPreference('influxdb_url');
7+
return getUrls()[urlName];
68
}
7-
8-
export function apiDocComponent() {
9-
window.addEventListener('DOMContentLoaded', (event) => {
10-
const rapidocEl = document.getElementById('api-doc');
11-
if(rapidocEl === null) return;
12-
const apiServer = getUserPreferredUrl();
13-
rapidocEl.addEventListener('spec-loaded', (e) => {
14-
rapidocEl.setApiServer(apiServer);
15-
});
16-
const spec = JSON.parse(rapidocEl.dataset.openapiSpec);
17-
rapidocEl.loadSpec(spec);
18-
});
9+
10+
export function setServerUrl(el) {
11+
const baseUrl = getUserPreferredUrl();
12+
el.setAttribute('server-url', baseUrl);
13+
el.setApiServer(baseUrl);
1914
}
2015

21-
apiDocComponent();
16+
const darkThemeAttributes = {
17+
'theme': 'dark',
18+
};
19+
20+
const lightThemeAttributes = {
21+
'theme': 'light',
22+
};
23+
24+
export function setStyles(el) {
25+
let theme = getPreference('theme') || 'light';
26+
theme = theme.replace(/-theme/, '');
27+
let themeAttributes = {
28+
'nav-accent-color': "",
29+
'nav-bg-color': "",
30+
'nav-hover-bg-color': "",
31+
'nav-hover-text-color': "",
32+
'nav-text-color': "",
33+
'primary-color': "#F63C41",
34+
'render-style': 'view',
35+
'show-header': 'false',
36+
'show-info': 'false',
37+
'style': 'height:100vh; width:100%',
38+
}
39+
switch (theme) {
40+
case 'light':
41+
themeAttributes = { ...themeAttributes, ...lightThemeAttributes };
42+
break;
43+
case 'dark':
44+
themeAttributes = { ...themeAttributes, ...darkThemeAttributes };
45+
break;
46+
}
47+
48+
for (const [key, value] of Object.entries(themeAttributes)) {
49+
el.setAttribute(key, value);
50+
}
51+
}
52+
53+
export function onPreferenceChanged(e) {
54+
const rapidocEl = document.getElementById('api-doc');
55+
if(rapidocEl === null) return;
56+
setStyles(rapidocEl);
57+
setServerUrl(rapidocEl);
58+
}

‎assets/js/api-libs.js

+9
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
////////////////////////////////////////////////////////////////////////////////
22
///////////////// Preferred Client Library programming language ///////////////
33
////////////////////////////////////////////////////////////////////////////////
4+
import { setPreference, getPreference } from './cookies.js';
5+
import { activateTabs, updateBtnURLs } from './tabbed-content.js';
46

57
function getVisitedApiLib () {
68
const path = window.location.pathname.match(
@@ -35,3 +37,10 @@ var tab = getApiLibPreference();
3537
selector => activateTabs(selector, tab),
3638
updateBtnURLs(tab)
3739
);
40+
41+
export {
42+
getApiLibPreference,
43+
setApiLibPreference,
44+
getVisitedApiLib,
45+
isApiLib,
46+
};

‎assets/js/code-controls.js

+2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import $ from 'jquery';
2+
13
var codeBlockSelector = ".article--content pre";
24
var codeBlocks = $(codeBlockSelector);
35

‎assets/js/code-placeholders.js

+2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import $ from 'jquery';
2+
13
const placeholderWrapper = '.code-placeholder-wrapper';
24
const placeholderElement = 'var.code-placeholder';
35
const codePlaceholders = $(placeholderElement);

‎assets/js/content-interactions.js

+31-39
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,28 @@
11
///////////////////////////// Make headers linkable /////////////////////////////
2+
import $ from 'jquery';
3+
import { scrollToAnchor } from './scroll.js';
4+
5+
// Expand accordions on load based on URL anchor
6+
function openAccordionByHash() {
7+
var anchor = window.location.hash;
8+
9+
function expandElement() {
10+
if ($(anchor).parents('.expand').length > 0) {
11+
return $(anchor).closest('.expand').children('.expand-label');
12+
} else if ($(anchor).hasClass('expand')){
13+
return $(anchor).children('.expand-label');
14+
}
15+
};
16+
17+
if (expandElement() != null) {
18+
if (expandElement().children('.expand-toggle').hasClass('open')) {}
19+
else {
20+
expandElement().children('.expand-toggle').trigger('click');
21+
};
22+
};
23+
};
24+
25+
function contentInteractions () {
226

327
var headingWhiteList = $("\
428
.article--content h2, \
@@ -12,7 +36,7 @@ var headingBlackList = ("\
1236
.influxdbu-banner h4 \
1337
");
1438

15-
headingElements = headingWhiteList.not(headingBlackList);
39+
const headingElements = headingWhiteList.not(headingBlackList);
1640

1741
headingElements.each(function() {
1842
function getLink(element) {
@@ -33,26 +57,6 @@ var elementWhiteList = [
3357
"a.fullscreen-close"
3458
]
3559

36-
function scrollToAnchor(target) {
37-
var $target = $(target);
38-
if($target && $target.length > 0) {
39-
$('html, body').stop().animate({
40-
'scrollTop': ($target.offset().top)
41-
}, 400, 'swing', function () {
42-
window.location.hash = target;
43-
});
44-
45-
// Unique accordion functionality
46-
// If the target is an accordion element, open the accordion after scrolling
47-
if ($target.hasClass('expand')) {
48-
if ($(target + ' .expand-label .expand-toggle').hasClass('open')) {}
49-
else {
50-
$(target + '> .expand-label').trigger('click');
51-
};
52-
};
53-
}
54-
}
55-
5660
$('.article a[href^="#"]:not(' + elementWhiteList + ')').click(function (e) {
5761
e.preventDefault();
5862
scrollToAnchor(this.hash);
@@ -98,25 +102,7 @@ $('.expand-label').click(function() {
98102
$(this).next('.expand-content').slideToggle(200)
99103
})
100104

101-
// Expand accordions on load based on URL anchor
102-
function openAccordionByHash() {
103-
var anchor = window.location.hash;
104105

105-
function expandElement() {
106-
if ($(anchor).parents('.expand').length > 0) {
107-
return $(anchor).closest('.expand').children('.expand-label');
108-
} else if ($(anchor).hasClass('expand')){
109-
return $(anchor).children('.expand-label');
110-
}
111-
};
112-
113-
if (expandElement() != null) {
114-
if (expandElement().children('.expand-toggle').hasClass('open')) {}
115-
else {
116-
expandElement().children('.expand-toggle').trigger('click');
117-
};
118-
};
119-
};
120106

121107
// Open accordions by hash on page load.
122108
openAccordionByHash()
@@ -152,3 +138,9 @@ $('.article--content a').each(function() {
152138
$(this).attr('target', '_blank');
153139
};
154140
})
141+
142+
}
143+
144+
export default function ContentInteractions() {
145+
contentInteractions();
146+
}

0 commit comments

Comments
 (0)