-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
perf: Update blocks to the latest version
- Loading branch information
Showing
9 changed files
with
314 additions
and
322 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -7,6 +7,7 @@ on: | |
| branches: | ||
| - master | ||
| - beta | ||
| - alpha | ||
| - next | ||
|
|
||
| jobs: | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,119 +1,115 @@ | ||
| import { | ||
| IStructure, | ||
| RenderingClass, | ||
| IpBlocks, | ||
| IStructureColumnOptions | ||
| } from './interfaces'; | ||
| import { Text, Image, Button, Divider, Spacer, Social } from './blocks'; | ||
| import { | ||
| createWidthHeight, | ||
| createPadding, | ||
| createBorder, | ||
| defaultStructureColumnsWidth | ||
| } from './utils'; | ||
| import {IpBlocks, IStructure, IStructureColumnOptions, RenderingClass} from './interfaces'; | ||
| import {Button, Divider, Image, Social, Spacer, Text} from './blocks'; | ||
| import {createBorder, createPadding, createWidthHeight, defaultStructureColumnsWidth} from './utils'; | ||
|
|
||
| const defaultColumnsOptions: IStructureColumnOptions = { | ||
| background: { | ||
| color: '#cccccc' | ||
| }, | ||
| border: { | ||
| width: 0, | ||
| color: '#cccccc', | ||
| radius: 0, | ||
| style: 'solid' | ||
| }, | ||
| verticalAlign: 'top' | ||
| background: { | ||
| color: '#cccccc' | ||
| }, | ||
| border: { | ||
| width: 0, | ||
| color: '#cccccc', | ||
| radius: 0, | ||
| style: 'solid' | ||
| }, | ||
| verticalAlign: 'top' | ||
| }; | ||
|
|
||
| export class Section implements RenderingClass { | ||
| constructor(private structure: IStructure) {} | ||
|
|
||
| private static getBlock(block: IpBlocks) { | ||
| switch (block.type) { | ||
| case 'text': | ||
| return new Text(block.innerText, block.options).render(); | ||
| case 'image': | ||
| return new Image(block.src, block.options).render(); | ||
| case 'button': | ||
| return new Button(block.innerText, block.options).render(); | ||
| case 'divider': | ||
| return new Divider(block.options).render(); | ||
| case 'spacer': | ||
| return new Spacer(block.options).render(); | ||
| case 'social': | ||
| return new Social(block.networks, block.options).render(); | ||
| constructor(private structure: IStructure) { | ||
| } | ||
| } | ||
|
|
||
| private getColumnWidth(index: number) { | ||
| const { | ||
| columnsWidth = defaultStructureColumnsWidth(this.structure.type) | ||
| } = this.structure.options; | ||
| const fullWidth = columnsWidth.reduce((n, fr) => n + fr, 0); | ||
| const colFr = columnsWidth[index]; | ||
| return Math.round((100 * colFr) / fullWidth); | ||
| } | ||
|
|
||
| private createColumns() { | ||
| const { | ||
| elements, | ||
| options: { disableResponsive = false, gaps = [4, 4], columns = [] } | ||
| } = this.structure; | ||
| private static getBlock(block: IpBlocks) { | ||
| switch (block.type) { | ||
| case 'text': | ||
| return new Text(block.innerText, block.options).render(); | ||
| case 'image': | ||
| return new Image(block.src, block.options).render(); | ||
| case 'button': | ||
| return new Button(block.innerText, block.options).render(); | ||
| case 'divider': | ||
| return new Divider(block.options).render(); | ||
| case 'spacer': | ||
| return new Spacer(block.options).render(); | ||
| case 'social': | ||
| return new Social(block.networks, block.options).render(); | ||
| } | ||
| } | ||
|
|
||
| const columnsElements = elements | ||
| .map((el, index) => { | ||
| const column = (columns && columns[index]) || defaultColumnsOptions; | ||
| /** | ||
| * Limitations of background-images size and position on Outlook desktop: | ||
| * - If background-size is not specified, no-repeat will be ignored on Outlook. | ||
| * - If the specified size is a single attribute in percent, the height will be auto as in standard css. | ||
| * On outlook, the image will never overflow the element, and it will be shrinked instead of being cropped like on other clients. | ||
| * | ||
| * @version 4 | ||
| * Add support for attributes: | ||
| * full-width | ||
| */ | ||
| render() { | ||
| const {type, id, options} = this.structure; | ||
| let cssClass = `${type} ${id} ip-section`; | ||
| if (options.disableResponsive) { | ||
| cssClass = `${cssClass} disable-responsive`; | ||
| } | ||
| return ` | ||
| <mj-column | ||
| width="${this.getColumnWidth(index)}%" | ||
| background-color="${column.background.color}" | ||
| padding="${gaps[0]}px ${gaps[1]}px" | ||
| border="${createBorder(column.border)}" | ||
| border-radius="${column.border.radius || 0}px" | ||
| vertical-align="${column.verticalAlign}" | ||
| css-class="ip-column ${ | ||
| (column.border.radius || 0) > 0 ? 'ip-border-radius' : '' | ||
| }"> | ||
| ${el.map(block => Section.getBlock(block)).join('')} | ||
| </mj-column> | ||
| `; | ||
| }) | ||
| .join(''); | ||
| <mj-section | ||
| full-width="false" | ||
| css-class="${cssClass}" | ||
| border="${createBorder(options.border)}" | ||
| border-radius="${options.border.radius}px" | ||
| text-align="center" | ||
| padding="${createPadding(options.padding)}" | ||
| background-color="${options.background.color}" | ||
| background-url="${options.background.url}" | ||
| background-repeat="${options.background.repeat}" | ||
| background-size="${ | ||
| options.background.size | ||
| ? createWidthHeight(options.background.size) | ||
| : 'auto' | ||
| }"> | ||
| ${this.createColumns()} | ||
| </mj-section> | ||
| `; | ||
| } | ||
|
|
||
| if (disableResponsive) { | ||
| return `<mj-group>${columnsElements}</mj-group>`; | ||
| private getColumnWidth(index: number) { | ||
| const { | ||
| columnsWidth = defaultStructureColumnsWidth(this.structure.type) | ||
| } = this.structure.options; | ||
| const fullWidth = columnsWidth.reduce((n, fr) => n + fr, 0); | ||
| const colFr = columnsWidth[index]; | ||
| return Math.round((100 * colFr) / fullWidth); | ||
| } | ||
|
|
||
| return columnsElements; | ||
| } | ||
| private createColumns() { | ||
| const { | ||
| elements, | ||
| options: {disableResponsive = false, gaps = [4, 4], columns = []} | ||
| } = this.structure; | ||
|
|
||
| const columnsElements = elements.map((el, index) => { | ||
| const column = (columns && columns[index]) || defaultColumnsOptions; | ||
| return ` | ||
| <mj-column | ||
| width="${this.getColumnWidth(index)}%" | ||
| background-color="${column.background.color}" | ||
| padding="${gaps[0]}px ${gaps[1]}px" | ||
| border="${createBorder(column.border)}" | ||
| border-radius="${column.border.radius || 0}px" | ||
| vertical-align="${column.verticalAlign}" | ||
| css-class="ip-column ${ | ||
| (column.border.radius || 0) > 0 ? 'ip-border-radius' : '' | ||
| }"> | ||
| ${el.map(block => Section.getBlock(block)).join('')} | ||
| </mj-column> | ||
| `; | ||
| }).join(''); | ||
|
|
||
| if (disableResponsive) { | ||
| return `<mj-group>${columnsElements}</mj-group>`; | ||
| } | ||
|
|
||
| /** | ||
| * @version 4 | ||
| * Add support for full-width | ||
| */ | ||
| render() { | ||
| const { type, id, options } = this.structure; | ||
| let cssClass = `${type} ${id} ip-section`; | ||
| if (options.disableResponsive) { | ||
| cssClass = `${cssClass} disable-responsive`; | ||
| return columnsElements; | ||
| } | ||
| return ` | ||
| <mj-section | ||
| css-class="${cssClass}" | ||
| full-width="none" | ||
| border-radius="${options.border.radius}px" | ||
| text-align="center" | ||
| padding="${createPadding(options.padding)}" | ||
| background-color="${options.background.color}" | ||
| background-url="${options.background.url}" | ||
| background-repeat="${options.background.repeat}" | ||
| background-size="${ | ||
| options.background.size | ||
| ? createWidthHeight(options.background.size) | ||
| : 'auto' | ||
| }"> | ||
| ${this.createColumns()} | ||
| </mj-section> | ||
| `; | ||
| } | ||
| } |
Oops, something went wrong.