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 = - '