From cc610b0e078dae449ad9da36ab85c9c5c1be1d96 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Souchet=20C=C3=A9line?= Date: Tue, 19 Sep 2023 15:44:45 +0200 Subject: [PATCH] lint --- dev/ts/component/DropFileUserInterface.ts | 2 +- dev/ts/pages/bpmn-rendering.ts | 2 +- dev/ts/pages/diagram-navigation.ts | 8 +++--- dev/ts/pages/elements-identification.ts | 18 ++++++------- dev/ts/pages/index.ts | 32 +++++++++++------------ dev/ts/pages/overlays.ts | 12 ++++----- dev/ts/shared/controls.ts | 2 +- src/component/helpers/dom-utils.ts | 2 +- 8 files changed, 39 insertions(+), 39 deletions(-) diff --git a/dev/ts/component/DropFileUserInterface.ts b/dev/ts/component/DropFileUserInterface.ts index 3618d9af56..2258342b6d 100644 --- a/dev/ts/component/DropFileUserInterface.ts +++ b/dev/ts/component/DropFileUserInterface.ts @@ -39,7 +39,7 @@ export class DropFileUserInterface { this.addDomElements(this.containerToFade); this.addStyle(); - const dropContainer = document.getElementById(this.outerContainerId); + const dropContainer = document.querySelector(`#${this.outerContainerId}`); // prevent loading file by the browser this.preventDefaultsOnEvents(['dragover', 'drop'], this.window); this.preventDefaultsOnEvents(['dragover', 'dragleave', 'drop'], dropContainer); diff --git a/dev/ts/pages/bpmn-rendering.ts b/dev/ts/pages/bpmn-rendering.ts index fb223f7329..69913d83ca 100644 --- a/dev/ts/pages/bpmn-rendering.ts +++ b/dev/ts/pages/bpmn-rendering.ts @@ -18,7 +18,7 @@ import { documentReady, log, logError, startBpmnVisualization } from '../develop function statusFetchKO(errorMessage: string): void { logError(errorMessage); - const statusElt = document.getElementById('status-zone'); + const statusElt = document.querySelector('#status-zone') as HTMLDivElement; statusElt.innerText = errorMessage; statusElt.className = 'status-ko'; log('Status zone set with error:', errorMessage); diff --git a/dev/ts/pages/diagram-navigation.ts b/dev/ts/pages/diagram-navigation.ts index 5258645bd2..6747c0930f 100644 --- a/dev/ts/pages/diagram-navigation.ts +++ b/dev/ts/pages/diagram-navigation.ts @@ -18,15 +18,15 @@ import { configureControlsPanel, configureMousePointer, documentReady, fit, FitT function configureFitAndZoomButtons(): void { Object.values(FitType).forEach(fitType => { - document.getElementById(fitType).onclick = () => fit({ type: fitType }); + document.querySelector(`#${fitType}`).addEventListener('click', () => fit({ type: fitType })); }); Object.values(ZoomType).forEach(zoomType => { - document.getElementById(`zoom-${zoomType}`).onclick = () => zoom(zoomType); + document.querySelector(`#zoom-${zoomType}`).addEventListener('click', () => zoom(zoomType)); }); } function configureZoomThrottleInput(parameters: URLSearchParams): HTMLInputElement { - const elementZoomThrottle = document.getElementById('zoom-throttle') as HTMLInputElement; + const elementZoomThrottle = document.querySelector('#zoom-throttle') as HTMLInputElement; if (parameters.get('zoomThrottle')) { elementZoomThrottle.value = parameters.get('zoomThrottle'); } @@ -34,7 +34,7 @@ function configureZoomThrottleInput(parameters: URLSearchParams): HTMLInputEleme } function configureZoomDebounceInput(parameters: URLSearchParams): HTMLInputElement { - const elementZoomDebounce = document.getElementById('zoom-debounce') as HTMLInputElement; + const elementZoomDebounce = document.querySelector('#zoom-debounce') as HTMLInputElement; if (parameters.get('zoomDebounce')) { elementZoomDebounce.value = parameters.get('zoomDebounce'); } diff --git a/dev/ts/pages/elements-identification.ts b/dev/ts/pages/elements-identification.ts index 57d75893a3..dcd7ae1bb7 100644 --- a/dev/ts/pages/elements-identification.ts +++ b/dev/ts/pages/elements-identification.ts @@ -183,7 +183,7 @@ function updateSelectedBPMNElements(bpmnKind: ShapeBpmnElementKind): void { } function updateTextArea(elementsByKinds: BpmnSemantic[], bpmnKind: string): void { - const textArea = document.getElementById('elements-result') as HTMLTextAreaElement; + const textArea = document.querySelector('#elements-result') as HTMLTextAreaElement; const textHeader = `Found ${elementsByKinds.length} ${bpmnKind}(s)`; log(textHeader); @@ -194,16 +194,16 @@ function updateTextArea(elementsByKinds: BpmnSemantic[], bpmnKind: string): void } function resetTextArea(): void { - const textArea = document.getElementById('elements-result') as HTMLTextAreaElement; + const textArea = document.querySelector('#elements-result') as HTMLTextAreaElement; textArea.value = ''; } function configureControls(): void { - const selectedKindElt = document.getElementById('bpmn-kinds-select') as HTMLSelectElement; + const selectedKindElt = document.querySelector('#bpmn-kinds-select') as HTMLSelectElement; selectedKindElt.onchange = event => updateSelectedBPMNElements((event.target as HTMLSelectElement).value as ShapeBpmnElementKind); document.addEventListener('diagramLoaded', () => updateSelectedBPMNElements(selectedKindElt.value as ShapeBpmnElementKind), false); - document.getElementById('clear-btn').onclick = function () { + document.querySelector('#clear-btn').addEventListener('click', function () { resetTextArea(); useCSS ? removeCssClasses(lastIdentifiedBpmnIds, cssClassName) : resetStyleByAPI(); @@ -211,10 +211,10 @@ function configureControls(): void { // reset identified elements and values lastIdentifiedBpmnIds = []; - }; + }); // display overlay option - const checkboxDisplayOverlaysElt = document.getElementById('checkbox-display-overlays') as HTMLInputElement; + const checkboxDisplayOverlaysElt = document.querySelector('#checkbox-display-overlays') as HTMLInputElement; checkboxDisplayOverlaysElt.addEventListener('change', function () { isOverlaysDisplayed = this.checked; log('Request overlays display:', isOverlaysDisplayed); @@ -223,7 +223,7 @@ function configureControls(): void { checkboxDisplayOverlaysElt.checked = isOverlaysDisplayed; // use CSS or API to style the BPMN elements - const checkboxUseCSSElt = document.getElementById('checkbox-css-style') as HTMLInputElement; + const checkboxUseCSSElt = document.querySelector('#checkbox-css-style') as HTMLInputElement; checkboxUseCSSElt.addEventListener('change', function () { useCSS = this.checked; log('Request CSS style feature:', useCSS); @@ -285,8 +285,8 @@ function getOverlay(bpmnKind: BpmnElementKind): Overlay { } function configureDownloadButtons(): void { - document.getElementById('btn-dl-svg').addEventListener('click', downloadSvg, false); - document.getElementById('btn-dl-png').addEventListener('click', downloadPng, false); + document.querySelector('#btn-dl-svg').addEventListener('click', downloadSvg, false); + document.querySelector('#btn-dl-png').addEventListener('click', downloadPng, false); } documentReady(() => { diff --git a/dev/ts/pages/index.ts b/dev/ts/pages/index.ts index 61b7095e8e..9f2c4cb04d 100644 --- a/dev/ts/pages/index.ts +++ b/dev/ts/pages/index.ts @@ -36,12 +36,12 @@ let fitOnLoad = true; let fitOptions: FitOptions = {}; function configureFitOnLoadCheckBox(): void { - const fitOnLoadElt = document.getElementById('fitOnLoad') as HTMLInputElement; - fitOnLoadElt.onchange = event => { + const fitOnLoadElt = document.querySelector('#fitOnLoad') as HTMLInputElement; + fitOnLoadElt.addEventListener('change', event => { fitOnLoad = (event.target as HTMLInputElement).checked; log('Fit on load updated!', fitOnLoad); updateLoadOptions(fitOnLoad ? fitOptions : {}); - }; + }); fitOnLoadElt.checked = fitOnLoad; } @@ -60,11 +60,11 @@ function updateFitConfig(config: FitOptions): void { } function configureFitTypeSelect(): void { - const fitTypeSelectedElt = document.getElementById('fitType-selected') as HTMLSelectElement; - fitTypeSelectedElt.onchange = event => { + const fitTypeSelectedElt = document.querySelector('#fitType-selected') as HTMLSelectElement; + fitTypeSelectedElt.addEventListener('change', event => { updateFitConfig({ type: (event.target as HTMLSelectElement).value as FitType }); fit(fitOptions); - }; + }); if (fitOptions.type) { fitTypeSelectedElt.value = fitOptions.type; @@ -74,11 +74,11 @@ function configureFitTypeSelect(): void { } function configureFitMarginInput(): void { - const fitMarginElt = document.getElementById('fit-margin') as HTMLInputElement; - fitMarginElt.onchange = event => { + const fitMarginElt = document.querySelector('#fit-margin') as HTMLInputElement; + fitMarginElt.addEventListener('change', event => { updateFitConfig({ margin: Number((event.target as HTMLInputElement).value) }); fit(fitOptions); - }; + }); if (fitOptions.margin) { fitMarginElt.value = String(fitOptions.margin); @@ -89,16 +89,16 @@ function configureFitMarginInput(): void { function configureZoomButtons(): void { Object.values(ZoomType).forEach(zoomType => { - document.getElementById(`zoom-${zoomType}`).onclick = () => zoom(zoomType); + document.querySelector(`#zoom-${zoomType}`).addEventListener('click', () => zoom(zoomType)); }); - document.getElementById(`zoom-reset`).onclick = () => fit(fitOptions); + document.querySelector(`#zoom-reset`).addEventListener('click', () => fit(fitOptions)); } function configureThemeSelect(): void { - const themeSelectedElt = document.getElementById('theme-selected') as HTMLSelectElement; - themeSelectedElt.onchange = event => { + const themeSelectedElt = document.querySelector('#theme-selected') as HTMLSelectElement; + themeSelectedElt.addEventListener('change', event => { switchTheme((event.target as HTMLSelectElement).value); - }; + }); const currentTheme = getCurrentTheme(); if (currentTheme) { @@ -110,7 +110,7 @@ function configureDisplayedFooterContent(): void { const version = getVersion(); const versionAsString = `bpmn-visualization@${version.lib}`; const dependenciesAsString = [...version.dependencies].map(([name, version]) => `${name}@${version}`).join('/'); - const versionElt = document.getElementById('footer-content'); + const versionElt = document.querySelector('#footer-content') as HTMLDivElement; versionElt.innerText = `${versionAsString} with ${dependenciesAsString}`; } @@ -142,7 +142,7 @@ function startDemo(): void { }); // Configure custom html elements - document.getElementById('bpmn-file').addEventListener('change', handleFileSelect, false); + document.querySelector('#bpmn-file').addEventListener('change', handleFileSelect, false); fitOptions = getCurrentLoadOptions().fit; configureFitTypeSelect(); diff --git a/dev/ts/pages/overlays.ts b/dev/ts/pages/overlays.ts index 6cdc3b6e93..fded720e87 100644 --- a/dev/ts/pages/overlays.ts +++ b/dev/ts/pages/overlays.ts @@ -26,7 +26,7 @@ import { startBpmnVisualization, } from '../development-bundle-index'; -const bpmnIdInputElt = document.getElementById('bpmn-id-input') as HTMLInputElement; +const bpmnIdInputElt = document.querySelector('#bpmn-id-input') as HTMLInputElement; function addOverlay(overlay: Overlay): void { const bpmnId = bpmnIdInputElt.value; @@ -46,23 +46,23 @@ function getPosition(): OverlayPosition { } function configureAddDefaultOverlay(position: OverlayPosition): void { - document.getElementById(position).onclick = () => addOverlay({ position, label: '123' }); + document.querySelector(`#${position}`).addEventListener('click', () => addOverlay({ position, label: '123' })); } function configureAddOverlayWithCustomFont(): void { - document.getElementById('font').onclick = () => addOverlay({ position: getPosition(), label: '7896', style: { font: { color: 'LightSeaGreen', size: 30 } } }); + document.querySelector('#font').addEventListener('click', () => addOverlay({ position: getPosition(), label: '7896', style: { font: { color: 'LightSeaGreen', size: 30 } } })); } function configureAddOverlayWithCustomFill(): void { - document.getElementById('fill').onclick = () => addOverlay({ position: getPosition(), label: '3', style: { fill: { color: 'LightSalmon', opacity: 50 } } }); + document.querySelector('#fill').addEventListener('click', () => addOverlay({ position: getPosition(), label: '3', style: { fill: { color: 'LightSalmon', opacity: 50 } } })); } function configureAddOverlayWithCustomStroke(): void { - document.getElementById('stroke').onclick = () => addOverlay({ position: getPosition(), label: '41', style: { stroke: { color: 'Aquamarine', width: 5 } } }); + document.querySelector('#stroke').addEventListener('click', () => addOverlay({ position: getPosition(), label: '41', style: { stroke: { color: 'Aquamarine', width: 5 } } })); } function configureRemoveAllOverlays(): void { - document.getElementById('clear').onclick = () => removeAllOverlays(bpmnIdInputElt.value); + document.querySelector('#clear').addEventListener('click', () => removeAllOverlays(bpmnIdInputElt.value)); } function start(): void { diff --git a/dev/ts/shared/controls.ts b/dev/ts/shared/controls.ts index 5e0c115856..41d15a88fd 100644 --- a/dev/ts/shared/controls.ts +++ b/dev/ts/shared/controls.ts @@ -97,7 +97,7 @@ export function configureMousePointer(parameters: URLSearchParams): void { } export function configureControlsPanel(parameters: URLSearchParams): void { - const elementControlsPanel = document.getElementById('controls-panel'); + const elementControlsPanel = document.querySelector('#controls-panel'); if (parameters.get('showControlsPanel') === 'true') { elementControlsPanel.classList.remove('hidden'); } diff --git a/src/component/helpers/dom-utils.ts b/src/component/helpers/dom-utils.ts index 17d7516f7a..386929c0e9 100644 --- a/src/component/helpers/dom-utils.ts +++ b/src/component/helpers/dom-utils.ts @@ -21,5 +21,5 @@ export function htmlElement(element: string | HTMLElement): HTMLElement | null { if (element instanceof HTMLElement) { return element; } - return document.getElementById(element); + return document.querySelector(`#${element}`); }