From 00bc368050058906315ab8d07cc4247164be4ef7 Mon Sep 17 00:00:00 2001
From: Stephen Mitchell
Date: Wed, 9 Nov 2022 08:57:25 -0500
Subject: [PATCH] Attach handlers to djdebug instead of document
Adds example page for turbo
Add a few additional links for the tips on htmx and Turbo.
Providing the links to the libraries' documentation may eventually
go stale, but it should help the developer understand what's actually
happening.
Co-authored-by: Matthias Kestenholz
Co-authored-by: Tim Schilling
---
.github/workflows/test.yml | 9 +-
.../static/debug_toolbar/js/toolbar.js | 143 ++++++++----------
docs/configuration.rst | 2 +
docs/spelling_wordlist.txt | 2 +
docs/tips.rst | 38 +++++
example/settings.py | 1 +
example/templates/htmx/boost.html | 35 +++--
example/templates/index.html | 2 +
example/templates/turbo/index.html | 56 +++++++
example/urls.py | 25 ++-
10 files changed, 211 insertions(+), 102 deletions(-)
create mode 100644 example/templates/turbo/index.html
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index 09e7036af..a15d59279 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -51,11 +51,6 @@ jobs:
restore-keys: |
${{ matrix.python-version }}-v1-
- - name: Install enchant (only for docs)
- run: |
- sudo apt-get -qq update
- sudo apt-get -y install enchant
-
- name: Install dependencies
run: |
python -m pip install --upgrade pip
@@ -122,10 +117,10 @@ jobs:
restore-keys: |
${{ matrix.python-version }}-v1-
- - name: Install enchant (only for docs) and gdal-bin (for postgis)
+ - name: Install gdal-bin (for postgis)
run: |
sudo apt-get -qq update
- sudo apt-get -y install enchant gdal-bin
+ sudo apt-get -y install gdal-bin
- name: Install dependencies
run: |
diff --git a/debug_toolbar/static/debug_toolbar/js/toolbar.js b/debug_toolbar/static/debug_toolbar/js/toolbar.js
index 0f62be894..ef2e617f9 100644
--- a/debug_toolbar/static/debug_toolbar/js/toolbar.js
+++ b/debug_toolbar/static/debug_toolbar/js/toolbar.js
@@ -18,65 +18,60 @@ function getDebugElement() {
const djdt = {
handleDragged: false,
init() {
- $$.on(
- document.body,
- "click",
- "#djDebugPanelList li a",
- function (event) {
- event.preventDefault();
- if (!this.className) {
- return;
- }
- const panelId = this.className;
- const current = document.getElementById(panelId);
- if ($$.visible(current)) {
- djdt.hidePanels();
- } else {
- djdt.hidePanels();
+ const djDebug = getDebugElement();
+ $$.on(djDebug, "click", "#djDebugPanelList li a", function (event) {
+ event.preventDefault();
+ if (!this.className) {
+ return;
+ }
+ const panelId = this.className;
+ const current = document.getElementById(panelId);
+ if ($$.visible(current)) {
+ djdt.hidePanels();
+ } else {
+ djdt.hidePanels();
- $$.show(current);
- this.parentElement.classList.add("djdt-active");
+ $$.show(current);
+ this.parentElement.classList.add("djdt-active");
- const djDebug = getDebugElement();
- const inner = current.querySelector(
- ".djDebugPanelContent .djdt-scroll"
- ),
- storeId = djDebug.dataset.storeId;
- if (storeId && inner.children.length === 0) {
- const url = new URL(
- djDebug.dataset.renderPanelUrl,
- window.location
- );
- url.searchParams.append("store_id", storeId);
- url.searchParams.append("panel_id", panelId);
- ajax(url).then(function (data) {
- inner.previousElementSibling.remove(); // Remove AJAX loader
- inner.innerHTML = data.content;
- $$.executeScripts(data.scripts);
- $$.applyStyles(inner);
- djDebug.dispatchEvent(
- new CustomEvent("djdt.panel.render", {
- detail: { panelId: panelId },
- })
- );
- });
- } else {
+ const inner = current.querySelector(
+ ".djDebugPanelContent .djdt-scroll"
+ ),
+ storeId = djDebug.dataset.storeId;
+ if (storeId && inner.children.length === 0) {
+ const url = new URL(
+ djDebug.dataset.renderPanelUrl,
+ window.location
+ );
+ url.searchParams.append("store_id", storeId);
+ url.searchParams.append("panel_id", panelId);
+ ajax(url).then(function (data) {
+ inner.previousElementSibling.remove(); // Remove AJAX loader
+ inner.innerHTML = data.content;
+ $$.executeScripts(data.scripts);
+ $$.applyStyles(inner);
djDebug.dispatchEvent(
new CustomEvent("djdt.panel.render", {
detail: { panelId: panelId },
})
);
- }
+ });
+ } else {
+ djDebug.dispatchEvent(
+ new CustomEvent("djdt.panel.render", {
+ detail: { panelId: panelId },
+ })
+ );
}
}
- );
- $$.on(document.body, "click", "#djDebug .djDebugClose", function () {
+ });
+ $$.on(djDebug, "click", ".djDebugClose", function () {
djdt.hideOneLevel();
});
$$.on(
- document.body,
+ djDebug,
"click",
- "#djDebug .djDebugPanelButton input[type=checkbox]",
+ ".djDebugPanelButton input[type=checkbox]",
function () {
djdt.cookie.set(
this.dataset.cookie,
@@ -90,7 +85,7 @@ const djdt = {
);
// Used by the SQL and template panels
- $$.on(document.body, "click", "#djDebug .remoteCall", function (event) {
+ $$.on(djDebug, "click", ".remoteCall", function (event) {
event.preventDefault();
let url;
@@ -113,7 +108,7 @@ const djdt = {
});
// Used by the cache, profiling and SQL panels
- $$.on(document.body, "click", "#djDebug .djToggleSwitch", function () {
+ $$.on(djDebug, "click", ".djToggleSwitch", function () {
const id = this.dataset.toggleId;
const toggleOpen = "+";
const toggleClose = "-";
@@ -150,12 +145,12 @@ const djdt = {
});
});
- $$.on(document.body, "click", "#djHideToolBarButton", function (event) {
+ $$.on(djDebug, "click", "#djHideToolBarButton", function (event) {
event.preventDefault();
djdt.hideToolbar();
});
- $$.on(document.body, "click", "#djShowToolBarButton", function () {
+ $$.on(djDebug, "click", "#djShowToolBarButton", function () {
if (!djdt.handleDragged) {
djdt.showToolbar();
}
@@ -179,35 +174,29 @@ const djdt = {
djdt.handleDragged = true;
}
}
- $$.on(
- document.body,
- "mousedown",
- "#djShowToolBarButton",
- function (event) {
- event.preventDefault();
- startPageY = event.pageY;
- baseY = handle.offsetTop - startPageY;
- document.addEventListener("mousemove", onHandleMove);
+ $$.on(djDebug, "mousedown", "#djShowToolBarButton", function (event) {
+ event.preventDefault();
+ startPageY = event.pageY;
+ baseY = handle.offsetTop - startPageY;
+ document.addEventListener("mousemove", onHandleMove);
- document.addEventListener(
- "mouseup",
- function (event) {
- document.removeEventListener("mousemove", onHandleMove);
- if (djdt.handleDragged) {
- event.preventDefault();
- localStorage.setItem("djdt.top", handle.offsetTop);
- requestAnimationFrame(function () {
- djdt.handleDragged = false;
- });
- djdt.ensureHandleVisibility();
- }
- },
- { once: true }
- );
- }
- );
+ document.addEventListener(
+ "mouseup",
+ function (event) {
+ document.removeEventListener("mousemove", onHandleMove);
+ if (djdt.handleDragged) {
+ event.preventDefault();
+ localStorage.setItem("djdt.top", handle.offsetTop);
+ requestAnimationFrame(function () {
+ djdt.handleDragged = false;
+ });
+ djdt.ensureHandleVisibility();
+ }
+ },
+ { once: true }
+ );
+ });
- const djDebug = getDebugElement();
// Make sure the debug element is rendered at least once.
// showToolbar will continue to show it in the future if the
// entire DOM is reloaded.
diff --git a/docs/configuration.rst b/docs/configuration.rst
index 2e20c454c..7949ae501 100644
--- a/docs/configuration.rst
+++ b/docs/configuration.rst
@@ -98,6 +98,8 @@ Toolbar options
The toolbar keeps up to this many results in memory.
+.. _ROOT_TAG_EXTRA_ATTRS:
+
* ``ROOT_TAG_EXTRA_ATTRS``
Default: ``''``
diff --git a/docs/spelling_wordlist.txt b/docs/spelling_wordlist.txt
index 5e3a7f64b..5103a6466 100644
--- a/docs/spelling_wordlist.txt
+++ b/docs/spelling_wordlist.txt
@@ -8,6 +8,8 @@ fallbacks
flamegraph
flatpages
frontend
+Hotwire
+htmx
inlining
isort
Jazzband
diff --git a/docs/tips.rst b/docs/tips.rst
index d5d160fb3..c79d12523 100644
--- a/docs/tips.rst
+++ b/docs/tips.rst
@@ -20,6 +20,44 @@ Browsers have become more aggressive with caching static assets, such as
JavaScript and CSS files. Check your browser's development console, and if
you see errors, try a hard browser refresh or clearing your cache.
+Working with htmx and Turbo
+----------------------------
+
+Libraries such as `htmx `_ and
+`Turbo `_ need additional configuration to retain
+the toolbar handle element through page renders. This can be done by
+configuring the :ref:`ROOT_TAG_EXTRA_ATTRS ` to include
+the relevant JavaScript library's attribute.
+
+htmx
+~~~~
+
+The attribute `htmx `_ uses is
+`hx-preserve `_.
+
+Update your settings to include:
+
+.. code-block:: python
+
+ DEBUG_TOOLBAR_CONFIG = {
+ "ROOT_TAG_EXTRA_ATTRS": "hx-preserve"
+ }
+
+Hotwire Turbo
+~~~~~~~~~~~~~
+
+The attribute `Turbo `_ uses is
+`data-turbo-permanent `_
+
+Update your settings to include:
+
+.. code-block:: python
+
+ DEBUG_TOOLBAR_CONFIG = {
+ "ROOT_TAG_EXTRA_ATTRS": "data-turbo-permanent"
+ }
+
+
Performance considerations
--------------------------
diff --git a/example/settings.py b/example/settings.py
index 1b8216b71..d2bd57387 100644
--- a/example/settings.py
+++ b/example/settings.py
@@ -61,6 +61,7 @@
WSGI_APPLICATION = "example.wsgi.application"
+DEBUG_TOOLBAR_CONFIG = {"ROOT_TAG_EXTRA_ATTRS": "data-turbo-permanent hx-preserve"}
# Cache and database
diff --git a/example/templates/htmx/boost.html b/example/templates/htmx/boost.html
index f6c2c9749..782303b4e 100644
--- a/example/templates/htmx/boost.html
+++ b/example/templates/htmx/boost.html
@@ -3,25 +3,28 @@
- Index of Tests
-
+ Index of Tests (htmx)
+
- Index of Tests
+ Index of Tests (htmx) - Page {{page_num|default:"1"}}
+
+
+ For the debug panel to remain through page navigation, add the setting:
+
+DEBUG_TOOLBAR_CONFIG = {
+ "ROOT_TAG_EXTRA_ATTRS": "hx-preserve"
+}
+
+
+
- Django Admin
-
+
+ Home
+
diff --git a/example/templates/index.html b/example/templates/index.html
index fad2fc4ae..382bfb0e9 100644
--- a/example/templates/index.html
+++ b/example/templates/index.html
@@ -12,6 +12,8 @@ Index of Tests
jQuery 3.3.1
MooTools 1.6.0
Prototype 1.7.3.0
+ Hotwire Turbo
+ htmx
Django Admin
{% endcache %}
diff --git a/example/templates/turbo/index.html b/example/templates/turbo/index.html
new file mode 100644
index 000000000..143054e37
--- /dev/null
+++ b/example/templates/turbo/index.html
@@ -0,0 +1,56 @@
+{% load cache %}
+
+
+
+
+ Index of Tests
+
+
+
+ Turbo Index - Page {{page_num|default:"1"}}
+
+
+ For the debug panel to remain through page navigation, add the setting:
+
+DEBUG_TOOLBAR_CONFIG = {
+ "ROOT_TAG_EXTRA_ATTRS": "data-turbo-permanent"
+}
+
+
+
+
+
+ Value
+ {{ request.session.value|default:0 }}
+
+
+
+
+ Home
+
+
diff --git a/example/urls.py b/example/urls.py
index d609035df..da52601f8 100644
--- a/example/urls.py
+++ b/example/urls.py
@@ -5,11 +5,32 @@
from example.views import increment
urlpatterns = [
- path("", TemplateView.as_view(template_name="index.html")),
+ path("", TemplateView.as_view(template_name="index.html"), name="home"),
path("jquery/", TemplateView.as_view(template_name="jquery/index.html")),
path("mootools/", TemplateView.as_view(template_name="mootools/index.html")),
path("prototype/", TemplateView.as_view(template_name="prototype/index.html")),
- path("htmx/boost/", TemplateView.as_view(template_name="htmx/boost.html")),
+ path(
+ "htmx/boost/",
+ TemplateView.as_view(template_name="htmx/boost.html"),
+ name="htmx",
+ ),
+ path(
+ "htmx/boost/2",
+ TemplateView.as_view(
+ template_name="htmx/boost.html", extra_context={"page_num": "2"}
+ ),
+ name="htmx2",
+ ),
+ path(
+ "turbo/", TemplateView.as_view(template_name="turbo/index.html"), name="turbo"
+ ),
+ path(
+ "turbo/2",
+ TemplateView.as_view(
+ template_name="turbo/index.html", extra_context={"page_num": "2"}
+ ),
+ name="turbo2",
+ ),
path("admin/", admin.site.urls),
path("ajax/increment", increment, name="ajax_increment"),
path("__debug__/", include("debug_toolbar.urls")),