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