WIP: removed remaining scripts from footer/javascript.html. Migrated to components and utilities. Conditionally imports Mermaid if page has a diagram.
Jason Stirnaman
parent
ccf74df759
commit
f7a5c53ecf
|
|
@ -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();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -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 };
|
||||
|
|
|
|||
|
|
@ -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 => '<span class=\"s2\">"' + i + '"</span>').join(", ")
|
||||
$("pre#group-by-example")[0].innerHTML = "data\n <span class='nx'>|></span> group(columns<span class='nx'>:</span> [" + columnCollection + "])";
|
||||
}
|
||||
|
||||
$(".column-list label").click(function () {
|
||||
toggleCheckbox($(this))
|
||||
groupKey = getChecked();
|
||||
groupData();
|
||||
buildGroupExample();
|
||||
});
|
||||
|
||||
// Group and render tables on load
|
||||
groupData()
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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 = `<a href="#${releaseData.id}">${releaseData.name}</a>`;
|
||||
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 = `<a href="#${releaseData.id}">${releaseData.name}</a>`;
|
||||
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);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 }}
|
||||
|
||||
<!-- Load cloudUrls array -->
|
||||
<script type="text/javascript">
|
||||
cloudUrls = [
|
||||
|
|
@ -13,35 +6,3 @@
|
|||
{{ end -}}
|
||||
]
|
||||
</script>
|
||||
|
||||
|
||||
{{ if .Page.HasShortcode "diagram" }}
|
||||
<!-- Load mermaid.js for diagrams -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
|
||||
<script>
|
||||
mermaid.initialize({
|
||||
startOnLoad: true,
|
||||
|
||||
themeVariables: {
|
||||
fontFamily: "Proxima Nova",
|
||||
fontSize: '18px',
|
||||
}
|
||||
})
|
||||
</script>
|
||||
{{ end }}
|
||||
|
||||
<!-- Load group key demo JS if when the group key demo shortcode is present -->
|
||||
{{ if .Page.HasShortcode "flux/group-key-demo" }}
|
||||
<script type="text/javascript" src="{{ $fluxGroupKeyjs.RelPermalink }}"></script>
|
||||
{{ end }}
|
||||
|
||||
<!-- Load datetime js if when datetime shortcodes are present -->
|
||||
{{ if or (.Page.HasShortcode "datetime/current-time") (.Page.HasShortcode "datetime/current-timestamp")
|
||||
(.Page.HasShortcode "datetime/current-date") (.Page.HasShortcode "datetime/enterprise-eol-date") }}
|
||||
<script type="text/javascript" src="{{ $dateTimejs.RelPermalink }}"></script>
|
||||
{{ end }}
|
||||
|
||||
<!-- Load code release-toc js when release-toc shortcode is present -->
|
||||
{{ if .Page.HasShortcode "release-toc" }}
|
||||
<script type="text/javascript" src="{{ $releaseTOCjs.RelPermalink }}"></script>
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
<div class="mermaid">
|
||||
<div class="mermaid" data-component="diagram">
|
||||
{{.Inner}}
|
||||
</div>
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
<div id="flux-group-keys-demo">
|
||||
<div id="flux-group-keys-demo" data-component="flux-group-keys-demo">
|
||||
<div id="group-by-columns">
|
||||
<ul class="column-list">
|
||||
<li>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
{{- $currentVersion := index $productPathData 1 -}}
|
||||
{{- $show := .Get "show" | default 12 -}}
|
||||
|
||||
<div id="release-toc" class="{{ $currentVersion }}">
|
||||
<div id="release-toc" class="{{ $currentVersion }}" data-component="release-toc">
|
||||
<ul id="release-list" style="height: calc({{ $show }} * 1.885rem);" show="{{ $show }}">
|
||||
<!-- PLACEHOLDER FOR JS-GENERATED LIST ITEMS -->
|
||||
</ul>
|
||||
|
|
|
|||
Loading…
Reference in New Issue