Skip to content

Commit e085f00

Browse files
jdufresnejdufresne
authored
Move history panel specific JavaScript to its own file (#1350)
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.
1 parent 1859ca0 commit e085f00

File tree

5 files changed

+123
-112
lines changed

5 files changed

+123
-112
lines changed

‎.eslintrc.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@
55
},
66
"extends": "eslint:recommended",
77
"parserOptions": {
8-
"ecmaVersion": 6
8+
"ecmaVersion": 6,
9+
"sourceType": "module"
910
},
1011
"rules": {
1112
"curly": ["error", "all"],

‎debug_toolbar/panels/history/panel.py

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
from django.conf import settings
66
from django.http.request import RawPostDataException
77
from django.template.loader import render_to_string
8+
from django.templatetags.static import static
89
from django.urls import path
910
from django.utils import timezone
1011
from django.utils.translation import gettext_lazy as _
@@ -94,3 +95,9 @@ def content(self):
9495
),
9596
},
9697
)
98+
99+
@property
100+
def scripts(self):
101+
scripts = super().scripts
102+
scripts.append(static("debug_toolbar/js/history.js"))
103+
return scripts

‎debug_toolbar/static/debug_toolbar/js/history.js

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import { $$, ajaxForm } from "./utils.js";
2+
3+
const djDebug = document.getElementById("djDebug");
4+
5+
$$.on(djDebug, "click", ".switchHistory", function (event) {
6+
event.preventDefault();
7+
const newStoreId = this.dataset.storeId;
8+
const tbody = this.closest("tbody");
9+
10+
tbody
11+
.querySelector(".djdt-highlighted")
12+
.classList.remove("djdt-highlighted");
13+
this.closest("tr").classList.add("djdt-highlighted");
14+
15+
ajaxForm(this).then(function (data) {
16+
djDebug.setAttribute("data-store-id", newStoreId);
17+
Object.keys(data).forEach(function (panelId) {
18+
if (djDebug.querySelector("#" + panelId)) {
19+
djDebug.querySelector("#" + panelId).outerHTML =
20+
data[panelId].content;
21+
djDebug.querySelector("#djdt-" + panelId).outerHTML =
22+
data[panelId].button;
23+
}
24+
});
25+
});
26+
});
27+
28+
$$.on(djDebug, "click", ".refreshHistory", function (event) {
29+
event.preventDefault();
30+
const container = djDebug.querySelector("#djdtHistoryRequests");
31+
ajaxForm(this).then(function (data) {
32+
if (data.requests.constructor === Array) {
33+
data.requests.forEach(function (request) {
34+
if (
35+
!container.querySelector(
36+
'[data-store-id="' + request.id + '"]'
37+
)
38+
) {
39+
container.innerHTML = request.content + container.innerHTML;
40+
}
41+
});
42+
}
43+
});
44+
});

‎debug_toolbar/static/debug_toolbar/js/toolbar.js

Lines changed: 1 addition & 111 deletions
Original file line numberDiff line numberDiff line change
@@ -1,77 +1,11 @@
1-
const $$ = {
2-
on: function (root, eventName, selector, fn) {
3-
root.addEventListener(eventName, function (event) {
4-
const target = event.target.closest(selector);
5-
if (root.contains(target)) {
6-
fn.call(target, event);
7-
}
8-
});
9-
},
10-
show: function (element) {
11-
element.classList.remove("djdt-hidden");
12-
},
13-
hide: function (element) {
14-
element.classList.add("djdt-hidden");
15-
},
16-
toggle: function (element, value) {
17-
if (value) {
18-
$$.show(element);
19-
} else {
20-
$$.hide(element);
21-
}
22-
},
23-
visible: function (element) {
24-
element.classList.contains("djdt-hidden");
25-
},
26-
executeScripts: function (scripts) {
27-
scripts.forEach(function (script) {
28-
const el = document.createElement("script");
29-
el.type = "module";
30-
el.src = script;
31-
el.async = true;
32-
document.head.appendChild(el);
33-
});
34-
},
35-
};
1+
import { $$, ajax } from "./utils.js";
362

373
const onKeyDown = function (event) {
384
if (event.keyCode === 27) {
395
djdt.hide_one_level();
406
}
417
};
428

43-
const ajax = function (url, init) {
44-
init = Object.assign({ credentials: "same-origin" }, init);
45-
return fetch(url, init).then(function (response) {
46-
if (response.ok) {
47-
return response.json();
48-
} else {
49-
const win = document.querySelector("#djDebugWindow");
50-
win.innerHTML =
51-
'<div class="djDebugPanelTitle"><a class="djDebugClose" href="">»</a><h3>' +
52-
response.status +
53-
": " +
54-
response.statusText +
55-
"</h3></div>";
56-
$$.show(win);
57-
return Promise.reject();
58-
}
59-
});
60-
};
61-
62-
function ajaxForm(element) {
63-
const form = element.closest("form");
64-
const url = new URL(form.action);
65-
const formData = new FormData(form);
66-
for (const [name, value] of formData.entries()) {
67-
url.searchParams.append(name, value);
68-
}
69-
const ajaxData = {
70-
method: form.method.toUpperCase(),
71-
};
72-
return ajax(url, ajaxData);
73-
}
74-
759
const djdt = {
7610
handleDragged: false,
7711
init: function () {
@@ -158,50 +92,6 @@ const djdt = {
15892
});
15993
});
16094

161-
// Used by the history panel
162-
$$.on(djDebug, "click", ".switchHistory", function (event) {
163-
event.preventDefault();
164-
const newStoreId = this.dataset.storeId;
165-
const tbody = this.closest("tbody");
166-
167-
tbody
168-
.querySelector(".djdt-highlighted")
169-
.classList.remove("djdt-highlighted");
170-
this.closest("tr").classList.add("djdt-highlighted");
171-
172-
ajaxForm(this).then(function (data) {
173-
djDebug.setAttribute("data-store-id", newStoreId);
174-
Object.keys(data).forEach(function (panelId) {
175-
if (djDebug.querySelector("#" + panelId)) {
176-
djDebug.querySelector("#" + panelId).outerHTML =
177-
data[panelId].content;
178-
djDebug.querySelector("#djdt-" + panelId).outerHTML =
179-
data[panelId].button;
180-
}
181-
});
182-
});
183-
});
184-
185-
// Used by the history panel
186-
$$.on(djDebug, "click", ".refreshHistory", function (event) {
187-
event.preventDefault();
188-
const container = djDebug.querySelector("#djdtHistoryRequests");
189-
ajaxForm(this).then(function (data) {
190-
if (data.requests.constructor === Array) {
191-
data.requests.forEach(function (request) {
192-
if (
193-
!container.querySelector(
194-
'[data-store-id="' + request.id + '"]'
195-
)
196-
) {
197-
container.innerHTML =
198-
request.content + container.innerHTML;
199-
}
200-
});
201-
}
202-
});
203-
});
204-
20595
// Used by the cache, profiling and SQL panels
20696
$$.on(djDebug, "click", "a.djToggleSwitch", function (event) {
20797
event.preventDefault();

‎debug_toolbar/static/debug_toolbar/js/utils.js

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
const $$ = {
2+
on: function (root, eventName, selector, fn) {
3+
root.addEventListener(eventName, function (event) {
4+
const target = event.target.closest(selector);
5+
if (root.contains(target)) {
6+
fn.call(target, event);
7+
}
8+
});
9+
},
10+
show: function (element) {
11+
element.classList.remove("djdt-hidden");
12+
},
13+
hide: function (element) {
14+
element.classList.add("djdt-hidden");
15+
},
16+
toggle: function (element, value) {
17+
if (value) {
18+
$$.show(element);
19+
} else {
20+
$$.hide(element);
21+
}
22+
},
23+
visible: function (element) {
24+
element.classList.contains("djdt-hidden");
25+
},
26+
executeScripts: function (scripts) {
27+
scripts.forEach(function (script) {
28+
const el = document.createElement("script");
29+
el.type = "module";
30+
el.src = script;
31+
el.async = true;
32+
document.head.appendChild(el);
33+
});
34+
},
35+
};
36+
37+
function ajax(url, init) {
38+
init = Object.assign({ credentials: "same-origin" }, init);
39+
return fetch(url, init).then(function (response) {
40+
if (response.ok) {
41+
return response.json();
42+
} else {
43+
const win = document.querySelector("#djDebugWindow");
44+
win.innerHTML =
45+
'<div class="djDebugPanelTitle"><a class="djDebugClose" href="">»</a><h3>' +
46+
response.status +
47+
": " +
48+
response.statusText +
49+
"</h3></div>";
50+
$$.show(win);
51+
return Promise.reject();
52+
}
53+
});
54+
}
55+
56+
function ajaxForm(element) {
57+
const form = element.closest("form");
58+
const url = new URL(form.action);
59+
const formData = new FormData(form);
60+
for (const [name, value] of formData.entries()) {
61+
url.searchParams.append(name, value);
62+
}
63+
const ajaxData = {
64+
method: form.method.toUpperCase(),
65+
};
66+
return ajax(url, ajaxData);
67+
}
68+
69+
export { $$, ajax, ajaxForm };

0 commit comments

Comments
 (0)