|
| 1 | +import $ from 'jquery'; |
| 2 | +import { toggleModal } from './modals.js'; |
| 3 | + |
1 | 4 | /* |
2 | 5 | Interactions related to the Flux/InfluxDB version modal |
3 | 6 | */ |
4 | 7 |
|
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'; |
7 | 9 |
|
8 | 10 | // Check for deprecated or pending versions |
9 | 11 | function keysPresent() { |
10 | | - var list = $(fluxInfluxDBModal + ' .version-list') |
| 12 | + var list = $(fluxInfluxDBModal + ' .version-list'); |
11 | 13 |
|
12 | 14 | return { |
13 | 15 | pending: list.find('.pending').length !== 0, |
14 | 16 | deprecated: list.find('.deprecated').length !== 0, |
15 | 17 | supported: list.find('.supported').length !== 0, |
16 | | - } |
| 18 | + }; |
17 | 19 | } |
18 | 20 |
|
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 | +} |
22 | 31 |
|
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); |
27 | 34 |
|
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'; |
34 | 38 |
|
| 39 | + // Only execute if the Flux/InfluxDB modal is present in the DOM |
| 40 | + if ($(fluxInfluxDBModal).length > 0) { |
| 41 | + var presentKeys = keysPresent(); |
35 | 42 |
|
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 | + } |
38 | 53 |
|
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 | + } |
41 | 64 |
|
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 | +} |
0 commit comments