Skip to content

Commit

Permalink
Update 02_franken.ipynb
Browse files Browse the repository at this point in the history
  • Loading branch information
@Isaac-Flath
Isaac-Flath committed Feb 10, 2025
1 parent 8a5cdf5 commit 716da94
Showing 1 changed file with 2 additions and 209 deletions.
211 changes: 2 additions & 209 deletions nbs/02_franken.ipynb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3209,218 +3209,11 @@
"source": [
"Show(ThemePicker())"
]
},
{
"cell_type": "code",
"execution_count": 127,
"id": "cdb239e7",
"metadata": {},
"outputs": [],
"source": [
"# Show(ThemePicker(color=False))"
]
},
{
"cell_type": "code",
"execution_count": 129,
"id": "3dca8b7b",
"metadata": {},
"outputs": [
{
"ename": "IndentationError",
"evalue": "unindent does not match any outer indentation level (<string>, line 40)",
"output_type": "error",
"traceback": [
"\u001b[0;36m File \u001b[0;32m<string>:40\u001b[0;36m\u001b[0m\n\u001b[0;31m </uk-theme-switcher>\u001b[0m\n\u001b[0m ^\u001b[0m\n\u001b[0;31mIndentationError\u001b[0m\u001b[0;31m:\u001b[0m unindent does not match any outer indentation level\n"
]
}
],
"source": [
"<uk-theme-switcher id=\"theme-switcher\">\n",
" <select hidden>\n",
" <optgroup data-key=\"theme\" label=\"Theme\">\n",
" <option data-hex=\"#52525b\" value=\"uk-theme-zinc\" selected>\n",
" Zinc\n",
" </option>\n",
" <option data-hex=\"#64748b\" value=\"uk-theme-slate\">Slate</option>\n",
" <option data-hex=\"#78716c\" value=\"uk-theme-stone\">Stone</option>\n",
" <option data-hex=\"#6b7280\" value=\"uk-theme-gray\">Gray</option>\n",
" <option data-hex=\"#737373\" value=\"uk-theme-neutral\">Neutral</option>\n",
" <option data-hex=\"#dc2626\" value=\"uk-theme-red\">Red</option>\n",
" <option data-hex=\"#e11d48\" value=\"uk-theme-rose\">Rose</option>\n",
" <option data-hex=\"#f97316\" value=\"uk-theme-orange\">Orange</option>\n",
" <option data-hex=\"#16a34a\" value=\"uk-theme-green\">Green</option>\n",
" <option data-hex=\"#2563eb\" value=\"uk-theme-blue\">Blue</option>\n",
" <option data-hex=\"#facc15\" value=\"uk-theme-yellow\">Yellow</option>\n",
" <option data-hex=\"#7c3aed\" value=\"uk-theme-violet\">Violet</option>\n",
" </optgroup>\n",
" <optgroup data-key=\"radii\" label=\"Radii\">\n",
" <option value=\"uk-radii-none\">None</option>\n",
" <option value=\"uk-radii-sm\">Small</option>\n",
" <option value=\"uk-radii-md\" selected>Medium</option>\n",
" <option value=\"uk-radii-lg\">Large</option>\n",
" </optgroup>\n",
" <optgroup data-key=\"shadows\" label=\"Shadows\">\n",
" <option value=\"uk-shadows-none\">None</option>\n",
" <option value=\"uk-shadows-sm\" selected>Small</option>\n",
" <option value=\"uk-shadows-md\">Medium</option>\n",
" <option value=\"uk-shadows-lg\">Large</option>\n",
" </optgroup>\n",
" <optgroup data-key=\"font\" label=\"Font\">\n",
" <option value=\"uk-font-sm\" selected>Small</option>\n",
" <option value=\"uk-font-base\">Default</option>\n",
" </optgroup>\n",
" <optgroup data-key=\"mode\" label=\"Mode\">\n",
" <option data-icon=\"sun\" value=\"light\">Light</option>\n",
" <option data-icon=\"moon\" value=\"dark\">Dark</option>\n",
" </optgroup>\n",
" </select>\n",
" </uk-theme-switcher>"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "43f7a15b",
"metadata": {},
"outputs": [],
"source": [
"%%ai\n",
"\n",
"I have shown the example HTML code from the Frankenui docs. It looks the same was what My ThemePicker funciton makes, but it's not quite working. Once I select a color it does, but when it first loads in from HTMX swapping in it doesn't have all the current them options selected so somehow it's not being initialized right with the current theme when coming in through HTMX."
]
},
{
"cell_type": "markdown",
"id": "9dbced3f",
"metadata": {},
"source": [
"Based on the description, it sounds like there's an initialization issue when the ThemePicker component is loaded via HTMX. The component needs to be re-initialized after HTMX swaps in the new content.\n",
"\n",
"Here are a couple of approaches we could try:\n",
"\n",
"1. Add an HTMX trigger to re-initialize after swap:\n",
"\n",
"```python\n",
"def ThemePicker(color=True, radii=True, shadows=True, font=True, mode=True, cls='p-4'):\n",
" return Div(\n",
" Uk_theme_switcher(\n",
" fh.Select(*groups, hidden=True), \n",
" id=\"theme-switcher\"\n",
" ), \n",
" cls=stringify(cls),\n",
" hx_trigger=\"htmx:afterSwap->initThemeSwitcher()\" # Add this line\n",
" )\n",
"```\n",
"\n",
"2. Or wrap the component with a trigger div:\n",
"\n",
"```python\n",
"def ThemePicker(color=True, radii=True, shadows=True, font=True, mode=True, cls='p-4'):\n",
" \"Theme picker component with configurable sections\"\n",
" # ... existing code ...\n",
" \n",
" return Div(\n",
" Div(\n",
" Uk_theme_switcher(fh.Select(*groups, hidden=True), id=\"theme-switcher\"), \n",
" cls=stringify(cls)\n",
" ),\n",
" hx_trigger=\"htmx:afterSwap->initThemeSwitcher()\"\n",
" )\n",
"```\n",
"\n",
"You'll need to make sure there's a corresponding JavaScript function `initThemeSwitcher()` that reinitializes the theme switcher component. This would typically be defined in your page's JavaScript:\n",
"\n",
"```javascript\n",
"function initThemeSwitcher() {\n",
" // Re-initialize theme switcher\n",
" document.querySelector('uk-theme-switcher')?.init();\n",
"}\n",
"```\n",
"\n",
"Would you like me to help implement either of these approaches or explore other solutions?"
]
},
{
"cell_type": "markdown",
"id": "f4e1b43f",
"metadata": {},
"source": [
"The issue is likely that when the content is swapped in via HTMX, the web component `uk-theme-switcher` needs to be re-initialized to pick up the current theme settings. In HTMX, we need to trigger the initialization after the content is swapped.\n",
"\n",
"Let's modify the ThemePicker function to include HTMX initialization:\n",
"\n",
"```python\n",
"def ThemePicker(color=True, radii=True, shadows=True, font=True, mode=True, cls='p-4'):\n",
" \"Theme picker component with configurable sections\"\n",
" def _opt(val, txt, **kwargs): return Option(txt, value=val, **kwargs)\n",
" def _optgrp(key, lbl, opts): return fh.Optgroup(data_key=key, label=lbl)(*opts)\n",
" \n",
" groups = []\n",
" if color: groups.append(_optgrp('theme', 'Theme', [\n",
" _opt('uk-theme-zinc', 'Zinc', data_hex='#52525b', selected=True),\n",
" *[_opt(f'uk-theme-{c.lower()}', c, data_hex=h) for c,h in \n",
" [('Slate','#64748b'),('Stone','#78716c'),('Gray','#6b7280'),\n",
" ('Neutral','#737373'),('Red','#dc2626'),('Rose','#e11d48'),\n",
" ('Orange','#f97316'),('Green','#16a34a'),('Blue','#2563eb'),\n",
" ('Yellow','#facc15'),('Violet','#7c3aed')]]]))\n",
" if radii: groups.append(_optgrp('radii', 'Radii', [\n",
" _opt('uk-radii-none','None'), _opt('uk-radii-sm','Small'),\n",
" _opt('uk-radii-md','Medium',selected=True), _opt('uk-radii-lg','Large')]))\n",
" if shadows: groups.append(_optgrp('shadows', 'Shadows', [\n",
" _opt('uk-shadows-none','None'), _opt('uk-shadows-sm','Small',selected=True),\n",
" _opt('uk-shadows-md','Medium'), _opt('uk-shadows-lg','Large')]))\n",
" if font: groups.append(_optgrp('font', 'Font', [\n",
" _opt('uk-font-sm','Small',selected=True), _opt('uk-font-base','Default')]))\n",
" if mode: groups.append(_optgrp('mode', 'Mode', [\n",
" _opt('light','Light',data_icon='sun'), _opt('dark','Dark',data_icon='moon')]))\n",
" from fasthtml.components import Uk_theme_switcher\n",
" \n",
" # Add HTMX trigger to initialize theme switcher after swap\n",
" return Div(\n",
" Uk_theme_switcher(\n",
" fh.Select(*groups, hidden=True), \n",
" id=\"theme-switcher\"\n",
" ),\n",
" cls=stringify(cls),\n",
" hx_trigger=\"htmx:afterSwap->window.initThemeSwitcher()\"\n",
" )\n",
"```\n",
"\n",
"You'll need to add a small JavaScript function to handle the initialization. Add this to your page's JavaScript:\n",
"\n",
"```javascript\n",
"window.initThemeSwitcher = function() {\n",
" // Force re-initialization of theme switcher\n",
" const switcher = document.querySelector('uk-theme-switcher');\n",
" if (switcher) {\n",
" // This will trigger the component to re-read current theme settings\n",
" switcher.connectedCallback();\n",
" }\n",
"}\n",
"```\n",
"\n",
"This solution:\n",
"\n",
"1. Adds an HTMX trigger that fires after content swap\n",
"2. Calls a JavaScript function that re-initializes the theme switcher\n",
"3. Uses the web component's `connectedCallback()` to re-establish the current theme settings\n",
"\n",
"This should make the theme switcher properly initialize with current settings when swapped in via HTMX."
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "e67a35aa",
"metadata": {},
"outputs": [],
"source": []
}
],
"metadata": {
"kernelspec": {
"display_name": "python3",
"display_name": "Python 3 (ipykernel)",
"language": "python",
"name": "python3"
},
Expand All @@ -3434,7 +3227,7 @@
"name": "python",
"nbconvert_exporter": "python",
"pygments_lexer": "ipython3",
"version": "3.12.7"
"version": "3.12.8"
}
},
"nbformat": 4,
Expand Down

0 comments on commit 716da94

Please sign in to comment.