From 6287e0aa761e28f8e88a3e44a91ade456d29e133 Mon Sep 17 00:00:00 2001 From: Jason Stirnaman Date: Wed, 23 Apr 2025 10:12:02 -0500 Subject: [PATCH] chore(code-placeholders): Support path-like patterns: - Assigns the match expression to a data attribute (data-id) to use in eleement selection. Previously, it assigned the regex expression to input.id and used the ID to select the element when updating the placeholder value. A regex that starts with a slash causes an error; input#/path/to/match isn't a valid id. - Supports placeholders like '\/path\/to\/file.parquet' - Refactors code-placeholders to the component pattern. --- assets/js/code-placeholders.js | 64 +++++++++++++++---------- assets/js/main.js | 5 ++ layouts/partials/footer/javascript.html | 7 --- 3 files changed, 45 insertions(+), 31 deletions(-) diff --git a/assets/js/code-placeholders.js b/assets/js/code-placeholders.js index 3912df97d..596364819 100644 --- a/assets/js/code-placeholders.js +++ b/assets/js/code-placeholders.js @@ -1,30 +1,52 @@ -const placeholderWrapper = '.code-placeholder-wrapper'; +import $ from 'jquery'; + const placeholderElement = 'var.code-placeholder'; const editIcon = ""; // When clicking a placeholder, append the edit input -function handleClick(element) { - $(element).on('click', function() { +function handleClick($element) { + const $placeholder = $($element).find(placeholderElement); + $placeholder.on('click', function() { var placeholderData = $(this)[0].dataset; - var placeholderID = placeholderData.codeVar; + var placeholderID = placeholderData.codeVarEscaped; var placeholderValue = placeholderData.codeVarValue; - var placeholderInputWrapper = $('
'); - var placeholderInput = ``; - $(this).before(placeholderInputWrapper) - $(this).siblings('.code-input-wrapper').append(placeholderInput); - $(`input#${placeholderID}`).width(`${placeholderValue.length}ch`); - $(`input#${placeholderID}`).focus().select(); - $(this).css('opacity', 0); + const placeholderInput = document.createElement('input'); + placeholderInput.setAttribute('class', 'placeholder-edit'); + placeholderInput.setAttribute('data-id', placeholderID); + placeholderInput.setAttribute('data-code-var-escaped', placeholderID); + placeholderInput.setAttribute('value', placeholderValue); + placeholderInput.setAttribute('spellcheck', 'false'); + + placeholderInput.addEventListener('blur', function() { + submitPlaceholder($(this)); + } + ); + placeholderInput.addEventListener('input', function() { + updateInputWidth($(this)); + } + ); + placeholderInput.addEventListener('keydown', function(event) { + closeOnEnter($(this)[0], event); + } + ); + + const placeholderInputWrapper = $('
'); + $placeholder.before(placeholderInputWrapper) + $placeholder.siblings('.code-input-wrapper').append(placeholderInput); + $(`input[data-code-var-escaped="${placeholderID}"]`).width(`${placeholderValue.length}ch`); + document.querySelector(`input[data-code-var-escaped="${placeholderID}"]`).focus(); + document.querySelector(`input[data-code-var-escaped="${placeholderID}"]`).select(); + $placeholder.css('opacity', 0); }); } function submitPlaceholder(placeholderInput) { - var placeholderID = placeholderInput.attr('id'); + var placeholderID = placeholderInput.attr('data-code-var-escaped'); var placeholderValue = placeholderInput[0].value; - var placeholderInput = $(`input.placeholder-edit#${placeholderID}`); + placeholderInput = $(`input.placeholder-edit[data-id="${placeholderID}"]`); - $(`*[data-code-var='${placeholderID}']`).each(function() { + $(`*[data-code-var="${placeholderID}"]`).each(function() { $(this).attr('data-code-var-value', placeholderValue); $(this).html(placeholderValue + editIcon); $(this).css('opacity', 1); @@ -44,13 +66,7 @@ function closeOnEnter(input, event) { } } -function CodePlaceholder({element}) { - handleClick(element); -} - -$(function() { - const codePlaceholders = $(placeholderElement); - codePlaceholders.each(function() { - CodePlaceholder({element: this}); - }); -}); \ No newline at end of file +export default function CodePlaceholder({ component }) { + const $component = $(component); + handleClick($component); +} \ No newline at end of file diff --git a/assets/js/main.js b/assets/js/main.js index c1b95d1bc..57b92a837 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -39,6 +39,7 @@ import * as v3Wayfinding from './v3-wayfinding.js'; * The JavaScript is ideally a single-purpose module that exports a single default function to initialize the component and handle any component interactions. */ import AskAITrigger from './ask-ai-trigger.js'; +import CodePlaceholder from './code-placeholders.js'; import { CustomTimeTrigger } from './custom-timestamps.js'; import { SearchButton } from './search-button.js'; import { SidebarToggle } from './sidebar-toggle.js'; @@ -97,6 +98,10 @@ document.addEventListener('DOMContentLoaded', function () { AskAITrigger({ component }); window.influxdatadocs[componentName] = AskAITrigger; break; + case 'code-placeholder': + CodePlaceholder({ component }); + window.influxdatadocs[componentName] = CodePlaceholder; + break; case 'custom-time-trigger': CustomTimeTrigger({ component }); window.influxdatadocs[componentName] = CustomTimeTrigger; diff --git a/layouts/partials/footer/javascript.html b/layouts/partials/footer/javascript.html index 52ab25e10..eb64ae5ad 100644 --- a/layouts/partials/footer/javascript.html +++ b/layouts/partials/footer/javascript.html @@ -7,12 +7,10 @@ {{ $fluxGroupKeys := resources.Get "js/flux-group-keys.js" }} {{ $dateTime := resources.Get "js/datetime.js" }} {{ $homepageInteractions := resources.Get "js/home-interactions.js" }} -{{ $codePlaceholders := resources.Get "/js/code-placeholders.js" }} {{ $releaseTOC := resources.Get "/js/release-toc.js" }} {{ $footerjs := slice $versionSelector $searchInteractions $listFilters $featureCallouts $keybindings $homepageInteractions | resources.Concat "js/footer.bundle.js" | resources.Fingerprint }} {{ $fluxGroupKeyjs := $fluxGroupKeys | resources.Fingerprint }} {{ $dateTimejs := $dateTime | resources.Fingerprint }} -{{ $codePlaceholdersjs := $codePlaceholders | resources.Fingerprint }} {{ $releaseTOCjs := $releaseTOC | resources.Fingerprint }} @@ -50,11 +48,6 @@ {{ end }} - -{{ if .Page.HasShortcode "code-placeholders" }} - -{{ end }} - {{ if .Page.HasShortcode "release-toc" }}