Skip to content

Commit b5eab55

Browse files
matthiaskmatthiask
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 c30490f commit b5eab55

File tree

4 files changed

+59
-67
lines changed

4 files changed

+59
-67
lines changed

‎biome.json‎

Lines changed: 0 additions & 1 deletion
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‎

Lines changed: 11 additions & 13 deletions
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‎

Lines changed: 24 additions & 29 deletions
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‎

Lines changed: 24 additions & 24 deletions
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)