Initial commit

.babelrc

@@ -0,0 +1,13 @@
+{
+  "presets": ["es2015-without-strict", "stage-0", "react"],
+  "plugins": [
+    "transform-decorators-legacy"
+  ],
+  "env": {
+    "examples": {
+      "plugins": [
+        ["babel-plugin-webpack-alias", {"config": "./examples/webpack.config.server.js"}]
+      ]
+    }
+  }
+}

.editorconfig

@@ -0,0 +1,10 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 4
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

.eslintignore

@@ -0,0 +1 @@
+/scripts

.eslintrc

@@ -0,0 +1,19 @@
+{
+    "extends": [
+        "eslint-config-nfl/base",
+        "eslint-config-nfl/rules/strict",
+        "eslint-config-nfl/rules/react"
+    ],
+    "plugins": [
+        "import",
+        "react"
+    ],
+    "env": {
+        "browser": true,
+        "mocha": true
+    },
+    "globals": {
+        "expect": true,
+        "sinon": true
+    }
+}

.gitignore

@@ -0,0 +1,6 @@
+node_modules/
+lib/
+dist/
+coverage/
+npm-debug.log
+.DS_Store

CHANGELOG.md

@@ -0,0 +1,5 @@
+## 0.2.1
+
+Features:
+
+  - Initial release

CONTRIBUTING.md

@@ -0,0 +1,43 @@
+# Contributing to this project
+
+Please take a moment to review this document in order to make the contribution
+process easy and effective for everyone involved.
+
+_**Please Note:** These guidelines are adapted from [@necolas](https://github.com/necolas)'s
+[issue-guidelines](https://github.com/necolas/issue-guidelines) and serve as
+an excellent starting point for contributing to any open source project._
+
+<a name="pull-requests"></a>
+## Pull requests
+
+Good pull requests - patches, improvements, new features - are a fantastic
+help. They should remain focused in scope and avoid containing unrelated
+commits.
+
+**Please ask first** before embarking on any significant pull request (e.g.
+implementing features, refactoring code, porting to a different language),
+otherwise you risk spending a lot of time working on something that the
+project's developers might not want to merge into the project.
+
+<a name="development"></a>
+## Development Process
+Here are some guidelines to making changes and preparing your PR:
+
+1. Make your proposed changes to the repository, along with updating/adding test cases.
+2. (Optional) If you prefer to also test your changes in a real application, you can do the following:
+  1. Run `npm link` in `react-gpt` repository.
+  2. `cd` to your favorite React application, run `npm link react-gpt` to point to your local repository.
+  3. Run your application to verify your changes.
+3. Run `npm test` to verify all test cases pass.
+4. Run `npm run lint` to verify there are no linting errors.
+
+<a name="travis-ci-build"></a>
+## Travis CI Build
+Travis CI build will test your PR before it is merged. Browser testing may not run on Travis for PR, so please test your PR with supported browsers locally before submitting PR.
+
+<a name="cla"></a>
+## Contributor License Agreement (CLA)
+
+In order for your pull requests to be accepted, you must accept the [NFL Indivudal Contributor License Agreement](https://cla.nfl.com/agreements/nfl/react-gpt).
+
+Corporate contributors can email [email protected] and request the **Corporate CLA** which can be signed digitally.

README.md

@@ -0,0 +1,129 @@
+<img src="http://static.nfl.com/static/content/public/static/img/logos/nfl-engineering-light.svg" width="300" />
+# React GPT
+
+A [React](https://github.com/facebook/react) component for [Google Publisher Tags](https://developers.google.com/doubleclick-gpt/?hl=en).
+
+## Requirements
+
+ * React 0.14+
+
+## Browser Requirements
+
+ * IE10+
+
+## Features
+
+ * Supports all rendering modes (single request mode, async rendering node and *sync rendering mode)
+ * Supports responsive ads.
+ * Supports interstitial ads.
+ * Supports lazy render.
+
+\* Synchronous rendering requires that the GPT JavaScript be loaded synchronously.
+
+## Installation
+
+```
+$ npm install --save react-gpt
+```
+
+React GPT depends on [Promise](https://promisesaplus.com/) to be available in browser. If your application support the browser which doesn't support Promise, please include the polyfill.
+
+## Getting Started
+
+Import React GPT and pass props to the component.
+
+```js
+import {Bling as GPT} from "react-gpt";
+
+class Application extends React.Component {
+    render() {
+        return (
+            <GPT
+                adUnitPath="/4595/nfl.test.open"
+                slotSize={[728, 90]}
+            />
+        );
+    }
+}
+```
+
+You at least need to pass `adUnitPath` and one of `slotSize` and `sizeMapping`.
+
+#### Enabling Single Request Mode
+
+To enable [Single Request Mode](https://support.google.com/dfp_sb/answer/181071?hl=en), call `Bling.enableSingleRequest()` before rendering any ad.
+It defaults to `Asynchronous Rendering Mode` if not set.
+
+```js
+import {Bling as GPT} from "react-gpt";
+
+GPT.enableSingleRequest();
+
+class Application extends React.Component {
+    render() {
+        return (
+            <div id="ad-1">
+                <GPT
+                    adUnitPath="/4595/nfl.test.open"
+                    slotSize={[728, 90]}
+                />
+            </div>
+            <div id="ad-2">
+                <GPT
+                    adUnitPath="/4595/nfl.test.open"
+                    slotSize={[300, 250]}
+                />
+            </div>
+        );
+    }
+}
+```
+
+The above example will make one request to the server to render both ads which makes it easier to ensure category exclusion.
+
+#### Responsive ad
+
+If you pass `sizeMapping` props instead of `slotSize`, React GPT listens for the viewport width change and refreshes an ad when the break point is hit.
+
+```js
+import {Bling as GPT} from "react-gpt";
+
+class Application extends React.Component {
+    render() {
+        return (
+            <GPT
+                adUnitPath="/4595/nfl.test.open"
+                sizeMapping={[
+                    {viewport: [0, 0], slot: [320, 50]},
+                    {viewport: [750, 0], slot: [728, 90]},
+                    {viewport: [1050, 0], slot: [1024, 120]}
+                ]}
+            />
+        );
+    }
+}
+```
+
+## API and Documentation
+
+* [API](/docs/api/) Review the `React GPT` API
+* [Getting Started](/docs/GettingStarted.md) A more detailed Getting Started Guide
+* [Docs](/docs/) Guides and API.
+
+## To run examples:
+
+1. Clone this repo
+2. Run `npm install`
+3. Run `npm run examples` for client side rendering, `npm start` for server side rendering.
+4. Point your browser to http://localhost:8080
+
+## Contributing to this project
+
+Please take a moment to review the [guidelines for contributing](CONTRIBUTING.md).
+
+* [Pull requests](CONTRIBUTING.md#pull-requests)
+* [Development Process](CONTRIBUTING.md#development)
+
+## License
+
+MIT

docs/GettingStarted.md

@@ -0,0 +1,126 @@
+## Getting Started
+
+The simplest form of React GPT ad looks like the following
+
+```js
+import {Bling as GPT} from "react-gpt";
+
+class Application extends React.Component {
+    render() {
+        return (
+            <GPT
+                adUnitPath="/4595/nfl.test.open"
+                slotSize={[728, 90]}
+            />
+        );
+    }
+}
+```
+
+`adUnitPath` is a required prop and either `slotSize` or `sizeMapping` prop are needed to give the size information.
+
+## Enabling Single Request Mode
+
+To enable [Single Request Mode](https://support.google.com/dfp_sb/answer/181071?hl=en), call `Bling.enableSingleRequest()` before rendering any ad.
+It defaults to `Asynchronous Rendering Mode` if not set.
+
+```js
+import {Bling as GPT} from "react-gpt";
+
+GPT.enableSingleRequest();
+
+class Application extends React.Component {
+    render() {
+        return (
+            <div id="ad-1">
+                <GPT
+                    adUnitPath="/4595/nfl.test.open"
+                    slotSize={[728, 90]}
+                />
+            </div>
+            <div id="ad-2">
+                <GPT
+                    adUnitPath="/4595/nfl.test.open"
+                    slotSize={[300, 250]}
+                />
+            </div>
+        );
+    }
+}
+```
+
+The above example will make one request to the server to render both ads and easier to ensure category exclusion.
+
+## Responsive ad
+
+If you pass `sizeMapping` props instead of `slotSize`, React GPT listens for the viewport width change and refreshes an ad when the break point is hit.
+
+```js
+import {Bling as GPT} from "react-gpt";
+
+class Application extends React.Component {
+    render() {
+        return (
+            <GPT
+                adUnitPath="/4595/nfl.test.open"
+                sizeMapping={[
+                    {viewport: [0, 0], slot: [320, 50]},
+                    {viewport: [750, 0], slot: [728, 90]},
+                    {viewport: [1050, 0], slot: [1024, 120]}
+                ]}
+            />
+        );
+    }
+}
+```
+
+## Lazy render
+
+React GPT by default renders an ad when its bounding box is fully inside the viewport. You can disable this setting and render an ad regardless of the position, pass `renderWhenViewable={false}` as a prop.
+To read more about lazy render, please see the [guide](./Guides.md#viewability).
+
+## Out-of-page ad
+
+You can render out-of-page(prestitial or interstitial) ad by passing `outOfPage={true}` as a prop.
+Out-of-page ad does not require either `slotSize` or `sizeMapping`.
+
+```js
+import {Bling as GPT} from "react-gpt";
+
+class Application extends React.Component {
+    render() {
+        return (
+            <GPT
+                adUnitPath="/4595/nfl.test.open"
+                outOfPage={true}
+            />
+        );
+    }
+}
+```
+
+## Companion ad
+
+Companion ad can be enabled by passing `companionAdService={true}` as a prop. Once enabled and when the video ad plays using [Google IMA](https://developers.google.com/interactive-media-ads/) within the same page, the React GPT ad will render the companion ad.
+
+```js
+import {Bling as GPT} from "react-gpt";
+
+class Application extends React.Component {
+    render() {
+        return (
+            <GPT
+                adUnitPath="/4595/nfl.test.open"
+                slotSize={[728, 90]}
+                companionAdService={true}
+            />
+        );
+    }
+}
+```
+
+## Passback ad
+
+It's not currently supported.
+
+For more use cases, please see [examples](../examples).