Merge pull request #5936 from influxdata/jstirnaman/issue5935
fix(flux-influxdb-versions): Fixes modal trigger for flux-influxdb-ve…pull/5938/head
Jason Stirnaman
GitHub
commit
4a74f03973
|
|
@ -1,50 +1,77 @@
|
|||
import $ from 'jquery';
|
||||
import { toggleModal } from './modals.js';
|
||||
|
||||
/*
|
||||
Interactions related to the Flux/InfluxDB version modal
|
||||
*/
|
||||
|
||||
const fluxInfluxDBModal = '.modal-content#flux-influxdb-versions'
|
||||
const pageType = ($(document).attr('title')).includes("package") ? "package" : "function";
|
||||
const fluxInfluxDBModal = '.modal-content#flux-influxdb-versions';
|
||||
|
||||
// Check for deprecated or pending versions
|
||||
function keysPresent() {
|
||||
var list = $(fluxInfluxDBModal + ' .version-list')
|
||||
var list = $(fluxInfluxDBModal + ' .version-list');
|
||||
|
||||
return {
|
||||
pending: list.find('.pending').length !== 0,
|
||||
deprecated: list.find('.deprecated').length !== 0,
|
||||
supported: list.find('.supported').length !== 0,
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// Only execute if the Flux/InfluxDB modal is present in the DOM
|
||||
if ($(fluxInfluxDBModal).length > 0) {
|
||||
var presentKeys = keysPresent()
|
||||
|
||||
// Remove color key list items if the colors/states are present in the version list
|
||||
if (presentKeys.pending === false) { $(fluxInfluxDBModal + ' .color-key #pending-key' ).remove() }
|
||||
if (presentKeys.deprecated === false) { $(fluxInfluxDBModal + ' .color-key #deprecated-key' ).remove() }
|
||||
if (presentKeys.pending === false && presentKeys.deprecated === false) { $(fluxInfluxDBModal + ' .color-key' ).remove() }
|
||||
|
||||
// If no versions are supported, remove and replace InfluxDB version tables
|
||||
if (Object.values(presentKeys).every(value => !value)) {
|
||||
$(fluxInfluxDBModal + ' .influxdb-versions > :not(".more-info")').remove();
|
||||
$(fluxInfluxDBModal + ' .influxdb-versions').prepend(`<p class="no-support">No versions of InfluxDB currently support this ${pageType}.</p>`)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Open version modal and add query param
|
||||
const queryParams = new URLSearchParams(window.location.search);
|
||||
|
||||
function openFluxVersionModal() {
|
||||
function openFluxVersionModal(queryParams) {
|
||||
const anchor = window.location.hash;
|
||||
|
||||
toggleModal('#flux-influxdb-versions');
|
||||
queryParams.set('view', 'influxdb-support');
|
||||
window.history.replaceState({}, '', `${location.pathname}?${queryParams}${anchor}`);
|
||||
};
|
||||
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();
|
||||
};
|
||||
export default function FluxInfluxDBVersionsTrigger({ component }) {
|
||||
const $component = $(component);
|
||||
|
||||
const pageType = $(document).attr('title').includes('package')
|
||||
? 'package'
|
||||
: 'function';
|
||||
|
||||
// Only execute if the Flux/InfluxDB modal is present in the DOM
|
||||
if ($(fluxInfluxDBModal).length > 0) {
|
||||
var presentKeys = keysPresent();
|
||||
|
||||
// Remove color key list items if the colors/states are present in the version list
|
||||
if (presentKeys.pending === false) {
|
||||
$(fluxInfluxDBModal + ' .color-key #pending-key').remove();
|
||||
}
|
||||
if (presentKeys.deprecated === false) {
|
||||
$(fluxInfluxDBModal + ' .color-key #deprecated-key').remove();
|
||||
}
|
||||
if (presentKeys.pending === false && presentKeys.deprecated === false) {
|
||||
$(fluxInfluxDBModal + ' .color-key').remove();
|
||||
}
|
||||
|
||||
// If no versions are supported, remove and replace InfluxDB version tables
|
||||
if (Object.values(presentKeys).every((value) => !value)) {
|
||||
$(
|
||||
fluxInfluxDBModal + ' .influxdb-versions > :not(".more-info")'
|
||||
).remove();
|
||||
$(fluxInfluxDBModal + ' .influxdb-versions').prepend(
|
||||
`<p class="no-support">No versions of InfluxDB currently support this ${pageType}.</p>`
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Open version modal and add query param
|
||||
const queryParams = new URLSearchParams(window.location.search);
|
||||
|
||||
// // Check for the modal query param and open the modal if it exists
|
||||
if (queryParams.get('view') !== null) {
|
||||
openFluxVersionModal(queryParams);
|
||||
}
|
||||
|
||||
// Open modal window on click
|
||||
$component
|
||||
.find('a[data-action="open"]:first')
|
||||
.on('click', () => openFluxVersionModal(queryParams));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@ import ThemeSwitch from './theme-switch.js';
|
|||
// import CustomTimestamps from './custom-timestamps.js';
|
||||
// import Diagram from './Diagram.js';
|
||||
// import FluxGroupKeysExample from './FluxGroupKeysExample.js';
|
||||
// import FluxInfluxDBVersionsModal from './flux-influxdb-versions.js';
|
||||
import FluxInfluxDBVersionsTrigger from './flux-influxdb-versions.js';
|
||||
// import PageFeedback from './page-feedback.js';
|
||||
// import SearchInput from './SearchInput.js';
|
||||
// import Sidebar from './Sidebar.js';
|
||||
|
|
@ -101,6 +101,10 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||
CustomTimeTrigger({ component });
|
||||
window.influxdatadocs[componentName] = CustomTimeTrigger;
|
||||
break;
|
||||
case 'flux-influxdb-versions-trigger':
|
||||
FluxInfluxDBVersionsTrigger({ component });
|
||||
window.influxdatadocs[componentName] = FluxInfluxDBVersionsTrigger;
|
||||
break;
|
||||
case 'search-button':
|
||||
SearchButton({ component });
|
||||
window.influxdatadocs[componentName] = SearchButton;
|
||||
|
|
|
|||
|
|
@ -10,7 +10,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="openFluxVersionModal()">View InfluxDB support</a></li>
|
||||
<li class="flux-influxdb" data-component="flux-influxdb-versions-trigger"><a data-action="open">View InfluxDB support</a></li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
{{ end }}
|
||||
|
|
@ -7,10 +7,9 @@
|
|||
{{ $fluxGroupKeys := resources.Get "js/flux-group-keys.js" }}
|
||||
{{ $dateTime := resources.Get "js/datetime.js" }}
|
||||
{{ $homepageInteractions := resources.Get "js/home-interactions.js" }}
|
||||
{{ $fluxInfluxDBVersions := resources.Get "/js/flux-influxdb-versions.js" }}
|
||||
{{ $codePlaceholders := resources.Get "/js/code-placeholders.js" }}
|
||||
{{ $releaseTOC := resources.Get "/js/release-toc.js" }}
|
||||
{{ $footerjs := slice $versionSelector $searchInteractions $listFilters $featureCallouts $keybindings $homepageInteractions $fluxInfluxDBVersions | resources.Concat "js/footer.bundle.js" | resources.Fingerprint }}
|
||||
{{ $footerjs := slice $versionSelector $searchInteractions $listFilters $featureCallouts $keybindings $homepageInteractions | resources.Concat "js/footer.bundle.js" | resources.Fingerprint }}
|
||||
{{ $fluxGroupKeyjs := $fluxGroupKeys | resources.Fingerprint }}
|
||||
{{ $dateTimejs := $dateTime | resources.Fingerprint }}
|
||||
{{ $codePlaceholdersjs := $codePlaceholders | resources.Fingerprint }}
|
||||
|
|
|
|||
Loading…
Reference in New Issue