Influxdata
/
docs-v2
mirror of https://github.com/influxdata/docs-v2.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request #6014 from influxdata/revert-6013-path-like-code-placeholders 

Revert "chore(code-placeholders): Support path-like patterns:"
pull/6015/head
Jason Stirnaman 2025-04-23 10:21:14 -05:00 committed by GitHub
parent 151671f0eb ae054efed7
commit 48cf246b86
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 31 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
assets/js/code-placeholders.js
View File

@ -1,52 +1,30 @@
import $ from 'jquery';
const placeholderWrapper = '.code-placeholder-wrapper';
const placeholderElement = 'var.code-placeholder';
const editIcon = "<span class='code-placeholder-edit-icon cf-icon Pencil'></span>";
// 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 = $('<div class="code-input-wrapper"></div>');
var placeholderInput = `<input class="placeholder-edit" id="${placeholderID}" value="${placeholderValue}" spellcheck=false onblur="submitPlaceholder($(this))" oninput="updateInputWidth($(this))" onkeydown="closeOnEnter($(this)[0], event)"></input>`;
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 = $('<div class="code-input-wrapper"></div>');
$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);
}
function CodePlaceholder({element}) {
handleClick(element);
}
$(function() {
const codePlaceholders = $(placeholderElement);
codePlaceholders.each(function() {
CodePlaceholder({element: this});
});
});

5
assets/js/main.js
View File

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

7
layouts/partials/footer/javascript.html
View File

@ -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 }}
<!-- Load cloudUrls array -->
@ -48,6 +50,11 @@
<script type="text/javascript" src="{{ $dateTimejs.RelPermalink }}"></script>
{{ end }}
<!-- Load code placeholders js when code-placeholders shortcode is present -->
{{ if .Page.HasShortcode "code-placeholders" }}
<script type="text/javascript" src="{{ $codePlaceholdersjs.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>