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

    Keywords

    none

    Install

    npm i @densouadtech/bannerbuilder

    DownloadsWeekly Downloads

    0

    Version

    0.0.17

    License

    UNLICENSED

    Last publish

    Collaborators

    • jonaslomholdt
    • lasseborly