├── .gitignore
├── .jshintrc
├── CHANGELOG.md
├── CONTRIBUTION.md
├── Gruntfile.js
├── LICENSE.md
├── README.md
├── dist
    ├── appnexus-html5-lib.js
    └── appnexus-html5-lib.min.js
├── docs
    ├── Google Web Designer
    │   └── Standard
    │   │   ├── an_logo.png
    │   │   └── index.html
    ├── Walkthrough-For-Adobe-Edge-Created-Ads.md
    ├── Walkthrough-For-Google-Web-Designer-Created-Ads.md
    └── Walkthrough-For-Manually-Created-Ads.md
├── examples
    ├── ads.json
    ├── expanding-push
    │   ├── css
    │   │   └── main.css
    │   ├── images
    │   │   └── an_logo.png
    │   └── index.html
    ├── expanding
    │   ├── css
    │   │   └── main.css
    │   ├── images
    │   │   └── an_logo.png
    │   └── index.html
    ├── interstitial
    │   ├── images
    │   │   └── an_logo.png
    │   ├── index.html
    │   ├── js
    │   │   └── script.js
    │   ├── media
    │   │   └── video.mp4
    │   └── styles
    │   │   └── style.css
    └── standard
    │   ├── css
    │       └── main.css
    │   ├── images
    │       └── an_logo.png
    │   └── index.html
├── package.json
├── src
    ├── client.js
    └── lib
    │   ├── event-listener.js
    │   ├── guid.js
    │   ├── porthole.js
    │   └── utils.js
└── test
    ├── client-ready-test.js
    ├── client-test.js
    ├── helpers
        ├── fixtures.js
        └── jsdom.js
    ├── lib-event-listener-test.js
    ├── lib-guid-test.js
    ├── lib-porthole-test.js
    └── lib-utils-test.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | .idea
4 | npm-debug.log
5 | 


--------------------------------------------------------------------------------
/.jshintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |     "browser": true,
 3 |     "node": true,
 4 |     "es5": true,
 5 |     "esnext": true,
 6 |     "bitwise": false,
 7 |     "curly": false,
 8 |     "eqeqeq": true,
 9 |     "eqnull": true,
10 |     "immed": true,
11 |     "latedef": false,
12 |     "laxcomma": true,
13 |     "newcap": true,
14 |     "noarg": true,
15 |     "undef": true,
16 |     "strict": true,
17 |     "trailing": true,
18 |     "smarttabs": true,
19 |     "white": true
20 | }
21 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | == HEAD
2 | 


--------------------------------------------------------------------------------
/CONTRIBUTION.md:
--------------------------------------------------------------------------------
 1 | # Contribution Guidelines
 2 | 
 3 | ## Commit Messages (for Internal AppNexus Contributors)
 4 | 
 5 | Prepend your commit message with the approrpiate JIRA ticket number: `CR-####: ...`.
 6 | 
 7 | ## Merging Branches
 8 | 
 9 | Squashing commits is not mandatory, but can optionally be done to clean up Git history if your change is particularly large.
10 | 
11 | ## Raising Github Issues 
12 | 
13 | If you are an external (non-AppNexus employee) contributor, feel free to create Github issues, and the internal team will respond as soon as possible.
14 | 
15 | # Development Guidelines
16 | 
17 | ## Installation
18 | 
19 | Run the following from the directory where you want the repo to live in
20 | 
21 | ```
22 | git clone <this-repo-url> html5-lib
23 | cd html5-lib
24 | npm install
25 | ```
26 | 
27 | <br /><br />
28 | ## Development
29 | 
30 | You can develop and test on the fly by running:
31 | 
32 | ```
33 | npm run watch
34 | ```
35 | This will automatically rebuild `appnexus-html5-lib.js` when any of the files under `src` change.
36 | 
37 | 
38 | To view example creatives, simply double click on them to open them up in your browser.
39 | 
40 | <br /><br />
41 | ## Building
42 | 
43 | To build the minified version run:
44 | 
45 | ```
46 | npm run build
47 | ```
48 | 
49 | This will build two files, `appnexus-html5-lib.js` and `appnexus-html5-lib.min.js`.
50 | 
51 | <br /><br />
52 | ## Deploying
53 | 
54 | For deploying run:
55 | 
56 | ```
57 | npm version [major|minor|patch]
58 | ```
59 | 
60 | This will build the library, test it, and create a tag with the new version if tests don't fail.
61 | 
62 | 
63 | The appnexus-html-lib.min.js needs to be placed on the CDN in a folder corresponding to its version number. for example `https://acdn.adnxs.com/html5-lib/1.0.0/appnexus-html5-lib.min.js`. Always use the version tag file under dist.
64 | 
65 | Dont forget to update the examples to point to the latest tag been released.
66 | 
67 | <br /><br />
68 | 


--------------------------------------------------------------------------------
/Gruntfile.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | 
 3 | module.exports = function (grunt) {
 4 | 
 5 |   // Project dependency tasks
 6 |   grunt.loadNpmTasks('grunt-browserify');
 7 |   grunt.loadNpmTasks('grunt-contrib-clean');
 8 |   //grunt.loadNpmTasks('grunt-contrib-concat');
 9 |   grunt.loadNpmTasks('grunt-contrib-uglify');
10 |   //grunt.loadNpmTasks('grunt-contrib-qunit');
11 |   //grunt.loadNpmTasks('grunt-contrib-jshint');
12 |   grunt.loadNpmTasks('grunt-contrib-watch');
13 | 
14 |   // Project configuration
15 |   grunt.initConfig({
16 |     pkg: grunt.file.readJSON('package.json'),
17 |     clean: {
18 |       dist: ['dist/*'],
19 |     },
20 |     browserify: {
21 |       client: {
22 |         browserifyOptions: {
23 |           debug: true,
24 |           noParse: true
25 |         },
26 |         src: ['src/client.js'],
27 |         dest: 'dist/<%= pkg.name %>.js'
28 |       }
29 |     },
30 |     uglify: {
31 |       client: {
32 |         options: {
33 |           banner: '/*\n * <%= pkg.description %> for Client\n * Author: <%= pkg.author.name %> (<%= pkg.author.email %>) \n * Website: <%= pkg.author.url %>\n * <%= pkg.license %> Licensed.\n *\n * <%= pkg.name %>.min.js <%= pkg.version %>\n */\n '
34 |         },
35 |         src: 'dist/<%= pkg.name %>.js',
36 |         dest: 'dist/<%= pkg.name %>.min.js'
37 |       }
38 |     },
39 |     watch: {
40 |       test: {
41 |         files: 'src/**/*.js',
42 |         tasks: ['browserify']
43 |       }
44 |     }
45 |   });
46 | 
47 |   //grunt.registerTask('default', ['jshint', 'qunit', 'clean', 'concat', 'uglify']);
48 |   grunt.registerTask('default', ['clean', 'browserify', 'watch']);
49 |   grunt.registerTask('build', ['clean', 'browserify', 'uglify']);
50 | };


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | Copyright 2016 AppNexus Inc.
 2 | 
 3 | Licensed under the Apache License, Version 2.0 (the "License");
 4 | you may not use this file except in compliance with the License.
 5 | You may obtain a copy of the License at
 6 | 
 7 |     http://www.apache.org/licenses/LICENSE-2.0
 8 | 
 9 |     Unless required by applicable law or agreed to in writing, software
10 |     distributed under the License is distributed on an "AS IS" BASIS,
11 |     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 |     See the License for the specific language governing permissions and
13 |     limitations under the License.
14 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # AppNexus HTML5 Client Library
  2 | 
  3 | The AppNexus HTML5 client library helps integrate HTML5 ads into websites in a safe and secure manner.
  4 | 
  5 | ## API Documentation
  6 | 
  7 | ### `APPNEXUS` Object
  8 | 
  9 | The `APPNEXUS` object is the base object of the API which provides actions to pass down to the publisher website.
 10 | 
 11 | 
 12 | <br /><br />
 13 | ### Method `APPNEXUS.ready(callback) : void`
 14 | 
 15 | The `APPNEXUS.ready()` will trigger `callback` function once the APPNEXUS object has been initialized and the page has been loaded.
 16 | 
 17 | ``` js
 18 | APPNEXUS.ready(function () {
 19 |   var readMoreButton = document.getElementById('read-more-button');
 20 | 
 21 |   readMoreButton.addEventListener("click", function () {
 22 |     APPNEXUS.click();
 23 |   });
 24 | });
 25 | ```
 26 | 
 27 | #### Multiple `APPNEXUS.ready()` calls
 28 | 
 29 | The library also supports multiple `APPNEXUS.ready()` calls per page.  You might want to do this if you have multiple functions that want to check if the APPNEXUS object is initialized and the page is loaded.
 30 | 
 31 | `interaction.js`
 32 | 
 33 | ``` js
 34 | APPNEXUS.ready(function () {
 35 |   var readMoreButton = document.getElementById('read-more-button');
 36 | 
 37 |   readMoreButton.addEventListener("click", function () {
 38 |     APPNEXUS.click();
 39 |   });
 40 | });
 41 | ```
 42 | 
 43 | `layout.js`
 44 | 
 45 | ``` js
 46 | APPNEXUS.ready(function () {
 47 |   var fullscreenButton = document.getElementById('fullscreen-button');
 48 | 
 49 |   APPNEXUS.setExpandProperties({
 50 |     width: 600,
 51 |     height: 500,
 52 |     floating: true,
 53 |     expand: {
 54 |       easing: 'ease-in-out',
 55 |       duration: 1000
 56 |     }
 57 |   });
 58 | 
 59 |   // Expands on click
 60 |   fullscreenButton.addEventListener("hover", function () {
 61 |    APPNEXUS.expand();
 62 |   });
 63 | });
 64 | ```
 65 | 
 66 | 
 67 | <br /><br />
 68 | ### Method `APPNEXUS.click([url]) : void`
 69 | 
 70 | Opens a new window linking to the clickthrough URL or to the specified URL if the `url` parameter is specified.
 71 | 
 72 | 
 73 | *NOTE: Click-tracking is currently not available when a URL is specified with the `url` parameter.*
 74 | 
 75 | ``` js
 76 | APPNEXUS.ready(function () {
 77 |   var readMoreButton = document.getElementById('read-more-button');
 78 |   var facebookButton = document.getElementById('facebook-button');
 79 | 
 80 |   readMoreButton.addEventListener("click", function () {
 81 |     APPNEXUS.click();
 82 |   });
 83 | 
 84 |   facebookButton.addEventListener("click", function () {
 85 |      // Does not use click-tracking
 86 |    APPNEXUS.click('http://www.facebook/myawesomeprofile');
 87 |   });
 88 | });
 89 | ```
 90 | 
 91 | <br /><br />
 92 | ### Method `APPNEXUS.setExpandProperties(properties) : void`
 93 | 
 94 | Sets the expanding properties of an ad, whether that's an interstitial, a push over, or a floating ad.
 95 | 
 96 | Options for `properties` settings:
 97 | 
 98 | |    Property    |   Type  | Value | Default |
 99 | |----------------|---------|-------|---------|
100 | | `width` | Number | The expanded `width` in pixels | Current ad "width" |
101 | | `height` | Number | The expanded `height` in pixles | Current ad "height" |
102 | | `floating` | Boolean | Makes the ad float or push content | `false` |
103 | | `anchor` | String | Can be one of the following: `"top-right"`, `"bottom-right"`, `"bottom-left"`, or `"top-left"` <br/ > *NOTE: Only works when the `floating` flag is set to true.* | `"top-left"`
104 | | `expand` | Object | Expanding easing animation of the frame. See `easing-properties` option settings. | |
105 | | `collapse` | Object | Collapsing easing animation of the frame. See `easing-properties` option settings. | Inherits `expand` property |
106 | | `interstital` | Boolean | Sets the ad as a full screen interstitial with a light box overlay  | `false` |
107 | | `overlayColor` | String | The CSS color of the light box overlay | `"rgba(0,0,0,0.5)"` |
108 | 
109 | *NOTE: Setting `interstitial` to `true` will ignore the `floating` value if set together*
110 | 
111 | <br /><br />
112 | Options for `easing-properties` settings:
113 | 
114 | |    Property    |   Type  | Value | Default |
115 | |----------------|---------|-------|---------|
116 | | `easing`       | String  | CSS [transition-timing-function](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function). | No easing by default |
117 | | `duration`     | Number  | CSS transtion duration for `easing` | `400` |
118 | 
119 | <br /><br />
120 | Some examples for `APPNEXUS.setExpandingProperties()`:
121 | 
122 | **Interstitial Ad Example**
123 | 
124 | ``` js
125 | // Ad must call `APPNEXUS.expand()` inside the `APPNEXUS.ready`
126 | APPNEXUS.ready(function () {
127 |   ...
128 |   APPNEXUS.setExpandProperties({
129 |     interstitial : true
130 |   });
131 |   APPNEXUS.expand();
132 | });
133 | ```
134 | 
135 | **Expanding (Push Over) Ad Example**
136 | 
137 | ``` js
138 | // Original ad size 720x90 that expands to 720x275
139 | APPNEXUS.ready(function () {
140 |   var button = document.getElementById('button');
141 | 
142 |   APPNEXUS.setExpandProperties({
143 |     height: 275,
144 |     expand: {
145 |       easing: 'ease-in-out',
146 |       duration: 1000
147 |     },
148 |     collapse: {
149 |       easing: 'ease-in-out',
150 |       duration: 500
151 |     }
152 |   });
153 | 
154 |   // Expands on click
155 |   button.addEventListener("click", function () {
156 |    APPNEXUS.expand();
157 |   });
158 | });
159 | ```
160 | 
161 | **Expanding (Floating) Ad Example**
162 | 
163 | ``` js
164 | // Original ad size 300x250 that expands to 600x500
165 | APPNEXUS.ready(function () {
166 |   var button = document.getElementById('button');
167 | 
168 |   APPNEXUS.setExpandProperties({
169 |     width: 600,
170 |     height: 500,
171 |     floating: true,
172 |     expand: {
173 |       easing: 'ease-in-out',
174 |       duration: 1000
175 |     }
176 |   });
177 | 
178 |   // Expands on click
179 |   button.addEventListener("click", function () {
180 |    APPNEXUS.expand();
181 |   });
182 | });
183 | ```
184 | 
185 | <br /><br />
186 | ### Method `APPNEXUS.getExpandProperties() : Object`
187 | 
188 | Returns the current set expanding properties.
189 | 
190 | <br /><br />
191 | ### Method `APPNEXUS.expand() : void`
192 | 
193 | Triggers the ad to expand to the size specified by the expanding properties in `APPNEXUS.setExpandProperties()`.
194 | 
195 | <br /><br />
196 | ### Method `APPNEXUS.collapse() : void`
197 | 
198 | Triggers the ad to collapse to the original size.
199 | 
200 | 
201 | <br /><br />
202 | ### Method `APPNEXUS.getClickTag() : string`
203 | 
204 | returns the current clickTag url passed to the creative.  This is useful for integration with other ad builders such as adobe edge.
205 | 
206 | This function can be called before `APPNEXUS.ready` has fired.
207 | 
208 | **Example usage**
209 | 
210 | ```
211 | var clickTag = APPNEXUS.getClickTag();
212 | ```
213 | 
214 | <br /><br />
215 | ### Method `APPNEXUS.getMacroByName(string) : string`
216 | 
217 | returns the value of a given macro passed to the creative. This is useful for GDPR purposes.
218 | 
219 | *NOTE: Only works the two `GDPR` macros.*
220 | 
221 | **Example usage**
222 | 
223 | ```javascript
224 |  APPNEXUS.ready(function () {
225 |     clickthrough.addEventListener("click", function () {
226 |       APPNEXUS.getMacroByName("GDPR_APPLIES");
227 |       APPNEXUS.getMacroByName("GDPR_CONSENT_STRING");
228 |     });
229 |   });
230 | ```
231 | 
232 | <br /><br />
233 | ## Usage Documentation
234 | 
235 | Visit the links below for walkthroughs on how to use the AppNexus HTML5 library in a few specific cases:
236 | 
237 | - [Integrating the AppNexus HTML5 Library with Manually Created Creatives](https://github.com/appnexus/appnexus-html5-lib/blob/master/docs/Walkthrough-For-Manually-Created-Ads.md)
238 | - [Integrating the AppNexus HTML5 Library with Ads Created in Google Web Designer](https://wiki.appnexus.com/display/industry/Integrating+the+AppNexus+HTML5+Library+with+Ads+Created+in+Google+Web+Designer)
239 | - [Integrating the AppNexus HTML5 Library with Ads Created in Adobe Edge](https://wiki.appnexus.com/display/industry/Integrating+the+AppNexus+HTML5+Library+with+Ads+Created+in+Adobe+Edge)
240 | 
241 | ## Development
242 | 
243 | For instructions on how to develop this library, see the [Contribution Guidelines](https://github.com/appnexus/appnexus-html5-lib/blob/master/CONTRIBUTION.md).


--------------------------------------------------------------------------------
/dist/appnexus-html5-lib.js:
--------------------------------------------------------------------------------
  1 | (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
  2 | 'use strict';
  3 | 
  4 | var Porthole = require('./lib/porthole');
  5 | var EventListener = require('./lib/event-listener');
  6 | 
  7 | function AppNexusHTML5Lib ()  {
  8 |   var self = this;
  9 |   this.debug = false;
 10 |   this.inFrame = false;
 11 |   this.EventListener = EventListener;
 12 | 
 13 |   var isClient = false;
 14 |   var readyCalled = false;
 15 |   var isPageLoaded = false;
 16 |   var expandProperties = {}
 17 |   var dispatcher = new EventListener();
 18 |   var clientPorthole;
 19 |   var adData = {};
 20 |   var clickTag = '';
 21 | 
 22 |   try {
 23 |     this.inFrame = (window.self !== window.top);
 24 |   } catch (e) {
 25 |     this.inFrame = true;
 26 |   }
 27 | 
 28 |   dispatcher.addEventListener('ready', function () {
 29 |     if (readyCalled) {
 30 |       if (self.debug) console.info('Client initialized!');
 31 |     }
 32 |   });
 33 | 
 34 |   /**
 35 |    * Setup porthole so we can talk to our parent and listen to messages from it
 36 |    */
 37 |   var initPorthole = function(){
 38 |     clientPorthole = new Porthole.WindowProxy();
 39 |     clientPorthole.addEventListener(handleMessages);
 40 |     clientPorthole.post({ action: 'ready'}); //notify parent we are ready
 41 |   };
 42 | 
 43 |   var checkReady = function (f){ /in/.test(document.readyState) ? setTimeout(function () { checkReady(f); } , 9) : f(); }
 44 |   checkReady(function (){
 45 |     isPageLoaded = true;
 46 |     if (!!Object.keys(adData).length) {
 47 |       dispatcher.dispatchEvent('ready');
 48 |     }
 49 |   });
 50 | 
 51 |   var openUrl = function(url){
 52 |     window.open(url, "_blank");
 53 |   };
 54 | 
 55 |   /**
 56 |    * Listen to messages that come from the parent window
 57 |    * @param messageEvent
 58 |    */
 59 |   var handleMessages = function(messageEvent){
 60 |     switch(messageEvent.data.action) {
 61 |       case 'setAdData':  //receive data about the ad
 62 |         adData = messageEvent.data.parameters;
 63 |         if (isPageLoaded) {
 64 |           dispatcher.dispatchEvent('ready');
 65 |         }
 66 |         break;
 67 |     }
 68 |   };
 69 | 
 70 |   function getParameterByName(name) {
 71 |     var match = RegExp('[?&]' + name +
 72 |       '=([^&]*)').exec(window.location.search);
 73 |     return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
 74 |   }
 75 | 
 76 |   this.ready = function (callback) {
 77 |     if (typeof callback === 'function') {
 78 |       dispatcher.addEventListener('ready', callback);
 79 |     }
 80 | 
 81 |     if (!readyCalled) {
 82 |       initPorthole();
 83 |       readyCalled = true;
 84 |       clickTag = this.getClickTag();
 85 |       self.debug = !self.inFrame;
 86 |     }
 87 |   }
 88 | 
 89 |   this.getClickTag = function(){
 90 |     return getParameterByName('clickTag');
 91 |   };
 92 | 
 93 |   this.click = function () {
 94 |     clickTag = this.getClickTag();
 95 |     if (!clickTag) console.log('No clickTag defined: click event will open a blank page');
 96 |     openUrl(clickTag);
 97 |     if (self.debug) console.info('Client send action: click');
 98 |   }
 99 | 
100 |   this.setExpandProperties = function (props) {
101 |     if (!readyCalled || !clientPorthole) throw new Error('APPNEXUS library has not been initialized. APPNEXUS.ready() must be called first');
102 |     expandProperties = props;
103 |     clientPorthole.post({ action: 'set-expand-properties', properties: props });
104 |     if (self.debug) console.info('Client send action: set-expand-properties');
105 |   }
106 | 
107 |   this.getExpandProperties = function () {
108 |     return expandProperties;
109 |   }
110 | 
111 |   this.expand = function () {
112 |     if (!readyCalled || !clientPorthole) throw new Error('APPNEXUS library has not been initialized. APPNEXUS.ready() must be called first');
113 |     clientPorthole.post({ action: 'expand' });
114 |     if (self.debug) console.info('Client send action: expand');
115 |   }
116 | 
117 |   this.collapse = function () {
118 |     if (!readyCalled || !clientPorthole) throw new Error('APPNEXUS library has not been initialized. APPNEXUS.ready() must be called first');
119 |     clientPorthole.post({ action: 'collapse' });
120 |     if (self.debug) console.info('Client send action: collapse');
121 |   }
122 | 
123 |   this.getMacroByName = function (macro) {
124 |     if (!readyCalled || !clientPorthole) throw new Error('APPNEXUS library has not been initialized. APPNEXUS.ready() must be called first');
125 |     
126 |     if(adData && adData.macros && adData.macros[macro] !== undefined){
127 |       return adData.macros[macro];
128 |     }
129 |     else {
130 |       return undefined;
131 |     }
132 |   }
133 | }
134 | 
135 | var APPNEXUS = new AppNexusHTML5Lib();
136 | if (typeof window !== 'undefined') {
137 |   window.APPNEXUS = APPNEXUS;
138 | }
139 | 
140 | module.exports = APPNEXUS;
141 | },{"./lib/event-listener":2,"./lib/porthole":3}],2:[function(require,module,exports){
142 | function EventListener() {
143 |   this.__listeners__ = [];
144 | }
145 | 
146 | EventListener.prototype.addEventListener = function (name, callback) {
147 |   this.__listeners__.push({callback: callback, name: name});
148 | }
149 | 
150 | EventListener.prototype.removeEventListener = function (name, callback) {
151 |   for (var i = this.__listeners__.length - 1; i >= 0; i--) {
152 |     if (this.__listeners__[i].name === name && this.__listeners__[i].callback === callback) {
153 |       this.__listeners__.splice(i, 1);
154 |     }
155 |   }
156 | }
157 | 
158 | EventListener.prototype.dispatchEvent = function (name) {
159 |   for (var i = this.__listeners__.length - 1; i >= 0; i--) {
160 |     if (this.__listeners__[(this.__listeners__.length - i - 1)].name === name) {
161 |       this.__listeners__[(this.__listeners__.length - i - 1)].callback();
162 |     }
163 |   }
164 | }
165 | 
166 | module.exports = EventListener;
167 | },{}],3:[function(require,module,exports){
168 | /*
169 |     Copyright (c) 2011-2012 Ternary Labs. All Rights Reserved.
170 | 
171 |     Permission is hereby granted, free of charge, to any person obtaining a copy
172 |     of this software and associated documentation files (the "Software"), to deal
173 |     in the Software without restriction, including without limitation the rights
174 |     to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
175 |     copies of the Software, and to permit persons to whom the Software is
176 |     furnished to do so, subject to the following conditions:
177 | 
178 |     The above copyright notice and this permission notice shall be included in
179 |     all copies or substantial portions of the Software.
180 | 
181 |     THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
182 |     IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
183 |     FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
184 |     AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
185 |     LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
186 |     OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
187 |     THE SOFTWARE.
188 | */
189 | 
190 | /* Simple JavaScript Inheritance
191 |  * By John Resig http://ejohn.org/
192 |  * MIT Licensed.
193 |  */
194 | // Inspired by base2 and Prototype
195 | var initializing = false, fnTest = /xyz/.test(function(){xyz;}) ? /\b_super\b/ : /.*/;
196 | 
197 | // The base Class implementation (does nothing)
198 | var PortholeClass = function(){};
199 | 
200 | // Create a new Class that inherits from this class
201 | PortholeClass.extend = function(prop) {
202 |     var _super = this.prototype;
203 | 
204 |     // Instantiate a base class (but only create the instance,
205 |     // don't run the init constructor)
206 |     initializing = true;
207 |     var prototype = new this();
208 |     initializing = false;
209 | 
210 |     // Copy the properties over onto the new prototype
211 |     for (var name in prop) {
212 |         // Check if we're overwriting an existing function
213 |         prototype[name] = typeof prop[name] == "function" &&
214 |             typeof _super[name] == "function" && fnTest.test(prop[name]) ?
215 |             (function(name, fn){
216 |                 return function() {
217 |                     var tmp = this._super;
218 | 
219 |                     // Add a new ._super() method that is the same method
220 |                     // but on the super-class
221 |                     this._super = _super[name];
222 | 
223 |                     // The method only need to be bound temporarily, so we
224 |                     // remove it when we're done executing
225 |                     var ret = fn.apply(this, arguments);
226 |                     this._super = tmp;
227 | 
228 |                     return ret;
229 |                 };
230 |             })(name, prop[name]) :
231 |             prop[name];
232 |     }
233 | 
234 |     // The dummy class constructor
235 |     function Class() {
236 |         // All construction is actually done in the init method
237 |         if ( !initializing && this.init )
238 |             this.init.apply(this, arguments);
239 |     }
240 | 
241 |     // Populate our constructed prototype object
242 |     Class.prototype = prototype;
243 | 
244 |     // Enforce the constructor to be what we expect
245 |     Class.prototype.constructor = Class;
246 | 
247 |     // And make this class extendable
248 |     Class.extend = arguments.callee;
249 | 
250 |     return Class;
251 | };
252 | 
253 | /**
254 |  * @overview Porthole, JavaScript Library for Secure Cross Domain iFrame Communication.
255 |  * @author <a href="mailto:georges@ternarylabs.com">Georges Auberger</a>
256 |  * @copyright 2011-2012 Ternary Labs, All Rights Reserved.
257 |  *
258 |  * Namespace for Porthole
259 |  * @module Porthole
260 |  */
261 | var Porthole = {
262 |     debug: false,
263 | 
264 |     /**
265 |      * Utility function to trace to console
266 |      * @private
267 |      */
268 |     trace: function(s) {
269 |         if (this.debug && window.console !== undefined) {
270 |             window.console.log('Porthole: ' + s);
271 |         }
272 |     },
273 | 
274 |     /**
275 |      * Utility function to send errors to console
276 |      * @private
277 |      */
278 |     error: function(s) {
279 |         if (typeof window.console !== undefined && typeof window.console.error === 'function') {
280 |             window.console.error('Porthole: ' + s);
281 |         }
282 |     }
283 | };
284 | 
285 | /**
286 |  * @class
287 |  * @classdesc Proxy window object to post message to target window
288 |  * @param {string} proxyIFrameUrl - Fully qualified url to proxy iframe, or null to create a receiver only window
289 |  * @param {string} targetWindowName - Name of the proxy iframe window
290 |  */
291 | Porthole.WindowProxy = function(){};
292 | 
293 | Porthole.WindowProxy.prototype = {
294 |     /**
295 |      * Post a message to the target window only if the content comes from the target origin.
296 |      * <code>targetOrigin</code> can be a url or *
297 |      * @public
298 |      * @param {Object} data - Payload
299 |      * @param {String} targetOrigin
300 |      */
301 |     post: function(data, targetOrigin) {},
302 |     /**
303 |      * Add an event listener to receive messages.
304 |      * @public
305 |      * @param {Function} eventListenerCallback
306 |      * @returns {Function} eventListenerCallback
307 |      */
308 |     addEventListener: function(f) {},
309 |     /**
310 |      * Remove an event listener.
311 |      * @public
312 |      * @param {Function} eventListenerCallback
313 |      */
314 |     removeEventListener: function(f) {}
315 | };
316 | 
317 | Porthole.WindowProxyBase = PortholeClass.extend({
318 |     init: function(targetWindowName) {
319 |         if (targetWindowName === undefined) {
320 |             targetWindowName = '';
321 |         }
322 |         this.targetWindowName = targetWindowName;
323 |         this.origin = window.location.protocol + '//' + window.location.host;
324 |         this.eventListeners = [];
325 |     },
326 | 
327 |     getTargetWindowName: function() {
328 |         return this.targetWindowName;
329 |     },
330 | 
331 |     getOrigin: function() {
332 |         return this.origin;
333 |     },
334 | 
335 |     /**
336 |      * Lookup window object based on target window name
337 |      * @private
338 |      * @return {string} targetWindow
339 |      */
340 |     getTargetWindow: function() {
341 |         return Porthole.WindowProxy.getTargetWindow(this.targetWindowName);
342 |     },
343 | 
344 |     post: function(data, targetOrigin) {
345 |         if (targetOrigin === undefined) {
346 |             targetOrigin = '*';
347 |         }
348 |         this.dispatchMessage({
349 |             'data' : data,
350 |             'sourceOrigin' : this.getOrigin(),
351 |             'targetOrigin' : targetOrigin,
352 |             'sourceWindowName' : window.name,
353 |             'targetWindowName' : this.getTargetWindowName()
354 |         });
355 |     },
356 | 
357 |     addEventListener: function(f) {
358 |         this.eventListeners.push(f);
359 |         return f;
360 |     },
361 | 
362 |     removeEventListener: function(f) {
363 |         var index;
364 |         try {
365 |             index = this.eventListeners.indexOf(f);
366 |             this.eventListeners.splice(index, 1);
367 |         } catch(e) {
368 |             this.eventListeners = [];
369 |         }
370 |     },
371 | 
372 |     dispatchEvent: function(event) {
373 |         var i;
374 |         for (i = 0; i < this.eventListeners.length; i++) {
375 |             try {
376 |                 this.eventListeners[i](event);
377 |             } catch(e) {
378 |                 Porthole.error(e);
379 |             }
380 |         }
381 |     }
382 | });
383 | 
384 | /**
385 |  * Legacy browser implementation of proxy window object to post message to target window
386 |  *
387 |  * @private
388 |  * @constructor
389 |  * @param {string} proxyIFrameUrl - Fully qualified url to proxy iframe
390 |  * @param {string} targetWindowName - Name of the proxy iframe window
391 |  */
392 | Porthole.WindowProxyLegacy = Porthole.WindowProxyBase.extend({
393 |     init: function(proxyIFrameUrl, targetWindowName) {
394 |         this._super(targetWindowName);
395 | 
396 |         if (proxyIFrameUrl !== null) {
397 |             this.proxyIFrameName = this.targetWindowName + 'ProxyIFrame';
398 |             this.proxyIFrameLocation = proxyIFrameUrl;
399 | 
400 |             // Create the proxy iFrame and add to dom
401 |             this.proxyIFrameElement = this.createIFrameProxy();
402 |         } else {
403 |             // Won't be able to send messages
404 |             this.proxyIFrameElement = null;
405 |             Porthole.trace("proxyIFrameUrl is null, window will be a receiver only");
406 |             this.post = function(){ throw new Error("Receiver only window");};
407 |         }
408 |     },
409 | 
410 |     /**
411 |      * Create an iframe and load the proxy
412 |      *
413 |      * @private
414 |      * @returns iframe
415 |      */
416 |     createIFrameProxy: function() {
417 |         var iframe = document.createElement('iframe');
418 | 
419 |         iframe.setAttribute('id', this.proxyIFrameName);
420 |         iframe.setAttribute('name', this.proxyIFrameName);
421 |         iframe.setAttribute('src', this.proxyIFrameLocation);
422 |         // IE needs this otherwise resize event is not fired
423 |         iframe.setAttribute('frameBorder', '1');
424 |         iframe.setAttribute('scrolling', 'auto');
425 |         // Need a certain size otherwise IE7 does not fire resize event
426 |         iframe.setAttribute('width', 30);
427 |         iframe.setAttribute('height', 30);
428 |         iframe.setAttribute('style', 'position: absolute; left: -100px; top:0px;');
429 |         // IE needs this because setting style attribute is broken. No really.
430 |         if (iframe.style.setAttribute) {
431 |             iframe.style.setAttribute('cssText', 'position: absolute; left: -100px; top:0px;');
432 |         }
433 |         document.body.appendChild(iframe);
434 |         return iframe;
435 |     },
436 | 
437 |     dispatchMessage: function(message) {
438 |         var encode = window.encodeURIComponent;
439 | 
440 |         if (this.proxyIFrameElement) {
441 |             var src = this.proxyIFrameLocation + '#' + encode(Porthole.WindowProxy.serialize(message));
442 |             this.proxyIFrameElement.setAttribute('src', src);
443 |             this.proxyIFrameElement.height = this.proxyIFrameElement.height > 50 ? 50 : 100;
444 |         }
445 |     }
446 | });
447 | 
448 | /**
449 |  * Implementation for modern browsers that supports it
450 |  */
451 | Porthole.WindowProxyHTML5 = Porthole.WindowProxyBase.extend({
452 |     init: function(proxyIFrameUrl, targetWindowName) {
453 |         this._super(targetWindowName);
454 |         this.eventListenerCallback = null;
455 |     },
456 | 
457 |     dispatchMessage: function(message) {
458 |         this.getTargetWindow().postMessage(Porthole.WindowProxy.serialize(message), message.targetOrigin);
459 |     },
460 | 
461 |     addEventListener: function(f) {
462 |         if (this.eventListeners.length === 0) {
463 |             var self = this;
464 |             if (window.addEventListener) {
465 |                 this.eventListenerCallback = function(event) { self.eventListener(self, event); };
466 |                 window.addEventListener('message', this.eventListenerCallback, false);
467 |             } else if (window.attachEvent) {
468 |                 // Make IE8 happy, just not that 1. postMessage only works for IFRAMES/FRAMES http://blogs.msdn.com/b/ieinternals/archive/2009/09/16/bugs-in-ie8-support-for-html5-postmessage-sessionstorage-and-localstorage.aspx
469 |                 this.eventListenerCallback = function(event) { self.eventListener(self, window.event); };
470 |                 window.attachEvent("onmessage", this.eventListenerCallback);
471 |             }
472 |         }
473 |         return this._super(f);
474 |     },
475 | 
476 |     removeEventListener: function(f) {
477 |         this._super(f);
478 | 
479 |         if (this.eventListeners.length === 0) {
480 |             if (window.removeEventListener) {
481 |                 window.removeEventListener('message', this.eventListenerCallback);
482 |             } else if (window.detachEvent) { // Make IE8, happy, see above
483 |                 // see jquery, detachEvent needed property on element, by name of that event, to properly expose it to GC
484 |                 if (typeof window.onmessage === 'undefined') window.onmessage = null;
485 |                 window.detachEvent('onmessage', this.eventListenerCallback);
486 |             }
487 |             this.eventListenerCallback = null;
488 |         }
489 |     },
490 | 
491 |     eventListener: function(self, nativeEvent) {
492 |         var data = Porthole.WindowProxy.unserialize(nativeEvent.data);
493 |         if (data && (self.targetWindowName === '' || data.sourceWindowName == self.targetWindowName)) {
494 |             self.dispatchEvent(new Porthole.MessageEvent(data.data, nativeEvent.origin, self));
495 |         }
496 |     }
497 | });
498 | 
499 | if (!window.postMessage) {
500 |     Porthole.trace('Using legacy browser support');
501 |     Porthole.WindowProxy = Porthole.WindowProxyLegacy.extend({});
502 | } else {
503 |     Porthole.trace('Using built-in browser support');
504 |     Porthole.WindowProxy = Porthole.WindowProxyHTML5.extend({});
505 | }
506 | 
507 | /**
508 |  * Serialize an object using JSON.stringify
509 |  *
510 |  * @param {Object} obj The object to be serialized
511 |  * @return {String}
512 |  */
513 | Porthole.WindowProxy.serialize = function(obj) {
514 |     if (typeof JSON === 'undefined') {
515 |         throw new Error('Porthole serialization depends on JSON!');
516 |     }
517 | 
518 |     return JSON.stringify(obj);
519 | };
520 | 
521 | /**
522 |  * Unserialize using JSON.parse
523 |  *
524 |  * @param {String} text Serialization
525 |  * @return {Object}
526 |  */
527 | Porthole.WindowProxy.unserialize =  function(text) {
528 |     if (typeof JSON === 'undefined') {
529 |         throw new Error('Porthole unserialization dependens on JSON!');
530 |     }
531 |     try {
532 |         var json = JSON.parse(text);
533 |     } catch (e) {
534 |         return false;
535 |     }
536 |     return json;
537 | };
538 | 
539 | Porthole.WindowProxy.getTargetWindow = function(targetWindowName) {
540 |     if (targetWindowName === '') {
541 |         return window.parent;
542 |     } else if (targetWindowName === 'top' || targetWindowName === 'parent') {
543 |         return window[targetWindowName];
544 |     }
545 |     return window.frames[targetWindowName];
546 | };
547 | 
548 | /**
549 |  * @classdesc Event object to be passed to registered event handlers
550 |  * @class
551 |  * @param {String} data
552 |  * @param {String} origin - url of window sending the message
553 |  * @param {Object} source - window object sending the message
554 |  */
555 | Porthole.MessageEvent = function MessageEvent(data, origin, source) {
556 |     this.data = data;
557 |     this.origin = origin;
558 |     this.source = source;
559 | };
560 | 
561 | /**
562 |  * @classdesc Dispatcher object to relay messages.
563 |  * @public
564 |  * @constructor
565 |  */
566 | Porthole.WindowProxyDispatcher = {
567 |     /**
568 |      * Forward a message event to the target window
569 |      * @private
570 |      */
571 |     forwardMessageEvent: function(e) {
572 |         var message,
573 |             decode = window.decodeURIComponent,
574 |             targetWindow,
575 |             windowProxy;
576 | 
577 |         if (document.location.hash.length > 0) {
578 |             // Eat the hash character
579 |             message = Porthole.WindowProxy.unserialize(decode(document.location.hash.substr(1)));
580 | 
581 |             targetWindow = Porthole.WindowProxy.getTargetWindow(message.targetWindowName);
582 | 
583 |             windowProxy =
584 |                 Porthole.WindowProxyDispatcher.findWindowProxyObjectInWindow(
585 |                     targetWindow,
586 |                     message.sourceWindowName
587 |                 );
588 | 
589 |             if (windowProxy) {
590 |                 if (windowProxy.origin === message.targetOrigin || message.targetOrigin === '*') {
591 |                     windowProxy.dispatchEvent(
592 |                         new Porthole.MessageEvent(message.data, message.sourceOrigin, windowProxy));
593 |                 } else {
594 |                     Porthole.error('Target origin ' +
595 |                         windowProxy.origin +
596 |                         ' does not match desired target of ' +
597 |                         message.targetOrigin);
598 |                 }
599 |             } else {
600 |                 Porthole.error('Could not find window proxy object on the target window');
601 |             }
602 |         }
603 |     },
604 | 
605 |     /**
606 |      * Look for a window proxy object in the target window
607 |      * @private
608 |      */
609 |     findWindowProxyObjectInWindow: function(w, sourceWindowName) {
610 |         var i;
611 | 
612 |         if (w) {
613 |             for (i in w) {
614 |                 if (Object.prototype.hasOwnProperty.call(w, i)) {
615 |                     try {
616 |                         // Ensure that we're finding the proxy object
617 |                         // that is declared to be targetting the window that is calling us
618 |                         if (w[i] !== null &&
619 |                             typeof w[i] === 'object' &&
620 |                             w[i] instanceof w.Porthole.WindowProxy &&
621 |                             w[i].getTargetWindowName() === sourceWindowName) {
622 |                             return w[i];
623 |                         }
624 |                     } catch(e) {
625 |                         // Swallow exception in case we access an object we shouldn't
626 |                     }
627 |                 }
628 |             }
629 |         }
630 |         return null;
631 |     },
632 | 
633 |     /**
634 |      * Start a proxy to relay messages.
635 |      * @public
636 |      */
637 |     start: function() {
638 |         if (window.addEventListener) {
639 |             window.addEventListener('resize',
640 |                 Porthole.WindowProxyDispatcher.forwardMessageEvent,
641 |                 false);
642 |         } else if (window.attachEvent && window.postMessage !== 'undefined') {
643 |             window.attachEvent('onresize',
644 |                 Porthole.WindowProxyDispatcher.forwardMessageEvent);
645 |         } else if (document.body.attachEvent) {
646 |             window.attachEvent('onresize',
647 |                 Porthole.WindowProxyDispatcher.forwardMessageEvent);
648 |         } else {
649 |             // Should never happen
650 |             Porthole.error('Cannot attach resize event');
651 |         }
652 |     }
653 | };
654 | 
655 | module.exports = Porthole;
656 | 
657 | },{}]},{},[1]);
658 | 


--------------------------------------------------------------------------------
/dist/appnexus-html5-lib.min.js:
--------------------------------------------------------------------------------
1 | /*
2 |  * AppNexus HTML5 Client Library for Client
3 |  * Author: AppNexus () 
4 |  * Website: http://www.appnexus.com
5 |  * Apache-2.0 Licensed.
6 |  *
7 |  * appnexus-html5-lib.min.js 1.4.1
8 |  */
9 |  !function a(b,c,d){function e(g,h){if(!c[g]){if(!b[g]){var i="function"==typeof require&&require;if(!h&&i)return i(g,!0);if(f)return f(g,!0);var j=new Error("Cannot find module '"+g+"'");throw j.code="MODULE_NOT_FOUND",j}var k=c[g]={exports:{}};b[g][0].call(k.exports,function(a){var c=b[g][1][a];return e(c?c:a)},k,k.exports,a,b,c,d)}return c[g].exports}for(var f="function"==typeof require&&require,g=0;g<d.length;g++)e(d[g]);return e}({1:[function(a,b,c){"use strict";function d(){function a(a){var b=RegExp("[?&]"+a+"=([^&]*)").exec(window.location.search);return b&&decodeURIComponent(b[1].replace(/\+/g," "))}var b=this;this.debug=!1,this.inFrame=!1,this.EventListener=f;var c,d=!1,g=!1,h={},i=new f,j={},k="";try{this.inFrame=window.self!==window.top}catch(l){this.inFrame=!0}i.addEventListener("ready",function(){d&&b.debug&&console.info("Client initialized!")});var m=function(){c=new e.WindowProxy,c.addEventListener(p),c.post({action:"ready"})},n=function(a){/in/.test(document.readyState)?setTimeout(function(){n(a)},9):a()};n(function(){g=!0,Object.keys(j).length&&i.dispatchEvent("ready")});var o=function(a){window.open(a,"_blank")},p=function(a){switch(a.data.action){case"setAdData":j=a.data.parameters,g&&i.dispatchEvent("ready")}};this.ready=function(a){"function"==typeof a&&i.addEventListener("ready",a),d||(m(),d=!0,k=this.getClickTag(),b.debug=!b.inFrame)},this.getClickTag=function(){return a("clickTag")},this.click=function(){k=this.getClickTag(),k||console.log("No clickTag defined: click event will open a blank page"),o(k),b.debug&&console.info("Client send action: click")},this.setExpandProperties=function(a){if(!d||!c)throw new Error("APPNEXUS library has not been initialized. APPNEXUS.ready() must be called first");h=a,c.post({action:"set-expand-properties",properties:a}),b.debug&&console.info("Client send action: set-expand-properties")},this.getExpandProperties=function(){return h},this.expand=function(){if(!d||!c)throw new Error("APPNEXUS library has not been initialized. APPNEXUS.ready() must be called first");c.post({action:"expand"}),b.debug&&console.info("Client send action: expand")},this.collapse=function(){if(!d||!c)throw new Error("APPNEXUS library has not been initialized. APPNEXUS.ready() must be called first");c.post({action:"collapse"}),b.debug&&console.info("Client send action: collapse")},this.getMacroByName=function(a){if(!d||!c)throw new Error("APPNEXUS library has not been initialized. APPNEXUS.ready() must be called first");return j&&j.macros&&void 0!==j.macros[a]?j.macros[a]:void 0}}var e=a("./lib/porthole"),f=a("./lib/event-listener"),g=new d;"undefined"!=typeof window&&(window.APPNEXUS=g),b.exports=g},{"./lib/event-listener":2,"./lib/porthole":3}],2:[function(a,b,c){function d(){this.__listeners__=[]}d.prototype.addEventListener=function(a,b){this.__listeners__.push({callback:b,name:a})},d.prototype.removeEventListener=function(a,b){for(var c=this.__listeners__.length-1;c>=0;c--)this.__listeners__[c].name===a&&this.__listeners__[c].callback===b&&this.__listeners__.splice(c,1)},d.prototype.dispatchEvent=function(a){for(var b=this.__listeners__.length-1;b>=0;b--)this.__listeners__[this.__listeners__.length-b-1].name===a&&this.__listeners__[this.__listeners__.length-b-1].callback()},b.exports=d},{}],3:[function(a,b,c){var d=!1,e=/xyz/.test(function(){xyz})?/\b_super\b/:/.*/,f=function(){};f.extend=function(a){function b(){!d&&this.init&&this.init.apply(this,arguments)}var c=this.prototype;d=!0;var f=new this;d=!1;for(var g in a)f[g]="function"==typeof a[g]&&"function"==typeof c[g]&&e.test(a[g])?function(a,b){return function(){var d=this._super;this._super=c[a];var e=b.apply(this,arguments);return this._super=d,e}}(g,a[g]):a[g];return b.prototype=f,b.prototype.constructor=b,b.extend=arguments.callee,b};var g={debug:!1,trace:function(a){this.debug&&void 0!==window.console&&window.console.log("Porthole: "+a)},error:function(a){void 0!==typeof window.console&&"function"==typeof window.console.error&&window.console.error("Porthole: "+a)}};g.WindowProxy=function(){},g.WindowProxy.prototype={post:function(a,b){},addEventListener:function(a){},removeEventListener:function(a){}},g.WindowProxyBase=f.extend({init:function(a){void 0===a&&(a=""),this.targetWindowName=a,this.origin=window.location.protocol+"//"+window.location.host,this.eventListeners=[]},getTargetWindowName:function(){return this.targetWindowName},getOrigin:function(){return this.origin},getTargetWindow:function(){return g.WindowProxy.getTargetWindow(this.targetWindowName)},post:function(a,b){void 0===b&&(b="*"),this.dispatchMessage({data:a,sourceOrigin:this.getOrigin(),targetOrigin:b,sourceWindowName:window.name,targetWindowName:this.getTargetWindowName()})},addEventListener:function(a){return this.eventListeners.push(a),a},removeEventListener:function(a){var b;try{b=this.eventListeners.indexOf(a),this.eventListeners.splice(b,1)}catch(c){this.eventListeners=[]}},dispatchEvent:function(a){var b;for(b=0;b<this.eventListeners.length;b++)try{this.eventListeners[b](a)}catch(c){g.error(c)}}}),g.WindowProxyLegacy=g.WindowProxyBase.extend({init:function(a,b){this._super(b),null!==a?(this.proxyIFrameName=this.targetWindowName+"ProxyIFrame",this.proxyIFrameLocation=a,this.proxyIFrameElement=this.createIFrameProxy()):(this.proxyIFrameElement=null,g.trace("proxyIFrameUrl is null, window will be a receiver only"),this.post=function(){throw new Error("Receiver only window")})},createIFrameProxy:function(){var a=document.createElement("iframe");return a.setAttribute("id",this.proxyIFrameName),a.setAttribute("name",this.proxyIFrameName),a.setAttribute("src",this.proxyIFrameLocation),a.setAttribute("frameBorder","1"),a.setAttribute("scrolling","auto"),a.setAttribute("width",30),a.setAttribute("height",30),a.setAttribute("style","position: absolute; left: -100px; top:0px;"),a.style.setAttribute&&a.style.setAttribute("cssText","position: absolute; left: -100px; top:0px;"),document.body.appendChild(a),a},dispatchMessage:function(a){var b=window.encodeURIComponent;if(this.proxyIFrameElement){var c=this.proxyIFrameLocation+"#"+b(g.WindowProxy.serialize(a));this.proxyIFrameElement.setAttribute("src",c),this.proxyIFrameElement.height=this.proxyIFrameElement.height>50?50:100}}}),g.WindowProxyHTML5=g.WindowProxyBase.extend({init:function(a,b){this._super(b),this.eventListenerCallback=null},dispatchMessage:function(a){this.getTargetWindow().postMessage(g.WindowProxy.serialize(a),a.targetOrigin)},addEventListener:function(a){if(0===this.eventListeners.length){var b=this;window.addEventListener?(this.eventListenerCallback=function(a){b.eventListener(b,a)},window.addEventListener("message",this.eventListenerCallback,!1)):window.attachEvent&&(this.eventListenerCallback=function(a){b.eventListener(b,window.event)},window.attachEvent("onmessage",this.eventListenerCallback))}return this._super(a)},removeEventListener:function(a){this._super(a),0===this.eventListeners.length&&(window.removeEventListener?window.removeEventListener("message",this.eventListenerCallback):window.detachEvent&&("undefined"==typeof window.onmessage&&(window.onmessage=null),window.detachEvent("onmessage",this.eventListenerCallback)),this.eventListenerCallback=null)},eventListener:function(a,b){var c=g.WindowProxy.unserialize(b.data);!c||""!==a.targetWindowName&&c.sourceWindowName!=a.targetWindowName||a.dispatchEvent(new g.MessageEvent(c.data,b.origin,a))}}),window.postMessage?(g.trace("Using built-in browser support"),g.WindowProxy=g.WindowProxyHTML5.extend({})):(g.trace("Using legacy browser support"),g.WindowProxy=g.WindowProxyLegacy.extend({})),g.WindowProxy.serialize=function(a){if("undefined"==typeof JSON)throw new Error("Porthole serialization depends on JSON!");return JSON.stringify(a)},g.WindowProxy.unserialize=function(a){if("undefined"==typeof JSON)throw new Error("Porthole unserialization dependens on JSON!");try{var b=JSON.parse(a)}catch(c){return!1}return b},g.WindowProxy.getTargetWindow=function(a){return""===a?window.parent:"top"===a||"parent"===a?window[a]:window.frames[a]},g.MessageEvent=function(a,b,c){this.data=a,this.origin=b,this.source=c},g.WindowProxyDispatcher={forwardMessageEvent:function(a){var b,c,d,e=window.decodeURIComponent;document.location.hash.length>0&&(b=g.WindowProxy.unserialize(e(document.location.hash.substr(1))),c=g.WindowProxy.getTargetWindow(b.targetWindowName),d=g.WindowProxyDispatcher.findWindowProxyObjectInWindow(c,b.sourceWindowName),d?d.origin===b.targetOrigin||"*"===b.targetOrigin?d.dispatchEvent(new g.MessageEvent(b.data,b.sourceOrigin,d)):g.error("Target origin "+d.origin+" does not match desired target of "+b.targetOrigin):g.error("Could not find window proxy object on the target window"))},findWindowProxyObjectInWindow:function(a,b){var c;if(a)for(c in a)if(Object.prototype.hasOwnProperty.call(a,c))try{if(null!==a[c]&&"object"==typeof a[c]&&a[c]instanceof a.Porthole.WindowProxy&&a[c].getTargetWindowName()===b)return a[c]}catch(d){}return null},start:function(){window.addEventListener?window.addEventListener("resize",g.WindowProxyDispatcher.forwardMessageEvent,!1):window.attachEvent&&"undefined"!==window.postMessage?window.attachEvent("onresize",g.WindowProxyDispatcher.forwardMessageEvent):document.body.attachEvent?window.attachEvent("onresize",g.WindowProxyDispatcher.forwardMessageEvent):g.error("Cannot attach resize event")}},b.exports=g},{}]},{},[1]);


--------------------------------------------------------------------------------
/docs/Google Web Designer/Standard/an_logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/appnexus/appnexus-html5-lib/652b5e64437c08ece1d84a3b9856b2e1facd93b7/docs/Google Web Designer/Standard/an_logo.png


--------------------------------------------------------------------------------
/docs/Google Web Designer/Standard/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html><head><meta name="GCD" content="YTk3ODQ3ZWZhN2I4NzZmMzBkNTEwYjJle73b463a2650e4f44cbbde644e1baf8f"/>
  3 |   <meta charset="utf-8">
  4 |   <meta name="generator" content="Google Web Designer 1.6.0.0429">
  5 |   <meta name="template" content="Banner 3.0.0">
  6 |   <meta name="environment" content="gwd-genericad">
  7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 |   <style data-exports-type="gwd-page" data-gwd-node="true">.gwd-inactive{visibility:hidden}</style>
  9 |   <style data-exports-type="gwd-pagedeck" data-gwd-node="true">.gwd-pagedeck{position:relative}.gwd-pagedeck>.gwd-page.transparent{opacity:0}.gwd-pagedeck>.gwd-page{position:absolute;top:0;left:0;-webkit-transition-property:-webkit-transform,opacity;-moz-transition-property:transform,opacity;transition-property:transform,opacity}.gwd-pagedeck>.gwd-page.linear{transition-timing-function:linear}.gwd-pagedeck>.gwd-page.ease-in{transition-timing-function:ease-in}.gwd-pagedeck>.gwd-page.ease-out{transition-timing-function:ease-out}.gwd-pagedeck>.gwd-page.ease{transition-timing-function:ease}.gwd-pagedeck>.gwd-page.ease-in-out{transition-timing-function:ease-in-out}</style>
 10 |   <style data-exports-type="gwd-image" data-gwd-node="true">img[is=gwd-image].scaled-proportionally{background-repeat:no-repeat;background-position:center}</style>
 11 |   <style type="text/css" id="gwd-lightbox-style">.gwd-lightbox {
 12 |     overflow: hidden;
 13 | }</style>
 14 |   <style type="text/css" id="gwd-text-style">p {
 15 |     margin: 0px;
 16 | }
 17 | h1 {
 18 |     margin: 0px;
 19 | }
 20 | h2 {
 21 |     margin: 0px;
 22 | }
 23 | h3 {
 24 |     margin: 0px;
 25 | }</style>
 26 |   <style type="text/css">html,
 27 | body {
 28 |     width: 100%;
 29 |     height: 100%;
 30 |     margin: 0px;
 31 | }
 32 | .gwd-page-container {
 33 |     position: relative;
 34 |     width: 100%;
 35 |     height: 100%;
 36 | }
 37 | .gwd-page-content {
 38 |     transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
 39 |     -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
 40 |     -moz-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
 41 |     perspective: 1400px;
 42 |     -webkit-perspective: 1400px;
 43 |     -moz-perspective: 1400px;
 44 |     transform-style: preserve-3d;
 45 |     -webkit-transform-style: preserve-3d;
 46 |     -moz-transform-style: preserve-3d;
 47 |     position: absolute;
 48 |     background-color: transparent;
 49 | }
 50 | .gwd-page-wrapper {
 51 |     position: absolute;
 52 |     transform: translateZ(0px);
 53 |     -webkit-transform: translateZ(0px);
 54 |     -moz-transform: translateZ(0px);
 55 |     background-color: rgb(255, 255, 255);
 56 | }
 57 | .gwd-page-size {
 58 |     width: 300px;
 59 |     height: 250px;
 60 | }
 61 | .gwd-img-uouj {
 62 |     position: absolute;
 63 |     width: 300px;
 64 |     height: 69px;
 65 |     left: -29px;
 66 |     top: 25px;
 67 |     transform-style: preserve-3d;
 68 |     -webkit-transform-style: preserve-3d;
 69 |     -moz-transform-style: preserve-3d;
 70 |     transform: translate3d(31px, -15px, 0px) scale3d(1, 1, 1.21);
 71 |     -webkit-transform: translate3d(31px, -15px, 0px) scale3d(1, 1, 1.21);
 72 |     -moz-transform: translate3d(31px, -15px, 0px) scale3d(1, 1, 1.21);
 73 |     background-image: none;
 74 | }
 75 | .gwd-canvas-1r43 {
 76 |     position: absolute;
 77 |     width: 301px;
 78 |     height: 250px;
 79 |     left: -1px;
 80 |     top: 0px;
 81 |     transform-style: preserve-3d;
 82 |     -webkit-transform-style: preserve-3d;
 83 |     -moz-transform-style: preserve-3d;
 84 |     transform: translate3d(1px, 0px, 0px) scale3d(1, 1, -1.27);
 85 |     -webkit-transform: translate3d(1px, 0px, 0px) scale3d(1, 1, -1.27);
 86 |     -moz-transform: translate3d(1px, 0px, 0px) scale3d(1, 1, -1.27);
 87 | }
 88 | .gwd-p-npbz {
 89 |     position: absolute;
 90 |     width: 301px;
 91 |     height: 157.848px;
 92 |     left: 0px;
 93 |     top: 92px;
 94 |     color: rgb(255, 135, 0);
 95 | }
 96 | .gwd-span-ftg4 {
 97 |     color: rgb(255, 255, 255);
 98 |     font-family: Arial;
 99 |     font-size: 34px;
100 | }
101 | .gwd-span-6gp9 {
102 |     font-family: Arial;
103 |     font-size: 34px;
104 |     color: rgb(255, 135, 0);
105 | }
106 | .gwd-span-1pmd {
107 |     color: rgb(255, 255, 255);
108 | }
109 | .gwd-span-2f80 {
110 |     color: rgb(255, 255, 255);
111 |     font-family: Arial;
112 |     font-size: 34px;
113 | }
114 | .gwd-span-4xvd {
115 |     font-family: Arial;
116 |     font-size: 34px;
117 |     color: rgb(255, 135, 0);
118 | }
119 | .gwd-span-13ib {
120 |     color: rgb(255, 255, 255);
121 |     font-family: Arial;
122 |     font-size: 34px;
123 | }
124 | .gwd-span-1wy0 {
125 |     color: rgb(255, 135, 0);
126 | }</style>
127 | 
128 | 
129 | 
130 | 
131 | 
132 | <script data-source="googbase_min.js" data-version="3" data-exports-type="googbase">+function(){(window.goog=window.goog||{}).inherits=function(a,d){function b(){}b.prototype=d.prototype;a.b=d.prototype;a.prototype=new b;a.prototype.constructor=a;a.a=function(a,b,f){for(var e=Array(arguments.length-2),c=2;c<arguments.length;c++)e[c-2]=arguments[c];return d.prototype[b].apply(a,e)}};}()
133 | </script><script data-source="gwd_webcomponents_min.js" data-version="5" data-exports-type="gwd_webcomponents">/**
134 |  * @license
135 |  * Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
136 |  * This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
137 |  * The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
138 |  * The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
139 |  * Code distributed by Google as part of the polymer project is also
140 |  * subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
141 |  */
142 | // @version 0.7.22
143 | "undefined"==typeof WeakMap&&!function(){var e=Object.defineProperty,t=Date.now()%1e9,n=function(){this.name="__st"+(1e9*Math.random()>>>0)+(t++ +"__")};n.prototype={set:function(t,n){var o=t[this.name];return o&&o[0]===t?o[1]=n:e(t,this.name,{value:[t,n],writable:!0}),this},get:function(e){var t;return(t=e[this.name])&&t[0]===e?t[1]:void 0},"delete":function(e){var t=e[this.name];return t&&t[0]===e?(t[0]=t[1]=void 0,!0):!1},has:function(e){var t=e[this.name];return t?t[0]===e:!1}},window.WeakMap=n}(),function(e){function t(e){E.push(e),b||(b=!0,w(o))}function n(e){return window.ShadowDOMPolyfill&&window.ShadowDOMPolyfill.wrapIfNeeded(e)||e}function o(){b=!1;var e=E;E=[],e.sort(function(e,t){return e.uid_-t.uid_});var t=!1;e.forEach(function(e){var n=e.takeRecords();r(e),n.length&&(e.callback_(n,e),t=!0)}),t&&o()}function r(e){e.nodes_.forEach(function(t){var n=v.get(t);n&&n.forEach(function(t){t.observer===e&&t.removeTransientObservers()})})}function i(e,t){for(var n=e;n;n=n.parentNode){var o=v.get(n);if(o)for(var r=0;r<o.length;r++){var i=o[r],a=i.options;if(n===e||a.subtree){var d=t(a);d&&i.enqueue(d)}}}}function a(e){this.callback_=e,this.nodes_=[],this.records_=[],this.uid_=++_}function d(e,t){this.type=e,this.target=t,this.addedNodes=[],this.removedNodes=[],this.previousSibling=null,this.nextSibling=null,this.attributeName=null,this.attributeNamespace=null,this.oldValue=null}function s(e){var t=new d(e.type,e.target);return t.addedNodes=e.addedNodes.slice(),t.removedNodes=e.removedNodes.slice(),t.previousSibling=e.previousSibling,t.nextSibling=e.nextSibling,t.attributeName=e.attributeName,t.attributeNamespace=e.attributeNamespace,t.oldValue=e.oldValue,t}function u(e,t){return y=new d(e,t)}function c(e){return N?N:(N=s(y),N.oldValue=e,N)}function l(){y=N=void 0}function f(e){return e===N||e===y}function p(e,t){return e===t?e:N&&f(e)?N:null}function m(e,t,n){this.observer=e,this.target=t,this.options=n,this.transientObservedNodes=[]}if(!e.JsMutationObserver){var w,v=new WeakMap;if(/Trident|Edge/.test(navigator.userAgent))w=setTimeout;else if(window.setImmediate)w=window.setImmediate;else{var h=[],g=String(Math.random());window.addEventListener("message",function(e){if(e.data===g){var t=h;h=[],t.forEach(function(e){e()})}}),w=function(e){h.push(e),window.postMessage(g,"*")}}var b=!1,E=[],_=0;a.prototype={observe:function(e,t){if(e=n(e),!t.childList&&!t.attributes&&!t.characterData||t.attributeOldValue&&!t.attributes||t.attributeFilter&&t.attributeFilter.length&&!t.attributes||t.characterDataOldValue&&!t.characterData)throw new SyntaxError;var o=v.get(e);o||v.set(e,o=[]);for(var r,i=0;i<o.length;i++)if(o[i].observer===this){r=o[i],r.removeListeners(),r.options=t;break}r||(r=new m(this,e,t),o.push(r),this.nodes_.push(e)),r.addListeners()},disconnect:function(){this.nodes_.forEach(function(e){for(var t=v.get(e),n=0;n<t.length;n++){var o=t[n];if(o.observer===this){o.removeListeners(),t.splice(n,1);break}}},this),this.records_=[]},takeRecords:function(){var e=this.records_;return this.records_=[],e}};var y,N;m.prototype={enqueue:function(e){var n=this.observer.records_,o=n.length;if(n.length>0){var r=n[o-1],i=p(r,e);if(i)return void(n[o-1]=i)}else t(this.observer);n[o]=e},addListeners:function(){this.addListeners_(this.target)},addListeners_:function(e){var t=this.options;t.attributes&&e.addEventListener("DOMAttrModified",this,!0),t.characterData&&e.addEventListener("DOMCharacterDataModified",this,!0),t.childList&&e.addEventListener("DOMNodeInserted",this,!0),(t.childList||t.subtree)&&e.addEventListener("DOMNodeRemoved",this,!0)},removeListeners:function(){this.removeListeners_(this.target)},removeListeners_:function(e){var t=this.options;t.attributes&&e.removeEventListener("DOMAttrModified",this,!0),t.characterData&&e.removeEventListener("DOMCharacterDataModified",this,!0),t.childList&&e.removeEventListener("DOMNodeInserted",this,!0),(t.childList||t.subtree)&&e.removeEventListener("DOMNodeRemoved",this,!0)},addTransientObserver:function(e){if(e!==this.target){this.addListeners_(e),this.transientObservedNodes.push(e);var t=v.get(e);t||v.set(e,t=[]),t.push(this)}},removeTransientObservers:function(){var e=this.transientObservedNodes;this.transientObservedNodes=[],e.forEach(function(e){this.removeListeners_(e);for(var t=v.get(e),n=0;n<t.length;n++)if(t[n]===this){t.splice(n,1);break}},this)},handleEvent:function(e){switch(e.stopImmediatePropagation(),e.type){case"DOMAttrModified":var t=e.attrName,n=e.relatedNode.namespaceURI,o=e.target,r=new u("attributes",o);r.attributeName=t,r.attributeNamespace=n;var a=e.attrChange===MutationEvent.ADDITION?null:e.prevValue;i(o,function(e){return!e.attributes||e.attributeFilter&&e.attributeFilter.length&&-1===e.attributeFilter.indexOf(t)&&-1===e.attributeFilter.indexOf(n)?void 0:e.attributeOldValue?c(a):r});break;case"DOMCharacterDataModified":var o=e.target,r=u("characterData",o),a=e.prevValue;i(o,function(e){return e.characterData?e.characterDataOldValue?c(a):r:void 0});break;case"DOMNodeRemoved":this.addTransientObserver(e.target);case"DOMNodeInserted":var d,s,f=e.target;"DOMNodeInserted"===e.type?(d=[f],s=[]):(d=[],s=[f]);var p=f.previousSibling,m=f.nextSibling,r=u("childList",e.target.parentNode);r.addedNodes=d,r.removedNodes=s,r.previousSibling=p,r.nextSibling=m,i(e.relatedNode,function(e){return e.childList?r:void 0})}l()}},e.JsMutationObserver=a,e.MutationObserver||(e.MutationObserver=a,a._isPolyfilled=!0)}}(self),function(e){"use strict";if(!window.performance){var t=Date.now();window.performance={now:function(){return Date.now()-t}}}window.requestAnimationFrame||(window.requestAnimationFrame=function(){var e=window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame;return e?function(t){return e(function(){t(performance.now())})}:function(e){return window.setTimeout(e,1e3/60)}}()),window.cancelAnimationFrame||(window.cancelAnimationFrame=function(){return window.webkitCancelAnimationFrame||window.mozCancelAnimationFrame||function(e){clearTimeout(e)}}());var n=function(){var e=document.createEvent("Event");return e.initEvent("foo",!0,!0),e.preventDefault(),e.defaultPrevented}();if(!n){var o=Event.prototype.preventDefault;Event.prototype.preventDefault=function(){this.cancelable&&(o.call(this),Object.defineProperty(this,"defaultPrevented",{get:function(){return!0},configurable:!0}))}}var r=/Trident/.test(navigator.userAgent);if((!window.CustomEvent||r&&"function"!=typeof window.CustomEvent)&&(window.CustomEvent=function(e,t){t=t||{};var n=document.createEvent("CustomEvent");return n.initCustomEvent(e,Boolean(t.bubbles),Boolean(t.cancelable),t.detail),n},window.CustomEvent.prototype=window.Event.prototype),!window.Event||r&&"function"!=typeof window.Event){var i=window.Event;window.Event=function(e,t){t=t||{};var n=document.createEvent("Event");return n.initEvent(e,Boolean(t.bubbles),Boolean(t.cancelable)),n},window.Event.prototype=i.prototype}}(window.WebComponents),window.CustomElements=window.CustomElements||{flags:{}},function(e){var t=e.flags,n=[],o=function(e){n.push(e)},r=function(){n.forEach(function(t){t(e)})};e.addModule=o,e.initializeModules=r,e.hasNative=Boolean(document.registerElement),e.isIE=/Trident/.test(navigator.userAgent),e.useNative=!t.register&&e.hasNative&&!window.ShadowDOMPolyfill&&(!window.HTMLImports||window.HTMLImports.useNative)}(window.CustomElements),window.CustomElements.addModule(function(e){function t(e,t){n(e,function(e){return t(e)?!0:void o(e,t)}),o(e,t)}function n(e,t,o){var r=e.firstElementChild;if(!r)for(r=e.firstChild;r&&r.nodeType!==Node.ELEMENT_NODE;)r=r.nextSibling;for(;r;)t(r,o)!==!0&&n(r,t,o),r=r.nextElementSibling;return null}function o(e,n){for(var o=e.shadowRoot;o;)t(o,n),o=o.olderShadowRoot}function r(e,t){i(e,t,[])}function i(e,t,n){if(e=window.wrap(e),!(n.indexOf(e)>=0)){n.push(e);for(var o,r=e.querySelectorAll("link[rel="+a+"]"),d=0,s=r.length;s>d&&(o=r[d]);d++)o["import"]&&i(o["import"],t,n);t(e)}}var a=window.HTMLImports?window.HTMLImports.IMPORT_LINK_TYPE:"none";e.forDocumentTree=r,e.forSubtree=t}),window.CustomElements.addModule(function(e){function t(e,t){return n(e,t)||o(e,t)}function n(t,n){return e.upgrade(t,n)?!0:void(n&&a(t))}function o(e,t){b(e,function(e){return n(e,t)?!0:void 0})}function r(e){N.push(e),y||(y=!0,setTimeout(i))}function i(){y=!1;for(var e,t=N,n=0,o=t.length;o>n&&(e=t[n]);n++)e();N=[]}function a(e){_?r(function(){d(e)}):d(e)}function d(e){e.__upgraded__&&!e.__attached&&(e.__attached=!0,e.attachedCallback&&e.attachedCallback())}function s(e){u(e),b(e,function(e){u(e)})}function u(e){_?r(function(){c(e)}):c(e)}function c(e){e.__upgraded__&&e.__attached&&(e.__attached=!1,e.detachedCallback&&e.detachedCallback())}function l(e){for(var t=e,n=window.wrap(document);t;){if(t==n)return!0;t=t.parentNode||t.nodeType===Node.DOCUMENT_FRAGMENT_NODE&&t.host}}function f(e){if(e.shadowRoot&&!e.shadowRoot.__watched){g.dom&&console.log("watching shadow-root for: ",e.localName);for(var t=e.shadowRoot;t;)w(t),t=t.olderShadowRoot}}function p(e,n){if(g.dom){var o=n[0];if(o&&"childList"===o.type&&o.addedNodes&&o.addedNodes){for(var r=o.addedNodes[0];r&&r!==document&&!r.host;)r=r.parentNode;var i=r&&(r.URL||r._URL||r.host&&r.host.localName)||"";i=i.split("/?").shift().split("/").pop()}console.group("mutations (%d) [%s]",n.length,i||"")}var a=l(e);n.forEach(function(e){"childList"===e.type&&(M(e.addedNodes,function(e){e.localName&&t(e,a)}),M(e.removedNodes,function(e){e.localName&&s(e)}))}),g.dom&&console.groupEnd()}function m(e){for(e=window.wrap(e),e||(e=window.wrap(document));e.parentNode;)e=e.parentNode;var t=e.__observer;t&&(p(e,t.takeRecords()),i())}function w(e){if(!e.__observer){var t=new MutationObserver(p.bind(this,e));t.observe(e,{childList:!0,subtree:!0}),e.__observer=t}}function v(e){e=window.wrap(e),g.dom&&console.group("upgradeDocument: ",e.baseURI.split("/").pop());var n=e===window.wrap(document);t(e,n),w(e),g.dom&&console.groupEnd()}function h(e){E(e,v)}var g=e.flags,b=e.forSubtree,E=e.forDocumentTree,_=window.MutationObserver._isPolyfilled&&g["throttle-attached"];e.hasPolyfillMutations=_,e.hasThrottledAttached=_;var y=!1,N=[],M=Array.prototype.forEach.call.bind(Array.prototype.forEach),O=Element.prototype.createShadowRoot;O&&(Element.prototype.createShadowRoot=function(){var e=O.call(this);return window.CustomElements.watchShadow(this),e}),e.watchShadow=f,e.upgradeDocumentTree=h,e.upgradeDocument=v,e.upgradeSubtree=o,e.upgradeAll=t,e.attached=a,e.takeRecords=m}),window.CustomElements.addModule(function(e){function t(t,o){if("template"===t.localName&&window.HTMLTemplateElement&&HTMLTemplateElement.decorate&&HTMLTemplateElement.decorate(t),!t.__upgraded__&&t.nodeType===Node.ELEMENT_NODE){var r=t.getAttribute("is"),i=e.getRegisteredDefinition(t.localName)||e.getRegisteredDefinition(r);if(i&&(r&&i.tag==t.localName||!r&&!i["extends"]))return n(t,i,o)}}function n(t,n,r){return a.upgrade&&console.group("upgrade:",t.localName),n.is&&t.setAttribute("is",n.is),o(t,n),t.__upgraded__=!0,i(t),r&&e.attached(t),e.upgradeSubtree(t,r),a.upgrade&&console.groupEnd(),t}function o(e,t){Object.__proto__?e.__proto__=t.prototype:(r(e,t.prototype,t["native"]),e.__proto__=t.prototype)}function r(e,t,n){for(var o={},r=t;r!==n&&r!==HTMLElement.prototype;){for(var i,a=Object.getOwnPropertyNames(r),d=0;i=a[d];d++)o[i]||(Object.defineProperty(e,i,Object.getOwnPropertyDescriptor(r,i)),o[i]=1);r=Object.getPrototypeOf(r)}}function i(e){e.createdCallback&&e.createdCallback()}var a=e.flags;e.upgrade=t,e.upgradeWithDefinition=n,e.implementPrototype=o}),window.CustomElements.addModule(function(e){function t(t,o){var s=o||{};if(!t)throw new Error("document.registerElement: first argument `name` must not be empty");if(t.indexOf("-")<0)throw new Error("document.registerElement: first argument ('name') must contain a dash ('-'). Argument provided was '"+String(t)+"'.");if(r(t))throw new Error("Failed to execute 'registerElement' on 'Document': Registration failed for type '"+String(t)+"'. The type name is invalid.");if(u(t))throw new Error("DuplicateDefinitionError: a type with name '"+String(t)+"' is already registered");return s.prototype||(s.prototype=Object.create(HTMLElement.prototype)),s.__name=t.toLowerCase(),s["extends"]&&(s["extends"]=s["extends"].toLowerCase()),s.lifecycle=s.lifecycle||{},s.ancestry=i(s["extends"]),a(s),d(s),n(s.prototype),c(s.__name,s),s.ctor=l(s),s.ctor.prototype=s.prototype,s.prototype.constructor=s.ctor,e.ready&&v(document),s.ctor}function n(e){if(!e.setAttribute._polyfilled){var t=e.setAttribute;e.setAttribute=function(e,n){o.call(this,e,n,t)};var n=e.removeAttribute;e.removeAttribute=function(e){o.call(this,e,null,n)},e.setAttribute._polyfilled=!0}}function o(e,t,n){e=e.toLowerCase();var o=this.getAttribute(e);n.apply(this,arguments);var r=this.getAttribute(e);this.attributeChangedCallback&&r!==o&&this.attributeChangedCallback(e,o,r)}function r(e){for(var t=0;t<_.length;t++)if(e===_[t])return!0}function i(e){var t=u(e);return t?i(t["extends"]).concat([t]):[]}function a(e){for(var t,n=e["extends"],o=0;t=e.ancestry[o];o++)n=t.is&&t.tag;e.tag=n||e.__name,n&&(e.is=e.__name)}function d(e){if(!Object.__proto__){var t=HTMLElement.prototype;if(e.is){var n=document.createElement(e.tag);t=Object.getPrototypeOf(n)}for(var o,r=e.prototype,i=!1;r;)r==t&&(i=!0),o=Object.getPrototypeOf(r),o&&(r.__proto__=o),r=o;i||console.warn(e.tag+" prototype not found in prototype chain for "+e.is),e["native"]=t}}function s(e){return g(M(e.tag),e)}function u(e){return e?y[e.toLowerCase()]:void 0}function c(e,t){y[e]=t}function l(e){return function(){return s(e)}}function f(e,t,n){return e===N?p(t,n):O(e,t)}function p(e,t){e&&(e=e.toLowerCase()),t&&(t=t.toLowerCase());var n=u(t||e);if(n){if(e==n.tag&&t==n.is)return new n.ctor;if(!t&&!n.is)return new n.ctor}var o;return t?(o=p(e),o.setAttribute("is",t),o):(o=M(e),e.indexOf("-")>=0&&b(o,HTMLElement),o)}function m(e,t){var n=e[t];e[t]=function(){var e=n.apply(this,arguments);return h(e),e}}var w,v=(e.isIE,e.upgradeDocumentTree),h=e.upgradeAll,g=e.upgradeWithDefinition,b=e.implementPrototype,E=e.useNative,_=["annotation-xml","color-profile","font-face","font-face-src","font-face-uri","font-face-format","font-face-name","missing-glyph"],y={},N="http://www.w3.org/1999/xhtml",M=document.createElement.bind(document),O=document.createElementNS.bind(document);w=Object.__proto__||E?function(e,t){return e instanceof t}:function(e,t){if(e instanceof t)return!0;for(var n=e;n;){if(n===t.prototype)return!0;n=n.__proto__}return!1},m(Node.prototype,"cloneNode"),m(document,"importNode"),document.registerElement=t,document.createElement=p,document.createElementNS=f,e.registry=y,e["instanceof"]=w,e.reservedTagList=_,e.getRegisteredDefinition=u,document.register=document.registerElement}),function(e){function t(){i(window.wrap(document)),window.CustomElements.ready=!0;var e=window.requestAnimationFrame||function(e){setTimeout(e,16)};e(function(){setTimeout(function(){window.CustomElements.readyTime=Date.now(),window.HTMLImports&&(window.CustomElements.elapsed=window.CustomElements.readyTime-window.HTMLImports.readyTime),document.dispatchEvent(new CustomEvent("WebComponentsReady",{bubbles:!0}))})})}var n=e.useNative,o=e.initializeModules;e.isIE;if(n){var r=function(){};e.watchShadow=r,e.upgrade=r,e.upgradeAll=r,e.upgradeDocumentTree=r,e.upgradeSubtree=r,e.takeRecords=r,e["instanceof"]=function(e,t){return e instanceof t}}else o();var i=e.upgradeDocumentTree,a=e.upgradeDocument;if(window.wrap||(window.ShadowDOMPolyfill?(window.wrap=window.ShadowDOMPolyfill.wrapIfNeeded,window.unwrap=window.ShadowDOMPolyfill.unwrapIfNeeded):window.wrap=window.unwrap=function(e){return e}),window.HTMLImports&&(window.HTMLImports.__importsParsingHook=function(e){e["import"]&&a(wrap(e["import"]))}),"complete"===document.readyState||e.flags.eager)t();else if("interactive"!==document.readyState||window.attachEvent||window.HTMLImports&&!window.HTMLImports.ready){var d=window.HTMLImports&&!window.HTMLImports.ready?"HTMLImportsLoaded":"DOMContentLoaded";window.addEventListener(d,t)}else t()}(window.CustomElements);
144 | "undefined"==typeof document.register&&(document.register=function(a){return document.registerElement.apply(document,arguments)});
145 | 
146 | </script>
147 |   <script data-source="gwdpage_min.js" data-version="8" data-exports-type="gwd-page">-function(){"use strict";var b;var c=function(a,g){var e;e=document.createEvent("Event");e.initEvent(a,!0,!0);g.dispatchEvent(e)};var d=function(){};goog.inherits(d,HTMLDivElement);b=d.prototype;b.createdCallback=function(){this.h=this.i.bind(this);this.a=[];this.g=this.b=this.f=!1;var a=parseInt(this.getAttribute("data-gwd-width"),10)||this.clientWidth;this.j=(parseInt(this.getAttribute("data-gwd-height"),10)||this.clientHeight)>=a;this.c=!1};
148 | b.attachedCallback=function(){this.addEventListener("ready",this.h,!1);setTimeout(function(){this.a=Array.prototype.slice.call(this.querySelectorAll("*")).filter(function(a){return"function"!=typeof a.gwdLoad||"function"!=typeof a.gwdIsLoaded||a.gwdIsLoaded()?!1:!0},this);this.g=!0;0<this.a.length?(this.style.visibility="hidden",this.f=!1):f(this);this.b=!0;c("attached",this)}.bind(this),0)};
149 | b.detachedCallback=function(){this.removeEventListener("ready",this.h,!1);this.classList.remove("gwd-play-animation");c("detached",this)};b.gwdActivate=function(){this.classList.remove("gwd-inactive");Array.prototype.slice.call(this.querySelectorAll("*")).forEach(function(a){"function"==typeof a.gwdActivate&&"function"==typeof a.gwdIsActive&&0==a.gwdIsActive()&&a.gwdActivate()});this.c=!0;this.b?this.b=!1:c("attached",this);c("pageactivated",this)};
150 | b.gwdDeactivate=function(){this.classList.add("gwd-inactive");this.classList.remove("gwd-play-animation");Array.prototype.slice.call(this.querySelectorAll("*")).forEach(function(a){"function"==typeof a.gwdDeactivate&&"function"==typeof a.gwdIsActive&&1==a.gwdIsActive()&&a.gwdDeactivate()});this.c=!1;c("pagedeactivated",this);c("detached",this)};b.gwdIsActive=function(){return this.c};b.gwdIsLoaded=function(){return this.g&&0==this.a.length};
151 | b.gwdLoad=function(){if(this.gwdIsLoaded())f(this);else for(var a=this.a.length-1;0<=a;a--)this.a[a].gwdLoad()};b.i=function(a){a=this.a.indexOf(a.target);0<=a&&(this.a.splice(a,1),0==this.a.length&&f(this))};var f=function(a){a.style.visibility="";a.f||(c("ready",a),c("pageload",a));a.f=!0};d.prototype.gwdPresent=function(){c("pagepresenting",this);this.classList.add("gwd-play-animation")};d.prototype.isPortrait=function(){return this.j};d.prototype.attributeChangedCallback=null;
152 | document.registerElement("gwd-page",{prototype:d.prototype,"extends":"div"});}()
153 | </script><script data-source="gwdpagedeck_min.js" data-version="8" data-exports-type="gwd-pagedeck">-function(){"use strict";var g;var l=["-ms-","-moz-","-webkit-",""],m=function(a,c){for(var b,d,e=0;e<l.length;++e)b=l[e]+"transition-duration",d=""+c,a.style.setProperty(b,d)};function n(a,c,b,d,e,h,f){this.j=a;this.f=c;this.w=b;a=d||"none";this.l=e="none"===a?0:e||1E3;this.g=h||"linear";this.i=[];if(e){h=f||"top";if(f=this.j){f.classList.add("gwd-page");f.classList.add("center");f="center";if("push"==a)switch(h){case "top":f="top";break;case "bottom":f="bottom";break;case "left":f="left";break;case "right":f="right"}this.i.push(f);"fade"==a&&this.i.push("transparent")}f=this.f;e="center";if("none"!=a&&"fade"!=a)switch(h){case "top":e="bottom";break;case "bottom":e="top";
154 | break;case "left":e="right";break;case "right":e="left"}f.classList.add(e);f.classList.add("gwd-page");"fade"==a&&f.classList.add("transparent")}}n.prototype.start=function(){if(this.l){var a=this.j,c=this.f;p(c,this.J.bind(this));a&&(m(a,this.l+"ms"),a.classList.add(this.g));m(c,this.l+"ms");c.classList.add(this.g);c.setAttribute("gwd-reflow",c.offsetWidth);if(a)for(var b=0;b<this.i.length;++b)a.classList.add(this.i[b]);q(c)}else this.w()};
155 | var r=function(a,c,b,d){b="transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,"+b+","+d+",0,1);";return a+"."+c+"{-webkit-"+b+"-moz-"+b+"-ms-"+b+b+"}"},t="center top bottom left right transparent".split(" "),q=function(a){t.forEach(function(c){a.classList.remove(c)})},p=function(a,c){var b=function(){a.removeEventListener("webkitTransitionEnd",b);a.removeEventListener("transitionend",b);c()};a.addEventListener("webkitTransitionEnd",b);a.addEventListener("transitionend",b)};
156 | n.prototype.J=function(){var a=this.j;a&&(q(a),m(a,0),a.classList.remove(this.g));m(this.f,0);this.f.classList.remove(this.g);this.w()};var u=function(a,c,b){var d;b?(d=document.createEvent("CustomEvent"),d.initCustomEvent(a,!0,!0,b)):(d=document.createEvent("Event"),d.initEvent(a,!0,!0));c.dispatchEvent(d)},w=function(a,c){var b=function(d){a.removeEventListener("attached",b);c(d)};a.addEventListener("attached",b)};var x=function(){};goog.inherits(x,HTMLDivElement);
157 | x.prototype.createdCallback=function(){window.addEventListener("WebComponentsReady",this.I.bind(this),!1);this.u=this.h.bind(this,"shake");this.v=this.h.bind(this,"tilt");this.s=this.h.bind(this,"rotatetoportrait");this.o=this.h.bind(this,"rotatetolandscape");this.a=[];this.A=this.H.bind(this);this.D=this.F.bind(this);this.c=this.B=null;this.b=-1;this.m=!1;this.classList.add("gwd-pagedeck");Object.defineProperty(this,"currentIndex",{enumerable:!0,get:this.G.bind(this)})};
158 | x.prototype.I=function(){this.a=Array.prototype.slice.call(this.querySelectorAll("div[is=gwd-page]"));this.a.forEach(function(a){a.classList.add("gwd-page")});for(u("beforepagesdetached",this,{pages:this.a.slice()});this.firstChild;)this.removeChild(this.firstChild);-1==this.b&&void 0!==this.C&&this.goToPage(this.C)};
159 | x.prototype.attachedCallback=function(){if(!this.B){var a,c=this.id;a=this.offsetWidth;var b=this.offsetHeight,c=(c&&"#")+c+".gwd-pagedeck > .gwd-page";a=r(c,"center",0,0)+r(c,"top",0,b)+r(c,"bottom",0,-b)+r(c,"left",a,0)+r(c,"right",-a,0);b=document.createElement("style");void 0!==b.cssText?b.cssText=a:b.innerHTML=a;document.head.appendChild(b);this.B=b}this.addEventListener("pageload",this.A,!1);document.body.addEventListener("shake",this.u,!0);document.body.addEventListener("tilt",this.v,!0);document.body.addEventListener("rotatetoportrait",
160 | this.s,!0);document.body.addEventListener("rotatetolandscape",this.o,!0)};x.prototype.detachedCallback=function(){this.removeEventListener("pageload",this.A,!1);document.body.removeEventListener("shake",this.u,!0);document.body.removeEventListener("tilt",this.v,!0);document.body.removeEventListener("rotatetoportrait",this.s,!0);document.body.removeEventListener("rotatetolandscape",this.o,!0)};
161 | var z=function(a,c,b,d,e,h){if(!(a.b==c||0>c||c>a.a.length-1||a.c)){var f=a.a[a.b],k=a.a[c];a.b=c;a.c=new n(f,k,a.D,b,d,e,h);var v=k.gwdLoad&&!k.gwdIsLoaded();a.m=v;w(k,function(){k.gwdActivate();v?k.gwdLoad():y(this)}.bind(a));a.appendChild(k)}};x.prototype.H=function(a){this.m&&a.target.parentNode==this&&(y(this),this.m=!1)};var y=function(a){u("pagetransitionstart",a);a.c.start()};g=x.prototype;
162 | g.F=function(){if(this.c){var a=this.c.j,c=this.c.f;this.c=null;u("pagetransitionend",this,{outgoingPage:a?a:null,incomingPage:c});a&&a.gwdDeactivate();c.gwdPresent()}};g.findPageIndexByAttributeValue=function(a,c){for(var b=this.a.length,d,e=0;e<b;e++)if(d=this.a[e],"boolean"==typeof c){if(d.hasAttribute(a))return e}else if(d.getAttribute(a)==c)return e;return-1};g.goToNextPage=function(a,c,b,d,e){var h=this.b,f=h+1;f>=this.a.length&&(f=a?0:h);z(this,f,c,b,d,e)};
163 | g.goToPreviousPage=function(a,c,b,d,e){var h=this.b,f=this.a.length,k=h-1;0>k&&(k=a?f-1:h);z(this,k,c,b,d,e)};g.goToPage=function(a,c,b,d,e){this.a.length?(a="number"==typeof a?a:this.findPageIndexByAttributeValue("id",a),0<=a&&z(this,a,c,b,d,e)):this.C=a};g.G=function(){return 0<=this.b?this.b:void 0};g.getPages=function(){return this.a};g.getPage=function(a){if("number"!=typeof a){if(!a)return null;a=this.findPageIndexByAttributeValue("id",a)}return 0>a||a>this.a.length-1?null:this.a[a]};
164 | g.getDefaultPage=function(){var a=this.getAttribute("default-page");return a?this.getPage(this.findPageIndexByAttributeValue("id",a)):this.getPage(0)};g.getOrientationSpecificPage=function(a,c){var b=this.getPage(c),d=b.getAttribute("alt-orientation-page");if(!d)return b;var e=b.isPortrait(),h=1==a,d=this.getPage(d);return h==e?b:d};g.h=function(a,c){if(c.target==document.body){var b=this.getPage(this.b);u(a,b,c.detail)}};
165 | g.getElementById=function(a){for(var c=this.a.length,b=0;b<c;b++){var d=this.a[b].querySelector("#"+a);if(d)return d}return null};g.getElementsBySelector=function(a){for(var c=this.a.length,b=[],d=0;d<c;d++){var e=this.a[d].querySelectorAll(a);e&&(b=b.concat(Array.prototype.slice.call(e)))}return b};g.attributeChangedCallback=null;document.registerElement("gwd-pagedeck",{prototype:x.prototype,"extends":"div"});}()
166 | </script><script data-source="gwdgenericad_min.js" data-version="4" data-exports-type="gwd-genericad">-function(){"use strict";var b;var d=function(){};goog.inherits(d,HTMLElement);b=d.prototype;b.createdCallback=function(){document.body.style.opacity="0";this.c=this.f.bind(this);this.b=this.a=null};b.attachedCallback=function(){this.a=this.querySelector("[is=gwd-pagedeck]");window.addEventListener("resize",this.c,!1)};b.detachedCallback=function(){window.removeEventListener("resize",this.c,!1)};
167 | b.initAd=function(){document.body.style.opacity="";var a;a=document.createEvent("Event");a.initEvent("adinitialized",!0,!0);this.dispatchEvent(a);this.goToPage()};b.goToPage=function(a,c,e,f,g){this.a.getPage(this.a.currentIndex);if(a=a?this.a.getPage(a):this.a.getDefaultPage())a=this.a.getOrientationSpecificPage(window.innerHeight>=window.innerWidth?1:2,a.id),c?this.a.goToPage(a.id,c,e,f,g):this.a.goToPage(a.id)};
168 | b.f=function(){var a=window.innerHeight>=window.innerWidth?1:2;this.b!=a&&(this.b=a,(a=this.a.getPage(this.a.currentIndex))&&this.goToPage(a.id))};b.exit=function(a,c){window.open(a,"_newtab");c&&this.goToPage()};b.attributeChangedCallback=null;document.registerElement("gwd-genericad",{prototype:d.prototype});}()
169 | </script>
170 |     <script data-source="gwdimage_min.js" data-version="7" data-exports-type="gwd-image">-function(){"use strict";var c=function(a){return"gwd-page"==a.tagName.toLowerCase()||"gwd-page"==a.getAttribute("is")},e=function(a){if(c(a))return a;for(;a&&9!=a.nodeType;)if((a=a.parentElement)&&c(a))return a;return null};var f=function(a,b){var d;d=document.createEvent("Event");d.initEvent(a,!0,!0);b.dispatchEvent(d)};var g=function(){};goog.inherits(g,HTMLImageElement);g.prototype.createdCallback=function(){this.b=this.c.bind(this);this.a=0;var a=this.getAttribute("src");a&&(this.setAttribute("source",a),this.removeAttribute("src"));this.addEventListener("load",this.b,!1);this.addEventListener("error",this.b,!1)};
171 | g.prototype.attachedCallback=function(){if("function"==typeof this.gwdLoad&&"function"==typeof this.gwdIsLoaded&&!this.gwdIsLoaded()){var a=e(this),b=a&&"function"==typeof a.gwdIsLoaded;(!a||b&&a.gwdIsLoaded())&&this.gwdLoad()}};g.prototype.gwdIsLoaded=function(){return 2==this.a||3==this.a};g.prototype.gwdLoad=function(){var a=this.getAttribute("source");a?(this.a=1,this.setAttribute("src",a)):f("load",this)};g.prototype.c=function(a){this.a=a&&"error"==a.type?3:2;h(this);f("ready",this)};
172 | var h=function(a){if(2==a.a){var b=a.getAttribute("source"),d=a.getAttribute("scaling")||"stretch";b&&("stretch"!=d?(a.classList.add("scaled-proportionally"),a.style.backgroundImage="url("+JSON.stringify(b)+")",a.style.backgroundSize="none"!=d?d:"auto","data:image/gif;base64,R0lGODlhAQABAPAAAAAAAAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="!=a.getAttribute("src")&&a.setAttribute("src","data:image/gif;base64,R0lGODlhAQABAPAAAAAAAAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==")):(a.classList.remove("scaled-proportionally"),
173 | a.style.backgroundImage="",b!=a.getAttribute("src")&&a.setAttribute("src",b)))}};g.prototype.attributeChangedCallback=function(a){"source"==a&&0!==this.a&&this.gwdLoad();"scaling"==a&&h(this)};document.registerElement("gwd-image",{prototype:g.prototype,"extends":"img"});}()
174 | </script><script data-source="gwdrectangle_min.js" data-version="3" data-exports-type="gwd-rectangle">-function(){"use strict";var q=[0,0,0,0],r=/[-+]?[0-9]*\.?[0-9]+%/g,t=/[-+]?[0-9]*\.?[0-9]+px/g,w=function(f,b,g,a,d){var c,h;if(b.gradientMode){d=[[d,d,0],[d,a-d,0],[g-d,a-d,0],[g-d,d,0]];if("radial"==b.gradientMode){(c=b.l)||(c="center");h=f="center";var e=c.match(r);c=c.match(t);e&&1<e.length?(f=e[0],h=e[1]):c&&1<c.length&&(f=c[0],h=c[1]);f=u(f,d[0][0],d[3][0]);h=u(h,d[0][1],d[1][1]);e=b.shape;c=[.5*(d[0][0]+d[2][0]),.5*(d[0][0]+d[2][0])];var k=f<c[0]?d[2][0]:d[0][0];c=h<c[1]?d[1][1]:d[0][1];k=Math.abs(f-k);c=Math.abs(h-
175 | c);var l=d[3][0]-d[0][0];d=d[1][1]-d[0][1];.001<Math.abs(l)&&(d/=l,k=Math.sqrt(k*k+c*c/(d*d)),c=d*k);d=k;e&&"farthest-corner"!=e&&(e=e.match(t))&&1<e.length&&(d=parseFloat(e[0]),c=parseFloat(e[1]));l=Math.max(d,c);e=document.createElement("canvas");e.width=g;e.height=a;k=e.getContext("2d");l=k.createRadialGradient(f,h,0,f,h,l);v(l,b.color);k.rect(0,0,g,a);c<d?(b=1,g=c/d):(g=1,b=d/c);k.save();k.transform(b,0,0,g,b*-f+f,g*-h+h);k.fillStyle=l;k.fill();k.restore();b=k.createPattern(e,"no-repeat")}else{g=
176 | 0;b.orientation&&(g=parseFloat(b.orientation)*Math.PI/180);isFinite(g)&&!isNaN(g)||(g=0);c=-1*g;g=[];h=[];a=[.5*(d[0][0]+d[2][0]),.5*(d[0][1]+d[2][1])];e=Math.tan(c);if(.001>Math.abs(Math.tan(.5*Math.PI-.001)-e))h=0<=Math.sin(c)?1:-1,d=.5*(d[2][1]-d[0][1]),g=[a[0],a[1]-h*d],h=[a[0],a[1]+h*d];else{c=0<=Math.cos(c)?1:-1;c=[c,c*e];for(var k=Infinity,l=-Infinity,p=0;4>p;p++){var m,n=[d[p][0]-a[0],d[p][1]-a[1]],n=e*n[1]+n[0],n=n/(1+e*e);m=[n,n*e];n=(0<c[0]*m[0]+c[1]*m[1]?1:-1)*Math.sqrt(m[0]*m[0]+m[1]*
177 | m[1]);m=[m[0]+a[0],m[1]+a[1]];n<k&&(g=m,k=n);n>l&&(h=m,l=n)}}d=f.createLinearGradient(g[0],g[1],h[0],h[1]);v(d,b.color);b=d}return b}return"rgba("+Math.floor(255*b[0])+","+Math.floor(255*b[1])+","+Math.floor(255*b[2])+","+b[3]+")"},v=function(f,b){if(f)for(var g=b.length,a=0;a<g;a++){var d=b[a].position/100,c=b[a].value;if(void 0===c.a||null===c.a)c.a=1;f.addColorStop(d,"rgba("+c.r+","+c.g+","+c.b+","+c.a+")")}},u=function(f,b,g){return f?0<=f.indexOf("%")?b+parseInt(f,10)/100*(g-b):0<=f.indexOf("px")?
178 | b+parseInt(f,10):b+.5*(g-b):0};var x=function(){};goog.inherits(x,HTMLCanvasElement);
179 | x.prototype.attachedCallback=function(){var f=this.getContext("2d"),b=this.width,g=this.height,a={};a.h=parseFloat(this.getAttribute("stroke-width"))||0;a.strokeColor=JSON.parse(this.getAttribute("stroke-color"))||q;a.fillColor=JSON.parse(this.getAttribute("fill-color"))||q;a.i=parseFloat(this.getAttribute("tl-radius"))||0;a.j=parseFloat(this.getAttribute("tr-radius"))||0;a.c=parseFloat(this.getAttribute("bl-radius"))||0;a.f=parseFloat(this.getAttribute("br-radius"))||0;var d=a.h;f.beginPath();var c=
180 | Math.ceil(d)-.5;a.fillColor&&(f.fillStyle=w(f,a.fillColor,b,g,d),f.lineWidth=d,y(a,c,f,b,g),f.fill(),f.closePath());f.beginPath();c=Math.ceil(.5*d)-.5;a.strokeColor&&(f.strokeStyle=w(f,a.strokeColor,b,g,0),f.lineWidth=d,y(a,c,f,b,g),f.stroke(),f.closePath())};x.prototype.attributeChangedCallback=null;
181 | var y=function(f,b,g,a,d){var c=.5*a,h=.5*d,e=[b,b],k=f.i,l=f.j,p=f.c;f=f.f;c=c<h?c:h;k>c&&(k=c);p>c&&(p=c);f>c&&(f=c);l>c&&(l=c);c=a-b;h=d-b;0>=k&&0>=p&&0>=f&&0>=l?g.rect(e[0],e[1],a-2*b,d-2*b):(a=k-b,0>a&&(a=0),e[1]+=a,.001>Math.abs(a)&&(e[1]=b),g.moveTo(e[0],e[1]),e=[b,h],a=p-b,0>a&&(a=0),e[1]-=a,g.lineTo(e[0],e[1]),.001<a&&g.arcTo(b,h,b+a,h,p-b),e=[c,h],a=f-b,0>a&&(a=0),e[0]-=a,g.lineTo(e[0],e[1]),.001<a&&g.arcTo(c,h,c,h-a,f-b),e=[c,b],a=l-b,0>a&&(a=0),e[1]+=a,g.lineTo(e[0],e[1]),.001<a&&g.arcTo(c,
182 | b,c-a,b,l-b),e=[b,b],a=k-b,0>a&&(a=0),e[0]+=a,g.lineTo(e[0],e[1]),.001<a?g.arcTo(b,b,b,b+a,k-b):g.lineTo(b,2*b))};document.registerElement("gwd-rectangle",{prototype:x.prototype,"extends":"canvas"});}()
183 | </script>
184 |       <script type="text/javascript" gwd-events="support">var gwd=gwd||{};gwd.actions=gwd.actions||{};gwd.actions.events=gwd.actions.events||{};gwd.actions.events.getElementById=function(id){var element=document.getElementById(id);if(!element){var pageDeck=document.querySelector("[is=gwd-pagedeck]");if(pageDeck){if(typeof pageDeck.getElementById==="function"){element=pageDeck.getElementById(id)}}}if(!element){switch(id){case"document.body":element=document.body;break;case"document":element=document;break;case"window":element=window;break;default:break}}return element};gwd.actions.events.addHandler=function(eventTarget,eventName,eventHandler,useCapture){var targetElement=gwd.actions.events.getElementById(eventTarget);if(targetElement){targetElement.addEventListener(eventName,eventHandler,useCapture)}};gwd.actions.events.removeHandler=function(eventTarget,eventName,eventHandler,useCapture){var targetElement=gwd.actions.events.getElementById(eventTarget);if(targetElement){targetElement.removeEventListener(eventName,eventHandler,useCapture)}};gwd.actions.events.setInlineStyle=function(id,styles){var element=gwd.actions.events.getElementById(id);if(!element||!styles){return}var transitionProperty=element.style.transition!==undefined?"transition":"-webkit-transition";var prevTransition=element.style[transitionProperty];var splitStyles=styles.split(/\s*;\s*/);var nameValue;splitStyles.forEach(function(splitStyle){if(splitStyle){var regex=new RegExp("[:](?![/]{2})");nameValue=splitStyle.split(regex);nameValue[1]=nameValue[1]?nameValue[1].trim():null;if(!(nameValue[0]&&nameValue[1])){return}element.style.setProperty(nameValue[0],nameValue[1])}});function restoreTransition(event){var el=event.target;el.style.transition=prevTransition;el.removeEventListener(event.type,restoreTransition,false)}element.addEventListener("transitionend",restoreTransition,false);element.addEventListener("webkitTransitionEnd",restoreTransition,false)};gwd.actions.gwdGenericad=gwd.actions.gwdGenericad||{};gwd.actions.gwdGenericad.exit=function(receiver,url,opt_collapseOnExit){gwd.actions.events.getElementById(receiver).exit(url,opt_collapseOnExit)}</script>
185 |       <script type="text/javascript" gwd-events="handlers">
186 |         gwd.auto_BodyClick = function(event) {
187 |           // GWD Predefined Function
188 | 
189 |           /*
190 |             Step 3: replace hard coded URL with APPNEXUS.getClickTag()
191 |           */
192 |           gwd.actions.gwdGenericad.exit('gwd-ad', APPNEXUS.getClickTag(), true);
193 |         };
194 |       </script>
195 |       <script type="text/javascript" gwd-events="registration">
196 |         // Support code for event handling in Google Web Designer
197 |          // This script block is auto-generated. Please do not edit!
198 |         gwd.actions.events.registerEventHandlers = function(event) {
199 |           gwd.actions.events.addHandler('document.body', 'click', gwd.auto_BodyClick, false);
200 |         };
201 |         gwd.actions.events.deregisterEventHandlers = function(event) {
202 |           gwd.actions.events.removeHandler('document.body', 'click', gwd.auto_BodyClick, false);
203 |         };
204 |         document.addEventListener("DOMContentLoaded", gwd.actions.events.registerEventHandlers);
205 |         document.addEventListener("unload", gwd.actions.events.deregisterEventHandlers);
206 |       </script>
207 | 
208 |       <!-- Step 2: Add the AppNexus HTML5 Library -->
209 |       <script type="text/javascript" src="https://acdn.adnxs.com/html5-lib/1.4.1/appnexus-html5-lib.min.js"></script>
210 |       <!-- end of step 2 -->
211 | </head>
212 | 
213 | <body>
214 |   <gwd-genericad id="gwd-ad">
215 |     <div is="gwd-pagedeck" class="gwd-page-container" id="pagedeck">
216 |       <div is="gwd-page" id="page1" class="gwd-page-wrapper gwd-page-size gwd-lightbox" data-gwd-width="300px" data-gwd-height="250px">
217 |         <div class="gwd-page-content gwd-page-size">
218 |           <img is="gwd-image" source="an_logo.png" id="gwd-image_1" class="gwd-img-uouj">
219 |           <canvas is="gwd-rectangle" width="301" height="250" class="gwd-canvas-1r43" x-off="-5.684341886080802e-14" y-off="2.842170943040401e-14" stroke-width="1" stroke-color="[0,0,0,1]" fill-color="[0,0,0,1]" tl-radius="0" tr-radius="0" bl-radius="0" br-radius="0" stroke-style="Solid"></canvas>
220 |           <p class="gwd-p-npbz"><span class="gwd-span-2f80">Powering the <span class="gwd-span-1wy0">advertising</span><br>
221 |             that powers the</span><span class="gwd-span-4xvd">&nbsp;internet</span><span class="gwd-span-13ib">™</span>
222 |           </p>
223 |         </div>
224 |       </div>
225 |     </div>
226 |   </gwd-genericad>
227 |   <script type="text/javascript" id="gwd-init-code">
228 |     (function() {
229 |       var gwdAd = document.getElementById('gwd-ad');
230 | 
231 |       /**
232 |        * Handles the DOMContentLoaded event. The DOMContentLoaded event is
233 |        * fired when the document has been completely loaded and parsed.
234 |        */
235 |       function handleDomContentLoaded(event) {
236 | 
237 |       }
238 | 
239 |       /**
240 |        * Handles the WebComponentsReady event. This event is fired when all
241 |        * custom elements have been registered and upgraded.
242 |        */
243 |       function handleWebComponentsReady(event) {
244 |         // Start the Ad lifecycle.
245 |         setTimeout(function() {
246 |           gwdAd.initAd();
247 |         }, 0);
248 |       }
249 | 
250 |       /**
251 |        * Handles the event that is dispatched after the Ad has been
252 |        * initialized and before the default page of the Ad is shown.
253 |        */
254 |       function handleAdInitialized(event) {}
255 | 
256 |       window.addEventListener('DOMContentLoaded',
257 |         handleDomContentLoaded, false);
258 |       window.addEventListener('WebComponentsReady',
259 |         handleWebComponentsReady, false);
260 |       window.addEventListener('adinitialized',
261 |         handleAdInitialized, false);
262 |     })();
263 |   </script>
264 | 
265 | 
266 | </body></html>
267 | 


--------------------------------------------------------------------------------
/docs/Walkthrough-For-Adobe-Edge-Created-Ads.md:
--------------------------------------------------------------------------------
 1 | #How To: Integrate the AppNexus HTML5 Library with Ads Created in Adobe Edge
 2 | 
 3 | ##Converting an Existing Adobe Edge Ad
 4 | 
 5 | If you are working with an ad already created in Adobe Edge, you can follow these instructions to modify that ad so it works with the AppNexus HTML5 Library.
 6 | 
 7 | <a name="standard-ads"></a>
 8 | ##Standard Ads
 9 | 
10 | ###Step 1: Find the right files to edit
11 | Before we begin, find the folder containing the Adobe Edge-created ad.  You may only have a file with a `.zip` extension—in this case, you must unzip the file to reveal a folder containing its various assets.
12 | 
13 | Then, look for and open the file named `index.html`. There will also be a file with the extension `.js` at the root level of the ad folder, that looks like `300x250edge.js` (it has also been named `edgeActions.js` in some cases).   These files are where we will make all of the necessary changes in the steps below.
14 | 
15 | <a name="standard-ads-step-1"></a>
16 | ###Step 2: Add the AppNexus HTML5 Library
17 | We will have to make sure the actual AppNexus HTML5 Library is linked to inside `index.html`.  The library can be found here: [https://acdn.adnxs.com/html5-lib/1.4.1/appnexus-html5-lib.min.js](https://acdn.adnxs.com/html5-lib/1.4.1/appnexus-html5-lib.min.js)
18 | 
19 | Linking the library in should be done inside the `<head>` tag in the `index.html` file, by adding the following `<script>` tag:
20 | 
21 | ```html
22 | <head>
23 | 	...
24 |     <script type="text/javascript" src="https://acdn.adnxs.com/html5-lib/1.4.1/appnexus-html5-lib.min.js"></script>
25 | </head>
26 | ```
27 | 
28 | 
29 | <a name="standard-ads-step-2"></a>
30 | ###Step 3: Add Click Event
31 | For this step, you will have to make all your changes to the `300x250edge.js`/`...edge.js`/`edgeActions.js` file.
32 | 
33 | ####Without Existing Click Event
34 | You could see an Adobe Edge JavaScript function that handles events, but has no existing click events. This looks something like this:
35 | 
36 | ```javascript
37 | //Edge symbol: 'stage'
38 | (function(symbolName){
39 | 	Symbol.bindTriggerAction(compId,symbolName,"Default Timeline",16750,function(sym,e){
40 | 		sym.play(0);
41 | 	});
42 | //Edge binding end
43 | })("stage");
44 | ```
45 | 
46 | In order to support the click event using the `APPNEXUS.click()` function, you will have to add in the following function:
47 | 
48 | ```javascript
49 | 	Symbol.bindElementAction(compId,symbolName,"${Stage}","click",function(sym,e){
50 | 		APPNEXUS.click();
51 | 	});
52 | ```
53 | Putting it all together, you will have a function that looks like this:
54 | 
55 | ```javascript
56 | //Edge symbol: 'stage'
57 | (function(symbolName){
58 | 	Symbol.bindTriggerAction(compId,symbolName,"Default Timeline",16750,function(sym,e){
59 | 		sym.play(0);
60 | 	});
61 | 	Symbol.bindElementAction(compId,symbolName,"${Stage}","click",function(sym,e){
62 | 		APPNEXUS.click();
63 | 	});
64 | //Edge binding end
65 | })("stage");
66 | ```
67 | 
68 | ####With Existing Click Event
69 | You could see an Adobe Edge JavaScript function that handles events, and already has an existing click event. This looks something like this:
70 | 
71 | ```javascript
72 | //Edge symbol: 'stage'
73 | (function(symbolName){
74 |    Symbol.bindElementAction(compId, symbolName, "${Stage}", "click", function(sym, e) {
75 |       window.open("https://appnexus.com");         
76 |    });
77 | //Edge binding end
78 | })("stage");
79 | ```
80 | 
81 | In order to support the click event using the `APPNEXUS.click()` function, you will have to replace the hard-coded URL, `https://appnexus.com` to add in the function  `APPNEXUS.getClickTag()`.
82 | 
83 | 
84 | Putting it all together, you will have a function that looks like this:
85 | 
86 | ```javascript
87 | //Edge symbol: 'stage'
88 | (function(symbolName){
89 |    Symbol.bindElementAction(compId, symbolName, "${Stage}", "click", function(sym, e) {
90 |       window.open(APPNEXUS.getClickTag());         
91 |    });
92 | //Edge binding end
93 | })("stage");
94 | ```
95 | 


--------------------------------------------------------------------------------
/docs/Walkthrough-For-Google-Web-Designer-Created-Ads.md:
--------------------------------------------------------------------------------
 1 | #How To: Integrate the AppNexus HTML5 Library with Ads Created in Google Web Designer
 2 | 
 3 | ##Converting an Existing Google Web Designer Ad
 4 | 
 5 | If you are working with an ad already created in Google Web Designer, you can follow these instructions to modify that ad so it works with the AppNexus HTML5 Library.
 6 | 
 7 | <a name="standard-ads"></a>
 8 | ##Standard Ads
 9 | The corresponding example for this section can be found in this folder under `/Google Web Designer/Standard/`.
10 | 
11 | ###Step 1: Find the `index.html` file
12 | Before we begin, find the folder containing the Google Web Designer-created ad.  You may only have a file with a `.zip` extension—in this case, you must unzip the file to reveal a folder containing its various assets.
13 | 
14 | 
15 | Then, look for and open the file named `index.html`. This file is where we will make all of the necessary changes in the steps below.
16 | 
17 | <a name="standard-ads-step-1"></a>
18 | ###Step 2: Add the AppNexus HTML5 Library
19 | First, we will have to make sure the actual HTML5 Library is linked to inside `index.html`.  This should be done right before the `</head>` tag in the `index.html` file, by adding the following `<script>` tag:
20 | 
21 | ```html
22 |   <head>
23 |         ...
24 |         <script type="text/javascript" src="https://acdn.adnxs.com/html5-lib/1.4.1/appnexus-html5-lib.min.js"></script>
25 |   </head>
26 | ```
27 | 
28 | 
29 | <a name="standard-ads-step-2"></a>
30 | ###Step 3: Replace hard-coded URL with `APPNEXUS.getClickTag()`
31 | Generally, you may have an ad created in Google Web Designer that has a hard-coded URL embedded.  
32 | 
33 | In order to remove them, search for `gwd-events="handlers"` in the same `index.html` file.  You should find a block of code that looks like this:
34 | 
35 | ```html
36 |   <script type="text/javascript" gwd-events="handlers">
37 |     gwd.auto_BodyClick = function(event) {
38 |       // GWD Predefined Function
39 |       gwd.actions.gwdGenericad.exit('gwd-ad', 'https://appnexus.com', true);
40 |     };
41 |   </script>
42 | ```
43 | Note that the hardcoded URL (in this case, `https://appnexus.com`) will vary based on the specific ad you are working with. 
44 | 
45 | Then, replace `"https://appnexus.com"` (including the quotation marks) with `APPNEXUS.getClickTag()`, so that this function looks like:
46 | 
47 | ```html
48 |   <script type="text/javascript" gwd-events="handlers">
49 |     gwd.auto_BodyClick = function(event) {
50 |       // GWD Predefined Function
51 |       gwd.actions.gwdGenericad.exit('gwd-ad', APPNEXUS.getClickTag(), true);
52 |     };
53 |   </script>
54 | ```
55 | 
56 | ###Step 4: Finish and Upload
57 | 
58 | Then, ZIP the folder containing `index.html` and the rest of your ad's assets and upload it using the [AppNexus Hosted HTML5 Creative Upload](https://wiki.appnexus.com/display/console/Upload+Hosted+HTML5+Creatives).


--------------------------------------------------------------------------------
/docs/Walkthrough-For-Manually-Created-Ads.md:
--------------------------------------------------------------------------------
  1 | #Intergrating the AppNexus HTML5 Library with Manually Created HTML5 Ads
  2 | 
  3 | ## Table of Contents
  4 | - [Standard Ads](#standard-ads)
  5 | - [Expanding Ads](#expanding-ads)
  6 | - [Interstitial Ads](#interstitial-ads)
  7 | 
  8 | <a name="standard-ads"></a>
  9 | ## Standard Ads
 10 | All standard ads require a file called `index.html`. Each of the following steps makes changes to that file.
 11 | 
 12 | ####Step 1: Add the AppNexus HTML5 Library
 13 | 
 14 | You can find the AppNexus' HTML5 JavaScript library at this URL: [https://acdn.adnxs.com/html5-lib/1.4.1/appnexus-html5-lib.min.js](https://acdn.adnxs.com/html5-lib/1.4.1/appnexus-html5-lib.min.js).
 15 | 
 16 | You must add it to the ad's `index.html` file, inside the `<head>` tag, in a `<script>` tag like this:
 17 | 
 18 | ```html	
 19 | 	<head>
 20 | 		...
 21 | 		<script type="text/javascript" src="https://acdn.adnxs.com/html5-lib/1.4.1/appnexus-html5-lib.min.js"></script>
 22 | 	</head>
 23 | ```
 24 | 
 25 | ####Step 2: Add a clickthrough element
 26 | Add a unique id `"clickthrough"` to `<div class="container">` (if that does not exist, you can add it to the `<body>` tag),
 27 | 
 28 | so that this:
 29 | 
 30 | ```html	
 31 | 	<div class="container">
 32 | ```
 33 | becomes this:
 34 | 
 35 | ```html	
 36 | 	<div class="container" id="clickthrough">
 37 | ```
 38 | 
 39 | ####Step 3: Handle click event
 40 | Standard ads will make use of the `APPNEXUS.ready()` and `APPNEXUS.click()` functions (provided by the AppNexus HTML5 JavaScript library you added in Step 1).
 41 | 
 42 | Before the closing body tag (`</body>`), you can copy and paste the following `<script>` block—be sure that you do not accidentally add the `</body>` tag.
 43 | 
 44 | ```html	
 45 |     <script type="text/javascript">
 46 |         APPNEXUS.ready(function () {
 47 |           var clickthrough = document.getElementById("clickthrough");
 48 | 
 49 |           clickthrough.addEventListener("click", function () {
 50 |             APPNEXUS.click();
 51 |           });
 52 |         });
 53 |     </script>
 54 |     </body>
 55 | ```
 56 | 
 57 | __Brief Technical Explanation__
 58 | 
 59 | When the page is loaded and the HTML5 Library has loaded, `APPNEXUS.ready()` is called.  `APPNEXUS.click()` is called inside the `addEventListener` callback function — this means that it happens when the user clicks on the `clickthrough` element.
 60 | 
 61 | See `README.md` for additional technical documentation on `APPNEXUS.ready()` and `APPNEXUS.click()`. 
 62 | 
 63 | <a name="expanding-ads"></a>
 64 | ## Expanding Ads
 65 | All expanding ads require a file called `index.html`. Each of the following steps makes changes to that file.
 66 | 
 67 | ####Step 1: Add the AppNexus HTML5 Library
 68 | You can find the AppNexus' HTML5 JavaScript library at this URL: [https://acdn.adnxs.com/html5-lib/1.4.1/appnexus-html5-lib.min.js](https://acdn.adnxs.com/html5-lib/1.4.1/appnexus-html5-lib.min.js).
 69 | 
 70 | You must add it to the ad's `index.html` file, inside the `<head>` tag, in a `<script>` tag like this:
 71 | 
 72 | ```html	
 73 | 	<head>
 74 | 		...
 75 | 		<script type="text/javascript" src="https://acdn.adnxs.com/html5-lib/1.4.1/appnexus-html5-lib.min.js"></script>
 76 | 	</head>
 77 | ```
 78 | 
 79 | ####Step 2: Add a clickthrough element
 80 | Add a unique id `"clickthrough"` to `<div class="container">` (if that does not exist, you can add it to the `<body>` tag),
 81 | 
 82 | so this:
 83 | 
 84 | ```html	
 85 | 	<div class="container">
 86 | ```
 87 | becomes
 88 | 
 89 | ```html	
 90 | 	<div class="container" id="clickthrough">
 91 | ```
 92 | 
 93 | ####Step 3: Configure expanding properties
 94 | To make your expanding ad work properly, you will need to add the following `<script>` block before the closing body tag `</body>` in `index.html`. 
 95 | 
 96 | There are two main things we accomplish when working with expanding ads: 
 97 | 
 98 | 1. expand/collapse the ad itself
 99 | 2. making sure the containing `<iframe>` expands to fit the expanded ad
100 | 
101 | In the following example, the lines `expandingContainer.style.height = 600;` and `expandingContainer.style.height = 248;` exist specifically to expand the ad to `600px` when it is moused over, and to collapse it back to `248px` when it is not.  This code is essentially a placeholder for the animation of the ad—you will very likely be writing completely different code to animate your ad to the specifications that you need.
102 | 
103 | 
104 | To expand the `<iframe>` to fit the expanded ad and ensure the ad is not hidden behind the `<iframe>`, you will have to pass in an object to the `APPNEXUS.setExpandProperties()` function:
105 | 
106 | ```
107 | APPNEXUS.setExpandProperties({
108 |   	height: 600
109 | });
110 | ```
111 | 
112 | Here, the object contains a property `height` with a value equal to the expanded height of the ad (set above: `expandingContainer.style.height = 600;`).  It can also contain a `width` property that sets the width of the `<iframe>`.
113 | 
114 | 
115 | ```html	
116 | <body>
117 | 	...
118 |   <script type="text/javascript">
119 |       APPNEXUS.ready(function () {
120 |         var isExpanded = false;
121 |         var expandingContainer = document.getElementById("container");
122 |         
123 |         APPNEXUS.setExpandProperties({
124 |           height: 600
125 |         });
126 |         
127 |         expandingContainer.addEventListener("mouseover", function () {
128 |           if (!isExpanded) { 
129 |             APPNEXUS.expand();
130 |           }
131 |           expandingContainer.style.height = 600;
132 |           isExpanded = true;
133 |         });
134 | 
135 |         expandingContainer.addEventListener('mouseout', function() {
136 |           if (isExpanded) {
137 |             APPNEXUS.collapse();
138 |             expandingContainer.style.height = 248;
139 |           }
140 |         });
141 |       });
142 |   </script>
143 | </body>
144 | ```
145 | 
146 | ##### Animating the containing `<iframe>`
147 | 
148 | Using `APPNEXUS.setExpandProperties()` allows you to smoothly animate the `<iframe>` that contains your ad. If you want to take advantage of this feature, you can do so by adding `expand` and `collapse` properties to an object that you pass into `APPNEXUS.setExpandProperties`.
149 | 
150 | Both the `expand` and `collapse` properties are themselves objects that contain `easing` and `duration` properties, which determine the easing curve and duration of the animation, respectively.
151 | 
152 | Putting it all together, we can add in `APPNEXUS.setExpandingProperties()` to the previous example, as such:
153 | 
154 | ```html	
155 | <body>
156 | 	...
157 |   <script type="text/javascript">
158 |       APPNEXUS.ready(function () {
159 |         var isExpanded = false;
160 |         var expandingContainer = document.getElementById("expanding-container");
161 | 
162 |         APPNEXUS.setExpandProperties({
163 |           height: 600,
164 |           expand: {
165 |             easing: 'ease-in-out',
166 |             duration: 2000
167 |           },
168 |           collapse: {
169 |             easing: 'ease-in-out',
170 |             duration: 1000
171 |           }
172 |         });
173 | 
174 |         expandingContainer.addEventListener("mouseover", function () {
175 |           if (!isExpanded) { 
176 |             APPNEXUS.expand();
177 |           }
178 |           expandingContainer.style.height = 600;
179 |           isExpanded = true;
180 |         });
181 | 
182 |         expandingContainer.addEventListener('mouseout', function() {
183 |           if (isExpanded) {
184 |             APPNEXUS.collapse();
185 |             expandingContainer.style.height = 248;
186 |           }
187 |         });
188 |       });
189 |   </script>
190 | </body>
191 | ```
192 | __Brief Technical Explanation__
193 | 
194 | `APPNEXUS.expand()` is called inside the `addEventListener`'s callback function — in this case, this means that it happens when the user mouses over or moves their mouse outside of the `clickthrough` element.  This all takes place inside `APPNEXUS.ready()`— this means this only runs when the page is loaded and the HTML5 Library has loaded.
195 | 
196 | See `README.md` for additional technical documentation on `APPNEXUS.setExpandProperties()` and `APPNEXUS.expand()`. 
197 | 
198 | <a name="interstitial-ads"></a>
199 | ## Interstitial Ads
200 | All interstitial ads require a file called `index.html`. Each of the following steps makes changes to that file.
201 | 
202 | ####Step 1: Add the AppNexus HTML5 Library
203 | You can find the AppNexus' HTML5 JavaScript library at this URL: [https://acdn.adnxs.com/html5-lib/1.4.1/appnexus-html5-lib.min.js](https://acdn.adnxs.com/html5-lib/1.4.1/appnexus-html5-lib.min.js).
204 | 
205 | You must add it to the ad's `index.html` file, inside the `<head>` tag, in a `<script>` tag like this:
206 | 
207 | ```html	
208 | 	<head>
209 | 		...
210 | 		<script type="text/javascript" src="https://acdn.adnxs.com/html5-lib/1.4.1/appnexus-html5-lib.min.js"></script>
211 | 	</head>
212 | ```
213 | 
214 | ####Step 2: Add a clickthrough element
215 | Add a unique id `"clickthrough"` to `<div class="container">` (if that does not exist, you can add it to the `<body>` tag),
216 | 
217 | so this:
218 | 
219 | ```html	
220 | 	<div class="container">
221 | ```
222 | becomes
223 | 
224 | ```html	
225 | 	<div class="container" id="clickthrough">
226 | ```
227 | 
228 | ####Step 3: Configure interstitial properties
229 | To make your expanding ad work properly, you will need to add the following `<script>` block before the closing body tag `</body>` in `index.html`. 
230 | 
231 | This makes use of the `APPNEXUS.setExpandProperties()` and `APPNEXUS.expand()` functions provided by the AppNexus HTML5 JavaScript library you added in Step 1 as such:
232 | 
233 | ```html	
234 | 	...
235 |     <script type="text/javascript">
236 |         APPNEXUS.ready(function () {
237 |           APPNEXUS.setExpandProperties({
238 | 			interstitial : true
239 |   		  });
240 | 		  APPNEXUS.expand();
241 |         });
242 |     </script>
243 |     </body>
244 | ```
245 | 
246 | If you have a close button on your interstitial ad, you can use `APPNEXUS.collapse()` to register that as such:
247 | 
248 | ```html	
249 | 	...
250 |     <script type="text/javascript">
251 | 		APPNEXUS.ready(function () {
252 | 			var closeButton = document.getElementById('close');
253 | 			closeButton.addEventListener("click", function () {
254 | 					APPNEXUS.collapse();
255 | 			});
256 | 			  		
257 | 			APPNEXUS.setExpandProperties({
258 | 				interstitial : true
259 | 			});
260 | 			APPNEXUS.expand();
261 | 
262 |         });
263 |     </script>
264 |     </body>
265 | ```
266 | 
267 | __Brief Technical Explanation__
268 | 
269 | `APPNEXUS.expand()` (and `APPNEXUS.collapse()`) is called  inside `APPNEXUS.ready()`— this means this only runs when the page is loaded and the HTML5 Library has loaded.
270 | 
271 | See `README.md` for additional technical documentation on `APPNEXUS.setExpandProperties()` and `APPNEXUS.expand()`. 
272 | 


--------------------------------------------------------------------------------
/examples/ads.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "ads": [
 3 |     {
 4 |       "id": 15,
 5 |       "type":"standard",
 6 |       "path": "standard/index.html",
 7 |       "url": "http://www.appnexus.com",
 8 |       "size": "300x250"
 9 |     },
10 |     {
11 |       "id": 18,
12 |       "type": "expanding-push",
13 |       "path": "expanding-push/index.html",
14 |       "url": "http://www.appnexus.com",
15 |       "size": "728x90"
16 |     },
17 |     {
18 |       "id": 20,
19 |       "type": "expanding",
20 |       "path": "expanding/index.html",
21 |       "url": "https://www.appnexus.com",
22 |       "size": "300x250"
23 |     },
24 |     {
25 |       "id": 13,
26 |       "type": "interstitial",
27 |       "path": "interstitial/index.html",
28 |       "url": "http://www.appnexus.com",
29 |       "size": "0x0"
30 |     }
31 |   ]
32 | }


--------------------------------------------------------------------------------
/examples/expanding-push/css/main.css:
--------------------------------------------------------------------------------
  1 |   body { 
  2 |     margin: 0;
  3 |     padding: 0;
  4 |     font-family: Helvetica,Arial,sans-serif;
  5 |     text-align: center;
  6 |     overflow:hidden;
  7 |   }
  8 |   .container {
  9 |     overflow: hidden;
 10 |     background-color: #000000;
 11 |     height: 248px;
 12 |     width: 298px;
 13 |     border: 1px solid #666666;
 14 |     cursor: pointer;
 15 | 
 16 |   }
 17 |   .tagline {
 18 |     margin: 20px;
 19 |     padding: 0;
 20 |     position: relative;
 21 |     bottom: -26px;
 22 |   }
 23 |   .tagline .text {
 24 |     display: block;
 25 |     color: #ffffff;
 26 |     font-size: 28px;
 27 |     font-weight: 100;
 28 |     text-align: left;
 29 |     animation: fadein 2s;
 30 |       -moz-animation: fadein 2s; /* Firefox */
 31 |       -webkit-animation: fadein 2s; /* Safari and Chrome */
 32 |       -o-animation: fadein 2s; /* Opera */
 33 |   }
 34 |   strong {
 35 |     color: #FF8700;
 36 |   }
 37 |   .logo {
 38 |     left: 0;
 39 |     margin: 20px;
 40 |     position: relative;
 41 |   }
 42 |   .logo img {
 43 |     width: 115px;
 44 |   }
 45 |   .slinky {
 46 |     left: 149px;
 47 |     margin: 0;
 48 |     position: absolute;
 49 |     top: 1px;
 50 |   }
 51 |   .slinky img {
 52 |     width: 150px;
 53 |   }
 54 |   #trademark {
 55 |     color: #FF8700;
 56 |     font-size: 20px;
 57 |     vertical-align: top;
 58 |   }
 59 |   .expandedContainer {
 60 |     animation: containerExpandDown 2s;
 61 |     -moz-animation: containerExpandDown 2s;
 62 |     -webkit-animation: containerExpandDown 2s;
 63 |     -o-animation: containerExpandDown 2s;
 64 | 
 65 |     height: 600px;
 66 |   }
 67 |   .expandedTagline {
 68 |     animation: taglineExpandDown 2s;
 69 |     -moz-animation: taglineExpandDown 2s;
 70 |     -webkit-animation: taglineExpandDown 2s;
 71 |     -o-animation: taglineExpandDown 2s;
 72 | 
 73 |     bottom: -380px;
 74 |   }
 75 | 
 76 |   .hidden {
 77 |     display: none;
 78 |   }
 79 | 
 80 |   .overlay {
 81 |       position: absolute;
 82 |       top: 0;
 83 |       left: 0;
 84 |       width: 100%;
 85 |       height: 100%;
 86 |       z-index: 100;
 87 |       background-color: rgba(0,0,0,0.5); /*dim the background*/
 88 |   }
 89 | 
 90 |   .interstitial {
 91 |     margin: 0 auto;
 92 |     height: 480px;
 93 |     width: 320px;
 94 |   }
 95 | 
 96 |   .interstitial .tagline {
 97 |     bottom: -255px;
 98 |   }
 99 | 
100 |   @keyframes fadein {
101 |     from {
102 |         opacity:0;
103 |     }
104 |     to {
105 |         opacity:1;
106 |     }
107 |   }
108 |   @-moz-keyframes fadein { /* Firefox */
109 |       from {
110 |           opacity:0;
111 |       }
112 |       to {
113 |           opacity:1;
114 |       }
115 |   }
116 |   @-webkit-keyframes fadein { /* Safari and Chrome */
117 |       from {
118 |           opacity:0;
119 |       }
120 |       to {
121 |           opacity:1;
122 |       }
123 |   }
124 |   @-o-keyframes fadein { /* Opera */
125 |       from {
126 |           opacity:0;
127 |       }
128 |       to {
129 |           opacity: 1;
130 |       }
131 |   }
132 | 
133 |   @keyframes containerExpandDown {
134 |     from {
135 |       height: 300px;
136 |     }
137 |     to {
138 |       height: 600px;
139 |     }
140 |   }
141 | 
142 |   @keyframes taglineExpandDown {
143 |     from {
144 |       bottom: -76px;
145 |     }
146 |     to {
147 |       bottom: -380px;
148 |     }
149 |   }


--------------------------------------------------------------------------------
/examples/expanding-push/images/an_logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/appnexus/appnexus-html5-lib/652b5e64437c08ece1d84a3b9856b2e1facd93b7/examples/expanding-push/images/an_logo.png


--------------------------------------------------------------------------------
/examples/expanding-push/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |   <head>
 3 |     <title>HTML5 Expanding Push 300x250</title>
 4 |     <link rel="stylesheet" type="text/css" href="css/main.css">
 5 |     <!-- Step 1. Add AppNexus' HTML5 javascript library. -->
 6 |     <script type="text/javascript" src="https://acdn.adnxs.com/html5-lib/1.4.1/appnexus-html5-lib.min.js"></script>
 7 |     <!-- End of Step 1. -->  </head>
 8 |   <body>
 9 |   <!-- Step 2. Add id="clickthrough" to the main container of the ad. Adding this to the body will also work. -->
10 |   <div class="container expandable" id="expanding-container">
11 |   <!-- End of Step 2. -->
12 |     <div class="logo">
13 |       <img src="images/an_logo.png" border="0">
14 |     </div>
15 |     <div class="tagline expandable" id="tagline">
16 |       <span class="text">Powering</span>
17 |       <span class="text">the <strong>advertising</strong></span>
18 |       <span class="text">that powers</span>
19 |       <span class="text">the <strong>Internet</strong><span id="trademark">&trade;</span></span>
20 |     </div>
21 |   </div>
22 | 
23 |     <!-- Step 3. Add ready and click functions inside of a script tag before the close of the body tag. Note that it targets the id set in Step 2 (see getElementById). -->
24 |   <script type="text/javascript">
25 |       APPNEXUS.ready(function () {
26 |         var isExpanded = false;
27 |         var expandingContainer = document.getElementById("expanding-container");
28 |         var tagline = document.getElementById('tagline');
29 | 
30 |         APPNEXUS.setExpandProperties({
31 |           height: 600,
32 |           expand: {
33 |             easing: 'ease-in-out',
34 |             duration: 2000
35 |           },
36 |           collapse: {
37 |             easing: 'ease-in-out',
38 |             duration: 1000
39 |           }
40 |         });
41 | 
42 |         expandingContainer.addEventListener("click", function () {
43 |           if (!isExpanded) { 
44 |             APPNEXUS.expand();
45 |             expandingContainer.style.height = 600;
46 |             tagline.classList.add("expandedTagline");
47 | 
48 |             isExpanded = true;
49 |           } else {
50 |             APPNEXUS.collapse();
51 |             expandingContainer.style.height = 248;
52 |             tagline.classList.remove("expandedTagline");
53 |             isExpanded = false;            
54 |           }
55 |         });
56 | 
57 |       });
58 |   </script>
59 | 
60 |   </body>
61 | </html>


--------------------------------------------------------------------------------
/examples/expanding/css/main.css:
--------------------------------------------------------------------------------
  1 |   body { 
  2 |     margin: 0;
  3 |     padding: 0;
  4 |     font-family: Helvetica,Arial,sans-serif;
  5 |     text-align: center;
  6 |     overflow:hidden;
  7 |   }
  8 |   .container {
  9 |     overflow: hidden;
 10 |     background-color: #000000;
 11 |     height: 248px;
 12 |     width: 298px;
 13 |     border: 1px solid #666666;
 14 |     cursor: pointer;
 15 |   }
 16 |   .tagline {
 17 |     margin: 20px;
 18 |     padding: 0;
 19 |     position: relative;
 20 |     bottom: -26px;
 21 |   }
 22 |   .tagline .text {
 23 |     display: block;
 24 |     color: #ffffff;
 25 |     font-size: 28px;
 26 |     font-weight: 100;
 27 |     text-align: left;
 28 |     animation: fadein 2s;
 29 |       -moz-animation: fadein 2s; /* Firefox */
 30 |       -webkit-animation: fadein 2s; /* Safari and Chrome */
 31 |       -o-animation: fadein 2s; /* Opera */
 32 |   }
 33 |   strong {
 34 |     color: #FF8700;
 35 |   }
 36 |   .logo {
 37 |     left: 0;
 38 |     margin: 20px;
 39 |     position: relative;
 40 |   }
 41 |   .logo img {
 42 |     width: 115px;
 43 |   }
 44 |   .slinky {
 45 |     left: 149px;
 46 |     margin: 0;
 47 |     position: absolute;
 48 |     top: 1px;
 49 |   }
 50 |   .slinky img {
 51 |     width: 150px;
 52 |   }
 53 |   #trademark {
 54 |     color: #FF8700;
 55 |     font-size: 20px;
 56 |     vertical-align: top;
 57 |   }
 58 |   .expandedContainer {
 59 |     animation: containerExpandDown 2s;
 60 |     -moz-animation: containerExpandDown 2s;
 61 |     -webkit-animation: containerExpandDown 2s;
 62 |     -o-animation: containerExpandDown 2s;
 63 | 
 64 |     height: 600px;
 65 |   }
 66 |   .expandedTagline {
 67 |     animation: taglineExpandDown 2s;
 68 |     -moz-animation: taglineExpandDown 2s;
 69 |     -webkit-animation: taglineExpandDown 2s;
 70 |     -o-animation: taglineExpandDown 2s;
 71 | 
 72 |     bottom: -380px;
 73 |   }
 74 | 
 75 |   .hidden {
 76 |     display: none;
 77 |   }
 78 | 
 79 |   .overlay {
 80 |       position: absolute;
 81 |       top: 0;
 82 |       left: 0;
 83 |       width: 100%;
 84 |       height: 100%;
 85 |       z-index: 100;
 86 |       background-color: rgba(0,0,0,0.5); /*dim the background*/
 87 |   }
 88 | 
 89 |   .interstitial {
 90 |     margin: 0 auto;
 91 |     height: 480px;
 92 |     width: 320px;
 93 |   }
 94 | 
 95 |   .interstitial .tagline {
 96 |     bottom: -255px;
 97 |   }
 98 | 
 99 |   @keyframes fadein {
100 |     from {
101 |         opacity:0;
102 |     }
103 |     to {
104 |         opacity:1;
105 |     }
106 |   }
107 |   @-moz-keyframes fadein { /* Firefox */
108 |       from {
109 |           opacity:0;
110 |       }
111 |       to {
112 |           opacity:1;
113 |       }
114 |   }
115 |   @-webkit-keyframes fadein { /* Safari and Chrome */
116 |       from {
117 |           opacity:0;
118 |       }
119 |       to {
120 |           opacity:1;
121 |       }
122 |   }
123 |   @-o-keyframes fadein { /* Opera */
124 |       from {
125 |           opacity:0;
126 |       }
127 |       to {
128 |           opacity: 1;
129 |       }
130 |   }
131 | 
132 |   @keyframes containerExpandDown {
133 |     from {
134 |       height: 300px;
135 |     }
136 |     to {
137 |       height: 600px;
138 |     }
139 |   }
140 | 
141 |   @keyframes taglineExpandDown {
142 |     from {
143 |       bottom: -76px;
144 |     }
145 |     to {
146 |       bottom: -380px;
147 |     }
148 |   }


--------------------------------------------------------------------------------
/examples/expanding/images/an_logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/appnexus/appnexus-html5-lib/652b5e64437c08ece1d84a3b9856b2e1facd93b7/examples/expanding/images/an_logo.png


--------------------------------------------------------------------------------
/examples/expanding/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |   <head>
 3 |     <title>HTML5 Expanding 300x250</title>
 4 |     <link rel="stylesheet" type="text/css" href="css/main.css">
 5 |     <!-- Step 1. Add AppNexus' HTML5 javascript library. -->
 6 |     <script type="text/javascript" src="https://acdn.adnxs.com/html5-lib/1.4.1/appnexus-html5-lib.min.js"></script>
 7 |     <!-- End of Step 1. -->
 8 |   </head>
 9 |   <body>
10 |   <!-- Step 2. Add id="clickthrough" to the main container of the ad. Adding this to the body will also work. -->
11 |   <div class="container expandable" id="expanding-container">
12 |   <!-- End of Step 2. -->
13 |     <div class="logo">
14 |       <img src="images/an_logo.png" border="0">
15 |     </div>
16 |     <div class="tagline expandable" id="tagline">
17 |       <span class="text">Powering</span>
18 |       <span class="text">the <strong>advertising</strong></span>
19 |       <span class="text">that powers</span>
20 |       <span class="text">the <strong>Internet</strong><span id="trademark">&trade;</span></span>
21 |     </div>
22 |   </div>
23 | 
24 |     <!-- Step 3. Add ready and click functions inside of a script tag before the close of the body tag. Note that it targets the id set in Step 2 (see getElementById). -->
25 |   <script type="text/javascript">
26 |       APPNEXUS.ready(function () {
27 |         var isExpanded = false;
28 |         var expandingContainer = document.getElementById("expanding-container");
29 |         var tagline = document.getElementById('tagline');
30 | 
31 |         APPNEXUS.setExpandProperties({
32 |           floating: true,
33 |           anchor: 'top-left',
34 |           height: 600,
35 |           expand: {
36 |             easing: 'ease-in-out',
37 |             duration: 1000
38 |           },
39 |           collapse: {
40 |             easing: 'ease-in-out',
41 |             duration: 300
42 |           }
43 |         });
44 | 
45 |         expandingContainer.addEventListener("click", function() {
46 |           APPNEXUS.click();
47 |         });
48 | 
49 |         expandingContainer.addEventListener("mouseover", function () {
50 |           if (!isExpanded) { 
51 |             console.log("appnexus expanding");
52 |             APPNEXUS.expand();
53 |           }
54 |           expandingContainer.style.height = 600;
55 |           tagline.classList.add("expandedTagline");
56 | 
57 |           isExpanded = true;
58 |         });
59 | 
60 |         expandingContainer.addEventListener('mouseout', function() {
61 |           if (isExpanded) {
62 |             console.log("appnexus collapsing");
63 |             APPNEXUS.collapse();
64 |             expandingContainer.style.height = 248;
65 |             tagline.classList.remove("expandedTagline");
66 | 
67 |             isExpanded = false;
68 |           }
69 |         });
70 |       });
71 |   </script>
72 | 
73 |   </body>
74 | </html>


--------------------------------------------------------------------------------
/examples/interstitial/images/an_logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/appnexus/appnexus-html5-lib/652b5e64437c08ece1d84a3b9856b2e1facd93b7/examples/interstitial/images/an_logo.png


--------------------------------------------------------------------------------
/examples/interstitial/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | 
 4 | <head>
 5 |     <meta charset="utf-8" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <title>HTML5 Interstitial 965x600</title>
 8 |     <link rel="stylesheet" href="styles/style.css" />
 9 |     <!-- Step 1. Add AppNexus' HTML5 javascript library. -->
10 |     <script type="text/javascript" src="https://acdn.adnxs.com/html5-lib/1.4.1/appnexus-html5-lib.min.js"></script>
11 |     <!-- End of Step 1. --></head>
12 | 
13 | <body>
14 |     <div id="container" class="centered">
15 |         <div class="top-row">
16 |             <div class="logo">
17 |                 <img src="images/an_logo.png" border="0">
18 |             </div>
19 |             <a class="close-button" id="close">
20 |                 X
21 |             </a>
22 |         </div>
23 |         <div class="tagline" id="tagline">
24 |             <span class="text">Powering</span>
25 |             <span class="text">the <strong>advertising</strong></span>
26 |             <span class="text">that powers</span>
27 |             <span class="text">the <strong>Internet</strong><span id="trademark">&trade;</span></span>
28 |         </div>
29 |     </div>
30 |     <script type="text/javascript">
31 |     APPNEXUS.ready(function () {
32 |         var body = document.getElementsByTagName('body')[0];
33 |         body.addEventListener("click", function() {
34 |             APPNEXUS.collapse();
35 |         });
36 |         var closeButton = document.getElementById('close');
37 |         closeButton.addEventListener("click", function () {
38 |             APPNEXUS.collapse();
39 |             event.stopPropagation();
40 |         });
41 |         // request expand and overlay
42 |         APPNEXUS.setExpandProperties({
43 |             interstitial : true
44 |         });
45 | 
46 |         var container = document.getElementById("container");
47 | 
48 |         container.addEventListener("click", function () {
49 |             APPNEXUS.click();
50 |             event.stopPropagation();
51 | 
52 |         });
53 | 
54 |         APPNEXUS.expand();
55 |     });
56 |     </script> 
57 | 
58 | </body>
59 | 
60 | </html>


--------------------------------------------------------------------------------
/examples/interstitial/js/script.js:
--------------------------------------------------------------------------------
 1 | APPNEXUS.ready(function () {
 2 |   var videoIsMuted = false;
 3 |   var video = document.getElementById("video");
 4 | 
 5 |   var playPauseButton = document.getElementById("playpause");
 6 |   var soundMuteButton = document.getElementById("sound");
 7 | 
 8 |   var playImage = document.getElementById("play");
 9 |   var pauseImage = document.getElementById("pause");
10 |   var footerDiv = document.getElementById("footer");
11 |   var logoDov = document.getElementById("logo");
12 |   var closeButton = document.getElementById("close-btn");
13 | 
14 |   // video play/pause action
15 |   playPauseButton.addEventListener('click', function () {
16 |     if(!video.paused) {
17 |       video.pause();
18 |       playImage.style.visibility = "visible";
19 |       pauseImage.style.visibility = "hidden";
20 |     }else{
21 |       video.play();
22 |       pauseImage.style.visibility = "visible";
23 |       playImage.style.visibility = "hidden";
24 |     }
25 |     isPlaying = !isPlaying;
26 |   });
27 | 
28 |   // video mute action
29 |   soundMuteButton.addEventListener('click', function () {
30 |     if(!videoIsMuted) {
31 |       video.muted = true;
32 |       document.getElementById("mute").style.visibility = "visible";
33 |       document.getElementById("unmute").style.visibility = "hidden";
34 |     }else{
35 |       video.muted = false;
36 |       document.getElementById("unmute").style.visibility = "visible";
37 |       document.getElementById("mute").style.visibility = "hidden";
38 |     }
39 |     videoIsMuted = !videoIsMuted;
40 |   });
41 | 
42 |   // close button actions
43 |   closeButton.addEventListener("click", function () {
44 |     video.pause();
45 |     APPNEXUS.collapse();
46 |   });
47 | 
48 |   footerDiv.addEventListener('click', function () { APPNEXUS.click(); });
49 |   logoDov.addEventListener('click', function () { APPNEXUS.click(); });
50 | 
51 |   // video ended actions
52 |   video.addEventListener("ended", function () {
53 |     APPNEXUS.collapse();
54 |   });
55 | 
56 |   // request expand and overlay
57 |   APPNEXUS.setExpandProperties({
58 |     interstitial : true
59 |   });
60 |   APPNEXUS.expand();
61 | });
62 | 


--------------------------------------------------------------------------------
/examples/interstitial/media/video.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/appnexus/appnexus-html5-lib/652b5e64437c08ece1d84a3b9856b2e1facd93b7/examples/interstitial/media/video.mp4


--------------------------------------------------------------------------------
/examples/interstitial/styles/style.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: Arial, sans-serif;
 3 |     margin: 0px;
 4 | }
 5 | 
 6 | #container {
 7 |     position: absolute;
 8 |     display: block;
 9 |     border-style:solid;
10 |     height: 60%;
11 |     border-width: thin;
12 |     background-color: black;
13 |     cursor: pointer;
14 |     width: 75%;
15 | }
16 | 
17 | .centered {
18 |     position: absolute;
19 |     margin: auto;
20 |     top: 0;
21 |     left: 0;
22 |     bottom: 0;
23 |     right: 0;
24 | }
25 | .tagline {
26 |     padding: 0;
27 |     position: relative;
28 |     float: right;
29 | }
30 | .tagline .text {
31 |     display: block;
32 |     color: #ffffff;
33 |     font-size: 48px;
34 |     font-weight: bold;
35 |     text-align: left;
36 |     animation: fadein 2s;
37 |     -moz-animation: fadein 2s; /* Firefox */
38 |     -webkit-animation: fadein 2s; /* Safari and Chrome */
39 |     -o-animation: fadein 2s; /* Opera */
40 | }
41 | strong {
42 |     color: #FF8700;
43 | }
44 | #trademark {
45 |     color: #FF8700;
46 |     font-size: 20px;
47 |     vertical-align: top;
48 | }
49 | .top-row {
50 |     margin-bottom: 80px;
51 | }
52 | .logo {
53 |     left: 0;
54 |     margin: 20px;
55 |     position: relative;
56 |     display: inline-block;
57 | }
58 | .close-button {
59 |     font-size: 50px;
60 |     font-weight: bold;
61 |     color: white;
62 |     float: right;
63 |     padding: 50px;
64 |     display: inline-block;
65 | }
66 | .close-button:hover {
67 |     color: #FF8700;
68 | }
69 | 
70 | @media (max-width: 1000px) {
71 |     #container {
72 |         width: 900px;
73 |     }
74 | }
75 | 
76 | 
77 | @media (max-width: 768px) {
78 |     #container {
79 |         width: 90%;
80 |     }
81 |     .logo > img {
82 |         width: 100px;
83 |     }
84 |     .tagline .text {
85 |         font-size: 30px;
86 |     }
87 |     .close-button {
88 |         font-size: 20px;
89 |     }
90 | 
91 | }
92 | 


--------------------------------------------------------------------------------
/examples/standard/css/main.css:
--------------------------------------------------------------------------------
 1 |   body { 
 2 |     margin: 0;
 3 |     padding: 0;
 4 |     font-family: Helvetica,Arial,sans-serif;
 5 |     text-align: center;
 6 |     overflow:hidden;
 7 |   }
 8 |   .container {
 9 |     overflow: hidden;
10 |     background-color: #000000;
11 |     height: 248px;
12 |     width: 298px;
13 |     border: 1px solid #666666;
14 |     cursor: pointer;
15 |   }
16 |   .tagline {
17 |     margin: 20px;
18 |     padding: 0;
19 |     position: relative;
20 |     bottom: -26px;
21 |   }
22 |   .tagline .text {
23 |     display: block;
24 |     color: #ffffff;
25 |     font-size: 28px;
26 |     font-weight: 100;
27 |     text-align: left;
28 |     animation: fadein 2s;
29 |     -moz-animation: fadein 2s; /* Firefox */
30 |     -webkit-animation: fadein 2s; /* Safari and Chrome */
31 |     -o-animation: fadein 2s; /* Opera */
32 |   }
33 |   strong {
34 |     color: #FF8700;
35 |   }
36 |   .logo {
37 |     left: 0;
38 |     margin: 20px;
39 |     position: relative;
40 |   }
41 |   .logo img {
42 |     width: 115px;
43 |   }
44 |   .slinky {
45 |     left: 149px;
46 |     margin: 0;
47 |     position: absolute;
48 |     top: 1px;
49 |   }
50 |   .slinky img {
51 |     width: 150px;
52 |   }
53 |   #trademark {
54 |     color: #FF8700;
55 |     font-size: 20px;
56 |     vertical-align: top;
57 |   }
58 | 
59 |   .hidden {
60 |     display: none;
61 |   }
62 | 
63 |   @keyframes fadein {
64 |     from {
65 |         opacity:0;
66 |     }
67 |     to {
68 |         opacity:1;
69 |     }
70 |   }
71 |   @-moz-keyframes fadein { /* Firefox */
72 |       from {
73 |           opacity:0;
74 |       }
75 |       to {
76 |           opacity:1;
77 |       }
78 |   }
79 |   @-webkit-keyframes fadein { /* Safari and Chrome */
80 |       from {
81 |           opacity:0;
82 |       }
83 |       to {
84 |           opacity:1;
85 |       }
86 |   }
87 |   @-o-keyframes fadein { /* Opera */
88 |       from {
89 |           opacity:0;
90 |       }
91 |       to {
92 |           opacity: 1;
93 |       }
94 |   }
95 | 


--------------------------------------------------------------------------------
/examples/standard/images/an_logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/appnexus/appnexus-html5-lib/652b5e64437c08ece1d84a3b9856b2e1facd93b7/examples/standard/images/an_logo.png


--------------------------------------------------------------------------------
/examples/standard/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head>
 5 |     <meta charset="utf-8" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <title>HTML5 Standard: 300x250</title>
 8 |     <link rel="stylesheet" type="text/css" href="css/main.css"/>
 9 |     <!-- Step 1. Add AppNexus' HTML5 javascript library. -->
10 |     <script type="text/javascript" src="https://acdn.adnxs.com/html5-lib/1.4.1/appnexus-html5-lib.min.js"></script>
11 |     
12 |     <!-- End of Step 1. --></head>
13 | 
14 | <body>
15 |     <!-- Step 2. Add id="clickthrough" to the main container of the ad. Adding this to the body will also work. -->
16 |     <div class="container" id="clickthrough">
17 |     <!-- End of Step 2. -->
18 |     
19 |     
20 |         <div class="logo">
21 |             <img src="images/an_logo.png" border="0">
22 |         </div>
23 |         <div class="tagline" id="tagline">
24 |             <span class="text">Powering</span>
25 |             <span class="text">the <strong>advertising</strong></span>
26 |             <span class="text">that powers</span>
27 |             <span class="text">the <strong>Internet</strong><span id="trademark">&trade;</span></span>
28 |         </div>
29 |     </div>
30 | 
31 |     <!-- Step 3. Add ready and click functions inside of a script tag before the close of the body tag. Note that it targets the id set in Step 2 (see getElementById). -->
32 |     <script type="text/javascript">
33 |         APPNEXUS.ready(function () {
34 |           var clickthrough = document.getElementById("clickthrough");
35 | 
36 |           clickthrough.addEventListener("click", function () {
37 |             APPNEXUS.getMacroByName("GDPR_APPLIES");
38 |             APPNEXUS.getMacroByName("GDPR_CONSENT_STRING");
39 |             APPNEXUS.click();
40 |           });
41 |         });
42 |     </script>
43 | </body>
44 | 
45 | </html>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "appnexus-html5-lib",
 3 |   "description": "AppNexus HTML5 Client Library",
 4 |   "version": "1.4.1",
 5 |   "main": "src/client.js",
 6 |   "author": {
 7 |     "name": "AppNexus",
 8 |     "url": "http://www.appnexus.com"
 9 |   },
10 |   "license": "Apache-2.0",
11 |   "scripts": {
12 |     "build": "grunt build",
13 |     "watch": "grunt watch",
14 |     "test": "grunt build && mocha --reporter spec",
15 |     "preversion": "npm run test && git add dist && git checkout dist/",
16 |     "postversion": "npm run build && git add dist/ && git commit --amend --no-edit && git push origin master && git push --tags || true"
17 |   },
18 |   "devDependencies": {
19 |     "callsite": "^1.0.0",
20 |     "chai": "^4.1.2",
21 |     "grunt": "^0.4.5",
22 |     "grunt-browserify": "^4.0.1",
23 |     "grunt-cli": "^0.1.13",
24 |     "grunt-contrib-clean": "^0.7.0",
25 |     "grunt-contrib-uglify": "^0.11.0",
26 |     "grunt-contrib-watch": "^0.6.1",
27 |     "jsdom": "^7.2.2",
28 |     "mocha": "*",
29 |     "sinon": "^5.0.7"
30 |   }
31 | }
32 | 


--------------------------------------------------------------------------------
/src/client.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | var Porthole = require('./lib/porthole');
  4 | var EventListener = require('./lib/event-listener');
  5 | 
  6 | function AppNexusHTML5Lib ()  {
  7 |   var self = this;
  8 |   this.debug = false;
  9 |   this.inFrame = false;
 10 |   this.EventListener = EventListener;
 11 | 
 12 |   var isClient = false;
 13 |   var readyCalled = false;
 14 |   var isPageLoaded = false;
 15 |   var expandProperties = {}
 16 |   var dispatcher = new EventListener();
 17 |   var clientPorthole;
 18 |   var adData = {};
 19 |   var clickTag = '';
 20 | 
 21 |   try {
 22 |     this.inFrame = (window.self !== window.top);
 23 |   } catch (e) {
 24 |     this.inFrame = true;
 25 |   }
 26 | 
 27 |   dispatcher.addEventListener('ready', function () {
 28 |     if (readyCalled) {
 29 |       if (self.debug) console.info('Client initialized!');
 30 |     }
 31 |   });
 32 | 
 33 |   /**
 34 |    * Setup porthole so we can talk to our parent and listen to messages from it
 35 |    */
 36 |   var initPorthole = function(){
 37 |     clientPorthole = new Porthole.WindowProxy();
 38 |     clientPorthole.addEventListener(handleMessages);
 39 |     clientPorthole.post({ action: 'ready'}); //notify parent we are ready
 40 |   };
 41 | 
 42 |   var checkReady = function (f){ /in/.test(document.readyState) ? setTimeout(function () { checkReady(f); } , 9) : f(); }
 43 |   checkReady(function (){
 44 |     isPageLoaded = true;
 45 |     if (!!Object.keys(adData).length) {
 46 |       dispatcher.dispatchEvent('ready');
 47 |     }
 48 |   });
 49 | 
 50 |   var openUrl = function(url){
 51 |     window.open(url, "_blank");
 52 |   };
 53 | 
 54 |   /**
 55 |    * Listen to messages that come from the parent window
 56 |    * @param messageEvent
 57 |    */
 58 |   var handleMessages = function(messageEvent){
 59 |     switch(messageEvent.data.action) {
 60 |       case 'setAdData':  //receive data about the ad
 61 |         adData = messageEvent.data.parameters;
 62 |         if (isPageLoaded) {
 63 |           dispatcher.dispatchEvent('ready');
 64 |         }
 65 |         break;
 66 |     }
 67 |   };
 68 | 
 69 |   function getParameterByName(name) {
 70 |     var match = RegExp('[?&]' + name +
 71 |       '=([^&]*)').exec(window.location.search);
 72 |     return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
 73 |   }
 74 | 
 75 |   this.ready = function (callback) {
 76 |     if (typeof callback === 'function') {
 77 |       dispatcher.addEventListener('ready', callback);
 78 |     }
 79 | 
 80 |     if (!readyCalled) {
 81 |       initPorthole();
 82 |       readyCalled = true;
 83 |       clickTag = this.getClickTag();
 84 |       self.debug = !self.inFrame;
 85 |     }
 86 |   }
 87 | 
 88 |   this.getClickTag = function(){
 89 |     return getParameterByName('clickTag');
 90 |   };
 91 | 
 92 |   this.click = function () {
 93 |     clickTag = this.getClickTag();
 94 |     if (!clickTag) console.log('No clickTag defined: click event will open a blank page');
 95 |     openUrl(clickTag);
 96 |     if (self.debug) console.info('Client send action: click');
 97 |   }
 98 | 
 99 |   this.setExpandProperties = function (props) {
100 |     if (!readyCalled || !clientPorthole) throw new Error('APPNEXUS library has not been initialized. APPNEXUS.ready() must be called first');
101 |     expandProperties = props;
102 |     clientPorthole.post({ action: 'set-expand-properties', properties: props });
103 |     if (self.debug) console.info('Client send action: set-expand-properties');
104 |   }
105 | 
106 |   this.getExpandProperties = function () {
107 |     return expandProperties;
108 |   }
109 | 
110 |   this.expand = function () {
111 |     if (!readyCalled || !clientPorthole) throw new Error('APPNEXUS library has not been initialized. APPNEXUS.ready() must be called first');
112 |     clientPorthole.post({ action: 'expand' });
113 |     if (self.debug) console.info('Client send action: expand');
114 |   }
115 | 
116 |   this.collapse = function () {
117 |     if (!readyCalled || !clientPorthole) throw new Error('APPNEXUS library has not been initialized. APPNEXUS.ready() must be called first');
118 |     clientPorthole.post({ action: 'collapse' });
119 |     if (self.debug) console.info('Client send action: collapse');
120 |   }
121 | 
122 |   this.getMacroByName = function (macro) {
123 |     if (!readyCalled || !clientPorthole) throw new Error('APPNEXUS library has not been initialized. APPNEXUS.ready() must be called first');
124 |     
125 |     if(adData && adData.macros && adData.macros[macro] !== undefined){
126 |       return adData.macros[macro];
127 |     }
128 |     else {
129 |       return undefined;
130 |     }
131 |   }
132 | }
133 | 
134 | var APPNEXUS = new AppNexusHTML5Lib();
135 | if (typeof window !== 'undefined') {
136 |   window.APPNEXUS = APPNEXUS;
137 | }
138 | 
139 | module.exports = APPNEXUS;


--------------------------------------------------------------------------------
/src/lib/event-listener.js:
--------------------------------------------------------------------------------
 1 | function EventListener() {
 2 |   this.__listeners__ = [];
 3 | }
 4 | 
 5 | EventListener.prototype.addEventListener = function (name, callback) {
 6 |   this.__listeners__.push({callback: callback, name: name});
 7 | }
 8 | 
 9 | EventListener.prototype.removeEventListener = function (name, callback) {
10 |   for (var i = this.__listeners__.length - 1; i >= 0; i--) {
11 |     if (this.__listeners__[i].name === name && this.__listeners__[i].callback === callback) {
12 |       this.__listeners__.splice(i, 1);
13 |     }
14 |   }
15 | }
16 | 
17 | EventListener.prototype.dispatchEvent = function (name) {
18 |   for (var i = this.__listeners__.length - 1; i >= 0; i--) {
19 |     if (this.__listeners__[(this.__listeners__.length - i - 1)].name === name) {
20 |       this.__listeners__[(this.__listeners__.length - i - 1)].callback();
21 |     }
22 |   }
23 | }
24 | 
25 | module.exports = EventListener;


--------------------------------------------------------------------------------
/src/lib/guid.js:
--------------------------------------------------------------------------------
1 | module.exports = function guid() {
2 |   function s4() {
3 |     return Math.floor((1 + Math.random()) * 0x10000)
4 |       .toString(16)
5 |       .substring(1);
6 |   }
7 |   return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
8 | }


--------------------------------------------------------------------------------
/src/lib/porthole.js:
--------------------------------------------------------------------------------
  1 | /*
  2 |     Copyright (c) 2011-2012 Ternary Labs. All Rights Reserved.
  3 | 
  4 |     Permission is hereby granted, free of charge, to any person obtaining a copy
  5 |     of this software and associated documentation files (the "Software"), to deal
  6 |     in the Software without restriction, including without limitation the rights
  7 |     to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  8 |     copies of the Software, and to permit persons to whom the Software is
  9 |     furnished to do so, subject to the following conditions:
 10 | 
 11 |     The above copyright notice and this permission notice shall be included in
 12 |     all copies or substantial portions of the Software.
 13 | 
 14 |     THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 15 |     IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 16 |     FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 17 |     AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 18 |     LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 19 |     OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 20 |     THE SOFTWARE.
 21 | */
 22 | 
 23 | /* Simple JavaScript Inheritance
 24 |  * By John Resig http://ejohn.org/
 25 |  * MIT Licensed.
 26 |  */
 27 | // Inspired by base2 and Prototype
 28 | var initializing = false, fnTest = /xyz/.test(function(){xyz;}) ? /\b_super\b/ : /.*/;
 29 | 
 30 | // The base Class implementation (does nothing)
 31 | var PortholeClass = function(){};
 32 | 
 33 | // Create a new Class that inherits from this class
 34 | PortholeClass.extend = function(prop) {
 35 |     var _super = this.prototype;
 36 | 
 37 |     // Instantiate a base class (but only create the instance,
 38 |     // don't run the init constructor)
 39 |     initializing = true;
 40 |     var prototype = new this();
 41 |     initializing = false;
 42 | 
 43 |     // Copy the properties over onto the new prototype
 44 |     for (var name in prop) {
 45 |         // Check if we're overwriting an existing function
 46 |         prototype[name] = typeof prop[name] == "function" &&
 47 |             typeof _super[name] == "function" && fnTest.test(prop[name]) ?
 48 |             (function(name, fn){
 49 |                 return function() {
 50 |                     var tmp = this._super;
 51 | 
 52 |                     // Add a new ._super() method that is the same method
 53 |                     // but on the super-class
 54 |                     this._super = _super[name];
 55 | 
 56 |                     // The method only need to be bound temporarily, so we
 57 |                     // remove it when we're done executing
 58 |                     var ret = fn.apply(this, arguments);
 59 |                     this._super = tmp;
 60 | 
 61 |                     return ret;
 62 |                 };
 63 |             })(name, prop[name]) :
 64 |             prop[name];
 65 |     }
 66 | 
 67 |     // The dummy class constructor
 68 |     function Class() {
 69 |         // All construction is actually done in the init method
 70 |         if ( !initializing && this.init )
 71 |             this.init.apply(this, arguments);
 72 |     }
 73 | 
 74 |     // Populate our constructed prototype object
 75 |     Class.prototype = prototype;
 76 | 
 77 |     // Enforce the constructor to be what we expect
 78 |     Class.prototype.constructor = Class;
 79 | 
 80 |     // And make this class extendable
 81 |     Class.extend = arguments.callee;
 82 | 
 83 |     return Class;
 84 | };
 85 | 
 86 | /**
 87 |  * @overview Porthole, JavaScript Library for Secure Cross Domain iFrame Communication.
 88 |  * @author <a href="mailto:georges@ternarylabs.com">Georges Auberger</a>
 89 |  * @copyright 2011-2012 Ternary Labs, All Rights Reserved.
 90 |  *
 91 |  * Namespace for Porthole
 92 |  * @module Porthole
 93 |  */
 94 | var Porthole = {
 95 |     debug: false,
 96 | 
 97 |     /**
 98 |      * Utility function to trace to console
 99 |      * @private
100 |      */
101 |     trace: function(s) {
102 |         if (this.debug && window.console !== undefined) {
103 |             window.console.log('Porthole: ' + s);
104 |         }
105 |     },
106 | 
107 |     /**
108 |      * Utility function to send errors to console
109 |      * @private
110 |      */
111 |     error: function(s) {
112 |         if (typeof window.console !== undefined && typeof window.console.error === 'function') {
113 |             window.console.error('Porthole: ' + s);
114 |         }
115 |     }
116 | };
117 | 
118 | /**
119 |  * @class
120 |  * @classdesc Proxy window object to post message to target window
121 |  * @param {string} proxyIFrameUrl - Fully qualified url to proxy iframe, or null to create a receiver only window
122 |  * @param {string} targetWindowName - Name of the proxy iframe window
123 |  */
124 | Porthole.WindowProxy = function(){};
125 | 
126 | Porthole.WindowProxy.prototype = {
127 |     /**
128 |      * Post a message to the target window only if the content comes from the target origin.
129 |      * <code>targetOrigin</code> can be a url or *
130 |      * @public
131 |      * @param {Object} data - Payload
132 |      * @param {String} targetOrigin
133 |      */
134 |     post: function(data, targetOrigin) {},
135 |     /**
136 |      * Add an event listener to receive messages.
137 |      * @public
138 |      * @param {Function} eventListenerCallback
139 |      * @returns {Function} eventListenerCallback
140 |      */
141 |     addEventListener: function(f) {},
142 |     /**
143 |      * Remove an event listener.
144 |      * @public
145 |      * @param {Function} eventListenerCallback
146 |      */
147 |     removeEventListener: function(f) {}
148 | };
149 | 
150 | Porthole.WindowProxyBase = PortholeClass.extend({
151 |     init: function(targetWindowName) {
152 |         if (targetWindowName === undefined) {
153 |             targetWindowName = '';
154 |         }
155 |         this.targetWindowName = targetWindowName;
156 |         this.origin = window.location.protocol + '//' + window.location.host;
157 |         this.eventListeners = [];
158 |     },
159 | 
160 |     getTargetWindowName: function() {
161 |         return this.targetWindowName;
162 |     },
163 | 
164 |     getOrigin: function() {
165 |         return this.origin;
166 |     },
167 | 
168 |     /**
169 |      * Lookup window object based on target window name
170 |      * @private
171 |      * @return {string} targetWindow
172 |      */
173 |     getTargetWindow: function() {
174 |         return Porthole.WindowProxy.getTargetWindow(this.targetWindowName);
175 |     },
176 | 
177 |     post: function(data, targetOrigin) {
178 |         if (targetOrigin === undefined) {
179 |             targetOrigin = '*';
180 |         }
181 |         this.dispatchMessage({
182 |             'data' : data,
183 |             'sourceOrigin' : this.getOrigin(),
184 |             'targetOrigin' : targetOrigin,
185 |             'sourceWindowName' : window.name,
186 |             'targetWindowName' : this.getTargetWindowName()
187 |         });
188 |     },
189 | 
190 |     addEventListener: function(f) {
191 |         this.eventListeners.push(f);
192 |         return f;
193 |     },
194 | 
195 |     removeEventListener: function(f) {
196 |         var index;
197 |         try {
198 |             index = this.eventListeners.indexOf(f);
199 |             this.eventListeners.splice(index, 1);
200 |         } catch(e) {
201 |             this.eventListeners = [];
202 |         }
203 |     },
204 | 
205 |     dispatchEvent: function(event) {
206 |         var i;
207 |         for (i = 0; i < this.eventListeners.length; i++) {
208 |             try {
209 |                 this.eventListeners[i](event);
210 |             } catch(e) {
211 |                 Porthole.error(e);
212 |             }
213 |         }
214 |     }
215 | });
216 | 
217 | /**
218 |  * Legacy browser implementation of proxy window object to post message to target window
219 |  *
220 |  * @private
221 |  * @constructor
222 |  * @param {string} proxyIFrameUrl - Fully qualified url to proxy iframe
223 |  * @param {string} targetWindowName - Name of the proxy iframe window
224 |  */
225 | Porthole.WindowProxyLegacy = Porthole.WindowProxyBase.extend({
226 |     init: function(proxyIFrameUrl, targetWindowName) {
227 |         this._super(targetWindowName);
228 | 
229 |         if (proxyIFrameUrl !== null) {
230 |             this.proxyIFrameName = this.targetWindowName + 'ProxyIFrame';
231 |             this.proxyIFrameLocation = proxyIFrameUrl;
232 | 
233 |             // Create the proxy iFrame and add to dom
234 |             this.proxyIFrameElement = this.createIFrameProxy();
235 |         } else {
236 |             // Won't be able to send messages
237 |             this.proxyIFrameElement = null;
238 |             Porthole.trace("proxyIFrameUrl is null, window will be a receiver only");
239 |             this.post = function(){ throw new Error("Receiver only window");};
240 |         }
241 |     },
242 | 
243 |     /**
244 |      * Create an iframe and load the proxy
245 |      *
246 |      * @private
247 |      * @returns iframe
248 |      */
249 |     createIFrameProxy: function() {
250 |         var iframe = document.createElement('iframe');
251 | 
252 |         iframe.setAttribute('id', this.proxyIFrameName);
253 |         iframe.setAttribute('name', this.proxyIFrameName);
254 |         iframe.setAttribute('src', this.proxyIFrameLocation);
255 |         // IE needs this otherwise resize event is not fired
256 |         iframe.setAttribute('frameBorder', '1');
257 |         iframe.setAttribute('scrolling', 'auto');
258 |         // Need a certain size otherwise IE7 does not fire resize event
259 |         iframe.setAttribute('width', 30);
260 |         iframe.setAttribute('height', 30);
261 |         iframe.setAttribute('style', 'position: absolute; left: -100px; top:0px;');
262 |         // IE needs this because setting style attribute is broken. No really.
263 |         if (iframe.style.setAttribute) {
264 |             iframe.style.setAttribute('cssText', 'position: absolute; left: -100px; top:0px;');
265 |         }
266 |         document.body.appendChild(iframe);
267 |         return iframe;
268 |     },
269 | 
270 |     dispatchMessage: function(message) {
271 |         var encode = window.encodeURIComponent;
272 | 
273 |         if (this.proxyIFrameElement) {
274 |             var src = this.proxyIFrameLocation + '#' + encode(Porthole.WindowProxy.serialize(message));
275 |             this.proxyIFrameElement.setAttribute('src', src);
276 |             this.proxyIFrameElement.height = this.proxyIFrameElement.height > 50 ? 50 : 100;
277 |         }
278 |     }
279 | });
280 | 
281 | /**
282 |  * Implementation for modern browsers that supports it
283 |  */
284 | Porthole.WindowProxyHTML5 = Porthole.WindowProxyBase.extend({
285 |     init: function(proxyIFrameUrl, targetWindowName) {
286 |         this._super(targetWindowName);
287 |         this.eventListenerCallback = null;
288 |     },
289 | 
290 |     dispatchMessage: function(message) {
291 |         this.getTargetWindow().postMessage(Porthole.WindowProxy.serialize(message), message.targetOrigin);
292 |     },
293 | 
294 |     addEventListener: function(f) {
295 |         if (this.eventListeners.length === 0) {
296 |             var self = this;
297 |             if (window.addEventListener) {
298 |                 this.eventListenerCallback = function(event) { self.eventListener(self, event); };
299 |                 window.addEventListener('message', this.eventListenerCallback, false);
300 |             } else if (window.attachEvent) {
301 |                 // Make IE8 happy, just not that 1. postMessage only works for IFRAMES/FRAMES http://blogs.msdn.com/b/ieinternals/archive/2009/09/16/bugs-in-ie8-support-for-html5-postmessage-sessionstorage-and-localstorage.aspx
302 |                 this.eventListenerCallback = function(event) { self.eventListener(self, window.event); };
303 |                 window.attachEvent("onmessage", this.eventListenerCallback);
304 |             }
305 |         }
306 |         return this._super(f);
307 |     },
308 | 
309 |     removeEventListener: function(f) {
310 |         this._super(f);
311 | 
312 |         if (this.eventListeners.length === 0) {
313 |             if (window.removeEventListener) {
314 |                 window.removeEventListener('message', this.eventListenerCallback);
315 |             } else if (window.detachEvent) { // Make IE8, happy, see above
316 |                 // see jquery, detachEvent needed property on element, by name of that event, to properly expose it to GC
317 |                 if (typeof window.onmessage === 'undefined') window.onmessage = null;
318 |                 window.detachEvent('onmessage', this.eventListenerCallback);
319 |             }
320 |             this.eventListenerCallback = null;
321 |         }
322 |     },
323 | 
324 |     eventListener: function(self, nativeEvent) {
325 |         var data = Porthole.WindowProxy.unserialize(nativeEvent.data);
326 |         if (data && (self.targetWindowName === '' || data.sourceWindowName == self.targetWindowName)) {
327 |             self.dispatchEvent(new Porthole.MessageEvent(data.data, nativeEvent.origin, self));
328 |         }
329 |     }
330 | });
331 | 
332 | if (!window.postMessage) {
333 |     Porthole.trace('Using legacy browser support');
334 |     Porthole.WindowProxy = Porthole.WindowProxyLegacy.extend({});
335 | } else {
336 |     Porthole.trace('Using built-in browser support');
337 |     Porthole.WindowProxy = Porthole.WindowProxyHTML5.extend({});
338 | }
339 | 
340 | /**
341 |  * Serialize an object using JSON.stringify
342 |  *
343 |  * @param {Object} obj The object to be serialized
344 |  * @return {String}
345 |  */
346 | Porthole.WindowProxy.serialize = function(obj) {
347 |     if (typeof JSON === 'undefined') {
348 |         throw new Error('Porthole serialization depends on JSON!');
349 |     }
350 | 
351 |     return JSON.stringify(obj);
352 | };
353 | 
354 | /**
355 |  * Unserialize using JSON.parse
356 |  *
357 |  * @param {String} text Serialization
358 |  * @return {Object}
359 |  */
360 | Porthole.WindowProxy.unserialize =  function(text) {
361 |     if (typeof JSON === 'undefined') {
362 |         throw new Error('Porthole unserialization dependens on JSON!');
363 |     }
364 |     try {
365 |         var json = JSON.parse(text);
366 |     } catch (e) {
367 |         return false;
368 |     }
369 |     return json;
370 | };
371 | 
372 | Porthole.WindowProxy.getTargetWindow = function(targetWindowName) {
373 |     if (targetWindowName === '') {
374 |         return window.parent;
375 |     } else if (targetWindowName === 'top' || targetWindowName === 'parent') {
376 |         return window[targetWindowName];
377 |     }
378 |     return window.frames[targetWindowName];
379 | };
380 | 
381 | /**
382 |  * @classdesc Event object to be passed to registered event handlers
383 |  * @class
384 |  * @param {String} data
385 |  * @param {String} origin - url of window sending the message
386 |  * @param {Object} source - window object sending the message
387 |  */
388 | Porthole.MessageEvent = function MessageEvent(data, origin, source) {
389 |     this.data = data;
390 |     this.origin = origin;
391 |     this.source = source;
392 | };
393 | 
394 | /**
395 |  * @classdesc Dispatcher object to relay messages.
396 |  * @public
397 |  * @constructor
398 |  */
399 | Porthole.WindowProxyDispatcher = {
400 |     /**
401 |      * Forward a message event to the target window
402 |      * @private
403 |      */
404 |     forwardMessageEvent: function(e) {
405 |         var message,
406 |             decode = window.decodeURIComponent,
407 |             targetWindow,
408 |             windowProxy;
409 | 
410 |         if (document.location.hash.length > 0) {
411 |             // Eat the hash character
412 |             message = Porthole.WindowProxy.unserialize(decode(document.location.hash.substr(1)));
413 | 
414 |             targetWindow = Porthole.WindowProxy.getTargetWindow(message.targetWindowName);
415 | 
416 |             windowProxy =
417 |                 Porthole.WindowProxyDispatcher.findWindowProxyObjectInWindow(
418 |                     targetWindow,
419 |                     message.sourceWindowName
420 |                 );
421 | 
422 |             if (windowProxy) {
423 |                 if (windowProxy.origin === message.targetOrigin || message.targetOrigin === '*') {
424 |                     windowProxy.dispatchEvent(
425 |                         new Porthole.MessageEvent(message.data, message.sourceOrigin, windowProxy));
426 |                 } else {
427 |                     Porthole.error('Target origin ' +
428 |                         windowProxy.origin +
429 |                         ' does not match desired target of ' +
430 |                         message.targetOrigin);
431 |                 }
432 |             } else {
433 |                 Porthole.error('Could not find window proxy object on the target window');
434 |             }
435 |         }
436 |     },
437 | 
438 |     /**
439 |      * Look for a window proxy object in the target window
440 |      * @private
441 |      */
442 |     findWindowProxyObjectInWindow: function(w, sourceWindowName) {
443 |         var i;
444 | 
445 |         if (w) {
446 |             for (i in w) {
447 |                 if (Object.prototype.hasOwnProperty.call(w, i)) {
448 |                     try {
449 |                         // Ensure that we're finding the proxy object
450 |                         // that is declared to be targetting the window that is calling us
451 |                         if (w[i] !== null &&
452 |                             typeof w[i] === 'object' &&
453 |                             w[i] instanceof w.Porthole.WindowProxy &&
454 |                             w[i].getTargetWindowName() === sourceWindowName) {
455 |                             return w[i];
456 |                         }
457 |                     } catch(e) {
458 |                         // Swallow exception in case we access an object we shouldn't
459 |                     }
460 |                 }
461 |             }
462 |         }
463 |         return null;
464 |     },
465 | 
466 |     /**
467 |      * Start a proxy to relay messages.
468 |      * @public
469 |      */
470 |     start: function() {
471 |         if (window.addEventListener) {
472 |             window.addEventListener('resize',
473 |                 Porthole.WindowProxyDispatcher.forwardMessageEvent,
474 |                 false);
475 |         } else if (window.attachEvent && window.postMessage !== 'undefined') {
476 |             window.attachEvent('onresize',
477 |                 Porthole.WindowProxyDispatcher.forwardMessageEvent);
478 |         } else if (document.body.attachEvent) {
479 |             window.attachEvent('onresize',
480 |                 Porthole.WindowProxyDispatcher.forwardMessageEvent);
481 |         } else {
482 |             // Should never happen
483 |             Porthole.error('Cannot attach resize event');
484 |         }
485 |     }
486 | };
487 | 
488 | module.exports = Porthole;
489 | 


--------------------------------------------------------------------------------
/src/lib/utils.js:
--------------------------------------------------------------------------------
 1 | var utils = {
 2 |   sprintf: function (format) {
 3 |     var args = arguments;
 4 |     var index = 0;
 5 |     return format.replace(/%s/g, function (dummy, match) {
 6 |       return args[++index];
 7 |     });
 8 |   },
 9 |   //http://youmightnotneedjquery.com/#deep_extend
10 |   deepExtend: function(out) {
11 |     out = out || {};
12 | 
13 |     for (var i = 1; i < arguments.length; i++) {
14 |       var obj = arguments[i];
15 |       if (!obj) continue;
16 |       for (var key in obj) {
17 |         if (obj.hasOwnProperty(key)) {
18 |           if (typeof obj[key] === 'object')
19 |             out[key] = utils.deepExtend(out[key], obj[key]);
20 |           else
21 |             out[key] = obj[key];
22 |         }
23 |       }
24 |     }
25 | 
26 |     return out;
27 |   }
28 | }
29 | 
30 | module.exports = utils;


--------------------------------------------------------------------------------
/test/client-ready-test.js:
--------------------------------------------------------------------------------
 1 | var expect = require('chai').expect;
 2 | var jsdom = require('./helpers/jsdom');
 3 | var fixtures = require('./helpers/fixtures');
 4 | var Porthole;
 5 | var windowProxy;
 6 | var windowObject;
 7 | 
 8 | var adData = {
 9 | 	macros: {
10 | 		'macro_1': 'lorem',
11 | 		'macro_2': 'ipsum',
12 | 	}
13 | };
14 | 
15 | describe('client events', function () {
16 | 	beforeEach(function (done) {
17 | 		jsdom.createPage(fixtures.HTML5_ADVERTISEMENT_URL, fixtures.HTML5_ADVERTISEMENT, [fixtures.LIB_SOURCE_CLIENT], function (window) {
18 | 			windowObject = window;
19 | 			global.window = window
20 | 			Porthole = require('../src/lib/porthole');;
21 | 
22 | 			windowProxy = new Porthole.WindowProxy('http://localhost/');
23 | 			done();
24 | 		});
25 | 	});
26 | 
27 | 	it('shouldnt trigger APPNEXUS.ready until a message from the porthole happens', function (done) {
28 | 		windowObject.APPNEXUS.ready(function () {
29 | 			done('this should not happen');
30 | 		});
31 | 		done();
32 | 	});
33 | 
34 | 	it('should trigger appnexus ready since a post happend from the porthole with action setAdData and adData object info', function (done) {
35 | 		windowProxy.post({ action: 'setAdData', parameters: adData });
36 | 
37 | 		windowObject.APPNEXUS.ready(function () {
38 | 			done();
39 | 		});
40 | 	});
41 | 
42 | 	it('macros should be available right after appnexus.ready is called', function (done) {
43 | 		windowProxy.post({ action: 'setAdData', parameters: adData });
44 | 
45 | 		windowObject.APPNEXUS.ready(function () {
46 | 			expect(windowObject.APPNEXUS.getMacroByName('macro_1')).to.equal('lorem')
47 | 			expect(windowObject.APPNEXUS.getMacroByName('macro_2')).to.equal('ipsum')
48 | 			expect(windowObject.APPNEXUS.getMacroByName('macro_undefined')).to.equal(undefined)
49 | 			done();
50 | 		});
51 | 	});
52 | });


--------------------------------------------------------------------------------
/test/client-test.js:
--------------------------------------------------------------------------------
  1 | var expect = require('chai').expect;
  2 | var jsdom = require('./helpers/jsdom');
  3 | var sinon = require('sinon');
  4 | var fixtures = require('./helpers/fixtures');
  5 | var Porthole;
  6 | 
  7 | var windowObject;
  8 | 
  9 | describe('appnexus-html5-lib client', function () {
 10 |   beforeEach(function (done) {
 11 |     jsdom.createPage(fixtures.HTML5_ADVERTISEMENT_URL, fixtures.HTML5_ADVERTISEMENT, [fixtures.LIB_SOURCE_CLIENT], function (window) {
 12 |       windowObject = window;
 13 |       global.window = window
 14 |       window = window || {};
 15 | 
 16 |       global.document = window.document;
 17 |       Porthole = require('../src/lib/porthole');;
 18 |       var windowProxy = new Porthole.WindowProxy('http://localhost');
 19 | 
 20 |       var adData = {
 21 |         macros: {
 22 |           'macro_1': 'lorem',
 23 |           'macro_2': 'ipsum',
 24 |         }
 25 |       }
 26 |       windowProxy.post({ action: 'setAdData', parameters: adData });
 27 | 
 28 |       done();
 29 |     });
 30 |   });
 31 | 
 32 |   it('triggered APPNEXUS.ready', function (done) {
 33 |     windowObject.APPNEXUS.ready(function () {
 34 |       done();
 35 |     });
 36 |   });
 37 | 
 38 |   it('gets correct clickTag from URL', function (done) {
 39 |     windowObject.APPNEXUS.ready(function () {
 40 |       expect(windowObject.APPNEXUS.getClickTag()).to.equal(fixtures.HTML5_CLICK_URL);
 41 |       done();
 42 |     });
 43 |   });
 44 | 
 45 |   it('check APPNEXUS.click() opens new window', function (done) {
 46 |     var spy = sinon.spy(windowObject, 'open');
 47 | 
 48 |     windowObject.APPNEXUS.ready(function () {
 49 |       windowObject.APPNEXUS.click();
 50 |       expect(spy.calledOnce).to.equal(true);
 51 |       done();
 52 |     });
 53 |   });
 54 | 
 55 |   it('check APPNEXUS.setExpandProperties() sends postMessage to host', function (done) {
 56 |     var spy = sinon.spy(windowObject, 'postMessage');
 57 | 
 58 |     windowObject.APPNEXUS.ready(function () {
 59 |       windowObject.APPNEXUS.setExpandProperties({
 60 |         width: 600,
 61 |         height: 800
 62 |       });
 63 |       expect(spy.withArgs(fixtures.SET_EXPAND_PROPS_MESSAGE).calledOnce).to.equal(true);
 64 |       done();
 65 |     });
 66 |   });
 67 | 
 68 |   it('check APPNEXUS.getExpandProperties() returns the correct properties', function (done) {
 69 |     windowObject.APPNEXUS.ready(function () {
 70 |       windowObject.APPNEXUS.setExpandProperties({
 71 |         width: 600,
 72 |         height: 800
 73 |       });
 74 | 
 75 |       expect(windowObject.APPNEXUS.getExpandProperties()).to.eql({ width: 600, height: 800 });
 76 |       done();
 77 |     });
 78 |   });
 79 | 
 80 |   it('check APPNEXUS.expand() sends postMessage to host', function (done) {
 81 |     var spy = sinon.spy(windowObject, 'postMessage');
 82 | 
 83 |     windowObject.APPNEXUS.ready(function () {
 84 |       windowObject.APPNEXUS.expand();
 85 |       expect(spy.withArgs(fixtures.EXPAND_MESSAGE).calledOnce).to.equal(true);
 86 |       done();
 87 |     });
 88 |   });
 89 | 
 90 |   it('check APPNEXUS.collapse() sends postMessage to host', function (done) {
 91 |     var spy = sinon.spy(windowObject, 'postMessage');
 92 | 
 93 |     windowObject.APPNEXUS.ready(function () {
 94 |       windowObject.APPNEXUS.collapse();
 95 |       expect(spy.withArgs(fixtures.COLLAPSE_MESSAGE).calledOnce).to.equal(true);
 96 |       done();
 97 |     });
 98 |   });
 99 | 
100 |   it('should return undefined for a non existing macro', function (done) {
101 |     windowObject.APPNEXUS.ready(function () {
102 |       expect(windowObject.APPNEXUS.getMacroByName("non_existing_macro")).to.equal(undefined)
103 |       done();
104 |     })
105 |   })
106 | 
107 |   it('should call getMacroByName once when attempting to require a macro value', function (done) {
108 |     var macro = 'blah';
109 |     var spy = sinon.spy();
110 |     sinon.replace(windowObject.APPNEXUS, 'getMacroByName', spy);
111 | 
112 |     windowObject.APPNEXUS.ready(function () {
113 |       windowObject.APPNEXUS.getMacroByName(macro);
114 |       expect(spy.withArgs(macro).calledOnce).to.equal(true);
115 |       expect(spy.calledOnce).to.be.true;
116 |       sinon.restore();
117 |       done();
118 |     });
119 |   });
120 | });


--------------------------------------------------------------------------------
/test/helpers/fixtures.js:
--------------------------------------------------------------------------------
 1 | var fs = require('fs');
 2 | var path = require('path');
 3 | var libSourceClient = fs.readFileSync(path.resolve(__dirname, '../../dist/appnexus-html5-lib.js'), 'utf-8');
 4 | 
 5 | if (!libSourceClient) throw new Error('Unable to load "' + path.resolve(__dirname, '../../dist/appnexus-html5-lib.js') + '"')
 6 | 
 7 | var clickUrl = 'http://www.example.com';
 8 | 
 9 | 
10 | module.exports = {
11 |   HTML5_WEBPAGE: '<html><head></head><body></body>',
12 |   HTML5_ADVERTISEMENT: '<html><head></head><body></body>',
13 |   HTML5_CLICK_URL: clickUrl,
14 |   HTML5_ADVERTISEMENT_URL: 'http://vcdn.adnxs.com/p/creative-html/fe/c6/98/2e/fec6982e-d54b-4f89-91bb-08a9e5299abb?clickTag=' + encodeURIComponent(clickUrl),
15 |   LIB_SOURCE_CLIENT: libSourceClient,
16 |   EXPANDING_PROPERTIES_JSON: '{"data":{"action":"set-expand-properties","properties":{"width":600,"height":500,"floating":true,"interstitial":true,"expand":{"easing":"lineas","duration":500},"collapse":{"easing":"ease-in-out","duration":1000}}},"sourceOrigin":"http://vcdn.adnxs.com","targetOrigin":"*","sourceWindowName":"an-1623518d-9ead-92c5-1a4d-83770e5e048f","targetWindowName":""}',
17 |   CLICK_MESSAGE: '{"data":{"action":"click"},"sourceOrigin":"http://vcdn.adnxs.com","targetOrigin":"*","sourceWindowName":"nodejs","targetWindowName":""}',
18 |   SET_EXPAND_PROPS_MESSAGE: '{"data":{"action":"set-expand-properties","properties":{"width":600,"height":800}},"sourceOrigin":"http://vcdn.adnxs.com","targetOrigin":"*","sourceWindowName":"nodejs","targetWindowName":""}',
19 |   EXPAND_MESSAGE: '{"data":{"action":"expand"},"sourceOrigin":"http://vcdn.adnxs.com","targetOrigin":"*","sourceWindowName":"nodejs","targetWindowName":""}',
20 |   COLLAPSE_MESSAGE: '{"data":{"action":"collapse"},"sourceOrigin":"http://vcdn.adnxs.com","targetOrigin":"*","sourceWindowName":"nodejs","targetWindowName":""}'
21 | };


--------------------------------------------------------------------------------
/test/helpers/jsdom.js:
--------------------------------------------------------------------------------
 1 | var jsdom = require('jsdom');
 2 | 
 3 | jsdom.createPage = function  (url, html, scriptSources, callback) {
 4 |   if (typeof scriptSources === 'function' && callback === undefined) {
 5 |     callback = scriptSources
 6 |     scriptSources = undefined;
 7 |   }
 8 |   jsdom.env({
 9 |     url: url,
10 |     html: html,
11 |     virtualConsole: jsdom.createVirtualConsole().sendTo(console),
12 |     src: scriptSources,
13 |     done: function (err, window) {
14 |       if (err) throw err;
15 |       window.open = function () { };
16 |       callback(window);
17 |     }
18 |   });
19 | }
20 | 
21 | jsdom.injectScript = function (document, scriptSource, callback) {
22 |   var script = document.createElement('script');
23 |   script.onload = function () {
24 |     callback();
25 |   }
26 |   script.text = scriptSource;
27 |   document.body.appendChild(script);
28 | }
29 | 
30 | module.exports = jsdom;
31 | 


--------------------------------------------------------------------------------
/test/lib-event-listener-test.js:
--------------------------------------------------------------------------------
 1 | var expect = require('chai').expect;
 2 | var EventListener = require('../src/lib/event-listener');
 3 | 
 4 | describe('EventListener', function () {
 5 |   var el;
 6 | 
 7 |   beforeEach(function () {
 8 |     el = new EventListener();
 9 |   })
10 | 
11 |   it('creates an EventListener type object', function () {
12 |       expect(el).to.be.an.instanceOf(EventListener);
13 |   });
14 | 
15 |   it('can add event listenings', function () {
16 |     el.addEventListener('click', function () {});
17 |     el.addEventListener('click2', function () {});
18 | 
19 |     expect(el.__listeners__.length).to.be.equal(2);
20 |     expect(el.__listeners__[0].name).to.be.equal('click');
21 |   });
22 | 
23 |   it('can remove event listenings', function () {
24 |     var callback = function(){};
25 |     el.addEventListener('click', callback);
26 |     el.addEventListener('click2', function () {});
27 |     el.removeEventListener('click', callback);
28 | 
29 |     expect(el.__listeners__.length).to.be.equal(1);
30 |     expect(el.__listeners__[0].name).to.be.equal('click2');
31 |   });
32 | 
33 |   it('can dispatch events', function (done) {
34 |     el.addEventListener('click', function () {
35 |       done();
36 |     });
37 |     el.dispatchEvent('click');
38 |   });
39 | });
40 | 


--------------------------------------------------------------------------------
/test/lib-guid-test.js:
--------------------------------------------------------------------------------
 1 | var expect = require('chai').expect;
 2 | var guid = require('../src/lib/guid');
 3 | 
 4 | describe('Generate unique ID', function () {
 5 |     it('checks it is a function', function () {
 6 |         expect(guid).to.be.a('function');
 7 |     });
 8 | 
 9 |     it('checks it generates a string', function () {
10 |     	var result = guid();
11 |     	expect(result).to.be.a('string');
12 |     });
13 | 
14 |     it('checks if it generates different id', function () {
15 |     	var result1 = guid();
16 |     	var result2 = guid();
17 |     	var result3 = guid();
18 | 
19 |     	expect(result1).to.not.equal(result2);
20 |     	expect(result2).to.not.equal(result3);
21 |     	expect(result1).to.not.equal(result3);
22 |     });
23 | });
24 | 


--------------------------------------------------------------------------------
/test/lib-porthole-test.js:
--------------------------------------------------------------------------------
 1 | var expect = require('chai').expect;
 2 | var jsdom = require('./helpers/jsdom');
 3 | var fixtures = require('./helpers/fixtures')
 4 | 
 5 | describe('Porthole', function () {
 6 |   before(function (done) {
 7 |     jsdom.createPage(fixtures.HTML5_ADVERTISEMENT_URL, fixtures.HTML5_WEBPAGE, function (window) {
 8 |       global.window = window;
 9 |       done();
10 |     });
11 |   })
12 | 
13 |   after(function () {
14 |     global.window = undefined;
15 |   })
16 | 
17 |   it('checks it exits', function () {
18 |     var porthole = require('../src/lib/porthole');
19 |     expect(porthole).to.exist;
20 |   });
21 | });
22 | 


--------------------------------------------------------------------------------
/test/lib-utils-test.js:
--------------------------------------------------------------------------------
 1 | var expect = require('chai').expect;
 2 | var sprintf = require('../src/lib/utils').sprintf;
 3 | var deepExtend = require('../src/lib/utils').deepExtend;
 4 | 
 5 | describe('Util functions', function () {
 6 |     it('checks sprintf works properly', function () {
 7 |         var result = sprintf("There are %s monkeys in %s.", 13, 'Disney');
 8 |         expect(result).to.be.equal("There are 13 monkeys in Disney.");
 9 |     });
10 | 
11 |     it('checks deepExtend works properly', function () {
12 |     	var result = deepExtend({}, {'age': 3}, {'gender': 'male', 'father': {'age': 30, 'gender': 'male'}});
13 |         expect(result).to.deep.equal({ age: 3, gender: 'male', father: { age: 30, gender: 'male' } })
14 |     });
15 | });
16 | 


--------------------------------------------------------------------------------