def build_html(self, view, path, **kwargs): b = self.context.b b.div(cssClass=self.cssClass, style="width:100%") # TODO: Bring this to global page CSS instead of attributes. sampleCss = """font-family:'%s';font-size:%s;line-height:%s;letter-spacing:%s""" % ( self.font.info.cssName, px( self.fontSize), self.leading, px(self.tracking or 0)) labelCss = """font-family:'%s';font-size:%s;line-height:%s;letter-spacing:%s""" % ( self.labelFont.info.cssName, px( self.labelFontSize), self.labelLeading, px(self.tracking or 0)) b.div(cssClass='sample', style=sampleCss) b.addHtml(self.sampleText) b._div() # If Urls provided, then add then as links. hasLine = False for index, (k, label) in enumerate(FONT_DATA_KEYS): if k in self.fontData: if not hasLine: b.div(cssClass='label', style=labelCss) hasLine = True if index > 0: b.addHtml(' ') b.a(href=self.fontData[k], target='external') # Always jump out on new window b.addHtml(label) b._a() if hasLine: b._div() b._div()
def initialize(self, **kwargs): """Initialize the generic website templates.""" padding = self.padding w, h = self.w, self.h self.gw = self.gh = px(8) gridX = (fr(1), fr(1)) gridY = [ None ] # Default is full height of columns, no horizontal division. # Default page template t = Template(w=w, h=h, name='home', padding=padding, gridX=gridX, gridY=gridY) self.addTemplate(t.name, t) # Set template <head> building parameters. # Page element definition in pbpage.py view = self.view view.favIconUrl = 'images/favicon.gif' view.mediaQueriesUrl = None # Add page elements. MobileNavigation(parent=t, name='MobileNavigation') Introduction(parent=t, name='Introduction') Navigation(parent=t, name='Navigation') Featured(parent=t, name='Featured') Main(parent=t, name='Main') Section(parent=t, name='Section') Main(parent=t, name='OtherMain') Footer(parent=t, name='Footer') JS(parent=t, name='JS')
def build_html(self, view, path, **kwargs): b = self.context.b b.comment('Start %s.%s\n' % (self.cssId, self.cssClass)) b.div(cssId=self.cssId, cssClass=self.cssClass) for fontSize in self.fontSizes: for fontName, _ in self.fontDataList: style = "font-family:%s;font-size:%s;line-height:1.1em;height:%s;width:100%%;" % ( fontName, px(fontSize), px(fontSize * 1.1)) style += "overflow:hidden;text-overflow:ellipsis;" b.div(style=style) b.addHtml( 'AaBbCcDdEe FfGgHhIiJjKk LlMmNnOoPp QqRrSsTtUu VvWwXxYyZz' ) #FfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz') b._div() b._div() b.comment('End %s.%s\n' % (self.cssId, self.cssClass))
def initialize(self, **kwargs): u"""Initialize the generic base website templates. """ # For now, just supply the full head code here. headCode = """ <meta content="text/html;charset=UTF-8" http-equiv="Content-Type"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>%(title)s</title> <meta name="description" content="%(description)s"> <meta name="keywords" content="%(keywords)s"> <!-- Mobile viewport --> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"> <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"> <!-- CSS--> <link media="all" href="fonts/webfonts.css" type="text/css" rel="stylesheet"/> <link rel="stylesheet" href="css/normalize.css"> <!--link rel="stylesheet" href="js/flexslider/flexslider.css"> --> <link rel="stylesheet" href="css/style.css"> <!-- end CSS--> """ # For now, just supply the full JS links as code. jsCode = """ <!-- JS--> <script src="js/libs/modernizr-2.6.2.min.js"></script> <!-- end JS--> <!-- jQuery --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script defer src="js/flexslider/jquery.flexslider-min.js"></script> <!-- fire ups - read this file! --> <script src="js/main.js"></script> """ #<script>window.jQuery || document.write('<script src="js/libs/jquery-1.9.0.min.js"></script>')</script> rp = getRootPath() padding = self.padding w, h = self.w, self.h self.gw = self.gh = px(8) gridX = (fr(1), fr(1)) gridY = [None] # Default is full height of columns, no horizontal division. # Default page template t = Template(w=w, h=h, name='home', padding=padding, gridX=gridX, gridY=gridY) self.addTemplate(t.name, t) # Set template <head> building parameters. # Page element definition in pbpage.py t.headCode = headCode % dict(title=self.title, description='', keywords='') t.favIconUrl = 'images/favicon.gif' t.jsCode = jsCode t.cssCode = simpleCssCode % simpleTheme t.resourcePaths = (rp+'js', rp+'images', rp+'fonts', rp+'css') # Directorie to be copied to Mamp. # Add page template elements. Navigation(parent=t, name='Navigation') #Introduction(parent=t, name='Introduction') Featured(parent=t, name='Featured') WideContent(parent=t, name='WideContent') Hero(parent=t, name='Hero') Footer(parent=t, name='Footer')
def useUnits(): # 2mm, 2 for v in mm(2), px(5), pt(5), em(12, base=10), perc(12.5, base=400), col( 1 / 4, base=mm(200), g=mm(4)): # Showing the unit as instance and as rendered value print( 'As unit:', v, 'As raw value:', v.rv, 'As pt:', v.pt, )
def useUnits(): """ >>> mm(2), mm(2).rv # Showing the unit as instance and as rendered value (2mm, 2) >>> px(5), px(5).rv (5px, 5) >>> px(5), pt(5).rv (5px, 5) >>> fr(8, base=400), fr(8, base=400).rv # Fractional units, used in CSS-grid. (8fr, 50) >>> em(12, base=10), em(12, base=10).rv (12em, 120) >>> perc(12.5, base=400), perc(12.5, base=400).rv (12.5%, 50) >>> u = col(1/4, base=mm(200), g=mm(4)) >>> u, u.rv (0.25col, 47mm) """ print(mm(2)) # Real value: print(mm(2).rv) print(px(5)) print(px(5).rv)
# # stylelib.py # # Default CSS reset. # Library of predefined named styles. # # D E P R E C A T E D # # CSS is now implemented as SCSS files, using PageBot-generated variable.scss. # NOTE: still imported in pagebot.document. # from pagebot.toolbox.units import px, em from pagebot.toolbox.color import whiteColor, blackColor, color MARGIN = (0, 0, px(10), 0) default = { 'body': dict( font='Verdana, sans', fontStyle='normal', fontWeight='normal', tracking=0, fontSize=px(12), leading=em(1.4), color=0, fill=whiteColor, ), 'pre, code': dict( display='none', ),
def makeDocument(): """Make a new document.""" W = H = PageSize # Create a new document, default to the defined page size. doc = Document(w=W, h=H, originTop=False, title='Text Flow', autoPages=2) rs = doc.getRootStyle() rs['fill'] = (1, 1, 0) # Yellow background for debugging rs['font'] = 'Verdana' rs['fontSize'] = 14 rs['textFill'] = 1 #textBoxStyle = doc.addStyle('textbox', dict(fill=color(0, 0, 0, 0.7), # padding=40)) pStyle = doc.addStyle('p', dict(textFill=blackColor)) h1Style = doc.addStyle('h1', dict(fontSize=24, textFill=(0, 0, 1))) #h2Style = doc.addStyle('h2', dict(fontSize=18, textFill=(0, 1, 0))) view = doc.getView() view.padding = 0 # Aboid showing of crop marks, etc. view.showCropMarks = True view.showRegistrationMarks = True view.showFrame = True view.showPadding = True view.showOrigin = True view.showDimensions = False # Get list of pages with equal y, then equal x. #page = doc[1][0] # Get the single page from the document. page0 = doc.getPage(1) # Get page on pageNumber, # first in row (this is only one now). page0.name = 'Page 1' page0.padding = PagePadding s = doc.context.newString('Headline\n', style=h1Style) for n in range(10): s += doc.context.newString(('(Line %d) Volume of text defines' ' the box height.' ' Volume of text defines' ' the box height. \n') % (n + 1), style=pStyle) h1 = None e1 = newTextBox( s, name='CSSTextBox1', parent=page0, padding=4, x=100, font='Verdana', h=h1, mb=20, mr=10, # Conditions make the element # move to top-left of the page. gridX=((fr(3), px(8)), (fr(2), px(8))), # And the condition that there should be no overflow, # otherwise the text box will try to solve it. conditions=[Left2Left(), Fit2Width(), Float2Top()], # Position of the origin of the element. # Just to show where it is. # Has no effect on the position conditions. yAlign=BOTTOM, xAlign=LEFT, leading=5, fontSize=9, textFill=blackColor, strokeWidth=pt(0.5), fill=color(0.9), stroke=noColor) print(e1.style) newTextBox( s, # Empty box, will get the overflow # from e1, if there is any. name='CSSTextBox2', # Flow reference by element.name parent=page0, padding=4, x=100, h=200, conditions=[Left2Left(), Fit2Width(), Float2Top()], yAlign=TOP, fill=whiteColor, stroke=noColor) score = doc.solve() # Try to solve all pages. if score.fails: print(score.fails) return doc # Answer the doc for further doing.
def build_html(self, view, origin=None, drawElements=True): """Build the HTML/CSS navigation, depending on the pages in the root document. >>> from random import shuffle >>> from pagebot.document import Document >>> from pagebot.elements import newTextBox >>> doc = Document(title='BarChart', viewId='Site') >>> view = doc.newView('Mamp') >>> page = doc[1] >>> page.title = 'Barchart Test' >>> page.name = 'index' >>> barChart = BarChart(parent=page, cssId='ThisBarChartId', xTextAlign=RIGHT, textFill=0.9, fontSize=px(12)) >>> barChart.padding = 1, 4, 1, 4 >>> barChart.margin = 1 >>> data = range(2, 90, 4) >>> shuffle(data) >>> barChart.data = data >>> #tb = newTextBox('This is a bar chart.', parent=barChart) >>> doc.build() >>> import os >>> result = os.system('open %s' % (view.LOCAL_HOST_URL % (doc.name, view.DEFAULT_HTML_FILE))) >>> #doc.export('_export/BarChartTest') """ b = view.context.b cssClass = self.__class__.__name__ cssCode = """ .%(cssClass)s { border: %(border)s; background-color: %(fill)s; } .%(cssClass)s div { font-family: Upgrade-Regular, sans-serif; font-size: %(fontSize)s; background-color: %(barFill)s; text-align: %(textAlign)s; padding: %(padding)s; margin: %(margin)s; color: %(textFill)s; } """ d = dict(cssClass=cssClass, border=self.css('border', 'black solid 1px'), fill=color(rgb=self.css('fill', 0xF0F0F0)).css, barFill=color(rgb=self.css('barFill', 0x2030A0)).css, textAlign=self.css('xTextAlign', RIGHT), textFill=color(rgb=self.css('textFill', 0xFF00FF)).css, fontSize=self.css('fontSize', 10), padding='%s %s %s %s' % (px(self.pt), px(self.pr), px(self.pb), px(self.pl)), margin='%s %s %s %s' % (px(self.mt), px(self.mr), px(self.mb), px(self.ml)), scale=1, unit='%', data='%s' % list(self.data), ) b.addCss(cssCode % d) b.div(cssClass=cssClass, cssId=self.cssId) if drawElements: # If there are child elements, recursively draw them over the pixel image. self.buildChildElements(view, origin) if self.drawAfter is not None: # Call if defined self.drawAfter(self, view, origin) b._div() b.addJs(""" var data = %(data)s; d3.select(".%(cssClass)s") .selectAll("div") .data(data) .enter().append("div") .style("width", function(d) { return d * %(scale)s + "%(unit)s"; }) .text(function(d) { return d; }); """ % d)