Skip to content

Commit 1e511e0

Browse files
xixi
committed
port most code
Note: removes animations
1 parent c78e474 commit 1e511e0

File tree

1 file changed

+92
-62
lines changed

1 file changed

+92
-62
lines changed

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

+92-62
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,30 @@
88
}
99
});
1010
},
11+
show: function(element) {
12+
element.style.display = 'block';
13+
},
14+
hide: function(element) {
15+
element.style.display = 'none';
16+
},
17+
toggle: function(element, value) {
18+
if (value) {
19+
$$.show(element);
20+
} else {
21+
$$.hide(element);
22+
}
23+
},
24+
visible: function(element) {
25+
style = getComputedStyle(element);
26+
return style.display !== 'none';
27+
},
28+
executeScripts: function(root) {
29+
root.querySelectorAll('script').forEach(function(e) {
30+
var clone = document.createElement('script');
31+
clone.src = e.src;
32+
root.appendChild(clone);
33+
});
34+
},
1135
};
1236

1337
var onKeyDown = function(event) {
@@ -24,38 +48,40 @@
2448
isReady: false,
2549
init: function() {
2650
var djDebug = document.querySelector('#djDebug');
27-
djDebug.classList.remove('djdt-hidden');
51+
$$.show(djDebug);
2852
$$.on(djDebug.querySelector('#djDebugPanelList'), 'click', 'li a', function(event) {
2953
event.preventDefault();
3054
if (!this.className) {
3155
return;
3256
}
33-
var current = $('#djDebug #' + this.className);
34-
if (current.is(':visible')) {
57+
var current = djDebug.querySelector('#' + this.className);
58+
if ($$.visible(current)) {
3559
djdt.hide_panels();
3660
} else {
3761
djdt.hide_panels();
3862

39-
current.show();
40-
$(this).parent().addClass('djdt-active');
63+
$$.show(current);
64+
this.parentElement.classList.add('djdt-active');
4165

42-
var inner = current.find('.djDebugPanelContent .djdt-scroll'),
43-
store_id = $('#djDebug').data('store-id');
44-
if (store_id && inner.children().length === 0) {
66+
var inner = current.querySelector('.djDebugPanelContent .djdt-scroll'),
67+
store_id = djDebug.getAttribute('data-store-id');
68+
if (store_id && inner.children.length === 0) {
4569
var ajax_data = {
4670
data: {
4771
store_id: store_id,
4872
panel_id: this.className
4973
},
5074
type: 'GET',
51-
url: $('#djDebug').data('render-panel-url')
75+
url: djDebug.getAttribute('data-render-panel-url')
5276
};
5377
$.ajax(ajax_data).done(function(data){
54-
inner.prev().remove(); // Remove AJAX loader
55-
inner.html(data);
78+
inner.previousElementSibling.remove(); // Remove AJAX loader
79+
inner.innerHTML = body;
80+
$$.executeScripts(inner);
5681
}).fail(function(xhr){
57-
var message = '<div class="djDebugPanelTitle"><a class="djDebugClose djDebugBack" href=""></a><h3>'+xhr.status+': '+xhr.statusText+'</h3></div>';
58-
$('#djDebugWindow').html(message).show();
82+
var win = document.querySelector('#djDebugWindow');
83+
win.innerHTML = '<div class="djDebugPanelTitle"><a class="djDebugClose djDebugBack" href=""></a><h3>'+xhr.status+': '+xhr.statusText+'</h3></div>';
84+
$$.show(win);
5985
});
6086
}
6187
}
@@ -65,7 +91,7 @@
6591
djdt.hide_one_level();
6692
});
6793
$$.on(djDebug, 'click', '.djDebugPanelButton input[type=checkbox]', function() {
68-
djdt.cookie.set($(this).attr('data-cookie'), $(this).prop('checked') ? 'on' : 'off', {
94+
djdt.cookie.set(this.getAttribute('data-cookie'), this.checked ? 'on' : 'off', {
6995
path: '/',
7096
expires: 10
7197
});
@@ -75,56 +101,62 @@
75101
$$.on(djDebug, 'click', '.remoteCall', function(event) {
76102
event.preventDefault();
77103

78-
var self = $(this);
79-
var name = self[0].tagName.toLowerCase();
104+
var name = this.tagName.toLowerCase();
80105
var ajax_data = {};
81106

82107
if (name == 'button') {
83-
var form = self.parents('form:eq(0)');
84-
ajax_data.url = self.attr('formaction');
108+
var form = this.closest('form');
109+
ajax_data.url = this.getAttribute('formaction');
85110

86-
if (form.length) {
87-
ajax_data.data = form.serialize();
88-
ajax_data.type = form.attr('method') || 'POST';
111+
if (form) {
112+
ajax_data.data = $(form).serialize();
113+
ajax_data.method = form.getAttribute('method') || 'POST';
89114
}
90115
}
91116

92117
if (name == 'a') {
93-
ajax_data.url = self.attr('href');
118+
ajax_data.url = this.getAttribute('href');
94119
}
95120

96121
$.ajax(ajax_data).done(function(data){
97-
$('#djDebugWindow').html(data).show();
122+
var win = djDebug.querySelector('#djDebugWindow');
123+
win.innerHTML = body;
124+
$$.executeScripts(win);
98125
}).fail(function(xhr){
99-
var message = '<div class="djDebugPanelTitle"><a class="djDebugClose djDebugBack" href=""></a><h3>'+xhr.status+': '+xhr.statusText+'</h3></div>';
100-
$('#djDebugWindow').html(message).show();
126+
var win = document.querySelector('#djDebugWindow');
127+
win.innerHTML = '<div class="djDebugPanelTitle"><a class="djDebugClose djDebugBack" href=""></a><h3>'+xhr.status+': '+xhr.statusText+'</h3></div>';
128+
$$.show(win);
101129
});
102130
});
103131

104132
// Used by the cache, profiling and SQL panels
105133
$$.on(djDebug, 'click', 'a.djToggleSwitch', function(event) {
106134
event.preventDefault();
107-
var btn = $(this);
108-
var id = btn.attr('data-toggle-id');
109-
var open_me = btn.text() == btn.attr('data-toggle-open');
135+
var self = this;
136+
var id = this.getAttribute('data-toggle-id');
137+
var open_me = this.textContent == this.getAttribute('data-toggle-open');
110138
if (id === '' || !id) {
111139
return;
112140
}
113-
var name = btn.attr('data-toggle-name');
114-
btn.parents('.djDebugPanelContent').find('#' + name + '_' + id).find('.djDebugCollapsed').toggle(open_me);
115-
btn.parents('.djDebugPanelContent').find('#' + name + '_' + id).find('.djDebugUncollapsed').toggle(!open_me);
116-
$(this).parents('.djDebugPanelContent').find('.djToggleDetails_' + id).each(function(){
117-
var $this = $(this);
141+
var name = this.getAttribute('data-toggle-name');
142+
var container = this.closest('.djDebugPanelContent').querySelector('#' + name + '_' + id);
143+
container.querySelectorAll('.djDebugCollapsed').forEach(function(e) {
144+
$$.toggle(e, open_me);
145+
});
146+
container.querySelectorAll('.djDebugUncollapsed').forEach(function(e) {
147+
$$.toggle(e, !open_me);
148+
});
149+
this.closest('.djDebugPanelContent').querySelectorAll('.djToggleDetails_' + id).forEach(function(e) {
118150
if (open_me) {
119-
$this.addClass('djSelected');
120-
$this.removeClass('djUnselected');
121-
btn.text(btn.attr('data-toggle-close'));
122-
$this.find('.djToggleSwitch').text(btn.text());
151+
e.classList.add('djSelected');
152+
e.classList.remove('djUnselected');
153+
self.textContent = self.getAttribute('data-toggle-close');
154+
e.querySelector('.djToggleSwitch').textContent = self.textContent;
123155
} else {
124-
$this.removeClass('djSelected');
125-
$this.addClass('djUnselected');
126-
btn.text(btn.attr('data-toggle-open'));
127-
$this.find('.djToggleSwitch').text(btn.text());
156+
e.classList.remove('djSelected');
157+
e.classList.add('djUnselected');
158+
self.textContent = self.getAttribute('data-toggle-open');
159+
e.querySelector('.djToggleSwitch').textContent = self.textContent;
128160
}
129161
});
130162
});
@@ -180,32 +212,35 @@
180212
if (djdt.cookie.get('djdt') == 'hide') {
181213
djdt.hide_toolbar(false);
182214
} else {
183-
djdt.show_toolbar(false);
215+
djdt.show_toolbar();
184216
}
185217
djdt.isReady = true;
186-
$.each(djdt.events.ready, function(_, callback){
218+
djdt.events.ready.forEach(function(callback) {
187219
callback(djdt);
188220
});
189221
},
190222
hide_panels: function() {
191-
$('#djDebugWindow').hide();
192-
$('.djdt-panelContent').hide();
193-
$('#djDebugToolbar li').removeClass('djdt-active');
223+
$$.hide(djDebug.querySelector('#djDebugWindow'));
224+
djDebug.querySelectorAll('.djdt-panelContent').forEach(function(e) {
225+
$$.hide(e);
226+
});
227+
djDebug.querySelectorAll('#djDebugToolbar li').forEach(function(e) {
228+
e.classList.remove('djdt-active');
229+
});
194230
},
195231
hide_toolbar: function(setCookie) {
196232
djdt.hide_panels();
197-
$('#djDebugToolbar').hide('fast');
233+
$$.hide(djDebug.querySelector('#djDebugToolbar'));
198234

199235
var handle = document.querySelector('#djDebugToolbarHandle');
200-
$(handle).show();
236+
$$.show(handle);
201237
// set handle position
202238
var handleTop = djdt.cookie.get('djdttop');
203239
if (handleTop) {
204240
handleTop = Math.min(handleTop, window.innerHeight - handle.offsetHeight);
205241
handle.style.top = handleTop + 'px';
206242
}
207243

208-
// Unbind keydown
209244
document.removeEventListener('keydown', onKeyDown);
210245

211246
if (setCookie) {
@@ -215,24 +250,19 @@
215250
});
216251
}
217252
},
218-
hide_one_level: function() {
219-
if ($('#djDebugWindow').is(':visible')) {
220-
$('#djDebugWindow').hide();
221-
} else if ($('.djdt-panelContent').is(':visible')) {
253+
hide_one_level: function(skipDebugWindow) {
254+
if ($$.visible(djDebug.querySelector('#djDebugWindow'))) {
255+
$$.hide(djDebug.querySelector('#djDebugWindow'));
256+
} else if (djDebug.querySelector('#djDebugToolbar li.djdt-active')) {
222257
djdt.hide_panels();
223258
} else {
224259
djdt.hide_toolbar(true);
225260
}
226261
},
227-
show_toolbar: function(animate) {
228-
// Set up keybindings
262+
show_toolbar: function() {
229263
document.addEventListener('keydown', onKeyDown);
230-
$('#djDebugToolbarHandle').hide();
231-
if (animate) {
232-
$('#djDebugToolbar').show('fast');
233-
} else {
234-
$('#djDebugToolbar').show();
235-
}
264+
$$.hide(djDebug.querySelector('#djDebugToolbarHandle'));
265+
$$.show(djDebug.querySelector('#djDebugToolbar'));
236266
djdt.cookie.set('djdt', 'show', {
237267
path: '/',
238268
expires: 10
@@ -292,5 +322,5 @@
292322
cookie: djdt.cookie,
293323
applyStyle: djdt.applyStyle
294324
});
295-
$(document).ready(djdt.init);
325+
document.addEventListener('DOMContentLoaded', djdt.init);
296326
})(djdt.jQuery, djdt);

0 commit comments

Comments
 (0)