BannerBuilder

Example usage

This is a basic usage example.

``html
















`

React usage

`js
import React, { Component } from 'react'
import BannerBuilder from '@densouadtech/bannerbuilder'

export default class BannerBuilderPage extends Component {

bannerBuilder = null

getBanner = () => {
console.log(this.bannerBuilder.getBanner(true))
}

render = () => {
return (
onRef={ref => { this.bannerBuilder = ref }}
theme={{
colors: {
main: 'royablue',
grey: '#444',
danger: '#721c24'
},
font: 'Helvetica'
}}
editor={{
enableSpawner: true,
banner: {
backgroundColor: '#fff',
size: {
width: 1000,
height: 500
}
}
}}
/>
)
}
}

`

Development & Distribution

type make and read instruction

Configuring the Banner builder

At the root of the project is provided a config.example.js.
This config more or less consitutes the default config of the builder.
If you want to configure the builder differently it's there it happens.

#### theme

Allows you to configure the colors of the builder.

`js
bannerBuilder.theme = {
"colors": {
"main": "#478dc9",
"grey": "#e9e9e9",
"danger": "#e74c3c"
}
}
`

#### editor

The dimensions and enabled functionalities of the builder itself can be configured here.

`js
bannerBuilder.editor = {
"enableSpawner": false,
"enableCanvas": true,
"canvas": {
"size": { "width": 450, "height": 900 }
},
"banner": {
"size": { "width": 300, "height": 600 }
}
}
`

#### templates

Templates are the possible elements a banner can consist of.
Text, Button, Header etc.
The templates does not describe the initial elements in the banner builder.

`js
bannerBuilder.templates = [
{
"id": 2,
"name": "Header 01",
"properties": {
"fontScaling": true,
"removeAble": true
},
"size": { "width": 300, "height": 110 },
"position": { "x": 10, "y": 10 },
"initial": {
"text": "Replaced by var",
"style": {
"width": "100%",
"height": "100%",
"display": "flex",
"justifyContent": "center",
"alignItems": "center",
"color": "#333",
"fontWeight": 600,
"fontFamily": "Calibri, Candara, Segoe, 'Segoe UI', Optima, Arial, sans-serif"
}
},
"preview": {
"text": "Header",
"style": {
"fontSize": 40
},
"size": { "width": 140, "height": 55 }
}
},
{
"id": 3,
"name": "Text 01",
"properties": {
"fontScaling": false,
"removeAble": true
},
"size": { "width": 280, "height": 110 },
"position": { "x": 10, "y": 10 },
"initial": {
"text": "This will be replaced by a variable.",
"style": {
"width": "100%",
"height": "100%",
"display": "flex",
"justifyContent": "center",
"alignItems": "center",
"color": "#333",
"fontSize": 20,
"fontFamily": "'Lucida Console', Monaco, monospace"
}
},
"preview": {
"text": "Text",
"style": {
"fontSize": 25
},
"size": { "width": 65, "height": 55 }
}
}
]
`

#### initial

To add initial elements to the builder you have to populate the bannerBuilder.initial
with values pointing to which templates they should take after.
If you have injection variables this is also the place to define those.

`js
bannerBuilder.initial = [
{
"templateId": 2,
"injectionVariable": "injectVar1",
"position": { "x": 0, "y": 3 },
"properties": {
"injectAble": true,
"removeAble": false
}
},
{
"templateId": 3,
"injectionVariable": "injectVar2",
"position": { "x": 20, "y": 230 },
"properties": {
"injectAble": true,
"removeAble": false
}
}
]
`

#### fonts

A list of fonts available with they name/key and the values that will be used for the final element.

`js
bannerBuilder.fonts = [
{
"name": "Arial",
"family": "Arial, Helvetica, sans-serif"
},
{
"name": "Calibri",
"family": "Calibri, Candara, Segoe, 'Segoe UI', Optima, Arial, sans-serif"
}
]
`

#### images

A list of images primarily used as selected background images.

`js
bannerBuilder.images = [
"https://s3.eu-central-1.amazonaws.com/densou.bannerbuilder/images/01.jpg",
"https://s3.eu-central-1.amazonaws.com/densou.bannerbuilder/images/02.jpg"
]
``