def buildBlock(self, b):
u"""Build the column. Note that although the "div" suggest that it is just
HTML building there, the method get called both with <b>b</b> as CssBuilder
and as HtmlBuilder. Each builder will filter out the appropriate attributes and
translates it into its own syntax. The HTML tags generated by the article
are set in CSS by the empty statements.
Building the styled 2 text blocks, written out with duplicated values,
as example how this works. See other examples for approaches with more
cascading styled hierarchy."""
# For the showing of this example, the parameters in the column div are hard coded.
# Normally a components should allow access to many of the attributes through the
# class dictionary cls.BLUEPRINT, which is a BluePrint instance.
# See the example “HelloWorldBluePrint” for how this works.
b.div(class_=self.getClassName(), margin=Margin(0, self.C.AUTO, 0, self.C.AUTO),
color=Color('orange'), # Translate HTML/CSS color to more reliable herx value.
width=Perc(70), # Width of 70%
maxwidth=700, minwidth=300, backgroundcolor=Color('#222'),
padding=Em(0.5), fontfamily=BODYFAMILY, fontsize=Em(4), textalign=self.C.CENTER,
lineheight=Em(1.4))
b.text('Hello world.')
b._div()
b.div(class_='caption', color=Color('#888'), margin=Margin(0, self.C.AUTO, 0, self.C.AUTO),
width=Perc(70), # Width of 70%
maxwidth=700, minwidth=300,
paddingleft=Em(0.5), fontfamily=BODYFAMILY, fontsize=Em(0.8), textalign=self.C.CENTER,
lineheight=Em(1.4), fontstyle=self.C.ITALIC)
b.text('Intentionally non-responsive page example. Generated by Xierpa3.')
b._div()
def buildBlockRow(self, b):
s = self.style
b.div(class_=self.C.CLASS_ROW, width=s.rowWidth or Perc(100))
mediaStyles = Media(max=self.C.M_MOBILE_MAX,
display=s.mobileRowDisplay or self.C.BLOCK,
float=self.NONE,
minwidth=0,
width=self.C.AUTO,
paddingleft=0,
paddingright=0,
margin=0)
for index in range(s.count):
# Build all child components of the generic group.
#print index, s.columns, index % s.columns, index % s.columns == s.columns-1
colIndex = index % s.columns
classIndex = '%s%d' % (s.class_ or 'itemGroup', colIndex)
if index % s.columns == 0:
clear = self.C.BOTH
else:
clear = self.C.NONE
b.div(
class_=(self.C.CLASS_ITEM, classIndex),
width=Perc(100 / s.columns),
float=self.C.LEFT,
clear=clear,
media=mediaStyles,
)
for component in self.components:
saveItemStart = component.style.itemStart
component.style.itemStart = index
component.build(b)
component.style.itemStart = saveItemStart
b._div(comment=self.C.CLASS_ITEM)
b._div(comment=self.C.CLASS_ROW)
def buildBlock(self, b):
b.div(class_='navigation',
paddingleft=Em(2),
paddingright=Em(2),
paddingtop=Em(2),
marginbottom=Em(2),
width=Perc(100),
backgroundcolor=Color('#EEE'))
for article in self.adapter.getRankedArticles():
if article.title:
b.a(href='/article-%s' % article.id,
fontsize=Em(1.5),
color=Color('#478FBE'))
b.text(article.title)
b._a()
if article.summary:
b.div(class_='articleSummary',
fontsize=Em(1),
lineheight=Em(1.5),
width=Perc(90))
b.text(article.summary)
b._div()
else:
b.text('No title for article "%s"' % article.id)
b.br()
b._div()
def buildBlock(self, b):
s = self.style
data = self.adapter.getMenu(id='home') # Get data for home page from adapter.
b.block(self) # div.mobileNavigation
b.div(class_=(self.C.CLASS_CONTAINER, self.className), display=s.display,
backgroundcolor=s.backgroundColor, width=s.width,
marginleft=s.marginLeft, marginright=s.marginRight,
paddingleft=s.paddingLeft, paddingright=s.paddingRight,
media=(
Media(max=self.C.M_MOBILE_MAX, display=s.displayMobile),
)
)
b.snippet(self, 'navigation-mobile') # Allow PHP to create a snippet file from this block.
colClass = self.getColClass(s.colWidth)
#b.text(data.loop) # In case there is PHP looping code. Skip for CSS
b.div(class_=colClass, width=self.C.AUTO, float=self.C.NONE, marginleft=Em(0.5),
marginright=Em(0.5), paddingleft=Em(0.5), paddingright=Em(0.5))
b.div(id=self.C.ID_MOBILENAVWRAP, width=s.navWidth, display=s.navDisplay, zindex=s.navZIndex)
b.div(id=self.C.ID_MENUICON, class_=self.C.CLASS_MENU, color=Color(self.C.WHITE),
height=26, width=56, paddingtop=Em(0.6), cursor='pointer',
display=self.C.INLINEBLOCK, marginright=0, top=0, left=0, fontsize=Px(13))
b.img(src=s.menuIconUrl,
padding=0, margin=0, verticalalign=self.C.MIDDLE, maxwidth=Perc(50), height=self.C.AUTO)
b._div(comment='#'+self.C.ID_MENUICON) # #menu-icon
if data.menuItems is None:
b.error('No items in the adapter')
else:
b.ul(id=self.C.ID_NAV, backgroundcolor=s.menuListBackgroundColor,
display=self.C.NONE, clear=self.C.BOTH, position=self.C.ABSOLUTE, top=s.menuHeight-5,
width=Perc(100), zindex=Z(2000), padding=0, margin=0, liststyletype=self.C.NONE, left=0,
textalign=self.C.CENTER)
homeArticle = self.adapter.getArticle(id='home')
for menuId in TX.commaSpaceString2WordList(homeArticle.menu):
menuArticle = self.adapter.getArticle(id=menuId)
url = menuArticle.url
if url is None:
url = '/%s-%s' % (self.C.PARAM_ARTICLE, menuId)
b.li(fontsize=s.listFontSize, paddingtop=Em(1.2), width=Perc(100), liststyletype=self.C.NONE,
borderbottom=Border('1 solid white'), height=36, backgroundcolor=Color('#4890BC'))
b.a(href=url, color=Color('#E8E8E8'))
b.text(menuArticle.name or 'Untitled') # Show full name, otherwise use b.text(menu.tag or menu.name)
b._a()
b._li()
b._ul()
b._div(comment=self.C.ID_MOBILENAVWRAP)
#b.a(href='/home', color='#E8E8E8')
#b.text('Doing by Design')
#b._a()
b._div(comment=self.C.CLASS_12COL)
#b.text(data._loop) # In case there is PHP looping code. Skip for CSS
b._snippet(self) # In case PHP saved this block as snippet.
b._div() # Final comment is automatic from component.selector
b._block(self) # div.mobileNavigation
def demoSvgDrawing2(self, b):
# Draw a responsive image in SVG
#b.div(class_='svgDemo', display=C.NONE, margintop=Em(0.5), marginbottom=Em(0.5),
# media=Media(max=C.M_MOBILE_MAX, display=C.BLOCK))
s = self.style
b.svg(width=s.width, height=s.height)
b.rect(width=Perc(100), height=100, fill=Color('cyan'))
b.rect(y=100, width=Perc(100), height=150, fill=Color('green'))
# Polygons don't work in %, so they cannot be positioned responsive to the container width
b.rect(x=Perc(5),
y=20,
width=Perc(8),
height=200,
fill=Color('yellow'),
fillopacity=0.5)
b.filter('blur', blur=4)
b.rect(x=Perc(20),
y=20,
width=Perc(5),
height=200,
fill=Color('yellow'))
b._filter()
# Neon
b.filter('neon')
b.rect(x=Perc(35),
y=20,
rx=12,
ry=12,
width=32,
height=200,
fill=self.C.NONE,
stroke='red',
strokewidth=6)
b._filter()
b.filter('neon')
b.rect(x=Perc(50),
y=20,
rx=16,
ry=16,
width=32,
height=200,
fill=self.C.NONE,
fillopacity=0.5,
stroke=Color('blue'),
strokewidth=20)
b._filter()
b.filter('frozenLiquid'
) # @@@ Should not change the overall color of the image.
b.rect(x='68%',
y=20,
rx=16,
ry=16,
width=32,
height=200,
fill=Color('#D0D0D0'),
fillopacity=0.5,
stroke=Color('blue'),
strokewidth=20)
b._filter()
b._svg()
def baseComponents(self):
# Import current example site, as anchor for the article files.
from xierpa3.sites import doingbydesign
# Root path where to find the article Simples wiki file for this example page.
articleRoot = TX.module2Path(doingbydesign) + '/files/articles/'
adapter = DbDAdapter(
articleRoot) # Preferred adapter class for articles in this site.
logo = Logo(text='Doing by Design',
fontFamily='Impact',
color=Color('#888'),
fontSize=Em(1.8))
menu = Menu()
mobileNavigation = DbDMobileNavigation()
article = Article()
featuredByImage = FeaturedByImage(start=0,
width=Perc(65.4),
showTitle=False,
showHeadline=False,
showTopic=False)
featuredByText = FeaturedByText(start=0, width=Perc(30.75))
# Containers
top = Top(components=(logo, menu),
media=Media(max=self.C.M_MOBILE_MAX, display=self.C.NONE))
featured = Featured(components=(featuredByImage, featuredByText),
backgroundColor=Color('#262c37'))
section = Section(components=(featuredByImage, ))
mainContent = MainContent(components=article)
footer = Footer(components=(menu))
homePage = Page(name=self.C.TEMPLATE_INDEX,
components=(mobileNavigation, top, featured, section,
mainContent, footer),
css=self.C.URL_CSS,
fonts=self.C.URL_FONTS,
js=self.URL_JAVASCRIPT,
favicon=self.C.URL_FAVICON,
adapter=adapter)
articlePage = Page(name=self.C.TEMPLATE_ARTICLE,
comoonents=(mobileNavigation, top, article, footer),
css=self.C.URL_CSS,
fonts=self.C.URL_FONTS,
js=self.URL_JAVASCRIPT,
favicon=self.C.URL_FAVICON,
adapter=adapter)
return [homePage, articlePage]
def baseComponents(self):
u"""Create a theme site with just one single template home page. Answer a list
of page instances that are used as templates for this site."""
# Create an instance (=object) of components to be placed on the page.
# @start Start index of the item in the selected/sorted set of articles.
# @count Nunmber of items (default is 3). Omit current article in the selection
featured1 = FeaturedByImage(width=Perc(100), count=2)
container = Container(components=featured1, rowMaxWidth=Perc(50))
# Create an instance (=object) of the page, containing the featured components.
# The class is also the page name in the url.
homePage = Page(class_=self.C.TEMPLATE_INDEX,
components=container,
title=self.TITLE,
fonts=self.URL_FONTS)
# Answer a list of types of pages for this site. In this case just one template.
return [homePage]
def buildBlock(self, b):
u"""Build the container-div with a row-div inside."""
s = self.style
b.div(class_=self.getClassName(),
paddingleft=s.paddingLeft,
paddingright=s.paddingRight,
backgroundcolor=s.backgroundColor,
media=Media(max=self.C.M_MOBILE_MAX,
paddingleft=0,
paddingright=0))
b.div(
class_=self.C.CLASS_ROW,
width=s.rowWidth,
margin=s.rowMargin,
float=s.rowFloat,
overflow=s.rowOverflow,
maxwidth=s.rowMaxWidth,
minwidth=s.rowMinWidth,
media= # Container row has width 100% in media!
Media(max=self.C.M_MOBILE_MAX,
width=Perc(100),
minwidth=s.rowMinWidthMobile,
maxwidth=s.rowMaxWidthMobile,
float=s.rowFloat),
)
for component in self.components:
component.build(b)
b._div(comment='.' + self.C.CLASS_ROW) # Comment class at end of row
b._div(comment='.' +
self.getClassName()) # Comment the class at end of container
def buildBlock(self, b):
u"""Build a content base class. Inherited by specific HelloWorld... classes
that define the method <b>self.helloWorldText(b). In this example the CSS parameter
are still defined inside the block. Different from the real usage of BluePrint API parameter,
that allow modification from including components or inheriting components."""
b.div(class_=self.getClassName(),
margin=Margin(0, self.C.AUTO, 0, self.C.AUTO),
width='70%',
maxwidth=700,
minwidth=300,
backgroundcolor='#222',
padding=Em(0.5),
fontfamily=BODYFAMILY,
fontsize=Em(4),
textalign=self.C.CENTER,
lineheight=Em(1.4))
self._helloWorldText(b)
b._div()
b.div(class_=self.C.CLASS_CAPTION,
color=Color('#888'),
margin=Margin(0, self.C.AUTO, 0, self.C.AUTO),
width=Perc(70),
maxwidth=700,
minwidth=300,
paddingleft=Em(0.5),
fontfamily=BODYFAMILY,
fontsize=Em(0.8),
textalign=self.C.CENTER,
lineheight=Em(1.4),
fontstyle=self.C.ITALIC)
b.text(
'Intentionally non-responsive page example. Generated by Xierpa3.')
b._div()
def buildDocumentation(self, b):
u"""Builder of the documentation of self. It is the main method generating this
documentation page."""
b.page(self)
b.div(class_=self.C.CLASS_DOCUMENTATION, width=Perc(100))
self.buildDocumentationBlock(b)
b._div(comment=self.C.CLASS_DOCUMENTATION)
b._page(self)
def buildBlock(self, b):
colClass = TX.col2Class('graph')
s = self.style
b.block(self)
b.div(class_=colClass,
float=s.graphFloat or self.LEFT,
width=s.graphWidth or Perc(100))
b._div(comment=colClass)
b._block(self)
def baseComponents(self):
# Create the article adapter
# Import articles from the doingbydesign site, sharing the article files.
from xierpa3.sites import doingbydesign
# Root path where to find the article Simplex wiki file for this example page.
articleRoot = TX.module2Path(doingbydesign) + '/files/articles/'
adapter = SimpleSiteAdapter(articleRoot)
# Header
logo = Logo()
menu = Menu()
header = Header(
components=(logo, menu),
mobileContainerDisplay=self.C.NONE,
doc_mobileContainerDisplay=u'Header is not visible for mobile')
mobileNavigation = MobileNavigation(
) # Is container by itself. Change??
# Create the component instances
article = Article(width=Perc(68))
featuredByImage = FeaturedByImage(count=1, width=Perc(30))
featuredByText = FeaturedByText(start=1, count=3, width=Perc(30))
# Create the single page instance, containing the number of components
mainHome = Container(components=(article, featuredByImage,
featuredByText))
# Footer
footer = Footer(components=(menu, ),
containerBackgroundColor=self.FOOTERBGCOLOR)
# The class is also the page name in the url.
homePage = Page(
class_=self.C.TEMPLATE_INDEX,
name=self.C.TEMPLATE_INDEX,
adapter=adapter,
#components=(mobileNavigation, header, mainHome, footer),
#components=(header, mainHome, footer),
components=Container(header),
fonts=self.URL_FONTS,
title=self.TITLE,
css=self.C.URL_CSS)
return [homePage]
def baseComponents(self):
u"""Create the component instances"""
# Import current example site, as anchor for the article files.
from xierpa3.sites.examples import textilearticles
# Root path where to find the article Simples wiki file for this example page.
articleRoot = TX.module2Path(textilearticles) + '/files/articles/'
adapter = ArticleAdapter(
articleRoot) # Preferred adapter class for articles in this site.
# Create navigation instance, to choose between the available articles.
menu = Menu(adapter=adapter)
menuContainer = Container(components=menu)
# Create the article component to contain articles answered by the adapter.
#article = SimplexArticle(adapter=adapter)
article = Article(width=Perc(70),
adapter=adapter,
showPoster=True,
splitChapters=False)
articleSideBar = ArticleSideBar(width=Perc(22), adapter=adapter)
featuredArticles = FeaturedByImage(
width=Perc(22),
adapter=adapter,
# Example to overwrite the default BluePrint parameter titleColor
titleColor=Color('red'))
#featuredByImage = FeaturedByText(widht=Perc(22), adapter=adapter)
# Make main page container for the article column
container = Container(components=(
article,
articleSideBar,
featuredArticles,
#featuredByImage
))
# The class is also the page name in the url.
homePage = Page(class_=self.C.TEMPLATE_INDEX,
name=self.C.TEMPLATE_INDEX,
fonts=self.URL_FONTS,
title=self.TITLE,
css=self.C.URL_CSS,
components=(menuContainer, container))
return [homePage]
def baseStyle(self):
s = self.style # Answer root style without selector
s.addStyle('body',
fontfamily=s.bodyFamily,
fontsize=self.CSS_BODYSIZE,
backgroundcolor=self.CSS_BGCOLOR,
lineheight=self.CSS_BODYLEADING)
s.addStyle('h1, h2, h3, h4, h5, p.lead', fontfamily=self.CSS_HEADFONT)
s.addStyle('h6', fontfamily=s.bodyFamily)
s.addStyle('div', float=self.FLOAT_LEFT, width=Perc(100))
s.addStyle('a, a:link', color=self.CSS_ALINKCOLOR)
s.addStyle('a:visited', color=self.CSS_AVISITEDCOLOR)
s.addStyle('a:hover', color=self.CSS_AHOVERCOLOR)
s.addStyle('a:active', color=self.CSS_AACTIVECOLOR)
s.addStyle('div.' + self.C.CLASS_1COL,
margin=Em(0.5),
float=self.C.LEFT,
width='%d%%' % (98 / 12))
s.addStyle('div.' + self.C.CLASS_2COL,
margin=Em(0.5),
float=self.C.LEFT,
width='%d%%' % (98 * 2 / 12))
s.addStyle('div.' + self.C.CLASS_4COL,
margin=Em(0.5),
float=self.C.LEFT,
width='%d%%' % 30) #(98 * 4 / 12))
s.addStyle('div.' + self.C.CLASS_8COL,
margin=Em(0.5),
float=self.C.LEFT,
width='%d%%' % (98 * 8 / 12))
s.addStyle('div.' + self.C.CLASS_12COL,
margin=Em(0.5),
float=self.C.LEFT,
width=Perc(100))
s.addStyle('div.' + self.C.CLASS_LAST, marginright=Em(0))
s.addStyle('ul', display=self.C.BLOCK)
s.addStyle('li', display=self.C.BLOCK)
s.addStyle('ol', liststyletype=self.C.DECIMAL)
return s
def buildColumn(self, b):
u"""Build the article column. The article data is derived from the adapter by matching with the hard coded url pattern
(@$url@ field in the article source) or with the @b.getCurrentArticleId()@, which is @/article-[articleId]@ in the
url of the page."""
s = self.style
article = self.adapter.getArticle(id=b.getCurrentArticleId(),
url=b.e.path)
b.div(
class_=self.getClassName(),
width=Perc(70), #s.width,
float=self.C.LEFT,
paddingRight=s.
gutter, #marginright=s.gutter, # Gutter between main column and article side bar.
marginright=0,
media=Media(max=self.C.M_MOBILE_MAX,
width=self.C.AUTO,
float=self.C.NONE,
paddingleft=Em(0.5),
paddingright=Em(0.5),
marginright=0),
)
if article is None:
# If not article defined, then this must be a call for building the CSS.
# Make the switch to run as style builder.
self.buildArticleStyle(b)
else:
self.buildArticleData(b, article)
# Build blog response form, if required.
if s.blogResponse and article is not None and article.blogresponse == 'True':
b.div(class_=self.C.CLASS_BLOGRESPONSE,
width=Perc(100),
backgroundcolor=Color('#888'))
# TODO: Add blog response form here.
b.text('[Develop Blog Response here] ' * 20)
b._div(comment=self.C.CLASS_BLOGRESPONSE)
b._div()
def buildColumn(self, b):
u"""Build the social media component."""
s = self.style
if not self.C.useOnline():
b.text('No Social Media links when off-line.')
elif s.twitterAccount or s.facebookAccount:
b.div(class_=self.C.CLASS_SOCIALMEDIA,
display=self.C.BLOCK,
float=s.float or self.C.LEFT,
width=s.width or Perc(100),
media=Media(max=self.C.M_MOBILE_MAX,
display=s.mobileDisplay))
# getUrl does not seem to work with twitter. Script only tests http or https.
if s.twitterAccount:
b.div(id="twitter", float=self.C.LEFT)
b.a(href="https://twitter.com/share",
data_href=b.getUrl(),
class_="twitter-share-button",
data_lang="en",
data_via="doingbydesign",
data_count="none",
data_related="anywhere")
b.text(s.twitterLabel)
b._a()
b.script()
b.text(
"""!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');"""
)
b._script()
b._div()
if s.facebookAccount:
b.div(id="fb-root", float=self.C.LEFT)
b._div()
b.script()
b.text("""(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
""")
b._script()
b.div(class_="fb-share-button",
float=self.C.LEFT,
data_href=b.getUrl(),
data_type="button_count")
b._div()
b._div()
def buildBlock(self, b):
b.div(class_='navigation',
marginbottom=Em(2),
width=Perc(100),
backgroundcolor=Color('#EEE'))
for article in self.adapter.getRankedArticles():
if article.title:
b.a(href='/article-%s' % article.id,
fontsize=Em(0.8),
color=Color('#888'))
b.text(article.title)
b._a()
else:
b.text('No title for article "%s"' % article.id)
b.br()
b._div()
def buildBlock(self, b):
b.div(class_=self.getClassName(),
margin=Margin(0, self.C.AUTO, 0, self.C.AUTO),
width=Perc(40),
maxwidth=700,
minwidth=300,
backgroundcolor=Color('#DDD'),
padding=Em(0.5),
fontfamily=BODYFAMILY,
textalign=self.C.CENTER)
# Still doing content and page identifiers directly, without adapter, in this example.
b.text(' | ')
for pageId in HelloWorldPages.PAGES:
# Making a reference to the page class is enough to build the url.
b.a(href='/' + pageId, fontsize=Em(1), color=Color('#444'))
b.text(pageId.capitalize()
) # Make simple label in the menu from page id..
b._a()
b.text(' | ')
b._div()
def buildFeatured(self, b, articles):
s = self.style
for article in articles:
if not article.poster:
continue # Only show articles that have some kind of poster image.
b.div(
class_=self.CLASS_FEATURED_ITEM,
display=s.itemDisplay,
clear=s.itemClear,
marginbottom=s.itemMarginBottom,
width=s.itemWidth,
)
b.a(href='/%s-%s' % (self.C.PARAM_ARTICLE, article.id))
if s.showLevel:
b.h5(color=s.levelColor,
fontsize=s.levelSize,
fontweight=s.levelWeight,
margintop=s.levelMarginTop)
b.text(article.level or s.genericLevel)
b.text(' level')
b._h5()
b.img(class_=self.C.CLASS_AUTOWIDTH,
width=Perc(60),
src=article.poster)
if s.showName:
b.h4(color=s.nameColor,
fontsize=s.nameSize,
fontweight=s.nameWeight,
lineheight=s.nameLineHeight)
b.text(article.name)
b._h4()
if s.showTopic and article.topic is not None: # Elements must be defined in global style
b.text(article.topic)
b._a()
if b.e.form[self.C.PARAM_DEBUG]:
b.text( ` article `)
b._div(comment=self.CLASS_FEATURED_ITEM)
class ExampleColumn(Column):
# Get Constants->Config as class variable, so inheriting classes can redefine values.
C = Column.C
BLUEPRINT = BluePrint(
# Page stuff
pageBackgroundColor=Color('#EEE'),
doc_pageBackgroundColor=u'Page background color.',
# Responsive stuff
minWidth=300,
doc_minWidth='Column minimal width.',
minWidthMobile=0,
doc_minWidthMobile=u'Column minimal width for mobile.',
maxWidth=700,
doc_maxWidth='Column maximal width.',
maxWidthMobile=C.AUTO,
doc_maxWidthMobile='Column maximal width for mobile',
# Column stuff
fontFamlily=BODYFAMILY,
doc_fontFamily=u'Column body font family.',
fontSize=Em(1),
doc_fontSize=u'Column body font size.',
fontSizeMobile=Em(1.2),
doc_fontSizeMobile=u'Column body font size for mobile.',
lineHeight=Em(1.4),
doc_lineHeight=u'Column body leading.',
margin=Margin(0, C.AUTO, 0, C.AUTO),
doc_margin=u'Column margin.',
marginMobile=0,
doc_marginMobile=u'Column margin mobile',
color=Color('#222'),
doc_color='Column text color.',
backgroundColor=Color('#FFF'),
doc_backgroundColor='Column background color.',
width=Perc(50),
doc_width=u'Column width.',
widthMobile=C.AUTO,
doc_widthMobile=
u'Column width for mobile, shoud always be “auto” with the row construction.',
padding=Em(2),
doc_padding=u'Column margin in the page.',
paddingMobile=Em(1.4),
doc_paddingMobile=u'Column margin in the page for mobile.',
# h1
h1FontFamily=HEADFAMILY,
doc_h1FontFamily=u'Column h1 font family.',
h1FontSize=Em(1.6),
doc_h1FontSize=u'Column h1 font size',
h1LineHeight=Em(1.1),
doc_h1LineHeight=u'Column h1 leading',
h1Color=Color('#666'),
doc_h1Color=u'Column h1 color.',
h1MarginBottom=Em(0.5),
doc_h1MarginBottom=u'Column h1 margin bottom',
# h2
h2FontFamily=HEADFAMILY,
doc_h2FontFamily=u'Column h2 font family.',
h2FontSize=Em(1.4),
doc_h2FontSize=u'Column h2 font size',
h2LineHeight=Em(1.2),
doc_h2LineHeight=u'Column h2 leading',
h2Color=Color('#888'),
doc_h2Color=u'Column h2 color.',
h2Style=C.ITALIC,
doc_h2Style=u'Column h2 style',
h2MarginTop=Em(1),
doc_h2MarginTop=u'Column h2 margin top',
h2MarginBottom=Em(0.5),
doc_h2MarginBottom=u'Column h2 margin bottom',
# p
textIndent=Em(1),
doc_textIndent=u'Indent of first line of paragraph.',
textFirstIndent=0,
doc_textFirstIndent=u'Indent of first paragraph after another element.',
# p.end
textLastIndent=0,
doc_textLastIndent=u'Indent of last paragraph before another element',
textEndMarginTop=Em(0.5),
doc_textEndMarginTop=
u'Margin top of last paragraph before another element.',
textEndMarginBottom=Em(0.5),
doc_textEndMarginBottom=
u'Margin bottom of last paragraph before another element.',
# img
imgMarginTop=Em(0.5),
doc_imgMarginTop=u'Image margin top',
imgMarginBottom=Em(0.5),
doc_imgMarginBottom=u'Image margin bottom',
# blockquote.pullQuote
pullQuoteFontFamily=BODYFAMILY,
doc_pullQuoteFontFamily=u'Pull quote font family.',
pullQuotePadding=Margin(Em(0.5), Em(1)),
doc_pullQuotePadding=u'Pull quote padding.',
pullQuoteSize=Em(1.2),
doc_pullQuoteSize=u'Pull quote font size.',
pullQuoteLineHeight=Em(1.3),
doc_pullQuoteLineHeight=u'Pull quote line height.',
pullQuoteMarginTop=Em(0.5),
doc_pullQuoteMarginTop=u'Pull quote margin top.',
pullQuoteMarginBottom=Em(0.5),
doc_pullQuoteMarginBottom=u'Pull quote margin bottom',
pullQuoteStyle=C.ITALIC,
doc_pullQuoteStyle=u'Pull quote style',
pullQuoteBackgroundColor=Color('#EEE'),
doc_pullQuoteBackgroundColor=u'Pull quote background color.',
pullQuoteColor=Color('#333'),
doc_pullQuoteColor=u'Pull quote color.',
pullQuoteBorder=None,
doc_pullQuoteBorderu=
'Pull quote border.', #Border('solid', 2, Color('#E1E2E2')),
)
def buildBlock(self, b):
u"""Build the column. Note that although the "div" suggest that it is just
HTML building there, the method get called both with <b>b</b> as CssBuilder
and as HtmlBuilder. Each builder will filter out the appropriate attributes and
translates it into its own syntax. The HTML tags generated by the article
are set in CSS by the empty statements."""
s = self.style # Get compile style from cascading blue prints of inheriting classes.
b.div(
class_=s.classColumn,
color=s.color,
margin=s.margin,
width=s.columnWidth,
maxwidth=s.maxWidth,
minwidth=s.minWidth,
backgroundcolor=s.backgroundColor,
fontfamily=s.fontFamily,
fontsize=s.fontSize,
lineheight=s.lineHeight,
padding=s.padding,
# Remove margins on mobile, showing the column on full screen width.
media=Media(max=self.C.M_MOBILE_MAX,
margin=s.marginMobile,
float=self.C.NONE,
fontsize=s.fontSizeMobile,
lineheight=s.lineHeight,
padding=s.paddingMobile,
width=s.widthMobile,
maxwidth=s.maxWidthMobile,
minwidth=s.minWidthMobile),
)
# Since the self.adapter.getArticle answers an article that already
# includes XHTML tags, we cannot do the styling there. In order to
# define the unique CSS styles, a blank document content is created
# for the CssBuilder to evaluate, so we have all the definitions inside
# div.column, in case they are used in the article.
# Note that this is in conflict with the purpose of components, who
# should not know about the type of builder that they are talking to.
# In future this will be solved by supplying more default style parameters
# to the component, that include the styles of tags that are not used
# in the main building.
# See also the code for components/article, which includes a _model.txt
# document for this purpose.
if b.isType(self.C.TYPE_CSS):
self.buildCssColumnTemplate(b)
else:
data = self.adapter.getArticle(index=4,
selector=self.C.SELECTOR_FEATURED)
# Build the headline without style attribute, as these are already defined
# in the self.buildCssColumnTemplate call.
b.h1(fontfamily=s.h1FontFamily,
fontsize=s.h1FontSize,
lineheight=s.h1LineHeight)
b.text(data.headline)
b._h1()
if data.poster:
# Build the image that came with the featured article, if it exists.
# Make it class autowidth to solve the width="100%" incompatibility
# between browsers.
b.img(src=data.poster,
class_=s.imgClass,
maxwidth=s.imgMaxWidth,
minwidth=s.imgMinWidth,
margintop=s.imgMarginTop,
marginbottom=s.imgMarginBottom)
# Output the rest of the featured article.
b.text(data.item)
# Add some more volume to the blurb article.
data = self.adapter.getArticles(count=4)
for article in data.items:
b.h2(fontfamily=s.h2FontFamily,
fontsize=s.h2FontSize,
lineheight=s.h2LineHeight)
b.text(article.headline)
b._h2()
b.text(article.text)
# Add reference about the content of this page
b.hr()
b.div(class_='colophon',
fontsize=Em(0.8),
color=s.color,
fontfamily=BODYFAMILY,
lineheight=Em(1.4))
b.text(
'The text and image selection on this page is blurb, created by Filibuster.'
)
b._div()
# Add reference to sponsored Webtype webfonts.
b.a(href='//webtype.com',
color=s.color,
fontfamily=BODYFAMILY,
fontsize=Em(0.8),
lineheight=Em(1.4),
target='external')
b.text(
'The typefaces in this example %s and %s are sponsored by <Webtype>'
% (BODYFAMILY, HEADFAMILY))
b._a()
b._div()
def buildCssColumnTemplate(self, b):
u"""Build the single CSS for all expected tags in an article that is answered
by <b>self.adapter</b>. We cannot check on that here, since the content may
vary and even is hidden by e.g. calls to a PHP adapter."""
s = self.style
b.h1(fontfamily=s.h1FontFamily,
color=s.h1Color,
fontsize=s.h1FontSize,
lineheight=s.h1LineHeight,
marginbottom=s.h1MarginBottom)
# Headling made by BlurbAdapter
b._h1()
b.h2(fontfamily=s.h2FontFamily,
fontstyle=s.h2Style,
color=s.h2Color,
fontsize=s.h2FontSize,
lineheight=s.h2LineHeight,
margintop=s.h2MarginTop,
marginbottom=s.h2MarginBottom)
# Headling made by BlurbAdapter
b._h2()
b.img(margintop=s.imageMarginTop, marginbottom=s.imageMarginBottom)
b.p(textindent=s.textIndent, fontfamily=BODYFAMILY)
# Main paragraphs have an indent.
b._p()
b.p(class_='start', textindent=s.textFirstIndent)
# The start paragraph (the element before was not a <p>) has no indent.
b._p()
b.p(class_='end',
marginbottom=s.textLastMarginBottom,
margintop=s.textLastMarginTop,
textindent=s.textLastIndent)
# Mark the end paragraph (the element after is not a <p>) in case something
# special needs to be done, e.g. change the marginbottom.
# @@@ TODO: Mark as p.end preceding <blockquote> too.
b._p()
# Italic blockquotes with an indent and backgroundcolor.
b.blockquote(class_=self.C.CLASS_PULLQUOTE,
padding=s.pullQuotePadding,
fontsize=s.pullQuoteSize,
fontfamily=s.pullQuoteFontFamily,
fontstyle=s.pullQuoteStyle,
lineheight=s.pullQuoteLineHeight,
margintop=s.pullQuoteMarginTop,
marginbottom=s.pullQuoteMarginBottom,
border=s.pullQuoteBorder,
backgroundcolor=s.pullQuoteBackgroundColor,
color=s.pullQuoteColor)
b._blockquote()
class FeaturedByImageList(FeaturedBase):
u"""The *FeaturedByImageList* feature component builds a vertical list if thumbnails,
level and optional names of the selected article chapters."""
# Get Constants->Config as class variable, so inheriting classes can redefine values.
C = FeaturedBase.C
LEVELSIZE = Em(0.9)
LEVELCOLOR = Color('#6294D0')
NAMECOLOR = Color('#A32C2D')
BLUEPRINT = BluePrint(
FeaturedBase.BLUEPRINT,
showLevel=False,
doc_showLevel=u'Boolean flag to show the level field of the article.',
showName=False,
doc_showName=u'Boolean flag to show the name field of the article.',
showTopic=True,
doc_showTopic=u'Boolean flag to show the topic of the article.',
# Selection stuff
start=0,
doc_start=u'Index of first selected item to feature.',
count=3,
doc_count=u'Number of selected items to feature.',
# Col block stuff
colDisplay=C.BLOCK,
doc_colDisplay=u'Column display type.',
colClear=C.BOTH,
doc_colClear='Column float clear.',
colMarginBottom=Em(0.5),
doc_colMarginBottom='Column margin bottom.',
colColor=None,
doc_colColor=u'Column color',
colMarginRight=Perc(1.8),
doc_colMarginLeft=u'Column margin left.',
colMarginLeft=0,
colFloat=C.LEFT,
colMinHeight=1,
# Layout stuff
colWidth=4,
doc_colWidth=u'Default amount of columns for this component.',
# Item stuff
itemClear=C.NONE,
itemDisplay=C.LEFT,
itemWidth=Perc(55),
# Thumbnail image stuff
thumbDisplay=C.BLOCK,
# Level stuff, handle local fontsize and lineheight here, related to the item size
genericLevel='Generic',
doc_genericLevel=
u'Show this generic level name if level attitbute is undefined in adapter data.',
levelColor=Color(LEVELCOLOR),
doc_levelColor=u'Level color.',
levelSize=LEVELSIZE,
doc_levelSize=u'Level font size.',
levelWeight=C.BOLD,
doc_levelWeight=u'Level font weight.',
levelMarginTop=Em(0.5),
doc_levelMarginTop=u'Level margin top.',
# Optional name stuff, handle local fontsize and lineheight here, related to the item sizes
nameColor=Color(NAMECOLOR),
nameSize=Em(0.9),
nameLineHeight=Em(1.2),
nameWeight=C.BOLD,
# Mobile stuff
mobileDisplay=C.NONE,
mobilePaddingTop=Em(2),
mobilePaddingBottom=Em(0.5),
mobilePaddingLeft=Em(0.5),
mobilePaddingRight=Em(0.5),
mobileMarginTop=Em(2),
mobileMarginBottom=Em(0.5),
mobileMarginLeft=Em(0.5),
mobileMarginRight=Em(0.5),
mobileFloat=C.NONE,
mobileWidth=C.AUTO,
)
def buildFeatured(self, b, articles):
s = self.style
for article in articles:
if not article.poster:
continue # Only show articles that have some kind of poster image.
b.div(
class_=self.CLASS_FEATURED_ITEM,
display=s.itemDisplay,
clear=s.itemClear,
marginbottom=s.itemMarginBottom,
width=s.itemWidth,
)
b.a(href='/%s-%s' % (self.C.PARAM_ARTICLE, article.id))
if s.showLevel:
b.h5(color=s.levelColor,
fontsize=s.levelSize,
fontweight=s.levelWeight,
margintop=s.levelMarginTop)
b.text(article.level or s.genericLevel)
b.text(' level')
b._h5()
b.img(class_=self.C.CLASS_AUTOWIDTH,
width=Perc(60),
src=article.poster)
if s.showName:
b.h4(color=s.nameColor,
fontsize=s.nameSize,
fontweight=s.nameWeight,
lineheight=s.nameLineHeight)
b.text(article.name)
b._h4()
if s.showTopic and article.topic is not None: # Elements must be defined in global style
b.text(article.topic)
b._a()
if b.e.form[self.C.PARAM_DEBUG]:
b.text( ` article `)
b._div(comment=self.CLASS_FEATURED_ITEM)
def _buildFeaturedText(self, b, data):
u"""Build the featured item. If @self.style.itemRandom@ is **True**, then select a random item from the list.
If there is no **data.item** available, then ignore this method."""
return # TODO: fix this
if not data.items:
return
s = self.style
if s.itemRandom:
item = choice(data.items)
else:
item = data.items[0]
if s.label:
b.h2(fontsize=s.labelSize, color=s.labelColor, margintop=s.labelMarginTop,
marginbottom=s.labelMarginBottom, lineheight=s.labelLineHeight,
media=(
Media(min=self.C.M_TABLET_MIN, max=self.C.M_TABLET_MAX, fontsize=s.tabletLabelSize, color='red'),
Media(max=self.C.M_MOBILE_MAX, color='blue')
))
b.text(s.label)
b._h2()
b.a(href='/%s-%s' % (self.C.PARAM_ARTICLE, item.id), class_=self.C.CLASS_NAME)
b.h2(fontsize=s.nameSize, fontweight=s.nameWeight, lineheight=s.nameLineHeight,
color=s.nameColor, marginbottom=s.nameMarginBottom, display=s.nameDisplay,
margintop=s.nameMarginTop)
b.text(item.name)
b._h2()
b._a()
if s.showPoster:
b.a(href='/%s-%s' % (self.C.PARAM_ARTICLE, item.id), class_=self.C.CLASS_NAME)
b.img(width=s.posterWidth, src=item.poster, float=self.C.LEFT, padding=0,
margin=Margin(Em(0.5), Em(0.5), 0, 0),
media=Media(max=self.C.M_MOBILE_MAX, display=self.C.NONE)
)
b._a()
if s.showLevel:
b.h5(class_=self.C.CLASS_LEVEL, color=s.levelColor, fontsize=s.levelSize, fontweight=s.levelWeight,
margintop=s.levelMarginTop, lineheight=s.levelLineHeight)
b.text(item.level or s.genericLevel)
b.text(' level')
b._h5()
if item.author: # Test on text
b.a(href='/%s-%s' % (self.C.PARAM_AUTHOR, item.author), class_=self.C.CLASS_AUTHOR)
b.h5(fontsize=s.authorSize, fontweight=s.authorWeight, color=s.authorColor,
lineheight=s.authorLineHeight, display=s.authorDisplay)
b.text('By %s' % item.author)
b._h5()
b._a()
if s.showCategory and item.category: # Text on text
b.a(href='/%s-%s' % (self.C.PARAM_CATEGORY, item.category), class_=self.C.CLASS_CATEGORY)
b.h5(fontsize=s.categorySize, fontweight=s.categoryWeight, lineheight=s.categoryLineHeight,
color=s.categoryColor, margintop=Em(1), display=self.C.BLOCK)
b.text(item.category)
b._h5()
b._a()
if item.summary is not None: # Test on element. Summary elements tag must be defined by generic style.
b.div(class_='featuredSummary', clear=self.C.BOTH, float=self.C.LEFT, width=Perc(100),
color=s.summaryColor, fontsize=s.summarySize, lineheight=s.summaryLineHeight,
margintop=s.summaryMarginTop, marginbottom=s.summaryMarginBottom)
if isinstance(item.summary, basestring):
b.text(item.summary)
else:
self.buildElement(b, item.summary)
b._div()
class FeaturedByImage(FeaturedBase):
u"""The @FeaturedByImage@ feature component, shows a featured article by its poster image
on full width of the component.
If there is no poster image defined in the article meta data, then the first image in the article
is used here. The image is a link to the article page.
Respectively the binary flags @BluePrint@ *showLevel*, *showTitle* and *showTopic*
will enable the level of the article (as defined in the article source @$level@),
the article title (@$title@) and topic (@$topic), of set to @True@."""
# Get Constants->Config as class variable, so inheriting classes can redefine values.
C = FeaturedBase.C
LEVELSIZE = Em(0.9)
AUTHORSIZE = Em(1.2)
CATEGORYSIZE = Em(1.4)
AUTHORCOLOR = Color('#828487')
CATEGORYCOLOR = AUTHORCOLOR
LABELCOLOR = AUTHORCOLOR
NAMECOLOR = Color('#66696C')
SUMMARYCOLOR = Color('#202020')
BLUEPRINT = BluePrint(
FeaturedBase.BLUEPRINT,
# Layout selection parameters.
showPoster=True,
doc_showPoster=
u'Boolean flag to indicate if the poster of the article should be shown.',
showLevel=False,
doc_showLevel=u'Boolean flag to show the level field of the article.',
showTitle=True,
doc_showTitle=u'Boolean flag to show the title of the article.',
showHeadline=True,
doc_showHeadline=u'Boolean flag to show the headline of the article.',
showTopic=True,
doc_showTopic=u'Boolean flag to show the topic of the article.',
# Selection stuff
start=0,
doc_start=u'Index of first selected item to feature.',
count=3,
doc_count=u'Number of selected items to feature.',
# Container component layout stuff
width=Perc(30),
doc_width=u'Overall width of the component.',
widthMobile=Perc(100),
doc_widthMobile=u'Overall width of the component for mobile.',
backgroundColor=None,
doc_backgroundColor=u'Background color of the component.',
display=C.BLOCK,
doc_display=u'Display status of the component',
displayMobile=C.BLOCK,
doc_displayMobile=u'Display status of the component for mobile.',
float=C.LEFT,
doc_float=u'Float status of the component.',
floatMobile=C.LEFT,
doc_floatMobile=u'Float status of the component for mobile.',
padding=0,
doc_padding=u'Padding of the component content.',
# Item/article stuff
itemDisplay=C.BLOCK,
doc_itemDisplay=u'Display type of the item/article image cell.',
itemBackgroundColor=Color('#E0E0E0'),
doc_itemBackgroundColor=
u'Background color of the item/article image cell.',
itemClear=C.NONE,
doc_itemClear=u'Floating clear of item/article image cell.',
itemMarginBottom=Em(0.5),
doc_itemMarginBottom=u'Margin bottom of item/article image cell.',
itemPadding=Padding(Em(0.5)),
doc_itemPadding=u'Padding of the item/article image cell.',
# Level
levelFormat='%s level',
doc_levelFormat=
u'Python string pattern as level indicator. Takes level string as parameter.',
genericLevel=None,
doc_genericLevel=
u'Generic level flag, overruling the article level field.',
levelColor=Color('#222'),
doc_levelColor=u'Color of the level indicator.',
levelSize=Em(0.8),
doc_levelSize=u'Font size of the level indicator.',
levelWeight=C.BOLD,
doc_levelWeight=u'Font weight of the level indicator.',
levelMarginTop=Em(0.2),
doc_levelMarginTop=u'Margin top of the level indicator.',
levelMarginBottom=Em(0.2),
doc_levelMarginBottom=u'Margin bottom of the level indicator.',
# Title
titleFontFamily=None,
doc_titleFontFamily=u'Font family of the article title.',
titleColor=('#444'),
doc_titleColor=u'Color of the article title.',
titleSize=Em(1.1),
doc_titleSize=u'Font size of the article title.',
titleWeight=C.NORMAL,
doc_titleWeight=u'Font weight of the article title.',
titleLineHeight=Em(1.2),
doc_titleLineHeight=u'Line height of the article title.',
# Headline
headlinePaddingTop=Em(0.1),
doc_headlinePaddingTop=u'Padding between image and headline.',
headlineFontFamily=None,
doc_headlineFontFamily=u'Font family of the article headline.',
headlineColor=('#444'),
doc_headlineColor=u'Color of the article headline.',
headlineSize=Em(1.8),
doc_headlineSize=u'Font size of the article headline.',
headlineWeight=C.NORMAL,
doc_headlineWeight=u'Font weight of the article headline.',
headlineLineHeight=Em(1.2),
doc_headlineLineHeight=u'Line height of the article headline.',
# Topic
topicColor=Color('#444'),
doc_topicColor=u'Color of the article topic.',
topicSize=Em(0.8),
doc_topicSize=u'Font size of the article topic.',
topicWeight=C.NORMAL,
doc_topicWeight=u'Font weight of the article topic.',
topicLineHeight=Em(1.2),
doc_topicLineHeight=u'Line height of the article topic.',
)
def buildFeatured(self, b, articles):
s = self.style
b.div(
class_=self.getClassName(),
width=s.width,
backgroundcolor=s.backgroundColor,
display=s.display,
float=s.float,
padding=s.padding,
media=Media(max=self.C.M_MOBILE_MAX,
width=s.widthMobile,
display=s.displayMobile,
float=s.floatMobile),
)
for article in articles:
if s.showPoster and article.poster:
self.buildFeaturedImage(b, article)
b._div()
def buildFeaturedImage(self, b, article):
s = self.style
b.div(
class_=self.C.CLASS_FEATUREDITEM,
display=s.itemDisplay,
backgroundcolor=s.itemBackgroundColor,
padding=s.itemPadding,
clear=s.itemClear,
marginbottom=s.itemMarginBottom,
margintop=s.itemMarginTop,
)
b.a(href='/%s-%s' % (self.C.PARAM_ARTICLE, article.id))
b.img(class_=(self.C.CLASS_MAXWIDTH, 'featuredImage'),
height=s.AUTO,
src=article.poster)
if s.showLevel or s.genericLevel:
# Format the level indicator
b.h5(class_=self.C.CLASS_LEVEL,
color=s.levelColor,
fontsize=s.levelSize,
fontweight=s.levelWeight,
margintop=s.levelMarginTop,
marginbottom=s.levelMarginBottom)
b.text(s.levelFormat % (article.level or s.genericLevel))
b._h5()
if s.showTitle and article.title:
# Format the article title
b.h4(class_=self.C.CLASS_TITLE,
fontfamily=s.titleFontFamily,
color=s.titleColor,
fontsize=s.titleSize,
fontweight=s.titleWeight,
lineheight=s.titleLineHeight)
b.text(article.title)
b._h4()
if s.showHeadline and article.headline:
# Format the article headline
b.h4(class_=self.C.CLASS_HEADLINE,
fontfamily=s.headlineFontFamily,
color=s.headlineColor,
fontsize=s.headlineSize,
fontweight=s.headlineWeight,
lineheight=s.headlineLineHeight,
paddingtop=s.headlinePaddingTop)
b.text(article.headline)
b._h4()
if s.showTopic and article.topic is not None: # Elements must be defined in global style
b.h5(class_=self.C.CLASS_TOPIC,
color=s.topicColor,
fontsize=s.topicSize,
fontweight=s.topicWeight,
lineheight=s.topicLineHeight)
if isinstance(article.topic, basestring):
b.text(article.topic)
else:
self.buildElement(b, article.topic)
b._h5()
b._a()
b._div(comment=self.C.CLASS_FEATUREDITEM)
class MobileNavigation(Navigation):
u"""The **MobileNavigation** only shows in mobile screen mode."""
# Get Constants->Config as class variable, so inheriting classes can redefine values.
C = Navigation.C
BLUEPRINT = BluePrint(
colWidth=12,
# Display stuff
display=C.NONE,
doc_display=u'Display type',
displayMobile=C.BLOCK,
doc_displayMobile=u'Display type for mobile.',
# Container stuff
width=None,
doc_width=u'Mobile navigation container width.',
minWidth=0,
doc_minWidth=u'Mobile navigation container minimal width',
# Navigation stuff
backgroundColor=Color('#323A47'),
doc_backgroundColor='Mobile navigation background color.',
fontSize=Em(1.4),
doc_fontSize=u'Mobile navigation font size.',
lineHeight=Em(1.1),
doc_lineHeight=u'Mobile navigation leading.',
marginLeft=0,
doc_marginLeft=u'Mobile navigation margin left.',
marginRight=0,
doc_marginRight=u'Mobile navigation margin right.',
paddingLeft=0,
doc_paddingLeft=u'Mobile navigation padding left.',
# Row
rowClass=C.CLASS_12COL,
doc_rowClass=u'Class of the row.',
# Item stuff
start=0,
doc_start=
u'Start of the index of selected pages. Suggestion to the adapter.',
count=20,
doc_count=u'Preferred/max amount of pages, suggestion to the adapter.',
menuHeight=Px(44),
doc_menuHeight=u'Menu height.',
menuMargin=0,
doc_menuMargin=u'Menu margin.',
menuBackgroundColor=Color('#323A47'),
doc_menuBackgroundColor=u'Menu background color.',
menuZIndex=Z(1000),
doc_menuZIndex='Menu Z index',
menuBorderBottom=Border('1 solid white'),
doc_menuBorderBottom=u'Menu border bottom.',
menuWidth=Perc(100),
doc_menuWidth=u'Menu width.',
# Nav stuff
navWidth=Perc(30),
doc_navWidth='Navigation width.',
navDisplay=C.INLINEBLOCK,
doc_navDisplay=u'Navigation display type.',
navZIndex=Z(1000),
doc_navZIndex='Navigation Z index.',
# List item stuff
listFontSize=None,
# Menu
menuType=C.LIST,
doc_menuType=
u'Default is plain navigation list. Set to “menu” for menu.',
menuListBackgroundColor=Color('#828487'),
menuIconUrl=
'//data.doingbydesign.com.s3.amazonaws.com/_images/menu_icon.png',
doc_menuIconUrl=u'Url of the menu icon',
# Link stuff
linkColor=C.WHITE,
doc_linkColor=u'Link color',
)
def buildBlock(self, b):
s = self.style
menuArticles = self.adapter.getMenu(
id=self.C.ID_HOME) # Get data for home page from adapter.
b.div(class_=(self.C.CLASS_CONTAINER, self.className),
display=s.display,
backgroundcolor=s.backgroundColor,
width=s.width,
marginleft=s.marginLeft,
marginright=s.marginRight,
paddingleft=s.paddingLeft,
paddingright=s.paddingRight,
media=(Media(max=self.C.M_MOBILE_MAX,
display=s.displayMobile), ))
b.snippet(self, 'navigation-mobile'
) # Allow PHP to create a snippet file from this block.
colClass = self.getColClass(s.colWidth)
#b.text(data.loop) # In case there is PHP looping code. Skip for CSS
b.div(class_=colClass,
width=self.C.AUTO,
float=self.C.NONE,
marginleft=Em(0.5),
marginright=Em(0.5),
paddingleft=Em(0.5),
paddingright=Em(0.5))
b.div(id=self.C.ID_MOBILENAVWRAP,
width=s.navWidth,
display=s.navDisplay,
zindex=s.navZIndex)
b.div(id=self.C.ID_MENUICON,
class_=self.C.CLASS_MENU,
color=Color(self.C.WHITE),
height=26,
width=56,
paddingtop=Em(0.6),
cursor='pointer',
display=self.C.INLINEBLOCK,
marginright=0,
top=0,
left=0,
fontsize=Px(13))
b.img(src=s.menuIconUrl,
padding=0,
margin=0,
verticalalign=self.C.MIDDLE,
maxwidth=Perc(50),
height=self.C.AUTO)
b._div(comment='#' + self.C.ID_MENUICON) # #menu-icon
if menuArticles is None:
b.error('No items in the adapter')
else:
b.ul(id=self.C.ID_NAV,
backgroundcolor=s.menuListBackgroundColor,
display=self.C.NONE,
clear=self.C.BOTH,
position=self.C.ABSOLUTE,
top=s.menuHeight - 5,
width=Perc(100),
zindex=Z(2000),
padding=0,
margin=0,
liststyletype=self.C.NONE,
left=0,
textalign=self.C.CENTER)
homeArticle = self.adapter.getArticle(id=self.C.ID_HOME)
for menuArticle in menuArticles:
url = menuArticle.url
if url is None:
url = '/%s-%s' % (self.C.PARAM_ARTICLE, menuArticle.id)
b.li(fontsize=s.listFontSize,
paddingtop=Em(1.2),
width=Perc(100),
liststyletype=self.C.NONE,
borderbottom=Border('1 solid white'),
height=36,
backgroundcolor=Color('#4890BC'))
b.a(href=url, color=Color('#E8E8E8'))
b.text(
menuArticle.name or 'Untitled'
) # Show full name, otherwise use b.text(menu.tag or menu.name)
b._a()
b._li()
b._ul()
b._div(comment=self.C.ID_MOBILENAVWRAP)
#b.a(href='/home', color='#E8E8E8')
#b.text('Doing by Design')
#b._a()
b._div(comment=self.C.CLASS_12COL)
#b.text(data._loop) # In case there is PHP looping code. Skip for CSS
b._snippet(self) # In case PHP saved this block as snippet.
b._div() # Final comment is automatic from component.selector
class ArticleSideBar(ArticleColumn):
u"""The *ArticleSideBar* class implements a component that can show meta information
of the current article, such as the chapter navigation (if the boolean flag
@self.style.splitChapters@ is set to @true@), or links to the @article.featured@
articles. The standard functions in the @ArticleSideBar@ can be turned on/off by
boolean style flags. E.g. @self.style.showChapterNavigation@."""
# Get Constants->Config as class variable, so inheriting classes can redefine values.
C = ArticleColumn.C
BLUEPRINT = BluePrint(
homeLink=True,
doc_homeLink=
u'If True, add the link to the home page above the list of featured articles.',
# Layout stuff
# TODO: 70%+20% doesn't add to 100, but cannot be larger. Margins adding up?
width=Perc(20),
doc_width=u'Width of the main column inside the row.',
widthMobile=Perc(100),
doc_widthMobile=u'Width of the main column inside the row for mobile.',
# Column
padding=Em(0.35),
doc_padding=u'Padding of the main column container.',
backroundColor=Color('white'),
doc_backgroundColor=u'Background color of side bar container.',
# Chapter navigation
showChapterNavigation=False,
doc_showChapterNavigation=
u'Boolean flag to indicate that chapter navigation must be shown. If the article source has chapters, but the main article component @article.style.splitChapters@ is @False@, then in-page navigation will be made.',
chapterLabel='Chapters',
doc_chapterLabel=u'Title of chapter navigation, shown as h2 heading.',
chapterNameSize=Em(1.2),
doc_chapterNameSize=u'Font size of chapter title.',
showChapterSummaryOnMax=10, # Not show summary if more than 10 chapters
mobileChapterButtonColor=Color(C.WHITE),
doc_mobileChapterButtonColor=u'Color of chapter button for mobile.',
mobileChapterButtonBackgroundColor=Color('#444'),
doc_mobileChapterButtonBackgroundColor=
u'Background color of chapter button for mobile.',
)
def getArticleUrlId(self, b):
u"""Answer the url parameter of the current page from @b.e.form[self.C.PARAM_ARTICLE]@."""
return b.e.form[self.C.PARAM_ARTICLE] # /article-xxx
def buildColumn(self, b):
u"""Build meta information from the article. @@@ Add to style that calling site can change
the order."""
s = self.style
article = self.adapter.getArticle(id=b.getCurrentArticleId(),
url=b.e.path)
b.div(
class_=self.getClassName(),
width=s.width,
float=self.C.LEFT,
backgroundcolor=s.backroundColor,
padding=s.padding,
media=Media(max=self.C.M_MOBILE_MAX,
width=s.widthMobile,
display=self.C.BLOCK,
float=self.C.NONE),
)
if article is None:
self.buildArticleSideBarStyle(b)
else: # There is a valid article selection
self.buildArticleFeatures(b, article)
if s.showChapterNavigation:
# If chapters are split, then add the chapter navigation here.
#self.buildMobileChapterNavigation(b, articleData)
self.buildChapterNavigation(b, article)
#if s.showFootNotes:
# self.buildFootNotes(b, article)
b._div(comment=self.getClassName())
def buildArticleFeatures(self, b, article):
u"""Build the links to the featured article of the current article as
stored in @article.featured@."""
s = self.style
featuredArticles = []
if article is not None and article.featured:
for featured in article.featured:
featuredArticle = self.adapter.getArticle(id=featured)
# Check if found and not referring to current article.
if not featuredArticle in (None, article):
featuredArticles.append(featuredArticle)
if s.homeLink:
b.p()
b.a(href='/index')
b.text('Home')
b._a()
b._p()
# If there are featured articles
if featuredArticles:
b.h3()
b.text('Featured')
b._h3()
for featuredArticle in featuredArticles:
b.p()
b.a(href='%s-%s' % (self.C.PARAM_ARTICLE, featuredArticle.id))
b.text(featuredArticle.title)
b._a()
b._p()
def buildArticleSideBarStyle(self, b):
u"""Build the styles for the articles side bar. # @@@ Clean up, using model for article side bar?"""
s = self.style
# <h2>Featured</h2>
b.h3()
b._h3()
# <ul><li>...</li></ul>
b.ul()
b.li(backgroundcolor=s.mobileChapterButtonColor)
# <a>Chapter name</a>
b.h2(fontsize=Em(2),
lineheight=Em(1.2),
marginbottom=Em(0.2),
margintop=Em(0.2))
b.a(fontsize=s.summaryNameSize, color=s.mobileChapterButtonColor)
b._a()
b._h2()
b._li()
b._ul()
b._div(comment=self.C.CLASS_MOBILECHAPTERNAVIGATION
) # Article mobile chapter navigation
# <div class="chapterNavigation">
b.div(class_=self.C.CLASS_CHAPTERNAVIGATION,
marginbottom=Em(0.5),
display=s.mobileContainerDisplay,
media=Media(max=self.C.M_MOBILE_MAX, display=self.C.NONE))
b.h4(fontsize=Em(1.1))
b._h4()
b.ul()
b.li()
# <a>Chapter name</a>
# TODO: h2 margintop not working?
b.a(fontsize=s.summaryNameSize, color=s.summaryNameColor)
b.h2(fontsize=s.chapterNameSize,
color=s.chapterNameColor,
lineheight=Em(1.2),
marginbottom=Em(0.2),
margintop=Em(0.4))
b._h2()
b._a()
b._li()
b._ul()
def buildMobileChapterNavigation(self, b, article):
s = self.style
chapters = article.chapters
if chapters and len(chapters) > 1:
b.div(class_=self.C.CLASS_MOBILECHAPTERNAVIGATION)
b.ul()
for index, chapter in enumerate(chapters):
b.li()
b.a(
class_=self.C.CLASS_NAME,
href='/%s-%s/%s-%s' % (self.C.PARAM_ARTICLE, article.id,
self.C.PARAM_CHAPTER, index),
)
chapterTitle = chapter.find(
'./meta/title') # @@@ Add this as adapter query
if chapterTitle is None: # No title, add a default chapter title (not in the right style)
b.text('Chapter %d' % index)
else:
self.buildElement(b, chapterTitle)
b._a()
b._li()
b._ul()
b._div()
def buildChapterNavigation(self, b, article):
u"""If there is more than one chapter in the article, automatically create a chapter
navigation in the sidebar. The title and the summary are links to a page of the same
article, for the defined chapter index."""
s = self.style
chapters = article.chapters
if chapters and len(chapters) > 1:
b.div(class_=self.C.CLASS_CHAPTERNAVIGATION)
b.h4()
b.text(s.chapterLabel)
b._h4()
b.ul()
for index, chapter in enumerate(chapters):
b.li(margintop=Em(0.5))
b.a(
class_=self.C.CLASS_NAME,
href='/%s-%s/%s-%s' % (self.C.PARAM_ARTICLE, article.id,
self.C.PARAM_CHAPTER, index),
)
# TODO: derive chapter title in the proper way from <h2> using re
chapterTitle = chapter.find('./meta/title')
if chapterTitle == -1: # No title, add a default chapter title (not in the right style)
b.text('Chapter %d' % (index + 1))
else:
self.buildElement(b, chapterTitle)
if len(chapters) < s.showChapterSummaryOnMax:
summary = chapter.find(
'./meta/summary') # @@@ Add this as adapter query
if summary != -1:
self.buildElement(b, summary)
b._a()
b._li()
b._ul()
b._div() # .chapterNavigation
def XXXbuildFootNotes(self, b, article):
u"""Build the list of footnotes with links to the position in the article where they are defined."""
s = self.style
chapterIndex = self.getChapterIndex(b, article)
if article.footnotes:
footnotes = article.footnotes[
chapterIndex] # Get footnotes of this chapter
if footnotes:
b.div(class_=self.C.CLASS_FOOTNOTES)
b.h4()
b.text(s.footnoteLabel)
b._h4()
b.ol(
) # Not displaying the index number here, how to solve with style?
for index, footnote in enumerate(footnotes):
b.li(fontsize=Em(0.9), color='red')
b.a(href='#fnref:footnoteRef%d' % (index + 1),
name='fnref:footnote%d' % (index + 1))
# Hard copy the index number, as <ol> doesn't show now.
b.text(
'%d | %s %s' %
(index + 1, footnote.text, s.footnoteArrow
or u'↩')) # Process element, instead of plain text.
b._a()
b._li()
b._ol()
b._div() # .footnotes
def buildArticleTop(self, b, article, chapterIndex):
u"""Build the top of the article: type, title, author, etc. on the first page, if index is **0**.
For all other pages build a smaller version of the top."""
s = self.style
class_ = self.C.CLASS_ARTICLETOP
b.div(
class_=class_,
float=self.C.LEFT,
width=Perc(100),
paddingtop=Em(0.5),
media=Media(max=self.C.M_MOBILE_MAX,
width=self.C.AUTO,
float=self.C.NONE,
paddingleft=0,
paddingright=0),
)
if article is not None:
# Poster image
if chapterIndex == 0 and s.showPoster:
b.img(class_=self.C.CLASS_AUTOWIDTH,
src=article.poster,
marginleft=self.C.AUTO,
marginright=self.C.AUTO)
# Article category
if chapterIndex == 0 and article.category: # Text on text
b.a(href='/%s-%s' % (self.C.PARAM_CATEGORY, article.category))
b.h5(fontsize=s.categorySize,
lineheight=s.categoryLineHeight,
color=s.categoryColor,
fontweight=s.categoryWeight,
margintop=Em(1),
display=self.C.BLOCK)
b.text(', '.join(article.category))
b._h5()
b._a()
# Article title or name (on respectively the first chapter page or the rest of the pages.
title = article.name or article.title
if title:
if chapterIndex == 0: # Show large title on the chapter first page of the article
b.h2(class_='articleTitle0',
fontsize=s.titleSize,
lineheight=s.titleLineHeight,
color=s.titleColor,
marginbottom=Em(0.2),
display=self.C.BLOCK)
b.text(title)
b._h2()
else: # Show smaller title on the rest of the pages
b.h2(class_='articleTitle1',
fontsize=s.nameSize,
lineheight=s.nameLineHeight,
color=s.nameColor,
marginbottom=Em(0.2),
display=self.C.BLOCK)
b.text(title)
b._h2()
# Author
if chapterIndex == 0 and article.author: # Test if there is an author defined.
b.h5(fontsize=s.authorSize,
fontweight=s.authorWeight,
authorcolor=s.authorColor,
display=self.C.BLOCK)
b.a(href='/%s-%s' % (self.C.PARAM_AUTHOR, article.author))
b.text('By %s' % article.author)
b._a()
if article.authorEmail:
b.text(' ' + article.authorEmail)
b._h5()
# Chapter title
"""
chapterTitle = self.adapter.getChapterTitleByIndex(chapterIndex, articleData)
if chapterTitle:
if chapterIndex == 0: # Show large title on the chapter first page of the article
b.h3(class_='chapterTitle0', fontsize=s.chapterTitleSize0, color=s.chapterTitleColor0,
margintop=s.chapterTitleMarginTop0, marginbottom=s.chapterTitleMarginBottom0)
b.text(chapterTitle)
b._h3()
else: # Other chapter pages
b.h3(class_='chapterTitle1', fontsize=s.chapterTitleSize1, color=s.chapterTitleColor1,
margintop=s.chapterTitleMarginTop1, marginbottom=s.chapterTitleMarginBottom1)
b.text(chapterTitle)
b._h3()
"""
b._div(comment=class_)
def buildBlock(self, b):
u"""Build the column. Note that although the "div" suggest that it is just
HTML building there, the method get called both with **b** as CssBuilder
and as HtmlBuilder. Each builder will filter out the appropriate attributes and
translates it into its own syntax. The HTML tags generated by the article
are set in CSS by the empty statements.
Building the styled 2 text blocks, written out with duplicated values,
as example how this works. See other examples for approaches with more
cascading styled hierarchy."""
b.div(
class_=self.getClassName(),
margin=Margin(0, self.C.AUTO),
color=Color('yellow'), # Translate color name to hex
width=Perc(90),
maxwidth=900,
minwidth=300,
backgroundcolor=Color('#222'),
paddingtop=Em(0.5),
paddingbottom=Em(0.5),
fontfamily=self.CSS_BODYFONT,
fontsize=Em(3),
textalign=self.C.CENTER,
lineheight=Em(1.2),
# Now define the @media parameters, where they belong: inside the definition of the element.
# The media parameters are collected and sorted for output at the end of the CSS document.
media=(
# Example for table, show lighter background, change color of text and smaller size.
Media(
min=self.C.M_TABLET_MIN,
max=self.C.M_TABLET_MAX,
backgroundcolor=Color('#444'),
color=Color('orange'), # Translate color name to hex.
margin=0,
fontsize=Em(2),
width=self.C.AUTO,
float=self.C.NONE),
# For mobile, even more lighter background, change color of text and smaller size.
Media(
max=self.C.M_MOBILE_MAX,
backgroundcolor=Color('#AAA'),
color=Color('red'), # Translate color name to hex.
margin=0,
fontsize=Em(2),
width=self.C.AUTO,
float=self.C.NONE)))
b.text('Hello, world!')
# One of the advantages of using a real programming language to generate
# HTML/CSS code, is that repetitions can be written as a loop. Not necessary
# fewer lines, but more expandable and less redundant distribution of
# knowledge in the code.
# This generates the same result as:
# b.div(class_='c1', display=self.NONE, fontsize=Em(0.5), color=self.WHITE,
# media=Media(min=self.M_DESKTOP_MIN, display=self.BLOCK))
# b.text('Responsive desktop mode.')
# b._div()
# b.div(class_='c2', display=self.NONE, fontsize=Em(0.5), color=self.WHITE,
# media=Media(min=self.M_TABLET_MIN, max=self.M_TABLET_MAX, display=self.BLOCK))
# b.text('Responsive tablet mode.')
# b._div()
# b.div(class_='c3', display=self.NONE, fontsize=Em(0.5), color=self.BLACK,
# media=Media(max=self.M_MOBILE_MAX, display=self.BLOCK))
# b.text('Responsive mobile mode.')
# b._div()
#
data = (
# class, minWidth, maxWidth, text
('c1', self.C.M_DESKTOP_MIN, None, 'Responsive desktop mode.'),
('c2', self.C.M_TABLET_MIN, self.C.M_TABLET_MAX,
'Responsive tablet mode.'),
('c3', None, self.C.M_MOBILE_MAX, 'Responsive mobile mode..'),
)
for class_, minWidth, maxWidth, text in data:
b.div(class_=class_,
display=self.C.NONE,
fontsize=Em(0.5),
color=Color(self.C.WHITE),
background=self.C.NONE,
media=Media(min=minWidth, max=maxWidth,
display=self.C.BLOCK))
b.text(text)
b._div()
b._div()
b.div(
class_=self.C.CLASS_CAPTION,
color=Color('#888'),
width=Perc(100),
maxwidth=700,
minwidth=300,
margin=Margin(0, self.C.AUTO),
paddingtop=Em(0.5),
fontfamily=self.CSS_CAPTIONFONT,
fontsize=Em(0.8),
textalign=self.C.CENTER,
lineheight=Em(1.4),
fontstyle=self.C.ITALIC,
)
b.text('Responsive page generated by Xierpa3.')
b._div()
class FeaturedByImage(FeaturedBase):
u"""The @FeaturedByImage@ feature component, shows a featured article by its poster image
on full width of the component.
If there is no poster image defined in the article meta data, then the first image in the article
is used here. The image is a link to the article page.
Respectively the binary flags @BluePrint@ *showLevel*, *showTitle* and *showTopic*
will enable the level of the article (as defined in the article source @$level@),
the article title (@$title@) and topic (@$topic), of set to @True@."""
# Get Constants->Config as class variable, so inheriting classes can redefine values.
C = FeaturedBase.C
BLUEPRINT = BluePrint(FeaturedBase.BLUEPRINT,
# Selection stuff
start=0, doc_start=u'Index of first selected item to feature.',
count=3, doc_count=u'Number of selected items to feature.',
# Container component layout stuff
width=Perc(30), doc_width=u'Overall width of the component.',
widthMobile=Perc(100), doc_widthMobile=u'Overall width of the component for mobile.',
backgroundColor=None, doc_backgroundColor=u'Background color of the component.',
display=C.BLOCK, doc_display=u'Display status of the component',
displayMobile=C.BLOCK, doc_displayMobile=u'Display status of the component for mobile.',
float=C.LEFT, doc_float=u'Float status of the component.',
floatMobile=C.LEFT, doc_floatMobile=u'Float status of the component for mobile.',
padding=0, doc_padding=u'Padding of the component content.',
# Item/article stuff
itemDisplay=C.BLOCK, doc_itemDisplay=u'Display type of the item/article image cell.',
itemBackgroundColor=Color('#E0E0E0'), doc_itemBackgroundColor=u'Background color of the item/article image cell.',
itemClear=C.NONE, doc_itemClear=u'Floating clear of item/article image cell.',
itemMarginBottom=Em(0.5), doc_itemMarginBottom=u'Margin bottom of item/article image cell.',
itemWidth=Perc(100), doc_itemWidth=u'Width of item/article image cell.',
itemPadding=Padding(Em(0.35)), doc_itemPadding=u'Padding of the item/article image cell.',
# Level
showLevel=False, doc_showLevel=u'Boolean flag to show the level field of the article.',
levelFormat='%s level', doc_levelFormat=u'Python string pattern as level indicator. Takes level string as parameter.',
genericLevel=None, doc_genericLevel=u'Generic level flag, overruling the article level field.',
levelColor=Color('#222'), doc_levelColor=u'Color of the level indicator.',
levelSize=Em(0.8), doc_levelSize=u'Font size of the level indicator.',
levelWeight=C.BOLD, doc_levelWeight=u'Font weight of the level indicator.',
levelMarginTop=Em(0.2), doc_levelMarginTop=u'Margin top of the level indicator.',
levelMarginBottom=Em(0.2), doc_levelMarginBottom=u'Margin bottom of the level indicator.',
# Title
showTitle=True, doc_showTitle=u'Boolean flag to show the title of the article.',
titleColor=('#444'), doc_titleColor=u'Color of the article title.',
titleSize=Em(1.1), doc_titleSize=u'Font size of the article title.',
titleWeight=C.NORMAL, doc_titleWeight=u'Font weight of the article title.',
titleLineHeight=Em(1.2), doc_titleLineHeight=u'Line height of the article title.',
# Topic
showTopic=True, doc_showTopic=u'Boolean flag to show the topic of the article.',
topicColor=Color('#444'), doc_topicColor=u'Color of the article topic.',
topicSize=Em(0.8), doc_topicSize=u'Font size of the article topic.',
topicWeight=C.NORMAL, doc_topicWeight=u'Font weight of the article topic.',
topicLineHeight=Em(1.2), doc_topicLineHeight=u'Line height of the article topic.',
)
# Col stuff ??? NOT USED
'''
colWidth=8, doc_colWidth=u'Default amount of columns for this component.',
colMarginRight=Perc(1.8), doc_colMarginRight=u'Div.col margin right.',
colMarginLeft=0, doc_colMarginLeft=u'Div.col margin left.',
colFloat=C.LEFT, doc_colFloat=u'Div.col float',
colMinHeight=1, doc_colMinHeight=u'Div.col minimal height.',
colDisplay=C.BLOCK, doc_colDisplay=u'Div.col display type.',
# Mobile stuff
mobileDisplay=C.NONE,
mobilePaddingTop=Em(2),
mobilePaddingBottom=Em(0.5),
mobilePaddingLeft=Em(0.5),
mobilePaddingRight=Em(0.5),
mobileMarginTop=Em(2),
mobileMarginBottom=Em(0.5),
mobileMarginLeft=Em(0.5),
mobileMarginRight=Em(0.5),
mobileFloat=C.NONE,
mobileWidth=C.AUTO,
'''
def buildFeatured(self, b, articles):
s = self.style
b.div(class_=self.getClassName(), width=s.width, backgroundcolor=s.backgroundColor,
display=s.display, float=s.float, padding=s.padding,
media=Media(max=self.C.M_MOBILE_MAX, width=s.widthMobile,
display=s.displayMobile, float=s.floatMobile),
)
for article in articles.items:
if article.poster:
self.buildFeaturedImage(b, article)
b._div()
def buildFeaturedImage(self, b, article):
s = self.style
b.div(class_=self.C.CLASS_FEATUREDITEM, display=s.itemDisplay,
backgroundcolor=s.itemBackgroundColor, padding=s.itemPadding,
clear=s.itemClear, marginbottom=s.itemMarginBottom, margintop=s.itemMarginTop,
width=s.itemWidth,
)
b.a(href='/%s-%s' % (self.C.PARAM_ARTICLE, article.id))
b.img(class_=(self.C.CLASS_AUTOWIDTH, 'featuredImage'), src=article.poster)
if s.showLevel or s.genericLevel:
b.h5(class_=self.C.CLASS_LEVEL, color=s.levelColor, fontsize=s.levelSize,
fontweight=s.levelWeight,
margintop=s.levelMarginTop, marginbottom=s.levelMarginBottom)
# Format the level indicator
b.text(s.levelFormat % (article.level or s.genericLevel))
b._h5()
if s.showTitle:
b.h4(class_=self.C.CLASS_TITLE, color=s.titleColor, fontsize=s.titleSize,
fontweight=s.titleWeight, lineheight=s.titleLineHeight)
b.text(article.title)
b._h4()
if s.showTopic and article.topic is not None: # Elements must be defined in global style
b.h5(class_=self.C.CLASS_TOPIC, color=s.topicColor, fontsize=s.topicSize,
fontweight=s.topicWeight, lineheight=s.topicLineHeight)
if isinstance(article.topic, basestring):
b.text(article.topic)
else:
self.buildElement(b, article.topic)
b._h5()
b._a()
b._div(comment=self.C.CLASS_FEATUREDITEM)
class Logo(Component):
# Get Constants->Config as class variable, so inheriting classes can redefine values.
C = Component.C
BLUEPRINT = BluePrint(
# Layout stuff
colWidth=4,
doc_colWidth=u'Default amount of columns for this component.',
maxWidth=Perc(100),
doc_maxWidth=u'Maximal width of the component',
minWidth=Perc(100),
doc_minWidth=u'Minimal width of the component',
# Logo data can be set as through text/style attribute or through the adapter.
# The optional url creates a link from the logo, e.g. to the home page.
text=None,
doc_text=u'Optional text of the logo. Otherwise query the adapter.',
src=None,
doc_src=u'Optional src for logo image. Otherwise query the adapter.',
url=None,
doc_url=u'Optional url for logo link. Otherwise query the adapter.',
# Logo stuff
width=280,
doc_logoWidth=u'Logo width',
backgroundColor=None,
doc_backgroundColor=u'Background color of the logo component.',
height=C.AUTO,
doc_height=u'Logo height',
marginTop=0,
doc_marginTop=u'Logo margin top',
marginLeft=0,
doc_marginLeft=u'Logo margin left',
marginRight=Perc(1.8),
doc_marginRight=u'Logo margin right',
marginBottom=0,
doc_marginBottom=u'Logo margin bottom',
logoFloat=C.LEFT,
doc_logoFloat=u'Logo div float',
# H2 heading, in case style.text is defined and not style.src (for an image)
fontFamily=C.LOGOFAMILY,
doc_fontFamily=u'h2 font family',
fontSize=Em(2.9),
doc_fontSize=u'h2 Logo font size',
lineHeight=Em(1.4),
doc_lineHeight=u'h2 leading',
fontWeight=C.BOLD,
doc_fontWeight=u'h2 font weight',
fontStyle=None,
doc_fontStyle=u'h2 font style',
paddingTop=Em(0.2),
doc_paddingTop=u'h2 padding top',
paddingBottom=Em(0.2),
doc_paddingBottom=u'h2 padding bottom',
color=Color('#323A47'),
doc_color=u'h2 color',
)
def buildBlock(self, b):
s = self.style
colClass = self.getColClass(s.colWidth)
b.div(class_=colClass,
float=s.logoFloat,
marginleft=s.marginLeft,
backgroundcolor=s.backgroundColor,
marginright=s.marginRight,
margintop=s.marginTop,
marginbottom=s.marginBottom)
# @text: text to show instead of the logo image.
# @url: url of href link. If None no link is made
# @src: url of the image source.
data = self.adapter.getLogo()
if s.text:
data.text = s.text
data.src = None
if s.src:
data.src = s.src
data.text = None
if s.url:
data.url = s.url
if data.url:
b.a(href=data.url)
if data.src:
b.img(src=data.src,
width=s.width,
maxwidth=s.maxWidth,
height=s.height)
else:
b.h2(
fontsize=s.fontSize,
lineheight=s.lineHeight,
fontfamily=s.fontFamily,
fontWeight=s.h2Weight,
fontStyle=s.h2Style,
color=s.color,
paddingtop=s.paddingTop,
paddingbottom=s.paddingBottom,
)
b.text(data.text)
b._h2()
if data.url:
b._a()
b._div(comment=colClass)
class SimpleTypeSpecimenColumn(Column):
# Get Constants->Config as class variable, so inheriting classes can redefine values.
C = Column.C
MAXWIDTH = Px(1100)
# Load @fontface fonts for this example from www.webtype.com
SPECIMENFAMILY = '"Benton Modern RE"'
BODYFAMILY = '"Benton Sans RE", Verdana, sans'
HEADFAMILY = SPECIMENFAMILY + ', Georgia, serif'
BLUEPRINT = BluePrint(
# Column stuff
fontFamily=BODYFAMILY,
doc_fontFamily=u'Column main font family',
width=MAXWIDTH,
doc_width=u'Column width.',
widthMobile=Perc(100),
doc_widthMobile=u'Column width for mobile.',
minWidth=0,
doc_minWidth=u'Column minimal width.',
minWidthMobile=0,
doc_minWidthMobile=u'Column minimal width for mobile.',
maxWidth=MAXWIDTH,
doc_maxWidth=u'Column maximal width.',
maxWidthMobile=C.AUTO,
doc_maxWidthMobile=u'Column maximal width for mobile.',
margin=Margin(0, C.AUTO, 0, C.AUTO),
doc_margin=u'Column margin.',
marginMobile=0,
doc_marginMobile=u'Column margin for mobile.',
padding=0,
doc_padding='Column padding.',
fontSize=Em(1),
doc_fontSize=u'Column main font size.',
lineheight=Em(1.4),
doc_lineheight=u'Column main leading.',
color=Color(0),
doc_color=u'Column text color, default is black.',
backgroundColor=Color('#FFF'),
doc_backgroundColor='Column background color, default is white.',
# Row
rowPadding=Em(2),
doc_rowPadding=u'Row padding.',
# Speciment stuff
specimentSizeIndicator=13,
doc_specimenSizeIndicator=u'Size of the size indicator.',
specimentSmall=18,
doc_specimentSmall=u'Smallest font size of the specimen.',
specimenLarge=37,
doc_specimenLarge=u'Largest font size of the specimen.',
specimenWidth=Perc(100),
doc_specimenWidth=u'Specimen line width.',
specimentLineHeight=Em(1.2),
doc_specimentLineHeight=
u'Specimen line height, relative to waterfall font size.',
# Size label
sizeLabelColor=Color('#888'),
doc_sizeLabelColor='Size label color, default is mid-gray.',
# h1
h1FontFamily=HEADFAMILY,
doc_h1FontFamily=u'h1 font family.',
h1FontSize=Em(2),
doc_h1FontSize=u'h1 font size',
h1LineHeight=Em(1.4),
doc_h1LineHeight=u'h1 leading',
h1MarginBottom=Em(0.5),
doc_h1MarginBottom=u'h1 margin bottom',
)
def buildBlock(self, b):
u"""Build the specimen column"""
s = self.style # Copy from inherited BluePrints with redefined user attributes.
b.div(
class_=self.C.CLASS_COLUMN,
color=s.color,
margin=s.margin,
width=s.width,
maxwidth=s.maxWidth,
minwidth=s.minWidth,
backgroundcolor=s.backgroundColor,
padding=s.padding,
fontfamily=s.fontFamily,
fontsize=s.fontSize,
lineheight=s.lineheight,
# Remove margins on mobile, showing the column on full screen width.
media=Media(max=self.C.M_MOBILE_MAX,
margin=s.marginMobile,
width=s.widthMobile,
maxwidth=s.maxWidthMobile,
minwidth=s.minWidthMobile),
)
# Add div.row to allow padding, without making the main column div
# grow outside the parent boundaries.
b.div(class_=self.C.CLASS_ROW, padding=s.rowPadding)
b.h1(fontfamily=s.h1FontFamily,
fontsize=s.h1FontSize,
lineheight=s.h1LineHeight,
marginbottom=s.h1MarginBottom)
b.text('WebType ' + self.SPECIMENFAMILY[1:-1])
b._h1()
for n in range(s.specimentSmall, s.specimenLarge):
b.div(class_='specimen%02d' % n,
width=s.specimenWidth,
fontsize=Px(n),
lineheight=s.specimentLineHeight,
fontfamily=self.HEADFAMILY)
b.span(class_='size%02d' % n,
fontsize=Px(s.specimentSizeIndicator),
color=s.sizeLabelColor,
fontfamily=self.BODYFAMILY)
b.text('%d px' % n)
b._span()
b.text(u'ABCDEFGHIJKLM abcdefghijklm €$@#123')
b._div()
# Add reference to sponsored Webtype webfonts.
b.hr()
b.a(href='//webtype.com',
color=s.color,
fontfamily=self.BODYFAMILY,
fontsize=Em(0.8),
lineheight=Em(1.4),
target='external')
b.text(
'The typefaces in this example %s and %s are sponsored by <Webtype>'
% (self.BODYFAMILY, self.HEADFAMILY))
b._a()
# Close the row
b._div(comment=self.C.CLASS_ROW)
b._div()
