Skip to content

Commit 425464b

Browse files
smattymattysmattymatty
committed
started dropdown
1 parent 5303c87 commit 425464b

27 files changed

+1071
-1059
lines changed

‎BaseApp/__pycache__/constants.cpython-310.pyc

-170 Bytes
Binary file not shown.

‎BaseApp/__pycache__/menus.cpython-310.pyc

-239 Bytes
Binary file not shown.

‎BaseApp/__pycache__/urls.cpython-310.pyc

91 Bytes
Binary file not shown.

‎BaseApp/__pycache__/views.cpython-310.pyc

155 Bytes
Binary file not shown.

‎BaseApp/constants.py

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
LOG_FORMAT = "{time} -- {level} -- {function} -- line {line}\n\t {message}"
2-
32
# colors! upon changing these, run manage.py tailwind_dummy
4-
53
COLORS = [
64
"red",
75
"orange",
@@ -14,16 +12,3 @@
1412
"pink",
1513
"gray",
1614
]
17-
18-
background_colors = [
19-
"bg-zinc-900",
20-
"bg-zinc-950",
21-
"bg-black",
22-
]
23-
24-
background_border_colors = [
25-
'border-zinc-800',
26-
'border-zinc-900',
27-
'border-zinc-950',
28-
'border-black',
29-
]

‎BaseApp/logs/views.log

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -324,3 +324,87 @@
324324
get_tailwind_info
325325
2024-06-05T11:31:25.169598-0400 -- DEBUG -- get_tailwind_info -- line 36
326326
get_tailwind_info
327+
2024-06-07T20:15:45.044639-0400 -- DEBUG -- get_tailwind_info -- line 36
328+
get_tailwind_info
329+
2024-06-07T20:15:50.729433-0400 -- DEBUG -- get_tailwind_info -- line 36
330+
get_tailwind_info
331+
2024-06-07T20:23:29.134077-0400 -- DEBUG -- get_tailwind_info -- line 36
332+
get_tailwind_info
333+
2024-06-07T20:23:50.120638-0400 -- DEBUG -- get_tailwind_info -- line 36
334+
get_tailwind_info
335+
2024-06-07T20:24:04.411523-0400 -- DEBUG -- get_tailwind_info -- line 36
336+
get_tailwind_info
337+
2024-06-07T20:24:08.050985-0400 -- DEBUG -- get_tailwind_info -- line 36
338+
get_tailwind_info
339+
2024-06-07T20:26:17.592213-0400 -- DEBUG -- get_tailwind_info -- line 36
340+
get_tailwind_info
341+
2024-06-07T20:27:43.699410-0400 -- DEBUG -- get_tailwind_info -- line 36
342+
get_tailwind_info
343+
2024-06-07T20:28:24.966116-0400 -- DEBUG -- get_tailwind_info -- line 36
344+
get_tailwind_info
345+
2024-06-07T20:28:34.526351-0400 -- DEBUG -- get_tailwind_info -- line 36
346+
get_tailwind_info
347+
2024-06-07T20:28:57.471986-0400 -- DEBUG -- get_tailwind_info -- line 36
348+
get_tailwind_info
349+
2024-06-07T20:29:08.719246-0400 -- DEBUG -- get_tailwind_info -- line 36
350+
get_tailwind_info
351+
2024-06-07T20:30:04.293335-0400 -- DEBUG -- get_tailwind_info -- line 36
352+
get_tailwind_info
353+
2024-06-07T20:30:07.157745-0400 -- DEBUG -- get_blog_post_list -- line 36
354+
page_number=1, search_query=''
355+
2024-06-07T20:30:13.737801-0400 -- DEBUG -- get_blog_post_list -- line 36
356+
page_number=1, search_query=''
357+
2024-06-07T20:30:16.032629-0400 -- DEBUG -- get_tailwind_info -- line 36
358+
get_tailwind_info
359+
2024-06-07T20:39:17.889965-0400 -- DEBUG -- get_tailwind_info -- line 36
360+
get_tailwind_info
361+
2024-06-07T20:39:54.211508-0400 -- DEBUG -- get_tailwind_info -- line 36
362+
get_tailwind_info
363+
2024-06-07T20:40:27.987731-0400 -- DEBUG -- get_tailwind_info -- line 36
364+
get_tailwind_info
365+
2024-06-07T20:41:03.839138-0400 -- DEBUG -- get_tailwind_info -- line 36
366+
get_tailwind_info
367+
2024-06-07T20:42:49.071815-0400 -- DEBUG -- get_tailwind_info -- line 36
368+
get_tailwind_info
369+
2024-06-07T20:42:52.477735-0400 -- DEBUG -- get_tailwind_info -- line 36
370+
get_tailwind_info
371+
2024-06-07T20:44:56.055853-0400 -- DEBUG -- get_tailwind_info -- line 36
372+
get_tailwind_info
373+
2024-06-07T20:47:14.839733-0400 -- DEBUG -- get_tailwind_info -- line 36
374+
get_tailwind_info
375+
2024-06-07T20:56:56.117351-0400 -- DEBUG -- get_tailwind_info -- line 36
376+
get_tailwind_info
377+
2024-06-07T20:58:14.955140-0400 -- DEBUG -- get_tailwind_info -- line 36
378+
get_tailwind_info
379+
2024-06-07T21:01:59.161825-0400 -- DEBUG -- get_tailwind_info -- line 36
380+
get_tailwind_info
381+
2024-06-07T21:02:40.027872-0400 -- DEBUG -- get_tailwind_info -- line 36
382+
get_tailwind_info
383+
2024-06-07T21:02:45.030837-0400 -- DEBUG -- get_tailwind_info -- line 36
384+
get_tailwind_info
385+
2024-06-07T21:02:46.808379-0400 -- DEBUG -- get_tailwind_info -- line 36
386+
get_tailwind_info
387+
2024-06-07T21:02:48.522416-0400 -- DEBUG -- get_tailwind_info -- line 36
388+
get_tailwind_info
389+
2024-06-07T21:02:59.534546-0400 -- DEBUG -- get_tailwind_info -- line 36
390+
get_tailwind_info
391+
2024-06-07T21:03:13.480718-0400 -- DEBUG -- get_tailwind_info -- line 36
392+
get_tailwind_info
393+
2024-06-07T21:03:21.754928-0400 -- DEBUG -- get_tailwind_info -- line 36
394+
get_tailwind_info
395+
2024-06-07T21:05:07.632948-0400 -- DEBUG -- get_tailwind_info -- line 36
396+
get_tailwind_info
397+
2024-06-07T21:05:11.087349-0400 -- DEBUG -- get_tailwind_info -- line 36
398+
get_tailwind_info
399+
2024-06-07T21:06:19.004565-0400 -- DEBUG -- get_tailwind_info -- line 36
400+
get_tailwind_info
401+
2024-06-09T22:14:13.951529-0400 -- DEBUG -- get_blog_post_list -- line 36
402+
page_number=1, search_query=''
403+
2024-06-09T22:15:07.981748-0400 -- DEBUG -- get_tailwind_info -- line 36
404+
get_tailwind_info
405+
2024-06-09T22:15:12.118588-0400 -- DEBUG -- get_blog_post_list -- line 36
406+
page_number=1, search_query=''
407+
2024-06-10T23:01:34.418171-0400 -- DEBUG -- get_blog_post_list -- line 36
408+
page_number=1, search_query=''
409+
2024-06-11T09:57:51.753697-0400 -- DEBUG -- get_tailwind_info -- line 36
410+
get_tailwind_info

‎BaseApp/management/commands/tailwind_dummy.py

Lines changed: 0 additions & 45 deletions
This file was deleted.

‎BaseApp/menus.py

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,14 @@
11
from django.urls import reverse
22

3-
from .styles import BasicButtonStyle, DerangedButtonStyle, DerangedDropdownStyle, BasicDropdownStyle
4-
53

64
class DropdownNavItem:
75
"""
86
NavItem class representing a single nav item in the nav dropdown
97
"""
108

11-
def __init__(self, name, url,
12-
button_style=BasicButtonStyle,
13-
dropdown_style=BasicDropdownStyle,):
9+
def __init__(self, name, url):
1410
self.name = name
1511
self.url = url
16-
self.button_style: str = button_style.classes
17-
self.dropdown_style: str = dropdown_style.classes
1812

1913
def __str__(self):
2014
return f"{self.name} ({self.url})"

‎BaseApp/static/BaseApp/button_handlers.mjs

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,7 @@ const DEBUG = false;
1111
* 1. Create a button group container element in your HTML with an ID ending in "-button-group".
1212
* 2. Add "button" elements inside the container.
1313
* 3. (Optional) Set `data-active-class` on the container to customize the active class (default is "active").
14-
* 4. (Optional) Set `data-initial-active` on the container to define the initially active button
15-
* (options: "first", "last", "none", or a number for the button index).
14+
* 4. (Optional) Set `data-initial-active` on the container to define the initially active button (options: "first", "last", "none", or a number for the button index).
1615
* 5. (Optional) Add HTMX attributes (e.g., `hx-get`, `hx-target`) to buttons to trigger HTMX requests.
1716
* 6. Call `ToggledButtonGroup.initAll()` to initialize all button groups on the page.
1817
*/
@@ -73,7 +72,9 @@ export class ToggledButtonGroup {
7372
init() {
7473
// ERROR CHECKING
7574
if (!this.buttons.length) {
76-
console.error(`Button group with ID "${this.groupId}" not found.`);
75+
console.error(
76+
`[ToggledButtonGroup Error] Button group with ID "${this.groupId}" has no buttons.`
77+
);
7778
return;
7879
}
7980
// WARNING CHECKING
@@ -175,26 +176,26 @@ export class ToggledButtonGroup {
175176
ToggledButtonGroup.initAll = function (groupFilter = "") {
176177
// Use this to Initialize all button groups
177178
// with an empty string, it will check for all elements with the ID ending in "-button-group"
178-
// given a string as argument, it will only check for elements with the ID ending in "-button-group" and the string
179+
// given a string as argument, it will only check for elements with the ID starting with the string and ending in "-button-group"
179180
// if the string includes spaces, it will split the string and call itself recursively
180181
const initializedGroups = new Set();
181182

182183
const initializeGroup = (groupId) => {
183184
if (initializedGroups.has(groupId)) return; // Skip if already initialized
184185

185-
const group = document.getElementById(`${groupId}-button-group`);
186-
if (!group) {
186+
const groupElement = document.getElementById(`${groupId}-button-group`);
187+
if (!groupElement) {
187188
console.error(
188189
`[ToggledButtonGroup Error] Button group container with ID "${groupId}-button-group" not found.`
189190
);
190191
return;
191192
}
192193

193-
console.log(`Initializing ToggledButtonGroup with ID "${group.id}"`);
194+
console.log(`Initializing ToggledButtonGroup with ID "${groupElement.id}"`);
194195
const config = {
195196
groupId,
196-
activeClass: group.dataset.activeClass || "active",
197-
initialActive: group.dataset.initialActive || "none",
197+
activeClass: groupElement.dataset.activeClass || "active",
198+
initialActive: groupElement.dataset.initialActive || "none",
198199
};
199200
new ToggledButtonGroup(config);
200201
initializedGroups.add(groupId); // Mark as initialized
@@ -209,8 +210,10 @@ ToggledButtonGroup.initAll = function (groupFilter = "") {
209210
}
210211
} else {
211212
// Initialize all groups if no filter is provided
212-
document.querySelectorAll('[id$="-button-group"]').forEach((group) => {
213-
initializeGroup(group.id.replace("-button-group", ""));
214-
});
213+
document
214+
.querySelectorAll('[id$="-button-group"]')
215+
.forEach((groupElement) => {
216+
initializeGroup(groupElement.id.replace("-button-group", ""));
217+
});
215218
}
216219
};

‎BaseApp/static/BaseApp/dropdown_handlers.mjs

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
const DEBUG = false;
2+
3+
/**
4+
* A class to manage dropdown menus where the parent element gets hovered and the dropdown menu appears.
5+
*
6+
* Usage:
7+
* 1. Create a dropdown container element in your HTML with an ID ending in "-dropdown".
8+
* 2. Place your dropdown menu items inside this container as buttons.
9+
* 3. (Optional) Add `data-dropdown-trigger="hover"` to the parent element to trigger the dropdown menu on hover. Else, default is click.
10+
* 4. (Optional) Add `data-active-class` to the dropdown container to customize the active button with tailwind CSS.
11+
* 5. Call `Dropdown.initAll()` to initialize all dropdowns on the page.
12+
* 6. (Optional) Add `data-active-class` to the dropdown container to customize the active button with tailwind CSS.
13+
*/
14+
15+
export class Dropdown {
16+
constructor(config) {
17+
this.dropdownId = config.dropdownId;
18+
this.container = document.getElementById(`${this.dropdownId}-dropdown`);
19+
this.trigger = config.trigger || "click";
20+
this.items = this.container
21+
? this.container.querySelectorAll("button")
22+
: [];
23+
this.activeClass = config.activeClass || "";
24+
}
25+
26+
init() {
27+
// ERROR CHECKING
28+
if (!this.container) {
29+
console.error(
30+
`[Dropdown Error] Dropdown container with ID "${this.dropdownId}-dropdown" not found.`
31+
);
32+
return;
33+
}
34+
35+
if (!this.items.length) {
36+
console.error(
37+
`[Dropdown Error] Dropdown container with ID "${this.dropdownId}-dropdown" has no items.`
38+
);
39+
return;
40+
}
41+
42+
// WARNING CHECKING
43+
if (this.trigger !== "hover" && this.trigger !== "click") {
44+
console.warn(
45+
`[Dropdown Warning] Dropdown trigger "${this.trigger}" is not valid. Using default "click".`
46+
);
47+
this.trigger = "click";
48+
}
49+
50+
if (this.close !== "click" && this.close !== "mouseleave") {
51+
console.warn(
52+
`[Dropdown Warning] Dropdown close "${this.close}" is not valid. Using default "mouseleave".`
53+
);
54+
this.close = "mouseleave";
55+
}
56+
57+
// TRIGGER
58+
if (this.trigger === "hover") {
59+
this.container.addEventListener(
60+
"mouseenter",
61+
this.showDropdown.bind(this)
62+
);
63+
} else {
64+
// default is click
65+
this.container.addEventListener("click", this.showDropdown.bind(this));
66+
}
67+
68+
// CLOSE
69+
if (this.close === "hover") {
70+
this.container.addEventListener(
71+
"mouseleave",
72+
this.hideDropdown.bind(this)
73+
);
74+
}
75+
}
76+
}
77+
78+
Dropdown.initAll = function (dropdownFilter = "") {
79+
// Use this to Initialize all dropdowns
80+
// with an empty string, it will check for all elements with the ID ending in "-dropdown"
81+
// given a string as parameter, it will only look for elements with the ID starting with the string and ending in "-dropdown"
82+
// if the string includes spaces, it will split the string and call itself recursively
83+
const initializedDropdowns = new Set();
84+
85+
const initializeGroup = (dropdownID) => {
86+
if (initializedDropdowns.has(dropdownID)) return; // Skip if already initialized
87+
88+
const dropdownElement = document.getElementById(`${dropdownID}-dropdown`);
89+
if (!dropdownElement) {
90+
console.error(
91+
`[Dropdown Error] Dropdown container with ID "${dropdownID}-dropdown" not found.`
92+
);
93+
return;
94+
}
95+
96+
console.log(`Initializing Dropdown with ID "${dropdownElement.id}"`);
97+
const config = {
98+
dropdownID,
99+
trigger: dropdownElement.dataset.trigger || "click",
100+
activeClass: dropdownElement.dataset.activeClass || "",
101+
};
102+
new Dropdown(config);
103+
initializedDropdowns.add(dropdownID);
104+
};
105+
106+
if (dropdownFilter) {
107+
if (dropdownFilter.includes(" ")) {
108+
const dropdownFilterList = dropdownFilter.split(" ");
109+
dropdownFilterList.forEach(initializeGroup);
110+
} else {
111+
initializeGroup(dropdownFilter);
112+
}
113+
} else {
114+
// Initialize all dropdowns if no filter is provided
115+
document
116+
.querySelectorAll('[id$="-dropdown"]')
117+
.forEach((dropdownElement) => {
118+
initializeGroup(dropdownElement.id.replace("-dropdown", ""));
119+
});
120+
}
121+
};

0 commit comments

Comments
 (0)