From ae054efed71b3be6c15e4f6503b357e58a7458c8 Mon Sep 17 00:00:00 2001 From: Jason Stirnaman Date: Wed, 23 Apr 2025 10:21:02 -0500 Subject: [PATCH] Revert "chore(code-placeholders): Support path-like patterns:" --- assets/js/code-placeholders.js | 64 ++++++++++--------------- assets/js/main.js | 5 -- layouts/partials/footer/javascript.html | 7 +++ 3 files changed, 31 insertions(+), 45 deletions(-) diff --git a/assets/js/code-placeholders.js b/assets/js/code-placeholders.js index 596364819..3912df97d 100644 --- a/assets/js/code-placeholders.js +++ b/assets/js/code-placeholders.js @@ -1,52 +1,30 @@ -import $ from 'jquery'; - +const placeholderWrapper = '.code-placeholder-wrapper'; const placeholderElement = 'var.code-placeholder'; const editIcon = ""; // When clicking a placeholder, append the edit input -function handleClick($element) { - const $placeholder = $($element).find(placeholderElement); - $placeholder.on('click', function() { +function handleClick(element) { + $(element).on('click', function() { var placeholderData = $(this)[0].dataset; - var placeholderID = placeholderData.codeVarEscaped; + var placeholderID = placeholderData.codeVar; var placeholderValue = placeholderData.codeVarValue; + var placeholderInputWrapper = $('
'); + var placeholderInput = ``; - 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); + $(this).before(placeholderInputWrapper) + $(this).siblings('.code-input-wrapper').append(placeholderInput); + $(`input#${placeholderID}`).width(`${placeholderValue.length}ch`); + $(`input#${placeholderID}`).focus().select(); + $(this).css('opacity', 0); }); } function submitPlaceholder(placeholderInput) { - var placeholderID = placeholderInput.attr('data-code-var-escaped'); + var placeholderID = placeholderInput.attr('id'); var placeholderValue = placeholderInput[0].value; - placeholderInput = $(`input.placeholder-edit[data-id="${placeholderID}"]`); + var placeholderInput = $(`input.placeholder-edit#${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); @@ -66,7 +44,13 @@ function closeOnEnter(input, event) { } } -export default function CodePlaceholder({ component }) { - const $component = $(component); - handleClick($component); -} \ No newline at end of file +function CodePlaceholder({element}) { + handleClick(element); +} + +$(function() { + const codePlaceholders = $(placeholderElement); + codePlaceholders.each(function() { + CodePlaceholder({element: this}); + }); +}); \ No newline at end of file diff --git a/assets/js/main.js b/assets/js/main.js index 57b92a837..c1b95d1bc 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -39,7 +39,6 @@ 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'; @@ -98,10 +97,6 @@ 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 eb64ae5ad..52ab25e10 100644 --- a/layouts/partials/footer/javascript.html +++ b/layouts/partials/footer/javascript.html @@ -7,10 +7,12 @@ {{ $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 }} @@ -48,6 +50,11 @@ {{ end }} + +{{ if .Page.HasShortcode "code-placeholders" }} + +{{ end }} + {{ if .Page.HasShortcode "release-toc" }}