Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

♻️ Move tests and reference implementation to use promise on context.requestResize API #30192

Merged
merged 1 commit into from Sep 11, 2020
Merged

♻️ Move tests and reference implementation to use promise on context.requestResize API #30192

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
8 changes: 0 additions & 8 deletions ads/_ping_.js
View file
Open in desktop
Expand Up @@ -33,14 +33,6 @@ export function _ping_(global, data) {
global.document.getElementById('c').textContent = data.ping;
global.ping = Object.create(null);

global.context.onResizeSuccess(() => {
global.ping.resizeSuccess = true;
});

global.context.onResizeDenied(() => {
global.ping.resizeSuccess = false;
});

if (data.ad_container) {
devAssert(global.context.container == data.ad_container, 'wrong container');
}
Expand Down
61 changes: 24 additions & 37 deletions examples/ac-creative.js
View file
Open in desktop
@@ -1,22 +1,16 @@
if (!window.context){
if (!window.context) {
// window.context doesn't exist yet, must perform steps to create it
// before using it
console.log("window.context NOT READY");

// must add listener for the creation of window.context
window.addEventListener('amp-windowContextCreated', function(){
console.log("window.context created and ready to use");
window.context.onResizeSuccess(resizeSuccessCallback);
window.context.onResizeDenied(resizeDeniedCallback);
});
console.log('window.context NOT READY');

// load ampcontext-lib.js which will create window.context
ampContextScript = document.createElement('script');
ampContextScript.src = "https://localhost:8000/dist.3p/current/ampcontext-lib.js";
ampContextScript.src =
'https://localhost:8000/dist.3p/current/ampcontext-lib.js';
document.head.appendChild(ampContextScript);
}

function intersectionCallback(payload){
function intersectionCallback(payload) {
var changes = payload.changes;
// Code below is simply an example.
var latestChange = changes[changes.length - 1];
Expand All @@ -34,13 +28,12 @@ function intersectionCallback(payload){
var vy = latestChange.boundingClientRect.y;

// Viewable percentage.
var viewablePerc = (vw * vh) / (w * h) * 100;
var viewablePerc = ((vw * vh) / (w * h)) * 100;

console.log(viewablePerc, w, h, vw, vh, vx, vy);

}

function dummyCallback(changes){
function dummyCallback(changes) {
console.log(changes);
}

Expand All @@ -49,39 +42,33 @@ var stopVisFunc;
var shouldStopInt = false;
var stopIntFunc;

function resizeSuccessCallback(requestedHeight, requestedWidth){
console.log("Success!");
console.log(this);
resizeTo(requestedHeight, requestedWidth);
console.log(requestedHeight);
console.log(requestedWidth);
}

function resizeTo(height, width){
this.innerWidth = width;
this.innerHeight = height;
}

function resizeDeniedCallback(requestedHeight, requestedWidth){
console.log("DENIED");
console.log(requestedHeight);
console.log(requestedWidth);
}

function toggleObserveIntersection(){
if (shouldStopInt){
function toggleObserveIntersection() {
if (shouldStopInt) {
stopIntFunc();
} else {
stopIntFunc = window.context.observeIntersection(intersectionCallback);
}
shouldStopInt = !shouldStopInt;
}

function toggleObserveVisibility(){
if (shouldStopVis){
function toggleObserveVisibility() {
if (shouldStopVis) {
stopVisFunc();
} else {
stopVisFunc = window.context.observePageVisibility(dummyCallback);
}
shouldStopVis = !shouldStopVis;
}

function resizeAd() {
window.context
.requestResize(500, 600)
.then(function () {
console.log('Success!');
this.innerWidth = 500;
this.innerHeight = 600;
})
.catch(function () {
console.log('DENIED');
});
}
34 changes: 22 additions & 12 deletions examples/ampcontext-creative-json.html
View file
Open in desktop
@@ -1,15 +1,25 @@
<!doctype html>
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: lightblue;
}
</style>
<script src="https://localhost:8000/examples/ac-creative.js"></script>
</head>

<head>
<style>
body {
background: lightblue;
}
</style>
<script src='https://localhost:8000/examples/ac-creative.js'></script>
</head>

<body> Test Ad using ampcontext.js to create window.context <button onclick='toggleObserveIntersection()'>Toggle Observe Intersections</button> <button onclick='toggleObserveVisibility()'>Toggle Observe visibility</button> <button onclick='window.context.requestResize(500,600)'>resize ad</button> <button onclick='console.log(window.context)'>console.log(window.context)</button> </body>

<body>
Test Ad using ampcontext.js to create window.context
<button onclick="toggleObserveIntersection()">
Toggle Observe Intersections
</button>
<button onclick="toggleObserveVisibility()">
Toggle Observe visibility
</button>
<button onclick="resizeAd()">resize ad</button>
<button onclick="console.log(window.context)">
console.log(window.context)
</button>
</body>
</html>
84 changes: 41 additions & 43 deletions examples/ampcontext-creative.html
View file
Open in desktop
@@ -1,28 +1,25 @@
<!doctype html>
<!DOCTYPE html>
<html>
<head>
<style>body { background: lightblue; }</style>
<style>
body {
background: lightblue;
}
</style>
<script>
if (!window.context){
if (!window.context) {
// window.context doesn't exist yet, must perform steps to create it
// before using it
console.log('window.context NOT READY');

// must add listener for the creation of window.context
window.addEventListener('amp-windowContextCreated', () => {
console.log('window.context created and ready to use');
window.context.onResizeSuccess(resizeSuccessCallback);
window.context.onResizeDenied(resizeDeniedCallback);
});

// load ampcontext-lib.js which will create window.context
ampContextScript = document.createElement('script');
ampContextScript.src =
'http://localhost:8000/dist.3p/current/ampcontext-lib.js';
'http://localhost:8000/dist.3p/current/ampcontext-lib.js';
document.head.appendChild(ampContextScript);
}

function intersectionCallback(payload){
function intersectionCallback(payload) {
var changes = payload.changes;
// Code below is simply an example.
var latestChange = changes[changes.length - 1];
Expand All @@ -40,13 +37,12 @@
var vy = latestChange.boundingClientRect.y;

// Viewable percentage.
var viewablePerc = (vw * vh) / (w * h) * 100;
var viewablePerc = ((vw * vh) / (w * h)) * 100;

console.log(viewablePerc, w, h, vw, vh, vx, vy);

}

function dummyCallback(changes){
function dummyCallback(changes) {
console.log(changes);
}

Expand All @@ -55,50 +51,52 @@
var shouldStopInt = false;
var stopIntFunc;

function resizeSuccessCallback(requestedHeight, requestedWidth){
console.log('Success!');
console.log(this);
resizeTo(requestedHeight, requestedWidth);
console.log(requestedHeight);
console.log(requestedWidth);
}

function resizeTo(height, width){
this.innerWidth = width;
this.innerHeight = height;
}

function resizeDeniedCallback(requestedHeight, requestedWidth){
console.log('DENIED');
console.log(requestedHeight);
console.log(requestedWidth);
}

function toggleObserveIntersection(){
if (shouldStopInt){
function toggleObserveIntersection() {
if (shouldStopInt) {
stopIntFunc();
} else {
stopIntFunc = window.context.observeIntersection(intersectionCallback);
stopIntFunc = window.context.observeIntersection(
intersectionCallback
);
}
shouldStopInt = !shouldStopInt;
}

function toggleObserveVisibility(){
if (shouldStopVis){
function toggleObserveVisibility() {
if (shouldStopVis) {
stopVisFunc();
} else {
stopVisFunc = window.context.observePageVisibility(dummyCallback);
}
shouldStopVis = !shouldStopVis;
}

function resizeAd() {
window.context
.requestResize(500, 600)
.then(function () {
console.log('Success!');
this.innerWidth = 500;
this.innerHeight = 600;
})
.catch(function () {
console.log('DENIED');
});
}
</script>
</head>

<body>
Test Ad using ampcontext.js to create window.context
<button onclick='toggleObserveIntersection()'>Toggle Observe Intersections</button>
<button onclick='toggleObserveVisibility()'>Toggle Observe visibility</button>
<button onclick='window.context.requestResize(500,600)'>resize ad</button>
<button onclick='console.log(window.context)'>console.log(window.context)</button>
<button onclick="toggleObserveIntersection()">
Toggle Observe Intersections
</button>
<button onclick="toggleObserveVisibility()">
Toggle Observe visibility
</button>
<button onclick="resizeAd()">resize ad</button>
<button onclick="console.log(window.context)">
console.log(window.context)
</button>
</body>
</html>
19 changes: 3 additions & 16 deletions test/integration/test-amp-ad-3p.js
View file
Open in desktop
Expand Up @@ -139,8 +139,6 @@ describe('amp-ad 3P', () => {
expect(context.addContextToIframe).to.be.a('function');
expect(context.getHtml).to.be.a('function');
expect(context.noContentAvailable).to.be.a('function');
expect(context.onResizeDenied).to.be.a('function');
expect(context.onResizeSuccess).to.be.a('function');
expect(context.renderStart).to.be.a('function');
expect(context.reportRenderedEntityIdentifier).to.be.a('function');
expect(context.requestResize).to.be.a('function');
Expand All @@ -162,11 +160,9 @@ describe('amp-ad 3P', () => {
.then(() => {
expect(iframe.offsetHeight).to.equal(250);
expect(iframe.offsetWidth).to.equal(300);
expect(iframe.contentWindow.ping.resizeSuccess).to.be.undefined;
iframe.contentWindow.context.requestResize(200, 50);
return poll('wait for embed-size to be received', () => {
return !!fixture.messages.getFirstMessageEventOfType('embed-size');
});
return iframe.contentWindow.context
.requestResize(200, 50)
.catch(() => {});
})
.then(() => {
// The userActivation feature is known to be available on Chrome 74+
Expand All @@ -177,15 +173,6 @@ describe('amp-ad 3P', () => {
expect(event.userActivation).to.be.ok;
expect(event.userActivation.isActive).to.be.a('boolean');
}

return poll(
'wait for attemptChangeSize',
() => {
return iframe.contentWindow.ping.resizeSuccess != undefined;
},
null,
5000
);
})
.then(async function () {
lastIO = null;
Expand Down