vendor/symfony/twig-bundle/Resources/views/base_js.html.twig line 1

Open in your IDE?
  1. {% deprecated 'The template "' ~ _self ~'" is deprecated since Symfony 4.4, will be removed in 5.0.' %}
  2. {# This file is based on WebProfilerBundle/Resources/views/Profiler/base_js.html.twig.
  3.    If you make any change in this file, verify the same change is needed in the other file. #}
  4. <script{% if csp_script_nonce is defined and csp_script_nonce %} nonce="{{ csp_script_nonce }}"{% endif %}>/*<![CDATA[*/
  5.     {# Caution: the contents of this file are processed by Twig before loading
  6.                 them as JavaScript source code. Always use '/*' comments instead
  7.                 of '//' comments to avoid impossible-to-debug side-effects #}
  9.     Sfjs = (function() {
  10.         "use strict";
  12.         if ('classList' in document.documentElement) {
  13.             var hasClass = function (el, cssClass) { return el.classList.contains(cssClass); };
  14.             var removeClass = function(el, cssClass) { el.classList.remove(cssClass); };
  15.             var addClass = function(el, cssClass) { el.classList.add(cssClass); };
  16.             var toggleClass = function(el, cssClass) { el.classList.toggle(cssClass); };
  17.         } else {
  18.             var hasClass = function (el, cssClass) { return el.className.match(new RegExp('\\b' + cssClass + '\\b')); };
  19.             var removeClass = function(el, cssClass) { el.className = el.className.replace(new RegExp('\\b' + cssClass + '\\b'), ' '); };
  20.             var addClass = function(el, cssClass) { if (!hasClass(el, cssClass)) { el.className += " " + cssClass; } };
  21.             var toggleClass = function(el, cssClass) { hasClass(el, cssClass) ? removeClass(el, cssClass) : addClass(el, cssClass); };
  22.         }
  24.         var addEventListener;
  26.         var el = document.createElement('div');
  27.         if (!('addEventListener' in el)) {
  28.             addEventListener = function (element, eventName, callback) {
  29.                 element.attachEvent('on' + eventName, callback);
  30.             };
  31.         } else {
  32.             addEventListener = function (element, eventName, callback) {
  33.                 element.addEventListener(eventName, callback, false);
  34.             };
  35.         }
  37.         return {
  38.             addEventListener: addEventListener,
  40.             createTabs: function() {
  41.                 var tabGroups = document.querySelectorAll('.sf-tabs:not([data-processed=true])');
  43.                 /* create the tab navigation for each group of tabs */
  44.                 for (var i = 0; i < tabGroups.length; i++) {
  45.                     var tabs = tabGroups[i].querySelectorAll(':scope > .tab');
  46.                     var tabNavigation = document.createElement('ul');
  47.                     tabNavigation.className = 'tab-navigation';
  49.                     var selectedTabId = 'tab-' + i + '-0'; /* select the first tab by default */
  50.                     for (var j = 0; j < tabs.length; j++) {
  51.                         var tabId = 'tab-' + i + '-' + j;
  52.                         var tabTitle = tabs[j].querySelector('.tab-title').innerHTML;
  54.                         var tabNavigationItem = document.createElement('li');
  55.                         tabNavigationItem.setAttribute('data-tab-id', tabId);
  56.                         if (hasClass(tabs[j], 'active')) { selectedTabId = tabId; }
  57.                         if (hasClass(tabs[j], 'disabled')) { addClass(tabNavigationItem, 'disabled'); }
  58.                         tabNavigationItem.innerHTML = tabTitle;
  59.                         tabNavigation.appendChild(tabNavigationItem);
  61.                         var tabContent = tabs[j].querySelector('.tab-content');
  62.                         tabContent.parentElement.setAttribute('id', tabId);
  63.                     }
  65.                     tabGroups[i].insertBefore(tabNavigation, tabGroups[i].firstChild);
  66.                     addClass(document.querySelector('[data-tab-id="' + selectedTabId + '"]'), 'active');
  67.                 }
  69.                 /* display the active tab and add the 'click' event listeners */
  70.                 for (i = 0; i < tabGroups.length; i++) {
  71.                     tabNavigation = tabGroups[i].querySelectorAll(':scope >.tab-navigation li');
  73.                     for (j = 0; j < tabNavigation.length; j++) {
  74.                         tabId = tabNavigation[j].getAttribute('data-tab-id');
  75.                         document.getElementById(tabId).querySelector('.tab-title').className = 'hidden';
  77.                         if (hasClass(tabNavigation[j], 'active')) {
  78.                             document.getElementById(tabId).className = 'block';
  79.                         } else {
  80.                             document.getElementById(tabId).className = 'hidden';
  81.                         }
  83.                         tabNavigation[j].addEventListener('click', function(e) {
  84.                             var activeTab = e.target || e.srcElement;
  86.                             /* needed because when the tab contains HTML contents, user can click */
  87.                             /* on any of those elements instead of their parent '<li>' element */
  88.                             while (activeTab.tagName.toLowerCase() !== 'li') {
  89.                                 activeTab = activeTab.parentNode;
  90.                             }
  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.                             }
  100.                             addClass(activeTab, 'active');
  101.                             var activeTabId = activeTab.getAttribute('data-tab-id');
  102.                             document.getElementById(activeTabId).className = 'block';
  103.                         });
  104.                     }
  106.                     tabGroups[i].setAttribute('data-processed', 'true');
  107.                 }
  108.             },
  110.             createToggles: function() {
  111.                 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);
  117.                     addClass(element, 'sf-toggle-content');
  119.                     if (toggles[i].hasAttribute('data-toggle-initial') && toggles[i].getAttribute('data-toggle-initial') == 'display') {
  120.                         addClass(toggles[i], 'sf-toggle-on');
  121.                         addClass(element, 'sf-toggle-visible');
  122.                     } else {
  123.                         addClass(toggles[i], 'sf-toggle-off');
  124.                         addClass(element, 'sf-toggle-hidden');
  125.                     }
  127.                     addEventListener(toggles[i], 'click', function(e) {
  128.                         e.preventDefault();
  130.                         if ('' !== window.getSelection().toString()) {
  131.                             /* Don't do anything on text selection */
  132.                             return;
  133.                         }
  135.                         var toggle = e.target || e.srcElement;
  137.                         /* needed because when the toggle contains HTML contents, user can click */
  138.                         /* on any of those elements instead of their parent '.sf-toggle' element */
  139.                         while (!hasClass(toggle, 'sf-toggle')) {
  140.                             toggle = toggle.parentNode;
  141.                         }
  143.                         var element = document.querySelector(toggle.getAttribute('data-toggle-selector'));
  145.                         toggleClass(toggle, 'sf-toggle-on');
  146.                         toggleClass(toggle, 'sf-toggle-off');
  147.                         toggleClass(element, 'sf-toggle-hidden');
  148.                         toggleClass(element, 'sf-toggle-visible');
  150.                         /* the toggle doesn't change its contents when clicking on it */
  151.                         if (!toggle.hasAttribute('data-toggle-alt-content')) {
  152.                             return;
  153.                         }
  155.                         if (!toggle.hasAttribute('data-toggle-original-content')) {
  156.                             toggle.setAttribute('data-toggle-original-content', toggle.innerHTML);
  157.                         }
  159.                         var currentContent = toggle.innerHTML;
  160.                         var originalContent = toggle.getAttribute('data-toggle-original-content');
  161.                         var altContent = toggle.getAttribute('data-toggle-alt-content');
  162.                         toggle.innerHTML = currentContent !== altContent ? altContent : originalContent;
  163.                     });
  165.                     /* Prevents from disallowing clicks on links inside toggles */
  166.                     var toggleLinks = toggles[i].querySelectorAll('a');
  167.                     for (var j = 0; j < toggleLinks.length; j++) {
  168.                         addEventListener(toggleLinks[j], 'click', function(e) {
  169.                             e.stopPropagation();
  170.                         });
  171.                     }
  173.                     toggles[i].setAttribute('data-processed', 'true');
  174.                 }
  175.             },
  177.             createFilters: function() {
  178.                 document.querySelectorAll('[data-filters] [data-filter]').forEach(function (filter) {
  179.                     var filters = filter.closest('[data-filters]'),
  180.                         type = 'choice',
  181.                         name = filter.dataset.filter,
  182.                         ucName = name.charAt(0).toUpperCase()+name.slice(1),
  183.                         list = document.createElement('ul'),
  184.                         values = filters.dataset['filter'+ucName] || filters.querySelectorAll('[data-filter-'+name+']'),
  185.                         labels = {},
  186.                         defaults = null,
  187.                         indexed = {},
  188.                         processed = {};
  189.                     if (typeof values === 'string') {
  190.                         type = 'level';
  191.                         labels = values.split(',');
  192.                         values = values.toLowerCase().split(',');
  193.                         defaults = values.length - 1;
  194.                     }
  195.                     addClass(list, 'filter-list');
  196.                     addClass(list, 'filter-list-'+type);
  197.                     values.forEach(function (value, i) {
  198.                         if (value instanceof HTMLElement) {
  199.                             value = value.dataset['filter'+ucName];
  200.                         }
  201.                         if (value in processed) {
  202.                             return;
  203.                         }
  204.                         var option = document.createElement('li'),
  205.                             label = i in labels ? labels[i] : value,
  206.                             active = false,
  207.                             matches;
  208.                         if ('' === label) {
  209.                             option.innerHTML = '<em>(none)</em>';
  210.                         } else {
  211.                             option.innerText = label;
  212.                         }
  213.                         option.dataset.filter = value;
  214.                         option.setAttribute('title', 1 === (matches = filters.querySelectorAll('[data-filter-'+name+'="'+value+'"]').length) ? 'Matches 1 row' : 'Matches '+matches+' rows');
  215.                         indexed[value] = i;
  216.                         list.appendChild(option);
  217.                         addEventListener(option, 'click', function () {
  218.                             if ('choice' === type) {
  219.                                 filters.querySelectorAll('[data-filter-'+name+']').forEach(function (row) {
  220.                                     if (option.dataset.filter === row.dataset['filter'+ucName]) {
  221.                                         toggleClass(row, 'filter-hidden-'+name);
  222.                                     }
  223.                                 });
  224.                                 toggleClass(option, 'active');
  225.                             } else if ('level' === type) {
  226.                                 if (i === this.parentNode.querySelectorAll('.active').length - 1) {
  227.                                     return;
  228.                                 }
  229.                                 this.parentNode.querySelectorAll('li').forEach(function (currentOption, j) {
  230.                                     if (j <= i) {
  231.                                         addClass(currentOption, 'active');
  232.                                         if (i === j) {
  233.                                             addClass(currentOption, 'last-active');
  234.                                         } else {
  235.                                             removeClass(currentOption, 'last-active');
  236.                                         }
  237.                                     } else {
  238.                                         removeClass(currentOption, 'active');
  239.                                         removeClass(currentOption, 'last-active');
  240.                                     }
  241.                                 });
  242.                                 filters.querySelectorAll('[data-filter-'+name+']').forEach(function (row) {
  243.                                     if (i < indexed[row.dataset['filter'+ucName]]) {
  244.                                         addClass(row, 'filter-hidden-'+name);
  245.                                     } else {
  246.                                         removeClass(row, 'filter-hidden-'+name);
  247.                                     }
  248.                                 });
  249.                             }
  250.                         });
  251.                         if ('choice' === type) {
  252.                             active = null === defaults || 0 <= defaults.indexOf(value);
  253.                         } else if ('level' === type) {
  254.                             active = i <= defaults;
  255.                             if (active && i === defaults) {
  256.                                 addClass(option, 'last-active');
  257.                             }
  258.                         }
  259.                         if (active) {
  260.                             addClass(option, 'active');
  261.                         } else {
  262.                             filters.querySelectorAll('[data-filter-'+name+'="'+value+'"]').forEach(function (row) {
  263.                                 toggleClass(row, 'filter-hidden-'+name);
  264.                             });
  265.                         }
  266.                         processed[value] = true;
  267.                     });
  269.                     if (1 < list.childNodes.length) {
  270.                         filter.appendChild(list);
  271.                         filter.dataset.filtered = '';
  272.                     }
  273.                 });
  274.             }
  275.         };
  276.     })();
  278.     Sfjs.addEventListener(document, 'DOMContentLoaded', function() {
  279.         Sfjs.createTabs();
  280.         Sfjs.createToggles();
  281.         Sfjs.createFilters();
  282.     });
  284. /*]]>*/</script>