def build_html(self, view, path, **kwargs):
b = self.context.b
b.div(cssClass=self.cssClass, style="width:100%")
# TODO: Bring this to global page CSS instead of attributes.
sampleCss = """font-family:'%s';font-size:%s;line-height:%s;letter-spacing:%s""" % (
self.font.info.cssName, px(
self.fontSize), self.leading, px(self.tracking or 0))
labelCss = """font-family:'%s';font-size:%s;line-height:%s;letter-spacing:%s""" % (
self.labelFont.info.cssName, px(
self.labelFontSize), self.labelLeading, px(self.tracking or 0))
b.div(cssClass='sample', style=sampleCss)
b.addHtml(self.sampleText)
b._div()
# If Urls provided, then add then as links.
hasLine = False
for index, (k, label) in enumerate(FONT_DATA_KEYS):
if k in self.fontData:
if not hasLine:
b.div(cssClass='label', style=labelCss)
hasLine = True
if index > 0:
b.addHtml(' ')
b.a(href=self.fontData[k],
target='external') # Always jump out on new window
b.addHtml(label)
b._a()
if hasLine:
b._div()
b._div()
def initialize(self, **kwargs):
"""Initialize the generic website templates."""
padding = self.padding
w, h = self.w, self.h
self.gw = self.gh = px(8)
gridX = (fr(1), fr(1))
gridY = [
None
] # Default is full height of columns, no horizontal division.
# Default page template
t = Template(w=w,
h=h,
name='home',
padding=padding,
gridX=gridX,
gridY=gridY)
self.addTemplate(t.name, t)
# Set template <head> building parameters. # Page element definition in pbpage.py
view = self.view
view.favIconUrl = 'images/favicon.gif'
view.mediaQueriesUrl = None
# Add page elements.
MobileNavigation(parent=t, name='MobileNavigation')
Introduction(parent=t, name='Introduction')
Navigation(parent=t, name='Navigation')
Featured(parent=t, name='Featured')
Main(parent=t, name='Main')
Section(parent=t, name='Section')
Main(parent=t, name='OtherMain')
Footer(parent=t, name='Footer')
JS(parent=t, name='JS')
def build_html(self, view, path, **kwargs):
b = self.context.b
b.comment('Start %s.%s\n' % (self.cssId, self.cssClass))
b.div(cssId=self.cssId, cssClass=self.cssClass)
for fontSize in self.fontSizes:
for fontName, _ in self.fontDataList:
style = "font-family:%s;font-size:%s;line-height:1.1em;height:%s;width:100%%;" % (
fontName, px(fontSize), px(fontSize * 1.1))
style += "overflow:hidden;text-overflow:ellipsis;"
b.div(style=style)
b.addHtml(
'AaBbCcDdEe FfGgHhIiJjKk LlMmNnOoPp QqRrSsTtUu VvWwXxYyZz'
) #FfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz')
b._div()
b._div()
b.comment('End %s.%s\n' % (self.cssId, self.cssClass))
def initialize(self, **kwargs):
u"""Initialize the generic base website templates. """
# For now, just supply the full head code here.
headCode = """
<meta content="text/html;charset=UTF-8" http-equiv="Content-Type"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>%(title)s</title>
<meta name="description" content="%(description)s">
<meta name="keywords" content="%(keywords)s">
<!-- Mobile viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
<!-- CSS-->
<link media="all" href="fonts/webfonts.css" type="text/css" rel="stylesheet"/>
<link rel="stylesheet" href="css/normalize.css">
<!--link rel="stylesheet" href="js/flexslider/flexslider.css"> -->
<link rel="stylesheet" href="css/style.css">
<!-- end CSS-->
"""
# For now, just supply the full JS links as code.
jsCode = """
<!-- JS-->
<script src="js/libs/modernizr-2.6.2.min.js"></script>
<!-- end JS-->
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script defer src="js/flexslider/jquery.flexslider-min.js"></script>
<!-- fire ups - read this file! -->
<script src="js/main.js"></script>
"""
#<script>window.jQuery || document.write('<script src="js/libs/jquery-1.9.0.min.js"></script>')</script>
rp = getRootPath()
padding = self.padding
w, h = self.w, self.h
self.gw = self.gh = px(8)
gridX = (fr(1), fr(1))
gridY = [None] # Default is full height of columns, no horizontal division.
# Default page template
t = Template(w=w, h=h, name='home', padding=padding, gridX=gridX, gridY=gridY)
self.addTemplate(t.name, t)
# Set template <head> building parameters. # Page element definition in pbpage.py
t.headCode = headCode % dict(title=self.title, description='', keywords='')
t.favIconUrl = 'images/favicon.gif'
t.jsCode = jsCode
t.cssCode = simpleCssCode % simpleTheme
t.resourcePaths = (rp+'js', rp+'images', rp+'fonts', rp+'css') # Directorie to be copied to Mamp.
# Add page template elements.
Navigation(parent=t, name='Navigation')
#Introduction(parent=t, name='Introduction')
Featured(parent=t, name='Featured')
WideContent(parent=t, name='WideContent')
Hero(parent=t, name='Hero')
Footer(parent=t, name='Footer')
def useUnits():
# 2mm, 2
for v in mm(2), px(5), pt(5), em(12, base=10), perc(12.5, base=400), col(
1 / 4, base=mm(200), g=mm(4)):
# Showing the unit as instance and as rendered value
print(
'As unit:',
v,
'As raw value:',
v.rv,
'As pt:',
v.pt,
)
def useUnits():
"""
>>> mm(2), mm(2).rv # Showing the unit as instance and as rendered value
(2mm, 2)
>>> px(5), px(5).rv
(5px, 5)
>>> px(5), pt(5).rv
(5px, 5)
>>> fr(8, base=400), fr(8, base=400).rv # Fractional units, used in CSS-grid.
(8fr, 50)
>>> em(12, base=10), em(12, base=10).rv
(12em, 120)
>>> perc(12.5, base=400), perc(12.5, base=400).rv
(12.5%, 50)
>>> u = col(1/4, base=mm(200), g=mm(4))
>>> u, u.rv
(0.25col, 47mm)
"""
print(mm(2))
# Real value:
print(mm(2).rv)
print(px(5))
print(px(5).rv)
#
# stylelib.py
#
# Default CSS reset.
# Library of predefined named styles.
#
# D E P R E C A T E D
#
# CSS is now implemented as SCSS files, using PageBot-generated variable.scss.
# NOTE: still imported in pagebot.document.
#
from pagebot.toolbox.units import px, em
from pagebot.toolbox.color import whiteColor, blackColor, color
MARGIN = (0, 0, px(10), 0)
default = {
'body': dict(
font='Verdana, sans',
fontStyle='normal',
fontWeight='normal',
tracking=0,
fontSize=px(12),
leading=em(1.4),
color=0,
fill=whiteColor,
),
'pre, code': dict(
display='none',
),
def makeDocument():
"""Make a new document."""
W = H = PageSize
# Create a new document, default to the defined page size.
doc = Document(w=W, h=H, originTop=False, title='Text Flow', autoPages=2)
rs = doc.getRootStyle()
rs['fill'] = (1, 1, 0) # Yellow background for debugging
rs['font'] = 'Verdana'
rs['fontSize'] = 14
rs['textFill'] = 1
#textBoxStyle = doc.addStyle('textbox', dict(fill=color(0, 0, 0, 0.7),
# padding=40))
pStyle = doc.addStyle('p', dict(textFill=blackColor))
h1Style = doc.addStyle('h1', dict(fontSize=24, textFill=(0, 0, 1)))
#h2Style = doc.addStyle('h2', dict(fontSize=18, textFill=(0, 1, 0)))
view = doc.getView()
view.padding = 0 # Aboid showing of crop marks, etc.
view.showCropMarks = True
view.showRegistrationMarks = True
view.showFrame = True
view.showPadding = True
view.showOrigin = True
view.showDimensions = False
# Get list of pages with equal y, then equal x.
#page = doc[1][0] # Get the single page from the document.
page0 = doc.getPage(1) # Get page on pageNumber,
# first in row (this is only one now).
page0.name = 'Page 1'
page0.padding = PagePadding
s = doc.context.newString('Headline\n', style=h1Style)
for n in range(10):
s += doc.context.newString(('(Line %d) Volume of text defines'
' the box height.'
' Volume of text defines'
' the box height. \n') % (n + 1),
style=pStyle)
h1 = None
e1 = newTextBox(
s,
name='CSSTextBox1',
parent=page0,
padding=4,
x=100,
font='Verdana',
h=h1,
mb=20,
mr=10, # Conditions make the element
# move to top-left of the page.
gridX=((fr(3), px(8)), (fr(2), px(8))),
# And the condition that there should be no overflow,
# otherwise the text box will try to solve it.
conditions=[Left2Left(), Fit2Width(),
Float2Top()],
# Position of the origin of the element.
# Just to show where it is.
# Has no effect on the position conditions.
yAlign=BOTTOM,
xAlign=LEFT,
leading=5,
fontSize=9,
textFill=blackColor,
strokeWidth=pt(0.5),
fill=color(0.9),
stroke=noColor)
print(e1.style)
newTextBox(
s, # Empty box, will get the overflow
# from e1, if there is any.
name='CSSTextBox2', # Flow reference by element.name
parent=page0,
padding=4,
x=100,
h=200,
conditions=[Left2Left(), Fit2Width(),
Float2Top()],
yAlign=TOP,
fill=whiteColor,
stroke=noColor)
score = doc.solve() # Try to solve all pages.
if score.fails:
print(score.fails)
return doc # Answer the doc for further doing.
def build_html(self, view, origin=None, drawElements=True):
"""Build the HTML/CSS navigation, depending on the pages in the root document.
>>> from random import shuffle
>>> from pagebot.document import Document
>>> from pagebot.elements import newTextBox
>>> doc = Document(title='BarChart', viewId='Site')
>>> view = doc.newView('Mamp')
>>> page = doc[1]
>>> page.title = 'Barchart Test'
>>> page.name = 'index'
>>> barChart = BarChart(parent=page, cssId='ThisBarChartId', xTextAlign=RIGHT, textFill=0.9, fontSize=px(12))
>>> barChart.padding = 1, 4, 1, 4
>>> barChart.margin = 1
>>> data = range(2, 90, 4)
>>> shuffle(data)
>>> barChart.data = data
>>> #tb = newTextBox('This is a bar chart.', parent=barChart)
>>> doc.build()
>>> import os
>>> result = os.system('open %s' % (view.LOCAL_HOST_URL % (doc.name, view.DEFAULT_HTML_FILE)))
>>> #doc.export('_export/BarChartTest')
"""
b = view.context.b
cssClass = self.__class__.__name__
cssCode = """
.%(cssClass)s {
border: %(border)s;
background-color: %(fill)s;
}
.%(cssClass)s div {
font-family: Upgrade-Regular, sans-serif;
font-size: %(fontSize)s;
background-color: %(barFill)s;
text-align: %(textAlign)s;
padding: %(padding)s;
margin: %(margin)s;
color: %(textFill)s;
}
"""
d = dict(cssClass=cssClass,
border=self.css('border', 'black solid 1px'),
fill=color(rgb=self.css('fill', 0xF0F0F0)).css,
barFill=color(rgb=self.css('barFill', 0x2030A0)).css,
textAlign=self.css('xTextAlign', RIGHT),
textFill=color(rgb=self.css('textFill', 0xFF00FF)).css,
fontSize=self.css('fontSize', 10),
padding='%s %s %s %s' % (px(self.pt), px(self.pr), px(self.pb), px(self.pl)),
margin='%s %s %s %s' % (px(self.mt), px(self.mr), px(self.mb), px(self.ml)),
scale=1,
unit='%',
data='%s' % list(self.data),
)
b.addCss(cssCode % d)
b.div(cssClass=cssClass, cssId=self.cssId)
if drawElements:
# If there are child elements, recursively draw them over the pixel image.
self.buildChildElements(view, origin)
if self.drawAfter is not None: # Call if defined
self.drawAfter(self, view, origin)
b._div()
b.addJs("""
var data = %(data)s;
d3.select(".%(cssClass)s")
.selectAll("div")
.data(data)
.enter().append("div")
.style("width", function(d) { return d * %(scale)s + "%(unit)s"; })
.text(function(d) { return d; });
""" % d)
