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 };