Class generator
Generates HTML code that maps generated TOM to tables, then injects
this code into the page DOM.
This version uses the old "table layout" method.
Defined in: templateLayout.generator.js.
Constructor Attributes | Constructor Name and Description |
---|---|
generator(tom)
Creates a template compiler
|
Field Attributes | Field Name and Description |
---|---|
Local copy of given TOM
|
Method Attributes | Method Name and Description |
---|---|
appendCol(parentNode, colNumber)
Create columns nodes (using COL) and inject it into parent node
|
|
appendGrid(grid, parentNode)
Create the grid node (using TABLE) and inject it into parent node.
|
|
appendRow(row, parentNode)
Create a row node (using TR) and inject it into parent node
|
|
appendSlot(slot, parentNode)
Create a slot node (using TD) and inject it into parent node
|
|
appendTemplate(template, parentNode)
Get template node and inject it into parent node.
|
|
appendVirtualNode(parentNode)
Create a virtual node (using DIV) and inject it into parent node.
|
|
computeColWidths(availableWidth, template)
A lightly modified version of "compute width" algorithm defined in
the draft.
|
|
computeRowHeights(template)
A lightly modified version of "compute heights" algorithm defined in
the draft.
|
|
getColumnNodes(gridNode, maxColumns)
Get DOM nodes that maps template grid "columns" (COL nodes)
|
|
getGridNode(templateNode)
Get DOM node that maps template grid (TABLE node)
|
|
getPixels(dimension, max)
Get pixel size.
|
|
getRowNode(gridNode, index, maxColumns)
Get DOM node that maps row (TR nodes)
|
|
patchDOM()
Generates the HTML code and injects it into the page DOM.
|
|
resetCSS()
Resets browser default CSS styles.
|
|
setColNodeWidth(colNodes, computedWidths)
Set columns width (the COL nodes)
|
|
setGridNodeHeight(gridNode, computedHeights)
Set grid height (the TABLE node)
|
|
setGridNodeWidth(gridNode, computedWidths)
Set grid width (the TABLE node)
|
|
setRowNodeHeight(rowNode, computedHeights, rowIndex)
Set row height (the TR nodes)
|
|
setSlotNodeHeight(slotNode, computedHeights, rowIndex)
Set slot height (the TD nodes)
|
|
setSlotNodeWidth(slotNode, computedWidths, colIndex)
Set slot width (the TD nodes)
|
Field Detail
{rootTemplate}
tom
Local copy of given TOM
Method Detail
{HTMLElement}
appendCol(parentNode, colNumber)
Create columns nodes (using COL) and inject it into parent node
- Parameters:
- {HTMLElement} parentNode
- DOM parent node
- {integer} colNumber
- max number of columns
- Returns:
- {HTMLElement} current node
{HTMLElement}
appendGrid(grid, parentNode)
Create the grid node (using TABLE) and inject it into parent node.
Uses appendCol to create column nodes too.
- Parameters:
- {grid} grid
- template grid
- {HTMLElement} parentNode
- DOM parent node
- Returns:
- {HTMLElement} current node
{HTMLElement}
appendRow(row, parentNode)
Create a row node (using TR) and inject it into parent node
- Parameters:
- {gridRow} row
- template row
- {HTMLElement} parentNode
- DOM parent node
- Returns:
- {HTMLElement} current node
{HTMLElement}
appendSlot(slot, parentNode)
Create a slot node (using TD) and inject it into parent node
- Parameters:
- {gridSlot} slot
- template slot
- {HTMLElement} parentNode
- DOM parent node
- Returns:
- {HTMLElement} current node
{HTMLElement}
appendTemplate(template, parentNode)
Get template node and inject it into parent node.
Template node is get using a CSS selector query OR if query fails calling generator#appendVirtualNode
- Parameters:
- {template} template
- the template
- {HTMLElement} parentNode
- DOM parent node
- Returns:
- {HTMLElement} current node
{HTMLElement}
appendVirtualNode(parentNode)
Create a virtual node (using DIV) and inject it into parent node.
Virtual nodes are valid templates that doesn't match selector queries
because doesn´t have HTML content (used in nested templates chains).
#parent {display: "aa" "bc" "dd"} #header {position:a; display: "123"} #logo {position:1} ... <div id="parent"></div> <img id="logo" src="logo.png"/> ...#parent maps to DIV element and #logo to image, but #header maps nothing, its a template used only to simplify layout. #header needs to create a virtual node.
- Parameters:
- {HTMLElement} parentNode
- DOM parent node
- Returns:
- {HTMLElement} current node
{ComputedWidth}
computeColWidths(availableWidth, template)
A lightly modified version of "compute width" algorithm defined in
the draft.
The good parts, it works (thanks to native table algorithms);
the bad, needs further improvements
- Parameters:
- {Number} availableWidth
- parent node max width
- {template} template
- the source template
- Returns:
- {ComputedWidth} columns width
{ComputedHeight}
computeRowHeights(template)
A lightly modified version of "compute heights" algorithm defined in
the draft.
The good parts, it works (thanks to native table algorithms);
the bad, needs further improvements
- Parameters:
- {template} template
- the source template
- Returns:
- {ComputedHeight} rows height
{HTMLElement[]}
getColumnNodes(gridNode, maxColumns)
Get DOM nodes that maps template grid "columns" (COL nodes)
- Parameters:
- {HTMLElement} gridNode
- grid node
- {integer} maxColumns
- number of columns in grid
- Returns:
- {HTMLElement[]} array of matching gridNode.childNodes[]
{HTMLElement}
getGridNode(templateNode)
Get DOM node that maps template grid (TABLE node)
- Parameters:
- {HTMLElement} templateNode
- template node
- Returns:
- {HTMLElement} templateNode.childNodes[0]
{integer}
getPixels(dimension, max)
Get pixel size. Currently converts "px" and "%"
- Parameters:
- {string} dimension
- source in "75[px|%]" format
- {integer} max
- max size in pixels. Only used relative sizes ("%")
- Returns:
- {integer} given size converted to pixels or Error
{HTMLElement[]}
getRowNode(gridNode, index, maxColumns)
Get DOM node that maps row (TR nodes)
- Parameters:
- {HTMLElement} gridNode
- grid node
- {integer} index
- row index
- {integer} maxColumns
- number of columns in grid
- Returns:
- {HTMLElement[]} array of matching gridNode.childNodes[]
patchDOM()
Generates the HTML code and injects it into the page DOM.
Code generation is done in three steps:
- Step 1: Plain object generation
- Step 2: Column width resize
- Step 3: Ror height resize
resetCSS()
Resets browser default CSS styles.
setColNodeWidth(colNodes, computedWidths)
Set columns width (the COL nodes)
- Parameters:
- {HTMLElement[]} colNodes
- array of DOM nodes that maps column nodes
- {Object} computedWidths
- column widths given by calculateColWidths()
- {integer[]} computedWidths.colWidth
- array of column widths
setGridNodeHeight(gridNode, computedHeights)
Set grid height (the TABLE node)
- Parameters:
- {HTMLElement} gridNode
- DOM node that maps grid element
- {Object} computedHeights
- column widths given by calculateRowHeights()
- {integer} computedHeights.maxHeight
- table height
setGridNodeWidth(gridNode, computedWidths)
Set grid width (the TABLE node)
- Parameters:
- {HTMLElement} gridNode
- DOM node that maps grid element
- {Object} computedWidths
- column widths given by calculateColWidths()
- {integer} computedWidths.totalWidth
- table width
setRowNodeHeight(rowNode, computedHeights, rowIndex)
Set row height (the TR nodes)
- Parameters:
- {HTMLElement} rowNode
- DOM node that maps row element
- {Object} computedHeights
- column widths given by calculateRowHeights()
- {integer[]} computedHeights.rowHeight
- array of row heights
- {integer} rowIndex
- row index
setSlotNodeHeight(slotNode, computedHeights, rowIndex)
Set slot height (the TD nodes)
- Parameters:
- {HTMLElement} slotNode
- DOM node that maps slot element
- {Object} computedHeights
- column widths given by calculateRowHeights()
- {integer[]} computedHeights.rowHeight
- array of row heights
- {integer} rowIndex
- slot rowIndex. See gridSlot#rowIndex
setSlotNodeWidth(slotNode, computedWidths, colIndex)
Set slot width (the TD nodes)
- Parameters:
- {HTMLElement} slotNode
- DOM node that maps slot element
- {Object} computedWidths
- column widths given by calculateColWidths()
- {integer[]} computedWidths.colWidth
- array of column widths
- {integer} colIndex
- slot colIndex. See gridSlot#colIndex