diff --git a/.eslintrc.json b/.eslintrc.json
index 2168c69..48df1d3 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -11,7 +11,12 @@
"beforeEach": true,
"afterEach": true
},
- "ecmaFeatures": {
- "experimentalObjectRestSpread": true
+ "parserOptions": {
+ "ecmaFeatures": {
+ "experimentalObjectRestSpread": true
+ }
+ },
+ "rules": {
+ "react/prefer-es6-class": 0
}
}
\ No newline at end of file
diff --git a/Readme.md b/Readme.md
index bf91ace..ca459a5 100644
--- a/Readme.md
+++ b/Readme.md
@@ -1,5 +1,6 @@
# React DFP
-Inspired on jquery.dfp :-)... gpt/dfp components for react.
+Gpt/dfp components that you can easily use in your isomorphic react apps. This package is inspired in the awesome library [jquery.dfp](https://github.com/coop182/jquery.dfp.js), and aims to provide its same ease of usage but, of course, taking into consideration the react concepts & lifecycle features.
+
## Install:
```
diff --git a/grunt/aliases.yaml b/grunt/aliases.yaml
index c3d21cb..49383d5 100644
--- a/grunt/aliases.yaml
+++ b/grunt/aliases.yaml
@@ -2,6 +2,7 @@ default:
- 'dist'
dist:
+ - 'eslint'
- 'clean'
- 'babel:dist'
diff --git a/js/adslot.js b/js/adslot.js
index 0c66628..d453094 100644
--- a/js/adslot.js
+++ b/js/adslot.js
@@ -1,6 +1,6 @@
import React from 'react';
-import {DFPManager} from './manager';
+import { DFPManager } from './manager';
export const AdSlot = React.createClass({
@@ -20,71 +20,65 @@ export const AdSlot = React.createClass({
shouldRefresh: React.PropTypes.func,
slotId: React.PropTypes.string,
},
-
-
+
getDefaultProps() {
return {
fetchNow: false,
};
},
-
+
+ getInitialState() {
+ return { ...this.props, slotId: this.generateSlotId() };
+ },
+
+ componentDidMount() {
+ this.registerSlot();
+ },
+
+ componentWillReceiveProps(nextProps) {
+ if (nextProps.hasOwnProperty('objectId')) {
+ const state = this.state;
+ state.slotId = this.generateSlotId();
+ this.unregisterSlot();
+ this.setState(state);
+ this.registerSlot();
+ }
+ },
+
+ componentWillUnmount() {
+ this.unregisterSlot();
+ },
+
+ getSlotId() {
+ return this.props.slotId || this.state.slotId;
+ },
+
generateSlotId() {
let slotId = this.props.slotId;
if (slotId === undefined) {
- let seconds = (Date.now && Date.now() || new Date().getTime()) / 1000;
+ const seconds = (Date.now && Date.now() || new Date().getTime()) / 1000;
slotId = `adSlot-${seconds}`;
}
- return slotId
- },
-
- getSlotId() {
- return this.props.slotId || this.state.slotId;
+ return slotId;
},
registerSlot() {
- DFPManager.registerSlot({ ...this.props, ...this.state, slotShouldRefresh: this.slotShouldRefresh });
+ DFPManager.registerSlot({ ...this.props, ...this.state,
+ slotShouldRefresh: this.slotShouldRefresh });
if (this.props.fetchNow === true) {
DFPManager.load(this.getSlotId());
}
DFPManager.attachSlotRenderEnded(this.slotRenderEnded);
},
-
+
unregisterSlot() {
DFPManager.unregisterSlot({ ...this.props, ...this.state });
DFPManager.detachSlotRenderEnded(this.slotRenderEnded);
},
- getInitialState() {
- return { ...this.props, slotId: this.generateSlotId() };
- },
-
- componentDidMount() {
- this.registerSlot();
- },
-
- render() {
- return (
-
- );
- },
-
- componentWillUnmount() {
- this.unregisterSlot();
- },
-
- componentWillReceiveProps: function(nextProps) {
- if (nextProps.hasOwnProperty('objectId')) {
- let state = this.state;
- state.slotId = this.generateSlotId();
- this.unregisterSlot();
- this.setState(state);
- this.registerSlot();
- }
- },
-
slotRenderEnded(eventData) {
if (eventData.slotId === this.getSlotId()) {
- if (this.props.onSlotRender !== undefined) {
+ if (this.props.onSlotRender !== undefined) {
this.props.onSlotRender(eventData);
}
}
@@ -93,8 +87,15 @@ export const AdSlot = React.createClass({
slotShouldRefresh() {
let r = true;
if (this.props.shouldRefresh !== undefined) {
- r = this.props.shouldRefresh({...this.props, slotId: this.getSlotId()});
+ r = this.props.shouldRefresh({ ...this.props, slotId: this.getSlotId() });
}
return r;
},
+
+ render() {
+ return (
+
+ );
+ },
+
});
diff --git a/js/manager.js b/js/manager.js
index 81ee6dc..8ebeefe 100644
--- a/js/manager.js
+++ b/js/manager.js
@@ -114,14 +114,15 @@ export const DFPManager = Object.assign(new EventEmitter(), {
const slotsToRefresh = Object.keys(registeredSlots).map(
(k) => registeredSlots[k]
);
- return slotsToRefresh.reduce( (val, slot) => {
+ const slots = {};
+ return slotsToRefresh.reduce((last, slot) => {
if (slot.slotShouldRefresh() === true) {
- val[slot.slotId] = slot;
+ slots[slot.slotId] = slot;
}
- return val;
- }, {});
+ return slots;
+ }, slots);
},
-
+
refresh() {
if (loadAlreadyCalled === false) {
this.load();
@@ -153,11 +154,11 @@ export const DFPManager = Object.assign(new EventEmitter(), {
unregisterSlot({ slotId }) {
delete registeredSlots[slotId];
},
-
+
getRegisteredSlots() {
return registeredSlots;
},
-
+
attachSlotRenderEnded(cb) {
this.on('slotRenderEnded', cb);
},
diff --git a/js/utils.js b/js/utils.js
index afd50c2..f1ff67a 100644
--- a/js/utils.js
+++ b/js/utils.js
@@ -21,17 +21,3 @@ export function loadGPTScript() {
});
}
-let docIsReady = null;
-export function onDocumentReady() {
- if (docIsReady === null) {
- docIsReady = new Promise((resolve) => {
- if (document.readyState !== 'loading') {
- resolve();
- } else {
- document.addEventListener('DOMContentLoaded', () => resolve());
- }
- });
- }
- return docIsReady;
-}
-
diff --git a/lib/adslot.js b/lib/adslot.js
index 62a7c6e..4f596dc 100644
--- a/lib/adslot.js
+++ b/lib/adslot.js
@@ -38,6 +38,27 @@ var AdSlot = exports.AdSlot = _react2.default.createClass({
fetchNow: false
};
},
+ getInitialState: function getInitialState() {
+ return _extends({}, this.props, { slotId: this.generateSlotId() });
+ },
+ componentDidMount: function componentDidMount() {
+ this.registerSlot();
+ },
+ componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
+ if (nextProps.hasOwnProperty('objectId')) {
+ var state = this.state;
+ state.slotId = this.generateSlotId();
+ this.unregisterSlot();
+ this.setState(state);
+ this.registerSlot();
+ }
+ },
+ componentWillUnmount: function componentWillUnmount() {
+ this.unregisterSlot();
+ },
+ getSlotId: function getSlotId() {
+ return this.props.slotId || this.state.slotId;
+ },
generateSlotId: function generateSlotId() {
var slotId = this.props.slotId;
if (slotId === undefined) {
@@ -46,11 +67,9 @@ var AdSlot = exports.AdSlot = _react2.default.createClass({
}
return slotId;
},
- getSlotId: function getSlotId() {
- return this.props.slotId || this.state.slotId;
- },
registerSlot: function registerSlot() {
- _manager.DFPManager.registerSlot(_extends({}, this.props, this.state, { slotShouldRefresh: this.slotShouldRefresh }));
+ _manager.DFPManager.registerSlot(_extends({}, this.props, this.state, {
+ slotShouldRefresh: this.slotShouldRefresh }));
if (this.props.fetchNow === true) {
_manager.DFPManager.load(this.getSlotId());
}
@@ -60,35 +79,6 @@ var AdSlot = exports.AdSlot = _react2.default.createClass({
_manager.DFPManager.unregisterSlot(_extends({}, this.props, this.state));
_manager.DFPManager.detachSlotRenderEnded(this.slotRenderEnded);
},
- getInitialState: function getInitialState() {
- return _extends({}, this.props, { slotId: this.generateSlotId() });
- },
- componentDidMount: function componentDidMount() {
- this.registerSlot();
- },
- render: function render() {
- return _jsx('div', {
- className: 'adunitContainer'
- }, void 0, ' ', _jsx('div', {
- id: this.getSlotId(),
- className: 'adBox'
- }), ' ');
- },
- componentWillUnmount: function componentWillUnmount() {
- this.unregisterSlot();
- },
-
-
- componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
- if (nextProps.hasOwnProperty('objectId')) {
- var state = this.state;
- state.slotId = this.generateSlotId();
- this.unregisterSlot();
- this.setState(state);
- this.registerSlot();
- }
- },
-
slotRenderEnded: function slotRenderEnded(eventData) {
if (eventData.slotId === this.getSlotId()) {
if (this.props.onSlotRender !== undefined) {
@@ -102,5 +92,13 @@ var AdSlot = exports.AdSlot = _react2.default.createClass({
r = this.props.shouldRefresh(_extends({}, this.props, { slotId: this.getSlotId() }));
}
return r;
+ },
+ render: function render() {
+ return _jsx('div', {
+ className: 'adunitContainer'
+ }, void 0, ' ', _jsx('div', {
+ id: this.getSlotId(),
+ className: 'adBox'
+ }), ' ');
}
});
diff --git a/lib/manager.js b/lib/manager.js
index 52b9d29..3e12ac4 100644
--- a/lib/manager.js
+++ b/lib/manager.js
@@ -128,12 +128,13 @@ var DFPManager = exports.DFPManager = Object.assign(new _events.EventEmitter(),
var slotsToRefresh = Object.keys(registeredSlots).map(function (k) {
return registeredSlots[k];
});
- return slotsToRefresh.reduce(function (val, slot) {
+ var slots = {};
+ return slotsToRefresh.reduce(function (last, slot) {
if (slot.slotShouldRefresh() === true) {
- val[slot.slotId] = slot;
+ slots[slot.slotId] = slot;
}
- return val;
- }, {});
+ return slots;
+ }, slots);
},
refresh: function refresh() {
var _this3 = this;
diff --git a/lib/utils.js b/lib/utils.js
index ccc4adc..d543fdd 100644
--- a/lib/utils.js
+++ b/lib/utils.js
@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
value: true
});
exports.loadGPTScript = loadGPTScript;
-exports.onDocumentReady = onDocumentReady;
function doloadGPTScript(resolve, reject) {
window.googletag = window.googletag || {};
window.googletag.cmd = window.googletag.cmd || [];
@@ -27,19 +26,3 @@ function loadGPTScript() {
doloadGPTScript(resolve, reject);
});
}
-
-var docIsReady = null;
-function onDocumentReady() {
- if (docIsReady === null) {
- docIsReady = new Promise(function (resolve) {
- if (document.readyState !== 'loading') {
- resolve();
- } else {
- document.addEventListener('DOMContentLoaded', function () {
- return resolve();
- });
- }
- });
- }
- return docIsReady;
-}
diff --git a/package.json b/package.json
index 4ed9867..a9a44ad 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "react-dfp",
- "version": "0.3.3",
+ "version": "0.3.4",
"author": {
"name": "Jonatan Alexis Anauati",
"email": "barakawins@gmail.com"
@@ -14,6 +14,7 @@
"gpt",
"dfp",
"google dfp",
+ "google doubleclick for publishers",
"advertising",
"react-component"
],
diff --git a/spec/test-manager.js b/spec/test-manager.js
index 62d33d5..4392b60 100644
--- a/spec/test-manager.js
+++ b/spec/test-manager.js
@@ -1,26 +1,26 @@
import { expect } from 'chai';
import { DFPManager } from '../lib';
-describe('DFPManager', function adSlot() {
-
- describe('Targeting arguments', function dfpManagerInteraction() {
+describe('DFPManager', () => {
+ describe('Targeting arguments', () => {
beforeEach(function beforeEach() {
- this.argsList1 = {'k': 'yeah'};
- this.argsList2 = {'k': 'yeah'};
+ this.argsList1 = { k: 'yeah' };
+ this.argsList2 = { k: 'yeah' };
DFPManager.setTargetingArguments(this.argsList1);
DFPManager.setTargetingArguments(this.argsList2);
});
it('Registers global targeting arguments', function registersAdSlot() {
- expect(DFPManager.getTargetingArguments()).to.contain.keys({ ...this.argsList1, ...this.argsList2});
+ expect(DFPManager.getTargetingArguments()).to.contain.keys(
+ { ...this.argsList1, ...this.argsList2 }
+ );
});
-
});
- describe('Creation of ad slots ', function dfpManagerInteraction() {
+ describe('Creation of ad slots ', () => {
beforeEach(function beforeEach() {
this.slotProps = {
- dfpNetworkId: 1000,
+ dfpNetworkId: '1000',
adUnit: 'foo/bar/baz',
slotId: 'testElement',
sizes: [[728, 90]],