diff --git a/column_toggle/static/column_toggle/column_toggle.js b/column_toggle/static/column_toggle/column_toggle.js index fe7d08f..434da3c 100644 --- a/column_toggle/static/column_toggle/column_toggle.js +++ b/column_toggle/static/column_toggle/column_toggle.js @@ -21,9 +21,14 @@ document.addEventListener("DOMContentLoaded", function () { field: field, }; }); + + // Create the container for the checkboxes const container = document.createElement("div"); container.classList.add("column-toggle-container"); + // Initially hide the checkboxes container + container.style.display = "none"; + const shouldShowAllColumns = !defaultSelectedColumns || defaultSelectedColumns.length === 0; @@ -46,6 +51,15 @@ document.addEventListener("DOMContentLoaded", function () { container.appendChild(label); }); + // Find the toggle link in the HTML + const toggleLink = document.getElementById("toggle-columns-link"); + if (toggleLink) { + toggleLink.addEventListener("click", (event) => { + event.preventDefault(); + container.style.display = container.style.display === "none" ? "flex" : "none"; + }); + } + const actionsContainer = document.querySelector("div.actions"); if (actionsContainer) { actionsContainer.parentNode.insertBefore( @@ -83,4 +97,7 @@ document.addEventListener("DOMContentLoaded", function () { } localStorage.setItem(storageKey, JSON.stringify(storedSelectedColumns)); } + + // Call createColumnToggle with default parameters for testing + createColumnToggle([], 'column-toggle-storage'); }); diff --git a/column_toggle/templates/column_toggle/change_list.html b/column_toggle/templates/column_toggle/change_list.html index b98c9f5..a521e3b 100644 --- a/column_toggle/templates/column_toggle/change_list.html +++ b/column_toggle/templates/column_toggle/change_list.html @@ -1,6 +1,12 @@ {% extends "admin/change_list.html" %} +{% load i18n %} {% block extrahead %} {{ block.super }} {{ column_toggle_html }} {% endblock %} + +{% block object-tools-items %} +