From 0c761c48fce31de196b171dd28bbf33b24141d83 Mon Sep 17 00:00:00 2001 From: Jon Dufresne Date: Sun, 27 Sep 2020 09:31:17 -0700 Subject: [PATCH] Move history panel specific JavaScript to its own file Like the timer panel, the JavaScript that only applies to the history panel should be contained within its own JavaScript module. This avoids loading the history event handler unnecessarily. The utility functions $$ and ajax have been moved to a utils.js es6 module so they can be imported by the main toolbar.js file as well as in panel specific scripts. The new utils.js module also helps move Django Debug Toolbar's JavaScript files to a more modularized approached. --- .eslintrc.json | 3 +- debug_toolbar/panels/history/panel.py | 7 ++ .../static/debug_toolbar/js/history.js | 44 +++++++ .../static/debug_toolbar/js/toolbar.js | 112 +----------------- .../static/debug_toolbar/js/utils.js | 69 +++++++++++ 5 files changed, 123 insertions(+), 112 deletions(-) create mode 100644 debug_toolbar/static/debug_toolbar/js/history.js create mode 100644 debug_toolbar/static/debug_toolbar/js/utils.js diff --git a/.eslintrc.json b/.eslintrc.json index bc8e41752..8a2452b7a 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -5,7 +5,8 @@ }, "extends": "eslint:recommended", "parserOptions": { - "ecmaVersion": 6 + "ecmaVersion": 6, + "sourceType": "module" }, "rules": { "curly": ["error", "all"], diff --git a/debug_toolbar/panels/history/panel.py b/debug_toolbar/panels/history/panel.py index 082a14f70..64c985b84 100644 --- a/debug_toolbar/panels/history/panel.py +++ b/debug_toolbar/panels/history/panel.py @@ -5,6 +5,7 @@ from django.conf import settings from django.http.request import RawPostDataException from django.template.loader import render_to_string +from django.templatetags.static import static from django.urls import path from django.utils import timezone from django.utils.translation import gettext_lazy as _ @@ -94,3 +95,9 @@ def content(self): ), }, ) + + @property + def scripts(self): + scripts = super().scripts + scripts.append(static("debug_toolbar/js/history.js")) + return scripts diff --git a/debug_toolbar/static/debug_toolbar/js/history.js b/debug_toolbar/static/debug_toolbar/js/history.js new file mode 100644 index 000000000..7764ed0a1 --- /dev/null +++ b/debug_toolbar/static/debug_toolbar/js/history.js @@ -0,0 +1,44 @@ +import { $$, ajaxForm } from "./utils.js"; + +const djDebug = document.getElementById("djDebug"); + +$$.on(djDebug, "click", ".switchHistory", function (event) { + event.preventDefault(); + const newStoreId = this.dataset.storeId; + const tbody = this.closest("tbody"); + + tbody + .querySelector(".djdt-highlighted") + .classList.remove("djdt-highlighted"); + this.closest("tr").classList.add("djdt-highlighted"); + + ajaxForm(this).then(function (data) { + djDebug.setAttribute("data-store-id", newStoreId); + Object.keys(data).forEach(function (panelId) { + if (djDebug.querySelector("#" + panelId)) { + djDebug.querySelector("#" + panelId).outerHTML = + data[panelId].content; + djDebug.querySelector("#djdt-" + panelId).outerHTML = + data[panelId].button; + } + }); + }); +}); + +$$.on(djDebug, "click", ".refreshHistory", function (event) { + event.preventDefault(); + const container = djDebug.querySelector("#djdtHistoryRequests"); + ajaxForm(this).then(function (data) { + if (data.requests.constructor === Array) { + data.requests.forEach(function (request) { + if ( + !container.querySelector( + '[data-store-id="' + request.id + '"]' + ) + ) { + container.innerHTML = request.content + container.innerHTML; + } + }); + } + }); +}); diff --git a/debug_toolbar/static/debug_toolbar/js/toolbar.js b/debug_toolbar/static/debug_toolbar/js/toolbar.js index 5e1084848..0ea321be6 100644 --- a/debug_toolbar/static/debug_toolbar/js/toolbar.js +++ b/debug_toolbar/static/debug_toolbar/js/toolbar.js @@ -1,38 +1,4 @@ -const $$ = { - on: function (root, eventName, selector, fn) { - root.addEventListener(eventName, function (event) { - const target = event.target.closest(selector); - if (root.contains(target)) { - fn.call(target, event); - } - }); - }, - show: function (element) { - element.classList.remove("djdt-hidden"); - }, - hide: function (element) { - element.classList.add("djdt-hidden"); - }, - toggle: function (element, value) { - if (value) { - $$.show(element); - } else { - $$.hide(element); - } - }, - visible: function (element) { - element.classList.contains("djdt-hidden"); - }, - executeScripts: function (scripts) { - scripts.forEach(function (script) { - const el = document.createElement("script"); - el.type = "module"; - el.src = script; - el.async = true; - document.head.appendChild(el); - }); - }, -}; +import { $$, ajax } from "./utils.js"; const onKeyDown = function (event) { if (event.keyCode === 27) { @@ -40,38 +6,6 @@ const onKeyDown = function (event) { } }; -const ajax = function (url, init) { - init = Object.assign({ credentials: "same-origin" }, init); - return fetch(url, init).then(function (response) { - if (response.ok) { - return response.json(); - } else { - const win = document.querySelector("#djDebugWindow"); - win.innerHTML = - '
»

' + - response.status + - ": " + - response.statusText + - "

"; - $$.show(win); - return Promise.reject(); - } - }); -}; - -function ajaxForm(element) { - const form = element.closest("form"); - const url = new URL(form.action); - const formData = new FormData(form); - for (const [name, value] of formData.entries()) { - url.searchParams.append(name, value); - } - const ajaxData = { - method: form.method.toUpperCase(), - }; - return ajax(url, ajaxData); -} - const djdt = { handleDragged: false, init: function () { @@ -157,50 +91,6 @@ const djdt = { }); }); - // Used by the history panel - $$.on(djDebug, "click", ".switchHistory", function (event) { - event.preventDefault(); - const newStoreId = this.dataset.storeId; - const tbody = this.closest("tbody"); - - tbody - .querySelector(".djdt-highlighted") - .classList.remove("djdt-highlighted"); - this.closest("tr").classList.add("djdt-highlighted"); - - ajaxForm(this).then(function (data) { - djDebug.setAttribute("data-store-id", newStoreId); - Object.keys(data).forEach(function (panelId) { - if (djDebug.querySelector("#" + panelId)) { - djDebug.querySelector("#" + panelId).outerHTML = - data[panelId].content; - djDebug.querySelector("#djdt-" + panelId).outerHTML = - data[panelId].button; - } - }); - }); - }); - - // Used by the history panel - $$.on(djDebug, "click", ".refreshHistory", function (event) { - event.preventDefault(); - const container = djDebug.querySelector("#djdtHistoryRequests"); - ajaxForm(this).then(function (data) { - if (data.requests.constructor === Array) { - data.requests.forEach(function (request) { - if ( - !container.querySelector( - '[data-store-id="' + request.id + '"]' - ) - ) { - container.innerHTML = - request.content + container.innerHTML; - } - }); - } - }); - }); - // Used by the cache, profiling and SQL panels $$.on(djDebug, "click", "a.djToggleSwitch", function (event) { event.preventDefault(); diff --git a/debug_toolbar/static/debug_toolbar/js/utils.js b/debug_toolbar/static/debug_toolbar/js/utils.js new file mode 100644 index 000000000..b6078d250 --- /dev/null +++ b/debug_toolbar/static/debug_toolbar/js/utils.js @@ -0,0 +1,69 @@ +const $$ = { + on: function (root, eventName, selector, fn) { + root.addEventListener(eventName, function (event) { + const target = event.target.closest(selector); + if (root.contains(target)) { + fn.call(target, event); + } + }); + }, + show: function (element) { + element.classList.remove("djdt-hidden"); + }, + hide: function (element) { + element.classList.add("djdt-hidden"); + }, + toggle: function (element, value) { + if (value) { + $$.show(element); + } else { + $$.hide(element); + } + }, + visible: function (element) { + element.classList.contains("djdt-hidden"); + }, + executeScripts: function (scripts) { + scripts.forEach(function (script) { + const el = document.createElement("script"); + el.type = "module"; + el.src = script; + el.async = true; + document.head.appendChild(el); + }); + }, +}; + +function ajax(url, init) { + init = Object.assign({ credentials: "same-origin" }, init); + return fetch(url, init).then(function (response) { + if (response.ok) { + return response.json(); + } else { + const win = document.querySelector("#djDebugWindow"); + win.innerHTML = + '
»

' + + response.status + + ": " + + response.statusText + + "

"; + $$.show(win); + return Promise.reject(); + } + }); +} + +function ajaxForm(element) { + const form = element.closest("form"); + const url = new URL(form.action); + const formData = new FormData(form); + for (const [name, value] of formData.entries()) { + url.searchParams.append(name, value); + } + const ajaxData = { + method: form.method.toUpperCase(), + }; + return ajax(url, ajaxData); +} + +export { $$, ajax, ajaxForm };