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.pull/6013/head
Jason Stirnaman
parent
38a19403ca
commit
6287e0aa76
|
|
@ -1,30 +1,52 @@
|
|||
const placeholderWrapper = '.code-placeholder-wrapper';
|
||||
import $ from 'jquery';
|
||||
|
||||
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) {
|
||||
$(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 = $('<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>`;
|
||||
|
||||
$(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 = $('<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);
|
||||
});
|
||||
}
|
||||
|
||||
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);
|
||||
export default function CodePlaceholder({ component }) {
|
||||
const $component = $(component);
|
||||
handleClick($component);
|
||||
}
|
||||
|
||||
$(function() {
|
||||
const codePlaceholders = $(placeholderElement);
|
||||
codePlaceholders.each(function() {
|
||||
CodePlaceholder({element: this});
|
||||
});
|
||||
});
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 }}
|
||||
|
||||
<!-- Load cloudUrls array -->
|
||||
|
|
@ -50,11 +48,6 @@
|
|||
<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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue