diff --git a/404.html b/404.html index 742ee1a..0c15182 100644 --- a/404.html +++ b/404.html @@ -5,13 +5,13 @@ Page Not Found | Display Advertising Documentation - +
Skip to main content

Page Not Found

We could not find what you were looking for.

Please contact the owner of the site that linked you to the original URL and let them know their link is broken.

- + \ No newline at end of file diff --git a/assets/images/auth2-430f151e218c8c36c8ae2db85a4f5fb9.jpeg b/assets/images/auth2-430f151e218c8c36c8ae2db85a4f5fb9.jpeg new file mode 100644 index 0000000..8a3dbc6 Binary files /dev/null and b/assets/images/auth2-430f151e218c8c36c8ae2db85a4f5fb9.jpeg differ diff --git a/assets/js/48eb4607.86f0f7d8.js b/assets/js/48eb4607.86f0f7d8.js new file mode 100644 index 0000000..cf77021 --- /dev/null +++ b/assets/js/48eb4607.86f0f7d8.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdisplay_advertising_docs=self.webpackChunkdisplay_advertising_docs||[]).push([[591],{3905:function(e,t,n){n.d(t,{Zo:function(){return c},kt:function(){return h}});var a=n(7294);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function o(e){for(var t=1;t=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var l=a.createContext({}),d=function(e){var t=a.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):o(o({},t),e)),n},c=function(e){var t=d(e.components);return a.createElement(l.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},p=a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,i=e.originalType,l=e.parentName,c=s(e,["components","mdxType","originalType","parentName"]),p=d(n),h=r,m=p["".concat(l,".").concat(h)]||p[h]||u[h]||i;return n?a.createElement(m,o(o({ref:t},c),{},{components:n})):a.createElement(m,o({ref:t},c))}));function h(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var i=n.length,o=new Array(i);o[0]=p;var s={};for(var l in t)hasOwnProperty.call(t,l)&&(s[l]=t[l]);s.originalType=e,s.mdxType="string"==typeof e?e:r,o[1]=s;for(var d=2;d=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var d=r.createContext({}),l=function(e){var t=r.useContext(d),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},c=function(e){var t=l(e.components);return r.createElement(d.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},p=r.forwardRef((function(e,t){var n=e.components,a=e.mdxType,o=e.originalType,d=e.parentName,c=s(e,["components","mdxType","originalType","parentName"]),p=l(n),m=a,h=p["".concat(d,".").concat(m)]||p[m]||u[m]||o;return n?r.createElement(h,i(i({ref:t},c),{},{components:n})):r.createElement(h,i({ref:t},c))}));function m(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=n.length,i=new Array(o);i[0]=p;var s={};for(var d in t)hasOwnProperty.call(t,d)&&(s[d]=t[d]);s.originalType=e,s.mdxType="string"==typeof e?e:a,i[1]=s;for(var l=2;l=f)&&Object.keys(o.O).every((function(e){return o.O[e](n[i])}))?n.splice(i--,1):(a=!1,f0&&e[d-1][2]>f;d--)e[d]=e[d-1];e[d]=[n,r,f]},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,{a:t}),t},n=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},o.t=function(e,r){if(1&r&&(e=this(e)),8&r)return e;if("object"==typeof e&&e){if(4&r&&e.__esModule)return e;if(16&r&&"function"==typeof e.then)return e}var f=Object.create(null);o.r(f);var c={};t=t||[null,n({}),n([]),n(n)];for(var a=2&r&&e;"object"==typeof a&&!~t.indexOf(a);a=n(a))Object.getOwnPropertyNames(a).forEach((function(t){c[t]=function(){return e[t]}}));return c.default=function(){return e},o.d(f,c),f},o.d=function(e,t){for(var n in t)o.o(t,n)&&!o.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},o.f={},o.e=function(e){return Promise.all(Object.keys(o.f).reduce((function(t,n){return o.f[n](e,t),t}),[]))},o.u=function(e){return"assets/js/"+({2:"d458b4eb",53:"935f2afb",101:"20e109b6",130:"1f146b5f",146:"7463f59c",152:"54f44165",154:"cda2036c",195:"c4f5d8e4",207:"d3a87463",361:"8aa90f3e",369:"f01fc776",389:"39497b6f",443:"54bbc3fe",460:"c1f0299e",461:"81844dfd",490:"074d282c",504:"3d0ace8e",514:"1be78505",523:"615d28a4",540:"f833b3c0",569:"5424a437",588:"fa2c2c6f",591:"48eb4607",648:"e52ea3a9",669:"527e1c46",684:"681eda55",765:"6e498a6c",779:"e929da6e",803:"0ab3c5fd",817:"14eb3368",823:"bbf0680e",867:"e6471b42",902:"207abc7a",918:"17896441",920:"1a4e3797",932:"0959e925",980:"ba524b73",984:"77895f90",986:"79f20bbe",993:"b8066252"}[e]||e)+"."+{2:"cd76ee4a",53:"501e430f",101:"b8941a6b",130:"0bca25e2",146:"6a6385ec",152:"b4e6da8b",154:"5fa60d06",195:"6ef5f1e5",207:"2bbecfbd",361:"449cec3d",369:"83c36cff",389:"dcc0cb9c",443:"6af23f47",460:"240bac22",461:"13f5cc54",490:"a89b5d67",504:"851c7531",514:"4a1d8b69",523:"e140c0ae",525:"25c7f98a",540:"cb74a51a",569:"dab9742a",588:"d3c29a50",591:"f2c944fd",608:"6a78db60",648:"b6ae4c1c",669:"1ed258ab",684:"1fca3ced",765:"baa406e0",779:"eedb24d3",803:"0b0e0c7d",817:"ee8d83ee",823:"988f8d5a",867:"c331895d",902:"3fd2bd13",918:"9569bf29",920:"5fa87338",932:"8a6511b7",937:"a6879f1c",980:"38658f17",984:"6c2844a9",986:"8707421c",993:"97b1fe8b"}[e]+".js"},o.miniCssF=function(e){},o.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r={},f="display-advertising-docs:",o.l=function(e,t,n,c){if(r[e])r[e].push(t);else{var a,i;if(void 0!==n)for(var u=document.getElementsByTagName("script"),d=0;d=f)&&Object.keys(o.O).every((function(e){return o.O[e](n[i])}))?n.splice(i--,1):(a=!1,f0&&e[d-1][2]>f;d--)e[d]=e[d-1];e[d]=[n,r,f]},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,{a:t}),t},n=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},o.t=function(e,r){if(1&r&&(e=this(e)),8&r)return e;if("object"==typeof e&&e){if(4&r&&e.__esModule)return e;if(16&r&&"function"==typeof e.then)return e}var f=Object.create(null);o.r(f);var c={};t=t||[null,n({}),n([]),n(n)];for(var a=2&r&&e;"object"==typeof a&&!~t.indexOf(a);a=n(a))Object.getOwnPropertyNames(a).forEach((function(t){c[t]=function(){return e[t]}}));return c.default=function(){return e},o.d(f,c),f},o.d=function(e,t){for(var n in t)o.o(t,n)&&!o.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},o.f={},o.e=function(e){return Promise.all(Object.keys(o.f).reduce((function(t,n){return o.f[n](e,t),t}),[]))},o.u=function(e){return"assets/js/"+({2:"d458b4eb",53:"935f2afb",101:"20e109b6",130:"1f146b5f",146:"7463f59c",152:"54f44165",154:"cda2036c",195:"c4f5d8e4",207:"d3a87463",361:"8aa90f3e",369:"f01fc776",389:"39497b6f",443:"54bbc3fe",460:"c1f0299e",461:"81844dfd",490:"074d282c",504:"3d0ace8e",514:"1be78505",523:"615d28a4",540:"f833b3c0",569:"5424a437",588:"fa2c2c6f",591:"48eb4607",648:"e52ea3a9",669:"527e1c46",684:"681eda55",765:"6e498a6c",779:"e929da6e",803:"0ab3c5fd",817:"14eb3368",823:"bbf0680e",867:"e6471b42",902:"207abc7a",918:"17896441",920:"1a4e3797",932:"0959e925",980:"ba524b73",984:"77895f90",986:"79f20bbe",993:"b8066252"}[e]||e)+"."+{2:"cd76ee4a",53:"501e430f",101:"b8941a6b",130:"0bca25e2",146:"6a6385ec",152:"b4e6da8b",154:"5fa60d06",195:"6ef5f1e5",207:"2bbecfbd",361:"449cec3d",369:"83c36cff",389:"dcc0cb9c",443:"6af23f47",460:"240bac22",461:"13f5cc54",490:"a89b5d67",504:"851c7531",514:"4a1d8b69",523:"e140c0ae",525:"25c7f98a",540:"cb74a51a",569:"dab9742a",588:"d3c29a50",591:"86f0f7d8",608:"6a78db60",648:"b6ae4c1c",669:"1ed258ab",684:"1fca3ced",765:"baa406e0",779:"eedb24d3",803:"0b0e0c7d",817:"ee8d83ee",823:"988f8d5a",867:"c331895d",902:"3fd2bd13",918:"9569bf29",920:"5fa87338",932:"8a6511b7",937:"a6879f1c",980:"38658f17",984:"6c2844a9",986:"8707421c",993:"97b1fe8b"}[e]+".js"},o.miniCssF=function(e){},o.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r={},f="display-advertising-docs:",o.l=function(e,t,n,c){if(r[e])r[e].push(t);else{var a,i;if(void 0!==n)for(var u=document.getElementsByTagName("script"),d=0;d Banner Validation | Display Advertising Documentation - +
Copyright © 2023 - Media.Monks DisplayAd. Built with Docusaurus.
- + \ No newline at end of file diff --git a/docs/category/contributing.html b/docs/category/contributing.html index be21f00..0a5df27 100644 --- a/docs/category/contributing.html +++ b/docs/category/contributing.html @@ -5,13 +5,13 @@ Contributing | Display Advertising Documentation - +

Contributing

Contributing to the framework

Copyright © 2023 - Media.Monks DisplayAd. Built with Docusaurus.
- + \ No newline at end of file diff --git a/docs/category/getting-started.html b/docs/category/getting-started.html index fd830eb..0bd7811 100644 --- a/docs/category/getting-started.html +++ b/docs/category/getting-started.html @@ -5,13 +5,13 @@ Getting started | Display Advertising Documentation - +

Getting started

With the following guide you can conquer the dimension of the units!

Copyright © 2023 - Media.Monks DisplayAd. Built with Docusaurus.
- + \ No newline at end of file diff --git a/docs/category/guides.html b/docs/category/guides.html index e66e646..9ce89ed 100644 --- a/docs/category/guides.html +++ b/docs/category/guides.html @@ -5,13 +5,13 @@ Guides | Display Advertising Documentation - +

Guides

Features of the framework

Copyright © 2023 - Media.Monks DisplayAd. Built with Docusaurus.
- + \ No newline at end of file diff --git a/docs/contributing/contributing-display-docs.html b/docs/contributing/contributing-display-docs.html index fca618b..9939497 100644 --- a/docs/contributing/contributing-display-docs.html +++ b/docs/contributing/contributing-display-docs.html @@ -5,13 +5,13 @@ How to update Documentation | Display Advertising Documentation - +

How to update Documentation

Propose a change​

If you want to propose a change, you will need to create a ticket in detail what you want to do. Please read the How to create an issue guide.

Ready to create the ticket? Please add into the docs repository.

Workflow for make changes​

  1. Fork the repository
  2. Clone your new fork locally
  3. Create a new branch for your changes
  4. Make your changes
  5. Submit your pull request
  6. Discuss and review your code
  7. Rebase and tests
  8. “Merge” your branch to the master branch
Copyright © 2023 - Media.Monks DisplayAd. Built with Docusaurus.
- + \ No newline at end of file diff --git a/docs/contributing/contributing-framework.html b/docs/contributing/contributing-framework.html index ad9edd5..d01b439 100644 --- a/docs/contributing/contributing-framework.html +++ b/docs/contributing/contributing-framework.html @@ -5,13 +5,13 @@ How to update Framework | Display Advertising Documentation - +

How to update Framework

Before proposing/making a change it is necessary to select the relevant repository.

Repositories:

  • Display Temple: if you want to change an util, DCO event or update the FrameAnimation.

  • Display Upload: if you want to create a new upload environment or modify any of the current ones.

  • Display Boilerplate: if you want to modify the initial questions, add parameters, modify a template or create a new one.

  • Display Dev Server: if you want to change a configuration in Webpack, install a plugin and other issues related to dev/build.

Propose a change​

If you want to propose a change, it will be necessary to create a ticket informing in detail what you want to do. Please read the How to create an issue page.

Workflow for make changes​

  1. Fork the repository
  2. Clone your new fork locally
  3. Create a new branch for your changes
  4. Make your changes
    1. npm install node_modules in your local fork
    2. Do your code changes in your fork
    3. Link your local fork with npm link
    4. Test your local fork
      1. By either using npm link @mediamonks/display-dev-server in a test project for for example the display-dev-server
      2. Or for the display-boilerplate, running yo display-boilerplate in a test project and then installing your changes
  5. Submit your pull request
  6. Discuss and review your code
  7. Rebase and tests
  8. “Merge” your branch to the master branch
  9. In the master branch, create a new version (tag) with a message
npm version major/minor/patch -m "this has been updated"
  1. Push your tag to origin
git push origin
Copyright © 2023 - Media.Monks DisplayAd. Built with Docusaurus.
- + \ No newline at end of file diff --git a/docs/contributing/create-issue.html b/docs/contributing/create-issue.html index 4d4df06..3a137e0 100644 --- a/docs/contributing/create-issue.html +++ b/docs/contributing/create-issue.html @@ -5,13 +5,13 @@ How to create an issue | Display Advertising Documentation - +

How to create an issue

Issues can be created in a variety of ways, so you can choose the most convenient method for your workflow. Please follow the GitHub official docs to create a ticket.

Rules
  1. Create an issue in the relevant repository.
  2. Be clear in the request (it will be useful in the future for a pull request).
  3. Assign the ticket to people in the team.
  4. Insist if there is no answer in the ticket, the idea is that it be collaborative.
info

Remember to attach the versions of the dependencies you are using, and also your NodeJS version.

Copyright © 2023 - Media.Monks DisplayAd. Built with Docusaurus.
- + \ No newline at end of file diff --git a/docs/getting-started/creating-a-new-project.html b/docs/getting-started/creating-a-new-project.html index be8c693..e58a0ce 100644 --- a/docs/getting-started/creating-a-new-project.html +++ b/docs/getting-started/creating-a-new-project.html @@ -5,7 +5,7 @@ Creating a new project | Display Advertising Documentation - + @@ -15,7 +15,7 @@ the project.

Step 1​

In the terminal, make your way to a new project folder of your choosing, e.g. documents/work/my-banner-project.

yo display-boilerplate

In this menu you can use the arrow keys to navigate the cursor.

? What do you want to do? 
  Create quick unit (with default parameters) 
❯ Create display units (you can create multiple or just one)

Step 2​

We’re just going to create a banner using the second option in this guide, hit Enter to select.

Enter the name of the project or just hit enter to use the default, which is the folder name.

Step 3​

Select the first unit you would like the generator to create. Use the arrow keys to navigate and hit Enter when ready.

Creating banner
? Please select a set for your unit: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
 ◯ 160x600
 ◯ 300x50
❯◉ 300x250
 ◯ 300x600
 ◯ 320x50
 ◯ 320x240
 ◯ 320x480
(Move up and down to reveal more choices)

Enter the directory where you wish the source files to be placed. Just hit enter to use the default, which is something like ./src/{size}x{width}

Select the type of banner:

? Please select a type you want: (Use arrow keys)
❯ plain 
  doubleclick 
  flashtalking

Then you will have to answer which units you want to have their own html. You will need to answer the same with the CSS and the JS:

? Please select a set for your unit: 300x250
? Please select a type you want: plain
? Where do you want to put it? ./src/plain/
? Please select display unit with separate html: 300x250
? Please select display unit with separate javascript: 300x250
? Please select display unit with separate css: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
❯◉ 300x250

Step 4​

The generator will generate the basic template files and install the according node modules as well. This process will take a minute. When it’s done, you’ll end up with a directory looking something like this:

FilenameDescription
node_modulesall the packages / libraries your project
src/300x250/[.richmediarc]The configuration file for the richmedia-temple-server, This file is used so that the richmedia-temple-server knows what directories are richmedia units.
src/shared/script/main.jsJavascript File this is referenced by the .richmediarc file.
src/shared/script/Animation.jsThe animation javascript code.
src/shared/script/Banner.jsThe banner javascript code.
src/shared/css/style.cssMain CSS file, this file is referenced by the .richmediarc file.
src/shared/index.hbsMain HTML (with handlebars) file, this file is referenced by the .richmediarc file.
.editorconfigconfiguration file for you editor. So everyone atleasts uses the same basic settings.
.gitignoreconfiguration file used by git so it knows which files to ignore.
.prettierrcA configuration file for prettier printer
[package.json]A configuration file for NPM / YARN, one of the most important files in your project.

SannerStructure

Copyright © 2023 - Media.Monks DisplayAd. Built with Docusaurus.
- + \ No newline at end of file diff --git a/docs/getting-started/generate-a-build.html b/docs/getting-started/generate-a-build.html index ba6a227..a17aba6 100644 --- a/docs/getting-started/generate-a-build.html +++ b/docs/getting-started/generate-a-build.html @@ -5,7 +5,7 @@ Generate a build | Display Advertising Documentation - + @@ -14,7 +14,7 @@ There is a parameter outputDir available that you can run along with the build command.

Property
Description
--outputDirRelative output directory, shorthand is -o. By default ./build, but you can change it to for example ./build/version1/
--skipBuildBoolean, if it exists, skip compiling ads phase. The --skipBuild variable is useful when you for example already have created ads from Animate CC or Google Web Designer available and you only want to create a preview page around that in order to preview them around.
--skipPreviewBoolean, if it exists, skip preview building phase. The --skipBuild variable is useful when you for example first want to build your files, create backup images/video via the ads recorder and then want to create a preview page from all of that together.

Examples​

Via the Commandline​

Use the build command creating a custom output dir and skipping building the ads (so only adding the preview page files)

npm run build -- --outputDir ./build/version1/ --skipBuild

or the shorthand version:

npm run build -- -o ./build/version1/ --skipBuild
In your package.json​

Use the dds command creating a custom output dir and skipping building the preview page (so only build the ads)

"build:version1": "dds --mode production -o ./build/version1/" --skipPreview
Advanced combinations​

Example with a glob and a preview command, for automizing purposes:

"build-preview:version1": "dds --mode production -o ./build/version1/ --choices eyJsb2NhdGlvbiI6WyJhbGwiXSwiZW1wdHlCdWlsZERpciI6dHJ1ZX0= && display-upload -t mm-preview -i ./build/version1 -o 1f08c1d9-b4f1-4a47-831b-409cf070b151/version1/"

Or use combinations of the different scripts, here in doall:v1, build:v1 and upload:v1 are combined to one new script

"build:v1": "dds --mode production -o build/v1",
"upload:v1": "display-upload -t mm-preview -i build/v1 -o 12528e62-6871-47de-abd1-6144e476bc73/v1/",
"doall:v1": "npm run build:v1 && npm run upload:v1",

Mediamonks Preview Page​

The mm-preview page is our most common used and custom homemade webpage for displaying ads. It is build in React and has a couple of nice features.

alt text

data.json​

The page loads in a data file with all information that is needed, such as paths to html/jpg/mp4 and widths and heights of each unit. When you recorded things like gifs, backup images, it will take this in the data.json file as well and store it for eventually prev

maxFileSize​

You can set a maxFileSizeparameter in the .richmediarc or .sharedrc config file. It will check the filesize in the preview and give a green or red label comparing it to the given filesize.

"settings": {
  "maxFileSize": "100"
}
Copyright © 2023 - Media.Monks DisplayAd. Built with Docusaurus.
- + \ No newline at end of file diff --git a/docs/getting-started/installation.html b/docs/getting-started/installation.html index 3b9dea5..70e98b4 100644 --- a/docs/getting-started/installation.html +++ b/docs/getting-started/installation.html @@ -5,7 +5,7 @@ Installation | Display Advertising Documentation - + @@ -14,7 +14,7 @@ modern web tools. The first thing that we will need to do is install yeoman globally, so it's available in your terminal / command prompt as yo.

Open your terminal run the following commands:

Step 1​

First install Yeoman globally

npm install -g yo

Step 2​

Install the Media.Monks display-boilerplate generator globally

npm install -g generator-display-boilerplate

Verify Yeoman is working globally by running the following command

yo --version
tip

If you are having trouble with your user account not having admin rights with installing the generator-display-boilerplate and are working on a mac, try to use "sudo" in front of the commands. By using "sudo," the user is granted temporary administrative access, allowing them to perform tasks that require root or administrator permissions. So for example:

sudo npm install -g generator-display-boilerplate
Copyright © 2023 - Media.Monks DisplayAd. Built with Docusaurus.
- + \ No newline at end of file diff --git a/docs/getting-started/start-the-server.html b/docs/getting-started/start-the-server.html index 390602e..1f1c7c3 100644 --- a/docs/getting-started/start-the-server.html +++ b/docs/getting-started/start-the-server.html @@ -5,7 +5,7 @@ Start the server | Display Advertising Documentation - + @@ -18,7 +18,7 @@ with spacebar, then press enter to confirm your selection.

Do you want a browser to open to your dev location? (Y/N)

You can select to open a new browser window or not.

Save this as a separate part command in package.json (Y/N)

Use this option to save your selection as a separate command. If you select Y, you’ll see something like this:

Please provide a name for your command. You will type something like npm run dev:__NAME__

No special chars, spaces, dashes just a single word. You’ll have to give it a unique name, for example “selection”.

Now you will be able to run a dev server with the same selection simply by running

npm run dev:selection

It will now compile the banners you selected and start a local server on port 8000. You can see the preview at http://localhost:8000.

note

If port 8000 is busy, it will automatically use the next available port, 8001, 8002, etc.

info

Important You don’t have to restart the server if you make any changes to your banner’s code. It will automatically recompile your units when it detects changes in the source code..

Make sure everything works by running:

npm run dev

This will start the server. You’ll see something like this.

Screenshot install dev server

Press N

Screenshot install localhost

Your primary browser will launch, opening http://localhost:8000/

In your terminal, you’ll be able to see the output of webpack, compiling the source code.

Scaffold5

In your browser, the preview environment will load along with a preview of the compiled version of the banner you just created. The banner should display something like this.

Scaffold6

If there are no javascript errors and everything works fine, that’s it!

Copyright © 2023 - Media.Monks DisplayAd. Built with Docusaurus.
- + \ No newline at end of file diff --git a/docs/getting-started/upload-a-preview.html b/docs/getting-started/upload-a-preview.html index 836fd53..b998a62 100644 --- a/docs/getting-started/upload-a-preview.html +++ b/docs/getting-started/upload-a-preview.html @@ -5,7 +5,7 @@ Upload a preview | Display Advertising Documentation - + @@ -16,7 +16,7 @@ Better use the hash in combination with your own project, like 3334d7e2-3d58-4c84-aec7-4b6d4f50c7f0/client/project/ads/v1/

It will then upload the contents of the ./build/ directory and show you a link to the preview, which should look something like this:

http://richmedia-previews-s3bucket-khpmpnjb2dya.s3.amazonaws.com/3334d7e2-3d58-4c84-aec7-4b6d4f50c7f0/index.html

Preview parameters​

These parameters might be useful if you want to create multiple previews, for each different version of an ad for example. There is a parameter outputDir available that you can run along with the build command.

Property
Description
--typetype of preview, possible values mm-preview, adform, flashtalking, doubleclick, sftp
--inputDirRelative input directory, shorthand is -i. By default ./build, but you can change it to for example ./build/version1/
--outputDirRelative online url output directory, shorthand is -o. by default a unique hash/, but you can change it to for example 3334d7e2-3d58-4c84-aec7-4b6d4f50c7f0/version1/ to make sub pages inside your hash

Examples​

Via the Commandline​

Use the preview command

npm run preview -- --type mm-preview --inputDir ./build/version1/ --outputDir 1f08c1d9-b4f1-4a47-831b-409cf070b151/version1/

or the shorthand version:

npm run preview -- -t mm-preview -i ./build/version1/ -o 1f08c1d9-b4f1-4a47-831b-409cf070b151/version1/
In your package.json​

Use the dds command

"preview:version1": "display-upload -t mm-preview -i ./build/version1/ -o 1f08c1d9-b4f1-4a47-831b-409cf070b151/version1/
Advanced combinations​

Example with a glob for automizing purposes:

"build-preview:version1": "dds --mode production -o ./build/version1/ --choices eyJsb2NhdGlvbiI6WyJhbGwiXSwiZW1wdHlCdWlsZERpciI6dHJ1ZX0= && display-upload -t mm-preview -i ./build/version1 -o 1f08c1d9-b4f1-4a47-831b-409cf070b151/version1/"

Or use combinations of the different scripts, here in doall:v1, build:v1 and upload:v1 are combined to one new script

"build:v1": "dds --mode production -o build/v1",
"upload:v1": "display-upload -t mm-preview -i build/v1 -o 12528e62-6871-47de-abd1-6144e476bc73/v1/",
"doall:v1": "npm run build:v1 && npm run upload:v1",
Copyright © 2023 - Media.Monks DisplayAd. Built with Docusaurus.
- + \ No newline at end of file diff --git a/docs/guides/auto-optimizing-ads.html b/docs/guides/auto-optimizing-ads.html index 6754d77..66fdc62 100644 --- a/docs/guides/auto-optimizing-ads.html +++ b/docs/guides/auto-optimizing-ads.html @@ -5,13 +5,13 @@ Automatically optimize zips | Display Advertising Documentation - +

Automatically optimize zips

You can now let the dev-server try to optimize your bundle .zip to try and fit it within the specs.

Configuration​

package.json
settings": {
    "maxFileSize": 150,
    "optimizeToFileSize": true,
    "lowestImageQuality": 20
}

The dev-server will then try to optimize your zip, lowering the quality of the jpg/png files until it is below the maxFileSize.

If you use this, set image optimization to false in the optimization object in the settings of the .richmediarc, otherwise webpack will optimize the image twice (will fix this in a patch soon)

The lowest quality it will use is 60. Going lower could potentially cause artifacts. However, if you add "lowestImageQuality" you can overwrite this value and lower the quality.

note

You may wonder why not just "optimizeToFileSize": 150? This is because maxFileSize is also used by the preview, and sometimes you don’t want to use optimizeToFileSize.

Copyright © 2023 - Media.Monks DisplayAd. Built with Docusaurus.
- + \ No newline at end of file diff --git a/docs/guides/clean-output-template.html b/docs/guides/clean-output-template.html index 669325f..c04224c 100644 --- a/docs/guides/clean-output-template.html +++ b/docs/guides/clean-output-template.html @@ -5,7 +5,7 @@ Clean output template | Display Advertising Documentation - + @@ -13,7 +13,7 @@

Clean output template

This version of the framework creates an output that excludes the browser-compatible Babel implementation. With IE 11 being deprecated, this has become an option for us to use in some cases. The clean output includes the config file and readable javascript in the main.js so that you can still adjust it after building your ads.

alt text

alt text

Purpose​

Sometimes, other agencies or teams in MM will request the built zips of ads built with our framework, with the intention of adjusting after build without the use of the framework. This could be for creating extra versions or translations.

Repo​

You can find the clean output in a separate repo: https://github.com/mirkovw/display-advertising-cleanoutput-template

caution

This setup is still in experimental phase so do use it with caution. It is always recommendable to use the full framework to quickly make amends and new resizes. Using the export will always slow down the process and create less overview and less reusable code.

Copyright © 2023 - Media.Monks DisplayAd. Built with Docusaurus.
- + \ No newline at end of file diff --git a/docs/guides/commands.html b/docs/guides/commands.html index ce5d114..731dd77 100644 --- a/docs/guides/commands.html +++ b/docs/guides/commands.html @@ -5,13 +5,13 @@ Create banners with parameters | Display Advertising Documentation - +

Create banners with parameters

Another way to create banners is using the command line with parameters. It is possible to create multiple banners using the --units parameter and is possible to define the --type of the units.

info

By default if you don't define the --type, the generator will create plain units.

Here are some examples:

yo display-boilerplate --units "300x600, 300x250"
yo display-boilerplate --units "150x150" --type plain
yo display-boilerplate --units "320x150" --type doubleclick
Copyright © 2023 - Media.Monks DisplayAd. Built with Docusaurus.
- + \ No newline at end of file diff --git a/docs/guides/dataBind.html b/docs/guides/dataBind.html index cb179d8..2a3f61d 100644 --- a/docs/guides/dataBind.html +++ b/docs/guides/dataBind.html @@ -5,14 +5,14 @@ Data binding | Display Advertising Documentation - +

Data binding

Data bind is a util in the @mediamonks/temple to bind a object data to html. In your index.html or index.hbs, you can easely bind js object to html elements with dataBind.

For example doubleClick has a dynamic feed:

/src/shared/script/getDynamicData.js
  devDynamicContent.generator_richmedia_temple_framework_test_feed_main = [{}];
  devDynamicContent.generator_richmedia_temple_framework_test_feed_main[0]._id = 0;
  devDynamicContent.generator_richmedia_temple_framework_test_feed_main[0].id = 0;
  devDynamicContent.generator_richmedia_temple_framework_test_feed_main[0].reporting_label = "test_0";
  devDynamicContent.generator_richmedia_temple_framework_test_feed_main[0].default = true;
  devDynamicContent.generator_richmedia_temple_framework_test_feed_main[0].active = true;
  devDynamicContent.generator_richmedia_temple_framework_test_feed_main[0].version = ["0"];
  devDynamicContent.generator_richmedia_temple_framework_test_feed_main[0].text = "Welcome to this 0 Banner!";
  devDynamicContent.generator_richmedia_temple_framework_test_feed_main[0].logo = {};
  devDynamicContent.generator_richmedia_temple_framework_test_feed_main[0].logo.Type = "file";
  devDynamicContent.generator_richmedia_temple_framework_test_feed_main[0].logo.Url = "https://s0.2mdn.net/ads/richmedia/studio/33345/33345_20210113054941196_logo.svg";
  devDynamicContent.generator_richmedia_temple_framework_test_feed_main[0].cta = "Click here";
  devDynamicContent.generator_richmedia_temple_framework_test_feed_main[0].bgcolor = "#FFFFFF";
  devDynamicContent.generator_richmedia_temple_framework_test_feed_main[0].exit_url = {};
  devDynamicContent.generator_richmedia_temple_framework_test_feed_main[0].exit_url.Url = "http://www.google.com";

And you want to use these values in your html/hbs file:

/src/shared/script/Banner.js
import dataBind from "@mediamonks/temple/util/dataBind";

const feed = window.dynamicContent["generator_richmedia_temple_framework_test_feed_main"][0];

dataBind(feed, document.querySelector('body'));

and the html bindings would look like this

/src/shared/index.hbs
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <div class="banner border" data-bind="style.backgroundColor: bgcolor">
    <div class="content fullscreen">
      <div class="title_container">
        <div class="title" data-bind="html: text, style.backgroundColor: bgcolor"></div>
      </div>
      <img class="logo" data-bind="src: logo.Url">
      <div class="cta">
        <div class="cta_copy" data-bind="html: cta"></div>
      </div>
    </div>
    <div class="mainExit fullscreen"></div>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script>
</body>
</html>

What happens here dataBind searches the document.querySelector('body') for data-bind attributes that you see here in the html file.

Then it looks what is the value of the attribute data-bind and applies the data data from the feed to the html.

  • data-bind="html: text" , applies html to a element from the property text that comes from feed.
  • data-bind="src: logo.Url" , applies src to a element from the property logo.Url that comes from feed.
  • data-bind="href: logo.Url" , applies href to a element from the property logo.Url that comes from feed.
  • data-bind="style.backgroundColor: bgcolor" , applies style.backgroundColor to a element from the property bgcolor that comes from feed.
Copyright © 2023 - Media.Monks DisplayAd. Built with Docusaurus.
- + \ No newline at end of file diff --git a/docs/guides/dco.html b/docs/guides/dco.html index 89f17e8..5000eb4 100644 --- a/docs/guides/dco.html +++ b/docs/guides/dco.html @@ -5,7 +5,7 @@ Dynamic Creative Optimization | Display Advertising Documentation - + @@ -17,7 +17,7 @@ https://support.google.com/richmedia/answer/3526354?hl=en#zippy=%2Csample-setup-code-from-step-generate-code

important

Note that it is possible to receive a multiple-feed Generate Code for your project. Please check the Tips & tricks section for further information.

Tips & tricks​

If you receive a multiple-feed Generate Code you may find useful to return the feed as a simplified key-value pair of the various feeds that you can then access in the Banner.js from the "feed" variable. This way you can access to every feed separately as needed.

Here is an example: 

export default function getDynamicData() {

  /*****************************************************************************************************************************
   *  Paste DC Dynamic Code HERE                                                                                               *
   *****************************************************************************************************************************/

  // Dynamic Content variables and sample values
    Enabler.setProfileId(00000000); 
    var devDynamicContent = {};

    devDynamicContent.Campaign_Feed = [{}];
    devDynamicContent.Campaign_Feed[0]._id = 0;
    devDynamicContent.Campaign_Feed[0].CTA_Copy = "Get started";
    devDynamicContent.Campaign_Feed[0].Headline_Copy = "One-click ecommerce integrations_Connect your online store in no time_Email + SMS just got easier";

    devDynamicContent.Selection_Feed = [{}];
    devDynamicContent.Selection_Feed[0]._id = 0;
    devDynamicContent.Selection_Feed[0].Image_Series = "CeramistStudio";
    devDynamicContent.Selection_Feed[0].Image_Reporting = "CeramistStudioPotteryWheel_CeramistSmilingStudio_WooCommerce";

    devDynamicContent.Destination_Feed = [{}];
    devDynamicContent.Destination_Feed[0]._id = 0;
    devDynamicContent.Destination_Feed[0].CTA_Button_Color = "Charcoal";
    devDynamicContent.Destination_Feed[0].Background_Color = "Cotton";

    Enabler.setDevDynamicContent(devDynamicContent);

  /*****************************************************************************************************************************
   *  END Paste DC Dynamic Code                                                                                                *
   *****************************************************************************************************************************/

    let feedNames = Object.keys(devDynamicContent);

    const multipleFeed = Object.fromEntries(feedNames.map(
        (fName) => [fName, window.dynamicContent[fName][0]])
      );

    return multipleFeed;
}

And in your Banner.js:


async init() {
    ...
    this.feed = getDynamicData();
    let ctaCopy = this.feed.Campaign_Feed.CTA_Copy; // 'Get started'
    ...
}

Enabler​

The Enabler is a library required for all DCO creatives in Studio. It provides a singleton object in the global namespace called Enabler. You can call methods on it. The Enabler ensures that your creative includes standard tracking functionality for metrics.

In the index.hbs file of your project you will find the script tag that links to the Enabler. You must also set the Profile Id number here.

  <script src="https://s0.2mdn.net/ads/studio/Enabler.js">
    // please change profile id.
    Enabler.setProfileId(1075235);
  </script>

In the Banner.js file, you will find a util that is used to wait for the Enabler to be ready before initializing the banner.

import untilEnablerIsInitialized from '@mediamonks/temple/doubleclick/untilEnablerIsInitialized';
...
  async init() {
    await untilEnablerIsInitialized();
    ...
  }
  ...
info

The Profile Id number is the code for linking your creative with the Studio profile.

For further information visit https://support.google.com/richmedia/answer/2672553?hl=en

ExitUrl​

If the exit URL is assigned through the feed, you can use something like this in your Banner.js file:

  async init() {
    ...
    this.mainExit = this.feed.exitUrl.Url;
    ...
  }

The default method used in our framework is an Enabler method. The first parameter is an ID that can be used to override the exit later if needed and the second parameter is the URL you've assigned.

  handleClick = () => {
    Enabler.exitOverride('Default Exit', this.mainExit);
  };
important

Producers may ask you to use a different method to cover some specific needs.

You can find more information about Enabler methods here: https://www.google.com/doubleclick/studio/docs/sdk/html5/en/class_studio_Enabler.html#api

info

For further information on DCO exits visit https://support.google.com/richmedia/answer/2664807?hl=en

Copyright © 2023 - Media.Monks DisplayAd. Built with Docusaurus.
- + \ No newline at end of file diff --git a/docs/guides/dynamic-import.html b/docs/guides/dynamic-import.html index 6e67ef0..1694c96 100644 --- a/docs/guides/dynamic-import.html +++ b/docs/guides/dynamic-import.html @@ -5,13 +5,13 @@ Dynamic Import | Display Advertising Documentation - +

Dynamic Import

Dynamic import() introduces a new function-like form of import that caters to those use cases. import(moduleSpecifier) returns a promise for the module namespace object of the requested module, which is created after fetching, instantiating, and evaluating all of the module’s dependencies, as well as the module itself.

/src/300x250/script/main.js
import config from "richmediaconfig";
import Banner from "../../shared/script/Banner";

import(`./${(config.content.customAnimation) ? config.content.customAnimation : 'AnimationDefault'}.js`)
    .then(Animation => createBanner(Animation));

const createBanner = (Animation) => {
  const banner = new Banner(config);

  banner.init().then(() => {
      banner.setAnimation(new Animation.default(document.querySelector('.banner'), config));
      banner.start()
    }
  )
}
Copyright © 2023 - Media.Monks DisplayAd. Built with Docusaurus.
- + \ No newline at end of file diff --git a/docs/guides/extends-animation.html b/docs/guides/extends-animation.html index 444eb92..49d6495 100644 --- a/docs/guides/extends-animation.html +++ b/docs/guides/extends-animation.html @@ -5,13 +5,13 @@ Extends Animation | Display Advertising Documentation - +

Extends Animation

Sometimes it may happen that we need to modify the animation of a certain frame, but we don't want to add conditionals or duplicate the main Animation.js only to change a few lines. For those cases it is recommended to create a child Animation.js.

This is the main Animation (shared) for all the units:

/src/shared/script/Animation.js
import FrameAnimation from "@mediamonks/temple/animation/FrameAnimation";
import {CustomEase} from "gsap/CustomEase";
gsap.registerPlugin(CustomEase);

export default class Animation extends FrameAnimation {
  /**
   *
   * @param {HTMLDivElement} container
   * @param {null} config
   */
  constructor(container, config) {
    super();
    this.container = container;
    this.config = config;
  }

  /**
   *
   * @param {gsap.core.Timeline} tl
   */

  frame1(tl) {
    tl.to('.content', {duration:1, opacity: 1})
    tl.addLabel('frame1')
    tl.from('.copy1', {duration: 0.6, y:5, opacity: 0, ease: "power1.inOut"},'frame1+=0.5')
  }

  frame2(tl) {
    tl.addLabel('frame2','frame1+=2.5')
    tl.from('.copy2', {y:100, opacity: 0, ease: "power1.inOut"},'frame2+=0.5')
  }
}

And here do you have the child with and extra frame, but keeps all the previous frames:

/src/300x250/script/Animation.js
import SharedAnim from "../../shared/script/Animation";

export default class Animation extends SharedAnim {
    frame1(tl) {
        // new stuff to replace the SharedAnim inside frame1
    }

    frame3(tl) {
        // Also add an extra frame just for this size!
        tl.addLabel('frame3')
        tl.from('.captain1', {duration: 0.5, x: -100, opacity: 0, ease: "power1.inOut"},'frame1-=0.5')
    }
}

Copyright © 2023 - Media.Monks DisplayAd. Built with Docusaurus.
- + \ No newline at end of file diff --git a/docs/guides/font-subsetting.html b/docs/guides/font-subsetting.html index 4d4b9d6..b559af7 100644 --- a/docs/guides/font-subsetting.html +++ b/docs/guides/font-subsetting.html @@ -5,14 +5,14 @@ Font Subsetting | Display Advertising Documentation - +

Font Subsetting

Font subsetting allows us to drastically reduce the overall filesize of our ads by slimming down our font files to the point where they only include the actual characters we need. This typically applies only to ads with static content.

So this way, you can go from a 50kb woff2 file to a 5kb woff2 file, with no decrease in quality at all.

You can do this by adding a 'fonts' array to your settings object in the .richmediarc.

/src/300x250/.richmediarc
{
  "settings": {
    "entry": {
      "js": "./script/main.js",
      "html": "./index.hbs"
    },
    "size": {
      "width": 300,
      "height": 250
    },
    "fonts": [
      {
        "sources": [
          "../shared/fonts/WesternFont-Regular.woff",
          "../shared/fonts/WesternFont-Regular.woff2"
        ],
        "subset": {
          "glyphs": [ "content.copy1", "content.copy2", "content.copy3"
          ]
        }
      },
      {
        "sources": [
          "../shared/fonts/WesternFont-Bold.woff",
          "../shared/fonts/WesternFont-Bold.woff2"
        ],
        "subset": {
          "glyphs": [
            "content.cta"
          ]
        }
      }
    ]
  },
  "content": {
    "copy1": "This is copy1",
    "copy2": "This is copy2",
    "copy3": "This is copy3",
    "cta": "Click Here",
    "clickTag": "http://www.google.com"
  }
}
Copyright © 2023 - Media.Monks DisplayAd. Built with Docusaurus.
- + \ No newline at end of file diff --git a/docs/guides/globbing-dev-build.html b/docs/guides/globbing-dev-build.html index 28a2bbd..28ca749 100644 --- a/docs/guides/globbing-dev-build.html +++ b/docs/guides/globbing-dev-build.html @@ -5,13 +5,13 @@ Custom globs for npm dev/build | Display Advertising Documentation - +

Custom globs for npm dev/build

Creating custom dynamic globs for your npm run dev or -build commands can be very convenient.

  • When you have for example a lot of units that you don't want to run all at the same time.
  • When you just want to build a specific set of banners.
  • Or when you just want to automatically sort your banners without having to update your saved commands each time.

The globs are set up next to your dev and build commands in your package.json of your project. You can give them whatever name fits.

Examples:​

Below script only get the 300x250 .richmediarc files, for running on your dev server, since it is filtering the 300x250 folder.

package.json
"scripts": {
    "dev:300x250": "dds --mode development  --glob ./src/plain/300x250/.richmediarc"
},

Below script only gets the .richmediarc.regular units, for running on your dev server, but is checks all size folders due to the ** wildcard.

package.json
"scripts": {
    "dev:regular": "dds --mode development  --glob ./src/plain/**/.richmediarc.regular",
},

Below script is to build every .richmediarc.* file, .richmediarc.fr and .richmediarc.nl, excluding anything that ends with de.

package.json
"scripts": {
 "dev:en": "dds --mode production  --glob ./src/plain/**/.richmediarc.*[!de]",
},
important

Globs currently only work with sorting out .richmediarc files. For dynamically created spreadsheet .richmediarc files, you can't read their names out in order to filter them.

Copyright © 2023 - Media.Monks DisplayAd. Built with Docusaurus.
- + \ No newline at end of file diff --git a/docs/guides/google-spreadsheets-feed.html b/docs/guides/google-spreadsheets-feed.html index 1888ddd..2c105a7 100644 --- a/docs/guides/google-spreadsheets-feed.html +++ b/docs/guides/google-spreadsheets-feed.html @@ -5,13 +5,17 @@ Spreadsheets | Display Advertising Documentation - +
-

Spreadsheets

Introduction​

By using a spreadsheet, you avoid having to generate multiple .richmediarcs for multiple variations. It is possible to generate several units with a single row.

So you have a richmedia unit and you need generate 19 different versions with different copy for different sizes and languages.

This is now possible with contentSource by adding contentSource to your richmediarc you can link to a spreadsheet and use that as a content source.

info

Important: if you create a new sheet for a project, please share with the rest of the team for future modifications.

Configuration​

You can use the basic basic spreadsheet template.

As you can see it has 6 columns with the first row defining the name of the column. These rows with their content will be used as the source for the content property of your richmediarc.

/src/shared/.sharedrc
{
  "settings": {
    "bundleName": "${content.size}_${settings.version}_${settings.language}",
    "entry":{
        "js":"./script/main.js",
        "html":"index.hbs"
    },
    "contentSource":{
      "url":"https://docs.google.com/spreadsheets/d/1BImA3lgTJsbVl56GQTFT-b1dx4FIoeQFBe9WLp0wWxc/edit#gid=0",
      "apiKey": "API_KEY",
      "tabName": "main",
      "filter": {
        "version": "beauty"
      }
    }
  },
  "content":{
    "title":"default title",
    "copy0":"default copy",
    "cta":"default cta"
  }
}

You just need to replace API_KEY placeholder with your own generated key. You can generate a key here https://developers.google.com/sheets/api/guides/authorizing#APIKey in contentSource you also see a property called tabName and filter.

  • tabName will let you define what tab you want to use of your spreadsheet.
  • filter will let you filter the only values you want. so in this example it will only select rows with the value "beauty" in the version column.

Advanced example​

Another alternative for spreadsheet development is to use it similar to DCO, where sizes are added as new columns. Check the advanced spreadsheet example.

/src/shared/.sharedrc
...
{
 "contentSource":{
    "url":"https://docs.google.com/spreadsheets/d/1rqF1F7JhaLYu9_-MPmhzztH9i5OE5XURkWpwtSv1quY/edit?usp=sharing",
    "apiKey": "API_KEY",
    "tabName": "default",
    "idField": "keyField",
    "filter": {
      "master": "${content.master}"
    }
  }
}
...
/src/300x250/.richmediarc_B1_NA_SMB
{
  "parent": "../shared/.sharedrc",
  "settings": {
    "size": {
      "width": 300,
      "height": 250
    }
  },
  "content": {
    "customCss": "./css/index.css",
    "master": "B1_NA_SMB"
  }
}
Copyright © 2023 - Media.Monks DisplayAd. Built with Docusaurus.
- +

Spreadsheets

Introduction​

By using a spreadsheet, you avoid having to generate multiple .richmediarcs for multiple variations. It is possible to generate several units with a single row.

So you have a richmedia unit and you need generate 19 different versions with different copy for different sizes and languages.

This is now possible with contentSource by adding contentSource to your richmediarc you can link to a spreadsheet and use that as a content source.

info

Important: if you create a new sheet for a project, please share with the rest of the team for future modifications.

Configuration​

You can use the basic basic spreadsheet template.

As you can see it has 6 columns with the first row defining the name of the column. These rows with their content will be used as the source for the content property of your richmediarc.

/src/shared/.sharedrc
{
  "settings": {
    "bundleName": "${content.size}_${settings.version}_${settings.language}",
    "entry": {
        "js": "./script/main.js",
        "html": "index.hbs"
    },
    "contentSource": {
      "url": "https://docs.google.com/spreadsheets/d/1BImA3lgTJsbVl56GQTFT-b1dx4FIoeQFBe9WLp0wWxc/edit#gid=0",
      "apiKey": "API_KEY",
      "tabName": "main",
      "filter": {
        "version": "beauty"
      }
    }
  },
  "content": {
    "title": "default title",
    "copy0": "default copy",
    "cta": "default cta"
  }
}

You just need to replace API_KEY placeholder with your own generated key. You can generate a key here https://developers.google.com/sheets/api/guides/authorizing#APIKey in contentSource you also see a property called tabName and filter.

  • tabName will let you define what tab you want to use of your spreadsheet.
  • filter will let you filter the only values you want. so in this example it will only select rows with the value "beauty" in the version column.

Advanced example​

Another alternative for spreadsheet development is to use it similar to DCO, where sizes are added as new columns. Check the advanced spreadsheet example.

/src/shared/.sharedrc
...
{
 "contentSource": {
    "url": "https://docs.google.com/spreadsheets/d/1rqF1F7JhaLYu9_-MPmhzztH9i5OE5XURkWpwtSv1quY/edit?usp=sharing",
    "apiKey": "API_KEY",
    "tabName": "default",
    "idField": "keyField",
    "filter": {
      "master": "${content.master}"
    }
  }
}
...
/src/300x250/.richmediarc_B1_NA_SMB
{
  "parent": "../shared/.sharedrc",
  "settings": {
    "size": {
      "width": 300,
      "height": 250
    }
  },
  "content": {
    "customCss": "./css/index.css",
    "master": "B1_NA_SMB"
  }
}

OAuth2​

OAuth2 is another auth way to grab data from a spreadsheet.

The main pro about it is security: you don't have to share a feed for public read. +The main con comparing to API key is that it's a bit more complicated: 1 string vs 2.

In order to use OAuth2 you simply need to remove apiKey property from contentSource +so dev-server can switch to OAuth2 mode.

/src/shared/.sharedrc
...
{
 "contentSource": {
    ...
-    "apiKey": "API_KEY",
    ...
  }
}
...

Then create a new or use an existing OAuth 2.0 Credential from your Google Console +https://developers.google.com/sheets/api/guides/authorizing

Auth2_0

Have a little patience for the key to become active. And then use the Client ID and CLient secret from the newly created key.

If the feed is created under your account - no extra shares required. +Just run dev-server and follow the CLI tool.

And be safe!

tip

In Windows, when using Oath2.0, make sure you disable your environmental variables googleApiKey, preview_accessKeySecret, preview_s3bucket if you have them. These will otherwise trigger your default API keys.

Copyright © 2023 - Media.Monks DisplayAd. Built with Docusaurus.
+ \ No newline at end of file diff --git a/docs/guides/gsap.html b/docs/guides/gsap.html index de322b9..7181471 100644 --- a/docs/guides/gsap.html +++ b/docs/guides/gsap.html @@ -5,13 +5,13 @@ Gsap | Display Advertising Documentation - +

Gsap

Using events​

Sometimes it is necessary to know when the animation starts and when it ends. It is possible to know that using the following callbacks:

/src/shared/script/Banner.js
setAnimation(animation){
    this.animation = animation;
    //creates new timeline and pauses it
    this.animation.getTimeline().paused(true);

    this.animation.getTimeline().eventCallback('onComplete', this.onAnimationComplete);
    this.animation.getTimeline().eventCallback('onStart', this.onAnimationStart);
}


/**
* A function that should be called when the animation has completed.
*/
onAnimationComplete = () => {
    console.log('onComplete');
};

/**
* A function that should be called when the animation begins (when its time changes from 0 
* to some other value which can happen more than once if the tween is restarted multiple times).
 */
onAnimationStart = () => {
    console.log('onStart');
};

Enable GSDevTools​

You can enable the debug mode with GSDevTools, just add the gsdevtools=true parameter in the url. Example:

http://localhost:8000/?gsdevtools=true

Scaffold1

Simultaneously play/pausing your animations by pressing the ‘Spacebar’. Use the newest Display Boilerplate (6.4.9) in order for it to work.

caution

Only use it for QA and testing purposes, not meant to be for sharing with the client!

Using utils​

gsap.utils provides access to some surprisingly helpful utility functions. Note that many of them can optionally return FUNCTIONS so that they can be plugged directly into tweens, leveraging GSAP's function-based capabilities. In that case, they'll get called once for each target rather than just using the same end value for them all.

To view the full list, please check the official docs.

Copyright © 2023 - Media.Monks DisplayAd. Built with Docusaurus.
- + \ No newline at end of file diff --git a/docs/guides/multiple-timelines.html b/docs/guides/multiple-timelines.html index 5e652f1..5dc4978 100644 --- a/docs/guides/multiple-timelines.html +++ b/docs/guides/multiple-timelines.html @@ -5,14 +5,14 @@ Multiple Timelines | Display Advertising Documentation - +

Multiple Timelines

It is posible to create multiple Timelines to be able to control them though banner.js.

This can be usefull if you need to repeat the main timeline and connect the head and tail of it with extra animations, what you may call, "Seamless Loop".

The idea is to import the animations you need in main.js

/src/shared/script/main.js
    import Banner from "./Banner";
    import MainAnimation from "./MainTL";
    import ExtraAnimation from "./ExtraTL";

call them through the method setAnimation as new classes

/src/shared/script/main.js
    const banner = new Banner(config);
    //first load fonts, load images etc in the init animation
    banner.init().then(
      () => {
        //initializes animations and creates main timeline
        banner.setAnimation(
          new MainAnimation(document.querySelector('.banner'), config),
          new ExtraAnimation(document.querySelector('.banner'), config)
          );
        //plays banner
        banner.start()
      }
    )

and prepare the setAnimation method from banner.js to distribute the different Timelines.

/src/shared/script/banner.js

  setAnimation(MainAnimation, ExtraAnimation){
    this.MainAnimation = MainAnimation;
    this.ExtraAnimation = ExtraAnimation;
    //creates new timeline and pauses it
    this.MainAnimation.getTimeline().paused(true);
    this.ExtraAnimation.getTimeline().paused(true);
    // this.MainAnimation.getTimeline().eventCallback('onComplete', this.handleAnimationComplete);

  }

And thats it, now you can access both Timelines and control them individually.

Copyright © 2023 - Media.Monks DisplayAd. Built with Docusaurus.
- + \ No newline at end of file diff --git a/docs/guides/recorder.html b/docs/guides/recorder.html index 588e5b5..68923f6 100644 --- a/docs/guides/recorder.html +++ b/docs/guides/recorder.html @@ -5,7 +5,7 @@ Ads Recorder | Display Advertising Documentation - + @@ -18,7 +18,7 @@ example here: http://www.github.com/mirkovw/display-record-template.

Installation​

npm i @mediamonks/display-ads-recorder

Configuration​

package.json
"scripts": {
    "dev": "dds --mode development",
    "build": "dds --mode production",
    "recorder": "display-ads-recorder",
    "preview": "display-upload"
  },
/src/shared/script/Banner.js
import enableAdsRecorder from '@mediamonks/display-temple/util/enableRecorder';

start()
{
    enableAdsRecorder(this.animation.getTimeline(), this.config);
    this.animation.play();
}

Usage​

npm run recorder

After running the script, you will need to answer a few questions before generating the files:

Welcome to the Display.Monks Record Tool v3.1.0
make sure you import and include the enableAdsRecorder(timeline, config) function from display temple
so the ad can dispatch the right events to the recorder tool
see example here: http://www.github.com/mirkovw/display-record-template
? Target Dir? (./build)
? Please select ad(s) to record: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
>( ) all
 ( ) ./build/version1_cashback_v2_image_160x600/index.html
 ( ) ./build/version1_cashback_v2_image_300x250/index.html
 ( ) ./build/version1_cashback_v2_image_300x600/index.html
 ( ) ./build/version1_cashback_v2_image_320x50/index.html
 ( ) ./build/version1_cashback_v2_image_728x90/index.html
 ( ) ./build/version1_cashback_v2_text_160x600/index.html
(Move up and down to reveal more choices)
? Please select output(s) (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
>( ) mp4
 ( ) gif (animated)
 ( ) jpg (last frame)

NEW* If you select the option jpg (last frame) it will also ask you for the max KB filesize.

important
  • Ad Recorder records only one GSAP timeline, therefore, your animation needs to exist out of one main GSAP timeline that includes all the animations.
  • Recording video from an ad is not supported. :::
Copyright © 2023 - Media.Monks DisplayAd. Built with Docusaurus.
- + \ No newline at end of file diff --git a/docs/guides/svg.html b/docs/guides/svg.html index 12627ed..1bef261 100644 --- a/docs/guides/svg.html +++ b/docs/guides/svg.html @@ -5,13 +5,13 @@ Svg | Display Advertising Documentation - +

Svg

Using the default inline​

Now when adding inline to a img tag and the image has the extension .svg the svg will be inlined.

/src/300x250/index.hbs
<html>
<head>
</head>
<body>
    <div class="banner border">
        <img inline src="logo.svg" />
    </div>
</body>
</html>

becomes:

/src/300x250/index.hbs
<html>
<head>
</head>
<body>
<div class="banner border">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3916 1524">
    <title>logo-on-white-bg</title>
    <path fill="#FFF" d="M808 336l387 218.9v437.9l-387 218.9-387-218.9V554.9z"/>
    <path fill="#8ED6FB" d="M1125.9 977.7l-305.1 172.6v-134.4l190.1-104.6 115 66.4zm20.9-18.9V597.9l-111.6 64.5v232l111.6 64.4zm-657.9 18.9L794 1150.3v-134.4L603.8 911.3l-114.9 66.4zM468 958.8V597.9l111.6 64.5v232L468 958.8zm13.1-384.3l312.9-177v129.9L593.5 637.7l-1.6.9-110.8-64.1zm652.6 0l-312.9-177v129.9l200.5 110.2 1.6.9 110.8-64z"/><path fill="#1C78C0" d="M794 985.3L606.4 882.1V677.8L794 786.1v199.2zm26.8 0l187.6-103.1V677.8L820.8 786.1v199.2zm-13.4-207zM619.1 654.2l188.3-103.5 188.3 103.5-188.3 108.7-188.3-108.7z"/>
    <path fill="#1A1C1C" d="M1585.3 912.3h82.5l84.1-280.2h-80.4l-49.8 198.8-53.1-198.8H1499l-53.6 198.8-49.3-198.8h-80.4l83.6 280.2h82.5l52-179.5 51.5 179.5zM1756.2 773c0 84.1 57.3 146.3 147.4 146.3 69.7 0 107.2-41.8 117.9-61.6l-48.8-37c-8 11.8-30 34.3-68.1 34.3-41.3 0-71.3-26.8-72.9-64.3H2029c.5-5.4.5-10.7.5-16.1 0-91.6-49.3-149.5-136.1-149.5-79.9 0-137.2 63.2-137.2 147.9zm77.7-30.6c3.2-32.1 25.7-56.8 60.6-56.8 33.8 0 58.4 22.5 60 56.8h-120.6zm223.5 169.9h69.7v-28.9c7.5 9.1 35.4 35.9 83.1 35.9 80.4 0 137.2-60.5 137.2-146.8 0-86.8-52.5-147.3-132.9-147.3-48.2 0-76.1 26.8-83.1 36.4V524.9h-73.9v387.4zm71.8-139.3c0-52.5 31.1-82.5 71.8-82.5 42.9 0 71.8 33.8 71.8 82.5 0 49.8-30 80.9-71.8 80.9-45 0-71.8-36.5-71.8-80.9zm247 239.5h73.9V883.3c7 9.1 34.8 35.9 83.1 35.9 80.4 0 132.9-60.5 132.9-147.3 0-85.7-56.8-146.8-137.2-146.8-47.7 0-75.6 26.8-83.1 36.4V632h-69.7v380.5zm71.8-241.1c0-44.5 26.8-80.9 71.8-80.9 41.8 0 71.8 31.1 71.8 80.9 0 48.8-28.9 82.5-71.8 82.5-40.7 0-71.8-30-71.8-82.5zm231.5 54.1c0 58.9 48.2 93.8 105 93.8 32.2 0 53.6-9.6 68.1-25.2l4.8 18.2h65.4V734.9c0-62.7-26.8-109.8-116.8-109.8-42.9 0-85.2 16.1-110.4 33.2l27.9 50.4c20.9-10.7 46.6-19.8 74.5-19.8 32.7 0 50.9 16.6 50.9 41.3v18.2c-10.2-7-32.2-15.5-60.6-15.5-65.4-.1-108.8 37.4-108.8 92.6zm73.9-2.2c0-23 19.8-39.1 48.2-39.1s48.8 14.5 48.8 39.1c0 23.6-20.4 38.6-48.2 38.6s-48.8-15.5-48.8-38.6zm348.9 30.6c-46.6 0-79.8-33.8-79.8-81.4 0-45 29.5-82 77.2-82 31.6 0 53.1 15.5 65.4 26.8l20.9-62.2c-18.2-13.9-47.2-30-88.4-30-85.2 0-149 62.7-149 147.9s62.2 146.3 149.5 146.3c40.7 0 71.3-17.1 87.3-30l-19.8-60.5c-12.4 10.1-34.9 25.1-63.3 25.1zm110.9 58.4h73.9V767.6l93.8 144.7h86.8L3361.6 759l98.6-127h-83.1l-90 117.9v-225h-73.9v387.4z"/>
  </svg>
</div>
</body>
</html>

You can also do this with handlebars same result:

/src/300x250/index.hbs
<html>
<head>
</head>
<body>
<div class="banner border">
  <img inline src="{{content.logo}}" />
</div>
</body>
</html>
Copyright © 2023 - Media.Monks DisplayAd. Built with Docusaurus.
- + \ No newline at end of file diff --git a/docs/guides/timeline-scrubber.html b/docs/guides/timeline-scrubber.html index 98d329e..86c34b1 100644 --- a/docs/guides/timeline-scrubber.html +++ b/docs/guides/timeline-scrubber.html @@ -5,7 +5,7 @@ Timeline Scrubber | Display Advertising Documentation - + @@ -14,7 +14,7 @@ This is a paid service, and we cannot share this officially since it is part of our paid GSAP account. Therefore, I made a simple timeline scrubber that basically does the same but with free and custom code.

Configuration​

To use the timelineScrubber you need to import it in for example Banner.js and initialize it after creating your master GSAP timeline:

Banner.js
import timelineScrubber from '@mediamonks/display-temple/util/timelineScrubber';

setAnimation(animation){
    this.animation = animation;
    //creates new timeline and pauses it
    this.animation.getTimeline().paused(true);
    // this.animation.getTimeline().eventCallback('onComplete', this.handleAnimationComplete);

    if (DEVELOPMENT) {
        timelineScrubber(this.animation.getTimeline());
    }
}

Hotkeys​

Just as with GSDevTools, if you have your scrubber element "in focus" (you can do this by clicking on the timelineScrubber for example), you can use shortcuts to play pause and hide/show the Timeline Scrubber.

Hide/show timeline scrubber element​

You can Hide or show the timeline by pressing the letter H on your keyboard.

Play/pause timeline​

Toggle play or pause by pressing the Spacebar.

Copyright © 2023 - Media.Monks DisplayAd. Built with Docusaurus.
- + \ No newline at end of file diff --git a/docs/guides/using-handlebars.html b/docs/guides/using-handlebars.html index 03a6f3a..3a7e478 100644 --- a/docs/guides/using-handlebars.html +++ b/docs/guides/using-handlebars.html @@ -5,13 +5,13 @@ Handlebars | Display Advertising Documentation - +

Handlebars

What is templating language?​

A templating language basically is a language which allows defining placeholders that should later on be replaced for the purpose of implementing designs.

Handlebars is a simple templating language. It uses a template and an input object to generate HTML or other text formats. Handlebars templates look like regular text with embedded Handlebars expressions.

You can check all the documentation about Handlebars on the official website. Below you can see some examples using handlebars with the framework.

Conditionals​

Another common use-case for block helpers is to evaluate conditional statements. As with the iterators, Handlebars' built-in if and unless control structures are implemented as regular Handlebars helpers.

/src/shared/index.hbs
<div class="banner border">
    <div class="content fullscreen">
      {{#if settings.hasCaptain}}
        <div class="captainSequence"></div>
      {{else}}
        <img src="captain.gif" alt="captain">
      {{/if}}
    </div>
    <div class="mainExit fullscreen"></div>
</div>

Iterators​

A common use-case for block helpers is using them to define custom iterators. In fact, all Handlebars built-in helpers are defined as regular Handlebars block helpers. Let's take a look at how the built-in each helper works.

/src/shared/index.hbs
<div class="banner border">
    <div class="content fullscreen">
      {{#each content.images}}
        <img class="{{@key}}" src="{{this}}">
      {{/each}}
    </div>
    <div class="mainExit fullscreen"></div>
</div>
/src/300x250/.richmediarc
"content": {
    "images": {
        "captain1": "./img/captain1.png",
        "captainStatic": "./img/captainStatic.png",
        "copy1": "./img/copy1.png",
        "copyBig1": "./img/copyBig1.png",
        "copyBig2": "./img/copyBig2.png",
        "copy2": "./img/copy2.png",
        "cards1": "./img/cards1.png",
        "cards2": "./img/cards2.png",
        "cards3": "./img/cards3.png",
        "copy3": "./img/copy3.png",
        "cardEndframe": "./img/cardEndframe.png",
        "logo": "./img/logo.png",
        "cta": "./img/cta.png"
    }
  }

Partials​

Handlebars allows for template reuse through partials. Partials are normal Handlebars templates that may be called directly by other templates.

Below you can see some examples using partials with the framework:

Basic partials​

/src/shared/components/menuItems.hbs
<div class="listWrapper">
    <ul>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ul>
</div>
/src/shared/index.hbs
<div class="banner border">
    <div class="content fullscreen">
      {{> components/menuItems }}
    </div>
    <div class="mainExit fullscreen"></div>
</div>

Partials with parameter​

/src/shared/myExamplePartial.hbs
<p>width: {{settings.size.width}}</p>
<p>height: {{settings.size.height}}</p>
/src/shared/index.hbs
<div class="banner border">
    <div class="content fullscreen">
      {{> myExamplePartial settings }}
    </div>
    <div class="mainExit fullscreen"></div>
</div>

If you repeat a lot of html, a good practice would be to separate it into components.

Custom Helpers​

info

To use these helpers you need display-dev-server v10.1.4 or more.

getSize​

It is necessary to pass the parameter settings:

/src/shared/index.hbs
<div class="banner border">
    <div class="content fullscreen">
      {{getSize settings}} // output: 300x250
    </div>
    <div class="mainExit fullscreen"></div>
</div>

compare​

Make validations very easy, using operators ('==', '===', '!=', '!==', '<', '>', '<=', 'typeof'):

/src/shared/index.hbs
<div class="banner border">
    <div class="content fullscreen">
      {{#compare content.master "MASTER1"}}
        some_nice_layout
      {{/compare}}

      {{#compare content.frames ">" 5}}
        There are more than 5 frames
      {{/compare}}
    </div>
    <div class="mainExit fullscreen"></div>
</div>

brackets​

Similar to template strings. The number change now many brackets do you want to output.

/src/shared/index.hbs
<div class="banner border">
    <div class="content fullscreen">
      {{#brackets 2}}content.copy1_{{getSize settings}}{{/brackets} // output: {{content.copy1_300x250}}
    </div>
    <div class="mainExit fullscreen"></div>
</div>

checkExtension​

Checks the extension of a variable or file. In this example, if the var contains an image extension, it shows an image, otherwise it shows the variable as a text string:

/src/shared/index.hbs
<div class="banner border">
    <div class="content fullscreen">
      {{#checkExtension this.subTitle '.png|.jpg|.jpeg'}}
        <img src={{this.subTitle}} alt="" class="subTitle--{{@index}} subTitle fullscreen">
      {{else}}
        <div class="subTitle--{{@index}} subTitle">{{{this.title}}}</div>
      {{/checkExtension}}
    </div>
    <div class="mainExit fullscreen"></div>
</div>
Copyright © 2023 - Media.Monks DisplayAd. Built with Docusaurus.
- + \ No newline at end of file diff --git a/docs/guides/using-utils.html b/docs/guides/using-utils.html index 1649dc4..290dd7b 100644 --- a/docs/guides/using-utils.html +++ b/docs/guides/using-utils.html @@ -5,13 +5,13 @@ Temple utils | Display Advertising Documentation - +

Temple utils

Multiple utils are included in the display-temple repository that can save us a lot of work. Below are some examples:

info

You can check all the utils inside the github repository.

browser​

/**
 * Shows information about the device used.
 * 
 * @type {{
 *  isMobile: boolean
 *  isOS: boolean
 *  isOS9up: boolean
 *  isPad: boolean
 *  isSafari: boolean
 *  isFirefox: boolean
 *  isChrome: boolean
 *  isEdge: boolean
 *  isOpera: boolean
 * }}
 */

import Browser from "@mediamonks/display-temple/util/Browser";

console.log(Browser.isChrome)

fitText​

/**
 * @param {Array<HTMLElement>} copyElements
 */

import fitText from "@mediamonks/display-temple/util/fitText";

const title = document.body.querySelector('.title');
const ctaCopy = document.body.querySelector('.cta_copy');

fitText([title, ctaCopy]);

Import fitText from the display-temple/util library.

Use fitText on the child element where you want to apply the font size scaling, to fit the parent container.

And put the styling i.g. font size, width and height on the parent container

.parent_container {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80%;
    height: 50%;
    font-family: OpenSans, sans-serif;
    transform: translate(-50%, -50%);
    font-size: 50px;
}

Here is an example on how it would look like in the dom:

<div class="parent_container">
    <div class="child_container">Hello World</div>
</div>

isElementLoaded​

/**
 * Wait for a DOM element to load.
 *
 * @param {string} selector
 * @param {number} time
 * 
 * @returns {Promise<HTMLImageElement>}
 */

import isElementLoaded from "@mediamonks/display-temple/util/isElementLoaded";


isElementLoaded('svg.logo')
    .then((elm) => elm);

isElementLoaded('.containerHidden', 2000)
    .then((elm) => elm);

loadAll​

/**
 * Loads multiple files and output an array with the objects
 * 
 * @param {Array<string>} urls
 * @param {boolean} sequential
 * @param {function} loader
 *
 * @return {Promise<Array>}
 */

import loadAll from "@mediamonks/display-temple/util/loadAll";

loadAll(['./my_example_image.png', './my_example_image2.png', './my_example_image3.png'], true)
    .then(() => console.log('all loaded!'))
    .catch((error) => console.error(error));;

loadAll(['./custom_image.png'])
    .then(() => console.log('all loaded!'))
    .catch((error) => console.error(error));

loadImage​

/**
 * Loads an image and returns the image element
 * 
 * @param {string} src
 *
 * @return {Promise<Array>}
 */

import loadImage from "@mediamonks/display-temple/util/loadImage";

loadImage(['./background.png'])
    .then(() => console.log('image loaded'))
    .catch((error) => console.error(error));

loadScriptAll​

/**
 * Loads multiple files and output an array with the objects
 * 
 * @param {Array<string>} urls
 * @param {boolean} sequential
 *
 * @return {Promise<Array>}
 */

import loadScriptAll from "@mediamonks/display-temple/util/loadScriptAll";

loadScriptAll(['./mycustomScript.js', './mycustomScript2.js', './mycustomScript3.js'], true);
    .then(() => console.log('scripts loaded'))
    .catch((error) => console.error(error));

loadJSON​

/**
 * Loads an image and returns the image element
 * 
 * @param {string} src
 *
 * @return {Promise<Array>}
 */

import loadJSON from "@mediamonks/display-temple/util/loadJSON";

loadJSON('https://jsonplaceholder.typicode.com/todos/1')
    .then((data) => console.log(data))
    .catch((error) => console.error(error));

masker​

/**
 * Will add canvas elements to the wrapper that are masked by the png images
 * 
 * @param {array} config
 * @param {HTMLElement} wrapper
 * 
 * @return {Promise<unknown>}
 */

import masker from "@mediamonks/display-temple/util/masker";

masker(['./bg.jpg', './bg_transparent_white_small.png'], document.body.querySelectorAll('.wrapper'))
    .then(() => console.log('mask ready'))
    .catch((error) => console.error(error));;

rgbToHex​

/**
 * Convert the RGB to hex code
 * 
 * @param {number} r
 * @param {number} g
 * @param {number} b
 *
 * @returns {string>}
 */

import rgbToHex from "@mediamonks/display-temple/util/rgbToHex";

rgbToHex(0, 51, 255)
Copyright © 2023 - Media.Monks DisplayAd. Built with Docusaurus.
- + \ No newline at end of file diff --git a/docs/lifecycle.html b/docs/lifecycle.html index 32edb99..eebf9c3 100644 --- a/docs/lifecycle.html +++ b/docs/lifecycle.html @@ -5,13 +5,13 @@ Lifecycle of a banner | Display Advertising Documentation - +

Lifecycle of a banner

ActionWhat happens at that moment
1) Banner initLoad images, fonts and add listeners
2) Create and set animationSet timeline with all the frames and add eventCallback
3) Banner startRun the animation of the banner.
4) Animation startInvoke the eventCallback that the animation started
5) Animation completeInvokes the eventCallback that the animation is complete
Copyright © 2023 - Media.Monks DisplayAd. Built with Docusaurus.
- + \ No newline at end of file diff --git a/docs/richmediarc.html b/docs/richmediarc.html index f41bf48..8221bd2 100644 --- a/docs/richmediarc.html +++ b/docs/richmediarc.html @@ -5,14 +5,14 @@ Configuration files | Display Advertising Documentation - +

Configuration files

By default the .richmediarc file(s) and .sharedrc file are the configuration files of your project. The .richmediarc file gets generated in the root directory of your creative, i.e. /src/300x250, when you start a new project. Connected to the .richmediarc file is a global parent configuration file .sharedrc, which you can find in the shared folder. Webpack grabs the values from these files and hardcodes them into the compiled creative when you preview or build your creatives.

Live reload​

The dev preview server supports live reloading of the data. If you make updates to the .richmediarc, you will see the changes being applied in the browser.

Inheritance​

Our system supports inheritance of values, by providing a ‘parent’ file from which to inherit all the values defined in that file. The ‘child’ file can then overwrite only the needed values, thereby completely eliminating any overlap between the parent and child files. For example, you can have a .richmediarc_fr > inheriting .richmediarc and .richmediarc > inheriting .sharedrc. This method is very useful and scalable, should the need arise to add even more languages or versions.

info

Each creative requires at least one .richmediarc file. Also file paths defined in the .richmediarc are always relative to the .richmediarc itself. You can create/combine as much as config files as you like, to share data and minimize the amount of files and duplicate data.

.richmediarc​

The .richmediarc config file contains all size (i.e. 300x250) and version (i.e ‘french’) specific data.

{
  "parent": "../shared/.sharedrc", // optional: relative path from this config to the parent config"
  "settings": {
    "bundleName": "${content.type}_${settings.size.width}x${settings.size.height}",
    "entry": {
      "js": "./script/main.js", // required: points to the starting js file.
      "html": "./index.hbs" // required: points to the main html or handlebars file
    },
    "size": {
      "width": 300, // required: width of richmedia unit
      "height": 600 // required: height of richmedia unit
    }
  },
  "content": {  // optional: can put anything in here.
  }
}

.sharedrc​

The .sharedrc contains the overall data, such as for example, defining the logo file that is used in all the creatives.

{
  "settings": {
    "browserSupport": ["> 1%", "not ie 11"], // optional: remove 'not ie 11' from the list if you want to support it.
    "optimizations": {
      "css": false, // by default is enabled
      "image": false, // by default is enabled
      "js": false, // by default is enabled
      "html": false // by default is enabled
    },
    "useOriginalFileNames": false, // optional: use original file names without unique ideas generated by webpack
    "fonts": [ // optional: defining a subset for a font*
      {
      ...
      }
  },
  "content": {  // optional: can put anything in here. This content will be shared throughout all creatives
    "bgcolor": "#FF0000", 
    "logo": "./img/logo.png" // optional: will be picked up by webpack and png minified.
  }
}
tip

*Check this page for more info on font-subsetting.

Basic .richmediarc concepts​

Below are some guides on how you can use these values in your creative.

Using .richmediarc values in regular HTML​

In your index.html or index.hbs, you can retrieve .richmediarc values using the data-bind attribute on HTML elements. This is made possible by the dataBind function which is imported by ./js/Banner.js.

For example:

/src/300x250/.richmediarc
"content": {
...
    "cta": "Click here!"
}
/src/300x250/index.hbs
<body>
  <div class="cta" data-bind="text: cta"></div>
</body>
/src/300x250/.richmediarc
"content": {
...
  "bgImage": "../shared/images/background_300x250.jpg"
...
}
/src/300x250/index.hbs
<body>
  <img class="background-image" data-bind="src: content.bgImage"></div>
</body>

Using .richmediarc values in Handlebars​

If you have chosen handlebars as your html file you can use handlebars notation to access the richmediarc data. For more details see this page.

Using .richmediarc values in CSS​

Everything you put in the .richmediarc is accessible in css.

So the display-dev-server (webpack) will add all the data from the config to the css through css vars.

How would you access them? Well like this.

var(--{node}-{childNode}-{childNode})

For example:

/src/300x250/.richmediarc
"content": {
...
    "bgcolor": "#FFFFFF"
...
}
/src/300x250/css/style.css
body {
  background-color: var(--content-bgcolor);
}
/src/300x250/.richmediarc
"settings": {
  "size": {
    "width": 300,
    "height": 250
  }
}
/src/300x250/css/style.css
.banner {
  width: var(--settings-size-width)px;
  height: var(--settings-size-height)px;
}

Using .richmediarc values in javascript​

The main javascript file (conveniently named ./js/main.js) imports the .richmediarc files as follows and passes this object into the Banner constructor.

import Banner from "./Banner";
import Animation from "./Animation";

// config will contain the final .richmediarc content. So if a .richmediarc
// inherits from a other .richmediarc it will also contain those files.
import config from "richmediaconfig";

const banner = new Banner(config);
//first load fonts, load images etc in the init animation
banner.init().then(
  () => {
    //initializes animation and creates main timeline
    banner.setAnimation(new Animation(document.querySelector('.banner'), config));
    //plays banner
    banner.start()
  }
)

Which also passes the config object to the Animation constructor. From there, you are able to retrieve pretty much every value from the .richmediarc.

Example:

/src/300x250/.richmediarc
"content": {
...
  "intro": false
...
}
/src/300x250/js/Animation.js
export default class Animation extends FrameAnimation {
  /**
   *
   * @param {HTMLDivElement} container
   * @param {null} config
   */
  constructor(container, config) {
    super();

    this.container = container;

    if (config.content.intro) {
      // something
    } else {
      // something else
    }
  }
}

Feeds (with Google Spreadsheet)​

If you have a lot of data to cover you can use a Google Spreadsheet in combination with the config files. For more details see this page.

Copyright © 2023 - Media.Monks DisplayAd. Built with Docusaurus.
- + \ No newline at end of file diff --git a/img/auth2.jpeg b/img/auth2.jpeg new file mode 100644 index 0000000..8a3dbc6 Binary files /dev/null and b/img/auth2.jpeg differ diff --git a/index.html b/index.html index e88e4a5..7ba4280 100644 --- a/index.html +++ b/index.html @@ -5,13 +5,13 @@ Display Advertising Documentation | Display Advertising Documentation - +

Display Advertising Documentation

All the documentation that you will need to create, develop and build display units.

📚 Start learning

Display Boilerplate

Generator to scaffold a display advertising project.

Display Temple

Used for creating display ads units for various vendors.

Display Development Server

Used as a tool to build and develop richmedia units.

Display Upload

Uploading files to a location. Through the command line.

Display Ads Recorder

Used to records html5 ads and export multiple formats.

Copyright © 2023 - Media.Monks DisplayAd. Built with Docusaurus.
- + \ No newline at end of file diff --git a/search-index.json b/search-index.json index 98ce7ee..3e0fe4b 100644 --- a/search-index.json +++ b/search-index.json @@ -1 +1 @@ -[{"documents":[{"i":1,"t":"Banner Validation","u":"/display-advertising-docs/docs/banner-validation","b":["Documentation"]},{"i":3,"t":"","u":"/display-advertising-docs/docs/category/guides","b":["Documentation","Guides"]},{"i":38,"t":"","u":"/display-advertising-docs/docs/category/contributing","b":["Documentation","Contributing"]},{"i":45,"t":"","u":"/display-advertising-docs/docs/category/getting-started","b":["Documentation","Getting started"]},{"i":56,"t":"How to update Documentation","u":"/display-advertising-docs/docs/contributing/contributing-display-docs","b":["Documentation","Contributing"]},{"i":62,"t":"How to create an issue","u":"/display-advertising-docs/docs/contributing/create-issue","b":["Documentation","Contributing"]},{"i":64,"t":"How to update Framework","u":"/display-advertising-docs/docs/contributing/contributing-framework","b":["Documentation","Contributing"]},{"i":70,"t":"Creating a new project","u":"/display-advertising-docs/docs/getting-started/creating-a-new-project","b":["Documentation","Getting started"]},{"i":80,"t":"Upload a preview","u":"/display-advertising-docs/docs/getting-started/upload-a-preview","b":["Documentation","Getting started"]},{"i":88,"t":"Generate a build","u":"/display-advertising-docs/docs/getting-started/generate-a-build","b":["Documentation","Getting started"]},{"i":92,"t":"Installation","u":"/display-advertising-docs/docs/getting-started/installation","b":["Documentation","Getting started"]},{"i":100,"t":"Start the server","u":"/display-advertising-docs/docs/getting-started/start-the-server","b":["Documentation","Getting started"]},{"i":106,"t":"Automatically optimize zips","u":"/display-advertising-docs/docs/guides/auto-optimizing-ads","b":["Documentation","Guides"]},{"i":110,"t":"Create banners with parameters","u":"/display-advertising-docs/docs/guides/commands","b":["Documentation","Guides"]},{"i":112,"t":"Dynamic Import","u":"/display-advertising-docs/docs/guides/dynamic-import","b":["Documentation","Guides"]},{"i":114,"t":"Clean output template","u":"/display-advertising-docs/docs/guides/clean-output-template","b":["Documentation","Guides"]},{"i":120,"t":"Data binding","u":"/display-advertising-docs/docs/guides/dataBind","b":["Documentation","Guides"]},{"i":122,"t":"Dynamic Creative Optimization","u":"/display-advertising-docs/docs/guides/dco","b":["Documentation","Guides"]},{"i":132,"t":"Font Subsetting","u":"/display-advertising-docs/docs/guides/font-subsetting","b":["Documentation","Guides"]},{"i":134,"t":"Extends Animation","u":"/display-advertising-docs/docs/guides/extends-animation","b":["Documentation","Guides"]},{"i":136,"t":"Spreadsheets","u":"/display-advertising-docs/docs/guides/google-spreadsheets-feed","b":["Documentation","Guides"]},{"i":144,"t":"Custom globs for npm dev/build","u":"/display-advertising-docs/docs/guides/globbing-dev-build","b":["Documentation","Guides"]},{"i":146,"t":"Gsap","u":"/display-advertising-docs/docs/guides/gsap","b":["Documentation","Guides"]},{"i":154,"t":"Ads Recorder","u":"/display-advertising-docs/docs/guides/recorder","b":["Documentation","Guides"]},{"i":164,"t":"Multiple Timelines","u":"/display-advertising-docs/docs/guides/multiple-timelines","b":["Documentation","Guides"]},{"i":166,"t":"Svg","u":"/display-advertising-docs/docs/guides/svg","b":["Documentation","Guides"]},{"i":170,"t":"Handlebars","u":"/display-advertising-docs/docs/guides/using-handlebars","b":["Documentation","Guides"]},{"i":194,"t":"Timeline Scrubber","u":"/display-advertising-docs/docs/guides/timeline-scrubber","b":["Documentation","Guides"]},{"i":200,"t":"Lifecycle of a banner","u":"/display-advertising-docs/docs/lifecycle","b":["Documentation"]},{"i":202,"t":"Configuration files","u":"/display-advertising-docs/docs/richmediarc","b":["Documentation"]},{"i":224,"t":"Temple utils","u":"/display-advertising-docs/docs/guides/using-utils","b":["Documentation","Guides"]}],"index":{"version":"2.3.9","fields":["t"],"fieldVectors":[["t/1",[0,2.152,1,2.976]],["t/3",[]],["t/38",[]],["t/45",[]],["t/56",[2,2.479,3,2.976]],["t/62",[4,2.152,5,2.976]],["t/64",[2,2.479,6,2.976]],["t/70",[4,1.775,7,2.454,8,2.454]],["t/80",[9,2.976,10,2.976]],["t/88",[11,2.976,12,2.976]],["t/92",[13,3.78]],["t/100",[14,2.976,15,2.976]],["t/106",[16,2.454,17,2.045,18,2.454]],["t/110",[0,1.775,4,1.775,19,2.454]],["t/112",[20,2.479,21,2.976]],["t/114",[22,2.454,23,2.454,24,2.454]],["t/120",[25,2.976,26,2.976]],["t/122",[17,2.045,20,2.045,27,2.454]],["t/132",[28,2.976,29,2.976]],["t/134",[30,2.976,31,2.976]],["t/136",[32,3.78]],["t/144",[33,2.088,34,2.088,35,2.088,36,2.088]],["t/146",[37,3.78]],["t/154",[38,2.976,39,2.976]],["t/164",[40,2.976,41,2.479]],["t/166",[42,3.78]],["t/170",[43,3.78]],["t/194",[41,2.479,44,2.976]],["t/200",[0,2.152,45,2.976]],["t/202",[46,2.976,47,2.976]],["t/224",[48,2.976,49,2.976]]],"invertedIndex":[["ad",{"_index":38,"t":{"154":{"position":[[0,3]]}}}],["anim",{"_index":31,"t":{"134":{"position":[[8,9]]}}}],["automat",{"_index":16,"t":{"106":{"position":[[0,13]]}}}],["banner",{"_index":0,"t":{"1":{"position":[[0,6]]},"110":{"position":[[7,7]]},"200":{"position":[[15,6]]}}}],["bind",{"_index":26,"t":{"120":{"position":[[5,7]]}}}],["build",{"_index":12,"t":{"88":{"position":[[11,5]]}}}],["clean",{"_index":22,"t":{"114":{"position":[[0,5]]}}}],["configur",{"_index":46,"t":{"202":{"position":[[0,13]]}}}],["creat",{"_index":4,"t":{"62":{"position":[[7,6]]},"70":{"position":[[0,8]]},"110":{"position":[[0,6]]}}}],["creativ",{"_index":27,"t":{"122":{"position":[[8,8]]}}}],["custom",{"_index":33,"t":{"144":{"position":[[0,6]]}}}],["data",{"_index":25,"t":{"120":{"position":[[0,4]]}}}],["dev/build",{"_index":36,"t":{"144":{"position":[[21,9]]}}}],["document",{"_index":3,"t":{"56":{"position":[[14,13]]}}}],["dynam",{"_index":20,"t":{"112":{"position":[[0,7]]},"122":{"position":[[0,7]]}}}],["extend",{"_index":30,"t":{"134":{"position":[[0,7]]}}}],["file",{"_index":47,"t":{"202":{"position":[[14,5]]}}}],["font",{"_index":28,"t":{"132":{"position":[[0,4]]}}}],["framework",{"_index":6,"t":{"64":{"position":[[14,9]]}}}],["gener",{"_index":11,"t":{"88":{"position":[[0,8]]}}}],["glob",{"_index":34,"t":{"144":{"position":[[7,5]]}}}],["gsap",{"_index":37,"t":{"146":{"position":[[0,4]]}}}],["handlebar",{"_index":43,"t":{"170":{"position":[[0,10]]}}}],["import",{"_index":21,"t":{"112":{"position":[[8,6]]}}}],["instal",{"_index":13,"t":{"92":{"position":[[0,12]]}}}],["issu",{"_index":5,"t":{"62":{"position":[[17,5]]}}}],["lifecycl",{"_index":45,"t":{"200":{"position":[[0,9]]}}}],["multipl",{"_index":40,"t":{"164":{"position":[[0,8]]}}}],["new",{"_index":7,"t":{"70":{"position":[[11,3]]}}}],["npm",{"_index":35,"t":{"144":{"position":[[17,3]]}}}],["optim",{"_index":17,"t":{"106":{"position":[[14,8]]},"122":{"position":[[17,12]]}}}],["output",{"_index":23,"t":{"114":{"position":[[6,6]]}}}],["paramet",{"_index":19,"t":{"110":{"position":[[20,10]]}}}],["preview",{"_index":10,"t":{"80":{"position":[[9,7]]}}}],["project",{"_index":8,"t":{"70":{"position":[[15,7]]}}}],["record",{"_index":39,"t":{"154":{"position":[[4,8]]}}}],["scrubber",{"_index":44,"t":{"194":{"position":[[9,8]]}}}],["server",{"_index":15,"t":{"100":{"position":[[10,6]]}}}],["spreadsheet",{"_index":32,"t":{"136":{"position":[[0,12]]}}}],["start",{"_index":14,"t":{"100":{"position":[[0,5]]}}}],["subset",{"_index":29,"t":{"132":{"position":[[5,10]]}}}],["svg",{"_index":42,"t":{"166":{"position":[[0,3]]}}}],["templ",{"_index":48,"t":{"224":{"position":[[0,6]]}}}],["templat",{"_index":24,"t":{"114":{"position":[[13,8]]}}}],["timelin",{"_index":41,"t":{"164":{"position":[[9,9]]},"194":{"position":[[0,8]]}}}],["updat",{"_index":2,"t":{"56":{"position":[[7,6]]},"64":{"position":[[7,6]]}}}],["upload",{"_index":9,"t":{"80":{"position":[[0,6]]}}}],["util",{"_index":49,"t":{"224":{"position":[[7,5]]}}}],["valid",{"_index":1,"t":{"1":{"position":[[7,10]]}}}],["zip",{"_index":18,"t":{"106":{"position":[[23,4]]}}}]],"pipeline":["stemmer"]}},{"documents":[{"i":4,"t":"📄️ Handlebars","u":"/display-advertising-docs/docs/category/guides","h":"","p":3},{"i":6,"t":"📄️ Temple utils","u":"/display-advertising-docs/docs/category/guides","h":"","p":3},{"i":8,"t":"📄️ Font Subsetting","u":"/display-advertising-docs/docs/category/guides","h":"","p":3},{"i":10,"t":"📄️ Svg","u":"/display-advertising-docs/docs/category/guides","h":"","p":3},{"i":12,"t":"📄️ Spreadsheets","u":"/display-advertising-docs/docs/category/guides","h":"","p":3},{"i":14,"t":"📄️ Data binding","u":"/display-advertising-docs/docs/category/guides","h":"","p":3},{"i":16,"t":"📄️ Create banners with parameters","u":"/display-advertising-docs/docs/category/guides","h":"","p":3},{"i":18,"t":"📄️ Dynamic Import","u":"/display-advertising-docs/docs/category/guides","h":"","p":3},{"i":20,"t":"📄️ Extends Animation","u":"/display-advertising-docs/docs/category/guides","h":"","p":3},{"i":22,"t":"📄️ Gsap","u":"/display-advertising-docs/docs/category/guides","h":"","p":3},{"i":24,"t":"📄️ Multiple Timelines","u":"/display-advertising-docs/docs/category/guides","h":"","p":3},{"i":26,"t":"📄️ Ads Recorder","u":"/display-advertising-docs/docs/category/guides","h":"","p":3},{"i":28,"t":"📄️ Dynamic Creative Optimization","u":"/display-advertising-docs/docs/category/guides","h":"","p":3},{"i":30,"t":"📄️ Custom globs for npm dev/build","u":"/display-advertising-docs/docs/category/guides","h":"","p":3},{"i":32,"t":"📄️ Automatically optimize zips","u":"/display-advertising-docs/docs/category/guides","h":"","p":3},{"i":34,"t":"📄️ Clean output template","u":"/display-advertising-docs/docs/category/guides","h":"","p":3},{"i":36,"t":"📄️ Timeline Scrubber","u":"/display-advertising-docs/docs/category/guides","h":"","p":3},{"i":39,"t":"📄️ How to create an issue","u":"/display-advertising-docs/docs/category/contributing","h":"","p":38},{"i":41,"t":"📄️ How to update Documentation","u":"/display-advertising-docs/docs/category/contributing","h":"","p":38},{"i":43,"t":"📄️ How to update Framework","u":"/display-advertising-docs/docs/category/contributing","h":"","p":38},{"i":46,"t":"📄️ Installation","u":"/display-advertising-docs/docs/category/getting-started","h":"","p":45},{"i":48,"t":"📄️ Creating a new project","u":"/display-advertising-docs/docs/category/getting-started","h":"","p":45},{"i":50,"t":"📄️ Start the server","u":"/display-advertising-docs/docs/category/getting-started","h":"","p":45},{"i":52,"t":"📄️ Generate a build","u":"/display-advertising-docs/docs/category/getting-started","h":"","p":45},{"i":54,"t":"📄️ Upload a preview","u":"/display-advertising-docs/docs/category/getting-started","h":"","p":45},{"i":58,"t":"Propose a change","u":"/display-advertising-docs/docs/contributing/contributing-display-docs","h":"#propose-a-change","p":56},{"i":60,"t":"Workflow for make changes","u":"/display-advertising-docs/docs/contributing/contributing-display-docs","h":"#workflow-for-make-changes","p":56},{"i":66,"t":"Propose a change","u":"/display-advertising-docs/docs/contributing/contributing-framework","h":"#propose-a-change","p":64},{"i":68,"t":"Workflow for make changes","u":"/display-advertising-docs/docs/contributing/contributing-framework","h":"#workflow-for-make-changes","p":64},{"i":72,"t":"Step 1","u":"/display-advertising-docs/docs/getting-started/creating-a-new-project","h":"#step-1","p":70},{"i":74,"t":"Step 2","u":"/display-advertising-docs/docs/getting-started/creating-a-new-project","h":"#step-2","p":70},{"i":76,"t":"Step 3","u":"/display-advertising-docs/docs/getting-started/creating-a-new-project","h":"#step-3","p":70},{"i":78,"t":"Step 4","u":"/display-advertising-docs/docs/getting-started/creating-a-new-project","h":"#step-4","p":70},{"i":82,"t":"How to use","u":"/display-advertising-docs/docs/getting-started/upload-a-preview","h":"#how-to-use","p":80},{"i":84,"t":"MediaMonks Preview","u":"/display-advertising-docs/docs/getting-started/upload-a-preview","h":"#mediamonks-preview","p":80},{"i":86,"t":"Preview parameters","u":"/display-advertising-docs/docs/getting-started/upload-a-preview","h":"#preview-parameters","p":80},{"i":90,"t":"Build parameters","u":"/display-advertising-docs/docs/getting-started/generate-a-build","h":"#build-parameters","p":88},{"i":94,"t":"Prerequisites","u":"/display-advertising-docs/docs/getting-started/installation","h":"#prerequisites","p":92},{"i":96,"t":"Step 1","u":"/display-advertising-docs/docs/getting-started/installation","h":"#step-1","p":92},{"i":98,"t":"Step 2","u":"/display-advertising-docs/docs/getting-started/installation","h":"#step-2","p":92},{"i":102,"t":"What is the Display Development Server?","u":"/display-advertising-docs/docs/getting-started/start-the-server","h":"#what-is-the-display-development-server","p":100},{"i":104,"t":"Running the DDS","u":"/display-advertising-docs/docs/getting-started/start-the-server","h":"#running-the-dds","p":100},{"i":108,"t":"Configuration","u":"/display-advertising-docs/docs/guides/auto-optimizing-ads","h":"#configuration","p":106},{"i":116,"t":"Purpose","u":"/display-advertising-docs/docs/guides/clean-output-template","h":"#purpose","p":114},{"i":118,"t":"Repo","u":"/display-advertising-docs/docs/guides/clean-output-template","h":"#repo","p":114},{"i":124,"t":"Feed configuration","u":"/display-advertising-docs/docs/guides/dco","h":"#feed-configuration","p":122},{"i":126,"t":"Tips & tricks","u":"/display-advertising-docs/docs/guides/dco","h":"#tips--tricks","p":122},{"i":128,"t":"Enabler","u":"/display-advertising-docs/docs/guides/dco","h":"#enabler","p":122},{"i":130,"t":"ExitUrl","u":"/display-advertising-docs/docs/guides/dco","h":"#exiturl","p":122},{"i":138,"t":"Introduction","u":"/display-advertising-docs/docs/guides/google-spreadsheets-feed","h":"#introduction","p":136},{"i":140,"t":"Configuration","u":"/display-advertising-docs/docs/guides/google-spreadsheets-feed","h":"#configuration","p":136},{"i":142,"t":"Advanced example","u":"/display-advertising-docs/docs/guides/google-spreadsheets-feed","h":"#advanced-example","p":136},{"i":148,"t":"Using events","u":"/display-advertising-docs/docs/guides/gsap","h":"#using-events","p":146},{"i":150,"t":"Enable GSDevTools","u":"/display-advertising-docs/docs/guides/gsap","h":"#enable-gsdevtools","p":146},{"i":152,"t":"Using utils","u":"/display-advertising-docs/docs/guides/gsap","h":"#using-utils","p":146},{"i":156,"t":"Requirements","u":"/display-advertising-docs/docs/guides/recorder","h":"#requirements","p":154},{"i":158,"t":"Installation","u":"/display-advertising-docs/docs/guides/recorder","h":"#installation","p":154},{"i":160,"t":"Configuration","u":"/display-advertising-docs/docs/guides/recorder","h":"#configuration","p":154},{"i":162,"t":"Usage","u":"/display-advertising-docs/docs/guides/recorder","h":"#usage","p":154},{"i":168,"t":"Using the default inline","u":"/display-advertising-docs/docs/guides/svg","h":"#using-the-default-inline","p":166},{"i":172,"t":"What is templating language?","u":"/display-advertising-docs/docs/guides/using-handlebars","h":"#what-is-templating-language","p":170},{"i":174,"t":"Conditionals","u":"/display-advertising-docs/docs/guides/using-handlebars","h":"#conditionals","p":170},{"i":176,"t":"Iterators","u":"/display-advertising-docs/docs/guides/using-handlebars","h":"#iterators","p":170},{"i":178,"t":"Partials","u":"/display-advertising-docs/docs/guides/using-handlebars","h":"#partials","p":170},{"i":180,"t":"Basic partials","u":"/display-advertising-docs/docs/guides/using-handlebars","h":"#basic-partials","p":170},{"i":182,"t":"Partials with parameter","u":"/display-advertising-docs/docs/guides/using-handlebars","h":"#partials-with-parameter","p":170},{"i":184,"t":"Custom Helpers","u":"/display-advertising-docs/docs/guides/using-handlebars","h":"#custom-helpers","p":170},{"i":186,"t":"getSize","u":"/display-advertising-docs/docs/guides/using-handlebars","h":"#getsize","p":170},{"i":188,"t":"compare","u":"/display-advertising-docs/docs/guides/using-handlebars","h":"#compare","p":170},{"i":190,"t":"brackets","u":"/display-advertising-docs/docs/guides/using-handlebars","h":"#brackets","p":170},{"i":192,"t":"checkExtension","u":"/display-advertising-docs/docs/guides/using-handlebars","h":"#checkextension","p":170},{"i":196,"t":"Configuration","u":"/display-advertising-docs/docs/guides/timeline-scrubber","h":"#configuration","p":194},{"i":198,"t":"Hotkeys","u":"/display-advertising-docs/docs/guides/timeline-scrubber","h":"#hotkeys","p":194},{"i":204,"t":"Live reload","u":"/display-advertising-docs/docs/richmediarc","h":"#live-reload","p":202},{"i":206,"t":"Inheritance","u":"/display-advertising-docs/docs/richmediarc","h":"#inheritance","p":202},{"i":208,"t":".richmediarc","u":"/display-advertising-docs/docs/richmediarc","h":"#richmediarc","p":202},{"i":210,"t":".sharedrc","u":"/display-advertising-docs/docs/richmediarc","h":"#sharedrc","p":202},{"i":212,"t":"Basic .richmediarc concepts","u":"/display-advertising-docs/docs/richmediarc","h":"#basic-richmediarc-concepts","p":202},{"i":214,"t":"Using .richmediarc values in regular HTML","u":"/display-advertising-docs/docs/richmediarc","h":"#using-richmediarc-values-in-regular-html","p":202},{"i":216,"t":"Using .richmediarc values in Handlebars","u":"/display-advertising-docs/docs/richmediarc","h":"#using-richmediarc-values-in-handlebars","p":202},{"i":218,"t":"Using .richmediarc values in CSS","u":"/display-advertising-docs/docs/richmediarc","h":"#using-richmediarc-values-in-css","p":202},{"i":220,"t":"Using .richmediarc values in javascript","u":"/display-advertising-docs/docs/richmediarc","h":"#using-richmediarc-values-in-javascript","p":202},{"i":222,"t":"Feeds (with Google Spreadsheet)","u":"/display-advertising-docs/docs/richmediarc","h":"#feeds-with-google-spreadsheet","p":202},{"i":226,"t":"browser","u":"/display-advertising-docs/docs/guides/using-utils","h":"#browser","p":224},{"i":228,"t":"fitText","u":"/display-advertising-docs/docs/guides/using-utils","h":"#fittext","p":224},{"i":230,"t":"isElementLoaded","u":"/display-advertising-docs/docs/guides/using-utils","h":"#iselementloaded","p":224},{"i":232,"t":"loadAll","u":"/display-advertising-docs/docs/guides/using-utils","h":"#loadall","p":224},{"i":234,"t":"loadImage","u":"/display-advertising-docs/docs/guides/using-utils","h":"#loadimage","p":224},{"i":236,"t":"loadScriptAll","u":"/display-advertising-docs/docs/guides/using-utils","h":"#loadscriptall","p":224},{"i":238,"t":"loadJSON","u":"/display-advertising-docs/docs/guides/using-utils","h":"#loadjson","p":224},{"i":240,"t":"masker","u":"/display-advertising-docs/docs/guides/using-utils","h":"#masker","p":224},{"i":242,"t":"rgbToHex","u":"/display-advertising-docs/docs/guides/using-utils","h":"#rgbtohex","p":224}],"index":{"version":"2.3.9","fields":["t"],"fieldVectors":[["t/4",[0,1.28,1,3.687]],["t/6",[0,1.068,2,3.51,3,3.075]],["t/8",[0,1.068,4,3.51,5,3.51]],["t/10",[0,1.28,6,4.207]],["t/12",[0,1.28,7,3.687]],["t/14",[0,1.068,8,3.51,9,3.51]],["t/16",[0,0.916,10,2.392,11,3.01,12,2.209]],["t/18",[0,1.068,13,3.075,14,3.51]],["t/20",[0,1.068,15,3.51,16,3.51]],["t/22",[0,1.28,17,4.207]],["t/24",[0,1.068,18,3.51,19,3.075]],["t/26",[0,1.068,20,3.51,21,3.51]],["t/28",[0,0.916,13,2.638,22,3.01,23,2.638]],["t/30",[0,0.802,24,2.309,25,2.636,26,2.636,27,2.636]],["t/32",[0,0.916,23,2.638,28,3.01,29,3.01]],["t/34",[0,0.916,30,3.01,31,3.01,32,2.638]],["t/36",[0,1.068,19,3.075,33,3.51]],["t/39",[0,1.068,10,2.789,34,3.51]],["t/41",[0,1.068,35,3.075,36,3.51]],["t/43",[0,1.068,35,3.075,37,3.51]],["t/46",[0,1.28,38,3.687]],["t/48",[0,0.916,10,2.392,39,3.01,40,3.01]],["t/50",[0,1.068,41,3.51,42,3.075]],["t/52",[0,1.068,43,3.51,44,3.075]],["t/54",[0,1.068,45,3.51,46,2.789]],["t/58",[47,3.687,48,3.087]],["t/60",[48,2.575,49,3.075,50,3.075]],["t/66",[47,3.687,48,3.087]],["t/68",[48,2.575,49,3.075,50,3.075]],["t/72",[51,2.713,52,3.687]],["t/74",[51,2.713,53,3.687]],["t/76",[51,2.713,54,4.207]],["t/78",[51,2.713,55,4.207]],["t/82",[56,3.044]],["t/84",[46,3.344,57,4.207]],["t/86",[12,3.087,46,3.344]],["t/90",[12,3.087,44,3.687]],["t/94",[58,5.251]],["t/96",[51,2.713,52,3.687]],["t/98",[51,2.713,53,3.687]],["t/102",[42,3.075,59,3.51,60,3.51]],["t/104",[61,4.207,62,4.207]],["t/108",[63,3.598]],["t/116",[64,5.251]],["t/118",[65,5.251]],["t/124",[63,2.883,66,3.687]],["t/126",[0,1.068,67,3.51,68,3.51]],["t/128",[69,4.601]],["t/130",[70,5.251]],["t/138",[71,5.251]],["t/140",[63,3.598]],["t/142",[72,4.207,73,4.207]],["t/148",[56,2.439,74,4.207]],["t/150",[69,3.687,75,4.207]],["t/152",[3,3.687,56,2.439]],["t/156",[76,5.251]],["t/158",[38,4.601]],["t/160",[63,3.598]],["t/162",[77,5.251]],["t/168",[56,2.035,78,3.51,79,3.51]],["t/172",[32,3.687,80,4.207]],["t/174",[81,5.251]],["t/176",[82,5.251]],["t/178",[83,4.173]],["t/180",[83,3.344,84,3.687]],["t/182",[12,3.087,83,3.344]],["t/184",[24,3.687,85,4.207]],["t/186",[86,5.251]],["t/188",[87,5.251]],["t/190",[88,5.251]],["t/192",[89,5.251]],["t/196",[63,3.598]],["t/198",[90,5.251]],["t/204",[91,4.207,92,4.207]],["t/206",[93,5.251]],["t/208",[94,3.386]],["t/210",[95,5.251]],["t/212",[84,3.075,94,2.263,96,3.51]],["t/214",[56,1.528,94,1.699,97,1.934,98,2.636,99,2.636]],["t/216",[1,2.638,56,1.745,94,1.941,97,2.209]],["t/218",[56,1.745,94,1.941,97,2.209,100,3.01]],["t/220",[56,1.745,94,1.941,97,2.209,101,3.01]],["t/222",[7,3.075,66,3.075,102,3.51]],["t/226",[103,5.251]],["t/228",[104,5.251]],["t/230",[105,5.251]],["t/232",[106,5.251]],["t/234",[107,5.251]],["t/236",[108,5.251]],["t/238",[109,5.251]],["t/240",[110,5.251]],["t/242",[111,5.251]]],"invertedIndex":[["",{"_index":0,"t":{"4":{"position":[[0,3]]},"6":{"position":[[0,3]]},"8":{"position":[[0,3]]},"10":{"position":[[0,3]]},"12":{"position":[[0,3]]},"14":{"position":[[0,3]]},"16":{"position":[[0,3]]},"18":{"position":[[0,3]]},"20":{"position":[[0,3]]},"22":{"position":[[0,3]]},"24":{"position":[[0,3]]},"26":{"position":[[0,3]]},"28":{"position":[[0,3]]},"30":{"position":[[0,3]]},"32":{"position":[[0,3]]},"34":{"position":[[0,3]]},"36":{"position":[[0,3]]},"39":{"position":[[0,3]]},"41":{"position":[[0,3]]},"43":{"position":[[0,3]]},"46":{"position":[[0,3]]},"48":{"position":[[0,3]]},"50":{"position":[[0,3]]},"52":{"position":[[0,3]]},"54":{"position":[[0,3]]},"126":{"position":[[5,1]]}}}],["1",{"_index":52,"t":{"72":{"position":[[5,1]]},"96":{"position":[[5,1]]}}}],["2",{"_index":53,"t":{"74":{"position":[[5,1]]},"98":{"position":[[5,1]]}}}],["3",{"_index":54,"t":{"76":{"position":[[5,1]]}}}],["4",{"_index":55,"t":{"78":{"position":[[5,1]]}}}],["ad",{"_index":20,"t":{"26":{"position":[[4,3]]}}}],["advanc",{"_index":72,"t":{"142":{"position":[[0,8]]}}}],["anim",{"_index":16,"t":{"20":{"position":[[12,9]]}}}],["automat",{"_index":28,"t":{"32":{"position":[[4,13]]}}}],["banner",{"_index":11,"t":{"16":{"position":[[11,7]]}}}],["basic",{"_index":84,"t":{"180":{"position":[[0,5]]},"212":{"position":[[0,5]]}}}],["bind",{"_index":9,"t":{"14":{"position":[[9,7]]}}}],["bracket",{"_index":88,"t":{"190":{"position":[[0,8]]}}}],["browser",{"_index":103,"t":{"226":{"position":[[0,7]]}}}],["build",{"_index":44,"t":{"52":{"position":[[15,5]]},"90":{"position":[[0,5]]}}}],["chang",{"_index":48,"t":{"58":{"position":[[10,6]]},"60":{"position":[[18,7]]},"66":{"position":[[10,6]]},"68":{"position":[[18,7]]}}}],["checkextens",{"_index":89,"t":{"192":{"position":[[0,14]]}}}],["clean",{"_index":30,"t":{"34":{"position":[[4,5]]}}}],["compar",{"_index":87,"t":{"188":{"position":[[0,7]]}}}],["concept",{"_index":96,"t":{"212":{"position":[[19,8]]}}}],["condit",{"_index":81,"t":{"174":{"position":[[0,12]]}}}],["configur",{"_index":63,"t":{"108":{"position":[[0,13]]},"124":{"position":[[5,13]]},"140":{"position":[[0,13]]},"160":{"position":[[0,13]]},"196":{"position":[[0,13]]}}}],["creat",{"_index":10,"t":{"16":{"position":[[4,6]]},"39":{"position":[[11,6]]},"48":{"position":[[4,8]]}}}],["creativ",{"_index":22,"t":{"28":{"position":[[12,8]]}}}],["css",{"_index":100,"t":{"218":{"position":[[29,3]]}}}],["custom",{"_index":24,"t":{"30":{"position":[[4,6]]},"184":{"position":[[0,6]]}}}],["data",{"_index":8,"t":{"14":{"position":[[4,4]]}}}],["dd",{"_index":62,"t":{"104":{"position":[[12,3]]}}}],["default",{"_index":78,"t":{"168":{"position":[[10,7]]}}}],["dev/build",{"_index":27,"t":{"30":{"position":[[25,9]]}}}],["develop",{"_index":60,"t":{"102":{"position":[[20,11]]}}}],["display",{"_index":59,"t":{"102":{"position":[[12,7]]}}}],["document",{"_index":36,"t":{"41":{"position":[[18,13]]}}}],["dynam",{"_index":13,"t":{"18":{"position":[[4,7]]},"28":{"position":[[4,7]]}}}],["enabl",{"_index":69,"t":{"128":{"position":[[0,7]]},"150":{"position":[[0,6]]}}}],["event",{"_index":74,"t":{"148":{"position":[[6,6]]}}}],["exampl",{"_index":73,"t":{"142":{"position":[[9,7]]}}}],["exiturl",{"_index":70,"t":{"130":{"position":[[0,7]]}}}],["extend",{"_index":15,"t":{"20":{"position":[[4,7]]}}}],["feed",{"_index":66,"t":{"124":{"position":[[0,4]]},"222":{"position":[[0,5]]}}}],["fittext",{"_index":104,"t":{"228":{"position":[[0,7]]}}}],["font",{"_index":4,"t":{"8":{"position":[[4,4]]}}}],["framework",{"_index":37,"t":{"43":{"position":[[18,9]]}}}],["gener",{"_index":43,"t":{"52":{"position":[[4,8]]}}}],["getsiz",{"_index":86,"t":{"186":{"position":[[0,7]]}}}],["glob",{"_index":25,"t":{"30":{"position":[[11,5]]}}}],["googl",{"_index":102,"t":{"222":{"position":[[12,6]]}}}],["gsap",{"_index":17,"t":{"22":{"position":[[4,4]]}}}],["gsdevtool",{"_index":75,"t":{"150":{"position":[[7,10]]}}}],["handlebar",{"_index":1,"t":{"4":{"position":[[4,10]]},"216":{"position":[[29,10]]}}}],["helper",{"_index":85,"t":{"184":{"position":[[7,7]]}}}],["hotkey",{"_index":90,"t":{"198":{"position":[[0,7]]}}}],["html",{"_index":99,"t":{"214":{"position":[[37,4]]}}}],["import",{"_index":14,"t":{"18":{"position":[[12,6]]}}}],["inherit",{"_index":93,"t":{"206":{"position":[[0,11]]}}}],["inlin",{"_index":79,"t":{"168":{"position":[[18,6]]}}}],["instal",{"_index":38,"t":{"46":{"position":[[4,12]]},"158":{"position":[[0,12]]}}}],["introduct",{"_index":71,"t":{"138":{"position":[[0,12]]}}}],["iselementload",{"_index":105,"t":{"230":{"position":[[0,15]]}}}],["issu",{"_index":34,"t":{"39":{"position":[[21,5]]}}}],["iter",{"_index":82,"t":{"176":{"position":[[0,9]]}}}],["javascript",{"_index":101,"t":{"220":{"position":[[29,10]]}}}],["languag",{"_index":80,"t":{"172":{"position":[[19,9]]}}}],["live",{"_index":91,"t":{"204":{"position":[[0,4]]}}}],["loadal",{"_index":106,"t":{"232":{"position":[[0,7]]}}}],["loadimag",{"_index":107,"t":{"234":{"position":[[0,9]]}}}],["loadjson",{"_index":109,"t":{"238":{"position":[[0,8]]}}}],["loadscriptal",{"_index":108,"t":{"236":{"position":[[0,13]]}}}],["make",{"_index":50,"t":{"60":{"position":[[13,4]]},"68":{"position":[[13,4]]}}}],["masker",{"_index":110,"t":{"240":{"position":[[0,6]]}}}],["mediamonk",{"_index":57,"t":{"84":{"position":[[0,10]]}}}],["multipl",{"_index":18,"t":{"24":{"position":[[4,8]]}}}],["new",{"_index":39,"t":{"48":{"position":[[15,3]]}}}],["npm",{"_index":26,"t":{"30":{"position":[[21,3]]}}}],["optim",{"_index":23,"t":{"28":{"position":[[21,12]]},"32":{"position":[[18,8]]}}}],["output",{"_index":31,"t":{"34":{"position":[[10,6]]}}}],["paramet",{"_index":12,"t":{"16":{"position":[[24,10]]},"86":{"position":[[8,10]]},"90":{"position":[[6,10]]},"182":{"position":[[14,9]]}}}],["partial",{"_index":83,"t":{"178":{"position":[[0,8]]},"180":{"position":[[6,8]]},"182":{"position":[[0,8]]}}}],["prerequisit",{"_index":58,"t":{"94":{"position":[[0,13]]}}}],["preview",{"_index":46,"t":{"54":{"position":[[13,7]]},"84":{"position":[[11,7]]},"86":{"position":[[0,7]]}}}],["project",{"_index":40,"t":{"48":{"position":[[19,7]]}}}],["propos",{"_index":47,"t":{"58":{"position":[[0,7]]},"66":{"position":[[0,7]]}}}],["purpos",{"_index":64,"t":{"116":{"position":[[0,7]]}}}],["record",{"_index":21,"t":{"26":{"position":[[8,8]]}}}],["regular",{"_index":98,"t":{"214":{"position":[[29,7]]}}}],["reload",{"_index":92,"t":{"204":{"position":[[5,6]]}}}],["repo",{"_index":65,"t":{"118":{"position":[[0,4]]}}}],["requir",{"_index":76,"t":{"156":{"position":[[0,12]]}}}],["rgbtohex",{"_index":111,"t":{"242":{"position":[[0,8]]}}}],["richmediarc",{"_index":94,"t":{"208":{"position":[[0,12]]},"212":{"position":[[6,12]]},"214":{"position":[[6,12]]},"216":{"position":[[6,12]]},"218":{"position":[[6,12]]},"220":{"position":[[6,12]]}}}],["run",{"_index":61,"t":{"104":{"position":[[0,7]]}}}],["scrubber",{"_index":33,"t":{"36":{"position":[[13,8]]}}}],["server",{"_index":42,"t":{"50":{"position":[[14,6]]},"102":{"position":[[32,7]]}}}],["sharedrc",{"_index":95,"t":{"210":{"position":[[0,9]]}}}],["spreadsheet",{"_index":7,"t":{"12":{"position":[[4,12]]},"222":{"position":[[19,12]]}}}],["start",{"_index":41,"t":{"50":{"position":[[4,5]]}}}],["step",{"_index":51,"t":{"72":{"position":[[0,4]]},"74":{"position":[[0,4]]},"76":{"position":[[0,4]]},"78":{"position":[[0,4]]},"96":{"position":[[0,4]]},"98":{"position":[[0,4]]}}}],["subset",{"_index":5,"t":{"8":{"position":[[9,10]]}}}],["svg",{"_index":6,"t":{"10":{"position":[[4,3]]}}}],["templ",{"_index":2,"t":{"6":{"position":[[4,6]]}}}],["templat",{"_index":32,"t":{"34":{"position":[[17,8]]},"172":{"position":[[8,10]]}}}],["timelin",{"_index":19,"t":{"24":{"position":[[13,9]]},"36":{"position":[[4,8]]}}}],["tip",{"_index":67,"t":{"126":{"position":[[0,4]]}}}],["trick",{"_index":68,"t":{"126":{"position":[[7,6]]}}}],["updat",{"_index":35,"t":{"41":{"position":[[11,6]]},"43":{"position":[[11,6]]}}}],["upload",{"_index":45,"t":{"54":{"position":[[4,6]]}}}],["us",{"_index":56,"t":{"82":{"position":[[7,3]]},"148":{"position":[[0,5]]},"152":{"position":[[0,5]]},"168":{"position":[[0,5]]},"214":{"position":[[0,5]]},"216":{"position":[[0,5]]},"218":{"position":[[0,5]]},"220":{"position":[[0,5]]}}}],["usag",{"_index":77,"t":{"162":{"position":[[0,5]]}}}],["util",{"_index":3,"t":{"6":{"position":[[11,5]]},"152":{"position":[[6,5]]}}}],["valu",{"_index":97,"t":{"214":{"position":[[19,6]]},"216":{"position":[[19,6]]},"218":{"position":[[19,6]]},"220":{"position":[[19,6]]}}}],["workflow",{"_index":49,"t":{"60":{"position":[[0,8]]},"68":{"position":[[0,8]]}}}],["zip",{"_index":29,"t":{"32":{"position":[[27,4]]}}}]],"pipeline":["stemmer"]}},{"documents":[{"i":2,"t":"Banner Validation","s":"Banner Validation","u":"/display-advertising-docs/docs/banner-validation","h":"","p":1},{"i":5,"t":"What is templating language?","s":"📄️ Handlebars","u":"/display-advertising-docs/docs/category/guides","h":"","p":3},{"i":7,"t":"Multiple utils are included in the display-temple repository that can save us a lot of work. Below are some examples:","s":"📄️ Temple utils","u":"/display-advertising-docs/docs/category/guides","h":"","p":3},{"i":9,"t":"Font subsetting allows us to drastically reduce the overall filesize of our ads by slimming down our font files to the point where they only include the actual characters we need.","s":"📄️ Font Subsetting","u":"/display-advertising-docs/docs/category/guides","h":"","p":3},{"i":11,"t":"Using the default inline","s":"📄️ Svg","u":"/display-advertising-docs/docs/category/guides","h":"","p":3},{"i":13,"t":"Introduction","s":"📄️ Spreadsheets","u":"/display-advertising-docs/docs/category/guides","h":"","p":3},{"i":15,"t":"Data bind is a util in the @mediamonks/temple to bind a object data to html. In your index.html or index.hbs, you can easely bind js object to html elements with dataBind.","s":"📄️ Data binding","u":"/display-advertising-docs/docs/category/guides","h":"","p":3},{"i":17,"t":"Another way to create banners is using the command line with parameters. It is possible to create multiple banners using the --units parameter and is possible to define the --type of the units.","s":"📄️ Create banners with parameters","u":"/display-advertising-docs/docs/category/guides","h":"","p":3},{"i":19,"t":"Dynamic import() introduces a new function-like form of import that caters to those use cases. import(moduleSpecifier) returns a promise for the module namespace object of the requested module, which is created after fetching, instantiating, and evaluating all of the module’s dependencies, as well as the module itself.","s":"📄️ Dynamic Import","u":"/display-advertising-docs/docs/category/guides","h":"","p":3},{"i":21,"t":"Sometimes it may happen that we need to modify the animation of a certain frame, but we don't want to add conditionals or duplicate the main Animation.js only to change a few lines. For those cases it is recommended to create a child Animation.js.","s":"📄️ Extends Animation","u":"/display-advertising-docs/docs/category/guides","h":"","p":3},{"i":23,"t":"Using events","s":"📄️ Gsap","u":"/display-advertising-docs/docs/category/guides","h":"","p":3},{"i":25,"t":"It is posible to create multiple Timelines to be able to control them though banner.js.","s":"📄️ Multiple Timelines","u":"/display-advertising-docs/docs/category/guides","h":"","p":3},{"i":27,"t":"The Display Ads Recorder is a command line tool meant to record display ads and output these to separate formats, like","s":"📄️ Ads Recorder","u":"/display-advertising-docs/docs/category/guides","h":"","p":3},{"i":29,"t":"About building dynamic creatives:","s":"📄️ Dynamic Creative Optimization","u":"/display-advertising-docs/docs/category/guides","h":"","p":3},{"i":31,"t":"Creating custom dynamic globs for your npm run dev or -build commands can be very convenient.","s":"📄️ Custom globs for npm dev/build","u":"/display-advertising-docs/docs/category/guides","h":"","p":3},{"i":33,"t":"You can now let the dev-server try to optimize your bundle .zip to try and fit it within the specs.","s":"📄️ Automatically optimize zips","u":"/display-advertising-docs/docs/category/guides","h":"","p":3},{"i":35,"t":"This version of the framework creates an output that excludes the browser-compatible Babel implementation. With IE 11 being deprecated, this has become an option for us to use in some cases.","s":"📄️ Clean output template","u":"/display-advertising-docs/docs/category/guides","h":"","p":3},{"i":37,"t":"Previously, we had to use the GSDevTools bonus plugin of GreenSock to get a timeline scrubber so you would be able to scroll through your gsap timeline.","s":"📄️ Timeline Scrubber","u":"/display-advertising-docs/docs/category/guides","h":"","p":3},{"i":40,"t":"Issues can be created in a variety of ways, so you can choose the most convenient method for your workflow. Please follow the GitHub official docs to create a ticket.","s":"📄️ How to create an issue","u":"/display-advertising-docs/docs/category/contributing","h":"","p":38},{"i":42,"t":"Propose a change","s":"📄️ How to update Documentation","u":"/display-advertising-docs/docs/category/contributing","h":"","p":38},{"i":44,"t":"Before proposing/making a change it is necessary to select the relevant repository.","s":"📄️ How to update Framework","u":"/display-advertising-docs/docs/category/contributing","h":"","p":38},{"i":47,"t":"Prerequisites","s":"📄️ Installation","u":"/display-advertising-docs/docs/category/getting-started","h":"","p":45},{"i":49,"t":"Its advisable when creating a new richmedia unit to first scaffold the initial project This will save you a lot of","s":"📄️ Creating a new project","u":"/display-advertising-docs/docs/category/getting-started","h":"","p":45},{"i":51,"t":"What is the Display Development Server?","s":"📄️ Start the server","u":"/display-advertising-docs/docs/category/getting-started","h":"","p":45},{"i":53,"t":"If you check the build is actually a script which is found in package.json, which in turn runs the command dds --mode production. After you execute this script, it will start searching for .richmediarc files in all the directories and subdirectories of your project. You’ll see something like this:","s":"📄️ Generate a build","u":"/display-advertising-docs/docs/category/getting-started","h":"","p":45},{"i":55,"t":"How to use","s":"📄️ Upload a preview","u":"/display-advertising-docs/docs/category/getting-started","h":"","p":45},{"i":57,"t":"Contributing How to update Documentation","s":"How to update Documentation","u":"/display-advertising-docs/docs/contributing/contributing-display-docs","h":"","p":56},{"i":59,"t":"If you want to propose a change, you will need to create a ticket in detail what you want to do. Please read the How to create an issue guide. Ready to create the ticket? Please add into the docs repository.","s":"Propose a change","u":"/display-advertising-docs/docs/contributing/contributing-display-docs","h":"#propose-a-change","p":56},{"i":61,"t":"Fork the repository Clone your new fork locally Create a new branch for your changes Make your changes Submit your pull request Discuss and review your code Rebase and tests “Merge” your branch to the master branch","s":"Workflow for make changes","u":"/display-advertising-docs/docs/contributing/contributing-display-docs","h":"#workflow-for-make-changes","p":56},{"i":63,"t":"Contributing How to create an issue","s":"How to create an issue","u":"/display-advertising-docs/docs/contributing/create-issue","h":"","p":62},{"i":65,"t":"Contributing How to update Framework","s":"How to update Framework","u":"/display-advertising-docs/docs/contributing/contributing-framework","h":"","p":64},{"i":67,"t":"If you want to propose a change, it will be necessary to create a ticket informing in detail what you want to do. Please read the How to create an issue page.","s":"Propose a change","u":"/display-advertising-docs/docs/contributing/contributing-framework","h":"#propose-a-change","p":64},{"i":69,"t":"Fork the repository Clone your new fork locally Create a new branch for your changes Make your changes npm install node_modules in your local fork Do your code changes in your fork Link your local fork with npm link Test your local fork By either using npm link @mediamonks/display-dev-server in a test project for for example the display-dev-server Or for the display-boilerplate, running yo display-boilerplate in a test project and then installing your changes Submit your pull request Discuss and review your code Rebase and tests “Merge” your branch to the master branch In the master branch, create a new version (tag) with a message npm version major/minor/patch -m \"this has been updated\" Push your tag to origin git push origin","s":"Workflow for make changes","u":"/display-advertising-docs/docs/contributing/contributing-framework","h":"#workflow-for-make-changes","p":64},{"i":71,"t":"Getting started Creating a new project","s":"Creating a new project","u":"/display-advertising-docs/docs/getting-started/creating-a-new-project","h":"","p":70},{"i":73,"t":"In the terminal, make your way to a new project folder of your choosing, e.g. documents/work/my-banner-project. yo display-boilerplate In this menu you can use the arrow keys to navigate the cursor. ? What do you want to do? Create quick unit (with default parameters) ❯ Create display units (you can create multiple or just one)","s":"Step 1","u":"/display-advertising-docs/docs/getting-started/creating-a-new-project","h":"#step-1","p":70},{"i":75,"t":"We’re just going to create a banner using the second option in this guide, hit Enter to select. Enter the name of the project or just hit enter to use the default, which is the folder name.","s":"Step 2","u":"/display-advertising-docs/docs/getting-started/creating-a-new-project","h":"#step-2","p":70},{"i":77,"t":"Select the first unit you would like the generator to create. Use the arrow keys to navigate and hit Enter when ready. Creating banner? Please select a set for your unit: (Press to select, to toggle all, to invert selection, and to proceed) ◯ 160x600 ◯ 300x50❯◉ 300x250 ◯ 300x600 ◯ 320x50 ◯ 320x240 ◯ 320x480(Move up and down to reveal more choices) Enter the directory where you wish the source files to be placed. Just hit enter to use the default, which is something like ./src/{size}x{width} Select the type of banner: ? Please select a type you want: (Use arrow keys)❯ plain doubleclick flashtalking Then you will have to answer which units you want to have their own html. You will need to answer the same with the CSS and the JS: ? Please select a set for your unit: 300x250? Please select a type you want: plain? Where do you want to put it? ./src/plain/? Please select display unit with separate html: 300x250? Please select display unit with separate javascript: 300x250? Please select display unit with separate css: (Press to select, to toggle all, to invert selection, and to proceed)❯◉ 300x250","s":"Step 3","u":"/display-advertising-docs/docs/getting-started/creating-a-new-project","h":"#step-3","p":70},{"i":79,"t":"The generator will generate the basic template files and install the according node modules as well. This process will take a minute. When it’s done, you’ll end up with a directory looking something like this: Filename Description node_modules all the packages / libraries your project src/300x250/[.richmediarc] The configuration file for the richmedia-temple-server, This file is used so that the richmedia-temple-server knows what directories are richmedia units. src/shared/script/main.js Javascript File this is referenced by the .richmediarc file. src/shared/script/Animation.js The animation javascript code. src/shared/script/Banner.js The banner javascript code. src/shared/css/style.css Main CSS file, this file is referenced by the .richmediarc file. src/shared/index.hbs Main HTML (with handlebars) file, this file is referenced by the .richmediarc file. .editorconfig configuration file for you editor. So everyone atleasts uses the same basic settings. .gitignore configuration file used by git so it knows which files to ignore. .prettierrc A configuration file for prettier printer [package.json] A configuration file for NPM / YARN, one of the most important files in your project.","s":"Step 4","u":"/display-advertising-docs/docs/getting-started/creating-a-new-project","h":"#step-4","p":70},{"i":81,"t":"Getting started Upload a preview","s":"Upload a preview","u":"/display-advertising-docs/docs/getting-started/upload-a-preview","h":"","p":80},{"i":83,"t":"Uploading your banners to a preview can be done in a number of ways. The easiest method is to use our tool called “display-upload”, which you can start by running the following command: npm run preview If it’s the first time you run this command, you’ll see something like this: Welcome to the Display.Monks Upload Tool v1.6.2? No .uploadrc as added to the .gitignore, should i add it? (Y/n) Press Y. You’ll see the following options ? Where do you want to upload? (Use arrow keys)> Mediamonks Preview Adform Flashtalking Google DoubleClick Studio SFTP (alpha)","s":"How to use","u":"/display-advertising-docs/docs/getting-started/upload-a-preview","h":"#how-to-use","p":80},{"i":85,"t":"This will upload the entire build folder to a S3 bucket. When you select this, you’ll have to enter a few things: ? What directory you want to upload? Just enter build here by default. ? Please fill in the name for the S3 Bucket:? Please fill in the accessKeyId for the S3 Bucket:? Please fill in the secretAccessKey for the S3 Bucket: These values you can find in the pinned messages of our ‘wfh-aas-dev’ Slack channel. note If you are a Windows user, you can also store these credentials in your Environment Variables. Add the variables preview_accessKeyId, preview_accessKeySecret and preview_s3bucket with the respective values to the user variables. The tool will automatically generate a unique hash value as the directory name of the preview. Just press enter or add your own value and then press enter. ? outputDir: (3334d7e2-3d58-4c84-aec7-4b6d4f50c7f0/) important Keep in mind that this unique hash has been created in order always create a unique url, to change this to a common url like test/ or client/ is therefore a bad practise. Better use the hash in combination with your own project, like 3334d7e2-3d58-4c84-aec7-4b6d4f50c7f0/client/project/ads/v1/ It will then upload the contents of the ./build/ directory and show you a link to the preview, which should look something like this: http://richmedia-previews-s3bucket-khpmpnjb2dya.s3.amazonaws.com/3334d7e2-3d58-4c84-aec7-4b6d4f50c7f0/index.html","s":"MediaMonks Preview","u":"/display-advertising-docs/docs/getting-started/upload-a-preview","h":"#mediamonks-preview","p":80},{"i":87,"t":"These parameters might be useful if you want to create multiple previews, for each different version of an ad for example. There is a parameter outputDir available that you can run along with the build command. Property Description --type type of preview, possible values mm-preview, adform, flashtalking, doubleclick, sftp --inputDir Relative input directory, shorthand is -i. By default ./build, but you can change it to for example ./build/version1/ --outputDir Relative online url output directory, shorthand is -o. by default a unique hash/, but you can change it to for example 3334d7e2-3d58-4c84-aec7-4b6d4f50c7f0/version1/ to make sub pages inside your hash Examples​ Via the Commandline​ Use the preview command npm run preview -- --type mm-preview --inputDir ./build/version1/ --outputDir 1f08c1d9-b4f1-4a47-831b-409cf070b151/version1/ or the shorthand version: npm run preview -- -t mm-preview -i ./build/version1/ -o 1f08c1d9-b4f1-4a47-831b-409cf070b151/version1/ In your package.json​ Use the dds command \"preview:version1\": \"display-upload -t mm-preview -i ./build/version1/ -o 1f08c1d9-b4f1-4a47-831b-409cf070b151/version1/ Advanced combinations​ Example with a glob for automizing purposes: \"build-preview:version1\": \"dds --mode production -o ./build/version1/ --choices eyJsb2NhdGlvbiI6WyJhbGwiXSwiZW1wdHlCdWlsZERpciI6dHJ1ZX0= && display-upload -t mm-preview -i ./build/version1 -o 1f08c1d9-b4f1-4a47-831b-409cf070b151/version1/\" Or use combinations of the different scripts, here in doall:v1, build:v1 and upload:v1 are combined to one new script \"build:v1\": \"dds --mode production -o build/v1\",\"upload:v1\": \"display-upload -t mm-preview -i build/v1 -o 12528e62-6871-47de-abd1-6144e476bc73/v1/\",\"doall:v1\": \"npm run build:v1 && npm run upload:v1\",","s":"Preview parameters","u":"/display-advertising-docs/docs/getting-started/upload-a-preview","h":"#preview-parameters","p":80},{"i":89,"t":"Getting started Generate a build","s":"Generate a build","u":"/display-advertising-docs/docs/getting-started/generate-a-build","h":"","p":88},{"i":91,"t":"This parameter might come in handy if you want to create multiple packages (versions) of zips, or if you want to build ads to separate folders. There is a parameter outputDir available that you can run along with the build command. Property Description --outputDir Relative output directory, shorthand is -o. By default ./build, but you can change it to for example ./build/version1/ --skipBuild Boolean, if it exists, skip compiling ads phase. The --skipBuild variable is useful when you for example already have created ads from Animate CC or Google Web Designer available and you only want to create a preview page around that in order to preview them around. --skipPreview Boolean, if it exists, skip preview building phase. The --skipBuild variable is useful when you for example first want to build your files, create backup images/video via the ads recorder and then want to create a preview page from all of that together. Examples​ Via the Commandline​ Use the build command creating a custom output dir and skipping building the ads (so only adding the preview page files) npm run build -- --outputDir ./build/version1/ --skipBuild or the shorthand version: npm run build -- -o ./build/version1/ --skipBuild In your package.json​ Use the dds command creating a custom output dir and skipping building the preview page (so only build the ads) \"build:version1\": \"dds --mode production -o ./build/version1/\" --skipPreview Advanced combinations​ Example with a glob and a preview command, for automizing purposes: \"build-preview:version1\": \"dds --mode production -o ./build/version1/ --choices eyJsb2NhdGlvbiI6WyJhbGwiXSwiZW1wdHlCdWlsZERpciI6dHJ1ZX0= && display-upload -t mm-preview -i ./build/version1 -o 1f08c1d9-b4f1-4a47-831b-409cf070b151/version1/\" Or use combinations of the different scripts, here in doall:v1, build:v1 and upload:v1 are combined to one new script \"build:v1\": \"dds --mode production -o build/v1\",\"upload:v1\": \"display-upload -t mm-preview -i build/v1 -o 12528e62-6871-47de-abd1-6144e476bc73/v1/\",\"doall:v1\": \"npm run build:v1 && npm run upload:v1\", Mediamonks Preview Page​ The mm-preview page is our most common used and custom homemade webpage for displaying ads. It is build in React and has a couple of nice features. data.json​ The page loads in a data file with all information that is needed, such as paths to html/jpg/mp4 and widths and heights of each unit. When you recorded things like gifs, backup images, it will take this in the data.json file as well and store it for eventually prev maxFileSize​ You can set a maxFileSizeparameter in the .richmediarc or .sharedrc config file. It will check the filesize in the preview and give a green or red label comparing it to the given filesize. \"settings\": { \"maxFileSize\": \"100\"}","s":"Build parameters","u":"/display-advertising-docs/docs/getting-started/generate-a-build","h":"#build-parameters","p":88},{"i":93,"t":"Getting started Installation","s":"Installation","u":"/display-advertising-docs/docs/getting-started/installation","h":"","p":92},{"i":95,"t":"NodeJS Terminal / Windows Powershell Code editor (VSCode, Webstorm) The display generator is built with the help of Yeoman which is web scaffolding tool for modern web tools. The first thing that we will need to do is install yeoman globally, so it's available in your terminal / command prompt as yo. Open your terminal run the following commands:","s":"Prerequisites","u":"/display-advertising-docs/docs/getting-started/installation","h":"#prerequisites","p":92},{"i":97,"t":"First install Yeoman globally npm install -g yo","s":"Step 1","u":"/display-advertising-docs/docs/getting-started/installation","h":"#step-1","p":92},{"i":99,"t":"Install the Media.Monks display-boilerplate generator globally npm install -g generator-display-boilerplate Verify Yeoman is working globally by running the following command yo --version tip If you are having trouble with your user account not having admin rights with installing the generator-display-boilerplate and are working on a mac, try to use \"sudo\" in front of the commands. By using \"sudo,\" the user is granted temporary administrative access, allowing them to perform tasks that require root or administrator permissions. So for example: sudo npm install -g generator-display-boilerplate","s":"Step 2","u":"/display-advertising-docs/docs/getting-started/installation","h":"#step-2","p":92},{"i":101,"t":"Getting started Start the server","s":"Start the server","u":"/display-advertising-docs/docs/getting-started/start-the-server","h":"","p":100},{"i":103,"t":"To explain this as fast as possible, the DDS (display dev server) is a build and development server to develop and build display units as fast as possible. It does this by setting up a Webpack environment where ever it finds a [.richmediarc] file. Why? Because its faster to just use the same webpack and webpack.config for every display advertising unit, instead of creating one for every single unit.","s":"What is the Display Development Server?","u":"/display-advertising-docs/docs/getting-started/start-the-server","h":"#what-is-the-display-development-server","p":100},{"i":105,"t":"To start the dev server, type the following command in your terminal: npm run dev “Dev” is actually a script which is found in [package.json], which in turn runs the command rds-dev. After you execute this script, it will start searching for .richmediarc files in all the directories and subdirectories of your project. You’ll see something like this: i Searching for configs✔ Found 4 config(s)✔ Taking a look if it has Spreadsheets? Please select config(s) build: (Press to select, to toggle all, to invert selection)>( ) all ( ) ./src/300x250/.richmediarc ( ) ./src/300x600/.richmediarc ( ) ./src/728x90/.richmediarc ( ) ./src/970x250/.richmediarc Here, you can select which units you wish to preview. Navigate with arrow keys and select (it’s possible to select multiple values) with spacebar, then press enter to confirm your selection. Do you want a browser to open to your dev location? (Y/N) You can select to open a new browser window or not. Save this as a separate part command in package.json (Y/N) Use this option to save your selection as a separate command. If you select Y, you’ll see something like this: Please provide a name for your command. You will type something like npm run dev:__NAME__ No special chars, spaces, dashes just a single word. You’ll have to give it a unique name, for example “selection”. Now you will be able to run a dev server with the same selection simply by running npm run dev:selection It will now compile the banners you selected and start a local server on port 8000. You can see the preview at http://localhost:8000. note If port 8000 is busy, it will automatically use the next available port, 8001, 8002, etc. info Important You don’t have to restart the server if you make any changes to your banner’s code. It will automatically recompile your units when it detects changes in the source code.. Make sure everything works by running: npm run dev This will start the server. You’ll see something like this. Press N Your primary browser will launch, opening http://localhost:8000/ In your terminal, you’ll be able to see the output of webpack, compiling the source code. In your browser, the preview environment will load along with a preview of the compiled version of the banner you just created. The banner should display something like this. If there are no javascript errors and everything works fine, that’s it!","s":"Running the DDS","u":"/display-advertising-docs/docs/getting-started/start-the-server","h":"#running-the-dds","p":100},{"i":107,"t":"Guides Automatically optimize zips","s":"Automatically optimize zips","u":"/display-advertising-docs/docs/guides/auto-optimizing-ads","h":"","p":106},{"i":109,"t":"package.json settings\": { \"maxFileSize\": 150, \"optimizeToFileSize\": true, \"lowestImageQuality\": 20} The dev-server will then try to optimize your zip, lowering the quality of the jpg/png files until it is below the maxFileSize. If you use this, set image optimization to false in the optimization object in the settings of the .richmediarc, otherwise webpack will optimize the image twice (will fix this in a patch soon) The lowest quality it will use is 60. Going lower could potentially cause artifacts. However, if you add \"lowestImageQuality\" you can overwrite this value and lower the quality. note You may wonder why not just \"optimizeToFileSize\": 150? This is because maxFileSize is also used by the preview, and sometimes you don’t want to use optimizeToFileSize.","s":"Configuration","u":"/display-advertising-docs/docs/guides/auto-optimizing-ads","h":"#configuration","p":106},{"i":111,"t":"Guides Create banners with parameters","s":"Create banners with parameters","u":"/display-advertising-docs/docs/guides/commands","h":"","p":110},{"i":113,"t":"Guides Dynamic Import","s":"Dynamic Import","u":"/display-advertising-docs/docs/guides/dynamic-import","h":"","p":112},{"i":115,"t":"Guides Clean output template","s":"Clean output template","u":"/display-advertising-docs/docs/guides/clean-output-template","h":"","p":114},{"i":117,"t":"Sometimes, other agencies or teams in MM will request the built zips of ads built with our framework, with the intention of adjusting after build without the use of the framework. This could be for creating extra versions or translations.","s":"Purpose","u":"/display-advertising-docs/docs/guides/clean-output-template","h":"#purpose","p":114},{"i":119,"t":"You can find the clean output in a separate repo: https://github.com/mirkovw/display-advertising-cleanoutput-template caution This setup is still in experimental phase so do use it with caution. It is always recommendable to use the full framework to quickly make amends and new resizes. Using the export will always slow down the process and create less overview and less reusable code.","s":"Repo","u":"/display-advertising-docs/docs/guides/clean-output-template","h":"#repo","p":114},{"i":121,"t":"Guides Data binding","s":"Data binding","u":"/display-advertising-docs/docs/guides/dataBind","h":"","p":120},{"i":123,"t":"Guides Dynamic Creative Optimization","s":"Dynamic Creative Optimization","u":"/display-advertising-docs/docs/guides/dco","h":"","p":122},{"i":125,"t":"The Generate Code contains some important information, such as the Profile Id and the general structure of the data feed you'll be using. The Generate Code is the tool you need to develop your creative unit in a dynamic way. Data team should be responsible for setting up the Studio environment and handing you the Generate Code. You must replace the default code for the Studio's Generated Code in the getDynamicData() function in the getDynamicData.js file of your project. export default function getDynamicData() { /***************************************************************************************************************************** * Paste DC Dynamic Code HERE * *****************************************************************************************************************************/ // Dynamic Content variables and sample values Enabler.setProfileId(00000000); var devDynamicContent = {}; devDynamicContent.some_project_name = [{}]; devDynamicContent.some_project_name[0]._id = 0; devDynamicContent.some_project_name[0].Unique_ID = 0; devDynamicContent.some_project_name[0].Reporting_Label = \"dummy_info\"; devDynamicContent.some_project_name[0].Headline_Copy_Reporting = \"dummy_info\"; devDynamicContent.some_project_name[0].Image_Series_Reporting = \"dummy_info\"; devDynamicContent.some_project_name[0].Image_Reporting = \"dummy_info\"; devDynamicContent.some_project_name[0].CTA_Copy = \"dummy_info\"; devDynamicContent.some_project_name[0].CTA_Button_Color = \"dummy_info\"; devDynamicContent.some_project_name[0].Background_Color = \"dummy_info\"; devDynamicContent.some_project_name[0].Footer_Color_Reporting = \"dummy_info\"; devDynamicContent.some_project_name[0].Headline_Copy = \"dummy_info\"; devDynamicContent.some_project_name[0].Image = {}; devDynamicContent.some_project_name[0].Image.Type = \"file\"; devDynamicContent.some_project_name[0].Image.Url = \"dummy_info\"; devDynamicContent.some_project_name[0].Exit_URL = {}; devDynamicContent.some_project_name[0].Exit_URL.Url = \"dummy_info\"; devDynamicContent.some_project_name[0].Active = true; Enabler.setDevDynamicContent(devDynamicContent); /***************************************************************************************************************************** * END Paste DC Dynamic Code * *****************************************************************************************************************************/ let feedName = Object.keys(devDynamicContent)[0]; return window.dynamicContent[feedName][0];} In your Banner.js file you will be setting up your feed variable with the getDynamicData() function. async init() { ... this.feed = getDynamicData(); ...} You can now access the dynamic information of the feed by calling its attributes. This way you are connecting these values to the dynamic data feed. The values will change accordingly once the unit is uploaded to the Studio environment. async init() { ... // Select elements const title = document.body.querySelector('#title'); // Asign values title.innerHTML = this.feed.Headline_Copy; ...} info For further information visit: https://support.google.com/richmedia/answer/3526354?hl=en#zippy=%2Csample-setup-code-from-step-generate-code important Note that it is possible to receive a multiple-feed Generate Code for your project. Please check the Tips & tricks section for further information.","s":"Feed configuration","u":"/display-advertising-docs/docs/guides/dco","h":"#feed-configuration","p":122},{"i":127,"t":"If you receive a multiple-feed Generate Code you may find useful to return the feed as a simplified key-value pair of the various feeds that you can then access in the Banner.js from the \"feed\" variable. This way you can access to every feed separately as needed. Here is an example: export default function getDynamicData() { /***************************************************************************************************************************** * Paste DC Dynamic Code HERE * *****************************************************************************************************************************/ // Dynamic Content variables and sample values Enabler.setProfileId(00000000); var devDynamicContent = {}; devDynamicContent.Campaign_Feed = [{}]; devDynamicContent.Campaign_Feed[0]._id = 0; devDynamicContent.Campaign_Feed[0].CTA_Copy = \"Get started\"; devDynamicContent.Campaign_Feed[0].Headline_Copy = \"One-click ecommerce integrations_Connect your online store in no time_Email + SMS just got easier\"; devDynamicContent.Selection_Feed = [{}]; devDynamicContent.Selection_Feed[0]._id = 0; devDynamicContent.Selection_Feed[0].Image_Series = \"CeramistStudio\"; devDynamicContent.Selection_Feed[0].Image_Reporting = \"CeramistStudioPotteryWheel_CeramistSmilingStudio_WooCommerce\"; devDynamicContent.Destination_Feed = [{}]; devDynamicContent.Destination_Feed[0]._id = 0; devDynamicContent.Destination_Feed[0].CTA_Button_Color = \"Charcoal\"; devDynamicContent.Destination_Feed[0].Background_Color = \"Cotton\"; Enabler.setDevDynamicContent(devDynamicContent); /***************************************************************************************************************************** * END Paste DC Dynamic Code * *****************************************************************************************************************************/ let feedNames = Object.keys(devDynamicContent); const multipleFeed = Object.fromEntries(feedNames.map( (fName) => [fName, window.dynamicContent[fName][0]]) ); return multipleFeed;} And in your Banner.js: async init() { ... this.feed = getDynamicData(); let ctaCopy = this.feed.Campaign_Feed.CTA_Copy; // 'Get started' ...}","s":"Tips & tricks","u":"/display-advertising-docs/docs/guides/dco","h":"#tips--tricks","p":122},{"i":129,"t":"The Enabler is a library required for all DCO creatives in Studio. It provides a singleton object in the global namespace called Enabler. You can call methods on it. The Enabler ensures that your creative includes standard tracking functionality for metrics. In the index.hbs file of your project you will find the script tag that links to the Enabler. You must also set the Profile Id number here. In the Banner.js file, you will find a util that is used to wait for the Enabler to be ready before initializing the banner. import untilEnablerIsInitialized from '@mediamonks/temple/doubleclick/untilEnablerIsInitialized';... async init() { await untilEnablerIsInitialized(); ... } ... info The Profile Id number is the code for linking your creative with the Studio profile. For further information visit https://support.google.com/richmedia/answer/2672553?hl=en","s":"Enabler","u":"/display-advertising-docs/docs/guides/dco","h":"#enabler","p":122},{"i":131,"t":"If the exit URL is assigned through the feed, you can use something like this in your Banner.js file: async init() { ... this.mainExit = this.feed.exitUrl.Url; ... } The default method used in our framework is an Enabler method. The first parameter is an ID that can be used to override the exit later if needed and the second parameter is the URL you've assigned. handleClick = () => { Enabler.exitOverride('Default Exit', this.mainExit); }; important Producers may ask you to use a different method to cover some specific needs. You can find more information about Enabler methods here: https://www.google.com/doubleclick/studio/docs/sdk/html5/en/class_studio_Enabler.html#api info For further information on DCO exits visit https://support.google.com/richmedia/answer/2664807?hl=en","s":"ExitUrl","u":"/display-advertising-docs/docs/guides/dco","h":"#exiturl","p":122},{"i":133,"t":"Guides Font Subsetting","s":"Font Subsetting","u":"/display-advertising-docs/docs/guides/font-subsetting","h":"","p":132},{"i":135,"t":"Guides Extends Animation","s":"Extends Animation","u":"/display-advertising-docs/docs/guides/extends-animation","h":"","p":134},{"i":137,"t":"Guides Spreadsheets","s":"Spreadsheets","u":"/display-advertising-docs/docs/guides/google-spreadsheets-feed","h":"","p":136},{"i":139,"t":"By using a spreadsheet, you avoid having to generate multiple .richmediarcs for multiple variations. It is possible to generate several units with a single row. So you have a richmedia unit and you need generate 19 different versions with different copy for different sizes and languages. This is now possible with contentSource by adding contentSource to your richmediarc you can link to a spreadsheet and use that as a content source. info Important: if you create a new sheet for a project, please share with the rest of the team for future modifications.","s":"Introduction","u":"/display-advertising-docs/docs/guides/google-spreadsheets-feed","h":"#introduction","p":136},{"i":141,"t":"You can use the basic basic spreadsheet template. As you can see it has 6 columns with the first row defining the name of the column. These rows with their content will be used as the source for the content property of your richmediarc. /src/shared/.sharedrc { \"settings\": { \"bundleName\": \"${content.size}_${settings.version}_${settings.language}\", \"entry\":{ \"js\":\"./script/main.js\", \"html\":\"index.hbs\" }, \"contentSource\":{ \"url\":\"https://docs.google.com/spreadsheets/d/1BImA3lgTJsbVl56GQTFT-b1dx4FIoeQFBe9WLp0wWxc/edit#gid=0\", \"apiKey\": \"API_KEY\", \"tabName\": \"main\", \"filter\": { \"version\": \"beauty\" } } }, \"content\":{ \"title\":\"default title\", \"copy0\":\"default copy\", \"cta\":\"default cta\" }} You just need to replace API_KEY placeholder with your own generated key. You can generate a key here https://developers.google.com/sheets/api/guides/authorizing#APIKey in contentSource you also see a property called tabName and filter. tabName will let you define what tab you want to use of your spreadsheet. filter will let you filter the only values you want. so in this example it will only select rows with the value \"beauty\" in the version column.","s":"Configuration","u":"/display-advertising-docs/docs/guides/google-spreadsheets-feed","h":"#configuration","p":136},{"i":143,"t":"Another alternative for spreadsheet development is to use it similar to DCO, where sizes are added as new columns. Check the advanced spreadsheet example. /src/shared/.sharedrc ...{ \"contentSource\":{ \"url\":\"https://docs.google.com/spreadsheets/d/1rqF1F7JhaLYu9_-MPmhzztH9i5OE5XURkWpwtSv1quY/edit?usp=sharing\", \"apiKey\": \"API_KEY\", \"tabName\": \"default\", \"idField\": \"keyField\", \"filter\": { \"master\": \"${content.master}\" } }}... /src/300x250/.richmediarc_B1_NA_SMB { \"parent\": \"../shared/.sharedrc\", \"settings\": { \"size\": { \"width\": 300, \"height\": 250 } }, \"content\": { \"customCss\": \"./css/index.css\", \"master\": \"B1_NA_SMB\" }}","s":"Advanced example","u":"/display-advertising-docs/docs/guides/google-spreadsheets-feed","h":"#advanced-example","p":136},{"i":145,"t":"Guides Custom globs for npm dev/build","s":"Custom globs for npm dev/build","u":"/display-advertising-docs/docs/guides/globbing-dev-build","h":"","p":144},{"i":147,"t":"Guides Gsap","s":"Gsap","u":"/display-advertising-docs/docs/guides/gsap","h":"","p":146},{"i":149,"t":"Sometimes it is necessary to know when the animation starts and when it ends. It is possible to know that using the following callbacks: /src/shared/script/Banner.js setAnimation(animation){ this.animation = animation; //creates new timeline and pauses it this.animation.getTimeline().paused(true); this.animation.getTimeline().eventCallback('onComplete', this.onAnimationComplete); this.animation.getTimeline().eventCallback('onStart', this.onAnimationStart);}/*** A function that should be called when the animation has completed.*/onAnimationComplete = () => { console.log('onComplete');};/*** A function that should be called when the animation begins (when its time changes from 0 * to some other value which can happen more than once if the tween is restarted multiple times). */onAnimationStart = () => { console.log('onStart');};","s":"Using events","u":"/display-advertising-docs/docs/guides/gsap","h":"#using-events","p":146},{"i":151,"t":"You can enable the debug mode with GSDevTools, just add the gsdevtools=true parameter in the url. Example: http://localhost:8000/?gsdevtools=true Simultaneously play/pausing your animations by pressing the ‘Spacebar’. Use the newest Display Boilerplate (6.4.9) in order for it to work. caution Only use it for QA and testing purposes, not meant to be for sharing with the client!","s":"Enable GSDevTools","u":"/display-advertising-docs/docs/guides/gsap","h":"#enable-gsdevtools","p":146},{"i":153,"t":"gsap.utils provides access to some surprisingly helpful utility functions. Note that many of them can optionally return FUNCTIONS so that they can be plugged directly into tweens, leveraging GSAP's function-based capabilities. In that case, they'll get called once for each target rather than just using the same end value for them all. To view the full list, please check the official docs.","s":"Using utils","u":"/display-advertising-docs/docs/guides/gsap","h":"#using-utils","p":146},{"i":155,"t":"Guides Ads Recorder","s":"Ads Recorder","u":"/display-advertising-docs/docs/guides/recorder","h":"","p":154},{"i":157,"t":"You must pre-build the ads (display-ads-recorder will ask you for the directory where it will search for the ads), see @mediamonks/display-dev-server. Your ad's index.html must include a tag. otherwise, display-ads-recorder will not recognize it as a ad. The ad must include the function that dispatches and listens to critical events for display-ads-recorder to work. See example here: http://www.github.com/mirkovw/display-record-template.","s":"Requirements","u":"/display-advertising-docs/docs/guides/recorder","h":"#requirements","p":154},{"i":159,"t":"npm i @mediamonks/display-ads-recorder","s":"Installation","u":"/display-advertising-docs/docs/guides/recorder","h":"#installation","p":154},{"i":161,"t":"package.json \"scripts\": { \"dev\": \"dds --mode development\", \"build\": \"dds --mode production\", \"recorder\": \"display-ads-recorder\", \"preview\": \"display-upload\" }, /src/shared/script/Banner.js import enableAdsRecorder from '@mediamonks/display-temple/util/enableRecorder';start(){ enableAdsRecorder(this.animation.getTimeline(), this.config); this.animation.play();}","s":"Configuration","u":"/display-advertising-docs/docs/guides/recorder","h":"#configuration","p":154},{"i":163,"t":"npm run recorder After running the script, you will need to answer a few questions before generating the files: Welcome to the Display.Monks Record Tool v3.1.0make sure you import and include the enableAdsRecorder(timeline, config) function from display templeso the ad can dispatch the right events to the recorder toolsee example here: http://www.github.com/mirkovw/display-record-template? Target Dir? (./build) ? Please select ad(s) to record: (Press to select, to toggle all, to invert selection, and to proceed)>( ) all ( ) ./build/version1_cashback_v2_image_160x600/index.html ( ) ./build/version1_cashback_v2_image_300x250/index.html ( ) ./build/version1_cashback_v2_image_300x600/index.html ( ) ./build/version1_cashback_v2_image_320x50/index.html ( ) ./build/version1_cashback_v2_image_728x90/index.html ( ) ./build/version1_cashback_v2_text_160x600/index.html(Move up and down to reveal more choices) ? Please select output(s) (Press to select, to toggle all, to invert selection, and to proceed)>( ) mp4 ( ) gif (animated) ( ) jpg (last frame) NEW* If you select the option jpg (last frame) it will also ask you for the max KB filesize. important Ad Recorder records only one GSAP timeline, therefore, your animation needs to exist out of one main GSAP timeline that includes all the animations. Recording video from an ad is not supported. :::","s":"Usage","u":"/display-advertising-docs/docs/guides/recorder","h":"#usage","p":154},{"i":165,"t":"Guides Multiple Timelines","s":"Multiple Timelines","u":"/display-advertising-docs/docs/guides/multiple-timelines","h":"","p":164},{"i":167,"t":"Guides Svg","s":"Svg","u":"/display-advertising-docs/docs/guides/svg","h":"","p":166},{"i":169,"t":"Now when adding inline to a img tag and the image has the extension .svg the svg will be inlined. /src/300x250/index.hbs
becomes: /src/300x250/index.hbs
logo-on-white-bg
You can also do this with handlebars same result: /src/300x250/index.hbs
","s":"Using the default inline","u":"/display-advertising-docs/docs/guides/svg","h":"#using-the-default-inline","p":166},{"i":171,"t":"Guides Handlebars","s":"Handlebars","u":"/display-advertising-docs/docs/guides/using-handlebars","h":"","p":170},{"i":173,"t":"A templating language basically is a language which allows defining placeholders that should later on be replaced for the purpose of implementing designs. Handlebars is a simple templating language. It uses a template and an input object to generate HTML or other text formats. Handlebars templates look like regular text with embedded Handlebars expressions. You can check all the documentation about Handlebars on the official website. Below you can see some examples using handlebars with the framework.","s":"What is templating language?","u":"/display-advertising-docs/docs/guides/using-handlebars","h":"#what-is-templating-language","p":170},{"i":175,"t":"Another common use-case for block helpers is to evaluate conditional statements. As with the iterators, Handlebars' built-in if and unless control structures are implemented as regular Handlebars helpers. /src/shared/index.hbs
{{#if settings.hasCaptain}}
{{else}} \"captain\" {{/if}}
","s":"Conditionals","u":"/display-advertising-docs/docs/guides/using-handlebars","h":"#conditionals","p":170},{"i":177,"t":"A common use-case for block helpers is using them to define custom iterators. In fact, all Handlebars built-in helpers are defined as regular Handlebars block helpers. Let's take a look at how the built-in each helper works. /src/shared/index.hbs
{{#each content.images}} {{/each}}
/src/300x250/.richmediarc \"content\": { \"images\": { \"captain1\": \"./img/captain1.png\", \"captainStatic\": \"./img/captainStatic.png\", \"copy1\": \"./img/copy1.png\", \"copyBig1\": \"./img/copyBig1.png\", \"copyBig2\": \"./img/copyBig2.png\", \"copy2\": \"./img/copy2.png\", \"cards1\": \"./img/cards1.png\", \"cards2\": \"./img/cards2.png\", \"cards3\": \"./img/cards3.png\", \"copy3\": \"./img/copy3.png\", \"cardEndframe\": \"./img/cardEndframe.png\", \"logo\": \"./img/logo.png\", \"cta\": \"./img/cta.png\" } }","s":"Iterators","u":"/display-advertising-docs/docs/guides/using-handlebars","h":"#iterators","p":170},{"i":179,"t":"Handlebars allows for template reuse through partials. Partials are normal Handlebars templates that may be called directly by other templates. Below you can see some examples using partials with the framework:","s":"Partials","u":"/display-advertising-docs/docs/guides/using-handlebars","h":"#partials","p":170},{"i":181,"t":"/src/shared/components/menuItems.hbs
  • One
  • Two
  • Three
/src/shared/index.hbs
{{> components/menuItems }}
","s":"Basic partials","u":"/display-advertising-docs/docs/guides/using-handlebars","h":"#basic-partials","p":170},{"i":183,"t":"/src/shared/myExamplePartial.hbs

width: {{settings.size.width}}

height: {{settings.size.height}}

/src/shared/index.hbs
{{> myExamplePartial settings }}
If you repeat a lot of html, a good practice would be to separate it into components.","s":"Partials with parameter","u":"/display-advertising-docs/docs/guides/using-handlebars","h":"#partials-with-parameter","p":170},{"i":185,"t":"info To use these helpers you need display-dev-server v10.1.4 or more.","s":"Custom Helpers","u":"/display-advertising-docs/docs/guides/using-handlebars","h":"#custom-helpers","p":170},{"i":187,"t":"It is necessary to pass the parameter settings: /src/shared/index.hbs
{{getSize settings}} // output: 300x250
","s":"getSize","u":"/display-advertising-docs/docs/guides/using-handlebars","h":"#getsize","p":170},{"i":189,"t":"Make validations very easy, using operators ('==', '===', '!=', '!==', '<', '>', '<=', 'typeof'): /src/shared/index.hbs
{{#compare content.master \"MASTER1\"}} some_nice_layout {{/compare}} {{#compare content.frames \">\" 5}} There are more than 5 frames {{/compare}}
","s":"compare","u":"/display-advertising-docs/docs/guides/using-handlebars","h":"#compare","p":170},{"i":191,"t":"Similar to template strings. The number change now many brackets do you want to output. /src/shared/index.hbs
{{#brackets 2}}content.copy1_{{getSize settings}}{{/brackets} // output: {{content.copy1_300x250}}
","s":"brackets","u":"/display-advertising-docs/docs/guides/using-handlebars","h":"#brackets","p":170},{"i":193,"t":"Checks the extension of a variable or file. In this example, if the var contains an image extension, it shows an image, otherwise it shows the variable as a text string: /src/shared/index.hbs
{{#checkExtension this.subTitle '.png|.jpg|.jpeg'}} \"\" {{else}}
{{{this.title}}}
{{/checkExtension}}
","s":"checkExtension","u":"/display-advertising-docs/docs/guides/using-handlebars","h":"#checkextension","p":170},{"i":195,"t":"Guides Timeline Scrubber","s":"Timeline Scrubber","u":"/display-advertising-docs/docs/guides/timeline-scrubber","h":"","p":194},{"i":197,"t":"To use the timelineScrubber you need to import it in for example Banner.js and initialize it after creating your master GSAP timeline: Banner.js import timelineScrubber from '@mediamonks/display-temple/util/timelineScrubber';setAnimation(animation){ this.animation = animation; //creates new timeline and pauses it this.animation.getTimeline().paused(true); // this.animation.getTimeline().eventCallback('onComplete', this.handleAnimationComplete); if (DEVELOPMENT) { timelineScrubber(this.animation.getTimeline()); }}","s":"Configuration","u":"/display-advertising-docs/docs/guides/timeline-scrubber","h":"#configuration","p":194},{"i":199,"t":"Just as with GSDevTools, if you have your scrubber element \"in focus\" (you can do this by clicking on the timelineScrubber for example), you can use shortcuts to play pause and hide/show the Timeline Scrubber. Hide/show timeline scrubber element​ You can Hide or show the timeline by pressing the letter H on your keyboard. Play/pause timeline​ Toggle play or pause by pressing the Spacebar.","s":"Hotkeys","u":"/display-advertising-docs/docs/guides/timeline-scrubber","h":"#hotkeys","p":194},{"i":201,"t":"Lifecycle of a banner","s":"Lifecycle of a banner","u":"/display-advertising-docs/docs/lifecycle","h":"","p":200},{"i":203,"t":"Configuration files","s":"Configuration files","u":"/display-advertising-docs/docs/richmediarc","h":"","p":202},{"i":205,"t":"The dev preview server supports live reloading of the data. If you make updates to the .richmediarc, you will see the changes being applied in the browser.","s":"Live reload","u":"/display-advertising-docs/docs/richmediarc","h":"#live-reload","p":202},{"i":207,"t":"Our system supports inheritance of values, by providing a ‘parent’ file from which to inherit all the values defined in that file. The ‘child’ file can then overwrite only the needed values, thereby completely eliminating any overlap between the parent and child files. For example, you can have a .richmediarc_fr > inheriting .richmediarc and .richmediarc > inheriting .sharedrc. This method is very useful and scalable, should the need arise to add even more languages or versions. info Each creative requires at least one .richmediarc file. Also file paths defined in the .richmediarc are always relative to the .richmediarc itself. You can create/combine as much as config files as you like, to share data and minimize the amount of files and duplicate data.","s":"Inheritance","u":"/display-advertising-docs/docs/richmediarc","h":"#inheritance","p":202},{"i":209,"t":"The .richmediarc config file contains all size (i.e. 300x250) and version (i.e ‘french’) specific data. { \"parent\": \"../shared/.sharedrc\", // optional: relative path from this config to the parent config\" \"settings\": { \"bundleName\": \"${content.type}_${settings.size.width}x${settings.size.height}\", \"entry\": { \"js\": \"./script/main.js\", // required: points to the starting js file. \"html\": \"./index.hbs\" // required: points to the main html or handlebars file }, \"size\": { \"width\": 300, // required: width of richmedia unit \"height\": 600 // required: height of richmedia unit } }, \"content\": { // optional: can put anything in here. }}","s":".richmediarc","u":"/display-advertising-docs/docs/richmediarc","h":"#richmediarc","p":202},{"i":211,"t":"The .sharedrc contains the overall data, such as for example, defining the logo file that is used in all the creatives. { \"settings\": { \"browserSupport\": [\"> 1%\", \"not ie 11\"], // optional: remove 'not ie 11' from the list if you want to support it. \"optimizations\": { \"css\": false, // by default is enabled \"image\": false, // by default is enabled \"js\": false, // by default is enabled \"html\": false // by default is enabled }, \"useOriginalFileNames\": false, // optional: use original file names without unique ideas generated by webpack \"fonts\": [ // optional: defining a subset for a font* { ... } }, \"content\": { // optional: can put anything in here. This content will be shared throughout all creatives \"bgcolor\": \"#FF0000\", \"logo\": \"./img/logo.png\" // optional: will be picked up by webpack and png minified. }} tip *Check this page for more info on font-subsetting.","s":".sharedrc","u":"/display-advertising-docs/docs/richmediarc","h":"#sharedrc","p":202},{"i":213,"t":"Below are some guides on how you can use these values in your creative.","s":"Basic .richmediarc concepts","u":"/display-advertising-docs/docs/richmediarc","h":"#basic-richmediarc-concepts","p":202},{"i":215,"t":"In your index.html or index.hbs, you can retrieve .richmediarc values using the data-bind attribute on HTML elements. This is made possible by the dataBind function which is imported by ./js/Banner.js. For example: /src/300x250/.richmediarc \"content\": {... \"cta\": \"Click here!\"} /src/300x250/index.hbs
/src/300x250/.richmediarc \"content\": {... \"bgImage\": \"../shared/images/background_300x250.jpg\"...} /src/300x250/index.hbs ","s":"Using .richmediarc values in regular HTML","u":"/display-advertising-docs/docs/richmediarc","h":"#using-richmediarc-values-in-regular-html","p":202},{"i":217,"t":"If you have chosen handlebars as your html file you can use handlebars notation to access the richmediarc data. For more details see this page.","s":"Using .richmediarc values in Handlebars","u":"/display-advertising-docs/docs/richmediarc","h":"#using-richmediarc-values-in-handlebars","p":202},{"i":219,"t":"Everything you put in the .richmediarc is accessible in css. So the display-dev-server (webpack) will add all the data from the config to the css through css vars. How would you access them? Well like this. var(--{node}-{childNode}-{childNode}) For example: /src/300x250/.richmediarc \"content\": {... \"bgcolor\": \"#FFFFFF\"...} /src/300x250/css/style.css body { background-color: var(--content-bgcolor);} /src/300x250/.richmediarc \"settings\": { \"size\": { \"width\": 300, \"height\": 250 }} /src/300x250/css/style.css .banner { width: var(--settings-size-width)px; height: var(--settings-size-height)px;}","s":"Using .richmediarc values in CSS","u":"/display-advertising-docs/docs/richmediarc","h":"#using-richmediarc-values-in-css","p":202},{"i":221,"t":"The main javascript file (conveniently named ./js/main.js) imports the .richmediarc files as follows and passes this object into the Banner constructor. import Banner from \"./Banner\";import Animation from \"./Animation\";// config will contain the final .richmediarc content. So if a .richmediarc// inherits from a other .richmediarc it will also contain those files.import config from \"richmediaconfig\";const banner = new Banner(config);//first load fonts, load images etc in the init animationbanner.init().then( () => { //initializes animation and creates main timeline banner.setAnimation(new Animation(document.querySelector('.banner'), config)); //plays banner banner.start() }) Which also passes the config object to the Animation constructor. From there, you are able to retrieve pretty much every value from the .richmediarc. Example: /src/300x250/.richmediarc \"content\": {... \"intro\": false...} /src/300x250/js/Animation.js export default class Animation extends FrameAnimation { /** * * @param {HTMLDivElement} container * @param {null} config */ constructor(container, config) { super(); this.container = container; if (config.content.intro) { // something } else { // something else } }}","s":"Using .richmediarc values in javascript","u":"/display-advertising-docs/docs/richmediarc","h":"#using-richmediarc-values-in-javascript","p":202},{"i":223,"t":"If you have a lot of data to cover you can use a Google Spreadsheet in combination with the config files. For more details see this page.","s":"Feeds (with Google Spreadsheet)","u":"/display-advertising-docs/docs/richmediarc","h":"#feeds-with-google-spreadsheet","p":202},{"i":225,"t":"Guides Temple utils","s":"Temple utils","u":"/display-advertising-docs/docs/guides/using-utils","h":"","p":224},{"i":227,"t":"/** * Shows information about the device used. * * @type {{ * isMobile: boolean * isOS: boolean * isOS9up: boolean * isPad: boolean * isSafari: boolean * isFirefox: boolean * isChrome: boolean * isEdge: boolean * isOpera: boolean * }} */import Browser from \"@mediamonks/display-temple/util/Browser\";console.log(Browser.isChrome)","s":"browser","u":"/display-advertising-docs/docs/guides/using-utils","h":"#browser","p":224},{"i":229,"t":"/** * @param {Array} copyElements */import fitText from \"@mediamonks/display-temple/util/fitText\";const title = document.body.querySelector('.title');const ctaCopy = document.body.querySelector('.cta_copy');fitText([title, ctaCopy]); Import fitText from the display-temple/util library. Use fitText on the child element where you want to apply the font size scaling, to fit the parent container. And put the styling i.g. font size, width and height on the parent container .parent_container { position: absolute; top: 50%; left: 50%; width: 80%; height: 50%; font-family: OpenSans, sans-serif; transform: translate(-50%, -50%); font-size: 50px;} Here is an example on how it would look like in the dom:
Hello World
","s":"fitText","u":"/display-advertising-docs/docs/guides/using-utils","h":"#fittext","p":224},{"i":231,"t":"/** * Wait for a DOM element to load. * * @param {string} selector * @param {number} time * * @returns {Promise} */import isElementLoaded from \"@mediamonks/display-temple/util/isElementLoaded\";isElementLoaded('svg.logo') .then((elm) => elm);isElementLoaded('.containerHidden', 2000) .then((elm) => elm);","s":"isElementLoaded","u":"/display-advertising-docs/docs/guides/using-utils","h":"#iselementloaded","p":224},{"i":233,"t":"/** * Loads multiple files and output an array with the objects * * @param {Array} urls * @param {boolean} sequential * @param {function} loader * * @return {Promise} */import loadAll from \"@mediamonks/display-temple/util/loadAll\";loadAll(['./my_example_image.png', './my_example_image2.png', './my_example_image3.png'], true) .then(() => console.log('all loaded!')) .catch((error) => console.error(error));;loadAll(['./custom_image.png']) .then(() => console.log('all loaded!')) .catch((error) => console.error(error));","s":"loadAll","u":"/display-advertising-docs/docs/guides/using-utils","h":"#loadall","p":224},{"i":235,"t":"/** * Loads an image and returns the image element * * @param {string} src * * @return {Promise} */import loadImage from \"@mediamonks/display-temple/util/loadImage\";loadImage(['./background.png']) .then(() => console.log('image loaded')) .catch((error) => console.error(error));","s":"loadImage","u":"/display-advertising-docs/docs/guides/using-utils","h":"#loadimage","p":224},{"i":237,"t":"/** * Loads multiple files and output an array with the objects * * @param {Array} urls * @param {boolean} sequential * * @return {Promise} */import loadScriptAll from \"@mediamonks/display-temple/util/loadScriptAll\";loadScriptAll(['./mycustomScript.js', './mycustomScript2.js', './mycustomScript3.js'], true); .then(() => console.log('scripts loaded')) .catch((error) => console.error(error));","s":"loadScriptAll","u":"/display-advertising-docs/docs/guides/using-utils","h":"#loadscriptall","p":224},{"i":239,"t":"/** * Loads an image and returns the image element * * @param {string} src * * @return {Promise} */import loadJSON from \"@mediamonks/display-temple/util/loadJSON\";loadJSON('https://jsonplaceholder.typicode.com/todos/1') .then((data) => console.log(data)) .catch((error) => console.error(error));","s":"loadJSON","u":"/display-advertising-docs/docs/guides/using-utils","h":"#loadjson","p":224},{"i":241,"t":"/** * Will add canvas elements to the wrapper that are masked by the png images * * @param {array} config * @param {HTMLElement} wrapper * * @return {Promise} */import masker from \"@mediamonks/display-temple/util/masker\";masker(['./bg.jpg', './bg_transparent_white_small.png'], document.body.querySelectorAll('.wrapper')) .then(() => console.log('mask ready')) .catch((error) => console.error(error));;","s":"masker","u":"/display-advertising-docs/docs/guides/using-utils","h":"#masker","p":224},{"i":243,"t":"/** * Convert the RGB to hex code * * @param {number} r * @param {number} g * @param {number} b * * @returns {string>} */import rgbToHex from \"@mediamonks/display-temple/util/rgbToHex\";rgbToHex(0, 51, 255)","s":"rgbToHex","u":"/display-advertising-docs/docs/guides/using-utils","h":"#rgbtohex","p":224}],"index":{"version":"2.3.9","fields":["t"],"fieldVectors":[["t/2",[0,3.582,1,6.336]],["t/5",[2,3.992,3,5.376]],["t/7",[4,2.995,5,4.364,6,4.364,7,2.506,8,5.002,9,4.364,10,5.002,11,4.647,12,4.128,13,4.364,14,2.314]],["t/9",[6,4.002,15,5.039,16,4.587,17,4.262,18,5.684,19,5.684,20,5.023,21,4.587,22,2.747,23,5.684,24,4.262,25,2.178,26,5.023,27,4.587,28,5.684,29,2.66]],["t/11",[30,1.468,31,3.521,32,6.228]],["t/13",[33,7.298]],["t/15",[5,4.002,34,3.7,35,6.321,36,5.684,37,4.329,38,4.148,39,4.587,40,4.262,41,5.684,42,4.262,43,3.294,44,5.023]],["t/17",[0,3.514,4,2.673,30,1.465,45,4.464,46,3.684,47,2.261,48,3.08,49,4.464,50,4.255,51,4.255,52,3.771,53,3.684,54,3.894]],["t/19",[30,1.027,37,2.984,47,1.586,55,3.125,56,2.438,57,4.934,58,2.239,59,2.747,60,4.934,61,4.934,62,3.982,63,3.286,64,4.934,65,2.645,66,4.934,67,6.47,68,4.36,69,3.699,70,4.934,71,4.934,72,4.36,73,4.934,74,4.934,75,3.699,76,4.36]],["t/21",[29,2.457,47,1.687,49,4.236,62,4.236,63,3.496,77,3.935,78,4.638,79,5.249,80,3.042,81,5.249,82,4.236,83,5.249,84,2.457,85,3.042,86,4.638,87,4.638,88,3.496,89,6.801,90,2.382,91,4.236,92,4.638,93,4.236]],["t/23",[30,1.493,94,5.787]],["t/25",[4,3.187,47,2.12,95,6.596,96,3.823,97,5.828,98,6.596,99,4.393]],["t/27",[7,2.998,22,3.583,48,3.35,49,4.855,100,4.696,101,4.007,102,5.317,103,3.225,104,3.811,105,5.317]],["t/29",[55,4.464,106,3.521,107,4.464]],["t/31",[47,1.993,48,3.451,55,3.926,106,3.096,108,4.647,109,4.647,110,3.205,111,3.451,112,3.205,113,5.002,114,5.002]],["t/33",[112,3.205,115,4.128,116,3.205,117,6.093,118,4.364,119,6.198,120,4.364,121,5.477,122,6.198,123,6.198]],["t/35",[30,1.184,47,1.827,63,3.786,103,3.047,124,3.047,125,3.6,126,5.684,127,4.262,128,5.684,129,5.684,130,4.587,131,5.023,132,5.023,133,5.023,134,5.684,135,5.023,136,3.438]],["t/37",[30,1.271,96,4.336,137,6.106,138,4.928,139,6.106,140,6.106,141,6.106,142,4.928,143,6.106,144,4.578,145,4.578]],["t/40",[46,3.893,47,2.341,114,4.717,146,4.383,147,5.846,148,5.165,149,4.116,150,5.846,151,3.134,152,3.703,153,5.846,154,4.717,155,4.717,156,4.717]],["t/42",[90,3.254,157,5.787]],["t/44",[9,4.644,90,2.993,158,5.323,159,6.596,160,4.945,161,3.99,162,6.596]],["t/47",[163,7.298]],["t/49",[10,5.002,11,4.647,47,1.993,52,3.322,58,2.813,164,6.198,165,4.647,166,3.749,167,5.477,168,4.647,169,3.205]],["t/51",[7,2.85,116,3.644,170,4.694]],["t/53",[25,1.986,27,4.182,48,2.885,106,2.589,111,2.885,169,2.68,171,3.135,172,4.273,173,4.579,174,3.283,175,4.579,176,3.649,177,3.649,178,3.886,179,4.579,180,2.778,181,4.182,182,2.426,183,3.135,184,4.579,185,3.649,186,2.885,187,3.135]],["t/55",[30,1.52]],["t/57",[188,5.688,189,5.284,190,6.228]],["t/59",[9,3.842,29,2.555,47,2.471,84,3.264,85,3.163,90,2.477,146,4.092,151,3.739,155,4.404,156,5.628,157,4.404,191,4.092,192,4.823,193,2.207,194,4.092]],["t/61",[9,3.649,47,1.666,58,3.061,69,3.886,90,3.061,195,5.961,196,4.579,197,4.182,198,6.627,199,3.135,200,4.579,201,4.579,202,4.579,203,4.579,204,2.885,205,4.579,206,3.886,207,4.579,208,3.886]],["t/63",[47,2.266,146,5.284,188,5.688]],["t/65",[125,4.464,188,5.688,189,5.284]],["t/67",[47,2.362,84,3.439,90,2.691,146,4.446,151,3.179,156,4.785,157,4.785,160,4.446,191,4.446,192,5.24,209,3.949,210,3.949]],["t/69",[7,2.262,9,2.139,14,1.134,30,0.633,47,1.486,58,2.539,69,2.278,90,2.838,110,3.233,111,1.692,112,2.39,116,2.39,124,2.478,169,2.39,189,2.278,195,6.261,196,2.685,197,5.046,198,5.525,199,1.838,200,2.685,201,2.685,202,2.685,203,2.685,204,2.574,205,2.685,206,4.688,207,2.685,208,3.466,211,3.079,212,2.685,213,4.195,214,1.468,215,3.466,216,2.139,217,3.466,218,2.685,219,3.038,220,3.038,221,4.622,222,4.085,223,2.685]],["t/71",[47,2.191,58,3.092,169,3.523,180,3.653,224,4.798]],["t/73",[0,2.299,4,2.224,7,2.521,30,0.958,31,2.299,46,3.065,47,2.273,50,2.784,52,3.342,58,2.089,84,2.154,148,4.067,169,3.223,199,2.784,215,3.451,216,3.24,225,3.714,226,3.451,227,4.602,228,4.602,229,4.602,230,3.451,231,3.065,232,3.714,233,4.602,234,1.486,235,4.602,236,2.784]],["t/75",[0,2.726,30,1.452,31,2.726,47,1.755,136,3.301,161,3.301,169,2.822,193,2.207,226,4.092,237,5.458,238,4.823,239,4.823,240,6.163,241,5.412,242,4.645]],["t/77",[0,1.868,7,1.9,24,1.738,25,0.888,29,1.085,30,0.979,31,1.158,38,2.167,42,1.738,47,1.202,52,3.565,54,3.309,84,2.524,104,2.977,151,3.565,161,4.698,166,1.403,183,1.403,187,1.403,194,1.738,230,2.804,231,2.491,232,1.871,234,1.649,240,3.305,241,4.164,243,1.158,244,1.807,245,2.369,246,3.018,247,2.804,248,3.018,249,3.305,250,2.319,251,2.319,252,4.773,253,2.319,254,2.319,255,2.319,256,2.319,257,1.544,258,2.049,259,1.291,260,1.738,261,2.049,262,1.738,263,2.319,264,2.319,265,3.74,266,1.871,267,1.871,268,3.305,269,1.544,270,2.804,271,1.632,272,2.319,273,1.738]],["t/79",[0,1.265,2,1.41,8,3.239,25,3.176,30,1.038,38,1.468,52,1.358,56,0.945,67,2.238,75,1.899,80,1.468,88,2.673,110,1.31,116,2.075,165,3.737,169,2.075,174,1.604,182,2.333,183,2.428,185,1.783,187,1.532,204,2.235,211,1.687,212,2.238,223,2.238,234,0.956,236,1.532,243,2.005,244,1.224,257,1.687,269,1.687,270,1.899,273,3.737,274,3.239,275,2.533,276,2.238,277,2.238,278,1.899,279,2.533,280,2.044,281,2.238,282,1.783,283,1.687,284,2.533,285,2.044,286,2.238,287,2.044,288,2.533,289,5.462,290,3.546,291,2.533,292,4.984,293,2.533,294,2.044,295,2.533,296,1.468,297,1.468,298,2.533,299,2.238,300,2.533,301,2.533,302,2.238,303,2.533,304,2.533,305,2.533,306,2.533,307,2.533]],["t/81",[180,3.714,224,4.878,308,4.389,309,4.016]],["t/83",[0,1.796,7,1.454,22,1.738,30,1.091,46,2.395,48,2.918,84,1.683,85,2.084,101,3.491,110,1.859,111,3.443,136,2.175,149,2.532,152,3.32,166,2.175,180,1.928,185,3.69,186,2.918,187,2.175,230,2.696,231,2.395,234,0.857,245,2.278,266,2.902,267,2.902,280,2.902,281,3.178,302,3.178,308,4.304,309,3.584,310,2.532,311,3.596,312,2.278,313,2.902,314,3.178,315,3.178,316,3.596,317,3.596,318,3.178,319,3.178,320,3.178,321,3.178,322,2.902,323,2.902,324,3.178,325,3.596]],["t/85",[30,0.467,31,1.12,47,1.17,56,0.837,84,1.05,85,2.11,90,1.018,91,1.81,101,1.494,106,2.295,112,1.16,151,2.463,161,1.357,169,1.16,183,2.779,185,1.579,187,1.357,206,1.682,213,1.682,218,1.982,226,1.682,234,1.095,241,3.723,242,2.424,243,1.12,245,2.306,283,1.494,308,2.91,309,2.663,326,2.243,327,5.288,328,5.288,329,1.81,330,1.05,331,4.595,332,2.243,333,2.243,334,2.641,335,1.494,336,2.243,337,2.243,338,2.243,339,2.243,340,2.243,341,1.579,342,1.81,343,3.217,344,1.81,345,2.243,346,1.682,347,3.235,348,2.243,349,2.243,350,2.243,351,2.243,352,1.81,353,3.445,354,4.06,355,1.81,356,3.217,357,4.06,358,4.06,359,4.06,360,2.243,361,2.243,362,2.243,363,1.81,364,1.81,365,2.424,366,1.682,367,1.982,368,1.982,369,2.243,370,2.243,371,2.243,372,1.682,373,2.243,374,1.16,375,1.682,376,2.243,377,2.243,378,2.243,379,2.243]],["t/87",[4,0.841,7,1.552,14,1.887,22,0.841,30,0.941,31,1.473,47,0.559,48,2.136,50,1.784,51,1.052,54,2.702,58,0.79,84,0.814,90,1.338,103,0.933,106,1.917,109,1.304,110,2.336,111,2.815,124,1.581,172,1.868,174,1.102,176,2.702,177,2.076,178,2.211,183,1.784,199,1.052,210,1.159,234,0.703,236,1.052,260,1.304,266,1.404,267,1.404,285,1.404,308,2.431,309,3.96,321,1.537,324,1.537,330,0.814,334,0.869,353,1.304,354,2.606,355,3.097,356,1.537,357,1.537,358,1.537,359,1.537,365,1.159,372,2.877,380,1.225,381,2.211,382,1.304,383,1.404,384,1.404,385,4.432,386,2.949,387,2.211,388,1.537,389,3.391,390,4.853,391,1.537,392,5.172,393,1.74,394,1.74,395,1.74,396,1.537,397,1.537,398,3.992,399,3.992,400,3.992,401,3.992,402,3.992,403,3.992,404,2.606,405,1.404,406,1.537,407,1.304,408,1.537,409,1.537,410,3.391,411,2.606,412,1.537,413,1.537,414,1.537,415,1.537,416,1.537,417,1.537,418,1.537]],["t/89",[106,3.461,180,3.714,224,4.878,243,3.461]],["t/91",[4,0.607,7,1.209,14,1.542,21,1.794,22,2.542,25,1.583,29,0.588,30,0.951,31,0.628,34,0.65,47,1.588,48,2.012,50,1.345,52,0.673,58,0.57,75,0.942,80,0.728,84,1.934,90,0.57,100,1.408,103,1.603,104,0.796,106,3.186,108,2.242,109,0.942,110,1.869,111,2.3,120,0.884,124,1.192,166,0.76,171,0.76,172,1.408,174,0.796,176,2.545,177,2.106,178,2.242,182,0.588,183,0.76,209,0.837,210,3.289,226,0.942,234,0.713,236,0.76,244,1.074,260,0.942,278,0.942,285,1.014,286,1.11,308,1.408,309,3.594,320,1.11,322,1.014,329,1.014,330,0.588,344,1.014,347,1.565,355,2.413,363,1.014,366,0.942,372,2.242,380,0.884,381,0.942,382,1.667,383,1.014,384,1.014,385,2.413,387,0.942,389,1.965,390,4.036,392,4.364,396,1.965,397,1.11,398,1.11,399,1.11,400,1.11,401,1.11,402,1.11,403,1.965,404,1.11,405,1.014,406,1.11,407,0.942,408,1.11,409,1.11,410,2.643,411,1.965,412,1.11,413,1.11,414,1.11,415,1.11,416,1.11,417,1.11,418,1.11,419,1.256,420,1.256,421,4.132,422,1.667,423,1.965,424,3.614,425,1.11,426,1.965,427,1.256,428,1.256,429,1.11,430,1.11,431,2.223,432,2.223,433,2.223,434,1.256,435,1.256,436,1.965,437,1.256,438,1.256,439,1.256,440,1.256,441,1.256,442,1.256,443,1.256,444,2.223,445,0.76,446,1.014,447,0.942,448,1.256,449,0.884,450,0.884,451,1.11,452,0.673,453,1.256,454,1.256,455,1.965,456,1.256,457,1.014,458,0.728,459,1.11,460,1.256,461,1.256,462,1.256,463,1.11,464,1.256,465,1.256]],["t/93",[180,3.778,211,4.694,224,4.962]],["t/95",[7,1.781,29,2.062,48,3.369,101,4.03,111,2.453,152,2.79,166,2.665,167,3.893,204,2.453,211,2.934,216,3.102,225,5.577,234,1.442,243,2.201,299,3.893,329,3.555,342,3.555,382,3.303,429,5.347,466,4.405,467,4.405,468,4.405,469,4.405,470,3.303,471,3.893,472,4.883,473,4.405,474,3.303,475,4.405,476,4.405,477,3.893]],["t/97",[110,3.356,166,3.927,211,5.171,216,4.57,472,5.239,474,4.867,478,5.239]],["t/99",[7,2.714,12,3.425,14,1.308,17,2.627,30,1.071,48,2.863,110,2.659,111,1.951,117,2.828,124,1.878,152,2.22,211,4.47,215,5.032,216,2.467,243,3.353,343,4.544,472,2.828,474,3.856,478,4.15,479,3.504,480,3.504,481,2.828,482,4.544,483,3.504,484,3.504,485,3.504,486,3.097,487,3.504,488,6.092,489,3.504,490,3.504,491,3.504,492,5.143,493,2.334,494,3.504,495,3.504,496,2.627,497,3.504,498,3.504]],["t/101",[116,3.583,180,4.326,224,4.878]],["t/103",[7,2.826,25,1.725,30,0.937,47,1.447,51,3.715,52,3.747,106,3.068,112,2.328,116,3.175,170,4.09,176,3.169,182,2.107,236,2.723,244,2.175,257,2.998,269,2.998,335,2.998,346,3.375,499,4.502,500,6.141,501,4.324,502,4.502,503,4.502,504,3.978,505,4.502,506,3.633]],["t/105",[0,1.668,4,0.699,7,0.585,10,2.03,12,1.675,14,0.54,25,0.554,27,1.167,30,0.524,47,0.465,48,2.518,51,0.875,52,1.349,54,1.771,56,0.54,58,0.656,84,0.677,90,1.142,103,0.775,104,1.593,106,0.722,110,2.064,111,3.145,112,2.757,115,1.675,116,2.338,124,0.775,127,2.993,136,0.875,151,1.349,152,0.916,161,4.066,169,0.748,172,1.593,173,2.223,174,1.593,175,1.278,179,1.278,180,2.14,181,2.03,182,0.677,183,0.875,184,1.278,185,3.184,186,2.518,187,2.736,197,1.167,199,1.522,204,1.859,225,2.03,230,1.084,231,0.963,232,1.167,234,1.411,241,1.018,242,1.675,245,2.115,246,2.03,247,1.084,248,1.167,261,1.278,262,1.886,269,0.963,273,1.084,278,1.084,280,1.167,283,0.963,309,2.313,318,2.223,319,1.278,330,0.677,334,0.722,341,1.018,342,1.167,346,1.084,352,2.03,353,1.084,382,1.084,383,1.167,425,2.95,445,0.875,458,0.838,459,1.278,477,2.95,501,1.018,506,1.167,507,1.446,508,1.446,509,2.516,510,0.963,511,1.018,512,1.446,513,1.446,514,1.446,515,1.167,516,1.446,517,1.446,518,1.446,519,1.084,520,1.446,521,1.446,522,1.446,523,1.446,524,1.446,525,1.446,526,1.446,527,3.339,528,2.516,529,2.516,530,1.446,531,1.446,532,1.446,533,1.446,534,1.278,535,0.875,536,1.278,537,1.278,538,1.446,539,1.446,540,1.446,541,1.278,542,2.223,543,1.446,544,1.446,545,1.446,546,1.446,547,1.446,548,1.446]],["t/107",[118,4.878,120,4.878,193,2.802,352,5.592]],["t/109",[13,2.406,25,1.309,30,1.381,37,2.067,77,2.562,84,1.599,85,1.98,112,1.767,116,1.767,117,2.757,118,4.668,120,2.406,174,2.164,182,1.599,234,0.814,238,3.019,244,2.901,309,1.98,334,1.707,341,2.406,452,2.706,455,5.305,501,2.406,536,3.019,549,5.048,550,6.003,551,2.562,552,5.048,553,3.417,554,6.003,555,6.003,556,3.417,557,3.417,558,2.757,559,2.757,560,3.417,561,3.417,562,3.417,563,3.417,564,3.417,565,3.019,566,3.417,567,3.417,568,3.417,569,3.019,570,3.417]],["t/111",[0,3.461,47,2.228,50,4.191,193,2.802]],["t/113",[55,4.464,56,2.631,193,2.85]],["t/115",[2,3.858,103,3.714,193,2.802,571,6.123]],["t/117",[22,2.637,30,1.136,47,1.755,69,4.092,77,4.092,106,2.726,120,3.842,124,2.926,125,4.418,385,4.404,470,5.229,572,5.458,573,4.404,574,5.458,575,5.458,576,4.823,577,5.458,578,4.823]],["t/119",[2,2.453,24,3.303,30,1.439,47,1.416,58,1.999,92,3.893,103,2.361,104,2.79,125,2.79,199,2.665,204,2.453,277,3.893,335,2.934,364,4.883,426,3.893,504,3.893,571,3.893,579,4.405,580,4.405,581,4.405,582,5.347,583,3.893,584,4.405,585,4.405,586,3.893,587,4.405,588,4.405,589,4.405,590,3.303,591,4.405,592,6.051,593,4.405,594,4.405]],["t/121",[34,3.644,35,5.688,193,2.85]],["t/123",[55,4.389,107,4.389,118,4.878,193,2.802]],["t/125",[4,0.722,25,1.311,29,0.699,30,0.311,31,1.292,34,1.769,43,0.866,46,1.723,51,0.903,52,1.387,55,3.201,56,0.966,59,1.905,65,0.801,90,0.678,99,0.995,101,0.995,107,0.946,115,0.995,151,0.801,161,0.903,169,1.338,170,0.995,171,0.903,204,3.477,209,2.718,234,2.057,243,2.709,244,1.25,257,1.723,282,1.051,308,0.946,312,0.946,323,2.088,330,0.699,334,2.038,341,1.051,346,1.94,347,1.821,374,0.772,446,1.205,481,1.205,493,0.995,535,0.903,551,1.12,573,1.205,583,1.32,590,1.12,595,0.995,596,1.32,597,1.205,598,1.32,599,3.723,600,1.493,601,1.493,602,1.493,603,1.205,604,1.493,605,3.606,606,1.493,607,2.286,608,2.286,609,1.32,610,1.32,611,1.12,612,1.32,613,1.493,614,1.493,615,1.94,616,1.493,617,1.493,618,6.452,619,1.493,620,1.493,621,1.493,622,1.493,623,1.493,624,1.493,625,1.493,626,1.493,627,1.493,628,1.493,629,1.493,630,1.493,631,1.493,632,1.493,633,1.32,634,1.32,635,1.493,636,1.493,637,1.94,638,1.821,639,1.32,640,1.32,641,1.493,642,1.493,643,1.205,644,1.32,645,1.205,646,1.493,647,1.493,648,1.493,649,1.493,650,2.088,651,1.205,652,1.493,653,1.493,654,1.32,655,1.493,656,1.493]],["t/127",[4,1.05,14,0.811,29,1.017,30,0.452,31,1.085,46,1.446,55,2.847,59,1.209,65,1.901,99,2.362,104,1.376,180,1.901,204,2.502,231,1.446,234,2.11,236,1.314,243,1.085,282,1.529,330,1.66,334,1.771,335,1.446,344,1.753,347,2.497,374,1.123,391,1.919,493,2.362,590,1.628,599,4.614,605,3.134,607,3.134,608,3.134,609,1.919,610,1.919,611,1.628,612,1.919,615,3.37,633,1.919,634,1.919,637,1.628,638,1.529,639,1.919,644,1.919,654,1.919,657,2.172,658,2.172,659,2.172,660,2.172,661,2.172,662,2.172,663,2.172,664,1.753,665,2.172,666,2.172,667,2.172,668,2.172,669,2.172,670,2.172,671,2.172,672,2.172,673,2.172,674,2.172,675,2.172,676,2.172,677,2.172,678,2.172,679,2.172,680,2.172,681,2.172,682,2.172,683,3.546,684,2.172,685,3.546,686,2.172,687,1.919,688,2.172]],["t/129",[0,1.518,5,2.139,6,2.139,25,1.771,30,0.633,37,1.838,40,2.278,56,1.134,59,1.692,68,2.685,90,1.379,99,2.023,107,3.544,149,2.139,151,1.629,158,2.452,168,2.278,169,1.571,172,3.544,194,2.278,204,1.692,209,2.023,213,3.466,217,2.278,234,1.603,244,1.468,287,2.452,310,3.254,312,2.928,323,3.73,330,1.422,335,3.079,474,2.278,496,2.278,519,2.278,535,1.838,596,5.525,597,4.515,637,2.278,638,2.139,650,2.452,651,2.452,689,5.044,690,2.452,691,3.038,692,3.038,693,3.038,694,3.038,695,3.038,696,3.038,697,3.038,698,2.685,699,4.622,700,3.038,701,3.038,702,3.038]],["t/131",[25,1.267,29,2.306,30,1.359,31,1.652,50,2.98,56,1.234,99,2.202,125,2.095,144,2.479,149,4.594,166,2,187,2,209,3.281,234,1.931,239,2.922,259,1.841,330,1.548,335,2.202,365,3.281,381,2.479,535,2,597,2.669,599,2.669,637,2.479,638,2.328,650,2.669,651,2.669,689,3.694,690,2.669,703,6.525,704,4.927,705,4.927,706,3.307,707,3.307,708,2.922,709,3.307,710,3.307,711,3.307,712,3.307,713,2.669,714,2.922,715,2.922,716,3.307,717,3.307]],["t/133",[15,4.962,16,5.688,193,2.85]],["t/135",[80,4.085,193,2.85,718,6.228]],["t/137",[193,2.9,510,4.776]],["t/139",[3,2.927,4,2.687,22,1.886,29,1.827,30,1.158,47,1.255,51,3.363,52,2.98,56,1.457,58,1.771,115,2.6,124,2.092,151,2.092,165,2.927,169,2.018,182,2.602,213,2.927,243,3.235,262,2.927,374,2.018,381,4.855,482,3.449,506,3.15,510,3.703,535,2.361,573,3.15,719,3.903,720,3.903,721,3.903,722,3.449,723,3.903,724,3.449,725,2.748,726,4.487,727,3.903,728,2.927,729,3.903,730,3.903,731,3.903]],["t/141",[2,1.631,14,1.094,29,1.371,30,1.139,53,2.994,84,2.104,88,1.951,124,2.41,161,1.772,166,1.772,182,1.371,186,2.503,231,2.994,234,1.788,242,1.951,243,2.246,244,1.416,262,2.197,274,3.628,312,1.856,330,1.371,334,2.246,374,2.829,384,3.628,510,2.994,603,2.365,645,2.365,722,4.834,724,2.589,726,3.628,732,2.93,733,4.834,734,2.589,735,2.589,736,2.93,737,2.589,738,2.93,739,2.93,740,2.93,741,2.93,742,2.589,743,3.973,744,4.834,745,5.422,746,4.496,747,2.93,748,2.93,749,2.93,750,2.365,751,2.589,752,2.93,753,2.93]],["t/143",[14,1.417,22,1.834,30,0.79,31,1.896,45,3.063,58,1.722,170,2.528,171,2.296,208,4.086,234,2.018,244,1.834,374,1.962,405,3.063,449,2.672,450,2.672,510,3.629,690,3.063,725,3.837,726,3.063,733,3.354,734,3.354,742,3.354,743,3.354,744,3.354,745,3.354,754,3.795,755,3.354,756,3.795,757,3.795,758,3.795,759,3.795,760,3.354,761,3.795,762,2.846,763,3.354,764,3.063,765,3.354,766,3.795,767,3.795,768,3.795]],["t/145",[108,5.109,109,5.109,110,3.523,193,2.756,769,6.814]],["t/147",[145,5.376,193,2.9]],["t/149",[4,1.785,30,0.769,47,1.187,51,2.234,58,1.676,59,2.975,77,2.769,78,3.263,80,3.988,90,1.676,96,2.14,152,2.339,160,2.769,180,1.98,234,1.982,259,2.056,282,2.6,290,4.721,294,2.98,312,3.384,313,4.312,334,1.845,537,3.263,615,2.769,643,2.98,770,3.693,771,3.693,772,3.263,773,2.98,774,3.263,775,3.263,776,3.693,777,3.693,778,3.693,779,3.693,780,3.693,781,3.693,782,3.263,783,3.693,784,3.693]],["t/151",[7,1.948,12,3.209,14,1.798,30,1.339,50,2.915,80,2.792,85,2.792,102,4.258,138,3.888,177,3.392,206,3.612,215,3.612,245,3.052,363,3.888,365,3.209,367,4.258,407,3.612,515,3.888,582,4.258,689,3.612,728,3.612,785,4.818,786,4.818,787,4.818,788,4.818,789,4.258,790,4.818,791,4.818,792,4.818]],["t/153",[5,3.135,30,0.927,59,3.87,63,2.966,65,2.387,136,2.694,151,2.387,154,3.594,155,3.594,171,2.694,269,2.966,282,3.135,312,2.821,334,2.224,341,3.135,380,3.135,471,3.935,493,2.966,519,3.339,586,3.935,643,3.594,782,3.935,793,4.453,794,4.453,795,3.935,796,4.453,797,3.935,798,4.453,799,4.453,800,4.453,801,4.453,802,4.453,803,3.935,804,4.453,805,3.935]],["t/155",[22,3.406,100,4.464,193,2.85]],["t/157",[2,2.328,6,4.109,7,2.719,12,2.785,14,1.561,22,3.932,39,3.374,59,2.328,94,3.374,100,4.609,106,2.089,112,2.162,116,2.162,181,3.374,183,2.529,186,3.249,214,2.021,217,3.135,330,1.957,559,3.374,713,3.374,806,4.181,807,4.181,808,4.181,809,4.181,810,4.181,811,3.695,812,4.181,813,4.181,814,3.695]],["t/159",[22,3.348,100,4.389,110,3.583,214,3.348]],["t/161",[7,2.662,22,2.413,56,1.864,100,4.17,106,2.494,112,2.582,170,3.326,172,3.163,174,3.163,176,4.635,177,4.635,178,3.744,214,2.413,234,1.569,294,4.03,308,3.163,309,2.894,815,4.994,816,4.994,817,4.994,818,4.994,819,4.994]],["t/163",[2,1.222,6,2.518,7,0.888,14,0.819,21,1.771,22,2.188,24,1.646,25,0.841,29,1.674,56,1.335,58,0.996,59,1.222,80,2.624,82,2.887,88,1.462,91,1.771,94,1.771,96,2.073,100,4.293,101,1.462,106,1.096,110,1.135,111,1.992,136,1.328,145,2.682,151,1.917,158,1.771,161,3.932,172,1.39,234,1.981,236,2.164,241,2.518,243,1.096,245,2.266,246,2.887,247,2.682,248,2.887,249,3.161,257,1.462,258,1.94,259,1.222,260,1.646,268,1.94,314,1.94,315,1.94,330,1.027,368,1.94,423,1.94,436,1.94,451,1.94,458,1.272,486,1.94,541,1.94,713,1.771,803,1.94,811,1.94,814,1.94,820,2.195,821,2.195,822,2.195,823,2.195,824,2.195,825,2.195,826,2.195,827,2.195,828,2.195,829,2.195,830,2.195,831,2.195,832,2.195,833,2.195,834,3.577,835,3.577,836,2.195,837,2.195,838,2.195,839,2.195,840,1.646]],["t/165",[4,3.406,96,4.085,193,2.85]],["t/167",[193,2.9,841,6.336]],["t/169",[22,0.432,32,2.472,115,0.595,135,0.789,217,0.67,234,0.213,269,0.595,297,0.518,447,1.696,452,0.479,565,0.789,615,5.258,841,1.998,842,1.592,843,0.789,844,1.998,845,0.893,846,0.479,847,1.311,848,1.311,849,0.893,850,1.635,851,1.635,852,0.893,853,0.893,854,0.893,855,0.893,856,0.893,857,0.893,858,0.893,859,0.893,860,0.893,861,0.893,862,0.893,863,1.635,864,0.893,865,0.893,866,0.893,867,0.893,868,0.893,869,0.893,870,0.893,871,0.893,872,0.893,873,0.893,874,0.893,875,0.893,876,0.893,877,0.893,878,0.893,879,0.893,880,0.893,881,0.893,882,0.893,883,0.893,884,0.893,885,0.893,886,0.893,887,0.893,888,0.893,889,0.893,890,0.893,891,0.893,892,1.635,893,1.635,894,0.893,895,0.893,896,0.893,897,0.893,898,0.893,899,0.893,900,0.893,901,0.893,902,0.893,903,0.893,904,0.893,905,0.893,906,0.893,907,0.893,908,0.893,909,0.893,910,0.893,911,1.635,912,2.261,913,0.893,914,0.893,915,0.893,916,0.893,917,0.893,918,0.893,919,0.893,920,1.635,921,1.635,922,1.635,923,0.893,924,1.635,925,1.635,926,0.893,927,0.893,928,0.893,929,0.893,930,0.893,931,0.893,932,0.893,933,0.893,934,0.893,935,2.261,936,0.893,937,0.893,938,0.893,939,1.635,940,0.893,941,0.893,942,3.26,943,0.893,944,0.893,945,0.893,946,3.26,947,1.635,948,1.635,949,0.893,950,1.635,951,3.26,952,0.893,953,0.893,954,0.893,955,0.893,956,1.635,957,0.893,958,2.261,959,0.893,960,0.893,961,3.26,962,0.893,963,0.893,964,0.893,965,0.893,966,0.893,967,2.261,968,1.635,969,2.261,970,0.893,971,0.893,972,0.893,973,0.893,974,0.893,975,0.893,976,1.635,977,0.893,978,2.797,979,2.797,980,1.635,981,1.635,982,2.261,983,0.893,984,1.635,985,2.261,986,2.261,987,2.797,988,0.893,989,0.893,990,0.893,991,0.893,992,1.635,993,3.26,994,5.314,995,1.635,996,3.26,997,1.635,998,0.893,999,0.893,1000,0.893,1001,0.893,1002,0.893,1003,0.893,1004,0.893,1005,0.893,1006,0.893,1007,0.893,1008,0.893,1009,0.893,1010,0.893,1011,0.893,1012,0.893,1013,0.893,1014,1.635,1015,0.893,1016,1.635,1017,0.893,1018,0.893,1019,0.893,1020,1.635,1021,1.635,1022,0.893,1023,1.635,1024,0.893,1025,0.893,1026,0.893,1027,0.893,1028,1.635,1029,2.797,1030,0.893,1031,0.893,1032,1.635,1033,0.893,1034,0.893,1035,0.893,1036,0.893,1037,2.797,1038,1.635,1039,0.789,1040,1.635,1041,0.893,1042,0.893,1043,0.893,1044,0.893,1045,0.893,1046,0.893,1047,0.893,1048,0.893,1049,0.893,1050,0.893,1051,1.635,1052,0.893,1053,0.893,1054,1.635,1055,0.893,1056,0.893,1057,1.635,1058,0.893,1059,0.893,1060,0.893,1061,0.893,1062,0.893,1063,0.893,1064,0.893,1065,0.893,1066,1.635,1067,0.893,1068,0.893,1069,0.893,1070,0.893,1071,0.893,1072,0.893,1073,0.893,1074,0.893,1075,0.893,1076,0.893,1077,0.893,1078,0.893,1079,0.893,1080,0.893,1081,0.893,1082,0.893,1083,0.893,1084,0.893,1085,0.893,1086,0.893,1087,0.893,1088,0.893,1089,0.893,1090,0.893]],["t/171",[193,2.9,297,4.156]],["t/173",[2,4.051,3,5.041,13,2.944,14,1.561,17,3.135,30,1.215,37,2.529,38,2.423,53,2.785,105,3.695,125,2.648,130,3.374,154,3.374,171,2.529,186,2.328,190,3.695,243,2.089,274,3.374,283,2.785,297,4.436,388,3.695,407,3.135,430,3.695,603,3.374,708,3.695,751,3.695,1091,4.181,1092,5.157,1093,3.374,1094,4.181,1095,4.181,1096,4.181]],["t/175",[30,0.937,45,3.633,63,2.998,72,3.978,86,3.978,97,3.978,130,3.633,296,2.609,297,3.559,366,3.375,470,3.375,598,3.978,842,3.169,846,4.212,847,2.609,848,2.609,1093,3.633,1097,3.978,1098,4.956,1099,4.502,1100,3.978,1101,4.502,1102,2.723,1103,2.723,1104,4.502,1105,4.502,1106,4.502,1107,4.502,1108,2.723,1109,2.723]],["t/177",[12,2.101,30,0.99,53,3.168,63,2.101,108,2.365,234,1.519,278,2.365,283,2.101,296,1.828,297,2.756,366,2.365,374,1.631,380,4.03,452,1.691,470,3.566,511,2.221,750,2.546,842,2.221,846,3.417,847,1.828,848,1.828,1093,2.546,1097,4.203,1098,5.144,1100,2.788,1102,1.908,1103,1.908,1108,1.908,1109,1.908,1110,3.155,1111,3.155,1112,3.155,1113,3.155,1114,3.155,1115,3.155,1116,3.155,1117,3.155,1118,3.155,1119,3.155,1120,3.155,1121,3.155,1122,3.155,1123,3.155,1124,3.155,1125,3.155,1126,3.155,1127,3.155,1128,3.155,1129,3.155,1130,3.155,1131,3.155,1132,3.155,1133,3.155,1134,3.155,1135,3.155,1136,3.155,1137,2.788,1138,2.788,1139,3.155]],["t/179",[2,4.306,13,3.894,14,2.065,17,4.147,30,1.152,125,3.503,144,4.147,186,3.08,297,4.077,312,3.503,797,4.887,1140,5.531,1141,7.735,1142,5.531]],["t/181",[234,1.634,296,3.081,846,4.451,847,3.081,848,3.081,1102,3.216,1103,3.216,1108,3.216,1109,3.216,1143,5.316,1144,5.316,1145,5.316,1146,5.316,1147,5.316,1148,5.316,1149,5.316,1150,5.316]],["t/183",[11,3.79,38,2.93,104,3.202,234,1.582,244,2.443,296,2.93,846,4.217,847,2.93,848,2.93,1102,3.058,1103,3.058,1108,3.058,1109,3.058,1151,5.055,1152,5.055,1153,5.055,1154,5.055,1155,5.055,1156,5.055,1157,5.055,1158,5.055,1159,5.055]],["t/185",[7,2.584,29,2.991,30,1.331,112,3.304,116,3.304,259,3.558,535,3.866,1098,5.157,1160,6.391]],["t/187",[50,3.301,103,2.926,160,4.092,234,1.301,244,3.37,252,4.404,296,3.163,846,4.342,847,3.163,848,3.163,1102,3.301,1103,3.301,1108,3.301,1109,3.301,1161,4.823,1162,5.458]],["t/189",[1,3.893,30,0.917,82,3.555,113,3.555,199,2.665,234,2.003,259,2.453,296,2.553,463,6.575,760,3.893,846,3.988,847,2.553,848,2.553,1102,2.665,1103,2.665,1108,2.665,1109,2.665,1163,4.405,1164,4.405,1165,4.405,1166,4.405,1167,4.405,1168,4.405,1169,6.051]],["t/191",[2,2.78,84,2.337,90,2.266,103,3.529,115,3.326,234,1.19,296,2.894,310,3.516,755,4.413,795,4.413,846,4.197,847,2.894,848,2.894,1102,3.021,1103,3.021,1108,3.021,1109,3.021,1170,3.326,1171,6.584,1172,4.994,1173,4.994,1174,4.994]],["t/193",[14,1.577,25,1.619,171,2.555,296,2.448,347,4.138,375,4.407,452,3.151,559,3.409,595,2.813,611,3.167,842,2.974,843,5.194,846,4.118,847,2.448,848,2.448,1092,3.733,1102,2.555,1103,3.555,1108,2.555,1109,2.555,1170,2.813,1175,5.878,1176,4.224,1177,4.224,1178,4.224,1179,4.224,1180,5.878,1181,5.878,1182,4.224,1183,4.224]],["t/195",[96,4.085,142,5.688,193,2.85]],["t/197",[14,1.778,29,2.229,30,0.992,47,2.051,56,2.381,58,2.161,80,2.76,96,3.697,99,4.249,145,3.571,168,3.571,170,3.172,208,3.571,214,2.301,234,1.831,772,4.208,773,3.843,774,4.208,775,4.208,1184,5.637,1185,4.762,1186,4.762,1187,4.762]],["t/199",[14,1.757,30,0.98,43,3.669,96,4.433,138,3.799,142,5.771,245,4.01,247,3.53,375,3.53,515,3.799,664,3.799,773,5.109,789,4.16,1184,4.16,1188,4.708,1189,4.708,1190,5.594,1191,6.33,1192,4.708,1193,4.708,1194,4.708,1195,4.708]],["t/201",[0,3.582,1196,7.171]],["t/203",[25,2.748,289,6.336]],["t/205",[34,3.022,90,2.653,112,3.022,116,3.022,127,4.383,133,5.165,182,2.736,186,3.255,189,4.383,199,3.536,309,3.388,840,4.383,1197,5.846,1198,5.846,1199,5.165]],["t/207",[3,2.46,14,1.225,25,2.977,29,2.292,30,0.683,34,2.532,53,3.262,76,2.899,85,1.901,87,2.899,93,3.952,107,2.078,113,2.647,124,1.759,149,2.31,182,3.255,234,1.167,236,1.984,259,1.827,334,2.928,364,2.647,380,2.31,387,2.46,447,2.46,457,2.647,458,1.901,496,2.46,519,2.46,535,1.984,569,2.899,728,2.46,762,3.672,840,2.46,1200,3.281,1201,5.743,1202,3.281,1203,3.281,1204,3.281,1205,3.281,1206,3.281,1207,3.281,1208,3.281,1209,3.281,1210,3.281,1211,3.281,1212,2.899,1213,3.281,1214,3.281]],["t/209",[25,2.225,26,4.277,34,1.67,38,2.805,40,2.421,42,3.629,52,2.595,88,2.151,124,1.731,136,2.928,165,3.629,180,1.731,182,1.511,234,2.032,244,1.56,252,2.606,271,2.273,297,1.871,330,1.511,374,1.67,387,2.421,447,2.421,449,3.408,450,3.408,458,3.365,496,4.835,595,2.151,715,2.853,725,3.408,735,2.853,737,2.853,762,3.629,763,2.853,764,2.606,1215,4.84,1216,3.229,1217,3.229,1218,3.229,1219,3.229,1220,2.853]],["t/211",[14,0.963,15,3.552,16,3.287,20,2.28,25,1.561,30,0.848,31,2.862,34,1.334,38,1.496,42,1.935,53,2.713,84,1.208,107,2.58,118,1.817,131,3.599,132,3.599,136,3.773,171,1.561,210,1.719,222,2.28,234,2.036,242,1.719,243,1.289,244,1.247,257,1.719,259,1.437,270,1.935,271,1.817,330,1.208,353,1.935,374,2.106,446,2.083,452,1.383,457,2.083,481,2.083,501,2.868,535,1.561,558,5.033,576,2.28,595,1.719,689,4.296,728,1.935,805,2.28,840,1.935,1039,2.28,1137,3.599,1138,2.28,1220,2.28,1221,2.581,1222,2.581,1223,2.581,1224,2.581,1225,2.581,1226,2.28,1227,2.581,1228,2.581,1229,2.28,1230,2.581]],["t/213",[13,4.798,30,1.419,107,4.316,193,2.756,334,3.404]],["t/215",[14,1.545,30,0.862,34,3.457,35,3.34,38,2.399,39,3.34,40,3.103,43,2.399,44,3.658,51,2.504,56,1.545,59,2.305,182,1.937,234,1.381,330,1.937,334,2.068,374,2.996,452,2.219,511,4.08,640,3.658,664,3.34,750,3.34,842,2.914,844,5.121,846,2.219,1231,3.658,1232,4.139,1233,4.139,1234,5.121,1235,4.139,1236,4.139,1237,4.139,1238,4.139,1239,4.139,1240,4.139,1241,4.139,1242,4.139]],["t/217",[25,2.272,30,1.235,34,3.066,38,3.437,182,2.776,186,3.302,191,4.446,210,3.949,259,3.302,297,4.259,493,3.949,1243,5.93,1244,5.93]],["t/219",[0,1.796,7,1.454,14,1.342,34,1.859,75,2.696,85,2.084,112,1.859,116,1.859,144,2.696,182,1.683,234,1.797,244,2.988,270,4.636,271,2.532,276,3.178,374,2.71,449,3.69,450,3.69,458,2.084,493,3.491,501,2.532,511,3.69,542,3.178,611,5.416,725,4.354,764,2.902,765,3.178,1226,4.631,1234,3.178,1245,5.241,1246,3.596,1247,5.241,1248,3.596,1249,3.596,1250,3.596,1251,3.596]],["t/221",[0,2.804,14,0.928,15,1.751,25,1.516,31,1.242,37,2.393,47,0.8,56,1.476,58,1.129,62,2.007,80,3.55,88,2.634,96,1.441,114,2.007,152,1.575,168,1.865,182,2.867,187,2.393,234,2.024,242,1.656,273,1.865,334,1.242,374,2.045,445,2.393,452,1.333,458,3.781,511,1.751,534,2.198,558,2.007,590,1.865,595,3.738,638,1.751,718,2.198,1161,3.495,1190,2.198,1201,2.198,1212,2.198,1231,2.198,1252,2.487,1253,3.955,1254,2.487,1255,2.487,1256,2.487,1257,2.487,1258,2.487,1259,2.487,1260,2.487,1261,2.487,1262,2.487,1263,2.487,1264,2.487,1265,2.487,1266,2.487,1267,2.487,1268,2.292,1269,2.487,1270,2.487,1271,2.487,1272,2.487,1273,2.487,1274,2.487]],["t/223",[11,4.511,25,2.305,30,1.253,34,3.111,186,3.35,191,4.511,210,4.007,259,3.35,322,4.855,372,4.511,458,3.487,510,4.007,714,5.317]],["t/225",[5,4.962,8,5.688,193,2.85]],["t/227",[30,0.871,54,2.944,56,1.561,127,3.135,209,2.785,214,2.021,234,2.128,375,3.135,422,6.322,1275,4.181,1276,4.181,1277,4.181,1278,4.181,1279,4.181,1280,4.181,1281,4.181,1282,4.181,1283,4.181,1284,4.181,1285,4.181]],["t/229",[7,1.276,14,1.178,15,4.487,30,0.657,43,1.828,56,1.775,84,1.477,93,2.546,121,2.788,214,1.525,234,1.63,271,2.221,283,2.101,287,2.546,330,1.477,449,3.349,450,3.349,578,2.788,595,3.168,645,2.546,687,4.203,725,4.03,762,3.566,846,2.55,1199,2.788,1268,1.828,1286,3.155,1287,3.155,1288,5.725,1289,3.155,1290,3.155,1291,3.155,1292,3.155,1293,3.155,1294,3.155,1295,3.155,1296,3.155,1297,3.155,1298,3.155,1299,3.155,1300,6.839,1301,3.155,1302,3.155,1303,3.155,1304,3.155,1305,3.155,1306,3.155,1307,3.155,1308,3.155,1309,2.788,1310,3.155,1311,3.155,1312,3.155]],["t/231",[43,2.792,56,1.798,65,2.583,214,2.328,234,2.071,310,3.392,313,3.888,445,2.915,698,4.258,1170,3.209,1268,3.726,1309,4.258,1313,4.818,1314,4.818,1315,4.818,1316,4.818,1317,6.429,1318,4.818,1319,4.818,1320,4.818]],["t/233",[4,2,25,1.586,37,2.504,56,1.545,59,2.305,65,2.219,103,2.219,214,2,234,2.072,365,2.757,422,3.103,445,4.045,551,3.103,1268,3.875,1321,3.34,1322,3.658,1323,3.658,1324,4.139,1325,3.103,1326,4.139,1327,4.139,1328,4.139,1329,4.139,1330,5.795,1331,4.08,1332,4.139,1333,2.914]],["t/235",[43,2.93,56,1.887,65,3.558,214,2.443,234,2.067,445,4.015,452,3.558,1170,3.367,1268,2.93,1325,3.79,1331,3.559,1333,3.559,1334,4.467,1335,5.055,1336,5.055,1337,5.055]],["t/237",[4,2.224,25,1.764,37,2.784,56,1.718,65,2.467,103,2.467,214,2.224,234,2.051,365,3.065,422,3.451,445,3.771,551,3.451,1268,3.613,1321,3.714,1322,4.067,1323,4.067,1325,3.451,1331,3.24,1333,3.24,1338,4.602,1339,4.602,1340,4.602,1341,4.602,1342,4.602]],["t/239",[43,2.93,56,1.887,65,3.558,214,2.443,234,2.067,445,3.058,452,3.558,1170,3.367,1268,2.93,1325,3.79,1331,3.559,1333,3.559,1334,4.467,1343,5.055,1344,5.055,1345,5.055,1346,5.055]],["t/241",[43,2.667,56,1.718,65,2.467,85,2.667,194,3.451,214,2.224,234,2.051,452,2.467,458,2.667,1229,4.067,1268,3.613,1321,3.714,1331,3.24,1333,3.24,1347,4.602,1348,6.234,1349,4.602,1350,4.602,1351,4.602,1352,4.602,1353,4.602,1354,4.602,1355,4.602,1356,4.602]],["t/243",[56,1.82,65,2.613,204,2.714,214,2.356,234,2.05,310,5.124,478,3.934,1170,3.247,1268,4.218,1357,4.875,1358,4.875,1359,4.875,1360,4.875,1361,4.875,1362,4.875,1363,4.875,1364,4.875,1365,4.875]]],"invertedIndex":[["",{"_index":234,"t":{"73":{"position":[[199,1],[269,1]]},"77":{"position":[[265,1],[275,1],[294,1],[304,1],[313,1],[323,1],[547,1],[761,1]]},"79":{"position":[[261,1],[1142,1]]},"83":{"position":[[434,1]]},"85":{"position":[[114,1],[185,1],[811,1]]},"87":{"position":[[1344,2],[1743,2]]},"91":{"position":[[1657,2],[2056,2],[2743,1]]},"95":{"position":[[16,1],[278,1]]},"105":{"position":[[537,1],[543,1],[545,1],[574,1],[576,1],[605,1],[607,1],[635,1],[637,1]]},"109":{"position":[[24,1]]},"125":{"position":[[517,1],[519,126],[646,1],[675,1],[677,126],[804,2],[905,1],[907,3],[947,1],[949,5],[998,1],[1052,1],[1112,1],[1191,1],[1269,1],[1340,1],[1404,1],[1476,1],[1548,1],[1626,1],[1695,1],[1756,1],[1758,3],[1812,1],[1871,1],[1935,1],[1937,3],[1993,1],[2055,1],[2112,126],[2239,1],[2267,1],[2269,126],[2409,1],[2604,1],[2606,3],[2620,1],[2640,4],[2895,1],[2897,3],[2901,2],[2932,1],[2973,2],[3005,1],[3032,4],[3298,1]]},"127":{"position":[[325,1],[327,126],[454,1],[483,1],[485,126],[612,2],[713,1],[715,3],[751,1],[753,5],[798,1],[847,1],[913,1],[992,1],[1049,1],[1051,5],[1097,1],[1151,1],[1223,1],[1324,1],[1326,5],[1374,1],[1434,1],[1503,1],[1564,126],[1691,1],[1719,1],[1721,126],[1862,1],[1915,1],[1959,2],[2004,2],[2065,1],[2067,3],[2081,1],[2113,1],[2149,2],[2166,4]]},"129":{"position":[[456,2],[765,1],[802,3],[806,1],[808,3]]},"131":{"position":[[115,1],[117,3],[135,1],[160,3],[164,1],[377,1],[379,2],[382,2],[385,1],[440,2]]},"141":{"position":[[259,1],[273,1],[403,2],[578,1],[600,1],[602,1],[604,2],[688,2]]},"143":{"position":[[177,4],[386,1],[418,1],[420,5],[462,1],[509,1],[519,1],[549,1],[551,2],[565,1],[621,2]]},"149":{"position":[[206,1],[554,1],[556,2],[559,2],[562,1],[686,1],[802,1],[804,2],[807,2],[810,1]]},"161":{"position":[[24,1],[157,2]]},"163":{"position":[[415,1],[544,1],[550,1],[552,1],[608,1],[610,1],[666,1],[668,1],[724,1],[726,1],[781,1],[783,1],[838,1],[840,1],[936,1],[1058,1],[1064,1],[1066,1],[1083,1],[1085,1],[1401,3]]},"169":{"position":[[202,2]]},"177":{"position":[[471,1],[483,1],[896,1],[898,1]]},"181":{"position":[[204,3],[229,2]]},"183":{"position":[[193,3],[223,2]]},"187":{"position":[[152,2]]},"189":{"position":[[44,6],[51,6],[58,5],[64,6],[71,4],[76,4],[81,5],[275,3]]},"191":{"position":[[233,2]]},"197":{"position":[[265,1],[358,2],[466,1],[516,2]]},"207":{"position":[[314,1],[357,1]]},"209":{"position":[[104,1],[139,2],[217,1],[308,1],[336,2],[403,2],[459,2],[470,1],[486,2],[537,2],[575,1],[577,2],[591,1],[593,2],[632,2]]},"211":{"position":[[120,1],[134,1],[154,3],[177,2],[267,1],[283,2],[324,2],[362,2],[401,2],[426,2],[460,2],[548,1],[550,2],[593,1],[595,3],[599,1],[601,2],[615,1],[617,2],[756,2],[816,2]]},"215":{"position":[[252,4],[399,4]]},"219":{"position":[[295,4],[357,1],[440,1],[450,1],[480,2],[518,1]]},"221":{"position":[[415,1],[513,2],[516,2],[519,1],[680,2],[879,4],[986,1],[988,3],[992,1],[994,1],[1030,1],[1053,2],[1087,1],[1113,1],[1152,1],[1154,2],[1167,1],[1174,1],[1176,2],[1194,1],[1196,2]]},"227":{"position":[[0,3],[4,1],[47,1],[49,1],[57,2],[60,1],[80,1],[96,1],[115,1],[132,1],[152,1],[173,1],[193,1],[211,1],[230,1],[232,2]]},"229":{"position":[[0,3],[4,1],[123,1],[177,1],[504,1]]},"231":{"position":[[0,3],[4,1],[38,1],[40,1],[67,1],[90,1],[92,1],[251,2],[313,2]]},"233":{"position":[[0,3],[4,1],[64,1],[66,1],[96,1],[126,1],[153,1],[155,1],[351,2],[397,2],[464,2],[510,2]]},"235":{"position":[[0,3],[4,1],[51,1],[53,1],[75,1],[77,1],[213,2],[260,2]]},"237":{"position":[[0,3],[4,1],[64,1],[66,1],[96,1],[126,1],[128,1],[334,2],[383,2]]},"239":{"position":[[0,3],[4,1],[51,1],[53,1],[75,1],[77,1],[240,2],[277,2]]},"241":{"position":[[0,3],[4,1],[80,1],[82,1],[106,1],[137,1],[139,1],[340,2],[385,2]]},"243":{"position":[[0,3],[4,1],[34,1],[36,1],[56,1],[76,1],[96,1],[98,1]]}}}],["0",{"_index":615,"t":{"125":{"position":[[1000,2],[1054,2]]},"127":{"position":[[800,2],[1099,2],[1376,2]]},"149":{"position":[[684,1]]},"169":{"position":[[362,1],[1208,1],[1272,1],[1320,1],[1355,1],[1425,1],[1509,1],[1534,1],[1569,1],[1653,1],[1675,1],[1703,1],[1778,1],[1803,1],[1838,1],[1920,1],[1942,1],[1974,1],[2037,1],[2113,1],[2181,1],[2387,1],[2409,1],[2435,1],[2499,1],[2548,1]]}}}],["0l",{"_index":895,"t":{"169":{"position":[[770,2]]}}}],["0l187.6",{"_index":905,"t":{"169":{"position":[[894,7]]}}}],["1",{"_index":1039,"t":{"169":{"position":[[2241,2]]},"211":{"position":[[158,4]]}}}],["1.6.9",{"_index":892,"t":{"169":{"position":[[746,5],[801,5]]}}}],["10.1",{"_index":1074,"t":{"169":{"position":[[2585,4]]}}}],["10.2",{"_index":1035,"t":{"169":{"position":[[2209,4]]}}}],["10.7",{"_index":1027,"t":{"169":{"position":[[2151,4]]}}}],["10.7.5",{"_index":955,"t":{"169":{"position":[[1308,6]]}}}],["100",{"_index":465,"t":{"91":{"position":[[2760,6]]}}}],["103.1v677.8l820.8",{"_index":906,"t":{"169":{"position":[[902,17]]}}}],["103.5",{"_index":911,"t":{"169":{"position":[[962,5],[974,5]]}}}],["104.6",{"_index":872,"t":{"169":{"position":[[549,5]]}}}],["105",{"_index":1015,"t":{"169":{"position":[[2023,3]]}}}],["107.2",{"_index":938,"t":{"169":{"position":[[1210,5]]}}}],["108.7",{"_index":913,"t":{"169":{"position":[[986,5]]}}}],["108.7z",{"_index":914,"t":{"169":{"position":[[998,9]]}}}],["108.8",{"_index":1040,"t":{"169":{"position":[[2244,5],[2255,5]]}}}],["109.8",{"_index":1021,"t":{"169":{"position":[[2090,5],[2102,5]]}}}],["11",{"_index":132,"t":{"35":{"position":[[115,2]]},"211":{"position":[[171,5],[205,3]]}}}],["11.8",{"_index":945,"t":{"169":{"position":[[1244,4]]}}}],["110.2",{"_index":898,"t":{"169":{"position":[[795,5]]}}}],["110.4",{"_index":1024,"t":{"169":{"position":[[2125,5]]}}}],["110.8",{"_index":893,"t":{"169":{"position":[[752,5],[807,5]]}}}],["111.6",{"_index":876,"t":{"169":{"position":[[582,5]]}}}],["114.9",{"_index":884,"t":{"169":{"position":[[652,5]]}}}],["115",{"_index":873,"t":{"169":{"position":[[555,3]]}}}],["1150.3v",{"_index":881,"t":{"169":{"position":[[625,7]]}}}],["116.8",{"_index":1022,"t":{"169":{"position":[[2096,5]]}}}],["117.9",{"_index":940,"t":{"169":{"position":[[1221,5]]}}}],["117.9v",{"_index":1085,"t":{"169":{"position":[[2679,6]]}}}],["12.4",{"_index":1073,"t":{"169":{"position":[[2580,4]]}}}],["120.6zm223.5",{"_index":973,"t":{"169":{"position":[[1446,12]]}}}],["12528e62",{"_index":414,"t":{"87":{"position":[[1671,8]]},"91":{"position":[[1984,8]]}}}],["127h",{"_index":1082,"t":{"169":{"position":[[2665,4]]}}}],["13.4",{"_index":908,"t":{"169":{"position":[[934,4]]}}}],["13.9",{"_index":1063,"t":{"169":{"position":[[2473,4]]}}}],["132.9",{"_index":986,"t":{"169":{"position":[[1552,5],[1780,5],[1791,5]]}}}],["134.4l190.1",{"_index":871,"t":{"169":{"position":[[537,11]]}}}],["134.4l603.8",{"_index":882,"t":{"169":{"position":[[633,11]]}}}],["136.1",{"_index":959,"t":{"169":{"position":[[1338,5]]}}}],["137.2",{"_index":961,"t":{"169":{"position":[[1357,5],[1368,5],[1511,5],[1522,5],[1821,5]]}}}],["139.3c0",{"_index":991,"t":{"169":{"position":[[1615,7]]}}}],["14.5",{"_index":1047,"t":{"169":{"position":[[2306,4]]}}}],["144.7h86.8l3361.6",{"_index":1080,"t":{"169":{"position":[[2638,17]]}}}],["146.3",{"_index":935,"t":{"169":{"position":[[1185,5],[1197,5],[2525,5]]}}}],["146.3c40.7",{"_index":1068,"t":{"169":{"position":[[2537,10]]}}}],["146.8",{"_index":982,"t":{"169":{"position":[[1528,5],[1815,5],[1827,5]]}}}],["147.3",{"_index":985,"t":{"169":{"position":[[1546,5],[1558,5],[1797,5]]}}}],["147.4",{"_index":936,"t":{"169":{"position":[[1191,5]]}}}],["147.9s62.2",{"_index":1067,"t":{"169":{"position":[[2514,10]]}}}],["147.9zm77.7",{"_index":963,"t":{"169":{"position":[[1374,11]]}}}],["149",{"_index":1066,"t":{"169":{"position":[[2501,3],[2510,3]]}}}],["149.5",{"_index":958,"t":{"169":{"position":[[1332,5],[1344,5],[2531,5]]}}}],["15.5",{"_index":1037,"t":{"169":{"position":[[2221,4],[2231,4],[2354,4],[2442,4]]}}}],["150",{"_index":549,"t":{"109":{"position":[[41,4],[654,4]]}}}],["1524",{"_index":855,"t":{"169":{"position":[[369,6]]}}}],["16.1",{"_index":956,"t":{"169":{"position":[[1315,4],[2120,4]]}}}],["16.6",{"_index":1033,"t":{"169":{"position":[[2188,4]]}}}],["160x600",{"_index":250,"t":{"77":{"position":[[267,7]]}}}],["169.9h69.7v",{"_index":974,"t":{"169":{"position":[[1459,11]]}}}],["17.1",{"_index":1069,"t":{"169":{"position":[[2555,4]]}}}],["172.6v",{"_index":870,"t":{"169":{"position":[[530,6]]}}}],["177v129.9l200.5",{"_index":897,"t":{"169":{"position":[[779,15]]}}}],["177v129.9l593.5",{"_index":890,"t":{"169":{"position":[[723,15]]}}}],["179.5",{"_index":929,"t":{"169":{"position":[[1144,5]]}}}],["179.5zm1756.2",{"_index":931,"t":{"169":{"position":[[1155,13]]}}}],["18.2",{"_index":1062,"t":{"169":{"position":[[2468,4]]}}}],["18.2h65.4v734.9c0",{"_index":1019,"t":{"169":{"position":[[2062,17]]}}}],["18.9l794",{"_index":880,"t":{"169":{"position":[[616,8]]}}}],["18.9v597.9l",{"_index":875,"t":{"169":{"position":[[570,11]]}}}],["188.3",{"_index":912,"t":{"169":{"position":[[968,5],[980,5],[992,5]]}}}],["19",{"_index":723,"t":{"139":{"position":[[212,2]]}}}],["19.8",{"_index":1029,"t":{"169":{"position":[[2161,4],[2171,4],[2281,4],[2569,4]]}}}],["198.8",{"_index":921,"t":{"169":{"position":[[1074,5],[1102,5]]}}}],["198.8h",{"_index":926,"t":{"169":{"position":[[1113,6]]}}}],["198.8h1499l",{"_index":923,"t":{"169":{"position":[[1085,11]]}}}],["1f08c1d9",{"_index":398,"t":{"87":{"position":[[799,8],[929,8],[1092,8],[1399,8]]},"91":{"position":[[1712,8]]}}}],["2.2c0",{"_index":1043,"t":{"169":{"position":[[2272,5]]}}}],["20",{"_index":553,"t":{"109":{"position":[[96,3]]}}}],["20.4",{"_index":1050,"t":{"169":{"position":[[2328,4]]}}}],["2000",{"_index":1319,"t":{"231":{"position":[[295,5]]}}}],["207zm619.1",{"_index":909,"t":{"169":{"position":[[939,10]]}}}],["218.9",{"_index":864,"t":{"169":{"position":[[459,5]]}}}],["218.9v437.9l",{"_index":862,"t":{"169":{"position":[[442,12]]}}}],["218.9v554.9z",{"_index":865,"t":{"169":{"position":[[469,15]]}}}],["22.5",{"_index":971,"t":{"169":{"position":[[1432,4]]}}}],["225h",{"_index":1086,"t":{"169":{"position":[[2686,4]]}}}],["23",{"_index":1044,"t":{"169":{"position":[[2278,2]]}}}],["23.6",{"_index":1049,"t":{"169":{"position":[[2323,4]]}}}],["239.5h73.9v883.3c7",{"_index":1000,"t":{"169":{"position":[[1730,18]]}}}],["241.1c0",{"_index":1007,"t":{"169":{"position":[[1882,7]]}}}],["25.1",{"_index":1076,"t":{"169":{"position":[[2595,4]]}}}],["25.1zm110.9",{"_index":1078,"t":{"169":{"position":[[2605,11]]}}}],["25.2l4.8",{"_index":1018,"t":{"169":{"position":[[2053,8]]}}}],["25.7",{"_index":966,"t":{"169":{"position":[[1400,4]]}}}],["250",{"_index":765,"t":{"143":{"position":[[545,3]]},"219":{"position":[[476,3]]}}}],["255",{"_index":1365,"t":{"243":{"position":[[201,4]]}}}],["26.8",{"_index":951,"t":{"169":{"position":[[1279,4],[1576,4],[1845,4],[1895,4],[2085,4]]}}}],["26.8l20.9",{"_index":1060,"t":{"169":{"position":[[2452,9]]}}}],["28.9",{"_index":1009,"t":{"169":{"position":[[1949,4]]}}}],["28.9c7.5",{"_index":975,"t":{"169":{"position":[[1471,8]]}}}],["280.2h",{"_index":918,"t":{"169":{"position":[[1056,6]]}}}],["280.2h82.5l52",{"_index":928,"t":{"169":{"position":[[1130,13]]}}}],["29.5",{"_index":1056,"t":{"169":{"position":[[2414,4]]}}}],["2}}content.copy1_{{gets",{"_index":1172,"t":{"191":{"position":[[183,26]]}}}],["30",{"_index":946,"t":{"169":{"position":[[1249,2],[1682,2],[1981,2],[2483,2],[2491,2]]}}}],["30.6c",{"_index":1053,"t":{"169":{"position":[[2376,5]]}}}],["30.6c3.2",{"_index":964,"t":{"169":{"position":[[1386,8]]}}}],["300",{"_index":764,"t":{"143":{"position":[[530,4]]},"209":{"position":[[481,4]]},"219":{"position":[[461,4]]}}}],["300x250",{"_index":252,"t":{"77":{"position":[[286,7],[798,8],[935,8],[997,8],[1148,7]]},"187":{"position":[[163,7]]},"209":{"position":[[53,8]]}}}],["300x50",{"_index":251,"t":{"77":{"position":[[277,8]]}}}],["300x600",{"_index":253,"t":{"77":{"position":[[296,7]]}}}],["305.1",{"_index":869,"t":{"169":{"position":[[524,5]]}}}],["30l",{"_index":1071,"t":{"169":{"position":[[2565,3]]}}}],["31.1",{"_index":992,"t":{"169":{"position":[[1628,4],[1927,4]]}}}],["31.6",{"_index":1059,"t":{"169":{"position":[[2430,4]]}}}],["312.9",{"_index":896,"t":{"169":{"position":[[773,5]]}}}],["32.1",{"_index":965,"t":{"169":{"position":[[1395,4]]}}}],["32.2",{"_index":1016,"t":{"169":{"position":[[2032,4],[2216,4]]}}}],["32.7",{"_index":1031,"t":{"169":{"position":[[2176,4]]}}}],["320x240",{"_index":255,"t":{"77":{"position":[[315,7]]}}}],["320x480(move",{"_index":256,"t":{"77":{"position":[[325,12]]}}}],["320x50",{"_index":254,"t":{"77":{"position":[[306,6]]}}}],["33.2l27.9",{"_index":1025,"t":{"169":{"position":[[2131,9]]}}}],["33.8",{"_index":969,"t":{"169":{"position":[[1420,4],[1660,4],[2394,4]]}}}],["3334d7e2",{"_index":356,"t":{"85":{"position":[[824,9],[1108,8]]},"87":{"position":[[584,8]]}}}],["336l387",{"_index":861,"t":{"169":{"position":[[434,7]]}}}],["34.3",{"_index":947,"t":{"169":{"position":[[1252,4],[1262,4]]}}}],["34.8",{"_index":1001,"t":{"169":{"position":[[1753,4]]}}}],["34.9",{"_index":1075,"t":{"169":{"position":[[2590,4]]}}}],["35.4",{"_index":977,"t":{"169":{"position":[[1484,4]]}}}],["35.9",{"_index":978,"t":{"169":{"position":[[1489,4],[1499,4],[1758,4],[1768,4]]}}}],["36.4v524.9h",{"_index":989,"t":{"169":{"position":[[1586,11]]}}}],["36.4v632h",{"_index":1005,"t":{"169":{"position":[[1855,9]]}}}],["36.5",{"_index":998,"t":{"169":{"position":[[1710,4]]}}}],["37.4",{"_index":1041,"t":{"169":{"position":[[2250,4]]}}}],["37c",{"_index":943,"t":{"169":{"position":[[1238,3]]}}}],["38.6",{"_index":1051,"t":{"169":{"position":[[2333,4],[2343,5]]}}}],["38.6zm348.9",{"_index":1052,"t":{"169":{"position":[[2364,11]]}}}],["384.3l312.9",{"_index":889,"t":{"169":{"position":[[711,11]]}}}],["387",{"_index":863,"t":{"169":{"position":[[455,3],[465,3]]}}}],["39.1",{"_index":1045,"t":{"169":{"position":[[2286,4]]}}}],["39.1c0",{"_index":1048,"t":{"169":{"position":[[2316,6]]}}}],["39.1s48.8",{"_index":1046,"t":{"169":{"position":[[2296,9]]}}}],["3916",{"_index":854,"t":{"169":{"position":[[364,4]]}}}],["3d58",{"_index":357,"t":{"85":{"position":[[834,4],[1117,4],[1376,4]]},"87":{"position":[[593,4]]}}}],["4",{"_index":508,"t":{"105":{"position":[[383,1]]}}}],["40.7",{"_index":1010,"t":{"169":{"position":[[1969,4]]}}}],["409cf070b151/version1",{"_index":402,"t":{"87":{"position":[[823,22],[953,22],[1116,22],[1423,23]]},"91":{"position":[[1736,23]]}}}],["41.3",{"_index":949,"t":{"169":{"position":[[1267,4]]}}}],["41.3v18.2c",{"_index":1034,"t":{"169":{"position":[[2198,10]]}}}],["41.8",{"_index":939,"t":{"169":{"position":[[1216,4],[1915,4]]}}}],["42.9",{"_index":995,"t":{"169":{"position":[[1648,4],[2108,4]]}}}],["44.5",{"_index":1008,"t":{"169":{"position":[[1890,4]]}}}],["45",{"_index":997,"t":{"169":{"position":[[1700,2],[2411,2]]}}}],["46.6",{"_index":1028,"t":{"169":{"position":[[2156,4],[2382,4]]}}}],["47.2",{"_index":1064,"t":{"169":{"position":[[2478,4]]}}}],["47.7",{"_index":1003,"t":{"169":{"position":[[1833,4]]}}}],["47de",{"_index":416,"t":{"87":{"position":[[1685,4]]},"91":{"position":[[1998,4]]}}}],["48.2",{"_index":987,"t":{"169":{"position":[[1564,4],[2013,4],[2291,4],[2338,4]]}}}],["48.8",{"_index":942,"t":{"169":{"position":[[1233,4],[1944,4],[2311,4],[2349,4],[2359,4]]}}}],["49.3",{"_index":925,"t":{"169":{"position":[[1108,4],[1327,4]]}}}],["49.8",{"_index":920,"t":{"169":{"position":[[1069,4],[1677,4]]}}}],["4a47",{"_index":400,"t":{"87":{"position":[[813,4],[943,4],[1106,4],[1413,4]]},"91":{"position":[[1726,4]]}}}],["4b6d4f50c7f0",{"_index":360,"t":{"85":{"position":[[849,14]]}}}],["4b6d4f50c7f0/client/project/ads/v1",{"_index":373,"t":{"85":{"position":[[1132,35]]}}}],["4b6d4f50c7f0/index.html",{"_index":379,"t":{"85":{"position":[[1391,23]]}}}],["4b6d4f50c7f0/version1",{"_index":393,"t":{"87":{"position":[[608,22]]}}}],["4c84",{"_index":358,"t":{"85":{"position":[[839,4],[1122,4],[1381,4]]},"87":{"position":[[598,4]]}}}],["5",{"_index":1169,"t":{"189":{"position":[[279,3],[303,1]]}}}],["5.4.5",{"_index":954,"t":{"169":{"position":[[1302,5]]}}}],["50",{"_index":1300,"t":{"229":{"position":[[531,4],[542,4],[567,4],[629,4],[635,5]]}}}],["50.4c20.9",{"_index":1026,"t":{"169":{"position":[[2141,9]]}}}],["50.9",{"_index":1032,"t":{"169":{"position":[[2183,4],[2193,4]]}}}],["50px",{"_index":1308,"t":{"229":{"position":[[652,6]]}}}],["51",{"_index":1364,"t":{"243":{"position":[[197,3]]}}}],["51.5",{"_index":930,"t":{"169":{"position":[[1150,4]]}}}],["52.5",{"_index":984,"t":{"169":{"position":[[1541,4],[1623,4]]}}}],["53.1",{"_index":922,"t":{"169":{"position":[[1080,4],[2437,4]]}}}],["53.6",{"_index":924,"t":{"169":{"position":[[1097,4],[2039,4]]}}}],["54.1c0",{"_index":1012,"t":{"169":{"position":[[2001,6]]}}}],["56.8",{"_index":967,"t":{"169":{"position":[[1405,4],[1415,4],[1810,4]]}}}],["56.8h",{"_index":972,"t":{"169":{"position":[[1440,5]]}}}],["57.3",{"_index":934,"t":{"169":{"position":[[1180,4]]}}}],["58.4",{"_index":970,"t":{"169":{"position":[[1427,4]]}}}],["58.4h73.9v767.6l93.8",{"_index":1079,"t":{"169":{"position":[[2617,20]]}}}],["58.9",{"_index":1013,"t":{"169":{"position":[[2008,4]]}}}],["6",{"_index":732,"t":{"141":{"position":[[72,1]]}}}],["6.4.9",{"_index":791,"t":{"151":{"position":[[253,7]]}}}],["60",{"_index":565,"t":{"109":{"position":[[455,3]]},"169":{"position":[[1437,2]]}}}],["60.5",{"_index":981,"t":{"169":{"position":[[1517,4],[1786,4]]}}}],["60.5c",{"_index":1072,"t":{"169":{"position":[[2574,5]]}}}],["60.6",{"_index":968,"t":{"169":{"position":[[1410,4],[2226,4]]}}}],["600",{"_index":1219,"t":{"209":{"position":[[533,3]]}}}],["61.6l",{"_index":941,"t":{"169":{"position":[[1227,5]]}}}],["6144e476bc73/v1/\",\"doall:v1",{"_index":418,"t":{"87":{"position":[[1695,29]]},"91":{"position":[[2008,29]]}}}],["62.2c",{"_index":1061,"t":{"169":{"position":[[2462,5]]}}}],["62.7",{"_index":1020,"t":{"169":{"position":[[2080,4],[2505,4]]}}}],["63.2",{"_index":962,"t":{"169":{"position":[[1363,4]]}}}],["63.3",{"_index":1077,"t":{"169":{"position":[[2600,4]]}}}],["637.7l",{"_index":891,"t":{"169":{"position":[[739,6]]}}}],["64.1zm652.6",{"_index":894,"t":{"169":{"position":[[758,11]]}}}],["64.3h2029c.5",{"_index":953,"t":{"169":{"position":[[1289,12]]}}}],["64.4zm",{"_index":878,"t":{"169":{"position":[[603,6]]}}}],["64.5v232l111.6",{"_index":877,"t":{"169":{"position":[[588,14]]}}}],["64.5v232l468",{"_index":887,"t":{"169":{"position":[[686,12]]}}}],["64z\"/>hello",{"_index":1311,"t":{"229":{"position":[[752,29]]}}}],["class=\"cont",{"_index":1102,"t":{"175":{"position":[[260,14]]},"177":{"position":[[280,14]]},"181":{"position":[[176,14]]},"183":{"position":[[165,14]]},"187":{"position":[[103,14]]},"189":{"position":[[153,14]]},"191":{"position":[[143,14]]},"193":{"position":[[225,14]]}}}],["class=\"cta",{"_index":1235,"t":{"215":{"position":[[314,11]]}}}],["class=\"listwrapp",{"_index":1144,"t":{"181":{"position":[[42,20]]}}}],["class=\"mainexit",{"_index":1108,"t":{"175":{"position":[[419,15]]},"177":{"position":[[393,15]]},"181":{"position":[[244,15]]},"183":{"position":[[238,15]]},"187":{"position":[[183,15]]},"189":{"position":[[337,15]]},"191":{"position":[[282,15]]},"193":{"position":[[496,15]]}}}],["class=\"parent_contain",{"_index":1310,"t":{"229":{"position":[[721,25]]}}}],["class=\"subtitl",{"_index":1180,"t":{"193":{"position":[[339,15],[403,15]]}}}],["class=\"{{@key",{"_index":1113,"t":{"177":{"position":[[338,16]]}}}],["clean",{"_index":571,"t":{"115":{"position":[[7,5]]},"119":{"position":[[17,5]]}}}],["cleanoutput",{"_index":581,"t":{"119":{"position":[[97,11]]}}}],["click",{"_index":664,"t":{"127":{"position":[[920,5]]},"199":{"position":[[90,8]]},"215":{"position":[[264,6]]}}}],["client",{"_index":367,"t":{"85":{"position":[[1008,7]]},"151":{"position":[[372,7]]}}}],["clone",{"_index":196,"t":{"61":{"position":[[20,5]]},"69":{"position":[[20,5]]}}}],["code",{"_index":204,"t":{"61":{"position":[[152,4]]},"69":{"position":[[155,4],[513,4]]},"79":{"position":[[610,5],[666,5]]},"95":{"position":[[37,4]]},"105":{"position":[[1770,5],[1857,6],[2132,5]]},"119":{"position":[[382,5]]},"125":{"position":[[13,4],[151,4],[324,5],[359,4],[391,4],[665,4],[2262,4],[3153,4],[3177,4],[3253,4]]},"127":{"position":[[40,4],[473,4],[1714,4]]},"129":{"position":[[846,4]]},"243":{"position":[[29,4]]}}}],["color",{"_index":1249,"t":{"219":{"position":[[370,6]]}}}],["column",{"_index":733,"t":{"141":{"position":[[74,7],[126,7],[1138,7]]},"143":{"position":[[106,8]]}}}],["combin",{"_index":372,"t":{"85":{"position":[[1068,11]]},"87":{"position":[[1148,13],[1454,12],[1538,8]]},"91":{"position":[[1438,13],[1767,12],[1851,8]]},"223":{"position":[[71,11]]}}}],["come",{"_index":419,"t":{"91":{"position":[[21,4]]}}}],["command",{"_index":48,"t":{"17":{"position":[[43,7]]},"27":{"position":[[30,7]]},"31":{"position":[[61,8]]},"53":{"position":[[99,7]]},"83":{"position":[[177,8],[238,8]]},"87":{"position":[[202,8],[713,7],[1010,7]]},"91":{"position":[[223,8],[976,7],[1252,7],[1486,8]]},"95":{"position":[[280,7],[339,9]]},"99":{"position":[[167,7],[375,9]]},"105":{"position":[[44,7],[166,7],[996,7],[1079,8],[1168,8]]}}}],["commandlin",{"_index":397,"t":{"87":{"position":[[684,12]]},"91":{"position":[[949,12]]}}}],["common",{"_index":366,"t":{"85":{"position":[[983,6]]},"91":{"position":[[2136,6]]},"175":{"position":[[8,6]]},"177":{"position":[[2,6]]}}}],["compar",{"_index":463,"t":{"91":{"position":[[2695,9]]},"189":{"position":[[181,10],[236,12],[249,10],[312,12]]}}}],["compat",{"_index":128,"t":{"35":{"position":[[74,10]]}}}],["compil",{"_index":425,"t":{"91":{"position":[[424,9]]},"105":{"position":[[1460,7],[2111,9],[2217,8]]}}}],["complet",{"_index":1203,"t":{"207":{"position":[[199,10]]}}}],["completed.*/onanimationcomplet",{"_index":779,"t":{"149":{"position":[[522,31]]}}}],["compon",{"_index":1159,"t":{"183":{"position":[[353,11]]}}}],["components/menuitem",{"_index":1150,"t":{"181":{"position":[[208,20]]}}}],["condit",{"_index":86,"t":{"21":{"position":[[106,12]]},"175":{"position":[[57,11]]}}}],["config",{"_index":458,"t":{"91":{"position":[[2610,6]]},"105":{"position":[[368,8]]},"163":{"position":[[224,7]]},"207":{"position":[[670,6]]},"209":{"position":[[17,6],[176,6],[197,7]]},"219":{"position":[[128,6]]},"221":{"position":[[222,6],[372,6],[640,9],[705,6],[1046,6],[1079,7]]},"223":{"position":[[92,6]]},"241":{"position":[[99,6]]}}}],["config(",{"_index":509,"t":{"105":{"position":[[385,10],[448,9]]}}}],["config.content.intro",{"_index":1274,"t":{"221":{"position":[[1129,22]]}}}],["configur",{"_index":289,"t":{"79":{"position":[[317,13],[881,13],[978,13],[1058,13],[1115,13]]},"203":{"position":[[0,13]]}}}],["confirm",{"_index":516,"t":{"105":{"position":[[833,7]]}}}],["connect",{"_index":641,"t":{"125":{"position":[[2744,10]]}}}],["console.error(error",{"_index":1333,"t":{"233":{"position":[[513,22]]},"235":{"position":[[263,22]]},"237":{"position":[[386,22]]},"239":{"position":[[280,22]]},"241":{"position":[[388,23]]}}}],["console.error(error));;loadall(['./custom_image.png",{"_index":1332,"t":{"233":{"position":[[400,54]]}}}],["console.log('al",{"_index":1330,"t":{"233":{"position":[[354,16],[467,16]]}}}],["console.log('imag",{"_index":1337,"t":{"235":{"position":[[216,18]]}}}],["console.log('mask",{"_index":1356,"t":{"241":{"position":[[343,17]]}}}],["console.log('oncomplet",{"_index":780,"t":{"149":{"position":[[564,32]]}}}],["console.log('onstart",{"_index":784,"t":{"149":{"position":[[812,25]]}}}],["console.log('script",{"_index":1342,"t":{"237":{"position":[[337,20]]}}}],["console.log(data",{"_index":1346,"t":{"239":{"position":[[243,18]]}}}],["const",{"_index":644,"t":{"125":{"position":[[2920,5]]},"127":{"position":[[1896,5]]}}}],["constructor",{"_index":1253,"t":{"221":{"position":[[140,12],[736,12]]}}}],["constructor(contain",{"_index":1271,"t":{"221":{"position":[[1056,22]]}}}],["contain",{"_index":595,"t":{"125":{"position":[[18,8]]},"193":{"position":[[72,8]]},"209":{"position":[[29,8]]},"211":{"position":[[14,8]]},"221":{"position":[[234,7],[345,7],[1020,9],[1115,10]]},"229":{"position":[[398,10],[476,9]]}}}],["content",{"_index":374,"t":{"85":{"position":[[1192,8]]},"125":{"position":[[815,7]]},"127":{"position":[[623,7]]},"139":{"position":[[421,7]]},"141":{"position":[[156,7],[199,7],[607,11]]},"143":{"position":[[554,10]]},"177":{"position":[[460,10]]},"209":{"position":[[580,10]]},"211":{"position":[[604,10],[661,7]]},"215":{"position":[[241,10],[388,10]]},"219":{"position":[[284,10],[383,7]]},"221":{"position":[[265,8],[868,10]]}}}],["content.bgimage\">onethreetwowidth",{"_index":1152,"t":{"183":{"position":[[33,9]]}}}],["packag",{"_index":286,"t":{"79":{"position":[[252,8]]},"91":{"position":[[66,8]]}}}],["package.json",{"_index":174,"t":{"53":{"position":[[62,13]]},"79":{"position":[[1098,14]]},"87":{"position":[[984,13]]},"91":{"position":[[1226,13]]},"105":{"position":[[127,15],[1007,12]]},"109":{"position":[[0,12]]},"161":{"position":[[0,12]]}}}],["page",{"_index":210,"t":{"67":{"position":[[153,5]]},"87":{"position":[[643,5]]},"91":{"position":[[613,4],[899,4],[1071,4],[1323,4],[2098,5],[2119,4],[2267,4]]},"211":{"position":[[835,4]]},"217":{"position":[[138,5]]},"223":{"position":[[132,5]]}}}],["pair",{"_index":658,"t":{"127":{"position":[[110,4]]}}}],["param",{"_index":1268,"t":{"221":{"position":[[996,6],[1032,6]]},"229":{"position":[[6,6]]},"231":{"position":[[42,6],[69,6]]},"233":{"position":[[68,6],[98,6],[128,6]]},"235":{"position":[[55,6]]},"237":{"position":[[68,6],[98,6]]},"239":{"position":[[55,6]]},"241":{"position":[[84,6],[108,6]]},"243":{"position":[[38,6],[58,6],[78,6]]}}}],["paramet",{"_index":50,"t":{"17":{"position":[[61,11],[133,9]]},"73":{"position":[[257,11]]},"87":{"position":[[6,10],[134,9]]},"91":{"position":[[5,9],[155,9]]},"111":{"position":[[27,10]]},"131":{"position":[[239,9],[327,9]]},"151":{"position":[[76,9]]},"187":{"position":[[28,9]]}}}],["parent",{"_index":762,"t":{"143":{"position":[[464,9]]},"207":{"position":[[58,8],[246,6]]},"209":{"position":[[106,9],[190,6]]},"229":{"position":[[391,6],[469,6]]}}}],["parent_contain",{"_index":1296,"t":{"229":{"position":[[486,17]]}}}],["part",{"_index":518,"t":{"105":{"position":[[991,4]]}}}],["partial",{"_index":1141,"t":{"179":{"position":[[45,9],[55,8],[182,8]]}}}],["pass",{"_index":1161,"t":{"187":{"position":[[19,4]]},"221":{"position":[[105,6],[694,6]]}}}],["past",{"_index":607,"t":{"125":{"position":[[648,5],[2245,5]]},"127":{"position":[[456,5],[1697,5]]}}}],["patch",{"_index":562,"t":{"109":{"position":[[409,5]]}}}],["path",{"_index":447,"t":{"91":{"position":[[2338,5]]},"169":{"position":[[408,5],[485,5],[1008,5]]},"207":{"position":[[554,5]]},"209":{"position":[[161,4]]}}}],["paus",{"_index":773,"t":{"149":{"position":[[246,6]]},"197":{"position":[[305,6]]},"199":{"position":[[167,5],[360,5]]}}}],["perform",{"_index":494,"t":{"99":{"position":[[472,7]]}}}],["permiss",{"_index":498,"t":{"99":{"position":[[521,12]]}}}],["phase",{"_index":426,"t":{"91":{"position":[[438,6],[722,6]]},"119":{"position":[[162,5]]}}}],["pick",{"_index":1228,"t":{"211":{"position":[[777,6]]}}}],["pin",{"_index":336,"t":{"85":{"position":[[369,6]]}}}],["place",{"_index":263,"t":{"77":{"position":[[432,7]]}}}],["placehold",{"_index":751,"t":{"141":{"position":[[724,11]]},"173":{"position":[[68,12]]}}}],["plain",{"_index":265,"t":{"77":{"position":[[598,5],[838,6]]}}}],["play",{"_index":1190,"t":{"199":{"position":[[162,4],[352,4]]},"221":{"position":[[650,7]]}}}],["play/paus",{"_index":789,"t":{"151":{"position":[[161,12]]},"199":{"position":[[324,10]]}}}],["pleas",{"_index":151,"t":{"40":{"position":[[108,6]]},"59":{"position":[[97,6],[171,6]]},"67":{"position":[[114,6]]},"77":{"position":[[136,6],[549,6],[763,6],[807,6],[888,6],[944,6],[1006,6]]},"85":{"position":[[187,6],[231,6],[282,6]]},"105":{"position":[[434,6],[1137,6]]},"125":{"position":[[3276,6]]},"129":{"position":[[459,6]]},"139":{"position":[[494,6]]},"153":{"position":[[360,6]]},"163":{"position":[[417,6],[938,6]]}}}],["plug",{"_index":796,"t":{"153":{"position":[[150,7]]}}}],["plugin",{"_index":140,"t":{"37":{"position":[[47,6]]}}}],["png",{"_index":1229,"t":{"211":{"position":[[802,3]]},"241":{"position":[[69,3]]}}}],["png|.jpg|.jpeg",{"_index":1177,"t":{"193":{"position":[[285,19]]}}}],["point",{"_index":26,"t":{"9":{"position":[[119,5]]},"209":{"position":[[349,6],[416,6]]}}}],["port",{"_index":527,"t":{"105":{"position":[[1521,4],[1590,4],[1654,5]]}}}],["posibl",{"_index":95,"t":{"25":{"position":[[6,7]]}}}],["posit",{"_index":1297,"t":{"229":{"position":[[506,9]]}}}],["possibl",{"_index":51,"t":{"17":{"position":[[79,8],[150,8]]},"87":{"position":[[256,8]]},"103":{"position":[[27,9],[146,9]]},"105":{"position":[[762,8]]},"125":{"position":[[3208,8]]},"139":{"position":[[107,8],[301,8]]},"149":{"position":[[84,8]]},"215":{"position":[[131,8]]}}}],["potenti",{"_index":566,"t":{"109":{"position":[[477,11]]}}}],["powershel",{"_index":467,"t":{"95":{"position":[[26,10]]}}}],["practic",{"_index":1158,"t":{"183":{"position":[[315,8]]}}}],["practis",{"_index":370,"t":{"85":{"position":[[1035,9]]}}}],["pre",{"_index":806,"t":{"157":{"position":[[9,3]]}}}],["prerequisit",{"_index":163,"t":{"47":{"position":[[0,13]]}}}],["press",{"_index":245,"t":{"77":{"position":[[171,6],[1052,6]]},"83":{"position":[[392,5]]},"85":{"position":[[755,5],[798,5]]},"105":{"position":[[465,6],[818,5],[1975,5]]},"151":{"position":[[193,8]]},"163":{"position":[[448,6],[962,6]]},"199":{"position":[[284,8],[369,8]]}}}],["pretti",{"_index":1263,"t":{"221":{"position":[[786,6]]}}}],["prettier",{"_index":305,"t":{"79":{"position":[[1081,8]]}}}],["prettierrc",{"_index":304,"t":{"79":{"position":[[1044,11]]}}}],["prev",{"_index":454,"t":{"91":{"position":[[2524,4]]}}}],["preview",{"_index":309,"t":{"81":{"position":[[25,7]]},"83":{"position":[[28,7],[194,7],[494,7]]},"85":{"position":[[741,8],[1254,8],[1319,8]]},"87":{"position":[[64,9],[247,8],[275,8],[705,7],[729,7],[750,7],[880,7],[897,7],[1060,7],[1368,7],[1648,7]]},"91":{"position":[[605,7],[642,7],[705,7],[891,7],[1063,7],[1315,7],[1478,7],[1681,7],[1961,7],[2090,7],[2111,7],[2657,7]]},"105":{"position":[[711,8],[1548,7],[2159,7],[2202,7]]},"109":{"position":[[707,8]]},"161":{"position":[[129,10]]},"205":{"position":[[8,7]]}}}],["preview:version1",{"_index":404,"t":{"87":{"position":[[1018,19],[1214,18]]},"91":{"position":[[1527,18]]}}}],["preview_accesskeyid",{"_index":348,"t":{"85":{"position":[[539,20]]}}}],["preview_accesskeysecret",{"_index":349,"t":{"85":{"position":[[560,23]]}}}],["preview_s3bucket",{"_index":350,"t":{"85":{"position":[[588,16]]}}}],["previous",{"_index":137,"t":{"37":{"position":[[0,11]]}}}],["primari",{"_index":544,"t":{"105":{"position":[[1988,7]]}}}],["printer",{"_index":306,"t":{"79":{"position":[[1090,7]]}}}],["proce",{"_index":249,"t":{"77":{"position":[[256,8],[1137,10]]},"163":{"position":[[533,10],[1047,10]]}}}],["process",{"_index":277,"t":{"79":{"position":[[106,7]]},"119":{"position":[[331,7]]}}}],["produc",{"_index":712,"t":{"131":{"position":[[453,9]]}}}],["product",{"_index":178,"t":{"53":{"position":[[118,11]]},"87":{"position":[[1245,10],[1589,10]]},"91":{"position":[[1382,10],[1558,10],[1902,10]]},"161":{"position":[[80,12]]}}}],["profil",{"_index":596,"t":{"125":{"position":[[67,7]]},"129":{"position":[[375,7],[473,7],[821,7],[893,8]]}}}],["project",{"_index":169,"t":{"49":{"position":[[79,7]]},"53":{"position":[[258,8]]},"69":{"position":[[303,7],[423,7]]},"71":{"position":[[31,7]]},"73":{"position":[[40,7],[103,8]]},"75":{"position":[[118,7]]},"79":{"position":[[278,7],[1190,8]]},"85":{"position":[[1094,8]]},"105":{"position":[[311,8]]},"125":{"position":[[467,8],[3267,8]]},"129":{"position":[[289,7]]},"139":{"position":[[485,8]]}}}],["promis",{"_index":66,"t":{"19":{"position":[[129,7]]}}}],["promise
becomes: /src/300x250/index.hbs
logo-on-white-bg
You can also do this with handlebars same result: /src/300x250/index.hbs
","s":"Using the default inline","u":"/display-advertising-docs/docs/guides/svg","h":"#using-the-default-inline","p":168},{"i":173,"t":"Guides Timeline Scrubber","s":"Timeline Scrubber","u":"/display-advertising-docs/docs/guides/timeline-scrubber","h":"","p":172},{"i":175,"t":"To use the timelineScrubber you need to import it in for example Banner.js and initialize it after creating your master GSAP timeline: Banner.js import timelineScrubber from '@mediamonks/display-temple/util/timelineScrubber';setAnimation(animation){ this.animation = animation; //creates new timeline and pauses it this.animation.getTimeline().paused(true); // this.animation.getTimeline().eventCallback('onComplete', this.handleAnimationComplete); if (DEVELOPMENT) { timelineScrubber(this.animation.getTimeline()); }}","s":"Configuration","u":"/display-advertising-docs/docs/guides/timeline-scrubber","h":"#configuration","p":172},{"i":177,"t":"Just as with GSDevTools, if you have your scrubber element \"in focus\" (you can do this by clicking on the timelineScrubber for example), you can use shortcuts to play pause and hide/show the Timeline Scrubber. Hide/show timeline scrubber element​ You can Hide or show the timeline by pressing the letter H on your keyboard. Play/pause timeline​ Toggle play or pause by pressing the Spacebar.","s":"Hotkeys","u":"/display-advertising-docs/docs/guides/timeline-scrubber","h":"#hotkeys","p":172},{"i":179,"t":"Lifecycle of a banner","s":"Lifecycle of a banner","u":"/display-advertising-docs/docs/lifecycle","h":"","p":178},{"i":181,"t":"Guides Temple utils","s":"Temple utils","u":"/display-advertising-docs/docs/guides/using-utils","h":"","p":180},{"i":183,"t":"/** * Shows information about the device used. * * @type {{ * isMobile: boolean * isOS: boolean * isOS9up: boolean * isPad: boolean * isSafari: boolean * isFirefox: boolean * isChrome: boolean * isEdge: boolean * isOpera: boolean * }} */import Browser from \"@mediamonks/display-temple/util/Browser\";console.log(Browser.isChrome)","s":"browser","u":"/display-advertising-docs/docs/guides/using-utils","h":"#browser","p":180},{"i":185,"t":"/** * @param {Array} copyElements */import fitText from \"@mediamonks/display-temple/util/fitText\";const title = document.body.querySelector('.title');const ctaCopy = document.body.querySelector('.cta_copy');fitText([title, ctaCopy]); Import fitText from the display-temple/util library. Use fitText on the child element where you want to apply the font size scaling, to fit the parent container. And put the styling i.g. font size, width and height on the parent container .parent_container { position: absolute; top: 50%; left: 50%; width: 80%; height: 50%; font-family: OpenSans, sans-serif; transform: translate(-50%, -50%); font-size: 50px;} Here is an example on how it would look like in the dom:
Hello World
","s":"fitText","u":"/display-advertising-docs/docs/guides/using-utils","h":"#fittext","p":180},{"i":187,"t":"/** * Wait for a DOM element to load. * * @param {string} selector * @param {number} time * * @returns {Promise} */import isElementLoaded from \"@mediamonks/display-temple/util/isElementLoaded\";isElementLoaded('svg.logo') .then((elm) => elm);isElementLoaded('.containerHidden', 2000) .then((elm) => elm);","s":"isElementLoaded","u":"/display-advertising-docs/docs/guides/using-utils","h":"#iselementloaded","p":180},{"i":189,"t":"/** * Loads multiple files and output an array with the objects * * @param {Array} urls * @param {boolean} sequential * @param {function} loader * * @return {Promise} */import loadAll from \"@mediamonks/display-temple/util/loadAll\";loadAll(['./my_example_image.png', './my_example_image2.png', './my_example_image3.png'], true) .then(() => console.log('all loaded!')) .catch((error) => console.error(error));;loadAll(['./custom_image.png']) .then(() => console.log('all loaded!')) .catch((error) => console.error(error));","s":"loadAll","u":"/display-advertising-docs/docs/guides/using-utils","h":"#loadall","p":180},{"i":191,"t":"/** * Loads an image and returns the image element * * @param {string} src * * @return {Promise} */import loadImage from \"@mediamonks/display-temple/util/loadImage\";loadImage(['./background.png']) .then(() => console.log('image loaded')) .catch((error) => console.error(error));","s":"loadImage","u":"/display-advertising-docs/docs/guides/using-utils","h":"#loadimage","p":180},{"i":193,"t":"/** * Loads multiple files and output an array with the objects * * @param {Array} urls * @param {boolean} sequential * * @return {Promise} */import loadScriptAll from \"@mediamonks/display-temple/util/loadScriptAll\";loadScriptAll(['./mycustomScript.js', './mycustomScript2.js', './mycustomScript3.js'], true); .then(() => console.log('scripts loaded')) .catch((error) => console.error(error));","s":"loadScriptAll","u":"/display-advertising-docs/docs/guides/using-utils","h":"#loadscriptall","p":180},{"i":195,"t":"/** * Loads an image and returns the image element * * @param {string} src * * @return {Promise} */import loadJSON from \"@mediamonks/display-temple/util/loadJSON\";loadJSON('https://jsonplaceholder.typicode.com/todos/1') .then((data) => console.log(data)) .catch((error) => console.error(error));","s":"loadJSON","u":"/display-advertising-docs/docs/guides/using-utils","h":"#loadjson","p":180},{"i":197,"t":"/** * Will add canvas elements to the wrapper that are masked by the png images * * @param {array} config * @param {HTMLElement} wrapper * * @return {Promise} */import masker from \"@mediamonks/display-temple/util/masker\";masker(['./bg.jpg', './bg_transparent_white_small.png'], document.body.querySelectorAll('.wrapper')) .then(() => console.log('mask ready')) .catch((error) => console.error(error));;","s":"masker","u":"/display-advertising-docs/docs/guides/using-utils","h":"#masker","p":180},{"i":199,"t":"/** * Convert the RGB to hex code * * @param {number} r * @param {number} g * @param {number} b * * @returns {string>} */import rgbToHex from \"@mediamonks/display-temple/util/rgbToHex\";rgbToHex(0, 51, 255)","s":"rgbToHex","u":"/display-advertising-docs/docs/guides/using-utils","h":"#rgbtohex","p":180},{"i":201,"t":"Guides Handlebars","s":"Handlebars","u":"/display-advertising-docs/docs/guides/using-handlebars","h":"","p":200},{"i":203,"t":"A templating language basically is a language which allows defining placeholders that should later on be replaced for the purpose of implementing designs. Handlebars is a simple templating language. It uses a template and an input object to generate HTML or other text formats. Handlebars templates look like regular text with embedded Handlebars expressions. You can check all the documentation about Handlebars on the official website. Below you can see some examples using handlebars with the framework.","s":"What is templating language?","u":"/display-advertising-docs/docs/guides/using-handlebars","h":"#what-is-templating-language","p":200},{"i":205,"t":"Another common use-case for block helpers is to evaluate conditional statements. As with the iterators, Handlebars' built-in if and unless control structures are implemented as regular Handlebars helpers. /src/shared/index.hbs
{{#if settings.hasCaptain}}
{{else}} \"captain\" {{/if}}
","s":"Conditionals","u":"/display-advertising-docs/docs/guides/using-handlebars","h":"#conditionals","p":200},{"i":207,"t":"A common use-case for block helpers is using them to define custom iterators. In fact, all Handlebars built-in helpers are defined as regular Handlebars block helpers. Let's take a look at how the built-in each helper works. /src/shared/index.hbs
{{#each content.images}} {{/each}}
/src/300x250/.richmediarc \"content\": { \"images\": { \"captain1\": \"./img/captain1.png\", \"captainStatic\": \"./img/captainStatic.png\", \"copy1\": \"./img/copy1.png\", \"copyBig1\": \"./img/copyBig1.png\", \"copyBig2\": \"./img/copyBig2.png\", \"copy2\": \"./img/copy2.png\", \"cards1\": \"./img/cards1.png\", \"cards2\": \"./img/cards2.png\", \"cards3\": \"./img/cards3.png\", \"copy3\": \"./img/copy3.png\", \"cardEndframe\": \"./img/cardEndframe.png\", \"logo\": \"./img/logo.png\", \"cta\": \"./img/cta.png\" } }","s":"Iterators","u":"/display-advertising-docs/docs/guides/using-handlebars","h":"#iterators","p":200},{"i":209,"t":"Handlebars allows for template reuse through partials. Partials are normal Handlebars templates that may be called directly by other templates. Below you can see some examples using partials with the framework:","s":"Partials","u":"/display-advertising-docs/docs/guides/using-handlebars","h":"#partials","p":200},{"i":211,"t":"/src/shared/components/menuItems.hbs
  • One
  • Two
  • Three
/src/shared/index.hbs
{{> components/menuItems }}
","s":"Basic partials","u":"/display-advertising-docs/docs/guides/using-handlebars","h":"#basic-partials","p":200},{"i":213,"t":"/src/shared/myExamplePartial.hbs

width: {{settings.size.width}}

height: {{settings.size.height}}

/src/shared/index.hbs
{{> myExamplePartial settings }}
If you repeat a lot of html, a good practice would be to separate it into components.","s":"Partials with parameter","u":"/display-advertising-docs/docs/guides/using-handlebars","h":"#partials-with-parameter","p":200},{"i":215,"t":"info To use these helpers you need display-dev-server v10.1.4 or more.","s":"Custom Helpers","u":"/display-advertising-docs/docs/guides/using-handlebars","h":"#custom-helpers","p":200},{"i":217,"t":"It is necessary to pass the parameter settings: /src/shared/index.hbs
{{getSize settings}} // output: 300x250
","s":"getSize","u":"/display-advertising-docs/docs/guides/using-handlebars","h":"#getsize","p":200},{"i":219,"t":"Make validations very easy, using operators ('==', '===', '!=', '!==', '<', '>', '<=', 'typeof'): /src/shared/index.hbs
{{#compare content.master \"MASTER1\"}} some_nice_layout {{/compare}} {{#compare content.frames \">\" 5}} There are more than 5 frames {{/compare}}
","s":"compare","u":"/display-advertising-docs/docs/guides/using-handlebars","h":"#compare","p":200},{"i":221,"t":"Similar to template strings. The number change now many brackets do you want to output. /src/shared/index.hbs
{{#brackets 2}}content.copy1_{{getSize settings}}{{/brackets} // output: {{content.copy1_300x250}}
","s":"brackets","u":"/display-advertising-docs/docs/guides/using-handlebars","h":"#brackets","p":200},{"i":223,"t":"Checks the extension of a variable or file. In this example, if the var contains an image extension, it shows an image, otherwise it shows the variable as a text string: /src/shared/index.hbs
{{#checkExtension this.subTitle '.png|.jpg|.jpeg'}} \"\" {{else}}
{{{this.title}}}
{{/checkExtension}}
","s":"checkExtension","u":"/display-advertising-docs/docs/guides/using-handlebars","h":"#checkextension","p":200},{"i":225,"t":"Configuration files","s":"Configuration files","u":"/display-advertising-docs/docs/richmediarc","h":"","p":224},{"i":227,"t":"The dev preview server supports live reloading of the data. If you make updates to the .richmediarc, you will see the changes being applied in the browser.","s":"Live reload","u":"/display-advertising-docs/docs/richmediarc","h":"#live-reload","p":224},{"i":229,"t":"Our system supports inheritance of values, by providing a ‘parent’ file from which to inherit all the values defined in that file. The ‘child’ file can then overwrite only the needed values, thereby completely eliminating any overlap between the parent and child files. For example, you can have a .richmediarc_fr > inheriting .richmediarc and .richmediarc > inheriting .sharedrc. This method is very useful and scalable, should the need arise to add even more languages or versions. info Each creative requires at least one .richmediarc file. Also file paths defined in the .richmediarc are always relative to the .richmediarc itself. You can create/combine as much as config files as you like, to share data and minimize the amount of files and duplicate data.","s":"Inheritance","u":"/display-advertising-docs/docs/richmediarc","h":"#inheritance","p":224},{"i":231,"t":"The .richmediarc config file contains all size (i.e. 300x250) and version (i.e ‘french’) specific data. { \"parent\": \"../shared/.sharedrc\", // optional: relative path from this config to the parent config\" \"settings\": { \"bundleName\": \"${content.type}_${settings.size.width}x${settings.size.height}\", \"entry\": { \"js\": \"./script/main.js\", // required: points to the starting js file. \"html\": \"./index.hbs\" // required: points to the main html or handlebars file }, \"size\": { \"width\": 300, // required: width of richmedia unit \"height\": 600 // required: height of richmedia unit } }, \"content\": { // optional: can put anything in here. }}","s":".richmediarc","u":"/display-advertising-docs/docs/richmediarc","h":"#richmediarc","p":224},{"i":233,"t":"The .sharedrc contains the overall data, such as for example, defining the logo file that is used in all the creatives. { \"settings\": { \"browserSupport\": [\"> 1%\", \"not ie 11\"], // optional: remove 'not ie 11' from the list if you want to support it. \"optimizations\": { \"css\": false, // by default is enabled \"image\": false, // by default is enabled \"js\": false, // by default is enabled \"html\": false // by default is enabled }, \"useOriginalFileNames\": false, // optional: use original file names without unique ideas generated by webpack \"fonts\": [ // optional: defining a subset for a font* { ... } }, \"content\": { // optional: can put anything in here. This content will be shared throughout all creatives \"bgcolor\": \"#FF0000\", \"logo\": \"./img/logo.png\" // optional: will be picked up by webpack and png minified. }} tip *Check this page for more info on font-subsetting.","s":".sharedrc","u":"/display-advertising-docs/docs/richmediarc","h":"#sharedrc","p":224},{"i":235,"t":"Below are some guides on how you can use these values in your creative.","s":"Basic .richmediarc concepts","u":"/display-advertising-docs/docs/richmediarc","h":"#basic-richmediarc-concepts","p":224},{"i":237,"t":"In your index.html or index.hbs, you can retrieve .richmediarc values using the data-bind attribute on HTML elements. This is made possible by the dataBind function which is imported by ./js/Banner.js. For example: /src/300x250/.richmediarc \"content\": {... \"cta\": \"Click here!\"} /src/300x250/index.hbs
/src/300x250/.richmediarc \"content\": {... \"bgImage\": \"../shared/images/background_300x250.jpg\"...} /src/300x250/index.hbs ","s":"Using .richmediarc values in regular HTML","u":"/display-advertising-docs/docs/richmediarc","h":"#using-richmediarc-values-in-regular-html","p":224},{"i":239,"t":"If you have chosen handlebars as your html file you can use handlebars notation to access the richmediarc data. For more details see this page.","s":"Using .richmediarc values in Handlebars","u":"/display-advertising-docs/docs/richmediarc","h":"#using-richmediarc-values-in-handlebars","p":224},{"i":241,"t":"Everything you put in the .richmediarc is accessible in css. So the display-dev-server (webpack) will add all the data from the config to the css through css vars. How would you access them? Well like this. var(--{node}-{childNode}-{childNode}) For example: /src/300x250/.richmediarc \"content\": {... \"bgcolor\": \"#FFFFFF\"...} /src/300x250/css/style.css body { background-color: var(--content-bgcolor);} /src/300x250/.richmediarc \"settings\": { \"size\": { \"width\": 300, \"height\": 250 }} /src/300x250/css/style.css .banner { width: var(--settings-size-width)px; height: var(--settings-size-height)px;}","s":"Using .richmediarc values in CSS","u":"/display-advertising-docs/docs/richmediarc","h":"#using-richmediarc-values-in-css","p":224},{"i":243,"t":"The main javascript file (conveniently named ./js/main.js) imports the .richmediarc files as follows and passes this object into the Banner constructor. import Banner from \"./Banner\";import Animation from \"./Animation\";// config will contain the final .richmediarc content. So if a .richmediarc// inherits from a other .richmediarc it will also contain those files.import config from \"richmediaconfig\";const banner = new Banner(config);//first load fonts, load images etc in the init animationbanner.init().then( () => { //initializes animation and creates main timeline banner.setAnimation(new Animation(document.querySelector('.banner'), config)); //plays banner banner.start() }) Which also passes the config object to the Animation constructor. From there, you are able to retrieve pretty much every value from the .richmediarc. Example: /src/300x250/.richmediarc \"content\": {... \"intro\": false...} /src/300x250/js/Animation.js export default class Animation extends FrameAnimation { /** * * @param {HTMLDivElement} container * @param {null} config */ constructor(container, config) { super(); this.container = container; if (config.content.intro) { // something } else { // something else } }}","s":"Using .richmediarc values in javascript","u":"/display-advertising-docs/docs/richmediarc","h":"#using-richmediarc-values-in-javascript","p":224},{"i":245,"t":"If you have a lot of data to cover you can use a Google Spreadsheet in combination with the config files. For more details see this page.","s":"Feeds (with Google Spreadsheet)","u":"/display-advertising-docs/docs/richmediarc","h":"#feeds-with-google-spreadsheet","p":224}],"index":{"version":"2.3.9","fields":["t"],"fieldVectors":[["t/2",[0,3.597,1,6.353]],["t/5",[2,7.314]],["t/7",[3,6.227,4,1.962,5,2.749,6,4.671,7,3.343,8,3.771,9,5.503,10,4.671,11,3.225,12,5.027,13,4.671]],["t/9",[14,2.866,15,4.711,16,3.537]],["t/11",[11,2.703,17,3.16,18,2.612,19,4.213,20,4.299,21,4.612,22,3.309,23,4.612,24,2.802,25,2.91,26,3.677,27,3.479,28,3.915,29,4.612,30,2.802,31,4.213,32,2.448,33,2.006,34,3.16,35,4.612,36,3.677,37,2.91,38,3.16]],["t/13",[39,1.5]],["t/15",[40,5.706,41,5.302,42,6.246]],["t/17",[4,2.432,43,3.287,44,4.434,45,2.498,46,2.498,47,5.657,48,4.12,49,3.762,50,4.434,51,4.12,52,2.227,53,4.12,54,3.187,55,4.434,56,3.87]],["t/19",[4,1.645,5,2.993,45,3.084,56,3.677,57,5.993,58,4.612,59,4.213,60,6.657,61,3.028,62,4.612,63,4.612,64,3.915,65,4.612,66,4.612,67,2.91,68,4.612,69,3.915,70,4.612,71,3.915]],["t/21",[40,5.706,41,5.302,72,4.481]],["t/23",[4,2.325,43,3.46,44,4.813,45,2.711,47,4.813,48,4.472,49,3.2,50,4.813,51,4.472,73,4.472,74,3.974,75,3.974]],["t/25",[4,1.47,5,2.489,11,2.417,14,2.287,16,2.335,24,1.65,39,0.63,41,2.306,45,2.864,56,2.166,57,6.298,58,2.717,59,5.083,60,5.565,61,1.784,62,2.717,63,2.717,64,2.306,65,2.717,66,2.717,67,2.602,68,2.717,69,4.723,70,2.717,71,3.5,76,3.261,77,3.11,78,2.717,79,4.231,80,1.488,81,2.335,82,1.151,83,3.5,84,2.166,85,2.505,86,3.5,87,2.717,88,3.074,89,3.074,90,4.666,91,4.124,92,2.717]],["t/27",[18,3.478,30,3.731,93,4.897,94,3.478]],["t/29",[4,1.572,5,0.563,7,0.685,8,0.773,14,1.228,17,0.773,18,3.215,20,1.43,22,0.809,24,2.243,25,2.039,26,2.577,27,2.019,28,2.273,32,0.599,33,1.605,34,0.773,39,0.946,43,1.959,45,0.58,46,0.58,74,0.851,75,3.324,76,1.894,82,1.564,85,1.211,95,1.366,96,1.276,97,1.276,98,0.618,99,1.128,100,0.899,101,2.57,102,0.809,103,0.957,104,2.446,105,1.692,106,1.03,107,0.957,108,1.03,109,0.957,110,1.626,111,1.993,112,4.408,113,0.599,114,4.078,115,4.177,116,1.692,117,1.82,118,3.657,119,1.128,120,1.993,121,1.503,122,1.276,123,0.741,124,1.276,125,0.957,126,1.128,127,1.128,128,3.626,129,2.255,130,0.957,131,2.255,132,2.255,133,1.276,134,1.993,135,1.43,136,1.276,137,1.128,138,2.273,139,1.993,140,1.276,141,1.03,142,2.273,143,0.957,144,1.128,145,0.957,146,1.128,147,0.957,148,1.128,149,0.71,150,1.43,151,1.993,152,2.446,153,1.128,154,1.128,155,1.128,156,1.128,157,1.128,158,0.957,159,0.599,160,1.128,161,2.677,162,1.993,163,0.773,164,1.128,165,1.128,166,1.128,167,1.128,168,1.128,169,1.128,170,1.128,171,1.128,172,0.957,173,1.276,174,1.276,175,1.276,176,1.276,177,1.276,178,1.276,179,2.255,180,0.773,181,0.639,182,1.03,183,0.957,184,1.276,185,0.899,186,0.899,187,0.899,188,1.03,189,1.128,190,0.685,191,0.957,192,0.957,193,1.03,194,1.276,195,1.276,196,1.993,197,1.092,198,1.276,199,1.03,200,0.741,201,1.82,202,1.128,203,1.276,204,1.276,205,1.276,206,1.03,207,1.276,208,1.276]],["t/32",[209,4.008,210,5.393]],["t/34",[12,5.027,13,4.671,14,2.525,56,4.387,82,2.332,98,3.015,211,4.387,212,4.387,213,5.027,214,4.151,215,4.387]],["t/36",[19,4.616,33,2.197,46,2.6,101,2.768,201,4.616,212,4.028,216,5.064,217,4.616,218,4.289,219,5.717,220,5.717,221,5.053,222,5.717,223,4.289,224,5.053,225,5.717]],["t/38",[39,1.449,113,3.315,226,6.246]],["t/40",[227,7.314]],["t/42",[181,3.597,211,4.028,228,6.347,229,5.717,230,4.353,231,4.008,232,4.616,233,4.028,234,5.717,235,4.028,236,3.318,237,5.053]],["t/44",[0,3.536,4,2.227,7,3.794,25,3.103,39,1.449,95,4.28,98,2.695,238,4.175,239,3.529,240,4.493,241,4.28,242,3.71,243,3.921]],["t/46",[4,1.567,5,2.194,39,1.019,64,3.729,192,3.729,230,3.01,244,3.152,245,2.459,246,4.971,247,2.772,248,4.971,249,4.971,250,4.013,251,3.314,252,4.971,253,2.669,254,4.971,255,6.501,256,4.393,257,4.971,258,4.971,259,4.393,260,4.971,261,4.971,262,4.393]],["t/48",[4,1.665,43,2.479,45,2.403,46,2.403,54,3.067,123,3.067,240,4.266,250,4.266,251,3.523,263,3.964,264,4.67,265,5.284,266,5.284,267,4.266,268,4.67,269,4.67,270,4.67,271,3.351,272,6.836,273,4.266,274,4.67,275,4.266]],["t/50",[39,1.474,276,5.804]],["t/52",[4,2.086,98,3.206,277,6.62,278,3.842,279,5.851,280,6.62,281,4.413]],["t/54",[14,3.018,25,3.372,101,3.604,102,3.834,110,3.247,135,4.719,240,4.882,282,3.834,283,5.345,284,5.345]],["t/56",[18,3.537,244,4.481,285,4.481]],["t/58",[4,1.962,18,3.116,24,3.343,25,3.472,76,3.225,81,3.116,138,4.671,143,4.671,244,3.948,286,5.027,287,5.027]],["t/60",[16,3.116,81,3.116,100,4.387,288,4.151,289,6.118,290,4.387,291,6.227,292,5.503,293,6.227,294,6.227]],["t/62",[4,1.802,39,1.172,72,3.625,85,3.069,110,3.069,251,3.811,295,5.717,296,4.289,297,5.717,298,5.717,299,4.616,300,5.053,301,5.053,302,5.053,303,5.717,304,4.616,305,3.462]],["t/64",[39,1.258,278,4.358,306,6.135,307,4.954,308,6.135,309,6.135,310,6.135,311,4.954,312,6.135,313,4.603,314,4.603]],["t/66",[4,2.155,5,3.018,11,3.541,30,3.671,93,4.817]],["t/68",[0,2.322,4,2.24,5,2.048,7,3.368,11,3.249,14,2.543,39,0.952,43,2.177,61,2.693,83,3.481,84,3.27,95,2.81,98,2.247,103,3.481,113,2.177,149,1.471,163,2.81,239,2.942,315,3.746,316,4.101,317,4.64,318,4.64,319,4.64,320,3.481,321,2.942,322,3.746,323,4.64,324,4.64]],["t/70",[0,2.748,4,1.731,11,2.845,39,1.437,52,2.227,103,4.12,113,2.576,305,3.326,325,5.492,326,4.854,327,4.854,328,6.193,329,5.437,330,3.326,331,4.671]],["t/72",[0,1.892,4,1.192,7,3.594,8,1.423,14,1.924,33,0.903,34,1.423,38,1.423,39,0.973,43,2.551,46,1.069,49,3.594,53,1.763,94,1.176,102,3.009,113,1.102,147,1.763,149,1.632,197,1.831,223,1.763,231,2.108,235,1.656,243,3.343,320,2.837,321,2.398,322,1.897,328,3.342,329,4.199,330,4.727,332,2.398,333,3.053,334,2.837,335,3.053,336,3.342,337,2.35,338,2.35,339,4.812,340,2.35,341,2.35,342,2.35,343,2.35,344,1.566,345,2.077,346,1.262,347,2.077,348,1.763,349,2.35,350,2.35,351,3.781,352,1.897,353,1.897,354,3.342,355,1.566,356,2.837,357,1.656,358,2.35,359,1.763]],["t/74",[0,1.284,6,3.773,7,1.377,11,2.101,16,2.03,22,1.627,32,2.359,33,3.198,34,2.456,36,1.808,38,1.554,39,1.031,67,2.262,76,1.329,77,1.71,78,2.268,92,2.268,94,2.03,99,2.268,108,2.071,123,1.489,149,0.951,163,1.554,191,1.925,192,1.925,197,1.242,209,1.431,213,3.275,231,1.431,245,0.961,255,2.268,271,2.572,344,1.71,355,1.71,356,1.925,359,3.773,360,3.275,361,2.566,362,2.268,363,2.268,364,2.566,365,2.071,366,2.268,367,1.808,368,1.71,369,2.566,370,2.071,371,2.566,372,5.503,373,3.585,374,2.566,375,5.03,376,2.566,377,2.071,378,2.566,379,1.489,380,1.489,381,2.566,382,2.268,383,2.566,384,2.566,385,2.268,386,2.566,387,2.566,388,2.566,389,2.566,390,2.566]],["t/76",[4,2.227,40,5.706,51,5.302]],["t/78",[30,3.794,77,4.711,93,4.979]],["t/80",[8,2.691,9,3.927,14,1.802,24,2.386,25,3.396,46,2.021,67,2.478,77,2.962,84,3.131,94,2.224,105,3.334,126,5.383,149,1.428,188,3.587,282,3.862,315,5.61,382,3.927,391,4.443,392,3.334,393,4.443,394,4.443,395,4.443,396,3.334,397,3.927,398,4.917,399,4.443,400,3.334,401,3.927,402,4.443,403,3.927,404,2.691]],["t/82",[8,3.947,76,3.376,77,5.192,84,4.592,398,5.262,400,4.889,405,5.262]],["t/84",[14,2.738,24,1.902,25,2.891,39,1.063,76,2.686,77,4.501,82,1.326,83,5.066,84,2.495,85,1.902,94,3.379,214,3.457,218,2.657,289,2.859,398,2.859,400,3.89,404,2.145,405,4.187,406,3.542,407,3.542,408,2.657,409,4.583,410,3.542,411,4.583,412,3.13,413,3.542,414,3.13,415,3.542,416,6.135,417,3.542,418,3.542,419,3.542,420,5.185,421,2.361,422,3.542,423,3.542,424,2.495,425,3.542,426,3.542]],["t/86",[16,3.478,30,4.343,93,4.897]],["t/88",[4,1.431,7,3.773,14,2.849,15,4.12,16,3.093,18,3.093,26,3.199,32,2.129,33,1.745,39,0.931,81,2.272,163,2.749,197,2.198,241,3.743,344,3.026,355,3.026,427,4.54,428,6.18,429,4.355,430,3.406,431,3.026,432,4.54,433,4.54,434,4.012,435,4.54,436,3.665]],["t/90",[0,1.691,4,0.463,5,0.648,7,1.369,11,0.761,12,2.059,14,0.595,16,2.287,18,0.735,19,1.186,20,1.617,21,2.254,22,1.617,23,1.298,24,3.058,25,2.548,29,1.298,30,2.167,31,2.059,32,0.689,33,0.564,34,0.889,35,1.298,36,3.219,37,2.548,38,2.767,39,0.523,43,0.689,45,1.16,49,1.369,59,1.186,61,1.48,67,1.884,76,2.091,81,2.693,82,0.55,85,0.788,98,0.711,102,1.617,105,1.102,106,1.186,110,0.788,119,2.987,128,2.342,149,1.399,159,0.689,180,0.889,191,1.102,200,0.852,202,1.298,214,1.7,241,0.889,243,1.797,245,0.55,288,1.7,296,3.028,305,0.889,315,2.059,320,1.102,321,0.931,322,1.186,329,1.035,330,4.098,331,1.7,332,2.143,333,2.059,334,1.102,335,1.186,347,1.298,348,1.913,355,0.979,359,1.102,365,1.186,368,0.979,392,1.102,403,2.987,404,0.889,429,1.035,430,1.102,436,1.186,437,1.468,438,1.468,439,2.55,440,0.931,441,1.035,442,1.468,443,1.468,444,1.468,445,0.735,446,1.186,447,1.468,448,1.468,449,2.254,450,1.468,451,1.298,452,1.102,453,1.468,454,1.468,455,1.468,456,1.468,457,1.468,458,1.102,459,1.298,460,1.468,461,3.379,462,2.55,463,2.55,464,1.035,465,1.468,466,2.059,467,1.468,468,1.468,469,1.468,470,1.298,471,0.889,472,1.298,473,1.298,474,1.468,475,1.468,476,1.468,477,1.186,478,2.254,479,1.468,480,1.468,481,1.468,482,1.468,483,1.468,484,1.468]],["t/92",[30,3.731,93,4.897,128,4.033,150,4.407]],["t/94",[0,1.819,8,2.201,14,1.474,24,3.343,25,2.946,30,1.951,36,3.723,37,2.946,38,2.201,39,1.084,43,1.704,54,2.109,76,1.882,101,1.76,125,2.726,128,3.613,149,0.852,150,4.334,171,3.212,239,2.304,282,3.35,305,2.201,320,2.726,321,2.304,332,2.304,352,2.934,353,2.934,365,2.934,366,3.212,385,3.212,404,3.2,449,3.212,451,3.212,485,2.56,486,3.634,487,2.56,488,2.304,489,2.934,490,3.212,491,3.212,492,3.634,493,3.634,494,3.212,495,2.934,496,3.212,497,3.634]],["t/96",[4,1.16,11,1.177,18,2.322,34,2.81,36,1.602,38,1.377,39,0.466,43,1.066,45,1.034,49,2.491,54,2.137,69,1.705,79,1.705,81,1.138,87,2.009,94,1.138,103,1.705,104,1.835,113,1.066,121,3.093,128,2.693,130,1.705,142,1.705,149,1.088,150,2.942,159,1.066,172,1.705,188,1.835,193,1.835,245,0.851,273,1.835,282,1.441,329,3.758,330,1.377,331,2.454,332,2.334,368,1.515,392,1.705,411,3.254,430,1.705,431,1.515,445,2.669,458,3.481,464,1.602,466,1.835,498,2.273,499,5.334,500,5.334,501,4.64,502,2.273,503,2.273,504,2.273,505,2.273,506,2.273,507,2.273,508,2.273,509,2.009,510,2.273,511,2.009,512,2.009,513,2.273,514,4.101,515,3.254,516,4.101,517,4.101,518,4.101,519,2.273,520,2.273,521,2.273,522,1.835,523,2.23,524,1.835,525,2.009,526,2.273,527,2.273,528,2.273,529,2.273,530,1.177,531,1.705,532,2.273,533,2.273,534,2.273,535,2.273]],["t/98",[4,0.556,5,0.779,14,1.573,18,1.942,20,1.893,22,1.119,24,2.74,25,2.164,26,2.734,27,1.991,28,2.24,34,1.808,39,0.936,43,0.828,45,1.358,61,1.025,75,1.177,76,2.364,82,1.911,85,1.603,95,1.808,98,0.855,101,0.855,104,3.133,105,1.324,106,1.425,107,1.324,108,1.425,109,2.24,110,0.948,111,3.43,112,5.215,113,1.401,114,4.896,128,3.99,134,1.56,137,1.56,141,1.425,142,2.911,143,1.324,144,1.56,145,1.324,146,2.639,147,1.324,148,1.56,149,0.7,150,2.461,151,4.034,152,4.472,153,4.034,154,4.034,155,4.034,156,4.034,157,4.034,158,2.24,159,0.828,160,1.56,161,3.43,162,2.639,163,1.069,164,1.56,165,1.56,166,1.56,167,1.56,168,1.56,169,1.56,170,1.56,187,1.244,241,1.069,243,2.734,352,1.425,353,1.425,445,0.884,458,1.324,494,1.56,496,1.56,514,2.639,515,1.56,516,1.56,517,1.56,518,1.56,523,1.069,536,2.986,537,1.56,538,1.56,539,1.765,540,1.765,541,1.765]],["t/101",[4,2.305,47,4.745,49,3.156,51,4.409,55,4.745,239,3.727,287,4.745,316,5.195,404,3.559,487,4.141,542,5.877,543,5.877,544,5.877,545,4.745]],["t/103",[44,5.804,45,3.27]],["t/105",[45,3.011,56,4.665,73,4.967,330,4.009,546,5.345,547,6.62,548,6.62]],["t/107",[52,2.818,100,4.897,290,4.897,466,5.611]],["t/109",[16,1.729,22,2.19,32,1.62,33,1.328,39,1.368,43,1.62,54,2.005,81,1.729,100,2.434,128,2.005,149,0.81,190,2.733,196,5.344,197,2.928,215,2.434,230,2.092,263,2.591,289,2.789,290,4.701,326,3.053,429,2.434,445,1.729,464,2.434,472,3.053,549,5.091,550,6.046,551,2.591,552,5.091,553,3.454,554,6.046,555,6.046,556,3.454,557,3.454,558,2.789,559,2.591,560,3.454,561,3.454,562,3.454,563,3.454,564,3.454,565,3.053,566,3.454,567,3.454,568,3.454,569,3.053,570,3.454]],["t/111",[52,2.818,110,3.731,209,3.875,571,6.143]],["t/113",[4,1.731,18,2.748,39,1.126,64,4.12,72,4.443,85,2.949,100,3.87,101,2.659,152,4.434,263,4.12,396,5.257,572,5.492,573,4.434,574,5.492,575,5.492,576,4.854,577,4.854,578,4.854]],["t/115",[4,1.4,5,1.962,39,1.425,61,2.579,67,2.478,72,2.817,102,2.817,110,2.386,120,3.927,209,2.478,223,3.334,274,3.927,363,3.927,431,2.962,434,3.927,522,4.917,571,3.927,579,4.443,580,4.443,581,4.443,582,5.383,583,3.927,584,4.443,585,4.443,586,3.927,587,4.443,588,4.443,589,4.443,590,3.334,591,4.443,592,6.09,593,4.443,594,4.443]],["t/117",[0,3.478,4,2.19,52,2.818,95,4.209]],["t/119",[52,2.866,244,4.481,245,2.646]],["t/121",[52,2.866,123,4.101,595,6.246]],["t/123",[52,2.866,181,3.537,228,5.706]],["t/125",[52,2.866,216,4.979,217,5.706]],["t/127",[52,2.818,244,4.407,285,4.407,290,4.897]],["t/129",[7,1.408,11,1.358,15,1.011,17,0.918,33,1.331,39,0.311,45,0.69,46,0.69,49,0.814,67,3.508,74,2.75,94,2.738,98,0.734,113,1.23,121,1.748,149,2.031,150,0.961,159,0.711,181,1.733,182,1.224,197,1.269,236,0.88,239,1.662,241,0.918,244,3.235,245,0.982,247,1.931,253,0.814,281,1.011,282,0.961,285,0.961,288,1.011,330,0.918,344,1.748,367,1.068,408,1.138,421,1.011,430,1.967,445,2.065,464,1.068,471,0.918,488,0.961,495,2.117,530,0.785,551,1.138,573,1.224,583,1.34,590,1.138,596,1.011,597,1.34,598,1.138,599,1.34,600,3.496,601,1.516,602,1.516,603,1.516,604,1.224,605,1.516,606,3.646,607,1.516,608,2.317,609,2.317,610,1.34,611,1.34,612,1.138,613,1.34,614,1.516,615,1.516,616,1.967,617,1.516,618,1.516,619,6.498,620,1.516,621,1.516,622,1.516,623,1.516,624,1.516,625,1.516,626,1.516,627,1.516,628,1.516,629,1.516,630,1.516,631,1.516,632,1.516,633,1.516,634,1.34,635,1.34,636,1.516,637,1.516,638,1.967,639,1.847,640,1.34,641,1.34,642,1.516,643,1.516,644,1.224,645,1.34,646,1.224,647,1.516,648,1.516,649,1.516,650,1.516,651,2.117,652,1.224,653,1.516,654,1.516,655,1.34,656,1.516,657,1.516]],["t/131",[30,1.926,39,0.451,46,1.001,67,2.531,82,0.824,94,1.102,98,1.066,102,1.396,113,1.033,121,2.391,149,2.083,159,1.682,163,1.333,193,1.777,239,1.396,244,2.878,247,1.228,253,1.926,281,2.391,321,1.396,367,1.551,421,2.391,431,1.468,445,1.795,530,1.14,538,1.946,590,1.652,600,4.324,606,3.17,608,3.17,609,3.17,610,1.946,611,1.946,612,1.652,613,1.946,616,3.405,634,1.946,635,1.946,638,1.652,639,1.551,640,1.946,645,1.946,655,1.946,658,2.201,659,2.201,660,2.201,661,2.201,662,2.201,663,2.201,664,2.201,665,1.777,666,2.201,667,2.201,668,2.201,669,2.201,670,2.201,671,2.201,672,2.201,673,2.201,674,2.201,675,2.201,676,2.201,677,2.201,678,2.201,679,2.201,680,2.201,681,2.201,682,2.201,683,2.201,684,3.587,685,2.201,686,3.587,687,2.201,688,1.946,689,2.201]],["t/133",[0,1.538,10,2.306,11,1.592,20,3.576,33,1.793,39,0.63,45,1.398,49,1.65,53,2.306,67,1.714,74,2.049,79,3.5,86,2.306,149,1.587,159,1.442,197,1.488,211,2.166,212,2.166,230,1.862,233,2.166,245,1.151,247,1.714,256,2.717,281,2.049,285,3.576,370,2.482,400,2.306,424,2.166,431,3.11,452,2.306,471,1.862,485,3.287,487,2.166,488,2.958,495,3.767,546,2.482,597,5.565,598,4.231,638,2.306,639,2.166,651,2.482,652,2.482,690,5.078,691,2.482,692,3.074,693,3.074,694,3.074,695,3.074,696,3.074,697,3.074,698,3.074,699,2.717,700,4.666,701,3.074,702,3.074,703,3.074]],["t/135",[8,2.025,33,1.285,38,2.025,39,1.347,46,2.261,72,2.12,74,3.313,95,3.01,113,1.568,149,1.907,158,2.509,159,1.568,245,1.252,281,2.229,313,2.509,327,2.955,346,1.795,431,2.229,471,2.025,487,4.627,523,3.01,598,2.509,600,2.509,638,2.509,639,2.356,651,2.7,652,2.7,690,3.729,691,2.7,704,6.567,705,4.97,706,4.97,707,3.344,708,3.344,709,2.955,710,3.344,711,3.344,712,3.344,713,3.344,714,2.7,715,2.955,716,2.955,717,3.344,718,3.344]],["t/137",[52,2.772,76,3.541,138,5.129,143,5.129,719,6.836]],["t/139",[52,2.866,101,3.422,135,4.481]],["t/141",[14,2.742,16,2.112,18,2.112,31,3.407,34,2.556,37,3.277,80,2.043,81,2.112,82,1.58,86,3.166,101,3.955,135,4.637,159,1.979,209,2.353,212,4.141,214,2.813,232,3.407,247,2.353,276,3.407,559,3.166,714,3.407,720,4.219,721,4.219,722,4.219,723,4.219,724,4.219,725,3.729,726,4.219,727,4.219,728,3.729]],["t/143",[76,3.6,80,3.365,101,3.365,135,4.407]],["t/145",[14,2.684,15,3.353,18,2.517,20,3.19,22,3.19,26,4.664,27,4.413,28,3.774,80,2.436,81,2.517,101,2.436,128,2.919,135,4.197,149,1.552,150,3.19,245,1.884,377,4.061,729,5.03,730,5.03,731,5.03,732,5.03,733,5.03]],["t/147",[5,0.982,14,0.902,18,1.113,20,1.411,24,1.943,33,0.855,46,1.646,49,1.943,76,1.152,82,0.833,94,1.113,101,2.214,117,1.796,123,2.653,135,4.325,139,1.966,147,1.669,149,1.957,159,1.044,163,2.191,189,1.966,200,1.291,201,1.796,209,1.241,212,2.549,223,1.669,245,1.355,247,1.241,267,2.921,271,1.411,273,1.796,276,1.796,278,2.1,282,1.411,305,1.347,314,2.714,329,2.549,330,3.964,332,2.294,333,2.921,334,2.714,335,2.921,336,3.198,344,1.483,345,1.966,346,1.195,354,1.966,414,1.966,477,1.796,490,1.966,491,1.966,525,1.966,546,1.796,714,1.796,725,1.966,728,1.966,734,2.225,735,2.225,736,2.225,737,2.225,738,2.225,739,1.966,740,2.225,741,2.225,742,2.225,743,2.225,744,2.225,745,2.225,746,2.225,747,2.225,748,2.225,749,3.618,750,3.618,751,2.225,752,2.225,753,2.225,754,2.225,755,1.669]],["t/149",[52,2.915,440,4.558]],["t/151",[4,1.242,5,1.74,6,2.957,7,3.008,11,2.042,32,2.627,39,1.149,46,1.793,49,2.116,79,2.957,85,2.116,94,3.261,98,2.712,101,1.909,158,4.889,210,2.957,241,3.393,245,1.476,288,2.628,348,2.957,409,3.484,436,3.182,440,3.552,471,2.387,530,2.042,573,3.182,756,3.942,757,3.942,758,3.942,759,3.484,760,3.942,761,3.484,762,2.777,763,4.202,764,3.942,765,2.777,766,3.942,767,3.942,768,3.942]],["t/153",[8,1.688,32,1.307,37,2.413,39,1.088,43,2.03,46,1.268,82,1.044,85,2.324,94,2.166,107,3.247,113,2.489,149,1.853,159,1.307,197,1.35,209,1.554,231,1.554,233,1.964,235,1.964,242,2.885,271,1.768,321,2.745,330,1.688,331,1.858,348,2.091,360,3.494,440,2.745,445,2.166,488,1.768,523,1.688,530,2.748,604,2.251,646,3.494,759,4.69,761,2.464,763,3.247,769,2.787,770,4.69,771,2.251,772,2.464,773,2.787,774,2.464,775,2.464,776,2.787,777,2.787,778,2.251,779,3.494,780,4.69,781,5.287,782,4.328,783,2.787,784,3.494,785,2.464,786,2.787,787,2.787]],["t/155",[5,1.662,15,2.51,17,2.28,39,0.772,71,4.067,82,1.41,101,1.823,113,1.766,141,3.039,149,2.006,185,2.652,186,2.652,197,1.823,238,2.824,440,3.437,523,2.28,530,1.95,691,3.039,762,3.819,763,2.824,770,3.327,771,3.039,778,3.039,779,3.039,780,3.327,781,3.327,788,3.764,789,3.327,790,3.764,791,3.764,792,3.764,793,3.764,794,3.327,795,3.764,796,2.824,797,3.327,798,3.039,799,3.327,800,3.764,801,3.764,802,3.764]],["t/157",[4,1.598,5,1.147,16,2.05,24,1.395,27,1.731,39,1.18,46,1.181,50,2.097,61,1.507,81,2.05,107,1.949,113,1.218,117,2.097,121,1.731,125,1.949,130,1.949,149,1.468,181,1.3,206,2.097,238,1.949,239,1.647,268,2.296,271,2.597,282,1.647,304,2.097,321,3.649,346,1.395,392,1.949,401,2.296,404,1.573,408,1.949,412,2.296,424,1.83,440,1.647,459,2.296,477,2.097,509,2.296,511,2.296,512,2.296,524,3.307,559,1.949,577,2.296,598,1.949,600,3.073,763,3.073,765,2.886,771,2.097,778,3.307,779,2.097,803,5.07,804,2.597,805,2.597,806,2.597,807,2.597,808,2.597,809,2.597,810,4.095,811,2.597,812,2.597,813,2.097,814,1.647,815,2.597,816,2.597,817,2.296,818,2.597,819,2.597,820,2.597,821,2.597,822,2.597,823,2.597,824,2.597,825,2.597,826,2.597,827,2.597,828,2.597,829,2.597,830,2.597,831,2.597,832,2.597,833,2.597,834,2.597,835,2.597]],["t/159",[52,2.915,314,5.393]],["t/161",[4,1.176,5,1.647,30,2.003,39,0.765,45,1.697,73,2.799,98,1.807,123,4.016,149,1.957,241,2.26,247,3.003,263,2.799,264,3.298,278,2.165,346,2.003,367,2.629,373,4.76,377,3.012,404,2.26,445,1.867,473,3.298,488,3.415,489,4.348,616,2.799,644,3.012,836,3.731,837,3.731,838,3.298,839,3.012,840,3.298,841,3.298,842,3.731,843,3.731,844,3.731,845,3.731,846,3.731,847,3.731,848,3.298,849,3.731,850,3.731]],["t/163",[14,1.969,27,3.237,39,1.326,54,2.818,69,3.643,82,1.818,83,3.643,95,2.941,123,2.818,130,3.643,145,3.643,214,3.237,283,4.291,307,3.92,332,3.079,446,3.92,523,2.941,524,3.92,582,4.291,690,3.643,765,3.421,851,4.855,852,4.855,853,4.855,854,4.855,855,4.291,856,4.855,857,4.855,858,4.855]],["t/165",[17,2.72,39,0.921,49,2.411,55,3.626,187,3.164,211,3.164,247,3.896,251,2.994,253,2.411,305,2.72,355,2.994,367,3.164,397,3.969,421,2.994,445,2.248,452,3.369,464,3.164,488,2.848,545,3.626,586,3.969,644,3.626,739,3.969,848,3.969,859,4.491,860,4.491,861,3.969,862,4.491,863,3.969,864,4.491,865,4.491,866,4.491,867,4.491,868,4.491,869,4.491,870,3.969]],["t/167",[52,2.866,98,3.422,278,4.101]],["t/169",[52,2.915,871,6.353]],["t/171",[86,0.681,101,0.44,149,0.213,183,1.721,190,0.488,226,2.505,288,0.605,304,0.733,355,0.605,380,0.527,565,0.803,616,5.294,813,0.733,871,2.027,872,1.616,873,0.803,874,2.027,875,0.908,876,0.488,877,1.331,878,1.331,879,0.908,880,1.66,881,1.66,882,0.908,883,0.908,884,0.908,885,0.908,886,0.908,887,0.908,888,0.908,889,0.908,890,0.908,891,0.908,892,0.908,893,1.66,894,0.908,895,0.908,896,0.908,897,0.908,898,0.908,899,0.908,900,0.908,901,0.908,902,0.908,903,0.908,904,0.908,905,0.908,906,0.908,907,0.908,908,0.908,909,0.908,910,0.908,911,0.908,912,0.908,913,0.908,914,0.908,915,0.908,916,0.908,917,0.908,918,0.908,919,0.908,920,0.908,921,0.908,922,1.66,923,1.66,924,0.908,925,0.908,926,0.908,927,0.908,928,0.908,929,0.908,930,0.908,931,0.908,932,0.908,933,0.908,934,0.908,935,0.908,936,0.908,937,0.908,938,0.908,939,0.908,940,0.908,941,1.66,942,2.294,943,0.908,944,0.908,945,0.908,946,0.908,947,0.908,948,0.908,949,0.908,950,1.66,951,1.66,952,1.66,953,0.908,954,1.66,955,1.66,956,0.908,957,0.908,958,0.908,959,0.908,960,0.908,961,0.908,962,0.908,963,0.908,964,0.908,965,2.294,966,0.908,967,0.908,968,0.908,969,1.66,970,0.908,971,0.908,972,3.301,973,0.908,974,0.908,975,0.908,976,3.301,977,1.66,978,1.66,979,0.908,980,1.66,981,3.301,982,0.908,983,0.908,984,0.908,985,0.908,986,1.66,987,0.908,988,2.294,989,0.908,990,0.908,991,3.301,992,0.908,993,0.908,994,0.908,995,0.908,996,0.908,997,2.294,998,1.66,999,2.294,1000,0.908,1001,0.908,1002,0.908,1003,0.908,1004,0.908,1005,0.908,1006,1.66,1007,0.908,1008,2.834,1009,2.834,1010,1.66,1011,1.66,1012,2.294,1013,0.908,1014,1.66,1015,2.294,1016,2.294,1017,2.834,1018,0.908,1019,0.908,1020,0.908,1021,0.908,1022,1.66,1023,3.301,1024,5.362,1025,1.66,1026,3.301,1027,1.66,1028,0.908,1029,0.908,1030,0.908,1031,0.908,1032,0.908,1033,0.908,1034,0.908,1035,0.908,1036,0.908,1037,0.908,1038,0.908,1039,0.908,1040,0.908,1041,0.908,1042,0.908,1043,0.908,1044,1.66,1045,0.908,1046,1.66,1047,0.908,1048,0.908,1049,0.908,1050,1.66,1051,1.66,1052,0.908,1053,1.66,1054,0.908,1055,0.908,1056,0.908,1057,0.908,1058,1.66,1059,2.834,1060,0.908,1061,0.908,1062,1.66,1063,0.908,1064,0.908,1065,0.908,1066,0.908,1067,2.834,1068,1.66,1069,1.66,1070,0.908,1071,0.908,1072,0.908,1073,0.908,1074,0.908,1075,0.908,1076,0.908,1077,0.908,1078,0.908,1079,0.908,1080,1.66,1081,0.908,1082,0.908,1083,1.66,1084,0.908,1085,0.908,1086,1.66,1087,0.908,1088,0.908,1089,0.908,1090,0.908,1091,0.908,1092,0.908,1093,0.908,1094,0.908,1095,1.66,1096,0.908,1097,0.908,1098,0.908,1099,0.908,1100,0.908,1101,0.908,1102,0.908,1103,0.908,1104,0.908,1105,0.908,1106,0.908,1107,0.908,1108,0.908,1109,0.908,1110,0.908,1111,0.908,1112,0.908,1113,0.908,1114,0.908,1115,0.908,1116,0.908,1117,0.908,1118,0.908,1119,0.908]],["t/173",[52,2.866,278,4.101,311,5.706]],["t/175",[4,2.022,5,2.119,10,3.601,15,3.2,39,0.984,46,2.183,71,3.601,80,2.324,82,1.797,123,2.786,149,1.809,245,2.403,278,3.724,281,4.278,314,3.601,838,4.242,839,3.875,840,4.242,841,4.242,1120,5.671,1121,4.8,1122,4.8,1123,4.8]],["t/177",[39,0.973,82,1.777,236,3.696,278,4.458,307,3.831,311,5.803,332,4.038,334,3.56,446,3.831,531,3.56,665,3.831,839,5.141,855,4.194,1120,4.194,1124,4.745,1125,4.745,1126,5.628,1127,6.368,1128,4.745,1129,4.745,1130,4.745,1131,4.745]],["t/179",[0,3.597,1132,7.188]],["t/181",[52,2.866,211,4.979,213,5.706]],["t/183",[39,0.865,74,2.813,80,2.043,116,6.348,149,2.099,243,2.973,245,1.58,296,3.166,531,3.166,1133,4.219,1134,4.219,1135,4.219,1136,4.219,1137,4.219,1138,4.219,1139,4.219,1140,4.219,1141,4.219,1142,4.219,1143,4.219]],["t/185",[14,1.294,39,0.654,43,1.497,80,1.545,82,1.195,149,1.613,159,1.497,185,3.382,186,3.382,216,4.521,236,1.852,245,1.797,275,2.576,292,2.82,357,2.248,368,2.127,370,2.576,578,2.82,596,3.199,646,2.576,688,4.242,762,4.065,796,3.601,876,2.577,1144,1.852,1145,3.191,1146,3.191,1147,5.768,1148,3.191,1149,3.191,1150,3.191,1151,3.191,1152,2.82,1153,3.191,1154,3.191,1155,3.191,1156,3.191,1157,3.191,1158,3.191,1159,3.191,1160,6.88,1161,3.191,1162,3.191,1163,3.191,1164,3.191,1165,3.191,1166,3.191,1167,3.191,1168,3.191,1169,2.82,1170,3.191,1171,3.191,1172,3.191]],["t/187",[80,2.351,149,2.043,180,2.941,236,2.818,245,1.818,253,2.607,485,3.421,489,3.92,699,4.291,814,3.079,1144,3.753,1169,4.291,1173,4.855,1174,4.855,1175,4.855,1176,4.855,1177,6.466,1178,4.855,1179,4.855,1180,4.855]],["t/189",[33,1.606,80,2.023,98,2.023,110,2.243,116,3.134,149,2.044,180,4.073,230,2.53,245,1.564,247,2.329,253,2.243,523,2.53,551,3.134,1144,3.903,1181,3.373,1182,3.692,1183,3.692,1184,4.177,1185,3.134,1186,4.177,1187,4.177,1188,4.177,1189,4.177,1190,5.836,1191,4.112,1192,4.177,1193,2.943]],["t/191",[80,2.465,149,2.039,180,4.041,190,3.582,236,2.955,245,1.906,253,3.582,814,3.228,1144,2.955,1185,3.82,1191,3.587,1193,3.587,1194,4.5,1195,5.091,1196,5.091,1197,5.091]],["t/193",[33,1.783,80,2.247,98,2.247,110,2.491,116,3.481,149,2.025,180,3.799,230,2.81,245,1.737,253,2.491,523,2.81,551,3.481,1144,3.64,1181,3.746,1182,4.101,1183,4.101,1185,3.481,1191,3.27,1193,3.27,1198,4.64,1199,4.64,1200,4.64,1201,4.64,1202,4.64]],["t/195",[80,2.465,149,2.039,180,3.084,190,3.582,236,2.955,245,1.906,253,3.582,814,3.228,1144,2.955,1185,3.82,1191,3.587,1193,3.587,1194,4.5,1203,5.091,1204,5.091,1205,5.091,1206,5.091]],["t/197",[53,3.481,54,2.693,80,2.247,149,2.025,190,2.491,200,2.693,236,2.693,245,1.737,253,2.491,1144,3.64,1181,3.746,1191,3.27,1193,3.27,1207,4.64,1208,6.273,1209,4.64,1210,4.101,1211,4.64,1212,4.64,1213,4.64,1214,4.64,1215,4.64,1216,4.64,1217,4.64]],["t/199",[67,2.739,80,2.379,149,2.023,245,1.839,253,2.637,405,3.966,485,5.153,814,3.115,1144,4.244,1218,4.912,1219,4.912,1220,4.912,1221,4.912,1222,4.912,1223,4.912,1224,4.912,1225,4.912,1226,4.912]],["t/201",[52,2.915,380,4.172]],["t/203",[17,2.556,37,2.353,39,1.205,42,3.729,72,2.676,82,1.58,94,2.112,127,3.729,145,3.166,209,4.077,210,5.073,215,2.973,218,3.166,230,2.556,231,2.353,242,2.813,284,3.729,299,3.407,360,3.407,368,2.813,380,4.462,537,3.729,545,3.407,604,3.407,709,3.729,785,3.729,1227,4.219,1228,5.194,1229,3.407,1230,4.219,1231,4.219,1232,4.219]],["t/205",[39,0.931,172,3.406,238,3.406,251,3.026,259,4.012,269,4.012,279,4.012,299,3.665,379,2.635,380,3.587,396,3.406,599,4.012,872,3.199,876,4.237,877,2.635,878,2.635,1229,3.665,1233,4.012,1234,4.99,1235,4.54,1236,4.012,1237,4.54,1238,2.749,1239,2.749,1240,4.54,1241,4.54,1242,4.54,1243,4.54,1244,2.749,1245,2.749]],["t/207",[39,0.984,138,2.394,149,1.504,172,2.394,187,4.065,190,1.713,191,2.394,214,2.127,242,3.199,251,2.127,368,2.127,379,1.852,380,2.785,396,3.601,441,2.248,530,1.653,784,2.576,872,2.248,876,3.445,877,1.852,878,1.852,1229,2.576,1233,4.242,1234,5.18,1236,2.82,1238,1.933,1239,1.933,1244,1.933,1245,1.933,1246,3.191,1247,3.191,1248,3.191,1249,3.191,1250,3.191,1251,3.191,1252,3.191,1253,3.191,1254,3.191,1255,3.191,1256,3.191,1257,3.191,1258,3.191,1259,3.191,1260,3.191,1261,3.191,1262,3.191,1263,3.191,1264,3.191,1265,3.191,1266,3.191,1267,3.191,1268,3.191,1269,3.191,1270,3.191,1271,3.191,1272,3.191,1273,2.82,1274,2.82,1275,3.191]],["t/209",[37,3.103,39,1.141,72,3.529,82,2.084,209,4.329,215,3.921,218,4.175,313,4.175,380,4.101,488,3.529,863,4.919,1276,5.565,1277,7.764,1278,5.565]],["t/211",[149,1.616,379,3.106,876,4.473,877,3.106,878,3.106,1238,3.241,1239,3.241,1244,3.241,1245,3.241,1279,5.352,1280,5.352,1281,5.352,1282,5.352,1283,5.352,1284,5.352,1285,5.352,1286,5.352]],["t/213",[13,3.82,102,3.228,149,1.564,197,2.465,231,2.839,379,2.955,876,4.241,877,2.955,878,2.955,1238,3.084,1239,3.084,1244,3.084,1245,3.084,1287,5.091,1288,5.091,1289,5.091,1290,5.091,1291,5.091,1292,5.091,1293,5.091,1294,5.091,1295,5.091]],["t/215",[14,2.602,16,3.212,39,1.316,46,2.919,81,3.212,346,3.446,471,3.887,1234,5.181,1296,6.417]],["t/217",[73,4.12,95,3.326,110,2.949,149,1.288,197,3.393,339,4.434,379,3.187,876,4.364,877,3.187,878,3.187,1238,3.326,1239,3.326,1244,3.326,1245,3.326,1297,4.854,1298,5.492]],["t/219",[1,3.927,39,0.911,61,2.579,149,1.978,206,6.036,267,3.587,286,3.587,346,2.386,379,2.579,794,3.927,876,4.014,877,2.579,878,2.579,1238,2.691,1239,2.691,1244,2.691,1245,2.691,1299,4.443,1300,4.443,1301,4.443,1302,4.443,1303,4.443,1304,4.443,1305,6.09]],["t/221",[43,2.359,45,2.288,110,3.554,149,1.179,209,2.805,288,3.353,379,2.919,485,3.544,789,4.446,814,3.19,861,4.446,876,4.221,877,2.919,878,2.919,1238,3.047,1239,3.047,1244,3.047,1245,3.047,1306,6.619,1307,5.03,1308,5.03,1309,5.03]],["t/223",[17,2.582,33,1.638,82,1.596,121,3.945,190,3.178,379,2.474,531,4.44,559,3.198,596,2.841,612,3.198,814,2.703,872,3.003,873,5.231,876,4.143,877,2.474,878,2.474,1228,3.767,1238,2.582,1239,3.584,1244,2.582,1245,2.582,1310,5.918,1311,4.262,1312,4.262,1313,4.262,1314,4.262,1315,5.918,1316,5.918,1317,4.262,1318,4.262]],["t/225",[33,2.763,372,6.353]],["t/227",[16,2.941,32,2.757,37,3.277,41,4.409,45,2.673,61,3.411,81,2.941,128,3.411,181,2.941,296,4.409,302,5.195,755,4.409,1152,5.195,1319,5.877,1320,5.877]],["t/229",[32,3.281,33,3,39,0.68,46,2.247,54,1.925,82,1.242,85,1.781,109,2.489,149,1.158,163,2.009,181,2.473,183,2.489,187,2.337,199,2.678,200,1.925,210,2.489,242,3.294,262,2.932,270,2.932,275,3.989,285,2.103,286,2.678,346,1.781,424,2.337,445,2.955,452,2.489,471,2.009,487,2.337,522,2.678,569,2.932,755,2.489,765,2.337,796,3.707,1321,3.317,1322,5.782,1323,3.317,1324,3.317,1325,3.317,1326,3.317,1327,3.317,1328,3.317,1329,3.317,1330,3.317,1331,3.317,1332,3.317,1333,2.932,1334,3.317,1335,3.317]],["t/231",[6,3.664,7,2.622,30,1.753,32,1.532,33,2.248,85,1.753,109,2.45,149,2.006,159,1.532,181,1.634,183,2.45,185,3.441,186,3.441,197,1.581,200,3.395,224,4.316,231,2.723,233,2.301,235,3.441,271,2.071,305,2.957,339,2.637,357,2.301,380,1.895,424,4.574,530,1.691,596,2.177,716,2.886,762,3.441,772,2.886,774,2.886,775,2.886,796,3.664,797,2.886,798,2.637,1336,4.883,1337,3.266,1338,3.266,1339,3.266,1340,2.886]],["t/233",[17,1.583,33,1.582,39,0.844,43,1.226,75,1.742,82,0.979,91,2.31,94,1.308,113,2.709,149,2.01,159,1.226,181,1.308,182,2.11,190,1.403,197,1.266,199,2.11,216,3.587,217,3.323,221,2.31,231,1.457,235,1.842,242,2.744,285,2.61,290,1.842,300,3.638,301,3.638,305,3.804,331,1.742,344,1.742,346,1.403,356,1.961,357,1.842,408,1.961,429,2.9,458,1.961,471,1.583,530,2.132,558,5.072,576,2.31,596,1.742,690,4.333,755,1.961,765,1.842,813,2.11,817,2.31,870,2.31,1210,2.31,1273,3.638,1274,2.31,1340,2.31,1341,2.614,1342,2.614,1343,2.614,1344,2.614,1345,2.31,1346,2.614,1347,2.614,1348,2.614]],["t/235",[39,1.402,52,2.772,215,4.817,285,4.335,445,3.421]],["t/237",[32,1.959,39,0.857,82,1.564,149,1.368,159,1.959,181,3.366,190,2.243,228,3.373,231,2.329,232,3.373,233,2.943,236,2.424,237,3.692,241,2.53,245,1.564,247,2.329,441,4.112,445,2.091,530,3.023,641,3.692,665,3.373,784,3.373,872,2.943,874,5.158,876,2.243,1349,3.692,1350,4.177,1351,4.177,1352,5.158,1353,4.177,1354,4.177,1355,4.177,1356,4.177,1357,4.177,1358,4.177,1359,4.177,1360,4.177]],["t/239",[32,2.796,33,2.291,37,3.324,39,1.222,48,4.472,75,3.974,181,2.983,231,3.324,346,3.2,380,4.281,421,3.974,1361,5.961,1362,5.961]],["t/241",[0,1.819,14,1.474,16,1.819,32,1.704,54,2.109,81,1.819,82,1.361,149,1.776,181,1.819,185,3.723,186,3.723,192,2.726,197,3.015,200,2.109,313,2.726,356,4.671,357,2.56,362,3.212,421,3.522,429,2.56,441,3.723,478,3.212,530,2.737,612,5.448,762,4.387,798,2.934,799,3.212,1345,4.67,1352,3.212,1363,5.284,1364,3.634,1365,5.284,1366,3.634,1367,3.634,1368,3.634,1369,3.634]],["t/243",[0,2.832,4,0.794,5,1.112,10,1.89,32,2.894,33,1.536,38,2.421,82,0.943,113,1.182,123,3.581,149,1.998,180,2.421,190,1.353,200,3.811,216,1.775,230,2.421,245,1.497,250,2.034,271,2.535,278,1.462,287,2.034,331,1.679,359,1.89,404,1.526,441,1.775,445,1.261,470,2.227,530,2.071,558,2.034,590,1.89,595,2.227,596,3.772,639,1.775,1126,2.227,1144,2.32,1297,3.533,1322,2.227,1333,2.227,1349,2.227,1370,2.519,1371,3.998,1372,2.519,1373,2.519,1374,2.519,1375,2.519,1376,2.519,1377,2.519,1378,2.519,1379,2.519,1380,2.519,1381,2.519,1382,2.519,1383,2.519,1384,2.519,1385,2.519,1386,2.519,1387,2.519,1388,2.519,1389,2.519,1390,2.519,1391,2.519]],["t/245",[13,4.537,33,2.324,37,3.372,39,1.24,48,4.537,75,4.031,125,4.537,142,4.537,181,3.026,200,3.509,346,3.247,440,3.834,715,5.345]]],"invertedIndex":[["",{"_index":149,"t":{"29":{"position":[[1657,2],[2056,2],[2743,1]]},"68":{"position":[[199,1],[269,1]]},"72":{"position":[[265,1],[275,1],[294,1],[304,1],[313,1],[323,1],[547,1],[761,1]]},"74":{"position":[[261,1],[1142,1]]},"80":{"position":[[16,1],[278,1]]},"90":{"position":[[537,1],[543,1],[545,1],[574,1],[576,1],[605,1],[607,1],[635,1],[637,1]]},"94":{"position":[[434,1]]},"96":{"position":[[114,1],[185,1],[811,1]]},"98":{"position":[[1344,2],[1743,2]]},"109":{"position":[[24,1]]},"129":{"position":[[517,1],[519,126],[646,1],[675,1],[677,126],[804,2],[905,1],[907,3],[947,1],[949,5],[998,1],[1052,1],[1112,1],[1191,1],[1269,1],[1340,1],[1404,1],[1476,1],[1548,1],[1626,1],[1695,1],[1756,1],[1758,3],[1812,1],[1871,1],[1935,1],[1937,3],[1993,1],[2055,1],[2112,126],[2239,1],[2267,1],[2269,126],[2409,1],[2604,1],[2606,3],[2620,1],[2640,4],[2895,1],[2897,3],[2901,2],[2932,1],[2973,2],[3005,1],[3032,4],[3298,1]]},"131":{"position":[[325,1],[327,126],[454,1],[483,1],[485,126],[612,2],[713,1],[715,3],[751,1],[753,5],[798,1],[847,1],[913,1],[992,1],[1049,1],[1051,5],[1097,1],[1151,1],[1223,1],[1324,1],[1326,5],[1374,1],[1434,1],[1503,1],[1564,126],[1691,1],[1719,1],[1721,126],[1862,1],[1915,1],[1959,2],[2004,2],[2065,1],[2067,3],[2081,1],[2113,1],[2149,2],[2166,4]]},"133":{"position":[[456,2],[765,1],[802,3],[806,1],[808,3]]},"135":{"position":[[115,1],[117,3],[135,1],[160,3],[164,1],[377,1],[379,2],[382,2],[385,1],[440,2]]},"145":{"position":[[24,1],[157,2]]},"147":{"position":[[415,1],[544,1],[550,1],[552,1],[608,1],[610,1],[666,1],[668,1],[724,1],[726,1],[781,1],[783,1],[838,1],[840,1],[936,1],[1058,1],[1064,1],[1066,1],[1083,1],[1085,1],[1401,3]]},"153":{"position":[[259,1],[273,1],[358,1],[406,2],[426,1],[583,1],[605,1],[607,1],[609,2],[623,1],[697,2]]},"155":{"position":[[177,4],[199,1],[388,1],[420,1],[422,5],[464,1],[511,1],[521,1],[551,1],[553,2],[567,1],[623,2]]},"157":{"position":[[376,4],[398,1],[400,3],[426,3],[430,5]]},"161":{"position":[[206,1],[554,1],[556,2],[559,2],[562,1],[686,1],[802,1],[804,2],[807,2],[810,1]]},"171":{"position":[[202,2]]},"175":{"position":[[265,1],[358,2],[466,1],[516,2]]},"183":{"position":[[0,3],[4,1],[47,1],[49,1],[57,2],[60,1],[80,1],[96,1],[115,1],[132,1],[152,1],[173,1],[193,1],[211,1],[230,1],[232,2]]},"185":{"position":[[0,3],[4,1],[123,1],[177,1],[504,1]]},"187":{"position":[[0,3],[4,1],[38,1],[40,1],[67,1],[90,1],[92,1],[251,2],[313,2]]},"189":{"position":[[0,3],[4,1],[64,1],[66,1],[96,1],[126,1],[153,1],[155,1],[351,2],[397,2],[464,2],[510,2]]},"191":{"position":[[0,3],[4,1],[51,1],[53,1],[75,1],[77,1],[213,2],[260,2]]},"193":{"position":[[0,3],[4,1],[64,1],[66,1],[96,1],[126,1],[128,1],[334,2],[383,2]]},"195":{"position":[[0,3],[4,1],[51,1],[53,1],[75,1],[77,1],[240,2],[277,2]]},"197":{"position":[[0,3],[4,1],[80,1],[82,1],[106,1],[137,1],[139,1],[340,2],[385,2]]},"199":{"position":[[0,3],[4,1],[34,1],[36,1],[56,1],[76,1],[96,1],[98,1]]},"207":{"position":[[471,1],[483,1],[896,1],[898,1]]},"211":{"position":[[204,3],[229,2]]},"213":{"position":[[193,3],[223,2]]},"217":{"position":[[152,2]]},"219":{"position":[[44,6],[51,6],[58,5],[64,6],[71,4],[76,4],[81,5],[275,3]]},"221":{"position":[[233,2]]},"229":{"position":[[314,1],[357,1]]},"231":{"position":[[104,1],[139,2],[217,1],[308,1],[336,2],[403,2],[459,2],[470,1],[486,2],[537,2],[575,1],[577,2],[591,1],[593,2],[632,2]]},"233":{"position":[[120,1],[134,1],[154,3],[177,2],[267,1],[283,2],[324,2],[362,2],[401,2],[426,2],[460,2],[548,1],[550,2],[593,1],[595,3],[599,1],[601,2],[615,1],[617,2],[756,2],[816,2]]},"237":{"position":[[252,4],[399,4]]},"241":{"position":[[295,4],[357,1],[440,1],[450,1],[480,2],[518,1]]},"243":{"position":[[415,1],[513,2],[516,2],[519,1],[680,2],[879,4],[986,1],[988,3],[992,1],[994,1],[1030,1],[1053,2],[1087,1],[1113,1],[1152,1],[1154,2],[1167,1],[1174,1],[1176,2],[1194,1],[1196,2]]}}}],["0",{"_index":616,"t":{"129":{"position":[[1000,2],[1054,2]]},"131":{"position":[[800,2],[1099,2],[1376,2]]},"161":{"position":[[684,1]]},"171":{"position":[[362,1],[1208,1],[1272,1],[1320,1],[1355,1],[1425,1],[1509,1],[1534,1],[1569,1],[1653,1],[1675,1],[1703,1],[1778,1],[1803,1],[1838,1],[1920,1],[1942,1],[1974,1],[2037,1],[2113,1],[2181,1],[2387,1],[2409,1],[2435,1],[2499,1],[2548,1]]}}}],["0l",{"_index":925,"t":{"171":{"position":[[770,2]]}}}],["0l187.6",{"_index":935,"t":{"171":{"position":[[894,7]]}}}],["1",{"_index":813,"t":{"157":{"position":[[214,1]]},"171":{"position":[[2241,2]]},"233":{"position":[[158,4]]}}}],["1.6.9",{"_index":922,"t":{"171":{"position":[[746,5],[801,5]]}}}],["10.1",{"_index":1103,"t":{"171":{"position":[[2585,4]]}}}],["10.2",{"_index":1065,"t":{"171":{"position":[[2209,4]]}}}],["10.7",{"_index":1057,"t":{"171":{"position":[[2151,4]]}}}],["10.7.5",{"_index":985,"t":{"171":{"position":[[1308,6]]}}}],["100",{"_index":208,"t":{"29":{"position":[[2760,6]]}}}],["103.1v677.8l820.8",{"_index":936,"t":{"171":{"position":[[902,17]]}}}],["103.5",{"_index":941,"t":{"171":{"position":[[962,5],[974,5]]}}}],["104.6",{"_index":902,"t":{"171":{"position":[[549,5]]}}}],["105",{"_index":1045,"t":{"171":{"position":[[2023,3]]}}}],["107.2",{"_index":968,"t":{"171":{"position":[[1210,5]]}}}],["108.7",{"_index":943,"t":{"171":{"position":[[986,5]]}}}],["108.7z",{"_index":944,"t":{"171":{"position":[[998,9]]}}}],["108.8",{"_index":1069,"t":{"171":{"position":[[2244,5],[2255,5]]}}}],["109.8",{"_index":1051,"t":{"171":{"position":[[2090,5],[2102,5]]}}}],["11",{"_index":301,"t":{"62":{"position":[[115,2]]},"233":{"position":[[171,5],[205,3]]}}}],["11.8",{"_index":975,"t":{"171":{"position":[[1244,4]]}}}],["110.2",{"_index":928,"t":{"171":{"position":[[795,5]]}}}],["110.4",{"_index":1054,"t":{"171":{"position":[[2125,5]]}}}],["110.8",{"_index":923,"t":{"171":{"position":[[752,5],[807,5]]}}}],["111.6",{"_index":906,"t":{"171":{"position":[[582,5]]}}}],["114.9",{"_index":914,"t":{"171":{"position":[[652,5]]}}}],["115",{"_index":903,"t":{"171":{"position":[[555,3]]}}}],["1150.3v",{"_index":911,"t":{"171":{"position":[[625,7]]}}}],["116.8",{"_index":1052,"t":{"171":{"position":[[2096,5]]}}}],["117.9",{"_index":970,"t":{"171":{"position":[[1221,5]]}}}],["117.9v",{"_index":1114,"t":{"171":{"position":[[2679,6]]}}}],["12.4",{"_index":1102,"t":{"171":{"position":[[2580,4]]}}}],["120.6zm223.5",{"_index":1003,"t":{"171":{"position":[[1446,12]]}}}],["12528e62",{"_index":166,"t":{"29":{"position":[[1984,8]]},"98":{"position":[[1671,8]]}}}],["127h",{"_index":1111,"t":{"171":{"position":[[2665,4]]}}}],["13.4",{"_index":938,"t":{"171":{"position":[[934,4]]}}}],["13.9",{"_index":1092,"t":{"171":{"position":[[2473,4]]}}}],["132.9",{"_index":1016,"t":{"171":{"position":[[1552,5],[1780,5],[1791,5]]}}}],["134.4l190.1",{"_index":901,"t":{"171":{"position":[[537,11]]}}}],["134.4l603.8",{"_index":912,"t":{"171":{"position":[[633,11]]}}}],["136.1",{"_index":989,"t":{"171":{"position":[[1338,5]]}}}],["137.2",{"_index":991,"t":{"171":{"position":[[1357,5],[1368,5],[1511,5],[1522,5],[1821,5]]}}}],["139.3c0",{"_index":1021,"t":{"171":{"position":[[1615,7]]}}}],["14.5",{"_index":1076,"t":{"171":{"position":[[2306,4]]}}}],["144.7h86.8l3361.6",{"_index":1109,"t":{"171":{"position":[[2638,17]]}}}],["146.3",{"_index":965,"t":{"171":{"position":[[1185,5],[1197,5],[2525,5]]}}}],["146.3c40.7",{"_index":1097,"t":{"171":{"position":[[2537,10]]}}}],["146.8",{"_index":1012,"t":{"171":{"position":[[1528,5],[1815,5],[1827,5]]}}}],["147.3",{"_index":1015,"t":{"171":{"position":[[1546,5],[1558,5],[1797,5]]}}}],["147.4",{"_index":966,"t":{"171":{"position":[[1191,5]]}}}],["147.9s62.2",{"_index":1096,"t":{"171":{"position":[[2514,10]]}}}],["147.9zm77.7",{"_index":993,"t":{"171":{"position":[[1374,11]]}}}],["149",{"_index":1095,"t":{"171":{"position":[[2501,3],[2510,3]]}}}],["149.5",{"_index":988,"t":{"171":{"position":[[1332,5],[1344,5],[2531,5]]}}}],["15.5",{"_index":1067,"t":{"171":{"position":[[2221,4],[2231,4],[2354,4],[2442,4]]}}}],["150",{"_index":549,"t":{"109":{"position":[[41,4],[654,4]]}}}],["1524",{"_index":885,"t":{"171":{"position":[[369,6]]}}}],["16.1",{"_index":986,"t":{"171":{"position":[[1315,4],[2120,4]]}}}],["16.6",{"_index":1063,"t":{"171":{"position":[[2188,4]]}}}],["160x600",{"_index":337,"t":{"72":{"position":[[267,7]]}}}],["169.9h69.7v",{"_index":1004,"t":{"171":{"position":[[1459,11]]}}}],["17.1",{"_index":1098,"t":{"171":{"position":[[2555,4]]}}}],["172.6v",{"_index":900,"t":{"171":{"position":[[530,6]]}}}],["177v129.9l200.5",{"_index":927,"t":{"171":{"position":[[779,15]]}}}],["177v129.9l593.5",{"_index":920,"t":{"171":{"position":[[723,15]]}}}],["179.5",{"_index":959,"t":{"171":{"position":[[1144,5]]}}}],["179.5zm1756.2",{"_index":961,"t":{"171":{"position":[[1155,13]]}}}],["18.2",{"_index":1091,"t":{"171":{"position":[[2468,4]]}}}],["18.2h65.4v734.9c0",{"_index":1049,"t":{"171":{"position":[[2062,17]]}}}],["18.9l794",{"_index":910,"t":{"171":{"position":[[616,8]]}}}],["18.9v597.9l",{"_index":905,"t":{"171":{"position":[[570,11]]}}}],["188.3",{"_index":942,"t":{"171":{"position":[[968,5],[980,5],[992,5]]}}}],["19",{"_index":760,"t":{"151":{"position":[[212,2]]}}}],["19.8",{"_index":1059,"t":{"171":{"position":[[2161,4],[2171,4],[2281,4],[2569,4]]}}}],["198.8",{"_index":951,"t":{"171":{"position":[[1074,5],[1102,5]]}}}],["198.8h",{"_index":956,"t":{"171":{"position":[[1113,6]]}}}],["198.8h1499l",{"_index":953,"t":{"171":{"position":[[1085,11]]}}}],["1f08c1d9",{"_index":153,"t":{"29":{"position":[[1712,8]]},"98":{"position":[[799,8],[929,8],[1092,8],[1399,8]]}}}],["2",{"_index":816,"t":{"157":{"position":[[226,2]]}}}],["2.0",{"_index":820,"t":{"157":{"position":[[479,3]]}}}],["2.2c0",{"_index":1072,"t":{"171":{"position":[[2272,5]]}}}],["20",{"_index":553,"t":{"109":{"position":[[96,3]]}}}],["20.4",{"_index":1079,"t":{"171":{"position":[[2328,4]]}}}],["2000",{"_index":1179,"t":{"187":{"position":[[295,5]]}}}],["207zm619.1",{"_index":939,"t":{"171":{"position":[[939,10]]}}}],["218.9",{"_index":894,"t":{"171":{"position":[[459,5]]}}}],["218.9v437.9l",{"_index":892,"t":{"171":{"position":[[442,12]]}}}],["218.9v554.9z",{"_index":895,"t":{"171":{"position":[[469,15]]}}}],["22.5",{"_index":1001,"t":{"171":{"position":[[1432,4]]}}}],["225h",{"_index":1115,"t":{"171":{"position":[[2686,4]]}}}],["23",{"_index":1073,"t":{"171":{"position":[[2278,2]]}}}],["23.6",{"_index":1078,"t":{"171":{"position":[[2323,4]]}}}],["239.5h73.9v883.3c7",{"_index":1030,"t":{"171":{"position":[[1730,18]]}}}],["241.1c0",{"_index":1037,"t":{"171":{"position":[[1882,7]]}}}],["25.1",{"_index":1105,"t":{"171":{"position":[[2595,4]]}}}],["25.1zm110.9",{"_index":1107,"t":{"171":{"position":[[2605,11]]}}}],["25.2l4.8",{"_index":1048,"t":{"171":{"position":[[2053,8]]}}}],["25.7",{"_index":996,"t":{"171":{"position":[[1400,4]]}}}],["250",{"_index":799,"t":{"155":{"position":[[547,3]]},"241":{"position":[[476,3]]}}}],["255",{"_index":1226,"t":{"199":{"position":[[201,4]]}}}],["26.8",{"_index":981,"t":{"171":{"position":[[1279,4],[1576,4],[1845,4],[1895,4],[2085,4]]}}}],["26.8l20.9",{"_index":1089,"t":{"171":{"position":[[2452,9]]}}}],["28.9",{"_index":1039,"t":{"171":{"position":[[1949,4]]}}}],["28.9c7.5",{"_index":1005,"t":{"171":{"position":[[1471,8]]}}}],["280.2h",{"_index":948,"t":{"171":{"position":[[1056,6]]}}}],["280.2h82.5l52",{"_index":958,"t":{"171":{"position":[[1130,13]]}}}],["29.5",{"_index":1085,"t":{"171":{"position":[[2414,4]]}}}],["2}}content.copy1_{{gets",{"_index":1307,"t":{"221":{"position":[[183,26]]}}}],["30",{"_index":976,"t":{"171":{"position":[[1249,2],[1682,2],[1981,2],[2483,2],[2491,2]]}}}],["30.6c",{"_index":1082,"t":{"171":{"position":[[2376,5]]}}}],["30.6c3.2",{"_index":994,"t":{"171":{"position":[[1386,8]]}}}],["300",{"_index":798,"t":{"155":{"position":[[532,4]]},"231":{"position":[[481,4]]},"241":{"position":[[461,4]]}}}],["300x250",{"_index":339,"t":{"72":{"position":[[286,7],[798,8],[935,8],[997,8],[1148,7]]},"217":{"position":[[163,7]]},"231":{"position":[[53,8]]}}}],["300x50",{"_index":338,"t":{"72":{"position":[[277,8]]}}}],["300x600",{"_index":340,"t":{"72":{"position":[[296,7]]}}}],["305.1",{"_index":899,"t":{"171":{"position":[[524,5]]}}}],["30l",{"_index":1100,"t":{"171":{"position":[[2565,3]]}}}],["31.1",{"_index":1022,"t":{"171":{"position":[[1628,4],[1927,4]]}}}],["31.6",{"_index":1088,"t":{"171":{"position":[[2430,4]]}}}],["312.9",{"_index":926,"t":{"171":{"position":[[773,5]]}}}],["32.1",{"_index":995,"t":{"171":{"position":[[1395,4]]}}}],["32.2",{"_index":1046,"t":{"171":{"position":[[2032,4],[2216,4]]}}}],["32.7",{"_index":1061,"t":{"171":{"position":[[2176,4]]}}}],["320x240",{"_index":342,"t":{"72":{"position":[[315,7]]}}}],["320x480(move",{"_index":343,"t":{"72":{"position":[[325,12]]}}}],["320x50",{"_index":341,"t":{"72":{"position":[[306,6]]}}}],["33.2l27.9",{"_index":1055,"t":{"171":{"position":[[2131,9]]}}}],["33.8",{"_index":999,"t":{"171":{"position":[[1420,4],[1660,4],[2394,4]]}}}],["3334d7e2",{"_index":515,"t":{"96":{"position":[[824,9],[1108,8]]},"98":{"position":[[584,8]]}}}],["336l387",{"_index":891,"t":{"171":{"position":[[434,7]]}}}],["34.3",{"_index":977,"t":{"171":{"position":[[1252,4],[1262,4]]}}}],["34.8",{"_index":1031,"t":{"171":{"position":[[1753,4]]}}}],["34.9",{"_index":1104,"t":{"171":{"position":[[2590,4]]}}}],["35.4",{"_index":1007,"t":{"171":{"position":[[1484,4]]}}}],["35.9",{"_index":1008,"t":{"171":{"position":[[1489,4],[1499,4],[1758,4],[1768,4]]}}}],["36.4v524.9h",{"_index":1019,"t":{"171":{"position":[[1586,11]]}}}],["36.4v632h",{"_index":1035,"t":{"171":{"position":[[1855,9]]}}}],["36.5",{"_index":1028,"t":{"171":{"position":[[1710,4]]}}}],["37.4",{"_index":1070,"t":{"171":{"position":[[2250,4]]}}}],["37c",{"_index":973,"t":{"171":{"position":[[1238,3]]}}}],["38.6",{"_index":1080,"t":{"171":{"position":[[2333,4],[2343,5]]}}}],["38.6zm348.9",{"_index":1081,"t":{"171":{"position":[[2364,11]]}}}],["384.3l312.9",{"_index":919,"t":{"171":{"position":[[711,11]]}}}],["387",{"_index":893,"t":{"171":{"position":[[455,3],[465,3]]}}}],["39.1",{"_index":1074,"t":{"171":{"position":[[2286,4]]}}}],["39.1c0",{"_index":1077,"t":{"171":{"position":[[2316,6]]}}}],["39.1s48.8",{"_index":1075,"t":{"171":{"position":[[2296,9]]}}}],["3916",{"_index":884,"t":{"171":{"position":[[364,4]]}}}],["3d58",{"_index":516,"t":{"96":{"position":[[834,4],[1117,4],[1376,4]]},"98":{"position":[[593,4]]}}}],["4",{"_index":438,"t":{"90":{"position":[[383,1]]}}}],["40.7",{"_index":1040,"t":{"171":{"position":[[1969,4]]}}}],["409cf070b151/version1",{"_index":157,"t":{"29":{"position":[[1736,23]]},"98":{"position":[[823,22],[953,22],[1116,22],[1423,23]]}}}],["41.3",{"_index":979,"t":{"171":{"position":[[1267,4]]}}}],["41.3v18.2c",{"_index":1064,"t":{"171":{"position":[[2198,10]]}}}],["41.8",{"_index":969,"t":{"171":{"position":[[1216,4],[1915,4]]}}}],["42.9",{"_index":1025,"t":{"171":{"position":[[1648,4],[2108,4]]}}}],["44.5",{"_index":1038,"t":{"171":{"position":[[1890,4]]}}}],["45",{"_index":1027,"t":{"171":{"position":[[1700,2],[2411,2]]}}}],["46.6",{"_index":1058,"t":{"171":{"position":[[2156,4],[2382,4]]}}}],["47.2",{"_index":1093,"t":{"171":{"position":[[2478,4]]}}}],["47.7",{"_index":1033,"t":{"171":{"position":[[1833,4]]}}}],["47de",{"_index":168,"t":{"29":{"position":[[1998,4]]},"98":{"position":[[1685,4]]}}}],["48.2",{"_index":1017,"t":{"171":{"position":[[1564,4],[2013,4],[2291,4],[2338,4]]}}}],["48.8",{"_index":972,"t":{"171":{"position":[[1233,4],[1944,4],[2311,4],[2349,4],[2359,4]]}}}],["49.3",{"_index":955,"t":{"171":{"position":[[1108,4],[1327,4]]}}}],["49.8",{"_index":950,"t":{"171":{"position":[[1069,4],[1677,4]]}}}],["4a47",{"_index":155,"t":{"29":{"position":[[1726,4]]},"98":{"position":[[813,4],[943,4],[1106,4],[1413,4]]}}}],["4b6d4f50c7f0",{"_index":519,"t":{"96":{"position":[[849,14]]}}}],["4b6d4f50c7f0/client/project/ads/v1",{"_index":529,"t":{"96":{"position":[[1132,35]]}}}],["4b6d4f50c7f0/index.html",{"_index":535,"t":{"96":{"position":[[1391,23]]}}}],["4b6d4f50c7f0/version1",{"_index":539,"t":{"98":{"position":[[608,22]]}}}],["4c84",{"_index":517,"t":{"96":{"position":[[839,4],[1122,4],[1381,4]]},"98":{"position":[[598,4]]}}}],["5",{"_index":1305,"t":{"219":{"position":[[279,3],[303,1]]}}}],["5.4.5",{"_index":984,"t":{"171":{"position":[[1302,5]]}}}],["50",{"_index":1160,"t":{"185":{"position":[[531,4],[542,4],[567,4],[629,4],[635,5]]}}}],["50.4c20.9",{"_index":1056,"t":{"171":{"position":[[2141,9]]}}}],["50.9",{"_index":1062,"t":{"171":{"position":[[2183,4],[2193,4]]}}}],["50px",{"_index":1168,"t":{"185":{"position":[[652,6]]}}}],["51",{"_index":1225,"t":{"199":{"position":[[197,3]]}}}],["51.5",{"_index":960,"t":{"171":{"position":[[1150,4]]}}}],["52.5",{"_index":1014,"t":{"171":{"position":[[1541,4],[1623,4]]}}}],["53.1",{"_index":952,"t":{"171":{"position":[[1080,4],[2437,4]]}}}],["53.6",{"_index":954,"t":{"171":{"position":[[1097,4],[2039,4]]}}}],["54.1c0",{"_index":1042,"t":{"171":{"position":[[2001,6]]}}}],["56.8",{"_index":997,"t":{"171":{"position":[[1405,4],[1415,4],[1810,4]]}}}],["56.8h",{"_index":1002,"t":{"171":{"position":[[1440,5]]}}}],["57.3",{"_index":964,"t":{"171":{"position":[[1180,4]]}}}],["58.4",{"_index":1000,"t":{"171":{"position":[[1427,4]]}}}],["58.4h73.9v767.6l93.8",{"_index":1108,"t":{"171":{"position":[[2617,20]]}}}],["58.9",{"_index":1043,"t":{"171":{"position":[[2008,4]]}}}],["6",{"_index":769,"t":{"153":{"position":[[72,1]]}}}],["6.4.9",{"_index":857,"t":{"163":{"position":[[253,7]]}}}],["60",{"_index":565,"t":{"109":{"position":[[455,3]]},"171":{"position":[[1437,2]]}}}],["60.5",{"_index":1011,"t":{"171":{"position":[[1517,4],[1786,4]]}}}],["60.5c",{"_index":1101,"t":{"171":{"position":[[2574,5]]}}}],["60.6",{"_index":998,"t":{"171":{"position":[[1410,4],[2226,4]]}}}],["600",{"_index":1339,"t":{"231":{"position":[[533,3]]}}}],["61.6l",{"_index":971,"t":{"171":{"position":[[1227,5]]}}}],["6144e476bc73/v1/\",\"doall:v1",{"_index":170,"t":{"29":{"position":[[2008,29]]},"98":{"position":[[1695,29]]}}}],["62.2c",{"_index":1090,"t":{"171":{"position":[[2462,5]]}}}],["62.7",{"_index":1050,"t":{"171":{"position":[[2080,4],[2505,4]]}}}],["63.2",{"_index":992,"t":{"171":{"position":[[1363,4]]}}}],["63.3",{"_index":1106,"t":{"171":{"position":[[2600,4]]}}}],["637.7l",{"_index":921,"t":{"171":{"position":[[739,6]]}}}],["64.1zm652.6",{"_index":924,"t":{"171":{"position":[[758,11]]}}}],["64.3h2029c.5",{"_index":983,"t":{"171":{"position":[[1289,12]]}}}],["64.4zm",{"_index":908,"t":{"171":{"position":[[603,6]]}}}],["64.5v232l111.6",{"_index":907,"t":{"171":{"position":[[588,14]]}}}],["64.5v232l468",{"_index":917,"t":{"171":{"position":[[686,12]]}}}],["64z\"/>hello",{"_index":1171,"t":{"185":{"position":[[752,29]]}}}],["class=\"cont",{"_index":1238,"t":{"205":{"position":[[260,14]]},"207":{"position":[[280,14]]},"211":{"position":[[176,14]]},"213":{"position":[[165,14]]},"217":{"position":[[103,14]]},"219":{"position":[[153,14]]},"221":{"position":[[143,14]]},"223":{"position":[[225,14]]}}}],["class=\"cta",{"_index":1353,"t":{"237":{"position":[[314,11]]}}}],["class=\"listwrapp",{"_index":1280,"t":{"211":{"position":[[42,20]]}}}],["class=\"mainexit",{"_index":1244,"t":{"205":{"position":[[419,15]]},"207":{"position":[[393,15]]},"211":{"position":[[244,15]]},"213":{"position":[[238,15]]},"217":{"position":[[183,15]]},"219":{"position":[[337,15]]},"221":{"position":[[282,15]]},"223":{"position":[[496,15]]}}}],["class=\"parent_contain",{"_index":1170,"t":{"185":{"position":[[721,25]]}}}],["class=\"subtitl",{"_index":1315,"t":{"223":{"position":[[339,15],[403,15]]}}}],["class=\"{{@key",{"_index":1249,"t":{"207":{"position":[[338,16]]}}}],["clean",{"_index":571,"t":{"111":{"position":[[7,5]]},"115":{"position":[[17,5]]}}}],["cleanoutput",{"_index":581,"t":{"115":{"position":[[97,11]]}}}],["cli",{"_index":829,"t":{"157":{"position":[[810,3]]}}}],["click",{"_index":665,"t":{"131":{"position":[[920,5]]},"177":{"position":[[90,8]]},"237":{"position":[[264,6]]}}}],["client",{"_index":524,"t":{"96":{"position":[[1008,7]]},"157":{"position":[[649,6],[663,6]]},"163":{"position":[[372,7]]}}}],["clone",{"_index":58,"t":{"19":{"position":[[20,5]]},"25":{"position":[[20,5]]}}}],["code",{"_index":67,"t":{"19":{"position":[[152,4]]},"25":{"position":[[155,4],[513,4]]},"74":{"position":[[610,5],[666,5]]},"80":{"position":[[37,4]]},"90":{"position":[[1770,5],[1857,6],[2132,5]]},"115":{"position":[[382,5]]},"129":{"position":[[13,4],[151,4],[324,5],[359,4],[391,4],[665,4],[2262,4],[3153,4],[3177,4],[3253,4]]},"131":{"position":[[40,4],[473,4],[1714,4]]},"133":{"position":[[846,4]]},"199":{"position":[[29,4]]}}}],["color",{"_index":1367,"t":{"241":{"position":[[370,6]]}}}],["column",{"_index":770,"t":{"153":{"position":[[74,7],[126,7],[1147,7]]},"155":{"position":[[106,8]]}}}],["combin",{"_index":142,"t":{"29":{"position":[[1438,13],[1767,12],[1851,8]]},"96":{"position":[[1068,11]]},"98":{"position":[[1148,13],[1454,12],[1538,8]]},"245":{"position":[[71,11]]}}}],["come",{"_index":96,"t":{"29":{"position":[[21,4]]}}}],["command",{"_index":25,"t":{"11":{"position":[[99,7]]},"29":{"position":[[223,8],[976,7],[1252,7],[1486,8]]},"44":{"position":[[43,7]]},"54":{"position":[[30,7]]},"58":{"position":[[61,8]]},"80":{"position":[[280,7],[339,9]]},"84":{"position":[[167,7],[375,9]]},"90":{"position":[[44,7],[166,7],[996,7],[1079,8],[1168,8]]},"94":{"position":[[177,8],[238,8]]},"98":{"position":[[202,8],[713,7],[1010,7]]}}}],["commandlin",{"_index":137,"t":{"29":{"position":[[949,12]]},"98":{"position":[[684,12]]}}}],["common",{"_index":172,"t":{"29":{"position":[[2136,6]]},"96":{"position":[[983,6]]},"205":{"position":[[8,6]]},"207":{"position":[[2,6]]}}}],["compar",{"_index":206,"t":{"29":{"position":[[2695,9]]},"157":{"position":[[156,9]]},"219":{"position":[[181,10],[236,12],[249,10],[312,12]]}}}],["compat",{"_index":297,"t":{"62":{"position":[[74,10]]}}}],["compil",{"_index":119,"t":{"29":{"position":[[424,9]]},"90":{"position":[[1460,7],[2111,9],[2217,8]]}}}],["complet",{"_index":1324,"t":{"229":{"position":[[199,10]]}}}],["completed.*/onanimationcomplet",{"_index":845,"t":{"161":{"position":[[522,31]]}}}],["complic",{"_index":812,"t":{"157":{"position":[[201,12]]}}}],["compon",{"_index":1295,"t":{"213":{"position":[[353,11]]}}}],["components/menuitem",{"_index":1286,"t":{"211":{"position":[[208,20]]}}}],["con",{"_index":809,"t":{"157":{"position":[[152,3]]}}}],["condit",{"_index":269,"t":{"48":{"position":[[106,12]]},"205":{"position":[[57,11]]}}}],["config",{"_index":200,"t":{"29":{"position":[[2610,6]]},"90":{"position":[[368,8]]},"147":{"position":[[224,7]]},"197":{"position":[[99,6]]},"229":{"position":[[670,6]]},"231":{"position":[[17,6],[176,6],[197,7]]},"241":{"position":[[128,6]]},"243":{"position":[[222,6],[372,6],[640,9],[705,6],[1046,6],[1079,7]]},"245":{"position":[[92,6]]}}}],["config(",{"_index":439,"t":{"90":{"position":[[385,10],[448,9]]}}}],["config.content.intro",{"_index":1391,"t":{"243":{"position":[[1129,22]]}}}],["configur",{"_index":372,"t":{"74":{"position":[[317,13],[881,13],[978,13],[1058,13],[1115,13]]},"225":{"position":[[0,13]]}}}],["confirm",{"_index":447,"t":{"90":{"position":[[833,7]]}}}],["connect",{"_index":642,"t":{"129":{"position":[[2744,10]]}}}],["consol",{"_index":821,"t":{"157":{"position":[[511,7]]}}}],["console.error(error",{"_index":1193,"t":{"189":{"position":[[513,22]]},"191":{"position":[[263,22]]},"193":{"position":[[386,22]]},"195":{"position":[[280,22]]},"197":{"position":[[388,23]]}}}],["console.error(error));;loadall(['./custom_image.png",{"_index":1192,"t":{"189":{"position":[[400,54]]}}}],["console.log('al",{"_index":1190,"t":{"189":{"position":[[354,16],[467,16]]}}}],["console.log('imag",{"_index":1197,"t":{"191":{"position":[[216,18]]}}}],["console.log('mask",{"_index":1217,"t":{"197":{"position":[[343,17]]}}}],["console.log('oncomplet",{"_index":846,"t":{"161":{"position":[[564,32]]}}}],["console.log('onstart",{"_index":850,"t":{"161":{"position":[[812,25]]}}}],["console.log('script",{"_index":1202,"t":{"193":{"position":[[337,20]]}}}],["console.log(data",{"_index":1206,"t":{"195":{"position":[[243,18]]}}}],["const",{"_index":645,"t":{"129":{"position":[[2920,5]]},"131":{"position":[[1896,5]]}}}],["constructor",{"_index":1371,"t":{"243":{"position":[[140,12],[736,12]]}}}],["constructor(contain",{"_index":1388,"t":{"243":{"position":[[1056,22]]}}}],["contain",{"_index":596,"t":{"129":{"position":[[18,8]]},"185":{"position":[[398,10],[476,9]]},"223":{"position":[[72,8]]},"231":{"position":[[29,8]]},"233":{"position":[[14,8]]},"243":{"position":[[234,7],[345,7],[1020,9],[1115,10]]}}}],["content",{"_index":530,"t":{"96":{"position":[[1192,8]]},"129":{"position":[[815,7]]},"131":{"position":[[623,7]]},"151":{"position":[[421,7]]},"153":{"position":[[156,7],[199,7],[612,10]]},"155":{"position":[[556,10]]},"207":{"position":[[460,10]]},"231":{"position":[[580,10]]},"233":{"position":[[604,10],[661,7]]},"237":{"position":[[241,10],[388,10]]},"241":{"position":[[284,10],[383,7]]},"243":{"position":[[265,8],[868,10]]}}}],["content.bgimage\">onethreetwowidth",{"_index":1288,"t":{"213":{"position":[[33,9]]}}}],["packag",{"_index":99,"t":{"29":{"position":[[66,8]]},"74":{"position":[[252,8]]}}}],["package.json",{"_index":22,"t":{"11":{"position":[[62,13]]},"29":{"position":[[1226,13]]},"74":{"position":[[1098,14]]},"90":{"position":[[127,15],[1007,12]]},"98":{"position":[[984,13]]},"109":{"position":[[0,12]]},"145":{"position":[[0,12]]}}}],["page",{"_index":75,"t":{"23":{"position":[[153,5]]},"29":{"position":[[613,4],[899,4],[1071,4],[1323,4],[2098,5],[2119,4],[2267,4]]},"98":{"position":[[643,5]]},"233":{"position":[[835,4]]},"239":{"position":[[138,5]]},"245":{"position":[[132,5]]}}}],["pair",{"_index":659,"t":{"131":{"position":[[110,4]]}}}],["param",{"_index":1144,"t":{"185":{"position":[[6,6]]},"187":{"position":[[42,6],[69,6]]},"189":{"position":[[68,6],[98,6],[128,6]]},"191":{"position":[[55,6]]},"193":{"position":[[68,6],[98,6]]},"195":{"position":[[55,6]]},"197":{"position":[[84,6],[108,6]]},"199":{"position":[[38,6],[58,6],[78,6]]},"243":{"position":[[996,6],[1032,6]]}}}],["paramet",{"_index":95,"t":{"29":{"position":[[5,9],[155,9]]},"44":{"position":[[61,11],[133,9]]},"68":{"position":[[257,11]]},"98":{"position":[[6,10],[134,9]]},"117":{"position":[[27,10]]},"135":{"position":[[239,9],[327,9]]},"163":{"position":[[76,9]]},"217":{"position":[[28,9]]}}}],["parent",{"_index":796,"t":{"155":{"position":[[466,9]]},"185":{"position":[[391,6],[469,6]]},"229":{"position":[[58,8],[246,6]]},"231":{"position":[[106,9],[190,6]]}}}],["parent_contain",{"_index":1156,"t":{"185":{"position":[[486,17]]}}}],["part",{"_index":450,"t":{"90":{"position":[[991,4]]}}}],["partial",{"_index":1277,"t":{"209":{"position":[[45,9],[55,8],[182,8]]}}}],["pass",{"_index":1297,"t":{"217":{"position":[[19,4]]},"243":{"position":[[105,6],[694,6]]}}}],["past",{"_index":608,"t":{"129":{"position":[[648,5],[2245,5]]},"131":{"position":[[456,5],[1697,5]]}}}],["patch",{"_index":562,"t":{"109":{"position":[[409,5]]}}}],["path",{"_index":183,"t":{"29":{"position":[[2338,5]]},"171":{"position":[[408,5],[485,5],[1008,5]]},"229":{"position":[[554,5]]},"231":{"position":[[161,4]]}}}],["patienc",{"_index":824,"t":{"157":{"position":[[593,8]]}}}],["paus",{"_index":839,"t":{"161":{"position":[[246,6]]},"175":{"position":[[305,6]]},"177":{"position":[[167,5],[360,5]]}}}],["perform",{"_index":422,"t":{"84":{"position":[[472,7]]}}}],["permiss",{"_index":426,"t":{"84":{"position":[[521,12]]}}}],["phase",{"_index":120,"t":{"29":{"position":[[438,6],[722,6]]},"115":{"position":[[162,5]]}}}],["pick",{"_index":1347,"t":{"233":{"position":[[777,6]]}}}],["pin",{"_index":504,"t":{"96":{"position":[[369,6]]}}}],["place",{"_index":349,"t":{"72":{"position":[[432,7]]}}}],["placehold",{"_index":785,"t":{"153":{"position":[[733,11]]},"203":{"position":[[68,12]]}}}],["plain",{"_index":351,"t":{"72":{"position":[[598,5],[838,6]]}}}],["play",{"_index":1126,"t":{"177":{"position":[[162,4],[352,4]]},"243":{"position":[[650,7]]}}}],["play/paus",{"_index":855,"t":{"163":{"position":[[161,12]]},"177":{"position":[[324,10]]}}}],["pleas",{"_index":49,"t":{"17":{"position":[[97,6],[171,6]]},"23":{"position":[[114,6]]},"72":{"position":[[136,6],[549,6],[763,6],[807,6],[888,6],[944,6],[1006,6]]},"90":{"position":[[434,6],[1137,6]]},"96":{"position":[[187,6],[231,6],[282,6]]},"101":{"position":[[108,6]]},"129":{"position":[[3276,6]]},"133":{"position":[[459,6]]},"147":{"position":[[417,6],[938,6]]},"151":{"position":[[494,6]]},"165":{"position":[[360,6]]}}}],["plug",{"_index":862,"t":{"165":{"position":[[150,7]]}}}],["plugin",{"_index":309,"t":{"64":{"position":[[47,6]]}}}],["png",{"_index":1210,"t":{"197":{"position":[[69,3]]},"233":{"position":[[802,3]]}}}],["png|.jpg|.jpeg",{"_index":1312,"t":{"223":{"position":[[285,19]]}}}],["point",{"_index":224,"t":{"36":{"position":[[119,5]]},"231":{"position":[[349,6],[416,6]]}}}],["port",{"_index":461,"t":{"90":{"position":[[1521,4],[1590,4],[1654,5]]}}}],["posibl",{"_index":277,"t":{"52":{"position":[[6,7]]}}}],["posit",{"_index":1157,"t":{"185":{"position":[[506,9]]}}}],["possibl",{"_index":241,"t":{"44":{"position":[[79,8],[150,8]]},"88":{"position":[[27,9],[146,9]]},"90":{"position":[[762,8]]},"98":{"position":[[256,8]]},"129":{"position":[[3208,8]]},"151":{"position":[[107,8],[301,8]]},"161":{"position":[[84,8]]},"237":{"position":[[131,8]]}}}],["potenti",{"_index":566,"t":{"109":{"position":[[477,11]]}}}],["powershel",{"_index":393,"t":{"80":{"position":[[26,10]]}}}],["practic",{"_index":1294,"t":{"213":{"position":[[315,8]]}}}],["practis",{"_index":527,"t":{"96":{"position":[[1035,9]]}}}],["pre",{"_index":720,"t":{"141":{"position":[[9,3]]}}}],["prerequisit",{"_index":2,"t":{"5":{"position":[[0,13]]}}}],["press",{"_index":332,"t":{"72":{"position":[[171,6],[1052,6]]},"90":{"position":[[465,6],[818,5],[1975,5]]},"94":{"position":[[392,5]]},"96":{"position":[[755,5],[798,5]]},"147":{"position":[[448,6],[962,6]]},"163":{"position":[[193,8]]},"177":{"position":[[284,8],[369,8]]}}}],["pretti",{"_index":1381,"t":{"243":{"position":[[786,6]]}}}],["prettier",{"_index":388,"t":{"74":{"position":[[1081,8]]}}}],["prettierrc",{"_index":387,"t":{"74":{"position":[[1044,11]]}}}],["prev",{"_index":195,"t":{"29":{"position":[[2524,4]]}}}],["preview",{"_index":128,"t":{"29":{"position":[[605,7],[642,7],[705,7],[891,7],[1063,7],[1315,7],[1478,7],[1681,7],[1961,7],[2090,7],[2111,7],[2657,7]]},"90":{"position":[[711,8],[1548,7],[2159,7],[2202,7]]},"92":{"position":[[25,7]]},"94":{"position":[[28,7],[194,7],[494,7]]},"96":{"position":[[741,8],[1254,8],[1319,8]]},"98":{"position":[[64,9],[247,8],[275,8],[705,7],[729,7],[750,7],[880,7],[897,7],[1060,7],[1368,7],[1648,7]]},"109":{"position":[[707,8]]},"145":{"position":[[129,10]]},"227":{"position":[[8,7]]}}}],["preview:version1",{"_index":146,"t":{"29":{"position":[[1527,18]]},"98":{"position":[[1018,19],[1214,18]]}}}],["preview_accesskeyid",{"_index":510,"t":{"96":{"position":[[539,20]]}}}],["preview_accesskeysecret",{"_index":511,"t":{"96":{"position":[[560,23]]},"157":{"position":[[934,24]]}}}],["preview_s3bucket",{"_index":512,"t":{"96":{"position":[[588,16]]},"157":{"position":[[959,16]]}}}],["previous",{"_index":306,"t":{"64":{"position":[[0,11]]}}}],["primari",{"_index":480,"t":{"90":{"position":[[1988,7]]}}}],["printer",{"_index":389,"t":{"74":{"position":[[1090,7]]}}}],["pro",{"_index":806,"t":{"157":{"position":[[69,3]]}}}],["proce",{"_index":336,"t":{"72":{"position":[[256,8],[1137,10]]},"147":{"position":[[533,10],[1047,10]]}}}],["process",{"_index":363,"t":{"74":{"position":[[106,7]]},"115":{"position":[[331,7]]}}}],["produc",{"_index":713,"t":{"135":{"position":[[453,9]]}}}],["product",{"_index":28,"t":{"11":{"position":[[118,11]]},"29":{"position":[[1382,10],[1558,10],[1902,10]]},"98":{"position":[[1245,10],[1589,10]]},"145":{"position":[[80,12]]}}}],["profil",{"_index":597,"t":{"129":{"position":[[67,7]]},"133":{"position":[[375,7],[473,7],[821,7],[893,8]]}}}],["project",{"_index":11,"t":{"7":{"position":[[79,7]]},"11":{"position":[[258,8]]},"25":{"position":[[303,7],[423,7]]},"66":{"position":[[31,7]]},"68":{"position":[[40,7],[103,8]]},"70":{"position":[[118,7]]},"74":{"position":[[278,7],[1190,8]]},"90":{"position":[[311,8]]},"96":{"position":[[1094,8]]},"129":{"position":[[467,8],[3267,8]]},"133":{"position":[[289,7]]},"151":{"position":[[485,8]]}}}],["promis",{"_index":254,"t":{"46":{"position":[[129,7]]}}}],["promise

height",{"_index":1289,"t":{"213":{"position":[[43,37]]}}}],["settings}}{{/bracket",{"_index":1308,"t":{"221":{"position":[[210,22]]}}}],["setup",{"_index":583,"t":{"115":{"position":[[131,5]]},"129":{"position":[[3147,5]]}}}],["sever",{"_index":758,"t":{"151":{"position":[[128,7]]}}}],["sftp",{"_index":496,"t":{"94":{"position":[[548,4]]},"98":{"position":[[319,4]]}}}],["share",{"_index":765,"t":{"151":{"position":[[501,5]]},"157":{"position":[[113,5],[758,6]]},"163":{"position":[[355,7]]},"229":{"position":[[699,5]]},"233":{"position":[[677,6]]}}}],["shared/.sharedrc",{"_index":797,"t":{"155":{"position":[[476,22]]},"231":{"position":[[116,22]]}}}],["shared/images/background_300x250.jpg",{"_index":1357,"t":{"237":{"position":[[415,45]]}}}],["sharedrc",{"_index":199,"t":{"29":{"position":[[2600,9]]},"229":{"position":[[370,10]]},"233":{"position":[[4,9]]}}}],["sheet",{"_index":764,"t":{"151":{"position":[[473,5]]}}}],["shortcut",{"_index":1125,"t":{"177":{"position":[[149,9]]}}}],["shorthand",{"_index":111,"t":{"29":{"position":[[292,9],[1149,9]]},"98":{"position":[[361,9],[503,9],[853,9]]}}}],["show",{"_index":531,"t":{"96":{"position":[[1231,4]]},"177":{"position":[[263,4]]},"183":{"position":[[6,5]]},"223":{"position":[[104,5],[133,5]]}}}],["similar",{"_index":789,"t":{"155":{"position":[[61,7]]},"221":{"position":[[0,7]]}}}],["simpl",{"_index":1227,"t":{"203":{"position":[[171,6]]}}}],["simpli",{"_index":459,"t":{"90":{"position":[[1408,6]]},"157":{"position":[[256,6]]}}}],["simplifi",{"_index":658,"t":{"131":{"position":[[89,10]]}}}],["simultan",{"_index":854,"t":{"163":{"position":[[146,14]]}}}],["singl",{"_index":436,"t":{"88":{"position":[[390,6]]},"90":{"position":[[1267,6]]},"151":{"position":[[149,6]]}}}],["singleton",{"_index":692,"t":{"133":{"position":[[81,9]]}}}],["size",{"_index":762,"t":{"151":{"position":[[268,5]]},"155":{"position":[[83,5],[513,7]]},"185":{"position":[[366,4],[439,5],[646,5]]},"231":{"position":[[42,4],[462,7]]},"241":{"position":[[442,7],[542,4],[580,4]]}}}],["skip",{"_index":118,"t":{"29":{"position":[[419,4],[700,4],[1017,8],[1293,8]]}}}],["skipbuild",{"_index":115,"t":{"29":{"position":[[386,9],[451,9],[735,9],[1132,9],[1208,9]]}}}],["skippreview",{"_index":131,"t":{"29":{"position":[[665,11],[1417,11]]}}}],["slack",{"_index":507,"t":{"96":{"position":[[406,5]]}}}],["slim",{"_index":222,"t":{"36":{"position":[[83,8]]}}}],["slow",{"_index":591,"t":{"115":{"position":[[317,4]]}}}],["sm",{"_index":669,"t":{"131":{"position":[[994,3]]}}}],["some_nice_layout",{"_index":1303,"t":{"219":{"position":[[219,16]]}}}],["someth",{"_index":38,"t":{"11":{"position":[[278,9]]},"72":{"position":[[484,9]]},"74":{"position":[[189,9]]},"90":{"position":[[331,9],[1116,9],[1191,9],[1954,9],[2292,9]]},"94":{"position":[[258,9]]},"96":{"position":[[1281,9]]},"135":{"position":[[58,9]]},"243":{"position":[[1157,9],[1179,9]]}}}],["sometim",{"_index":263,"t":{"48":{"position":[[0,9]]},"109":{"position":[[720,9]]},"113":{"position":[[0,10]]},"161":{"position":[[0,9]]}}}],["soon",{"_index":563,"t":{"109":{"position":[[415,5]]}}}],["sourc",{"_index":348,"t":{"72":{"position":[[413,6]]},"90":{"position":[[1850,6],[2125,6]]},"151":{"position":[[429,7]]},"153":{"position":[[184,6]]}}}],["space",{"_index":333,"t":{"72":{"position":[[178,7],[1059,7]]},"90":{"position":[[472,7],[1245,7]]},"147":{"position":[[455,7],[969,7]]}}}],["spacebar",{"_index":446,"t":{"90":{"position":[[803,9]]},"163":{"position":[[206,11]]},"177":{"position":[[382,9]]}}}],["spec",{"_index":294,"t":{"60":{"position":[[93,6]]}}}],["special",{"_index":454,"t":{"90":{"position":[[1230,7]]}}}],["specif",{"_index":716,"t":{"135":{"position":[[515,8]]},"231":{"position":[[89,8]]}}}],["spreadsheet",{"_index":440,"t":{"90":{"position":[[420,13]]},"149":{"position":[[7,12]]},"151":{"position":[[11,12],[391,11]]},"153":{"position":[[28,11],[998,12]]},"155":{"position":[[24,11],[134,11]]},"157":{"position":[[47,12]]},"245":{"position":[[56,11]]}}}],["src",{"_index":1194,"t":{"191":{"position":[[71,3]]},"195":{"position":[[71,3]]}}}],["src/300x250/.richmediarc",{"_index":441,"t":{"90":{"position":[[547,26]]},"207":{"position":[[434,25]]},"237":{"position":[[215,25],[362,25]]},"241":{"position":[[258,25],[402,25]]},"243":{"position":[[842,25]]}}}],["src/300x250/.richmediarc_b1_na_smb",{"_index":795,"t":{"155":{"position":[[428,35]]}}}],["src/300x250/[.richmediarc",{"_index":371,"t":{"74":{"position":[[286,26]]}}}],["src/300x250/css/style.css",{"_index":1365,"t":{"241":{"position":[[325,26],[483,26]]}}}],["src/300x250/index.hb",{"_index":874,"t":{"171":{"position":[[98,22],[235,22],[2783,22]]},"237":{"position":[[279,22],[461,22]]}}}],["src/300x250/js/animation.j",{"_index":1383,"t":{"243":{"position":[[903,28]]}}}],["src/300x600/.richmediarc",{"_index":442,"t":{"90":{"position":[[578,26]]}}}],["src/728x90/.richmediarc",{"_index":443,"t":{"90":{"position":[[609,25]]}}}],["src/970x250/.richmediarc",{"_index":444,"t":{"90":{"position":[[639,26]]}}}],["src/plain",{"_index":358,"t":{"72":{"position":[[874,13]]}}}],["src/shared/.sharedrc",{"_index":771,"t":{"153":{"position":[[237,21]]},"155":{"position":[[155,21]]},"157":{"position":[[354,21]]}}}],["src/shared/components/menuitems.hb",{"_index":1279,"t":{"211":{"position":[[0,36]]}}}],["src/shared/css/style.css",{"_index":378,"t":{"74":{"position":[[672,24]]}}}],["src/shared/index.hb",{"_index":379,"t":{"74":{"position":[[762,20]]},"205":{"position":[[205,21]]},"207":{"position":[[225,21]]},"211":{"position":[[121,21]]},"213":{"position":[[110,21]]},"217":{"position":[[48,21]]},"219":{"position":[[98,21]]},"221":{"position":[[88,21]]},"223":{"position":[[170,21]]}}}],["src/shared/myexamplepartial.hb",{"_index":1287,"t":{"213":{"position":[[0,32]]}}}],["src/shared/script/animation.j",{"_index":376,"t":{"74":{"position":[[554,30]]}}}],["src/shared/script/banner.j",{"_index":377,"t":{"74":{"position":[[616,27]]},"145":{"position":[[160,28]]},"161":{"position":[[137,28]]}}}],["src/shared/script/main.j",{"_index":374,"t":{"74":{"position":[[467,25]]}}}],["src/{size}x{width",{"_index":350,"t":{"72":{"position":[[499,20]]}}}],["src=\"captain.gif",{"_index":1242,"t":{"205":{"position":[[366,17]]}}}],["src=\"https://s0.2mdn.net/ads/studio/enabler.j",{"_index":697,"t":{"133":{"position":[[407,48]]}}}],["src=\"logo.svg",{"_index":879,"t":{"171":{"position":[[187,14]]}}}],["src=\"{{content.logo",{"_index":1119,"t":{"171":{"position":[[2871,22]]}}}],["src=\"{{thi",{"_index":1250,"t":{"207":{"position":[[355,15]]}}}],["src={{this.subtitl",{"_index":1313,"t":{"223":{"position":[[310,21]]}}}],["standard",{"_index":694,"t":{"133":{"position":[[214,8]]}}}],["start",{"_index":30,"t":{"11":{"position":[[169,5]]},"27":{"position":[[8,7]]},"66":{"position":[[8,7]]},"78":{"position":[[8,7]]},"86":{"position":[[8,7],[16,5]]},"90":{"position":[[3,5],[222,5],[1497,5],[1925,5]]},"92":{"position":[[8,7]]},"94":{"position":[[146,5]]},"131":{"position":[[854,9],[2157,8]]},"161":{"position":[[53,6]]},"231":{"position":[[363,8]]}}}],["statement",{"_index":1235,"t":{"205":{"position":[[69,11]]}}}],["step",{"_index":654,"t":{"129":{"position":[[3163,4]]}}}],["still",{"_index":584,"t":{"115":{"position":[[140,5]]}}}],["store",{"_index":193,"t":{"29":{"position":[[2500,5]]},"96":{"position":[[466,5]]},"131":{"position":[[969,5]]}}}],["string",{"_index":814,"t":{"157":{"position":[[216,6]]},"187":{"position":[[49,8]]},"191":{"position":[[62,8]]},"195":{"position":[[62,8]]},"199":{"position":[[109,9]]},"221":{"position":[[20,8]]},"223":{"position":[[162,7]]}}}],["structur",{"_index":599,"t":{"129":{"position":[[94,9]]},"205":{"position":[[147,10]]}}}],["studio",{"_index":495,"t":{"94":{"position":[[541,6]]},"129":{"position":[[276,6],[2862,6]]},"133":{"position":[[59,7],[886,6]]}}}],["studio'",{"_index":605,"t":{"129":{"position":[[372,8]]}}}],["style",{"_index":1154,"t":{"185":{"position":[[421,7]]}}}],["sub",{"_index":540,"t":{"98":{"position":[[639,3]]}}}],["subdirectori",{"_index":35,"t":{"11":{"position":[[235,14]]},"90":{"position":[[288,14]]}}}],["submit",{"_index":62,"t":{"19":{"position":[[103,6]]},"25":{"position":[[464,6]]}}}],["subset",{"_index":217,"t":{"36":{"position":[[5,10]]},"125":{"position":[[12,10]]},"233":{"position":[[574,6],[862,11]]}}}],["subtitl",{"_index":1317,"t":{"223":{"position":[[367,8]]}}}],["subtitle\">{{{this.title}}}logo",{"_index":886,"t":{"171":{"position":[[376,11]]}}}],["togeth",{"_index":136,"t":{"29":{"position":[[921,9]]}}}],["toggl",{"_index":334,"t":{"72":{"position":[[204,6],[1085,6]]},"90":{"position":[[498,6]]},"147":{"position":[[481,6],[995,6]]},"177":{"position":[[345,6]]}}}],["tool",{"_index":282,"t":{"54":{"position":[[43,4]]},"80":{"position":[[148,4],[168,6]]},"94":{"position":[[102,4],[315,4]]},"96":{"position":[[659,4]]},"129":{"position":[[163,4]]},"147":{"position":[[148,4]]},"157":{"position":[[814,5]]}}}],["toolse",{"_index":738,"t":{"147":{"position":[[316,7]]}}}],["top",{"_index":1159,"t":{"185":{"position":[[526,4]]}}}],["track",{"_index":695,"t":{"133":{"position":[[223,8]]}}}],["transform",{"_index":1167,"t":{"185":{"position":[[607,10]]}}}],["translat",{"_index":578,"t":{"113":{"position":[[225,13]]},"185":{"position":[[618,10]]}}}],["tri",{"_index":289,"t":{"60":{"position":[[31,3],[67,3]]},"84":{"position":[[341,3]]},"109":{"position":[[125,3]]}}}],["trick",{"_index":656,"t":{"129":{"position":[[3300,6]]}}}],["trigger",{"_index":835,"t":{"157":{"position":[[1015,7]]}}}],["troubl",{"_index":410,"t":{"84":{"position":[[210,7]]}}}],["true",{"_index":551,"t":{"109":{"position":[[68,5]]},"129":{"position":[[2057,5]]},"189":{"position":[[336,5]]},"193":{"position":[[318,6]]}}}],["turn",{"_index":23,"t":{"11":{"position":[[85,4]]},"90":{"position":[[152,4]]}}}],["tween",{"_index":848,"t":{"161":{"position":[[747,5]]},"165":{"position":[[172,7]]}}}],["twice",{"_index":560,"t":{"109":{"position":[[383,5]]}}}],["type",{"_index":243,"t":{"44":{"position":[[175,4]]},"72":{"position":[[531,4],[565,4],[823,4]]},"90":{"position":[[25,4],[1186,4]]},"98":{"position":[[234,4],[239,4],[742,4]]},"183":{"position":[[51,5]]}}}],["typeof",{"_index":1301,"t":{"219":{"position":[[87,10]]}}}],["ul",{"_index":1281,"t":{"211":{"position":[[63,4]]}}}],["ul> Search the documentation - +

- + \ No newline at end of file

Search the documentation

Copyright © 2023 - Media.Monks DisplayAd. Built with Docusaurus.

height",{"_index":1153,"t":{"183":{"position":[[43,37]]}}}],["settings}}{{/bracket",{"_index":1173,"t":{"191":{"position":[[210,22]]}}}],["setup",{"_index":583,"t":{"119":{"position":[[131,5]]},"125":{"position":[[3147,5]]}}}],["sever",{"_index":721,"t":{"139":{"position":[[128,7]]}}}],["sftp",{"_index":324,"t":{"83":{"position":[[548,4]]},"87":{"position":[[319,4]]}}}],["share",{"_index":728,"t":{"139":{"position":[[501,5]]},"151":{"position":[[355,7]]},"207":{"position":[[699,5]]},"211":{"position":[[677,6]]}}}],["shared/.sharedrc",{"_index":763,"t":{"143":{"position":[[474,22]]},"209":{"position":[[116,22]]}}}],["shared/images/background_300x250.jpg",{"_index":1239,"t":{"215":{"position":[[415,45]]}}}],["sharedrc",{"_index":457,"t":{"91":{"position":[[2600,9]]},"207":{"position":[[370,10]]},"211":{"position":[[4,9]]}}}],["sheet",{"_index":727,"t":{"139":{"position":[[473,5]]}}}],["shortcut",{"_index":1189,"t":{"199":{"position":[[149,9]]}}}],["shorthand",{"_index":389,"t":{"87":{"position":[[361,9],[503,9],[853,9]]},"91":{"position":[[292,9],[1149,9]]}}}],["show",{"_index":375,"t":{"85":{"position":[[1231,4]]},"193":{"position":[[104,5],[133,5]]},"199":{"position":[[263,4]]},"227":{"position":[[6,5]]}}}],["similar",{"_index":755,"t":{"143":{"position":[[61,7]]},"191":{"position":[[0,7]]}}}],["simpl",{"_index":1091,"t":{"173":{"position":[[171,6]]}}}],["simpli",{"_index":525,"t":{"105":{"position":[[1408,6]]}}}],["simplifi",{"_index":657,"t":{"127":{"position":[[89,10]]}}}],["simultan",{"_index":788,"t":{"151":{"position":[[146,14]]}}}],["singl",{"_index":506,"t":{"103":{"position":[[390,6]]},"105":{"position":[[1267,6]]},"139":{"position":[[149,6]]}}}],["singleton",{"_index":691,"t":{"129":{"position":[[81,9]]}}}],["size",{"_index":725,"t":{"139":{"position":[[268,5]]},"143":{"position":[[83,5],[511,7]]},"209":{"position":[[42,4],[462,7]]},"219":{"position":[[442,7],[542,4],[580,4]]},"229":{"position":[[366,4],[439,5],[646,5]]}}}],["skip",{"_index":424,"t":{"91":{"position":[[419,4],[700,4],[1017,8],[1293,8]]}}}],["skipbuild",{"_index":421,"t":{"91":{"position":[[386,9],[451,9],[735,9],[1132,9],[1208,9]]}}}],["skippreview",{"_index":432,"t":{"91":{"position":[[665,11],[1417,11]]}}}],["slack",{"_index":339,"t":{"85":{"position":[[406,5]]}}}],["slim",{"_index":23,"t":{"9":{"position":[[83,8]]}}}],["slow",{"_index":591,"t":{"119":{"position":[[317,4]]}}}],["sm",{"_index":668,"t":{"127":{"position":[[994,3]]}}}],["some_nice_layout",{"_index":1167,"t":{"189":{"position":[[219,16]]}}}],["someth",{"_index":187,"t":{"53":{"position":[[278,9]]},"77":{"position":[[484,9]]},"79":{"position":[[189,9]]},"83":{"position":[[258,9]]},"85":{"position":[[1281,9]]},"105":{"position":[[331,9],[1116,9],[1191,9],[1954,9],[2292,9]]},"131":{"position":[[58,9]]},"221":{"position":[[1157,9],[1179,9]]}}}],["sometim",{"_index":77,"t":{"21":{"position":[[0,9]]},"109":{"position":[[720,9]]},"117":{"position":[[0,10]]},"149":{"position":[[0,9]]}}}],["soon",{"_index":563,"t":{"109":{"position":[[415,5]]}}}],["sourc",{"_index":262,"t":{"77":{"position":[[413,6]]},"105":{"position":[[1850,6],[2125,6]]},"139":{"position":[[429,7]]},"141":{"position":[[184,6]]}}}],["space",{"_index":246,"t":{"77":{"position":[[178,7],[1059,7]]},"105":{"position":[[472,7],[1245,7]]},"163":{"position":[[455,7],[969,7]]}}}],["spacebar",{"_index":515,"t":{"105":{"position":[[803,9]]},"151":{"position":[[206,11]]},"199":{"position":[[382,9]]}}}],["spec",{"_index":123,"t":{"33":{"position":[[93,6]]}}}],["special",{"_index":521,"t":{"105":{"position":[[1230,7]]}}}],["specif",{"_index":715,"t":{"131":{"position":[[515,8]]},"209":{"position":[[89,8]]}}}],["spreadsheet",{"_index":510,"t":{"105":{"position":[[420,13]]},"137":{"position":[[7,12]]},"139":{"position":[[11,12],[391,11]]},"141":{"position":[[28,11],[989,12]]},"143":{"position":[[24,11],[134,11]]},"223":{"position":[[56,11]]}}}],["src",{"_index":1334,"t":{"235":{"position":[[71,3]]},"239":{"position":[[71,3]]}}}],["src/300x250/.richmediarc",{"_index":511,"t":{"105":{"position":[[547,26]]},"177":{"position":[[434,25]]},"215":{"position":[[215,25],[362,25]]},"219":{"position":[[258,25],[402,25]]},"221":{"position":[[842,25]]}}}],["src/300x250/.richmediarc_b1_na_smb",{"_index":761,"t":{"143":{"position":[[426,35]]}}}],["src/300x250/[.richmediarc",{"_index":288,"t":{"79":{"position":[[286,26]]}}}],["src/300x250/css/style.css",{"_index":1247,"t":{"219":{"position":[[325,26],[483,26]]}}}],["src/300x250/index.hb",{"_index":844,"t":{"169":{"position":[[98,22],[235,22],[2783,22]]},"215":{"position":[[279,22],[461,22]]}}}],["src/300x250/js/animation.j",{"_index":1265,"t":{"221":{"position":[[903,28]]}}}],["src/300x600/.richmediarc",{"_index":512,"t":{"105":{"position":[[578,26]]}}}],["src/728x90/.richmediarc",{"_index":513,"t":{"105":{"position":[[609,25]]}}}],["src/970x250/.richmediarc",{"_index":514,"t":{"105":{"position":[[639,26]]}}}],["src/plain",{"_index":272,"t":{"77":{"position":[[874,13]]}}}],["src/shared/.sharedrc",{"_index":734,"t":{"141":{"position":[[237,21]]},"143":{"position":[[155,21]]}}}],["src/shared/components/menuitems.hb",{"_index":1143,"t":{"181":{"position":[[0,36]]}}}],["src/shared/css/style.css",{"_index":295,"t":{"79":{"position":[[672,24]]}}}],["src/shared/index.hb",{"_index":296,"t":{"79":{"position":[[762,20]]},"175":{"position":[[205,21]]},"177":{"position":[[225,21]]},"181":{"position":[[121,21]]},"183":{"position":[[110,21]]},"187":{"position":[[48,21]]},"189":{"position":[[98,21]]},"191":{"position":[[88,21]]},"193":{"position":[[170,21]]}}}],["src/shared/myexamplepartial.hb",{"_index":1151,"t":{"183":{"position":[[0,32]]}}}],["src/shared/script/animation.j",{"_index":293,"t":{"79":{"position":[[554,30]]}}}],["src/shared/script/banner.j",{"_index":294,"t":{"79":{"position":[[616,27]]},"149":{"position":[[137,28]]},"161":{"position":[[160,28]]}}}],["src/shared/script/main.j",{"_index":291,"t":{"79":{"position":[[467,25]]}}}],["src/{size}x{width",{"_index":264,"t":{"77":{"position":[[499,20]]}}}],["src=\"captain.gif",{"_index":1106,"t":{"175":{"position":[[366,17]]}}}],["src=\"https://s0.2mdn.net/ads/studio/enabler.j",{"_index":696,"t":{"129":{"position":[[407,48]]}}}],["src=\"logo.svg",{"_index":849,"t":{"169":{"position":[[187,14]]}}}],["src=\"{{content.logo",{"_index":1090,"t":{"169":{"position":[[2871,22]]}}}],["src=\"{{thi",{"_index":1114,"t":{"177":{"position":[[355,15]]}}}],["src={{this.subtitl",{"_index":1178,"t":{"193":{"position":[[310,21]]}}}],["standard",{"_index":693,"t":{"129":{"position":[[214,8]]}}}],["start",{"_index":180,"t":{"53":{"position":[[169,5]]},"71":{"position":[[8,7]]},"81":{"position":[[8,7]]},"83":{"position":[[146,5]]},"89":{"position":[[8,7]]},"93":{"position":[[8,7]]},"101":{"position":[[8,7],[16,5]]},"105":{"position":[[3,5],[222,5],[1497,5],[1925,5]]},"127":{"position":[[854,9],[2157,8]]},"149":{"position":[[53,6]]},"209":{"position":[[363,8]]}}}],["statement",{"_index":1099,"t":{"175":{"position":[[69,11]]}}}],["step",{"_index":653,"t":{"125":{"position":[[3163,4]]}}}],["still",{"_index":584,"t":{"119":{"position":[[140,5]]}}}],["store",{"_index":344,"t":{"85":{"position":[[466,5]]},"91":{"position":[[2500,5]]},"127":{"position":[[969,5]]}}}],["string",{"_index":1170,"t":{"191":{"position":[[20,8]]},"193":{"position":[[162,7]]},"231":{"position":[[49,8]]},"235":{"position":[[62,8]]},"239":{"position":[[62,8]]},"243":{"position":[[109,9]]}}}],["structur",{"_index":598,"t":{"125":{"position":[[94,9]]},"175":{"position":[[147,10]]}}}],["studio",{"_index":323,"t":{"83":{"position":[[541,6]]},"125":{"position":[[276,6],[2862,6]]},"129":{"position":[[59,7],[886,6]]}}}],["studio'",{"_index":604,"t":{"125":{"position":[[372,8]]}}}],["style",{"_index":1294,"t":{"229":{"position":[[421,7]]}}}],["sub",{"_index":394,"t":{"87":{"position":[[639,3]]}}}],["subdirectori",{"_index":184,"t":{"53":{"position":[[235,14]]},"105":{"position":[[288,14]]}}}],["submit",{"_index":200,"t":{"61":{"position":[[103,6]]},"69":{"position":[[464,6]]}}}],["subset",{"_index":16,"t":{"9":{"position":[[5,10]]},"133":{"position":[[12,10]]},"211":{"position":[[574,6],[862,11]]}}}],["subtitl",{"_index":1182,"t":{"193":{"position":[[367,8]]}}}],["subtitle\">{{{this.title}}}logo",{"_index":856,"t":{"169":{"position":[[376,11]]}}}],["togeth",{"_index":435,"t":{"91":{"position":[[921,9]]}}}],["toggl",{"_index":247,"t":{"77":{"position":[[204,6],[1085,6]]},"105":{"position":[[498,6]]},"163":{"position":[[481,6],[995,6]]},"199":{"position":[[345,6]]}}}],["tool",{"_index":101,"t":{"27":{"position":[[43,4]]},"83":{"position":[[102,4],[315,4]]},"85":{"position":[[659,4]]},"95":{"position":[[148,4],[168,6]]},"125":{"position":[[163,4]]},"163":{"position":[[148,4]]}}}],["toolse",{"_index":824,"t":{"163":{"position":[[316,7]]}}}],["top",{"_index":1299,"t":{"229":{"position":[[526,4]]}}}],["track",{"_index":694,"t":{"129":{"position":[[223,8]]}}}],["transform",{"_index":1307,"t":{"229":{"position":[[607,10]]}}}],["translat",{"_index":578,"t":{"117":{"position":[[225,13]]},"229":{"position":[[618,10]]}}}],["tri",{"_index":117,"t":{"33":{"position":[[31,3],[67,3]]},"99":{"position":[[341,3]]},"109":{"position":[[125,3]]}}}],["trick",{"_index":655,"t":{"125":{"position":[[3300,6]]}}}],["troubl",{"_index":483,"t":{"99":{"position":[[210,7]]}}}],["true",{"_index":551,"t":{"109":{"position":[[68,5]]},"125":{"position":[[2057,5]]},"233":{"position":[[336,5]]},"237":{"position":[[318,6]]}}}],["turn",{"_index":175,"t":{"53":{"position":[[85,4]]},"105":{"position":[[152,4]]}}}],["tween",{"_index":782,"t":{"149":{"position":[[747,5]]},"153":{"position":[[172,7]]}}}],["twice",{"_index":560,"t":{"109":{"position":[[383,5]]}}}],["type",{"_index":54,"t":{"17":{"position":[[175,4]]},"77":{"position":[[531,4],[565,4],[823,4]]},"87":{"position":[[234,4],[239,4],[742,4]]},"105":{"position":[[25,4],[1186,4]]},"227":{"position":[[51,5]]}}}],["typeof",{"_index":1165,"t":{"189":{"position":[[87,10]]}}}],["ul",{"_index":1145,"t":{"181":{"position":[[63,4]]}}}],["ul> to select, to toggle all, to invert selection, and to proceed) ◯ 160x600 ◯ 300x50❯◉ 300x250 ◯ 300x600 ◯ 320x50 ◯ 320x240 ◯ 320x480(Move up and down to reveal more choices) Enter the directory where you wish the source files to be placed. Just hit enter to use the default, which is something like ./src/{size}x{width} Select the type of banner: ? Please select a type you want: (Use arrow keys)❯ plain doubleclick flashtalking Then you will have to answer which units you want to have their own html. You will need to answer the same with the CSS and the JS: ? Please select a set for your unit: 300x250? Please select a type you want: plain? Where do you want to put it? ./src/plain/? Please select display unit with separate html: 300x250? Please select display unit with separate javascript: 300x250? Please select display unit with separate css: (Press to select, to toggle all, to invert selection, and to proceed)❯◉ 300x250","s":"Step 3","u":"/display-advertising-docs/docs/getting-started/creating-a-new-project","h":"#step-3","p":65},{"i":74,"t":"The generator will generate the basic template files and install the according node modules as well. This process will take a minute. When it’s done, you’ll end up with a directory looking something like this: Filename Description node_modules all the packages / libraries your project src/300x250/[.richmediarc] The configuration file for the richmedia-temple-server, This file is used so that the richmedia-temple-server knows what directories are richmedia units. src/shared/script/main.js Javascript File this is referenced by the .richmediarc file. src/shared/script/Animation.js The animation javascript code. src/shared/script/Banner.js The banner javascript code. src/shared/css/style.css Main CSS file, this file is referenced by the .richmediarc file. src/shared/index.hbs Main HTML (with handlebars) file, this file is referenced by the .richmediarc file. .editorconfig configuration file for you editor. So everyone atleasts uses the same basic settings. .gitignore configuration file used by git so it knows which files to ignore. .prettierrc A configuration file for prettier printer [package.json] A configuration file for NPM / YARN, one of the most important files in your project.","s":"Step 4","u":"/display-advertising-docs/docs/getting-started/creating-a-new-project","h":"#step-4","p":65},{"i":76,"t":"Contributing How to create an issue","s":"How to create an issue","u":"/display-advertising-docs/docs/contributing/create-issue","h":"","p":75},{"i":78,"t":"Getting started Installation","s":"Installation","u":"/display-advertising-docs/docs/getting-started/installation","h":"","p":77},{"i":80,"t":"NodeJS Terminal / Windows Powershell Code editor (VSCode, Webstorm) The display generator is built with the help of Yeoman which is web scaffolding tool for modern web tools. The first thing that we will need to do is install yeoman globally, so it's available in your terminal / command prompt as yo. Open your terminal run the following commands:","s":"Prerequisites","u":"/display-advertising-docs/docs/getting-started/installation","h":"#prerequisites","p":77},{"i":82,"t":"First install Yeoman globally npm install -g yo","s":"Step 1","u":"/display-advertising-docs/docs/getting-started/installation","h":"#step-1","p":77},{"i":84,"t":"Install the Media.Monks display-boilerplate generator globally npm install -g generator-display-boilerplate Verify Yeoman is working globally by running the following command yo --version tip If you are having trouble with your user account not having admin rights with installing the generator-display-boilerplate and are working on a mac, try to use \"sudo\" in front of the commands. By using \"sudo,\" the user is granted temporary administrative access, allowing them to perform tasks that require root or administrator permissions. So for example: sudo npm install -g generator-display-boilerplate","s":"Step 2","u":"/display-advertising-docs/docs/getting-started/installation","h":"#step-2","p":77},{"i":86,"t":"Getting started Start the server","s":"Start the server","u":"/display-advertising-docs/docs/getting-started/start-the-server","h":"","p":85},{"i":88,"t":"To explain this as fast as possible, the DDS (display dev server) is a build and development server to develop and build display units as fast as possible. It does this by setting up a Webpack environment where ever it finds a [.richmediarc] file. Why? Because its faster to just use the same webpack and webpack.config for every display advertising unit, instead of creating one for every single unit.","s":"What is the Display Development Server?","u":"/display-advertising-docs/docs/getting-started/start-the-server","h":"#what-is-the-display-development-server","p":85},{"i":90,"t":"To start the dev server, type the following command in your terminal: npm run dev “Dev” is actually a script which is found in [package.json], which in turn runs the command rds-dev. After you execute this script, it will start searching for .richmediarc files in all the directories and subdirectories of your project. You’ll see something like this: i Searching for configs✔ Found 4 config(s)✔ Taking a look if it has Spreadsheets? Please select config(s) build: (Press to select, to toggle all, to invert selection)>( ) all ( ) ./src/300x250/.richmediarc ( ) ./src/300x600/.richmediarc ( ) ./src/728x90/.richmediarc ( ) ./src/970x250/.richmediarc Here, you can select which units you wish to preview. Navigate with arrow keys and select (it’s possible to select multiple values) with spacebar, then press enter to confirm your selection. Do you want a browser to open to your dev location? (Y/N) You can select to open a new browser window or not. Save this as a separate part command in package.json (Y/N) Use this option to save your selection as a separate command. If you select Y, you’ll see something like this: Please provide a name for your command. You will type something like npm run dev:__NAME__ No special chars, spaces, dashes just a single word. You’ll have to give it a unique name, for example “selection”. Now you will be able to run a dev server with the same selection simply by running npm run dev:selection It will now compile the banners you selected and start a local server on port 8000. You can see the preview at http://localhost:8000. note If port 8000 is busy, it will automatically use the next available port, 8001, 8002, etc. info Important You don’t have to restart the server if you make any changes to your banner’s code. It will automatically recompile your units when it detects changes in the source code.. Make sure everything works by running: npm run dev This will start the server. You’ll see something like this. Press N Your primary browser will launch, opening http://localhost:8000/ In your terminal, you’ll be able to see the output of webpack, compiling the source code. In your browser, the preview environment will load along with a preview of the compiled version of the banner you just created. The banner should display something like this. If there are no javascript errors and everything works fine, that’s it!","s":"Running the DDS","u":"/display-advertising-docs/docs/getting-started/start-the-server","h":"#running-the-dds","p":85},{"i":92,"t":"Getting started Upload a preview","s":"Upload a preview","u":"/display-advertising-docs/docs/getting-started/upload-a-preview","h":"","p":91},{"i":94,"t":"Uploading your banners to a preview can be done in a number of ways. The easiest method is to use our tool called “display-upload”, which you can start by running the following command: npm run preview If it’s the first time you run this command, you’ll see something like this: Welcome to the Display.Monks Upload Tool v1.6.2? No .uploadrc as added to the .gitignore, should i add it? (Y/n) Press Y. You’ll see the following options ? Where do you want to upload? (Use arrow keys)> Mediamonks Preview Adform Flashtalking Google DoubleClick Studio SFTP (alpha)","s":"How to use","u":"/display-advertising-docs/docs/getting-started/upload-a-preview","h":"#how-to-use","p":91},{"i":96,"t":"This will upload the entire build folder to a S3 bucket. When you select this, you’ll have to enter a few things: ? What directory you want to upload? Just enter build here by default. ? Please fill in the name for the S3 Bucket:? Please fill in the accessKeyId for the S3 Bucket:? Please fill in the secretAccessKey for the S3 Bucket: These values you can find in the pinned messages of our ‘wfh-aas-dev’ Slack channel. note If you are a Windows user, you can also store these credentials in your Environment Variables. Add the variables preview_accessKeyId, preview_accessKeySecret and preview_s3bucket with the respective values to the user variables. The tool will automatically generate a unique hash value as the directory name of the preview. Just press enter or add your own value and then press enter. ? outputDir: (3334d7e2-3d58-4c84-aec7-4b6d4f50c7f0/) important Keep in mind that this unique hash has been created in order always create a unique url, to change this to a common url like test/ or client/ is therefore a bad practise. Better use the hash in combination with your own project, like 3334d7e2-3d58-4c84-aec7-4b6d4f50c7f0/client/project/ads/v1/ It will then upload the contents of the ./build/ directory and show you a link to the preview, which should look something like this: http://richmedia-previews-s3bucket-khpmpnjb2dya.s3.amazonaws.com/3334d7e2-3d58-4c84-aec7-4b6d4f50c7f0/index.html","s":"MediaMonks Preview","u":"/display-advertising-docs/docs/getting-started/upload-a-preview","h":"#mediamonks-preview","p":91},{"i":98,"t":"These parameters might be useful if you want to create multiple previews, for each different version of an ad for example. There is a parameter outputDir available that you can run along with the build command. Property Description --type type of preview, possible values mm-preview, adform, flashtalking, doubleclick, sftp --inputDir Relative input directory, shorthand is -i. By default ./build, but you can change it to for example ./build/version1/ --outputDir Relative online url output directory, shorthand is -o. by default a unique hash/, but you can change it to for example 3334d7e2-3d58-4c84-aec7-4b6d4f50c7f0/version1/ to make sub pages inside your hash Examples​ Via the Commandline​ Use the preview command npm run preview -- --type mm-preview --inputDir ./build/version1/ --outputDir 1f08c1d9-b4f1-4a47-831b-409cf070b151/version1/ or the shorthand version: npm run preview -- -t mm-preview -i ./build/version1/ -o 1f08c1d9-b4f1-4a47-831b-409cf070b151/version1/ In your package.json​ Use the dds command \"preview:version1\": \"display-upload -t mm-preview -i ./build/version1/ -o 1f08c1d9-b4f1-4a47-831b-409cf070b151/version1/ Advanced combinations​ Example with a glob for automizing purposes: \"build-preview:version1\": \"dds --mode production -o ./build/version1/ --choices eyJsb2NhdGlvbiI6WyJhbGwiXSwiZW1wdHlCdWlsZERpciI6dHJ1ZX0= && display-upload -t mm-preview -i ./build/version1 -o 1f08c1d9-b4f1-4a47-831b-409cf070b151/version1/\" Or use combinations of the different scripts, here in doall:v1, build:v1 and upload:v1 are combined to one new script \"build:v1\": \"dds --mode production -o build/v1\",\"upload:v1\": \"display-upload -t mm-preview -i build/v1 -o 12528e62-6871-47de-abd1-6144e476bc73/v1/\",\"doall:v1\": \"npm run build:v1 && npm run upload:v1\",","s":"Preview parameters","u":"/display-advertising-docs/docs/getting-started/upload-a-preview","h":"#preview-parameters","p":91},{"i":101,"t":"Issues can be created in a variety of ways, so you can choose the most convenient method for your workflow. Please follow the GitHub official docs to create a ticket.","s":"📄️ How to create an issue","u":"/display-advertising-docs/docs/category/contributing","h":"","p":99},{"i":103,"t":"Propose a change","s":"📄️ How to update Documentation","u":"/display-advertising-docs/docs/category/contributing","h":"","p":99},{"i":105,"t":"Before proposing/making a change it is necessary to select the relevant repository.","s":"📄️ How to update Framework","u":"/display-advertising-docs/docs/category/contributing","h":"","p":99},{"i":107,"t":"Guides Automatically optimize zips","s":"Automatically optimize zips","u":"/display-advertising-docs/docs/guides/auto-optimizing-ads","h":"","p":106},{"i":109,"t":"package.json settings\": { \"maxFileSize\": 150, \"optimizeToFileSize\": true, \"lowestImageQuality\": 20} The dev-server will then try to optimize your zip, lowering the quality of the jpg/png files until it is below the maxFileSize. If you use this, set image optimization to false in the optimization object in the settings of the .richmediarc, otherwise webpack will optimize the image twice (will fix this in a patch soon) The lowest quality it will use is 60. Going lower could potentially cause artifacts. However, if you add \"lowestImageQuality\" you can overwrite this value and lower the quality. note You may wonder why not just \"optimizeToFileSize\": 150? This is because maxFileSize is also used by the preview, and sometimes you don’t want to use optimizeToFileSize.","s":"Configuration","u":"/display-advertising-docs/docs/guides/auto-optimizing-ads","h":"#configuration","p":106},{"i":111,"t":"Guides Clean output template","s":"Clean output template","u":"/display-advertising-docs/docs/guides/clean-output-template","h":"","p":110},{"i":113,"t":"Sometimes, other agencies or teams in MM will request the built zips of ads built with our framework, with the intention of adjusting after build without the use of the framework. This could be for creating extra versions or translations.","s":"Purpose","u":"/display-advertising-docs/docs/guides/clean-output-template","h":"#purpose","p":110},{"i":115,"t":"You can find the clean output in a separate repo: https://github.com/mirkovw/display-advertising-cleanoutput-template caution This setup is still in experimental phase so do use it with caution. It is always recommendable to use the full framework to quickly make amends and new resizes. Using the export will always slow down the process and create less overview and less reusable code.","s":"Repo","u":"/display-advertising-docs/docs/guides/clean-output-template","h":"#repo","p":110},{"i":117,"t":"Guides Create banners with parameters","s":"Create banners with parameters","u":"/display-advertising-docs/docs/guides/commands","h":"","p":116},{"i":119,"t":"Guides Dynamic Import","s":"Dynamic Import","u":"/display-advertising-docs/docs/guides/dynamic-import","h":"","p":118},{"i":121,"t":"Guides Extends Animation","s":"Extends Animation","u":"/display-advertising-docs/docs/guides/extends-animation","h":"","p":120},{"i":123,"t":"Guides Data binding","s":"Data binding","u":"/display-advertising-docs/docs/guides/dataBind","h":"","p":122},{"i":125,"t":"Guides Font Subsetting","s":"Font Subsetting","u":"/display-advertising-docs/docs/guides/font-subsetting","h":"","p":124},{"i":127,"t":"Guides Dynamic Creative Optimization","s":"Dynamic Creative Optimization","u":"/display-advertising-docs/docs/guides/dco","h":"","p":126},{"i":129,"t":"The Generate Code contains some important information, such as the Profile Id and the general structure of the data feed you'll be using. The Generate Code is the tool you need to develop your creative unit in a dynamic way. Data team should be responsible for setting up the Studio environment and handing you the Generate Code. You must replace the default code for the Studio's Generated Code in the getDynamicData() function in the getDynamicData.js file of your project. export default function getDynamicData() { /***************************************************************************************************************************** * Paste DC Dynamic Code HERE * *****************************************************************************************************************************/ // Dynamic Content variables and sample values Enabler.setProfileId(00000000); var devDynamicContent = {}; devDynamicContent.some_project_name = [{}]; devDynamicContent.some_project_name[0]._id = 0; devDynamicContent.some_project_name[0].Unique_ID = 0; devDynamicContent.some_project_name[0].Reporting_Label = \"dummy_info\"; devDynamicContent.some_project_name[0].Headline_Copy_Reporting = \"dummy_info\"; devDynamicContent.some_project_name[0].Image_Series_Reporting = \"dummy_info\"; devDynamicContent.some_project_name[0].Image_Reporting = \"dummy_info\"; devDynamicContent.some_project_name[0].CTA_Copy = \"dummy_info\"; devDynamicContent.some_project_name[0].CTA_Button_Color = \"dummy_info\"; devDynamicContent.some_project_name[0].Background_Color = \"dummy_info\"; devDynamicContent.some_project_name[0].Footer_Color_Reporting = \"dummy_info\"; devDynamicContent.some_project_name[0].Headline_Copy = \"dummy_info\"; devDynamicContent.some_project_name[0].Image = {}; devDynamicContent.some_project_name[0].Image.Type = \"file\"; devDynamicContent.some_project_name[0].Image.Url = \"dummy_info\"; devDynamicContent.some_project_name[0].Exit_URL = {}; devDynamicContent.some_project_name[0].Exit_URL.Url = \"dummy_info\"; devDynamicContent.some_project_name[0].Active = true; Enabler.setDevDynamicContent(devDynamicContent); /***************************************************************************************************************************** * END Paste DC Dynamic Code * *****************************************************************************************************************************/ let feedName = Object.keys(devDynamicContent)[0]; return window.dynamicContent[feedName][0];} In your Banner.js file you will be setting up your feed variable with the getDynamicData() function. async init() { ... this.feed = getDynamicData(); ...} You can now access the dynamic information of the feed by calling its attributes. This way you are connecting these values to the dynamic data feed. The values will change accordingly once the unit is uploaded to the Studio environment. async init() { ... // Select elements const title = document.body.querySelector('#title'); // Asign values title.innerHTML = this.feed.Headline_Copy; ...} info For further information visit: https://support.google.com/richmedia/answer/3526354?hl=en#zippy=%2Csample-setup-code-from-step-generate-code important Note that it is possible to receive a multiple-feed Generate Code for your project. Please check the Tips & tricks section for further information.","s":"Feed configuration","u":"/display-advertising-docs/docs/guides/dco","h":"#feed-configuration","p":126},{"i":131,"t":"If you receive a multiple-feed Generate Code you may find useful to return the feed as a simplified key-value pair of the various feeds that you can then access in the Banner.js from the \"feed\" variable. This way you can access to every feed separately as needed. Here is an example: export default function getDynamicData() { /***************************************************************************************************************************** * Paste DC Dynamic Code HERE * *****************************************************************************************************************************/ // Dynamic Content variables and sample values Enabler.setProfileId(00000000); var devDynamicContent = {}; devDynamicContent.Campaign_Feed = [{}]; devDynamicContent.Campaign_Feed[0]._id = 0; devDynamicContent.Campaign_Feed[0].CTA_Copy = \"Get started\"; devDynamicContent.Campaign_Feed[0].Headline_Copy = \"One-click ecommerce integrations_Connect your online store in no time_Email + SMS just got easier\"; devDynamicContent.Selection_Feed = [{}]; devDynamicContent.Selection_Feed[0]._id = 0; devDynamicContent.Selection_Feed[0].Image_Series = \"CeramistStudio\"; devDynamicContent.Selection_Feed[0].Image_Reporting = \"CeramistStudioPotteryWheel_CeramistSmilingStudio_WooCommerce\"; devDynamicContent.Destination_Feed = [{}]; devDynamicContent.Destination_Feed[0]._id = 0; devDynamicContent.Destination_Feed[0].CTA_Button_Color = \"Charcoal\"; devDynamicContent.Destination_Feed[0].Background_Color = \"Cotton\"; Enabler.setDevDynamicContent(devDynamicContent); /***************************************************************************************************************************** * END Paste DC Dynamic Code * *****************************************************************************************************************************/ let feedNames = Object.keys(devDynamicContent); const multipleFeed = Object.fromEntries(feedNames.map( (fName) => [fName, window.dynamicContent[fName][0]]) ); return multipleFeed;} And in your Banner.js: async init() { ... this.feed = getDynamicData(); let ctaCopy = this.feed.Campaign_Feed.CTA_Copy; // 'Get started' ...}","s":"Tips & tricks","u":"/display-advertising-docs/docs/guides/dco","h":"#tips--tricks","p":126},{"i":133,"t":"The Enabler is a library required for all DCO creatives in Studio. It provides a singleton object in the global namespace called Enabler. You can call methods on it. The Enabler ensures that your creative includes standard tracking functionality for metrics. In the index.hbs file of your project you will find the script tag that links to the Enabler. You must also set the Profile Id number here. In the Banner.js file, you will find a util that is used to wait for the Enabler to be ready before initializing the banner. import untilEnablerIsInitialized from '@mediamonks/temple/doubleclick/untilEnablerIsInitialized';... async init() { await untilEnablerIsInitialized(); ... } ... info The Profile Id number is the code for linking your creative with the Studio profile. For further information visit https://support.google.com/richmedia/answer/2672553?hl=en","s":"Enabler","u":"/display-advertising-docs/docs/guides/dco","h":"#enabler","p":126},{"i":135,"t":"If the exit URL is assigned through the feed, you can use something like this in your Banner.js file: async init() { ... this.mainExit = this.feed.exitUrl.Url; ... } The default method used in our framework is an Enabler method. The first parameter is an ID that can be used to override the exit later if needed and the second parameter is the URL you've assigned. handleClick = () => { Enabler.exitOverride('Default Exit', this.mainExit); }; important Producers may ask you to use a different method to cover some specific needs. You can find more information about Enabler methods here: https://www.google.com/doubleclick/studio/docs/sdk/html5/en/class_studio_Enabler.html#api info For further information on DCO exits visit https://support.google.com/richmedia/answer/2664807?hl=en","s":"ExitUrl","u":"/display-advertising-docs/docs/guides/dco","h":"#exiturl","p":126},{"i":137,"t":"Guides Custom globs for npm dev/build","s":"Custom globs for npm dev/build","u":"/display-advertising-docs/docs/guides/globbing-dev-build","h":"","p":136},{"i":139,"t":"Guides Ads Recorder","s":"Ads Recorder","u":"/display-advertising-docs/docs/guides/recorder","h":"","p":138},{"i":141,"t":"You must pre-build the ads (display-ads-recorder will ask you for the directory where it will search for the ads), see @mediamonks/display-dev-server. Your ad's index.html must include a tag. otherwise, display-ads-recorder will not recognize it as a ad. The ad must include the function that dispatches and listens to critical events for display-ads-recorder to work. See example here: http://www.github.com/mirkovw/display-record-template.","s":"Requirements","u":"/display-advertising-docs/docs/guides/recorder","h":"#requirements","p":138},{"i":143,"t":"npm i @mediamonks/display-ads-recorder","s":"Installation","u":"/display-advertising-docs/docs/guides/recorder","h":"#installation","p":138},{"i":145,"t":"package.json \"scripts\": { \"dev\": \"dds --mode development\", \"build\": \"dds --mode production\", \"recorder\": \"display-ads-recorder\", \"preview\": \"display-upload\" }, /src/shared/script/Banner.js import enableAdsRecorder from '@mediamonks/display-temple/util/enableRecorder';start(){ enableAdsRecorder(this.animation.getTimeline(), this.config); this.animation.play();}","s":"Configuration","u":"/display-advertising-docs/docs/guides/recorder","h":"#configuration","p":138},{"i":147,"t":"npm run recorder After running the script, you will need to answer a few questions before generating the files: Welcome to the Display.Monks Record Tool v3.1.0make sure you import and include the enableAdsRecorder(timeline, config) function from display templeso the ad can dispatch the right events to the recorder toolsee example here: http://www.github.com/mirkovw/display-record-template? Target Dir? (./build) ? Please select ad(s) to record: (Press to select, to toggle all, to invert selection, and to proceed)>( ) all ( ) ./build/version1_cashback_v2_image_160x600/index.html ( ) ./build/version1_cashback_v2_image_300x250/index.html ( ) ./build/version1_cashback_v2_image_300x600/index.html ( ) ./build/version1_cashback_v2_image_320x50/index.html ( ) ./build/version1_cashback_v2_image_728x90/index.html ( ) ./build/version1_cashback_v2_text_160x600/index.html(Move up and down to reveal more choices) ? Please select output(s) (Press to select, to toggle all, to invert selection, and to proceed)>( ) mp4 ( ) gif (animated) ( ) jpg (last frame) NEW* If you select the option jpg (last frame) it will also ask you for the max KB filesize. important Ad Recorder records only one GSAP timeline, therefore, your animation needs to exist out of one main GSAP timeline that includes all the animations. Recording video from an ad is not supported. :::","s":"Usage","u":"/display-advertising-docs/docs/guides/recorder","h":"#usage","p":138},{"i":149,"t":"Guides Spreadsheets","s":"Spreadsheets","u":"/display-advertising-docs/docs/guides/google-spreadsheets-feed","h":"","p":148},{"i":151,"t":"By using a spreadsheet, you avoid having to generate multiple .richmediarcs for multiple variations. It is possible to generate several units with a single row. So you have a richmedia unit and you need generate 19 different versions with different copy for different sizes and languages. This is now possible with contentSource by adding contentSource to your richmediarc you can link to a spreadsheet and use that as a content source. info Important: if you create a new sheet for a project, please share with the rest of the team for future modifications.","s":"Introduction","u":"/display-advertising-docs/docs/guides/google-spreadsheets-feed","h":"#introduction","p":148},{"i":153,"t":"You can use the basic basic spreadsheet template. As you can see it has 6 columns with the first row defining the name of the column. These rows with their content will be used as the source for the content property of your richmediarc. /src/shared/.sharedrc { \"settings\": { \"bundleName\": \"${content.size}_${settings.version}_${settings.language}\", \"entry\": { \"js\": \"./script/main.js\", \"html\": \"index.hbs\" }, \"contentSource\": { \"url\": \"https://docs.google.com/spreadsheets/d/1BImA3lgTJsbVl56GQTFT-b1dx4FIoeQFBe9WLp0wWxc/edit#gid=0\", \"apiKey\": \"API_KEY\", \"tabName\": \"main\", \"filter\": { \"version\": \"beauty\" } } }, \"content\": { \"title\": \"default title\", \"copy0\": \"default copy\", \"cta\": \"default cta\" }} You just need to replace API_KEY placeholder with your own generated key. You can generate a key here https://developers.google.com/sheets/api/guides/authorizing#APIKey in contentSource you also see a property called tabName and filter. tabName will let you define what tab you want to use of your spreadsheet. filter will let you filter the only values you want. so in this example it will only select rows with the value \"beauty\" in the version column.","s":"Configuration","u":"/display-advertising-docs/docs/guides/google-spreadsheets-feed","h":"#configuration","p":148},{"i":155,"t":"Another alternative for spreadsheet development is to use it similar to DCO, where sizes are added as new columns. Check the advanced spreadsheet example. /src/shared/.sharedrc ...{ \"contentSource\": { \"url\": \"https://docs.google.com/spreadsheets/d/1rqF1F7JhaLYu9_-MPmhzztH9i5OE5XURkWpwtSv1quY/edit?usp=sharing\", \"apiKey\": \"API_KEY\", \"tabName\": \"default\", \"idField\": \"keyField\", \"filter\": { \"master\": \"${content.master}\" } }}... /src/300x250/.richmediarc_B1_NA_SMB { \"parent\": \"../shared/.sharedrc\", \"settings\": { \"size\": { \"width\": 300, \"height\": 250 } }, \"content\": { \"customCss\": \"./css/index.css\", \"master\": \"B1_NA_SMB\" }}","s":"Advanced example","u":"/display-advertising-docs/docs/guides/google-spreadsheets-feed","h":"#advanced-example","p":148},{"i":157,"t":"OAuth2 is another auth way to grab data from a spreadsheet. The main pro about it is security: you don't have to share a feed for public read. The main con comparing to API key is that it's a bit more complicated: 1 string vs 2. In order to use OAuth2 you simply need to remove apiKey property from contentSource so dev-server can switch to OAuth2 mode. /src/shared/.sharedrc ...{ \"contentSource\": { ...- \"apiKey\": \"API_KEY\", ... }}... Then create a new or use an existing OAuth 2.0 Credential from your Google Console https://developers.google.com/sheets/api/guides/authorizing Have a little patience for the key to become active. And then use the Client ID and CLient secret from the newly created key. If the feed is created under your account - no extra shares required. Just run dev-server and follow the CLI tool. And be safe! tip In Windows, when using Oath2.0, make sure you disable your environmental variables googleApiKey, preview_accessKeySecret, preview_s3bucket if you have them. These will otherwise trigger your default API keys.","s":"OAuth2","u":"/display-advertising-docs/docs/guides/google-spreadsheets-feed","h":"#oauth2","p":148},{"i":159,"t":"Guides Gsap","s":"Gsap","u":"/display-advertising-docs/docs/guides/gsap","h":"","p":158},{"i":161,"t":"Sometimes it is necessary to know when the animation starts and when it ends. It is possible to know that using the following callbacks: /src/shared/script/Banner.js setAnimation(animation){ this.animation = animation; //creates new timeline and pauses it this.animation.getTimeline().paused(true); this.animation.getTimeline().eventCallback('onComplete', this.onAnimationComplete); this.animation.getTimeline().eventCallback('onStart', this.onAnimationStart);}/*** A function that should be called when the animation has completed.*/onAnimationComplete = () => { console.log('onComplete');};/*** A function that should be called when the animation begins (when its time changes from 0 * to some other value which can happen more than once if the tween is restarted multiple times). */onAnimationStart = () => { console.log('onStart');};","s":"Using events","u":"/display-advertising-docs/docs/guides/gsap","h":"#using-events","p":158},{"i":163,"t":"You can enable the debug mode with GSDevTools, just add the gsdevtools=true parameter in the url. Example: http://localhost:8000/?gsdevtools=true Simultaneously play/pausing your animations by pressing the ‘Spacebar’. Use the newest Display Boilerplate (6.4.9) in order for it to work. caution Only use it for QA and testing purposes, not meant to be for sharing with the client!","s":"Enable GSDevTools","u":"/display-advertising-docs/docs/guides/gsap","h":"#enable-gsdevtools","p":158},{"i":165,"t":"gsap.utils provides access to some surprisingly helpful utility functions. Note that many of them can optionally return FUNCTIONS so that they can be plugged directly into tweens, leveraging GSAP's function-based capabilities. In that case, they'll get called once for each target rather than just using the same end value for them all. To view the full list, please check the official docs.","s":"Using utils","u":"/display-advertising-docs/docs/guides/gsap","h":"#using-utils","p":158},{"i":167,"t":"Guides Multiple Timelines","s":"Multiple Timelines","u":"/display-advertising-docs/docs/guides/multiple-timelines","h":"","p":166},{"i":169,"t":"Guides Svg","s":"Svg","u":"/display-advertising-docs/docs/guides/svg","h":"","p":168},{"i":171,"t":"Now when adding inline to a img tag and the image has the extension .svg the svg will be inlined. /src/300x250/index.hbs