|
| 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