Skip to content

Commit 9b20825

Browse files
matthiaskdr-rompecabezas
matthiask
authored and
dr-rompecabezas
committed
Prefer arrow functions
The way how they do not override the value of 'this' makes implementing handlers and callbacks so nuch nicer.
1 parent 9535aac commit 9b20825

File tree

4 files changed

+59
-67
lines changed

4 files changed

+59
-67
lines changed

‎biome.json

-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@
1212
"rules": {
1313
"recommended": true,
1414
"complexity": {
15-
"useArrowFunction": "off",
1615
"noForEach": "off"
1716
},
1817
"suspicious": {

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

+11-13
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ function difference(setA, setB) {
1515
*/
1616
function pluckData(nodes, key) {
1717
const data = [];
18-
nodes.forEach(function (obj) {
18+
nodes.forEach((obj) => {
1919
data.push(obj.dataset[key]);
2020
});
2121
return data;
@@ -29,18 +29,16 @@ function refreshHistory() {
2929
);
3030

3131
ajaxForm(formTarget)
32-
.then(function (data) {
32+
.then((data) => {
3333
// Remove existing rows first then re-populate with new data
34-
container
35-
.querySelectorAll("tr[data-store-id]")
36-
.forEach(function (node) {
37-
node.remove();
38-
});
39-
data.requests.forEach(function (request) {
34+
container.querySelectorAll("tr[data-store-id]").forEach((node) => {
35+
node.remove();
36+
});
37+
data.requests.forEach((request) => {
4038
container.innerHTML = request.content + container.innerHTML;
4139
});
4240
})
43-
.then(function () {
41+
.then(() => {
4442
const allIds = new Set(
4543
pluckData(
4644
container.querySelectorAll("tr[data-store-id]"),
@@ -55,8 +53,8 @@ function refreshHistory() {
5553
lastRequestId,
5654
};
5755
})
58-
.then(function (refreshInfo) {
59-
refreshInfo.newIds.forEach(function (newId) {
56+
.then((refreshInfo) => {
57+
refreshInfo.newIds.forEach((newId) => {
6058
const row = container.querySelector(
6159
`tr[data-store-id="${newId}"]`
6260
);
@@ -84,7 +82,7 @@ function switchHistory(newStoreId) {
8482
}
8583
formTarget.closest("tr").classList.add("djdt-highlighted");
8684

87-
ajaxForm(formTarget).then(function (data) {
85+
ajaxForm(formTarget).then((data) => {
8886
if (Object.keys(data).length === 0) {
8987
const container = document.getElementById("djdtHistoryRequests");
9088
container.querySelector(
@@ -100,7 +98,7 @@ $$.on(djDebug, "click", ".switchHistory", function (event) {
10098
switchHistory(this.dataset.storeId);
10199
});
102100

103-
$$.on(djDebug, "click", ".refreshHistory", function (event) {
101+
$$.on(djDebug, "click", ".refreshHistory", (event) => {
104102
event.preventDefault();
105103
refreshHistory();
106104
});

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

+24-29
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ const djdt = {
4747
);
4848
url.searchParams.append("store_id", storeId);
4949
url.searchParams.append("panel_id", panelId);
50-
ajax(url).then(function (data) {
50+
ajax(url).then((data) => {
5151
inner.previousElementSibling.remove(); // Remove AJAX loader
5252
inner.innerHTML = data.content;
5353
$$.executeScripts(data.scripts);
@@ -67,7 +67,7 @@ const djdt = {
6767
}
6868
}
6969
});
70-
$$.on(djDebug, "click", ".djDebugClose", function () {
70+
$$.on(djDebug, "click", ".djDebugClose", () => {
7171
djdt.hideOneLevel();
7272
});
7373
$$.on(
@@ -102,7 +102,7 @@ const djdt = {
102102
url = this.href;
103103
}
104104

105-
ajax(url, ajaxData).then(function (data) {
105+
ajax(url, ajaxData).then((data) => {
106106
const win = document.getElementById("djDebugWindow");
107107
win.innerHTML = data.content;
108108
$$.show(win);
@@ -117,42 +117,37 @@ const djdt = {
117117
const openMe = this.textContent === toggleOpen;
118118
const name = this.dataset.toggleName;
119119
const container = document.getElementById(`${name}_${id}`);
120-
container
121-
.querySelectorAll(".djDebugCollapsed")
122-
.forEach(function (e) {
123-
$$.toggle(e, openMe);
124-
});
125-
container
126-
.querySelectorAll(".djDebugUncollapsed")
127-
.forEach(function (e) {
128-
$$.toggle(e, !openMe);
129-
});
130-
const self = this;
120+
container.querySelectorAll(".djDebugCollapsed").forEach((e) => {
121+
$$.toggle(e, openMe);
122+
});
123+
container.querySelectorAll(".djDebugUncollapsed").forEach((e) => {
124+
$$.toggle(e, !openMe);
125+
});
131126
this.closest(".djDebugPanelContent")
132127
.querySelectorAll(`.djToggleDetails_${id}`)
133-
.forEach(function (e) {
128+
.forEach((e) => {
134129
if (openMe) {
135130
e.classList.add("djSelected");
136131
e.classList.remove("djUnselected");
137-
self.textContent = toggleClose;
132+
this.textContent = toggleClose;
138133
} else {
139134
e.classList.remove("djSelected");
140135
e.classList.add("djUnselected");
141-
self.textContent = toggleOpen;
136+
this.textContent = toggleOpen;
142137
}
143138
const switch_ = e.querySelector(".djToggleSwitch");
144139
if (switch_) {
145-
switch_.textContent = self.textContent;
140+
switch_.textContent = this.textContent;
146141
}
147142
});
148143
});
149144

150-
$$.on(djDebug, "click", "#djHideToolBarButton", function (event) {
145+
$$.on(djDebug, "click", "#djHideToolBarButton", (event) => {
151146
event.preventDefault();
152147
djdt.hideToolbar();
153148
});
154149

155-
$$.on(djDebug, "click", "#djShowToolBarButton", function () {
150+
$$.on(djDebug, "click", "#djShowToolBarButton", () => {
156151
if (!djdt.handleDragged) {
157152
djdt.showToolbar();
158153
}
@@ -177,20 +172,20 @@ const djdt = {
177172
djdt.handleDragged = true;
178173
}
179174
}
180-
$$.on(djDebug, "mousedown", "#djShowToolBarButton", function (event) {
175+
$$.on(djDebug, "mousedown", "#djShowToolBarButton", (event) => {
181176
event.preventDefault();
182177
startPageY = event.pageY;
183178
baseY = handle.offsetTop - startPageY;
184179
document.addEventListener("mousemove", onHandleMove);
185180

186181
document.addEventListener(
187182
"mouseup",
188-
function (event) {
183+
(event) => {
189184
document.removeEventListener("mousemove", onHandleMove);
190185
if (djdt.handleDragged) {
191186
event.preventDefault();
192187
localStorage.setItem("djdt.top", handle.offsetTop);
193-
requestAnimationFrame(function () {
188+
requestAnimationFrame(() => {
194189
djdt.handleDragged = false;
195190
});
196191
djdt.ensureHandleVisibility();
@@ -221,7 +216,7 @@ const djdt = {
221216
djDebug.setAttribute("data-theme", userTheme);
222217
}
223218
// Adds the listener to the Theme Toggle Button
224-
$$.on(djDebug, "click", "#djToggleThemeButton", function () {
219+
$$.on(djDebug, "click", "#djToggleThemeButton", () => {
225220
switch (djDebug.getAttribute("data-theme")) {
226221
case "auto":
227222
djDebug.setAttribute("data-theme", "light");
@@ -241,10 +236,10 @@ const djdt = {
241236
hidePanels() {
242237
const djDebug = getDebugElement();
243238
$$.hide(document.getElementById("djDebugWindow"));
244-
djDebug.querySelectorAll(".djdt-panelContent").forEach(function (e) {
239+
djDebug.querySelectorAll(".djdt-panelContent").forEach((e) => {
245240
$$.hide(e);
246241
});
247-
document.querySelectorAll("#djDebugToolbar li").forEach(function (e) {
242+
document.querySelectorAll("#djDebugToolbar li").forEach((e) => {
248243
e.classList.remove("djdt-active");
249244
});
250245
},
@@ -299,7 +294,7 @@ const djdt = {
299294
function handleAjaxResponse(storeId) {
300295
const encodedStoreId = encodeURIComponent(storeId);
301296
const dest = `${sidebarUrl}?store_id=${encodedStoreId}`;
302-
slowjax(dest).then(function (data) {
297+
slowjax(dest).then((data) => {
303298
if (djdt.needUpdateOnFetch) {
304299
replaceToolbarState(encodedStoreId, data);
305300
}
@@ -325,7 +320,7 @@ const djdt = {
325320
const origFetch = window.fetch;
326321
window.fetch = function (...args) {
327322
const promise = origFetch.apply(this, args);
328-
promise.then(function (response) {
323+
promise.then((response) => {
329324
if (response.headers.get("djdt-store-id") !== null) {
330325
handleAjaxResponse(response.headers.get("djdt-store-id"));
331326
}
@@ -345,7 +340,7 @@ const djdt = {
345340
const cookieArray = document.cookie.split("; ");
346341
const cookies = {};
347342

348-
cookieArray.forEach(function (e) {
343+
cookieArray.forEach((e) => {
349344
const parts = e.split("=");
350345
cookies[parts[0]] = parts[1];
351346
});

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

+24-24
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
const $$ = {
22
on(root, eventName, selector, fn) {
33
root.removeEventListener(eventName, fn);
4-
root.addEventListener(eventName, function (event) {
4+
root.addEventListener(eventName, (event) => {
55
const target = event.target.closest(selector);
66
if (root.contains(target)) {
77
fn.call(target, event);
@@ -17,7 +17,7 @@ const $$ = {
1717
panelId: The Id of the panel.
1818
fn: A function to execute when the event is triggered.
1919
*/
20-
root.addEventListener("djdt.panel.render", function (event) {
20+
root.addEventListener("djdt.panel.render", (event) => {
2121
if (event.detail.panelId === panelId) {
2222
fn.call(event);
2323
}
@@ -40,7 +40,7 @@ const $$ = {
4040
return !element.classList.contains("djdt-hidden");
4141
},
4242
executeScripts(scripts) {
43-
scripts.forEach(function (script) {
43+
scripts.forEach((script) => {
4444
const el = document.createElement("script");
4545
el.type = "module";
4646
el.src = script;
@@ -54,39 +54,39 @@ const $$ = {
5454
* The format is data-djdt-styles="styleName1:value;styleName2:value2"
5555
* The style names should use the CSSStyleDeclaration camel cased names.
5656
*/
57-
container
58-
.querySelectorAll("[data-djdt-styles]")
59-
.forEach(function (element) {
60-
const styles = element.dataset.djdtStyles || "";
61-
styles.split(";").forEach(function (styleText) {
62-
const styleKeyPair = styleText.split(":");
63-
if (styleKeyPair.length === 2) {
64-
const name = styleKeyPair[0].trim();
65-
const value = styleKeyPair[1].trim();
66-
element.style[name] = value;
67-
}
68-
});
57+
container.querySelectorAll("[data-djdt-styles]").forEach((element) => {
58+
const styles = element.dataset.djdtStyles || "";
59+
styles.split(";").forEach((styleText) => {
60+
const styleKeyPair = styleText.split(":");
61+
if (styleKeyPair.length === 2) {
62+
const name = styleKeyPair[0].trim();
63+
const value = styleKeyPair[1].trim();
64+
element.style[name] = value;
65+
}
6966
});
67+
});
7068
},
7169
};
7270

7371
function ajax(url, init) {
7472
return fetch(url, Object.assign({ credentials: "same-origin" }, init))
75-
.then(function (response) {
73+
.then((response) => {
7674
if (response.ok) {
77-
return response.json().catch(function (error) {
78-
return Promise.reject(
79-
new Error(
80-
`The response is a invalid Json object : ${error}`
75+
return response
76+
.json()
77+
.catch((error) =>
78+
Promise.reject(
79+
new Error(
80+
`The response is a invalid Json object : ${error}`
81+
)
8182
)
8283
);
83-
});
8484
}
8585
return Promise.reject(
8686
new Error(`${response.status}: ${response.statusText}`)
8787
);
8888
})
89-
.catch(function (error) {
89+
.catch((error) => {
9090
const win = document.getElementById("djDebugWindow");
9191
win.innerHTML = `<div class="djDebugPanelTitle"><button type="button" class="djDebugClose">»</button><h3>${error.message}</h3></div>`;
9292
$$.show(win);
@@ -111,7 +111,7 @@ function replaceToolbarState(newStoreId, data) {
111111
const djDebug = document.getElementById("djDebug");
112112
djDebug.setAttribute("data-store-id", newStoreId);
113113
// Check if response is empty, it could be due to an expired storeId.
114-
Object.keys(data).forEach(function (panelId) {
114+
Object.keys(data).forEach((panelId) => {
115115
const panel = document.getElementById(panelId);
116116
if (panel) {
117117
panel.outerHTML = data[panelId].content;
@@ -125,7 +125,7 @@ function debounce(func, delay) {
125125
let timer = null;
126126
let resolves = [];
127127

128-
return function (...args) {
128+
return (...args) => {
129129
clearTimeout(timer);
130130
timer = setTimeout(() => {
131131
const result = func(...args);

0 commit comments

Comments
 (0)