exception.js 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286
  1. /* This file is based on WebProfilerBundle/Resources/views/Profiler/base_js.html.twig.
  2. If you make any change in this file, verify the same change is needed in the other file. */
  3. /*<![CDATA[*/
  4. (function() {
  5. "use strict";
  6. if ('classList' in document.documentElement) {
  7. var hasClass = function (el, cssClass) { return el.classList.contains(cssClass); };
  8. var removeClass = function(el, cssClass) { el.classList.remove(cssClass); };
  9. var addClass = function(el, cssClass) { el.classList.add(cssClass); };
  10. var toggleClass = function(el, cssClass) { el.classList.toggle(cssClass); };
  11. } else {
  12. var hasClass = function (el, cssClass) { return el.className.match(new RegExp('\\b' + cssClass + '\\b')); };
  13. var removeClass = function(el, cssClass) { el.className = el.className.replace(new RegExp('\\b' + cssClass + '\\b'), ' '); };
  14. var addClass = function(el, cssClass) { if (!hasClass(el, cssClass)) { el.className += " " + cssClass; } };
  15. var toggleClass = function(el, cssClass) { hasClass(el, cssClass) ? removeClass(el, cssClass) : addClass(el, cssClass); };
  16. }
  17. var addEventListener;
  18. var el = document.createElement('div');
  19. if (!('addEventListener' in el)) {
  20. addEventListener = function (element, eventName, callback) {
  21. element.attachEvent('on' + eventName, callback);
  22. };
  23. } else {
  24. addEventListener = function (element, eventName, callback) {
  25. element.addEventListener(eventName, callback, false);
  26. };
  27. }
  28. if (navigator.clipboard) {
  29. document.querySelectorAll('[data-clipboard-text]').forEach(function(element) {
  30. removeClass(element, 'hidden');
  31. element.addEventListener('click', function() {
  32. navigator.clipboard.writeText(element.getAttribute('data-clipboard-text'));
  33. })
  34. });
  35. }
  36. (function createTabs() {
  37. /* the accessibility options of this component have been defined according to: */
  38. /* www.w3.org/WAI/ARIA/apg/example-index/tabs/tabs-manual.html */
  39. var tabGroups = document.querySelectorAll('.sf-tabs:not([data-processed=true])');
  40. /* create the tab navigation for each group of tabs */
  41. for (var i = 0; i < tabGroups.length; i++) {
  42. var tabs = tabGroups[i].querySelectorAll(':scope > .tab');
  43. var tabNavigation = document.createElement('div');
  44. tabNavigation.className = 'tab-navigation';
  45. tabNavigation.setAttribute('role', 'tablist');
  46. var selectedTabId = 'tab-' + i + '-0'; /* select the first tab by default */
  47. for (var j = 0; j < tabs.length; j++) {
  48. var tabId = 'tab-' + i + '-' + j;
  49. var tabTitle = tabs[j].querySelector('.tab-title').innerHTML;
  50. var tabNavigationItem = document.createElement('button');
  51. addClass(tabNavigationItem, 'tab-control');
  52. tabNavigationItem.setAttribute('data-tab-id', tabId);
  53. tabNavigationItem.setAttribute('role', 'tab');
  54. tabNavigationItem.setAttribute('aria-controls', tabId);
  55. if (hasClass(tabs[j], 'active')) { selectedTabId = tabId; }
  56. if (hasClass(tabs[j], 'disabled')) {
  57. addClass(tabNavigationItem, 'disabled');
  58. }
  59. tabNavigationItem.innerHTML = tabTitle;
  60. tabNavigation.appendChild(tabNavigationItem);
  61. var tabContent = tabs[j].querySelector('.tab-content');
  62. tabContent.parentElement.setAttribute('id', tabId);
  63. }
  64. tabGroups[i].insertBefore(tabNavigation, tabGroups[i].firstChild);
  65. addClass(document.querySelector('[data-tab-id="' + selectedTabId + '"]'), 'active');
  66. }
  67. /* display the active tab and add the 'click' event listeners */
  68. for (i = 0; i < tabGroups.length; i++) {
  69. tabNavigation = tabGroups[i].querySelectorAll(':scope > .tab-navigation .tab-control');
  70. for (j = 0; j < tabNavigation.length; j++) {
  71. tabId = tabNavigation[j].getAttribute('data-tab-id');
  72. var tabPanel = document.getElementById(tabId);
  73. tabPanel.setAttribute('role', 'tabpanel');
  74. tabPanel.setAttribute('aria-labelledby', tabId);
  75. tabPanel.querySelector('.tab-title').className = 'hidden';
  76. if (hasClass(tabNavigation[j], 'active')) {
  77. tabPanel.className = 'block';
  78. tabNavigation[j].setAttribute('aria-selected', 'true');
  79. tabNavigation[j].removeAttribute('tabindex');
  80. } else {
  81. tabPanel.className = 'hidden';
  82. tabNavigation[j].removeAttribute('aria-selected');
  83. tabNavigation[j].setAttribute('tabindex', '-1');
  84. }
  85. tabNavigation[j].addEventListener('click', function(e) {
  86. var activeTab = e.target || e.srcElement;
  87. /* needed because when the tab contains HTML contents, user can click */
  88. /* on any of those elements instead of their parent '<button>' element */
  89. while (activeTab.tagName.toLowerCase() !== 'button') {
  90. activeTab = activeTab.parentNode;
  91. }
  92. /* get the full list of tabs through the parent of the active tab element */
  93. var tabNavigation = activeTab.parentNode.children;
  94. for (var k = 0; k < tabNavigation.length; k++) {
  95. var tabId = tabNavigation[k].getAttribute('data-tab-id');
  96. document.getElementById(tabId).className = 'hidden';
  97. removeClass(tabNavigation[k], 'active');
  98. tabNavigation[k].removeAttribute('aria-selected');
  99. tabNavigation[k].setAttribute('tabindex', '-1');
  100. }
  101. addClass(activeTab, 'active');
  102. activeTab.setAttribute('aria-selected', 'true');
  103. activeTab.removeAttribute('tabindex');
  104. var activeTabId = activeTab.getAttribute('data-tab-id');
  105. document.getElementById(activeTabId).className = 'block';
  106. });
  107. }
  108. tabGroups[i].setAttribute('data-processed', 'true');
  109. }
  110. })();
  111. (function createToggles() {
  112. var toggles = document.querySelectorAll('.sf-toggle:not([data-processed=true])');
  113. for (var i = 0; i < toggles.length; i++) {
  114. var elementSelector = toggles[i].getAttribute('data-toggle-selector');
  115. var element = document.querySelector(elementSelector);
  116. addClass(element, 'sf-toggle-content');
  117. if (toggles[i].hasAttribute('data-toggle-initial') && toggles[i].getAttribute('data-toggle-initial') == 'display') {
  118. addClass(toggles[i], 'sf-toggle-on');
  119. addClass(element, 'sf-toggle-visible');
  120. } else {
  121. addClass(toggles[i], 'sf-toggle-off');
  122. addClass(element, 'sf-toggle-hidden');
  123. }
  124. addEventListener(toggles[i], 'click', function(e) {
  125. var toggle = e.currentTarget;
  126. if (e.target.closest('a, span[data-clipboard-text], .sf-toggle') !== toggle) {
  127. return;
  128. }
  129. e.preventDefault();
  130. if ('' !== window.getSelection().toString()) {
  131. /* Don't do anything on text selection */
  132. return;
  133. }
  134. var element = document.querySelector(toggle.getAttribute('data-toggle-selector'));
  135. toggleClass(toggle, 'sf-toggle-on');
  136. toggleClass(toggle, 'sf-toggle-off');
  137. toggleClass(element, 'sf-toggle-hidden');
  138. toggleClass(element, 'sf-toggle-visible');
  139. /* the toggle doesn't change its contents when clicking on it */
  140. if (!toggle.hasAttribute('data-toggle-alt-content')) {
  141. return;
  142. }
  143. if (!toggle.hasAttribute('data-toggle-original-content')) {
  144. toggle.setAttribute('data-toggle-original-content', toggle.innerHTML);
  145. }
  146. var currentContent = toggle.innerHTML;
  147. var originalContent = toggle.getAttribute('data-toggle-original-content');
  148. var altContent = toggle.getAttribute('data-toggle-alt-content');
  149. toggle.innerHTML = currentContent !== altContent ? altContent : originalContent;
  150. });
  151. toggles[i].setAttribute('data-processed', 'true');
  152. }
  153. })();
  154. (function createFilters() {
  155. document.querySelectorAll('[data-filters] [data-filter]').forEach(function (filter) {
  156. var filters = filter.closest('[data-filters]'),
  157. type = 'choice',
  158. name = filter.dataset.filter,
  159. ucName = name.charAt(0).toUpperCase()+name.slice(1),
  160. list = document.createElement('ul'),
  161. values = filters.dataset['filter'+ucName] || filters.querySelectorAll('[data-filter-'+name+']'),
  162. labels = {},
  163. defaults = null,
  164. indexed = {},
  165. processed = {};
  166. if (typeof values === 'string') {
  167. type = 'level';
  168. labels = values.split(',');
  169. values = values.toLowerCase().split(',');
  170. defaults = values.length - 1;
  171. }
  172. addClass(list, 'filter-list');
  173. addClass(list, 'filter-list-'+type);
  174. values.forEach(function (value, i) {
  175. if (value instanceof HTMLElement) {
  176. value = value.dataset['filter'+ucName];
  177. }
  178. if (value in processed) {
  179. return;
  180. }
  181. var option = document.createElement('li'),
  182. label = i in labels ? labels[i] : value,
  183. active = false,
  184. matches;
  185. if ('' === label) {
  186. option.innerHTML = '<em>(none)</em>';
  187. } else {
  188. option.innerText = label;
  189. }
  190. option.dataset.filter = value;
  191. option.setAttribute('title', 1 === (matches = filters.querySelectorAll('[data-filter-'+name+'="'+value+'"]').length) ? 'Matches 1 row' : 'Matches '+matches+' rows');
  192. indexed[value] = i;
  193. list.appendChild(option);
  194. addEventListener(option, 'click', function () {
  195. if ('choice' === type) {
  196. filters.querySelectorAll('[data-filter-'+name+']').forEach(function (row) {
  197. if (option.dataset.filter === row.dataset['filter'+ucName]) {
  198. toggleClass(row, 'filter-hidden-'+name);
  199. }
  200. });
  201. toggleClass(option, 'active');
  202. } else if ('level' === type) {
  203. if (i === this.parentNode.querySelectorAll('.active').length - 1) {
  204. return;
  205. }
  206. this.parentNode.querySelectorAll('li').forEach(function (currentOption, j) {
  207. if (j <= i) {
  208. addClass(currentOption, 'active');
  209. if (i === j) {
  210. addClass(currentOption, 'last-active');
  211. } else {
  212. removeClass(currentOption, 'last-active');
  213. }
  214. } else {
  215. removeClass(currentOption, 'active');
  216. removeClass(currentOption, 'last-active');
  217. }
  218. });
  219. filters.querySelectorAll('[data-filter-'+name+']').forEach(function (row) {
  220. if (i < indexed[row.dataset['filter'+ucName]]) {
  221. addClass(row, 'filter-hidden-'+name);
  222. } else {
  223. removeClass(row, 'filter-hidden-'+name);
  224. }
  225. });
  226. }
  227. });
  228. if ('choice' === type) {
  229. active = null === defaults || 0 <= defaults.indexOf(value);
  230. } else if ('level' === type) {
  231. active = i <= defaults;
  232. if (active && i === defaults) {
  233. addClass(option, 'last-active');
  234. }
  235. }
  236. if (active) {
  237. addClass(option, 'active');
  238. } else {
  239. filters.querySelectorAll('[data-filter-'+name+'="'+value+'"]').forEach(function (row) {
  240. toggleClass(row, 'filter-hidden-'+name);
  241. });
  242. }
  243. processed[value] = true;
  244. });
  245. if (1 < list.childNodes.length) {
  246. filter.appendChild(list);
  247. filter.dataset.filtered = '';
  248. }
  249. });
  250. })();
  251. })();
  252. /*]]>*/