Development of an internal social media platform with personalised dashboards for students
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.

toolbar.js 13KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330
  1. (function () {
  2. var $$ = {
  3. on: function(root, eventName, selector, fn) {
  4. root.addEventListener(eventName, function(event) {
  5. var target = event.target.closest(selector);
  6. if (root.contains(target)) {
  7. fn.call(target, event);
  8. }
  9. });
  10. },
  11. show: function(element) {
  12. element.style.display = 'block';
  13. },
  14. hide: function(element) {
  15. element.style.display = 'none';
  16. },
  17. toggle: function(element, value) {
  18. if (value) {
  19. $$.show(element);
  20. } else {
  21. $$.hide(element);
  22. }
  23. },
  24. visible: function(element) {
  25. style = getComputedStyle(element);
  26. return style.display !== 'none';
  27. },
  28. executeScripts: function(root) {
  29. root.querySelectorAll('script').forEach(function(e) {
  30. var clone = document.createElement('script');
  31. clone.src = e.src;
  32. root.appendChild(clone);
  33. });
  34. },
  35. };
  36. var onKeyDown = function(event) {
  37. if (event.keyCode == 27) {
  38. djdt.hide_one_level();
  39. }
  40. };
  41. var ajax = function(url, init) {
  42. init = Object.assign({credentials: 'same-origin'}, init);
  43. return fetch(url, init).then(function(response) {
  44. if (response.ok) {
  45. return response.text();
  46. } else {
  47. var win = document.querySelector('#djDebugWindow');
  48. win.innerHTML = '<div class="djDebugPanelTitle"><a class="djDebugClose djDebugBack" href=""></a><h3>'+response.status+': '+response.statusText+'</h3></div>';
  49. $$.show(win);
  50. return Promise.reject();
  51. }
  52. });
  53. };
  54. var djdt = {
  55. handleDragged: false,
  56. events: {
  57. ready: []
  58. },
  59. isReady: false,
  60. init: function() {
  61. var djDebug = document.querySelector('#djDebug');
  62. $$.show(djDebug);
  63. $$.on(djDebug.querySelector('#djDebugPanelList'), 'click', 'li a', function(event) {
  64. event.preventDefault();
  65. if (!this.className) {
  66. return;
  67. }
  68. var current = djDebug.querySelector('#' + this.className);
  69. if ($$.visible(current)) {
  70. djdt.hide_panels();
  71. } else {
  72. djdt.hide_panels();
  73. $$.show(current);
  74. this.parentElement.classList.add('djdt-active');
  75. var inner = current.querySelector('.djDebugPanelContent .djdt-scroll'),
  76. store_id = djDebug.getAttribute('data-store-id');
  77. if (store_id && inner.children.length === 0) {
  78. var url = djDebug.getAttribute('data-render-panel-url');
  79. var url_params = new URLSearchParams();
  80. url_params.append('store_id', store_id);
  81. url_params.append('panel_id', this.className);
  82. url += '?' + url_params.toString();
  83. ajax(url).then(function(body) {
  84. inner.previousElementSibling.remove(); // Remove AJAX loader
  85. inner.innerHTML = body;
  86. $$.executeScripts(inner);
  87. });
  88. }
  89. }
  90. });
  91. $$.on(djDebug, 'click', 'a.djDebugClose', function(event) {
  92. event.preventDefault();
  93. djdt.hide_one_level();
  94. });
  95. $$.on(djDebug, 'click', '.djDebugPanelButton input[type=checkbox]', function() {
  96. djdt.cookie.set(this.getAttribute('data-cookie'), this.checked ? 'on' : 'off', {
  97. path: '/',
  98. expires: 10
  99. });
  100. });
  101. // Used by the SQL and template panels
  102. $$.on(djDebug, 'click', '.remoteCall', function(event) {
  103. event.preventDefault();
  104. var name = this.tagName.toLowerCase();
  105. var ajax_data = {};
  106. if (name == 'button') {
  107. var form = this.closest('form');
  108. ajax_data.url = this.getAttribute('formaction');
  109. if (form) {
  110. ajax_data.body = new FormData(form);
  111. ajax_data.method = form.getAttribute('method') || 'POST';
  112. }
  113. }
  114. if (name == 'a') {
  115. ajax_data.url = this.getAttribute('href');
  116. }
  117. ajax(ajax_data.url, ajax_data).then(function(body) {
  118. var win = djDebug.querySelector('#djDebugWindow');
  119. win.innerHTML = body;
  120. $$.executeScripts(win);
  121. $$.show(win);
  122. });
  123. });
  124. // Used by the cache, profiling and SQL panels
  125. $$.on(djDebug, 'click', 'a.djToggleSwitch', function(event) {
  126. event.preventDefault();
  127. var self = this;
  128. var id = this.getAttribute('data-toggle-id');
  129. var open_me = this.textContent == this.getAttribute('data-toggle-open');
  130. if (id === '' || !id) {
  131. return;
  132. }
  133. var name = this.getAttribute('data-toggle-name');
  134. var container = this.closest('.djDebugPanelContent').querySelector('#' + name + '_' + id);
  135. container.querySelectorAll('.djDebugCollapsed').forEach(function(e) {
  136. $$.toggle(e, open_me);
  137. });
  138. container.querySelectorAll('.djDebugUncollapsed').forEach(function(e) {
  139. $$.toggle(e, !open_me);
  140. });
  141. this.closest('.djDebugPanelContent').querySelectorAll('.djToggleDetails_' + id).forEach(function(e) {
  142. if (open_me) {
  143. e.classList.add('djSelected');
  144. e.classList.remove('djUnselected');
  145. self.textContent = self.getAttribute('data-toggle-close');
  146. } else {
  147. e.classList.remove('djSelected');
  148. e.classList.add('djUnselected');
  149. self.textContent = self.getAttribute('data-toggle-open');
  150. }
  151. var switch_ = e.querySelector('.djToggleSwitch')
  152. if (switch_) switch_.textContent = self.textContent;
  153. });
  154. });
  155. djDebug.querySelector('#djHideToolBarButton').addEventListener('click', function(event) {
  156. event.preventDefault();
  157. djdt.hide_toolbar(true);
  158. });
  159. djDebug.querySelector('#djShowToolBarButton').addEventListener('click', function(event) {
  160. event.preventDefault();
  161. if (!djdt.handleDragged) {
  162. djdt.show_toolbar();
  163. }
  164. });
  165. var startPageY, baseY;
  166. var handle = document.querySelector('#djDebugToolbarHandle');
  167. var onHandleMove = function(event) {
  168. // Chrome can send spurious mousemove events, so don't do anything unless the
  169. // cursor really moved. Otherwise, it will be impossible to expand the toolbar
  170. // due to djdt.handleDragged being set to true.
  171. if (djdt.handleDragged || event.pageY != startPageY) {
  172. var top = baseY + event.pageY;
  173. if (top < 0) {
  174. top = 0;
  175. } else if (top + handle.offsetHeight > window.innerHeight) {
  176. top = window.innerHeight - handle.offsetHeight;
  177. }
  178. handle.style.top = top + 'px';
  179. djdt.handleDragged = true;
  180. }
  181. };
  182. djDebug.querySelector('#djShowToolBarButton').addEventListener('mousedown', function(event) {
  183. event.preventDefault();
  184. startPageY = event.pageY;
  185. baseY = handle.offsetTop - startPageY;
  186. document.addEventListener('mousemove', onHandleMove);
  187. });
  188. document.addEventListener('mouseup', function (event) {
  189. document.removeEventListener('mousemove', onHandleMove);
  190. if (djdt.handleDragged) {
  191. event.preventDefault();
  192. djdt.cookie.set('djdttop', handle.offsetTop, {
  193. path: '/',
  194. expires: 10
  195. });
  196. setTimeout(function () {
  197. djdt.handleDragged = false;
  198. }, 10);
  199. }
  200. });
  201. if (djdt.cookie.get('djdt') == 'hide') {
  202. djdt.hide_toolbar(false);
  203. } else {
  204. djdt.show_toolbar();
  205. }
  206. djdt.isReady = true;
  207. djdt.events.ready.forEach(function(callback) {
  208. callback(djdt);
  209. });
  210. },
  211. hide_panels: function() {
  212. $$.hide(djDebug.querySelector('#djDebugWindow'));
  213. djDebug.querySelectorAll('.djdt-panelContent').forEach(function(e) {
  214. $$.hide(e);
  215. });
  216. djDebug.querySelectorAll('#djDebugToolbar li').forEach(function(e) {
  217. e.classList.remove('djdt-active');
  218. });
  219. },
  220. hide_toolbar: function(setCookie) {
  221. djdt.hide_panels();
  222. $$.hide(djDebug.querySelector('#djDebugToolbar'));
  223. var handle = document.querySelector('#djDebugToolbarHandle');
  224. $$.show(handle);
  225. // set handle position
  226. var handleTop = djdt.cookie.get('djdttop');
  227. if (handleTop) {
  228. handleTop = Math.min(handleTop, window.innerHeight - handle.offsetHeight);
  229. handle.style.top = handleTop + 'px';
  230. }
  231. document.removeEventListener('keydown', onKeyDown);
  232. if (setCookie) {
  233. djdt.cookie.set('djdt', 'hide', {
  234. path: '/',
  235. expires: 10
  236. });
  237. }
  238. },
  239. hide_one_level: function(skipDebugWindow) {
  240. if ($$.visible(djDebug.querySelector('#djDebugWindow'))) {
  241. $$.hide(djDebug.querySelector('#djDebugWindow'));
  242. } else if (djDebug.querySelector('#djDebugToolbar li.djdt-active')) {
  243. djdt.hide_panels();
  244. } else {
  245. djdt.hide_toolbar(true);
  246. }
  247. },
  248. show_toolbar: function() {
  249. document.addEventListener('keydown', onKeyDown);
  250. $$.hide(djDebug.querySelector('#djDebugToolbarHandle'));
  251. $$.show(djDebug.querySelector('#djDebugToolbar'));
  252. djdt.cookie.set('djdt', 'show', {
  253. path: '/',
  254. expires: 10
  255. });
  256. },
  257. ready: function(callback){
  258. if (djdt.isReady) {
  259. callback(djdt);
  260. } else {
  261. djdt.events.ready.push(callback);
  262. }
  263. },
  264. cookie: {
  265. get: function(key){
  266. if (document.cookie.indexOf(key) === -1) return null;
  267. var cookieArray = document.cookie.split('; '),
  268. cookies = {};
  269. cookieArray.forEach(function(e){
  270. var parts = e.split('=');
  271. cookies[ parts[0] ] = parts[1];
  272. });
  273. return cookies[ key ];
  274. },
  275. set: function(key, value, options){
  276. options = options || {};
  277. if (typeof options.expires === 'number') {
  278. var days = options.expires, t = options.expires = new Date();
  279. t.setDate(t.getDate() + days);
  280. }
  281. document.cookie = [
  282. encodeURIComponent(key) + '=' + String(value),
  283. options.expires ? '; expires=' + options.expires.toUTCString() : '',
  284. options.path ? '; path=' + options.path : '',
  285. options.domain ? '; domain=' + options.domain : '',
  286. options.secure ? '; secure' : ''
  287. ].join('');
  288. return value;
  289. }
  290. },
  291. applyStyle: function(name) {
  292. var selector = '#djDebug [data-' + name + ']';
  293. document.querySelectorAll(selector).forEach(function(element) {
  294. element.style[name] = element.getAttribute('data-' + name);
  295. });
  296. }
  297. };
  298. window.djdt = {
  299. show_toolbar: djdt.show_toolbar,
  300. hide_toolbar: djdt.hide_toolbar,
  301. close: djdt.hide_one_level,
  302. cookie: djdt.cookie,
  303. applyStyle: djdt.applyStyle
  304. };
  305. document.addEventListener('DOMContentLoaded', djdt.init);
  306. })();