Skip to content

Commit fdbb7e1

Browse files
DavidWeidDavidWeid
authored
Remove jQuery from Documentation Site - Round 1 (#20825)
* Remove jQuery from "table-of-contents.js" * reorg table-of-contents functions create helpers * Remove jQ from datadog-docs onload function * Remove jQ from datadog-docs.js + format file * replace "js-expand-all" with JS test on api retention filters page * Update api.js * remove jQuery from api.js * Update navbar.js * remove jQuery from navbar.js and helpers.js * start removal of jQ from global-modals.js
1 parent 42f4ba3 commit fdbb7e1

File tree

9 files changed

+536
-628
lines changed

9 files changed

+536
-628
lines changed

‎.eslintrc‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,6 @@
118118
"env": {
119119
"browser": true,
120120
"es6": true,
121-
"jquery": true,
122121
"node": true,
123122
"jest": true
124123
},

‎assets/scripts/components/api.js‎

Lines changed: 128 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,14 @@
11
import Tab from 'bootstrap/js/dist/tab';
2+
import { bodyClassContains } from '../helpers/helpers';
3+
import { setSidenavMaxHeight } from '../datadog-docs';
24

35
const versionSelect = document.querySelector('.js-api-version-select');
4-
5-
if (versionSelect) {
6-
versionSelect.addEventListener('change', versionSelectHandler);
7-
}
6+
const expandAllToggles = document.querySelectorAll('.js-expand-all');
7+
const modelToggles = document.querySelectorAll('.js-model-link');
8+
const exampleToggles = document.querySelectorAll('.js-example-link');
9+
const childCollapseToggles = document.querySelectorAll('.hasChildData .js-collapse-trigger');
10+
const versionTabToggles = document.querySelectorAll('.toggle-version-tab');
11+
const dataVersionToggles = document.querySelectorAll('a[data-version^="v"]');
812

913
function versionSelectHandler(event) {
1014
let previewPath = '';
@@ -15,33 +19,23 @@ function versionSelectHandler(event) {
1519

1620
if (event.target.value === 'v2') {
1721
// check if on main /api page
18-
if (
19-
window.location.href ===
20-
`${window.location.origin + previewPath}/api/`
21-
) {
22+
if (window.location.href === `${window.location.origin + previewPath}/api/`) {
2223
window.location = `${window.location.origin + previewPath}/api/v2`;
2324
} else {
2425
// check if page exists on v2
2526
fetch(`${window.location.href.replace('api/v1', 'api/v2')}`)
2627
.then((response) => {
2728
// redirect to v2 page
2829
if (response.status === 404) {
29-
window.location = `${
30-
window.location.origin + previewPath
31-
}/api/v2`;
30+
window.location = `${window.location.origin + previewPath}/api/v2`;
3231
} else {
33-
window.location = `${window.location.href.replace(
34-
'api/v1',
35-
'api/v2'
36-
)}`;
32+
window.location = `${window.location.href.replace('api/v1', 'api/v2')}`;
3733
}
3834
})
3935
.catch((err) => {
4036
console.log(err); // eslint-disable-line
4137
// redirect to main v2 overview page
42-
window.location = `${
43-
window.location.origin + previewPath
44-
}/api/v2`;
38+
window.location = `${window.location.origin + previewPath}/api/v2`;
4539
});
4640
}
4741
} else if (event.target.value === 'v1') {
@@ -51,104 +45,140 @@ function versionSelectHandler(event) {
5145
.then((response) => {
5246
// redirect to v2 page
5347
if (response.status === 404) {
54-
window.location = `${
55-
window.location.origin + previewPath
56-
}/api/v1`;
48+
window.location = `${window.location.origin + previewPath}/api/v1`;
5749
} else {
58-
window.location = `${window.location.href.replace(
59-
'api/v2',
60-
'api/v1'
61-
)}`;
50+
window.location = `${window.location.href.replace('api/v2', 'api/v1')}`;
6251
}
6352
})
6453
.catch((err) => {
6554
// redirect to main v2 overview page
6655
console.log(err); // eslint-disable-line
67-
window.location = `${
68-
window.location.origin + previewPath
69-
}/api/v1`;
56+
window.location = `${window.location.origin + previewPath}/api/v1`;
7057
});
7158
}
7259
}
7360

74-
$('.js-expand-all').click(function () {
75-
$(this).toggleClass('expanded');
76-
const schemaTable = $(this).closest('.schema-table');
77-
78-
if ($(this).hasClass('expanded')) {
79-
$(this).text('Collapse All');
80-
schemaTable.find('.isNested').removeClass('d-none');
81-
schemaTable.find('.toggle-arrow').addClass('expanded');
82-
} else {
83-
$(this).text('Expand All');
84-
schemaTable.find('.isNested').addClass('d-none');
85-
schemaTable.find('.toggle-arrow').removeClass('expanded');
86-
}
87-
});
88-
89-
$('.js-model-link').click(function () {
90-
$(this)
91-
.closest('.tab-content')
92-
.find('.js-example-link')
93-
.removeClass('active');
94-
$(this).closest('.tab-content').find('.js-model-link').addClass('active');
95-
$(this)
96-
.closest('.tab-content')
97-
.find('.js-tab-example')
98-
.removeClass('active');
99-
$(this).closest('.tab-content').find('.js-tab-model').addClass('active');
100-
});
101-
102-
$('.js-example-link').click(function () {
103-
$(this)
104-
.closest('.tab-content')
105-
.find('.js-model-link')
106-
.removeClass('active');
107-
$(this).closest('.tab-content').find('.js-example-link').addClass('active');
108-
$(this).closest('.tab-content').find('.js-tab-model').removeClass('active');
109-
$(this).closest('.tab-content').find('.js-tab-example').addClass('active');
110-
});
111-
112-
$('.hasChildData .js-collapse-trigger').click(function () {
113-
$(this).closest('.row').siblings('.isNested').toggleClass('d-none');
114-
$(this).find('.toggle-arrow').toggleClass('expanded');
115-
});
116-
117-
$('.toggle-version-tab').click(function() {
118-
const url = $(this).attr('href');
119-
const el = $(`a[href="${url}"]`);
120-
if(el) {
121-
const tab = new Tab(el);
122-
tab.show()
123-
}
124-
return false;
125-
});
61+
if (versionSelect) {
62+
versionSelect.addEventListener('change', versionSelectHandler);
63+
}
64+
65+
if (expandAllToggles.length) {
66+
expandAllToggles.forEach((toggle) => {
67+
toggle.addEventListener('click', () => {
68+
toggle.classList.toggle('expanded');
69+
70+
const schemaTable = toggle.closest('.schema-table');
71+
const nestedElements = schemaTable?.querySelectorAll('.isNested');
72+
const toggleElements = schemaTable?.querySelectorAll('.toggle-arrow');
73+
74+
if (schemaTable && toggle.classList.contains('expanded')) {
75+
toggle.textContent = 'Collapse All';
76+
77+
if (nestedElements.length) {
78+
nestedElements.forEach((element) => {
79+
element.classList.remove('d-none');
80+
});
81+
}
82+
83+
if (toggleElements.length) {
84+
toggleElements.forEach((element) => {
85+
element.classList.add('expanded');
86+
});
87+
}
88+
} else if (schemaTable) {
89+
toggle.textContent = 'Expand All';
90+
91+
if (nestedElements.length) {
92+
nestedElements.forEach((element) => {
93+
element.classList.add('d-none');
94+
});
95+
}
96+
97+
if (toggleElements.length) {
98+
toggleElements.forEach((element) => {
99+
element.classList.remove('expanded');
100+
});
101+
}
102+
}
103+
});
104+
});
105+
}
106+
107+
if (modelToggles.length && exampleToggles.length) {
108+
modelToggles.forEach((toggle) => {
109+
toggle.addEventListener('click', () => {
110+
toggle.closest('.tab-content').querySelector('.js-example-link').classList.remove('active');
111+
toggle.closest('.tab-content').querySelector('.js-tab-example').classList.remove('active');
112+
toggle.classList.add('active');
113+
toggle.closest('.tab-content').querySelector('.js-tab-model').classList.add('active');
114+
});
115+
});
116+
117+
exampleToggles.forEach((toggle) => {
118+
toggle.addEventListener('click', () => {
119+
toggle.closest('.tab-content').querySelector('.js-model-link').classList.remove('active');
120+
toggle.closest('.tab-content').querySelector('.js-tab-model').classList.remove('active');
121+
toggle.classList.add('active');
122+
toggle.closest('.tab-content').querySelector('.js-tab-example').classList.add('active');
123+
});
124+
});
125+
}
126+
127+
if (childCollapseToggles.length) {
128+
childCollapseToggles.forEach((toggle) => {
129+
toggle.addEventListener('click', () => {
130+
const row = toggle.closest('.row');
131+
const nestedSiblings = [...row.parentNode.children].filter(
132+
(child) => child !== row && child.classList.contains('isNested')
133+
);
134+
135+
if (nestedSiblings.length) {
136+
nestedSiblings.forEach((element) => {
137+
element.classList.toggle('d-none');
138+
});
139+
}
140+
141+
toggle.querySelector('.toggle-arrow').classList.toggle('expanded');
142+
});
143+
});
144+
}
145+
146+
if (versionTabToggles.length) {
147+
versionTabToggles.forEach((toggle) => {
148+
const url = toggle.getAttribute('href');
149+
const el = document.querySelector(`a[href="${url}"]`);
150+
151+
if (el) {
152+
const tab = new Tab(el);
153+
tab.show();
154+
}
155+
156+
return false;
157+
});
158+
}
126159

127160
// toggle version from nav
128-
$('a[data-version^="v"]').click(function() {
129-
const version = $(this).attr('data-version');
130-
const href = $(this).attr('href');
131-
const url = `${href}-${version}`;
132-
const el = $(`a[href="${url}"]`);
133-
if(el) {
134-
const tab = new Tab(el);
135-
tab.show()
136-
}
137-
});
161+
if (dataVersionToggles.length) {
162+
dataVersionToggles.forEach((toggle) => {
163+
const version = toggle.getAttribute('data-version');
164+
const href = toggle.getAttribute('href');
165+
const url = `${href}-${version}`;
166+
const el = document.querySelector(`a[href="${url}"]`);
167+
if (el) {
168+
const tab = new Tab(el);
169+
tab.show();
170+
}
171+
});
172+
}
138173

139174
// Scroll the active top level nav item into view below Docs search input
140-
if (document.body.classList.contains('api')) {
141-
const headerHeight = $('body .main-nav').height();
142-
const padding = 200;
143-
$('.sidenav-nav').css(
144-
'maxHeight',
145-
document.documentElement.clientHeight - headerHeight - padding
146-
);
175+
if (bodyClassContains('api')) {
176+
setSidenavMaxHeight();
147177

148178
const apiSideNav = document.querySelector('.sidenav-api .sidenav-nav');
149179
const sideNavActiveMenuItem = apiSideNav.querySelector('li.active');
150180
if (sideNavActiveMenuItem) {
151181
const distanceToTop = sideNavActiveMenuItem.offsetTop;
152182
apiSideNav.scrollTop = distanceToTop - 100;
153183
}
154-
}
184+
}

0 commit comments

Comments
 (0)