forked from jazzband/django-debug-toolbar
-
Notifications
You must be signed in to change notification settings - Fork 0
/
utils.js
138 lines (130 loc) · 4.42 KB
/
utils.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
const $$ = {
on(root, eventName, selector, fn) {
root.removeEventListener(eventName, fn);
root.addEventListener(eventName, function (event) {
const target = event.target.closest(selector);
if (root.contains(target)) {
fn.call(target, event);
}
});
},
onPanelRender(root, panelId, fn) {
/*
This is a helper function to attach a handler for a `djdt.panel.render`
event of a specific panel.
root: The container element that the listener should be attached to.
panelId: The Id of the panel.
fn: A function to execute when the event is triggered.
*/
root.addEventListener("djdt.panel.render", function (event) {
if (event.detail.panelId === panelId) {
fn.call(event);
}
});
},
show(element) {
element.classList.remove("djdt-hidden");
},
hide(element) {
element.classList.add("djdt-hidden");
},
toggle(element, value) {
if (value) {
$$.show(element);
} else {
$$.hide(element);
}
},
visible(element) {
return !element.classList.contains("djdt-hidden");
},
executeScripts(scripts) {
scripts.forEach(function (script) {
const el = document.createElement("script");
el.type = "module";
el.src = script;
el.async = true;
document.head.appendChild(el);
});
},
applyStyles(container) {
/*
* Given a container element, apply styles set via data-djdt-styles attribute.
* The format is data-djdt-styles="styleName1:value;styleName2:value2"
* The style names should use the CSSStyleDeclaration camel cased names.
*/
container
.querySelectorAll("[data-djdt-styles]")
.forEach(function (element) {
const styles = element.dataset.djdtStyles || "";
styles.split(";").forEach(function (styleText) {
const styleKeyPair = styleText.split(":");
if (styleKeyPair.length === 2) {
const name = styleKeyPair[0].trim();
const value = styleKeyPair[1].trim();
element.style[name] = value;
}
});
});
},
};
function ajax(url, init) {
init = Object.assign({ credentials: "same-origin" }, init);
return fetch(url, init)
.then(function (response) {
if (response.ok) {
return response.json();
}
return Promise.reject(
new Error(response.status + ": " + response.statusText)
);
})
.catch(function (error) {
const win = document.getElementById("djDebugWindow");
win.innerHTML =
'<div class="djDebugPanelTitle"><button type="button" class="djDebugClose">»</button><h3>' +
error.message +
"</h3></div>";
$$.show(win);
throw error;
});
}
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);
}
function replaceToolbarState(newStoreId, data) {
const djDebug = document.getElementById("djDebug");
djDebug.setAttribute("data-store-id", newStoreId);
// Check if response is empty, it could be due to an expired storeId.
Object.keys(data).forEach(function (panelId) {
const panel = document.getElementById(panelId);
if (panel) {
panel.outerHTML = data[panelId].content;
document.getElementById("djdt-" + panelId).outerHTML =
data[panelId].button;
}
});
}
function debounce(func, delay) {
let timer = null;
let resolves = [];
return function (...args) {
clearTimeout(timer);
timer = setTimeout(() => {
const result = func(...args);
resolves.forEach((r) => r(result));
resolves = [];
}, delay);
return new Promise((r) => resolves.push(r));
};
}
export { $$, ajax, ajaxForm, replaceToolbarState, debounce };