From 947554dba9a4b3e7d3cc32335e5f96edb92519d8 Mon Sep 17 00:00:00 2001 From: Jason Stirnaman Date: Mon, 12 May 2025 17:05:36 -0500 Subject: [PATCH] WIP: removed remaining scripts from footer/javascript.html. Migrated to components and utilities. Conditionally imports Mermaid if page has a diagram. --- assets/js/components/diagram.js | 17 ++++ assets/js/datetime.js | 57 +++++++---- assets/js/flux-group-keys.js | 30 +++--- assets/js/main.js | 8 ++ assets/js/release-toc.js | 105 ++++++++++---------- layouts/partials/footer/javascript.html | 39 -------- layouts/shortcodes/diagram.html | 2 +- layouts/shortcodes/flux/group-key-demo.html | 2 +- layouts/shortcodes/release-toc.html | 2 +- 9 files changed, 134 insertions(+), 128 deletions(-) create mode 100644 assets/js/components/diagram.js diff --git a/assets/js/components/diagram.js b/assets/js/components/diagram.js new file mode 100644 index 000000000..9348b94e1 --- /dev/null +++ b/assets/js/components/diagram.js @@ -0,0 +1,17 @@ +export default function Diagram({ component }) { + // Only load mermaid when diagrams are present + const hasDiagrams = document.querySelectorAll('.mermaid').length > 0; + + if (hasDiagrams) { + import("mermaid").then(({ mermaid }) => { + mermaid.initialize({ + startOnLoad: true, + themeVariables: { + fontFamily: "Proxima Nova", + fontSize: '18px', + } + }); + mermaid.run(); + }); + } +} diff --git a/assets/js/datetime.js b/assets/js/datetime.js index ec0f8ee2b..f2c07185c 100644 --- a/assets/js/datetime.js +++ b/assets/js/datetime.js @@ -1,30 +1,47 @@ -const monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; -var date = new Date() -var currentTimestamp = date.toISOString().replace(/^(.*)(\.\d+)(Z)/, '$1$3') // 2023-01-01T12:34:56Z -var currentTime = date.toISOString().replace(/(^.*T)(.*)(Z)/, '$2') + '084216' // 12:34:56.000084216 +var date = new Date(); +var currentTimestamp = date.toISOString().replace(/^(.*)(\.\d+)(Z)/, '$1$3'); // 2023-01-01T12:34:56Z +var currentTime = date.toISOString().replace(/(^.*T)(.*)(Z)/, '$2') + '084216'; // 12:34:56.000084216 -function currentDate(offset=0, trimTime=false) { - outputDate = new Date(date) - outputDate.setDate(outputDate.getDate() + offset) +function currentDate(offset = 0, trimTime = false) { + outputDate = new Date(date); + outputDate.setDate(outputDate.getDate() + offset); if (trimTime) { - return outputDate.toISOString().replace(/T.*$/, '') // 2023-01-01 + return outputDate.toISOString().replace(/T.*$/, ''); // 2023-01-01 } else { - return outputDate.toISOString().replace(/T.*$/, 'T00:00:00Z') // 2023-01-01T00:00:00Z + return outputDate.toISOString().replace(/T.*$/, 'T00:00:00Z'); // 2023-01-01T00:00:00Z } } function enterpriseEOLDate() { - var inTwoYears = date.setFullYear(date.getFullYear() + 2) - earliestEOL = new Date(inTwoYears) - return `${monthNames[earliestEOL.getMonth()]} ${earliestEOL.getDate()}, ${earliestEOL.getFullYear()}` + const monthNames = [ + 'January', + 'February', + 'March', + 'April', + 'May', + 'June', + 'July', + 'August', + 'September', + 'October', + 'November', + 'December', + ]; + var inTwoYears = date.setFullYear(date.getFullYear() + 2); + earliestEOL = new Date(inTwoYears); + return `${monthNames[earliestEOL.getMonth()]} ${earliestEOL.getDate()}, ${earliestEOL.getFullYear()}`; } -$('span.current-timestamp').text(currentTimestamp) -$('span.current-time').text(currentTime) -$('span.enterprise-eol-date').text(enterpriseEOLDate) -$('span.current-date').each(function() { - var dayOffset = parseInt($(this).attr("offset")) - var trimTime = $(this).attr("trim-time") === "true" - $(this).text(currentDate(dayOffset, trimTime)) -}) +function initialize() { + $('span.current-timestamp').text(currentTimestamp); + $('span.current-time').text(currentTime); + $('span.enterprise-eol-date').text(enterpriseEOLDate); + $('span.current-date').each(function () { + var dayOffset = parseInt($(this).attr('offset')); + var trimTime = $(this).attr('trim-time') === 'true'; + $(this).text(currentDate(dayOffset, trimTime)); + }); +} + +export { initialize }; diff --git a/assets/js/flux-group-keys.js b/assets/js/flux-group-keys.js index 80ab46b70..c8c7f5e1f 100644 --- a/assets/js/flux-group-keys.js +++ b/assets/js/flux-group-keys.js @@ -1,4 +1,4 @@ -var tablesElement = $("#flux-group-keys-demo #grouped-tables") +import $ from 'jquery'; // Sample data let data = [ @@ -27,6 +27,18 @@ let data = [ // Default group key let groupKey = ["_measurement", "loc", "sensorID", "_field"] +export default function FluxGroupKeysDemo({ component }) { + $(".column-list label").click(function () { + toggleCheckbox($(this)) + groupKey = getChecked(); + groupData(); + buildGroupExample(); + }); + + // Group and render tables on load + groupData(); +} + // Build a table group (group key and table) using an array of objects function buildTable(inputData) { @@ -91,6 +103,7 @@ function buildTable(inputData) { // Clear and rebuild all HTML tables function buildTables(data) { + let tablesElement = $("#flux-group-keys-demo #grouped-tables"); existingTables = tablesElement[0] while (existingTables.firstChild) { existingTables.removeChild(existingTables.firstChild); @@ -124,10 +137,9 @@ function groupData() { buildTables(groupedData); } -// Get selected column names -var checkboxes = $("input[type=checkbox]"); - function getChecked() { + // Get selected column names + var checkboxes = $("input[type=checkbox]"); var checked = []; for (var i = 0; i < checkboxes.length; i++) { var checkbox = checkboxes[i]; @@ -145,13 +157,3 @@ function buildGroupExample() { var columnCollection = getChecked().map(i => '"' + i + '"').join(", ") $("pre#group-by-example")[0].innerHTML = "data\n |> group(columns: [" + columnCollection + "])"; } - -$(".column-list label").click(function () { - toggleCheckbox($(this)) - groupKey = getChecked(); - groupData(); - buildGroupExample(); -}); - -// Group and render tables on load -groupData() diff --git a/assets/js/main.js b/assets/js/main.js index 72838978b..3578952dc 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -12,6 +12,7 @@ import $ from 'jquery'; import * as apiLibs from './api-libs.js'; import * as codeControls from './code-controls.js'; import * as contentInteractions from './content-interactions.js'; +import * as datetime from './datetime.js'; import { delay } from './helpers.js'; import { InfluxDBUrl } from './influxdb-url.js'; import * as localStorage from './local-storage.js'; @@ -32,11 +33,14 @@ import * as v3Wayfinding from './v3-wayfinding.js'; import AskAITrigger from './ask-ai-trigger.js'; import CodePlaceholder from './code-placeholders.js'; import { CustomTimeTrigger } from './custom-timestamps.js'; +import Diagram from './components/diagram.js'; import FeatureCallout from './feature-callouts.js'; +import FluxGroupKeysDemo from './flux-group-keys.js'; import FluxInfluxDBVersionsTrigger from './flux-influxdb-versions.js'; import KeyBinding from './keybindings.js'; import ListFilters from './list-filters.js'; import ProductSelector from './version-selector.js'; +import ReleaseToc from './release-toc.js'; import { SearchButton } from './search-button.js'; import SidebarSearch from './components/sidebar-search.js'; import { SidebarToggle } from './sidebar-toggle.js'; @@ -57,11 +61,14 @@ const componentRegistry = { 'ask-ai-trigger': AskAITrigger, 'code-placeholder': CodePlaceholder, 'custom-time-trigger': CustomTimeTrigger, + 'diagram': Diagram, 'feature-callout': FeatureCallout, + 'flux-group-keys-demo': FluxGroupKeysDemo, 'flux-influxdb-versions-trigger': FluxInfluxDBVersionsTrigger, 'keybinding': KeyBinding, 'list-filters': ListFilters, 'product-selector': ProductSelector, + 'release-toc': ReleaseToc, 'search-button': SearchButton, 'sidebar-search': SidebarSearch, 'sidebar-toggle': SidebarToggle, @@ -140,6 +147,7 @@ function initModules() { apiLibs.initialize(); codeControls.initialize(); contentInteractions.initialize(); + datetime.initialize(); InfluxDBUrl(); notifications.initialize(); pageFeedback.initialize(); diff --git a/assets/js/release-toc.js b/assets/js/release-toc.js index 42858fccc..d2155b610 100644 --- a/assets/js/release-toc.js +++ b/assets/js/release-toc.js @@ -1,58 +1,59 @@ /////////////////////////// Table of Contents Script /////////////////////////// /* - * This script is used to generate a table of contents for the - * release notes pages. -*/ - -// Use jQuery filter to get an array of all the *release* h2 elements -const releases = $('h2').filter( - (_i, el) => !el.id.match(/checkpoint-releases/) -); - -// Extract data about each release from the array of releases -releaseData = releases.map((_i, el) => ({ - name: el.textContent, - id: el.id, - class: el.getAttribute('class'), - date: el.getAttribute('date') -})); - -// Use release data to generate a list item for each release -getReleaseItem = (releaseData) => { - var li = document.createElement("li"); - if (releaseData.class !== null) { - li.className = releaseData.class; - } - li.innerHTML = `${releaseData.name}`; - li.setAttribute('date', releaseData.date); - return li; -} - -// Use jQuery each to build the release table of contents -releaseData.each((_i, release) => { - $('#release-toc ul')[0].appendChild(getReleaseItem(release)); -}); - -/* - * This script is used to expand the release notes table of contents by the - * number specified in the `show` attribute of `ul.release-list`. - * Once all the release items are visible, the "Show More" button is hidden. -*/ -$('#release-toc .show-more').click(function () { - const itemHeight = 1.885; // Item height in rem - const releaseNum = releaseData.length; - const maxHeight = releaseNum * itemHeight; - const releaseIncrement = Number($('#release-list')[0].getAttribute('show')); - const currentHeight = Number( - $('#release-list')[0].style.height.match(/\d+\.?\d+/)[0] + * This script is used to generate a table of contents for the + * release notes pages. + */ +export default function ReleaseToc({ component }) { + // Use jQuery filter to get an array of all the *release* h2 elements + const releases = $('h2').filter( + (_i, el) => !el.id.match(/checkpoint-releases/) ); - const potentialHeight = currentHeight + releaseIncrement * itemHeight; - const newHeight = potentialHeight > maxHeight ? maxHeight : potentialHeight; - $('#release-list')[0].style.height = `${newHeight}rem`; + // Extract data about each release from the array of releases + const releaseData = releases.map((_i, el) => ({ + name: el.textContent, + id: el.id, + class: el.getAttribute('class'), + date: el.getAttribute('date'), + })); - if (newHeight >= maxHeight) { - $('#release-toc .show-more').fadeOut(100); - } -}); + // Use release data to generate a list item for each release + getReleaseItem = (releaseData) => { + var li = document.createElement('li'); + if (releaseData.class !== null) { + li.className = releaseData.class; + } + li.innerHTML = `${releaseData.name}`; + li.setAttribute('date', releaseData.date); + return li; + }; + + // Use jQuery each to build the release table of contents + releaseData.each((_i, release) => { + $('#release-toc ul')[0].appendChild(getReleaseItem(release)); + }); + + /* + * This script is used to expand the release notes table of contents by the + * number specified in the `show` attribute of `ul.release-list`. + * Once all the release items are visible, the "Show More" button is hidden. + */ + $('#release-toc .show-more').click(function () { + const itemHeight = 1.885; // Item height in rem + const releaseNum = releaseData.length; + const maxHeight = releaseNum * itemHeight; + const releaseIncrement = Number($('#release-list')[0].getAttribute('show')); + const currentHeight = Number( + $('#release-list')[0].style.height.match(/\d+\.?\d+/)[0] + ); + const potentialHeight = currentHeight + releaseIncrement * itemHeight; + const newHeight = potentialHeight > maxHeight ? maxHeight : potentialHeight; + + $('#release-list')[0].style.height = `${newHeight}rem`; + + if (newHeight >= maxHeight) { + $('#release-toc .show-more').fadeOut(100); + } + }); +} diff --git a/layouts/partials/footer/javascript.html b/layouts/partials/footer/javascript.html index f82d3caaa..f6ebf780f 100644 --- a/layouts/partials/footer/javascript.html +++ b/layouts/partials/footer/javascript.html @@ -1,10 +1,3 @@ -{{ $fluxGroupKeys := resources.Get "js/flux-group-keys.js" }} -{{ $dateTime := resources.Get "js/datetime.js" }} -{{ $releaseTOC := resources.Get "/js/release-toc.js" }} -{{ $fluxGroupKeyjs := $fluxGroupKeys | resources.Fingerprint }} -{{ $dateTimejs := $dateTime | resources.Fingerprint }} -{{ $releaseTOCjs := $releaseTOC | resources.Fingerprint }} - - - -{{ if .Page.HasShortcode "diagram" }} - - - -{{ end }} - - -{{ if .Page.HasShortcode "flux/group-key-demo" }} - -{{ end }} - - -{{ if or (.Page.HasShortcode "datetime/current-time") (.Page.HasShortcode "datetime/current-timestamp") -(.Page.HasShortcode "datetime/current-date") (.Page.HasShortcode "datetime/enterprise-eol-date") }} - -{{ end }} - - -{{ if .Page.HasShortcode "release-toc" }} - -{{ end }} diff --git a/layouts/shortcodes/diagram.html b/layouts/shortcodes/diagram.html index 9aafee8a6..d5926620b 100644 --- a/layouts/shortcodes/diagram.html +++ b/layouts/shortcodes/diagram.html @@ -1,3 +1,3 @@ -
+
{{.Inner}}
\ No newline at end of file diff --git a/layouts/shortcodes/flux/group-key-demo.html b/layouts/shortcodes/flux/group-key-demo.html index 25c8ffc04..09f9bb714 100644 --- a/layouts/shortcodes/flux/group-key-demo.html +++ b/layouts/shortcodes/flux/group-key-demo.html @@ -1,4 +1,4 @@ -
+
  • diff --git a/layouts/shortcodes/release-toc.html b/layouts/shortcodes/release-toc.html index ac2f249e1..8769548a1 100644 --- a/layouts/shortcodes/release-toc.html +++ b/layouts/shortcodes/release-toc.html @@ -2,7 +2,7 @@ {{- $currentVersion := index $productPathData 1 -}} {{- $show := .Get "show" | default 12 -}} -
    +