bootstrap.py

bootstrap.py

from kutty import Page, Table, Code, html

from _demo import Demo

page = Page("Bootstrap")

page << html.p("""
bootstrap experiments.
""")

code = """
from kutty.html import HTML

html = '''
<ul class="list-group">
  <li class="list-group-item active" aria-current="true">An active item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>
'''
"""

page << Demo(code, "html")

code = """
from kutty import html as h

g = h.div(class_="list-group")
g << h.div(
      class_="list-group-item active",
      _content="An active item")
g << h.div(
      class_="list-group-item",
      _content="An second item")
g << h.div(
      class_="list-group-item",
      _content="An third item")
"""
page << Demo(code, "g")

code = """
from kutty import html as h

def ListGroup():
  return h.div(class_="list-group")

def ListGroupItem(content, active=False):
  classes = ["list-group-item"]
  if active: classes.append("active")
  return h.div(
      class_=" ".join(classes),
      _content=content)

g = ListGroup()
g << ListGroupItem("An active Item", active=True)
g << ListGroupItem("A second item")
g << ListGroupItem("A third item")
"""
page << Demo(code, "g")

page << html.h2("Links")

code = """
from kutty import html as h
from kutty import Link

def is_link(item):
  return item.TAG == "a" or item.TAG == "button"

def ListGroup(items=[]):
  g = h.div(class_="list-group")
  for item in items:
    if is_link(item):
      item.attrs["class_"] = item.attrs.get("class_", "") + " list-group-item list-group-item-action"
    else:
      item = ListGroupItem(item)
    g << item
  return g

def ListGroupItem(content, active=False):
  classes = ["list-group-item"]
  if active: classes.append("active")
  return h.div(
      class_=" ".join(classes),
      _content=content)

g = ListGroup()
g << ListGroupItem("An active Item", active=True)
g << Link("Home", href="/", class_="list-group-item list-group-item-action")
g << ListGroupItem(Link("Link", href="/components/links"))

items = {"Home": "/", "Link": "/components/link"}

# ListGroup([Link(title, href=href)
#   for title, href in items.items()])

g = ListGroup([Link(i, href=i, class_="list-group-item-action") for i in range(10)])

"""

page << Demo(code, "g")


"""
style - reserved for style attribute
pallete - not clear

style_as="primary"
"""

page << html.h2("Cards")

code = """
from kutty import html as h
from kutty import *

def is_link(item):
  return isinstance(item, h.HTMLElement) and item.TAG in ["a", "button"]

def ListGroup(items=[]):
  g = h.div(class_="list-group")
  for item in items:
    if is_link(item):
      item.attrs["class_"] = item.attrs.get("class_", "") + " list-group-item list-group-item-action"
    else:
      item = ListGroupItem(item)
    g << item
  return g

def ListGroupItem(content, active=False):
  classes = ["list-group-item"]
  if active: classes.append("active")
  return h.div(
      class_=" ".join(classes),
      _content=content)

def Image(src):
  return h.img(src=src)

class Card(h.HTMLElement):
  TAG = "div"

  def __init__(self, header=None, footer=None):
    super().__init__(_tag="div", class_="card")

    self.header = header or h.div(class_="card-header")
    self.body = h.div(class_="card-body")
    self.footer = footer or h.div(class_="card-footer")

  def is_empty(self, e, class_):
    return \
      isinstance(e, h.HTMLElement) \
      and e.attrs.get('class_') == class_ \
      and len(e.children) == 0

  def get_children(self):
    if not self.is_empty(self.header, "card-header"):
      yield self.header
    if not self.is_empty(self.body, "card-body"):
      yield self.body
    yield from self.children
    if not self.is_empty(self.footer, "card-footer"):
      yield self.footer

  def render(self):
      attrs = "".join(" " + self._render_attr(name, value) for name, value in self.attrs.items())
      children = self.get_children()
      content = "".join(c.render() for c in children)
      return f"<{self.TAG}{attrs}>{content}</{self.TAG}>"

img = Image("https://via.placeholder.com/150x50")
c1 = Card(header=img)
c1.body << h.h5(class_="card-title", _content="Card with header image")
c1.body << h.p(class_="card-text", _content="Some quick example text to build on the card title and make up the bulk of the card's content.")
c1.body << h.a(class_="btn btn-primary", _content="Go somewhere")

img = Image("https://via.placeholder.com/150x50")
c2 = Card(footer=img)
c2.body << h.h5(class_="card-title", _content="Card Footer Image")
c2.body << h.p(class_="card-text", _content="Some quick example text to build on the card title and make up the bulk of the card's content.")
c2.body << h.a(class_="btn btn-primary", _content="Go somewhere")

img = Image("https://via.placeholder.com/150x50")
c3 = Card(header=img)
c3.body << h.h5(class_="card-title", _content="Card Footer Image")
c3.body << h.p(class_="card-text", _content="Some quick example text to build on the card title and make up the bulk of the card's content.")
c3 << ListGroup(range(5))
c3.footer << h.a("Card Link", class_="card-link")
c3.footer << h.a("Card Link 2", class_="card-link")

gap = html.div(style="margin: 20px;")

card = html.div()
card << c1
card << gap
card << c2
card << gap
card << c3
"""

page << Demo(code, "card")