@densouadtech/bannerbuilder

0.0.17 • Public • Published

BannerBuilder

Example usage

This is an 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>

Development

The builder will be accessible at port 3000.

docker-compose up

Build distribution

Make sure the container is running and then:

docker-compose exec app npm run dist

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"
]

Readme

Keywords

none

Package Sidebar

Install

npm i @densouadtech/bannerbuilder

Weekly Downloads

0

Version

0.0.17

License

UNLICENSED

Last publish

Collaborators

  • jonaslomholdt
  • lasseborly