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 <mk@feinheit.ch> Co-authored-by: Tim Schilling <schillingt@better-simple.com>
django-commons · Dec 3, 2022 · 00bc368 · 00bc368
1 parent d04b9d1
commit 00bc368
Show file tree

Hide file tree

Showing 10 changed files with 211 additions and 102 deletions.
diff --git 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
@@ -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
@@ -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
@@ -8,6 +8,8 @@ fallbacks
 flamegraph
 flatpages
 frontend
+Hotwire
+htmx
 inlining
 isort
 Jazzband

diff --git 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 <https://htmx.org/>`_ and
+`Turbo <https://turbo.hotwired.dev/>`_ need additional configuration to retain
+the toolbar handle element through page renders. This can be done by
+configuring the :ref:`ROOT_TAG_EXTRA_ATTRS <ROOT_TAG_EXTRA_ATTRS>` to include
+the relevant JavaScript library's attribute.
+
+htmx
+~~~~
+
+The attribute `htmx <https://htmx.org/>`_ uses is
+`hx-preserve <https://htmx.org/attributes/hx-preserve/>`_.
+
+Update your settings to include:
+
+.. code-block:: python
+
+    DEBUG_TOOLBAR_CONFIG = {
+        "ROOT_TAG_EXTRA_ATTRS": "hx-preserve"
+    }
+
+Hotwire Turbo
+~~~~~~~~~~~~~
+
+The attribute `Turbo <https://turbo.hotwired.dev/>`_ uses is
+`data-turbo-permanent <https://turbo.hotwired.dev/reference/attributes>`_
+
+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
@@ -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
@@ -3,25 +3,28 @@
 <html>
   <head>
     <meta http-equiv="content-type" content="text/html; charset=utf-8">
-    <title>Index of Tests</title>
-    <script src="//unpkg.com/htmx.org@1.8.2"></script>
+    <title>Index of Tests (htmx)</title>
+    <script src="//unpkg.com/htmx.org@1.8.4"></script>
   </head>
   <body hx-boost="true">
-    <h1>Index of Tests</h1>
+    <h1>Index of Tests (htmx) - Page {{page_num|default:"1"}}</h1>
+
+    <p>
+      For the debug panel to remain through page navigation, add the setting:
+      <pre>
+DEBUG_TOOLBAR_CONFIG = {
+  "ROOT_TAG_EXTRA_ATTRS": "hx-preserve"
+}
+      </pre>
+    </p>
+
     <ul>
-      <li><a href="/jquery/">jQuery 3.3.1</a></li>
-      <li><a href="/mootools/">MooTools 1.6.0</a></li>
-      <li><a href="/prototype/">Prototype 1.7.3.0</a></li>
+        <li><a href="/admin/">Django Admin</a></li>
+        <li><a href="{% url "htmx" %}">HTMX - Page 1</a></li>
+        <li><a href="{% url "htmx2" %}">HTMX- Page 2</a></li>
     </ul>
-    <p><a href="/admin/">Django Admin</a></p>
-    <script>
-      if (typeof window.htmx !== "undefined") {
-        htmx.on("htmx:afterSettle", function(detail) {
-          if (typeof window.djdt !== "undefined" && detail.target instanceof HTMLBodyElement) {
-            djdt.show_toolbar();
-          }
-        });
-      }
-    </script>
+
+    <a href="{% url "home" %}">Home</a>
+
   </body>
 </html>
diff --git a/example/templates/index.html b/example/templates/index.html
@@ -12,6 +12,8 @@ <h1>Index of Tests</h1>
         <li><a href="/jquery/">jQuery 3.3.1</a></li>
         <li><a href="/mootools/">MooTools 1.6.0</a></li>
         <li><a href="/prototype/">Prototype 1.7.3.0</a></li>
+        <li><a href="/turbo/">Hotwire Turbo</a></li>
+        <li><a href="/htmx/">htmx</a></li>
       </ul>
       <p><a href="/admin/">Django Admin</a></p>
     {% endcache %}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -61,6 +61,7 @@

		WSGI_APPLICATION = "example.wsgi.application"

		DEBUG_TOOLBAR_CONFIG = {"ROOT_TAG_EXTRA_ATTRS": "data-turbo-permanent hx-preserve"}

		# Cache and database

Expand Down