Create Bootstrap Components with Python str and dict Types

Create Boostrap components with Python str and dict types.

In [1]:
from chamelboots.bootstrap.components.constants import (
    ContextualClassNames,
    ATTRIBUTE_LOOKUP,
    ALERT_CLASSES_ATTRIBS,
    COMPONENT_CLASS_NAMES,
)
from chamelboots.bootstrap.components.alerts import ALERT_COMPONENTS
from chamelboots import ChameleonTemplate, TalStatement

Possible contextual class names as taken from Boostrap documentation.

In [2]:
ContextualClassNames.__members__
Out[2]:
mappingproxy({'PRIMARY': <ContextualClassNames.PRIMARY: 'primary'>,
              'SECONDARY': <ContextualClassNames.SECONDARY: 'secondary'>,
              'SUCCESS': <ContextualClassNames.SUCCESS: 'success'>,
              'DANGER': <ContextualClassNames.DANGER: 'danger'>,
              'WARNING': <ContextualClassNames.WARNING: 'warning'>,
              'INFO': <ContextualClassNames.INFO: 'info'>,
              'LIGHT': <ContextualClassNames.LIGHT: 'light'>,
              'DARK': <ContextualClassNames.DARK: 'dark'>})

TODO

  • Define __str__ method on ChameleonTemplate so the html_string displays on print.
  • Define __str__ method on ALERT_COMPONENTS so the html_string displays on print.
  • Define __repr__ method on ALERT_COMPONENTS and ChameleonTemplateso the html_string displays on repr.
In [3]:
# Does Chameleon add to or overwrite attributes?
div = ChameleonTemplate(tal_statements=(TalStatement("attributes", "extra"),))
print(div)
div
<div tal:attributes="extra"></div>
Out[3]:
<ChameleonTemplate: '<div tal:attributes="extra"></div>'>
In [4]:
ALERT_COMPONENTS["AlertInfo"](inner_content="foo")
Out[4]:
< AlertInfo :  <div class="alert alert-info" role="alert">foo</div> >
In [5]:
# Does Chameleon add to or overwrite attributes?
# Yes.
ALERT_COMPONENTS["AlertInfo"](attrib={}, inner_content="")
Out[5]:
< AlertInfo :  <div></div> >
In [6]:
ALERT_COMPONENTS["AlertInfo"](inner_content="foo content")
Out[6]:
< AlertInfo :  <div class="alert alert-info" role="alert">foo content</div> >
In [7]:
ATTRIBUTE_LOOKUP
Out[7]:
{'AlertPrimary': {'class': 'alert alert-primary', 'role': 'alert'},
 'AlertSecondary': {'class': 'alert alert-secondary', 'role': 'alert'},
 'AlertSuccess': {'class': 'alert alert-success', 'role': 'alert'},
 'AlertDanger': {'class': 'alert alert-danger', 'role': 'alert'},
 'AlertWarning': {'class': 'alert alert-warning', 'role': 'alert'},
 'AlertInfo': {'class': 'alert alert-info', 'role': 'alert'},
 'AlertLight': {'class': 'alert alert-light', 'role': 'alert'},
 'AlertDark': {'class': 'alert alert-dark', 'role': 'alert'}}
In [8]:
COMPONENT_CLASS_NAMES
Out[8]:
['AlertPrimary',
 'AlertSecondary',
 'AlertSuccess',
 'AlertDanger',
 'AlertWarning',
 'AlertInfo',
 'AlertLight',
 'AlertDark']

Experiment with recreating this HTML

<div class="alert alert-success" role="alert">
  <h4 class="alert-heading">Well done!</h4>
  <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
  <hr>
  <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>

Inject any arbitrary Boostrap attribs into a ChameleonTemplate

In [9]:
from chamelboots import ChameleonTemplate, TalStatement
from IPython.display import display, HTML
In [10]:
chameleon_template = ChameleonTemplate(
    "h4",
    tal_statements=(TalStatement("attributes", "attrib"),),
    inner_content="Well done!",
)
chameleon_template
Out[10]:
<ChameleonTemplate: '<h4 tal:attributes="attrib">Well done!</h4>'>

All classes in Boostrap

The following example seems convenient enough for creating Bootstrap styled HTML.

Issue: Remembering all the class names and when to use them.

In [11]:
chameleon_template.render(attrib={"class": "alert-heading"})
Out[11]:
'<h4 class="alert-heading">Well done!</h4>'

These classes were programmatically generated.

But are rather confusing to use.

In [12]:
ALERT_COMPONENTS["AlertSuccess"](inner_content="")
Out[12]:
< AlertSuccess :  <div class="alert alert-success" role="alert"></div> >
In [13]:
from chamelboots.constants import HTML_PARSER, FAKE
from chamelboots import ChameleonTemplate, TalStatement
from lxml import etree
<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h2>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h2 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </button>
      </h2>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h2 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </button>
      </h2>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>
In [14]:
ARBITRARY_CLASS_NAME = "accordian"
DATA_PARENT_ID = "accordionExample"
accordian = ChameleonTemplate(
    tal_statements=(TalStatement("attributes", "attrib"),)
).render(attrib={"class": ARBITRARY_CLASS_NAME, "id": DATA_PARENT_ID})
accordian  # a string
Out[14]:
'<div class="accordian" id="accordionExample"></div>'
In [15]:
from bs4 import BeautifulSoup

bootstrap_card = """
<div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h2>
    </div>

    <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
</div>
"""

print(BeautifulSoup(bootstrap_card, 'html.parser').prettify())
<div class="card">
 <div class="card-header" id="headingOne">
  <h2 class="mb-0">
   <button aria-controls="collapseOne" aria-expanded="true" class="btn btn-link" data-target="#collapseOne" data-toggle="collapse" type="button">
    Collapsible Group Item #1
   </button>
  </h2>
 </div>
 <div aria-labelledby="headingOne" class="collapse" data-parent="#accordionExample" id="collapseOne">
  <div class="card-body">
   Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
  </div>
 </div>
</div>

In [16]:
HTML(bootstrap_card)
Out[16]:

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
<div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h2>
    </div>

    <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
</div>
<div class="card">
    <div class="card-header" id="headingTwo">
      <h2 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </button>
      </h2>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
</div>