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

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