Create DOM Tree with chamelboots ChameleonTemplate

Create DOM Tree with strings and dicts.

In [6]:
from bs4 import BeautifulSoup
In [7]:
from chamelboots import ChameleonTemplate as CT
from chamelboots import TalStatement as TS
from chamelboots.constants import Join

ATTRIBUTE_CONTENT = (
    TS("attributes", "attrib"),
    TS("content", "structure content"),
)
In [9]:
ID = "query"
ATTRIB_CONTENTS = ATTRIBUTES, STRUCTURE_CONTENT = (
    TS("attributes", "attrib"),
    TS("content", "structure content"),
)
SEARCH_FORM = "searchForm"
In [56]:
groups = (
    (("form", {"method": "GET", "action": "#", "id": SEARCH_FORM},),),
    (("div", {"class": "form-group",}),),
    (
        ("label", {"class": "col-sm-2 col-form-label col-form-label-lg", "for": ID,},),
        (
            "input",
            {
                "type": "text",
                "class": "form-control",
                "id": ID,
                "placeholder": "Enter search term",
            },
        ),
        ("button", {"type": "submit", "class": "btn btn-primary"}),
        ("button", {"type": "button", "class": "btn btn-secondary"}),
    ),
)

chameleon_templates = [
    [(CT(tag, ATTRIB_CONTENTS), attrib,) for tag, attrib in group] for group in groups
]
<div class="form-group">
 <label class="col-sm-2 col-form-label col-form-label-lg" for="query">
 </label>
 <input class="form-control" id="query" placeholder="Enter search term" type="text"/>
 <button class="btn btn-primary" type="submit">
 </button>
 <button class="btn btn-secondary" type="button">
 </button>
</div>
==========
<form action="#" id="searchForm" method="GET">
 <div class="form-group">
 </div>
</form>
==========
<form action="#" id="searchForm" method="GET">
 <form action="#" id="searchForm" method="GET">
  <div class="form-group">
  </div>
 </form>
</form>
==========
In [11]:
query_form = Join.LINES(
    [
        CT(
            "form", (TS("attributes", "attrib"), TS("content", "structure content"),)
        ).render(
            attrib={"method": "GET", "action": "#", "id": SEARCH_FORM},
            content=CT(
                "div", (TS("attributes", "attrib"), TS("content", "structure content"),)
            ).render(
                attrib={"class": "form-group",},
                content=Join.LINES(
                    [
                        CT(
                            "label",
                            (TS("attributes", "attrib"),),
                            inner_content="Bootstrap Classes Search: Search the table for text.",
                        ).render(
                            attrib={
                                "class": "col-sm-2 col-form-label col-form-label-lg",
                                "for": ID,
                            }
                        ),
                        CT("input", (TS("attributes", "attrib"),),).render(
                            attrib={
                                "type": "text",
                                "class": "form-control",
                                "id": ID,
                                "placeholder": "Enter search term",
                            }
                        ),
                        CT(
                            "button",
                            (TS("attributes", "attrib"),),
                            inner_content="search",
                        ).render(attrib={"type": "submit", "class": "btn btn-primary"}),
                        CT(
                            "button",
                            (TS("attributes", "attrib"),),
                            inner_content="clear",
                        ).render(
                            attrib={"type": "button", "class": "btn btn-secondary"}
                        ),
                    ]
                ),
            ),
        ),
    ]
)

print(BeautifulSoup(query_form, 'html.parser').prettify())
<form action="#" id="searchForm" method="GET">
 <div class="form-group">
  <label class="col-sm-2 col-form-label col-form-label-lg" for="query">
   Bootstrap Classes Search: Search the table for text.
  </label>
  <input class="form-control" id="query" placeholder="Enter search term" type="text"/>
  <button class="btn btn-primary" type="submit">
   search
  </button>
  <button class="btn btn-secondary" type="button">
   clear
  </button>
 </div>
</form>