{# This file is partially duplicated in src/Symfony/Component/ErrorHandler/Resources/assets/js/exception.js. If you make any change in this file, verify the same change is needed in the other file. #} {# CAUTION: the contents of this file are processed by Twig before loading them as JavaScript source code. Always use '/*' comments instead of '//' comments to avoid impossible-to-debug side-effects #} window.addEventListener('DOMContentLoaded', () => { new SymfonyProfiler(); }); class SymfonyProfiler { constructor() { this.#createTabs(); this.#createTableSearchFields(); this.#createToggles(); this.#createCopyToClipboard(); this.#convertDateTimesToUserTimezone(); } #createTabs() { /* the accessibility options of this component have been defined according to: */ /* www.w3.org/WAI/ARIA/apg/example-index/tabs/tabs-manual.html */ const tabGroups = document.querySelectorAll('.sf-tabs:not([data-processed=true])'); /* create the tab navigation for each group of tabs */ tabGroups.forEach((tabGroup, i) => { const tabs = tabGroup.querySelectorAll(':scope > .tab'); const tabNavigation = document.createElement('div'); tabNavigation.classList.add('tab-navigation'); tabNavigation.setAttribute('role', 'tablist'); let selectedTabId = `tab-${i}-0`; /* select the first tab by default */ tabs.forEach((tab, j) => { const tabId = `tab-${i}-${j}`; const tabTitle = tab.querySelector('.tab-title').innerHTML; const tabNavigationItem = document.createElement('button'); tabNavigationItem.classList.add('tab-control'); tabNavigationItem.setAttribute('data-tab-id', tabId); tabNavigationItem.setAttribute('role', 'tab'); tabNavigationItem.setAttribute('aria-controls', tabId); if (tab.classList.contains('active')) { selectedTabId = tabId; } if (tab.classList.contains('disabled')) { tabNavigationItem.classList.add('disabled'); } tabNavigationItem.innerHTML = tabTitle; tabNavigation.appendChild(tabNavigationItem); const tabContent = tab.querySelector('.tab-content'); tabContent.parentElement.setAttribute('id', tabId); }); tabGroup.insertBefore(tabNavigation, tabGroup.firstChild); document.querySelector('[data-tab-id="' + selectedTabId + '"]').classList.add('active'); }); /* display the active tab and add the 'click' event listeners */ tabGroups.forEach((tabGroup) => { const tabs = tabGroup.querySelectorAll(':scope > .tab-navigation .tab-control'); tabs.forEach((tab) => { const tabId = tab.getAttribute('data-tab-id'); const tabPanel = document.getElementById(tabId); tabPanel.setAttribute('role', 'tabpanel'); tabPanel.setAttribute('aria-labelledby', tabId); tabPanel.querySelector('.tab-title').className = 'hidden'; if (tab.classList.contains('active')) { tabPanel.className = 'block'; tab.setAttribute('aria-selected', 'true'); tab.removeAttribute('tabindex'); } else { tabPanel.className = 'hidden'; tab.removeAttribute('aria-selected'); tab.setAttribute('tabindex', '-1'); } tab.addEventListener('click', function(e) { let activeTab = e.target || e.srcElement; /* needed because when the tab contains HTML contents, user can click */ /* on any of those elements instead of their parent '' element */ while ('button' !== activeTab.tagName.toLowerCase()) { activeTab = activeTab.parentNode; } /* get the full list of tabs through the parent of the active tab element */ const tabs = Array.from(activeTab.parentNode.children); tabs.forEach((tab) => { const tabId = tab.getAttribute('data-tab-id'); document.getElementById(tabId).className = 'hidden'; tab.classList.remove('active'); tab.removeAttribute('aria-selected'); tab.setAttribute('tabindex', '-1'); }); activeTab.classList.add('active'); activeTab.setAttribute('aria-selected', 'true'); activeTab.removeAttribute('tabindex'); const activeTabId = activeTab.getAttribute('data-tab-id'); document.getElementById(activeTabId).className = 'block'; }); }); tabGroup.setAttribute('data-processed', 'true'); }); } #createTableSearchFields() { document.querySelectorAll('div.table-with-search-field').forEach((tableWrapper, i) => { const searchField = document.createElement('input'); searchField.type = 'search'; searchField.placeholder = 'search...'; searchField.id = `table-search-field-${i}`; searchField.classList.add(`table-search-field-input`); searchField.autocapitalize = 'off'; searchField.autocomplete = 'off'; searchField.autocorrect = 'off'; tableWrapper.insertBefore(searchField, tableWrapper.firstChild); const labelField = document.createElement('label'); labelField.htmlFor = `table-search-field-${i}`; labelField.classList.add(`table-search-field-label`); labelField.textContent = 'Search inside the contents of the table'; tableWrapper.insertBefore(labelField, tableWrapper.firstChild); searchField.addEventListener('input', () => { const query = searchField.value.toLowerCase(); let allRowsAreHidden = true; tableWrapper.querySelectorAll('tbody tr').forEach((row) => { const rowMatchesQuery = row.textContent.toLowerCase().includes(query); row.style.display = rowMatchesQuery ? '' : 'none'; if (rowMatchesQuery) { allRowsAreHidden = false; } }); /* if there are no results and all rows are hidden, show a message to avoid confusion */ const noResultsElement = tableWrapper.querySelector('.no-results-message'); if (allRowsAreHidden) { if (null === noResultsElement) { const noResultsElement = document.createElement('p'); noResultsElement.textContent = 'No results found.'; noResultsElement.classList.add('no-results-message'); tableWrapper.appendChild(noResultsElement); } else { noResultsElement.style.display = ''; } } else { if (null !== noResultsElement) { noResultsElement.style.display = 'none'; } } }); }); } #createToggles() { const toggles = document.querySelectorAll('.sf-toggle:not([data-processed=true])'); toggles.forEach((toggle) => { const elementSelector = toggle.getAttribute('data-toggle-selector'); const element = document.querySelector(elementSelector); element.classList.add('sf-toggle-content'); if (toggle.hasAttribute('data-toggle-initial') && 'display' === toggle.getAttribute('data-toggle-initial')) { toggle.classList.add('sf-toggle-on'); element.classList.add('sf-toggle-visible'); } else { toggle.classList.add('sf-toggle-off'); element.classList.add('sf-toggle-hidden'); } toggle.addEventListener('click', (e) => { e.preventDefault(); if ('' !== window.getSelection().toString()) { /* Don't do anything on text selection */ return; } /* needed because when the toggle contains HTML contents, user can click */ /* on any of those elements instead of their parent '.sf-toggle' element */ const toggle = e.target.closest('.sf-toggle'); const element = document.querySelector(toggle.getAttribute('data-toggle-selector')); toggle.classList.toggle('sf-toggle-on'); toggle.classList.toggle('sf-toggle-off'); element.classList.toggle('sf-toggle-hidden'); element.classList.toggle('sf-toggle-visible'); /* the toggle doesn't change its contents when clicking on it */ if (!toggle.hasAttribute('data-toggle-alt-content')) { return; } if (!toggle.hasAttribute('data-toggle-original-content')) { toggle.setAttribute('data-toggle-original-content', toggle.innerHTML); } const currentContent = toggle.innerHTML; const originalContent = toggle.getAttribute('data-toggle-original-content'); const altContent = toggle.getAttribute('data-toggle-alt-content'); toggle.innerHTML = currentContent !== altContent ? altContent : originalContent; }); /* Prevents from disallowing clicks on links inside toggles */ const toggleLinks = toggle.querySelectorAll('a'); toggleLinks.forEach((toggleLink) => { toggleLink.addEventListener('click', (e) => { e.stopPropagation(); }); }); toggle.setAttribute('data-processed', 'true'); }); } #createCopyToClipboard() { if (!navigator.clipboard) { return; } const copyToClipboardElements = document.querySelectorAll('[data-clipboard-text]'); copyToClipboardElements.forEach((copyToClipboardElement) => { copyToClipboardElement.classList.remove('hidden'); copyToClipboardElement.addEventListener('click', (e) => { /* Prevents from disallowing clicks on "copy to clipboard" elements inside toggles */ e.stopPropagation(); navigator.clipboard.writeText(copyToClipboardElement.getAttribute('data-clipboard-text')); let oldContent = copyToClipboardElement.textContent; copyToClipboardElement.textContent = `✅ Copied!`; copyToClipboardElement.disabled = true; setTimeout(() => { copyToClipboardElement.textContent = oldContent; copyToClipboardElement.disabled = false; }, 7000); }); }); } #convertDateTimesToUserTimezone() { const userTimezoneName = Intl.DateTimeFormat().resolvedOptions().timeZone; document.querySelectorAll('time[data-convert-to-user-timezone]').forEach((timeElement) => { const iso8601Datetime = timeElement.getAttribute('datetime'); const dateInUserTimezone = new Date(iso8601Datetime); let options = {}; if (timeElement.hasAttribute('data-render-as-datetime')) { options = { year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric' }; } else if (timeElement.hasAttribute('data-render-as-date')) { options = { year: 'numeric', month: 'long', day: 'numeric' }; } else if (timeElement.hasAttribute('data-render-as-time')) { options = { hour: 'numeric', minute: 'numeric', second: 'numeric' }; } if (timeElement.hasAttribute('data-render-with-millisecond-precision')) { options.fractionalSecondDigits = 3; } /* dates/times are always rendered in English to match the rest of the Profiler interface */ timeElement.textContent = dateInUserTimezone.toLocaleString('en', options); if (undefined !== userTimezoneName) { const existingTitle = timeElement.getAttribute('title'); const newTitle = null === existingTitle ? `Date/times shown in your timezone: ${userTimezoneName}` : existingTitle + ` (date/times shown in your timezone: ${userTimezoneName})`; timeElement.setAttribute('title', newTitle); } }); } }