def buildBlock(self, b):
u"""Build the block of a column. Note that for clarity fontsize and lineheight are defined
for each part separated, relation the overall container fontsize and lineheight.
Classes inheriting from <b>Column</b> should implement <b>self.buildBlock</b>."""
s = self.style
colClass = self.getColClass(s.colWidth)
b.block(self)
b.div(class_=colClass,
marginright=s.colMarginRight,
marginleft=s.colMarginLeft,
margintop=s.colMarginTop or Em(1),
paddingleft=s.paddingLeft or 0,
float=s.colFloat,
display=s.colDisplay,
minheight=s.colMinHeight,
media=Media(max=C.M_MOBILE,
display=C.BLOCK,
float=C.NONE,
width=C.AUTO,
marginleft=0,
marginright=0,
paddingleft=Em(0.5),
paddingright=Em(0.5)))
self.buildColumn(b)
b._div(comment=colClass)
b._block(self)
def buildBlock(self, b):
u"""The Container is used to group components together. It shows the components combined in a single row.
The components know their own column widths."""
s = self.style
b.block(self)
containerClass = self.class_ or self.className
b.div(class_=(C.CLASS_CONTAINER, containerClass),
display=s.containerDisplay or C.BLOCK,
width=s.containerWidth,
height=s.containerHeight,
marginleft=s.containerMarginLeft,
margintop=s.containerMarginTop,
paddingleft=s.containerPaddingLeft or 20,
paddingright=s.containerPaddingRight or 20,
backgroundcolor=s.containerBackgroundColor,
backgroundimage=s.containerBackgroundImage,
backgroundrepeat=s.containerBackgroundRepeat,
media=Media(max=C.M_MOBILE,
width=s.mobileContainerWidth or C.C100,
display=s.mobileContainerDisplay or C.BLOCK,
minwidth=s.mobileMinWidth or 0,
paddingleft=s.mobilePaddingLeft or 0,
paddingright=s.mobilePaddingRight or 0))
self.buildBlockRow(b)
b._div(comment=self.className)
b._block(self)
def buildBlockRow(self, b):
s = self.style
b.div(class_=C.CLASS_ROW, width=s.rowWidth or C.C100)
mediaStyles = Media(max=C.M_MOBILE,
display=s.mobileRowDisplay or C.BLOCK,
float=C.NONE,
minwidth=0,
width=C.AUTO,
paddingleft=0,
paddingright=0,
margin=0)
for index in range(s.itemCount):
# 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 = C.BOTH
else:
clear = C.NONE
b.div(
class_=(C.CLASS_ITEM, classIndex),
width='%d%%' % (100 / s.columns),
float=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=C.CLASS_ITEM)
b._div(comment=C.CLASS_ROW)
def buildArticleSideBarStyle(self, b):
u"""Build the styles for the articles side bar. # @@@ Clean up, using model for article side bar?"""
s = self.style
# <div class="footnotes">
b.div(class_=C.CLASS_FOOTNOTES, marginbottom=Em(0.5))
b.h4(fontsize=Em(1.1))
b._h4()
b._div(comment=C.CLASS_FOOTNOTES)
# <div class="mobileChapterNavigation">
b.div(class_=C.CLASS_MOBILECHAPTERNAVIGATION, marginbottom=Em(0.5), display=C.NONE,
media=Media(max=C.M_MOBILE, display=C.BLOCK)
)
b.ul()
b.li(backgroundcolor=s.mobileChapterButtonColor or '#444444')
# <a>Chapter name</a>
b.a(fontsize=s.summaryNameSize, color=s.mobileChapterButtonColor or 'white')
b.h2(fontsize=Em(2), lineheight=Em(1.2),
marginbottom=Em(0.2), margintop=Em(0.2), padding=Em(0.5))
b._h2()
b._a()
b._li()
b._ul()
b._div(comment=C.CLASS_MOBILECHAPTERNAVIGATION) # Article mobile chapter navigation
# <div class="chapterNavigation">
b.div(class_=C.CLASS_CHAPTERNAVIGATION, marginbottom=Em(0.5), display=s.mobileContainerDisplay,
media=Media(max=C.M_MOBILE, display=C.NONE)
)
b.h4(fontsize=Em(1.1))
b._h4()
b.ul()
b.li()
# <a>Chapter name</a>
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()
b._div(comment=C.CLASS_CHAPTERNAVIGATION) # Article chapter navigation
def buildBlockRow(self, b):
s = self.style
b.div(class_=C.CLASS_ROW,
width=s.rowWidth or C.C100,
minwidth=s.rowMinWidth or 755,
maxwidth=s.rowMaxWidth or 1140,
margin=s.rowMargin or Margin(0, C.AUTO),
overflow=s.rowOverflow or C.HIDDEN,
media=Media(max=C.M_MOBILE,
display=s.mobileRowDisplay or C.BLOCK,
minwidth=0,
width=C.C100,
paddingleft=0,
paddingright=0,
margin=0))
self.buildContainerBlock(b)
b._div(comment=C.CLASS_ROW)
def buildColumn(self, b):
s = self.style
if s.twitterAccount or s.facebookAccount:
b.div(class_=C.CLASS_SOCIALMEDIA,
display=C.BLOCK,
float=s.float or C.LEFT,
width=s.width or C.C100,
media=Media(max=C.M_MOBILE, 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=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=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=C.LEFT,
data_href=b.getUrl(),
data_type="button_count")
b._div()
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."""
b.div(class_='column', color='#222', margin=Margin(0, C.AUTO, 0, C.AUTO),
width='50%', maxwidth=700, minwidth=300, backgroundcolor='#EEE',
padding=Em(2), fontfamily='Georgia', fontsize=Em(1),
lineheight=Em(1.4),
media=Media(max=C.M_MOBILE, margin=0))
# 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.
if b.isType(C.TYPE_CSS):
self.buildCssColumnTemplate(b)
else:
for data in self.adapter.getFeaturedArticles(self):
# Build the headline without style attribute, as these are already defined
# in the self.buildCssColumnTemplate call.
b.h1()
b.text(data.headline)
b._h1()
if data.image:
# 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.image, class_=C.CLASS_AUTOWIDTH)
# Output the rest of the featured article.
b.text(data.item)
# Add some more volume to the blurb article.
data = self.adapter.getArticle(self)
b.h2()
b.text(data.headline)
b._h2()
for item in data.items:
b.text(item)
b._div()
def buildFeatured(self, b, data):
u"""Build the featured item. If <b>self.style.itemRandom</b> is <b>True</b>, then select a random item from the list.
If there is no <b>data.item</b> available, then ignore this method."""
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(max=C.M_TABLET,
fontsize=s.tabletLabelSize,
color='red'), Media(max=C.M_MOBILE,
color='blue')))
b.text(s.label)
b._h2()
b.a(href='/%s-%s' % (C.PARAM_ARTICLE, item.id), class_=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' % (C.PARAM_ARTICLE, item.id),
class_=C.CLASS_NAME)
b.img(width=s.posterWidth,
src=item.poster,
float=C.LEFT,
padding=0,
margin=Margin(Em(0.5), Em(0.5), 0, 0),
media=Media(max=C.M_MOBILE, display=C.NONE))
b._a()
if s.showLevel:
b.h5(class_=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' % (C.PARAM_AUTHOR, item.author),
class_=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' % (C.PARAM_CATEGORY, item.category),
class_=C.CLASS_CATEGORY)
b.h5(fontsize=s.categorySize,
fontweight=s.categoryWeight,
lineheight=s.categoryLineHeight,
color=s.categoryColor,
margintop=Em(1),
display=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=C.BOTH,
float=C.LEFT,
width=C.C100,
color=s.summaryColor,
fontsize=s.summarySize,
lineheight=s.summaryLineHeight,
margintop=s.summaryMarginTop,
marginbottom=s.summaryMarginBottom)
self.buildElement(b, item.summary)
b._div()
def buildBlock(self, b):
s = self.style
data = self.getAdapterData(C.ADAPTER_MENU, id='home')
b.block(self) # div.mobileNavigation
b.div(class_=(C.CLASS_CONTAINER, self.className),
display=s.containerDisplay,
backgroundcolor=s.containerBackgroundColor,
marginleft=s.containerMarginLeft,
marginright=s.containerMarginRight,
paddingleft=s.containerPaddingLeft,
paddingright=s.comtainerPaddingRight,
media=Media(max=C.M_MOBILE, display=s.mobileContainerDisplay))
b.snippet(self, 'navigation-mobile'
) # Allow PHP to create a snippet file from this block.
b.div(class_=C.CLASS_ROW,
minwidth=0,
paddingleft=0,
paddingright=0,
overflow=C.HIDDEN,
margin=Margin(0, C.AUTO))
colClass = self.getColClass(s.colWidth)
#b.text(data.loop) # In case there is PHP looping code. Skip for CSS
b.div(class_=colClass,
width=C.AUTO,
float=C.NONE,
marginleft=Em(0.5),
marginright=Em(0.5),
paddingleft=Em(0.5),
paddingright=Em(0.5))
b.nav(id=C.ID_MOBILENAVWRAP,
width=s.navWidth,
display=s.navDisplay,
zindex=s.navZIndex)
b.div(id=C.ID_MENUICON,
class_=C.CLASS_MENU,
color=C.WHITE,
height=26,
width=56,
paddingtop=0.6,
cursor='pointer',
display=C.INLINEBLOCK,
marginright=0,
top=0,
left=0,
fontsize=13)
b.img(src=s.menuIconUrl,
padding=0,
margin=0,
verticalalign=C.MIDDLE,
maxwidth='50%',
height=C.AUTO)
b._div(comment='#' + C.ID_MENUICON) # #menu-icon
if data.menuItems is None:
b.error('No items in the adapter')
else:
b.ul(id=C.ID_NAV,
backgroundcolor=s.menuListBackgroundColor,
display=C.NONE,
clear=C.BOTH,
position=C.ABSOLUTE,
top=s.menuHeight - 5,
width=C.C100,
zindex=Z(2000),
padding=0,
margin=0,
liststyletype=C.NONE,
left=0,
textalign=C.CENTER)
for menu in data.menuItems:
url = menu.url
if url is None:
url = '/%s-%s' % (C.PARAM_ARTICLE, menu.id)
b.a(href=url, color='#E8E8E8')
b.li(fontsize=s.listFontSize,
paddingtop=Em(1.2),
width=C.C100,
liststyletype=C.NONE,
borderbottom=Border('1 solid white'),
height=36,
backgroundcolor='#4890BC')
b.text(
menu.name
) # Show full name, otherwise use b.text(menu.tag or menu.name)
b._li()
b._a()
b._ul()
b._nav()
b.a(href='/home', color='#E8E8E8')
b.text('Doing by Design')
b._a()
b._div(comment=C.CLASS_12COL)
#b.text(data._loop) # In case there is PHP looping code. Skip for CSS
b._div(comment=C.CLASS_ROW)
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