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 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 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):
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."""
s = self.style
b.div(
class_=self.getClassName(),
color=s.color,
margin=s.margin,
width=s.width,
backgroundcolor=s.backgroundColor,
fontsize=s.fontSize,
padding=s.padding,
textalign=self.C.LEFT,
# 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,
width=self.C.AUTO,
backgroundcolor=s.backgroundColorTablet,
margin=0,
float=self.C.NONE,
color=s.colorTablet,
fontsize=s.fontSizeTablet),
# For mobile, even more lighter background, change color of text and smaller size.
Media(max=self.C.M_MOBILE_MAX,
margin=0,
width=self.C.AUTO,
float=self.C.NONE,
backgroundcolor=s.backgroundColorMobile,
color=s.colorMobile,
fontsize=s.fontSizeMobile),
))
b.h1(fontsize=s.h1Size)
b.text('Headline')
b._h1()
b.p()
b.text(self.LORUMIPSUM)
b._p()
b._div()
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:
self._buildFeaturedText(b, article)
b._div()
def addMedia(self, selector, min=None, max=None, expression=None, **kwargs):
u"""
Create a new Media instance for @media content. The parameters @condition, @min and @max are expected
in the arguments as parameters for the @media. They are ignored in the content of the @media block.
Set to same selector and component, so CSS knows context.
Answer the created media style for convenience.
"""
media = Media(selector, self, min, max, expression, **kwargs)
self.media.append(media)
return media
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 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.
# Import current example site, as anchor for the article files.
adapter = self.getSiteAdapter()
logo = Logo()
menu = Menu()
navigation = Navigation()
article = Article(
showPoster=False
) # No poster inside the article. We use the PosterHead component.
articleSideBar = ArticleSideBar(showChapterNavigation=True)
articlesList = ArticlesList()
posterhead = PosterHead(
) # Wordpress-like big picture from article.poster link.
featuredByImage = FeaturedByImage()
featuredByDiapText = FeaturedByDiapText()
featuredByText = FeaturedByText()
featuredByImageList = FeaturedByImageList()
# Containers for pages
top = Top(components=(logo, menu),
media=Media(max=self.C.M_MOBILE_MAX, display=self.C.NONE))
homeContainer = Container(components=(featuredByDiapText,
featuredByImage, featuredByText,
featuredByImageList))
articleContainer = Container(components=(posterhead, article,
articleSideBar))
articlesListContainer = Container(articlesList, )
footer = Footer()
# Create an instance (=object) of the page, containing the navigation components.
# The class is also the page name in the url.
homePage = Page(class_=self.C.TEMPLATE_INDEX,
components=(top, homeContainer, footer),
adapter=adapter,
title=self.TITLE,
fonts=self.URL_FONTS)
articlePage = Page(class_=self.C.TEMPLATE_ARTICLE,
components=(top, articleContainer, footer),
adapter=adapter,
title=self.TITLE,
fonts=self.URL_FONTS)
articlesPage = Page(class_=self.C.TEMPLATE_ARTICLES,
components=(top, articlesListContainer, footer),
adapter=adapter,
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, articlePage, articlesPage]
def buildPosterStyle(self, b):
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),
)
b.div(
class_=self.C.CLASS_FEATUREDITEM,
display=s.itemDisplay,
backgroundcolor=s.itemBackgroundColor,
padding=Em(1.6),
#style='background-repeat:no-repeat;background-size:cover;',
clear=s.itemClear,
marginbottom=s.itemMarginBottom,
margintop=s.itemMarginTop,
media=Media(max=self.C.M_MOBILE_MAX,
#style='background-size:auto'
),
)
b.h1(color=Color('white'),
fontfamily='Georgia',
fontsize=Em(4),
fontweight=self.C.BOLD,
textshadow=Shadow())
b._h1()
if s.showSubtitle:
b.h2(color=Color('yellow'),
fontsize=Em(2),
fontweight=self.C.BOLD,
textshadow=Shadow())
b._h2()
b._div(comment=self.C.CLASS_FEATUREDITEM)
b._div()
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 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 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 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 buildFeatured(self, b, articles):
s = self.style
b.div(
class_=self.getClassName(),
color=s.colorBodyText,
backgroundcolor=s.backgroundColor,
display=s.display,
float=s.float,
paddingtop=s.paddingTop,
paddingleft=s.paddingLeft,
paddingright=s.paddingRight,
media=Media(max=self.C.M_MOBILE_MAX,
width=s.widthMobile,
display=s.displayMobile,
float=s.floatMobile),
)
for article in articles:
self._buildFeaturedArticle(b, article)
b._div()
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=s.width,
float=self.C.LEFT,
paddingRight=s.
gutter, #marginright=s.gutter, # Gutter between main column and article side bar.
paddingleft=Em(2),
paddingtop=Em(2),
paddingright=Em(2),
backgroundcolor=Color('#fff'),
marginright=0,
media=Media(max=self.C.M_MOBILE_MAX,
width=self.C.AUTO,
float=self.C.NONE,
paddingleft=Em(1),
paddingright=Em(1),
paddingtop=Em(1),
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 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()
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 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 _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()
def _buildFeaturedArticle(self, b, article):
u"""Build the featured article."""
s = self.style
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, article.id),
color=s.linkColor,
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(article.name)
b._h2()
b._a()
if s.showPoster and article.poster:
b.a(href='/%s-%s' % (self.C.PARAM_ARTICLE, article.id),
class_=self.C.CLASS_NAME)
b.img(width=Perc(100),
src=article.poster,
float=s.posterAlign,
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 and (article.level or s.genericLevel):
b.h5(class_=self.C.CLASS_LEVEL,
color=s.levelColor,
fontsize=s.levelSize,
fontweight=s.levelWeight,
margintop=s.levelMarginTop,
lineheight=s.levelLineHeight)
b.text(article.level or s.genericLevel)
b.text(' level')
b._h5()
if s.showAuthor and article.author:
b.a(href='/%s-%s' % (self.C.PARAM_AUTHOR, article.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' % article.author)
b._h5()
b._a()
if s.showCategory and article.category:
for category in article.category:
b.a(href='/%s-%s' % (self.C.PARAM_CATEGORY, 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(category)
b._h5()
b._a()
if s.showSummary and article.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(article.summary, basestring):
b.text(article.summary)
else:
self.buildElement(b, article.summary)
b._div()
if b.e.form[self.C.PARAM_DEBUG]:
b.text( ` article `)
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()
def buildBlock(self, b):
u"""Build the column, using the parameters from the class BluePrint instance.
This dictionary is builds the <b>self.style()</b> by cascading all BlurPrint instances
of the parent classes. The result is a complete specification of all the parameters
the direction the style and behavior of this component."""
s = self.style
b.div(
class_=self.getClassName(),
color=s.color,
margin=s.margin,
width=s.width,
maxwidth=s.maxWidth,
minwidth=s.minWidth,
backgroundcolor=s.backgroundColor,
paddingtop=s.paddingTop,
paddingbottom=s.paddingBottom,
fontfamily=s.bodyFamily,
fontsize=s.fontSize,
textalign=s.textAlign,
lineheight=s.lineHeight,
# 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=s.backgroundColorTablet,
color=s.colorTablet,
fontsize=Em(3),
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=s.backgroundColorMobile,
color=s.colorMobile,
fontsize=Em(2),
width=self.C.AUTO,
float=self.C.NONE)))
b.text('Hello parametric 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.
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.7),
color=Color(self.C.WHITE),
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=s.captionColor,
margin=Margin(0, self.C.AUTO),
width=Perc(100),
maxwidth=700,
minwidth=300,
paddingtop=s.captionPaddingTop,
fontfamily=s.captionFont,
fontsize=Em(0.9),
textalign=s.textAlign,
fontstyle=self.C.ITALIC,
# Change background color of the line to indicate the illustrate the difference for mobile size.
#media=Media(max=self.M_MOBILE_MAX, backgroundcolor='yellow', color='#222', fontsize=Em(1),
# margin=0, width=Perc(100),
)
b.text(
'Responsive page, generated by Xierpa3. Using BluePrint parameters.'
)
b._div()