add intersection RtdProvider and spec (prebid#7710)

Co-authored-by: atkachov <atkachov@admixer.ua>

modules/intersectionRtdProvider.js

@@ -0,0 +1,114 @@
+import {submodule} from '../src/hook.js';
+import {isFn, logError} from '../src/utils.js';
+import {config} from '../src/config.js';
+import {getGlobal} from '../src/prebidGlobal.js';
+import includes from 'core-js-pure/features/array/includes.js';
+import '../src/adapterManager.js';
+let observerAvailable = true;
+function getIntersectionData(requestBidsObject, onDone, providerConfig, userConsent) {
+ const intersectionMap = {};
+ const placeholdersMap = {};
+ let done = false;
+ if (!observerAvailable) return complete();
+ const observer = new IntersectionObserver(observerCallback, {threshold: 0.5});
+ const adUnitCodes = requestBidsObject.adUnitCodes || [];
+ const auctionDelay = config.getConfig('realTimeData.auctionDelay') || 0;
+ const waitForIt = providerConfig.waitForIt;
+ let adUnits = requestBidsObject.adUnits || getGlobal().adUnits || [];
+ if (adUnitCodes.length) {
+ adUnits = adUnits.filter(unit => includes(adUnitCodes, unit.code));
+ }
+ let checkTimeoutId;
+ findAndObservePlaceholders();
+ if (auctionDelay > 0) {
+ setTimeout(complete, auctionDelay);
+ }
+ function findAndObservePlaceholders() {
+ const observed = adUnits.filter((unit) => {
+ const code = unit.code;
+ if (placeholdersMap[code]) return true;
+ const ph = document.getElementById(code);
+ if (ph) {
+ placeholdersMap[code] = ph;
+ observer.observe(ph);
+ return true;
+ }
+ });
+ if (
+ observed.length === adUnits.length ||
+ !waitForIt ||
+ auctionDelay <= 0
+ ) {
+ return;
+ }
+ checkTimeoutId = setTimeout(findAndObservePlaceholders);
+ }
+ function observerCallback(entries) {
+ let entry = entries.pop();
+ while (entry) {
+ const target = entry.target;
+ const id = target.getAttribute('id');
+ if (id) {
+ const intersection = intersectionMap[id];
+ if (!intersection || intersection.time < entry.time) {
+ intersectionMap[id] = {
+ 'boundingClientRect': cloneRect(entry.boundingClientRect),
+ 'intersectionRect': cloneRect(entry.intersectionRect),
+ 'rootRect': cloneRect(entry.rootRect),
+ 'intersectionRatio': entry.intersectionRatio,
+ 'isIntersecting': entry.isIntersecting,
+ 'time': entry.time
+ };
+ if (adUnits.every(unit => !!intersectionMap[unit.code])) {
+ complete();
+ }
+ }
+ }
+ entry = entries.pop();
+ }
+ }
+ function complete() {
+ if (done) return;
+ if (checkTimeoutId) clearTimeout(checkTimeoutId);
+ done = true;
+ checkTimeoutId = null;
+ observer && observer.disconnect();
+ adUnits && adUnits.forEach((unit) => {
+ const intersection = intersectionMap[unit.code];
+ if (intersection && unit.bids) {
+ unit.bids.forEach(bid => bid.intersection = intersection);
+ }
+ });
+ onDone();
+ }
+}
+function init(moduleConfig) {
+ if (!isFn(window.IntersectionObserver)) {
+ logError('IntersectionObserver is not defined');
+ observerAvailable = false;
+ } else {
+ observerAvailable = true;
+ }
+ return observerAvailable;
+}
+function cloneRect(rect) {
+ return rect ? {
+ 'left': rect.left,
+ 'top': rect.top,
+ 'right': rect.right,
+ 'bottom': rect.bottom,
+ 'width': rect.width,
+ 'height': rect.height,
+ 'x': rect.x,
+ 'y': rect.y,
+ } : rect;
+}
+export const intersectionSubmodule = {
+ name: 'intersection',
+ getBidRequestData: getIntersectionData,
+ init: init,
+};
+function registerSubModule() {
+ submodule('realTimeData', intersectionSubmodule);
+}
+registerSubModule();

test/spec/modules/intersectionRtdProvider_spec.js

@@ -0,0 +1,141 @@
+import {config as _config, config} from 'src/config.js';
+import { expect } from 'chai';
+import events from 'src/events.js';
+import * as prebidGlobal from 'src/prebidGlobal.js';
+import { intersectionSubmodule } from 'modules/intersectionRtdProvider.js';
+import * as utils from 'src/utils.js';
+import {getGlobal} from 'src/prebidGlobal.js';
+import 'src/prebid.js';
+
+describe('Intersection RTD Provider', function () {
+ let sandbox;
+ let placeholder;
+ const pbjs = getGlobal();
+ const adUnit = {
+ code: 'ad-slot-1',
+ mediaTypes: {
+ banner: {
+ sizes: [ [300, 250] ]
+ }
+ },
+ bids: [
+ {
+ bidder: 'fake'
+ }
+ ]
+ };
+ const providerConfig = {name: 'intersection', waitForIt: true};
+ const rtdConfig = {realTimeData: {auctionDelay: 200, dataProviders: [providerConfig]}}
+ describe('IntersectionObserver not supported', function() {
+ beforeEach(function() {
+ sandbox = sinon.sandbox.create();
+ });
+ afterEach(function() {
+ sandbox.restore();
+ sandbox = undefined;
+ });
+ it('init should return false', function () {
+ sandbox.stub(window, 'IntersectionObserver').value(undefined);
+ expect(intersectionSubmodule.init({})).is.false;
+ });
+ });
+ describe('IntersectionObserver supported', function() {
+ beforeEach(function() {
+ sandbox = sinon.sandbox.create();
+ placeholder = createDiv();
+ append();
+ const __config = {};
+ sandbox.stub(_config, 'getConfig').callsFake(function (path) {
+ return utils.deepAccess(__config, path);
+ });
+ sandbox.stub(_config, 'setConfig').callsFake(function (obj) {
+ utils.mergeDeep(__config, obj);
+ });
+ });
+ afterEach(function() {
+ sandbox.restore();
+ remove();
+ sandbox = undefined;
+ placeholder = undefined;
+ pbjs.removeAdUnit();
+ });
+ it('init should return true', function () {
+ expect(intersectionSubmodule.init({})).is.true;
+ });
+ it('should set intersection. (request with "adUnitCodes")', function(done) {
+ pbjs.addAdUnits([utils.deepClone(adUnit)]);
+ config.setConfig(rtdConfig);
+ const onDone = sandbox.stub();
+ const requestBidObject = {adUnitCodes: [adUnit.code]};
+ intersectionSubmodule.init({});
+ intersectionSubmodule.getBidRequestData(
+ requestBidObject,
+ onDone,
+ providerConfig
+ );
+ setTimeout(function() {
+ expect(pbjs.adUnits[0].bids[0]).to.have.property('intersection');
+ done();
+ }, 200);
+ });
+ it('should set intersection. (request with "adUnits")', function(done) {
+ config.setConfig(rtdConfig);
+ const onDone = sandbox.stub();
+ const requestBidObject = {adUnits: [utils.deepClone(adUnit)]};
+ intersectionSubmodule.init();
+ intersectionSubmodule.getBidRequestData(
+ requestBidObject,
+ onDone,
+ providerConfig
+ );
+ setTimeout(function() {
+ expect(requestBidObject.adUnits[0].bids[0]).to.have.property('intersection');
+ done();
+ }, 200);
+ });
+ it('should set intersection. (request all)', function(done) {
+ pbjs.addAdUnits([utils.deepClone(adUnit)]);
+ config.setConfig(rtdConfig);
+ const onDone = sandbox.stub();
+ const requestBidObject = {};
+ intersectionSubmodule.init({});
+ intersectionSubmodule.getBidRequestData(
+ requestBidObject,
+ onDone,
+ providerConfig
+ );
+ setTimeout(function() {
+ expect(pbjs.adUnits[0].bids[0]).to.have.property('intersection');
+ done();
+ }, 200);
+ });
+ it('should call done due timeout', function(done) {
+ config.setConfig(rtdConfig);
+ remove();
+ const onDone = sandbox.stub();
+ const requestBidObject = {adUnits: [utils.deepClone(adUnit)]};
+ intersectionSubmodule.init({});
+ intersectionSubmodule.getBidRequestData(
+ requestBidObject,
+ onDone,
+ {...providerConfig, test: 1}
+ );
+ setTimeout(function() {
+ sinon.assert.calledOnce(onDone);
+ expect(requestBidObject.adUnits[0].bids[0]).to.not.have.property('intersection');
+ done();
+ }, 300);
+ });
+ });
+ function createDiv() {
+ const div = document.createElement('div');
+ div.id = adUnit.code;
+ return div;
+ }
+ function append() {
+ placeholder && document.body.appendChild(placeholder);
+ }
+ function remove() {
+ placeholder && placeholder.parentElement && placeholder.parentElement.removeChild(placeholder);
+ }
+});