You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

161 satır
5.6KB

  1. (function () {
  2. 'use strict';
  3. var findToolbar = function () {
  4. return document.querySelector('#yii-debug-toolbar');
  5. },
  6. ajax = function (url, settings) {
  7. var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
  8. settings = settings || {};
  9. xhr.open(settings.method || 'GET', url, true);
  10. xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
  11. xhr.setRequestHeader('Accept', 'text/html');
  12. xhr.onreadystatechange = function (state) {
  13. if (xhr.readyState === 4) {
  14. if (xhr.status === 200 && settings.success) {
  15. settings.success(xhr);
  16. } else if (xhr.status != 200 && settings.error) {
  17. settings.error(xhr);
  18. }
  19. }
  20. };
  21. xhr.send(settings.data || '');
  22. },
  23. url,
  24. div,
  25. toolbarEl = findToolbar(),
  26. barSelector = '.yii-debug-toolbar__bar',
  27. viewSelector = '.yii-debug-toolbar__view',
  28. blockSelector = '.yii-debug-toolbar__block',
  29. toggleSelector = '.yii-debug-toolbar__toggle',
  30. externalSelector = '.yii-debug-toolbar__external',
  31. CACHE_KEY = 'yii-debug-toolbar',
  32. ACTIVE_STATE = 'active',
  33. activeClass = 'yii-debug-toolbar_active',
  34. iframeActiveClass = 'yii-debug-toolbar_iframe_active',
  35. titleClass = 'yii-debug-toolbar__title',
  36. blockClass = 'yii-debug-toolbar__block',
  37. blockActiveClass = 'yii-debug-toolbar__block_active';
  38. if (toolbarEl) {
  39. url = toolbarEl.getAttribute('data-url');
  40. ajax(url, {
  41. success: function (xhr) {
  42. div = document.createElement('div');
  43. div.innerHTML = xhr.responseText;
  44. toolbarEl.parentNode.replaceChild(div, toolbarEl);
  45. showToolbar(findToolbar());
  46. },
  47. error: function (xhr) {
  48. toolbarEl.innerHTML = xhr.responseText;
  49. }
  50. });
  51. }
  52. function showToolbar(toolbarEl) {
  53. var barEl = toolbarEl.querySelector(barSelector),
  54. viewEl = toolbarEl.querySelector(viewSelector),
  55. toggleEl = toolbarEl.querySelector(toggleSelector),
  56. externalEl = toolbarEl.querySelector(externalSelector),
  57. blockEls = barEl.querySelectorAll(blockSelector),
  58. iframeEl = viewEl.querySelector('iframe'),
  59. iframeHeight = function () {
  60. return (window.innerHeight * 0.7) + 'px';
  61. },
  62. isIframeActive = function () {
  63. return toolbarEl.classList.contains(iframeActiveClass);
  64. },
  65. showIframe = function (href) {
  66. toolbarEl.classList.add(iframeActiveClass);
  67. iframeEl.src = externalEl.href = href;
  68. viewEl.style.height = iframeHeight();
  69. },
  70. hideIframe = function () {
  71. toolbarEl.classList.remove(iframeActiveClass);
  72. removeActiveBlocksCls();
  73. externalEl.href = '#';
  74. viewEl.style.height = '';
  75. },
  76. removeActiveBlocksCls = function () {
  77. [].forEach.call(blockEls, function (el) {
  78. el.classList.remove(blockActiveClass);
  79. });
  80. },
  81. toggleToolbarClass = function (className) {
  82. if (toolbarEl.classList.contains(className)) {
  83. toolbarEl.classList.remove(className);
  84. } else {
  85. toolbarEl.classList.add(className);
  86. }
  87. },
  88. toggleStorageState = function (key, value) {
  89. if (window.localStorage) {
  90. var item = localStorage.getItem(key);
  91. if (item) {
  92. localStorage.removeItem(key);
  93. } else {
  94. localStorage.setItem(key, value);
  95. }
  96. }
  97. },
  98. restoreStorageState = function (key) {
  99. if (window.localStorage) {
  100. return localStorage.getItem(key);
  101. }
  102. },
  103. togglePosition = function () {
  104. if (isIframeActive()) {
  105. hideIframe();
  106. } else {
  107. toggleToolbarClass(activeClass);
  108. toggleStorageState(CACHE_KEY, ACTIVE_STATE);
  109. }
  110. };
  111. toolbarEl.style.display = 'block';
  112. if (restoreStorageState(CACHE_KEY) == ACTIVE_STATE) {
  113. toolbarEl.classList.add(activeClass);
  114. }
  115. window.onresize = function () {
  116. if (toolbarEl.classList.contains(iframeActiveClass)) {
  117. viewEl.style.height = iframeHeight();
  118. }
  119. };
  120. barEl.onclick = function (e) {
  121. var target = e.target,
  122. block = findAncestor(target, blockClass);
  123. if (block && !block.classList.contains(titleClass)) {
  124. while (target !== this) {
  125. if (target.href) {
  126. removeActiveBlocksCls();
  127. block.classList.add(blockActiveClass);
  128. showIframe(target.href);
  129. }
  130. target = target.parentNode;
  131. }
  132. e.preventDefault();
  133. }
  134. };
  135. toggleEl.onclick = togglePosition;
  136. }
  137. function findAncestor(el, cls) {
  138. while ((el = el.parentElement) && !el.classList.contains(cls));
  139. return el;
  140. }
  141. })();