exception.js 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297
  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. if (typeof Sfjs === 'undefined') {
  5. Sfjs = (function() {
  6. "use strict";
  7. if ('classList' in document.documentElement) {
  8. var hasClass = function (el, cssClass) { return el.classList.contains(cssClass); };
  9. var removeClass = function(el, cssClass) { el.classList.remove(cssClass); };
  10. var addClass = function(el, cssClass) { el.classList.add(cssClass); };
  11. var toggleClass = function(el, cssClass) { el.classList.toggle(cssClass); };
  12. } else {
  13. var hasClass = function (el, cssClass) { return el.className.match(new RegExp('\\b' + cssClass + '\\b')); };
  14. var removeClass = function(el, cssClass) { el.className = el.className.replace(new RegExp('\\b' + cssClass + '\\b'), ' '); };
  15. var addClass = function(el, cssClass) { if (!hasClass(el, cssClass)) { el.className += " " + cssClass; } };
  16. var toggleClass = function(el, cssClass) { hasClass(el, cssClass) ? removeClass(el, cssClass) : addClass(el, cssClass); };
  17. }
  18. var addEventListener;
  19. var el = document.createElement('div');
  20. if (!('addEventListener' in el)) {
  21. addEventListener = function (element, eventName, callback) {
  22. element.attachEvent('on' + eventName, callback);
  23. };
  24. } else {
  25. addEventListener = function (element, eventName, callback) {
  26. element.addEventListener(eventName, callback, false);
  27. };
  28. }
  29. if (navigator.clipboard) {
  30. document.querySelectorAll('[data-clipboard-text]').forEach(function(element) {
  31. removeClass(element, 'hidden');
  32. element.addEventListener('click', function() {
  33. navigator.clipboard.writeText(element.getAttribute('data-clipboard-text'));
  34. })
  35. });
  36. }
  37. return {
  38. addEventListener: addEventListener,
  39. createTabs: function() {
  40. var tabGroups = document.querySelectorAll('.sf-tabs:not([data-processed=true])');
  41. /* create the tab navigation for each group of tabs */
  42. for (var i = 0; i < tabGroups.length; i++) {
  43. var tabs = tabGroups[i].querySelectorAll(':scope > .tab');
  44. var tabNavigation = document.createElement('ul');
  45. tabNavigation.className = 'tab-navigation';
  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('li');
  51. tabNavigationItem.setAttribute('data-tab-id', tabId);
  52. if (hasClass(tabs[j], 'active')) { selectedTabId = tabId; }
  53. if (hasClass(tabs[j], 'disabled')) { addClass(tabNavigationItem, 'disabled'); }
  54. tabNavigationItem.innerHTML = tabTitle;
  55. tabNavigation.appendChild(tabNavigationItem);
  56. var tabContent = tabs[j].querySelector('.tab-content');
  57. tabContent.parentElement.setAttribute('id', tabId);
  58. }
  59. tabGroups[i].insertBefore(tabNavigation, tabGroups[i].firstChild);
  60. addClass(document.querySelector('[data-tab-id="' + selectedTabId + '"]'), 'active');
  61. }
  62. /* display the active tab and add the 'click' event listeners */
  63. for (i = 0; i < tabGroups.length; i++) {
  64. tabNavigation = tabGroups[i].querySelectorAll(':scope >.tab-navigation li');
  65. for (j = 0; j < tabNavigation.length; j++) {
  66. tabId = tabNavigation[j].getAttribute('data-tab-id');
  67. document.getElementById(tabId).querySelector('.tab-title').className = 'hidden';
  68. if (hasClass(tabNavigation[j], 'active')) {
  69. document.getElementById(tabId).className = 'block';
  70. } else {
  71. document.getElementById(tabId).className = 'hidden';
  72. }
  73. tabNavigation[j].addEventListener('click', function(e) {
  74. var activeTab = e.target || e.srcElement;
  75. /* needed because when the tab contains HTML contents, user can click */
  76. /* on any of those elements instead of their parent '<li>' element */
  77. while (activeTab.tagName.toLowerCase() !== 'li') {
  78. activeTab = activeTab.parentNode;
  79. }
  80. /* get the full list of tabs through the parent of the active tab element */
  81. var tabNavigation = activeTab.parentNode.children;
  82. for (var k = 0; k < tabNavigation.length; k++) {
  83. var tabId = tabNavigation[k].getAttribute('data-tab-id');
  84. document.getElementById(tabId).className = 'hidden';
  85. removeClass(tabNavigation[k], 'active');
  86. }
  87. addClass(activeTab, 'active');
  88. var activeTabId = activeTab.getAttribute('data-tab-id');
  89. document.getElementById(activeTabId).className = 'block';
  90. });
  91. }
  92. tabGroups[i].setAttribute('data-processed', 'true');
  93. }
  94. },
  95. createToggles: function() {
  96. var toggles = document.querySelectorAll('.sf-toggle:not([data-processed=true])');
  97. for (var i = 0; i < toggles.length; i++) {
  98. var elementSelector = toggles[i].getAttribute('data-toggle-selector');
  99. var element = document.querySelector(elementSelector);
  100. addClass(element, 'sf-toggle-content');
  101. if (toggles[i].hasAttribute('data-toggle-initial') && toggles[i].getAttribute('data-toggle-initial') == 'display') {
  102. addClass(toggles[i], 'sf-toggle-on');
  103. addClass(element, 'sf-toggle-visible');
  104. } else {
  105. addClass(toggles[i], 'sf-toggle-off');
  106. addClass(element, 'sf-toggle-hidden');
  107. }
  108. addEventListener(toggles[i], 'click', function(e) {
  109. e.preventDefault();
  110. if ('' !== window.getSelection().toString()) {
  111. /* Don't do anything on text selection */
  112. return;
  113. }
  114. var toggle = e.target || e.srcElement;
  115. /* needed because when the toggle contains HTML contents, user can click */
  116. /* on any of those elements instead of their parent '.sf-toggle' element */
  117. while (!hasClass(toggle, 'sf-toggle')) {
  118. toggle = toggle.parentNode;
  119. }
  120. var element = document.querySelector(toggle.getAttribute('data-toggle-selector'));
  121. toggleClass(toggle, 'sf-toggle-on');
  122. toggleClass(toggle, 'sf-toggle-off');
  123. toggleClass(element, 'sf-toggle-hidden');
  124. toggleClass(element, 'sf-toggle-visible');
  125. /* the toggle doesn't change its contents when clicking on it */
  126. if (!toggle.hasAttribute('data-toggle-alt-content')) {
  127. return;
  128. }
  129. if (!toggle.hasAttribute('data-toggle-original-content')) {
  130. toggle.setAttribute('data-toggle-original-content', toggle.innerHTML);
  131. }
  132. var currentContent = toggle.innerHTML;
  133. var originalContent = toggle.getAttribute('data-toggle-original-content');
  134. var altContent = toggle.getAttribute('data-toggle-alt-content');
  135. toggle.innerHTML = currentContent !== altContent ? altContent : originalContent;
  136. });
  137. /* Prevents from disallowing clicks on links inside toggles */
  138. var toggleLinks = toggles[i].querySelectorAll('a');
  139. for (var j = 0; j < toggleLinks.length; j++) {
  140. addEventListener(toggleLinks[j], 'click', function(e) {
  141. e.stopPropagation();
  142. });
  143. }
  144. /* Prevents from disallowing clicks on "copy to clipboard" elements inside toggles */
  145. var copyToClipboardElements = toggles[i].querySelectorAll('span[data-clipboard-text]');
  146. for (var k = 0; k < copyToClipboardElements.length; k++) {
  147. addEventListener(copyToClipboardElements[k], 'click', function(e) {
  148. e.stopPropagation();
  149. });
  150. }
  151. toggles[i].setAttribute('data-processed', 'true');
  152. }
  153. },
  154. createFilters: function() {
  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. })();
  253. Sfjs.addEventListener(document, 'DOMContentLoaded', function() {
  254. Sfjs.createTabs();
  255. Sfjs.createToggles();
  256. Sfjs.createFilters();
  257. });
  258. }
  259. /*]]>*/