exception.js 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279
  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. Sfjs = (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. return {
  29. addEventListener: addEventListener,
  30. createTabs: function() {
  31. var tabGroups = document.querySelectorAll('.sf-tabs:not([data-processed=true])');
  32. /* create the tab navigation for each group of tabs */
  33. for (var i = 0; i < tabGroups.length; i++) {
  34. var tabs = tabGroups[i].querySelectorAll(':scope > .tab');
  35. var tabNavigation = document.createElement('ul');
  36. tabNavigation.className = 'tab-navigation';
  37. var selectedTabId = 'tab-' + i + '-0'; /* select the first tab by default */
  38. for (var j = 0; j < tabs.length; j++) {
  39. var tabId = 'tab-' + i + '-' + j;
  40. var tabTitle = tabs[j].querySelector('.tab-title').innerHTML;
  41. var tabNavigationItem = document.createElement('li');
  42. tabNavigationItem.setAttribute('data-tab-id', tabId);
  43. if (hasClass(tabs[j], 'active')) { selectedTabId = tabId; }
  44. if (hasClass(tabs[j], 'disabled')) { addClass(tabNavigationItem, 'disabled'); }
  45. tabNavigationItem.innerHTML = tabTitle;
  46. tabNavigation.appendChild(tabNavigationItem);
  47. var tabContent = tabs[j].querySelector('.tab-content');
  48. tabContent.parentElement.setAttribute('id', tabId);
  49. }
  50. tabGroups[i].insertBefore(tabNavigation, tabGroups[i].firstChild);
  51. addClass(document.querySelector('[data-tab-id="' + selectedTabId + '"]'), 'active');
  52. }
  53. /* display the active tab and add the 'click' event listeners */
  54. for (i = 0; i < tabGroups.length; i++) {
  55. tabNavigation = tabGroups[i].querySelectorAll(':scope >.tab-navigation li');
  56. for (j = 0; j < tabNavigation.length; j++) {
  57. tabId = tabNavigation[j].getAttribute('data-tab-id');
  58. document.getElementById(tabId).querySelector('.tab-title').className = 'hidden';
  59. if (hasClass(tabNavigation[j], 'active')) {
  60. document.getElementById(tabId).className = 'block';
  61. } else {
  62. document.getElementById(tabId).className = 'hidden';
  63. }
  64. tabNavigation[j].addEventListener('click', function(e) {
  65. var activeTab = e.target || e.srcElement;
  66. /* needed because when the tab contains HTML contents, user can click */
  67. /* on any of those elements instead of their parent '<li>' element */
  68. while (activeTab.tagName.toLowerCase() !== 'li') {
  69. activeTab = activeTab.parentNode;
  70. }
  71. /* get the full list of tabs through the parent of the active tab element */
  72. var tabNavigation = activeTab.parentNode.children;
  73. for (var k = 0; k < tabNavigation.length; k++) {
  74. var tabId = tabNavigation[k].getAttribute('data-tab-id');
  75. document.getElementById(tabId).className = 'hidden';
  76. removeClass(tabNavigation[k], 'active');
  77. }
  78. addClass(activeTab, 'active');
  79. var activeTabId = activeTab.getAttribute('data-tab-id');
  80. document.getElementById(activeTabId).className = 'block';
  81. });
  82. }
  83. tabGroups[i].setAttribute('data-processed', 'true');
  84. }
  85. },
  86. createToggles: function() {
  87. var toggles = document.querySelectorAll('.sf-toggle:not([data-processed=true])');
  88. for (var i = 0; i < toggles.length; i++) {
  89. var elementSelector = toggles[i].getAttribute('data-toggle-selector');
  90. var element = document.querySelector(elementSelector);
  91. addClass(element, 'sf-toggle-content');
  92. if (toggles[i].hasAttribute('data-toggle-initial') && toggles[i].getAttribute('data-toggle-initial') == 'display') {
  93. addClass(toggles[i], 'sf-toggle-on');
  94. addClass(element, 'sf-toggle-visible');
  95. } else {
  96. addClass(toggles[i], 'sf-toggle-off');
  97. addClass(element, 'sf-toggle-hidden');
  98. }
  99. addEventListener(toggles[i], 'click', function(e) {
  100. e.preventDefault();
  101. if ('' !== window.getSelection().toString()) {
  102. /* Don't do anything on text selection */
  103. return;
  104. }
  105. var toggle = e.target || e.srcElement;
  106. /* needed because when the toggle contains HTML contents, user can click */
  107. /* on any of those elements instead of their parent '.sf-toggle' element */
  108. while (!hasClass(toggle, 'sf-toggle')) {
  109. toggle = toggle.parentNode;
  110. }
  111. var element = document.querySelector(toggle.getAttribute('data-toggle-selector'));
  112. toggleClass(toggle, 'sf-toggle-on');
  113. toggleClass(toggle, 'sf-toggle-off');
  114. toggleClass(element, 'sf-toggle-hidden');
  115. toggleClass(element, 'sf-toggle-visible');
  116. /* the toggle doesn't change its contents when clicking on it */
  117. if (!toggle.hasAttribute('data-toggle-alt-content')) {
  118. return;
  119. }
  120. if (!toggle.hasAttribute('data-toggle-original-content')) {
  121. toggle.setAttribute('data-toggle-original-content', toggle.innerHTML);
  122. }
  123. var currentContent = toggle.innerHTML;
  124. var originalContent = toggle.getAttribute('data-toggle-original-content');
  125. var altContent = toggle.getAttribute('data-toggle-alt-content');
  126. toggle.innerHTML = currentContent !== altContent ? altContent : originalContent;
  127. });
  128. /* Prevents from disallowing clicks on links inside toggles */
  129. var toggleLinks = toggles[i].querySelectorAll('a');
  130. for (var j = 0; j < toggleLinks.length; j++) {
  131. addEventListener(toggleLinks[j], 'click', function(e) {
  132. e.stopPropagation();
  133. });
  134. }
  135. toggles[i].setAttribute('data-processed', 'true');
  136. }
  137. },
  138. createFilters: function() {
  139. document.querySelectorAll('[data-filters] [data-filter]').forEach(function (filter) {
  140. var filters = filter.closest('[data-filters]'),
  141. type = 'choice',
  142. name = filter.dataset.filter,
  143. ucName = name.charAt(0).toUpperCase()+name.slice(1),
  144. list = document.createElement('ul'),
  145. values = filters.dataset['filter'+ucName] || filters.querySelectorAll('[data-filter-'+name+']'),
  146. labels = {},
  147. defaults = null,
  148. indexed = {},
  149. processed = {};
  150. if (typeof values === 'string') {
  151. type = 'level';
  152. labels = values.split(',');
  153. values = values.toLowerCase().split(',');
  154. defaults = values.length - 1;
  155. }
  156. addClass(list, 'filter-list');
  157. addClass(list, 'filter-list-'+type);
  158. values.forEach(function (value, i) {
  159. if (value instanceof HTMLElement) {
  160. value = value.dataset['filter'+ucName];
  161. }
  162. if (value in processed) {
  163. return;
  164. }
  165. var option = document.createElement('li'),
  166. label = i in labels ? labels[i] : value,
  167. active = false,
  168. matches;
  169. if ('' === label) {
  170. option.innerHTML = '<em>(none)</em>';
  171. } else {
  172. option.innerText = label;
  173. }
  174. option.dataset.filter = value;
  175. option.setAttribute('title', 1 === (matches = filters.querySelectorAll('[data-filter-'+name+'="'+value+'"]').length) ? 'Matches 1 row' : 'Matches '+matches+' rows');
  176. indexed[value] = i;
  177. list.appendChild(option);
  178. addEventListener(option, 'click', function () {
  179. if ('choice' === type) {
  180. filters.querySelectorAll('[data-filter-'+name+']').forEach(function (row) {
  181. if (option.dataset.filter === row.dataset['filter'+ucName]) {
  182. toggleClass(row, 'filter-hidden-'+name);
  183. }
  184. });
  185. toggleClass(option, 'active');
  186. } else if ('level' === type) {
  187. if (i === this.parentNode.querySelectorAll('.active').length - 1) {
  188. return;
  189. }
  190. this.parentNode.querySelectorAll('li').forEach(function (currentOption, j) {
  191. if (j <= i) {
  192. addClass(currentOption, 'active');
  193. if (i === j) {
  194. addClass(currentOption, 'last-active');
  195. } else {
  196. removeClass(currentOption, 'last-active');
  197. }
  198. } else {
  199. removeClass(currentOption, 'active');
  200. removeClass(currentOption, 'last-active');
  201. }
  202. });
  203. filters.querySelectorAll('[data-filter-'+name+']').forEach(function (row) {
  204. if (i < indexed[row.dataset['filter'+ucName]]) {
  205. addClass(row, 'filter-hidden-'+name);
  206. } else {
  207. removeClass(row, 'filter-hidden-'+name);
  208. }
  209. });
  210. }
  211. });
  212. if ('choice' === type) {
  213. active = null === defaults || 0 <= defaults.indexOf(value);
  214. } else if ('level' === type) {
  215. active = i <= defaults;
  216. if (active && i === defaults) {
  217. addClass(option, 'last-active');
  218. }
  219. }
  220. if (active) {
  221. addClass(option, 'active');
  222. } else {
  223. filters.querySelectorAll('[data-filter-'+name+'="'+value+'"]').forEach(function (row) {
  224. toggleClass(row, 'filter-hidden-'+name);
  225. });
  226. }
  227. processed[value] = true;
  228. });
  229. if (1 < list.childNodes.length) {
  230. filter.appendChild(list);
  231. filter.dataset.filtered = '';
  232. }
  233. });
  234. }
  235. };
  236. })();
  237. Sfjs.addEventListener(document, 'DOMContentLoaded', function() {
  238. Sfjs.createTabs();
  239. Sfjs.createToggles();
  240. Sfjs.createFilters();
  241. });
  242. /*]]>*/