first form element, button and builder to create button to toggle all details .open property. see changelog

Author: joeldodson

.gitignore

@@ -145,3 +145,6 @@ dmypy.json
 # I use rp.py to keep stuff I want to import in the repl
 # this keeps me from typing the same stuff when I have to restart the repl 
 rp.py 
+
+# a directory for experimental stuff
+sampleCode

docs/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## v0.1.15 (2025-01-13) 
+
+- this version is motivated by a desire to toggle visibility of all details elements 
+- and now, forms... starting with the button  
+  - this is a very basic ability to create a button element
+  - any attributes (e.g., type) will be done manually or via a builders class
+  - this is all TBD and might change in subsequent releases 
+- a new builder to add a toggle button to a page to expand/collapse the content of a details element 
+  - this is also the introduction of JavaScript into domible (sorry, it was inevitable) 
+  - the JS is hard coded into the builder, which might be the long term solution, but I doubt it 
+  - focus is on functionality, no CSS has been added 
+- added toggle details button into efo.py in tests 
+- added a toggle details button in open_object_in_browser() in domible tools 
+- fixed bug in Script element where contents was not being passed to super().__init__ 
+
 ## v0.1.14 (2024-12-19) -- BREAKING BACKWARD COMPATIBILITY 
 
 - removed typer from dicli, starts a little faster

pyproject.toml

@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "domible"
-version = "0.1.14"
+version = "0.1.15"
 description = "python classes to create accessible HTML elements and documents "
 authors = ["Joel Dodson <joeldodson@gmail.com>"]
 maintainers = ["BlindGumption <blindgumption@gmail.com>"]

src/domible/builders/__init__.py

@@ -3,5 +3,6 @@
 from domible.builders.tableBuilder import RowBuilder, TableBuilder, build_table_from_dicts
 from domible.builders.navBuilder import NavBuilder 
 from domible.builders.elementFromObject import element_from_object  
+from domible.builders.formBuilder import ToggleDetailsButton, default_toggle_details_button  
 
 # end of file

src/domible/builders/formBuilder.py

@@ -0,0 +1,49 @@
+""" domible/src/domible/builders/formBuilder.py 
+""" 
+
+from typing import Any
+
+from domible.elements import Button, Div, Script 
+
+
+js_code = """
+function toggleDetails(expand) {
+    const detailsElements = document.querySelectorAll('details');
+    detailsElements.forEach(details => {
+        details.open = expand;
+    });
+}
+
+// Function to toggle between expanding and collapsing                                                          
+function toggleAllDetails() {
+    const detailsElements = document.querySelectorAll('details');
+    const areAllOpen = Array.from(detailsElements).every(details => details.open);
+
+    // Decide whether to expand or collapse based on current state                                              
+    toggleDetails(!areAllOpen);
+}                                                                                                               
+"""
+
+
+class ToggleDetailsButton:
+    def __init__(self, contents: Any = None, **attributes):
+        """
+        generates a single purpose button to set the details 'opn' property to True/False 
+        attributes passed in are intended for the button element 
+        """
+        contents = "Toggle All Details" if not contents else contents 
+        self.toggle_button = Button(
+            contents, onclick="toggleAllDetails()", ** attributes
+        )
+
+    def get_button(self):
+        return Div([Script(js_code), self.toggle_button])
+
+    def __call__(self):
+        return self.get_button()
+
+##
+# create this default to be easily used where the default label is acceptable 
+default_toggle_details_button = ToggleDetailsButton()
+
+## end of file

src/domible/elements/__init__.py

@@ -14,5 +14,6 @@
 from domible.elements.scripting import Canvas, NoScript, Script, Template 
 from domible.elements.sectioning import Article, Body, Footer, Header, Heading, HorizontalRule, Main, Nav, Section 
 from domible.elements.tables import TableData, TableHeader, TableColumnHeader, TableRowHeader, TableRow, TableHead, TableBody, TableFoot, Caption, Table
+from domible.elements.forms import Button 
 
-# end of file
+## end of file

src/domible/elements/forms.py

@@ -0,0 +1,16 @@
+"""  domible/src/domible/elements/forms.py 
+Eventually will include all the HTML form elements.
+Anythin fancy will probably be done in formsBuilder.
+"""
+
+from typing import Any
+
+from domible.elements.baseElements import BaseElement
+
+
+class Button(BaseElement):
+    def __init__(self, contents: Any = None, **kwArgs):
+        super().__init__(tag="button", contents=contents, **kwArgs)
+
+
+## end of file

src/domible/elements/scripting.py

@@ -12,9 +12,8 @@ class Canvas(BaseElement):
     All I know of the <canvas> element is it's a problem for accessibility.
     As I learn more, I might build out this class to enforce as much accessibility as possible in a <canvas>.
     """
-
     def __init__(self, contents: Any = None, **kwArgs):
-        super().__init__(tag="canvas", **kwArgs)
+        super().__init__(tag="canvas", contents=contents, **kwArgs)
 
 
 class NoScript(BaseElement):
@@ -23,9 +22,8 @@ class NoScript(BaseElement):
     I guess this is like a <div> that can contain general HTML
     to be rendered if the rowser doesn't support the desired scripting.
     """
-
     def __init__(self, contents: Any = None, **kwArgs):
-        super().__init__(tag="noscript", **kwArgs)
+        super().__init__(tag="noscript", contents=contents, **kwArgs)
 
 
 class Script(BaseElement):
@@ -35,9 +33,8 @@ class Script(BaseElement):
     This class exists for the domible user to add scripts to their HTML.
     The content should be a string of valid text (probably JS) given the attributes of the element.
     """
-
     def __init__(self, contents: str, **kwArgs):
-        super().__init__(tag="script", **kwArgs)
+        super().__init__(tag="script", contents=contents, **kwArgs)
 
 
 class Template(BaseElement):
@@ -46,9 +43,8 @@ class Template(BaseElement):
     I guess this is like a <div> that can contain general HTML
     to be rendered later using JavaScript
     """
-
     def __init__(self, contents: Any = None, **kwArgs):
-        super().__init__(tag="template", **kwArgs)
+        super().__init__(tag="template", contents=contents, **kwArgs)
 
 
 ## end of file

src/domible/tools.py

@@ -13,8 +13,8 @@
 import webbrowser as wb
 
 from domible.elements import BaseElement 
-from domible.elements import Html, Body 
-from domible.builders import element_from_object 
+from domible.elements import Html, Body, Heading 
+from domible.builders import element_from_object, default_toggle_details_button  
 from domible.starterDocuments import basic_head_empty_body 
 
 
@@ -67,6 +67,7 @@ def open_object_in_browser(obj: object, depth:int = 42, title: str = "opening an
     obj_html = element_from_object(obj, depth)
     html_doc: Html  = basic_head_empty_body(title)
     body: Body = html_doc.get_body_element() 
+    body.add_content([Heading(1, f"showing object of type {type(obj).__name__}"), default_toggle_details_button()])
     body.add_content(obj_html)
     open_html_in_browser(html_doc, save_file, force)
 

tests/efo.py

@@ -14,7 +14,7 @@
 
 from sys import argv
 
-from domible.builders import element_from_object 
+from domible.builders import element_from_object, ToggleDetailsButton, default_toggle_details_button   
 from domible import open_html_in_browser, open_object_in_browser 
 from domible.starterDocuments import basic_head_empty_body
 from domible.elements import Html, Body, BaseElement, Heading
@@ -79,6 +79,8 @@
     elif arg == 'cases':
         html = basic_head_empty_body(f"EFO: running all cases, depth {depth}")
         body = html.get_body_element()
+        body.add_content([Heading(1, "Show All Objects"),ToggleDetailsButton("Custom Togle Details Button Label").get_button()])
+        body.add_content([Heading(1, "Show All Objects"),default_toggle_details_button()])
         for name, obj in cases.items():
             elem = element_from_object(obj, depth)
             body.add_content([Heading(2, f"Object {name}"), elem])