Skip to content

Commit 5303c87

Browse files
smattymattysmattymatty
committed
htmx integration on togglebuttongroup documentation
1 parent 2055339 commit 5303c87

File tree

8 files changed

+571
-57
lines changed

8 files changed

+571
-57
lines changed

‎BaseApp/logs/views.log

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -248,3 +248,79 @@
248248
get_tailwind_info
249249
2024-06-04T00:27:06.353560-0400 -- DEBUG -- get_tailwind_info -- line 36
250250
get_tailwind_info
251+
2024-06-04T00:40:53.314938-0400 -- DEBUG -- get_tailwind_info -- line 36
252+
get_tailwind_info
253+
2024-06-04T00:40:58.691068-0400 -- DEBUG -- get_tailwind_info -- line 36
254+
get_tailwind_info
255+
2024-06-04T00:40:59.721042-0400 -- DEBUG -- get_tailwind_info -- line 36
256+
get_tailwind_info
257+
2024-06-04T00:41:08.790962-0400 -- DEBUG -- get_tailwind_info -- line 36
258+
get_tailwind_info
259+
2024-06-04T00:47:35.359649-0400 -- DEBUG -- get_blog_post_list -- line 36
260+
page_number=1, search_query=''
261+
2024-06-04T00:47:40.530058-0400 -- DEBUG -- get_tailwind_info -- line 36
262+
get_tailwind_info
263+
2024-06-04T00:48:24.858295-0400 -- DEBUG -- get_tailwind_info -- line 36
264+
get_tailwind_info
265+
2024-06-04T12:15:17.615242-0400 -- DEBUG -- get_tailwind_info -- line 36
266+
get_tailwind_info
267+
2024-06-04T12:15:19.820413-0400 -- DEBUG -- get_tailwind_info -- line 36
268+
get_tailwind_info
269+
2024-06-04T12:15:24.089581-0400 -- DEBUG -- get_tailwind_info -- line 36
270+
get_tailwind_info
271+
2024-06-04T12:15:25.521331-0400 -- DEBUG -- get_tailwind_info -- line 36
272+
get_tailwind_info
273+
2024-06-04T12:15:26.353311-0400 -- DEBUG -- get_tailwind_info -- line 36
274+
get_tailwind_info
275+
2024-06-04T12:15:27.242341-0400 -- DEBUG -- get_tailwind_info -- line 36
276+
get_tailwind_info
277+
2024-06-04T12:15:28.057647-0400 -- DEBUG -- get_tailwind_info -- line 36
278+
get_tailwind_info
279+
2024-06-04T12:15:28.778247-0400 -- DEBUG -- get_tailwind_info -- line 36
280+
get_tailwind_info
281+
2024-06-04T12:15:29.478114-0400 -- DEBUG -- get_tailwind_info -- line 36
282+
get_tailwind_info
283+
2024-06-04T12:15:30.145626-0400 -- DEBUG -- get_tailwind_info -- line 36
284+
get_tailwind_info
285+
2024-06-04T12:15:31.991282-0400 -- DEBUG -- get_tailwind_info -- line 36
286+
get_tailwind_info
287+
2024-06-04T12:15:36.083455-0400 -- DEBUG -- get_tailwind_info -- line 36
288+
get_tailwind_info
289+
2024-06-04T12:15:37.523018-0400 -- DEBUG -- get_tailwind_info -- line 36
290+
get_tailwind_info
291+
2024-06-04T12:15:38.195455-0400 -- DEBUG -- get_tailwind_info -- line 36
292+
get_tailwind_info
293+
2024-06-04T12:15:38.870910-0400 -- DEBUG -- get_tailwind_info -- line 36
294+
get_tailwind_info
295+
2024-06-04T12:21:03.020965-0400 -- DEBUG -- get_tailwind_info -- line 36
296+
get_tailwind_info
297+
2024-06-04T12:21:04.167208-0400 -- DEBUG -- get_tailwind_info -- line 36
298+
get_tailwind_info
299+
2024-06-04T12:21:05.372096-0400 -- DEBUG -- get_tailwind_info -- line 36
300+
get_tailwind_info
301+
2024-06-04T12:21:09.148760-0400 -- DEBUG -- get_tailwind_info -- line 36
302+
get_tailwind_info
303+
2024-06-04T12:21:31.082769-0400 -- DEBUG -- get_blog_post_list -- line 36
304+
page_number=1, search_query=''
305+
2024-06-04T12:22:22.029920-0400 -- DEBUG -- get_tailwind_info -- line 36
306+
get_tailwind_info
307+
2024-06-04T12:22:26.082494-0400 -- DEBUG -- get_tailwind_info -- line 36
308+
get_tailwind_info
309+
2024-06-04T12:22:46.171857-0400 -- DEBUG -- get_tailwind_info -- line 36
310+
get_tailwind_info
311+
2024-06-04T22:49:40.815984-0400 -- DEBUG -- get_tailwind_info -- line 36
312+
get_tailwind_info
313+
2024-06-04T22:49:52.487895-0400 -- DEBUG -- get_tailwind_info -- line 36
314+
get_tailwind_info
315+
2024-06-04T22:49:55.797817-0400 -- DEBUG -- get_tailwind_info -- line 36
316+
get_tailwind_info
317+
2024-06-04T22:49:58.338365-0400 -- DEBUG -- get_tailwind_info -- line 36
318+
get_tailwind_info
319+
2024-06-05T11:29:54.012962-0400 -- DEBUG -- get_tailwind_info -- line 36
320+
get_tailwind_info
321+
2024-06-05T11:30:56.822426-0400 -- DEBUG -- get_tailwind_info -- line 36
322+
get_tailwind_info
323+
2024-06-05T11:31:23.635641-0400 -- DEBUG -- get_tailwind_info -- line 36
324+
get_tailwind_info
325+
2024-06-05T11:31:25.169598-0400 -- DEBUG -- get_tailwind_info -- line 36
326+
get_tailwind_info

‎BaseApp/static/BaseApp/htmx_handlers.mjs

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -21,13 +21,12 @@ export class HtmxHandler {
2121
console.log(`Triggering HTMX request for button ${this.button.id}`);
2222
console.log(`HTMX attributes: ${JSON.stringify(this.htmxAttributes)}`);
2323
}
24-
24+
const hasValidRequestAttribute =
25+
this.htmxAttributes["hx-get"] ||
26+
this.htmxAttributes["hx-post"] ||
27+
this.htmxAttributes["hx-boost"];
2528
// ERROR CHECKING
26-
if (
27-
!this.button ||
28-
!this.htmxAttributes ||
29-
!this.htmxAttributes["hx-get"]
30-
) {
29+
if (!this.button || !this.htmxAttributes || !hasValidRequestAttribute) {
3130
console.error(
3231
`Error: Button ${
3332
this.button ? this.button.id : "unknown"

‎BaseApp/templates/BaseApp/ui_elements/partials/button_example_1.html

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<div class="flex flex-col space-y-2 border border-y-4 border-white/10 rounded-lg p-4 bg-slate-900/50">
2+
<h4 class="text-lg font-bold text-center">
3+
Responsive Row/Column of Buttons, toggled active, uniform size, initial first, dark theme
4+
</h4>
5+
<div id="example-button-group"
6+
data-active-class="bg-black/50 hover:bg-black/50 font-bold text-white border-b-4 border-white/20"
7+
data-initial-active="first"
8+
class="flex flex-col md:flex-row gap-2 justify-center">
9+
<button class="flex-grow w-full text-base lg:text-lg px-4 md:px-8 py-4 border-x border-white/10 rounded-md transition-all duration-100 ease-linear bg-black/20 hover:bg-black/30">
10+
Button
11+
</button>
12+
<button class="flex-grow w-full text-base lg:text-lg px-4 md:px-8 py-4 border-x border-white/10 rounded-md transition-all duration-100 ease-linear bg-black/20 hover:bg-black/30">
13+
Button
14+
</button>
15+
<button class="flex-grow w-full text-base lg:text-lg px-4 md:px-8 py-4 border-x border-white/10 rounded-md transition-all duration-100 ease-linear bg-black/20 hover:bg-black/30">
16+
Button
17+
</button>
18+
<button class="flex-grow w-full text-base lg:text-lg px-4 md:px-8 py-4 border-x border-white/10 rounded-md transition-all duration-100 ease-linear bg-black/20 hover:bg-black/30">
19+
Button
20+
</button>
21+
<button class="flex-grow w-full text-base lg:text-lg px-4 md:px-8 py-4 border-x border-white/10 rounded-md transition-all duration-100 ease-linear bg-black/20 hover:bg-black/30">
22+
Button
23+
</button>
24+
</div>
25+
</div>

‎BaseApp/templates/BaseApp/ui_elements/partials/button_example_2.html

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<div class="flex flex-col space-y-2 border border-y-4 border-black/10 rounded-lg p-4 bg-slate-200/100">
2+
<h4 class="text-lg font-bold text-center text-black/70">
3+
Responsive Buttons, toggled active, various sizes, initial random, light theme
4+
</h4>
5+
<div id="example2-button-group"
6+
data-active-class="bg-white hover:bg-white font-bold text-black border-b-4 border-black/60"
7+
data-initial-active="random"
8+
class="flex flex-wrap gap-2 justify-center transition-all duration-300 ease-linear">
9+
<button class="flex-grow w-1/3 text-black/70 text-base lg:text-lg px-4 md:px-8 py-4 border-x border-black/50 rounded-md transition-all duration-100 ease-linear bg-black/20 hover:bg-black/30">
10+
Button
11+
</button>
12+
<button class="flex-1 w-1/6 text-black/70 text-base lg:text-lg px-4 md:px-8 py-4 border-x border-black/50 rounded-md transition-all duration-100 ease-linear bg-black/20 hover:bg-black/30">
13+
Button
14+
</button>
15+
<button class="flex-1 w-full text-black/70 text-base lg:text-lg px-4 md:px-8 py-4 border-x border-black/50 rounded-md transition-all duration-100 ease-linear bg-black/20 hover:bg-black/30">
16+
Button
17+
</button>
18+
<button class="flex-grow text-black/70 w-1/2 text-base lg:text-lg px-4 md:px-8 py-4 border-x border-black/50 rounded-md transition-all duration-100 ease-linear bg-black/20 hover:bg-black/30">
19+
Button
20+
</button>
21+
<button class="flex-grow text-black/70 w-1/3 text-base lg:text-lg px-4 md:px-8 py-4 border-x border-black/50 rounded-md transition-all duration-100 ease-linear bg-black/20 hover:bg-black/30">
22+
Button
23+
</button>
24+
</div>
25+
</div>
26+
</div>

‎BaseApp/templates/BaseApp/ui_elements/sections/buttons_examples.html

Lines changed: 2 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,8 @@
11
{% load static %}
22
<div class="flex flex-col space-y-4">
33
<h3 class="text-2xl font-bold text-center mt-2">Buttons</h3>
4-
<div class="flex flex-col space-y-2 border border-y-4 border-white/10 rounded-lg p-4 bg-slate-900/50">
5-
<h4 class="text-lg font-bold text-center">
6-
Responsive Row/Column of Buttons, toggled active, uniform size, initial first, dark theme
7-
</h4>
8-
<div id="example-button-group"
9-
data-active-class="bg-black/50 hover:bg-black/50 font-bold text-white border-b-4 border-white/20"
10-
data-initial-active="first"
11-
class="flex flex-col md:flex-row gap-2 justify-center">
12-
<button class="flex-grow w-full text-base lg:text-lg px-4 md:px-8 py-4 border-x border-white/10 rounded-md transition-all duration-100 ease-linear bg-black/20 hover:bg-black/30">
13-
Button
14-
</button>
15-
<button class="flex-grow w-full text-base lg:text-lg px-4 md:px-8 py-4 border-x border-white/10 rounded-md transition-all duration-100 ease-linear bg-black/20 hover:bg-black/30">
16-
Button
17-
</button>
18-
<button class="flex-grow w-full text-base lg:text-lg px-4 md:px-8 py-4 border-x border-white/10 rounded-md transition-all duration-100 ease-linear bg-black/20 hover:bg-black/30">
19-
Button
20-
</button>
21-
<button class="flex-grow w-full text-base lg:text-lg px-4 md:px-8 py-4 border-x border-white/10 rounded-md transition-all duration-100 ease-linear bg-black/20 hover:bg-black/30">
22-
Button
23-
</button>
24-
<button class="flex-grow w-full text-base lg:text-lg px-4 md:px-8 py-4 border-x border-white/10 rounded-md transition-all duration-100 ease-linear bg-black/20 hover:bg-black/30">
25-
Button
26-
</button>
27-
</div>
28-
</div>
29-
<div class="flex flex-col space-y-2 border border-y-4 border-black/10 rounded-lg p-4 bg-slate-200/100">
30-
<h4 class="text-lg font-bold text-center text-black/70">
31-
Responsive Buttons, toggled active, various sizes, initial random, light theme
32-
</h4>
33-
<div id="example2-button-group"
34-
data-active-class="bg-white hover:bg-white font-bold text-black border-b-4 border-black/60"
35-
data-initial-active="random"
36-
class="flex flex-wrap gap-2 justify-center transition-all duration-300 ease-linear">
37-
<button class="flex-grow w-1/3 text-black/70 text-base lg:text-lg px-4 md:px-8 py-4 border-x border-black/50 rounded-md transition-all duration-100 ease-linear bg-black/20 hover:bg-black/30">
38-
Button
39-
</button>
40-
<button class="flex-1 w-1/6 text-black/70 text-base lg:text-lg px-4 md:px-8 py-4 border-x border-black/50 rounded-md transition-all duration-100 ease-linear bg-black/20 hover:bg-black/30">
41-
Button
42-
</button>
43-
<button class="flex-1 w-full text-black/70 text-base lg:text-lg px-4 md:px-8 py-4 border-x border-black/50 rounded-md transition-all duration-100 ease-linear bg-black/20 hover:bg-black/30">
44-
Button
45-
</button>
46-
<button class="flex-grow text-black/70 w-1/2 text-base lg:text-lg px-4 md:px-8 py-4 border-x border-black/50 rounded-md transition-all duration-100 ease-linear bg-black/20 hover:bg-black/30">
47-
Button
48-
</button>
49-
<button class="flex-grow text-black/70 w-1/3 text-base lg:text-lg px-4 md:px-8 py-4 border-x border-black/50 rounded-md transition-all duration-100 ease-linear bg-black/20 hover:bg-black/30">
50-
Button
51-
</button>
52-
</div>
53-
</div>
4+
{% include 'BaseApp/ui_elements/partials/button_example_1.html' %}
5+
{% include 'BaseApp/ui_elements/partials/button_example_2.html' %}
546
</div>
557
// TODO: add MultiButtonGroup example with multiple buttons active at once
568
<script type="module">import { ToggledButtonGroup } from "{% static 'BaseApp/button_handlers.mjs' %}";

0 commit comments

Comments
 (0)