Skip to content

Commit 4a74f03

Browse files
jstirnamanjstirnaman
authored
Merge pull request #5936 from influxdata/jstirnaman/issue5935
fix(flux-influxdb-versions): Fixes modal trigger for flux-influxdb-ve…
2 parents 0085838 + 5a85719 commit 4a74f03

File tree

4 files changed

+64
-34
lines changed

4 files changed

+64
-34
lines changed

‎assets/js/flux-influxdb-versions.js

Lines changed: 57 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,77 @@
1+
import $ from 'jquery';
2+
import { toggleModal } from './modals.js';
3+
14
/*
25
Interactions related to the Flux/InfluxDB version modal
36
*/
47

5-
const fluxInfluxDBModal = '.modal-content#flux-influxdb-versions'
6-
const pageType = ($(document).attr('title')).includes("package") ? "package" : "function";
8+
const fluxInfluxDBModal = '.modal-content#flux-influxdb-versions';
79

810
// Check for deprecated or pending versions
911
function keysPresent() {
10-
var list = $(fluxInfluxDBModal + ' .version-list')
12+
var list = $(fluxInfluxDBModal + ' .version-list');
1113

1214
return {
1315
pending: list.find('.pending').length !== 0,
1416
deprecated: list.find('.deprecated').length !== 0,
1517
supported: list.find('.supported').length !== 0,
16-
}
18+
};
1719
}
1820

19-
// Only execute if the Flux/InfluxDB modal is present in the DOM
20-
if ($(fluxInfluxDBModal).length > 0) {
21-
var presentKeys = keysPresent()
21+
function openFluxVersionModal(queryParams) {
22+
const anchor = window.location.hash;
23+
toggleModal('#flux-influxdb-versions');
24+
queryParams?.set('view', 'influxdb-support');
25+
window.history.replaceState(
26+
{},
27+
'',
28+
`${location.pathname}?${queryParams}${anchor}`
29+
);
30+
}
2231

23-
// Remove color key list items if the colors/states are present in the version list
24-
if (presentKeys.pending === false) { $(fluxInfluxDBModal + ' .color-key #pending-key' ).remove() }
25-
if (presentKeys.deprecated === false) { $(fluxInfluxDBModal + ' .color-key #deprecated-key' ).remove() }
26-
if (presentKeys.pending === false && presentKeys.deprecated === false) { $(fluxInfluxDBModal + ' .color-key' ).remove() }
32+
export default function FluxInfluxDBVersionsTrigger({ component }) {
33+
const $component = $(component);
2734

28-
// If no versions are supported, remove and replace InfluxDB version tables
29-
if (Object.values(presentKeys).every(value => !value)) {
30-
$(fluxInfluxDBModal + ' .influxdb-versions > :not(".more-info")').remove();
31-
$(fluxInfluxDBModal + ' .influxdb-versions').prepend(`<p class="no-support">No versions of InfluxDB currently support this ${pageType}.</p>`)
32-
}
33-
}
35+
const pageType = $(document).attr('title').includes('package')
36+
? 'package'
37+
: 'function';
3438

39+
// Only execute if the Flux/InfluxDB modal is present in the DOM
40+
if ($(fluxInfluxDBModal).length > 0) {
41+
var presentKeys = keysPresent();
3542

36-
// Open version modal and add query param
37-
const queryParams = new URLSearchParams(window.location.search);
43+
// Remove color key list items if the colors/states are present in the version list
44+
if (presentKeys.pending === false) {
45+
$(fluxInfluxDBModal + ' .color-key #pending-key').remove();
46+
}
47+
if (presentKeys.deprecated === false) {
48+
$(fluxInfluxDBModal + ' .color-key #deprecated-key').remove();
49+
}
50+
if (presentKeys.pending === false && presentKeys.deprecated === false) {
51+
$(fluxInfluxDBModal + ' .color-key').remove();
52+
}
3853

39-
function openFluxVersionModal() {
40-
const anchor = window.location.hash;
54+
// If no versions are supported, remove and replace InfluxDB version tables
55+
if (Object.values(presentKeys).every((value) => !value)) {
56+
$(
57+
fluxInfluxDBModal + ' .influxdb-versions > :not(".more-info")'
58+
).remove();
59+
$(fluxInfluxDBModal + ' .influxdb-versions').prepend(
60+
`<p class="no-support">No versions of InfluxDB currently support this ${pageType}.</p>`
61+
);
62+
}
63+
}
4164

42-
toggleModal('#flux-influxdb-versions');
43-
queryParams.set('view', 'influxdb-support');
44-
window.history.replaceState({}, '', `${location.pathname}?${queryParams}${anchor}`);
45-
};
46-
47-
// Check for the modal query param and open the modal if it exists
48-
if (queryParams.get('view') !== null) {
49-
openFluxVersionModal();
50-
};
65+
// Open version modal and add query param
66+
const queryParams = new URLSearchParams(window.location.search);
67+
68+
// // Check for the modal query param and open the modal if it exists
69+
if (queryParams.get('view') !== null) {
70+
openFluxVersionModal(queryParams);
71+
}
72+
73+
// Open modal window on click
74+
$component
75+
.find('a[data-action="open"]:first')
76+
.on('click', () => openFluxVersionModal(queryParams));
77+
}

‎assets/js/main.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ import ThemeSwitch from './theme-switch.js';
4949
// import CustomTimestamps from './custom-timestamps.js';
5050
// import Diagram from './Diagram.js';
5151
// import FluxGroupKeysExample from './FluxGroupKeysExample.js';
52-
// import FluxInfluxDBVersionsModal from './flux-influxdb-versions.js';
52+
import FluxInfluxDBVersionsTrigger from './flux-influxdb-versions.js';
5353
// import PageFeedback from './page-feedback.js';
5454
// import SearchInput from './SearchInput.js';
5555
// import Sidebar from './Sidebar.js';
@@ -101,6 +101,10 @@ document.addEventListener('DOMContentLoaded', function () {
101101
CustomTimeTrigger({ component });
102102
window.influxdatadocs[componentName] = CustomTimeTrigger;
103103
break;
104+
case 'flux-influxdb-versions-trigger':
105+
FluxInfluxDBVersionsTrigger({ component });
106+
window.influxdatadocs[componentName] = FluxInfluxDBVersionsTrigger;
107+
break;
104108
case 'search-button':
105109
SearchButton({ component });
106110
window.influxdatadocs[componentName] = SearchButton;

‎layouts/partials/article/supported-versions.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
{{ $productName }} {{ .Page.Params.introduced }}{{ if .Page.Params.deprecated }}{{ print " – " .Page.Params.deprecated }}{{ else if .Page.Params.removed }}{{ print " – " .Page.Params.removed }}{{ else }}+{{ end }}
1111
</li>
1212
{{ if $inStdlib }}
13-
<li class="flux-influxdb"><a onclick="openFluxVersionModal()">View InfluxDB support</a></li>
13+
<li class="flux-influxdb" data-component="flux-influxdb-versions-trigger"><a data-action="open">View InfluxDB support</a></li>
1414
{{ end }}
1515
</ul>
1616
{{ end }}

‎layouts/partials/footer/javascript.html

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,9 @@
77
{{ $fluxGroupKeys := resources.Get "js/flux-group-keys.js" }}
88
{{ $dateTime := resources.Get "js/datetime.js" }}
99
{{ $homepageInteractions := resources.Get "js/home-interactions.js" }}
10-
{{ $fluxInfluxDBVersions := resources.Get "/js/flux-influxdb-versions.js" }}
1110
{{ $codePlaceholders := resources.Get "/js/code-placeholders.js" }}
1211
{{ $releaseTOC := resources.Get "/js/release-toc.js" }}
13-
{{ $footerjs := slice $versionSelector $searchInteractions $listFilters $featureCallouts $keybindings $homepageInteractions $fluxInfluxDBVersions | resources.Concat "js/footer.bundle.js" | resources.Fingerprint }}
12+
{{ $footerjs := slice $versionSelector $searchInteractions $listFilters $featureCallouts $keybindings $homepageInteractions | resources.Concat "js/footer.bundle.js" | resources.Fingerprint }}
1413
{{ $fluxGroupKeyjs := $fluxGroupKeys | resources.Fingerprint }}
1514
{{ $dateTimejs := $dateTime | resources.Fingerprint }}
1615
{{ $codePlaceholdersjs := $codePlaceholders | resources.Fingerprint }}

0 commit comments

Comments
 (0)