diff --git a/.eslintrc.json b/.eslintrc.json index bc8e41752..8a2452b7a 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -5,7 +5,8 @@ }, "extends": "eslint:recommended", "parserOptions": { - "ecmaVersion": 6 + "ecmaVersion": 6, + "sourceType": "module" }, "rules": { "curly": ["error", "all"], diff --git a/debug_toolbar/panels/history/panel.py b/debug_toolbar/panels/history/panel.py index 082a14f70..64c985b84 100644 --- a/debug_toolbar/panels/history/panel.py +++ b/debug_toolbar/panels/history/panel.py @@ -5,6 +5,7 @@ from django.conf import settings from django.http.request import RawPostDataException from django.template.loader import render_to_string +from django.templatetags.static import static from django.urls import path from django.utils import timezone from django.utils.translation import gettext_lazy as _ @@ -94,3 +95,9 @@ def content(self): ), }, ) + + @property + def scripts(self): + scripts = super().scripts + scripts.append(static("debug_toolbar/js/history.js")) + return scripts diff --git a/debug_toolbar/static/debug_toolbar/js/history.js b/debug_toolbar/static/debug_toolbar/js/history.js new file mode 100644 index 000000000..7764ed0a1 --- /dev/null +++ b/debug_toolbar/static/debug_toolbar/js/history.js @@ -0,0 +1,44 @@ +import { $$, ajaxForm } from "./utils.js"; + +const djDebug = document.getElementById("djDebug"); + +$$.on(djDebug, "click", ".switchHistory", function (event) { + event.preventDefault(); + const newStoreId = this.dataset.storeId; + const tbody = this.closest("tbody"); + + tbody + .querySelector(".djdt-highlighted") + .classList.remove("djdt-highlighted"); + this.closest("tr").classList.add("djdt-highlighted"); + + ajaxForm(this).then(function (data) { + djDebug.setAttribute("data-store-id", newStoreId); + Object.keys(data).forEach(function (panelId) { + if (djDebug.querySelector("#" + panelId)) { + djDebug.querySelector("#" + panelId).outerHTML = + data[panelId].content; + djDebug.querySelector("#djdt-" + panelId).outerHTML = + data[panelId].button; + } + }); + }); +}); + +$$.on(djDebug, "click", ".refreshHistory", function (event) { + event.preventDefault(); + const container = djDebug.querySelector("#djdtHistoryRequests"); + ajaxForm(this).then(function (data) { + if (data.requests.constructor === Array) { + data.requests.forEach(function (request) { + if ( + !container.querySelector( + '[data-store-id="' + request.id + '"]' + ) + ) { + container.innerHTML = request.content + container.innerHTML; + } + }); + } + }); +}); diff --git a/debug_toolbar/static/debug_toolbar/js/toolbar.js b/debug_toolbar/static/debug_toolbar/js/toolbar.js index 5e1084848..0ea321be6 100644 --- a/debug_toolbar/static/debug_toolbar/js/toolbar.js +++ b/debug_toolbar/static/debug_toolbar/js/toolbar.js @@ -1,38 +1,4 @@ -const $$ = { - on: function (root, eventName, selector, fn) { - root.addEventListener(eventName, function (event) { - const target = event.target.closest(selector); - if (root.contains(target)) { - fn.call(target, event); - } - }); - }, - show: function (element) { - element.classList.remove("djdt-hidden"); - }, - hide: function (element) { - element.classList.add("djdt-hidden"); - }, - toggle: function (element, value) { - if (value) { - $$.show(element); - } else { - $$.hide(element); - } - }, - visible: function (element) { - element.classList.contains("djdt-hidden"); - }, - executeScripts: function (scripts) { - scripts.forEach(function (script) { - const el = document.createElement("script"); - el.type = "module"; - el.src = script; - el.async = true; - document.head.appendChild(el); - }); - }, -}; +import { $$, ajax } from "./utils.js"; const onKeyDown = function (event) { if (event.keyCode === 27) { @@ -40,38 +6,6 @@ const onKeyDown = function (event) { } }; -const ajax = function (url, init) { - init = Object.assign({ credentials: "same-origin" }, init); - return fetch(url, init).then(function (response) { - if (response.ok) { - return response.json(); - } else { - const win = document.querySelector("#djDebugWindow"); - win.innerHTML = - '
»

' + - response.status + - ": " + - response.statusText + - "

"; - $$.show(win); - return Promise.reject(); - } - }); -}; - -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); -} - const djdt = { handleDragged: false, init: function () { @@ -157,50 +91,6 @@ const djdt = { }); }); - // Used by the history panel - $$.on(djDebug, "click", ".switchHistory", function (event) { - event.preventDefault(); - const newStoreId = this.dataset.storeId; - const tbody = this.closest("tbody"); - - tbody - .querySelector(".djdt-highlighted") - .classList.remove("djdt-highlighted"); - this.closest("tr").classList.add("djdt-highlighted"); - - ajaxForm(this).then(function (data) { - djDebug.setAttribute("data-store-id", newStoreId); - Object.keys(data).forEach(function (panelId) { - if (djDebug.querySelector("#" + panelId)) { - djDebug.querySelector("#" + panelId).outerHTML = - data[panelId].content; - djDebug.querySelector("#djdt-" + panelId).outerHTML = - data[panelId].button; - } - }); - }); - }); - - // Used by the history panel - $$.on(djDebug, "click", ".refreshHistory", function (event) { - event.preventDefault(); - const container = djDebug.querySelector("#djdtHistoryRequests"); - ajaxForm(this).then(function (data) { - if (data.requests.constructor === Array) { - data.requests.forEach(function (request) { - if ( - !container.querySelector( - '[data-store-id="' + request.id + '"]' - ) - ) { - container.innerHTML = - request.content + container.innerHTML; - } - }); - } - }); - }); - // Used by the cache, profiling and SQL panels $$.on(djDebug, "click", "a.djToggleSwitch", function (event) { event.preventDefault(); diff --git a/debug_toolbar/static/debug_toolbar/js/utils.js b/debug_toolbar/static/debug_toolbar/js/utils.js new file mode 100644 index 000000000..b6078d250 --- /dev/null +++ b/debug_toolbar/static/debug_toolbar/js/utils.js @@ -0,0 +1,69 @@ +const $$ = { + on: function (root, eventName, selector, fn) { + root.addEventListener(eventName, function (event) { + const target = event.target.closest(selector); + if (root.contains(target)) { + fn.call(target, event); + } + }); + }, + show: function (element) { + element.classList.remove("djdt-hidden"); + }, + hide: function (element) { + element.classList.add("djdt-hidden"); + }, + toggle: function (element, value) { + if (value) { + $$.show(element); + } else { + $$.hide(element); + } + }, + visible: function (element) { + element.classList.contains("djdt-hidden"); + }, + executeScripts: function (scripts) { + scripts.forEach(function (script) { + const el = document.createElement("script"); + el.type = "module"; + el.src = script; + el.async = true; + document.head.appendChild(el); + }); + }, +}; + +function ajax(url, init) { + init = Object.assign({ credentials: "same-origin" }, init); + return fetch(url, init).then(function (response) { + if (response.ok) { + return response.json(); + } else { + const win = document.querySelector("#djDebugWindow"); + win.innerHTML = + '
»

' + + response.status + + ": " + + response.statusText + + "

"; + $$.show(win); + return Promise.reject(); + } + }); +} + +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); +} + +export { $$, ajax, ajaxForm };