BannerBuilder
Example usage
This is a basic usage example.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<!-- Optional variables for injection -->
<script src="/variables.js"></script>
<div id="bannerbuilder-container"></div>
<script src="/bannerbuilder.0.0.1.js"></script>
<!-- Optional config -->
<script src="/bannerbuilder.config.js"></script>
</body>
</html>React usage
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 (
<BannerBuilder
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.
bannerBuilder.theme = {
"colors": {
"main": "#478dc9",
"grey": "#e9e9e9",
"danger": "#e74c3c"
}
}
editor
The dimensions and enabled functionalities of the builder itself can be configured here.
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.
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.
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.
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.
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"
]