Compiler Library
Input Params:
- data (required)
- context (optional | default = 'editor' | options: editor, preview, publish, host)
- transform (optional | default = true) | options: true or false
Output Params:
- html (generated html)
- output (any information that need to be added to database)
Sample Data
- Raw Data (before any transformation)
- Tranformed Data
- Transformed Data with Nested Elements
How to use the js version
Initializiation
const sampleData = <sample-data>; // (1)
Working with raw data
const superCompiler = new BannerwiseCompiler.CompilerBuilder(SAMPLE_DATA) // (2)
.setTransform(true) // default value: true - optional
.setInjectBaseCss(true) // default value: true - optional
.setIsStatic(false) // default value: false - optional
.setContext('editor') // default value: editor - optional
.build();
Working with element
const superCompiler = new BannerwiseCompiler.CompilerBuilder(SAMPLE_DATA)
.setContext('element') // default value: editor - optional
.build();
Compiling Stuff
const [html, output] = superCompiler.compile();
Working with BannerUtils
const bannerUtils = ne BannerwiseCompiler.BannerUtils('.element');
// for invalidate element
bannerUtils.invalidate();
How to use the NPM Package Version
Install the NPM Package
npm install @bannerwise-packages/compiler --save
Import the Package
import { CompilerBuilder } from '@bannerwise-packages/compiler';
Compiling Stuff
const compiler = new BannerwiseCompiler.CompilerBuilder(SAMPLE_DATA)
.setTransform(true) // default value: true - optional
.setInjectBaseCss(true) // default value: true - optional
.setIsStatic(false) // default value: false - optional
.setContext('editor') // default value: editor - optional
.build();
const [html, output] = compiler.compile();
Setup Development Environment
Since the compiler is a library it needs a server to run on.
The following repository contains several projects:
For compiler development we care about two folder:
- compiler (library itself)
- server (place to test the npm package)
Setting the compiler project
inside compiler folder
-
Install dependencies
- npm install
-
Build the NPM Package
- npm run build-npm
-
Link the Package to Local Node
- npm link
** Everytime you need to test a change you need to run (it automatically update the lib in the server):
npm run build-npm
Generate JS Dist Files the javascript file generated will be available in the "dist/js" folder
Generate NPM Package Files the javascript and types files generated will be available in the "lib" folder
npm run build-js
npm run build-js-production
Setting the server project
inside server folder
-
Install dependencies
- npm install
-
Link Compiler Package
- npm link @bannerwise-packages/compiler
-
Run the Server in Watch Mode
- npm run start:dev
Filter Condition
data is a object
const filtered = BannerwiseCompiler.ConditionEvaluator.filter(data, {"$or":[{"price":{"$eq":"199.99"}},{"price":{"$gt":"99"}}]});
Sample
const data = {
"_id": "6229ed470d54a800113c6a03",
"updatedAt": "2022-03-10T12:29:01.259Z",
"feed": {
"_id": "61ddb3354855cd001349a0ef",
"demo": false,
"accountIds": [
"60215a814b6e3300107d1825"
],
"bannerSetIds": [],
"originalBannerSetIds": [
"6229ed470d54a800113c6a03"
],
"sync": false,
"updating": false,
"timezone": "Europe/Amsterdam",
"name": "gads-retail",
"networkId": "5bbb60d36cf710000f8b76fd",
"currencyFormatId": {
"_id": "6195021428a89c53c4edd4ef",
"currencySign": "left",
"currencySignSpace": true,
"thousandSeparator": "singlequote",
"decimalSeparator": "point",
"decimalAlignment": "inline",
"fullAmounts": "zero",
"accountId": null,
"__v": 0
},
"metadata": {
"syncTime": "1",
"syncRepeat": "day",
"type": "Retail",
"url": "https://bannerwise-assets.s3.eu-central-1.amazonaws.com/feed/!testFeeds/!googleAds/googleAdsMaster.csv",
"source": "https://bannerwise-assets.s3.eu-central-1.amazonaws.com/feed/!testFeeds/!googleAds/googleAdsMaster.csv",
"mapping": {
"ID": "no_import",
"Item title": "no_import",
"Final URL": "no_import",
"Title": "text",
"description": "text",
"link": "click",
"image_link": "image",
"Listing ID": "no_import",
"Listing name": "no_import",
"Deal ID": "no_import",
"Deal name": "no_import",
"Job ID": "no_import",
"Property ID": "no_import",
"Property name": "no_import",
"Destination ID": "no_import",
"Flight description": "no_import",
"Program ID": "no_import",
"Program name": "no_import",
"id": "no_import"
},
"format": "csv",
"delimiter": ",",
"quote": null
},
"createdAt": "2022-01-11T16:41:25.644Z",
"updatedAt": "2022-01-11T16:41:25.650Z",
"__v": 0,
"lastSync": "2022-01-29T00:11:14.627Z"
},
"kind": "display_dynamic",
"dynamic": true,
"network": "5bbb60d36cf710000f8b76fd",
"originalLanguage": "5d5fac208435de97c57a8b0f",
"createdBy": "60215a81f2dba00010fbe7b7",
"lastEditedBy": "60215a81f2dba00010fbe7b7",
"migrated": true,
"createdAt": "2022-03-10T12:21:27.976Z",
"deleted": false,
"publishing": false,
"publishCounter": 0,
"sync": false,
"disclaimerFontSize": 12,
"customerIds": [
"60215a824b6e3300107d1828"
],
"conditions": [],
"accountIds": [
"60215a814b6e3300107d1825"
],
"resources": [
"575ea20f772e47f517563c39",
"575ea20f772e47f517563c34",
"6229ee130d54a800113c6a1e",
"5c4735ae45dbb98201d15a56",
"6229eecd96c72e0011dfc28f"
],
"languages": [
{
"_id": "5d5fac208435de97c57a8b0f",
"code": "EN",
"__v": 0,
"hyphenationCode": "en-gb",
"hyphenationWord": "Supercalifragilisticexpialidocious",
"logo": "EN.png",
"name": "English (UK)",
"rightToLeftText": false
}
],
"versions": [
{
"_id": "6229ed480d54a800113c6a04",
"updatedAt": "2022-03-10T12:21:28.009Z",
"language": "5d5fac208435de97c57a8b0f",
"createdAt": "2022-03-10T12:21:28.008Z",
"banners": [
"6229ed470d54a800113c6a01"
],
"name": "Default",
"__v": 0
}
],
"formats": [
"574c86ff34d32eae13045e5e"
],
"banners": [
{
"_id": "6229ed470d54a800113c6a01",
"updatedAt": "2022-03-10T12:29:01.238Z",
"adaptiveLanguageId": "6229ed470d54a800113c6a02",
"language": "5d5fac208435de97c57a8b0f",
"format": "574c86ff34d32eae13045e5e",
"height": 250,
"width": 300,
"createdAt": "2022-03-10T12:21:27.925Z",
"landingPage": "http://www.google.com",
"deleted": false,
"userIds": [],
"accountIds": [
"60215a814b6e3300107d1825"
],
"slides": [
{
"_id": "6229ed470d54a800113c69ff",
"updatedAt": "2022-03-10T12:29:01.240Z",
"adaptiveLanguageId": "6229ed470d54a800113c6a00",
"createdAt": "2022-03-10T12:21:27.924Z",
"deleted": false,
"elements": [
{
"_id": "6229eed20d54a800113c6a46",
"updatedAt": "2022-03-10T12:29:01.255Z",
"css": {
"height": 56,
"width": 102,
"paddingBottom": 0,
"paddingRight": 0,
"paddingTop": 0,
"paddingLeft": 0,
"padding": 0,
"backgroundSize": "contain",
"backgroundColor": "#000000",
"borderColor": "transparent",
"letterSpacing": 0,
"lineHeight": 1.2,
"_rotation": 0,
"_msTransform": [],
"_webkitTransform": [],
"_mozTransform": [],
"_transforms": [],
"whiteSpace": "normal",
"fill": "#000000",
"textShadow": "none",
"fontWeight": "normal",
"textTransform": "none",
"textDecoration": "none",
"justifyContent": "center",
"textAlign": "left",
"color": "#000000",
"fontSize": 20,
"fontStyle": "normal",
"fontFamily": "Arial",
"zIndex": 7,
"opacity": 1,
"scaleY": 1,
"scaleX": 1,
"left": 179,
"top": 10,
"rotation": 0
},
"props": {
"thumbnailName": "frik_t.jpeg",
"sourceUrl": "https://ads.bannerwise.io/ibv/60215a814b6e3300107d1825/6229eecd96c72e0011dfc28f.mp4",
"replay": true,
"loopBanner": false,
"loop": false,
"controls": true,
"autoplay": false
},
"country": "NL",
"disabled": false,
"adaptiveId": "95c3d4c9-2437-c21b-153d-0a71e2c41d8e",
"text": "",
"inline": false,
"quality": 81,
"dynamic": false,
"cropBounds": null,
"animations": null,
"name": "Video",
"type": "video",
"aspectRatio": true,
"resourceId": "6229eecd96c72e0011dfc28f",
"cloudinaryId": "images/izecvtlae5a2b0ctdrkx",
"slide": "6229ed470d54a800113c69ff",
"banner": "6229ed470d54a800113c6a01",
"adaptiveLanguageId": "6229eed20d54a800113c6a45",
"createdAt": "2022-03-10T12:28:02.445Z",
"deleted": false,
"textLines": [],
"fill": {
"color": null
},
"variants": [],
"customerIds": [],
"accountIds": [],
"__v": 1,
"frame": {
"origin": {
"y": 10,
"x": 179
},
"size": {
"height": 56,
"width": 102
}
}
},
{
"_id": "6229ee9396c72e0011dfc28b",
"updatedAt": "2022-03-10T12:29:01.252Z",
"css": {
"borderWidth": "1",
"borderRadius": 15,
"height": 43,
"width": 81,
"paddingBottom": 10,
"paddingRight": 15,
"paddingTop": 10,
"paddingLeft": 15,
"padding": 0,
"backgroundSize": "contain",
"backgroundColor": "#2B90D9",
"borderColor": "#1E6ECD",
"letterSpacing": 0,
"lineHeight": 1.2,
"_rotation": 0,
"_msTransform": [],
"_webkitTransform": [],
"_mozTransform": [],
"_transforms": [],
"whiteSpace": "normal",
"fill": "#000000",
"textShadow": "none",
"fontWeight": "normal",
"textTransform": "none",
"textDecoration": "none",
"justifyContent": "center",
"textAlign": "center",
"color": "#FFFFFF",
"fontSize": 16,
"fontStyle": "normal",
"fontFamily": "Arial",
"zIndex": 6,
"opacity": 1,
"scaleY": 1,
"scaleX": 1,
"left": 204,
"top": 186,
"rotation": 0
},
"props": {
"autoSize": {
"constraints": {
"maxHeight": 40,
"minHeight": 20,
"maxWidth": 150,
"minWidth": 75
},
"lineBreak": false,
"direction": "left-right",
"status": false,
"type": "width"
},
"rightToLeft": false,
"verticalAlign": "vertical-align-middle"
},
"country": "NL",
"disabled": false,
"adaptiveId": "ae413451-93b9-a884-b09b-a17ff33bd5c4",
"text": "!",
"inline": false,
"quality": 81,
"dynamic": false,
"cropBounds": null,
"animations": {
"exit": {
"css": {
"width": 0,
"left": 0
},
"type": "Exit",
"id": "3a407f8a-95ce-aae0-0d13-65bc7fa7fa01",
"animationMove": {
"_rotation": 0,
"_msTransform": [],
"_webkitTransform": [],
"_mozTransform": [],
"_transforms": [],
"active": false,
"height": 0,
"width": 0,
"left": 0,
"top": 0
},
"active": true,
"styles": {
"widgetHyundai": false,
"flipVer": false,
"flipHor": false,
"move": false,
"shake": false,
"fade": false,
"big": false,
"small": false,
"fly": true,
"rotate": false
},
"ease": {
"animation": "0,0,1,1",
"value": null,
"bwLabel": "None",
"label": "Power0.easeNone"
},
"delay": 4,
"duration": 1,
"direction": "Center"
},
"emphasis": {
"repeats": 3,
"speed": 0.5,
"css": {
"width": 0,
"left": 0
},
"type": "Emphasis",
"id": "b1043d35-4e6b-8209-3a7c-5b0bb2ac35df",
"animationMove": {
"_rotation": 0,
"_msTransform": [],
"_webkitTransform": [],
"_mozTransform": [],
"_transforms": [],
"active": false,
"height": 0,
"width": 0,
"left": 0,
"top": 0
},
"active": false,
"styles": {
"widgetHyundai": false,
"flipVer": false,
"flipHor": false,
"move": false,
"shake": false,
"fade": false,
"big": false,
"small": false,
"fly": true,
"rotate": false
},
"ease": {
"animation": "0,0,1,1",
"value": null,
"bwLabel": "None",
"label": "Power0.easeNone"
},
"delay": 2,
"duration": 1,
"direction": "Center"
},
"entrance": {
"css": {
"width": 0,
"left": 0
},
"type": "Entrance",
"id": "b1de36c2-a3a7-e875-1dd8-e696ff26efa3",
"animationMove": {
"_rotation": 0,
"_msTransform": [],
"_webkitTransform": [],
"_mozTransform": [],
"_transforms": [],
"active": false,
"height": 0,
"width": 0,
"left": 0,
"top": 0
},
"active": true,
"styles": {
"widgetHyundai": false,
"flipVer": false,
"flipHor": false,
"move": false,
"shake": false,
"fade": false,
"big": false,
"small": false,
"fly": true,
"rotate": false
},
"ease": {
"animation": "0,0,1,1",
"value": null,
"bwLabel": "None",
"label": "Power0.easeNone"
},
"delay": 0,
"duration": 1,
"direction": "Center"
}
},
"type": "button",
"aspectRatio": false,
"slide": "6229ed470d54a800113c69ff",
"banner": "6229ed470d54a800113c6a01",
"style": "b-medium-shadow",
"adaptiveLanguageId": "6229ee9396c72e0011dfc28a",
"createdAt": "2022-03-10T12:26:59.806Z",
"deleted": false,
"textLines": [],
"fill": {
"color": null
},
"variants": [],
"customerIds": [],
"accountIds": [],
"__v": 1,
"frame": {
"origin": {
"y": 186,
"x": 204
},
"size": {
"height": 43,
"width": 81
}
},
"hover": {
"backgroundColor": "#D2D4D6",
"color": "#C9C9C9"
}
},
{
"_id": "6229ed6996c72e0011dfc248",
"updatedAt": "2022-03-10T12:29:01.244Z",
"css": {
"height": 85,
"width": 266,
"paddingBottom": 0,
"paddingRight": 0,
"paddingTop": 0,
"paddingLeft": 0,
"padding": 0,
"backgroundSize": "contain",
"backgroundColor": "#2BD9C2",
"borderColor": "transparent",
"letterSpacing": 0,
"lineHeight": 1.2,
"_rotation": 0,
"_msTransform": [],
"_webkitTransform": [],
"_mozTransform": [],
"_transforms": [],
"whiteSpace": "normal",
"fill": "#000000",
"textShadow": "none",
"fontWeight": "normal",
"textTransform": "none",
"textDecoration": "none",
"justifyContent": "center",
"textAlign": "left",
"color": "#000000",
"fontSize": 20,
"fontStyle": "normal",
"fontFamily": "Arial",
"zIndex": 5,
"opacity": 0.4,
"scaleY": 1,
"scaleX": 1,
"left": 15,
"top": 78,
"rotation": 0
},
"country": "NL",
"disabled": false,
"adaptiveId": "5a24b332-ac9e-2900-3454-bb8772038f59",
"text": "",
"inline": false,
"quality": 81,
"dynamic": true,
"cropBounds": null,
"animations": null,
"name": "link 1",
"type": "click",
"clickUrl": "https://bannerwise.io",
"aspectRatio": false,
"dynamicSettings": {
"label": "link",
"index": "1"
},
"slide": "6229ed470d54a800113c69ff",
"banner": "6229ed470d54a800113c6a01",
"adaptiveLanguageId": "6229ed6996c72e0011dfc247",
"createdAt": "2022-03-10T12:22:01.358Z",
"deleted": false,
"textLines": [],
"fill": {
"color": null
},
"variants": [],
"customerIds": [],
"accountIds": [],
"__v": 1,
"frame": {
"origin": {
"y": 78,
"x": 15
},
"size": {
"height": 85,
"width": 266
}
}
},
{
"_id": "6229ee170d54a800113c6a22",
"updatedAt": "2022-03-10T12:29:01.251Z",
"css": {
"height": 86,
"width": 152,
"paddingBottom": 0,
"paddingRight": 0,
"paddingTop": 0,
"paddingLeft": 0,
"padding": 0,
"backgroundSize": "contain",
"backgroundColor": "transparent",
"borderColor": "transparent",
"letterSpacing": 0,
"lineHeight": 1.2,
"_rotation": 0,
"_msTransform": [],
"_webkitTransform": [],
"_mozTransform": [],
"_transforms": [],
"whiteSpace": "normal",
"fill": "#000000",
"textShadow": "none",
"fontWeight": "normal",
"textTransform": "none",
"textDecoration": "none",
"justifyContent": "center",
"textAlign": "left",
"color": "#000000",
"fontSize": 20,
"fontStyle": "normal",
"fontFamily": "Arial",
"zIndex": 4,
"opacity": 1,
"scaleY": 1,
"scaleX": 1,
"left": 69,
"top": 77,
"rotation": 0
},
"props": {
"image": {
"height": 86,
"width": 152,
"left": 0,
"top": 0
},
"originalHeight": 270,
"originalWidth": 480,
"backgroundSize": "stretch"
},
"country": "NL",
"disabled": false,
"adaptiveId": "38619a4d-6788-150e-14d6-e14e34992b34",
"text": "",
"inline": false,
"quality": 81,
"dynamic": false,
"cropBounds": null,
"animations": {
"exit": {
"css": {
"width": 0,
"left": 0
},
"type": "Exit",
"id": "a6fdfa95-ad3c-ab27-0da8-8f0198a4d2bd",
"animationMove": {
"_rotation": 0,
"_msTransform": [],
"_webkitTransform": [],
"_mozTransform": [],
"_transforms": [],
"active": false,
"height": 0,
"width": 0,
"left": 0,
"top": 0
},
"active": true,
"styles": {
"widgetHyundai": false,
"flipVer": false,
"flipHor": false,
"move": false,
"shake": false,
"fade": false,
"big": false,
"small": false,
"fly": true,
"rotate": false
},
"ease": {
"animation": "0,0,1,1",
"value": null,
"bwLabel": "None",
"label": "Power0.easeNone"
},
"delay": 4,
"duration": 1,
"direction": "Center"
},
"emphasis": {
"repeats": 3,
"speed": 0.5,
"css": {
"width": 0,
"left": 0
},
"type": "Emphasis",
"id": "c221014e-6f4f-adc1-cfd9-bdde2d25f491",
"animationMove": {
"_rotation": 0,
"_msTransform": [],
"_webkitTransform": [],
"_mozTransform": [],
"_transforms": [],
"active": false,
"height": 0,
"width": 0,
"left": 0,
"top": 0
},
"active": false,
"styles": {
"widgetHyundai": false,
"flipVer": false,
"flipHor": false,
"move": false,
"shake": false,
"fade": false,
"big": false,
"small": false,
"fly": true,
"rotate": false
},
"ease": {
"animation": "0,0,1,1",
"value": null,
"bwLabel": "None",
"label": "Power0.easeNone"
},
"delay": 2,
"duration": 1,
"direction": "Center"
},
"entrance": {
"css": {
"width": 0,
"left": 0
},
"type": "Entrance",
"id": "5ce534ee-9fbb-8986-5a88-2e084be28ff3",
"animationMove": {
"_rotation": 0,
"_msTransform": [],
"_webkitTransform": [],
"_mozTransform": [],
"_transforms": [],
"active": false,
"height": 0,
"width": 0,
"left": 0,
"top": 0
},
"active": true,
"styles": {
"widgetHyundai": false,
"flipVer": false,
"flipHor": false,
"move": false,
"shake": false,
"fade": false,
"big": false,
"small": false,
"fly": true,
"rotate": false
},
"ease": {
"animation": "0,0,1,1",
"value": null,
"bwLabel": "None",
"label": "Power0.easeNone"
},
"delay": 0,
"duration": 1,
"direction": "Center"
}
},
"name": "borat.gif",
"type": "image",
"format": "gif",
"aspectRatio": true,
"resourceId": "6229ee130d54a800113c6a1e",
"cloudinaryId": "images/cisw4kvx8c38kgafklnp",
"slide": "6229ed470d54a800113c69ff",
"banner": "6229ed470d54a800113c6a01",
"adaptiveLanguageId": "6229ee170d54a800113c6a21",
"createdAt": "2022-03-10T12:24:55.903Z",
"deleted": false,
"textLines": [],
"fill": {
"color": null
},
"variants": [],
"customerIds": [],
"accountIds": [],
"__v": 1,
"frame": {
"origin": {
"y": 77,
"x": 69
},
"size": {
"height": 86,
"width": 152
}
}
},
{
"_id": "6229edc00d54a800113c6a1b",
"updatedAt": "2022-03-10T12:29:01.249Z",
"css": {
"height": 52,
"width": 139,
"paddingBottom": 0,
"paddingRight": 0,
"paddingTop": 0,
"paddingLeft": 0,
"padding": 0,
"backgroundSize": "contain",
"backgroundColor": "transparent",
"borderColor": "transparent",
"letterSpacing": 0,
"lineHeight": 1.2,
"_rotation": 0,
"_msTransform": [],
"_webkitTransform": [],
"_mozTransform": [],
"_transforms": [],
"whiteSpace": "normal",
"fill": "#000000",
"textShadow": "none",
"fontWeight": "normal",
"textTransform": "none",
"textDecoration": "none",
"justifyContent": "center",
"textAlign": "left",
"color": "#000000",
"fontSize": 20,
"fontStyle": "normal",
"fontFamily": "Arial",
"zIndex": 3,
"opacity": 1,
"scaleY": 1,
"scaleX": 1,
"left": 15,
"top": 10,
"rotation": 0
},
"props": {
"image": {
"height": 52,
"width": 139,
"left": 0,
"top": 0
},
"backgroundSize": "contain",
"originalHeight": 46,
"originalWidth": 300
},
"country": "NL",
"disabled": false,
"adaptiveId": "222141fd-bbf8-3543-a9a1-ccaac30b1095",
"text": "",
"inline": false,
"quality": 81,
"dynamic": true,
"cropBounds": null,
"animations": {
"exit": {
"css": {
"width": 0,
"left": 0
},
"type": "Exit",
"id": "a0c3c257-1bea-d488-fac8-f8ba81bac795",
"animationMove": {
"_rotation": 0,
"_msTransform": [],
"_webkitTransform": [],
"_mozTransform": [],
"_transforms": [],
"active": false,
"height": 0,
"width": 0,
"left": 0,
"top": 0
},
"active": true,
"styles": {
"widgetHyundai": false,
"flipVer": false,
"flipHor": false,
"move": false,
"shake": false,
"fade": false,
"big": false,
"small": false,
"fly": true,
"rotate": false
},
"ease": {
"animation": "0,0,1,1",
"value": null,
"bwLabel": "None",
"label": "Power0.easeNone"
},
"delay": 4,
"duration": 1,
"direction": "Center"
},
"emphasis": {
"repeats": 3,
"speed": 0.5,
"css": {
"width": 0,
"left": 0
},
"type": "Emphasis",
"id": "c5d326d2-2007-a3c3-07ce-c2472f308f4d",
"animationMove": {
"_rotation": 0,
"_msTransform": [],
"_webkitTransform": [],
"_mozTransform": [],
"_transforms": [],
"active": false,
"height": 0,
"width": 0,
"left": 0,
"top": 0
},
"active": false,
"styles": {
"widgetHyundai": false,
"flipVer": false,
"flipHor": false,
"move": false,
"shake": false,
"fade": false,
"big": false,
"small": false,
"fly": true,
"rotate": false
},
"ease": {
"animation": "0,0,1,1",
"value": null,
"bwLabel": "None",
"label": "Power0.easeNone"
},
"delay": 2,
"duration": 1,
"direction": "Center"
},
"entrance": {
"css": {
"width": 0,
"left": 0
},
"type": "Entrance",
"id": "161d1376-a7e9-5278-934a-cabbb09c84ed",
"animationMove": {
"_rotation": 0,
"_msTransform": [],
"_webkitTransform": [],
"_mozTransform": [],
"_transforms": [],
"active": false,
"height": 0,
"width": 0,
"left": 0,
"top": 0
},
"active": true,
"styles": {
"widgetHyundai": false,
"flipVer": false,
"flipHor": false,
"move": false,
"shake": false,
"fade": false,
"big": false,
"small": false,
"fly": true,
"rotate": false
},
"ease": {
"animation": "0,0,1,1",
"value": null,
"bwLabel": "None",
"label": "Power0.easeNone"
},
"delay": 0,
"duration": 1,
"direction": "Center"
}
},
"name": "image_link 1",
"type": "image",
"aspectRatio": false,
"dynamicSettings": {
"label": "image_link",
"index": "1"
},
"slide": "6229ed470d54a800113c69ff",
"banner": "6229ed470d54a800113c6a01",
"adaptiveLanguageId": "6229edc00d54a800113c6a1a",
"createdAt": "2022-03-10T12:23:28.596Z",
"deleted": false,
"textLines": [],
"fill": {
"color": null
},
"variants": [],
"customerIds": [],
"accountIds": [],
"__v": 1,
"frame": {
"origin": {
"y": 10,
"x": 15
},
"size": {
"height": 52,
"width": 139
}
}
},
{
"_id": "6229ed610d54a800113c6a0c",
"updatedAt": "2022-03-10T12:29:01.242Z",
"css": {
"borderRadius": 0,
"borderWidth": "0",
"height": 26,
"width": 120,
"paddingBottom": 0,
"paddingRight": 0,
"paddingTop": 0,
"paddingLeft": 0,
"padding": 0,
"backgroundSize": "contain",
"backgroundColor": "transparent",
"borderColor": "transparent",
"letterSpacing": 0,
"lineHeight": 1.2,
"_rotation": 0,
"_msTransform": [],
"_webkitTransform": [],
"_mozTransform": [],
"_transforms": [],
"whiteSpace": "normal",
"fill": "#000000",
"textShadow": "none",
"fontWeight": "normal",
"textTransform": "none",
"textDecoration": "none",
"justifyContent": "center",
"textAlign": "left",
"color": "#F2F2F2",
"fontSize": 15,
"fontStyle": "normal",
"fontFamily": "Advent Pro",
"zIndex": 2,
"opacity": 1,
"scaleY": 1,
"scaleX": 1,
"left": 15,
"top": 206,
"rotation": 0
},
"props": {
"verticalAlign": "vertical-align-middle",
"maxFontSize": 15,
"minFontSize": 8,
"rightToLeft": false,
"scaleToFit": true
},
"country": "NL",
"disabled": false,
"adaptiveId": "75569ecb-e4e7-0ff6-f928-ceb9a683d643",
"text": "",
"inline": false,
"quality": 81,
"dynamic": true,
"cropBounds": null,
"animations": {
"exit": {
"css": {
"width": 0,
"left": 0
},
"type": "Exit",
"id": "3847b99d-4460-fda2-f73a-0923e9c0b17d",
"animationMove": {
"_rotation": 0,
"_msTransform": [],
"_webkitTransform": [],
"_mozTransform": [],
"_transforms": [],
"active": false,
"height": 0,
"width": 0,
"left": 0,
"top": 0
},
"active": true,
"styles": {
"widgetHyundai": false,
"flipVer": false,
"flipHor": false,
"move": false,
"shake": false,
"fade": false,
"big": false,
"small": false,
"fly": true,
"rotate": false
},
"ease": {
"animation": "0,0,1,1",
"value": null,
"bwLabel": "None",
"label": "Power0.easeNone"
},
"delay": 4,
"duration": 1,
"direction": "Center"
},
"emphasis": {
"repeats": 3,
"speed": 0.5,
"css": {
"width": 0,
"left": 0
},
"type": "Emphasis",
"id": "50fc5e5d-ae48-bbc7-7ef5-beeaae269ad5",
"animationMove": {
"_rotation": 0,
"_msTransform": [],
"_webkitTransform": [],
"_mozTransform": [],
"_transforms": [],
"active": false,
"height": 0,
"width": 0,
"left": 0,
"top": 0
},
"active": false,
"styles": {
"widgetHyundai": false,
"flipVer": false,
"flipHor": false,
"move": false,
"shake": false,
"fade": false,
"big": false,
"small": false,
"fly": true,
"rotate": false
},
"ease": {
"animation": "0,0,1,1",
"value": null,
"bwLabel": "None",
"label": "Power0.easeNone"
},
"delay": 2,
"duration": 1,
"direction": "Center"
},
"entrance": {
"css": {
"width": 0,
"left": 0
},
"type": "Entrance",
"id": "2e7c7ae2-01b2-652b-b431-8b1d6a29bb55",
"animationMove": {
"_rotation": 0,
"_msTransform": [],
"_webkitTransform": [],
"_mozTransform": [],
"_transforms": [],
"active": false,
"height": 0,
"width": 0,
"left": 0,
"top": 0
},
"active": true,
"styles": {
"widgetHyundai": false,
"flipVer": false,
"flipHor": false,
"move": false,
"shake": false,
"fade": false,
"big": false,
"small": false,
"fly": true,
"rotate": false
},
"ease": {
"animation": "0,0,1,1",
"value": null,
"bwLabel": "None",
"label": "Power0.easeNone"
},
"delay": 0,
"duration": 1,
"direction": "Center"
}
},
"name": "description 1",
"type": "text",
"aspectRatio": false,
"dynamicSettings": {
"label": "description",
"index": "1"
},
"slide": "6229ed470d54a800113c69ff",
"banner": "6229ed470d54a800113c6a01",
"adaptiveLanguageId": "6229ed610d54a800113c6a0b",
"createdAt": "2022-03-10T12:21:53.355Z",
"deleted": false,
"textLines": [],
"fill": {
"color": null
},
"variants": [
"100",
"200",
"300",
"regular",
"500",
"600",
"700"
],
"customerIds": [],
"accountIds": [],
"__v": 1,
"fontId": "575ea20f772e47f517563c39",
"frame": {
"origin": {
"y": 206,
"x": 15
},
"size": {
"height": 26,
"width": 120
}
}
},
{
"_id": "6229ed5a0d54a800113c6a08",
"updatedAt": "2022-03-10T12:29:01.245Z",
"css": {
"borderRadius": 0,
"borderWidth": "0",
"height": 26,
"width": 54,
"paddingBottom": 0,
"paddingRight": 0,
"paddingTop": 0,
"paddingLeft": 0,
"padding": 0,
"backgroundSize": "contain",
"backgroundColor": "transparent",
"borderColor": "transparent",
"letterSpacing": 0,
"lineHeight": 1.2,
"_rotation": 0,
"_msTransform": [],
"_webkitTransform": [],
"_mozTransform": [],
"_transforms": [],
"whiteSpace": "normal",
"fill": "#000000",
"textShadow": "none",
"fontWeight": "normal",
"textTransform": "none",
"textDecoration": "none",
"justifyContent": "center",
"textAlign": "left",
"color": "#FAFAFA",
"fontSize": 15,
"fontStyle": "normal",
"fontFamily": "Abril Fatface",
"zIndex": 1,
"opacity": 1,
"scaleY": 1,
"scaleX": 1,
"left": 15,
"top": 180,
"rotation": 0
},
"props": {
"verticalAlign": "vertical-align-middle",
"maxFontSize": 15,
"minFontSize": 4,
"rightToLeft": false,
"scaleToFit": true
},
"country": "NL",
"disabled": false,
"adaptiveId": "6e668821-ece1-8c34-6a49-4d236d605b11",
"text": "",
"inline": false,
"quality": 81,
"dynamic": true,
"cropBounds": null,
"animations": {
"exit": {
"css": {
"width": 0,
"left": 0
},
"type": "Exit",
"id": "4d27b9e9-d225-6614-2b87-41fece5d8f43",
"animationMove": {
"_rotation": 0,
"_msTransform": [],
"_webkitTransform": [],
"_mozTransform": [],
"_transforms": [],
"active": false,
"height": 0,
"width": 0,
"left": 0,
"top": 0
},
"active": true,
"styles": {
"widgetHyundai": false,
"flipVer": false,
"flipHor": false,
"move": false,
"shake": false,
"fade": false,
"big": false,
"small": false,
"fly": true,
"rotate": false
},
"ease": {
"animation": "0,0,1,1",
"value": null,
"bwLabel": "None",
"label": "Power0.easeNone"
},
"delay": 4,
"duration": 1,
"direction": "Center"
},
"emphasis": {
"repeats": 3,
"speed": 0.5,
"css": {
"width": 0,
"left": 0
},
"type": "Emphasis",
"id": "e37c8593-811e-f00b-3b02-65b160bfdf10",
"animationMove": {
"_rotation": 0,
"_msTransform": [],
"_webkitTransform": [],
"_mozTransform": [],
"_transforms": [],
"active": false,
"height": 0,
"width": 0,
"left": 0,
"top": 0
},
"active": false,
"styles": {
"widgetHyundai": false,
"flipVer": false,
"flipHor": false,
"move": false,
"shake": false,
"fade": false,
"big": false,
"small": false,
"fly": true,
"rotate": false
},
"ease": {
"animation": "0,0,1,1",
"value": null,
"bwLabel": "None",
"label": "Power0.easeNone"
},
"delay": 2,
"duration": 1,
"direction": "Center"
},
"entrance": {
"css": {
"width": 0,
"left": 0
},
"type": "Entrance",
"id": "383df710-4679-d2d7-26c3-9d89c50aee98",
"animationMove": {
"_rotation": 0,
"_msTransform": [],
"_webkitTransform": [],
"_mozTransform": [],
"_transforms": [],
"active": false,
"height": 0,
"width": 0,
"left": 0,
"top": 0
},
"active": true,
"styles": {
"widgetHyundai": false,
"flipVer": false,
"flipHor": false,
"move": false,
"shake": false,
"fade": false,
"big": false,
"small": false,
"fly": true,
"rotate": false
},
"ease": {
"animation": "0,0,1,1",
"value": null,
"bwLabel": "None",
"label": "Power0.easeNone"
},
"delay": 0,
"duration": 1,
"direction": "Center"
}
},
"name": "Title 1",
"type": "text",
"aspectRatio": false,
"dynamicSettings": {
"label": "Title",
"index": "1"
},
"slide": "6229ed470d54a800113c69ff",
"banner": "6229ed470d54a800113c6a01",
"adaptiveLanguageId": "6229ed5a0d54a800113c6a07",
"createdAt": "2022-03-10T12:21:46.600Z",
"deleted": false,
"textLines": [],
"fill": {
"color": null
},
"variants": [
"regular"
],
"customerIds": [],
"accountIds": [],
"__v": 1,
"fontId": "575ea20f772e47f517563c34",
"frame": {
"origin": {
"y": 180,
"x": 15
},
"size": {
"height": 26,
"width": 54
}
}
}
],
"duration": 5,
"__v": 1
}
],
"__v": 1,
"setId": "6229ed470d54a800113c6a03",
"version": {
"_id": "6229ed480d54a800113c6a04",
"updatedAt": "2022-03-10T12:21:28.009Z",
"language": "5d5fac208435de97c57a8b0f",
"createdAt": "2022-03-10T12:21:28.008Z",
"banners": [
"6229ed470d54a800113c6a01"
],
"name": "Default",
"__v": 0
},
"background": {
"color": "#051F3D",
"solid": {
"color": "#051F3D"
}
},
"empty": false,
"video": true
}
],
"demo": false,
"type": "banner",
"name": "dynamicGoogleAds",
"__v": 10,
"folder": null,
"video": true
}
var compiler = new BannerwiseCompiler.CompilerBuilder(data).setTransform().setInjectBaseCss().setIsSettingsEnabled().setContext('preview').build();
var [ html, output ] = compiler.compile();
document.querySelector('html').innerHTML = html;
compiler.execute();