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 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 baseStyle(self): s = self.newStyle() # Answer root style without selector s.addStyle('body', fontfamily=self.BODYFAMILY, fontsize=self.BODYSIZE, color=self.BODYCOLOR, lineheight=self.BODYLEADING) s.addStyle('a', color=self.LINKCOLOR) s.addStyle('h1, h2, h3, h4, h5, p.lead', fontfamily=self.HEADFAMILY, color=self.BODYCOLOR) s.addStyle('h1', fontsize=self.H1SIZE, lineheight=self.H1LINEHEIGHT, color=self.H1COLOR, margintop=self.H1MARGINTOP, marginbottom=self.H1MARGINBOTTOM) s.addStyle('h2', fontsize=self.H2SIZE, lineheight=self.H2LINEHEIGHT, color=self.H2COLOR, margintop=self.H2MARGINTOP, marginbottom=self.H2MARGINBOTTOM) s.addStyle('h6', fontfamily=self.BODYFAMILY) s.addStyle('code', fontfamily=self.CODEFAMILY, fontsize=Em(1.1), color=Color('#333'), paddingleft=Em(0.25), paddingright=Em(0.25)) s.addStyle('pre', margintop=0, marginbottom=Em(1.5)) s.addStyle('row', color=self.ROWCOLOR) s.addStyle('.error', color='red', backgroundcolor=Color('red')) return s
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): # 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 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()
class Top(Container): BLUEPRINT = BluePrint( MobileNavigation.BLUEPRINT, # Layout alternatives backgroundColor=Color('#fff'), doc_backgroundColor='Top background color.', )
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()
class FeaturedByTextList(FeaturedBase): # Get Constants->Config as class variable, so inheriting classes can redefine values. C = FeaturedBase.C BLUEPRINT = BluePrint( # Selection stuff start=0, count=6, # Index of first and last selected feature for this component # Layout stuff colWidth=4, # Default amount of columns for this component # Category stuff in h5 categoryColor=Color('#828487'), categorySize=Em(0.9), categoryLineHeight=Em(1.2), categoryWeight=C.NORMAL, categoryMarginTop=Em(1), categoryDisplay=C.BLOCK, # Name stuff in h2 nameColor=Color('#4080D0'), nameSize=Em(1.4), nameWeight=C.NORMAL, nameDisplay=C.BLOCK, nameMarginBottom=Em(0.2), nameMarginTop=Em(0.2), nameLineHeight=Em(1.2), # Topic stuff topicColor=Color('#202020'), # 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, ) def buildFeatured(self, b, data): s = self.style for item in data.items: if item.category: b.a(href='/%s-%s' % (self.C.PARAM_CATEGORY, item.category), class_=self.C.CLASS_CATEGORYTHUMB) b.h5(fontsize=s.categorySize, fontweight=s.categoryWeight, lineheight=s.categoryLineHeight, color=s.categoryColor, margintop=s.categoryMarginTop, display=s.categoryDisplay) b.text(item.category) b._h5() b._a() 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 isinstance(item.topic, basestring): b.text(item.topic) elif item.topic is not None: # Test on element. Topic elements need to be defined in global style. self.buildElement(b, item.topic)
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 _helloWorldText(self, b): b.div( color=Color('#00FF00') ) # Show the text on this page in another color, to visualize the difference. # TODO: Needs to clean up. JSON example goes to separate example site. b.a(href='/ajax/font-MyFont') b.text('Hello, world on another page using MyFont') b._a() b._div()
def baseStyle(self): u"""Answer the single basis style that will be defined as overall CSS, before specific block definitions start.""" root = self.newStyle() # Create root style root.addStyle( 'body', backgroundcolor=Color(self.C.WHITE), # TODO: GLOBAL MEDIA SETTING DOES NOT WORK YET: media=Media(max=self.M_MOBILE_MAX, backgroundcolor='orange') ) return root
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): 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 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 demoSvgDrawing1(self, b): # Draw a responsive image in SVG, only in #b.div(class_='svgDemo', display=C.BLOCK, margintop=Em(0.5), marginbottom=Em(0.5), # media=Media(max=C.M_MOBILE_MAX, display=C.NONE)) s = self.style b.svg(width=s.width, height=s.height) b.rect(width=Perc(100), height=50, fill=LinearGradient('left', '#000', 0, '#FFF', 100)) b.rect(y=50, width=Perc(100), height=200, fill='green') # Perspective line b.line(x1=30, y1=Perc(100), x2=Perc(50), y2=50, stroke='yellow', strokewidth=3) b.line(x1=Perc(70), y1=Perc(100), x2=Perc(50), y2=50, stroke=Color('yellow'), strokewidth=3, display=self.C.NONE) b.ellipse(x=80, y=150, rx=40, ry=10, fill='black', fillopacity=0.2) b.filter('frozenLiquid') b.circle(x=80, y=80, r=40, strokewidth=3, stroke='black', fill='red', fillopacity=0.5) b.circle(x=80, y=80, r=20, fill=Color('green'), fillopacity=0.5) b._filter() b.circle(x=65, y=65, r=10, fill=Color('white'), fillopacity=0.2) b.ellipse(x=Perc(50), y=Perc(50), rx=40, ry=10, fill='black', fillopacity=0.5) b.circle(x=Perc(50), y=50, r=40, strokewidth=3, stroke='black', fill=Color('red'), fillopacity=0.5) b.circle(x=Perc(50), y=50, r=20, fill=Color('green'), fillopacity=0.5) b.circle(x=Perc(48), y=35, r=10, fill=Color('white'), fillopacity=0.6) #b.text('Xierpa3', fill='#FFF', fontsize=45, fontfamily='Verdana', x=100, y=100) b._svg()
def baseStyle(self): u"""Answer the single basis style that will be defined as overall CSS, before specific block definitions start.""" s = Article.BLUEPRINT root = self.newStyle() # Create root style root.addStyle('body', fontfamily=BODYFAMILY, fontsize=s.fontSize, backgroundcolor=s.pageBackgroundColor, lineheight=s.lineHeight) s.addStyle('h1, h2, h3, h4, h5, p.lead', fontfamily=HEADFAMILY) s.addStyle('h6', fontfamily=BODYFAMILY) s.addStyle('b', fontweight=self.C.BOLD) s.addStyle('a', color=Color('#CECECE')) return root
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]
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)
# # ----------------------------------------------------------------------------- # # featured.py # from random import choice from xierpa3.components.column import Column from xierpa3.components.container import Container from xierpa3.descriptors.media import Media from xierpa3.attributes import Em, Margin, Perc, Color, Padding from xierpa3.descriptors.blueprint import BluePrint 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') class Featured(Container): pass class FeaturedBase(Column): u"""Abstract class that combines functionality for inheriting Featured classes.""" # Get Constants->Config as class variable, so inheriting classes can redefine values. C = Column.C CLASS_FEATURED_ITEM = 'featuredItem'
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 FeaturedByDiapText(FeaturedByText): u"""As FeaturedByText, but default on a dark background.""" # Get Constants->Config as class variable, so inheriting classes can redefine values. C = FeaturedByText.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('#E0E0E0') BACKGROUNDCOLOR = Color('#202020') LEVELCOLOR = Color('#6294D0') NAMECOLOR = Color('#E1E1E1') AUTHORCOLOR = Color('#B2B4B7') # Inherit from the super class blueprint, and then change some of the parameters. BLUEPRINT = BluePrint(FeaturedByText.BLUEPRINT, # Layout alternatives showPoster=True, doc_showPoster=u'Boolean flag to indicate if the poster of the article should be shown.', showCategory=True, doc_showCategory=u'Boolean flag to indicate if the category of this article should be shown.', # Selection stuff # Index of first and amount of selected features for this component start=0, doc_start=u'Index of first selected item to feature.', count=10, doc_count=u'Number of selected items to feature.', itemRandom=True, doc_itemRandom=u'Choose random from the selected items.', # Label stuff label=None, doc_label=u'Label string.', labelSize=Em(2.2), doc_labelSize=u'Label size.', labelColor=Color('#828487'), doc_labelColor=u'Label color.', labelMarginBottom=Em(0.5), labelMarginTop=Em(0.3), # Poster posterWidth='40%', doc_posterWidth=u'Width of the poster image, to allow text to flow around.', # Layout stuff colWidth=8, # Default amount of columns for this component backgroundColor=Color(BACKGROUNDCOLOR), doc_backgroundColor=u'Background color of the component. Default is a dark gray.', # Level stuff, handle local fontsize and lineheight here, related to the item size showLevel=True, genericLevel='Generic', # Show generic level if level is omitted in data. levelColor=Color(LEVELCOLOR), doc_levelColor=u'Color of the level indicator.', levelSize=LEVELSIZE, levelWeight=C.BOLD, levelMarginTop=Em(0.5), # Category stuff in h5 categoryColor=CATEGORYCOLOR, categorySize=Em(1.8), categoryLineHeight=Em(1.2), categoryWeight=C.BOLD, # Name stuff in h2 nameSize=Em(1.8), nameLineHeight=Em(1.1), nameWeight=None, # Default inheriting from the main weight. nameColor=Color(NAMECOLOR), nameMarginBottom=Em(0.2), nameMarginTop=0, nameDisplay=C.BLOCK, # Author stuff in h6 authorSize=AUTHORSIZE, authorWeight=C.NORMAL, authorColor=Color(AUTHORCOLOR), # Inheriting from the main color as default authorDisplay=C.BLOCK, authorLineHeight=Em(1.4), # Summary stuff summaryColor=C.WHITE, summaryMarginTop=Em(0.4), summaryMarginBottom=Em(0.5), # Tablet stuff tabletLabelSize=Em(1.5), # 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, )
class SimpleWebSite(Theme): # Get Constants->Config as class variable, so inheriting classes can redefine values. C = Theme.C # This title will be combined with the title of the article of a specific page. TITLE = u'Simple Website' BODYFAMILY = '"BentonSansRE", Verdana, sans' HEADFAMILY = '"Bureau Grot Cond", Impact, Verdana, sans' BODYSIZE = Px(12) BODYLEADING = Em(1.4) FOOTERBGCOLOR = Color('#202020') URL_FONTS = [ # Note that this package contains the a set of latest featured font, and may be changed in the future. # If using the font in this package, safest is to refer to the functional constant names below, # instead of making a direct reference to the family name. # Of course, taking your own account at //www.webtype.com is even better :) C. XIERPA3_DEMOFONTS, # Webtype @fontface fonts, to be used for localhost demo purposes. ] def baseStyle(self): s = self.newStyle() # Answer root style without selector s.addStyle('body', fontfamily=self.BODYFAMILY, fontsize=self.BODYSIZE, lineheight=self.BODYLEADING) s.addStyle('h1, h2, h3, h4, h5, p.lead', fontfamily=self.HEADFAMILY) s.addStyle('h6', fontfamily=self.BODYFAMILY) return s 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 make(self, root=None): u"""The instance of this class builds CSS and HTML files at the optional path <b>root</b>. If not defined, then the default ~/Desktop/Xierpa3Examples/[component.name] is used as export path, as set by Builder.DEFAULT_ROOTPATH""" cssBuilder = CssBuilder() self.build(cssBuilder) cssBuilder.save(self, root) htmlBuilder = HtmlBuilder() self.build(htmlBuilder) return htmlBuilder.save(self, root)
class FeaturedByDiapText(FeaturedByText): u"""As FeaturedByText, but default on a dark background.""" # Get Constants->Config as class variable, so inheriting classes can redefine values. C = FeaturedByText.C BLUEPRINT = BluePrint(FeaturedBase.BLUEPRINT, # Selection stuff # Index of first and amount of selected features for this component start=0, count=10, itemRandom=True, doc_itemRandom=u'Choose random from the selected items.', # Label stuff label=None, doc_label=u'Label string.', labelSize=Em(2.2), doc_labelSize=u'Label size.', labelColor=Color('#828487'), doc_labelColor=u'Label color.', labelMarginBottom=Em(0.5), labelMarginTop=Em(0.3), # Poster showPoster=True, posterWidth='40%', # Layout stuff colWidth=8, # Default amount of columns for this component # Level stuff, handle local fontsize and lineheight here, related to the item size showLevel=True, genericLevel='Generic', # Show generic level if level is omitted in data. levelColor=Color('#6294D0'), levelSize=LEVELSIZE, levelWeight=C.BOLD, levelMarginTop=Em(0.5), # Category stuff in h5 showCategory=False, categoryColor=CATEGORYCOLOR, categorySize=Em(1.8), categoryLineHeight=Em(1.2), categoryWeight=C.BOLD, # Name stuff in h2 nameSize=Em(1.8), nameLineHeight=Em(1.1), nameWeight=None, # Default inheriting from the main weight. nameColor=Color('#E1E1E1'), nameMarginBottom=Em(0.2), nameMarginTop=0, nameDisplay=C.BLOCK, # Author stuff in h6 authorSize=AUTHORSIZE, authorWeight=C.NORMAL, authorColor=Color('#B2B4B7'), # Inheriting from the main color as default authorDisplay=C.BLOCK, authorLineHeight=Em(1.4), # Summary stuff summaryColor=C.WHITE, summaryMarginTop=Em(0.4), summaryMarginBottom=Em(0.5), # Tablet stuff tabletLabelSize=Em(1.5), # 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, )
def _helloWorldText(self, b): b.div(color=Color('yellow') ) # Color name will be translate to more reliable hex code. b.text('Hello, world!') b._div()
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)
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()
def _helloWorldText(self, b): b.div( color=Color('#00FFFF') ) # Show the text on this page in another color, to visualize the difference. b.text('And yet another world on this page.') b._div()
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()