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)
def buildArticleStyle(self, b):
s = self.style
# SVG demo
b.div(class_=self.C.CLASS_CHAPTER, color=s.chapterColor)
# TODO: Should move from here. Make sure that svgExamples get SCSS builder calls.
#b.div(class_='svgDemo', margintop=Em(0.5), marginbottom=Em(0.5))
#b._div()
# h1
b.h1(
fontsize=s.h1Size,
lineheight=s.h1LineHeight,
fontweight=s.h1FontSize,
fontstyle=s.h1FontStyle,
fontfamily=s.h1FontFamily,
color=s.h1Color,
paddingtop=s.h1PaddingTop,
paddingbottom=s.h1PaddingBottom,
)
b._h1()
# <h2>
b.h2(
fontsize=s.h2Size,
lineheight=s.h2LineHeight,
fontweight=s.h2FontSize,
fontstyle=s.h2FontStyle,
fontfamily=s.h2FontFamily,
color=s.h2Color,
paddingtop=s.h2PaddingTop,
paddingbottom=s.h2PaddingBottom,
)
b._h2()
# <h3>
b.h3(
fontsize=s.h3Size,
lineheight=s.h3LineHeight,
fontweight=s.h3FontSize,
fontstyle=s.h3FontStyle,
fontfamily=s.h3FontFamily,
color=s.h3Color,
paddingtop=s.h3PaddingTop,
paddingbottom=s.h3PaddingBottom,
)
b._h3()
# <h4>
b.h4(
fontsize=s.h4Size,
lineheight=s.h4LineHeight,
fontweight=s.h4FontSize,
fontstyle=s.h4FontStyle,
fontfamily=s.h4FontFamily,
color=s.h4Color,
paddingtop=s.h4PaddingTop,
paddingbottom=s.h4PaddingBottom,
)
b._h4()
# <p>
b.p(fontsize=s.articleSize,
lineheight=s.articleLineHeight,
textindent=s.articleIndent)
self._buildPStyle(b)
b._p()
# <p> <p>
b.p(selectorPath='p + p', textindent=s.articlePPIndent)
b._p()
# <p class="... first">
#b.p(class_=self.C.CLASS_FIRST, textindent=s.articleIndent)
#b._p()
# <p class="... last">
b.p(class_=self.C.CLASS_LAST)
b._p()
# <lead>
b.p(class_=self.C.CLASS_LEAD,
fontsize=s.leadSize,
lineheight=s.leadLineHeight,
fontweight=s.leadWeight,
fontstyle=s.leadStyle,
color=s.leadColor,
marginbottom=s.leadMarginBottom,
margintop=s.leadMarginTop,
textindent=s.articleIndent)
self._buildPStyle(b)
b._p()
# **
b.b(fontweight=self.C.BOLD)
b._b()
# <blockquote>
b.blockquote(borderleft=s.blockQuoteBorderLeft
or Border('solid', '4px', '#CCC'),
margin=s.blockQuoteMargin or Margin(Em(1.5), 10),
lineheight=s.blockQuoteLineHeight or Em(1.4),
fontstyle=s.blockQuoteStyle or self.C.ITALIC,
padding=s.blockQuotePadding or Padding(Em(0.5), 10),
color=s.blockQuoteColor or Color('#828487'))
b._blockquote()
# <em>
b.em(fontstyle=s.emFontStyle,
fontweight=s.emFontWeight,
color=s.emColor,
fontfamily=s.emFontFamily)
b._em()
# <pre>
b.pre(
fontstyle=s.preFontStyle,
fontweight=s.preFontWeight,
fontsize=s.preFontSize,
color=s.preColor,
fontfamily=s.preFontFamily,
paddingtop=s.preMarginTop,
paddingbottom=s.prePaddingBottom,
paddingleft=s.prePaddingLeft,
paddingright=s.prePaddingRight,
backgroundcolor=s.preBackgroundColor,
margintop=s.preMarginTop,
marginbottom=s.preMarginBottom,
)
b._pre()
# <div class="imgBlock"><img/><div class="caption">...</div></div>
b.div(
class_=self.C.CLASS_IMAGEBLOCK,
backgroundcolor=s.imgBackgroundColor,
margintop=s.imgMarginTop,
marginbottom=s.imgMarginBottom,
paddingtop=s.imgPaddingTop,
paddingbottom=s.imgPaddingBottom,
paddingleft=s.imgPaddingLeft,
paddingright=s.imgPaddingRight,
)
b.img()
b.div(class_=self.C.CLASS_CAPTION,
fontfamily=s.captionFontFamily,
fontsize=s.captionFontSize,
color=s.captionColor,
fontstyle=s.captionFontStyle,
margintop=s.captionMarginTop)
b._div() # .caption
b._div() # .imageBlock
# <img> Plain Textile img tag, generated by !(autoWidth)--url--!
b.img(class_=self.C.CLASS_AUTOWIDTH,
marginleft=s.imgAutoWidthMarginLeft,
marginright=s.imgAutoWidthMarginRight,
margintop=s.imgMarginTop,
marginbottom=s.imgMarginBottom,
textindent=s.imgAutoWidthTextIndent,
display=s.imgAutoWidthDisplay)
# <ul><li>...</li></ul>
b.ul(liststyletype=s.bulletType,
liststyleimage=s.bulletImage,
lineheight=s.bulletLineHeight,
liststyleposition=s.bulletPosition,
paddingleft=s.bulletPaddingLeft,
marginbottom=s.bulletMarginBottom,
margintop=s.bulletMarginTop)
self._buildLiStyle(b)
b._ul()
# <ol><li>...</li></ol>
b.ol(liststyletype=s.numberedListType,
liststyleposition=s.numberedListPosition,
paddingleft=s.numberedListPaddingLeft,
lineheight=s.numberedListLineHeight,
marginbottom=s.numberedListMarginBottom,
margintop=s.numberedListMarginTop)
self._buildLiStyle(b)
b._ol()
b._div() # Article chapter
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 SimpleResponsiveText(Column):
u"""The <b>SimpleResponsiveText</b> shows a simple heading and lorum ipsum text on
a colored background, where the styling depends on the screen size through @media selection."""
# Sample string, we don't use data adapaters yet in this example.
LORUMIPSUM = """Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel metus ullamcorper,
porttitor ligula id, sollicitudin ante. Sed molestie cursus tortor, ut blandit felis tincidunt at. Suspendisse
scelerisque malesuada massa, eu rhoncus nulla interdum ut. Morbi ullamcorper, leo pulvinar pharetra tincidunt,
dolor quam ullamcorper lectus, in dignissim magna odio ut eros. Nulla vel enim a leo hendrerit auctor luctus
nec urna. Donec ligula nunc, consequat ut aliquet in, auctor id nisl. Pellentesque malesuada tincidunt tortor,
varius sollicitudin lorem dictum vitae. Duis vel neque non leo commodo faucibus. In dictum in mauris eget
fermentum. Nunc feugiat vitae dolor mollis interdum. Suspendisse potenti. In hac habitasse platea dictumst.
Donec ac massa vel velit cursus posuere in a urna. Vestibulum porttitor lacus neque, eu scelerisque enim
scelerisque vitae."""
# Get Constants->Config as class variable, so inheriting classes can redefine values.
C = Column.C
BLUEPRINT = BluePrint(
margin=Margin(0, C.AUTO),
doc_margin=u"Margin of the column",
width=Perc(90),
doc_width=u"Width of the main column.",
padding=Padding(Em(0.5), Em(0.5), Em(0.5), Em(0.5)),
doc_padding=u"Padding of column.",
# Show @media transition by background color
backgroundColor=Color('#BBB'),
doc_backgroundColor=u'Column background color.',
backgroundColorTablet=Color('#CCC'),
doc_backgroundColorTablet=u'Column background color for tablet.',
backgroundColorMobile=Color('#EEE'),
doc_backgroundColorMobile=u'Column background color for mobile.',
# Text
fontSize=Em(2),
doc_fontSize=u'Column font size, relative to body font size.',
fontSizeTablet=Em(1.8),
doc_fontSizeTablet=
u'Text font size for tablet, relative to body font size.',
fontSizeMobile=Em(2.5),
doc_fontSizeMobile=
u'Text font size for mobile, relative to body font size.',
color=Color('#000'),
doc_color=u'Column text color.',
colorTablet=Color('#111'),
doc_colorTablet=u'Column text color for tablet.',
colorMobile='red',
doc_colorMobile=u'Column text color for mobile.',
# h1
h1Size=Em(2),
doc_h1Size=u'h1 font size',
)
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()